From fc1eec8d2273b76828a23d8c4066bd7c8eb187ed Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 31 Mar 2022 13:20:46 +0900 Subject: [PATCH] Fix: Proton Color - apply scope --- ...rk_blue_accent.scss => _proton_color.scss} | 12 +- src/userContent.scss | 5 +- userContent.css | 290 +++++++++--------- 3 files changed, 154 insertions(+), 153 deletions(-) rename src/contents/{_dark_blue_accent.scss => _proton_color.scss} (55%) diff --git a/src/contents/_dark_blue_accent.scss b/src/contents/_proton_color.scss similarity index 55% rename from src/contents/_dark_blue_accent.scss rename to src/contents/_proton_color.scss index 41ba6ca..a99aa33 100644 --- a/src/contents/_dark_blue_accent.scss +++ b/src/contents/_proton_color.scss @@ -3,11 +3,15 @@ url-prefix("https://support.mozilla.org"), url-prefix("https://accounts.firefox.com"), regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") { - @include Dark { - @import "../theme/dark_blue_color"; + @import "../theme/proton_color"; - :host, :root { - @include DarkBlueContent; + @include Option("userContent.page.proton_color.dark_blue_accent") { + @include Dark { + @import "../theme/dark_blue_color"; + + :host, :root { + @include DarkBlueContent; + } } } } diff --git a/src/userContent.scss b/src/userContent.scss index 0a82e3d..7be8742 100644 --- a/src/userContent.scss +++ b/src/userContent.scss @@ -19,10 +19,7 @@ /** Fully Dark Mode ***********************************************************/ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @include Option("userContent.page.proton_color") { - @import "theme/proton_color"; - @include Option("userContent.page.proton_color.dark_blue_accent") { - @import "contents/dark_blue_accent"; - } + @import "contents/proton_color"; } @include Option("userContent.page.dark_mode") { @import "contents/dark_mode"; diff --git a/userContent.css b/userContent.css index 850494e..98d03bb 100644 --- a/userContent.css +++ b/userContent.css @@ -527,155 +527,155 @@ /** Fully Dark Mode ***********************************************************/ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @supports -moz-bool-pref("userContent.page.proton_color") { - /*= Default Colors - Hard Coded ==============================================*/ - /* Based on chrome://global/skin/in-content/common.css */ - :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, 0.33); - --in-content-button-background-hover: rgba(207, 207, 216, 0.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-color: var(--in-content-box-border-color); - /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */ - --in-content-table-border-dark-color: var(--in-content-table-border-color); - --in-content-table-header-background: var(--in-content-primary-button-background); - /* Legacy: #0a84ff; rgb(5, 64, 150); */ - --in-content-table-header-color: var(--in-content-primary-button-text-color); - /* Legacy: #ffffff; var(--in-content-page-color); */ - --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), (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: var(--in-content-box-border-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); - } - } - @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") { - @-moz-document url-prefix("about:"), + @-moz-document url-prefix("about:"), url-prefix("https://addons.mozilla.org"), url-prefix("https://support.mozilla.org"), url-prefix("https://accounts.firefox.com"), regexp("^((file:///)|(chrome://)).*/$") - { + { + /*= Default Colors - Hard Coded ==============================================*/ + /* Based on chrome://global/skin/in-content/common.css */ + :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, 0.33); + --in-content-button-background-hover: rgba(207, 207, 216, 0.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-color: var(--in-content-box-border-color); + /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */ + --in-content-table-border-dark-color: var(--in-content-table-border-color); + --in-content-table-header-background: var(--in-content-primary-button-background); + /* Legacy: #0a84ff; rgb(5, 64, 150); */ + --in-content-table-header-color: var(--in-content-primary-button-text-color); + /* Legacy: #ffffff; var(--in-content-page-color); */ + --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), (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: var(--in-content-box-border-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); + } + } + @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") { @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :host, :root {