@media (-moz-proton) { /* Darkmode - Color lighter */ :root[style*="--lwt-accent-color:rgb(12, 12, 13); --lwt-text-color:rgba(249, 249, 250);"] { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; } :root{ /* Tab Bar */ --proton-tab-block-margin: 2px !important; /* Original: 4px */ --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ --arrowpanel-menuitem-margin: 0 8px !important; /* Original: 0 8px */ --arrowpanel-menuitem-padding: 4px !important; /* Original: 8px */ --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ } /* Tab Bar - Reduce Width, Show more tabs */ .titlebar-spacer[type="pre-tabs"] { width: 35px; /* Original: 40px */ } .titlebar-spacer[type="post-tabs"] { width: 20px; /* Original: 40px */ } #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) { /* Original: 4px */ padding-left: 1px; padding-right: 1px; } #new-tab-button, #alltabs-button { --toolbarbutton-outer-padding: 1px; /* Original: 2px*/ } /* Tab Bar - Reduce Height, Show more contents */ #TabsToolbar { --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ } .toolbar-items, .tabbrowser-tab { max-height: 38px; /* Original: 40px */ } /* Tab - Max Size */ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: 240px !important; } /* Tab - Connect to window */ .tab-background { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; margin-bottom: 0px !important; } .tab-content { margin-top: var(--proton-tab-block-margin); } .tab-stack { margin-top: 0px !important; margin-bottom: 0px !important; } /* neighbouring tabs should "pinch" together */ .tabbrowser-tab { padding-inline: 1px !important; } .tabbrowser-tab:not([last-visible-tab]) { margin-inline-end: -.5px !important; } /* Selected Tab - Color like toolbar */ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme { background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; } /* Selected Tab - Box Shadow */ #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { box-shadow: 0 0 1px var(--toolbar-color) !important; } /* Unselected Tab - Divide line */ .tab-content::before, .tab-content::after { content: "" !important; display: block !important; position: absolute !important; background-color: var(--toolbarseparator-color) !important; width: 1px !important; height: 20px !important; transform: translateY(-10px) !important; opacity: 0 !important; transition: opacity .2s var(--ease-basic) !important; } .tab-content::before { left: 0 !important; } .tab-content::after { right: 0 !important; } .tabbrowser-tab[visuallyselected][style*=transform] + .tabbrowser-tab[style*=transform] .tab-content::after, .tabbrowser-tab[style*=transform]:not([visuallyselected]) .tab-content::before, .tabbrowser-tab[style*=transform] + .tabbrowser-tab:not([visuallyselected]) .tab-content::before, .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) + .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::before, #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after { opacity: var(--tab-separator-opacity) !important; } /* Clipped tabs - Letters cleary */ #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) { padding-inline-start: 8px !important; } #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; } #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) { mask-image: linear-gradient(to right, black 70%, transparent) !important; } #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]), #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) { mask-image: linear-gradient(to left, black 70%, transparent) !important; } /* Sound Tab - Show with Favicons */ /* Makes the favicons always visible (also on hover) */ #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay), #toolbar-menubar:not(:hover) + #TabsToolbar:not(:hover) #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-icon-image[src] ~ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]), :is(#toolbar-menubar:hover + #TabsToolbar, #TabsToolbar:hover) .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) { opacity: 1 !important; } /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ .tab-icon-overlay:not([crashed]) { top: -4.5px !important; inset-inline-end: -9px !important; z-index: 1 !important; background: transparent !important; } .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { opacity: 1 !important; margin-right: 10px !important; } /* URL Bar - Reduce Padding */ #urlbar-container, #search-container { padding-block: 2px; /* Original: 4px */ margin-inline: 5px; /* Original: 5px */ } /* Menu - Reduce Padding */ menupopup > menuitem, menupopup > menu { padding-block: 0.35em !important; /* Original: 0.5em */ padding-inline-start: 1em !important; /* Original: 1em */ } .menu-text, .menu-iconic-text { padding-inline-end: 0 !important; /* Original: 2px */ } .menupopup-arrowscrollbox { padding-block: 1px !important; /* Original: 4px*/ } #context-navigation:not([hidden]) { padding: 0 0 1px; /* Original: 0 0 4px*/ } .menu-right { margin-right: 6px !important; /* Original: 12px */ } }