diff --git a/CREDITS b/CREDITS index 529b09e..2c8e96d 100644 --- a/CREDITS +++ b/CREDITS @@ -119,6 +119,9 @@ N: Ajith-stark E: ajith.kum.12342@gmail.com W: https://github.com/Ajith-stark +N: Andmagdo +W: https://github.com/andmagdo + N: badprogramshere W: https://github.com/badprogramshere diff --git a/src/icons/panel.scss b/src/icons/panel.scss index 7244bdb..4b67137 100644 --- a/src/icons/panel.scss +++ b/src/icons/panel.scss @@ -24,8 +24,27 @@ background-image: var(--avatar-image-url) !important; } -#appMenu-new-tab-button2 { - list-style-image: url("chrome://browser/skin/new-tab.svg"); +@include Option("userChrome.panel.proton") { + #appMenu-new-tab-button2 { + list-style-image: url("chrome://browser/skin/new-tab.svg"); + } +} +@include Option("userChrome.panel.photon") { + #appMenu-new-tab-button2, /* Seperate */ + #appMenu-passwords-button, /* Seperate */ + #appMenu-extensions-themes-button, + #appMenu-save-file-button2, /* Seperate */ + #appMenu-find-button2, + #appMenu-more-button2, /* Seperate */ + #appMenu-help-button2, + #appMenu-quit-button2 /* Seperate */ { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + padding-top: var(--arrowpanel-menuitemblank-padding) !important; + padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; + } + #appMenu-zoom-controls2 { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + } } #appMenu-new-window-button2 { list-style-image: url("chrome://browser/skin/window.svg"); @@ -43,38 +62,44 @@ #appMenu-downloads-button { list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } -#appMenu-passwords-button { - list-style-image: url("chrome://browser/skin/login.svg"); -} -#appMenu-extensions-themes-button { - list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +@supports -moz-bool-pref("userChrome.panel.proton") { + #appMenu-passwords-button { + list-style-image: url("chrome://browser/skin/login.svg"); + } + #appMenu-extensions-themes-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); + } } #appMenu-print-button2 { list-style-image: url("chrome://global/skin/icons/print.svg"); } -#appMenu-save-file-button2 { - list-style-image: url("chrome://browser/skin/save.svg"); -} -#appMenu-find-button2 { - list-style-image: url("chrome://global/skin/icons/search-glass.svg"); -} -#appMenu-zoom-controls2::before { - content: url("./icons/screenshot.svg"); +@supports -moz-bool-pref("userChrome.panel.proton") { + #appMenu-save-file-button2 { + list-style-image: url("chrome://browser/skin/save.svg"); + } + #appMenu-find-button2 { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } + #appMenu-zoom-controls2::before { + content: url("./icons/screenshot.svg"); + } } #appMenu-settings-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); } -#appMenu-more-button2 { - list-style-image: url("chrome://browser/skin/ion.svg"); -} -#appMenu-help-button2 { - list-style-image: url("chrome://global/skin/icons/help.svg"); -} +@supports -moz-bool-pref("userChrome.panel.proton") { + #appMenu-more-button2 { + list-style-image: url("chrome://browser/skin/ion.svg"); + } + #appMenu-help-button2 { + list-style-image: url("chrome://global/skin/icons/help.svg"); + } -#appMenu-quit-button2 { - list-style-image: url("./icons/quit.svg"); + #appMenu-quit-button2 { + list-style-image: url("./icons/quit.svg"); + } } /*= Panel - Account ==========================================================*/ @@ -300,7 +325,7 @@ panelMenuBookmarkThisPage[starred] { list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } -/*= Panel - Downloads ======================================================*/ +/*= Panel - Downloads ========================================================*/ #downloadsHistory { list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 4e2e086..092a0ee 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -1,8 +1,20 @@ /*= Root - Reduce Padding ====================================================*/ +@include Option("userChrome.tab.original") { + :root { + /* Tab Bar */ + --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ + --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ + } +} +@include Option("userChrome.tab.photon") { + :root { + --proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */ + --tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */ + --tab-border-radius: 0px !important; /* Original: 4px */ + } +} :root { /* Tab Bar */ - --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ - --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ @@ -30,6 +42,16 @@ --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */ } +/* Fix Tab bar button radious */ +@supports -moz-bool-pref("userChrome.tab.photon") { + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack, + .tab-close-button { + --tab-border-radius: 4px !important; + } +} + /*= Tab Bar - Reduce Width, Show more tabs ===================================*/ /* for First Tab Space */ :root { @@ -63,10 +85,19 @@ padding-right: var(--newtab-button-width-padding) !important; } -#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab[first-visible-unpinned-tab] { - margin-inline-start: 1px !important; +@include Option("userChrome.tab.shareProton") { + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 1px !important; + } +} +@include Option("userChrome.tab.photon") { + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 0 !important; + } } :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { @@ -88,20 +119,33 @@ } /* Tab - Max Size */ -:root { - --tab-max-width: 240px; +@include Option("userChrome.tab.shareProton") { + :root { + --tab-max-width: 240px; + } +} +@include Option("userChrome.tab.photon") { + :root { + --tab-max-width: 225px; + } } .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } /* neighbouring tabs should "pinch" together */ -.tabbrowser-tab { - padding-inline: 1px !important; +@include Option("userChrome.tab.shareProton") { + .tabbrowser-tab { + padding-inline: 1px !important; + } + .tabbrowser-tab:not([last-visible-tab]) { + margin-inline-end: -0.5px !important; + } } - -.tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -0.5px !important; +@include Option("userChrome.tab.photon") { + .tabbrowser-tab { + padding-inline: 0 !important; + } } /*= Tab Bar - Reduce Height, Show more contents ==============================*/ @@ -118,22 +162,65 @@ } /* Toolbar Height */ -:root:not([uidensity="touch"]) #TabsToolbar { - --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ +@include Option("userChrome.tab.shareProton") { + :root:not([uidensity="touch"]) #TabsToolbar { + --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ + } + + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } } -.toolbar-items, -.tabbrowser-tab { - --tabbar-max-height: 38px; - max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); +@include Option("userChrome.tab.photon") { + #TabsToolbar { + --tab-min-height: 33px !important; + --toolbarbutton-inner-padding: unset !important; + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; + } + :root[uidensity="touch"] #TabsToolbar { + --tab-min-height: 41px !important; + } + #tabbrowser-tabs, + #tabbrowser-arrowscrollbox, + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + min-height: var(--tab-min-height) !important; + } + + /* Top Margin */ + .tab-background, + .tab-content { + margin-top: 0 !important; + } } -:root[uidensity="compact"] .toolbar-items, -:root[uidensity="compact"] .tabbrowser-tab { - --tabbar-max-height: 36px; + +@include Option("userChrome.tab.original") { + .toolbar-items, + .tabbrowser-tab { + --tabbar-max-height: 38px; + max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); + } + :root[uidensity="compact"] .toolbar-items, + :root[uidensity="compact"] .tabbrowser-tab { + --tabbar-max-height: 36px; + } + :root[uidensity="touch"] .toolbar-items, + :root[uidensity="touch"] .tabbrowser-tab { + --tabbar-max-height: 45px; + } } -:root[uidensity="touch"] .toolbar-items, -:root[uidensity="touch"] .tabbrowser-tab { - --tabbar-max-height: 45px; +@include Option("userChrome.tab.proton") { + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } } /* Scroll Button - Size Fix */ diff --git a/src/panel/_icon_padding.scss b/src/panel/_icon_padding.scss index c6e07a5..4224e1f 100644 --- a/src/panel/_icon_padding.scss +++ b/src/panel/_icon_padding.scss @@ -4,6 +4,34 @@ --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; } +@supports -moz-bool-pref("userChrome.panel.photon") { + :root { + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } + :root[uidensity="compact"] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px); + } + :root[uidensity="touch"] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); + } + :root { + /* Global */ + --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2); + + /* General Panel */ + --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; + + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc( + var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding) + ); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } +} + #downloadsHistory .button-text, .subviewbutton > .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menuicon-padding) !important; diff --git a/src/tabbar/_container_tab.scss b/src/tabbar/_container_tab.scss index f534ba0..9b271c3 100644 --- a/src/tabbar/_container_tab.scss +++ b/src/tabbar/_container_tab.scss @@ -1,5 +1,7 @@ -.tab-context-line { - display: none; +@include Option("userChrome.tab.shareProton") { + .tab-context-line { + display: none; + } } .tab-content:not([titlechanged])::before { diff --git a/src/tabbar/_divide_line.scss b/src/tabbar/_divide_line.scss deleted file mode 100644 index d848137..0000000 --- a/src/tabbar/_divide_line.scss +++ /dev/null @@ -1,62 +0,0 @@ -#tabbrowser-arrowscrollbox { - position: absolute; -} - -.tab-background::before, -#tabs-newtab-button::before { - /* Box Model */ - content: ""; - display: block; - position: absolute; - - /* Position */ - top: 50%; - transform: translateX(-2.5px) translateY(calc(-50% + 1px)); - - /* Bar shape */ - width: 1px; - height: 20px; - - /* Bar Color */ - opacity: 0; - background-color: var(--toolbarseparator-color); -} - -.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before, -#tabs-newtab-button:not(:hover, [open])::before { - opacity: var(--tab-separator-opacity); -} - -#navigator-toolbox:not([movingtab]) - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) - + .tabbrowser-tab - .tab-background::before, -#navigator-toolbox:not([movingtab]) - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) - ~ .tabbrowser-tab[afterhovered] - .tab-background::before, -#navigator-toolbox:not([movingtab]) - .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) - ~ #tabs-newtab-button::before, -#navigator-toolbox:not([movingtab]) - .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) - .tab-background::before, -#navigator-toolbox:not([movingtab]) - #tabbrowser-arrowscrollbox[overflowing] - tab.tabbrowser-tab[first-visible-unpinned-tab] - .tab-background::before { - opacity: 0 !important; -} - -/* Animate */ -@media (prefers-reduced-motion: no-preference) { - .tab-background::before, - #tabs-newtab-button::before { - transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ - } -} - -/* Latest Tab & New tab margin */ -#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { - margin-inline-end: 1px !important; -} diff --git a/src/tabbar/_newtab_button.scss b/src/tabbar/_newtab_button.scss new file mode 100644 index 0000000..6bb2cf1 --- /dev/null +++ b/src/tabbar/_newtab_button.scss @@ -0,0 +1,14 @@ +/*= New tab button - Looks like tab ==========================================*/ +@include Option("userChrome.tab.original") { + @import "newtab_button/looks_like_tab"; +} + +/*= New tab button - Smaller button ==========================================*/ +@include Option("userChrome.tab.photon") { + @import "newtab_button/smaller_button"; +} + +/*= New tab button - Proton like button ======================================*/ +@include Option("userChrome.tab.proton") { + @import "newtab_button/proton_like_button"; +} diff --git a/src/tabbar/_selected_tab.scss b/src/tabbar/_selected_tab.scss index e6459a3..c397d18 100644 --- a/src/tabbar/_selected_tab.scss +++ b/src/tabbar/_selected_tab.scss @@ -1,8 +1,22 @@ /*= Selected Tab - Color like toolbar ========================================*/ -@import "selected_tab/color_like_toolbar"; +@include Option("userChrome.tab.connect_to_window") { + @import "selected_tab/color_like_toolbar"; +} + +/*= Multi Selected Color - More Contrast =====================================*/ +@import "selected_tab/multi_selected"; /*= Selected Tab - Box Shadow ================================================*/ -@import "selected_tab/box_shadow"; +@include Option("userChrome.tab.original") { + @import "selected_tab/box_shadow"; +} /*= Selected Tab - Bottom Rounded Corner =====================================*/ -@import "selected_tab/bottom_rounded_corner"; +@include Option("userChrome.tab.original") { + @import "selected_tab/bottom_rounded_corner"; +} + +/*= Selected Tab - Photon like contextline ===================================*/ +@include Option("userChrome.tab.photon") { + @import "selected_tab/photon_like_contextline"; +} diff --git a/src/tabbar/_unselected_tab.scss b/src/tabbar/_unselected_tab.scss new file mode 100644 index 0000000..bc29bc2 --- /dev/null +++ b/src/tabbar/_unselected_tab.scss @@ -0,0 +1,7 @@ +/*= Unselected Tab - Dynamic Separator =======================================*/ +@import "unselected_tab/dynamic_separator"; + +/*= Unselected Tab - Static Separator ========================================*/ +@include Option("userChrome.tab.photon") { + @import "unselected_tab/static_separator"; +} diff --git a/src/tabbar/_newtab_looks_like_tab.scss b/src/tabbar/newtab_button/_looks_like_tab.scss similarity index 100% rename from src/tabbar/_newtab_looks_like_tab.scss rename to src/tabbar/newtab_button/_looks_like_tab.scss diff --git a/src/tabbar/newtab_button/_proton_like_button.scss b/src/tabbar/newtab_button/_proton_like_button.scss new file mode 100644 index 0000000..3fd1017 --- /dev/null +++ b/src/tabbar/newtab_button/_proton_like_button.scss @@ -0,0 +1,10 @@ +:root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); +} + +:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 2px; +} +:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; +} diff --git a/src/tabbar/newtab_button/_smaller_button.scss b/src/tabbar/newtab_button/_smaller_button.scss new file mode 100644 index 0000000..e992373 --- /dev/null +++ b/src/tabbar/newtab_button/_smaller_button.scss @@ -0,0 +1,12 @@ +#tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; + + /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */ + --toolbarbutton-inner-padding: 6px; +} +:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: 4px; /* Photon: 6px */ +} +:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ +} diff --git a/src/tabbar/selected_tab/_color_like_toolbar.scss b/src/tabbar/selected_tab/_color_like_toolbar.scss index 2e646c0..4fc84ca 100644 --- a/src/tabbar/selected_tab/_color_like_toolbar.scss +++ b/src/tabbar/selected_tab/_color_like_toolbar.scss @@ -12,23 +12,3 @@ background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; } - -/* Multi Selected Color */ -#tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[multiselected]:not([selected]):-moz-lwtheme { - background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; -} - -.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { - background: color-mix(in srgb, currentColor 65%, transparent); - opacity: 0.3; -} -#TabsToolbar[brighttext] - .tab-background[multiselected="true"]:not([selected="true"]) - > .tab-loading-burst:not([bursting]) { - opacity: 0.15; -} diff --git a/src/tabbar/selected_tab/_multi_selected.scss b/src/tabbar/selected_tab/_multi_selected.scss new file mode 100644 index 0000000..fa8d059 --- /dev/null +++ b/src/tabbar/selected_tab/_multi_selected.scss @@ -0,0 +1,18 @@ + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]):-moz-lwtheme { + background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; +} + +.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { + background: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; +} +#TabsToolbar[brighttext] + .tab-background[multiselected="true"]:not([selected="true"]) + > .tab-loading-burst:not([bursting]) { + opacity: 0.15; +} diff --git a/src/tabbar/selected_tab/_photon_like_contextline.scss b/src/tabbar/selected_tab/_photon_like_contextline.scss new file mode 100644 index 0000000..3535d2b --- /dev/null +++ b/src/tabbar/selected_tab/_photon_like_contextline.scss @@ -0,0 +1,77 @@ +:root[lwtheme-mozlightdark] #tabbrowser-tabs { + --tab-line-color: rgb(10, 132, 255) !important; +} +@media (-moz-gtk-csd-available) { + :root[lwtheme-mozlightdark]:not(:-moz-lwtheme) #tabbrowser-tabs { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } +} + +.tab-context-line { + display: -moz-inline-box !important; + height: 2px !important; + border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; +} + +.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { + /* Photon like color + Default: var(--tab-line-color, rgb(10, 132, 255)) + Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */ + background-color: var(--tab-line-color, rgb(10, 132, 255)) !important; +} + +.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { + background-color: rgba(0, 0, 0, 0.2) !important; + opacity: 1 !important; + transform: none !important; +} +#TabsToolbar[brighttext] + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line { + background-color: rgba(255, 255, 255, 0.2) !important; +} + +/* Prevent identitiy color flashing */ +.tabbrowser-tab[usercontextid] .tab-context-line { + --identity-icon-color: none; +} +:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, +:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color) !important; +} + +/* Animation */ +.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { + opacity: 0 !important; + transform: scaleX(0) !important; +} +@media (prefers-reduced-motion: no-preference) { + .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { + transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */ + } +} + +/* Remove side's background color border */ +#TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + --tabs-border-color: rgba(0, 0, 0, 0.3) !important; + box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */ +} +#TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ +} + +/* Container Tab */ +.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + margin: unset !important; +} diff --git a/src/tabbar/unselected_tab/_dynamic_separator.scss b/src/tabbar/unselected_tab/_dynamic_separator.scss new file mode 100644 index 0000000..bad5fa9 --- /dev/null +++ b/src/tabbar/unselected_tab/_dynamic_separator.scss @@ -0,0 +1,139 @@ +@include Option("userChrome.tab.original") { + #tabbrowser-arrowscrollbox { + position: absolute; + } +} + +@include Option("userChrome.tab.original") { + .tab-background::before, + #tabs-newtab-button::before { + /* Box Model */ + content: ""; + display: block; + position: absolute; + + /* Position */ + top: 50%; + transform: translateX(-2.5px) translateY(calc(-50% + 1px)); + + /* Bar shape */ + width: 1px; + height: 20px; + + /* Bar Color */ + opacity: 0; + background-color: var(--toolbarseparator-color); + } +} + +@include Option("userChrome.tab.proton") { + .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + /* Box Model */ + content: ""; + display: block; + position: absolute; + top: 50%; + + /* Bar shape */ + width: 1px; + height: 20px; + + /* Bar Color */ + opacity: 0; + background-color: var(--toolbarseparator-color); + } +} + +@include Option("userChrome.tab.proton") { + .tab-background::before { + transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important; + } + .tabbrowser-tab[last-visible-tab] .tab-background::after { + right: 0; + transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important; + } +} + +@include Option("userChrome.tab.shareProton") { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { + opacity: var(--tab-separator-opacity); + } +} +@include Option("userChrome.tab.original") { + #tabs-newtab-button:not(:hover, [open])::before { + opacity: var(--tab-separator-opacity); + } +} +@include Option("userChrome.tab.proton") { + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + opacity: var(--tab-separator-opacity); + } +} + +@include Option("userChrome.tab.shareProton") { + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) + .tab-background::before, + #navigator-toolbox:not([movingtab]) + #tabbrowser-arrowscrollbox[overflowing] + tab.tabbrowser-tab[first-visible-unpinned-tab] + .tab-background::before { + opacity: 0 !important; + } +} +@include Option("userChrome.tab.original") { + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + ~ .tabbrowser-tab[afterhovered] + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + ~ #tabs-newtab-button::before { + opacity: 0 !important; + } +} +@include Option("userChrome.tab.proton") { + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab:not([visuallyselected]) + .tab-background::before { + opacity: 0 !important; + } +} + +/* Animate */ +@media (prefers-reduced-motion: no-preference) { + @include Option("userChrome.tab.shareProton") { + .tab-background::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } + @include Option("userChrome.tab.original") { + #tabs-newtab-button::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } + @include Option("userChrome.tab.proton") { + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } +} + +/* Latest Tab & New tab margin */ +@include Option("userChrome.tab.shareProton") { + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { + margin-inline-end: 1px !important; + } +} diff --git a/src/tabbar/unselected_tab/_static_separator.scss b/src/tabbar/unselected_tab/_static_separator.scss new file mode 100644 index 0000000..bfd49d3 --- /dev/null +++ b/src/tabbar/unselected_tab/_static_separator.scss @@ -0,0 +1,37 @@ +.tabbrowser-tab[first-visible-tab]::before, +.tabbrowser-tab::after, +#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { + content: ""; + display: block; +} +.tabbrowser-tab::before, +.tabbrowser-tab::after { + --tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor); + border-left: var(--tab-divide-line) !important; + margin-block: 5px 4px !important; + opacity: 0.3 !important; +} +.tabbrowser-tab::before { + margin-inline-start: -1px !important; +} + +.tabbrowser-tab[first-visible-tab]::before, +:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, +.tabbrowser-tab:hover::after, +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, +.tabbrowser-tab[multiselected]::after, +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { + margin-top: var(--tabs-top-border-width) !important; + margin-bottom: 0 !important; +} + +/* Selected - Hide */ +.tabbrowser-tab[first-visible-tab][visuallyselected]::before, +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, +#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, +.tabbrowser-tab[visuallyselected]::after { + border-color: var(--tabs-border-color) !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + opacity: 1 !important; +} diff --git a/src/theme/_theme_compatibility.scss b/src/theme/_theme_compatibility.scss index 4980ff1..9aed0fe 100644 --- a/src/theme/_theme_compatibility.scss +++ b/src/theme/_theme_compatibility.scss @@ -26,22 +26,25 @@ } /*= Remove Tab Border ========================================================*/ -/* Light Theme */ -#TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ -} +@include Option("userChrome.tab.connect_to_window") { + /* TARGET: original, photon */ + /* Light Theme */ + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ + } -/* Dark Theme */ -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ + /* Dark Theme */ + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ + } } /*= Light Weight Theme =======================================================*/ diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index 6b33150..452c789 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -160,6 +160,19 @@ --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important; } } + /*- Proton Tab Selected ----------------------------------------------------*/ + @include Option("userChrome.tab.proton") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + } /*- Toolbar ----------------------------------------------------------------*/ :root:not(:-moz-lwtheme) #navigator-toolbox, @@ -218,19 +231,21 @@ } /* Hard Coded */ - :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ - #tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[selected="true"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] - #tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[selected="true"] { - background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + @include Option("userChrome.tab.connect_to_window") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"] { + background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } } :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss index 086bf1f..a8260f7 100644 --- a/src/theme/system_default_theme/_win10.scss +++ b/src/theme/system_default_theme/_win10.scss @@ -189,6 +189,20 @@ --panel-separator-color: var(--win-border-color) !important; } + /*- Proton Tab Selected ----------------------------------------------------*/ + @include Option($tabProton) { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; + } + } + /*- Menu -------------------------------------------------------------------*/ html#main-window menupopup:not(:-moz-lwtheme) { --menu-color: var(--win-text-color) !important; diff --git a/src/userChrome.scss b/src/userChrome.scss index 8b648b5..96468b1 100644 --- a/src/userChrome.scss +++ b/src/userChrome.scss @@ -1,4 +1,5 @@ @use "utils/os" as *; +@use "utils/option" as *; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace html "http://www.w3.org/1999/xhtml"; @@ -38,16 +39,18 @@ @import "padding/index"; /** Tab Bar - Connect to window ***********************************************/ -@import "tabbar/connect_to_window"; +@include Option("userChrome.tab.connect_to_window") { + @import "tabbar/connect_to_window"; +} /** Selected Tab **************************************************************/ @import "tabbar/selected_tab"; /** Unselected Tab - Divide line **********************************************/ -@import "tabbar/divide_line"; +@import "tabbar/unselected_tab"; -/* New tab button - Looks like tab ********************************************/ -@import "tabbar/newtab_looks_like_tab"; +/* New tab button *************************************************************/ +@import "tabbar/newtab_button"; /* Unloaded Tab - Contents Opacity ********************************************/ @import "tabbar/unload_tab"; diff --git a/src/utils/_option.scss b/src/utils/_option.scss new file mode 100644 index 0000000..620f180 --- /dev/null +++ b/src/utils/_option.scss @@ -0,0 +1,7 @@ +$tabProton: "userChrome.tab.proton"; + +@mixin Option($optionName) { + @supports -moz-bool-pref("#{$optionName}") { + @content; + } +} diff --git a/user.js b/user.js index e526e39..fe833a2 100644 --- a/user.js +++ b/user.js @@ -1,4 +1,4 @@ -// ** Theme Related Options **************************************************** +// ** Theme Default Options **************************************************** // userchrome.css usercontent.css activate user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); @@ -26,6 +26,18 @@ user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar" // Browser Theme Based Scheme - Will be activate 95 Above // user_pref("layout.css.prefers-color-scheme.content-override", 3); +// ** Theme Related Options **************************************************** +user_pref("userChrome.tab.sharePhoton", true); // Original, Photon +user_pref("userChrome.tab.shareProton", true); // Original, Proton + +user_pref("userChrome.tab.original", true); // Original +// user_pref("userChrome.tab.photon", true); // Photon +// user_pref("userChrome.tab.proton", true); // Proton +user_pref("userChrome.tab.connect_to_window", true); // Original, Photon + +user_pref("userChrome.panel.proton", true); // Original, Proton +// user_pref("userChrome.panel.photon", true); // Photon + // ** Useful Options *********************************************************** // Integrated calculator at urlbar user_pref("browser.urlbar.suggest.calculator", true); diff --git a/userChrome.css b/userChrome.css new file mode 100644 index 0000000..3ec021b --- /dev/null +++ b/userChrome.css @@ -0,0 +1,6149 @@ +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +@namespace html "http://www.w3.org/1999/xhtml"; + +/** Default Thme - Contrast ***************************************************/ +/*= Lightmode - Color darker =================================================*/ +:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), /* Legacy */ +:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ +} +@media (-moz-os-version: windows-win10) { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, /* Legacy */ + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + background-color: var(--lwt-accent-color) !important; + } +} +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, /* Legacy */ + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + background-color: var(--lwt-accent-color) !important; + } +} + +/*= Darkmode - Color lighter =================================================*/ +:root[lwtheme-mozlightdark][lwthemetextcolor="bright"], /* Legacy */ +:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ +} + +/** Theme - Compatibility *****************************************************/ +/*= Hotfix #98 ===============================================================*/ +/* Hidden Tab Panel Padding */ +#allTabsMenu-hiddenTabsView .all-tabs-item { + margin-inline: 8px; + border-radius: 4px; +} + +/*= Identity Popup Icon Crop =================================================*/ +.identity-popup-security-connection.identity-button { + padding-block: 1px !important; +} + +/*= Zoom in button's plus icon horizontal rate ===============================*/ +#customization-palette-container #zoom-in-button > .toolbarbutton-icon, +#customization-panel-container #zoom-in-button > .toolbarbutton-icon, +#widget-overflow-mainView #zoom-in-button > .toolbarbutton-icon { + padding-inline-start: 0px !important; +} + +/*= Icon Fill Color ==========================================================*/ +:root:-moz-lwtheme { + /* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme + Default Color: rgb(0,97,224) -> rgb(0, 120, 215) for more light + */ + --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215)); +} + +/*= Remove Tab Border ========================================================*/ +@supports -moz-bool-pref("userChrome.tab.connect_to_window") { + /* TARGET: original, photon */ + /* Light Theme */ + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ + } + + /* Dark Theme */ + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ + } +} + +/*= Light Weight Theme =======================================================*/ +/* Header Image */ +:root[lwtheme-image] { + background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ + background-repeat: no-repeat !important; + background-position: right top !important; +} +@media (min-width: 2500px) { + :root[lwtheme-image] { + background-size: contain; + } +} +:root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { + background-image: var( + --lwt-additional-images + ) !important; /* Original: var(--lwt-header-image), var(--lwt-additional-images); */ + background-repeat: var(--lwt-background-tiling) !important; + background-position: var(--lwt-background-alignment) !important; + background-color: unset !important; /* Original: var(--lwt-accent-color) */ +} + +/* Navbar Border */ +#navigator-toolbox:-moz-lwtheme { + --tabs-border-color: rgba(0, 0, 0, 0.3); +} + +/** OS - Compatibility ********************************************************/ +/*= Windows 7, 8 - Tab Bar Background *****************************************/ +@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + /* Header Color */ + :root:not([lwtheme-image]):-moz-lwtheme { + background-color: var(--lwt-accent-color) !important; + } +} +@media (-moz-os-version: windows-win7) { + #TabsToolbar:-moz-lwtheme { + color: var(--lwt-text-color) !important; + } + + /* Remove Aero */ + #TabsToolbar { + /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */ + background-image: unset !important; + } +} +@media (-moz-os-version: windows-win8) { + #navigator-toolbox:-moz-lwtheme { + color: var(--lwt-text-color) !important; + } +} + +/*= Windows 7, 8 - Menu Active Color =========================================*/ +@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + menupopup > menu, + menupopup > menuitem, + #context-navigation > menuitem { + border: 1px solid transparent; /* Need reduce 2px at menu */ + } + + #main-menubar > menu[open="true"], + #main-menubar > menu[_moz-menuactive="true"] { + background-color: -moz-menuhover !important; /* Make to original */ + } + :root:-moz-lwtheme #main-menubar > menu[open="true"], + :root:-moz-lwtheme #main-menubar > menu[_moz-menuactive="true"] { + color: inherit !important; /* Original: -moz-menubarhovertext */ + background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */ + } + + #PlacesToolbar menu, + #PlacesToolbar menuitem, + #BMB_bookmarksPopup menu, + #BMB_bookmarksPopup menuitem { + border: none !important; /* Remove border */ + } + #PlacesToolbar menu:not([disabled], :active)[_moz-menuactive="true"], + #PlacesToolbar menuitem:not([disabled], :active)[_moz-menuactive="true"], + #BMB_bookmarksPopup menu:not([disabled], :active)[_moz-menuactive="true"], + #BMB_bookmarksPopup menuitem:not([disabled], :active)[_moz-menuactive="true"] { + background-color: var(--button-hover-bgcolor) !important; + } +} + +@media (-moz-os-version: windows-win7) { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { + background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important; + border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important; + } + menu[_moz-menuactive="true"][disabled="disabled"], + menuitem[_moz-menuactive="true"][disabled="true"] { + background-color: color-mix(in srgb, currentColor 5%, transparent) !important; + border-color: color-mix(in srgb, currentColor 60%, transparent) !important; + } + + /* Remove text shadow */ + :root:-moz-lwtheme #toolbar-menubar { + text-shadow: unset !important; + /* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */ + } + + /* Remove Color */ + :root:-moz-lwtheme #main-menubar:not(:-moz-window-inactive) { + background-color: unset !important; /* Original: rgba(255, 255, 255, .5) */ + color: unset !important; /* Original: black */ + } +} +@media (-moz-os-version: windows-win8) { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { + background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important; + border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important; + } + menu[_moz-menuactive="true"][disabled="disabled"], + menuitem[_moz-menuactive="true"][disabled="true"] { + background-color: color-mix(in srgb, currentColor 17%, transparent) !important; + border-color: color-mix(in srgb, currentColor 80%, transparent) !important; + } +} + +@media (-moz-gtk-csd-available) { + /*= Linux - Global Menubar Active Color ====================================*/ + #main-menubar > menu[open="true"], + #main-menubar > menu[_moz-menuactive="true"] { + color: inherit !important; /* Original: -moz-menubarhovertext */ + background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */ + } + + /*= Linux - Titlebar button at lwtheme =====================================*/ + .titlebar-button:-moz-lwtheme { + appearance: auto !important; + } + .titlebar-min:-moz-lwtheme, + .titlebar-max:-moz-lwtheme, + .titlebar-restore:-moz-lwtheme, + .titlebar-close:-moz-lwtheme { + list-style-image: none !important; + } + .titlebar-button:-moz-lwtheme:hover, + .titlebar-button:-moz-lwtheme:hover:active { + background-color: unset !important; + color: unset !important; + } +} + +/*= Linux - Light System Default Theme's Selected Tab ========================*/ +@media (-moz-gtk-csd-available) and (-moz-toolbar-prefers-color-scheme: light), + (-moz-gtk-csd-available) and (prefers-color-scheme: light) { + /* Because of + #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background { + border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); + box-shadow: 0 0 4px rgba(128,128,142,0.5); + } + */ + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:not(:-moz-lwtheme) { + box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important; + } + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:not(:-moz-lwtheme) { + box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important; + } +} + +/** System Default Theme ******************************************************/ +/*= Common - URL Bar focus color =============================================*/ +@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { + /* URL Bar */ + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { + --focus-outline-color: -moz-accent-color !important; + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { + border-color: color-mix( + in srgb, + -moz-accent-color 50%, + transparent + ) !important; /* Like: --toolbar-field-focus-border-color */ + } +} + +/*= Windows7 - Aero Based Theme ==============================================*/ +@media (-moz-os-version: windows-win7) { + #TabsToolbar:not(:-moz-lwtheme) { + --background-color: rgb(229, 229, 235); + } + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { + color: var(--background-color); + background-color: color-mix(in srgb, currentColor 60%, transparent); + } + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab:hover + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { + background-color: color-mix( + in srgb, + currentColor 85%, + transparent + ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ + } + #scrollbutton-up:not(:-moz-lwtheme), + #scrollbutton-down:not(:-moz-lwtheme), + #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack, + #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon { + color: var(--background-color) !important; + background-color: color-mix(in srgb, currentColor 50%, transparent); + } +} + +/*= Windows10 - UWP like color ===============================================*/ +@media (-moz-os-version: windows-win10) { + :root:not(:-moz-lwtheme) { + --win-text-color: rgba(0, 0, 0); + --win-bgcolor: rgb(204, 204, 204); + --win-disabled-color: rgb(145, 145, 145); /* also button-active-color */ + --win-disabled-bgcolor: transparent; + --win-hover-bgcolor: rgb(218, 218, 218); + --win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */ + --win-field-bgcolor: #ffffff; + --win-component-bgcolor: #f2f2f2; + --win-border-color: #8a8a8a; + --win-tab-seperator-color: #a3a3a3; + --win-sidebar-bgcolor: #e6e6e6; + --win-sidebar-hover-bgcolor: #cfcfcf; + --win-sidebar-button-hover-bgcolor: #b8b8b8; + --win-sidebar-button-hover-active-bgcolor: #a3a3a3; + --win-button-border: #747474; + --win-button-hover-bgcolor: rgba(145, 145, 145, 0.66); + --win-shorcut-text-color: #757575; + --win-error-color: #b31616; + --win-red-border-color: #ff4343; + --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color); + --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color); + --win-accent-active-color: -moz-accent-color; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-text-color: #ffffff; + --win-bgcolor: #2b2b2b; + --win-disabled-color: #747474; /* also button-active-color */ + --win-disabled-bgcolor: transparent; + --win-hover-bgcolor: #2e2e2e; + --win-hover-active-bgcolor: #454545; /* also button-bgcolor */ + --win-field-bgcolor: #373737; + --win-component-bgcolor: #171717; + --win-border-color: #5b5b5b; + --win-tab-seperator-color: #555555; + --win-sidebar-bgcolor: #1f1f1f; + --win-sidebar-hover-bgcolor: #353535; + --win-sidebar-button-hover-bgcolor: #353535; + --win-sidebar-button-hover-active-bgcolor: #4c4c4c; + --win-button-border: #8f8f8f; + --win-button-hover-bgcolor: rgba(116, 116, 116, 0.66); + --win-shorcut-text-color: #adadad; + --win-error-color: #ffb900; + --win-red-border-color: #ff4343; + --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color); + --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color); + --win-accent-active-color: -moz-accent-color; + } + } + + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + /* Text, Icon Color */ + --menu-color: var(--win-text-color) !important; + --lwt-text-color: var(--win-text-color) !important; + --button-color: var(--win-text-color) !important; + --input-color: var(--win-text-color) !important; + --toolbar-color: var(--win-text-color) !important; + --toolbar-non-lwt-textcolor: var(--win-text-color) !important; + --toolbarbutton-icon-fill: var(--win-text-color) !important; + --toolbar-field-focus-color: var(--win-text-color) !important; + --urlbar-popup-action-color: var(--win-text-color) !important; + --toolbar-field-color: var(--win-text-color) !important; + --autocomplete-popup-highlight-color: var(--win-text-color) !important; + --tab-icon-overlay-fill: var(--win-text-color) !important; + --panel-banner-item-color: var(--win-text-color) !important; + --arrowpanel-color: var(--win-text-color) !important; + --autocomplete-popup-color: var(--win-text-color) !important; + + /* Text Disabled Color */ + --menu-disabled-color: var(--win-disabled-color) !important; + --button-active-bgcolor: var(--win-disabled-color) !important; + --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important; + --panel-disabled-color: var(--win-disabled-color) !important; + --download-progress-paused-color: var(--win-disabled-color) !important; + + /* Text Shortcut Color */ + --panel-shortcut-color: var(--win-shorcut-text-color) !important; + --panel-description-color: var(--win-shorcut-text-color) !important; + + /* Title Background, Border Color */ + --menu-border-color: var(--win-bgcolor) !important; + --lwt-accent-color: var(--win-bgcolor) !important; + --toolbar-field-border-color: var(--win-bgcolor) !important; + --chrome-content-separator-color: var(--win-bgcolor) !important; + + /* Component Background Color */ + --menu-background-color: var(--win-component-bgcolor) !important; + --toolbar-bgcolor: var(--win-component-bgcolor) !important; + --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important; + --arrowpanel-background: var(--win-component-bgcolor) !important; + --autocomplete-popup-background: var(--win-component-bgcolor) !important; + + /* Seperator */ + --toolbarseparator-color: var(--win-tab-seperator-color) !important; + + /* Field Backround Color */ + --input-bgcolor: var(--win-field-bgcolor) !important; + --toolbar-field-background-color: var(--win-field-bgcolor) !important; + --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important; + --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important; + --button-primary-color: var(--win-field-bgcolor) !important; + --checkbox-checked-color: var(--win-field-bgcolor) !important; + + /* Hover Background Color */ + --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; + --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important; + --panel-banner-item-hover-bgcolor: var(--win-hover-bgcolor) !important; + + /* Hover Active, Button Color */ + --button-bgcolor: var(--win-hover-active-bgcolor) !important; + --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important; + --panel-banner-item-background-color: var(--win-hover-active-bgcolor) !important; + --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important; + --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important; + --panel-banner-item-active-bgcolor: var(--win-hover-active-bgcolor) !important; + --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important; + --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important; + --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important; + + /* Disabled Background Color */ + --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; + + /* Button Hover Color */ + --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important; + --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important; + --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important; + --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important; + + /* Button Border Color */ + --checkbox-border-color: var(--win-button-border) !important; + --input-border-color: var(--win-button-border) !important; + --autocomplete-popup-separator-color: var(--win-button-border) !important; + + /* Accent Color */ + --button-primary-bgcolor: var(--win-accent-color) !important; + --focus-outline-color: var(--win-accent-color) !important; + --checkbox-checked-bgcolor: var(--win-accent-color) !important; + + /* Accent Content Color */ + --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important; + --urlbar-popup-url-color: var(--win-accent-content-color) !important; + --download-progress-fill-color: var(--win-accent-content-color) !important; + + /* Accent Hover Color */ + --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important; + --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important; + + /* Accent Hover Active Color */ + --button-primary-active-bgcolor: var(--win-accent-active-color) !important; + --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important; + + /* Error Color */ + --error-text-color: var(--win-error-color) !important; + --input-error-border-color: var(--win-error-color) !important; + + /* Others */ + --tab-line-color: Highlight !important; + --tab-selected-bgcolor: unset !important; + --tabs-border-color: transparent !important; + --checkbox-checked-border-color: transparent !important; + + /* Other Defaults */ + --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important; + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important; + --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important; + + --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important; + + --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important; + } + #navigator-toolbox:not(:-moz-lwtheme) { + background: var(--lwt-accent-color) !important; + } + + /*- Separator --------------------------------------------------------------*/ + :root:not(:-moz-lwtheme) { + --arrowpanel-border-color: var(--win-bgcolor) !important; + --panel-separator-color: var(--win-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --arrowpanel-border-color: var(--win-border-color) !important; + --panel-separator-color: var(--win-border-color) !important; + } + + /*- Proton Tab Selected ----------------------------------------------------*/ + @supports -moz-bool-pref("userChrome.tab.proton") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; + } + } + + /*- Menu -------------------------------------------------------------------*/ + html#main-window menupopup:not(:-moz-lwtheme) { + --menu-color: var(--win-text-color) !important; + --menu-background-color: var(--win-component-bgcolor) !important; + --menu-border-color: var(--win-bgcolor) !important; + --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; + --menu-disabled-color: var(--win-disabled-color) !important; + --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; + } + + /*- Toolbar ----------------------------------------------------------------*/ + :root:not(:-moz-lwtheme) #titlebar, + :root[lwt-default-theme-in-dark-mode] #titlebar { + --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor); + --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor); + --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor); + --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor); + } + + /*- Sidebar ----------------------------------------------------------------*/ + #sidebar-box:not([lwt-sidebar]) { + appearance: none !important; + } + :root:not(:-moz-lwtheme) #sidebar-box, + :root[lwt-default-theme-in-dark-mode] #sidebar-box { + --sidebar-background-color: var(--win-sidebar-bgcolor) !important; + --sidebar-text-color: var(--win-text-color) !important; + --sidebar-border-color: var(--win-border-color) !important; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */ + body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { + /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ + --lwt-sidebar-background-color: transparent !important; + --lwt-sidebar-text-color: var(--win-text-color) !important; + } + } + + :root:not(:-moz-lwtheme) + .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2), + :root[lwt-default-theme-in-dark-mode] + .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2) { + --button-hover-bgcolor: var(--win-hover-bgcolor) !important; + --button-active-bgcolor: var(--win-hover-active-bgcolor) !important; + } + + /*- Others -----------------------------------------------------------------*/ + /* For overwrite */ + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy */ + :root:not(:-moz-lwtheme) { + /* Light Theme */ + --lwt-accent-color: var(--win-bgcolor) !important; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { + --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */ + } + } + + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme), + :root[lwtheme-mozlightdark] /* Legacy */ + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :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);"]) + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]) { + background-image: linear-gradient( + color-mix(in srgb, currentColor 11%, transparent), + color-mix(in srgb, currentColor 11%, transparent) + ), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + } +} + +/*= Windows10 - Titlebar accent color ========================================*/ +@media (-moz-windows-accent-color-in-titlebar) { + /* Tab Bar */ + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color { + color: -moz-accent-color-foreground; + background-color: -moz-accent-color; + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { + --toolbarbutton-icon-fill: currentColor; + --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent); + --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent); + } +} + +/*= GTK - URL View url accent color ==========================================*/ +@media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) .urlbarView-url { + --urlbar-popup-url-color: -moz-accent-color; + } + + /* Nightly Compatibility */ + :root:not(:-moz-lwtheme) #urlbar { + --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1) */ + --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */ + } +} + +/*= Mac - Default like color =================================================*/ +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + /* Colors */ + --mac-text-color: -moz-dialogtext; + --mac-disabled-color: GrayText; + --mac-bgcolor: Window; + --mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); + --mac-field-bgcolor: Window; + --mac-panel-bgcolor: Menu; + --mac-sidebar-bgcolor: -moz-mac-source-list; + --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor)); + --mac-hover-bgcolor: Window; + --mac-disabled-bgcolor: transparent; + --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */ + --mac-accent-color: -moz-accent-color; /* or LinkText */ + --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color); + --mac-accent-hover-color: color-mix( + in srgb, + rgb(0, 0, 0) 10%, + -moz-accent-color + ); /* or -moz-mac-menuselect, Highlight */ + --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */ + + /* Text, Icon Color */ + --menu-color: var(--mac-text-color) !important; + --lwt-text-color: var(--mac-text-color) !important; + --button-color: var(--mac-text-color) !important; + --input-color: var(--mac-text-color) !important; + --toolbar-color: var(--mac-text-color) !important; + --toolbar-non-lwt-textcolor: var(--mac-text-color) !important; + --toolbarbutton-icon-fill: var(--mac-text-color) !important; + --toolbar-field-focus-color: var(--mac-text-color) !important; + --urlbar-popup-action-color: var(--mac-text-color) !important; + --toolbar-field-color: var(--mac-text-color) !important; + --autocomplete-popup-highlight-color: var(--mac-text-color) !important; + --tab-icon-overlay-fill: var(--mac-text-color) !important; + --panel-banner-item-color: var(--mac-text-color) !important; + --arrowpanel-color: var(--mac-text-color) !important; + --autocomplete-popup-color: var(--mac-text-color) !important; + --panel-shortcut-color: var(--mac-text-color) !important; + --panel-description-color: var(--mac-text-color) !important; + + /* Text Disabled Color */ + --menu-disabled-color: var(--mac-disabled-color) !important; + --button-active-bgcolor: var(--mac-disabled-color) !important; + --checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important; + --panel-disabled-color: var(--mac-disabled-color) !important; + --download-progress-paused-color: var(--mac-disabled-color) !important; + + /* Background Color */ + --lwt-accent-color: var(--mac-bgcolor) !important; + --menu-background-color: var(--mac-bgcolor) !important; + --autocomplete-popup-background: var(--mac-bgcolor) !important; + + /* Selected Background Color */ + --toolbar-bgcolor: var(--mac-selected-bgcolor) !important; + --toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important; + + /* Field Backround Color */ + --input-bgcolor: var(--mac-field-bgcolor) !important; + --toolbar-field-background-color: var(--mac-field-bgcolor) !important; + --tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important; + + /* Panel Backround Color */ + --arrowpanel-background: var(--mac-panel-bgcolor) !important; + + /* Hover Background Color */ + --menuitem-hover-background-color: var(--mac-hover-bgcolor) !important; + --toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important; + --panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important; + + --button-bgcolor: var(--mac-hover-bgcolor) !important; + --checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important; + --panel-banner-item-background-color: var(--mac-hover-bgcolor) !important; + --urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important; + --urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important; + --panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important; + --toolbarbutton-active-background: var(--mac-hover-bgcolor) !important; + --urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important; + --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; + + --button-hover-bgcolor: var(--mac-hover-bgcolor) !important; + --checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important; + --urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important; + --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; + + /* Disabled Background Color */ + --menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important; + + /* Border Color */ + /* + --menu-border-color: var(--mac-bgcolor) !important; + --toolbar-field-border-color: var(--mac-bgcolor) !important; + --arrowpanel-border-color: var(--mac-bgcolor) !important; + --chrome-content-separator-color: var(--mac-bgcolor) !important; + --toolbarseparator-color: var(--mac-bgcolor) !important; + --panel-separator-color: var(--mac-bgcolor) !important; + */ + + /* Button Border Color */ + /* + --tab-line-color: var(---mac-bgcolor) !important; + --checkbox-border-color: var(--mac-bgcolor) !important; + --input-border-color: var(--mac-bgcolor) !important; + --autocomplete-popup-separator-color: var(--mac-bgcolor) !important; + */ + + /* Accent Color Forground */ + --button-primary-color: var(--mac-primary-button-color) !important; + --checkbox-checked-color: var(--mac-primary-button-color) !important; + + /* Accent Color */ + --button-primary-bgcolor: var(--mac-accent-color) !important; + --focus-outline-color: var(--mac-accent-color) !important; + --checkbox-checked-bgcolor: var(--mac-accent-color) !important; + + /* Accent Content Color */ + --toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important; + --urlbar-popup-url-color: var(--mac-accent-content-color) !important; + --download-progress-fill-color: var(--mac-accent-content-color) !important; + + /* Accent Hover Color */ + --button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important; + --checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important; + + /* Accent Hover Active Color */ + --button-primary-active-bgcolor: var(--mac-accent-active-color) !important; + --checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important; + + /* Error Color */ + /* + --error-text-color: var(--win-error-color) !important; + --input-error-border-color: var(--win-error-color) !important; + */ + + /* Others */ + --tab-selected-bgcolor: unset !important; + --tabs-border-color: transparent !important; + --checkbox-checked-border-color: transparent !important; + + /* Other Defaults */ + --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important; + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important; + --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important; + + --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important; + + --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-field-bgcolor: Field; + --mac-panel-bgcolor: -moz-CellHighlight; + --mac-hover-bgcolor: ButtonFace; + + --toolbar-field-focus-background-color: var(--mac-bgcolor) !important; + --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important; + } + } + + /*- Proton Tab Selected ----------------------------------------------------*/ + @supports -moz-bool-pref("userChrome.tab.proton") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + } + + /*- Toolbar ----------------------------------------------------------------*/ + :root:not(:-moz-lwtheme) #navigator-toolbox, + :root[lwt-default-theme-in-dark-mode] #navigator-toolbox { + appearance: auto !important; + } + + :root:not(:-moz-lwtheme) #titlebar { + --mac-hover-bgcolor: ButtonFace; + } + :root:not(:-moz-lwtheme) #titlebar, + :root[lwt-default-theme-in-dark-mode] #titlebar { + --button-hover-bgcolor: var(--mac-hover-bgcolor); + --button-active-bgcolor: var(--mac-hover-bgcolor); + --toolbarbutton-hover-background: var(--mac-hover-bgcolor); + --toolbarbutton-active-background: var(--mac-hover-bgcolor); + } + + :root[lwt-default-theme-in-dark-mode] #urlbar { + --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; + --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; + } + + /*- Sidebar ----------------------------------------------------------------*/ + #sidebar-box:not([lwt-sidebar]) { + appearance: none !important; + } + :root:not(:-moz-lwtheme) #sidebar-box, + :root[lwt-default-theme-in-dark-mode] #sidebar-box { + --sidebar-background-color: var(--mac-sidebar-bgcolor) !important; + --sidebar-text-color: var(--mac-text-color) !important; + /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */ + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */ + body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { + /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ + --lwt-sidebar-background-color: transparent !important; + --lwt-sidebar-text-color: var(--mac-text-color) !important; + } + } + + :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup { + --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor); + --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor); + } + + /*- Others -----------------------------------------------------------------*/ + /* For Overwrite */ + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { + --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } + } + + /* Hard Coded */ + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"] { + background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } + } + :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after, + :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before, + :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after { + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } +} + +/** Fully Theme Mode **********************************************************/ +/* Default Themes + https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json + https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json + https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json + */ + +/*= 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-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), (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); + } +} + +/*== 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; +} + +@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 */ +} + +/* Fully Dark Mode ************************************************************/ +/*= Remove White Flash =======================================================*/ +#tabbrowser-tabbox, +#tabbrowser-tabpanels, +browser[type="content-primary"], +browser[type="content"] > html { + background: var(--in-content-page-background) !important; +} + +/*= Notification =============================================================*/ +@-moz-document url("chrome://global/content/alerts/alert.xhtml") +{ + /* Color */ + :root { + --menu-color: #15141a; + --menu-background-color: #f9f9fb; + --menu-border-color: #cfcfd8; + --menuitem-hover-background-color: #e0e0e6; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --menu-border-color: rgba(107, 107, 107, 0.3); + --menu-color: #fbfbfe; + --menu-background-color: #2b2a33; + --menuitem-hover-background-color: #52525e; + } + #alertSourceLabel { + color: rgb(5, 209, 241) !important; + } + } + + /* line below removes background from the notification "window" on linux */ + #alertNotification { + background: transparent !important; + } + + #alertBox { + color: var(--menu-color) !important; + background-color: var(--menu-background-color) !important; + border-color: var(--menu-border-color) !important; + border-radius: 6px !important; + -moz-window-shadow: cliprounded !important; + } + #alertSettings { + fill: currentColor !important; + color: inherit !important; + border-radius: 0 !important; + margin-inline: 0 !important; + margin-bottom: -4px !important; + } + .close-icon, + #alertSettings { + background: transparent !important; + } + .close-icon:hover > .toolbarbutton-icon, + #alertSettings:is(:hover, [open]) > .button-box > .box-inherit { + background-color: var(--menuitem-hover-background-color, #e0e0e6) !important; + } + + /* Shape */ + .close-icon > .toolbarbutton-icon, + #alertSettings > .button-box > .box-inherit { + border-radius: 4px !important; + padding: 2px !important; + margin: 2px 2px -2px 0 !important; + } + #alertSettings > .button-box > .box-inherit { + margin: -4px 4px 3px 0 !important; + } + #alertSettings > .button-box > .box-inherit > .button-icon { + padding: 1px; + } +} + +/*= Proton Commons ===========================================================*/ +@-moz-document url("chrome://global/content/commonDialog.xhtml"), + url("chrome://pippki/content/editcacert.xhtml"), + url("chrome://pippki/content/deletecert.xhtml"), + url("chrome://pippki/content/exceptionDialog.xhtml"), + url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), + url("chrome://global/content/appPicker.xhtml"), + url("chrome://browser/content/pageinfo/pageInfo.xhtml") +{ + /*- Overwrite --------------------------------------------------------------*/ + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --in-content-page-background: #42414d; + } + } + + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important; + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important; + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important; + --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important; + --checkbox-checked-color: var(--in-content-primary-button-text-color) !important; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important; + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important; + } + + /*- Dialog -----------------------------------------------------------------*/ + #commonDialog, + #editCaCert, + #deleteCertificate, + #exceptiondialog, + #unknownContentType, + #app-picker, + #topBar, /* #topBar, #mainDeck: Page Info */ + #mainDeck { + -moz-appearance: none !important; /* For Mac */ + color: var(--in-content-page-color) !important; + background-color: var(--in-content-page-background) !important; + /* border-radius: 0 0 8px 8px !important; */ + } + + /*- Button -----------------------------------------------------------------*/ + button { + -moz-appearance: none !important; + color: var(--in-content-button-text-color) !important; + background-color: var(--in-content-button-background) !important; + font: inherit; + font-size: 1em !important; + font-weight: 600 !important; + min-height: 32px !important; + border: 1px solid transparent !important; /* shows up in high-contrast mode */ + border-radius: var(--in-content-button-border-radius) !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + + min-height: 32px !important; + /* Use the same margin of other elements for the alignment */ + margin-inline: 4px !important; + min-width: 6.3em !important; + } + + /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding + * the 1px border): */ + button.medium { + padding: 6px 13px !important; + min-height: 28px !important; + font-size: 0.95em !important; + } + button.small { + padding: 5px 11px !important; + min-height: 24px !important; + font-size: 0.9em !important; + } + + /* Remove margin added by button.css */ + xul|button > .button-box > .button-text { + margin: 0 !important; + } + + button:-moz-focusring, + xul|menulist:-moz-focusring, + xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */ + xul|radio[focused="true"]:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + button:not([disabled="true"]):hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + + xul|button:not([disabled="true"]):hover:active, + xul|button[open], + xul|button[open]:hover, + xul|menulist[open="true"]:not([disabled="true"]) { + background-color: var(--in-content-button-background-active) !important; + } + + xul|button[default] { + background-color: var(--in-content-primary-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + } + xul|button[default]:not([disabled="true"]):hover { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color) !important; + } + xul|button[default]:not([disabled="true"]):hover:active { + background-color: var(--in-content-primary-button-background-active) !important; + } + + xul|button[disabled="true"], + xul|menulist[disabled="true"] { + opacity: 0.4 !important; + } + xul|button:not([disabled="true"]):hover, + xul|menulist:not([disabled="true"]):hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + + @media (prefers-contrast) { + xul|button[default]:not([disabled="true"]):hover { + border-color: currentColor !important; + } + + button:focus { + color: var(--in-content-button-text-color) !important; + } + + xul|button[default]:focus, + button.primary:focus { + color: var(--in-content-primary-button-text-color) !important; + } + } + + /*- Radio Button -----------------------------------------------------------*/ + xul|radio { + /* margin-inline-start: 0 !important; */ + appearance: none !important; + } + + xul|*.radio-check { + appearance: none !important; + width: 16px !important; + height: 16px !important; + padding: 0 !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 100% !important; + margin-block: 2px !important; /* extend the vertical clicktarget */ + margin-inline: 0 6px !important; + background-color: var(--in-content-button-background) !important; + background-position: center !important; + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ + } + + xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + } + + xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check { + background-color: var(--in-content-button-background-active) !important; + } + + xul|*.radio-check[selected] { + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--in-content-primary-button-text-color) !important; + background-color: var(--in-content-primary-button-background) !important; + background-image: url("chrome://global/skin/icons/radio.svg") !important; + border-color: transparent !important; + + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + + xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + + xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check { + background-color: var(--in-content-primary-button-background-active) !important; + } + + xul|*.radio-label-box { + margin-inline: 0 8px !important; + padding-inline-start: 0 !important; + } + + /* Disabled checkboxes, radios and labels */ + xul|checkbox[disabled="true"], + xul|radio[disabled="true"], + xul|label[disabled="true"] { + color: inherit !important; + } + + xul|checkbox[disabled="true"], + xul|radio[disabled="true"], + xul|label[disabled="true"] { + opacity: 0.5 !important; + } + + /*- Check Box --------------------------------------------------------------*/ + /* From checkbox.css */ + checkbox { + appearance: none !important; + -moz-box-align: center !important; + margin: 4px 2px !important; + } + + .checkbox-icon[src] { + margin-inline-end: 2px !important; + } + .checkbox-label { + margin: 1px 0 !important; + } + + checkbox[disabled="true"] { + opacity: 0.4 !important; + } + + .checkbox-check { + appearance: none !important; + color: var(--checkbox-border-color, ThreeDDarkShadow) !important; + background-color: var(--checkbox-unchecked-bgcolor, Field) !important; + border: 1px solid currentColor !important; + border-radius: 2px !important; + margin-inline-end: 6px !important; + } + + .checkbox-check { + height: 16px !important; + width: 16px !important; + } + + checkbox:not([disabled="true"]):hover > .checkbox-check { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; + } + + .checkbox-check[checked] { + border-color: var(--checkbox-checked-border-color, transparent) !important; + background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; + } + + checkbox:-moz-focusring > .checkbox-check { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; + } + + @media (prefers-contrast) { + checkbox:not([disabled="true"]):hover > .checkbox-check { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; + } + + .checkbox-check[checked] { + color: var(--checkbox-checked-border-color, currentColor) !important; + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked], + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + } + } + + /* From common.css */ + xul|*.checkbox-check { + margin-block: 2px !important; + } + xul|richlistitem > xul|*.checkbox-check { + margin: 3px 6px !important; + } + + /*- Menulist ---------------------------------------------------------------*/ + /* From mulist.css */ + xul|menulist { + appearance: none !important; + background-color: var(--in-content-button-background, ButtonFace) !important; + color: var(--in-content-button-text-color, ButtonText) !important; + border-radius: 4px !important; + padding-block: 4px !important; + padding-inline: 12px 8px !important; + margin: 5px 2px 3px !important; + } + + xul|menulist[size="medium"] { + padding-block: 6px !important; + padding-inline: 16px 10px !important; + } + + xul|menulist[size="large"] { + padding-block: 8px !important; + padding-inline: 16px 12px !important; + } + + xul|menulist:hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important; + } + + xul|menulist:hover:active { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important; + } + + xul|menulist:-moz-focusring { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; + } + + #label-box { + -moz-box-align: center !important; + -moz-box-pack: center !important; + font-weight: 600 !important; + } + + dropmarker { + display: -moz-box !important; + appearance: none !important; + width: 12px !important; + height: 12px !important; + } + + dropmarker::part(icon) { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + } + + #highlightable-label:not([highlightable="true"]), + #label[highlightable="true"] { + display: none !important; + } + + xul|menuitem > label:not(.menu-text) { + margin: 0 3px !important; + } + + /* From common.css */ + xul|menulist > xul|menupopup { + appearance: none !important; + + /* Reset native styles on Windows and macOS */ + border: none !important; + background-color: transparent !important; + + --panel-border-color: var(--in-content-box-border-color) !important; + --panel-border-radius: 2px !important; + --panel-background: var(--in-content-box-background) !important; + --panel-color: var(--in-content-text-color) !important; + --panel-padding: 0 !important; + } + + xul|menulist > xul|menupopup xul|menu, + xul|menulist > xul|menupopup xul|menuitem { + appearance: none !important; + font-size: 1em !important; + padding-block: 0.2em !important; + padding-inline: 10px 30px !important; + } + + xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], + xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { + color: var(--in-content-item-hover-text) !important; + background-color: var(--in-content-item-hover) !important; + } + + xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], + xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { + color: var(--in-content-item-selected-text) !important; + background-color: var(--in-content-item-selected) !important; + } + + xul|menulist > xul|menupopup > xul|menu[disabled="true"], + xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] { + color: #999 !important; + /* override the [_moz-menuactive="true"] background color from + global/menu.css */ + background-color: transparent !important; + } + + xul|menulist > xul|menupopup xul|menuseparator { + appearance: none !important; + margin: 0 !important; + padding: 0 !important; + border-top: 1px solid var(--in-content-box-border-color) !important; + border-bottom: none !important; + } + + xul|menulist::part(dropmarker) { + margin-block: 1px !important; + } + + /* Override menulist.css */ + xul|menulist[disabled="true"] { + background-color: var(--in-content-button-background) !important; + } + + xul|menulist:-moz-focusring > xul|*.menulist-label-box { + outline: none !important; + } + + /*- List Boxes -------------------------------------------------------------*/ + html|select[size][multiple], + xul|listheader, + xul|richlistbox { + appearance: none !important; + margin-inline: 0 !important; + background-color: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: var(--in-content-text-color) !important; + } + + xul|listheader { + border-bottom: none !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + padding-bottom: 1px !important; + box-shadow: inset 0 -1px var(--in-content-border-color) !important; + overflow: clip !important; /* Clip border-radius */ + } + + xul|listheader + xul|richlistbox { + margin-top: 0 !important; + border-top: none !important; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + + html|select[size][multiple] > html|option, + xul|treechildren::-moz-tree-row { + padding: 0.3em inherit !important; + margin: 0 !important; + border: none !important; + border-radius: 0 !important; + background-image: none !important; + } + + xul|treechildren::-moz-tree-row(multicol, odd) { + background-color: var(--in-content-box-background-odd); + } + + html|select[size][multiple] > html|option:hover, + xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover, + xul|treechildren::-moz-tree-row(hover) { + background-color: var(--in-content-item-hover) !important; + color: var(--in-content-item-hover-text) !important; + } + + xul|richlistbox > xul|richlistitem[selected], + xul|treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected) !important; + color: var(--in-content-item-selected-text) !important; + } + + xul|richlistbox:not(#categories) > xul|richlistitem[selected] { + /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */ + --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important; + --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important; + --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important; + --in-content-button-text-color: var(--in-content-item-selected-text) !important; + --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important; + --in-content-focus-outline-color: var(--in-content-item-selected-text) !important; + } + + xul|richlistitem[selected] xul|menulist:focus-visible { + outline-offset: -2px !important; + } + + /* Use a 2px border so that selected row highlight is still visible behind + an existing high-contrast border that uses the background color */ + @media (prefers-contrast) { + xul|treechildren::-moz-tree-row(selected) { + border: 2px solid currentColor !important; + border-radius: 4px !important; + } + } + + xul|panel[type="autocomplete-richlistbox"] { + background-color: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-box-border-color) !important; + color: var(--in-content-text-color) !important; + } + + /*- Each OS ----------------------------------------------------------------*/ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + xul|checkbox, + xul|radio { + padding-inline-start: 0 !important; + } + + /* Override menulist.css */ + xul|menulist[disabled="true"] { + background-color: var(--in-content-button-background) !important; + } + + xul|menulist:-moz-focusring > xul|*.menulist-label-box { + outline: none !important; + } + } + + @media (-moz-gtk-csd-available) { + /* Overriding appearance also avoids incorrect selection background color with light text. */ + xul|button > xul|*.button-box, + xul|menulist::part(label-box), + xul|*.radio-label-box, + xul|*.checkbox-label-box { + appearance: none !important; + } + + xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { + appearance: none !important; + } + xul|menulist { + font-size: inherit !important; + } + xul|menulist::part(dropmarker) { + display: -moz-box; + margin-block: 6px !important; + } + xul|menulist:-moz-focusring::part(label-box) { + outline: none !important; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before, + xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before { + display: none !important; + } + + xul|menulist::part(dropmarker) { + display: -moz-box !important; + margin-block: 1px !important; + } + + xul|menulist > xul|menupopup xul|menu, + xul|menulist > xul|menupopup xul|menuitem { + padding-inline-end: 34px !important; + } + + xul|*.checkbox-icon, + xul|*.radio-icon { + margin-inline-end: 0 !important; + } + + xul|*.text-link:-moz-focusring { + box-shadow: none !important; + } + } +} + +/*= Delete Cert ==============================================================*/ +@-moz-document url("chrome://pippki/content/deletecert.xhtml") +{ + :root { + --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; + } + #certlist { + border: 1px solid var(--in-content-border-color) !important; + border-radius: 4px !important; + } +} + +/*= Cert Exeption Dialog =====================================================*/ +@-moz-document url("chrome://pippki/content/exceptionDialog.xhtml") +{ + :root { + --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; + } + #locationTextBox { + appearance: none !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: inherit !important; + background-color: var(--in-content-box-background) !important; + + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + #locationTextBox:focus { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + #locationTextBox:-moz-ui-invalid { + border-color: transparent !important; + outline: 2px solid var(--in-content-border-invalid) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + #locationTextBox:disabled { + opacity: 0.4 !important; + } + + #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) { + width: 48px !important; + height: 48px !important; + background-image: url("chrome://global/skin/icons/warning.svg") !important; + background-size: 48px !important; + background-repeat: no-repeat !important; + + -moz-context-properties: fill !important; + fill: currentColor !important; + } + #exceptiondialog:first-child > hbox > vbox > image { + display: none !important; + } +} + +/*= Page Info ================================================================*/ +@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") +{ + :root { + --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; + } + + #viewGroup > radio { + border-radius: 8px !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + margin: 4px !important; + } + #viewGroup > radio:hover { + background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */ + } + #viewGroup > radio[selected="true"] { + color: var(--in-content-button-text-color) !important; /* SelectedItemText */ + background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */ + } + #viewGroup > radio { + color: var(--in-content-deemphasized-text) !important; /* FieldText */ + } + + #viewGroup > radio { + list-style-image: none !important; + background-image: var(--viewgroup-image) !important; + background-repeat: no-repeat; + background-position: top var(--in-content-button-vertical-padding) center; + background-size: 32px !important; + + -moz-context-properties: fill !important; + fill: currentColor !important; + } + #generalTab { + --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg); + } + #mediaTab { + --viewgroup-image: url(chrome://browser/skin/canvas.svg); + } + #permTab { + --viewgroup-image: url(chrome://browser/skin/permissions.svg); + } + #securityTab { + --viewgroup-image: url(chrome://global/skin/icons/security.svg); + } + + #viewGroup > radio > .radio-label-box { + /* Overwrite */ + margin: 0 !important; + padding: 0 6 !important; + } + + #mainDeck input { + color: var(--in-content-page-color) !important; + } + + #permList { + -moz-appearance: none !important; + color: var(--in-content-page-color) !important; + background-color: var(--in-content-box-background) !important; + } + .permission:hover { + color: var(--in-content-text-color) !important; + background-color: var(--in-content-button-background-hover) !important; + } + .permission radio[disabled] { + color: var(--in-content-deemphasized-text) !important; + } + + treecols { + -moz-appearance: none !important; + background: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + treecols > treecol, + treecols > treecolpicker.treecol-image { + -moz-appearance: none !important; + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + border: 1px solid var(--in-content-border-color) !important; + padding: 4px !important; + border-spacing: 0; + + text-align: center !important; + } + + tree, + treechildren::-moz-tree-row { + -moz-appearance: none !important; + color: var(--in-content-text-color) !important; + background-color: var(--in-content-table-background) !important; + border: 1px solid var(--in-content-border-color) !important; + } + + treechildren::-moz-tree-row(odd) { + background-color: var(--in-content-box-background-odd) !important; + } + + treechildren::-moz-tree-row(hover) { + color: var(--in-content-item-hover-text) !important; + background-color: var(--in-content-item-hover) !important; + } + treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected) !important; + } + + treechildren::-moz-tree-cell { + border-inline: 1px solid var(--in-content-border-color) !important; + border-spacing: 0 !important; + padding: 4px !important; + margin: 0 !important; + } + treechildren::-moz-tree-cell-text(hover) { + color: var(--in-content-item-hover-text) !important; + } + treechildren::-moz-tree-cell-text(selected) { + font-weight: 600 !important; + color: var(--in-content-item-selected-text) !important; + } + + #imagecontainerbox { + background-color: var(--in-content-box-background) !important; + } + + #metatree, + #imagetree, + #imagecontainerbox, + #permList { + border-radius: 4px !important; + } + #metatree, + #imagetree { + overflow: hidden !important; + } + + #topBar, + #imagecontainerbox, + #permList { + border-color: var(--in-content-border-color) !important; + } +} + +/*= Library Popup ============================================================*/ +@-moz-document url("chrome://browser/content/places/places.xhtml") +{ + @media (-moz-gtk-csd-available) { + :root { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --organizer-toolbar-field-focus-box-shadow: unset; + --organizer-pane-field-border-color: ThreeDShadow; + } + + @media not all and (prefers-contrast) { + :root { + --organizer-color: var(--in-content-page-color); + --organizer-deemphasized-color: var(--in-content-deemphasized-text); + + --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */ + --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */ + --organizer-content-background: var(--in-content-page-background); + + --organizer-hover-background: var(--in-content-button-background-hover); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: var(--in-content-button-background-active); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: var(--in-content-primary-button-background); + + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: var(--in-content-border-color); + + --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */ + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix( + in srgb, + var(--organizer-outline-color) 50%, + transparent + ); + --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); + --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --organizer-color: rgb(251, 251, 254); + --organizer-deemphasized-color: rgb(191, 191, 201); + + --organizer-toolbar-background: rgb(43, 42, 51); + --organizer-pane-background: rgb(35, 34, 43); + --organizer-content-background: rgb(28, 27, 34); + + --organizer-hover-background: rgb(82, 82, 94); + --organizer-selected-background: rgb(91, 91, 102); + --organizer-outline-color: rgb(0, 221, 255); + + --organizer-toolbar-field-background: var(--in-content-page-background); + --organizer-toolbar-field-background-focused: rgb(66, 65, 77); + scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); + } + } + } + + /*- Toolbar & Menus ----------------------------------------------------*/ + #placesToolbar { + appearance: none !important; + background-color: var(--organizer-toolbar-background) !important; + color: var(--organizer-color) !important; + border-bottom: 1px solid var(--organizer-border-color) !important; + padding: 4px !important; + padding-inline-end: 6px !important; + } + + #placesToolbar > toolbarbutton { + appearance: none !important; + padding: 5px !important; + border-radius: 4px !important; + } + + #placesToolbar > toolbarbutton[disabled] { + opacity: 0.6 !important; + } + + #placesToolbar > toolbarbutton:not([disabled]):hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #placesToolbar > toolbarbutton:not([disabled]):hover:active { + background-color: var(--organizer-selected-background) !important; + } + + #placesToolbar > toolbarbutton > .toolbarbutton-icon, + #placesMenu > menu > image, + #placesMenu > menu > .menubar-text { + -moz-context-properties: fill !important; + fill: currentColor !important; + } + + #placesMenu { + margin-inline-start: 6px !important; + } + + #placesMenu > menu { + appearance: none !important; + color: var(--organizer-color) !important; + border-radius: 4px !important; + padding-block: 5px !important; + padding-inline-start: 5px !important; + margin-inline-end: 2px !important; + } + + #placesMenu > menu[_moz-menuactive="true"], + #placesMenu > menu:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #placesMenu > menu:hover:active, + #placesMenu > menu[open] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + + #placesMenu > menu > .menubar-text { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 4px !important; + } + + /*- Search Bar & Input ---------------------------------------------------*/ + #searchFilter, + #detailsPane html|input { + appearance: none !important; + background-color: var(--organizer-toolbar-field-background) !important; + color: var(--organizer-color) !important; + border: 1px solid var(--organizer-toolbar-field-border-color) !important; + border-radius: 4px !important; + margin: 0 !important; + padding-block: 2px !important; + min-height: 24px !important; + } + + #searchFilter[focused] { + box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; + background-color: var(--organizer-toolbar-field-background-focused) !important; + border-color: transparent !important; + outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; + outline-offset: -2px !important; + } + + /*- Sidebar & Splitter ---------------------------------------------------*/ + #placesList { + background-color: var(--organizer-pane-background) !important; + } + + #placesView > splitter { + border: 0 !important; + border-inline-end: 1px solid var(--organizer-border-color) !important; + min-width: 0 !important; + width: 3px !important; + background-color: transparent !important; + margin-inline-start: -3px !important; + position: relative !important; + } + + /*- Downloads Pane -------------------------------------------------------*/ + #downloadsRichListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + } + + #clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + } + + richlistitem[selected="true"], + richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--organizer-selected-background) !important; + } + + /*- Tree -----------------------------------------------------------------*/ + #contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) !important; + } + + tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"]), + treecolpicker { + appearance: none !important; + border: none !important; + background-color: var(--in-content-button-background) !important; + color: var(--organizer-color, inherit) !important; + padding: 5px 10px !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover, + treecolpicker:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover:active, + treecolpicker:hover:active { + background-color: var(--organizer-selected-background) !important; + } + + treecol:not([hideheader="true"], :first-child), + treecolpicker { + padding-left: 10px !important; + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-image: linear-gradient( + transparent 0%, + transparent 20%, + var(--organizer-border-color) 20%, + var(--organizer-border-color) 80%, + transparent 80%, + transparent 100% + ) + 1 1 !important; + } + + treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; + } + + treechildren::-moz-tree-row { + background-color: transparent !important; + } + + treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + + treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } + + treechildren::-moz-tree-image(hover), + treechildren::-moz-tree-twisty(hover), + treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-image(selected), + treechildren::-moz-tree-twisty(selected), + treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } + + treechildren::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + + treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } + + /*- Info Box -------------------------------------------------------------*/ + #detailsPane { + background-color: var(--organizer-pane-background) !important; + color: var(--organizer-color) !important; + padding: 5px !important; + border-top: 1px solid var(--organizer-border-color) !important; + } + + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + appearance: none !important; + min-width: 0 !important; + padding: 5px !important; + margin: 0 !important; + margin-inline-end: 4px !important; + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill !important; + fill: currentColor !important; + } + + #editBookmarkPanelRows .expander-up:hover, + #editBookmarkPanelRows .expander-down:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #editBookmarkPanelRows .expander-up:hover:active, + #editBookmarkPanelRows .expander-down:hover:active { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + + #editBookmarkPanelRows .expander-up:focus-visible, + #editBookmarkPanelRows .expander-down:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + #editBookmarkPanelRows .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); + } + + #editBookmarkPanelRows .expander-up > .button-box, + #editBookmarkPanelRows .expander-down > .button-box { + padding: 0 !important; + } + + #places input { + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + min-height: 20px !important; + padding-inline: 4px !important; + } + + #places input:focus { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + #places input:not(:read-write):focus { + outline: none !important; + } + + .caption-label { + margin-inline-start: 8px !important; + color: var(--organizer-deemphasized-color) !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox { + appearance: none !important; + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + border: 1px solid var(--organizer-border-color) !important; + border-radius: 4px !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { + border: 1px solid transparent !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + } +} + +/** Decoration ****************************************************************/ +@media (prefers-reduced-motion: no-preference) { + /*= URL, Search Bar ========================================================*/ + #urlbar:hover:not([focused="true"]) > #urlbar-background, + #searchbar:hover:not(:focus-within) { + --toolbar-field-border-color: var(--toolbar-field-focus-border-color); + } + + /*= Other Fields ===========================================================*/ + /* Sidebar */ + .sidebar-panel[lwt-sidebar] #search-box:hover, + body[lwt-sidebar] xul|search-textbox.tabsFilter:hover { + border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important; + } + .sidebar-panel:not([lwt-sidebar]) #search-box:hover, + body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { + border-color: -moz-accent-color !important; + } + + /* Others */ + #editBMPanel_namePicker:hover, + #editBMPanel_tagsField:hover, + .findbar-container .findbar-textbox:hover { + --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent); + } + + /*= Downloads Panel ========================================================*/ + /* Accent Color for downloaded item */ + #downloadsListBox .download-state[exists] .downloadDetails { + color: var(--button-primary-bgcolor); + } + #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover { + color: var(--button-primary-hover-bgcolor); + } + + /* File moved or missing */ + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget { + text-decoration: line-through; + text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); + } + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { + filter: grayscale(100%) !important; + } +} + +/*= Cursor Types =============================================================*/ +#appMenu-proton-update-banner, +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2, +#appMenu-zoomReduce-button2, +#appMenu-zoomReset-button2, +#appMenu-zoomEnlarge-button2, +#appMenu-fullscreen-button2, +#panelMenu_showAllBookmarks, +#PanelUI-historyMore, +#appMenuClearRecentHistory:not([disabled]), +#appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button, +#appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button, +#BMB_viewBookmarksSidebar, +#BMB_bookmarksShowAllTop, +#BMB_bookmarksShowAll, +#import-button, +menuitem.openintabs-menuitem, +#downloadsListBox .downloadButton, +#downloadsListBox .download-state[exists], +#downloadsListBox .download-state[exists] .downloadDetails, +#downloadsHistory, +#protections-popup-settings-button, +#protections-popup-show-report-button, +#identity-popup-clear-sitedata-button, +#identity-popup-more-info { + cursor: pointer !important; +} + +/* TODO: For now, fxa-menu doesn't show any status. + (JS required, observe .syncNowBtn status) + #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] { + cursor: progress !important; + } + */ + +/*= Animate ==================================================================*/ +@media (prefers-reduced-motion: no-preference) { + /*- Background Color -------------------------------------------------------*/ + button, + toolbarbutton, + stack, + vbox, + .toolbarbutton-icon, + #tabs-newtab-button > .toolbarbutton-icon { + transition: background-color 1s var(--animation-easing-function) !important; + } + button:hover, + toolbarbutton:hover, + stack:hover, + vbox:hover, + .toolbarbutton-icon:hover, + #tabs-newtab-button:hover > .toolbarbutton-icon { + transition: background-color 0.25s var(--animation-easing-function) !important; + } + @media (-moz-gtk-csd-available) { + .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) { + transition: background-image 0.25s var(--animation-easing-function) !important; + } + } + + .subviewbutton { + /* treechildren::-moz-tree-row: Can't apply + menu, menuitem is not apply. + */ + transition: background-color 0.5s var(--animation-easing-function) !important; + } + .subviewbutton:hover { + transition: background-color 0.1s var(--animation-easing-function) !important; + } + + /*- Pinned Tab -------------------------------------------------------------*/ + #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) { + /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */ + transition: -moz-box-flex 0.2s var(--animation-easing-function), + margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important; + max-width: var(--tab-max-width, 240px); + } + #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] { + transition: -moz-box-flex 0.2s var(--animation-easing-function), + margin-inline-start 0.2s var(--animation-easing-function) !important; + } + + #tabbrowser-tabs:not([movingtab]) .tab-content { + transition: padding-inline 0.2s var(--animation-easing-function), + /* Unloaded Tab */ opacity 0.5s var(--animation-easing-function) !important; + } + #tabbrowser-tabs:not([movingtab]) .tab-content::before, + #tabbrowser-tabs:not([movingtab]) .tab-content::after { + transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important; + } + #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container { + transition: width 0.3s var(--animation-easing-function) !important; + } + #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image { + transition: all 0.3s var(--animation-easing-function) !important; + } + + /*- URL / Search Bar -------------------------------------------------------*/ + #urlbar-background, + #searchbar { + transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important; + } + #urlbar-background:hover, + #searchbar:hover { + transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important; + } + + /* Buttons in URL bar */ + #tracking-protection-icon-container, + #identity-icon-box, + #identity-permission-box, + #notification-popup-box, + #page-action-buttons > .urlbar-page-action { + transition: background-color 2.5s var(--animation-easing-function) !important; + } + #tracking-protection-icon-container:hover, + #identity-icon-box:hover, + #identity-permission-box:hover, + #notification-popup-box:hover, + #page-action-buttons > .urlbar-page-action:hover { + transition: background-color 1.25s var(--animation-easing-function) !important; + } + + /*- Border - Other Fields --------------------------------------------------*/ + #search-box:hover, + xul|search-textbox.tabsFilter:hover, + #editBMPanel_namePicker:hover, + #editBMPanel_tagsField:hover, + .findbar-container .findbar-textbox:hover { + transition: border-color 1s var(--animation-easing-function) !important; + } + #search-box:hover, + xul|search-textbox.tabsFilter:hover, + #editBMPanel_namePicker:hover, + #editBMPanel_tagsField:hover, + .findbar-container .findbar-textbox:hover { + transition: border-color 0.5s var(--animation-easing-function) !important; + } + + /*- Sidebar ----------------------------------------------------------------*/ + #sidebar-box { + /* like #sidebar-box > #sidebar */ + min-width: 14em; + width: 18em; + max-width: 36em; + + /* Animation */ + transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + #sidebar-box[hidden="true"] { + display: -moz-box !important; + margin-inline-start: -18em; + opacity: 0; + visibility: collapse; + transition-delay: 0s, 0s, 0.25s !important; + } + + /*- Expand - Synced Tabs ---------------------------------------------------*/ + @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") + { + .item-tabs-list { + transition: transform 0.2s ease-out, opacity 0.2s ease-out; + transform: translateY(0%); + opacity: 1; + max-height: 100%; + } + + .item.client.closed .item-tabs-list { + display: flex !important; + + transition: transform 0.2s ease-out, opacity 0.2s ease-out, + max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s; + visibility: hidden; + transform: translateY(-100%); + opacity: 0; + max-height: 0; + } + } + + /*- Arrow - Synced Tabs ----------------------------------------------------*/ + @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") + { + /* treechildren::-moz-tree-twisty: Can't apply */ + #template-container .item.client .item-twisty-container { + transition: transform 0.1s var(--animation-easing-function) !important; + } + + #template-container .item.client.closed .item-twisty-container { + transform: rotate(-90deg); + background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; + } + + #template-container .item.client.closed .item-twisty-container:dir(rtl) { + transform: rotate(90deg); + background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; + } + } + + /*- Arrow - Edit Bookmark Popup --------------------------------------------*/ + #editBookmarkPanelRows .expander-up .button-icon, + #editBookmarkPanelRows .expander-down .button-icon { + transition: transform 0.1s var(--animation-easing-function) !important; + } + #editBookmarkPanelRows .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; + } + #editBookmarkPanelRows .expander-up .button-icon { + transform: rotate(180deg); + } +} + +/** Reduce Padding ************************************************************/ +/*= Root - Reduce Padding ====================================================*/ +@supports -moz-bool-pref("userChrome.tab.original") { + :root { + /* Tab Bar */ + --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ + --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ + } +} +@supports -moz-bool-pref("userChrome.tab.photon") { + :root { + --proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */ + --tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */ + --tab-border-radius: 0px !important; /* Original: 4px */ + } +} +:root { + --inline-tab-padding: 6px !important; /* Original: 8px */ + + /* Panel */ + --arrowpanel-menuicon-padding: 8px; + --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */ + --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */ + --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ +} + +:root[uidensity="compact"] { + /* Tool Bar */ + --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ + + /* Panel */ + --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */ +} + +:root[uidensity="touch"] { + /* Tab Bar - Like Original */ + --proton-tab-block-margin: 4px !important; /* Original: 4px */ + --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */ + --inline-tab-padding: 8px !important; /* Original: 8px */ + + /* Panel - Like Original */ + --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */ +} + +/* Fix Tab bar button radious */ +@supports -moz-bool-pref("userChrome.tab.photon") { + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack, + .tab-close-button { + --tab-border-radius: 4px !important; + } +} + +/*= Tab Bar - Reduce Width, Show more tabs ===================================*/ +/* for First Tab Space */ +:root { + --space-left-tabbar: 0px; /* If you want drag space, set to 8px */ +} +:root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]), +:root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) { + padding-inline-start: var(--space-left-tabbar) !important; +} + +/* Titlebar Space */ +.titlebar-spacer[type="pre-tabs"] { + width: 30px !important; /* Original: 40px */ +} +.titlebar-spacer[type="post-tabs"] { + width: 25px !important; /* Original: 40px */ +} + +/* Tabbar Buttons */ +:root { + --newtab-button-minus-width-padding: 2px; + --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding)); +} +#new-tab-button > .toolbarbutton-icon, +#alltabs-button > .toolbarbutton-badge-stack { + /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */ + width: calc(2 * var(--newtab-button-width-padding) + 16px) !important; + + /* Original: --toolbarbutton-inner-padding */ + padding-left: var(--newtab-button-width-padding) !important; + padding-right: var(--newtab-button-width-padding) !important; +} + +@supports -moz-bool-pref("userChrome.tab.shareProton") { + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 1px !important; + } +} +@supports -moz-bool-pref("userChrome.tab.photon") { + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 0 !important; + } +} + +:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { + --scrollbtn-inner-padding: 1px; + --scrollbtn-outer-padding: 3px; +} +#scrollbutton-up { + padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */ + padding-right: var(--scrollbtn-outer-padding, 4px) !important; +} +#scrollbutton-down { + padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */ + padding-right: var(--scrollbtn-inner-padding, 4px) !important; +} + +:root:not([uidensity="touch"]) #new-tab-button, +#alltabs-button { + --toolbarbutton-outer-padding: 1px; /* Original: 2px*/ +} + +/* Tab - Max Size */ +@supports -moz-bool-pref("userChrome.tab.shareProton") { + :root { + --tab-max-width: 240px; + } +} +@supports -moz-bool-pref("userChrome.tab.photon") { + :root { + --tab-max-width: 225px; + } +} +.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + max-width: var(--tab-max-width) !important; /* Original: 225px */ +} + +/* neighbouring tabs should "pinch" together */ +@supports -moz-bool-pref("userChrome.tab.shareProton") { + .tabbrowser-tab { + padding-inline: 1px !important; + } + .tabbrowser-tab:not([last-visible-tab]) { + margin-inline-end: -0.5px !important; + } +} +@supports -moz-bool-pref("userChrome.tab.photon") { + .tabbrowser-tab { + padding-inline: 0 !important; + } +} + +/*= Tab Bar - Reduce Height, Show more contents ==============================*/ +/* for Extra Drag Space */ +:root { + --space-above-tabbar: 0px; /* If you want drag space, set to 8px */ +} +:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) + var(--space-above-tabbar)); +} +:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, +:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: var(--space-above-tabbar) !important; +} + +/* Toolbar Height */ +@supports -moz-bool-pref("userChrome.tab.shareProton") { + :root:not([uidensity="touch"]) #TabsToolbar { + --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ + } + + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } +} + +@supports -moz-bool-pref("userChrome.tab.photon") { + #TabsToolbar { + --tab-min-height: 33px !important; + --toolbarbutton-inner-padding: unset !important; + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; + } + :root[uidensity="touch"] #TabsToolbar { + --tab-min-height: 41px !important; + } + #tabbrowser-tabs, + #tabbrowser-arrowscrollbox, + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + min-height: var(--tab-min-height) !important; + } + + /* Top Margin */ + .tab-background, + .tab-content { + margin-top: 0 !important; + } +} + +@supports -moz-bool-pref("userChrome.tab.original") { + .toolbar-items, + .tabbrowser-tab { + --tabbar-max-height: 38px; + max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); + } + :root[uidensity="compact"] .toolbar-items, + :root[uidensity="compact"] .tabbrowser-tab { + --tabbar-max-height: 36px; + } + :root[uidensity="touch"] .toolbar-items, + :root[uidensity="touch"] .tabbrowser-tab { + --tabbar-max-height: 45px; + } +} +@supports -moz-bool-pref("userChrome.tab.proton") { + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } +} + +/* Scroll Button - Size Fix */ +:root #tabbrowser-arrowscrollbox { + --scrollbtn-vertical-padding: 3px; + --scrollbtn-vertical-border: 2px; + --scrollbtn-border-radius: 7px; +} +#scrollbutton-up, +#scrollbutton-down { + /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */ + /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */ + padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; + padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; + + /* Original: 4px */ + border-top-width: var(--scrollbtn-vertical-border, 4px) !important; + border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important; + /* Original: calc(var(--tab-border-radius) + 4px) = 8px */ + border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important; +} + +:root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] { + height: calc( + var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px + ); /* Compact: 28px, Normal: 33px, Touch: 38px */ +} + +/* Pinned Tab - Titlechanged Indicator position fix */ +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important; +} +:root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), +:root[uidensity="compact"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important; +} +:root[uidensity="touch"] + .tabbrowser-tab:is([image], [pinned]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), +:root[uidensity="touch"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; +} + +/*= Nav Bar - Reduce Width ===================================================*/ +#nav-bar:not([customizing]) toolbarspring { + min-width: 1px !important; + max-width: 100px !important; +} + +/*= URL Bar - Reduce Padding =================================================*/ +:root:not([uidensity="touch"]) #urlbar-container, +:root:not([uidensity="touch"]) #search-container { + padding-block: 3px !important; /* Original: 4px */ + margin-inline: 5px !important; /* Original: 5px */ +} +:root:not([uidensity="compact"]) #urlbar-container, +:root:not([uidensity="compact"]) #search-container { + padding-block: 2px !important; +} + +/* spread menu */ +:root:not([uidensity]) .urlbarView-row { + padding-block: 1px !important; /* Original: 2px */ +} +:root[uidensity="compact"] .urlbarView-row { + padding-block: 0px !important; +} + +:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { + padding-block: 8px !important; /* Original: 10px */ +} +:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { + padding-block: 2px !important; +} + +/*= BookMark Bar - Reduce Height =============================================*/ +:root[uidensity="compact"] #PersonalToolbar toolbarbutton { + margin-top: 0px; /* Original: 2px */ +} + +/*= Info Bar - Reduce Padding ================================================*/ +:root:not([uidensity]) #tab-notification-deck { + --infobar-message-margin: 0 4px 3px; +} +:root[uidensity="compact"] #tab-notification-deck { + --infobar-message-margin: 0 4px 2px; +} +#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { + margin: var(--infobar-message-margin, 0 4px 4px) !important; +} + +:root:not([uidensity]) notification-message[message-bar-type="infobar"] { + --infobar-vertical-margin: 7px; + --infobar-button-vertical-margin: 3px; +} +:root[uidensity="compact"] notification-message[message-bar-type="infobar"] { + --infobar-vertical-margin: 6px; + --infobar-button-vertical-margin: 2px; +} +.infobar > .icon { + margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ +} +.notification-message { + padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ +} +.notification-button-container > .notification-button { + margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */ +} +.notification-close { + margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */ +} + +/* Hard coded for compatibility - Disappearing phenomenon */ +.container.infobar::before { + content: ""; + display: block; + width: 2px; + position: absolute; + background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + top: 0; + inset-inline-start: 0; + height: 100%; + border-start-start-radius: 4px; + border-end-start-radius: 4px; +} + +/*= Menu - Reduce Padding ====================================================*/ +:root { + --menu-padding: 0.35em; /* Win7, 8: 0px */ +} +:root[uidensity="compact"] { + --menu-padding: 0.25em; +} +:root[uidensity="touch"] { + --menu-padding: 0.5em; +} +menupopup:not(.in-menulist) > menuitem, +menupopup > menu { + /* Original: 0.5em */ + padding-block: var(--menu-padding) !important; +} + +@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root:not([uidensity="touch"]) .menu-text, + :root:not([uidensity="touch"]) .menu-iconic-text { + padding-inline-end: 0 !important; /* Original: 2px */ + } + :root:not([uidensity="touch"]) .menupopup-arrowscrollbox { + padding-block: 1px !important; /* Original: 4px*/ + } + :root:not([uidensity="touch"]) #context-navigation:not([hidden]) { + padding: 0 0 1px !important; /* Original: 0 0 4px*/ + } + :root:not([uidensity="touch"]) .menu-right { + margin-right: 6px !important; /* Original: 12px */ + } +} + +@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + /* Remove border */ + menupopup > menuitem, + menupopup > menu { + padding-block: calc(var(--menu-padding) - 2px) !important; + } + + /* Make to original */ + :root:not([uidensity="touch"]) #context-navigation:not([hidden]) { + padding: 0 0 4px !important; + } +} + +@media (-moz-gtk-csd-available) { + menupopup > menu { + padding-inline-start: 0.5em; + } +} + +/* Arrow Icon Align to Right */ +.bookmark-item.subviewbutton > .menu-right { + margin-inline-end: 0 !important; +} + +/*= Bookmark Menu - Reduce Padding ===========================================*/ +:root { + --bookmark-menu-padding: 3px; +} +:root[uidensity="compact"] { + --bookmark-menu-padding: 1.5px; +} + +:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, +:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, +:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item, +:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem { + padding-block: var(--bookmark-menu-padding) !important; +} + +/*= Global Menu - Set Padding ================================================*/ +/* Vertical Align - Center & Height: 100% */ +#main-menubar { + -moz-box-flex: 1 !important; +} + +/* Rounding */ +#main-menubar > menu { + border-radius: 4px; +} + +/* Menubar item padding */ +:root { + --global-menubar-padding: 2px; +} +:root[uidensity="compact"] { + --global-menubar-padding: 1px; +} +:root[uidensity="touch"] { + --global-menubar-padding: 4px; +} +#main-menubar > menu { + padding-block: var(--global-menubar-padding) !important; +} + +/* Reduce items */ +#main-menubar > menu > menupopup menuitem, +#main-menubar > menu > menupopup menu { + padding-block: var(--bookmark-menu-padding) !important; +} + +/*= Popup Panel - Reduce padding =============================================*/ +#protections-popup-main-header-label { + height: unset !important; /* Original: 37.6px */ +} + +#identity-popup, +#permission-popup, +#protections-popup { + --vertical-section-padding: 0.8em; /* Original: 0.9em */ +} + +.protections-popup-footer-button, +.protections-popup-category { + min-height: 24px; /* Original: 32px */ + height: unset !important; +} + +/** Popup panel - Compact mode */ +/* Footer Button Height */ +:root[uidensity="compact"] .panel-footer.panel-footer-menulike > button { + padding: 3px 8px !important; +} +/* Footer Button Height */ +:root[uidensity="compact"] #protections-popup-trackersView-settings-button { + margin: 4px 8px 0 !important; +} +/* not cut off for Protection popup Footer on windows */ +:root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer { + padding: 3px 0 20px !important; +} +/* Button and disabled category in Protection popup */ +:root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button, +:root[uidensity="compact"] #protections-popup-multiView .protections-popup-category { + height: 20px !important; + min-height: 20px !important; +} +/* Footer Button in Tracking Content Panel */ +:root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike { + margin: 0 0 3px !important; +} +/* Identity popup header padding */ +:root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header { + padding: 2px 5px !important; +} +/* Text When There is no trackers */ +:root[uidensity="compact"] #protections-popup-no-trackers-found-description { + margin: 2em 4em !important; +} +/* Download Item margin */ +:root[uidensity="compact"] #downloadsListBox { + margin: 0 !important; +} + +/** Tab Bar - Connect to window ***********************************************/ +@supports -moz-bool-pref("userChrome.tab.connect_to_window") { + .tab-background { + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; + margin-bottom: 0px !important; + } + + .tab-content { + margin-top: var(--tab-block-margin); + } + + .tab-stack { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + + /* Remove line at Toolbar's top */ + #tabbrowser-tabs { + z-index: 1 !important; + } + #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { + overflow: hidden; + } +} + +/** Selected Tab - Color like toolbar *****************************************/ +@supports -moz-bool-pref("userChrome.tab.connect_to_window") { + :root:not(:-moz-lwtheme) { + /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ + --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ + } + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"]:-moz-lwtheme { + /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) + */ + background-image: linear-gradient(transparent, transparent), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + } +} + +/** Multi Selected Color - More Contrast **************************************/ +#tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]):-moz-lwtheme { + background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; +} + +.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { + background: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; +} +#TabsToolbar[brighttext] + .tab-background[multiselected="true"]:not([selected="true"]) + > .tab-loading-burst:not([bursting]) { + opacity: 0.15; +} + +/** Selected Tab - Box Shadow *************************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[visuallyselected="true"]:not(:focus) + > .tab-stack + > .tab-background:-moz-lwtheme { + /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) + Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ + box-shadow: 0 0 1px var(--toolbar-color) !important; + } + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; + } + + /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + z-index: 0 !important; + } +} + +/** Selected Tab - Bottom Rounded Corner **************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { + #tabbrowser-tabs { + --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --tab-corner-padding: 0px; + --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + } + + :root:not([customizing="true"]) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]) tab[visuallyselected] > stack::after { + content: "" !important; + + /* Box */ + display: block !important; + position: absolute !important; + z-index: 1 !important; + + /* Shape */ + width: var(--tab-corner-rounding) !important; + height: 100% !important; + + /* Color */ + fill: var(--toolbar-bgcolor) !important; + stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important; + -moz-context-properties: fill, stroke !important; + + /* Image */ + background-size: var(--tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; + } + :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, + :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color) !important; + } + + tab[visuallyselected] > stack::before { + left: var(--tab-corner-position) !important; + background-image: url("./icons/tab-bottom-corner-left.svg"); + } + tab[visuallyselected] > stack::after { + left: auto; + right: var(--tab-corner-position); + background-image: url("./icons/tab-bottom-corner-right.svg"); + } + + @media (-moz-gtk-csd-available) { + /* Fill color for GTK */ + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { + /* As GTK Toolbar's background-color + backround-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + stroke: transparent !important; + } + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + tab[visuallyselected] + > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + tab[visuallyselected] + > stack::after { + stroke: transparent !important; + } + } +} + +/** Selected Tab - Photon like contextline ************************************/ +@supports -moz-bool-pref("userChrome.tab.photon") { + :root[lwtheme-mozlightdark] #tabbrowser-tabs { + --tab-line-color: rgb(10, 132, 255) !important; + } + @media (-moz-gtk-csd-available) { + :root[lwtheme-mozlightdark]:not(:-moz-lwtheme) #tabbrowser-tabs { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } + } + + .tab-context-line { + display: -moz-inline-box !important; + height: 2px !important; + border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; + } + + .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { + /* Photon like color + Default: var(--tab-line-color, rgb(10, 132, 255)) + Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */ + background-color: var(--tab-line-color, rgb(10, 132, 255)) !important; + } + + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { + background-color: rgba(0, 0, 0, 0.2) !important; + opacity: 1 !important; + transform: none !important; + } + #TabsToolbar[brighttext] + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line { + background-color: rgba(255, 255, 255, 0.2) !important; + } + + /* Prevent identitiy color flashing */ + .tabbrowser-tab[usercontextid] .tab-context-line { + --identity-icon-color: none; + } + :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, + :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color) !important; + } + + /* Animation */ + .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { + opacity: 0 !important; + transform: scaleX(0) !important; + } + @media (prefers-reduced-motion: no-preference) { + .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { + transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */ + } + } + + /* Remove side's background color border */ + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + --tabs-border-color: rgba(0, 0, 0, 0.3) !important; + box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */ + } + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ + } + + /* Container Tab */ + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + margin: unset !important; + } +} + +/** Unselected Tab - Dynamic Separator ****************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { + #tabbrowser-arrowscrollbox { + position: absolute; + } +} + +@supports -moz-bool-pref("userChrome.tab.original") { + .tab-background::before, + #tabs-newtab-button::before { + /* Box Model */ + content: ""; + display: block; + position: absolute; + + /* Position */ + top: 50%; + transform: translateX(-2.5px) translateY(calc(-50% + 1px)); + + /* Bar shape */ + width: 1px; + height: 20px; + + /* Bar Color */ + opacity: 0; + background-color: var(--toolbarseparator-color); + } +} + +@supports -moz-bool-pref("userChrome.tab.proton") { + .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + /* Box Model */ + content: ""; + display: block; + position: absolute; + top: 50%; + + /* Bar shape */ + width: 1px; + height: 20px; + + /* Bar Color */ + opacity: 0; + background-color: var(--toolbarseparator-color); + } +} + +@supports -moz-bool-pref("userChrome.tab.proton") { + .tab-background::before { + transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important; + } + .tabbrowser-tab[last-visible-tab] .tab-background::after { + right: 0; + transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important; + } +} + +@supports -moz-bool-pref("userChrome.tab.shareProton") { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { + opacity: var(--tab-separator-opacity); + } +} +@supports -moz-bool-pref("userChrome.tab.original") { + #tabs-newtab-button:not(:hover, [open])::before { + opacity: var(--tab-separator-opacity); + } +} +@supports -moz-bool-pref("userChrome.tab.proton") { + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + opacity: var(--tab-separator-opacity); + } +} + +@supports -moz-bool-pref("userChrome.tab.shareProton") { + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) + .tab-background::before, + #navigator-toolbox:not([movingtab]) + #tabbrowser-arrowscrollbox[overflowing] + tab.tabbrowser-tab[first-visible-unpinned-tab] + .tab-background::before { + opacity: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.tab.original") { + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + ~ .tabbrowser-tab[afterhovered] + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + ~ #tabs-newtab-button::before { + opacity: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.tab.proton") { + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab:not([visuallyselected]) + .tab-background::before { + opacity: 0 !important; + } +} + +/* Animate */ +@media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.tab.shareProton") { + .tab-background::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } + @supports -moz-bool-pref("userChrome.tab.original") { + #tabs-newtab-button::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } + @supports -moz-bool-pref("userChrome.tab.proton") { + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } +} + +/* Latest Tab & New tab margin */ +@supports -moz-bool-pref("userChrome.tab.shareProton") { + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { + margin-inline-end: 1px !important; + } +} + +/** Unselected Tab - Static Separator *****************************************/ +@supports -moz-bool-pref("userChrome.tab.photon") { + .tabbrowser-tab[first-visible-tab]::before, + .tabbrowser-tab::after, + #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { + content: ""; + display: block; + } + .tabbrowser-tab::before, + .tabbrowser-tab::after { + --tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor); + border-left: var(--tab-divide-line) !important; + margin-block: 5px 4px !important; + opacity: 0.3 !important; + } + .tabbrowser-tab::before { + margin-inline-start: -1px !important; + } + + .tabbrowser-tab[first-visible-tab]::before, + :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, + .tabbrowser-tab:hover::after, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, + .tabbrowser-tab[multiselected]::after, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { + margin-top: var(--tabs-top-border-width) !important; + margin-bottom: 0 !important; + } + + /* Selected - Hide */ + .tabbrowser-tab[first-visible-tab][visuallyselected]::before, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, + #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, + .tabbrowser-tab[visuallyselected]::after { + border-color: var(--tabs-border-color) !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + opacity: 1 !important; + } +} + +/* New tab button - Looks like tab ********************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { + #tabs-newtab-button { + /* Original: + margin: 0 0 var(--tabs-navbar-shadow-size) !important + => Can't ovrride style. Therefore, we should approach it by bypass. + */ + --tabs-navbar-shadow-size: -1px; /* Original: 1px */ + --tabs-navbar-original-shadow-size: 1px; + --tab-corner-rounding: 4px; /* Hardcorded */ + + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; + + /* Corner Rounding Image */ + --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); + background-repeat: no-repeat; + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), + right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-size: var(--tab-corner-rounding); + + /* Corner Rounding Color */ + fill: transparent !important; + -moz-context-properties: fill !important; + } + + /* Corner Rounding Color */ + #tabs-newtab-button:hover { + fill: var(--toolbarbutton-hover-background) !important; + } + #tabs-newtab-button:hover:active { + fill: var(--toolbarbutton-active-background) !important; + } + @media (-moz-windows-accent-color-in-titlebar) { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + fill: color-mix( + in srgb, + -moz-accent-color-foreground 10%, + transparent + ) !important; /* Hardcorded for compatibility */ + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + fill: color-mix( + in srgb, + -moz-accent-color-foreground 15%, + transparent + ) !important; /* Hardcorded for compatibility */ + } + } + + /* '+'Icon */ + #tabs-newtab-button .toolbarbutton-icon { + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ + + padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) + calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); + fill-opacity: var(--toolbarbutton-icon-fill-opacity); + } +} + +/** New tab button - Smaller button *******************************************/ +@supports -moz-bool-pref("userChrome.tab.photon") { + #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; + + /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */ + --toolbarbutton-inner-padding: 6px; + } + :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: 4px; /* Photon: 6px */ + } + :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ + } +} + +/* New tab button - Smaller button ********************************************/ +@supports -moz-bool-pref("userChrome.tab.proton") { + :root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); + } + + :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 2px; + } + :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; + } +} + +/* Unloaded Tab - Contents Opacity ********************************************/ +#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content { + opacity: 0.7; +} + +/** Clipped tabs - Letters cleary *********************************************/ +#tabbrowser-tabs[closebuttons="activetab"] .tab-content:not([pinned]) { + padding-inline-start: 8px !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), +#tabbrowser-tabs[closebuttons="activetab"] + .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) { + mask-image: linear-gradient(to right, black 70%, transparent) !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]), +#tabbrowser-tabs[closebuttons="activetab"] + .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) { + mask-image: linear-gradient(to left, black 70%, transparent) !important; +} + +/** Clipped tabs - Show close button at hover *********************************/ +#tabbrowser-tabs[closebuttons="activetab"] + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected="true"]) { + display: -moz-inline-box !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + visibility: collapse !important; + opacity: 0; +} +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + visibility: visible !important; + opacity: 1; +} + +/* Animate */ +@media (prefers-reduced-motion: no-preference) { + /* Fade out */ + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + transition: opacity 0.1s var(--animation-easing-function) !important; + } + + /* Fade in */ + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + transition: opacity 0.25s var(--animation-easing-function) !important; + } +} + +/* Closed Button's icon thicker */ +.tabbrowser-tab .tab-content > .close-icon { + list-style-image: url("./icons/dismiss-filled.svg") !important; +} + +/* Closed Button's icon larger */ +.tab-close-button { + padding: 6px !important; /* Original: 7px */ +} +.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 1px !important; /* Original: 0px */ + width: 19px !important; /* Original: 17px */ +} + +/* Closed Button's padding reduce */ +#tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button { + margin-inline-end: calc( + (var(--inline-tab-padding) / -2) + 2px + ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/ + padding: 4px !important; /* Original: 7px */ + width: 20px !important; /* Original: 24px */ + height: 20px !important; /* Original: 24px */ +} +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 3px !important; /* Original: 0px */ + width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ +} + +/** Sound Tab - Hide Label ****************************************************/ +.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { + display: none !important; +} + +/** Sound Tab - Show with Favicons ********************************************/ +/* Makes the favicons always visible (also on hover) */ +.tab-icon-image:not([pinned]) { + opacity: 1 !important; +} + +/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ +.tab-icon-overlay:not([crashed]), +.tab-icon-overlay[pinned][crashed][selected] { + /* Position */ + top: 0 !important; + inset-inline-end: -9px !important; + z-index: 1 !important; + transform: translateX(-0.5px) translateY(-6px); + + /* Shape */ + padding: 1.5px !important; + border-radius: 10px !important; + width: 17px !important; + height: 17px !important; +} +.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + /* Color */ + color: currentColor !important; + stroke: transparent !important; + background: transparent !important; + fill-opacity: 0.8 !important; + opacity: 1 !important; +} +.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { + transform: translateX(4px); +} + +/* Animate */ +@media (prefers-reduced-motion: no-preference) { + .tab-icon-overlay:not([crashed]), + .tab-icon-overlay[pinned][crashed][selected] { + transition: 0.1s var(--animation-easing-function); + } + + .tab-label-container > .tab-label { + transition: transform 0.25s var(--animation-easing-function); + } +} + +/* None exist favicon - Size bigger */ +.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; +} +.tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; /* Favicon hidden */ +} +.tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); +} + +/* Busy - Show */ +.tab-throbber[busy], +.tab-icon-pending[busy] { + opacity: 1 !important; +} + +/* Busy - Overlay Position */ +.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { + transform: translateX(-0.5px) translateY(-6px); +} +.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] { + inset-inline-end: -9px !important; + margin-inline-end: 9.5px !important; + padding: 1.5px !important; +} + +/* Hover */ +.tab-icon-overlay:not([crashed])[soundplaying]:hover, +.tab-icon-overlay:not([crashed])[muted]:hover, +.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { + color: var(--toolbar-bgcolor, white) !important; + stroke: var(--lwt-tab-text, var(--toolbar-color)) !important; + background-color: var(--lwt-tab-text, var(--toolbar-color)) !important; + fill-opacity: 0.95 !important; +} + +#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { + color: var(--toolbar-bgcolor, black) !important; +} + +.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover { + padding: 0 !important; +} + +/** PictureInPicture Tab - Show PIP Icon **************************************/ +#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after, +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tab-content::after { + content: ""; +} +.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after { + /* Shape */ + display: -moz-inline-box !important; + width: 14px; + height: 14px; + background-size: 14px; + -moz-box-ordinal-group: 1 !important; + + /* Color */ + fill: currentColor; + opacity: 0.8; + -moz-context-properties: fill; + + /* Icon */ + background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); +} +.tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after { + opacity: 0.95; +} + +/* Close Button's position */ +.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { + -moz-box-ordinal-group: 2 !important; +} +#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { + margin-left: 7px !important; +} +#tabbrowser-tabs:not([closebuttons="activetab"]) + .tabbrowser-tab[pictureinpicture]:not([pinned]):hover + .tab-close-button { + margin-left: 2px !important; +} + +/** Container Tab - Color line at icon's bottom *******************************/ +@supports -moz-bool-pref("userChrome.tab.shareProton") { + .tab-context-line { + display: none; + } +} + +.tab-content:not([titlechanged])::before { + /* Box Model */ + content: ""; + display: block; + position: absolute !important; + transform: translate(9px, 12px) !important; + + /* Shape */ + border-bottom: 2px solid var(--identity-icon-color); + width: 25%; + opacity: 0.75; +} +.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 30px); + opacity: 1; +} +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 33px); +} + +/* Animate */ +@media (prefers-reduced-motion: no-preference) { + .tab-content:not([titlechanged])::before { + transition: 0.15s var(--animation-easing-function) !important; + transition-property: width, opacity; + } +} + +/* Pinned Tab */ +.tabbrowser-tab[pinned] .tab-content::before { + transform: translateY(12px) !important; + width: 16px; +} + +/* Pinned Tab - Titlechanged Indicator override */ +.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ + --dotted-identity-image: radial-gradient( + circle, + var(--identity-icon-color), + var(--identity-icon-color) 2px, + transparent 2px + ); + background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; + background-position-x: 32%, 50%, 70% !important; +} +:root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected="true"]), +:root[uidensity="compact"] + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ + background-position-x: 30%, 50%, 70% !important; +} + +/* Pinned Tab - Titlechanged & soundplaying */ +.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important; +} +:root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), +:root[uidensity="compact"] + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; +} + +/** Crashed Tab - Don't show Favicons *****************************************/ +.tab-icon-image[crashed] { + display: none !important; +} + +/** Library - Icons Replace ***************************************************/ +/*= Standard Folder - More Visible ===========================================*/ +/* on Toolbar and Menus */ +:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]), + /* in Sidebar, Library, Add/Edit Bookmark dialog */ + /* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */ + /* Need to overide!!, can not use :not() */ + :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container), + #editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]), + #editBMPanel_folderMenuList .folder-icon:not([id]), + /* Download Popup */ + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("./icons/folder.svg") !important; +} + +/* Standard Folder - Open */ +:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"], +:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(title, container, open) { + list-style-image: url("./icons/folder-open.svg") !important; +} + +/*= Other Folder - Inbox Icon ================================================*/ +/* on Menus */ +#PlacesToolbar #OtherBookmarks, + #BMB_bookmarksPopup #BMB_unsortedBookmarks, + #bookmarksMenuPopup #menu_unsortedBookmarks, + /* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks), + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____), + #editBMPanel_unfiledRootItem, + #editBMPanel_folderMenuList[selectedGuid="unfiled_____"] { + list-style-image: url("./icons/mail-inbox-all.svg") !important; +} + +/* Other Folder - Open */ +#PlacesToolbar #OtherBookmarks[open="true"], +#BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"], +#bookmarksMenuPopup #menu_unsortedBookmarks[open="true"], +:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks), +:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) { + list-style-image: url("./icons/mail-inbox.svg") !important; +} + +/*= Default Icon - Overide ===================================================*/ +/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */ + +/* Query */ +:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important; +} + +/* History */ +:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer), +:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { + list-style-image: url("chrome://browser/skin/history.svg") !important; +} + +/* Downloads */ +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important; +} + +/* Tag */ +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer), +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { + list-style-image: url("chrome://browser/skin/places/tag.svg") !important; +} + +/* Boomark */ +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg") !important; +} + +/* Bookmark Toolbar */ +#BMB_bookmarksPopup #BMB_bookmarksToolbar, /* Original: Default folder icon */ + #bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; +} + +/* Bookmark Menu */ +:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; +} + +/*= Default Icon - Open ======================================================*/ +/* Query */ +:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"] + > .menu-iconic-left + > .menu-iconic-icon { + transform: rotate(15deg) !important; +} + +/* History */ +:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer), +:-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) { + list-style-image: url("./icons/history-reverse.svg") !important; +} + +/* Tag */ +:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][tagContainer="true"][open="true"], +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer), +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) { + list-style-image: url("./icons/tag-open.svg") !important; +} + +/* Boomark */ +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important; +} + +/* Bookmark Toolbar */ +#BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"], +#bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"], +:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) { + list-style-image: url("./icons/bookmarksToolbar-open.svg") !important; +} + +/* Bookmark Menu */ +:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_menu________) { + list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ +} + +/*= Menubar - Icons ===========================================*/ +@-moz-document url("chrome://browser/content/places/places.xhtml") +{ + @media (-moz-gtk-csd-available) { + #organizeButton, + #viewMenu, + #maintenanceButton, + #back-button, + #forward-button, + #clearDownloadsButton { + fill: currentColor !important; + -moz-context-properties: fill !important; + } + + /* Add */ + #organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg") !important; + } + #viewMenu { + list-style-image: url("./icons/sort.svg") !important; + } + #maintenanceButton { + list-style-image: url("./icons/import-export.svg") !important; + } + + #clearDownloadsButton { + list-style-image: url("chrome://global/skin/icons/delete.svg") !important; + } + #clearDownloadsButton > .toolbarbutton-icon { + display: -moz-inline-box !important; + margin-top: 0; + margin-bottom: 0; + margin-inline-start: 0; + margin-inline-end: 2px; + } + + /* Replace */ + #back-button { + list-style-image: url("chrome://browser/skin/back.svg") !important; + } + #forward-button { + list-style-image: url("chrome://browser/skin/forward.svg") !important; + } + + #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, + #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1) !important; + } + } +} + +/** Panel - Icons *************************************************************/ +/*= Padding ==================================================================*/ +:root { + --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; +} + +@supports -moz-bool-pref("userChrome.panel.photon") { + :root { + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } + :root[uidensity="compact"] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px); + } + :root[uidensity="touch"] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); + } + :root { + /* Global */ + --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2); + + /* General Panel */ + --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; + + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc( + var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding) + ); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } +} + +#downloadsHistory .button-text, +.subviewbutton > .toolbarbutton-text { + padding-inline-start: var(--arrowpanel-menuicon-padding) !important; +} +.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + padding-inline-start: 0 !important; +} +#panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text, +#appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text { + padding-inline-start: var(--arrowpanel-menublank-padding) !important; +} +#appMenu-proton-update-banner .toolbarbutton-text { + margin-inline-start: 0 !important; +} + +#appMenu-multiView .subviewbutton::before, +#appMenu-proton-update-banner::before { + display: -moz-inline-box; + margin-inline-end: var(--arrowpanel-menuicon-padding); + width: 16px; + height: 16px; +} +#appMenu-proton-update-banner { + margin-bottom: 2px !important; +} +#appMenu-proton-update-banner::before { + margin-inline-start: var(--arrowpanel-menuitem-padding) !important; +} +#appMenu-fxa-status2, +#appMenu-zoom-controls2 { + align-items: center; + padding-top: var(--arrowpanel-menuimageblank-padding) !important; + padding-bottom: var(--arrowpanel-menuimageblank-padding) !important; +} +#appMenu-zoom-controls2::before { + margin-inline-end: 0 !important; +} + +.subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text { + margin-left: 16px !important; +} + +/* Icons Color */ +#appMenu-multiView .subviewbutton::before, +#appMenu-proton-update-banner::before, +#downloadsHistory .button-icon, +.subviewbutton > image { + fill: currentColor !important; + fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important; + -moz-context-properties: fill !important; +} +#appMenu-zoomReduce-button2 > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { + stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important; + -moz-context-properties: fill, stroke !important; +} +#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon { + stroke: var(--button-hover-bgcolor) !important; +} + +.subviewbutton[disabled="true"] > image { + /* Ghost icons when disabled */ + opacity: 0.4; +} + +/*= Panel - Main =============================================================*/ +#appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon { + display: -moz-inline-box !important; + margin-inline-start: var(--arrowpanel-menuicon-padding); + -moz-box-ordinal-group: 0 !important; +} + +#appMenu-proton-update-banner::before { + content: url("./icons/whatsnew.svg"); +} +#appMenu-fxa-status2::before { + /* Don't exist img tag */ + content: url("chrome://browser/skin/fxa/avatar-empty.svg"); +} +#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])::before { + display: none; +} +#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"]) + #appMenu-fxa-label2::before { + /* url("https://profile.accounts.firefox.com/v1/avatar/a") */ + content: ""; + border-radius: 50% !important; + background-size: 16px !important; + background-image: var(--avatar-image-url) !important; +} + +@supports -moz-bool-pref("userChrome.panel.proton") { + #appMenu-new-tab-button2 { + list-style-image: url("chrome://browser/skin/new-tab.svg"); + } +} +@supports -moz-bool-pref("userChrome.panel.photon") { + #appMenu-new-tab-button2, /* Seperate */ + #appMenu-passwords-button, /* Seperate */ + #appMenu-extensions-themes-button, + #appMenu-save-file-button2, /* Seperate */ + #appMenu-find-button2, + #appMenu-more-button2, /* Seperate */ + #appMenu-help-button2, + #appMenu-quit-button2 /* Seperate */ { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + padding-top: var(--arrowpanel-menuitemblank-padding) !important; + padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; + } + #appMenu-zoom-controls2 { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + } +} + +#appMenu-new-window-button2 { + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} + +#appMenu-bookmarks-button { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} +#appMenu-history-button { + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +@supports -moz-bool-pref("userChrome.panel.proton") { + #appMenu-passwords-button { + list-style-image: url("chrome://browser/skin/login.svg"); + } + #appMenu-extensions-themes-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); + } +} + +#appMenu-print-button2 { + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +@supports -moz-bool-pref("userChrome.panel.proton") { + #appMenu-save-file-button2 { + list-style-image: url("chrome://browser/skin/save.svg"); + } + #appMenu-find-button2 { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } + #appMenu-zoom-controls2::before { + content: url("./icons/screenshot.svg"); + } +} + +#appMenu-settings-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +@supports -moz-bool-pref("userChrome.panel.proton") { + #appMenu-more-button2 { + list-style-image: url("chrome://browser/skin/ion.svg"); + } + #appMenu-help-button2 { + list-style-image: url("chrome://global/skin/icons/help.svg"); + } + + #appMenu-quit-button2 { + list-style-image: url("./icons/quit.svg"); + } +} + +/*= Panel - Account ==========================================================*/ +#PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, +#PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon { + width: 16px !important; + height: 16px !important; +} + +/* Default */ +#fxa-manage-account-button::before { + content: ""; + display: -moz-inline-box; + width: 32px !important; + height: 32px !important; + border-radius: 50%; + background-size: 32px; + background-image: var(--avatar-image-url); + margin-inline-end: var(--arrowpanel-menuicon-padding); +} + +.syncNowBtn { + visibility: visible !important; + -moz-box-ordinal-group: 1 !important; + margin-inline-end: var(--arrowpanel-menuicon-padding); +} +#PanelUI-fxa-menu-setup-sync-button { + list-style-image: url("chrome://browser/skin/sync.svg"); +} + +#PanelUI-fxa-menu-connect-device-button { + list-style-image: url("chrome://browser/skin/fxa/add-device.svg"); +} +#PanelUI-fxa-menu-sendtab-button { + list-style-image: url("./icons/send-to-device.svg"); +} +#PanelUI-fxa-menu-sync-prefs-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#PanelUI-fxa-menu-account-signout-button { + list-style-image: url("./icons/sign-out.svg"); +} +#PanelUI-remotetabs-view-managedevices::before { + /* Box */ + content: ""; + padding-inline-end: 16px; + padding-block: 1px; + margin-inline-end: var(--arrowpanel-menuicon-padding); + + /* Color */ + fill: currentColor; + fill-opacity: var(--toolbarbutton-icon-fill-opacity); + -moz-context-properties: fill; + + background-size: 16px; + background-repeat: no-repeat; + background-position: left center; + background-image: url("chrome://global/skin/icons/settings.svg"); +} + +.PanelUI-remotetabs-notabsforclient-label { + margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important; + padding-inline-start: var(--arrowpanel-menublank-padding) !important; +} + +/* Change Separator */ +#PanelUI-fxa-menu::before { + content: ""; + display: -moz-box; + border-bottom: 1px solid var(--panel-separator-color); + margin: var(--panel-separator-margin); + padding: 0; +} +#PanelUI-fxa-menu > :first-child { + -moz-box-ordinal-group: 0; +} +#PanelUI-sign-out-separator { + display: none; +} +.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""], /* Legacy */ + .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] { + list-style-image: url("./icons/send-to-device.svg"); +} +.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), /* Legacy */ + .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +/*= Panel - Bookmark =========================================================*/ +#panelMenuBookmarkThisPage { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); +} +panelMenuBookmarkThisPage[starred] { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +#panelMenu_searchBookmarks { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#panelMenu_viewBookmarksToolbar { + list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); +} + +#panelMenu_showAllBookmarks { + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} + +/*= Panel - History ==========================================================*/ +#appMenuRecentlyClosedTabs { + list-style-image: url("chrome://browser/skin/tab.svg"); +} +#appMenuRecentlyClosedWindows { + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenuRestoreSession { + list-style-image: url("./icons/restore-session.svg"); +} +#appMenuClearRecentHistory { + list-style-image: url("chrome://browser/skin/forget.svg"); +} + +#PanelUI-historyMore { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +#appMenu-library-recentlyClosedTabs { + list-style-image: url("./icons/movetowindow-16.svg"); +} +#appMenu-library-recentlyClosedWindows { + list-style-image: url("./icons/restore-session.svg"); +} + +/*= Panel - More tools =======================================================*/ +#appmenu-moreTools-button { + list-style-image: url("chrome://browser/skin/customize.svg"); +} + +/* Web Developer Tools */ +#appmenu-developer-tools-view .subviewbutton:nth-child(1), +#PanelUI-developer-tools-view .subviewbutton:nth-child(1) { + list-style-image: url("./icons/developer.svg"); +} +/* Task Manager */ +#appmenu-developer-tools-view .subviewbutton:nth-child(2), +#PanelUI-developer-tools-view .subviewbutton:nth-child(2) { + list-style-image: url("./icons/performance.svg"); +} +/* Remote Debugging - Edge bug.svg */ +#appmenu-developer-tools-view .subviewbutton:nth-child(3), +#PanelUI-developer-tools-view .subviewbutton:nth-child(3) { + list-style-image: url("./icons/bug.svg"); +} +/* Browser Toolbox - Edge webdeveloper.svg */ +#appmenu-developer-tools-view .subviewbutton:nth-child(4), +#PanelUI-developer-tools-view .subviewbutton:nth-child(4) { + list-style-image: url("./icons/window-dev-tools.svg"); +} +/* Browser Content Toolbaox - */ +#appmenu-developer-tools-view .subviewbutton:nth-child(5), +#PanelUI-developer-tools-view .subviewbutton:nth-child(5) { + list-style-image: url("./icons/command-frames.svg"); +} +/* Browser Console */ +#appmenu-developer-tools-view .subviewbutton:nth-last-child(5), +#PanelUI-developer-tools-view .subviewbutton:nth-last-child(5) { + list-style-image: url("chrome://devtools/skin/images/command-console.svg"); +} +/* Responsive Design Mode */ +#appmenu-developer-tools-view .subviewbutton:nth-last-child(4), +#PanelUI-developer-tools-view .subviewbutton:nth-last-child(4) { + list-style-image: url("./icons/command-responsivemode.svg"); +} +/* Eyedropper */ +#appmenu-developer-tools-view .subviewbutton:nth-last-child(3), +#PanelUI-developer-tools-view .subviewbutton:nth-last-child(3) { + list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg"); +} +/* Page Source - Edge file-search.svg */ +#appmenu-developer-tools-view .subviewbutton:nth-last-child(2), +#PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) { + list-style-image: url("./icons/document-search.svg"); +} +/* Extensions for Devel */ +#appmenu-developer-tools-view .subviewbutton:nth-last-child(1), +#PanelUI-developer-tools-view .subviewbutton:nth-last-child(1) { + list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg"); +} +#appmenu-developer-tools-view .subviewbutton:last-child { + margin-bottom: 6px !important; +} + +/*= Panel - Help =============================================================*/ +#appMenu_menu_openHelp { + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu_feedbackPage { + list-style-image: url("./icons/send.svg"); +} +#appMenu_helpSafeMode { + list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg"); +} +#appMenu_troubleShooting { + list-style-image: url("chrome://global/skin/icons/more.svg"); +} +#appMenu_help_reportSiteIssue { + list-style-image: url("chrome://global/skin/icons/lightbulb.svg"); +} +#appMenu_menu_HelpPopup_reportPhishingtoolmenu { + list-style-image: url("chrome://global/skin/icons/warning.svg"); +} +#appMenu_aboutName { + list-style-image: url("chrome://global/skin/icons/info.svg"); +} + +/*= Panel - Library ==========================================================*/ +#appMenu-library-bookmarks-button { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} +#appMenu-library-history-button { + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-library-downloads-button { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +/*= Panel - Downloads ========================================================*/ +#downloadsHistory { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#downloadsHistory .box-inherit.button-box { + display: -moz-inline-box !important; +} + +/*= Toolbar - Overflow Menu ==================================================*/ +#overflowMenu-customize-button { + list-style-image: url("chrome://browser/skin/customize.svg"); +} + +/*= Tabbar - All Tab Menu ====================================================*/ +#allTabsMenu-undoCloseTab { + list-style-image: url("chrome://global/skin/icons/undo.svg"); +} +#allTabsMenu-searchTabs { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#allTabsMenu-containerTabsButton { + list-style-image: url("./icons/container-openin-16.svg"); +} + +#allTabsMenu-hiddenTabsButton { + list-style-image: url("./icons/password-hide.svg"); +} + +#allTabsMenu-containerTabsView .subviewbutton:last-child { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +/*= BMB_bookmarksPopup =======================================================*/ +#BMB_viewBookmarksSidebar { +} +#BMB_bookmarksShowAllTop, +#BMB_bookmarksShowAll { + --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#BMB_bookmarksToolbar { + --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); +} + +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #BMB_bookmarksShowAllTop { + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important; + } + #BMB_bookmarksShowAllTop > .menu-iconic-left { + display: -moz-box !important; + } +} + +/*= protections-popup ========================================================*/ +#protections-popup-settings-button > .protections-popup-settings-icon, +#protections-popup-show-report-button > .protections-popup-show-report-icon { + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 1em; +} + +#protections-popup-settings-button > .protections-popup-settings-icon { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +#protections-popup-show-report-button > .protections-popup-show-report-icon { + /* chrome://browser/skin/controlcenter/dashboard.svg */ + list-style-image: url("icons/dashboard.svg"); +} + +/*= identity-popup ===========================================================*/ +#identity-popup-clear-sitedata-button, +#identity-popup-more-info { + padding-inline: 5px !important; +} + +#identity-popup-securityView-body { + margin-inline-start: 32px !important; /* Original: 10px */ +} + +#identity-popup-clear-sitedata-button { + list-style-image: url("./icons/broom.svg"); +} + +/*= sidebarMenu-popup ========================================================*/ +#identity-popup-more-info { + list-style-image: url("chrome://global/skin/icons/info.svg"); +} + +#sidebar-switcher-bookmarks { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +#sidebar-switcher-history { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +#sidebar-switcher-tabs { + list-style-image: url("chrome://browser/skin/tab.svg"); +} + +#sidebar-reverse-position { + list-style-image: url("chrome://browser/skin/sidebars-right.svg"); +} +#sidebar-box[positionend="true"] #sidebar-reverse-position { + /* Can't apply this. shadow dom */ + list-style-image: url("chrome://browser/skin/sidebars.svg"); +} + +#sidebarMenu-popup > .subviewbutton[data-l10n-id="sidebar-menu-close"] { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +/** Menu - Icons Layout *******************************************************/ +menupopup menuitem:not([type="checkbox"], [type="radio"]), +menupopup menu:not([type="checkbox"], [type="radio"]), +#main-menubar > menu { + -moz-appearance: none !important; /* Linux: menulist */ +} + +/* Icon */ +:not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), +:not(menu, #ContentSelectDropdown) + > menupopup + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), +#main-menubar > menu, +menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), +menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), +menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, +menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, +#blockedPopupDontShowMessage { + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); +} + +/* For native context menus on macOS */ +@supports -moz-bool-pref("widget.macos.native-context-menus") { + :not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { + list-style-image: var(--menuitem-image) !important; + } +} + +/* Padding */ +:root { + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); +} +:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), +:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), +menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), +menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), +menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, +menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, +#blockedPopupDontShowMessage { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; +} + +/* Menubar */ +#main-menubar > menu { + background-position: left var(--context-menu-background-padding-default) center !important; + padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important; + padding-inline-end: 3px; +} +#main-menubar > menu:first-child { + background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important; + padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important; +} +#main-menubar > menu > menupopup { + --menuitem-image: none; /* Prevent Image Inheritance */ +} + +/* Padding - Windows */ +@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + /* Checkbox */ + :root { + --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); + } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem[type="checkbox"][checked="false"] + > .menu-iconic-left { + padding-inline-start: var(--context-menu-text-padding); + } +} + +@media (-moz-os-version: windows-win7) { + :root { + --context-menu-background-padding-default: 2px; + } +} +@media (-moz-os-version: windows-win8) { + :root { + --context-menu-background-padding-default: 3px; + } +} +@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, + menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, + #blockedPopupDontShowMessage { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; + } +} +@media (-moz-os-version: windows-win10) { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding: 24px; /* 16px + 8px */ + --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); + } + + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, + menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, + #blockedPopupDontShowMessage { + padding-inline-start: var(--menu-background-padding-default) !important; + margin-left: 0 !important; + } +} + +/* Padding - Linux */ +@media (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding-default: 6px; + } + + #main-menubar > menu > .menubar-text { + padding-inline-start: 3px; + } +} + +/* Padding - Mac */ +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --context-menu-background-padding-default: 10px; + --context-menu-mac-padding: 21px; + } + + /* context menu width */ + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + #blockedPopupDontShowMessage { + padding-inline-end: var(--context-menu-background-padding) !important; + } + + /* text position */ + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text, + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text { + padding-inline-start: var(--context-menu-mac-padding) !important; + } + + /* Checkbox menuitem, None iconic menu */ + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"], + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) { + padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + } +} + +/*= Bookmark Menu - Layout ===================================================*/ +/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu + * #BMB_bookmarksPopup: looks like arrow panel + */ + +/* Empty Menu */ +menupopup menupopup[emptyplacesresult] .menu-text, +#PersonalToolbar menupopup[emptyplacesresult] .menu-text { + margin-inline-start: 0 !important; +} + +/* Bookmark Popup - As Arrow Panel */ +#BMB_bookmarksPopup, +#PersonalToolbar { + --context-menu-background-padding: var(--arrowpanel-menuitem-padding); +} + +/* Windows 7, 8 */ +@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + /* Global Menu */ + menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: 0 !important; + } + + /* Bookmark Popup - None icon menu */ + #BMB_bookmarksPopup, + #PersonalToolbar { + --arrowpanel-menuicon-padding: 9px; + } + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + margin-inline: var(--arrowpanel-menuitem-padding) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important; + } + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + padding-inline-start: var(--arrowpanel-menuicon-padding) !important; + } +} + +/* Windows */ +@media (-moz-os-version: windows-win10) { + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + margin-inline: var(--arrowpanel-menuitem-padding) !important; + padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } +} + +/* Linux */ +@media (-moz-gtk-csd-available) { + /* Global Menu */ + menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Bookmark Popup - Iconic menu */ + #BMB_bookmarksPopup .menu-iconic-text, + #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text { + padding-inline-start: 1px !important; + } + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 1px) !important; + } +} + +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + /* Bookmark Popup - As Arrow Panel */ + #PersonalToolbar menupopup menuitem, + #PersonalToolbar menupopup menu { + padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important; + } + + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important; + } +} + +/** Context Menu - Icons ******************************************************/ +/*= tabContextMenu ===========================================================*/ +#context_openANewTab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); +} + +#context_reloadTab, +#context_reloadSelectedTabs { + --menuitem-image: url("./icons/reload.svg"); +} +#context_toggleMuteTab, +#context_toggleMuteSelectedTabs { + --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); +} +#context_toggleMuteTab[muted], +#context_toggleMuteSelectedTabs[muted] { + --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); +} +#context_pinTab, +#context_pinSelectedTabs { + --menuitem-image: url("./icons/pin-tab.svg"); +} +#context_unpinTab, +#context_unpinSelectedTabs { + --menuitem-image: url("./icons/unpin-tab.svg"); +} +#context_duplicateTab, +#context_duplicateTabs { + --menuitem-image: url("./icons/notebook-subsection.svg"); +} + +#context_bookmarkTab, +#context_bookmarkSelectedTabs { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#context_moveTabOptions { + --menuitem-image: url("./icons/arrow-swap.svg"); +} +#context_sendTabToDevice { + --menuitem-image: url("./icons/send-to-device.svg"); +} + +#context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */ + #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { + /* At windows */ + --menuitem-image: url("./icons/share.svg"); +} +#context_reopenInContainer { + --menuitem-image: url("./icons/container-openin-16.svg"); +} +#context_selectAllTabs { + --menuitem-image: url("./icons/tab-multiple.svg"); +} + +#context_closeTab { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); +} +#context_closeTabOptions { +} +#context_undoCloseTab { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} + +/*= new-tab-button-popup =====================================================*/ +#new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"], +.new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} + +/*= toolbar-context-menu =====================================================*/ +.customize-context-manageExtension { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} +.customize-context-removeExtension { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +.customize-context-reportExtension { + --menuitem-image: url("./icons/send.svg"); +} + +.customize-context-moveToPanel { + --menuitem-image: url("chrome://browser/skin/pin-12.svg"); +} +.toolbar-context-autohide-downloads-button { + --menuitem-image: url("./icons/password-hide.svg"); +} +.customize-context-removeFromToolbar { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +#toolbar-context-openANewTab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); +} + +#toolbar-context-reloadSelectedTab, +#toolbar-context-reloadSelectedTabs { + --menuitem-image: url("./icons/reload.svg"); +} +#toolbar-context-bookmarkSelectedTab, +#toolbar-context-bookmarkSelectedTabs { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#toolbar-context-selectAllTabs { + --menuitem-image: url("./icons/tab-multiple.svg"); +} +#toolbar-context-undoCloseTab { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} + +#toggle_toolbar-menubar { + /* checkbox */ + /* --menuitem-image: url("./icons/calendar-agenda.svg"); */ +} +#toggle_PersonalToolbar { + /* Also placeContext */ + --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); +} + +menuitem.viewCustomizeToolbar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); +} + +/*= blockedPopupOptions ======================================================*/ +#blockedPopupAllowSite { + --menuitem-image: url("chrome://global/skin/icons/check.svg"); +} +#blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); +} +#blockedPopupDontShowMessage { + /* checkbox */ + --menuitem-image: url("chrome://global/skin/icons/blocked.svg"); +} + +/*= autohide-context =========================================================*/ +#autohide-context > menuitem[data-l10n-id="full-screen-autohide"] { + /* checkbox */ +} + +#autohide-context > menuitem[data-l10n-id="full-screen-exit"] { + --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg"); +} + +/*= contentAreaContextMenu ===================================================*/ +#context-viewsource-goToLine { + --menuitem-image: url("./icons/text-number-format.svg"); +} +#context-viewsource-wrapLongLines { + /* checkbox */ + /* --menuitem-image: url("./icons/arrow-sort-down-lines.svg"); */ +} + +#context-viewsource-highlightSyntax { + /* checkbox */ + /* --menuitem-image: url("./icons/code.svg"); */ +} + +#spell-no-suggestions { + --menuitem-image: url("./icons/text-proofing-tools.svg"); +} +#spell-add-to-dictionary { + --menuitem-image: url("./icons/book-add.svg"); +} +#spell-undo-add-to-dictionary { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} + +#context-openlinkincurrent { + --menuitem-image: url("./icons/link-square.svg"); +} +#context-openlinkincontainertab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); +} +#context-openlinkintab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); +} +#context-openlinkinusercontext-menu { + --menuitem-image: url("./icons/container-openin-16.svg"); +} +#context-openlink { + --menuitem-image: url("chrome://browser/skin/window.svg"); +} +#context-openlinkprivate { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); +} + +#context-bookmarklink { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#context-savelink { + --menuitem-image: url("chrome://browser/skin/save.svg"); +} +#context-savelinktopocket { + --menuitem-image: url("./icons/pocket-outline.svg"); +} +#context-copyemail { + --menuitem-image: url("chrome://browser/skin/mail.svg"); +} +#context-copylink { + --menuitem-image: url("./icons/link.svg"); +} +#context-sendlinktodevice { + --menuitem-image: url("./icons/send-to-device.svg"); +} + +#context-media-play { + --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); +} +#context-media-pause { + --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); +} +#context-media-mute { + --menuitem-image: url("chrome://global/skin/media/audio-muted.svg"); +} +#context-media-unmute { + --menuitem-image: url("chrome://global/skin/media/audio.svg"); +} +#context-media-playbackrate { + --menuitem-image: url("./icons/time-picker.svg"); +} +#context-media-loop { + /* checkbox */ + /* --menuitem-image: url("./icons/arrow-repeat-all.svg"); */ +} +#context-leave-dom-fullscreen { + --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg"); +} +#context-video-fullscreen { + --menuitem-image: url("chrome://global/skin/media/fullscreenEnterButton.svg"); +} +#context-media-hidecontrols { + --menuitem-image: url("./icons/eye-hide.svg"); +} +#context-media-showcontrols { + --menuitem-image: url("./icons/eye-show.svg"); +} + +#context-viewvideo { + --menuitem-image: url("./icons/video.svg"); +} +#context-video-pictureinpicture { + /* checkbox */ + /* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */ +} + +#context-reloadimage { + --menuitem-image: url("./icons/image-arrow-counterclockwise.svg"); +} +#context-viewimage { + --menuitem-image: url("./icons/image-add.svg"); +} +#context-saveimage { + --menuitem-image: url("./icons/image.svg"); +} +#context-video-saveimage { + --menuitem-image: url("./icons/video-snapshot.svg"); +} +#context-savevideo { + --menuitem-image: url("./icons/video.svg"); +} +#context-saveaudio { + --menuitem-image: url("chrome://global/skin/media/audio.svg"); +} +#context-copyimage-contents { + --menuitem-image: url("./icons/image-copy.svg"); +} +#context-copyimage, +#context-copyvideourl, +#context-copyaudiourl { + --menuitem-image: url("./icons/link.svg"); +} +#context-sendimage, +#context-sendvideo, +#context-sendaudio { + --menuitem-image: url("chrome://browser/skin/mail.svg"); +} +#context-viewimageinfo { + --menuitem-image: url("chrome://global/skin/icons/info.svg"); +} +#context-viewimagedesc { + --menuitem-image: url("./icons/image-alt-text.svg"); +} +#context-setDesktopBackground { + --menuitem-image: url("./icons/resize-image.svg"); +} +#context-ctp-play { + --menuitem-image: url("chrome://global/skin/icons/plugin.svg"); +} +#context-ctp-hide { + --menuitem-image: url("chrome://global/skin/icons/plugin-blocked.svg"); +} + +#context-savepage { + --menuitem-image: url("chrome://browser/skin/save.svg"); +} +#context-pocket { + --menuitem-image: url("./icons/pocket-outline.svg"); +} +#context-sendpagetodevice { + --menuitem-image: url("./icons/send-to-device.svg"); +} +#fill-login { + --menuitem-image: url("./icons/password.svg"); +} +#fill-login-generated-password { + --menuitem-image: url("chrome://browser/skin/login.svg"); +} +#manage-saved-logins { + --menuitem-image: url("./icons/key-multiple.svg"); +} + +#context-undo { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} +#context-redo { +} + +#context-cut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); +} +#context-copy { + --menuitem-image: url("./icons/edit-copy.svg"); +} +#context-paste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} +#context-delete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +#context-selectall { + --menuitem-image: url("./icons/select-all-on.svg"); +} +#context-print-selection { + --menuitem-image: url("chrome://global/skin/icons/print.svg"); +} + +#context-take-screenshot { + --menuitem-image: url("chrome://browser/skin/screenshot.svg"); +} + +#context-keywordfield { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#context-searchselect, +#context-searchselect-private { + --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); +} + +#frame { + --menuitem-image: url("./icons/command-frames.svg"); +} + +#spell-check-enabled { + /* checkbox */ +} +#spell-add-dictionaries-main { + --menuitem-image: url("./icons/book-add.svg"); +} +#spell-dictionaries { + --menuitem-image: url("./icons/book.svg"); +} + +#context-bidi-text-direction-toggle { + --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg"); +} +#context-bidi-page-direction-toggle { + --menuitem-image: url("./icons/document-landscape-split-hint.svg"); +} + +#context-viewpartialsource-selection, +#context-viewsource { + --menuitem-image: url("./icons/document-search.svg"); +} +#context-inspect-a11y { + --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg"); +} +#context-inspect { + --menuitem-image: url("chrome://devtools/skin/images/command-pick.svg"); +} + +#context-media-eme-learnmore { + /* iconic */ +} + +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #context-back { + --menuitem-image: url("chrome://browser/skin/back.svg"); + } + #context-forward { + --menuitem-image: url("chrome://browser/skin/forward.svg"); + } + #context-reload { + --menuitem-image: url("./icons/reload.svg"); + } + #context-stop { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + + #context-bookmarkpage { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } +} + +/*= pictureInPictureToggleContextMenu ========================================*/ +#pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] { + --menuitem-image: url("./icons/eye-hide.svg"); +} + +/*= placeContext =============================================================*/ +#placesContext_open { + --menuitem-image: url("./icons/link-square.svg"); +} +#placesContext_openBookmarkContainer\:tabs, +#placesContext_openBookmarkLinks\:tabs { + --menuitem-image: url("./icons/movetowindow-16.svg"); +} +#placesContext_open\:newtab, +#placesContext_openContainer\:tabs, +#placesContext_openLinks\:tabs { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); +} +#placesContext_open\:newwindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); +} +#placesContext_open\:newprivatewindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); +} + +#placesContext_show_bookmark\:info, +#placesContext_show\:info, +#placesContext_show_folder\:info { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); +} +#placesContext_deleteBookmark, +#placesContext_deleteFolder, +#placesContext_delete, +#placesContext_delete_history { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +#placesContext_deleteHost { + --menuitem-image: url("./icons/eye-hide.svg"); +} +#placesContext_sortBy\:name { + --menuitem-image: url("./icons/text-sort-ascending.svg"); +} + +#placesContext_cut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); +} +#placesContext_copy { + --menuitem-image: url("./icons/edit-copy.svg"); +} +#placesContext_paste_group { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} + +#placesContext_new\:bookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#placesContext_new\:folder { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); +} +#placesContext_new\:separator { + --menuitem-image: url("./icons/vertical-line.svg"); +} + +#placesContext_paste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} + +#placesContext_createBookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#show-other-bookmarks_PersonalToolbar { + /* checkbox */ + /* --menuitem-image: url("./icons/star-line-horizontal.svg"); */ +} +#placesContext_showAllBookmarks { + --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} + +.openintabs-menuitem { + --menuitem-image: url("./icons/movetowindow-16.svg"); +} + +/*= pageActionContextMenu ====================================================*/ +.pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} +.pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} + +/*= customizationPanelItemContextMenu ========================================*/ +#customizationPanelItemContextMenuUnpin { + --menuitem-image: url("./icons/unpin-tab.svg"); +} +.customize-context-removeFromPanel { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} + +/*= customizationPaletteItemContextMenu ======================================*/ +.customize-context-addToToolbar { + --menuitem-image: url("chrome://devtools/skin/images/dock-bottom.svg"); +} +.customize-context-addToPanel { + --menuitem-image: url("chrome://browser/skin/menu.svg"); +} + +/*= customizationPanelContextMenu ============================================*/ +#customizationPanelContextMenu > menuitem[command="cmd_CustomizeToolbars"] { + --menuitem-image: url("chrome://browser/skin/customize.svg"); +} + +/*= downloads-button-autohide-panel ==========================================*/ +#downloads-button-autohide-checkbox { + /* checkbox */ +} + +/*= downloadsContextMenu =====================================================*/ +.downloadPauseMenuItem { + --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); +} +.downloadResumeMenuItem { + --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); +} +.downloadUnblockMenuItem { + --menuitem-image: url("./icons/checkmark-circle.svg"); +} +.downloadUseSystemDefaultMenuItem { + --menuitem-image: url("chrome://browser/skin/open.svg"); +} +.downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ +} +.downloadShowMenuItem { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); +} + +#downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { + --menuitem-image: url("./icons/link-square.svg"); +} +#downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { + --menuitem-image: url("./icons/link.svg"); +} + +.downloadRemoveFromHistoryMenuItem { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +#downloadsContextMenu > menuitem[command="downloadsCmd_clearList"], +#downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] { + --menuitem-image: url("./icons/broom.svg"); +} + +/*= SyncedTabsSidebarContext =================================================*/ +#syncedTabsOpenSelected { + --menuitem-image: url("./icons/link-square.svg"); +} +#syncedTabsOpenSelectedInTab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); +} +#syncedTabsOpenSelectedInWindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); +} +#syncedTabsOpenSelectedInPrivateWindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); +} + +#syncedTabsBookmarkSelected { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#syncedTabsCopySelected { + --menuitem-image: url("./icons/link.svg"); +} + +#syncedTabsOpenAllInTabs { + --menuitem-image: url("./icons/movetowindow-16.svg"); +} +#syncedTabsManageDevices { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} +#syncedTabsRefresh { + --menuitem-image: url("chrome://browser/skin/sync.svg"); +} + +/*= SyncedTabsSidebarTabsFilterContext =======================================*/ +#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} +#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); +} +#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { + --menuitem-image: url("./icons/edit-copy.svg"); +} +#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} +#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} + +#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] { + --menuitem-image: url("./icons/select-all-on.svg"); +} + +#syncedTabsRefreshFilter { + --menuitem-image: url("chrome://browser/skin/sync.svg"); +} + +/*= urlbar-input-container ===================================================*/ +#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} +#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { +} + +#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); +} +#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] { + --menuitem-image: url("./icons/edit-copy.svg"); +} +#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} +#paste-and-go { +} +#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] { + --menuitem-image: url("./icons/select-all-on.svg"); +} + +/*= textbox-contextmenu ======================================================*/ +/* Browser's Searchbar, Libray's Searchbar, Page Info */ +.textbox-contextmenu > menuitem[data-l10n-id="text-action-undo"] { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} +.textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] { +} + +.textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); +} +.textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] { + --menuitem-image: url("./icons/edit-copy.svg"); +} +.textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} +.textbox-contextmenu > menuitem[data-l10n-id="text-action-delete"] { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +.textbox-contextmenu > menuitem[data-l10n-id="text-action-select-all"] { + --menuitem-image: url("./icons/select-all-on.svg"); +} + +/* Only searchbar */ +menuitem.searchbar-paste-and-search { +} +menuitem.searchbar-clear-history { + --menuitem-image: url("chrome://browser/skin/forget.svg"); +} + +/*= context_sendTabToDevicePopupMenu =========================================*/ +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) + > .sync-menuitem.sendtab-target[clientType="phone"] { + --menuitem-image: url("chrome://browser/skin/device-phone.svg"); +} + +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) + > .sync-menuitem.sendtab-target[clientType="tablet"] { + --menuitem-image: url("chrome://browser/skin/device-tablet.svg"); +} + +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) + > .sync-menuitem.sendtab-target[clientType="desktop"] { + --menuitem-image: url("chrome://browser/skin/device-desktop.svg"); +} + +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) + > .sync-menuitem.sendtab-target[clientType="tv"] { + --menuitem-image: url("chrome://browser/skin/device-tv.svg"); +} + +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) + > .sync-menuitem.sendtab-target[clientType="vr"] { + --menuitem-image: url("chrome://browser/skin/device-vr.svg"); +} + +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) + > .sync-menuitem.sendtab-target[clientType=""] { + --menuitem-image: url("./icons/send-to-device.svg"); +} + +menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) + > .sync-menuitem.sendtab-target:not([clientType]) { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} + +/** Global Menu ***************************************************************/ +/*= main-menubar =============================================================*/ +#file-menu { + --menuitem-image: url("./icons/mail-inbox-all.svg"); +} +#edit-menu { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); +} +#view-menu { + --menuitem-image: url("./icons/content-view.svg"); +} +#history-menu { + --menuitem-image: url("chrome://browser/skin/history.svg"); +} +#bookmarksMenu { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#tools-menu { + --menuitem-image: url("./icons/toolbox.svg"); +} +#helpMenu { + --menuitem-image: url("chrome://global/skin/icons/help.svg"); +} + +/*= menu_FilePopup ===========================================================*/ +#menu_newNavigatorTab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); +} +#menu_newUserContext { +} +#menu_newNavigator { + --menuitem-image: url("chrome://browser/skin/window.svg"); +} +#menu_newPrivateWindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#menu_newFissionWindow { +} +#menu_newNonFissionWindow { +} +#menu_openLocation { +} +#menu_openFile { + --menuitem-image: url("chrome://browser/skin/open.svg"); +} +#menu_close { +} +#menu_closeWindow { +} + +#menu_savePage { + --menuitem-image: url("chrome://browser/skin/save.svg"); +} +#menu_sendLink { + --menuitem-image: url("chrome://browser/skin/mail.svg"); +} + +#menu_printPreview { +} +#menu_print { + --menuitem-image: url("chrome://global/skin/icons/print.svg"); +} + +#menu_importFromAnotherBrowser { + --menuitem-image: url("chrome://browser/skin/import.svg"); +} + +#goOfflineMenuitem { +} +#menu_FileQuitItem { + --menuitem-image: url("./icons/quit.svg"); +} + +/* Mange Containers */ +#menu_newUserContext menupopup menuitem:last-child { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} + +/*= menu_EditPopup ===========================================================*/ +#menu_undo { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} +#menu_redo { +} + +#menu_cut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); +} +#menu_copy { + --menuitem-image: url("./icons/edit-copy.svg"); +} +#menu_paste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} +#menu_delete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} + +#menu_selectAll { + --menuitem-image: url("./icons/select-all-on.svg"); +} + +#menu_find { + --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#menu_findAgain { +} + +#textfieldDirection-swap { +} + +#menu_preferences { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} + +/*= menu_viewPopup ===========================================================*/ +#viewToolbarsMenu { + --menuitem-image: url("./icons/toolbar.svg"); +} +#viewSidebarMenuMenu { + --menuitem-image: url("chrome://browser/skin/sidebars.svg"); +} + +#viewFullZoomMenu { + --menuitem-image: url("./icons/screenshot.svg"); +} +#pageStyleMenu { + --menuitem-image: url("./icons/document-css.svg"); +} +#repair-text-encoding { + --menuitem-image: url("chrome://browser/skin/characterEncoding.svg"); +} + +#fullScreenItem { + --menuitem-image: url("chrome://browser/skin/fullscreen.svg"); +} +#menu_readerModeItem { + --menuitem-image: url("chrome://browser/skin/reader-mode.svg"); +} +#menu_showAllTabs { +} + +#documentDirection-swap { + --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg"); +} + +/* view-menu-popup sub menu */ +#menu_customizeToolbars { + --menuitem-image: url("chrome://browser/skin/customize.svg"); +} + +/* viewFullZoomMenu sub menu */ +#menu_zoomEnlarge { + --menuitem-image: url("chrome://browser/skin/add-circle-fill.svg"); +} +#menu_zoomReduce { + --menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg"); +} +#menu_zoomReset { + --menuitem-image: url("./icons/resize.svg"); +} + +/*= goPopup ==================================================================*/ +#menu_showAllHistory { + --menuitem-image: url("chrome://browser/skin/history.svg"); +} +#sanitizeItem { + --menuitem-image: url("chrome://browser/skin/forget.svg"); +} + +#sync-tabs-menuitem { + --menuitem-image: url("chrome://browser/skin/sync.svg"); +} +#historyRestoreLastSession { + --menuitem-image: url("./icons/restore-session.svg"); +} +#hiddenTabsMenu { +} +#historyUndoMenu { + --menuitem-image: url("chrome://browser/skin/tab.svg"); +} +#historyUndoWindowMenu { + --menuitem-image: url("chrome://browser/skin/window.svg"); +} + +/* sub menu */ +#historyUndoPopup .restoreallitem { + --menuitem-image: url("./icons/movetowindow-16.svg"); +} +#historyUndoWindowPopup .restoreallitem { + --menuitem-image: url("./icons/restore-session.svg"); +} + +/*= bookmarksMenuPopup =======================================================*/ +#bookmarksShowAll { + --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} + +#menu_bookmarkThisPage, +#menu_bookmarkAllTabs { + --menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg"); +} +#menu_bookmarkThisPage[data-l10n-id="menu-bookmark-edit"] { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} + +#bookmarksToolbarFolderMenu { +} +#menu_unsortedBookmarks { +} +#menu_mobileBookmarks { +} + +/*= menu_ToolsPopup ==========================================================*/ +#menu_openDownloads { + --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#menu_openAddons { + --menuitem-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#sync-setup { + --menuitem-image: url("chrome://browser/skin/fxa/avatar-empty.svg"); +} +#sync-enable { +} +#sync-unverifieditem { +} +#sync-syncnowitem { +} +#sync-reauthitem { +} + +#webDeveloperMenu, /* Legacy */ + #browserToolsMenu { + --menuitem-image: url("./icons/developer.svg"); +} +#menu_pageInfo { + --menuitem-image: url("./icons/document-endnote.svg"); +} + +/* menuWebDeveloperPopup sub menu */ +#enableDeveloperTools { +} +#menu_devToolbox { +} +#menu_taskManager { + --menuitem-image: url("./icons/performance.svg"); +} +#menu_devtools_remotedebugging { + --menuitem-image: url("./icons/bug.svg"); +} +#menu_browserToolbox { + --menuitem-image: url("./icons/window-dev-tools.svg"); +} +#menu_browserContentToolbox { + --menuitem-image: url("./icons/command-frames.svg"); +} +#menu_browserConsole { + --menuitem-image: url("chrome://devtools/skin/images/command-console.svg"); +} +#menu_responsiveUI { +} +#menu_eyedropper { +} +#menu_pageSource { + --menuitem-image: url("./icons/document-search.svg"); +} +#extensionsForDevelopers { + --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg"); +} + +/*= menu_HelpPopup ===========================================================*/ +#menu_openHelp { + --menuitem-image: url("chrome://global/skin/icons/help.svg"); +} +#feedbackPage { + --menuitem-image: url("./icons/send.svg"); +} +#helpSafeMode { + --menuitem-image: url("chrome://devtools/skin/images/debugging-workers.svg"); +} +#troubleShooting { + --menuitem-image: url("chrome://global/skin/icons/more.svg"); +} +#help_reportSiteIssue { + --menuitem-image: url("chrome://global/skin/icons/lightbulb.svg"); +} +#menu_HelpPopup_reportPhishingtoolmenu { + --menuitem-image: url("chrome://global/skin/icons/warning.svg"); +} +#menu_HelpPopup_reportPhishingErrortoolmenu { +} + +#aboutName { + --menuitem-image: url("chrome://global/skin/icons/info.svg"); +} + +#helpPolicySupport { +} + +/** Libray Menu ***************************************************************/ +/*= organizeButtonPopup ======================================================*/ +#newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); +} +#newfolder { + --menuitem-image: url("./icons/folder.svg"); +} +#newseparator { + --menuitem-image: url("./icons/vertical-line.svg"); +} + +#orgUndo { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); +} +#orgRedo { +} + +#orgCut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); +} +#orgCopy { + --menuitem-image: url("./icons/edit-copy.svg"); +} +#orgPaste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); +} +#orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} + +#orgSelectAll { + --menuitem-image: url("./icons/select-all-on.svg"); +} + +#orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); +} + +/*= viewMenuPopup ============================================================*/ +#viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); +} +#viewSort { + --menuitem-image: url("./icons/text-sort-ascending.svg"); +} + +/*= maintenanceButtonPopup ===================================================*/ +#backupBookmarks { + --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); +} +#fileRestoreMenu { +} + +#fileImport { + --menuitem-image: url("chrome://browser/skin/save.svg"); +} +#fileExport { + --menuitem-image: url("chrome://browser/skin/open.svg"); +} + +#browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); +} diff --git a/userContent.css b/userContent.css new file mode 100644 index 0000000..2fb1f2e --- /dev/null +++ b/userContent.css @@ -0,0 +1,2355 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +@-moz-document url("about:home"), url("about:newtab") { + /** Activity Stream - Search Focus Border: like URL *************************/ + /* At DarkMode, Color */ + body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"], + body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"], + body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"], + body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] { + /* inner */ + --newtab-focus-border: rgba( + 0, + 221, + 255, + 0.5 + ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ + --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */ + + /* For Nightly */ + --newtab-primary-action-background: var(--newtab-focus-border) !important; + } + + /** Activity Stream - Web Site Icon: full size ******************************/ + .top-site-outer .tile { + overflow: hidden; + } + + .top-site-outer .tile .icon-wrapper { + width: 100% !important; /* Original: 48px */ + height: 100% !important; /* Original: 48px */ + } + + /** Activity Stream - Animate ***********************************************/ + @media (prefers-reduced-motion: no-preference) { + :root { + --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); + } + + /* Background */ + .top-site-outer, + #searchSubmit, + button.icon, + button.close-button { + transition: background 1.5s var(--animation-easing-function); + } + .top-site-outer:hover, + #searchSubmit:hover, + button.icon:hover, + button.close-button:hover { + transition: background 0.5s var(--animation-easing-function); + } + + /* Search Bar */ + .search-inner-wrapper input { + transition: 1s var(--animation-easing-function); + transition-property: border-color, box-shadow; + } + .search-wrapper .search-inner-wrapper:active input, + .search-wrapper input:focus { + transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); + } + .search-wrapper .search-inner-wrapper:hover input { + border-color: var(--newtab-primary-action-background) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + } + + /** Activity Stream - Home Search Bar looks like proton *********************/ + /* Dropdown Colors */ + #root { + --newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */ + + /* Set search dropdown background */ + --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important; + --newtab-search-dropdown-color: var(--newtab-search-background-color) !important; + --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + #root { + /* Default Dark Mode */ + --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */ + } + } + .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root { + /* Light weight theme */ + --newtab-search-background-color: var(--lwt-sidebar-background-color); + } + + /* Padding */ + #searchSuggestionTable { + border-radius: 4px !important; + -moz-window-shadow: cliprounded; + } + + .contentSearchSuggestionTable .contentSearchOneOffItem { + width: 32px !important; + height: 32px !important; + + /* Margin */ + margin-block: 5px !important; + margin-inline-start: 5px !important; + margin-inline-end: 8px !important; + + /* Border */ + border-radius: 4px !important; + border-image: none !important; /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */ + border-inline-end: none !important; /* Original: 1px solid; */ + } + + #contentSearchSettingsButton::before { + content: url("chrome://global/skin/icons/settings.svg") !important; + display: -moz-inline-box; + + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + + /* Align */ + margin-inline-end: 5px; + vertical-align: -25%; + } + + /* Pointer */ + .contentSearchSuggestionTable .contentSearchOneOffItem, + #contentSearchSettingsButton { + cursor: pointer; + } + + /*- Fix Color For Nightly --------------------------------------------------*/ + .contentSearchSuggestionTable, + .contentSearchHeaderRow, + .contentSearchHeader, + .contentSearchSuggestionsContainer { + color: var(--newtab-text-primary-color) !important; + background: var(--newtab-search-background-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, + .contentSearchSuggestionTable .contentSearchSettingsButton:hover { + color: var(--newtab-text-primary-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, + .contentSearchSuggestionTable .contentSearchSettingsButton:hover, + .contentSearchSuggestionTable .contentSearchOneOffItem.selected { + background: var(--newtab-element-hover-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active, + .contentSearchSuggestionTable .contentSearchOneOffItem:active { + background: var(--newtab-element-active-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { + fill: var(--newtab-icon-secondary-color) !important; + } +} + +/** Error Page - Restore illustrations ****************************************/ +@-moz-document url-prefix("about:neterror"), + url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), + url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") +{ + /* Illustrations Position */ + #errorPageContainer, + .description-wrapper { + min-height: 300px; + background-position: left center; + background-repeat: no-repeat; + background-size: 38%; + } + + #errorPageContainer { + display: flex; + flex-direction: column; + } + .description-wrapper { + padding-inline-start: 38%; + } + + /* Container */ + .container { + min-width: var(--in-content-container-min-width); /* 13em */ + max-width: var(--in-content-container-max-width); /* 52em */ + } + + /* Text Position */ + #text-container { + margin: auto; + padding-inline-start: 38%; + } +} + +@-moz-document url-prefix("about:neterror?e=connectionFailure"), + url-prefix("about:neterror?e=netInterrupt"), + url-prefix("about:neterror?e=netTimeout"), + url-prefix("about:neterror?e=netReset"), + url-prefix("about:neterror?e=netOffline"), + url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") +{ + #errorPageContainer { + background-image: url("./icons/error-connection-failure.svg"); + } +} +@-moz-document url-prefix("about:neterror?e=dnsNotFound") { + #errorPageContainer { + background-image: url("./icons/error-server-not-found.svg"); + } +} +@-moz-document url-prefix("about:neterror?e=malformedURI") { + #errorPageContainer { + background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg"); + } +} +@-moz-document url-prefix("about:neterror?e=clockSkewError"), + url-prefix("about:neterror?e=nssFailure") { + #errorPageContainer { + background-image: url("./icons/blue-berror.svg"); + background-size: 18.5em; + } +} + +@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") +{ + .description-wrapper { + background-image: url("./icons/error-session-restore.svg"); + } +} + +@-moz-document url-prefix("about:neterror?e=fileNotFound") { + @media (min-width: 970px) { + .title { + background-image: url("chrome://global/skin/icons/info.svg") !important; + } + } + + #text-container { + padding-inline-start: 0; + } +} +@-moz-document url-prefix("about:tabcrashed") { + @media (min-width: 970px) { + .title { + background-image: url("chrome://browser/skin/tab-crashed.svg") !important; + } + } +} +@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") +{ + @media (min-width: 970px) { + .title { + background-image: url("chrome://browser/content/aboutRobots-icon.png") !important; + } + } +} +@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") +{ + @media (min-width: 970px) { + .title { + background-image: url("./icons/welcome-back.svg") !important; + } + } +} + +/** Fully Dark Mode ***********************************************************/ +/*= Fully Dark Mode - Dark Mode Colors =======================================*/ +/* 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-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), (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); + } + + /*= Addons.org =============================================================*/ + @-moz-document url-prefix("https://addons.mozilla.org") + { + /* Basic */ + .Page-content, + .SecondaryHero, + body, + main[aria-label="Content"] { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + /* Text */ + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .Page-content h1, + .Page-content h2, + .SearchResult-link, + .Home-SubjectShelf-link:link, + .Home-SubjectShelf-link:visited, + .DropdownMenuItem-link a, + .Select, + .Badge, + .Notice-generic, + .Notice-genericWarning, + .Notice-button, + .Paginate .Button.Paginate-item:first-child, + .Paginate .Button.Paginate-item:last-child, + .Paginate .Button.Paginate-item--current-page, + .Button--neutral, + .blog-entry-title, + .blogpost-nav * { + color: var(--in-content-text-color) !important; + } + .AutoSearchInput-suggestions-item:is(:active, :focus, :hover), + .AutoSearchInput-suggestions-item--highlighted, + .SecondaryHero-message-link, + .SecondaryHero-module-link, + .Card-contents a:not(.Button), + .Card-footer-link a, + .Card-shelf-footer-in-header a, + .SearchResult-link:is(:active, :focus, :hover), + .SearchResult:hover .SearchResult-link, + .Home-SubjectShelf-link:is(:active, :focus, :hover), + .DropdownMenuItem-link a:is(:active, :focus, :hover), + .AddonMeta .MetadataCard-title a:is(:active, :hover), + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover), + .AddonMeta .MetadataCard-content a:is(:active, :hover), + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover), + .Addon-summary a, + .RatingsByStar-count a:hover, + .RatingsByStar-star a:hover, + .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page), + .AddonTitle-author a, + .PermissionsCard-learn-more, + .DefinitionList a, + .ShowMoreCard-contents a, + .AddonDescription-contents a, + .AddonTitle a, + .TooltipMenu-opener, + .LanguageTools .Card-contents a, + .blog-entry-read-more-link, + .blogpost-nav-next.blogpost-nav-no-prev:hover p, + .blogpost-content-wrapper p a, + .blogpost-nav-prev:hover p, + .blogpost-nav-next:hover p { + color: var(--in-content-link-color) !important; + } + .SearchResult--meta-section, + .MetadataCard-title, + .MetadataCard-title a, + .MetadataCard-content a, + .CollectionSort-label, + .SearchResult-summary, + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link, + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link, + .PermissionsCard-subhead--optional, + .PermissionsCard-subhead--required, + .Definition-dt, + .RatingsByStar-count a, + .RatingsByStar-star a, + .Paginate-page-number, + .AddonSummaryCard-addonAverage, + .AddonReviewCard-authorByLine, + .UserReview-byLine, + .UserReview-reply-header, + .Home-heroHeader-subtitle, + .blog-entry-date, + .blogpost-breadcrumb *, + .AddonTitle-author, + .ExpandableCard-ToggleLink, + .SearchFilters-label, + .PromotedBadge-label--line { + color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-label--recommended { + color: color-mix(in srgb, #712b00 15%, #ff9400) !important; + } + + /* Background */ + .Button--action { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + .Select, + .Button--neutral, + .Button--neutral:link, + .Notice-button, + .AMInstallButton .AMInstallButton-loading-button { + background-color: var(--in-content-button-background) !important; + } + .Button--neutral.Button--micro:not(.Button--disabled):hover, + .Button--neutral:not(.Button--disabled):hover, + .Notice-button:hover { + background: var(--in-content-button-background-hover) !important; + } + .Button--action.Button--micro:not(.Button--disabled):hover, + .Button--action:not(.Button--disabled):hover { + background: var(--in-content-primary-button-background-hover) !important; + } + .ShowMoreCard-contents::after { + background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important; + } + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .Paginate, + .LandingPage-header, + .DropdownMenu-items, + .DropdownMenu-items::after, + .MetadataCard, + .AddonsCard-list, + .Card-footer, + .StaticAddonCard, + .blogpost-nav, + .blogpost-nav * { + background: var(--in-content-table-background) !important; + } + + .Paginate .Button.Paginate-item:is(:active, :hover) { + background: var(--in-content-button-background-hover) !important; + } + .Notice-generic, + .Notice-genericWarning { + background: color-mix( + in srgb, + var(--in-content-page-background) 40%, + var(--in-content-table-background) + ) !important; + } + + .LanguageTools-header-row { + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + } + .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) { + background-color: var(--in-content-box-background-odd) !important; + } + + /* Fill */ + .Icon-arrow-blue.SearchSuggestion-icon-arrow { + filter: hue-rotate(330deg) brightness(1.3) !important; + } + .SecondaryHero-module-icon { + filter: invert(85%) !important; + } + .Icon-magnifying-glass, + .Notice-icon { + filter: invert(65%) !important; + } + .PermissionsCard-learn-more .Icon, + .Permission .Icon { + filter: invert(100%) !important; + } + .Icon-heart { + filter: brightness(0) !important; + } + + /* Others */ + .DropdownMenu-items { + box-shadow: 0 0 2px var(--in-content-border-color) !important; + } + + .AutoSearchInput-query { + border: 1px solid var(--in-content-table-background) !important; + } + .AutoSearchInput-query:is(:hover, :focus) { + border-color: var(--in-content-primary-button-background) !important; + } + .AutoSearchInput-query:focus { + box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), + 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; + } + + .PromotedBadge-link--line { + border-color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-link--line:hover { + border-color: var(--in-content-button-background-hover) !important; + } + + .blog-entry-read-more-link { + border-color: var(--in-content-link-color) !important; + } + + .blogpost-nav-arrow-left .cls-1, + .blogpost-nav-arrow-right .cls-1 { + stroke: var(--in-content-text-color) !important; + } + + /* /developers/ */ + .DevHub-Navigation { + background: var(--in-content-page-background) !important; + } + .DevHub-Navigation.scheme-light ul li a, + .DevHub-content-copy h2, + .content p { + color: var(--in-content-page-color) !important; + } + .DevHub-callout-box { + background: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + } + + /*= Support.org ============================================================*/ + @-moz-document url-prefix("https://support.mozilla.org") + { + /* Basic */ + :root { + --color-blue-06: var(--in-content-link-color) !important; + --color-blue-07: var(--in-content-link-color-hover) !important; + --color-blue-09: var(--in-content-link-color-active) !important; + + --page-bg: var(--in-content-page-background) !important; + --color-white: var(--in-content-page-background) !important; + --color-shade-bg: var(--in-content-page-background) !important; + --color-marketing-gray-02: var(--card-outline-color) !important; + --color-inverse-bg: var(--in-content-page-color) !important; + --color-inverse: var(--in-content-page-background) !important; + --color-text: var(--in-content-page-color) !important; + --color-moz-text: var(--in-content-page-color) !important; + --color-moz-heading: var(--in-content-page-color) !important; + --color-text-light: var(--in-content-deemphasized-text) !important; + --color-link: var(--in-content-link-color) !important; + --color-success: var(--green-70) !important; + --color-warning: var(--yellow-80) !important; + --color-error: var(--red-60) !important; + --color-error-hover: var(--red-50) !important; + --color-moz-heading: #fff; + --color-moz-inverse-bg: var(red) !important; + --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent), + 0 0 0 2px var(--in-content-primary-button-background-active); + } + .warning { + --color-link: rgb(55, 255, 255) !important; + } + + body, + #main-content, + #instant-search-content, + #mzp-c-menu-panel-help, + .mzp-c-navigation, + .kbox-container { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + /* Text */ + .mzp-c-menu-category .mzp-c-menu-title, + .mzp-c-menu-item .mzp-c-menu-item-link, + .mzp-c-menu-item .mzp-c-menu-item-link > *, + .mzp-c-menu-item .mzp-c-menu-item-list a, + #doc-content .menu, + .document--content .menu, + .forum--entry-content .menu, + .tag-name a { + color: var(--in-content-page-color) !important; + } + + .ts-select-trigger, + input[type="date"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="text"], + input[type="time"], + input[type="url"], + select, + textarea, + #doc-content .button, + #doc-content .key, + .document--content .button, + .document--content .key, + .forum--entry-content .button, + .forum--entry-content .key { + color: var(--in-content-deemphasized-text) !important; + } + + .tag-list a { + color: var(--color-marketing-gray-10) !important; + } + .tag-list a:hover, + .sidebar-nav a:hover { + color: var(--color-link) !important; + } + .tag-list li { + background: var(--in-content-page-color) !important; + } + .tag-list li:hover { + background: var(--in-content-deemphasized-text) !important; + } + + /* Background */ + .sidebar-nav.topics, + .sidebar-nav.topics > li { + background: var(--in-content-page-background) !important; + } + .mzp-c-menu-panel { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + .mzp-c-menu-list-list, + .mzp-c-menu-list-list:hover { + color: var(--in-content-page-color) !important; + background: var(--in-content-box-background) !important; + } + .mzp-c-menu-list-item:focus, + .mzp-c-menu-list-item:hover { + background: var(--in-content-button-background-hover) !important; + } + + /* Fill */ + .sumo-nav--logo, + .sumo-nav--search-button, + .sumo-nav--toggle-button, + .card:not(.is-inverse) .card--icon-sm, + .mzp-c-menu-item-icon, + .mzp-c-menu-button-close, + .topic-article--icon, + .card--topic > .card--icon, + .mzp-c-details .is-summary button::before, + details .is-summary button::before, + summary::before, + .icon-button > button, + .search-button { + filter: invert(95%) !important; + } + button.markup-toolbar-button, + .mzp-c-modal-close .mzp-c-modal-button-close { + /*using 0.5 because in middle*/ + filter: invert(0.5) !important; + } + + /* Others */ + .support-callouts > .card.is-inverse { + background: #20133a !important; + } + .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) { + color: var(--in-content-page-color) !important; + } + + .sumo-button.secondary-button { + border-color: none !important; + } + .mzp-c-menu-panel { + border-color: var(--in-content-button-background-hover) !important; + } + .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title { + border-color: var(--in-content-page-color) !important; + } + + @media screen and (min-width: 768px) { + .mzp-c-menu-panel { + box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important; + } + } + .card--product, + .card--topic, + .card--article { + box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12), + 0 8px 12px 1px rgba(82, 82, 94, 0.04) !important; + } + } + + /*= Accounts.com ===========================================================*/ + @-moz-document url-prefix("https://accounts.firefox.com") + { + /* Basic */ + body { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + .button.primary-button, + .button[type="submit"]:not(.secondary-button), + .settings-button.primary-button, + .settings-button[type="submit"]:not(.secondary-button), + button.primary-button, + button[type="submit"]:not(.secondary-button) { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + + /* Text */ + header h1, + .info, + .info a, + .faint a:hover, + .cta-neutral:hover { + color: var(--in-content-page-color) !important; + } + #main-content.panel a, + .links a, + .link-blue, + .text-blue-500 { + color: var(--in-content-link-color) !important; + } + .link-blue:hover { + color: var(--in-content-link-color-hover) !important; + } + + .signed-in-email-message, + .verification-email-message, + .verification-message, + .verification-recovery-code-message, + .verification-totp-message, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .input-row input::placeholder, + .firefox-family-services > ul > .firefox-service, + .faint, + .faint a, + .text-grey-400 { + color: var(--in-content-deemphasized-text) !important; + } + + /* Background */ + .flex .flex-wrap { + background: var(--in-content-page-background); + } + .password-row .show-password-label { + background-color: unset !important; + } + #main-content, + .modal, + .firefox-family-services, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + header, + .bg-white:not(nav) { + background: var(--in-content-box-background) !important; + } + #suggest-sync, + .cta-neutral { + background: var(--in-content-button-background) !important; + } + .cta-neutral:hover, + .bg-grey-50:hover, + .hover\:bg-grey-100:hover { + background: var(--in-content-button-background-hover) !important; + } + .text-blue-500 .cta-neutral, + .text-blue-500 .bg-grey-50, + .text-blue-500 .hover\:bg-grey-100 { + background: var(--in-content-button-background) !important; + } + .hover\:bg-grey-200:hover { + background: var(--in-content-button-background-active) !important; + } + .button.primary-button:hover:enabled, + .button[type="submit"]:not(.secondary-button):hover:enabled, + .settings-button.primary-button:hover:enabled, + .settings-button[type="submit"]:not(.secondary-button):hover:enabled, + button.primary-button:hover:enabled, + button[type="submit"]:not(.secondary-button):hover:enabled { + background: var(--in-content-primary-button-background-hover) !important; + } + .tooltip, + .tooltip::before { + background: var(--in-content-danger-button-background) !important; + } + + /* Fill */ + .dismiss, + #about-mozilla, + .show-password-label, + footer a[data-testid="link-mozilla"] { + filter: invert(95%) !important; + } + header button svg, + header .rounded svg, + #service svg { + filter: brightness(15) !important; + } + button.relative, + #fxa-settings nav svg { + filter: brightness(2) !important; + } + + /* Others */ + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .unit-row-hr .border-grey-100 { + border-color: var(--in-content-border-color) !important; + } + .input-row input[type="email"]:hover, + .input-row input[type="number"]:hover, + .input-row input[type="password"]:hover, + .input-row input[type="tel"]:hover, + .input-row input[type="text"]:hover { + border-color: var(--in-content-border-hover) !important; + } + #main-content { + box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12), + 0 6px 10px -4px rgba(82, 82, 94, 0.04) !important; + } + .input-row input[type="email"]:focus, + .input-row input[type="number"]:focus, + .input-row input[type="password"]:focus, + .input-row input[type="tel"]:focus, + .input-row input[type="text"]:focus { + box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important; + } + } +} + +/** Fully Proton Mode *********************************************************/ +/*= abouts' common ===========================================================*/ +@-moz-document url-prefix("about:plugins"), + url-prefix("about:cache"), + url-prefix("about:checkerboard"), + url-prefix("about:sync-log"), + url-prefix("about:memory"), + regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") { + /* Base */ + html, + body { + font: message-box !important; + appearance: none !important; + background-color: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + body { + font-size: 15px !important; + font-weight: normal !important; + margin: 0 !important; + } + + h1 { + line-height: 1.2 !important; + } + h2 { + line-height: 1.4em !important; + } + + /* Link */ + a { + color: var(--in-content-link-color) !important; + } + a:hover, + .text-link:hover { + color: var(--in-content-link-color-hover) !important; + text-decoration: underline !important; + } + a:visited { + color: var(--in-content-link-color-visited) !important; + } + a:hover:active, + .text-link:hover:active { + color: var(--in-content-link-color-active) !important; + } + a:-moz-focusring, + .text-link:-moz-focusring { + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 1px !important; + border-radius: 4px !important; + } + + /* Button */ + button { + font: inherit; + } + button, + select, + input[type="color"] { + appearance: none !important; + min-height: 32px !important; + color: var(--in-content-button-text-color, inherit) !important; + border: 1px solid transparent !important; /* shows up in high-contrast mode */ + border-radius: var(--in-content-button-border-radius) !important; + background-color: var(--in-content-button-background) !important; + font-weight: 400 !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + text-decoration: none !important; + margin: 4px 8px !important; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: 1em !important; + } + button { + font-weight: 600 !important; + /* Use the same margin of other elements for the alignment */ + margin-inline: 4px !important; + min-width: 6.3em !important; + } + /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding + * the 1px border): */ + button.medium { + --in-content-button-vertical-padding: 6px; + --in-content-button-horizontal-padding: 13px; + min-height: 28px !important; + font-size: 0.95em !important; + } + button.small { + --in-content-button-vertical-padding: 5px; + --in-content-button-horizontal-padding: 11px; + min-height: 24px !important; + font-size: 0.9em !important; + } + ::-moz-focus-inner { + border: none !important; + } + button:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + button:enabled:hover, + input[type="color"]:hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + button:enabled:hover:active, + input[type="color"]:enabled:hover:active { + background-color: var(--in-content-button-background-active) !important; + } + button:disabled, + input[type="color"]:disabled { + opacity: 0.4 !important; + } + button[autofocus], + button[type="submit"], + button.primary { + background-color: var(--in-content-primary-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + } + button[autofocus]:enabled:hover, + button[type="submit"]:enabled:hover, + button.primary:enabled:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + button[autofocus]:enabled:hover:active, + button[type="submit"]:enabled:hover:active, + button.primary:enabled:hover:active { + background-color: var(--in-content-primary-button-background-active) !important; + } + + /* Checkbox */ + input[type="checkbox"] { + margin-block: 2px !important; + } + input[type="checkbox"] { + appearance: none !important; + height: 16px !important; + width: 16px !important; + border: 1px solid var(--checkbox-border-color) !important; + background-color: var(--checkbox-unchecked-bgcolor) !important; + border-radius: 2px !important; + margin-inline: 0 6px !important; + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ + } + input[type="checkbox"]:enabled:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor) !important; + } + input[type="checkbox"]:checked { + border-color: var(--checkbox-checked-border-color) !important; + background-color: var(--checkbox-checked-bgcolor) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + input[type="checkbox"]:enabled:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor) !important; + } + + /* Textarea */ + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + appearance: none !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: inherit !important; + background-color: var(--in-content-box-background) !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, + textarea:focus, + search-textbox[focused], + tree:focus-visible, + richlistbox:focus-visible { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, + textarea:-moz-ui-invalid { + border-color: transparent !important; + outline: 2px solid var(--in-content-border-invalid) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, + textarea:disabled, + search-textbox[disabled="true"] { + opacity: 0.4 !important; + } + + /* Table */ + table { + width: 100% !important; + } +} + +@-moz-document url-prefix("about:plugins"), + url-prefix("about:cache"), + url-prefix("about:checkerboard") { + table { + border: 1px solid var(--in-content-border-color) !important; + border-radius: 0 !important; + } +} +@-moz-document url-prefix("about:cache"), + url-prefix("about:checkerboard") { + th, + td { + border: 1px solid var(--in-content-border-color) !important; + } + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } +} + +/*= View Source ==============================================================*/ +@-moz-document url-prefix("view-source") { + :root { + background-color: var(--in-content-page-background) !important; /* Original: white */ + color: var(--in-content-page-color) !important; /* Original: black */ + + /* Colors */ + --view-source-green: var(--green-80); + --view-source-purple: #800080; /* Like alphenglow */ + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --view-source-green: var(--green-60); + --view-source-purple: #c68aff; + } + } + + pre[id]::before, + span[id]::before { + color: color-mix( + in srgb, + var(--in-content-page-color) 70%, + var(--in-content-page-background) + ) !important; /* Original: #ccc */ + } + .highlight .start-tag, + .highlight .end-tag { + color: var(--view-source-purple) !important; /* Original: purple */ + } + .highlight .comment { + color: var(--view-source-green) !important; /* Original: green */ + } + .highlight .cdata { + color: var(--in-content-border-invalid) !important; /* Original: #CC0066 */ + } + .highlight .doctype { + color: #4682b4 !important; /* Original: steelblue */ + } + .highlight .pi { + color: orchid !important; /* Original: orchid */ + } + .highlight .entity { + color: #ff4500 !important; /* Original: #FF4500 */ + } + .highlight .attribute-name { + color: var(--view-source-green) !important; /* Original: black */ + } + .highlight .attribute-value { + color: var(--in-content-link-color) !important; /* Original: blue */ + } + .highlight .markupdeclaration { + color: #4682b4 !important; /* Original: steelblue */ + } + .highlight .error, + .highlight + .error + > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) { + color: var(--in-content-error-text-color) !important; /* Original: red */ + } +} + +/*= Directory View ===========================================================*/ +@-moz-document url-prefix("about:sync-log"), + regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") { + body { + background-color: var(--in-content-box-background) !important; + margin: 4em auto !important; /* Override to default */ + } + thead a { + color: var(--in-content-page-color) !important; + } + td ::before { + vertical-align: top !important; + } +} + +/*= about:plugins ============================================================*/ +@-moz-document url-prefix("about:plugins") { + .notice { + background: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-border-color) !important; + } +} + +/*= about:cache ==============================================================*/ +@-moz-document url-prefix("about:cache") { + table { + padding: 0 !important; + } + + th, + td { + padding: 4px !important; + text-align: match-parent !important; + } +} + +/*= about:checkerboard =======================================================*/ +@-moz-document url-prefix("about:checkerboard") { + #canvas { + border: 1px solid var(--in-content-border-color) !important; + } + #excludePageFromZoom { + vertical-align: bottom !important; + } +} + +/*= about:memory =============================================================*/ +@-moz-document url-prefix("about:memory") { + .opsRow, + .section { + background-color: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + .opsRowLabel input { + vertical-align: bottom !important; + } +} + +/*= chrome://browser/content/places/places.xhtml =============================*/ +@-moz-document url("chrome://browser/content/places/places.xhtml") +{ + /** Library - Icons Replace *************************************************/ + /*= Standard Folder - More Visible =========================================*/ + /* on Toolbar and Menus */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]), + /* in Sidebar, Library, Add/Edit Bookmark dialog */ + /* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */ + /* Need to overide!!, can not use :not() */ + :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container), + #editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]), + #editBMPanel_folderMenuList .folder-icon:not([id]), + /* Download Popup */ + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("./icons/folder.svg") !important; + } + + /* Standard Folder - Open */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"], + :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(title, container, open) { + list-style-image: url("./icons/folder-open.svg") !important; + } + + /*= Other Folder - Inbox Icon ==============================================*/ + /* on Menus */ + #PlacesToolbar #OtherBookmarks, + #BMB_bookmarksPopup #BMB_unsortedBookmarks, + #bookmarksMenuPopup #menu_unsortedBookmarks, + /* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks), + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____), + #editBMPanel_unfiledRootItem, + #editBMPanel_folderMenuList[selectedGuid="unfiled_____"] { + list-style-image: url("./icons/mail-inbox-all.svg") !important; + } + + /* Other Folder - Open */ + #PlacesToolbar #OtherBookmarks[open="true"], + #BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"], + #bookmarksMenuPopup #menu_unsortedBookmarks[open="true"], + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks), + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) { + list-style-image: url("./icons/mail-inbox.svg") !important; + } + + /*= Default Icon - Overide =================================================*/ + /* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */ + + /* Query */ + :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important; + } + + /* History */ + :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer), + :-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { + list-style-image: url("chrome://browser/skin/history.svg") !important; + } + + /* Downloads */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important; + } + + /* Tag */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer), + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { + list-style-image: url("chrome://browser/skin/places/tag.svg") !important; + } + + /* Boomark */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg") !important; + } + + /* Bookmark Toolbar */ + #BMB_bookmarksPopup #BMB_bookmarksToolbar, /* Original: Default folder icon */ + #bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; + } + + /* Bookmark Menu */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; + } + + /*= Default Icon - Open ====================================================*/ + /* Query */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"] + > .menu-iconic-left + > .menu-iconic-icon { + transform: rotate(15deg) !important; + } + + /* History */ + :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer), + :-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) { + list-style-image: url("./icons/history-reverse.svg") !important; + } + + /* Tag */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][tagContainer="true"][open="true"], + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer), + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) { + list-style-image: url("./icons/tag-open.svg") !important; + } + + /* Boomark */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important; + } + + /* Bookmark Toolbar */ + #BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"], + #bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"], + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) { + list-style-image: url("./icons/bookmarksToolbar-open.svg") !important; + } + + /* Bookmark Menu */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_menu________) { + list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ + } + + /*= Menubar - Icons ========================================================*/ + #organizeButton, + #viewMenu, + #maintenanceButton, + #back-button, + #forward-button, + #clearDownloadsButton { + fill: currentColor !important; + -moz-context-properties: fill !important; + } + + /* Add */ + #organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg") !important; + } + #viewMenu { + list-style-image: url("./icons/sort.svg") !important; + } + #maintenanceButton { + list-style-image: url("./icons/import-export.svg") !important; + } + + #clearDownloadsButton { + list-style-image: url("chrome://global/skin/icons/delete.svg") !important; + } + #clearDownloadsButton > .toolbarbutton-icon { + display: -moz-inline-box !important; + margin-top: 0; + margin-bottom: 0; + margin-inline-start: 0; + margin-inline-end: 2px; + } + + /* Replace */ + #back-button { + list-style-image: url("chrome://browser/skin/back.svg") !important; + } + #forward-button { + list-style-image: url("chrome://browser/skin/forward.svg") !important; + } + + #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, + #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1) !important; + } + + /*= Context Menu ===========================================================*/ + menupopup menuitem:not([type="checkbox"], [type="radio"]), + menupopup menu:not([type="checkbox"], [type="radio"]), + #main-menubar > menu { + -moz-appearance: none !important; /* Linux: menulist */ + } + + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); + } + + /* For native context menus on macOS */ + @supports -moz-bool-pref("widget.macos.native-context-menus") { + :not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { + list-style-image: var(--menuitem-image) !important; + } + } + + /* Padding */ + :root { + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Padding - Windows */ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + /* Checkbox */ + :root { + --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); + } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem[type="checkbox"][checked="false"] + > .menu-iconic-left { + padding-inline-start: var(--context-menu-text-padding); + } + } + + @media (-moz-os-version: windows-win7) { + :root { + --context-menu-background-padding-default: 2px; + } + } + @media (-moz-os-version: windows-win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; + } + } + @media (-moz-os-version: windows-win10) { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding: 24px; /* 16px + 8px */ + --menu-background-padding-default: calc( + var(--context-menu-background-padding) + var(--context-menu-text-padding) + ); + } + + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + padding-inline-start: var(--menu-background-padding-default) !important; + margin-left: 0 !important; + } + } + + /* Padding - Linux */ + @media (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding-default: 6px; + } + } + + /* Padding - Mac */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --context-menu-background-padding-default: 10px; + --context-menu-mac-padding: 21px; + } + + /* context menu width */ + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { + padding-inline-end: var(--context-menu-background-padding) !important; + } + + /* text position */ + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text, + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text { + padding-inline-start: var(--context-menu-mac-padding) !important; + } + + /* Checkbox menuitem, None iconic menu */ + #placesContext menuitem[type="checkbox"], + #placesContext menu:not(.menu-iconic) { + padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + } + } + + /* Icon lists */ + #placesContext_open { + --menuitem-image: url("./icons/link-square.svg"); + } + #placesContext_openBookmarkContainer\:tabs, + #placesContext_openBookmarkLinks\:tabs { + --menuitem-image: url("./icons/movetowindow-16.svg"); + } + #placesContext_open\:newtab, + #placesContext_openContainer\:tabs, + #placesContext_openLinks\:tabs { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); + } + #placesContext_open\:newwindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); + } + #placesContext_open\:newprivatewindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); + } + + #placesContext_show_bookmark\:info, + #placesContext_show\:info, + #placesContext_show_folder\:info { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); + } + #placesContext_deleteBookmark, + #placesContext_deleteFolder, + #placesContext_delete, + #placesContext_delete_history { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + #placesContext_deleteHost { + --menuitem-image: url("./icons/eye-hide.svg"); + } + #placesContext_sortBy\:name { + --menuitem-image: url("./icons/text-sort-ascending.svg"); + } + + #placesContext_cut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + #placesContext_copy { + --menuitem-image: url("./icons/edit-copy.svg"); + } + #placesContext_paste_group { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #placesContext_new\:bookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #placesContext_new\:folder { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + } + #placesContext_new\:separator { + --menuitem-image: url("./icons/vertical-line.svg"); + } + + #placesContext_paste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #placesContext_createBookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #show-other-bookmarks_PersonalToolbar { + /* checkbox */ + /* --menuitem-image: url("./icons/star-line-horizontal.svg"); */ + } + #placesContext_showAllBookmarks { + --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); + } + + .openintabs-menuitem { + --menuitem-image: url("./icons/movetowindow-16.svg"); + } + + /*= organizeButtonPopup ====================================================*/ + #newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #newfolder { + --menuitem-image: url("./icons/folder.svg"); + } + #newseparator { + --menuitem-image: url("./icons/vertical-line.svg"); + } + + #orgUndo { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); + } + #orgRedo { + } + + #orgCut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + #orgCopy { + --menuitem-image: url("./icons/edit-copy.svg"); + } + #orgPaste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + #orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #orgSelectAll { + --menuitem-image: url("./icons/select-all-on.svg"); + } + + #orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + + /*= viewMenuPopup ==========================================================*/ + #viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); + } + #viewSort { + --menuitem-image: url("./icons/text-sort-ascending.svg"); + } + + /*= maintenanceButtonPopup =================================================*/ + #backupBookmarks { + --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); + } + #fileRestoreMenu { + } + + #fileImport { + --menuitem-image: url("chrome://browser/skin/save.svg"); + } + #fileExport { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + + #browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } + + @media (-moz-gtk-csd-available) { + /*= Layout Fixes =========================================================*/ + menupopup menu { + padding-block: 4px; + } + + .menu-right { + width: 16px !important; /* Original: 1ex */ + background-image: url("chrome://global/skin/icons/arrow-right.svg"); + background-position: right center; + } + + /*= Proton ===============================================================*/ + :root { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --organizer-toolbar-field-focus-box-shadow: unset; + --organizer-pane-field-border-color: ThreeDShadow; + } + + @media not all and (prefers-contrast) { + :root { + --organizer-color: var(--in-content-page-color); + --organizer-deemphasized-color: var(--in-content-deemphasized-text); + + --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */ + --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */ + --organizer-content-background: var(--in-content-page-background); + + --organizer-hover-background: var(--in-content-button-background-hover); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: var(--in-content-button-background-active); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: var(--in-content-primary-button-background); + + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: var(--in-content-border-color); + + --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */ + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix( + in srgb, + var(--organizer-outline-color) 50%, + transparent + ); + --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); + --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --organizer-color: rgb(251, 251, 254); + --organizer-deemphasized-color: rgb(191, 191, 201); + + --organizer-toolbar-background: rgb(43, 42, 51); + --organizer-pane-background: rgb(35, 34, 43); + --organizer-content-background: rgb(28, 27, 34); + + --organizer-hover-background: rgb(82, 82, 94); + --organizer-selected-background: rgb(91, 91, 102); + --organizer-outline-color: rgb(0, 221, 255); + + --organizer-toolbar-field-background: var(--in-content-page-background); + --organizer-toolbar-field-background-focused: rgb(66, 65, 77); + scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); + } + } + } + + /*- Toolbar & Menus ------------------------------------------------------*/ + #placesToolbar { + appearance: none !important; + background-color: var(--organizer-toolbar-background) !important; + color: var(--organizer-color) !important; + border-bottom: 1px solid var(--organizer-border-color) !important; + padding: 4px !important; + padding-inline-end: 6px !important; + } + + #placesToolbar > toolbarbutton { + appearance: none !important; + padding: 5px !important; + border-radius: 4px !important; + } + + #placesToolbar > toolbarbutton[disabled] { + opacity: 0.6 !important; + } + + #placesToolbar > toolbarbutton:not([disabled]):hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #placesToolbar > toolbarbutton:not([disabled]):hover:active { + background-color: var(--organizer-selected-background) !important; + } + + #placesToolbar > toolbarbutton > .toolbarbutton-icon, + #placesMenu > menu > image, + #placesMenu > menu > .menubar-text { + -moz-context-properties: fill !important; + fill: currentColor !important; + } + + #placesMenu { + margin-inline-start: 6px !important; + } + + #placesMenu > menu { + appearance: none !important; + color: var(--organizer-color) !important; + border-radius: 4px !important; + padding-block: 5px !important; + padding-inline-start: 5px !important; + margin-inline-end: 2px !important; + } + + #placesMenu > menu[_moz-menuactive="true"], + #placesMenu > menu:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #placesMenu > menu:hover:active, + #placesMenu > menu[open] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + + #placesMenu > menu > .menubar-text { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 4px !important; + } + + /*- Search Bar & Input ---------------------------------------------------*/ + #searchFilter, + #detailsPane html|input { + appearance: none !important; + background-color: var(--organizer-toolbar-field-background) !important; + color: var(--organizer-color) !important; + border: 1px solid var(--organizer-toolbar-field-border-color) !important; + border-radius: 4px !important; + margin: 0 !important; + padding-block: 2px !important; + min-height: 24px !important; + } + + #searchFilter[focused] { + box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; + background-color: var(--organizer-toolbar-field-background-focused) !important; + border-color: transparent !important; + outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; + outline-offset: -2px !important; + } + + /*- Sidebar & Splitter ---------------------------------------------------*/ + #placesList { + background-color: var(--organizer-pane-background) !important; + } + + #placesView > splitter { + border: 0 !important; + border-inline-end: 1px solid var(--organizer-border-color) !important; + min-width: 0 !important; + width: 3px !important; + background-color: transparent !important; + margin-inline-start: -3px !important; + position: relative !important; + } + + /*- Downloads Pane -------------------------------------------------------*/ + #downloadsRichListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + } + + #clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + } + + richlistitem[selected="true"], + richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--organizer-selected-background) !important; + } + + /*- Tree -----------------------------------------------------------------*/ + #contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) !important; + } + + tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"]), + treecolpicker { + appearance: none !important; + border: none !important; + background-color: var(--in-content-button-background) !important; + color: var(--organizer-color, inherit) !important; + padding: 5px 10px !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover, + treecolpicker:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover:active, + treecolpicker:hover:active { + background-color: var(--organizer-selected-background) !important; + } + + treecol:not([hideheader="true"], :first-child), + treecolpicker { + padding-left: 10px !important; + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-image: linear-gradient( + transparent 0%, + transparent 20%, + var(--organizer-border-color) 20%, + var(--organizer-border-color) 80%, + transparent 80%, + transparent 100% + ) + 1 1 !important; + } + + treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; + } + + treechildren::-moz-tree-row { + background-color: transparent !important; + } + + treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + + treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } + + treechildren::-moz-tree-image(hover), + treechildren::-moz-tree-twisty(hover), + treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-image(selected), + treechildren::-moz-tree-twisty(selected), + treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } + + treechildren::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + + treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } + + /*- Info Box -------------------------------------------------------------*/ + #detailsPane { + background-color: var(--organizer-pane-background) !important; + color: var(--organizer-color) !important; + padding: 5px !important; + border-top: 1px solid var(--organizer-border-color) !important; + } + + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + appearance: none !important; + min-width: 0 !important; + padding: 5px !important; + margin: 0 !important; + margin-inline-end: 4px !important; + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill !important; + fill: currentColor !important; + } + + #editBookmarkPanelRows .expander-up:hover, + #editBookmarkPanelRows .expander-down:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #editBookmarkPanelRows .expander-up:hover:active, + #editBookmarkPanelRows .expander-down:hover:active { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + + #editBookmarkPanelRows .expander-up:focus-visible, + #editBookmarkPanelRows .expander-down:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + #editBookmarkPanelRows .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); + } + + #editBookmarkPanelRows .expander-up > .button-box, + #editBookmarkPanelRows .expander-down > .button-box { + padding: 0 !important; + } + + #places input { + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + min-height: 20px !important; + padding-inline: 4px !important; + } + + #places input:focus { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + #places input:not(:read-write):focus { + outline: none !important; + } + + .caption-label { + margin-inline-start: 8px !important; + color: var(--organizer-deemphasized-color) !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox { + appearance: none !important; + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + border: 1px solid var(--organizer-border-color) !important; + border-radius: 4px !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { + border: 1px solid transparent !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + + /*- Radio Button ---------------------------------------------------------*/ + menuitem[type="radio"] { + /* margin-inline-start: 0 !important; */ + appearance: none !important; + } + + menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon { + appearance: none !important; + width: 16px !important; + height: 16px !important; + padding: 0 !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 100% !important; + margin-block: 2px !important; /* extend the vertical clicktarget */ + margin-inline: 0 6px !important; + background-color: var(--in-content-button-background) !important; + background-position: center !important; + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ + } + + menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + } + + menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-button-background-active) !important; + } + + menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--in-content-primary-button-text-color) !important; + background-color: var(--in-content-primary-button-background) !important; + background-image: url("chrome://global/skin/icons/radio.svg") !important; + border-color: transparent !important; + + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + + menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + + menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-primary-button-background-active) !important; + } + + menuitem[type="radio"] > .menu-iconic-text { + margin-inline: 0 8px !important; + padding-inline-start: 0 !important; + } + + /* Disabled checkboxes, radios and labels */ + menuitem[type="radio"][disabled="true"], + menuitem[type="checkbox"][disabled="true"] { + color: inherit !important; + } + + menuitem[type="radio"][disabled="true"], + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.5 !important; + } + + /*- Check Box ------------------------------------------------------------*/ + /* From checkbox.css */ + menuitem[type="checkbox"] { + appearance: none !important; + -moz-box-align: center !important; + margin: 0px 2px !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + margin-inline-end: 2px !important; + } + menuitem[type="checkbox"] > .menu-iconic-text { + margin: 1px 0 !important; + } + + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.4 !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + appearance: none !important; + color: var(--checkbox-border-color, ThreeDDarkShadow) !important; + background-color: var(--checkbox-unchecked-bgcolor, Field) !important; + border: 1px solid currentColor !important; + border-radius: 2px !important; + margin-inline-end: 6px !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + height: 16px !important; + width: 16px !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + border-color: var(--checkbox-checked-border-color, transparent) !important; + background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover:active + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; + } + + menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; + } + + @media (prefers-contrast) { + menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { + color: var(--checkbox-checked-border-color, currentColor) !important; + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover:active + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon, + menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + } + } + + /* From common.css */ + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + margin-block: 2px !important; + } + + /*- Menu Separtor --------------------------------------------------------*/ + menuseparator { + appearance: none !important; + min-width: 2px; + min-height: 0; + border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); + border-bottom: none; + margin: var(--panel-separator-margin, 6px); + padding: 0; + } + } +}