From 111c05f1d93c399445c2b4c3dad4701cbb94841d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 17 Dec 2021 20:19:09 +0900 Subject: [PATCH] Clean: SASS - Separated to `fully_color.scss` --- src/theme/_fully_color.scss | 181 ++++++++++++++++++++++++++++++++++ src/theme/_proton_color.scss | 1 + src/userChrome.scss | 184 +---------------------------------- 3 files changed, 183 insertions(+), 183 deletions(-) create mode 100644 src/theme/_fully_color.scss diff --git a/src/theme/_fully_color.scss b/src/theme/_fully_color.scss new file mode 100644 index 0000000..d49b640 --- /dev/null +++ b/src/theme/_fully_color.scss @@ -0,0 +1,181 @@ +/*== Menu Color ==============================================================*/ +html#main-window 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(--arrowpanel-color, var(--in-content-page-color)) !important; + --menu-background-color: var(--arrowpanel-background, var(--in-content-button-background)) !important; + + --menu-border-color: var( + --toolbarbutton-active-background, + var(--button-active-bgcolor, var(--card-outline-color)) + ) !important; + --menuitem-hover-background-color: var( + --toolbarbutton-hover-background, + var(--button-hover-bgcolor, var(--in-content-button-background-hover)) + ) !important; + + --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important; + --menuitem-disabled-hover-background-color: color-mix( + in srgb, + var(--menuitem-hover-background-color) 40%, + transparent + ) !important; +} + +// TODO: `OS` not covered case +@media not all and (-moz-gtk-csd-available) { + window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menupopup { + --panel-color: var(--lwt-sidebar-text-color, var(--menu-color)) !important; + --panel-background: var(--lwt-sidebar-background-color, var(--menu-background-color)) !important; + } + window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menu[_moz-menuactive="true"]:not([disabled="true"]), + window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] + menuitem[_moz-menuactive="true"]:not([disabled="true"]) { + --menuitem-hover-background-color: color-mix( + in srgb, + currentColor 17%, + transparent + ); /* Looks like toolbar button */ + /* or var(--lwt-sidebar-highlight-background-color) + If this value is used, unset is required in the default theme. + */ + } + + /* Fallback background */ + menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) { + background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important; + } +} + +/* Default theme color preservation */ +:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy */ +:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy */ +:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), +:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { + --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; + --arrowpanel-background: var( + --toolbar-bgcolor, + var(--in-content-button-background) + ) !important; /* --menu-background-color */ +} +@media not all and (-moz-gtk-csd-available) { + window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(249, 249, 251, 1);"] menupopup, /* Default Light Mode */ + window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] menupopup { + /* Default Dark Mode */ + --panel-color: var(--menu-color) !important; + --panel-background: var(--menu-background-color) !important; + } +} + +/*== Bookmark Popup Color ====================================================*/ +#editBMPanel_folderTree:-moz-lwtheme, +#editBMPanel_tagsSelector:-moz-lwtheme { + appearance: none !important; + border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; +} + +#editBMPanel_folderTree:-moz-lwtheme, +#editBMPanel_folderTree:-moz-lwtheme > treechildren, +#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image, +#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover), +#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected), +#editBMPanel_tagsSelector:-moz-lwtheme, +#editBMPanel_tagsSelector:-moz-lwtheme > richlistitem { + color: var(--lwt-text-color, fieldtext) !important; +} +#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) { + font-weight: 600 !important; +} + +#editBMPanel_folderTree:-moz-lwtheme > treechildren, +#editBMPanel_tagsSelector:-moz-lwtheme { + background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important; +} +#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover), +#editBMPanel_tagsSelector > richlistitem:hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important; +} +#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected), +#editBMPanel_tagsSelector > richlistitem[selected="true"] { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; +} + +#editBMPanel_namePicker, +#editBMPanel_tagsField { + --input-bgcolor: var(--arrowpanel-background, Field); + --input-color: var(--arrowpanel-color, FieldText); +} + +/*== Sidebar - Field Color ===================================================*/ +.sidebar-panel #search-box, +xul|search-textbox.tabsFilter { + --input-bgcolor: color-mix(in srgb, currentColor 30%, transparent); + + appearance: none !important; + padding: 5px 8px !important; + border: 1px solid var(--input-bgcolor) !important; + border-radius: 4px; + + background-color: var(--lwt-sidebar-background-color, Field) !important; + color: var(--lwt-sidebar-text-color, FieldText) !important; +} +.sidebar-panel:not([lwt-sidebar]) #search-box { + --input-bgcolor: ThreeDShadow; +} + +.sidebar-panel #search-box[focused="true"], +xul|search-textbox.tabsFilter[focused="true"] { + outline: 1px solid var(--input-bgcolor); +} +.sidebar-panel[lwt-sidebar] #search-box[focused="true"], +body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] { + --input-bgcolor: var(--lwt-sidebar-highlight-background-color, Highlight) !important; +} +.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], +body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { + border-color: -moz-accent-color !important; /* Hard Coded */ + outline-color: -moz-accent-color !important; +} + +/*= PopupAutoComplete ========================================================*/ +#PopupAutoComplete { + --panel-bgcolor: var(--arrowpanel-background, var(--in-content-button-background)); + + /* overwrite */ + --panel-border-radius: 4px !important; /* Original: 0 */ + --panel-border-color: var( + --arrowpanel-border-color, + var(--menu-border-color) + ) !important; /* Original: ThreeDShadow */ + + appearance: none !important; + background: transparent !important; + border: none !important; + clip-path: inset(0 round var(--panel-border-radius)); +} + +#PopupAutoComplete > richlistbox { + border-radius: var(--panel-border-radius) !important; + background-color: var(--panel-bgcolor) !important; /* Original: Field */ + color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */ +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + fill: GrayText !important; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { + --panel-border-color: var(--panel-bgcolor); + color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */ + background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */ + border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */ +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { + background-color: var( + --arrowpanel-dimmed-further, + hsla(0, 0%, 80%, 0.5) + ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ +} diff --git a/src/theme/_proton_color.scss b/src/theme/_proton_color.scss index 8161f4d..731843d 100644 --- a/src/theme/_proton_color.scss +++ b/src/theme/_proton_color.scss @@ -1,3 +1,4 @@ +/*= Default Colors - Hard Coded ==============================================*/ /* Based on chrome://global/skin/in-content/common.css */ :host, :root { diff --git a/src/userChrome.scss b/src/userChrome.scss index 6d0a40f..43c1fea 100644 --- a/src/userChrome.scss +++ b/src/userChrome.scss @@ -22,190 +22,8 @@ https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json */ -/*= Default Colors - Hard Coded ==============================================*/ @import "theme/proton_color"; - -/*== Menu Color ==============================================================*/ -html#main-window 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(--arrowpanel-color, var(--in-content-page-color)) !important; - --menu-background-color: var(--arrowpanel-background, var(--in-content-button-background)) !important; - - --menu-border-color: var( - --toolbarbutton-active-background, - var(--button-active-bgcolor, var(--card-outline-color)) - ) !important; - --menuitem-hover-background-color: var( - --toolbarbutton-hover-background, - var(--button-hover-bgcolor, var(--in-content-button-background-hover)) - ) !important; - - --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important; - --menuitem-disabled-hover-background-color: color-mix( - in srgb, - var(--menuitem-hover-background-color) 40%, - transparent - ) !important; -} - -// TODO: `OS` not covered case -@media not all and (-moz-gtk-csd-available) { - window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menupopup { - --panel-color: var(--lwt-sidebar-text-color, var(--menu-color)) !important; - --panel-background: var(--lwt-sidebar-background-color, var(--menu-background-color)) !important; - } - window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menu[_moz-menuactive="true"]:not([disabled="true"]), - window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] - menuitem[_moz-menuactive="true"]:not([disabled="true"]) { - --menuitem-hover-background-color: color-mix( - in srgb, - currentColor 17%, - transparent - ); /* Looks like toolbar button */ - /* or var(--lwt-sidebar-highlight-background-color) - If this value is used, unset is required in the default theme. - */ - } - - /* Fallback background */ - menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) { - background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important; - } -} - -/* Default theme color preservation */ -:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy */ -:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy */ -:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), -:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { - --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; - --arrowpanel-background: var( - --toolbar-bgcolor, - var(--in-content-button-background) - ) !important; /* --menu-background-color */ -} -@media not all and (-moz-gtk-csd-available) { - window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(249, 249, 251, 1);"] menupopup, /* Default Light Mode */ - window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] menupopup { - /* Default Dark Mode */ - --panel-color: var(--menu-color) !important; - --panel-background: var(--menu-background-color) !important; - } -} - -/*== Bookmark Popup Color ====================================================*/ -#editBMPanel_folderTree:-moz-lwtheme, -#editBMPanel_tagsSelector:-moz-lwtheme { - appearance: none !important; - border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; -} - -#editBMPanel_folderTree:-moz-lwtheme, -#editBMPanel_folderTree:-moz-lwtheme > treechildren, -#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image, -#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover), -#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected), -#editBMPanel_tagsSelector:-moz-lwtheme, -#editBMPanel_tagsSelector:-moz-lwtheme > richlistitem { - color: var(--lwt-text-color, fieldtext) !important; -} -#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) { - font-weight: 600 !important; -} - -#editBMPanel_folderTree:-moz-lwtheme > treechildren, -#editBMPanel_tagsSelector:-moz-lwtheme { - background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important; -} -#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover), -#editBMPanel_tagsSelector > richlistitem:hover { - background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important; -} -#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected), -#editBMPanel_tagsSelector > richlistitem[selected="true"] { - background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; -} - -#editBMPanel_namePicker, -#editBMPanel_tagsField { - --input-bgcolor: var(--arrowpanel-background, Field); - --input-color: var(--arrowpanel-color, FieldText); -} - -/*== Sidebar - Field Color ===================================================*/ -.sidebar-panel #search-box, -xul|search-textbox.tabsFilter { - --input-bgcolor: color-mix(in srgb, currentColor 30%, transparent); - - appearance: none !important; - padding: 5px 8px !important; - border: 1px solid var(--input-bgcolor) !important; - border-radius: 4px; - - background-color: var(--lwt-sidebar-background-color, Field) !important; - color: var(--lwt-sidebar-text-color, FieldText) !important; -} -.sidebar-panel:not([lwt-sidebar]) #search-box { - --input-bgcolor: ThreeDShadow; -} - -.sidebar-panel #search-box[focused="true"], -xul|search-textbox.tabsFilter[focused="true"] { - outline: 1px solid var(--input-bgcolor); -} -.sidebar-panel[lwt-sidebar] #search-box[focused="true"], -body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] { - --input-bgcolor: var(--lwt-sidebar-highlight-background-color, Highlight) !important; -} -.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], -body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { - border-color: -moz-accent-color !important; /* Hard Coded */ - outline-color: -moz-accent-color !important; -} - -/*= PopupAutoComplete ========================================================*/ -#PopupAutoComplete { - --panel-bgcolor: var(--arrowpanel-background, var(--in-content-button-background)); - - /* overwrite */ - --panel-border-radius: 4px !important; /* Original: 0 */ - --panel-border-color: var( - --arrowpanel-border-color, - var(--menu-border-color) - ) !important; /* Original: ThreeDShadow */ - - appearance: none !important; - background: transparent !important; - border: none !important; - clip-path: inset(0 round var(--panel-border-radius)); -} - -#PopupAutoComplete > richlistbox { - border-radius: var(--panel-border-radius) !important; - background-color: var(--panel-bgcolor) !important; /* Original: Field */ - color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */ -} - -#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { - fill: GrayText !important; -} - -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { - --panel-border-color: var(--panel-bgcolor); - color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */ - background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */ - border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */ -} - -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { - background-color: var( - --arrowpanel-dimmed-further, - hsla(0, 0%, 80%, 0.5) - ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ -} +@import "theme/fully_color"; /* Fully Dark Mode ************************************************************/ /*= Remove White Flash =======================================================*/