From 4a47aaae2673b20a6d1d1c3cff6f0f2bb203d848 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 2 Jul 2021 10:59:50 +0900 Subject: [PATCH 01/26] Add: Lightmode - Color darker #24 --- userChrome.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/userChrome.css b/userChrome.css index 547e561..a5438eb 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,4 +1,9 @@ @media (-moz-proton) { + /** Lightmode - Color darker ************************************************/ + :root[lwtheme-mozlightdark][lwthemetextcolor="dark"] { + --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ + } + /** Darkmode - Color lighter ************************************************/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ From 0d3202c6f455dccd87a783ffb0233e251d2359fe Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 4 Jul 2021 17:36:18 +0900 Subject: [PATCH 02/26] Add: Fully Theme Mode - Notification --- userChrome.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/userChrome.css b/userChrome.css index a5438eb..9f42dc3 100644 --- a/userChrome.css +++ b/userChrome.css @@ -71,6 +71,57 @@ } } + /* Fully Theme Mode *********************************************************/ + /*= Notification ===========================================================*/ + @-moz-document url("chrome://global/content/alerts/alert.xhtml") { + #alertBox { + color: var(--menu-color) !important; + background-color: var(--menu-background-color) !important; + border-color: var(--menu-border-color) !important; + border-radius: 6px !important; + -moz-window-shadow: cliprounded !important; + } + + #alertSettings { + fill: currentColor !important; + color: inherit !important; + border-radius: 0 !important; + margin-inline: 0 !important; + margin-bottom: -4px !important; + } + #alertSettings > .button-box, + .close-icon > .toolbarbutton-icon{ + border-radius: 4px !important; + padding: 2px !important; + margin: 2px 2px -2px 0 !important; + } + #alertSettings > .button-box { + margin: -4px 4px 3px 0 !important; + } + #alertSettings > .button-box > .box-inherit > .button-icon { + padding: 1px; + } + + /* Color */ + #alertSettings, + .close-icon { + background: transparent !important + } + .close-icon:hover > .toolbarbutton-icon, + #alertSettings:is(:hover,[open]) > .button-box { + background-color: var(--menuitem-hover-background-color) !important; + } + + @media (-moz-toolbar-prefers-color-scheme:dark) { + :root { + --menu-border-color: rgba(107,107,107,.3) !important; + } + #alertSourceLabel { + color: rgb(5,209,241) !important; + } + } + } + /** Root - Reduce Padding ***************************************************/ :root { /* Tab Bar */ From 7446edd955f24ddb9684d1086a9959466e3669ae Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 5 Jul 2021 11:50:18 +0900 Subject: [PATCH 03/26] Fix: Fully Theme Mode - Notification property update --- userChrome.css | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/userChrome.css b/userChrome.css index 9f42dc3..e6d6e4f 100644 --- a/userChrome.css +++ b/userChrome.css @@ -74,14 +74,16 @@ /* Fully Theme Mode *********************************************************/ /*= Notification ===========================================================*/ @-moz-document url("chrome://global/content/alerts/alert.xhtml") { + /* line below removes background from the notification "window" on linux */ + #alertNotification{ background: transparent !important; } + #alertBox { - color: var(--menu-color) !important; - background-color: var(--menu-background-color) !important; - border-color: var(--menu-border-color) !important; + color: var(--menu-color, #15141a) !important; + background-color: var(--menu-background-color, #f9f9fb) !important; + border-color: var(--menu-border-color, #cfcfd8) !important; border-radius: 6px !important; -moz-window-shadow: cliprounded !important; } - #alertSettings { fill: currentColor !important; color: inherit !important; @@ -89,13 +91,15 @@ margin-inline: 0 !important; margin-bottom: -4px !important; } - #alertSettings > .button-box, - .close-icon > .toolbarbutton-icon{ + + /* Shape */ + .close-icon > .toolbarbutton-icon, + #alertSettings > .button-box > .box-inherit { border-radius: 4px !important; padding: 2px !important; margin: 2px 2px -2px 0 !important; } - #alertSettings > .button-box { + #alertSettings > .button-box > .box-inherit { margin: -4px 4px 3px 0 !important; } #alertSettings > .button-box > .box-inherit > .button-icon { @@ -103,19 +107,29 @@ } /* Color */ - #alertSettings, - .close-icon { + .close-icon, + #alertSettings { background: transparent !important } .close-icon:hover > .toolbarbutton-icon, - #alertSettings:is(:hover,[open]) > .button-box { - background-color: var(--menuitem-hover-background-color) !important; + #alertSettings:is(:hover,[open]) > .button-box > .box-inherit { + background-color: var(--menuitem-hover-background-color, #e0e0e6) !important; } @media (-moz-toolbar-prefers-color-scheme:dark) { :root { --menu-border-color: rgba(107,107,107,.3) !important; } + + #alertBox { + color: var(--menu-color, #fbfbfe) !important; + background-color: var(--menu-background-color, #2b2a33) !important; + } + .close-icon:hover > .toolbarbutton-icon, + #alertSettings:is(:hover, [open]) > .button-box > .box-inherit { + background-color: var(--menuitem-hover-background-color, #52525e) !important; + } + #alertSourceLabel { color: rgb(5,209,241) !important; } From 887b1eac660fc66168b4f3f5e5332f052d6bd468 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 5 Jul 2021 16:37:11 +0900 Subject: [PATCH 04/26] Add: Fully Theme Mode - Menu color --- userChrome.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/userChrome.css b/userChrome.css index e6d6e4f..e3f74da 100644 --- a/userChrome.css +++ b/userChrome.css @@ -72,6 +72,25 @@ } /* Fully Theme Mode *********************************************************/ + /* Default Themes + https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json + https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json + https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json + */ + + /*== Menu color ===========================================================*/ + :root { + /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */ + --menu-color: var(--toolbar-color) !important; + --menu-background-color: var(--toolbar-bgcolor) !important; + + --menu-border-color: var(--toolbarbutton-active-background, var(--button-active-bgcolor)) !important; + --menuitem-hover-background-color: var(--toolbarbutton-hover-background, var(--button-hover-bgcolor)) !important; + + --menu-disabled-color: color-mix(in srgb, var(--toolbar-color) 40%, transparent) !important; + --menuitem-disabled-hover-background-color: color-mix(in srgb, var(--menuitem-hover-background-color) 40%, transparent) !important; + } + /*= Notification ===========================================================*/ @-moz-document url("chrome://global/content/alerts/alert.xhtml") { /* line below removes background from the notification "window" on linux */ From b6306a0802f4d76dad86f0481ebbf5e2d80d6b35 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 6 Jul 2021 08:59:36 +0900 Subject: [PATCH 05/26] Fix: Menupopup - Color for shadow root --- userChrome.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index 6f7e737..c3486b4 100644 --- a/userChrome.css +++ b/userChrome.css @@ -85,7 +85,8 @@ */ /*== Menu color ===========================================================*/ - :root { + :root, + menupopup { /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */ --menu-color: var(--toolbar-color) !important; --menu-background-color: var(--toolbar-bgcolor) !important; From 7a67a59e1c310aa226932473ac32b6a5431d8a94 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 8 Jul 2021 12:12:43 +0900 Subject: [PATCH 06/26] Add: Info Bar - Reduce Padding --- userChrome.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/userChrome.css b/userChrome.css index e47f925..46aac01 100644 --- a/userChrome.css +++ b/userChrome.css @@ -323,6 +323,52 @@ margin-top: 0px; /* Original: 2px */ } + /*= Info Bar - Reduce Padding ==============================================*/ + :root:not([uidensity]) #tab-notification-deck { + --infobar-message-margin: 0 4px 3px; + } + :root[uidensity=compact] #tab-notification-deck { + --infobar-message-margin: 0 4px 2px; + } + #tab-notification-deck notification-message[message-bar-type="infobar"] { + margin: var(--infobar-message-margin, 0 4px 4px) !important; + } + + :root:not([uidensity]) notification-message[message-bar-type="infobar"] { + --infobar-vertical-margin: 7px; + --infobar-button-vertical-margin: 3px; + } + :root[uidensity=compact] notification-message[message-bar-type="infobar"] { + --infobar-vertical-margin: 6px; + --infobar-button-vertical-margin: 2px; + } + .infobar > .icon { + margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + } + .notification-message { + padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + } + .notification-button-container > .notification-button { + margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */ + } + .notification-close { + margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */ + } + + /* Hard coded for compatibility - Disappearing phenomenon */ + .container.infobar::before { + content: ""; + display: block; + width: 2px; + position: absolute; + background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + top: 0; + inset-inline-start: 0; + height: 100%; + border-start-start-radius: 4px; + border-end-start-radius: 4px; + } + /*= Menu - Reduce Padding ==================================================*/ :root { --menu-padding: 0.35em; From 43fa950090af145d5d19b2e26d882c8672f262e9 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 9 Jul 2021 10:20:05 +0900 Subject: [PATCH 07/26] Add: URL Bar - Reduce padding --- userChrome.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 46aac01..56c896f 100644 --- a/userChrome.css +++ b/userChrome.css @@ -311,11 +311,18 @@ } /* spread menu */ - :root[uidensity=compact] .urlbarView-row:not([type=tip], [type=dynamic]) { - padding-block: 1px; /* [Compact, General]: 2px, Touch: 11px */ + :root:not([uidensity]) .urlbarView-row { + padding-block: 1px; /* Original: 2px */ + } + :root[uidensity=compact] .urlbarView-row { + padding-block: 0px; + } + + :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { + padding-block: 8px; /* Original: 10px */ } :root[uidensity=compact] #urlbar .search-one-offs:not([hidden]) { - padding-block: 2px; /* [Compact, General]: 4px, Touch 11px */ + padding-block: 2px; } /*= BookMark Bar - Reduce Height ===========================================*/ From 10f349b44b8f434ad4a03c9fe61aa078c93d3290 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 9 Jul 2021 12:03:31 +0900 Subject: [PATCH 08/26] Add: Installer - Proton-Style --- install.sh | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/install.sh b/install.sh index 8651934..3614c89 100755 --- a/install.sh +++ b/install.sh @@ -439,10 +439,11 @@ select_profile() { #== Install Types ============================================================== leptonBranch="master" select_distribution() { - select distribution in "Original(default)" "Photon-Style"; do + select distribution in "Original(default)" "Photon-Style" "Proton Style"; do case "${distribution}" in "Original") leptonBranch="master" ;; "Photon-Style") leptonBranch="photon-style" ;; + "Proton-Style") leptonBranch="proton-style" ;; esac lepton_ok_message "Selected ${distribution}" break @@ -581,13 +582,13 @@ install_profile() { ## `LEPTON` file format # If this file exist in same directory as the `userChrome.css` file, # it is recognized as the "Lepton" installation directory. -# Branch=master | photon-style +# Branch=master | photon-style | proton-style # Ver= | | [NULL] ## `lepton.ini` file Format # [Profile Name] # Type=Local | Release | Git -# Branch=master | photon-style +# Branch=master | photon-style | proton-style # Ver= | | [NULL] # Path= From 6dc4faf386c3064b83743290dbeaf888bdd7cc39 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 9 Jul 2021 12:21:54 +0900 Subject: [PATCH 09/26] Fix: Installer - invalid option check --- install.sh | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/install.sh b/install.sh index 3614c89..4bdbe21 100755 --- a/install.sh +++ b/install.sh @@ -439,15 +439,17 @@ select_profile() { #== Install Types ============================================================== leptonBranch="master" select_distribution() { + local selectedDistribution="" select distribution in "Original(default)" "Photon-Style" "Proton Style"; do + selectedDistribution="${distribution}" case "${distribution}" in - "Original") leptonBranch="master" ;; - "Photon-Style") leptonBranch="photon-style" ;; - "Proton-Style") leptonBranch="proton-style" ;; + "Original") leptonBranch="master"; break;; + "Photon-Style") leptonBranch="photon-style"; break;; + "Proton-Style") leptonBranch="proton-style"; break;; + *) echo "Invalid option, reselect please.";; esac - lepton_ok_message "Selected ${distribution}" - break done + lepton_ok_message "Selected ${selectedDistribution}" } leptonInstallType="Network" # Other types: Local, Release @@ -710,6 +712,7 @@ update_profile() { local Ver=$(git --git-dir "${LEPTONINFOFILE}" describe --tags --abbrev=0) git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}" fi + check_chrome_restore else lepton_error_message "Unable to find update type, ${Type}" fi From 0690a7a936de8fa76a8003bf4ad71fe7787d7e54 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 9 Jul 2021 16:53:09 +0900 Subject: [PATCH 10/26] Add: Dark Mode - addons.mozilla.org's first page --- userContent.css | 283 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 283 insertions(+) diff --git a/userContent.css b/userContent.css index a759b2c..e521df9 100644 --- a/userContent.css +++ b/userContent.css @@ -117,4 +117,287 @@ } } } + + /** Dark Mode Colors ********************************************************/ + :host, + :root { + --in-content-page-color: rgb(21, 20, 26); + --in-content-page-background: #fff; + --in-content-text-color: var(--in-content-page-color); + --in-content-deemphasized-text: rgb(91, 91, 102); + --in-content-box-background: #fff; + --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ + --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); + --in-content-box-info-background: #f0f0f4; + --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent); + --in-content-item-hover-text: var(--in-content-page-color); + --in-content-item-selected: var(--in-content-primary-button-background); + --in-content-item-selected-text: var(--in-content-primary-button-text-color); + --in-content-icon-color: rgb(91,91,102); + --in-content-accent-color: #0a84ff; + --in-content-accent-color-active: #0060df; + --in-content-border-hover: var(--grey-90-a50); + --in-content-border-invalid: var(--red-50); + --in-content-border-color: #d7d7db; + --in-content-error-text-color: #c50042; + --in-content-link-color: var(--blue-60); + --in-content-link-color-hover: var(--blue-70); + --in-content-link-color-active: var(--blue-80); + --in-content-link-color-visited: var(--blue-60); + /* button background states are also used for checkboxes and radiobuttons */ + --in-content-button-text-color: var(--in-content-text-color); + --in-content-button-text-color-hover: var(--in-content-text-color); + --in-content-button-background: rgba(207,207,216,.33); + --in-content-button-background-hover: rgba(207,207,216,.66); + --in-content-button-background-active: rgb(207,207,216); + --in-content-primary-button-text-color: rgb(251,251,254); + --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color); + --in-content-primary-button-background: #0061e0; + --in-content-primary-button-background-hover: #0250bb; + --in-content-primary-button-background-active: #053e94; + --in-content-danger-button-background: #e22850; + --in-content-danger-button-background-hover: #c50042; + --in-content-danger-button-background-active: #810220; + --in-content-focus-outline-color: var(--in-content-primary-button-background); + + /* Note: 1px smaller than we want because we have a 1px transparent border. */ + /* Once proton ships, these can probably stop being variables. */ + --in-content-button-border-radius: 4px; + --in-content-button-horizontal-padding: 15px; + --in-content-button-vertical-padding: 7px; + + --in-content-table-background: #f8f8fa; + --in-content-table-border-dark-color: #d1d1d1; + --in-content-table-header-background: #0a84ff; + --in-content-table-header-color: #ffffff; + --in-content-sidebar-width: 240px; + + --dialog-warning-text-color: var(--red-60); + + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --grey-30: #d7d7db; + --grey-60: #4a4a4f; + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + } + + @media (-moz-toolbar-prefers-color-scheme: dark) { + :host, + :root { + /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */ + --in-content-page-background: rgb(28,27,34); + --in-content-page-color: rgb(251,251,254); + --in-content-deemphasized-text: rgb(191,191,201); + + --in-content-box-background: rgb(35, 34, 43); + --in-content-box-background-odd: rgba(249,249,250,0.05); + --in-content-box-info-background: rgba(249,249,250,0.15); + + --in-content-border-color: rgba(249,249,250,0.2); + --in-content-border-hover: rgba(249,249,250,0.3); + --in-content-border-invalid: rgb(255,132,139); + + --in-content-error-text-color: #FF9AA2; + + --in-content-button-background: rgb(43,42,51); + --in-content-button-background-hover: rgb(82,82,94); + --in-content-button-background-active: rgb(91,91,102); + --in-content-icon-color: rgb(251,251,254); + + --in-content-primary-button-text-color: rgb(43,42,51); + --in-content-primary-button-background: rgb(0,221,255); + --in-content-primary-button-background-hover: rgb(128,235,255); + --in-content-primary-button-background-active: rgb(170,242,255); + + --in-content-danger-button-background: #ff848b; + --in-content-danger-button-background-hover: #ffbdc5; + --in-content-danger-button-background-active: #ffdfe7; + + --in-content-table-background: rgb(35, 34, 43); + --in-content-table-border-dark-color: rgba(249,249,250,0.2); + --in-content-table-header-background: rgb(5, 64, 150); + --in-content-table-header-color: var(--in-content-page-color); + + --in-content-accent-color: var(--in-content-primary-button-background); + --in-content-accent-color-active: var(--in-content-primary-button-background-hover); + --in-content-link-color: var(--in-content-primary-button-background); + --in-content-link-color-hover: var(--in-content-primary-button-background-hover); + --in-content-link-color-active: var(--in-content-primary-button-background-active); + --in-content-link-color-visited: var(--in-content-link-color); + + --card-outline-color: var(--grey-60); + + --dialog-warning-text-color: var(--red-40); + + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + } + + /* For dialogs, use a different background colour. We don't do + * this in High Contrast mode, as we should be using system colours then. + */ + @media not (prefers-contrast) { + :root[dialogroot], + /* Also need this on dialog :hosts, or the rule above will override the + * value for this custom property again in the shadow DOM. */ + :host(dialog) { + --in-content-page-background: #42414d; + } + } + } + + @media (prefers-contrast) { + :host, + :root { + --in-content-page-color: WindowText; + --in-content-page-background: Window; + --in-content-deemphasized-text: GrayText; + + --in-content-box-background: -moz-Dialog; + --in-content-box-background-odd: -moz-Dialog; + --in-content-box-border-color: ThreeDShadow; + --in-content-box-info-background: -moz-Dialog; + + --in-content-item-hover: Highlight; + --in-content-item-hover-text: HighlightText; + --in-content-item-selected: Highlight; + --in-content-item-selected-text: HighlightText; + --in-content-icon-color: -moz-DialogText; + + --in-content-accent-color: -moz-DialogText; + --in-content-accent-color-active: -moz-DialogText; + + --in-content-border-hover: ThreeDShadow; + /* This is not great, but there is no suitable keyword for this. + * In theory, we shouldn't be conveying invalid state just with a colour + * change... */ + --in-content-border-invalid: ThreeDShadow; + --in-content-border-color: ThreeDShadow; + + --in-content-link-color: -moz-nativehyperlinktext; + --in-content-link-color-hover: -moz-nativehyperlinktext; + --in-content-link-color-active: -moz-nativehyperlinktext; + --in-content-link-color-visited: -moz-nativehyperlinktext; + + --in-content-button-text-color-hover: HighlightText; + --in-content-button-background: ButtonFace; + --in-content-button-text-color: ButtonText; + --in-content-button-background-hover: Highlight; + --in-content-button-background-active: Highlight; + + --in-content-primary-button-text-color: HighlightText; + --in-content-primary-button-text-color-hover: ButtonText; + --in-content-primary-button-background: Highlight; + --in-content-primary-button-background-hover: ButtonFace; + --in-content-primary-button-background-active: ButtonFace; + + --in-content-danger-button-background: var(--in-content-primary-button-background); + --in-content-danger-button-background-hover: var(--in-content-primary-button-background-hover); + --in-content-danger-button-background-active: var(--in-content-primary-button-background-active); + + --in-content-table-border-dark-color: ThreeDDarkShadow; + --in-content-table-background: -moz-Dialog; + --in-content-table-header-background: -moz-Dialog; + --in-content-table-header-color: -moz-DialogText; + + --dialog-warning-text-color: -moz-FieldText; + + --checkbox-border-color: ThreeDShadow; + --checkbox-unchecked-bgcolor: -moz-Field; + --checkbox-unchecked-hover-bgcolor: -moz-Field; + --checkbox-unchecked-active-bgcolor: -moz-Field; + --checkbox-checked-bgcolor: Highlight; + --checkbox-checked-color: HighlightText; + --checkbox-checked-border-color: Highlight; + --checkbox-checked-border-color-hover: Highlight; + --checkbox-checked-hover-bgcolor: -moz-Field; + --checkbox-checked-active-bgcolor: -moz-Field; + + } + + @-moz-document url-prefix("https://addons.mozilla.org") { + .Page-content, + .SecondaryHero { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + .Page-content h1, + .Page-content h2, + .SearchResult-link, + .Home-SubjectShelf-link:link, + .Home-SubjectShelf-link:visited{ + color: var(--in-content-text-color)!important + } + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{ + background: var(--in-content-table-background) !important; + } + + .SecondaryHero-module-icon { + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + } + + .SecondaryHero-message-link, + .SecondaryHero-module-link, + .Card-footer-link a, + .SearchResult-link:focus, + .SearchResult-link:hover, + .SearchResult:hover .SearchResult-link, + .Home-SubjectShelf-link:active, + .Home-SubjectShelf-link:focus, + .Home-SubjectShelf-link:hover { + color: var(--in-content-link-color) !important; + } + .SearchResult--meta-section { + color: var(--in-content-deemphasized-text) !important; + } + } + } } From 96cae6f4c721cbdaff8938d0a5dde12b835eefd6 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 10 Jul 2021 12:07:46 +0900 Subject: [PATCH 11/26] Fix: Menu - Background color fallback --- userChrome.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/userChrome.css b/userChrome.css index 50b925f..9a1f6b7 100644 --- a/userChrome.css +++ b/userChrome.css @@ -98,6 +98,12 @@ --menuitem-disabled-hover-background-color: color-mix(in srgb, var(--menuitem-hover-background-color) 40%, transparent) !important; } + /* Fallback background */ + menupopup { + background-color: var(--lwt-accent-color) !important; + } + + /* Fully Dark Mode **********************************************************/ /*= Notification ===========================================================*/ @-moz-document url("chrome://global/content/alerts/alert.xhtml") { /* line below removes background from the notification "window" on linux */ From 78a013df560c3f9d68f1181d4ad6aefaa4a2407d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Jul 2021 09:13:48 +0900 Subject: [PATCH 12/26] Fix: Fully DarkMode - Addons.org change order --- userContent.css | 77 ++++++++++++++++++++++++------------------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/userContent.css b/userContent.css index e521df9..9360256 100644 --- a/userContent.css +++ b/userContent.css @@ -356,48 +356,47 @@ --checkbox-checked-active-bgcolor: -moz-Field; } + } + @-moz-document url-prefix("https://addons.mozilla.org") { + .Page-content, + .SecondaryHero { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } - @-moz-document url-prefix("https://addons.mozilla.org") { - .Page-content, - .SecondaryHero { - color: var(--in-content-page-color) !important; - background: var(--in-content-page-background) !important; - } + .Page-content h1, + .Page-content h2, + .SearchResult-link, + .Home-SubjectShelf-link:link, + .Home-SubjectShelf-link:visited{ + color: var(--in-content-text-color)!important + } + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{ + background: var(--in-content-table-background) !important; + } - .Page-content h1, - .Page-content h2, - .SearchResult-link, - .Home-SubjectShelf-link:link, - .Home-SubjectShelf-link:visited{ - color: var(--in-content-text-color)!important - } - .SecondaryHero-module, - .Card-header, - .Card-contents, - .CardList ul > li, - .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{ - background: var(--in-content-table-background) !important; - } + .SecondaryHero-module-icon { + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + } - .SecondaryHero-module-icon { - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - } - - .SecondaryHero-message-link, - .SecondaryHero-module-link, - .Card-footer-link a, - .SearchResult-link:focus, - .SearchResult-link:hover, - .SearchResult:hover .SearchResult-link, - .Home-SubjectShelf-link:active, - .Home-SubjectShelf-link:focus, - .Home-SubjectShelf-link:hover { - color: var(--in-content-link-color) !important; - } - .SearchResult--meta-section { - color: var(--in-content-deemphasized-text) !important; - } + .SecondaryHero-message-link, + .SecondaryHero-module-link, + .Card-footer-link a, + .SearchResult-link:focus, + .SearchResult-link:hover, + .SearchResult:hover .SearchResult-link, + .Home-SubjectShelf-link:active, + .Home-SubjectShelf-link:focus, + .Home-SubjectShelf-link:hover { + color: var(--in-content-link-color) !important; + } + .SearchResult--meta-section { + color: var(--in-content-deemphasized-text) !important; } } } From ba00e7e87930e7471eb1cb9d5d1d08e2c1528751 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Jul 2021 09:18:10 +0900 Subject: [PATCH 13/26] Fix: Fully Dark Mode - only works prefer dark --- userContent.css | 165 +++++++++++++----------------------------------- 1 file changed, 43 insertions(+), 122 deletions(-) diff --git a/userContent.css b/userContent.css index 9360256..9a71ca3 100644 --- a/userContent.css +++ b/userContent.css @@ -118,7 +118,8 @@ } } - /** Dark Mode Colors ********************************************************/ + /** Fully Dark Mode *********************************************************/ + /*= Fully Dark Mode - Dark Mode Colors =====================================*/ :host, :root { --in-content-page-color: rgb(21, 20, 26); @@ -275,128 +276,48 @@ scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); } - /* For dialogs, use a different background colour. We don't do - * this in High Contrast mode, as we should be using system colours then. - */ - @media not (prefers-contrast) { - :root[dialogroot], - /* Also need this on dialog :hosts, or the rule above will override the - * value for this custom property again in the shadow DOM. */ - :host(dialog) { - --in-content-page-background: #42414d; + /*= Fully Dark Mode - Addons.org ===========================================*/ + @-moz-document url-prefix("https://addons.mozilla.org") { + .Page-content, + .SecondaryHero { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + .Page-content h1, + .Page-content h2, + .SearchResult-link, + .Home-SubjectShelf-link:link, + .Home-SubjectShelf-link:visited{ + color: var(--in-content-text-color)!important + } + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{ + background: var(--in-content-table-background) !important; + } + + .SecondaryHero-module-icon { + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + } + + .SecondaryHero-message-link, + .SecondaryHero-module-link, + .Card-footer-link a, + .SearchResult-link:focus, + .SearchResult-link:hover, + .SearchResult:hover .SearchResult-link, + .Home-SubjectShelf-link:active, + .Home-SubjectShelf-link:focus, + .Home-SubjectShelf-link:hover { + color: var(--in-content-link-color) !important; + } + .SearchResult--meta-section { + color: var(--in-content-deemphasized-text) !important; } } } - - @media (prefers-contrast) { - :host, - :root { - --in-content-page-color: WindowText; - --in-content-page-background: Window; - --in-content-deemphasized-text: GrayText; - - --in-content-box-background: -moz-Dialog; - --in-content-box-background-odd: -moz-Dialog; - --in-content-box-border-color: ThreeDShadow; - --in-content-box-info-background: -moz-Dialog; - - --in-content-item-hover: Highlight; - --in-content-item-hover-text: HighlightText; - --in-content-item-selected: Highlight; - --in-content-item-selected-text: HighlightText; - --in-content-icon-color: -moz-DialogText; - - --in-content-accent-color: -moz-DialogText; - --in-content-accent-color-active: -moz-DialogText; - - --in-content-border-hover: ThreeDShadow; - /* This is not great, but there is no suitable keyword for this. - * In theory, we shouldn't be conveying invalid state just with a colour - * change... */ - --in-content-border-invalid: ThreeDShadow; - --in-content-border-color: ThreeDShadow; - - --in-content-link-color: -moz-nativehyperlinktext; - --in-content-link-color-hover: -moz-nativehyperlinktext; - --in-content-link-color-active: -moz-nativehyperlinktext; - --in-content-link-color-visited: -moz-nativehyperlinktext; - - --in-content-button-text-color-hover: HighlightText; - --in-content-button-background: ButtonFace; - --in-content-button-text-color: ButtonText; - --in-content-button-background-hover: Highlight; - --in-content-button-background-active: Highlight; - - --in-content-primary-button-text-color: HighlightText; - --in-content-primary-button-text-color-hover: ButtonText; - --in-content-primary-button-background: Highlight; - --in-content-primary-button-background-hover: ButtonFace; - --in-content-primary-button-background-active: ButtonFace; - - --in-content-danger-button-background: var(--in-content-primary-button-background); - --in-content-danger-button-background-hover: var(--in-content-primary-button-background-hover); - --in-content-danger-button-background-active: var(--in-content-primary-button-background-active); - - --in-content-table-border-dark-color: ThreeDDarkShadow; - --in-content-table-background: -moz-Dialog; - --in-content-table-header-background: -moz-Dialog; - --in-content-table-header-color: -moz-DialogText; - - --dialog-warning-text-color: -moz-FieldText; - - --checkbox-border-color: ThreeDShadow; - --checkbox-unchecked-bgcolor: -moz-Field; - --checkbox-unchecked-hover-bgcolor: -moz-Field; - --checkbox-unchecked-active-bgcolor: -moz-Field; - --checkbox-checked-bgcolor: Highlight; - --checkbox-checked-color: HighlightText; - --checkbox-checked-border-color: Highlight; - --checkbox-checked-border-color-hover: Highlight; - --checkbox-checked-hover-bgcolor: -moz-Field; - --checkbox-checked-active-bgcolor: -moz-Field; - - } - } - @-moz-document url-prefix("https://addons.mozilla.org") { - .Page-content, - .SecondaryHero { - color: var(--in-content-page-color) !important; - background: var(--in-content-page-background) !important; - } - - .Page-content h1, - .Page-content h2, - .SearchResult-link, - .Home-SubjectShelf-link:link, - .Home-SubjectShelf-link:visited{ - color: var(--in-content-text-color)!important - } - .SecondaryHero-module, - .Card-header, - .Card-contents, - .CardList ul > li, - .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{ - background: var(--in-content-table-background) !important; - } - - .SecondaryHero-module-icon { - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - } - - .SecondaryHero-message-link, - .SecondaryHero-module-link, - .Card-footer-link a, - .SearchResult-link:focus, - .SearchResult-link:hover, - .SearchResult:hover .SearchResult-link, - .Home-SubjectShelf-link:active, - .Home-SubjectShelf-link:focus, - .Home-SubjectShelf-link:hover { - color: var(--in-content-link-color) !important; - } - .SearchResult--meta-section { - color: var(--in-content-deemphasized-text) !important; - } - } } From 132fad8e6ef24e71bfcd8ab650cc2cbac97a9182 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Jul 2021 11:48:59 +0900 Subject: [PATCH 14/26] Add: Fully Dark Mode - Addon.org more pages --- userContent.css | 82 ++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 74 insertions(+), 8 deletions(-) diff --git a/userContent.css b/userContent.css index 9a71ca3..e2f261e 100644 --- a/userContent.css +++ b/userContent.css @@ -288,17 +288,34 @@ .Page-content h2, .SearchResult-link, .Home-SubjectShelf-link:link, - .Home-SubjectShelf-link:visited{ + .Home-SubjectShelf-link:visited, + .DropdownMenuItem-link a, + .Select, + .Button--neutral { color: var(--in-content-text-color)!important } .SecondaryHero-module, .Card-header, .Card-contents, .CardList ul > li, - .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{ + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .LandingPage-header, + .DropdownMenu-items, + .DropdownMenu-items::after, + .MetadataCard, + .AddonsCard-list, + .Card-footer { background: var(--in-content-table-background) !important; } + .DropdownMenu-items { + box-shadow: 0 0 2px var(--in-content-border-color) !important; + } + .Select, + .Button--neutral, .Button--neutral:link { + background-color: var(--in-content-button-background) !important; + } + .SecondaryHero-module-icon { -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; @@ -307,17 +324,66 @@ .SecondaryHero-message-link, .SecondaryHero-module-link, .Card-footer-link a, - .SearchResult-link:focus, - .SearchResult-link:hover, + .SearchResult-link:is(:active, :focus, :hover), .SearchResult:hover .SearchResult-link, - .Home-SubjectShelf-link:active, - .Home-SubjectShelf-link:focus, - .Home-SubjectShelf-link:hover { + .Home-SubjectShelf-link:is(:active, :focus, :hover), + .DropdownMenuItem-link a:is(:active, :focus, :hover), + .AddonMeta .MetadataCard-title a:is(:active, :hover), + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover), + .AddonMeta .MetadataCard-content a:is(:active, :hover), + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover), + .RatingsByStar-count a:hover, + .RatingsByStar-star a:hover, + .AddonTitle-author a, + .PermissionsCard-learn-more, + .DefinitionList a, + .ShowMoreCard-contents a, + .AddonDescription-contents a { color: var(--in-content-link-color) !important; } - .SearchResult--meta-section { + .SearchResult--meta-section, + .MetadataCard-title, + .MetadataCard-title a, + .MetadataCard-content a, + .CollectionSort-label, + .SearchResult-summary, + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link, + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link, + .PermissionsCard-subhead--optional, + .PermissionsCard-subhead--required, + .Definition-dt, + .RatingsByStar-count a, + .RatingsByStar-star a { color: var(--in-content-deemphasized-text) !important; } + .PromotedBadge-label--recommended { + color: color-mix(in srgb, #712b00 15%, #ff9400) !important; + } + + .Button--action { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + .Button--action.Button--micro:not(.Button--disabled):hover, + .Button--action:not(.Button--disabled):hover { + background: var(--in-content-primary-button-background-hover) !important; + } + .Button--neutral { + } + .Button--neutral.Button--micro:not(.Button--disabled):hover, + .Button--neutral:not(.Button--disabled):hover { + background: var(--in-content-button-background-hover) !important; + } + + .ShowMoreCard-contents::after { + background: linear-gradient(hsla(0,0%,100%,0), var(--in-content-table-background)) !important; + } + .Icon-heart { + filter: brightness(0) !important;; + } + .Permission .Icon { + filter: grayscale(100%) brightness(30) !important;; + } } } } From 235d30d81ec27c3c299b480a64ed75ee765a4019 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Jul 2021 11:54:30 +0900 Subject: [PATCH 15/26] Clean: Addon.org order --- userContent.css | 67 +++++++++++++++++++++++++------------------------ 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/userContent.css b/userContent.css index e2f261e..5a71493 100644 --- a/userContent.css +++ b/userContent.css @@ -278,12 +278,14 @@ /*= Fully Dark Mode - Addons.org ===========================================*/ @-moz-document url-prefix("https://addons.mozilla.org") { + /* Basic */ .Page-content, .SecondaryHero { color: var(--in-content-page-color) !important; background: var(--in-content-page-background) !important; } + /* Text */ .Page-content h1, .Page-content h2, .SearchResult-link, @@ -294,33 +296,6 @@ .Button--neutral { color: var(--in-content-text-color)!important } - .SecondaryHero-module, - .Card-header, - .Card-contents, - .CardList ul > li, - .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), - .LandingPage-header, - .DropdownMenu-items, - .DropdownMenu-items::after, - .MetadataCard, - .AddonsCard-list, - .Card-footer { - background: var(--in-content-table-background) !important; - } - - .DropdownMenu-items { - box-shadow: 0 0 2px var(--in-content-border-color) !important; - } - .Select, - .Button--neutral, .Button--neutral:link { - background-color: var(--in-content-button-background) !important; - } - - .SecondaryHero-module-icon { - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - } - .SecondaryHero-message-link, .SecondaryHero-module-link, .Card-footer-link a, @@ -360,30 +335,56 @@ color: color-mix(in srgb, #712b00 15%, #ff9400) !important; } + /* Background */ .Button--action { color: var(--in-content-primary-button-text-color) !important; background: var(--in-content-primary-button-background) !important; } - .Button--action.Button--micro:not(.Button--disabled):hover, - .Button--action:not(.Button--disabled):hover { - background: var(--in-content-primary-button-background-hover) !important; - } - .Button--neutral { + .Select, + .Button--neutral, .Button--neutral:link { + background-color: var(--in-content-button-background) !important; } .Button--neutral.Button--micro:not(.Button--disabled):hover, .Button--neutral:not(.Button--disabled):hover { background: var(--in-content-button-background-hover) !important; } - + .Button--action.Button--micro:not(.Button--disabled):hover, + .Button--action:not(.Button--disabled):hover { + background: var(--in-content-primary-button-background-hover) !important; + } .ShowMoreCard-contents::after { background: linear-gradient(hsla(0,0%,100%,0), var(--in-content-table-background)) !important; } + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .LandingPage-header, + .DropdownMenu-items, + .DropdownMenu-items::after, + .MetadataCard, + .AddonsCard-list, + .Card-footer { + background: var(--in-content-table-background) !important; + } + + /* Fill */ + .SecondaryHero-module-icon { + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + } .Icon-heart { filter: brightness(0) !important;; } .Permission .Icon { filter: grayscale(100%) brightness(30) !important;; } + + /* Others */ + .DropdownMenu-items { + box-shadow: 0 0 2px var(--in-content-border-color) !important; + } } } } From 3d310fd1b66e333507e52d68e54ceec9c46b6f47 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Jul 2021 15:25:25 +0900 Subject: [PATCH 16/26] Fix: Fully Dark Mode - Addons.org complete --- userContent.css | 66 ++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 60 insertions(+), 6 deletions(-) diff --git a/userContent.css b/userContent.css index 5a71493..74eda4f 100644 --- a/userContent.css +++ b/userContent.css @@ -280,12 +280,15 @@ @-moz-document url-prefix("https://addons.mozilla.org") { /* Basic */ .Page-content, - .SecondaryHero { + .SecondaryHero, + main[aria-label="Content"] { color: var(--in-content-page-color) !important; background: var(--in-content-page-background) !important; } /* Text */ + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, .Page-content h1, .Page-content h2, .SearchResult-link, @@ -293,9 +296,12 @@ .Home-SubjectShelf-link:visited, .DropdownMenuItem-link a, .Select, - .Button--neutral { - color: var(--in-content-text-color)!important + .Button--neutral, + .blog-entry-title, + .blogpost-nav * { + color: var(--in-content-text-color)!important; } + .AutoSearchInput-suggestions-item:is(:active, :focus, :hover), .SecondaryHero-message-link, .SecondaryHero-module-link, .Card-footer-link a, @@ -313,7 +319,15 @@ .PermissionsCard-learn-more, .DefinitionList a, .ShowMoreCard-contents a, - .AddonDescription-contents a { + .AddonDescription-contents a, + .AddonTitle a, + .TooltipMenu-opener, + .LanguageTools .Card-contents a, + .blog-entry-read-more-link, + .blogpost-nav-next.blogpost-nav-no-prev:hover p, + .blogpost-content-wrapper p a, + .blogpost-nav-prev:hover p, + .blogpost-nav-next:hover p { color: var(--in-content-link-color) !important; } .SearchResult--meta-section, @@ -328,7 +342,13 @@ .PermissionsCard-subhead--required, .Definition-dt, .RatingsByStar-count a, - .RatingsByStar-star a { + .RatingsByStar-star a, + .AddonSummaryCard-addonAverage, + .AddonReviewCard-authorByLine, + .Home-heroHeader-subtitle, + .blog-entry-date, + .blogpost-breadcrumb *, + .AddonTitle-author { color: var(--in-content-deemphasized-text) !important; } .PromotedBadge-label--recommended { @@ -355,6 +375,8 @@ .ShowMoreCard-contents::after { background: linear-gradient(hsla(0,0%,100%,0), var(--in-content-table-background)) !important; } + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, .SecondaryHero-module, .Card-header, .Card-contents, @@ -365,15 +387,31 @@ .DropdownMenu-items::after, .MetadataCard, .AddonsCard-list, - .Card-footer { + .Card-footer, + .StaticAddonCard, + .blogpost-nav * { background: var(--in-content-table-background) !important; } + .LanguageTools-header-row { + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + } + .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) { + background-color: var(--in-content-box-background-odd) !important;; + } + /* Fill */ + .Icon-arrow-blue.SearchSuggestion-icon-arrow { + filter: hue-rotate(330deg) brightness(1.3) !important; + } .SecondaryHero-module-icon { -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; } + .Icon-magnifying-glass { + filter: invert(65%) !important; + } .Icon-heart { filter: brightness(0) !important;; } @@ -385,6 +423,22 @@ .DropdownMenu-items { box-shadow: 0 0 2px var(--in-content-border-color) !important; } + + .AutoSearchInput-query { + border: 1px solid var(--in-content-table-background) !important; + } + .AutoSearchInput-query:is(:hover, :focus) { + border-color: var(--in-content-primary-button-background) !important; + } + + .blog-entry-read-more-link { + border-color: var(--in-content-link-color) !important; + } + + .blogpost-nav-arrow-left .cls-1, + .blogpost-nav-arrow-right .cls-1 { + stroke: var(--in-content-text-color) !important; + } } } } From c9af167fbfde31025d8ffeb370cc2749f60858a1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Jul 2021 16:32:35 +0900 Subject: [PATCH 17/26] Add: Fully Dark Mode - about:plugins --- userContent.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/userContent.css b/userContent.css index 9d2bb80..b43f334 100644 --- a/userContent.css +++ b/userContent.css @@ -276,6 +276,29 @@ scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); } + /*= Fully Dark Mode - about:plugins ========================================*/ + @-moz-document url-prefix("about:plugins") { + :root, + body { + background-color: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + + body { + font-size: 15px !important; + font-weight: normal !important; + margin: 0 !important; + } + + .notice { + background: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-border-color) !important; + } + .notice a { + color: var(--in-content-link-color) !important; + } + } + /*= Fully Dark Mode - Addons.org ===========================================*/ @-moz-document url-prefix("https://addons.mozilla.org") { /* Basic */ From 5b189167711e3c8d3961a17670d2344587f6a31c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Jul 2021 17:07:35 +0900 Subject: [PATCH 18/26] Add: Fully Dark Mode - about:cache --- userContent.css | 44 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/userContent.css b/userContent.css index b43f334..21be914 100644 --- a/userContent.css +++ b/userContent.css @@ -276,8 +276,9 @@ scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); } - /*= Fully Dark Mode - about:plugins ========================================*/ - @-moz-document url-prefix("about:plugins") { + /*= Fully Dark Mode - abouts' common =======================================*/ + @-moz-document url-prefix("about:plugins"), + url-prefix("about:cache") { :root, body { background-color: var(--in-content-page-background) !important; @@ -290,12 +291,47 @@ margin: 0 !important; } + h1 { + line-height: 1.2 !important; + } + h2 { + line-height: 1.4em !important; + } + + a { + color: var(--in-content-link-color) !important; + } + + table { + width: 100% !important; + border: 1px solid var(--in-content-border-color) !important; + border-radius: 0 !important; + } + } + + /*= Fully Dark Mode - about:plugins ========================================*/ + @-moz-document url-prefix("about:plugins") { .notice { background: var(--in-content-box-background) !important; border: 1px solid var(--in-content-border-color) !important; } - .notice a { - color: var(--in-content-link-color) !important; + } + + /*= Fully Dark Mode - about:cache ==========================================*/ + @-moz-document url-prefix("about:cache") { + table { + padding: 0 !important; + } + + th, td { + border: 1px solid var(--in-content-border-color); + padding: 4px; + text-align: match-parent; + } + + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; } } From 5ca27febb3deda576aa070b36055c2b3fa05880b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Jul 2021 13:43:03 +0900 Subject: [PATCH 19/26] Add: Fully Dark Mode - about:checkerboard --- userContent.css | 211 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 203 insertions(+), 8 deletions(-) diff --git a/userContent.css b/userContent.css index 21be914..376e66b 100644 --- a/userContent.css +++ b/userContent.css @@ -120,6 +120,7 @@ /** Fully Dark Mode *********************************************************/ /*= Fully Dark Mode - Dark Mode Colors =====================================*/ + /* Based on chrome://global/skin/in-content/common.css */ :host, :root { --in-content-page-color: rgb(21, 20, 26); @@ -278,13 +279,18 @@ /*= Fully Dark Mode - abouts' common =======================================*/ @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache") { + url-prefix("about:cache"), + url-prefix("about:checkerboard") { + /* Base */ + :root { + font: message-box !important; + appearance: none !important; + } :root, body { background-color: var(--in-content-page-background) !important; color: var(--in-content-page-color) !important; } - body { font-size: 15px !important; font-weight: normal !important; @@ -298,10 +304,186 @@ line-height: 1.4em !important; } + /* Link */ a { color: var(--in-content-link-color) !important; } + a:hover, + .text-link:hover { + color: var(--in-content-link-color-hover) !important; + text-decoration: underline !important; + } + a:visited { + color: var(--in-content-link-color-visited) !important; + } + a:hover:active, + .text-link:hover:active { + color: var(--in-content-link-color-active) !important; + } + a:-moz-focusring, + .text-link:-moz-focusring { + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 1px !important; + border-radius: 4px !important; + } + /* Button */ + button { + font: inherit; + } + button, + select, + input[type="color"] { + appearance: none !important; + min-height: 32px !important; + color: var(--in-content-button-text-color, inherit) !important; + border: 1px solid transparent !important; /* shows up in high-contrast mode */ + border-radius: var(--in-content-button-border-radius) !important; + background-color: var(--in-content-button-background) !important; + font-weight: 400 !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + text-decoration: none !important; + margin: 4px 8px !important; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: 1em !important; + } + button { + font-weight: 600 !important; + /* Use the same margin of other elements for the alignment */ + margin-inline: 4px !important; + min-width: 6.3em !important; + } + /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding + * the 1px border): */ + button.medium { + --in-content-button-vertical-padding: 6px; + --in-content-button-horizontal-padding: 13px; + min-height: 28px !important; + font-size: 0.95em !important; + } + button.small { + --in-content-button-vertical-padding: 5px; + --in-content-button-horizontal-padding: 11px; + min-height: 24px !important; + font-size: 0.9em !important; + } + ::-moz-focus-inner { + border: none !important; + } + button:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + button:enabled:hover, + input[type="color"]:hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + button:enabled:hover:active, + input[type="color"]:enabled:hover:active { + background-color: var(--in-content-button-background-active) !important; + } + button:disabled, + input[type="color"]:disabled { + opacity: 0.4 !important; + } + button[autofocus], + button[type="submit"], + button.primary { + background-color: var(--in-content-primary-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + } + button[autofocus]:enabled:hover, + button[type="submit"]:enabled:hover, + button.primary:enabled:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + button[autofocus]:enabled:hover:active, + button[type="submit"]:enabled:hover:active, + button.primary:enabled:hover:active { + background-color: var(--in-content-primary-button-background-active) !important; + } + + /* Checkbox */ + input[type="checkbox"] { + margin-block: 2px !important; + } + input[type="checkbox"] { + appearance: none !important; + height: 16px !important; + width: 16px !important; + border: 1px solid var(--checkbox-border-color) !important; + background-color: var(--checkbox-unchecked-bgcolor) !important; + border-radius: 2px !important; + margin-inline: 0 6px !important; + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ + } + input[type="checkbox"]:enabled:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor) !important; + } + input[type="checkbox"]:checked { + border-color: var(--checkbox-checked-border-color) !important; + background-color: var(--checkbox-checked-bgcolor) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + input[type="checkbox"]:enabled:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor) !important; + } + + /* Textarea */ + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + appearance: none !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: inherit !important; + background-color: var(--in-content-box-background) !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, + textarea:focus, + search-textbox[focused], + tree:focus-visible, + richlistbox:focus-visible { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, + textarea:-moz-ui-invalid { + border-color: transparent !important; + outline: 2px solid var(--in-content-border-invalid) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, + textarea:disabled, + search-textbox[disabled="true"] { + opacity: 0.4 !important; + } + + /* Table */ table { width: 100% !important; border: 1px solid var(--in-content-border-color) !important; @@ -309,6 +491,16 @@ } } + @-moz-document url-prefix("about:cache"), + url-prefix("about:checkerboard") { + th, td { + border: 1px solid var(--in-content-border-color) !important; + } + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + } /*= Fully Dark Mode - about:plugins ========================================*/ @-moz-document url-prefix("about:plugins") { .notice { @@ -324,14 +516,17 @@ } th, td { - border: 1px solid var(--in-content-border-color); - padding: 4px; - text-align: match-parent; + padding: 4px !important; + text-align: match-parent !important; } + } - th { - background-color: var(--in-content-table-header-background) !important; - color: var(--in-content-table-header-color) !important; + @-moz-document url-prefix("about:checkerboard") { + #canvas { + border: 1px solid var(--in-content-border-color) !important; + } + #excludePageFromZoom { + vertical-align: bottom !important; } } From eefb7e3ad3a1dc38518bdde5909305413599890b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Jul 2021 14:09:27 +0900 Subject: [PATCH 20/26] Add: Fully Dark Mode - about:sync-log --- userContent.css | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/userContent.css b/userContent.css index 376e66b..f2aba3a 100644 --- a/userContent.css +++ b/userContent.css @@ -280,7 +280,8 @@ /*= Fully Dark Mode - abouts' common =======================================*/ @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), - url-prefix("about:checkerboard") { + url-prefix("about:checkerboard"), + url-prefix("about:sync-log") { /* Base */ :root { font: message-box !important; @@ -486,11 +487,17 @@ /* Table */ table { width: 100% !important; + } + } + + @-moz-document url-prefix("about:plugins"), + url-prefix("about:cache"), + url-prefix("about:checkerboard") { + table { border: 1px solid var(--in-content-border-color) !important; border-radius: 0 !important; } } - @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { th, td { @@ -521,6 +528,7 @@ } } + /*= Fully Dark Mode - about:checkerboard ===================================*/ @-moz-document url-prefix("about:checkerboard") { #canvas { border: 1px solid var(--in-content-border-color) !important; @@ -530,6 +538,16 @@ } } + /*= Fully Dark Mode - about:sync-log =======================================*/ + @-moz-document url-prefix("about:sync-log") { + body { + background-color: var(--in-content-box-background) !important; + } + thead a { + color: var(--in-content-page-color) !important; + } + } + /*= Fully Dark Mode - Addons.org ===========================================*/ @-moz-document url-prefix("https://addons.mozilla.org") { /* Basic */ From 22ee917caa6082521e7e99a3b7a136c2578d05e6 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Jul 2021 14:28:44 +0900 Subject: [PATCH 21/26] Add: Fully Dark Mode - about:memory --- userContent.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/userContent.css b/userContent.css index f2aba3a..bd16cea 100644 --- a/userContent.css +++ b/userContent.css @@ -281,7 +281,8 @@ @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard"), - url-prefix("about:sync-log") { + url-prefix("about:sync-log"), + url-prefix("about:memory") { /* Base */ :root { font: message-box !important; @@ -548,6 +549,18 @@ } } + /*= Fully Dark Mode - about:memory =========================================*/ + @-moz-document url-prefix("about:memory") { + .opsRow, + .section { + background-color: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + .opsRowLabel input { + vertical-align: bottom !important; + } + } + /*= Fully Dark Mode - Addons.org ===========================================*/ @-moz-document url-prefix("https://addons.mozilla.org") { /* Basic */ From 3c59c9f7b2e75c7b8b6bb008a45aff313e4b46b5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Jul 2021 14:55:51 +0900 Subject: [PATCH 22/26] Fix: Fully Dark Mode - addon.org --- userContent.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/userContent.css b/userContent.css index bd16cea..be2af2b 100644 --- a/userContent.css +++ b/userContent.css @@ -633,7 +633,10 @@ .Home-heroHeader-subtitle, .blog-entry-date, .blogpost-breadcrumb *, - .AddonTitle-author { + .AddonTitle-author, + .ExpandableCard-ToggleLink, + .SearchFilters-label, + .PromotedBadge-label--line { color: var(--in-content-deemphasized-text) !important; } .PromotedBadge-label--recommended { @@ -716,6 +719,13 @@ border-color: var(--in-content-primary-button-background) !important; } + .PromotedBadge-link--line { + border-color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-link--line:hover { + border-color: var(--in-content-button-background-hover) !important; + } + .blog-entry-read-more-link { border-color: var(--in-content-link-color) !important; } From 1e606773f6da9b4eade8078971b9a59b69090b93 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Jul 2021 15:16:04 +0900 Subject: [PATCH 23/26] Add: Fully Dark Mode - Directory View --- userContent.css | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/userContent.css b/userContent.css index be2af2b..6a4eb1e 100644 --- a/userContent.css +++ b/userContent.css @@ -282,7 +282,9 @@ url-prefix("about:cache"), url-prefix("about:checkerboard"), url-prefix("about:sync-log"), - url-prefix("about:memory") { + url-prefix("about:memory"), + url-prefix("resource://"), + url-prefix("file://") { /* Base */ :root { font: message-box !important; @@ -509,6 +511,22 @@ color: var(--in-content-table-header-color) !important; } } + + /*= Fully Dark Mode - Directory View =======================================*/ + @-moz-document url-prefix("about:sync-log"), + url-prefix("resource://"), + url-prefix("file://") { + body { + background-color: var(--in-content-box-background) !important; + } + thead a { + color: var(--in-content-page-color) !important; + } + td ::before { + vertical-align: top !important; + } + } + /*= Fully Dark Mode - about:plugins ========================================*/ @-moz-document url-prefix("about:plugins") { .notice { @@ -539,16 +557,6 @@ } } - /*= Fully Dark Mode - about:sync-log =======================================*/ - @-moz-document url-prefix("about:sync-log") { - body { - background-color: var(--in-content-box-background) !important; - } - thead a { - color: var(--in-content-page-color) !important; - } - } - /*= Fully Dark Mode - about:memory =========================================*/ @-moz-document url-prefix("about:memory") { .opsRow, From 20207a9b9221c04a9506d32be279407c49c2107e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Jul 2021 16:31:22 +0900 Subject: [PATCH 24/26] Fix: remove resouce:// file:// color (devtools compatibility) --- userContent.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/userContent.css b/userContent.css index 6a4eb1e..d7518e6 100644 --- a/userContent.css +++ b/userContent.css @@ -283,15 +283,12 @@ url-prefix("about:checkerboard"), url-prefix("about:sync-log"), url-prefix("about:memory"), - url-prefix("resource://"), url-prefix("file://") { /* Base */ - :root { + html, + body { font: message-box !important; appearance: none !important; - } - :root, - body { background-color: var(--in-content-page-background) !important; color: var(--in-content-page-color) !important; } @@ -514,7 +511,6 @@ /*= Fully Dark Mode - Directory View =======================================*/ @-moz-document url-prefix("about:sync-log"), - url-prefix("resource://"), url-prefix("file://") { body { background-color: var(--in-content-box-background) !important; From 91f80843e8431e4bf7b654c727119b668dbfb99d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 14 Jul 2021 10:20:52 +0900 Subject: [PATCH 25/26] Add: Fully Dark Mode - Remove white flash at @overdodactyl 's ShadowFox --- userChrome.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/userChrome.css b/userChrome.css index 5fc67c0..d8948e2 100644 --- a/userChrome.css +++ b/userChrome.css @@ -104,6 +104,14 @@ } /* Fully Dark Mode **********************************************************/ + /*= Remove White Flash =====================================================*/ + #tabbrowser-tabbox, + #tabbrowser-tabpanels, + browser[type=content-primary], + browser[type=content] > html { + background: var(--lwt-accent-color) !important; + } + /*= Notification ===========================================================*/ @-moz-document url("chrome://global/content/alerts/alert.xhtml") { /* line below removes background from the notification "window" on linux */ From 68a94765617fd68e59885635d0cc02076decd550 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 14 Jul 2021 14:50:11 +0900 Subject: [PATCH 26/26] Add: GTK System Default Theme - URL Bar focus color #120 --- userChrome.css | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/userChrome.css b/userChrome.css index d8948e2..dff0da5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,15 +1,17 @@ @media (-moz-proton) { - /** Lightmode - Color darker ************************************************/ + /** Default Thme - Contrast *************************************************/ + /*= Lightmode - Color darker ===============================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="dark"] { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } - /** Darkmode - Color lighter ************************************************/ + /*= Darkmode - Color lighter ===============================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } - /* Theme - Compatibility ****************************************************/ + /** Theme - Compatibility ***************************************************/ + /*= Light Weidght Theme ====================================================*/ /* Header Image */ :root[lwtheme-image] { background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ @@ -34,7 +36,7 @@ border-radius: 4px; } - /** Windows 7 - Compatibility ***********************************************/ + /*= Windows 7 ==============================================================*/ @media (-moz-os-version: windows-win7) { /* Header Color */ :root:not([lwtheme-image]) #navigator-toolbox:-moz-lwtheme { @@ -49,7 +51,23 @@ } } - /** Windows System Default Theme - Use acccent color ************************/ + /** System Default Theme ****************************************************/ + /*= Common - URL Bar focus color ===========================================*/ + @media (-moz-windows-accent-color-in-titlebar), + (-moz-gtk-csd-available) { + /* URL Bar */ + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { + --focus-outline-color: -moz-accent-color !important; + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { + border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */ + } + } + + /*= Windows10 - Titlebar accent color ======================================*/ @media (-moz-windows-accent-color-in-titlebar) { /* Tab Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, @@ -64,17 +82,6 @@ --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent); --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent); } - - /* URL Bar */ - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { - --focus-outline-color: -moz-accent-color !important; - } - - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { - border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */ - } } /* Fully Theme Mode *********************************************************/