diff --git a/css/index.css b/css/index.css index c1e63cf..93b8d9e 100644 --- a/css/index.css +++ b/css/index.css @@ -25,7 +25,7 @@ body { height: 100%; } -/* Search Bar and Logo Container Div */ +/* Search Bar and Logo Container */ .maindiv { margin: auto; position: relative; @@ -62,17 +62,64 @@ body { margin: 10px; top: 0; left: 0; + animation: 0.5s ease-out 0s 1 slideInFromTop; } .engine-swticher a { padding: 5px; - font-size: 20px; + font-size: 15px; color: var(--text-color); text-decoration: none; } + #primary { + color: var(--primary-color); + font-size: 20px; + } + + .engine-swticher a:hover { + color: var(--secondary-color); + font-size: 20px; + } + +/* Mobile engine switcher */ + .m-engine-switcher { + display: none; /* Initially hide the toggle container */ + position: absolute; + justify-content: center; + top: 15px; + left: 50%; + transform: translateX(-50%); + border-radius: 50px; + z-index: 1000; + width: 80%; + padding: 0 10px; + } + + .toggle-btn { + display: inline-block; + padding: 10px 20px; + color: var(--text-color); + text-decoration: none; + border-radius: 20px; + border-width: 5px; + transition: background-color 0.3s ease; + text-align: center; + box-sizing: border-box; + } + + #m-primary { + background-color: var(--primary-color); + color: var(--text-color); + box-shadow: 0 0 10px black; + } + + .toggle-btn:hover { + background-color: var(--secondary-color); + } + /* Notification Center */ - .engine-swticher-2 { + .notification-zone { position: fixed; margin-top: 15px; margin-right: 10px; @@ -83,7 +130,7 @@ body { z-index: 1000; /* Ensure it is on top of other elements */ } - .engine-swticher-2 .item { + .notification-zone .item { position: relative; color: var(--text-color); /* Text color */ padding: 10px; @@ -94,13 +141,14 @@ body { 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 */ + box-shadow: 0 0 10px black; } - .engine-swticher-2 .item.hidden { + .notification-zone .item.hidden { display: none; /* Hide items with the 'hidden' class */ } - .engine-swticher-2 .item .close-btn { + .notification-zone .item .close-btn { position: absolute; top: 5px; right: 5px; @@ -113,8 +161,9 @@ body { } /* Corner Box */ - .games-found { + .corner-box { display: flex; + max-width: 20%; bottom: 0; left: 0; flex-direction: column; @@ -124,7 +173,7 @@ body { position: fixed; } - .games-found a { + .corner-box a { padding: 5px; font-size: 16px; width: 20%; @@ -149,28 +198,35 @@ body { text-decoration: none; } + .terms a:hover { + color: var(--secondary-color); + font-size: 20px; + } + /* Search Box */ /* search button */ .gsc-search-button .gsc-search-button-v2 { border-radius: 50%; border-color: var(--primary-color); background-color: var(--primary-color); - height: 45px; - width: 45px; + height: 50px; + width: 50px; margin: auto; padding:10px !important; box-shadow: 0 0 10px black; } - /* search input box */ + /* search input box, includes input field */ .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: var(--primary-color) !important; - border-width: 5px !important; background-color: var(--bg-color) !important; /* inner background colour */ color: var(--text-color); - font-family: 'Roboto'; font-size: 20px; } + /* search input box, excludes input field */ + .gsc-input-box, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus { + border-radius: 50px !important; /* rounded corner */ + border-color: var(--primary-color) !important; + border-width: 5px !important; + } /* searchbox outer shadow */ .gsc-input-box { box-shadow: 0 0 10px black; @@ -180,7 +236,6 @@ body { background-color: transparent !important; border-color: transparent !important; } - /* gets rid of 'x results in x seconds' text */ .gsc-result-info { display: none; @@ -189,11 +244,6 @@ body { .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; @@ -207,15 +257,10 @@ body { 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 { + .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, a.gs-title:visited { color: var(--text-color) !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: var(--bg-color) !important; @@ -236,7 +281,11 @@ body { padding: 5px 10px !important; margin: 5px; } - + /* results pagination design */ + .gsc-cursor-page { + font-size: 1.5em; + padding: 5px 10px !important; + } /* Styles active page pagination switcher */ .gsc-results .gsc-cursor-box .gsc-cursor-current-page { border-color: var(--primary-color) !important; @@ -275,32 +324,26 @@ body { border: none !important; border-bottom: none !important; } - /* changes colour of scrollable gradient in mobile view */ - .gsc-refinementsGradient { - background: linear-gradient(to left,var(--primary-color),rgba(255,255,255,0)) !important; - } - /* styles inactive filter tabs */ + /* styles inactive refinement tabs */ .gsc-tabHeader.gsc-tabhInactive, .gsc-refinementHeader.gsc-refinementhInactive { color: var(--text-color) !important; border-color: var(--bg-color) !important; background-color: var(--bg-color) !important; } - /* styles active filter tabs */ + /* styles active refinement tabs */ .gsc-tabHeader.gsc-tabhActive, .gsc-refinementHeader.gsc-refinementhActive { color: var(--primary-color) !important; border-color: var(--primary-color) !important; background-color: var(--bg-color) !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; + .gsc-control-cse .gsc-table-result span { + display: none; + } + a.gs-label { + float: right; + color: var(--text-color) !important; + text-decoration: none !important; } /* colours url on search results */ .gs-webResult div.gs-visibleUrl { @@ -315,41 +358,6 @@ body { display: none !important; } - /* Mobile engine switcher */ - .toggle-container { - display: none; /* Initially hide the toggle container */ - position: absolute; - justify-content: center; - top: 15px; - left: 50%; - transform: translateX(-50%); - border-radius: 50px; - z-index: 1000; - width: 80%; - padding: 0 10px; - } - - .toggle-btn { - display: inline-block; - padding: 10px 20px; - color: var(--text-color); - text-decoration: none; - border-radius: 20px; - border-width: 5px; - transition: background-color 0.3s ease; - text-align: center; - box-sizing: border-box; - } - - #primary { - background-color: var(--primary-color); - color: var(--text-color); - } - - .toggle-btn:hover { - background-color: var(--secondary-color); - } - /* Screen-size dependant options */ @media (max-width: 1000px) { .maindiv { @@ -368,20 +376,16 @@ body { display: none; } - .toggle-container { + .m-engine-switcher { display: flex; } - .engine-switcher-2 { + .notification-zone { display: none; } - .engine-swticher-2 .item { - display: none; - } - - /* search input box */ - .gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus { + /* search input box, excludes input field */ + .gsc-input-box, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus { border-radius: 50px !important; /* rounded corner */ margin-right: 5px !important; } @@ -394,7 +398,7 @@ body { display: none !important; } - .games-found { + .corner-box { display: none; } } \ No newline at end of file diff --git a/index.html b/index.html index 3d06ac7..23cd95a 100644 --- a/index.html +++ b/index.html @@ -8,37 +8,45 @@ - - - - - - - - - + + + + + + + + + + + + + + + + +
- +
- > Game Search + Game Search Book Search Software Search
-
- Games + -
+
-
- +
+