mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-01 06:50:33 -08:00
Clean: SASS - Separated to fully_color.scss
This commit is contained in:
alstjr7375
parent
f1f0205081
commit
111c05f1d9
3 changed files with 183 additions and 183 deletions
181
src/theme/_fully_color.scss
Normal file
181
src/theme/_fully_color.scss
Normal file
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
/*= Default Colors - Hard Coded ==============================================*/
|
||||
/* Based on chrome://global/skin/in-content/common.css */
|
||||
:host,
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -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 =======================================================*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue