283 lines
11 KiB
SCSS
283 lines
11 KiB
SCSS
/*== Menu Color ==============================================================*/
|
|
html#main-window menupopup:not(.in-menulist) {
|
|
/* 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(
|
|
--panel-separator-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;
|
|
}
|
|
|
|
@include NonNativeMenu {
|
|
html#main-window menupopup {
|
|
&:not(.in-menulist) {
|
|
/* Above FF v105 #466 */
|
|
--panel-color: var(--menu-color) !important;
|
|
--panel-background: var(--menu-background-color) !important;
|
|
--panel-border-color: var(--menu-border-color) !important;
|
|
|
|
&:not([placespopup]) menuseparator,
|
|
&:not([placespopup]) menuseparator::before,
|
|
&[placespopup] menuseparator::before {
|
|
// #732
|
|
// toolbarbutton menupopup[placespopup] menuseparator::before
|
|
border-color: var(--menu-border-color) !important;
|
|
}
|
|
|
|
menu,
|
|
menuitem {
|
|
&[disabled="true"],
|
|
&[_moz-menuactive="true"][disabled="true"] {
|
|
color: var(--menu-disabled-color) !important;
|
|
}
|
|
|
|
&[_moz-menuactive="true"]:not([disabled="true"]) {
|
|
background-color: var(--menuitem-hover-background-color) !important;
|
|
color: var(--menu-color) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
|
|
> .menu-iconic-left > .menu-iconic-icon {
|
|
background-color: var(--menuitem-hover-background-color) !important;
|
|
}
|
|
|
|
&,
|
|
&[disabled="true"] > .menu-iconic-left > .menu-iconic-icon {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include Light {
|
|
:root[style*="background-noodles-right"] menupopup {
|
|
// Alphen Glow Theme - Like darkmode
|
|
--toolbarbutton-hover-background: rgba(232, 224, 255, 0.11999999731779099)!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.
|
|
*/
|
|
|
|
background-color: var(--menuitem-hover-background-color) !important;
|
|
}
|
|
|
|
/* Fallback background - Set to Legacy. It will be removed Next update
|
|
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, -moz-menuhover) !important;
|
|
}
|
|
}
|
|
|
|
/*== Info Bar Color ==========================================================*/
|
|
.container.infobar {
|
|
background-color: var(--urlbar-box-bgcolor) !important;
|
|
}
|
|
.notification-button {
|
|
background-color: var(--button-bgcolor) !important;
|
|
|
|
&:hover {
|
|
background-color: var(--button-hover-bgcolor) !important;
|
|
}
|
|
&:hover:active {
|
|
background-color: var(--button-active-bgcolor) !important;
|
|
}
|
|
}
|
|
|
|
html|button.ghost-button:not(.semi-transparent):enabled:hover {
|
|
background-color: var(--button-hover-bgcolor) !important;
|
|
}
|
|
html|button.ghost-button:not(.semi-transparent):enabled:hover:active {
|
|
background-color: var(--in-content-button-background-active) !important;
|
|
}
|
|
|
|
/*== Bookmark Popup Color ====================================================*/
|
|
@include lwtheme {
|
|
#editBMPanel_folderTree,
|
|
#editBMPanel_tagsSelector {
|
|
appearance: none !important;
|
|
border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree,
|
|
#editBMPanel_folderTree > treechildren,
|
|
#editBMPanel_folderTree > treechildren::-moz-tree-image,
|
|
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(hover),
|
|
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(selected),
|
|
#editBMPanel_tagsSelector,
|
|
#editBMPanel_tagsSelector > richlistitem {
|
|
color: var(--lwt-text-color, fieldtext) !important;
|
|
}
|
|
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(selected) {
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
#editBMPanel_folderTree > treechildren,
|
|
#editBMPanel_tagsSelector {
|
|
background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important;
|
|
}
|
|
}
|
|
:root#{$lwtheme} #editBMPanel_folderTree > treechildren::-moz-tree-row(hover),
|
|
#editBMPanel_tagsSelector > richlistitem:hover {
|
|
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important;
|
|
}
|
|
:root#{$lwtheme} #editBMPanel_folderTree > 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 ===================================================*/
|
|
html[lwt-sidebar]:not(#main-window) body {
|
|
background-color: var(--lwt-sidebar-background-color, Field) !important;
|
|
color: var(--lwt-sidebar-text-color, FieldText) !important;
|
|
}
|
|
|
|
.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;
|
|
|
|
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"] {
|
|
@include AccentColor {
|
|
border-color: $accentColor !important; /* Hard Coded */
|
|
outline-color: $accentColor !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));
|
|
|
|
> 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 */
|
|
}
|
|
}
|
|
.autocomplete-richlistitem:hover {
|
|
background-color: var(--arrowpanel-dimmed) !important;
|
|
}
|
|
|
|
#PopupAutoComplete > richlistbox > richlistitem {
|
|
&[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
|
|
&[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
|
|
&[originaltype="login"] > .ac-site-icon,
|
|
&[originaltype="insecureWarning"] > .ac-site-icon {
|
|
fill: GrayText !important;
|
|
}
|
|
|
|
&[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) */
|
|
}
|
|
|
|
&[originaltype="loginsFooter"]:hover,
|
|
&[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 */
|
|
}
|
|
|
|
&[originaltype="insecureWarning"] {
|
|
background-color: var(--panel-bgcolor) !important; /* Original: var(--arrowpanel-dimmed) */
|
|
&:hover {
|
|
background-color: var(--arrowpanel-dimmed, hsla(0deg, 0%, 80%, 0.35)) !important;
|
|
}
|
|
|
|
> .ac-title {
|
|
color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: var(--grey-60) */
|
|
}
|
|
}
|
|
}
|