mirror of
https://github.com/IdleEndeavor/gamesearch.git
synced 2025-04-29 22:24:33 +02:00
Complete Rave Search UI ReWrite
UI is more intuitive and minimal. All CSS and Javascript clutter has been removed. Website is now 65% faster.
This commit is contained in:
IdleEndeavor
parent
966fb5379c
commit
c8c58b123c
817
css/index.css
817
css/index.css
@ -1,414 +1,263 @@
|
|||||||
@import url(https://fonts.googleapis.com/css?family=Poiret+One|Varela+Round);
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||||
|
|
||||||
html, body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: #121212;
|
background-color: #121212;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.maindiv {
|
.container {
|
||||||
margin: auto;
|
height: 100%;
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
top: 25%;
|
|
||||||
width: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.maindiv img {
|
/* Search Bar and Logo Container Div */
|
||||||
max-width: 50%;
|
.maindiv {
|
||||||
}
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
top: 25%;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maindiv img {
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchlogo {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.searchlogo {
|
/* Search Engine Switcher */
|
||||||
text-align: center;
|
.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: 20px;
|
||||||
|
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: 20px;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Search Box */
|
/* Search Box */
|
||||||
.searchbox {
|
/* search button */
|
||||||
width: 60%;
|
.gsc-search-button .gsc-search-button-v2 {
|
||||||
}
|
border-radius: 50%;
|
||||||
|
border-color: #F63F4D;
|
||||||
.search {
|
background-color: #F63F4D;
|
||||||
text-align: centre;
|
height: 45px;
|
||||||
padding-top: 150px;
|
width: 45px;
|
||||||
width: 60%;
|
margin: auto;
|
||||||
margin: 0 auto 0 auto;
|
padding:10px !important;
|
||||||
animation: slidein 0.3s ease;
|
box-shadow: 0 0 10px black;
|
||||||
}
|
}
|
||||||
|
/* search input box */
|
||||||
.search img {
|
.gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
|
||||||
display: block;
|
border-radius: 20px !important; /* rounded corner */
|
||||||
margin: 0 auto;
|
border-color: #F63F4D !important;
|
||||||
width: 50%;
|
border-width: 5px !important;
|
||||||
height: auto;
|
background-color: #121212 !important; /* inner background colour */
|
||||||
margin-bottom: -30px;
|
color: white;
|
||||||
animation: slidein 0.3s ease;
|
font-family: 'Roboto';
|
||||||
}
|
font-size: 20px;
|
||||||
|
}
|
||||||
.gsc-search-button .gsc-search-button-v2 {
|
/* searchbox outer shadow */
|
||||||
border-radius: 50%;
|
.gsc-input-box {
|
||||||
border-color: #F63F4D;
|
box-shadow: 0 0 10px black;
|
||||||
background-color: #F63F4D;
|
}
|
||||||
font-family: 'Roboto';
|
/* resets colour of white box behind searchbox */
|
||||||
margin: auto;
|
.gsc-control-cse {
|
||||||
}
|
background-color: transparent !important;
|
||||||
|
border-color: transparent !important;
|
||||||
.gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
|
}
|
||||||
border-radius: 20px !important;
|
/* gets rid of 'x results in x seconds' text */
|
||||||
border-color: #F63F4D !important;
|
.gsc-result-info {
|
||||||
border-width: 5px !important;
|
display: none;
|
||||||
background-color: #121212 !important;
|
}
|
||||||
color: white;
|
/* gets rid of images gathered from indexed results */
|
||||||
font-family: 'Roboto';
|
.gsc-thumbnail {
|
||||||
font-size: 20px;
|
display: none;
|
||||||
}
|
}
|
||||||
|
/* results pagination design */
|
||||||
input.gsc-input {
|
.gsc-cursor-page {
|
||||||
margin: auto 10px auto 10px !important;
|
font-size: 1.5em;
|
||||||
border-radius: 0px !important;
|
padding: 5px 10px !important;
|
||||||
border: none !important;
|
}
|
||||||
}
|
/* gets rid of description gathered from indexed results */
|
||||||
|
.gs-snippet {
|
||||||
.gsc-input-box {
|
display: none;
|
||||||
box-shadow: 0 0 10px black;
|
}
|
||||||
}
|
/* 'search on google for x' text remover */
|
||||||
|
.gcsc-more-maybe-branding-root {
|
||||||
button.gsc-search-button {
|
display: none;
|
||||||
padding:10px !important;
|
}
|
||||||
background-color: #F63F4D;
|
/* sort-by option remover */
|
||||||
box-shadow: 0 0 10px black;
|
.gsc-orderby {
|
||||||
height: 45px;
|
display: none;
|
||||||
width: 45px;
|
}
|
||||||
}
|
/* 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 {
|
||||||
.gsc-result-info {
|
color: white !important;
|
||||||
display: none;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
/* styles URL under result titles */
|
||||||
.gs-webResult {
|
.gs-promotion .gs-visibleUrl, .gs-webResult .gs-visibleUrl {
|
||||||
padding: 1.5em;
|
color: green !important;
|
||||||
}
|
font-size: 15px;
|
||||||
|
}
|
||||||
.gsc-thumbnail {
|
/* colouring of search result background and border */
|
||||||
display: none;
|
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
|
||||||
}
|
background-color: #121212 !important;
|
||||||
|
border-color: #F63F4D !important;
|
||||||
.gsc-cursor-page {
|
border: none !important;
|
||||||
font-size: 1.5em;
|
padding-bottom: 5px !important;
|
||||||
padding: 5px 10px !important;
|
}
|
||||||
}
|
/* colouring of upper border on search results */
|
||||||
|
.gsc-above-wrapper-area {
|
||||||
.gs-snippet {
|
border-bottom: black !important;
|
||||||
display: none;
|
}
|
||||||
}
|
/* styles pagination switcher */
|
||||||
|
|
||||||
.gs-title a {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gcsc-more-maybe-branding-root {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-orderby {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-snippet-metadata {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-control-cse {
|
|
||||||
background-color: transparent !important;
|
|
||||||
border-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gs-promotion .gs-visibleUrl, .gs-webResult .gs-visibleUrl {
|
|
||||||
color: green !important;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
|
|
||||||
background-color: #121212 !important;
|
|
||||||
border-color: #F63F4D !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-webResult.gsc-result {
|
|
||||||
border: none !important;
|
|
||||||
border-bottom: 5px solid #F63F4D !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-above-wrapper-area {
|
|
||||||
border-bottom: black !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-cursor-box .gs-bidi-start-align {
|
|
||||||
background-color: black !important;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-results .gsc-cursor-box {
|
|
||||||
margin: 15px !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gs-spelling .gs-spelling-original {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-results .gsc-cursor-box .gsc-cursor-page {
|
|
||||||
border-color: #F63F4D !important;
|
|
||||||
border-radius: 50% !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
color: #F63F4D !important;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
|
|
||||||
border-color: #F63F4D !important;
|
|
||||||
background-color: #F63F4D !important;
|
|
||||||
color: white !important;
|
|
||||||
border: 5px solid #F63F4D !important;
|
|
||||||
border-radius: 20px !important;
|
|
||||||
padding: 5px 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-results .gsc-cursor-box {
|
|
||||||
margin: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-results {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-adBlock {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsst_a .gscb_a {
|
|
||||||
color: #F63F4D !important;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-results .gsc-cursor {
|
|
||||||
fill: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-completion-container {
|
|
||||||
background: #121212 !important;
|
|
||||||
color: white !important;
|
|
||||||
border-color: #F63F4D !important;
|
|
||||||
border-radius: 10px !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gssb_a:hover {
|
|
||||||
background: #F63F4D !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-refinementsArea {
|
|
||||||
border-bottom: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-tabHeader.gsc-tabhInactive, .gsc-refinementHeader.gsc-refinementhInactive {
|
|
||||||
color: white !important;
|
|
||||||
border-color: #121212 !important;
|
|
||||||
background-color: #121212 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-tabHeader.gsc-tabhActive, .gsc-refinementHeader.gsc-refinementhActive {
|
|
||||||
color: #F63F4D !important;
|
|
||||||
border-color: #F63F4D !important;
|
|
||||||
background-color: #121212 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gsc-control-cse .gsc-table-result {
|
|
||||||
font-family: Roboto !important;
|
|
||||||
background: white !important;
|
|
||||||
border-radius: 5px !important;
|
|
||||||
margin: auto !important;
|
|
||||||
padding: 0 5px !important;
|
|
||||||
width: fit-content !important;
|
|
||||||
float: left !important;
|
|
||||||
margin-left: 5px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gs-webResult div.gs-visibleUrl {
|
|
||||||
color: lightgreen !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.gsc-results .gsc-cursor-box .gsc-cursor-page {
|
.gsc-results .gsc-cursor-box .gsc-cursor-page {
|
||||||
border-color: #F63F4D !important;
|
border-color: #F63F4D !important;
|
||||||
border-radius: 25px !important;
|
border-radius: 50% !important;
|
||||||
background-color: #F63F4D !important;
|
background-color: transparent !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
margin: auto !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 {
|
.gsc-results .gsc-cursor-box {
|
||||||
border: none !important;
|
margin: 20px !important;
|
||||||
border-radius: 20px !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
.gsc-results .gsc-cursor {
|
||||||
.gsc-cursor-next-page {
|
color: #F63F4D !important;
|
||||||
color: white !important;
|
fill: #F63F4D !important;
|
||||||
font-weight: bold !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 {
|
||||||
|
background: #121212 !important;
|
||||||
|
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 {
|
.gcsc-find-more-on-google-root {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
/* removes ads from the search results */
|
||||||
}
|
.gsc-adBlock {
|
||||||
|
display: none !important;
|
||||||
/* No Javascript Warning */
|
}
|
||||||
#noscript-warning {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 5px 0;
|
|
||||||
color: white;
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Slideout Sidebar */
|
|
||||||
.toggle {
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 2em;
|
|
||||||
color: white;
|
|
||||||
-webkit-transition: all 0.15s ease-out 0;
|
|
||||||
-moz-transition: all 0.15s ease-out 0;
|
|
||||||
transition: all 0.45s ease-out 0;
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
left: 20px;
|
|
||||||
z-index: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
animation: slidein 0.3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
left: -190px;
|
|
||||||
-webkit-transition: all 0.15s ease-out 0;
|
|
||||||
-moz-transition: all 0.15s ease-out 0;
|
|
||||||
transition: all 0.15s ease-out 0;
|
|
||||||
width: 8rem;
|
|
||||||
padding: 1.5em;
|
|
||||||
background: black;
|
|
||||||
box-shadow: 0 0 10px black;
|
|
||||||
animation: slidein 0.3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar img {
|
|
||||||
width: 80px;
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar li a {
|
|
||||||
color: white;
|
|
||||||
font-family: 'Roboto';
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: 200%;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h4 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Roboto';
|
|
||||||
bottom: 10px;
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#foundcounter {
|
|
||||||
margin: 0 0 50px 0;
|
|
||||||
padding: 0;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Roboto';
|
|
||||||
bottom: 10px;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 15px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#foundcounterno {
|
|
||||||
margin: 0 0 70px 0;
|
|
||||||
padding: 0;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Roboto';
|
|
||||||
bottom: 10px;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 15px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar a:hover {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
#slide:checked + .container .sidebar {
|
|
||||||
left: 0px;
|
|
||||||
transition: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#slide:checked + .container .toggle {
|
|
||||||
left: 200px;
|
|
||||||
transition: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#slide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-title {
|
|
||||||
color: white;
|
|
||||||
font-family: 'Roboto';
|
|
||||||
}
|
|
||||||
|
|
||||||
.at-tjin-title {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.at-resp-share-element {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.at-tjin-element .at-tjin-btn {
|
|
||||||
transition: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FAB Wheel */
|
/* FAB Wheel */
|
||||||
.adminActions {
|
.adminActions {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 35px; right: 35px;
|
bottom: 35px; right: 35px;
|
||||||
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.adminButton {
|
.adminButton {
|
||||||
@ -490,173 +339,33 @@ html, body {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Share Buttons */
|
@media (max-width: 1000px) {
|
||||||
.share {
|
.maindiv {
|
||||||
display: flex;
|
margin: auto;
|
||||||
text-align: center;
|
position: relative;
|
||||||
align-items: center;
|
text-align: left;
|
||||||
justify-content: center;
|
top: 25%;
|
||||||
}
|
width: 80%;
|
||||||
|
|
||||||
.share-button {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button img {
|
|
||||||
width: 50px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Preloader */
|
|
||||||
.preloader_bg{
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999999;
|
|
||||||
background: #121212;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preloader{
|
|
||||||
border: 0 soild transparent;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50vh - 75px);
|
|
||||||
left: calc(50vw - 75px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preloader:before, .preloader:after{
|
|
||||||
content: '';
|
|
||||||
border: 1em solid #F63F4D;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
animation: loader 2s linear infinite;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preloader:before{
|
|
||||||
animation-delay: .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loader{
|
|
||||||
0%{
|
|
||||||
transform: scale(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
50%{
|
|
||||||
opacity: 1;
|
.maindiv img {
|
||||||
|
max-width: 75%;
|
||||||
}
|
}
|
||||||
100%{
|
|
||||||
transform: scale(1);
|
.terms {
|
||||||
opacity: 0;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Engine Switcher */
|
.engine-swticher {
|
||||||
.nav {
|
display: none;
|
||||||
position: absolute;
|
}
|
||||||
top: 15px;
|
|
||||||
width: 100%;
|
|
||||||
height: 55px;
|
|
||||||
background-color: transparent;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__link {
|
.games-found {
|
||||||
display: flex;
|
display: none;
|
||||||
flex-direction: column;
|
}
|
||||||
text-align: center;
|
|
||||||
flex-basis: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 14px;
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__link:hover {
|
@media (max-width: 1000px) {
|
||||||
color: #F63F4D;
|
.adminActions {
|
||||||
}
|
visibility: visible;
|
||||||
|
}
|
||||||
.nav__link--active {
|
|
||||||
color: #F63F4D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__icon {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.maindiv {
|
|
||||||
margin: auto;
|
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
top: 25%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.maindiv img {
|
|
||||||
max-width: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
top: unset;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sharemobile {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button-mobile {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
flex-basis: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button-mobile img {
|
|
||||||
width: 40px;
|
|
||||||
height: auto;
|
|
||||||
margin: 0 10px 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adminActions {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 500px) {
|
|
||||||
.sharemobile {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
BIN
img/ravesearch.png
Normal file
BIN
img/ravesearch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
177
index.html
177
index.html
@ -1,70 +1,63 @@
|
|||||||
<!DOCTYPE html>
|
<html lang="en">
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<title>Rave Game Search Engine</title>
|
<title>Rave Game Search</title>
|
||||||
|
|
||||||
<!-- Favicon Import -->
|
<link rel="stylesheet" href="css/index.css">
|
||||||
<link rel="icon" type="text/css" href="img/favicon.png">
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
<link id="favicon" rel="shortcut icon" href="img/favicon.png">
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="twitter:title" content="Rave Game Search">
|
||||||
<!-- CSS Import -->
|
<meta property="og:title" content="Rave Game Search">
|
||||||
<link rel="stylesheet" type="text/css" href="css/index.css">
|
<meta property="twitter:card" content="summary">
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<meta property="twitter:description" content="Find the safest free download links to your favorite Video Games">
|
||||||
|
<meta property="og:description" content="Find the safest free download links to your favorite Video Games">
|
||||||
<!-- Share/Embed Content -->
|
<meta property="twitter:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png">
|
||||||
<meta property="og:url" content="http://ravesgamesearch.pages.dev" />
|
<meta property="og:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png">
|
||||||
<meta property="og:type" content="search-page" />
|
<meta property="description" content="Find the safest free download links to your favorite Video Games">
|
||||||
<meta property="og:title" content="Rave Game Search Engine" />
|
<link href="img/favicon.png" rel="shortcut icon">
|
||||||
<meta property="og:description" content="Find the safest free download links to your favorite games" />
|
|
||||||
<meta property="og:image" content="https://ravegamesearch.pages.dev/img/favicon.png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<!-- No Javascript Warning -->
|
|
||||||
<noscript>
|
|
||||||
<div id="noscript-warning">Rave Game Search uses Javascript to provide its search results. Kindly enable Javascript on your browser and reload the page to restore usability.</div>
|
|
||||||
</noscript>
|
|
||||||
<div class="sharemobile">
|
|
||||||
<div class="share-button-mobile">
|
|
||||||
<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fravegamesearch.pages.dev&text=Rave%20Game%20Search:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Tweet"><img alt="Tweet" src="img/social-icons/Twitter.png" /></a>
|
|
||||||
<a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fravegamesearch.pages.dev"e=Rave%20Game%20Search&s=" target="_blank" title="Post to Tumblr"><img alt="Post to Tumblr" src="img/social-icons/Tumblr.png" /></a>
|
|
||||||
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fravegamesearch.pages.dev&media=https://ravegamesearch.pages.dev/img/ravesearch-homepage-pic.png&description=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI." target="_blank" title="Pin it"><img alt="Pin it" src="img/social-icons/Pinterest.png" /></a>
|
|
||||||
<a href="http://www.reddit.com/submit?url=http%3A%2F%2Fravegamesearch.pages.dev&title=Rave%20Game%20Search" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="img/social-icons/Reddit.png" /></a>
|
|
||||||
<a href="mailto:?subject=Rave%20Game%20Search&body=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI.:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Send email"><img alt="Send email" src="img/social-icons/Email.png" /></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container">
|
||||||
<!-- Preloader -->
|
<!-- Engine Switcher -->
|
||||||
<div class="preloader_bg">
|
<div class="engine-swticher">
|
||||||
<div class="preloader"></div>
|
<a href="https://ravegamesearch.pages.dev">> Game Search</a>
|
||||||
</div>
|
<a href="https://ravebooksearch.com">Book Search</a>
|
||||||
|
<a href="https://ravesoftwaresearch.pages.dev">Software Search</a>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
</div>
|
||||||
<script>
|
<!-- Search Box -->
|
||||||
setTimeout(function(){
|
<div class="maindiv">
|
||||||
$('.preloader_bg').fadeToggle();
|
<div class="searchlogo">
|
||||||
}, 1500);
|
<img class="searchlogo" src="img/search-logo.png" onclick="location.href='index.html';">
|
||||||
</script>
|
</div>
|
||||||
|
<script>
|
||||||
<!-- Slideout Menu -->
|
(function() {
|
||||||
<input type="checkbox" id="slide" name="" value=""/>
|
var cx = "001315572920893299880:p3yigpygfny";
|
||||||
<div class="container">
|
var gcse = document.createElement("script");
|
||||||
<label for="slide" class="toggle">☰</label>
|
gcse.type = "text/javascript";
|
||||||
<nav class="sidebar">
|
gcse.async = true;
|
||||||
<ul>
|
gcse.src = "https://cse.google.com/cse.js?cx=" + cx;
|
||||||
<img src="img/favicon.png" onclick="location.href='index.html';">
|
var s = document.getElementsByTagName("script")[0];
|
||||||
<h5 id="foundcounterno" class="count">0</h5>
|
s.parentNode.insertBefore(gcse, s);
|
||||||
<h5 id="foundcounter">Games Found</h5>
|
})();
|
||||||
<h4>Copyright <script type="text/javascript">document.write(new Date().getFullYear());</script><br>IdleEndeavor</h4>
|
window.onload = function()
|
||||||
</ul>
|
{
|
||||||
</nav>
|
var searchBox = document.getElementById("gsc-i-id1");
|
||||||
</div>
|
searchBox.placeholder="Search for your favourite Games";
|
||||||
<script type="text/javascript">
|
searchBox.title="Rave Game Search Engine";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<gcse:search class="searchbox"></gcse:search>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Games Found Counter -->
|
||||||
|
<div class="games-found">
|
||||||
|
<a class="count">0</a>
|
||||||
|
<a>Games Found</a>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
function updateCounter() {
|
function updateCounter() {
|
||||||
fetch('https://api.countapi.xyz/update/ravegamesearch/ravesearch/?amount=1')
|
fetch('https://api.countapi.xyz/update/ravegamesearch/ravesearch/?amount=1')
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
@ -75,42 +68,14 @@
|
|||||||
|
|
||||||
counterElement = document.getElementsByClassName('count')[0];
|
counterElement = document.getElementsByClassName('count')[0];
|
||||||
</script>
|
</script>
|
||||||
|
<!-- Terms of Use, Privacy Policy and GitHub Link -->
|
||||||
|
<div class="terms">
|
||||||
|
<a href="https://github.com/IdleEndeavor/gamesearch">GitHub |</a>
|
||||||
|
<a href="https://github.com/IdleEndeavor/gamesearch#privacy-policy">Privacy Policy |</a>
|
||||||
|
<a href="https://github.com/IdleEndeavor/gamesearch#terms-of-use">Terms of Use</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Search Box -->
|
<!-- FAB Wheel -->
|
||||||
<div class="maindiv">
|
|
||||||
<div class="searchlogo">
|
|
||||||
<img class="searchlogo" src="img/search-logo.png" onclick="location.href='index.html';">
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
var cx = "001315572920893299880:p3yigpygfny";
|
|
||||||
var gcse = document.createElement("script");
|
|
||||||
gcse.type = "text/javascript";
|
|
||||||
gcse.async = true;
|
|
||||||
gcse.src = "https://cse.google.com/cse.js?cx=" + cx;
|
|
||||||
var s = document.getElementsByTagName("script")[0];
|
|
||||||
s.parentNode.insertBefore(gcse, s);
|
|
||||||
})();
|
|
||||||
window.onload = function()
|
|
||||||
{
|
|
||||||
var searchBox = document.getElementById("gsc-i-id1");
|
|
||||||
searchBox.placeholder="Search for your favourite Games";
|
|
||||||
searchBox.title="Rave Game Search Engine";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<gcse:search class="searchbox"></gcse:search>
|
|
||||||
<div class="share">
|
|
||||||
<div class="share-button">
|
|
||||||
<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fravegamesearch.pages.dev&text=Rave%20Game%20Search:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Tweet"><img alt="Tweet" src="img/social-icons/Twitter.png" /></a>
|
|
||||||
<a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fravegamesearch.pages.dev"e=Rave%20Game%20Search&s=" target="_blank" title="Post to Tumblr"><img alt="Post to Tumblr" src="img/social-icons/Tumblr.png" /></a>
|
|
||||||
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fravegamesearch.pages.dev&media=https://ravegamesearch.pages.dev/img/ravesearch-homepage-pic.png&description=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI." target="_blank" title="Pin it"><img alt="Pin it" src="img/social-icons/Pinterest.png" /></a>
|
|
||||||
<a href="http://www.reddit.com/submit?url=http%3A%2F%2Fravegamesearch.pages.dev&title=Rave%20Game%20Search" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="img/social-icons/Reddit.png" /></a>
|
|
||||||
<a href="mailto:?subject=Rave%20Game%20Search&body=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI.:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Send email"><img alt="Send email" src="img/social-icons/Email.png" /></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- FAB Wheel -->
|
|
||||||
<div class="adminActions">
|
<div class="adminActions">
|
||||||
<input type="checkbox" name="adminToggle" class="adminToggle" />
|
<input type="checkbox" name="adminToggle" class="adminToggle" />
|
||||||
<a class="adminButton" href="#!"><i class="material-icons">lightbulb</i></a>
|
<a class="adminButton" href="#!"><i class="material-icons">lightbulb</i></a>
|
||||||
@ -120,23 +85,5 @@
|
|||||||
<a href="https://github.com/IdleEndeavor/gamesearch#privacy-policy" title="Privacy"><i class="material-icons">security</i></a>
|
<a href="https://github.com/IdleEndeavor/gamesearch#privacy-policy" title="Privacy"><i class="material-icons">security</i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Engine Switcher -->
|
|
||||||
<nav class="nav">
|
|
||||||
<a href="https://ravegamesearch.pages.dev" class="nav__link nav__link--active">
|
|
||||||
<i class="material-icons nav__icon">videogame_asset</i>
|
|
||||||
<span class="nav__text">Game Search</span>
|
|
||||||
</a>
|
|
||||||
<a href="https://ravebooksearch.com" class="nav__link">
|
|
||||||
<i class="material-icons nav__icon">library_books</i>
|
|
||||||
<span class="nav__text">Book Search</span>
|
|
||||||
</a>
|
|
||||||
<a href="https://ravesoftwaresearch.pages.dev" class="nav__link">
|
|
||||||
<i class="material-icons nav__icon">wysiwyg</i>
|
|
||||||
<span class="nav__text">Software Search</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user