From 2596f818e085ed724597ecb0028ec2536392203b Mon Sep 17 00:00:00 2001 From: davidovski Date: Sat, 4 May 2024 01:09:55 +0100 Subject: add firefox userChrome with wavefox --- firefox/chrome/userChrome.css | 2180 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2180 insertions(+) create mode 100644 firefox/chrome/userChrome.css (limited to 'firefox/chrome/userChrome.css') diff --git a/firefox/chrome/userChrome.css b/firefox/chrome/userChrome.css new file mode 100644 index 0000000..f6291d5 --- /dev/null +++ b/firefox/chrome/userChrome.css @@ -0,0 +1,2180 @@ +@layer LowPriority, HighPriority; + +@import "special/windows.css" layer(HighPriority) /* supports() */ (-moz-platform: windows); +@import "special/linux.css" layer(HighPriority) /* supports() */ (-moz-platform: linux); +@import "special/mac.css" layer(HighPriority) /* supports() */ (-moz-platform: macos); +@import "Lepton_Icons/icons/Lepton_Icons.css" /* layer() supports() */ (-moz-bool-pref: "userChrome.Menu.Icons.LeptonIcons.Enabled"); +@import "third_party_custom_styles.css" /* layer() supports() */ (-moz-bool-pref: "userChrome.Style.ThirdParty.Enabled"); + +@layer LowPriority +{ + +@media (-moz-platform: windows), + (-moz-platform: linux), + (-moz-platform: macos) +{ + +/* ---------------------------------------- Tabs (SVG) ---------------------------------------- */ + +:root +{ + @media (-moz-bool-pref: "userChrome.Tabs.Option1.Enabled") + { + --left-svg: url("special/tabs/option_1/left_corners.svg"); + --center-svg: url("special/tabs/option_1/center.svg"); + --right-svg: url("special/tabs/option_1/right_corners.svg"); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option2.Enabled") + { + --left-svg: url("special/tabs/option_2/left_corners.svg"); + --center-svg: url("special/tabs/option_2/center.svg"); + --right-svg: url("special/tabs/option_2/right_corners.svg"); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option3.Enabled") + { + --left-svg: url("special/tabs/option_3/left_corners.svg"); + --center-svg: url("special/tabs/option_3/center.svg"); + --right-svg: url("special/tabs/option_3/right_corners.svg"); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option4.Enabled") + { + --left-svg: url("special/tabs/option_4/left_corners.svg"); + --center-svg: url("special/tabs/option_4/center.svg"); + --right-svg: url("special/tabs/option_4/right_corners.svg"); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled") + { + --left-svg: url("special/tabs/option_5/left_corners.svg"); + --center-svg: url("special/tabs/option_5/center.svg"); + --right-svg: url("special/tabs/option_5/right_corners.svg"); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled") + { + --left-svg: url("special/tabs/option_1/left_corners.svg"); + --center-svg: url("special/tabs/option_1/center.svg"); + --right-svg: url("special/tabs/option_1/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") + { + --left-svg: url("special/tabs/option_6/left_corners.svg"); + --center-svg: url("special/tabs/option_6/center.svg"); + --right-svg: url("special/tabs/option_6/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4); + --outer-drop-border-offset: 1px; + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") + { + --left-svg: url("special/tabs/option_7/left_corners.svg"); + --center-svg: url("special/tabs/option_7/center.svg"); + --right-svg: url("special/tabs/option_7/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4); + --outer-drop-border-offset: 1px; + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") + { + --left-svg: url("special/tabs/option_8/left_corners.svg"); + --center-svg: url("special/tabs/option_8/center.svg"); + --right-svg: url("special/tabs/option_8/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2 - 6px); + --outer-drop-border-offset: 1px; + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") + { + --left-svg: url("special/tabs/option_9/left_corners.svg"); + --center-svg: url("special/tabs/option_9/center.svg"); + --right-svg: url("special/tabs/option_9/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + --outer-drop-border-offset: 1px; + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") + { + --left-svg: url("special/tabs/option_10/left_corners.svg"); + --center-svg: url("special/tabs/option_10/center.svg"); + --right-svg: url("special/tabs/option_10/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + --outer-drop-border-offset: 1px; + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") + { + --left-svg: url("special/tabs/option_11/left_corners.svg"); + --center-svg: url("special/tabs/option_11/center.svg"); + --right-svg: url("special/tabs/option_11/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + --outer-drop-border-offset: 1px; + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled") + { + --left-svg: url("special/tabs/option_12/left_corners.svg"); + --center-svg: url("special/tabs/option_12/center.svg"); + --right-svg: url("special/tabs/option_12/right_corners.svg"); + + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + --outer-drop-border-offset: 1px; + } + + /* -------------------- Floating Tabs -------------------- */ + + @media (-moz-bool-pref: "userChrome.Tabs.Option1.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option2.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option3.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option4.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-block-margin) / 2); + --tab-overflow-clip-margin: var(--tab-first-last-inline-margin); + --tab-inset-clip-path: 0px calc(-1 * var(--tab-first-last-inline-margin)); + --tab-scroll-animation-inline-margin: calc(-1 * var(--tab-first-last-inline-margin)); + --tab-scroll-animation-inline-padding: calc(var(--tab-first-last-inline-margin) * 2); + --tab-bg-block-margin: var(--tab-block-margin); + --tab-inline-padding: var(--tab-first-last-inline-margin); + --tab-separator-offset: var(--tab-first-last-inline-margin); + } + + /* -------------------- Attached Tabs -------------------- */ + + @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled") + { + --tab-overflow-clip-margin: var(--tab-first-last-inline-margin); + --tab-inset-clip-path: -4px calc(-1 * var(--tab-first-last-inline-margin)) 0px; + --tab-scroll-animation-inline-margin: calc(-1 * var(--tab-first-last-inline-margin)); + --tab-scroll-animation-inline-padding: var(--tab-first-last-inline-margin); + --tab-bg-block-margin: 0px; + --tab-inline-padding: 0px; + --tab-separator-offset: 0px; + } +} + +/* ---------------------------------------- Tab Bar Shadows ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled") or + (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled") or + (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled") or + (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled") +{ + @media (prefers-color-scheme: light) + { + :root + { + --shadow-blur: 4px; + --shadow-color: rgb(0, 0, 0); + + --outer-box-shadow: 0 + 0 + var(--shadow-blur) + color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent); + + --inner-box-shadow: inset + 0 + calc(-1 * var(--shadow-blur)) + var(--shadow-blur) + calc(-1 * var(--shadow-blur)) + color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent); + + --outer-drop-shadow: drop-shadow( + 0 + 0 + calc(var(--shadow-blur) / 2) + color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent)); + + /* ---------- Saturation ---------- */ + + @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled") + { + --shadow-saturation: 10%; + } + + @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled") + { + --shadow-saturation: 25%; + } + + @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled") + { + --shadow-saturation: 50%; + } + + @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled") + { + --shadow-saturation: 100%; + } + } + } +} + +@media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled") or + (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled") or + (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled") or + (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled") +{ + @media (prefers-color-scheme: dark) + { + :root + { + --shadow-blur: 4px; + --shadow-color: rgb(0, 0, 0); + + --outer-box-shadow: 0 + 0 + var(--shadow-blur) + color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent); + + --inner-box-shadow: inset + 0 + calc(-1 * var(--shadow-blur)) + var(--shadow-blur) + calc(-1 * var(--shadow-blur)) + color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent); + + --outer-drop-shadow: drop-shadow( + 0 + 0 + calc(var(--shadow-blur) / 2) + color-mix(in srgb, var(--shadow-color) var(--shadow-saturation), transparent)); + + /* ---------- Saturation ---------- */ + + @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled") + { + --shadow-saturation: 25%; + } + + @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled") + { + --shadow-saturation: 50%; + } + + @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled") + { + --shadow-saturation: 75%; + } + + @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled") + { + --shadow-saturation: 100%; + } + } + } +} + +/* ---------------------------------------- Tab Bar Borders ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Borders.Enabled") +{ + @media (prefers-color-scheme: light) + { + :root + { + --my-border-width: 1px; + --my-border-color: var(--chrome-content-separator-color); + + --outer-box-border: 0 0 0 var(--my-border-width) var(--my-border-color); + + --inner-box-border: inset 0 calc(-1 * var(--my-border-width)) 0 var(--my-border-color); + + --outer-drop-border: drop-shadow( + 0 + calc(-1 * var(--my-border-width)) + 0 + var(--my-border-color)) + + drop-shadow( + var(--my-border-width) + var(--outer-drop-border-offset, 0) + 0 + var(--my-border-color)) + + drop-shadow( + 0 + var(--my-border-width) + 0 + var(--my-border-color)) + + drop-shadow( + calc(-1 * var(--my-border-width)) + var(--outer-drop-border-offset, 0) + 0 + var(--my-border-color)); + } + } +} + +@media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Borders.Enabled") +{ + @media (prefers-color-scheme: dark) + { + :root + { + --my-border-width: 1px; + --my-border-color: var(--chrome-content-separator-color); + + --outer-box-border: 0 0 0 var(--my-border-width) var(--my-border-color); + + --inner-box-border: inset 0 calc(-1 * var(--my-border-width)) 0 var(--my-border-color); + + --outer-drop-border: drop-shadow( + 0 + calc(-1 * var(--my-border-width)) + 0 + var(--my-border-color)) + + drop-shadow( + var(--my-border-width) + var(--outer-drop-border-offset, 0) + 0 + var(--my-border-color)) + + drop-shadow( + 0 + var(--my-border-width) + 0 + var(--my-border-color)) + + drop-shadow( + calc(-1 * var(--my-border-width)) + var(--outer-drop-border-offset, 0) + 0 + var(--my-border-color)); + } + } +} + +/* ---------------------------------------- System Theme ---------------------------------------- */ + +@media not (prefers-contrast) +{ + :root:not([lwtheme]) + { + .tabbrowser-tab[visuallyselected] + { + color: var(--toolbar-color) !important; + + .tab-background + { + background-color: var(--toolbar-bgcolor) !important; + } + } + } +} + +/* ---------------------------------------- Light Theme / Dark Theme ---------------------------------------- */ + +: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-tab[visuallyselected] + { + color: var(--toolbar-color) !important; + + .tab-background + { + background-color: var(--toolbar-bgcolor) !important; + } + } +} + +/* ---------------------------------------- Pinned Tabs Width ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.Tabs.Pinned.Width.LowOffset.Enabled") +{ + :root + { + --pinned-tabs-width-offset: 2px; + } +} + +@media (-moz-bool-pref: "userChrome.Tabs.Pinned.Width.HighOffset.Enabled") +{ + :root + { + --pinned-tabs-width-offset: 4px; + } +} + +/* ---------------------------------------- Firefox View ---------------------------------------- */ + +:where(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs +{ + border-inline-start: none !important; + padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; + margin-inline-start: 0px !important; +} + +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon +{ + background-color: var(--toolbarbutton-active-background) !important; + color: inherit !important; + box-shadow: none !important; + outline: none !important; +} + +#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon +{ + background-color: var(--toolbarbutton-hover-background) !important; +} + +#TabsToolbar #firefox-view-button[attention] +{ + background-position: var(--tab-attention-indicator-position) !important; +} + +/* ---------------------------------------- Main Window ---------------------------------------- */ + +:root +{ + --tab-shadow-max-size: 0px !important; + --tab-attention-indicator-position: 50% calc(50% + 12px); +} + +/* ---------------------------------------- Nav Bar ---------------------------------------- */ + +#nav-bar +{ + border: none !important; +} + +/* ---------------------------------------- Titlebar ---------------------------------------- */ + +:root[tabsintitlebar] +{ + #titlebar + { + will-change: auto !important; + transition: none !important; + opacity: 1 !important; + } + + &:-moz-window-inactive .titlebar-color + { + color: color-mix(in srgb, currentColor 60%, transparent) !important; + --toolbarbutton-icon-fill: currentColor !important; + } +} + +/* ---------------------------------------- Density ---------------------------------------- */ + +:root[uidensity="compact"] +{ + --tab-min-height: 32px !important; +} + +:root[uidensity="touch"] +{ + --tab-min-height: 40px !important; +} + +/* ---------------------------------------- Context Menu (Not System Related) ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.Menu.Size.Compact.Enabled") or + (-moz-bool-pref: "userChrome.Menu.Size.Normal.Enabled") or + (-moz-bool-pref: "userChrome.Menu.Size.Touch.Enabled") +{ + :root + { + --arrowpanel-menuitem-margin-block: 0px !important; + --arrowpanel-menuitem-margin-inline: var(--browser-context-menu-margin-padding) !important; + --arrowpanel-menuitem-padding-block: var(--browser-context-menu-margin-padding) !important; + --arrowpanel-menuitem-padding-inline: var(--browser-context-menu-margin-padding) !important; + --panel-separator-margin-horizontal: var(--browser-context-menu-margin-padding) !important; + --panel-separator-margin-vertical: var(--browser-context-menu-margin-padding) !important; + --panel-subview-body-padding-block: var(--browser-context-menu-margin-padding) !important; + --panel-subview-body-padding-inline: 0px !important; + + @media (-moz-bool-pref: "userChrome.Menu.Size.Compact.Enabled") + { + --browser-context-menu-margin-padding: 4px; + } + + @media (-moz-bool-pref: "userChrome.Menu.Size.Normal.Enabled") + { + --browser-context-menu-margin-padding: 6px; + } + + @media (-moz-bool-pref: "userChrome.Menu.Size.Touch.Enabled") + { + --browser-context-menu-margin-padding: 8px; + } + } +} + +/* -------------------- Extensions menu -------------------- */ + +#unified-extensions-panel +{ + --uei-icon-size: 24px !important; +} + +#unified-extensions-panel .unified-extensions-item +{ + margin-block: 0px !important; +} + +#unified-extensions-panel :is( + .unified-extensions-item-name, + .unified-extensions-item-message-deck > * + ) +{ + overflow: hidden !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; +} + +/* ---------------------------------------- Drag Space ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.DragSpace.Left.Disabled") +{ + .titlebar-spacer[type="pre-tabs"] + { + display: none !important; + } +} + +@media (-moz-bool-pref: "userChrome.DragSpace.Right.Disabled") +{ + .titlebar-spacer[type="post-tabs"] + { + display: none !important; + } +} + +@media (-moz-bool-pref: "userChrome.DragSpace.Top.Windowed.Enabled") +{ + :root[sizemode="normal"] + { + --drag-space: 8px; + } +} + +@media (-moz-bool-pref: "userChrome.DragSpace.Top.Maximized.Enabled") +{ + :root[sizemode="maximized"] + { + --drag-space: 8px; + } +} + +@media (-moz-bool-pref: "userChrome.DragSpace.Top.Fullscreen.Enabled") +{ + :root[sizemode="fullscreen"] + { + --drag-space: 8px; + } +} + +#TabsToolbar :is(.tabbrowser-tab, .toolbarbutton-1, separator, #personal-bookmarks, #search-container, .accessibility-indicator, .private-browsing-indicator, #private-browsing-indicator-with-label) +{ + margin-top: var(--drag-space, 0px) !important; +} + +/* ---------- Shadow DOM ---------- */ + +#tabbrowser-arrowscrollbox +{ + --margin-top: var(--drag-space, 0px) !important; +} + +#scrollbutton-up, +#scrollbutton-down, +spacer[part="overflow-start-indicator"], +spacer[part="overflow-end-indicator"] +{ + margin-top: var(--margin-top, revert) !important; +} + +/* ---------------------------------------- Tabs ---------------------------------------- */ + +.tabbrowser-tab +{ + --tab-label-mask-size: 0px !important; + overflow-x: clip !important; + overflow-y: visible !important; + overflow-clip-margin: var(--tab-overflow-clip-margin) !important; + clip-path: inset(var(--tab-inset-clip-path)) !important; + padding-inline: var(--tab-inline-padding) !important; + + &[visuallyselected] + { + position: relative; + z-index: 2 !important; + filter: var(--outer-drop-border, drop-shadow(0 0 0 transparent)) + var(--outer-drop-shadow, drop-shadow(0 0 0 transparent)); + } + + &:not([visuallyselected]) + { + color: inherit !important; + + &:hover .tab-background + { + background-color: var(--toolbarbutton-hover-background) !important; + } + + &[multiselected] .tab-background + { + background-color: var(--toolbarbutton-active-background) !important; + } + } + + .tab-background + { + mask-image: var(--left-svg), var(--center-svg), var(--right-svg); + mask-size: auto 100%, calc(100% - var(--tab-min-height) * 2) 100%, auto 100%; + mask-position: left center, center center, right center; + mask-repeat: no-repeat, no-repeat, no-repeat; + box-shadow: none !important; + outline: none !important; + margin-block: var(--tab-bg-block-margin) !important; + margin-inline: calc(-1 * (var(--tab-min-height) / 2)) !important; + border-radius: 0px !important; + pointer-events: none !important; + } + + &[pinned] .tab-content + { + padding-inline: calc((var(--tab-min-height) - 16px) / 2 + var(--pinned-tabs-width-offset, 0px)) !important; + } + + &:not([pinned]) .tab-content + { + padding-inline: 10px !important; + } +} + +.tab-drop-indicator +{ + opacity: 0 !important; +} + +#tabbrowser-tabs[movingtab] .tabbrowser-tab:not([visuallyselected]) +{ + z-index: auto !important; +} + +.tabbrowser-tab[pending] .tab-icon-image +{ + opacity: 0.5 !important; +} + +.tab-close-button +{ + width: 16px !important; + height: 16px !important; + border-radius: 50% !important; + padding: 2px !important; + margin: 0px !important; +} + +.tab-close-button:hover +{ + background-color: var(--toolbarbutton-hover-background) !important; +} + +.tab-close-button:hover:active +{ + background-color: var(--toolbarbutton-active-background) !important; +} + +/* -------------------- Selected Tab Indicator -------------------- */ + +@media (-moz-bool-pref: "userChrome.Tabs.SelectedTabIndicator.Enabled") +{ + .tabbrowser-tab[visuallyselected][usercontextid] .tab-background + { + box-shadow: inset 0 -2px 0 var(--tab-loading-fill) !important; + } + + .tabbrowser-tab[visuallyselected]:not([usercontextid]) .tab-background + { + box-shadow: inset 0 2px 0 var(--tab-loading-fill) !important; + } +} + +/* -------------------- Tab Counter -------------------- */ + +#tabbrowser-tabs +{ + counter-reset: TabCounter; +} + +.tabbrowser-tab +{ + counter-increment: TabCounter; +} + +#tabbrowser-tabs ~ #alltabs-button::after +{ + content: counter(TabCounter); +} + +/* -------------------- Container Indicators -------------------- */ + +.tab-context-line +{ + margin: 0px !important; +} + +/* -------------------- Tab Icon Indicators -------------------- */ + +.tabbrowser-tab:is([image], [pinned]) .tab-content[attention]:not([selected]), +.tab-content[pinned][titlechanged]:not([selected]) +{ + background-position: var(--tab-attention-indicator-position) !important; +} + +/* -------------------- Media Icons -------------------- */ + +.tab-icon-overlay:not([crashed]) +{ + stroke: transparent !important; + background-color: transparent !important; + border-radius: 50% !important; + color: inherit !important; + fill: currentColor !important; + fill-opacity: 1 !important; + z-index: 1 !important; +} + +.tab-icon-overlay:not([crashed]):hover +{ + background-color: var(--toolbarbutton-hover-background) !important; +} + +.tab-icon-overlay:not([crashed]):hover:active +{ + background-color: var(--toolbarbutton-active-background) !important; +} + +.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):not([crashed]) .tab-icon-overlay +{ + top: -8px !important; + inset-inline-end: -8px !important; +} + +.tab-icon-overlay[indicator-replaces-favicon], +.tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) +{ + opacity: 1 !important; +} + +.tabbrowser-tab:not([pinned]) .tab-icon-stack > * +{ + margin-inline-end: 10px !important; +} + +.tabbrowser-tab[busy] .tab-icon-overlay +{ + display: none !important; +} + +.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay) +{ + mask-image: url("special/Additional_Elements/Media.svg"); + mask-size: 16px 16px; +} + +:root:-moz-locale-dir(rtl) .tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay) +{ + mask-image: url("special/Additional_Elements/Media_rtl.svg"); +} + +/* ---------- Picture-In-Picture ---------- */ + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before +{ + content: ""; + display: block; + position: absolute; + width: 16px; + height: 16px; + background-color: currentColor; + mask-size: 16px 16px; + mask-position: center center; + mask-repeat: no-repeat; +} + +:root:-moz-locale-dir(rtl) .tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before +{ + transform: rotateY(180deg); +} + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay) +{ + position: relative !important; + padding: 2px !important; + inset-inline-start: 8px !important; + top: 8px !important; + mask-image: none !important; + box-sizing: border-box !important; + z-index: 1 !important; +} + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before +{ + mask-image: url("special/Additional_Elements/PIP.svg"); +} + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before +{ + mask-image: url("special/Additional_Elements/PIP_Sound.svg"); +} + +/* -------------------- Tab Text -------------------- */ + +.tab-label-container +{ + height: var(--tab-min-height) !important; +} + +.tab-label +{ + width: 100% !important; + height: 16px !important; + line-height: 16px !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + margin-block: 0px !important; +} + +#tabbrowser-tabs[secondarytext-unsupported] .tab-label +{ + height: var(--tab-min-height) !important; + line-height: var(--tab-min-height) !important; +} + +.tab-secondary-label +{ + width: 100% !important; + height: 16px !important; + line-height: 16px !important; + margin-block: 0px !important; + order: -1 !important; +} + +.tab-secondary-label > * +{ + width: 100% !important; + height: 16px !important; + line-height: 16px !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +/* ---------------------------------------- Tab Bar ---------------------------------------- */ + +#TabsToolbar +{ + --toolbarbutton-inner-padding: inherit !important; + position: relative !important; +} + +#TabsToolbar::before +{ + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + bottom: 0px; + inset-inline-start: 0px; + box-shadow: var(--inner-box-border, inset 0 0 0 transparent), + var(--inner-box-shadow, inset 0 0 0 transparent); + pointer-events: none; + z-index: 2; +} + +#TabsToolbar #search-container +{ + padding-block: 0 !important; +} + +/* ---------------------------------------- Indents ---------------------------------------- */ + +#TabsToolbar-customization-target > :is(toolbarbutton, toolbaritem):first-child, +#TabsToolbar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) +{ + margin-inline-start: calc(var(--toolbar-start-end-padding) - var(--toolbarbutton-outer-padding)) !important; +} + +#TabsToolbar-customization-target > :is(toolbarbutton, toolbaritem):last-child, +#TabsToolbar-customization-target > toolbarpaletteitem:last-child > :is(toolbarbutton, toolbaritem) +{ + margin-inline-end: calc(var(--toolbar-start-end-padding) - var(--toolbarbutton-outer-padding)) !important; +} + +#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) +{ + margin-inline-start: 0px !important; +} + +#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])), +#tabbrowser-tabs[overflow] .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])), +#tabbrowser-tabs[overflow][haspinnedtabs] +{ + margin-inline-start: var(--tab-first-last-inline-margin) !important; +} + +.tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden])) +{ + margin-inline-end: var(--tab-first-last-inline-margin) !important; +} + +#tabs-newtab-button +{ + margin-inline-start: calc(-1 * var(--tab-first-last-inline-margin) / 2) !important; +} + +.toolbarbutton-1:has(+ #tabbrowser-tabs:not([overflow])), +.toolbarbutton-1:has(+ #tabbrowser-tabs[overflow][haspinnedtabs]) +{ + margin-inline-end: calc(-1 * var(--tab-first-last-inline-margin) / 2 + 1px) !important; + z-index: 0 !important; +} + +/* ---------------------------------------- Separators ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Low.Enabled") or + (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Medium.Enabled") +{ + .tab-stack + { + margin-inline-end: 1px !important; + } + + .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])) .tab-stack::before, + #tabbrowser-tabs[overflow][haspinnedtabs] .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) .tab-stack::before, + .tab-stack::after + { + content: ""; + display: block; + position: absolute; + width: 1px; + height: 50%; + border-inline-end: 1px solid currentColor; + top: 25%; + opacity: var(--separators-color-saturation); + box-sizing: border-box; + pointer-events: none; + } + + .tab-stack::before + { + inset-inline-end: 100%; + transform: translateX(calc(-1 * var(--tab-separator-offset))); + } + + :root:-moz-locale-dir(rtl) .tab-stack::before + { + transform: translateX(var(--tab-separator-offset)); + } + + .tab-stack::after + { + inset-inline-start: 100%; + transform: translateX(var(--tab-separator-offset)); + } + + :root:-moz-locale-dir(rtl) .tab-stack::after + { + transform: translateX(calc(-1 * var(--tab-separator-offset))); + } + + .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected]) .tab-stack::before, + .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected]) .tab-stack::after, + .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after, + .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after, + .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] ~ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after + { + opacity: 0 !important; + } + + #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(+ .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))) .tab-stack::after, + #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(+ .tabbrowser-tab[hidden] + .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))) .tab-stack::after, + #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(+ .tabbrowser-tab[hidden] ~ .tabbrowser-tab[hidden] + .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))) .tab-stack::after + { + opacity: var(--separators-color-saturation) !important; + } + + @media (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Low.Enabled") + { + :root + { + --separators-color-saturation: 0.25; + } + } + + @media (-moz-bool-pref: "userChrome.TabSeparators.Saturation.Medium.Enabled") + { + :root + { + --separators-color-saturation: 0.5; + } + } +} + +/* ---------------------------------------- Tab Scroll Animation ---------------------------------------- */ + +#tabbrowser-tabs[overflow] .tabbrowser-tab:not([pinned]) +{ + box-sizing: content-box !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:not([pinned]) +{ + pointer-events: none !important; + box-sizing: content-box !important; + padding-inline: var(--tab-scroll-animation-inline-padding) !important; + margin-inline: var(--tab-scroll-animation-inline-margin) !important; + overflow-clip-margin: 0px !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:not([pinned]) .tab-stack +{ + pointer-events: auto !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) +{ + margin-inline-start: 0px !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden])) +{ + margin-inline-end: 0px !important; +} + +/* ---------------------------------------- Tabs On Bottom ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.Tabs.TabsOnBottom.Enabled") +{ + @media (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled") + { + :root + { + --outer-drop-border-offset: -1px; + } + } + + /* -------------------- Title Bar -------------------- */ + + #titlebar + { + order: 2 !important; + } + + #toolbar-menubar + { + --toolbarbutton-icon-fill: inherit !important; + background-color: var(--toolbar-bgcolor) !important; + color: var(--toolbar-color) !important; + appearance: none !important; + } + + #TabsToolbar::before + { + transform: rotateX(180deg); + } + + /* -------------------- Nav Bar -------------------- */ + + #nav-bar + { + order: 0 !important; + } + + /* -------------------- Personal Bar -------------------- */ + + #PersonalToolbar + { + order: 1 !important; + } + + /* -------------------- Tabs -------------------- */ + + :root + { + --drag-space: 0px !important; + } + + .tabbrowser-tab + { + --tab-inset-clip-path: 0px calc(-1 * var(--tab-first-last-inline-margin)); + } + + .tab-background + { + transform: rotateX(180deg); + } +} + +/* ---------------------------------------- One Line ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.OneLine.TabBarFirst.Enabled") or + (-moz-bool-pref: "userChrome.OneLine.NavBarFirst.Enabled") +{ + @media (-moz-bool-pref: "userChrome.OneLine.TabBarFirst.Enabled") + { + #navigator-toolbox + { + grid-template-columns: auto min-content !important; + } + + #titlebar + { + grid-area: 1 / 1 / span 1 / span 1 !important; + } + } + + @media (-moz-bool-pref: "userChrome.OneLine.NavBarFirst.Enabled") + { + #navigator-toolbox + { + grid-template-columns: min-content auto !important; + } + + #nav-bar + { + grid-area: 1 / 1 / span 1 / span 1 !important; + } + } + + :root + { + --drag-space: 0px !important; + } + + #navigator-toolbox + { + display: grid !important; + -moz-window-dragging: drag !important; + } + + #TabsToolbar::before + { + display: none !important; + } + + /* -------------------- Nav Bar -------------------- */ + + #nav-bar + { + margin: var(--tab-block-margin) !important; + border-radius: var(--tab-border-radius) !important; + box-shadow: var(--outer-box-border, 0 0 0 transparent), + var(--outer-box-shadow, 0 0 0 transparent) !important; + } + + #urlbar-container, + #search-container + { + padding-block: 0px !important; + } + + #urlbar-container + { + --urlbar-container-height: var(--tab-min-height) !important; + } + + /* -------------------- Bookmarks Bar -------------------- */ + + #PersonalToolbar + { + margin-inline: var(--tab-block-margin) !important; + border-radius: var(--tab-border-radius) !important; + box-shadow: var(--outer-box-border, 0 0 0 transparent), + var(--outer-box-shadow, 0 0 0 transparent) !important; + } + + #PersonalToolbar[collapsed="false"] + { + margin-bottom: var(--tab-block-margin) !important; + } + + /* -------------------- Bookmarks Bar / Notifications -------------------- */ + + #navigator-toolbox > *:not(#titlebar, #nav-bar) + { + grid-column: 1 / span 2 !important; + } + + /* -------------------- Customization -------------------- */ + + #customization-panelWrapper + { + --panel-arrow-offset: 0px !important; + } + + /* -------------------- Attached Tabs -------------------- */ + + @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled") + { + :root + { + --tab-min-height: 44px !important; + + &[uidensity="compact"] + { + --tab-min-height: 40px !important; + } + + &[uidensity="touch"] + { + --tab-min-height: 48px !important; + } + } + + #urlbar-container + { + --urlbar-container-height: calc(var(--tab-min-height) - var(--tab-block-margin) * 2) !important; + } + } +} + +/* ---------------------------------------- Menu Icons ---------------------------------------- */ + +/* ---------- Regular Icons ---------- */ + +@media (-moz-bool-pref: "userChrome.Menu.Icons.Regular.Enabled") +{ + :root + { + --tab-new-page: url("./icons/tab_desktop_new_page_20_regular.svg"); + --window: url("./icons/window_20_regular.svg"); + --window-inprivate-account: url("./icons/window_inprivate_account_20_regular.svg"); + --star-line-horizontal: url("./icons/star_line_horizontal_3_20_regular.svg"); + --star-add: url("./icons/star_add_20_regular.svg"); + --star: url("./icons/star_20_filled.svg"); + --history: url("./icons/history_20_regular.svg"); + --arrow-download: url("./icons/arrow_download_20_regular.svg"); + --key: url("./icons/key_20_regular.svg"); + --puzzle-piece: url("./icons/puzzle_piece_20_regular.svg"); + --print: url("./icons/print_20_regular.svg"); + --save-edit: url("./icons/save_edit_20_regular.svg"); + --document-search: url("./icons/document_search_20_regular.svg"); + --settings: url("./icons/settings_20_regular.svg"); + --question-circle: url("./icons/question_circle_20_regular.svg"); + --color: url("./icons/color_20_regular.svg"); + --window-dev-tools: url("./icons/window_dev_tools_20_regular.svg"); + --person-feedback: url("./icons/person_feedback_20_regular.svg"); + --warning: url("./icons/warning_20_regular.svg"); + --arrow-clockwise: url("./icons/arrow_clockwise_20_regular.svg"); + --arrow-redo: url("./icons/arrow_redo_20_regular.svg"); + --arrow-undo: url("./icons/arrow_undo_20_regular.svg"); + --clipboard-paste: url("./icons/clipboard_paste_20_regular.svg"); + --clipboard-search: url("./icons/clipboard_search_20_regular.svg"); + --copy: url("./icons/copy_20_regular.svg"); + --cut: url("./icons/cut_20_regular.svg"); + --delete: url("./icons/delete_20_regular.svg"); + --dismiss: url("./icons/dismiss_20_regular.svg"); + --folder-add: url("./icons/folder_add_20_regular.svg"); + --pin: url("./icons/pin_20_regular.svg"); + --speaker-mute: url("./icons/speaker_mute_20_regular.svg"); + --tab-desktop: url("./icons/tab_desktop_20_regular.svg"); + --tab-desktop-copy: url("./icons/tab_desktop_copy_20_regular.svg"); + --edit: url("./icons/edit_20_regular.svg"); + --speaker-2: url("./icons/speaker_2_20_regular.svg"); + --camera-edit: url("./icons/camera_edit_20_regular.svg"); + --cursor-hover: url("./icons/cursor_hover_20_regular.svg"); + --image-copy: url("./icons/image_copy_20_regular.svg"); + --image-edit: url("./icons/image_edit_20_regular.svg"); + --link: url("./icons/link_20_regular.svg"); + --play: url("./icons/play_20_regular.svg"); + --pause: url("./icons/pause_20_regular.svg"); + --search: url("./icons/search_20_regular.svg"); + --tab-desktop-image: url("./icons/tab_desktop_image_20_regular.svg"); + --translate: url("./icons/translate_20_regular.svg"); + } +} + +/* ---------- Filled Icons ---------- */ + +@media (-moz-bool-pref: "userChrome.Menu.Icons.Filled.Enabled") +{ + :root + { + --tab-new-page: url("./icons/tab_desktop_new_page_20_filled.svg"); + --window: url("./icons/window_20_filled.svg"); + --window-inprivate-account: url("./icons/window_inprivate_account_20_filled.svg"); + --star-line-horizontal: url("./icons/star_line_horizontal_3_20_filled.svg"); + --star-add: url("./icons/star_add_20_filled.svg"); + --star: url("./icons/star_20_filled.svg"); + --history: url("./icons/history_20_filled.svg"); + --arrow-download: url("./icons/arrow_download_20_filled.svg"); + --key: url("./icons/key_20_filled.svg"); + --puzzle-piece: url("./icons/puzzle_piece_20_filled.svg"); + --print: url("./icons/print_20_filled.svg"); + --save-edit: url("./icons/save_edit_20_filled.svg"); + --document-search: url("./icons/document_search_20_filled.svg"); + --settings: url("./icons/settings_20_filled.svg"); + --question-circle: url("./icons/question_circle_20_filled.svg"); + --color: url("./icons/color_20_filled.svg"); + --window-dev-tools: url("./icons/window_dev_tools_20_filled.svg"); + --person-feedback: url("./icons/person_feedback_20_filled.svg"); + --warning: url("./icons/warning_20_filled.svg"); + --arrow-clockwise: url("./icons/arrow_clockwise_20_filled.svg"); + --arrow-redo: url("./icons/arrow_redo_20_filled.svg"); + --arrow-undo: url("./icons/arrow_undo_20_filled.svg"); + --clipboard-paste: url("./icons/clipboard_paste_20_filled.svg"); + --clipboard-search: url("./icons/clipboard_search_20_filled.svg"); + --copy: url("./icons/copy_20_filled.svg"); + --cut: url("./icons/cut_20_filled.svg"); + --delete: url("./icons/delete_20_filled.svg"); + --dismiss: url("./icons/dismiss_20_filled.svg"); + --folder-add: url("./icons/folder_add_20_filled.svg"); + --pin: url("./icons/pin_20_filled.svg"); + --speaker-mute: url("./icons/speaker_mute_20_filled.svg"); + --tab-desktop: url("./icons/tab_desktop_20_filled.svg"); + --tab-desktop-copy: url("./icons/tab_desktop_copy_20_filled.svg"); + --edit: url("./icons/edit_20_filled.svg"); + --speaker-2: url("./icons/speaker_2_20_filled.svg"); + --camera-edit: url("./icons/camera_edit_20_filled.svg"); + --cursor-hover: url("./icons/cursor_hover_20_filled.svg"); + --image-copy: url("./icons/image_copy_20_filled.svg"); + --image-edit: url("./icons/image_edit_20_filled.svg"); + --link: url("./icons/link_20_filled.svg"); + --play: url("./icons/play_20_filled.svg"); + --pause: url("./icons/pause_20_filled.svg"); + --search: url("./icons/search_20_filled.svg"); + --tab-desktop-image: url("./icons/tab_desktop_image_20_filled.svg"); + --translate: url("./icons/translate_20_filled.svg"); + } +} + +/* ---------- Native Browser Menus ---------- */ + +@media (-moz-bool-pref: "userChrome.Menu.Icons.Regular.Enabled") or + (-moz-bool-pref: "userChrome.Menu.Icons.Filled.Enabled") +{ + :is( + + /* ----- Main Menu ----- */ + + #appMenu-new-tab-button2, + #appMenu-new-window-button2, + #appMenu-new-private-window-button2, + #appMenu-bookmarks-button, + #appMenu-history-button, + #appMenu-downloads-button, + #appMenu-passwords-button, + #appMenu-extensions-themes-button, + #appMenu-print-button2, + #appMenu-save-file-button2, + #appMenu-find-button2, + #appMenu-translate-button, + #appMenu-settings-button, + #appMenu-help-button2, + + /* ----- Main Menu (Submenus) ----- */ + + #appmenu-moreTools-button, + #appmenu-developer-tools-view > toolbarbutton:nth-child(1), + + #appMenu_menu_openHelp, + #appMenu_feedbackPage, + #appMenu_menu_HelpPopup_reportPhishingtoolmenu, + + /* ----- Bookmark Menu ----- */ + + #panelMenuBookmarkThisPage, + #panelMenu_showAllBookmarks, + #BMB_bookmarksShowAllTop, + #BMB_bookmarksShowAll, + + /* ----- History Menu ----- */ + + #PanelUI-historyMore, + + /* ----- Library Menu ----- */ + + #appMenu-library-bookmarks-button, + #appMenu-library-history-button, + #appMenu-library-downloads-button, + + /* ----- Downloads Menu ----- */ + + #downloadsHistory, + + /* ----- Developer Menu ----- */ + + #PanelUI-developer-tools-view > toolbarbutton:nth-child(1), + + /* ----- Sidebar Menu ----- */ + + #sidebar-switcher-bookmarks, + #sidebar-switcher-history + + )::before + { + content: "" !important; + display: block; + position: relative; + width: 20px; + height: 20px; + background-color: currentColor; + mask-size: 20px 20px; + mask-repeat: no-repeat; + mask-position: center center; + margin-block: -2px; + margin-inline: -2px 6px; + } + + /* ----- Main Menu ----- */ + + #appMenu-new-tab-button2::before + { + mask-image: var(--tab-new-page); + } + + #appMenu-new-window-button2::before + { + mask-image: var(--window); + } + + #appMenu-new-private-window-button2::before + { + mask-image: var(--window-inprivate-account); + } + + #appMenu-bookmarks-button::before + { + mask-image: var(--star-line-horizontal); + } + + #appMenu-history-button::before + { + mask-image: var(--history); + } + + #appMenu-downloads-button::before + { + mask-image: var(--arrow-download); + } + + #appMenu-passwords-button::before + { + mask-image: var(--key); + } + + #appMenu-extensions-themes-button::before + { + mask-image: var(--puzzle-piece); + } + + #appMenu-print-button2::before + { + mask-image: var(--print); + } + + #appMenu-save-file-button2::before + { + mask-image: var(--save-edit); + } + + #appMenu-find-button2::before + { + mask-image: var(--document-search); + } + + #appMenu-translate-button::before + { + mask-image: var(--translate); + } + + #appMenu-settings-button::before + { + mask-image: var(--settings); + } + + #appMenu-help-button2::before + { + mask-image: var(--question-circle); + } + + /* ----- Main Menu (Submenus) ----- */ + + #appmenu-moreTools-button::before + { + mask-image: var(--color); + } + + #appmenu-developer-tools-view > toolbarbutton:nth-child(1)::before + { + mask-image: var(--window-dev-tools); + } + + #appMenu_menu_openHelp::before + { + mask-image: var(--question-circle); + } + + #appMenu_feedbackPage::before + { + mask-image: var(--person-feedback); + } + + #appMenu_menu_HelpPopup_reportPhishingtoolmenu::before + { + mask-image: var(--warning); + } + + /* ----- Bookmark Menu ----- */ + + #panelMenuBookmarkThisPage::before + { + mask-image: var(--star-add); + } + + #panelMenuBookmarkThisPage[starred]::before + { + mask-image: var(--star); + background-color: var(--toolbarbutton-icon-fill-attention) !important; + } + + :is(#panelMenu_showAllBookmarks, #BMB_bookmarksShowAllTop, #BMB_bookmarksShowAll)::before + { + mask-image: var(--star-line-horizontal); + } + + /* ----- History Menu ----- */ + + #PanelUI-historyMore::before + { + mask-image: var(--history); + } + + /* ----- Library Menu ----- */ + + #appMenu-library-bookmarks-button::before + { + mask-image: var(--star-line-horizontal); + } + + #appMenu-library-history-button::before + { + mask-image: var(--history); + } + + #appMenu-library-downloads-button::before + { + mask-image: var(--arrow-download); + } + + /* ----- Downloads Menu ----- */ + + #downloadsHistory::before + { + mask-image: var(--arrow-download); + } + + /* ----- Developer Menu ----- */ + + #PanelUI-developer-tools-view > toolbarbutton:nth-child(1)::before + { + mask-image: var(--window-dev-tools); + } + + /* ----- Sidebar Menu ----- */ + + #sidebar-switcher-bookmarks::before + { + mask-image: var(--star-line-horizontal); + } + + #sidebar-switcher-history::before + { + mask-image: var(--history); + } + + /* ---------- Non-Native Browser Menus ---------- */ + + @media (-moz-platform: windows), + (-moz-platform: linux) + { + + :is( + + /* ----- Toolbar Menubar Menu ----- */ + + menuitem.viewCustomizeToolbar, + + /* ----- TabsToolbar Menu ----- */ + + #toolbar-context-openANewTab, + #toolbar-context-reloadSelectedTab, + #toolbar-context-bookmarkSelectedTab, + + /* ----- Tab Menu ----- */ + + #context_openANewTab, + #context_reloadTab, + #context_toggleMuteTab, + #context_pinTab, + #context_unpinTab, + #context_duplicateTab, + #context_bookmarkTab, + #context_openTabInWindow, + #context_closeTab, + + /* ----- Tabs Menu ----- */ + + #context_reloadSelectedTabs, + #context_toggleMuteSelectedTabs, + #context_pinSelectedTabs, + #context_unpinSelectedTabs, + #context_duplicateTabs, + #context_bookmarkSelectedTabs, + + /* ----- Urlbar Menu ----- */ + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(1), + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(2), + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(4), + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(5), + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(7), + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(8), + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(9), + + /* ----- Searchbar Menu ----- */ + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(1), + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(2), + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(4), + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(5), + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(6), + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(7), + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(8), + + /* ----- PersonalToolbar Menu ----- */ + + #placesContext_openBookmarkContainer\:tabs, + #placesContext_new\:bookmark, + #placesContext_new\:folder, + #placesContext_paste, + #placesContext_showAllBookmarks, + + /* ----- Bookmarks Menu ----- */ + + #placesContext_open\:newtab, + #placesContext_open\:newwindow, + #placesContext_open\:newprivatewindow, + #placesContext_show_bookmark\:info, + #placesContext_deleteBookmark, + #placesContext_cut, + #placesContext_copy, + #placesContext_paste_group, + + /* ----- Folder Menu ----- */ + + #placesContext_show_folder\:info, + #placesContext_deleteFolder, + + /* ---------- Web Menu ---------- */ + + /* ----- Menu ----- */ + + #context-savepage, + #context-take-screenshot, + #context-inspect, + + /* ----- Text Menu ----- */ + + #context-copy, + #context-print-selection, + #context-searchselect, + + /* ----- Image Menu ----- */ + + #context-viewimage, + #context-saveimage, + #context-copyimage-contents, + + /* ----- Link Menu ----- */ + + #context-openlinkintab, + #context-openlink, + #context-openlinkprivate, + #context-bookmarklink, + #context-savelink, + #context-copylink, + + /* ----- Input Menu ----- */ + + #context-undo, + #context-redo, + #context-cut, + #context-copy, + #context-paste, + #context-delete, + #context-keywordfield, + + /* ----- Video Menu ----- */ + + #context-media-play, + #context-media-pause, + #context-media-mute, + #context-media-unmute, + #context-viewvideo, + #context-savevideo + + )::before + { + content: "" !important; + display: block; + position: relative; + width: 20px; + height: 20px; + background-color: currentColor; + mask-size: 20px 20px; + mask-repeat: no-repeat; + mask-position: center center; + margin-block: -2px; + margin-inline: var(--align-menu-icons); + } + + /* ----- Toolbar Menubar Menu ----- */ + + menuitem.viewCustomizeToolbar::before + { + mask-image: var(--color); + } + + /* ----- TabsToolbar Menu ----- */ + + #toolbar-context-openANewTab::before + { + mask-image: var(--tab-new-page); + } + + #toolbar-context-reloadSelectedTab::before + { + mask-image: var(--arrow-clockwise); + } + + #toolbar-context-bookmarkSelectedTab::before + { + mask-image: var(--star-add); + } + + /* ----- Tab Menu ----- */ + + #context_openANewTab::before + { + mask-image: var(--tab-new-page); + } + + #context_reloadTab::before + { + mask-image: var(--arrow-clockwise); + } + + #context_toggleMuteTab::before + { + mask-image: var(--speaker-mute); + } + + #context_toggleMuteTab[muted]::before + { + mask-image: var(--speaker-2); + } + + :is(#context_pinTab, #context_unpinTab)::before + { + mask-image: var(--pin); + } + + #context_duplicateTab::before + { + mask-image: var(--tab-desktop-copy); + } + + #context_bookmarkTab::before + { + mask-image: var(--star-add); + } + + #context_openTabInWindow::before + { + mask-image: var(--window); + } + + #context_closeTab::before + { + mask-image: var(--dismiss); + } + + /* ----- Tabs Menu ----- */ + + #context_reloadSelectedTabs::before + { + mask-image: var(--arrow-clockwise); + } + + #context_toggleMuteSelectedTabs::before + { + mask-image: var(--speaker-mute); + } + + #context_toggleMuteSelectedTabs[muted]::before + { + mask-image: var(--speaker-2); + } + + :is(#context_pinSelectedTabs, #context_unpinSelectedTabs)::before + { + mask-image: var(--pin); + } + + #context_duplicateTabs::before + { + mask-image: var(--tab-desktop-copy); + } + + #context_bookmarkSelectedTabs::before + { + mask-image: var(--star-add); + } + + /* ----- Urlbar Menu ----- */ + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(1)::before + { + mask-image: var(--arrow-undo); + } + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(2)::before + { + mask-image: var(--arrow-redo); + } + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(4)::before + { + mask-image: var(--cut); + } + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(5)::before + { + mask-image: var(--copy); + } + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(7)::before + { + mask-image: var(--clipboard-paste); + } + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(8)::before + { + mask-image: var(--clipboard-search); + } + + menupopup.textbox-contextmenu:nth-child(3) > menuitem:nth-child(9)::before + { + mask-image: var(--delete); + } + + /* ----- Searchbar Menu ----- */ + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(1)::before + { + mask-image: var(--arrow-undo); + } + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(2)::before + { + mask-image: var(--arrow-redo); + } + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(4)::before + { + mask-image: var(--cut); + } + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(5)::before + { + mask-image: var(--copy); + } + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(6)::before + { + mask-image: var(--clipboard-paste); + } + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(7)::before + { + mask-image: var(--clipboard-search); + } + + menupopup.textbox-contextmenu:nth-child(4) > menuitem:nth-child(8)::before + { + mask-image: var(--delete); + } + + /* ----- PersonalToolbar Menu ----- */ + + #placesContext_openBookmarkContainer\:tabs::before + { + mask-image: var(--tab-desktop); + } + + #placesContext_new\:bookmark::before + { + mask-image: var(--star-add); + } + + #placesContext_new\:folder::before + { + mask-image: var(--folder-add); + } + + #placesContext_paste::before + { + mask-image: var(--clipboard-paste); + } + + #placesContext_showAllBookmarks::before + { + mask-image: var(--star-line-horizontal); + } + + /* ----- Bookmarks Menu ----- */ + + #placesContext_open\:newtab::before + { + mask-image: var(--tab-new-page); + } + + #placesContext_open\:newwindow::before + { + mask-image: var(--window); + } + + #placesContext_open\:newprivatewindow::before + { + mask-image: var(--window-inprivate-account); + } + + #placesContext_show_bookmark\:info::before + { + mask-image: var(--edit); + } + + #placesContext_deleteBookmark::before + { + mask-image: var(--delete); + } + + #placesContext_cut::before + { + mask-image: var(--cut); + } + + #placesContext_copy::before + { + mask-image: var(--copy); + } + + #placesContext_paste_group::before + { + mask-image: var(--clipboard-paste); + } + + /* ----- Folder Menu ----- */ + + #placesContext_show_folder\:info::before + { + mask-image: var(--edit); + } + + #placesContext_deleteFolder::before + { + mask-image: var(--delete); + } + + /* ---------- Web Menu ---------- */ + + #context-savepage::before + { + mask-image: var(--save-edit); + } + + #context-take-screenshot::before + { + mask-image: var(--camera-edit); + } + + #context-inspect::before + { + mask-image: var(--cursor-hover); + } + + #context-copy::before + { + mask-image: var(--copy); + } + + #context-print-selection::before + { + mask-image: var(--print); + } + + #context-searchselect::before + { + mask-image: var(--search); + } + + #context-viewimage::before + { + mask-image: var(--tab-desktop-image); + } + + #context-saveimage::before + { + mask-image: var(--image-edit); + } + + #context-copyimage-contents::before + { + mask-image: var(--image-copy); + } + + #context-openlinkintab::before + { + mask-image: var(--tab-desktop); + } + + #context-openlink::before + { + mask-image: var(--window); + } + + #context-openlinkprivate::before + { + mask-image: var(--window-inprivate-account); + } + + #context-bookmarklink::before + { + mask-image: var(--star-add); + } + + #context-savelink::before + { + mask-image: var(--save-edit); + } + + #context-copylink::before + { + mask-image: var(--link); + } + + #context-undo::before + { + mask-image: var(--arrow-undo); + } + + #context-redo::before + { + mask-image: var(--arrow-redo); + } + + #context-cut::before + { + mask-image: var(--cut); + } + + #context-copy::before + { + mask-image: var(--copy); + } + + #context-paste::before + { + mask-image: var(--clipboard-paste); + } + + #context-delete::before + { + mask-image: var(--delete); + } + + #context-keywordfield::before + { + mask-image: var(--star-add); + } + + #context-media-play::before + { + mask-image: var(--play); + } + + #context-media-pause::before + { + mask-image: var(--pause); + } + + #context-media-mute::before + { + mask-image: var(--speaker-mute); + } + + #context-media-unmute::before + { + mask-image: var(--speaker-2); + } + + #context-viewvideo::before + { + mask-image: var(--tab-desktop); + } + + #context-savevideo::before + { + mask-image: var(--save-edit); + } + + } + +} + +} + +} -- cgit v1.2.1