jcrabapple revisó este gist . Ir a la revisión
1 file changed, 7 insertions, 23 deletions
kagi-catppuccin-mocha.css
| @@ -143,30 +143,8 @@ | |||
| 143 | 143 | --image_brightness: 100%; | |
| 144 | 144 | } | |
| 145 | 145 | ||
| 146 | - | /* Dark theme overrides - using Kagi's .theme_moon_dark class */ | |
| 147 | - | .theme_moon_dark { | |
| 148 | - | /* Catppuccin Mocha colors */ | |
| 149 | - | --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; | |
| 150 | - | --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; | |
| 151 | - | --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; | |
| 152 | - | --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; | |
| 153 | - | --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; | |
| 154 | - | --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; | |
| 155 | - | --mantle: #181825; --crust: #11111b; | |
| 156 | - | ||
| 157 | - | /* Dark mode adjustments */ | |
| 158 | - | --color-scheme: dark; --app-bg: var(--base); --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(--base); --checkbox-bg: var(--yellow); --checkbox-check: var(--base); | |
| 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 | - | ||
| 167 | - | /* System preference override - only applies to .theme_moon_dark_conditional class */ | |
| 168 | 146 | @media (prefers-color-scheme: dark) { | |
| 169 | - | .theme_moon_dark_conditional { | |
| 147 | + | .theme_moon_dark_conditional, .theme_moon_dark, .theme_dark { | |
| 170 | 148 | /* Catppuccin Mocha colors */ | |
| 171 | 149 | --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; | |
| 172 | 150 | --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; | |
| @@ -196,6 +174,12 @@ | |||
| 196 | 174 | .tag-selector:hover { | |
| 197 | 175 | background: var(--surface1); | |
| 198 | 176 | } | |
| 177 | + | .advanced-search-modal-backdrop:before { | |
| 178 | + | background-color: unset; | |
| 179 | + | } | |
| 180 | + | .advanced-search-modal { | |
| 181 | + | background-color: var(--crust); | |
| 182 | + | } | |
| 199 | 183 | @media all and (min-device-width: 766px) { | |
| 200 | 184 | form#form { | |
| 201 | 185 | margin: 0; | |
jcrabapple revisó este gist . Ir a la revisión
1 file changed, 3 insertions, 3 deletions
kagi-catppuccin-mocha.css
| @@ -122,7 +122,7 @@ | |||
| 122 | 122 | --doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon); | |
| 123 | 123 | --landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base); | |
| 124 | 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: rgba(220, 224, 232, 0.9); | |
| 125 | + | --filter-dd-bg: var(--surface2); --k-tooltip-bg: var(--background-color-sky); | |
| 126 | 126 | --k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text); | |
| 127 | 127 | --dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1); | |
| 128 | 128 | --site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent); | |
| @@ -161,7 +161,7 @@ | |||
| 161 | 161 | --btn-primary-text: var(--base); --checkbox-bg: var(--yellow); --checkbox-check: var(--base); | |
| 162 | 162 | --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; | |
| 163 | 163 | --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; | |
| 164 | - | --k-tooltip-bg: rgba(30, 30, 46, .9); --k-tooltip-text: var(--text); | |
| 164 | + | --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); | |
| 165 | 165 | } | |
| 166 | 166 | ||
| 167 | 167 | /* System preference override - only applies to .theme_moon_dark_conditional class */ | |
| @@ -183,7 +183,7 @@ | |||
| 183 | 183 | --btn-primary-text: var(--base); --checkbox-bg: var(--yellow); --checkbox-check: var(--base); | |
| 184 | 184 | --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; | |
| 185 | 185 | --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; | |
| 186 | - | --k-tooltip-bg: rgba(30, 30, 46, .9); --k-tooltip-text: var(--text); | |
| 186 | + | --k-tooltip-bg: var(--background-color-sky); --k-tooltip-text: var(--text); | |
| 187 | 187 | } | |
| 188 | 188 | .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { | |
| 189 | 189 | background-color: var(--surface0); | |
jcrabapple revisó este gist . Ir a la revisión
1 file changed, 1 insertion, 1 deletion
kagi-catppuccin-mocha.css
| @@ -338,7 +338,7 @@ input[type="date"] { color: var(--primary-600) !important; } | |||
| 338 | 338 | /* Optional: disable underline on title links */ | |
| 339 | 339 | .__sri-title .__sri_title_link { border-bottom: none; } | |
| 340 | 340 | ||
| 341 | - | #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 { | |
| 341 | + | #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 { | |
| 342 | 342 | background-color: var(--crust) !important; | |
| 343 | 343 | } | |
| 344 | 344 | ||
jcrabapple revisó este gist . Ir a la revisión
1 file changed, 9 insertions, 1 deletion
kagi-catppuccin-mocha.css
| @@ -338,6 +338,14 @@ input[type="date"] { color: var(--primary-600) !important; } | |||
| 338 | 338 | /* Optional: disable underline on title links */ | |
| 339 | 339 | .__sri-title .__sri_title_link { border-bottom: none; } | |
| 340 | 340 | ||
| 341 | + | #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 { | |
| 342 | + | background-color: var(--crust) !important; | |
| 343 | + | } | |
| 344 | + | ||
| 345 | + | .team_badge { | |
| 346 | + | color: var(--crust); | |
| 347 | + | } | |
| 348 | + | ||
| 341 | 349 | /* Desktop / Widescreen styles */ | |
| 342 | 350 | @media (min-width: 1280px) { | |
| 343 | 351 | :root { | |
| @@ -374,4 +382,4 @@ input[type="date"] { color: var(--primary-600) !important; } | |||
| 374 | 382 | } | |
| 375 | 383 | ||
| 376 | 384 | #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; } | |
| 377 | - | } | |
| 385 | + | } | |
jcrabapple revisó este gist . Ir a la revisión
1 file changed, 35 insertions, 17 deletions
kagi-catppuccin-mocha.css
| @@ -185,6 +185,25 @@ | |||
| 185 | 185 | --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; | |
| 186 | 186 | --k-tooltip-bg: rgba(30, 30, 46, .9); --k-tooltip-text: var(--text); | |
| 187 | 187 | } | |
| 188 | + | .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { | |
| 189 | + | background-color: var(--surface0); | |
| 190 | + | border-color: var(--surface1); | |
| 191 | + | } | |
| 192 | + | .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar { | |
| 193 | + | background: var(--green); | |
| 194 | + | border-color: var(--primary-25); | |
| 195 | + | } | |
| 196 | + | .tag-selector:hover { | |
| 197 | + | background: var(--surface1); | |
| 198 | + | } | |
| 199 | + | @media all and (min-device-width: 766px) { | |
| 200 | + | form#form { | |
| 201 | + | margin: 0; | |
| 202 | + | border: 1px var(--peach) solid; | |
| 203 | + | border-radius: 35px; | |
| 204 | + | padding: 12px 20px; | |
| 205 | + | } | |
| 206 | + | } | |
| 188 | 207 | } | |
| 189 | 208 | ||
| 190 | 209 | /* Base styles */ | |
| @@ -206,14 +225,6 @@ span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: | |||
| 206 | 225 | /* Toggle switches */ | |
| 207 | 226 | .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); } | |
| 208 | 227 | .k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); } | |
| 209 | - | .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { | |
| 210 | - | background-color: var(--surface0); | |
| 211 | - | border-color: var(--surface1); | |
| 212 | - | } | |
| 213 | - | .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar { | |
| 214 | - | background: var(--green); | |
| 215 | - | border-color: var(--primary-25); | |
| 216 | - | } | |
| 217 | 228 | ||
| 218 | 229 | /* Tooltips and focus states */ | |
| 219 | 230 | .k-tooltip { background-color: var(--primary-100); } | |
| @@ -282,7 +293,7 @@ header .header-btn:hover { color: var(--crust); } | |||
| 282 | 293 | ||
| 283 | 294 | .chat_bubble { | |
| 284 | 295 | padding-block: 32px; position: relative; border: 2px solid var(--overlay0); | |
| 285 | - | border-radius: 25px; margin-top: 25px; padding: 20px; background-color: var(--crust); | |
| 296 | + | border-radius: 25px; margin-top: 25px; margin-bottom: 10px; padding: 20px; background-color: var(--crust); | |
| 286 | 297 | } | |
| 287 | 298 | ||
| 288 | 299 | .chat_bubble:focus-within:before, .chat_bubble:hover:before { background-color: unset !important; } | |
| @@ -299,7 +310,7 @@ header .header-btn:hover { color: var(--crust); } | |||
| 299 | 310 | padding: 2px 5px; border-radius: 4px; | |
| 300 | 311 | } | |
| 301 | 312 | ||
| 302 | - | #prompt-box { border-top: 2px solid var(--peach); } | |
| 313 | + | #prompt-box:before { border-top: 2px solid var(--peach); } | |
| 303 | 314 | #dictation-button:hover { color: var(--crust); } | |
| 304 | 315 | ||
| 305 | 316 | /* Form elements */ | |
| @@ -327,6 +338,17 @@ input[type="date"] { color: var(--primary-600) !important; } | |||
| 327 | 338 | /* Optional: disable underline on title links */ | |
| 328 | 339 | .__sri-title .__sri_title_link { border-bottom: none; } | |
| 329 | 340 | ||
| 341 | + | /* Desktop / Widescreen styles */ | |
| 342 | + | @media (min-width: 1280px) { | |
| 343 | + | :root { | |
| 344 | + | --sidebar-width: 550px; | |
| 345 | + | } | |
| 346 | + | ||
| 347 | + | .sidebar-box > .threads-pane { | |
| 348 | + | min-width: 350px; | |
| 349 | + | } | |
| 350 | + | } | |
| 351 | + | ||
| 330 | 352 | /* Mobile styles */ | |
| 331 | 353 | @media all and (max-device-width: 766px) { | |
| 332 | 354 | .bg-p-50 { background-color: var(--surface0); } | |
| @@ -341,13 +363,9 @@ input[type="date"] { color: var(--primary-600) !important; } | |||
| 341 | 363 | border: none; color: var(--primary); font-size: .875rem; height: 47px; | |
| 342 | 364 | margin: 0; min-width: unset !important; padding: 0 8px; position: relative; | |
| 343 | 365 | } | |
| 344 | - | ||
| 345 | - | @media (max-width: 1023.98px) { | |
| 346 | - | #thread-sidebar-visible:checked~#sidebar-backdrop { | |
| 347 | - | background-color: unset !important; | |
| 348 | - | } | |
| 349 | - | } | |
| 350 | - | ||
| 366 | + | #thread-sidebar-visible:checked~#sidebar-backdrop { | |
| 367 | + | background-color: unset !important; | |
| 368 | + | } | |
| 351 | 369 | ||
| 352 | 370 | /* Navigation styles for mobile */ | |
| 353 | 371 | .landing_cat_buttons { | |
jcrabapple revisó este gist . Ir a la revisión
1 file changed, 1 deletion
kagi-catppuccin-mocha.css
| @@ -80,7 +80,6 @@ | |||
| 80 | 80 | --secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2); | |
| 81 | 81 | --app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow); | |
| 82 | 82 | --app-sidebar-nav-item-icon_hover: var(--base); | |
| 83 | - | --sidebar-width: 300px; | |
| 84 | 83 | ||
| 85 | 84 | /* Search results */ | |
| 86 | 85 | --result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover); | |
jcrabapple revisó este gist . Ir a la revisión
1 file changed, 16 insertions, 1 deletion
kagi-catppuccin-mocha.css
| @@ -80,6 +80,7 @@ | |||
| 80 | 80 | --secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2); | |
| 81 | 81 | --app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow); | |
| 82 | 82 | --app-sidebar-nav-item-icon_hover: var(--base); | |
| 83 | + | --sidebar-width: 300px; | |
| 83 | 84 | ||
| 84 | 85 | /* Search results */ | |
| 85 | 86 | --result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover); | |
| @@ -206,6 +207,14 @@ span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: | |||
| 206 | 207 | /* Toggle switches */ | |
| 207 | 208 | .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); } | |
| 208 | 209 | .k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); } | |
| 210 | + | .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar:after { | |
| 211 | + | background-color: var(--surface0); | |
| 212 | + | border-color: var(--surface1); | |
| 213 | + | } | |
| 214 | + | .k_ui_toggle_switch input:checked~.k_ui_toggle_switch_bar { | |
| 215 | + | background: var(--green); | |
| 216 | + | border-color: var(--primary-25); | |
| 217 | + | } | |
| 209 | 218 | ||
| 210 | 219 | /* Tooltips and focus states */ | |
| 211 | 220 | .k-tooltip { background-color: var(--primary-100); } | |
| @@ -218,7 +227,6 @@ div.sidebar-box { background-color: var(--mantle) !important; } | |||
| 218 | 227 | .threads-pane .header { background: none !important; } | |
| 219 | 228 | .sidebar-box>.tags-pane { background: none !important; } | |
| 220 | 229 | .tag-selector:has(:checked) { background: var(--surface1) !important; } | |
| 221 | - | @media (min-width: 1280px) { .sidebar-box>.threads-pane { min-width: 200px; } } | |
| 222 | 230 | ||
| 223 | 231 | /* Header & Navigation */ | |
| 224 | 232 | header { background: var(--crust) !important; } | |
| @@ -334,6 +342,13 @@ input[type="date"] { color: var(--primary-600) !important; } | |||
| 334 | 342 | border: none; color: var(--primary); font-size: .875rem; height: 47px; | |
| 335 | 343 | margin: 0; min-width: unset !important; padding: 0 8px; position: relative; | |
| 336 | 344 | } | |
| 345 | + | ||
| 346 | + | @media (max-width: 1023.98px) { | |
| 347 | + | #thread-sidebar-visible:checked~#sidebar-backdrop { | |
| 348 | + | background-color: unset !important; | |
| 349 | + | } | |
| 350 | + | } | |
| 351 | + | ||
| 337 | 352 | ||
| 338 | 353 | /* Navigation styles for mobile */ | |
| 339 | 354 | .landing_cat_buttons { | |
jcrabapple revisó este gist . Ir a la revisión
1 file changed, 63 insertions, 59 deletions
kagi-catppuccin-mocha.css
| @@ -1,23 +1,23 @@ | |||
| 1 | 1 | /* Catppuccin Theme for Kagi - With Theme Class Support */ | |
| 2 | 2 | ||
| 3 | - | /* Core variables - Dark theme (Mocha) is default */ | |
| 4 | - | :root, .theme_moon_dark { | |
| 5 | - | /* Catppuccin Mocha colors */ | |
| 6 | - | --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; | |
| 7 | - | --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; | |
| 8 | - | --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; | |
| 9 | - | --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; | |
| 10 | - | --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; | |
| 11 | - | --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; | |
| 12 | - | --mantle: #181825; --crust: #11111b; | |
| 3 | + | /* Core variables - Light theme (Latte) is default */ | |
| 4 | + | :root { | |
| 5 | + | /* Catppuccin Latte colors */ | |
| 6 | + | --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef; | |
| 7 | + | --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d; | |
| 8 | + | --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5; | |
| 9 | + | --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77; | |
| 10 | + | --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; | |
| 11 | + | --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5; | |
| 12 | + | --mantle: #e6e9ef; --crust: #dce0e8; | |
| 13 | 13 | ||
| 14 | - | /* Set dark mode scheme and core UI variables */ | |
| 15 | - | --color-scheme: dark; | |
| 16 | - | --app-bg: var(--base); --app-text: var(--text); --header-bg: var(--app-bg); | |
| 14 | + | /* Set light mode scheme and core UI variables */ | |
| 15 | + | --color-scheme: light; | |
| 16 | + | --app-bg: var(--base); --app-text: var(--text); --header-bg: var(--crust); | |
| 17 | 17 | --app-frame-bg: var(--app-bg); --landing-bg: var(--app-bg); | |
| 18 | 18 | --app-bg-opac: rgba(30, 30, 46, 0); --bottom-bar-bg: var(--yellow); | |
| 19 | 19 | --white: var(--text); | |
| 20 | - | ||
| 20 | + | ||
| 21 | 21 | /* Derived color mappings */ | |
| 22 | 22 | --graphite: var(--base); --graphite-25: var(--overlay2); --graphite-50: var(--flamingo); | |
| 23 | 23 | --graphite-70: var(--pink); --graphite-100: var(--mauve); --graphite-200: var(--red); | |
| @@ -69,7 +69,7 @@ | |||
| 69 | 69 | /* Inputs and buttons */ | |
| 70 | 70 | --color-search-input-border: var(--mauve); --color-search-input: var(--base); | |
| 71 | 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(--base); | |
| 72 | + | --input-bg: var(--app-bg); --btn-primary-bg: var(--mauve); --btn-primary-text: var(--crust); | |
| 73 | 73 | --btn-primary-color: var(--base); --btn-group-bg: var(--base); | |
| 74 | 74 | ||
| 75 | 75 | /* Navigation */ | |
| @@ -122,7 +122,7 @@ | |||
| 122 | 122 | --doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon); | |
| 123 | 123 | --landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base); | |
| 124 | 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: rgba(30, 30, 46, .9); | |
| 125 | + | --filter-dd-bg: var(--surface2); --k-tooltip-bg: rgba(220, 224, 232, 0.9); | |
| 126 | 126 | --k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text); | |
| 127 | 127 | --dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1); | |
| 128 | 128 | --site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent); | |
| @@ -133,57 +133,57 @@ | |||
| 133 | 133 | --code-p: var(--text); --background-color-sky: var(--sky); | |
| 134 | 134 | ||
| 135 | 135 | /* Form elements */ | |
| 136 | - | --checkbox-bg: var(--yellow); --checkbox-check: var(--base); --as-dd-border: var(--app-bg); | |
| 136 | + | --checkbox-bg: var(--mauve); --checkbox-check: var(--crust); --as-dd-border: var(--app-bg); | |
| 137 | 137 | --dd-list-input-bg: var(--base); --icon-purple: var(--sky); | |
| 138 | 138 | ||
| 139 | 139 | /* Onboarding elements */ | |
| 140 | - | --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; | |
| 141 | - | --onb_theme_light_preview_box: none; --onb_theme_calm_blue_preview_box: none; | |
| 142 | - | --onb_theme_royal_blue_preview_box: none; --onb_theme_moon_dark_preview_box: flex; | |
| 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 | 143 | --image_brightness: 100%; | |
| 144 | 144 | } | |
| 145 | 145 | ||
| 146 | - | /* Light theme overrides - using Kagi's .theme_light class */ | |
| 147 | - | .theme_light { | |
| 148 | - | /* Catppuccin Latte colors */ | |
| 149 | - | --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef; | |
| 150 | - | --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d; | |
| 151 | - | --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5; | |
| 152 | - | --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77; | |
| 153 | - | --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; | |
| 154 | - | --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5; | |
| 155 | - | --mantle: #e6e9ef; --crust: #dce0e8; | |
| 146 | + | /* Dark theme overrides - using Kagi's .theme_moon_dark class */ | |
| 147 | + | .theme_moon_dark { | |
| 148 | + | /* Catppuccin Mocha colors */ | |
| 149 | + | --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; | |
| 150 | + | --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; | |
| 151 | + | --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; | |
| 152 | + | --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; | |
| 153 | + | --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; | |
| 154 | + | --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; | |
| 155 | + | --mantle: #181825; --crust: #11111b; | |
| 156 | 156 | ||
| 157 | - | /* Light mode adjustments */ | |
| 158 | - | --color-scheme: light; --app-bg: var(--base); --app-text: var(--text); | |
| 159 | - | --header-bg: var(--crust); --inline-widget-bg: var(--surface0); | |
| 160 | - | --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--mauve); | |
| 161 | - | --btn-primary-text: var(--crust); --checkbox-bg: var(--mauve); --checkbox-check: var(--crust); | |
| 162 | - | --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex; | |
| 163 | - | --onb_theme_light_preview_box: flex; --onb_theme_moon_dark_preview_box: none; | |
| 164 | - | --k-tooltip-bg: rgba(220, 224, 232, 0.9); --k-tooltip-text: var(--text); | |
| 157 | + | /* Dark mode adjustments */ | |
| 158 | + | --color-scheme: dark; --app-bg: var(--base); --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(--base); --checkbox-bg: var(--yellow); --checkbox-check: var(--base); | |
| 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: rgba(30, 30, 46, .9); --k-tooltip-text: var(--text); | |
| 165 | 165 | } | |
| 166 | 166 | ||
| 167 | - | /* System preference override - only applies when no theme class is set */ | |
| 168 | - | @media (prefers-color-scheme: light) { | |
| 169 | - | :root:not(.theme_moon_dark):not(.theme_light):not(.theme_calm_blue):not(.theme_royal_blue) { | |
| 170 | - | /* Catppuccin Latte colors */ | |
| 171 | - | --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef; | |
| 172 | - | --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d; | |
| 173 | - | --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5; | |
| 174 | - | --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77; | |
| 175 | - | --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; | |
| 176 | - | --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5; | |
| 177 | - | --mantle: #e6e9ef; --crust: #dce0e8; | |
| 178 | - | ||
| 179 | - | /* Light mode adjustments */ | |
| 180 | - | --color-scheme: light; --app-bg: var(--base); --app-text: var(--text); | |
| 181 | - | --header-bg: var(--crust); --inline-widget-bg: var(--surface0); | |
| 182 | - | --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--mauve); | |
| 183 | - | --btn-primary-text: var(--crust); --checkbox-bg: var(--mauve); --checkbox-check: var(--crust); | |
| 184 | - | --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex; | |
| 185 | - | --onb_theme_light_preview_box: flex; --onb_theme_moon_dark_preview_box: none; | |
| 186 | - | --k-tooltip-bg: rgba(220, 224, 232, 0.9); --k-tooltip-text: var(--text); | |
| 167 | + | /* System preference override - only applies to .theme_moon_dark_conditional class */ | |
| 168 | + | @media (prefers-color-scheme: dark) { | |
| 169 | + | .theme_moon_dark_conditional { | |
| 170 | + | /* Catppuccin Mocha colors */ | |
| 171 | + | --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; | |
| 172 | + | --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; | |
| 173 | + | --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; | |
| 174 | + | --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; | |
| 175 | + | --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; | |
| 176 | + | --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; | |
| 177 | + | --mantle: #181825; --crust: #11111b; | |
| 178 | + | ||
| 179 | + | /* Dark mode adjustments */ | |
| 180 | + | --color-scheme: dark; --app-bg: var(--base); --app-text: var(--text); | |
| 181 | + | --header-bg: var(--app-bg); --inline-widget-bg: var(--surface0); | |
| 182 | + | --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--text); | |
| 183 | + | --btn-primary-text: var(--base); --checkbox-bg: var(--yellow); --checkbox-check: var(--base); | |
| 184 | + | --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none; | |
| 185 | + | --onb_theme_light_preview_box: none; --onb_theme_moon_dark_preview_box: flex; | |
| 186 | + | --k-tooltip-bg: rgba(30, 30, 46, .9); --k-tooltip-text: var(--text); | |
| 187 | 187 | } | |
| 188 | 188 | } | |
| 189 | 189 | ||
| @@ -215,6 +215,10 @@ span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: | |||
| 215 | 215 | div.sidebar-box { background-color: var(--mantle) !important; } | |
| 216 | 216 | .thread-list > li:is(.active, :hover, :focus-within) { background-color: var(--surface1) !important; } | |
| 217 | 217 | #thread-sidebar-collapse:hover { color: var(--crust); } | |
| 218 | + | .threads-pane .header { background: none !important; } | |
| 219 | + | .sidebar-box>.tags-pane { background: none !important; } | |
| 220 | + | .tag-selector:has(:checked) { background: var(--surface1) !important; } | |
| 221 | + | @media (min-width: 1280px) { .sidebar-box>.threads-pane { min-width: 200px; } } | |
| 218 | 222 | ||
| 219 | 223 | /* Header & Navigation */ | |
| 220 | 224 | header { background: var(--crust) !important; } | |
| @@ -338,4 +342,4 @@ input[type="date"] { color: var(--primary-600) !important; } | |||
| 338 | 342 | } | |
| 339 | 343 | ||
| 340 | 344 | #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; } | |
| 341 | - | } | |
| 345 | + | } | |
jcrabapple revisó este gist . Ir a la revisión
Sin cambios
jcrabapple revisó este gist . Ir a la revisión
Sin cambios
Siguiente
Anterior