Last active
May 1, 2025 21:00
-
-
Save GiorgioBrux/cc3a9af8bc62983f8e34968b8675cc56 to your computer and use it in GitHub Desktop.
Google-like custom css for kagi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Light mode only, removes some features. | |
| Changelog: | |
| - 29-05-2024 18:13: Fixed logo when no news result is found. | |
| - 29-05-2024 19:20: Fixed more images button with wrong style. | |
| */ | |
| .logo svg { | |
| display: none; | |
| } | |
| .doggo_sit_a { | |
| display: none; | |
| } | |
| /* Change logo to google */ | |
| .logo | |
| { | |
| min-height: 92px; | |
| height: 92px; | |
| width: 272px; | |
| background-image:url('https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg'); | |
| margin-bottom: 0px; | |
| } | |
| /* Hide advanced search */ | |
| .land_adv_search_btn { | |
| display: none; | |
| } | |
| div#_0_land_tooltip_message { | |
| display: none; | |
| } | |
| button#searchFormSubmitBtn, button#orbSubmitBtn { | |
| background-color: #f8f9fa; | |
| border: 1px solid #f8f9fa; | |
| border-radius: 4px; | |
| color: #3c4043; | |
| font-family: arial, sans-serif; | |
| font-size: 14px; | |
| margin: 11px 4px; | |
| padding: 0 16px; | |
| line-height: 27px; | |
| height: 36px; | |
| min-width: 54px; | |
| text-align: center; | |
| cursor: pointer; | |
| user-select: none; | |
| display: inline-flex !important; | |
| } | |
| button#searchFormSubmitBtn, button#orbSubmitBtn { | |
| text-indent: -9999px; | |
| line-height: 0; /* Collapse the original line */ | |
| } | |
| button#searchFormSubmitBtn:hover, button#orbSubmitBtn:hover { | |
| box-shadow: 0 1px 1px rgba(0, 0, 0, .1); | |
| background-color: #f8f9fa; | |
| border: 1px solid #dadce0; | |
| color: #202124; | |
| } | |
| button#orbSubmitBtn::after { | |
| content: "I'm Feeling Lucky"; | |
| text-indent: 0; | |
| display: block; | |
| line-height: initial; /* New content takes up original line height */ | |
| } | |
| button#searchFormSubmitBtn::after { | |
| content: "Google Search"; | |
| text-indent: 0; | |
| display: block; | |
| line-height: initial; /* New content takes up original line height */ | |
| } | |
| .search-submit-wrapper { | |
| padding: 10px 0 0 0 !important; | |
| } | |
| .search-submit-wrapper-inner { | |
| flex-direction: row !important; | |
| } | |
| textarea#searchBar::placeholder {color: transparent;} | |
| /* Search bar @ kagi.com page, not while searching */ | |
| div.search-form-wrapper > div.search_form_box > #searchForm > .search-input-container._0_search-input-container._0_no_multiline { | |
| box-shadow: none; | |
| min-height: 44px; | |
| background: #fff; | |
| border: 1px solid #dfe1e5; | |
| box-shadow: none; | |
| border-radius: 24px; | |
| margin: 0 auto; | |
| margin-bottom: 10px; | |
| max-width: 584px; | |
| } | |
| div.search-form-wrapper > div.search_form_box > #searchForm > .search-input-container._0_search-input-container._0_no_multiline:hover | |
| { | |
| background: #fff; | |
| box-shadow: 0 1px 6px rgba(32, 33, 36, .28); | |
| border-color: transparent; | |
| } | |
| div.search-form-wrapper > div.search_form_box > #searchForm > .search-input-container._0_search-input-container._0_no_multiline > #searchBar { | |
| padding-left: 30px; /* Adjust padding to make space for the icon */ | |
| background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%235f6368"/%3E%3C/svg%3E') no-repeat left center; | |
| background-size: 20px 20px; /* Adjust size of the icon */ | |
| background-position: 5px center; /* Adjust position of the icon */ | |
| } | |
| /* Search bar while searching*/ | |
| div.center-content-box > div.search_form_box > #searchForm > .search-input-container._0_search-input-container._0_no_multiline { | |
| min-height: 44px; | |
| background: #fff; | |
| border: 1px solid #dfe1e5; | |
| box-shadow: 0 1px 6px rgba(32, 33, 36, .28) !important; | |
| border-radius: 24px; | |
| margin: 0 auto; | |
| margin-bottom: 10px; | |
| width: 640px !important; | |
| } | |
| @media (max-width: 1300px) div.center-content-box > div.search_form_box > #searchForm > .search-input-container._0_search-input-container._0_no_multiline { | |
| max-width: 538px; | |
| } | |
| .footer.footer-landing { | |
| display: none; | |
| } | |
| .app-logo svg { | |
| display: none; | |
| } | |
| i.logo_kagi { | |
| min-height: 0; | |
| height: 31px !important; | |
| width: 92px !important; | |
| background-size: contain; | |
| background-image:url('https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg'); | |
| margin-bottom: 0px; | |
| margin-top: 5px; | |
| } | |
| .top-content._0_provider-content { | |
| display: none; | |
| } | |
| ._0_lenses { | |
| display: none; | |
| } | |
| .instant-tab-separator { | |
| display: none; | |
| } | |
| /* Restyle buttons "Web, podcasts, maps" */ | |
| .app-nav { | |
| border-bottom: none; | |
| } | |
| /* make hr span whole page */ | |
| .app-box-center:before { | |
| content: ""; | |
| display: block; | |
| width: 100%; /* Span the entire viewport width */ | |
| height: 1px; | |
| background-color: #ecedef; | |
| position: absolute; /* Position it relative to the .container */ | |
| left: 0; /* Start at the left edge of the viewport */ | |
| margin-top: 5px; | |
| } | |
| a.nav_item { | |
| font-family: 'Google Sans', Arial, sans-serif !important; | |
| font-size: 14px !important; | |
| margin: 0 !important; | |
| margin-right: 10px !important; | |
| margin-bottom: 5px !important; | |
| height: 30px !important; | |
| width: fit-content; | |
| color: #70757a !important; | |
| text-decoration: none; | |
| padding: 8px 12px !important; | |
| outline-offset: -2px !important; | |
| border-radius: 12px !important; | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| a.nav_item:hover { | |
| background-color: #e5edff; | |
| } | |
| a.nav_item.--active { | |
| color: #001d35 !important; | |
| background-color: #a3c9ff !important; | |
| border: 1px solid #a3c9ff; | |
| border-radius: 4px; | |
| font-weight: 1 !important; | |
| } | |
| a.nav_item::after { | |
| content: ""; | |
| display: none !important; | |
| } | |
| nav#tonav { | |
| padding-top: 5px !important; | |
| } | |
| ._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item { | |
| color: #70757a !important; | |
| } | |
| /* Hide images filter */ | |
| ._0_app-data-top-panel.top-panel { | |
| display: none; | |
| } | |
| /* Hide feedback and help button */ | |
| .top_nav_links a:nth-of-type(2), | |
| .top_nav_links a:nth-of-type(1) { | |
| display: none !important; /* Hide the first two <a> elements */ | |
| } | |
| /* Restyle settings to be a cog*/ | |
| .top_nav_links a:nth-of-type(3) { | |
| position: relative; | |
| color: transparent !important; /* Hide the text */ | |
| } | |
| .top_nav_links a:nth-of-type(3)::before { | |
| content: ''; | |
| color: #5f6368 !important; | |
| display: block; | |
| width: 36px; /* Adjust width as needed */ | |
| height: 36px; /* Adjust height as needed */ | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.85 22.25h-3.7c-.74 0-1.36-.54-1.45-1.27l-.27-1.89c-.27-.14-.53-.29-.79-.46l-1.8.72c-.7.26-1.47-.03-1.81-.65L2.2 15.53c-.35-.66-.2-1.44.36-1.88l1.53-1.19c-.01-.15-.02-.3-.02-.46 0-.15.01-.31.02-.46l-1.52-1.19c-.59-.45-.74-1.26-.37-1.88l1.85-3.19c.34-.62 1.11-.9 1.79-.63l1.81.73c.26-.17.52-.32.78-.46l.27-1.91c.09-.7.71-1.25 1.44-1.25h3.7c.74 0 1.36.54 1.45 1.27l.27 1.89c.27.14.53.29.79.46l1.8-.72c.71-.26 1.48.03 1.82.65l1.84 3.18c.36.66.2 1.44-.36 1.88l-1.52 1.19c.01.15.02.3.02.46s-.01.31-.02.46l1.52 1.19c.56.45.72 1.23.37 1.86l-1.86 3.22c-.34.62-1.11.9-1.8.63l-1.8-.72c-.26.17-.52.32-.78.46l-.27 1.91c-.1.68-.72 1.22-1.46 1.22zm-3.23-2h2.76l.37-2.55.53-.22c.44-.18.88-.44 1.34-.78l.45-.34 2.38.96 1.38-2.4-2.03-1.58.07-.56c.03-.26.06-.51.06-.78s-.03-.53-.06-.78l-.07-.56 2.03-1.58-1.39-2.4-2.39.96-.45-.35c-.42-.32-.87-.58-1.33-.77l-.52-.22-.37-2.55h-2.76l-.37 2.55-.53.21c-.44.19-.88.44-1.34.79l-.45.33-2.38-.95-1.39 2.39 2.03 1.58-.07.56a7 7 0 0 0-.06.79c0 .26.02.53.06.78l.07.56-2.03 1.58 1.38 2.4 2.39-.96.45.35c.43.33.86.58 1.33.77l.53.22.38 2.55z" fill="%235f6368"/><circle cx="12" cy="12" r="3.5" fill="%235f6368"/></svg>') no-repeat center; | |
| background-size: 24px 24px; /* Size of the SVG itself */ | |
| position: absolute; | |
| left: 95%; | |
| transform: translate(-70%, 0%); | |
| } | |
| button#quickSettingsOpenBtn { | |
| transform: translate(0%, 32%); | |
| } | |
| .top_nav_links a:nth-of-type(3)::before, button#quickSettingsOpenBtn{ | |
| border-radius: 50% !important; | |
| color: #5f6368 !important; | |
| cursor: pointer !important; | |
| } | |
| .top_nav_links a:nth-of-type(3):hover::before, | |
| button#quickSettingsOpenBtn:hover { | |
| background-color: rgba(218, 220, 224, 0.5) !important; | |
| } | |
| /* Replace X in search bar */ | |
| button#clear_searchBar svg { | |
| display: none; | |
| } | |
| button#clear_searchBar::before { | |
| content: ''; | |
| display: block; | |
| width: 36px; /* Adjust width as needed */ | |
| height: 36px; /* Adjust height as needed */ | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%235f6368"/></svg>') no-repeat center; | |
| background-size: 24px 24px; /* Size of the SVG itself */ | |
| } | |
| /* Replace search icon in search bar (left, after separator) */ | |
| #searchFormSubmit svg { | |
| display: none; | |
| } | |
| #searchFormSubmit::before { | |
| content: ''; | |
| display: block; | |
| width: 36px; | |
| height: 36px; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%234285f4"/></svg>') no-repeat center; | |
| background-size: 24px 24px; | |
| } | |
| /* recolor separator */ | |
| .sfi_sep { | |
| border-left: 1px solid #dadce0; | |
| } | |
| /* add border around cards */ | |
| .card__face { | |
| border: 1px solid #dadce0; | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| /* hide rank icons */ | |
| a._0_rank-icons { | |
| display: none; | |
| } | |
| /* hide AI icons */ | |
| #main > div > div > div > div.videoResultInfo > div > div > div.__sri_more_menu.__sri_more_menu_ia._0_k_ui_dropdown.k_ui_dropdown > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i, | |
| #page1 > div.news._0_provider-content > div > div.newsResultHeader > div.newsResultTitle > div > div.__sri_more_menu.__sri_more_menu_ia._0_k_ui_dropdown.k_ui_dropdown > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i, | |
| #layout-v2 > div.headerVideos._0_provider-content.inline-content.clearfix > div > div.widgetItems.box-less > div > div.widget-footer > div > div.__sri_more_menu.__sri_more_menu_ia._0_k_ui_dropdown.k_ui_dropdown > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i, | |
| #layout-v2 > div > div.sr-group > div > div.__sri-title > div > div.__sri_more_menu.__sri_more_menu_ia._0_k_ui_dropdown.k_ui_dropdown > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i , | |
| #layout-v2 > div > div._0_TITLE.__sri-title > div > div.__sri_more_menu.__sri_more_menu_ia._0_k_ui_dropdown.k_ui_dropdown > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i, | |
| #layout-v2 > div > div._0_SRI.search-result > div._0_TITLE.__sri-title > div > div.__sri_more_menu.__sri_more_menu_ia._0_k_ui_dropdown.k_ui_dropdown > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i { | |
| display: none; | |
| } | |
| /* change color of three dots*/ | |
| #layout-v2 > div > div.sr-group > div > div.__sri-title > div > div > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i, | |
| #layout-v2 > div > div._0_SRI.search-result > div._0_TITLE.__sri-title > div > div > div._0_k_ui_dropdown_first_item.k_ui_dropdown_first_item > i { | |
| color: #70757a !important; | |
| } | |
| /* make clickable links inside wiki widget blue*/ | |
| .wikipediaResult a { | |
| color: #1a0dab !important; | |
| border-bottom: none; | |
| } | |
| /* change wiki title appearence*/ | |
| .wikipediaFullPageLink > a { | |
| color: #202124 !important; | |
| font-family: Google Sans,arial,sans-serif-medium,sans-serif !important; | |
| font-weight: 500 !important; | |
| border-bottom: none !important; | |
| font-size: 28px !important; | |
| } | |
| /* make links blue*/ | |
| div.newsResultTitle > a, | |
| div.__sri-title > h3 > a, | |
| a.__sri_title_link._0_sri_title_link._0_URL { | |
| color: #1a0dab !important; | |
| border-bottom: none !important; | |
| } | |
| div.newsResultTitle > a:hover, | |
| a.__sri_title_link._0_sri_title_link._0_URL:hover { | |
| text-decoration: underline; | |
| } | |
| /* remove margin from result to link*/ | |
| ._0_TITLE.__sri-title { | |
| margin-bottom: 0px; | |
| } | |
| /* remove margin from result to link (news)*/ | |
| .newsResultBody._0_DESC { | |
| margin-top: 0px; | |
| } | |
| /* Style buttons as circles, hopefully all of them. Tried on the one under videos and images*/ | |
| ._0_provider-content.inline-content.clearfix > div > a, a.read-more-inline | |
| { | |
| border-radius: 18px; | |
| outline: 1px solid transparent; | |
| background-color: #f1f3f4; | |
| padding: 4px; | |
| padding-left: 10px; | |
| } | |
| /* Styles more result button and share this search, and also see more for the wikipedia widget*/ | |
| #wikipediaResults > div > div > div > div > label, | |
| a#load_more_results, | |
| #main > div._0_share_url_footer.clipboardCopy > div { | |
| background: #f1f3f4; | |
| border: 1px solid rgba(255, 255, 255, 0); | |
| box-sizing: border-box; | |
| font-size: 14px; | |
| line-height: 20px !important; | |
| width: 300px; | |
| padding: 7px 11px; | |
| margin: 0; | |
| height: 36px; | |
| border-radius: 18px; | |
| font-weight: 1 !important; | |
| } | |
| #wikipediaResults > div > div > div > div > label, | |
| #main > div._0_share_url_footer.clipboardCopy > div { | |
| width: auto; | |
| } | |
| /* quickpeek arrows*/ | |
| #quickPeekResults > div > details > summary > i { | |
| background: #f1f3f4; | |
| border: 1px solid rgba(255, 255, 255, 0); | |
| border-radius: 50%; | |
| height: 25px; | |
| width: 25px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1px; | |
| } | |
| #quickPeekResults > div > details > summary > i > svg { | |
| display: block; | |
| width: 80%; | |
| height: 80%; | |
| } | |
| /* hide lenses in search box, while typing*/ | |
| .auto_suggestions_footer.auto_suggestions_lenses._0_auto_suggestions_lenses { | |
| display: none; | |
| } | |
| /* hide footer in search results*/ | |
| .footerInner { | |
| display: none !important; | |
| } | |
| /* hide logo if no news result is found */ | |
| .content > .logo { | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment