Skip to content

Instantly share code, notes, and snippets.

@sefidel
Created May 5, 2024 10:14
Show Gist options
  • Save sefidel/8965ec5d45daf1ac47102586a75bbba2 to your computer and use it in GitHub Desktop.
Save sefidel/8965ec5d45daf1ac47102586a75bbba2 to your computer and use it in GitHub Desktop.
Old Kagi Custom CSS, pre-Apr10 update
/* Personal Tweaks */
.doggo-sit {
display: none;
}
/* Theme - Dark */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
.theme_dark {
--k-accent: #f16d43;
--k-accent-alt: #62a09d;
--k-accent-hover: #dd633d;
--k-accent-background: rgba(241, 109, 67, 0.2);
/* CONTEXT COLORS */
--k-background-primary: #232326;
--k-surface-primary: #2e2e32;
--k-surface-secondary: #3e3e44;
--k-surface-tertiary: #5f5f68;
--k-border: #3d3d43;
--k-glass: hsla(240, 4%, 19%, 0.9);
/* TEXT COLORS */
--k-foreground-primary: #f4f2f4;
--k-foreground-secondary: #dcdbdd;
--k-foreground-tertiary: #a09fa6;
--k-foreground-quaternary: #6d6c74;
--k-foreground-quinary: #4d4c52;
--cheatsh_background: var(--k-surface-primary);
--cheatsh_ef186: #d7d787;
--cheatsh_ef15: #fdf6e3;
--cheatsh_ef148: #afd700;
--cheatsh_ef81: #5fd7ff;
--color-scheme: dark;
--background-color: var(--k-background-primary);
--background-color_opac: rgba(38, 40, 55, 0);
--page-text-color: var(--k-foreground-tertiary);
--beta-tag-bg: #4835bc;
--beta-tag-text: #f2f0e7;
--beta-tag-inside-corners: #9debfe;
--login_page_bg: var(--k-background-primary);
--login_page_divider_strap: var(--k-border);
--login_page_input_bg: var(--k-background-primary);
--color-primary: var(--k-foreground-primary);
--color-secondary: var(--k-surface-secondary);
--color_link: var(--accent);
--color-primary_hover: var(--k-accent-hover);
--color-primary_visited: var(--k-foreground-tertiary);
--input-bg: var(--k-background-primary);
--bangs_tag_bg: var(--color-primary);
--doggo-color-1: #e5e5e5;
--doggo-bg-color: var(--k-surface-secondary);
--landing-page-clouds-opacity: 0.8;
--quick-search-bg: var(--k-foreground-primary);
--quick-search-icon: #4835bc;
--tabs-round-bg: var(--k-surface-primary);
--tabs-round-active-bg: var(--k-surface-secondary);
--color_cat_buttons: var(--color-primary-dim_7);
--color_cat_buttons_active: var(--color-secondary);
--color_cat_buttons_bg: var(--color-primary);
--color_cat_buttons_border: var(--color-primary-dim_2);
--color_cat_buttons_border_hover: var(--color-primary-dim_5);
--header-bg: var(--k-surface-primary);
--header-border: var(--k-border);
--app-logo: var(--k-surface-secondary);
--app-logo-bg: #ffb319;
--footer-bg: var(--k-surface-primary);
--control-center-dd-bg: var(--k-surface-primary);
--control-center-dd-bg_hover: var(--k-surface-secondary);
--control-center-dd-list: var(--k-surface-primary);
--control-center-dd-list-bg_hover: var(--k-surface-secondary);
--control-center-bg: var(--k-background-primary);
--control-center-dd-border: #43465b;
--filter-dd-bg: var(--k-background-primary);
--cc-filters-active-bg: var(--k-border);
--k-tooltip-bg: var(--k-surface-secondary);
--k-tooltip-text: var(--k-foreground-tertiary);
--dd-hover-bg: var(--k-surface-secondary);
--dd-list-input-bg: var(--k-background-primary);
--not-found-bubble-bg: var(--k-surface-secondary);
--app-sidebar-bg: var(--k-surface-primary);
--app-sidebar-item-border: var(--k-border);
--app-sidebar-link: var(--k-foreground-secondary);
--app-sidebar-nav-item-bg_hover: var(--k-surface-secondary);
--app-sidebar-nav-item-link_hover: var(--k-foreground-primary);
--app-sidebar-nav-item-icon_hover: var(--k-accent);
--app-sidebar-lense-link: var(--k-foreground-tertiary);
--app-sidebar-lense-link_hover: var(--k-foreground-primary);
--ranked-box-overlay-bg: rgba(18, 18, 18, 0.9);
--ranked-box-wrapper-bg: var(--k-surface-primary);
--ranked-box-connection-secure: #60aa55;
--ranked-box-connection-insecure: #fd6820;
--ranked-box-icon-normal-bg: var(--ranked-box-wrapper-bg);
--ranked-box-tracker-no-info: var(--k-foreground-tertiary);
--ranked-box-toggle-switch-ch1-text: var(--color-primary);
--ranked-box-toggle-switch-ch3-svg-bg: var(--color-secondary);
--ranked-box-settings-btn-bg: var(--ranked-box-wrapper-bg);
--rank-icon-shard-color: #a1a1a1;
--rank_icon_boosted: #ffb319;
--btn-group-bg: var(--k-background-primary);
--btn-primary-bg: var(--k-foreground-secondary);
--btn-primary-color: var(--k-surface-primary);
--result-item-title-border: var(--k-border);
--result-item-title-border_hover: var(--k-border);
--result-rank-icon-stroke_promoted: var(--background-color);
--k-tooltip-tracker_bg: var(--k-surface-secondary);
--result-item-highlight: #9debfe;
--search-result-content-text: var(--color-primary-dim_6);
--search-result-group-item-link: var(--color-primary-dim_9);
--search-result-url-link: var(--color-primary-dim_9);
--search-result-title: var(--k-foreground-primary);
/*--search-result-date-bg: var(--k-foreground-quaternary);*/
--search-result-date-bg: var(--k-border);
--search-result-date-new-bg: var(--k-surface-tertiary);
--search-result-date-new: var(--k-foreground-tertiary);
--inline-header-title: var(--k-foreground-primary);
--inline-widget-bg: var(--k-surface-primary);
--inline-header-border: var(--k-border);
--inline-domain-tag-bg: var(--k-surface-secondary);
--related-item-bg: var(--k-surface-primary);
--username-button-bg: var(--k-surface-secondary);
--ranked-tabs-border: var(--k-border);
--video-item-bg: var(--k-surface-primary);
--auto-sugg-bg_hover: var(--k-surface-secondary);
--widget-progress_bar: #e5e5e5;
--translate-fc_icon: var(--k-foreground-quaternary);
--rating-star_background: var(--k-surface-secondary);
--wiki-title: var(--k-foreground-primary);
--wiki-content-links: var(--k-foreground-primary);
--toggle-switch-knob-bg: var(--k-surface-secondary);
--m_sri_gap_color: var(--k-border);
--image_brightness: 85%;
--onboarding_theme_options_dark_visibility: flex;
--onboarding_theme_options_light_visibility: none;
--onb_theme_light_preview_box: none;
--maps-highlight: var(--k-surface-primary);
}
/* Light Compat */
.theme_light {
--k-accent: #f16d43;
--k-accent-alt: #62a09d;
--k-accent-hover: #dd633d;
--k-accent-background: rgba(241, 109, 67, 0.2);
/* CONTEXT COLORS */
--k-border: #3d3d43;
--k-glass: hsla(0, 0%, 100%, 0.9);
/*--color-primary_visited: #6d6c74;*/
--k-tooltip-text: var(--color-secondary);
}
body, html {
color: var(--k-foreground-tertiary);
}
.sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list {
background-color: var(--k-glass);
backdrop-filter: blur(5px);
border-radius: 8px;
border: 1px solid var(--k-border);
}
/* TITLE */
.__sri-title .__sri_title_link {
position: relative;
}
.__sri-title .__sri_title_link:hover {
color: var(--k-accent);
}
.__sri-title .__sri_title_link {
color: var(--k-foreground-primary);
border-bottom: 1px solid hsl(255, 0%, 50%, 0);
font-size: 1.25rem;
font-family: 'Space Grotesk', sans-serif;
}
.__sri-title .__sri_title_link:visited {
border-bottom: 1px solid var(--k-accent-background);
}
/* VISITED LINKS */
.__sri_title_link:visited::before {
content: '';
aspect-ratio: 1/1;
width: 10px;
background: var(--k-accent);
position: absolute;
left: -24px;
border-radius: 50%;
top: 12px;
}
.__sri-time {
border-radius: 5px;
padding: 0 6px;
display: inline-block;
}
.related-items a {
color: var(--color-primary);
}
.related-items a:hover {
color: var(--color-secondary);
}
.btn.--secondary,
.ranked-item-tab-links a {
color: var(--k-foreground-primary);
}
._0_app_theme_switch_box button.checked ._0_active_theme_name,
._0_app_theme_switch_box button > input:checked + ._0_active_theme_name {
background-color: var(--k-surface-primary);
color: var(--k-foreground-primary);
}
._0_app_theme_switch_box button {
border: 1px solid var(--k-border);
}
.k_ui_toggle_switch {
--bg-color: transparent;
--active-bg-color: var(--k-accent);
--border-color: var(--k-border);
--active-border-color: var(--k-border);
}
.quick-settings .quick-settings-separator {
border-top: 1px solid var(--k-border);
}
._0_d_info_ranking.k_ui_btn_group input:checked + .box.k_ui_btn,
._0_sri-w-highlight .box.searchResultAnswer,
.box.--active,
.box._0_sri-w-highlight,
.box:hover {
outline: 3px solid var(--k-accent);
}
.__sri-url .path {
color: var(--k-foreground-quaternary);
}
/* SUB RESULT CARD */
.sri-group .sr-group .__sri-desc {
display: none;
}
.sri-group .__dl {
padding-bottom: 5px;
gap: 1rem;
}
.sri-group .__dl .__srgi {
margin-top: unset;
width: auto;
margin-bottom: 0;
padding-right: 0.7em;
}
.__srgi {
display: block;
width: auto;
min-width: -webkit-fill-available;
}
.sri-group .sr-group:has(.__srgi) {
margin-top: 20px;
margin-bottom: 40px;
border-left: 1px solid var(--k-border);
}
.land_tooltip_message {
border: 1px solid var(--k-border);
}
.k_ui_btn_group {
background-color: var(--btn-group-bg);
border: 1px solid var(--color-primary-dim_3);
border-radius: 8px;
display: flex;
font-size: 0.875rem;
}
._0_d_info_ranking.k_ui_btn_group input:checked + .k_ui_btn,
._0_sri-w-highlight .k_ui_btn_group .k_ui_btn.searchResultAnswer,
.k_ui_btn_group ._0_sri-w-highlight .k_ui_btn.searchResultAnswer,
.k_ui_btn_group .k_ui_btn.--active,
.k_ui_btn_group .k_ui_btn._0_sri-w-highlight.box,
.k_ui_btn_group .k_ui_btn:hover {
background-color: var(--color-primary-dim_3);
color: var(--color-primary);
}
.k_ui_dropdown_data_list {
padding: 0.6em 0;
border-radius: 10px;
border: 1px solid var(--k-border);
min-width: 160px;
}
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li,
.k_ui_dropdown_data_list .list_items > a {
color: var(--k-foreground-primary);
padding: 0.4em 2em 0.4em 0.8em;
border-radius: 0 !important;
}
.k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li .icon_check, .k_ui_dropdown_data_list .list_items>a .icon_check {
left: auto;
right: 10px;
}
._0_lenses .k_ui_dropdown hr {
border-top: 1px solid var(--k-border);
}
.widget_codeblock {
border: 1px solid var(--k-border);
}
.widget_codeblock .lines a:hover {
color: inherit;
border-radius: 5px;
}
._0_page-seperator {
position: relative;
margin-bottom: 50px;
margin-top: 10px;
border-bottom: 1px solid var(--k-border);
}
.searchResultAnswers {
padding-top: 12px;
margin-bottom: 1em;
}
.searchResultAnswers .widgetItems .searchResultAnswer {
transition: background-color 150ms ease-in-out;
border-radius: 5px;
border: 1px solid var(--k-border);
}
.searchResultAnswers .widgetItems .searchResultAnswer:hover {
transition: background-color 150ms ease-in-out;
border: 1px solid var(--k-border);
}
.searchResultAnswers .widgetItems .searchResultAnswer:hover .searchResultAnswerDate {
color: var(--k-foreground-secondary);
}
.searchResultAnswers .widgetItems .searchResultAnswer:hover .searchResultAnswerUpvotes {
color: var(--k-foreground-secondary);
}
.searchResultAnswers .widgetItems .searchResultAnswer:hover .searchResultAnswerUpvotes i {
color: var(--k-accent);
}
.ranked-box-wrapper {
border-radius: 5px;
box-shadow: 0 0 20px var(--ranked-box-shadow);
}
.d-info-body {
flex-wrap: wrap;
border-radius: 5px;
}
.widgetContent .widgetItems .widgetItem {
border: 1px solid var(--k-border);
}
.wikipediaRelatedSection .wikipediaRelatedItems {
display: grid;
gap: 0.5rem;
height: auto;
align-content: stretch;
}
.wikipediaRelatedSection .wikipediaRelatedItems .wikipediaRelatedArticle {
margin-bottom: 0;
}
.wikipediaRelatedSection .wikipediaRelatedItems .wikipediaRelatedArticle div:first-child {
width: 100%;
height: 100%;
}
.wikipediaRelatedSection .wikipediaRelatedItems .wikipediaRelatedArticle a {
display: flex;
flex-direction: column;
border-bottom: unset;
text-align: left;
gap: 0.5em;
padding: 0.6em;
border-radius: 10px;
height: 100%;
border: 1px solid var(--k-border);
}
.wikipediaRelatedSection .wikipediaRelatedItems .wikipediaRelatedArticle img {
width: 100%;
border-radius: 5px;
object-fit: cover;
aspect-ratio: 3/4;
height: 100%;
max-width: 100%;
max-height: 100%;
height: 100%;
}
.wikipediaRelatedSection .wikipediaRelatedItems .wikipediaRelatedArticle h4 {
font-size: .875rem;
margin: 0;
font-weight: 400;
line-height: 1.375rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.freeScroller {
padding: 4px 4px 12px 4px;
}
.widgetContent .widgetItems .widgetNews .widgetItemBody {
margin-top: 0.6em;
}
.widgetContent .widgetItems .widgetItem .widgetItemBody {
padding: 0 0.6em;
margin-bottom: 0.6em;
}
.widgetContent .widgetItems .widgetItem {
border-radius: 10px;
}
.widget-header {
padding: 0 10px;
border-radius: 0;
order: 3;
border-top: 1px solid var(--k-border);
}
.auto_suggestions {
border: 1px solid var(--k-border);
}
.auto_suggestions .auto_item {
margin-left: 0;
ma: 0;
margin-right: 0;
border-radius: 7px;
padding: 5px;
}
.search-form .search-input-container {
border-color: var(--k-border);
}
.search-form .search-input {
border-radius: 0;
background-color: transparent;
border-radius: 24px 0 0 24px;
}
.search-form .search-form-icons {
border-radius: 0 24px 24px 0;
background-color: transparent;
padding-right: 9px;
}
.auto_suggestions {
position: absolute;
border: 1px solid var(--k-border);
transform-origin: top;
transition: transform 150ms ease-in-out;
transform: scaleY(0);
}
.auto_suggestions .auto_suggestions_lenses {
padding: 10px 15px 10px 55px;
border-top: 1px solid var(--k-border);
margin-top: 0;
}
.search-form .search-input-container:has(+ .auto_suggestions.--visible) {
border-radius: 24px 24px 0 0;
}
.search-form:has(.search-input-container):has(.autosugg-landing > .auto_suggestions.--visible) .search-input-container {
border-radius: 24px 24px 0 0;
}
.cheatsh.hnd .h-template-title {
color: var(--k-foreground-primary);
}
.cheatsh.hnd .h-template-table {
border: 1px solid var(--k-border);
border-radius: 10px;
margin-top: 5px;
margin-bottom: 1.5em;
}
.cheatsh .cheatsh_content {
max-height: 710px;
}
.cheatsh .cheatsh_show_more_box {
z-index: 4;
}
.cheatsh .cheatsh_show_more_box span {
z-index: 6;
padding: 0.6em;
background: var(--k-surface-primary);
border-radius: 5px;
transition: background-color .15s ease-out;
}
.__sri-time.--new {
color: var(--k-accent);
background-color: var(--k-accent-background);
}
.wikipediaRelatedSection .wikipediaRelatedItems .wikipediaRelatedArticle h4 {
width: auto;
}
.wikipediaRelatedSection .wikipediaRelatedItems .wikipediaRelatedArticle div:first-child {
width: auto;
height: auto;
display: block;
}
.wikipediaTable {
border-top: 1px solid var(--k-border);
}
.box {
border-radius: 10px;
}
.box:hover {
outline: 2px solid var(--k-accent);
}
._0_img-results .images-wrapper {
gap: 0.6em;
}
._0_img-results .item img {
height: 120px;
border-radius: 10px;
border: none;
background: var(--k-background-primary);
}
._0_more_search_bangs_list_add_box {
border-bottom: 1px solid var(--k-border);
}
._0_more_search_box_title {
border-bottom: 1px solid var(--k-border);
}
._0_more_search_box_customize_button {
border-bottom: 1px solid var(--k-border);
}
._0_more_search_box {
border: 1px solid var(--k-border);
border-radius: 10px;
}
.dropdown .dd-list .list_filter_wrpr {
padding: 0.6em;
}
.dropdown .dd-list ._0_list_items {
max-height: 360px;
}
.k_ui_dropdown_data_list .list_items {
margin-bottom: 0;
}
.k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar {
--border-color: var(--k-background-primary);
}
.btn.--yellow, .ranked-item-tab-links a.--yellow {
border: 1px solid var(--k-accent);
background-color: var(--k-accent);
}
.k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar {
--border-color: var(--k-border);
}
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
background-color: var(--k-accent);
}
.k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar {
--border-color: var(--k-border);
--bg-color: var(--k-background-primary);
}
.search-form .search-input {
color: var(--k-foreground-primary);
}
.search-form .auto_suggestions {
border-radius: 0 0 24px 24px;
border: 1px solid var(--k-border);
padding-top: 0
}
.k_ui_dropdown.__transparent .k_ui_dropdown_data_list {
background-color: var(--k-surface-primary);
}
.k_ui_dropdown_data_sort_list_wrpr {
padding: .6em;
}
.k_ui_dropdown_data_list .list_items .line_sep {
border-bottom: 1px dashed var(--k-border);
margin: 0 0.6em 0.6em 0.6em;
}
#adv_search_btn:checked~.landing-category-select {
display: flex;
flex-direction: column;
align-items: center;
}
.auto_suggestions .auto_suggestions_in {
border-top: 1px solid var(--k-border);
padding-top: 12px;
margin-bottom: 0;
padding: 0.4em;
}
.ranked-c-adjust-info-icon:not(.new-tooltip) .k-tooltip,
.tooltip-trigger:not(.new-tooltip) .k-tooltip {
color: var(--k-tooltip-text);
}
.paywall-icon .paywall-tooltip {
color: var(--k-tooltip-text);
}
/* Kagi Assistant */
.orb_chat_box {
color: var(--k-foreground-secondary);
}
/* Tweaks - Sub Result Eyecandy */
.sri-group .sr-group .__sri-desc {
display: -webkit-box;
}
.sri-group .__dl {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.__srgi {
padding: 0.7em;
background: var(--k-surface-primary);
border-radius: 10px;
border: 1px solid var(--k-border);
}
/* TODO(legacy-cleanup): remove? */
.related-items {
display: grid;
margin-top: 0;
padding-right: 0;
grid-template-columns: 1fr 1fr;
gap: 0.6em;
}
.related-items a {
border-radius: 5px;
display: flex;
margin-bottom: 0;
width: auto;
}
.related-items a:nth-child(odd) {
margin-right: 0;
}
.related-items a:nth-child(even) {
margin-left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment