Something went wrong. Try again.
a kagi theme based on https://github.com/prometheux-ar/cyberpunk/blob/632f187e343fafc499d89f5ddaa6895ebc10ab94/themes/cyberpunk-umbra-color-theme.json
Something went wrong. Try again.
38 kB · 739 lines · Created 11mo ago
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739/* UMBRA Protocol Theme for Kagi - With Theme Class Support */
/* Core variables - UMBRA unified dark theme */:root { /* UMBRA palette */ --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; --mantle: #1e1d43; --crust: #0f0d22; /* Set dark mode scheme and core UI variables */ --color-scheme: dark; --app-bg: var(--crust); --app-text: var(--text); --header-bg: var(--crust); --app-frame-bg: var(--app-bg); --landing-bg: var(--app-bg); --app-bg-opac: rgba(16, 13, 35, 0); --bottom-bar-bg: var(--yellow); --white: var(--text); /* Derived color mappings */ --graphite: var(--base); --graphite-25: var(--overlay2); --graphite-50: var(--flamingo); --graphite-70: var(--pink); --graphite-100: var(--mauve); --graphite-200: var(--red); --graphite-300: var(--maroon); --graphite-400: var(--peach); --graphite-500: var(--yellow); --graphite-600: var(--green); --graphite-700: var(--teal); --graphite-800: var(--sky); --graphite-850: var(--sapphire); --graphite-900: var(--blue); --graphite-950: var(--lavender); --graphite-1000: var(--text); /* Chrome palette (collapsed to UMBRA accents) */ --chrome-25: var(--mauve); --chrome-50: var(--mauve); --chrome-70: var(--mauve); --chrome-100: var(--mauve); --chrome-200: var(--red); --chrome-300: var(--red); --chrome-400: var(--peach); --chrome-500: var(--yellow); --chrome-600: var(--green); --chrome-700: var(--blue); --chrome-800: var(--sky); --chrome-850: var(--sapphire); --chrome-900: var(--blue); --chrome-950: var(--lavender); --chrome-1000: var(--text); /* Purple palette */ --purple-300: var(--lavender); --purple-400: var(--blue); --purple-500: var(--sapphire); --purple-600: var(--sky); --purple-800: var(--teal); --purple-900: var(--green); /* Primary palette (collapsed to UMBRA core) */ --primary: var(--text); --primary-25: var(--overlay2); --primary-50: var(--overlay2); --primary-70: var(--subtext1); --primary-100: var(--mauve); --primary-200: var(--red); --primary-300: var(--red); --primary-400: var(--peach); --primary-500: var(--yellow); --primary-600: var(--green); --primary-700: var(--teal); --primary-800: var(--sky); --primary-850: var(--sapphire); --primary-900: var(--blue); --primary-950: var(--lavender); --primary-1000: var(--text); --primary-g: var(--text); --primary-g-2: var(--red); --primary-g-6: var(--green); --primary-g-8: var(--sky); --primary-300-solid: var(--red); /* Functional colors */ --warning: var(--peach); --info: var(--blue); --danger: var(--red); --success: var(--green); --calm: var(--surface0); --link: var(--blue); --primary-hover: var(--green); --primary-hover-hover: var(--subtext1); --primary-visited: var(--teal); /* UI Elements */ --kagi-highlight: var(--yellow); --beta-tag-bg: var(--yellow); --beta-tag-text: var(--crust); --beta-tag-inside-corners: var(--maroon); --kagi-light-cream: var(--surface0); --kagi-accent: var(--surface1); --kagi-sky: var(--sky); --kagi-sky-b: var(--sapphire); --kagi-sky-i: var(--sky); --kagi-orange: var(--maroon); --resultsummary-highlight: var(--surface2); --resultsummary-highlight_text: var(--text); --kagi-graphite: var(--text); --kagi-graphite-s: var(--overlay2); --kagi-graphite-text: var(--base); --kagi-graphite-ia: var(--text); --kagi-graphite-ia-color: var(--base); /* Shadows */ --inner-shadow: rgba(0, 0, 0, .15); --settings-app-inner-bg: var(--app-bg); --box-shadow: rgba(0, 0, 0, .25); --box-shadow-15: rgba(0, 0, 0, .35); --ranked-box-shadow: rgba(0, 0, 0, .45); /* Inputs and buttons */ --color-search-input-border: var(--mauve); --color-search-input: var(--crust); --color-search-input-opac: var(--app-bg-opac); --color-danger: var(--red); --input-bg: var(--app-bg); --btn-primary-bg: var(--text); --btn-primary-text: var(--crust); --btn-primary-color: var(--crust); --btn-group-bg: var(--mantle); /* Navigation */ --nav_n_se_line: var(--yellow); --nav_n_im_line: var(--blue); --nav_n_vi_line: var(--red); --nav_n_ne_line: var(--mauve); --nav_n_ma_line: var(--green); /* Sidebar */ --secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2); --app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow); --app-sidebar-nav-item-icon_hover: var(--base); /* Search results */ --result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover); --result-item-title-visited-border: var(--pink); --result-rank-icon-stroke_promoted: var(--text); --result-item-highlight: var(--sky); --search-result-content-text: var(--text); --search-result-url-link: var(--green); --search-result-title: var(--text); --search-result-title-hover: var(--primary-hover); --search-result-date-bg: var(--surface0); --search-result-date-new-bg: var(--base); --search-result-date-new: var(--sky); /* Domain ratings */ --domain-rank-icon-color-ban: var(--red); --domain-rank-icon-color-lower: var(--red); --domain-rank-icon-color-normal: var(--red); --domain-rank-icon-color-higher: var(--red); --domain-rank-icon-color-boosted: var(--red); --domain-rank-icon-color-trackers: var(--peach); --domain-rank-icon-color-trackers-hover: var(--maroon); --domain-rank-icon-color-scam: var(--peach); --domain-rank-icon-color-scam-hover: var(--maroon); --ranked-box-connection-secure: var(--green); --ranked-box-connection-insecure: var(--red); --ranked-box-tracker-desc-danger: var(--red); --ranked-box-tracker-desc-clear: var(--green); /* Inline content */ --inline-header-title: var(--text); --inline-widget-bg: var(--surface0); --inline-widget-hover-bg: var(--surface1); --inline-header-border: var(--red); --inline-domain-tag-bg: var(--pink); --related-item-bg: var(--surface0); --related-item-hover-bg: var(--surface1); --video-item-bg: var(--surface0); --auto-sugg-bg_hover: var(--surface0); /* Provider breakdown */ --provider-breakdown_server: var(--sky); --provider-breakdown_client: var(--peach); --provider-breakdown_speed1: var(--yellow); --provider-breakdown_speed2: var(--red); --provider-breakdown_speed3: var(--red); --widget-progress_bar: var(--text); --translate-fc_icon: var(--text); --rating-star_background: var(--surface1); --wiki-content-links: var(--text); --m_sri_gap_color: var(--surface1); /* AI chat */ --ai_chat_buble_a_bg: var(--kagi-accent); --ai_chat_buble_q_bg: var(--app-bg); --ai_chat_buble_dd_q_bg: var(--kagi-accent); --ai_chat_buble_dd_a_bg: var(--surface1); --ai_chat_buble_a_text: var(--app-text); --ai_chat_buble_q_text: var(--app-text); --ai_chat_input_text: var(--app-text); --ai_chat_input_button: var(--teal); /* Misc UI elements */ --doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon); --landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base); --app-logo: var(--text); --app-logo-bg: var(--yellow); --filters-clear-btn-icon: var(--maroon); --filter-dd-bg: var(--surface2); --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text); --dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1); --site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent); /* Code syntax highlighting */ --code-bg: var(--base); --code-border: var(--overlay0); --code-k: var(--mauve); --code-s: var(--green); --code-cm-c1: var(--maroon); --code-n: var(--mauve); --code-p: var(--text); --background-color-sky: var(--sky); /* Form elements */ --checkbox-bg: var(--mauve); --checkbox-check: var(--crust); --as-dd-border: var(--app-bg); --dd-list-input-bg: var(--base); --icon-purple: var(--sky); /* Onboarding elements */ --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex; --onb_theme_light_preview_box: flex; --onb_theme_calm_blue_preview_box: none; --onb_theme_royal_blue_preview_box: none; --onb_theme_moon_dark_preview_box: none; --image_brightness: 100%; } @media (prefers-color-scheme: dark) { .theme_moon_dark_conditional, .theme_moon_dark, .theme_dark { /* UMBRA palette */ --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; --mantle: #1e1d43; --crust: #0f0d22; /* Dark mode adjustments */ --color-scheme: dark; --app-bg: var(--crust); --app-text: var(--text); --header-bg: var(--app-bg); --inline-widget-bg: var(--surface0); --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--text); --btn-primary-text: var(--crust); --checkbox-bg: var(--green); --checkbox-check: var(--crust); --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); } .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { background-color: var(--surface0); border-color: var(--surface1); } .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar { background: var(--green); border-color: var(--primary-25); } .tag-selector:hover { background: var(--surface1); } .advanced-search-modal-backdrop:before { background-color: unset; } .advanced-search-modal { background-color: var(--crust); } @media all and (min-device-width: 766px) { form#form { margin: 0; border: 1px var(--peach) solid; border-radius: 35px; padding: 12px 20px; } } } /* Base styles */ body { font-family: Poppins, sans-serif !important; } /* Dropdowns */ .k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover { background-color: var(--surface2) !important; } .dropdown .dd-list ._0_list_items li:hover { color: var(--overlay0) !important; } .sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover { color: var(--overlay0) !important; } .k_ui_dropdown_data_list .list_items > div:hover { background-color: unset !important; color: unset !important; outline: none; text-decoration: none; } /* Domain badges & tags */ span.domain, #chat_box .chat_bubble .sources .domain { background-color: var(--surface0) !important; color: var(--text) !important; padding: 2px 4px !important; border-radius: 3px !important; } span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: var(--surface0) !important; } /* Toggle switches */ .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); } .k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); } /* Tooltips and focus states */ .k-tooltip { background-color: var(--primary-100); } :focus-visible { border-radius: 5px; outline: 2px solid var(--peach); } /* Sidebar */ div.sidebar-box { background-color: var(--mantle) !important; } .thread-list > li:is(.active, :hover, :focus-within) { background-color: var(--surface1) !important; } #thread-sidebar-collapse:hover { color: var(--crust); } .threads-pane .header { background: none !important; } .sidebar-box>.tags-pane { background: none !important; } .tag-selector:has(:checked) { background: var(--surface1) !important; } /* Header & Navigation */ header { background: var(--crust) !important; } header .header-btn:hover { color: var(--crust); } .landing-category-select .landing_cat_buttons > button.--active { align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; padding: 8px 16px; background-color: var(--surface0); font-weight: 700; } .landing-category-select .landing_cat_buttons > button { border-bottom: 2px solid transparent; color: var(--primary); font-size: .875rem; height: 47px; margin: 0; min-width: unset !important; padding: 0 8px; position: relative; } /* Navigation button highlights */ .landing-category-select .landing_cat_buttons > button.n_se.--active, .landing-category-select .landing_cat_buttons > button.n_se:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } .landing-category-select .landing_cat_buttons > button.n_im.--active, .landing-category-select .landing_cat_buttons > button.n_im:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } .landing-category-select .landing_cat_buttons > button.n_vi.--active, .landing-category-select .landing_cat_buttons > button.n_vi:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } .landing-category-select .landing_cat_buttons > button.n_ne.--active, .landing-category-select .landing_cat_buttons > button.n_ne:hover { border-bottom: 2px solid var(--nav_n_ne_line) !important; } .landing-category-select .landing_cat_buttons > button.n_ma.--active, .landing-category-select .landing_cat_buttons > button.n_ma:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } .landing_cat_buttons { border-bottom: 1px solid var(--primary-200); display: flex; justify-content: space-between; width: 100%; padding-bottom: 10px; } #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 65px; } /* Prompt & Chat styles */ .prompt-options button:hover, .prompt-options label:hover, .promptOptionsSelector .custom-assistants li.option:hover, .promptOptionsSelector .default-assistants li.option.focus, .promptOptionsSelector .default-assistants li.option:hover, .promptOptionsSelector .custom-assistants span a:hover, .promptOptionsSelector .custom-assistants li.option.focus, .prompt-options label:hover, .prompt-options button:hover { background-color: unset !important; } .promptOptionsSelector .custom-assistants li.option, .promptOptionsSelector .default-assistants li.option { color: var(--text); } /* Chat box styling */ #chat_box > div:nth-child(1), [aria-label="You said:"] { background-color: var(--surface0) !important; padding: 20px !important; border: 2px solid var(--overlay0) !important; border-radius: 25px !important; } .chat_bubble { padding-block: 32px; position: relative; border: 2px solid var(--overlay0); border-radius: 25px; margin-top: 25px; margin-bottom: 10px; padding: 20px; background-color: var(--crust); } .chat_bubble:focus-within:before, .chat_bubble:hover:before { background-color: unset !important; } .chat_bubble .actions { display: inline-flex !important; gap: 8px !important; flex-direction: row !important; } #chat_box .chat_bubble .actions [data-action]:is(a,button):hover { background: var(--surface1); } #chat_box .chat_bubble .content sup { background-color: var(--surface1); color: var(--text); } #chat_box .chat_bubble .content sup:hover { background-color: var(--surface2); } .message-info li .value { background-color: var(--surface0); color: var(--text); padding: 2px 5px; border-radius: 4px; } #prompt-box:before { border-top: 2px solid var(--peach); } #dictation-button:hover { color: var(--crust); } /* Form elements */ input[type="date"] { color: var(--primary-600) !important; } ._0_filters-clear-btn { color: var(--crust) !important; } ._0_filters-clear-btn i svg { color: var(--base) !important; } ._0_copied_tooltip { left: -45px; } /* Upload items */ #uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name { color: var(--crust); } #form .uploadLabel:hover { color: var(--crust); } .POI-item-back .text { color: var(--crust); } #popover-privacy > p:nth-child(3) > span > i { color: var(--crust) !important; } /* Search results */ .search-result, .sri-group { border-bottom: unset !important; } .inline-content+.search-result, .inline-content+.sri-group { border-top: unset !important; } .s-f-w.--active .search_area { padding: 10px !important; } .main-center-box>* { margin-inline: auto; max-width: 850px; padding-inline: 16px; width: 100%; } /* Optional: disable underline on title links */ .__sri-title .__sri_title_link { border-bottom: none; } #thread-sidebar-visible:checked~#sidebar-backdrop, .quick-settings, .quick-settings-footer, .promptOptionsSelector, .promptOptionsSelector .search-bar, .k_ui_dropdown_data_list, ._0_more_search_box, .dropdown .dd-list, .chat_bubble .actions, .citation, .message-info, .thread-more-menu, .threads-pane { background-color: var(--crust) !important; } .team_badge { color: var(--crust); } /* Desktop / Widescreen styles */ @media (min-width: 1280px) { :root { --sidebar-width: 550px; } .sidebar-box > .threads-pane { min-width: 350px; } } /* Mobile styles */ @media all and (max-device-width: 766px) { .bg-p-50 { background-color: var(--surface0); } .landing-category-select .landing_cat_buttons > button.--active { align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; padding: 8px 16px; background-color: var(--surface0); font-weight: 700; } .landing-category-select .landing_cat_buttons > button { border: none; color: var(--primary); font-size: .875rem; height: 47px; margin: 0; min-width: unset !important; padding: 0 8px; position: relative; } #thread-sidebar-visible:checked~#sidebar-backdrop { background-color: unset !important; } /* Navigation styles for mobile */ .landing_cat_buttons { border-bottom: none !important; display: flex; justify-content: space-between; width: 100%; } #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; } }
/* UMBRA Protocol Theme for Kagi - With Theme Class Support */
/* Core variables - UMBRA unified dark theme */:root { /* UMBRA palette */ --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; --mantle: #1e1d43; --crust: #0f0d22; /* Set dark mode scheme and core UI variables */ --color-scheme: dark; --app-bg: var(--crust); --app-text: var(--text); --header-bg: var(--crust); --app-frame-bg: var(--app-bg); --landing-bg: var(--app-bg); --app-bg-opac: rgba(16, 13, 35, 0); --bottom-bar-bg: var(--yellow); --white: var(--text); /* Derived color mappings */ --graphite: var(--base); --graphite-25: var(--overlay2); --graphite-50: var(--flamingo); --graphite-70: var(--pink); --graphite-100: var(--mauve); --graphite-200: var(--red); --graphite-300: var(--maroon); --graphite-400: var(--peach); --graphite-500: var(--yellow); --graphite-600: var(--green); --graphite-700: var(--teal); --graphite-800: var(--sky); --graphite-850: var(--sapphire); --graphite-900: var(--blue); --graphite-950: var(--lavender); --graphite-1000: var(--text); /* Chrome palette (collapsed to UMBRA accents) */ --chrome-25: var(--mauve); --chrome-50: var(--mauve); --chrome-70: var(--mauve); --chrome-100: var(--mauve); --chrome-200: var(--red); --chrome-300: var(--red); --chrome-400: var(--peach); --chrome-500: var(--yellow); --chrome-600: var(--green); --chrome-700: var(--blue); --chrome-800: var(--sky); --chrome-850: var(--sapphire); --chrome-900: var(--blue); --chrome-950: var(--lavender); --chrome-1000: var(--text); /* Purple palette */ --purple-300: var(--lavender); --purple-400: var(--blue); --purple-500: var(--sapphire); --purple-600: var(--sky); --purple-800: var(--teal); --purple-900: var(--green); /* Primary palette (collapsed to UMBRA core) */ --primary: var(--text); --primary-25: var(--overlay2); --primary-50: var(--overlay2); --primary-70: var(--subtext1); --primary-100: var(--mauve); --primary-200: var(--red); --primary-300: var(--red); --primary-400: var(--peach); --primary-500: var(--yellow); --primary-600: var(--green); --primary-700: var(--teal); --primary-800: var(--sky); --primary-850: var(--sapphire); --primary-900: var(--blue); --primary-950: var(--lavender); --primary-1000: var(--text); --primary-g: var(--text); --primary-g-2: var(--red); --primary-g-6: var(--green); --primary-g-8: var(--sky); --primary-300-solid: var(--red); /* Functional colors */ --warning: var(--peach); --info: var(--blue); --danger: var(--red); --success: var(--green); --calm: var(--surface0); --link: var(--blue); --primary-hover: var(--green); --primary-hover-hover: var(--subtext1); --primary-visited: var(--teal); /* UI Elements */ --kagi-highlight: var(--yellow); --beta-tag-bg: var(--yellow); --beta-tag-text: var(--crust); --beta-tag-inside-corners: var(--maroon); --kagi-light-cream: var(--surface0); --kagi-accent: var(--surface1); --kagi-sky: var(--sky); --kagi-sky-b: var(--sapphire); --kagi-sky-i: var(--sky); --kagi-orange: var(--maroon); --resultsummary-highlight: var(--surface2); --resultsummary-highlight_text: var(--text); --kagi-graphite: var(--text); --kagi-graphite-s: var(--overlay2); --kagi-graphite-text: var(--base); --kagi-graphite-ia: var(--text); --kagi-graphite-ia-color: var(--base); /* Shadows */ --inner-shadow: rgba(0, 0, 0, .15); --settings-app-inner-bg: var(--app-bg); --box-shadow: rgba(0, 0, 0, .25); --box-shadow-15: rgba(0, 0, 0, .35); --ranked-box-shadow: rgba(0, 0, 0, .45); /* Inputs and buttons */ --color-search-input-border: var(--mauve); --color-search-input: var(--crust); --color-search-input-opac: var(--app-bg-opac); --color-danger: var(--red); --input-bg: var(--app-bg); --btn-primary-bg: var(--text); --btn-primary-text: var(--crust); --btn-primary-color: var(--crust); --btn-group-bg: var(--mantle); /* Navigation */ --nav_n_se_line: var(--yellow); --nav_n_im_line: var(--blue); --nav_n_vi_line: var(--red); --nav_n_ne_line: var(--mauve); --nav_n_ma_line: var(--green); /* Sidebar */ --secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2); --app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow); --app-sidebar-nav-item-icon_hover: var(--base); /* Search results */ --result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover); --result-item-title-visited-border: var(--pink); --result-rank-icon-stroke_promoted: var(--text); --result-item-highlight: var(--sky); --search-result-content-text: var(--text); --search-result-url-link: var(--green); --search-result-title: var(--text); --search-result-title-hover: var(--primary-hover); --search-result-date-bg: var(--surface0); --search-result-date-new-bg: var(--base); --search-result-date-new: var(--sky); /* Domain ratings */ --domain-rank-icon-color-ban: var(--red); --domain-rank-icon-color-lower: var(--red); --domain-rank-icon-color-normal: var(--red); --domain-rank-icon-color-higher: var(--red); --domain-rank-icon-color-boosted: var(--red); --domain-rank-icon-color-trackers: var(--peach); --domain-rank-icon-color-trackers-hover: var(--maroon); --domain-rank-icon-color-scam: var(--peach); --domain-rank-icon-color-scam-hover: var(--maroon); --ranked-box-connection-secure: var(--green); --ranked-box-connection-insecure: var(--red); --ranked-box-tracker-desc-danger: var(--red); --ranked-box-tracker-desc-clear: var(--green); /* Inline content */ --inline-header-title: var(--text); --inline-widget-bg: var(--surface0); --inline-widget-hover-bg: var(--surface1); --inline-header-border: var(--red); --inline-domain-tag-bg: var(--pink); --related-item-bg: var(--surface0); --related-item-hover-bg: var(--surface1); --video-item-bg: var(--surface0); --auto-sugg-bg_hover: var(--surface0); /* Provider breakdown */ --provider-breakdown_server: var(--sky); --provider-breakdown_client: var(--peach); --provider-breakdown_speed1: var(--yellow); --provider-breakdown_speed2: var(--red); --provider-breakdown_speed3: var(--red); --widget-progress_bar: var(--text); --translate-fc_icon: var(--text); --rating-star_background: var(--surface1); --wiki-content-links: var(--text); --m_sri_gap_color: var(--surface1); /* AI chat */ --ai_chat_buble_a_bg: var(--kagi-accent); --ai_chat_buble_q_bg: var(--app-bg); --ai_chat_buble_dd_q_bg: var(--kagi-accent); --ai_chat_buble_dd_a_bg: var(--surface1); --ai_chat_buble_a_text: var(--app-text); --ai_chat_buble_q_text: var(--app-text); --ai_chat_input_text: var(--app-text); --ai_chat_input_button: var(--teal); /* Misc UI elements */ --doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon); --landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base); --app-logo: var(--text); --app-logo-bg: var(--yellow); --filters-clear-btn-icon: var(--maroon); --filter-dd-bg: var(--surface2); --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text); --dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1); --site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent); /* Code syntax highlighting */ --code-bg: var(--base); --code-border: var(--overlay0); --code-k: var(--mauve); --code-s: var(--green); --code-cm-c1: var(--maroon); --code-n: var(--mauve); --code-p: var(--text); --background-color-sky: var(--sky); /* Form elements */ --checkbox-bg: var(--mauve); --checkbox-check: var(--crust); --as-dd-border: var(--app-bg); --dd-list-input-bg: var(--base); --icon-purple: var(--sky); /* Onboarding elements */ --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex; --onb_theme_light_preview_box: flex; --onb_theme_calm_blue_preview_box: none; --onb_theme_royal_blue_preview_box: none; --onb_theme_moon_dark_preview_box: none; --image_brightness: 100%; } @media (prefers-color-scheme: dark) { .theme_moon_dark_conditional, .theme_moon_dark, .theme_dark { /* UMBRA palette */ --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; --mantle: #1e1d43; --crust: #0f0d22; /* Dark mode adjustments */ --color-scheme: dark; --app-bg: var(--base); --app-text: var(--text); --header-bg: var(--app-bg); --inline-widget-bg: var(--surface0); --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--text); --btn-primary-text: var(--base); --checkbox-bg: var(--yellow); --checkbox-check: var(--base); --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); } .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { background-color: var(--surface0); border-color: var(--surface1); } .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar { background: var(--green); border-color: var(--primary-25); } .tag-selector:hover { background: var(--surface1); } .advanced-search-modal-backdrop:before { background-color: unset; } .advanced-search-modal { background-color: var(--crust); } @media all and (min-device-width: 766px) { form#form { margin: 0; border: 1px var(--peach) solid; border-radius: 35px; padding: 12px 20px; } } } /* Base styles */ body { font-family: Poppins, sans-serif !important; } /* Dropdowns */ .k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover { background-color: var(--surface2) !important; } .dropdown .dd-list ._0_list_items li:hover { color: var(--overlay0) !important; } .sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover { color: var(--overlay0) !important; } .k_ui_dropdown_data_list .list_items > div:hover { background-color: unset !important; color: unset !important; outline: none; text-decoration: none; } /* Domain badges & tags */ span.domain, #chat_box .chat_bubble .sources .domain { background-color: var(--surface0) !important; color: var(--text) !important; padding: 2px 4px !important; border-radius: 3px !important; } span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: var(--surface0) !important; } /* Toggle switches */ .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); } .k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); } /* Tooltips and focus states */ .k-tooltip { background-color: var(--primary-100); } :focus-visible { border-radius: 5px; outline: 2px solid var(--peach); } /* Sidebar */ div.sidebar-box { background-color: var(--mantle) !important; } .thread-list > li:is(.active, :hover, :focus-within) { background-color: var(--surface1) !important; } #thread-sidebar-collapse:hover { color: var(--crust); } .threads-pane .header { background: none !important; } .sidebar-box>.tags-pane { background: none !important; } .tag-selector:has(:checked) { background: var(--surface1) !important; } /* Header & Navigation */ header { background: var(--crust) !important; } header .header-btn:hover { color: var(--crust); } .landing-category-select .landing_cat_buttons > button.--active { align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; padding: 8px 16px; background-color: var(--surface0); font-weight: 700; } .landing-category-select .landing_cat_buttons > button { border-bottom: 2px solid transparent; color: var(--primary); font-size: .875rem; height: 47px; margin: 0; min-width: unset !important; padding: 0 8px; position: relative; } /* Navigation button highlights */ .landing-category-select .landing_cat_buttons > button.n_se.--active, .landing-category-select .landing_cat_buttons > button.n_se:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } .landing-category-select .landing_cat_buttons > button.n_im.--active, .landing-category-select .landing_cat_buttons > button.n_im:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } .landing-category-select .landing_cat_buttons > button.n_vi.--active, .landing-category-select .landing_cat_buttons > button.n_vi:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } .landing-category-select .landing_cat_buttons > button.n_ne.--active, .landing-category-select .landing_cat_buttons > button.n_ne:hover { border-bottom: 2px solid var(--nav_n_ne_line) !important; } .landing-category-select .landing_cat_buttons > button.n_ma.--active, .landing-category-select .landing_cat_buttons > button.n_ma:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } .landing_cat_buttons { border-bottom: 1px solid var(--primary-200); display: flex; justify-content: space-between; width: 100%; padding-bottom: 10px; } #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 65px; } /* Prompt & Chat styles */ .prompt-options button:hover, .prompt-options label:hover, .promptOptionsSelector .custom-assistants li.option:hover, .promptOptionsSelector .default-assistants li.option.focus, .promptOptionsSelector .default-assistants li.option:hover, .promptOptionsSelector .custom-assistants span a:hover, .promptOptionsSelector .custom-assistants li.option.focus, .prompt-options label:hover, .prompt-options button:hover { background-color: unset !important; } .promptOptionsSelector .custom-assistants li.option, .promptOptionsSelector .default-assistants li.option { color: var(--text); } /* Chat box styling */ #chat_box > div:nth-child(1), [aria-label="You said:"] { background-color: var(--surface0) !important; padding: 20px !important; border: 2px solid var(--overlay0) !important; border-radius: 25px !important; } .chat_bubble { padding-block: 32px; position: relative; border: 2px solid var(--overlay0); border-radius: 25px; margin-top: 25px; margin-bottom: 10px; padding: 20px; background-color: var(--crust); } .chat_bubble:focus-within:before, .chat_bubble:hover:before { background-color: unset !important; } .chat_bubble .actions { display: inline-flex !important; gap: 8px !important; flex-direction: row !important; } #chat_box .chat_bubble .actions [data-action]:is(a,button):hover { background: var(--surface1); } #chat_box .chat_bubble .content sup { background-color: var(--surface1); color: var(--text); } #chat_box .chat_bubble .content sup:hover { background-color: var(--surface2); } .message-info li .value { background-color: var(--surface0); color: var(--text); padding: 2px 5px; border-radius: 4px; } #prompt-box:before { border-top: 2px solid var(--peach); } #dictation-button:hover { color: var(--crust); } /* Form elements */ input[type="date"] { color: var(--primary-600) !important; } ._0_filters-clear-btn { color: var(--crust) !important; } ._0_filters-clear-btn i svg { color: var(--base) !important; } ._0_copied_tooltip { left: -45px; } /* Upload items */ #uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name { color: var(--crust); } #form .uploadLabel:hover { color: var(--crust); } .POI-item-back .text { color: var(--crust); } #popover-privacy > p:nth-child(3) > span > i { color: var(--crust) !important; } /* Search results */ .search-result, .sri-group { border-bottom: unset !important; } .inline-content+.search-result, .inline-content+.sri-group { border-top: unset !important; } .s-f-w.--active .search_area { padding: 10px !important; } .main-center-box>* { margin-inline: auto; max-width: 850px; padding-inline: 16px; width: 100%; } /* Optional: disable underline on title links */ .__sri-title .__sri_title_link { border-bottom: none; } #thread-sidebar-visible:checked~#sidebar-backdrop, .quick-settings, .quick-settings-footer, .promptOptionsSelector, .promptOptionsSelector .search-bar, .k_ui_dropdown_data_list, ._0_more_search_box, .dropdown .dd-list, .chat_bubble .actions, .citation, .message-info, .thread-more-menu, .threads-pane { background-color: var(--crust) !important; } .team_badge { color: var(--crust); } /* Desktop / Widescreen styles */ @media (min-width: 1280px) { :root { --sidebar-width: 550px; } .sidebar-box > .threads-pane { min-width: 350px; } } /* Mobile styles */ @media all and (max-device-width: 766px) { .bg-p-50 { background-color: var(--surface0); } .landing-category-select .landing_cat_buttons > button.--active { align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; padding: 8px 16px; background-color: var(--surface0); font-weight: 700; } .landing-category-select .landing_cat_buttons > button { border: none; color: var(--primary); font-size: .875rem; height: 47px; margin: 0; min-width: unset !important; padding: 0 8px; position: relative; } #thread-sidebar-visible:checked~#sidebar-backdrop { background-color: unset !important; } /* Navigation styles for mobile */ .landing_cat_buttons { border-bottom: none !important; display: flex; justify-content: space-between; width: 100%; } #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; } }