diff options
Diffstat (limited to 'firefox/chrome/userChrome.css')
| -rw-r--r-- | firefox/chrome/userChrome.css | 2180 |
1 files changed, 2180 insertions, 0 deletions
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);
+ }
+
+ }
+
+}
+
+}
+
+}
|