a kagi theme based on https://github.com/prometheux-ar/cyberpunk/blob/632f187e343fafc499d89f5ddaa6895ebc10ab94/themes/cyberpunk-umbra-color-theme.json
Kagi-Theme-Cyberpunk2077-UMBRA-Protocol.css edited
739 lines 38 kB view raw
1/* UMBRA Protocol Theme for Kagi - With Theme Class Support */ 2 3/* Core variables - UMBRA unified dark theme */ 4:root { 5 /* UMBRA palette */ 6 --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; 7 --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; 8 --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; 9 --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; 10 --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; 11 --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; 12 --mantle: #1e1d43; --crust: #0f0d22; 13 14 /* Set dark mode scheme and core UI variables */ 15 --color-scheme: dark; 16 --app-bg: var(--crust); --app-text: var(--text); --header-bg: var(--crust); 17 --app-frame-bg: var(--app-bg); --landing-bg: var(--app-bg); 18 --app-bg-opac: rgba(16, 13, 35, 0); --bottom-bar-bg: var(--yellow); 19 --white: var(--text); 20 21 /* Derived color mappings */ 22 --graphite: var(--base); --graphite-25: var(--overlay2); --graphite-50: var(--flamingo); 23 --graphite-70: var(--pink); --graphite-100: var(--mauve); --graphite-200: var(--red); 24 --graphite-300: var(--maroon); --graphite-400: var(--peach); --graphite-500: var(--yellow); 25 --graphite-600: var(--green); --graphite-700: var(--teal); --graphite-800: var(--sky); 26 --graphite-850: var(--sapphire); --graphite-900: var(--blue); --graphite-950: var(--lavender); 27 --graphite-1000: var(--text); 28 29 /* Chrome palette (collapsed to UMBRA accents) */ 30 --chrome-25: var(--mauve); --chrome-50: var(--mauve); --chrome-70: var(--mauve); 31 --chrome-100: var(--mauve); --chrome-200: var(--red); --chrome-300: var(--red); 32 --chrome-400: var(--peach); --chrome-500: var(--yellow); --chrome-600: var(--green); 33 --chrome-700: var(--blue); --chrome-800: var(--sky); --chrome-850: var(--sapphire); 34 --chrome-900: var(--blue); --chrome-950: var(--lavender); --chrome-1000: var(--text); 35 36 /* Purple palette */ 37 --purple-300: var(--lavender); --purple-400: var(--blue); --purple-500: var(--sapphire); 38 --purple-600: var(--sky); --purple-800: var(--teal); --purple-900: var(--green); 39 40 /* Primary palette (collapsed to UMBRA core) */ 41 --primary: var(--text); --primary-25: var(--overlay2); --primary-50: var(--overlay2); 42 --primary-70: var(--subtext1); --primary-100: var(--mauve); --primary-200: var(--red); 43 --primary-300: var(--red); --primary-400: var(--peach); --primary-500: var(--yellow); 44 --primary-600: var(--green); --primary-700: var(--teal); --primary-800: var(--sky); 45 --primary-850: var(--sapphire); --primary-900: var(--blue); --primary-950: var(--lavender); 46 --primary-1000: var(--text); --primary-g: var(--text); --primary-g-2: var(--red); 47 --primary-g-6: var(--green); --primary-g-8: var(--sky); --primary-300-solid: var(--red); 48 49 /* Functional colors */ 50 --warning: var(--peach); --info: var(--blue); --danger: var(--red); --success: var(--green); 51 --calm: var(--surface0); --link: var(--blue); --primary-hover: var(--green); 52 --primary-hover-hover: var(--subtext1); --primary-visited: var(--teal); 53 54 /* UI Elements */ 55 --kagi-highlight: var(--yellow); --beta-tag-bg: var(--yellow); --beta-tag-text: var(--crust); 56 --beta-tag-inside-corners: var(--maroon); --kagi-light-cream: var(--surface0); 57 --kagi-accent: var(--surface1); --kagi-sky: var(--sky); --kagi-sky-b: var(--sapphire); 58 --kagi-sky-i: var(--sky); --kagi-orange: var(--maroon); 59 --resultsummary-highlight: var(--surface2); --resultsummary-highlight_text: var(--text); 60 --kagi-graphite: var(--text); --kagi-graphite-s: var(--overlay2); 61 --kagi-graphite-text: var(--base); --kagi-graphite-ia: var(--text); 62 --kagi-graphite-ia-color: var(--base); 63 64 /* Shadows */ 65 --inner-shadow: rgba(0, 0, 0, .15); --settings-app-inner-bg: var(--app-bg); 66 --box-shadow: rgba(0, 0, 0, .25); --box-shadow-15: rgba(0, 0, 0, .35); 67 --ranked-box-shadow: rgba(0, 0, 0, .45); 68 69 /* Inputs and buttons */ 70 --color-search-input-border: var(--mauve); --color-search-input: var(--crust); 71 --color-search-input-opac: var(--app-bg-opac); --color-danger: var(--red); 72 --input-bg: var(--app-bg); --btn-primary-bg: var(--text); --btn-primary-text: var(--crust); 73 --btn-primary-color: var(--crust); --btn-group-bg: var(--mantle); 74 75 /* Navigation */ 76 --nav_n_se_line: var(--yellow); --nav_n_im_line: var(--blue); --nav_n_vi_line: var(--red); 77 --nav_n_ne_line: var(--mauve); --nav_n_ma_line: var(--green); 78 79 /* Sidebar */ 80 --secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2); 81 --app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow); 82 --app-sidebar-nav-item-icon_hover: var(--base); 83 84 /* Search results */ 85 --result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover); 86 --result-item-title-visited-border: var(--pink); --result-rank-icon-stroke_promoted: var(--text); 87 --result-item-highlight: var(--sky); --search-result-content-text: var(--text); 88 --search-result-url-link: var(--green); --search-result-title: var(--text); 89 --search-result-title-hover: var(--primary-hover); --search-result-date-bg: var(--surface0); 90 --search-result-date-new-bg: var(--base); --search-result-date-new: var(--sky); 91 92 /* Domain ratings */ 93 --domain-rank-icon-color-ban: var(--red); --domain-rank-icon-color-lower: var(--red); 94 --domain-rank-icon-color-normal: var(--red); --domain-rank-icon-color-higher: var(--red); 95 --domain-rank-icon-color-boosted: var(--red); --domain-rank-icon-color-trackers: var(--peach); 96 --domain-rank-icon-color-trackers-hover: var(--maroon); --domain-rank-icon-color-scam: var(--peach); 97 --domain-rank-icon-color-scam-hover: var(--maroon); --ranked-box-connection-secure: var(--green); 98 --ranked-box-connection-insecure: var(--red); --ranked-box-tracker-desc-danger: var(--red); 99 --ranked-box-tracker-desc-clear: var(--green); 100 101 /* Inline content */ 102 --inline-header-title: var(--text); --inline-widget-bg: var(--surface0); 103 --inline-widget-hover-bg: var(--surface1); --inline-header-border: var(--red); 104 --inline-domain-tag-bg: var(--pink); --related-item-bg: var(--surface0); 105 --related-item-hover-bg: var(--surface1); --video-item-bg: var(--surface0); 106 --auto-sugg-bg_hover: var(--surface0); 107 108 /* Provider breakdown */ 109 --provider-breakdown_server: var(--sky); --provider-breakdown_client: var(--peach); 110 --provider-breakdown_speed1: var(--yellow); --provider-breakdown_speed2: var(--red); 111 --provider-breakdown_speed3: var(--red); --widget-progress_bar: var(--text); 112 --translate-fc_icon: var(--text); --rating-star_background: var(--surface1); 113 --wiki-content-links: var(--text); --m_sri_gap_color: var(--surface1); 114 115 /* AI chat */ 116 --ai_chat_buble_a_bg: var(--kagi-accent); --ai_chat_buble_q_bg: var(--app-bg); 117 --ai_chat_buble_dd_q_bg: var(--kagi-accent); --ai_chat_buble_dd_a_bg: var(--surface1); 118 --ai_chat_buble_a_text: var(--app-text); --ai_chat_buble_q_text: var(--app-text); 119 --ai_chat_input_text: var(--app-text); --ai_chat_input_button: var(--teal); 120 121 /* Misc UI elements */ 122 --doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon); 123 --landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base); 124 --app-logo: var(--text); --app-logo-bg: var(--yellow); --filters-clear-btn-icon: var(--maroon); 125 --filter-dd-bg: var(--surface2); --k-tooltip-bg: var(--background-color-sky); 126 --k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text); 127 --dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1); 128 --site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent); 129 130 /* Code syntax highlighting */ 131 --code-bg: var(--base); --code-border: var(--overlay0); --code-k: var(--mauve); 132 --code-s: var(--green); --code-cm-c1: var(--maroon); --code-n: var(--mauve); 133 --code-p: var(--text); --background-color-sky: var(--sky); 134 135 /* Form elements */ 136 --checkbox-bg: var(--mauve); --checkbox-check: var(--crust); --as-dd-border: var(--app-bg); 137 --dd-list-input-bg: var(--base); --icon-purple: var(--sky); 138 139 /* Onboarding elements */ 140 --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex; 141 --onb_theme_light_preview_box: flex; --onb_theme_calm_blue_preview_box: none; 142 --onb_theme_royal_blue_preview_box: none; --onb_theme_moon_dark_preview_box: none; 143 --image_brightness: 100%; 144 } 145 146 @media (prefers-color-scheme: dark) { 147 .theme_moon_dark_conditional, .theme_moon_dark, .theme_dark { 148 /* UMBRA palette */ 149 --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; 150 --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; 151 --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; 152 --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; 153 --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; 154 --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; 155 --mantle: #1e1d43; --crust: #0f0d22; 156 157 /* Dark mode adjustments */ 158 --color-scheme: dark; --app-bg: var(--crust); --app-text: var(--text); 159 --header-bg: var(--app-bg); --inline-widget-bg: var(--surface0); 160 --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--text); 161 --btn-primary-text: var(--crust); --checkbox-bg: var(--green); --checkbox-check: var(--crust); 162 --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; 163 --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; 164 --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); 165 } 166 .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { 167 background-color: var(--surface0); 168 border-color: var(--surface1); 169 } 170 .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar { 171 background: var(--green); 172 border-color: var(--primary-25); 173 } 174 .tag-selector:hover { 175 background: var(--surface1); 176 } 177 .advanced-search-modal-backdrop:before { 178 background-color: unset; 179 } 180 .advanced-search-modal { 181 background-color: var(--crust); 182 } 183 @media all and (min-device-width: 766px) { 184 form#form { 185 margin: 0; 186 border: 1px var(--peach) solid; 187 border-radius: 35px; 188 padding: 12px 20px; 189 } 190 } 191 } 192 193 /* Base styles */ 194 body { font-family: Poppins, sans-serif !important; } 195 196 /* Dropdowns */ 197 .k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover { background-color: var(--surface2) !important; } 198 .dropdown .dd-list ._0_list_items li:hover { color: var(--overlay0) !important; } 199 .sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover { color: var(--overlay0) !important; } 200 .k_ui_dropdown_data_list .list_items > div:hover { background-color: unset !important; color: unset !important; outline: none; text-decoration: none; } 201 202 /* Domain badges & tags */ 203 span.domain, #chat_box .chat_bubble .sources .domain { 204 background-color: var(--surface0) !important; color: var(--text) !important; 205 padding: 2px 4px !important; border-radius: 3px !important; 206 } 207 span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: var(--surface0) !important; } 208 209 /* Toggle switches */ 210 .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); } 211 .k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); } 212 213 /* Tooltips and focus states */ 214 .k-tooltip { background-color: var(--primary-100); } 215 :focus-visible { border-radius: 5px; outline: 2px solid var(--peach); } 216 217 /* Sidebar */ 218 div.sidebar-box { background-color: var(--mantle) !important; } 219 .thread-list > li:is(.active, :hover, :focus-within) { background-color: var(--surface1) !important; } 220 #thread-sidebar-collapse:hover { color: var(--crust); } 221 .threads-pane .header { background: none !important; } 222 .sidebar-box>.tags-pane { background: none !important; } 223 .tag-selector:has(:checked) { background: var(--surface1) !important; } 224 225 /* Header & Navigation */ 226 header { background: var(--crust) !important; } 227 header .header-btn:hover { color: var(--crust); } 228 229 .landing-category-select .landing_cat_buttons > button.--active { 230 align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; 231 color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; 232 padding: 8px 16px; background-color: var(--surface0); font-weight: 700; 233 } 234 235 .landing-category-select .landing_cat_buttons > button { 236 border-bottom: 2px solid transparent; color: var(--primary); 237 font-size: .875rem; height: 47px; margin: 0; min-width: unset !important; 238 padding: 0 8px; position: relative; 239 } 240 241 /* Navigation button highlights */ 242 .landing-category-select .landing_cat_buttons > button.n_se.--active, 243 .landing-category-select .landing_cat_buttons > button.n_se:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } 244 .landing-category-select .landing_cat_buttons > button.n_im.--active, 245 .landing-category-select .landing_cat_buttons > button.n_im:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } 246 .landing-category-select .landing_cat_buttons > button.n_vi.--active, 247 .landing-category-select .landing_cat_buttons > button.n_vi:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } 248 .landing-category-select .landing_cat_buttons > button.n_ne.--active, 249 .landing-category-select .landing_cat_buttons > button.n_ne:hover { border-bottom: 2px solid var(--nav_n_ne_line) !important; } 250 .landing-category-select .landing_cat_buttons > button.n_ma.--active, 251 .landing-category-select .landing_cat_buttons > button.n_ma:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } 252 253 .landing_cat_buttons { 254 border-bottom: 1px solid var(--primary-200); display: flex; 255 justify-content: space-between; width: 100%; padding-bottom: 10px; 256 } 257 258 #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 65px; } 259 260 /* Prompt & Chat styles */ 261 .prompt-options button:hover, .prompt-options label:hover, 262 .promptOptionsSelector .custom-assistants li.option:hover, 263 .promptOptionsSelector .default-assistants li.option.focus, 264 .promptOptionsSelector .default-assistants li.option:hover, 265 .promptOptionsSelector .custom-assistants span a:hover, 266 .promptOptionsSelector .custom-assistants li.option.focus, 267 .prompt-options label:hover, .prompt-options button:hover { background-color: unset !important; } 268 269 .promptOptionsSelector .custom-assistants li.option, 270 .promptOptionsSelector .default-assistants li.option { color: var(--text); } 271 272 /* Chat box styling */ 273 #chat_box > div:nth-child(1), [aria-label="You said:"] { 274 background-color: var(--surface0) !important; padding: 20px !important; 275 border: 2px solid var(--overlay0) !important; border-radius: 25px !important; 276 } 277 278 .chat_bubble { 279 padding-block: 32px; position: relative; border: 2px solid var(--overlay0); 280 border-radius: 25px; margin-top: 25px; margin-bottom: 10px; padding: 20px; background-color: var(--crust); 281 } 282 283 .chat_bubble:focus-within:before, .chat_bubble:hover:before { background-color: unset !important; } 284 .chat_bubble .actions { display: inline-flex !important; gap: 8px !important; flex-direction: row !important; } 285 #chat_box .chat_bubble .actions [data-action]:is(a,button):hover { background: var(--surface1); } 286 287 #chat_box .chat_bubble .content sup { 288 background-color: var(--surface1); color: var(--text); 289 } 290 #chat_box .chat_bubble .content sup:hover { background-color: var(--surface2); } 291 292 .message-info li .value { 293 background-color: var(--surface0); color: var(--text); 294 padding: 2px 5px; border-radius: 4px; 295 } 296 297 #prompt-box:before { border-top: 2px solid var(--peach); } 298 #dictation-button:hover { color: var(--crust); } 299 300 /* Form elements */ 301 input[type="date"] { color: var(--primary-600) !important; } 302 ._0_filters-clear-btn { color: var(--crust) !important; } 303 ._0_filters-clear-btn i svg { color: var(--base) !important; } 304 ._0_copied_tooltip { left: -45px; } 305 306 /* Upload items */ 307 #uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name { color: var(--crust); } 308 #form .uploadLabel:hover { color: var(--crust); } 309 .POI-item-back .text { color: var(--crust); } 310 #popover-privacy > p:nth-child(3) > span > i { color: var(--crust) !important; } 311 312 /* Search results */ 313 .search-result, .sri-group { border-bottom: unset !important; } 314 .inline-content+.search-result, .inline-content+.sri-group { border-top: unset !important; } 315 .s-f-w.--active .search_area { padding: 10px !important; } 316 317 .main-center-box>* { 318 margin-inline: auto; max-width: 850px; 319 padding-inline: 16px; width: 100%; 320 } 321 322 /* Optional: disable underline on title links */ 323 .__sri-title .__sri_title_link { border-bottom: none; } 324 325 #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 { 326 background-color: var(--crust) !important; 327 } 328 329 .team_badge { 330 color: var(--crust); 331 } 332 333 /* Desktop / Widescreen styles */ 334 @media (min-width: 1280px) { 335 :root { 336 --sidebar-width: 550px; 337 } 338 339 .sidebar-box > .threads-pane { 340 min-width: 350px; 341 } 342 } 343 344 /* Mobile styles */ 345 @media all and (max-device-width: 766px) { 346 .bg-p-50 { background-color: var(--surface0); } 347 348 .landing-category-select .landing_cat_buttons > button.--active { 349 align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; 350 color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; 351 padding: 8px 16px; background-color: var(--surface0); font-weight: 700; 352 } 353 354 .landing-category-select .landing_cat_buttons > button { 355 border: none; color: var(--primary); font-size: .875rem; height: 47px; 356 margin: 0; min-width: unset !important; padding: 0 8px; position: relative; 357 } 358 #thread-sidebar-visible:checked~#sidebar-backdrop { 359 background-color: unset !important; 360 } 361 362 /* Navigation styles for mobile */ 363 .landing_cat_buttons { 364 border-bottom: none !important; display: flex; 365 justify-content: space-between; width: 100%; 366 } 367 368 #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; } 369 } 370 371/* UMBRA Protocol Theme for Kagi - With Theme Class Support */ 372 373/* Core variables - UMBRA unified dark theme */ 374:root { 375 /* UMBRA palette */ 376 --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; 377 --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; 378 --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; 379 --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; 380 --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; 381 --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; 382 --mantle: #1e1d43; --crust: #0f0d22; 383 384 /* Set dark mode scheme and core UI variables */ 385 --color-scheme: dark; 386 --app-bg: var(--crust); --app-text: var(--text); --header-bg: var(--crust); 387 --app-frame-bg: var(--app-bg); --landing-bg: var(--app-bg); 388 --app-bg-opac: rgba(16, 13, 35, 0); --bottom-bar-bg: var(--yellow); 389 --white: var(--text); 390 391 /* Derived color mappings */ 392 --graphite: var(--base); --graphite-25: var(--overlay2); --graphite-50: var(--flamingo); 393 --graphite-70: var(--pink); --graphite-100: var(--mauve); --graphite-200: var(--red); 394 --graphite-300: var(--maroon); --graphite-400: var(--peach); --graphite-500: var(--yellow); 395 --graphite-600: var(--green); --graphite-700: var(--teal); --graphite-800: var(--sky); 396 --graphite-850: var(--sapphire); --graphite-900: var(--blue); --graphite-950: var(--lavender); 397 --graphite-1000: var(--text); 398 399 /* Chrome palette (collapsed to UMBRA accents) */ 400 --chrome-25: var(--mauve); --chrome-50: var(--mauve); --chrome-70: var(--mauve); 401 --chrome-100: var(--mauve); --chrome-200: var(--red); --chrome-300: var(--red); 402 --chrome-400: var(--peach); --chrome-500: var(--yellow); --chrome-600: var(--green); 403 --chrome-700: var(--blue); --chrome-800: var(--sky); --chrome-850: var(--sapphire); 404 --chrome-900: var(--blue); --chrome-950: var(--lavender); --chrome-1000: var(--text); 405 406 /* Purple palette */ 407 --purple-300: var(--lavender); --purple-400: var(--blue); --purple-500: var(--sapphire); 408 --purple-600: var(--sky); --purple-800: var(--teal); --purple-900: var(--green); 409 410 /* Primary palette (collapsed to UMBRA core) */ 411 --primary: var(--text); --primary-25: var(--overlay2); --primary-50: var(--overlay2); 412 --primary-70: var(--subtext1); --primary-100: var(--mauve); --primary-200: var(--red); 413 --primary-300: var(--red); --primary-400: var(--peach); --primary-500: var(--yellow); 414 --primary-600: var(--green); --primary-700: var(--teal); --primary-800: var(--sky); 415 --primary-850: var(--sapphire); --primary-900: var(--blue); --primary-950: var(--lavender); 416 --primary-1000: var(--text); --primary-g: var(--text); --primary-g-2: var(--red); 417 --primary-g-6: var(--green); --primary-g-8: var(--sky); --primary-300-solid: var(--red); 418 419 /* Functional colors */ 420 --warning: var(--peach); --info: var(--blue); --danger: var(--red); --success: var(--green); 421 --calm: var(--surface0); --link: var(--blue); --primary-hover: var(--green); 422 --primary-hover-hover: var(--subtext1); --primary-visited: var(--teal); 423 424 /* UI Elements */ 425 --kagi-highlight: var(--yellow); --beta-tag-bg: var(--yellow); --beta-tag-text: var(--crust); 426 --beta-tag-inside-corners: var(--maroon); --kagi-light-cream: var(--surface0); 427 --kagi-accent: var(--surface1); --kagi-sky: var(--sky); --kagi-sky-b: var(--sapphire); 428 --kagi-sky-i: var(--sky); --kagi-orange: var(--maroon); 429 --resultsummary-highlight: var(--surface2); --resultsummary-highlight_text: var(--text); 430 --kagi-graphite: var(--text); --kagi-graphite-s: var(--overlay2); 431 --kagi-graphite-text: var(--base); --kagi-graphite-ia: var(--text); 432 --kagi-graphite-ia-color: var(--base); 433 434 /* Shadows */ 435 --inner-shadow: rgba(0, 0, 0, .15); --settings-app-inner-bg: var(--app-bg); 436 --box-shadow: rgba(0, 0, 0, .25); --box-shadow-15: rgba(0, 0, 0, .35); 437 --ranked-box-shadow: rgba(0, 0, 0, .45); 438 439 /* Inputs and buttons */ 440 --color-search-input-border: var(--mauve); --color-search-input: var(--crust); 441 --color-search-input-opac: var(--app-bg-opac); --color-danger: var(--red); 442 --input-bg: var(--app-bg); --btn-primary-bg: var(--text); --btn-primary-text: var(--crust); 443 --btn-primary-color: var(--crust); --btn-group-bg: var(--mantle); 444 445 /* Navigation */ 446 --nav_n_se_line: var(--yellow); --nav_n_im_line: var(--blue); --nav_n_vi_line: var(--red); 447 --nav_n_ne_line: var(--mauve); --nav_n_ma_line: var(--green); 448 449 /* Sidebar */ 450 --secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2); 451 --app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow); 452 --app-sidebar-nav-item-icon_hover: var(--base); 453 454 /* Search results */ 455 --result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover); 456 --result-item-title-visited-border: var(--pink); --result-rank-icon-stroke_promoted: var(--text); 457 --result-item-highlight: var(--sky); --search-result-content-text: var(--text); 458 --search-result-url-link: var(--green); --search-result-title: var(--text); 459 --search-result-title-hover: var(--primary-hover); --search-result-date-bg: var(--surface0); 460 --search-result-date-new-bg: var(--base); --search-result-date-new: var(--sky); 461 462 /* Domain ratings */ 463 --domain-rank-icon-color-ban: var(--red); --domain-rank-icon-color-lower: var(--red); 464 --domain-rank-icon-color-normal: var(--red); --domain-rank-icon-color-higher: var(--red); 465 --domain-rank-icon-color-boosted: var(--red); --domain-rank-icon-color-trackers: var(--peach); 466 --domain-rank-icon-color-trackers-hover: var(--maroon); --domain-rank-icon-color-scam: var(--peach); 467 --domain-rank-icon-color-scam-hover: var(--maroon); --ranked-box-connection-secure: var(--green); 468 --ranked-box-connection-insecure: var(--red); --ranked-box-tracker-desc-danger: var(--red); 469 --ranked-box-tracker-desc-clear: var(--green); 470 471 /* Inline content */ 472 --inline-header-title: var(--text); --inline-widget-bg: var(--surface0); 473 --inline-widget-hover-bg: var(--surface1); --inline-header-border: var(--red); 474 --inline-domain-tag-bg: var(--pink); --related-item-bg: var(--surface0); 475 --related-item-hover-bg: var(--surface1); --video-item-bg: var(--surface0); 476 --auto-sugg-bg_hover: var(--surface0); 477 478 /* Provider breakdown */ 479 --provider-breakdown_server: var(--sky); --provider-breakdown_client: var(--peach); 480 --provider-breakdown_speed1: var(--yellow); --provider-breakdown_speed2: var(--red); 481 --provider-breakdown_speed3: var(--red); --widget-progress_bar: var(--text); 482 --translate-fc_icon: var(--text); --rating-star_background: var(--surface1); 483 --wiki-content-links: var(--text); --m_sri_gap_color: var(--surface1); 484 485 /* AI chat */ 486 --ai_chat_buble_a_bg: var(--kagi-accent); --ai_chat_buble_q_bg: var(--app-bg); 487 --ai_chat_buble_dd_q_bg: var(--kagi-accent); --ai_chat_buble_dd_a_bg: var(--surface1); 488 --ai_chat_buble_a_text: var(--app-text); --ai_chat_buble_q_text: var(--app-text); 489 --ai_chat_input_text: var(--app-text); --ai_chat_input_button: var(--teal); 490 491 /* Misc UI elements */ 492 --doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon); 493 --landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base); 494 --app-logo: var(--text); --app-logo-bg: var(--yellow); --filters-clear-btn-icon: var(--maroon); 495 --filter-dd-bg: var(--surface2); --k-tooltip-bg: var(--background-color-sky); 496 --k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text); 497 --dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1); 498 --site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent); 499 500 /* Code syntax highlighting */ 501 --code-bg: var(--base); --code-border: var(--overlay0); --code-k: var(--mauve); 502 --code-s: var(--green); --code-cm-c1: var(--maroon); --code-n: var(--mauve); 503 --code-p: var(--text); --background-color-sky: var(--sky); 504 505 /* Form elements */ 506 --checkbox-bg: var(--mauve); --checkbox-check: var(--crust); --as-dd-border: var(--app-bg); 507 --dd-list-input-bg: var(--base); --icon-purple: var(--sky); 508 509 /* Onboarding elements */ 510 --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex; 511 --onb_theme_light_preview_box: flex; --onb_theme_calm_blue_preview_box: none; 512 --onb_theme_royal_blue_preview_box: none; --onb_theme_moon_dark_preview_box: none; 513 --image_brightness: 100%; 514 } 515 516 @media (prefers-color-scheme: dark) { 517 .theme_moon_dark_conditional, .theme_moon_dark, .theme_dark { 518 /* UMBRA palette */ 519 --rosewater: #00ff9c; --flamingo: #00ff9c; --pink: #00ff9c; --mauve: #00ff9c; 520 --red: #ff004c; --maroon: #ff004c; --peach: #ffff00; --yellow: #ffff00; 521 --green: #00b26d; --teal: #00ffc8; --sky: #435af7; --sapphire: #435af7; 522 --blue: #435af7; --lavender: #00ff9c; --text: #00FF9C; --subtext1: #00ff6a; 523 --subtext0: #7877b3; --overlay2: #7877b3; --overlay1: #00ff6a; --overlay0: #00ffc8; 524 --surface2: #352a60; --surface1: #1e1d43; --surface0: #352a60; --base: #100d23; 525 --mantle: #1e1d43; --crust: #0f0d22; 526 527 /* Dark mode adjustments */ 528 --color-scheme: dark; --app-bg: var(--base); --app-text: var(--text); 529 --header-bg: var(--app-bg); --inline-widget-bg: var(--surface0); 530 --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--text); 531 --btn-primary-text: var(--base); --checkbox-bg: var(--yellow); --checkbox-check: var(--base); 532 --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; 533 --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; 534 --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); 535 } 536 .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { 537 background-color: var(--surface0); 538 border-color: var(--surface1); 539 } 540 .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar { 541 background: var(--green); 542 border-color: var(--primary-25); 543 } 544 .tag-selector:hover { 545 background: var(--surface1); 546 } 547 .advanced-search-modal-backdrop:before { 548 background-color: unset; 549 } 550 .advanced-search-modal { 551 background-color: var(--crust); 552 } 553 @media all and (min-device-width: 766px) { 554 form#form { 555 margin: 0; 556 border: 1px var(--peach) solid; 557 border-radius: 35px; 558 padding: 12px 20px; 559 } 560 } 561 } 562 563 /* Base styles */ 564 body { font-family: Poppins, sans-serif !important; } 565 566 /* Dropdowns */ 567 .k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover { background-color: var(--surface2) !important; } 568 .dropdown .dd-list ._0_list_items li:hover { color: var(--overlay0) !important; } 569 .sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover { color: var(--overlay0) !important; } 570 .k_ui_dropdown_data_list .list_items > div:hover { background-color: unset !important; color: unset !important; outline: none; text-decoration: none; } 571 572 /* Domain badges & tags */ 573 span.domain, #chat_box .chat_bubble .sources .domain { 574 background-color: var(--surface0) !important; color: var(--text) !important; 575 padding: 2px 4px !important; border-radius: 3px !important; 576 } 577 span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: var(--surface0) !important; } 578 579 /* Toggle switches */ 580 .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); } 581 .k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); } 582 583 /* Tooltips and focus states */ 584 .k-tooltip { background-color: var(--primary-100); } 585 :focus-visible { border-radius: 5px; outline: 2px solid var(--peach); } 586 587 /* Sidebar */ 588 div.sidebar-box { background-color: var(--mantle) !important; } 589 .thread-list > li:is(.active, :hover, :focus-within) { background-color: var(--surface1) !important; } 590 #thread-sidebar-collapse:hover { color: var(--crust); } 591 .threads-pane .header { background: none !important; } 592 .sidebar-box>.tags-pane { background: none !important; } 593 .tag-selector:has(:checked) { background: var(--surface1) !important; } 594 595 /* Header & Navigation */ 596 header { background: var(--crust) !important; } 597 header .header-btn:hover { color: var(--crust); } 598 599 .landing-category-select .landing_cat_buttons > button.--active { 600 align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; 601 color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; 602 padding: 8px 16px; background-color: var(--surface0); font-weight: 700; 603 } 604 605 .landing-category-select .landing_cat_buttons > button { 606 border-bottom: 2px solid transparent; color: var(--primary); 607 font-size: .875rem; height: 47px; margin: 0; min-width: unset !important; 608 padding: 0 8px; position: relative; 609 } 610 611 /* Navigation button highlights */ 612 .landing-category-select .landing_cat_buttons > button.n_se.--active, 613 .landing-category-select .landing_cat_buttons > button.n_se:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } 614 .landing-category-select .landing_cat_buttons > button.n_im.--active, 615 .landing-category-select .landing_cat_buttons > button.n_im:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } 616 .landing-category-select .landing_cat_buttons > button.n_vi.--active, 617 .landing-category-select .landing_cat_buttons > button.n_vi:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; } 618 .landing-category-select .landing_cat_buttons > button.n_ne.--active, 619 .landing-category-select .landing_cat_buttons > button.n_ne:hover { border-bottom: 2px solid var(--nav_n_ne_line) !important; } 620 .landing-category-select .landing_cat_buttons > button.n_ma.--active, 621 .landing-category-select .landing_cat_buttons > button.n_ma:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; } 622 623 .landing_cat_buttons { 624 border-bottom: 1px solid var(--primary-200); display: flex; 625 justify-content: space-between; width: 100%; padding-bottom: 10px; 626 } 627 628 #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 65px; } 629 630 /* Prompt & Chat styles */ 631 .prompt-options button:hover, .prompt-options label:hover, 632 .promptOptionsSelector .custom-assistants li.option:hover, 633 .promptOptionsSelector .default-assistants li.option.focus, 634 .promptOptionsSelector .default-assistants li.option:hover, 635 .promptOptionsSelector .custom-assistants span a:hover, 636 .promptOptionsSelector .custom-assistants li.option.focus, 637 .prompt-options label:hover, .prompt-options button:hover { background-color: unset !important; } 638 639 .promptOptionsSelector .custom-assistants li.option, 640 .promptOptionsSelector .default-assistants li.option { color: var(--text); } 641 642 /* Chat box styling */ 643 #chat_box > div:nth-child(1), [aria-label="You said:"] { 644 background-color: var(--surface0) !important; padding: 20px !important; 645 border: 2px solid var(--overlay0) !important; border-radius: 25px !important; 646 } 647 648 .chat_bubble { 649 padding-block: 32px; position: relative; border: 2px solid var(--overlay0); 650 border-radius: 25px; margin-top: 25px; margin-bottom: 10px; padding: 20px; background-color: var(--crust); 651 } 652 653 .chat_bubble:focus-within:before, .chat_bubble:hover:before { background-color: unset !important; } 654 .chat_bubble .actions { display: inline-flex !important; gap: 8px !important; flex-direction: row !important; } 655 #chat_box .chat_bubble .actions [data-action]:is(a,button):hover { background: var(--surface1); } 656 657 #chat_box .chat_bubble .content sup { 658 background-color: var(--surface1); color: var(--text); 659 } 660 #chat_box .chat_bubble .content sup:hover { background-color: var(--surface2); } 661 662 .message-info li .value { 663 background-color: var(--surface0); color: var(--text); 664 padding: 2px 5px; border-radius: 4px; 665 } 666 667 #prompt-box:before { border-top: 2px solid var(--peach); } 668 #dictation-button:hover { color: var(--crust); } 669 670 /* Form elements */ 671 input[type="date"] { color: var(--primary-600) !important; } 672 ._0_filters-clear-btn { color: var(--crust) !important; } 673 ._0_filters-clear-btn i svg { color: var(--base) !important; } 674 ._0_copied_tooltip { left: -45px; } 675 676 /* Upload items */ 677 #uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name { color: var(--crust); } 678 #form .uploadLabel:hover { color: var(--crust); } 679 .POI-item-back .text { color: var(--crust); } 680 #popover-privacy > p:nth-child(3) > span > i { color: var(--crust) !important; } 681 682 /* Search results */ 683 .search-result, .sri-group { border-bottom: unset !important; } 684 .inline-content+.search-result, .inline-content+.sri-group { border-top: unset !important; } 685 .s-f-w.--active .search_area { padding: 10px !important; } 686 687 .main-center-box>* { 688 margin-inline: auto; max-width: 850px; 689 padding-inline: 16px; width: 100%; 690 } 691 692 /* Optional: disable underline on title links */ 693 .__sri-title .__sri_title_link { border-bottom: none; } 694 695 #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 { 696 background-color: var(--crust) !important; 697 } 698 699 .team_badge { 700 color: var(--crust); 701 } 702 703 /* Desktop / Widescreen styles */ 704 @media (min-width: 1280px) { 705 :root { 706 --sidebar-width: 550px; 707 } 708 709 .sidebar-box > .threads-pane { 710 min-width: 350px; 711 } 712 } 713 714 /* Mobile styles */ 715 @media all and (max-device-width: 766px) { 716 .bg-p-50 { background-color: var(--surface0); } 717 718 .landing-category-select .landing_cat_buttons > button.--active { 719 align-items: center; border: 1px solid var(--primary-400); border-radius: 999px; 720 color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px; 721 padding: 8px 16px; background-color: var(--surface0); font-weight: 700; 722 } 723 724 .landing-category-select .landing_cat_buttons > button { 725 border: none; color: var(--primary); font-size: .875rem; height: 47px; 726 margin: 0; min-width: unset !important; padding: 0 8px; position: relative; 727 } 728 #thread-sidebar-visible:checked~#sidebar-backdrop { 729 background-color: unset !important; 730 } 731 732 /* Navigation styles for mobile */ 733 .landing_cat_buttons { 734 border-bottom: none !important; display: flex; 735 justify-content: space-between; width: 100%; 736 } 737 738 #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; } 739 }