mirror of
https://github.com/IdleEndeavor/gamesearch.git
synced 2025-04-29 22:24:33 +02:00
a4855558f4
Updated the ReadMe file to reflect changes to indexed sources Simplified the code and made minor changes to CSE settings Consolidated tips and donation button into a hide-able notification centre Simplified Additional Information/Terms Added spots for potential AD/Partner integrations Removed buttons to Privacy Policy and Terms and Conditions as they have been massively simplified Removed floating links button from mobile view
349 lines
9.3 KiB
CSS
349 lines
9.3 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;
|
|
}
|
|
|
|
/* Fade animation for banner images */
|
|
.searchlogo {
|
|
cursor: pointer;
|
|
transition: opacity 1s ease-in-out; /* Transition for fade effect */
|
|
opacity: 1; /* Ensures image is visible initially */
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Notification Center */
|
|
.engine-swticher-2 {
|
|
position: fixed;
|
|
margin-top: 15px;
|
|
margin-right: 10px;
|
|
top: 0;
|
|
right: 0;
|
|
width: 20%; /* 1/5 of the page width */
|
|
font-family: Roboto, sans-serif;
|
|
z-index: 1000; /* Ensure it is on top of other elements */
|
|
}
|
|
|
|
.engine-swticher-2 .item {
|
|
position: relative;
|
|
color: white; /* Text color */
|
|
padding: 10px;
|
|
margin-bottom: 10px; /* Space between items */
|
|
border: 5px solid white; /* White border */
|
|
border-radius: 5px; /* Rounded corners */
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Shadow for better visibility */
|
|
width: 100%; /* Full width of the container */
|
|
box-sizing: border-box; /* Include padding and border in the width */
|
|
display: block; /* Ensure items are initially visible */
|
|
}
|
|
|
|
.engine-swticher-2 .item.hidden {
|
|
display: none; /* Hide items with the 'hidden' class */
|
|
}
|
|
|
|
.engine-swticher-2 .item .close-btn {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
color: white;
|
|
}
|
|
|
|
/* .engine-swticher-2 .item:hover {
|
|
background-color: #F63F4D; /* Darker background on hover
|
|
color: #000000;
|
|
} */
|
|
|
|
#donate-button {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
/* Corner Box */
|
|
.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;
|
|
padding: 5px 10px !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;
|
|
padding: 5px 10px !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;
|
|
}
|
|
|
|
/* Screen-size dependant options */
|
|
@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;
|
|
}
|
|
|
|
.engine-switcher-2 {
|
|
display: none;
|
|
}
|
|
|
|
.engine-swticher-2 .item {
|
|
display: none;
|
|
}
|
|
|
|
.games-found {
|
|
display: none;
|
|
}
|
|
} |