mirror of
https://github.com/IdleEndeavor/gamesearch.git
synced 2025-04-29 22:24:33 +02:00
382 lines
10 KiB
CSS
382 lines
10 KiB
CSS
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
|
|
url('fonts/roboto-regular-webfont.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #121212;
|
|
height: 100%;
|
|
font-family: Roboto;
|
|
}
|
|
|
|
.container {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Search Bar and Logo Container Div */
|
|
.maindiv {
|
|
margin: auto;
|
|
position: relative;
|
|
text-align: left;
|
|
top: 25%;
|
|
width: 40%;
|
|
}
|
|
|
|
.maindiv img {
|
|
max-width: 70%;
|
|
}
|
|
|
|
.searchlogo {
|
|
text-align: center;
|
|
}
|
|
|
|
.tips {
|
|
color: white;
|
|
}
|
|
|
|
/* Search Engine Switcher */
|
|
.engine-swticher {
|
|
display: flex;
|
|
position: fixed;
|
|
flex-direction: column;
|
|
font-family: Roboto;
|
|
margin: 10px;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.engine-swticher a {
|
|
padding: 5px;
|
|
font-size: 20px;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Games Found Counter */
|
|
.games-found {
|
|
display: flex;
|
|
bottom: 0;
|
|
left: 0;
|
|
flex-direction: column;
|
|
font-family: Roboto;
|
|
margin: 10px;
|
|
width: fit-content;
|
|
position: fixed;
|
|
}
|
|
|
|
.games-found a {
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
width: 20%;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Terms of Use, Privacy Policy and GitHub Link */
|
|
.terms {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
display: flex;
|
|
font-family: Roboto;
|
|
margin: 10px;
|
|
}
|
|
|
|
.terms a {
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Search Box */
|
|
/* search button */
|
|
.gsc-search-button .gsc-search-button-v2 {
|
|
border-radius: 50%;
|
|
border-color: #F63F4D;
|
|
background-color: #F63F4D;
|
|
height: 45px;
|
|
width: 45px;
|
|
margin: auto;
|
|
padding:10px !important;
|
|
box-shadow: 0 0 10px black;
|
|
}
|
|
/* search input box */
|
|
.gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
|
|
border-radius: 20px !important; /* rounded corner */
|
|
border-color: #F63F4D !important;
|
|
border-width: 5px !important;
|
|
background-color: #121212 !important; /* inner background colour */
|
|
color: white;
|
|
font-family: 'Roboto';
|
|
font-size: 20px;
|
|
}
|
|
/* searchbox outer shadow */
|
|
.gsc-input-box {
|
|
box-shadow: 0 0 10px black;
|
|
}
|
|
/* resets colour of white box behind searchbox */
|
|
.gsc-control-cse {
|
|
background-color: transparent !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
/* gets rid of 'x results in x seconds' text */
|
|
.gsc-result-info {
|
|
display: none;
|
|
}
|
|
/* gets rid of images gathered from indexed results */
|
|
.gsc-thumbnail {
|
|
display: none;
|
|
}
|
|
/* results pagination design */
|
|
.gsc-cursor-page {
|
|
font-size: 1.5em;
|
|
padding: 5px 10px !important;
|
|
}
|
|
/* gets rid of description gathered from indexed results */
|
|
.gs-snippet {
|
|
display: none;
|
|
}
|
|
/* 'search on google for x' text remover */
|
|
.gcsc-more-maybe-branding-root {
|
|
display: none;
|
|
}
|
|
/* sort-by option remover */
|
|
.gsc-orderby {
|
|
display: none;
|
|
}
|
|
/* colours result titles white (including visited results) */
|
|
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
|
|
color: white !important;
|
|
font-size: 20px;
|
|
}
|
|
/* styles URL under result titles */
|
|
.gs-promotion .gs-visibleUrl, .gs-webResult .gs-visibleUrl {
|
|
color: green !important;
|
|
font-size: 15px;
|
|
}
|
|
/* colouring of search result background and border */
|
|
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
|
|
background-color: #121212 !important;
|
|
border-color: #F63F4D !important;
|
|
border: none !important;
|
|
padding-bottom: 5px !important;
|
|
}
|
|
/* colouring of upper border on search results */
|
|
.gsc-above-wrapper-area {
|
|
border-bottom: black !important;
|
|
}
|
|
/* styles pagination switcher */
|
|
.gsc-results .gsc-cursor-box .gsc-cursor-page {
|
|
border-color: #F63F4D !important;
|
|
border-radius: 50% !important;
|
|
background-color: transparent !important;
|
|
color: white !important;
|
|
margin: 5px;
|
|
}
|
|
/* styles active page pagination switcher */
|
|
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
|
|
border-color: #F63F4D !important;
|
|
color: #F63F4D !important;
|
|
border-bottom: 2px solid #F63F4D !important;
|
|
border-radius: 0px !important;
|
|
padding: 5px 10px !important;
|
|
}
|
|
/* adds padding above pagination switcher */
|
|
.gsc-results .gsc-cursor-box {
|
|
margin: 20px !important;
|
|
border: none !important;
|
|
}
|
|
.gsc-results .gsc-cursor {
|
|
color: #F63F4D !important;
|
|
fill: #F63F4D !important;
|
|
}
|
|
/* makes pagination switcher background transparent */
|
|
.gsc-results {
|
|
background-color: transparent !important;
|
|
}
|
|
/* colours search phrase clear button */
|
|
.gsst_a .gscb_a {
|
|
color: #F63F4D !important;
|
|
cursor: pointer;
|
|
}
|
|
/* styles sizing and colouring of autocomplete suggestions */
|
|
.gsc-completion-container {
|
|
color: white !important;
|
|
border-color: #F63F4D !important;
|
|
border-radius: 10px !important;
|
|
padding: 10px !important;
|
|
}
|
|
/* styles autocomplete suggestion when hovered */
|
|
.gssb_a:hover {
|
|
background: #F63F4D !important;
|
|
color: white !important;
|
|
}
|
|
/* removes border-line below filters switcher and removes border on mobile view */
|
|
.gsc-refinementsArea {
|
|
background-color: none !important;
|
|
border: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
/* changes colour of scrollable gradient in mobile view */
|
|
.gsc-refinementsGradient {
|
|
background: linear-gradient(to left,#F63F4D,rgba(255,255,255,0)) !important;
|
|
}
|
|
/* styles inactive filter tabs */
|
|
.gsc-tabHeader.gsc-tabhInactive, .gsc-refinementHeader.gsc-refinementhInactive {
|
|
color: white !important;
|
|
border-color: #121212 !important;
|
|
background-color: #121212 !important;
|
|
}
|
|
/* styles active filter tabs */
|
|
.gsc-tabHeader.gsc-tabhActive, .gsc-refinementHeader.gsc-refinementhActive {
|
|
color: #F63F4D !important;
|
|
border-color: #F63F4D !important;
|
|
background-color: #121212 !important;
|
|
}
|
|
/* styles tags on search results */
|
|
.gsc-control-cse .gsc-table-result {
|
|
font-family: Roboto !important;
|
|
background: white !important;
|
|
border-radius: 3px !important;
|
|
margin: 5px auto !important;
|
|
padding: 0 5px !important;
|
|
width: fit-content !important;
|
|
float: left !important;
|
|
margin-left: 3px !important;
|
|
}
|
|
/* colours url on search results */
|
|
.gs-webResult div.gs-visibleUrl {
|
|
color: lightgreen !important;
|
|
}
|
|
/* removes find more on Google text in mobile view */
|
|
.gcsc-find-more-on-google-root {
|
|
display: none;
|
|
}
|
|
/* removes ads from the search results */
|
|
.gsc-adBlock {
|
|
display: none !important;
|
|
}
|
|
|
|
/* FAB Wheel */
|
|
.adminActions {
|
|
position: fixed;
|
|
bottom: 35px; right: 35px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.adminButton {
|
|
height: 60px;
|
|
width: 60px;
|
|
background-color: #F63F4D;
|
|
border-radius: 50%;
|
|
display: block;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.adminButton i {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.adminButtons {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 120%;
|
|
text-align: center;
|
|
}
|
|
|
|
.adminButtons a {
|
|
display: block;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
text-decoration: none;
|
|
margin: 10px auto 0;
|
|
line-height: 1.15;
|
|
color: #fff;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: relative;
|
|
box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
|
|
}
|
|
|
|
.adminButtons a:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.adminButtons a:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;}
|
|
.adminButtons a:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;}
|
|
.adminButtons a:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;}
|
|
.adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;}
|
|
|
|
.adminActions a i {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.adminToggle {
|
|
-webkit-appearance: none;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
top: 0; left: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
z-index: 2;
|
|
transition: box-shadow .2s ease-in-out;
|
|
box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
|
|
}
|
|
|
|
.adminToggle:hover {
|
|
box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
|
|
}
|
|
|
|
.adminToggle:checked ~ .adminButtons a {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.maindiv {
|
|
margin: auto;
|
|
position: relative;
|
|
text-align: left;
|
|
top: 25%;
|
|
width: 80%;
|
|
}
|
|
|
|
.maindiv img {
|
|
max-width: 75%;
|
|
}
|
|
|
|
.terms {
|
|
display: none;
|
|
}
|
|
|
|
.engine-swticher {
|
|
display: none;
|
|
}
|
|
|
|
.games-found {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.adminActions {
|
|
visibility: visible;
|
|
}
|
|
} |