diff --git a/chrome/content/common.css b/chrome/content/common.css index 46d324a..74d97f3 100644 --- a/chrome/content/common.css +++ b/chrome/content/common.css @@ -3,77 +3,47 @@ /* colours */ @-moz-document url-prefix(about:) { :root { - --in-content-page-color: #252525 !important; - --in-content-page-background: #f7f7f7 !important; - --in-content-deemphasized-text: #666 !important; - --in-content-box-background: #fff !important; - --in-content-box-background-odd: rgba(0, 0, 0, 0.05) !important; - --in-content-box-info-background: #f7f7f7 !important; - --in-content-icon-color: #666 !important; - --in-content-accent-color: #006CBE !important; - --in-content-accent-color-active: #1683D8 !important; - --in-content-border-hover: rgba(0, 0, 0, 0.5) !important; + --in-content-page-color: light-dark(#252525, #fff) !important; + --in-content-page-background: light-dark(#f7f7f7, #252525) !important; + --in-content-deemphasized-text: light-dark(#666, #bbb) !important; + --in-content-box-background: light-dark(#fff, #333) !important; + --in-content-box-background-odd: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .05)) !important; + --in-content-box-info-background: light-dark(#f7f7f7, rgb(255 255 255 / 0.15)) !important; + --in-content-icon-color: light-dark(#666, #fff) !important; + --in-content-accent-color: light-dark(#006CBE, #75B6E8) !important; + --in-content-accent-color-active: light-dark(#1683D8, #4C98D1) !important; + --in-content-border-hover: light-dark(rgb(0 0 0 / .5), rgb(255 255 255 / .3)) !important; --in-content-border-invalid: var(--red-50) !important; - --in-content-border-color: #bebebe !important; - --in-content-error-text-color: #FF848A !important; - --in-content-link-color: #0078D4 !important; - --in-content-link-color-hover: #006CBE !important; - --in-content-link-color-active: #0749AC !important; - --in-content-link-color-visited: #0078D4 !important; + --in-content-border-color: light-dark(#bebebe, rgb(255 255 255 / .2)) !important; + --in-content-error-text-color: light-dark(#FF848A, #FF9AA2) !important; + --in-content-link-color: light-dark(#0078D4, #75B6E8) !important; + --in-content-link-color-hover: light-dark(#006CBE, #63ADE5) !important; + --in-content-link-color-active: light-dark(#0749AC, #4C98D1) !important; + --in-content-link-color-visited: light-dark(#0078D4, #75B6E8) !important; + --link-color: var(--in-content-link-color) !important; + --link-color-hover: var(--in-content-link-color-hover) !important; + --link-color-active: var(--in-content-link-color-active) !important; + --link-color-visited: var(--in-content-link-color-visited) !important; --in-content-button-text-color: var(--in-content-text-color) !important; --in-content-button-text-color-hover: var(--in-content-text-color) !important; --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important; - --in-content-button-background: #EDEDED !important; - --in-content-button-background-hover: #e5e5e5 !important; - --in-content-button-background-active: #d5d5d5 !important; - --in-content-primary-button-text-color: #fff !important; - --in-content-primary-button-background: #0061e0 !important; - --in-content-primary-button-background-hover: #0250bb !important; - --in-content-primary-button-background-active: #053e94 !important; - --in-content-danger-button-background: #DF4951 !important; - --in-content-danger-button-background-hover: #EA656C !important; - --in-content-danger-button-background-active: #BB353C !important; - --in-content-focus-outline-color: color-mix(in srgb, #0055D7 50%, transparent) !important; - --in-content-table-background: #f7f7f7 !important; + --in-content-button-background: light-dark(#EDEDED, #3B3B3B) !important; + --in-content-button-background-hover: light-dark(#e5e5e5, #545454) !important; + --in-content-button-background-active: light-dark(#d5d5d5, #606060) !important; + --in-content-primary-button-text-color: light-dark(#fff, #fff) !important; + --in-content-primary-button-background: light-dark(#0061e0, #006CBE) !important; + --in-content-primary-button-background-hover: light-dark(#0250bb, #0078D4) !important; + --in-content-primary-button-background-active: light-dark(#053e94, #005CA3) !important; + --in-content-danger-button-background: light-dark(#DF4951, #E12424) !important; + --in-content-danger-button-background-hover: light-dark(#EA656C, #F94343) !important; + --in-content-danger-button-background-active: light-dark(#BB353C, #AA1E1E) !important; + --in-content-focus-outline-color: light-dark(rgb(0 85 215 / .5), #63ADE5) !important; + --focus-outline-color: var(--in-content-focus-outline-color) !important; + --in-content-table-background: light-dark(#f7f7f7, #252525) !important; --in-content-text-color: var(--in-content-page-color) !important; - scrollbar-color: rgba(37, 37, 37, 0.4) #f7f7f7 !important; - } - - @media (prefers-color-scheme: dark) { - :root { - --in-content-page-background: #252525 !important; - --in-content-page-color: #fff !important; - --in-content-deemphasized-text: #bbb !important; - --in-content-box-background: #333 !important; - --in-content-box-background-odd: rgba(255, 255, 255, 0.05) !important; - --in-content-box-info-background: rgba(255, 255, 255, 0.15) !important; - --in-content-border-color: rgba(255, 255, 255, 0.2) !important; - --in-content-border-hover: rgba(255, 255, 255, 0.3) !important; - --in-content-border-invalid: rgb(255, 132, 139) !important; - --in-content-error-text-color: #FF9AA2 !important; - --in-content-button-background: #3B3B3B !important; - --in-content-button-background-hover: #545454 !important; - --in-content-button-background-active: #606060 !important; - --in-content-icon-color: #fff !important; - --in-content-primary-button-text-color: #fff !important; - --in-content-primary-button-background: #006CBE !important; - --in-content-primary-button-background-hover: #0078D4 !important; - --in-content-primary-button-background-active: #005CA3 !important; - --in-content-danger-button-background: #E12424 !important; - --in-content-danger-button-background-hover: #F94343 !important; - --in-content-danger-button-background-active: #AA1E1E !important; - --in-content-focus-outline-color: #63ADE5 !important; - --in-content-table-background: #252525 !important; - --in-content-accent-color: #75B6E8 !important; - --in-content-accent-color-active: #4C98D1 !important; - --in-content-link-color: #75B6E8 !important; - --in-content-link-color-hover: #63ADE5 !important; - --in-content-link-color-active: #4C98D1 !important; - --in-content-link-color-visited: var(--in-content-link-color) !important; - --card-outline-color: #555 !important; - --dialog-warning-text-color: var(--red-40) !important; - scrollbar-color: rgba(255, 255, 255, .4) #252525 !important; - } + scrollbar-color: + light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4)) + light-dark(#f7f7f7, #252525) !important; } } diff --git a/chrome/content/newtab.css b/chrome/content/newtab.css index fceb069..d8ec514 100644 --- a/chrome/content/newtab.css +++ b/chrome/content/newtab.css @@ -23,7 +23,7 @@ url-prefix("about:firefoxview") { --newtab-wordmark-color: #737373 !important; --newtab-status-success: #50B080 !important; --newtab-status-error: #FF848A !important; - --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1) !important; + --newtab-inner-box-shadow-color: rgb(0 0 0 / .1) !important; --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent) !important; --newtab-text-emphasis-background: #FFED32 !important; --newtab-text-emphasis-text-color: #000 !important; @@ -73,7 +73,7 @@ url-prefix("about:home") { white-space: nowrap !important; text-overflow: ellipsis !important; --elevation: 4; - box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, 0.11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, 0.13) !important; + box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important; } .search-handoff-button:hover { @@ -129,7 +129,7 @@ url-prefix("about:home") { .card-outer .card, .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; + box-shadow: 0 1px 4px rgb(0 0 0 / .3) !important; } .card-outer .card-preview-image-outer, @@ -161,24 +161,11 @@ url-prefix("about:home") { /* private browsing newtab */ @-moz-document url-prefix(about:privatebrowsing) { :root { - --uc-wordmark-color: #737373; - --uc-background-color-secondary: #fff; - } + --uc-wordmark-color: light-dark(#737373, #fff); + --uc-background-color-secondary: light-dark(#fff, #4a4a4a); - @media (prefers-color-scheme: dark) { - :root { - --uc-wordmark-color: #fff; - --uc-background-color-secondary: #4a4a4a; - } - } - - @media (-moz-bool-pref: "browser.theme.dark-private-windows") { - html.private { - --in-content-page-color: white !important; - --in-content-page-background: #252525 !important; - --in-content-focus-outline-color: #63ADE5 !important; - --uc-background-color-secondary: #4a4a4a !important; - --uc-wordmark-color: #fff !important; + @media (-moz-bool-pref: "browser.theme.dark-private-windows") { + color-scheme: dark !important; } } @@ -195,7 +182,7 @@ url-prefix("about:home") { border-radius: 99px !important; padding-inline-start: 48px !important; --elevation: 4; - box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, 0.11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, 0.13) !important; + box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important; } .search-handoff-button:hover { @@ -248,8 +235,8 @@ url-prefix("about:home") { have a higher priority */ --bg-0: url(../background-0.jpg), url(../background-0.png); --bg-1: url(../background-1.jpg), url(../background-1.png); - --newtab-element-hover-color: rgba(239, 239, 239, 0.3) !important; - --newtab-element-active-color: rgba(239, 239, 239, 0.45) !important; + --newtab-element-hover-color: rgb(239 239 239 / .3) !important; + --newtab-element-active-color: rgb(239 239 239 / .45) !important; --text-shadow: 0 1px 2px #000; --icon-shadow: drop-shadow(0 0.3px 0.6px #000); background-color: #252525 !important; @@ -262,8 +249,8 @@ url-prefix("about:home") { :root[lwt-newtab-brighttext] body, :root.private body { background-image: var(--bg-1), var(--bg-0) !important; - --newtab-element-hover-color: rgba(66, 66, 66, 0.4) !important; - --newtab-element-active-color: rgba(66, 66, 66, 0.55) !important; + --newtab-element-hover-color: rgb(66 66 66 / .4) !important; + --newtab-element-active-color: rgb(66 66 66 / .55) !important; } @media not (-moz-bool-pref: "browser.theme.dark-private-windows") { diff --git a/chrome/global/browser.css b/chrome/global/browser.css index 865902d..962d78a 100644 --- a/chrome/global/browser.css +++ b/chrome/global/browser.css @@ -17,8 +17,8 @@ margin: 0px 3px 3px 3px; border-radius: 8px; overflow: hidden; - border: 1.25px solid rgba(0, 0, 0, 0.05); - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + border: 1.25px solid rgb(0 0 0 / .05); + box-shadow: 0px 1px 2px rgb(0 0 0 / .1); } :root #browser { diff --git a/chrome/global/colors.css b/chrome/global/colors.css index e0cc054..68bd0a5 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -15,17 +15,18 @@ --toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; --lwt-tab-text: var(--toolbar-color) !important; --lwt-selected-tab-background-color: unset !important; - --tab-selected-bgcolor: unset !important; + --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; --toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important; --toolbar-field-color: light-dark(#000, #fff) !important; --toolbar-field-border-color: light-dark(#0000, #0000) !important; --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; --toolbar-field-focus-color: var(--toolbar-field-color) !important; --toolbar-field-focus-border-color: light-dark(#0055D7, #63ADE5) !important; - --urlbar-hover-highlight-color: light-dark(rgba(192, 192, 192, 0.5), rgba(128, 128, 128, 0.5)) !important; - --urlbar-box-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important; - --urlbar-box-hover-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important; - --urlbar-box-focus-bgcolor: light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.28)) !important; + --link-color: light-dark(#0078D4, #75B6E8) !important; + --urlbar-hover-highlight-color: light-dark(rgb(192 192 192 / .5), rgb(128 128 128 / .5)) !important; + --urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; + --urlbar-box-hover-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; + --urlbar-box-focus-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important; --urlbar-icon-fill-opacity: 1 !important; --urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important; --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important; @@ -60,9 +61,9 @@ --panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important; --focus-outline-color: light-dark(#0055D7, #63ADE5) !important; --panel-shortcut-color: inherit !important; - --uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.1); - --toolbarbutton-hover-background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) !important; - --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16)) !important; + --uc-urlbar-shadow: 0 0 4px rgb(0 0 0 / .1); + --toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .1)) !important; + --toolbarbutton-active-background: light-dark(rgb(0 0 0 / .12), rgb(255 255 255 / .16)) !important; --uc-private-browsing-indicator: var(--button-primary-bgcolor); --uc-private-browsing-indicator-text: var(--button-primary-color); --tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important; @@ -70,10 +71,12 @@ } /* ensure that dark mode is enabled completely in private browsing mode. */ -:root[privatebrowsingmode="temporary"], -:root[privatebrowsingmode="temporary"] #nav-bar, -:root[privatebrowsingmode="temporary"] #PersonalToolbar { - color-scheme: dark !important; +@media (-moz-bool-pref: "browser.theme.dark-private-windows") { + :root[privatebrowsingmode="temporary"], + :root[privatebrowsingmode="temporary"] #nav-bar, + :root[privatebrowsingmode="temporary"] #PersonalToolbar { + color-scheme: dark !important; + } } #urlbar { diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index 97da1cb..92fcc37 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -126,13 +126,13 @@ bugs with certain themes eg. dark text on dark background.) */ :root { --uc-titlebar-shadow: none; --uc-tab-shadow: - 0 3.3px 3px rgba(0, 0, 0, 0.06), - 0 0 0 1px rgba(0, 0, 0, 0.11); + 0 3.3px 3px rgb(0 0 0 / .06), + 0 0 0 1px rgb(0 0 0 / .11); } :root[lwtheme-brighttext="true"] { --uc-titlebar-shadow: none; - --uc-tab-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); + --uc-tab-shadow: 0 1px 2px rgb(0 0 0 / .08); } } diff --git a/chrome/toolbar/findbar.css b/chrome/toolbar/findbar.css index 87bb8ba..482985c 100644 --- a/chrome/toolbar/findbar.css +++ b/chrome/toolbar/findbar.css @@ -32,11 +32,11 @@ .close-icon:not([disabled]):hover, .findbar-find-previous:not([disabled]):hover, .findbar-find-next:not([disabled]):hover { - background: var(--toolbarbutton-hover-background, rgba(190,190,190,.2)) !important; + background: var(--toolbarbutton-hover-background, rgb(190 190 190 / .2)) !important; } .close-icon:not([disabled]):hover:active, .findbar-find-previous:not([disabled]):hover:active, .findbar-find-next:not([disabled]):hover:active { - background: var(--toolbarbutton-active-background, rgba(190,190,190,.4)) !important; + background: var(--toolbarbutton-active-background, rgb(190 190 190 / .4)) !important; } diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index cf83715..e450e45 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -57,33 +57,33 @@ border: 0 !important; position: relative !important; --uc-tab-corner-bg: transparent; -} -/* rounded bottom corners */ -.tab-background::before, -.tab-background::after { - content: "" !important; - display: block !important; - position: absolute !important; - width: 8px !important; - height: 8px !important; - bottom: 0 !important; - pointer-events: none !important; - clip-path: inset(0); -} + /* Rounded bottom corners */ + &::before, + &::after { + content: "" !important; + display: block !important; + position: absolute !important; + width: 8px !important; + height: 8px !important; + bottom: 0 !important; + pointer-events: none !important; + clip-path: inset(0); + } -.tab-background::before { - border-bottom-right-radius: var(--tab-border-radius) !important; - left: 0 !important; - transform: translateX(-8px) !important; - box-shadow: 4px 4px 0 4px var(--uc-tab-corner-bg) !important; -} + &::before { + border-bottom-right-radius: var(--tab-border-radius) !important; + left: 0 !important; + transform: translateX(-8px) !important; + box-shadow: 4px 4px 0 4px var(--uc-tab-corner-bg) !important; + } -.tab-background::after { - border-bottom-left-radius: var(--tab-border-radius) !important; - right: 0 !important; - transform: translateX(8px) !important; - box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important; + &::after { + border-bottom-left-radius: var(--tab-border-radius) !important; + right: 0 !important; + transform: translateX(8px) !important; + box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important; + } } .tab-background:is([selected], [multiselected]) { @@ -379,17 +379,17 @@ toolbarbutton[part="scrollbutton-down"] { } :root { - --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset; + --uc-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / .2) inset; --uc-tab-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0px 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1); + 0px 2px 4px rgb(0 0 0 / .2), 0 4px 8px rgb(0 0 0 / .1); } :root[lwtheme-brighttext="true"] { - --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset inset; + --uc-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / .75) inset inset; --uc-tab-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0 2px 4px rgba(0, 0, 0, 0.45), 0 0px 2px rgba(0, 0, 0, 0.2); + 0 2px 4px rgb(0 0 0 / .45), 0 0px 2px rgb(0 0 0 / .2); } #tabbrowser-tabs .tab-background:is([selected], [multiselected]),