From 0690a7a936de8fa76a8003bf4ad71fe7787d7e54 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 9 Jul 2021 16:53:09 +0900 Subject: [PATCH] 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; + } + } + } }