browser-colors.css (6925B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 :root { 6 --toolbox-bgcolor: -moz-headerbar; 7 --toolbox-textcolor: -moz-headerbartext; 8 --toolbox-bgcolor-inactive: -moz-headerbarinactive; 9 --toolbox-textcolor-inactive: -moz-headerbarinactivetext; 10 11 &:where([customtitlebar]) { 12 --toolbox-bgcolor: ActiveCaption; 13 --toolbox-textcolor: CaptionText; 14 --toolbox-bgcolor-inactive: InactiveCaption; 15 --toolbox-textcolor-inactive: InactiveCaptionText; 16 } 17 18 --sidebar-background-color: -moz-sidebar; 19 --sidebar-text-color: -moz-sidebartext; 20 --sidebar-border-color: -moz-sidebarborder; 21 22 --tabs-navbar-separator-color: ThreeDShadow; 23 --tabs-navbar-separator-style: solid; 24 25 --short-notification-background: #0250bb; 26 --short-notification-gradient: #9059ff; 27 --warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f); 28 29 --urlbar-box-bgcolor: var(--button-background-color-hover); 30 --urlbar-box-focus-bgcolor: var(--button-background-color); 31 --urlbar-box-hover-bgcolor: var(--button-background-color-hover); 32 --urlbar-box-active-bgcolor: var(--button-background-color-active); 33 --urlbar-box-text-color: inherit; 34 --urlbar-box-hover-text-color: var(--urlbar-box-text-color); 35 --urlbar-icon-fill-opacity: 0.9; 36 @media (prefers-contrast) { 37 --urlbar-icon-fill-opacity: 1; 38 --sidebar-border-color: var(--border-color-card); 39 } 40 41 --content-area-shadow: var(--box-shadow-card); 42 --chrome-content-separator-color: var(--border-color-card); 43 44 /* stylelint-disable-next-line media-query-no-invalid */ 45 @media not -moz-pref("sidebar.revamp") { 46 &:not([lwtheme]) { 47 --chrome-content-separator-color: ThreeDShadow; 48 } 49 } 50 51 &[lwtheme] { 52 --link-color: light-dark(var(--color-blue-60), var(--color-cyan-30)); 53 --link-color-hover: light-dark(var(--color-blue-70), var(--color-cyan-20)); 54 --link-color-active: light-dark(var(--color-blue-80), var(--color-cyan-10)); 55 --tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); 56 --attention-dot-color: light-dark(#2ac3a2, #54ffbd); 57 58 --toolbox-bgcolor: var(--lwt-accent-color); 59 --toolbox-bgcolor-inactive: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); 60 --toolbox-textcolor: var(--lwt-text-color, currentColor); 61 --toolbox-textcolor-inactive: var(--lwt-text-color, currentColor); 62 63 @media not (prefers-contrast) { 64 --focus-outline-color: light-dark(#0061e0, #00ddff); 65 } 66 } 67 68 @media (prefers-color-scheme: dark) { 69 /* Increase the contrast of urlbar boxes in dark mode. 70 In practice these are bumped-up --button(-hover)-bgcolor rules */ 71 --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent); 72 --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent); 73 --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent); 74 } 75 } 76 77 /** 78 * We intentionally do not use the custom colors on linux or macOS with system 79 * theme enabled, instead choosing to fall back to system colors and 80 * transparencies in order to look more native. 81 */ 82 @media not ((forced-colors) or (-moz-native-theme)) { 83 :root:not([lwtheme]) { 84 --color-accent-primary: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); 85 --button-text-color-primary: light-dark(rgb(251, 251, 254), rgb(43, 42, 51)); 86 --button-background-color: light-dark(rgba(207, 207, 216, 0.33), rgba(0, 0, 0, 0.33)); 87 --button-background-color-hover: light-dark(rgba(207, 207, 216, 0.66), rgba(207, 207, 216, 0.2)); 88 --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, 0.4)); 89 --button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); 90 91 --arrowpanel-background: light-dark(white, rgb(66, 65, 77)); 92 --arrowpanel-color: light-dark(black, rgb(251, 251, 254)); 93 --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); 94 95 --arrowpanel-dimmed: light-dark(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 17%, transparent)); 96 --arrowpanel-dimmed-further: light-dark(color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, currentColor 14%, transparent)); 97 98 --input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); 99 --input-bgcolor: light-dark(rgb(255, 255, 255), #42414d); 100 101 --tab-selected-bgcolor: light-dark(rgb(255, 255, 255), rgba(106, 106, 120, 0.7)); 102 --tab-selected-textcolor: light-dark(rgb(21, 20, 26), rgb(255, 255, 255)); 103 --tabs-navbar-separator-style: none; 104 105 --toolbox-bgcolor: light-dark(rgb(234, 234, 237), rgb(28, 27, 34)); 106 --toolbox-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); 107 --toolbox-bgcolor-inactive: var(--toolbox-bgcolor); 108 --toolbox-textcolor-inactive: var(--toolbox-textcolor); 109 &:where([customtitlebar]) { 110 --toolbox-bgcolor-inactive: light-dark(rgb(235, 235, 239), rgb(31, 30, 37)); 111 } 112 113 --toolbar-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); 114 --toolbar-bgcolor: light-dark(#f9f9fb, rgb(43, 42, 51)); 115 116 --toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254)); 117 --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); 118 --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); 119 120 --toolbar-field-border-color: transparent; 121 --toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)); 122 --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); 123 --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77)); 124 --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254)); 125 126 --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201)); 127 --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); 128 --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43, 42, 51)); 129 --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); 130 --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed)); 131 132 --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77)); 133 --urlbar-icon-fill-opacity: 0.72; 134 @media (prefers-color-scheme: dark) { 135 --urlbar-icon-fill-opacity: 1; 136 } 137 138 /* stylelint-disable-next-line media-query-no-invalid */ 139 @media not -moz-pref("sidebar.revamp") { 140 --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)); 141 } 142 143 --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); 144 --attention-dot-color: light-dark(#2ac3a2, #54ffbd); 145 146 --sidebar-background-color: light-dark(white, rgb(28, 27, 34)); 147 --sidebar-text-color: light-dark(rgb(21, 20, 26), rgb(249, 249, 250)); 148 --sidebar-border-color: var(--border-color-card); 149 } 150 }