/** *
-
Custom overrides for Google Search search-results page
-
Author: Wesley Zajicek - github.com/wdzajicek
* */ // ===================================================== // // IMPORTANT! (pun intended): // // // // Assume that ANY `!important` used in this file is // // required for the styling to work correctly! // // // // i.e. DO NOT DELETE ANY `!important;`'s BELLOW // // // // ===================================================== // $color-link-visited: #3600b3; // The pagination of the search results (at the bottom) .gsc-results .gsc-cursor-box .gsc-cursor-page {
background-color: rgba(0,0,0,0.09) !important; border-width: thin; border-style: solid; border-color: #666; border-radius: 5px; color: $grey-1 !important; padding: .25rem 1rem;
} // The active page in the search result pagination .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
background-color: rgba(0,0,0,0.25) !important; color: $black !important; text-decoration: underline !important;
} // One of the outer-most elements of the search results .gsc-control-cse {
font-family: $font-family-paragraph !important; counter-reset: result;
} // Outermost div for each search result .gsc-webResult.gsc-result {
border-bottom: solid thin #0b0e10 !important; margin-left: auto !important; margin-right: auto !important; max-width: 630px; padding-left: .75rem !important; padding-right: .75rem !important;
} // Parent element of the search result's title .gsc-thumbnail-inside {
margin-left: 32px;
} // Custom styling to make a counter before each title (like in newsroom) .gsc-thumbnail-inside::before {
background-color: $primary-blue; border-radius: 50%; border-color: #0b0e10; border-style: solid; border-width: 1px; color: $white; counter-increment: result; content: counter(result); display: block; font-size: 11px; font-weight: 700; height: 26px; margin-left: -32px; line-height: 24px; position: absolute; text-align: center; width: 26px;
} // Font size for smaller text—description pagination .gsc-control-cse, .gsc-control-cse .gsc-table-result {
font-size: .99rem !important;
} // Larger font-sizes .gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * {
font-size: 1.125rem !important;
} // Title of the page/doc that is clicked .gs-result .gs-title, .gs-result .gs-title *, .gs-result .gs-title a.gs-title b, .gcsc-find-more-on-google {
color: $color-blue-reboot !important;
} // Hover effect for the search results title/link .gs-result .gs-title a.gs-title:hover, .gs-result .gs-title a.gs-title:hover b {
color: $color-blue-reboot-hover !important; text-decoration: underline !important;
} // Visited styles for the search results title/link .gs-result .gs-title a.gs-title:visited, .gs-result .gs-title a.gs-title:visited b {
color: $color-link-visited !important;
} // The little magnifying glass svg on the bottom-right // of the results that says “🔍 Search for <SEARCH_TERM> on Google” .gcsc-find-more-on-google-magnifier {
fill: $color-blue-reboot !important;
} // Breadcrumb for each search result .gs-webResult div.gs-visibleUrl {
color: $color-green-emerald !important;
} // The parent element for the results breadcrumb .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
display: inline-block; border: thin solid rgba(0,0,0,0.125); padding: 0 .25rem; border-radius: 5px; margin-top: .25rem;
} // Description text for the search results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
color: $grey-1 !important; margin-top: 6px; font-family: $font-family-paragraph !important;
} .gs-bidi-start-align.gs-snippet b {
font-weight: 700;
} // Preview image for the search result .gs-web-image-box .gs-image, .gs-promotion-image-box .gs-promotion-image {
height: 93px; margin-left: -18.25px; max-width: unset !important;
} // Parent element of the preview image for search result .gs-web-image-box, .gs-promotion-image-box {
background-color: $grey-1; border-radius: 50%; border-color: #ebebeb; border-style: solid; border-width: thin; float: right !important; height: 93px; margin-top: .25rem; margin-left: 1rem !important; overflow: hidden; padding: 0 !important; position: relative; bottom: 20px; width: 93px !important;
} // Specific styles for portrait oriented images .gs-web-image-box-portrait .gs-image {
height: 93px; margin-left: calc(100% / -16); transform: scale(1.2);
} // Parent div of the pagination buttons .gsc-cursor-box.gs-bidi-start-align {
margin-top: 1.5rem !important;
} // ======================================= // // Styling adjustments/additions to // // search-page styling for darkMode // // ======================================= // // .dark-mode gets added to <html> element .dark-mode {
// Description of the search result .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType { color: #969ca5 !important; } // Pagination buttons for extra results .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb { border-color: rgba(255,255,255,.25); } // The little magnifying glass svg on the bottom-right // of the results that says "🔍 Search for <SEARCH_TERM> on Google" .gcsc-find-more-on-google-magnifier { fill: #9fc0ed !important; } // Title/link of the search result .gs-result .gs-title, .gs-result .gs-title *, .gs-result .gs-title a.gs-title b, .gcsc-find-more-on-google { color: #9fc0ed !important; } // Title/link hover effect .gs-result .gs-title a.gs-title:hover, .gs-result .gs-title a.gs-title:hover b { color: #b0d1ff !important; } // Visited title links .gs-result .gs-title a.gs-title:visited, .gs-result .gs-title a.gs-title:visited b { color: #7382d7 !important; } // Top bar that shows the number of results and Sort by:... .gsc-above-wrapper-area { border-bottom-color: rgba(255,255,255,0.5) } // One of the outer-most parent elements of the results .gsc-control-cse.gsc-control-cse-en { background-color: transparent; border-color: rgba(255,255,255,0.25); border-radius: 5px; } // Outer-most element for each search result .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult { background-color: #191d1f; border-color: rgba(255,255,255,0.125); } // Result stats: # of results and time .gsc-result-info, .gsc-orderby-label { color: #bababa; } // Pagination buttons of the extra results .gsc-results .gsc-cursor-box .gsc-cursor-page { background-color: #0b0e10; border-color: rgba(255,255,255,0.25); border-style: solid; } // Current page-button in the paginated results .gsc-results .gsc-cursor-box .gsc-cursor-current-page { color: #ebebeb !important; background-color: rgba(0,0,0,0.5) !important; } // Hover effect when mouse hovers a search result .gsc-webResult.gsc-result:hover { background-color: rgba(255,255,255,0.0125) !important; } // Outer-most element of each search result .gsc-webResult.gsc-result { border-bottom: solid 1px $white !important; } // Custom counter-circles to number results .gsc-thumbnail-inside::before { background-color: #9bb7dd; border-color: $white; color: #0b0e10; } // The "Sort by:" button .gsc-selected-option-container { background-color: #9fc0ed; border-radius: 4px; border-color: $white; border-width: 1px; border-style: solid; font-size: 13px !important; padding-bottom: 1.75rem; padding-left: .75rem !important; padding-right: 32px; } // The little carrot icon in the "Sort by:" button .gsc-control-cse .gsc-option-selector { right: 8px; top: 13px; transform: scale(1.5); } // The "Sort by:" menu .gsc-control-cse .gsc-option-menu { background-color: #0b0e10; } // Current selection in the "Sort by:" menu .gsc-option-menu-item-highlighted { background-color: #282828; color: $white; } .gs-bidi-start-align.gs-snippet b { color: #c4c4c4; }
}