diff --git a/chrome/navbar_tabs_oneliner.css b/chrome/navbar_tabs_oneliner.css index c0570a5..ef98d18 100644 --- a/chrome/navbar_tabs_oneliner.css +++ b/chrome/navbar_tabs_oneliner.css @@ -9,6 +9,8 @@ See the above repository for updates as well as full license text. */ urlbar_popup_full_width.css is VERY MUCH recommended for Firefox 71+ because of new urlbar popup */ +:root[proton][uidensity="compact"]{ --proton-tab-block-margin: 2px !important; } + /* Modify these to change relative widths or default height */ #navigator-toolbox{ --uc-navigationbar-width: 40vw; @@ -16,8 +18,8 @@ urlbar_popup_full_width.css is VERY MUCH recommended for Firefox 71+ because of --uc-urlbar-min-width: none; /* Can set minimum width for focused urlbar here eg. 550px */ } /* Override for other densities */ -:root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 32px; } -:root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 40px; } +:root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 34px; } +:root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 44px; } /* prevent urlbar overflow on narrow windows */ /* Dependent on how many items are in navigation toolbar ADJUST AS NEEDED */ @@ -29,7 +31,9 @@ urlbar_popup_full_width.css is VERY MUCH recommended for Firefox 71+ because of margin-left: var(--uc-navigationbar-width); --tabs-navbar-shadow-size: 0px; } -#tabbrowser-tabs{ --tab-min-height: var(--uc-toolbar-height) !important; } +#tabbrowser-tabs{ + --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; +} /* This isn't useful when tabs start in the middle of the window */ diff --git a/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css b/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css index 197bf4e..1432294 100644 --- a/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css +++ b/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css @@ -9,8 +9,9 @@ Get window_control_placeholder_support.css Window controls will be all wrong without it */ -/* Modify these to change relative widths or default height */ +:root[proton][uidensity="compact"]{ --proton-tab-block-margin: 2px !important; } +/* Modify these to change relative widths or default height */ #navigator-toolbox{ --uc-navigationbar-width: 50vw; --uc-toolbar-height: 40px; @@ -19,8 +20,11 @@ Window controls will be all wrong without it #navigator-toolbox{--uc-buttons-width: calc(56px + 4 * var(--toolbarbutton-outer-padding) + var(--uc-menubutton-padding,6px))} #nav-bar:not([overflowing]) > #nav-bar-customization-target{ --uc-buttons-width: calc(28px + 2 * var(--toolbarbutton-outer-padding) + 6px) } /* Override for other densities */ -:root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 32px; --uc-menubutton-padding: 0px} -:root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 40px; } +:root[uidensity="compact"] #navigator-toolbox{ + --uc-toolbar-height: 34px; + --uc-menubutton-padding: 0px; +} +:root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 44px; } :root[uidensity="compact"] #urlbar-container{ --urlbar-container-height: var(--uc-toolbar-height) !important; @@ -40,7 +44,19 @@ Window controls will be all wrong without it margin-left: var(--uc-navigationbar-width); --tabs-navbar-shadow-size: 0px; } -#tabbrowser-tabs{ --tab-min-height: var(--uc-toolbar-height) !important; } + +#tabbrowser-tabs{ + --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; +} +/* Need to set background color for selected tab so it can be distinguished from background */ +#TabsToolbar .tab-background[selected]{ + background: var(--lwt-selected-tab-background-color,rgba(0,0,0,0.2)) !important; +} + +#TabsToolbar[brighttext] .tab-background[selected]{ + background: var(--lwt-selected-tab-background-color,rgba(255,255,255,0.2)) !important; +} + /* This isn't useful when tabs start in the middle of the window */ .titlebar-placeholder[type="pre-tabs"],.titlebar-spacer[type="pre-tabs"]{ width:8px !important} #nav-bar{ margin-top: calc(0px - var(--uc-toolbar-height)); } @@ -52,7 +68,10 @@ Window controls will be all wrong without it #nav-bar-customization-target{ margin-right: calc(100vw - (var(--uc-navigationbar-width)) - var(--uc-buttons-width) - var(--uc-window-drag-space-width)) } } -#TabsToolbar > .toolbar-items{ position: relative !important; z-index: 2 } +#TabsToolbar > .toolbar-items{ + position: relative !important; + z-index: 2 +} .titlebar-placeholder[type="post-tabs"], .titlebar-spacer[type="post-tabs"]{ width: calc(var(--uc-buttons-width) + var(--uc-window-drag-space-width)) !important; diff --git a/chrome/navbar_tabs_oneliner_tabs_on_left.css b/chrome/navbar_tabs_oneliner_tabs_on_left.css index c9a0d5c..958f1a2 100644 --- a/chrome/navbar_tabs_oneliner_tabs_on_left.css +++ b/chrome/navbar_tabs_oneliner_tabs_on_left.css @@ -9,14 +9,16 @@ Get window_control_placeholder_support.css Window controls will be all wrong without it */ +:root[proton][uidensity="compact"]{ --proton-tab-block-margin: 2px !important; } + /* Modify these to change relative widths or default height */ #navigator-toolbox{ --uc-navigationbar-width: 40vw; --uc-toolbar-height: 40px; } /* Override for other densities */ -:root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 32px;} -:root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 40px; } +:root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 34px;} +:root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 44px; } :root[uidensity=compact] #urlbar-container{ --urlbar-container-height: var(--uc-toolbar-height) !important; @@ -44,11 +46,18 @@ Window controls will be all wrong without it margin-right: var(--uc-navigationbar-width); --tabs-navbar-shadow-size: 0px; } -#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + +#tabbrowser-tabs{ + --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; +} + +#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container{ + min-height: var(--uc-toolbar-height) !important +} #tabbrowser-tabs, .tabbrowser-tab[pinned]{ - height: var(--uc-toolbar-height) !important; - min-height: var(--uc-toolbar-height) !important; + height: var(--tab-min-height) !important; + min-height: var(--tab-min-height) !important; } #nav-bar{ margin-left: calc(100vw - var(--uc-navigationbar-width)); diff --git a/chrome/navbar_tabs_responsive_oneliner.css b/chrome/navbar_tabs_responsive_oneliner.css index b970a69..5453415 100644 --- a/chrome/navbar_tabs_responsive_oneliner.css +++ b/chrome/navbar_tabs_responsive_oneliner.css @@ -6,9 +6,14 @@ See the above repository for updates as well as full license text. */ /* Use page_action_buttons_on_hover.css to hide page-action-buttons to save more space for the address */ /* Toolbars will be shown normally if window width goes below the value below */ -/* Modify it to suit your needs */ + + +/* Modify it to suit your needs */ @media screen and (min-width: 1100px){ + + :root[proton][uidensity="compact"]{ --proton-tab-block-margin: 2px !important; } + /* Modify these to change relative widths or default height */ #navigator-toolbox{ --uc-navigationbar-width: 40vw; @@ -22,14 +27,16 @@ See the above repository for updates as well as full license text. */ } /* Override for other densities */ - :root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 32px; } - :root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 40px; } + :root[uidensity="compact"] #navigator-toolbox{ --uc-toolbar-height: 34px; } + :root[uidensity="touch"] #navigator-toolbox{ --uc-toolbar-height: 44px; } #TabsToolbar{ margin-left: var(--uc-navigationbar-width); --tabs-navbar-shadow-size: 0px; } - #tabbrowser-tabs{ --tab-min-height: var(--uc-toolbar-height) !important; } + #tabbrowser-tabs{ + --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; +} /* This isn't useful when tabs start in the middle of the window */ .titlebar-spacer[type="pre-tabs"]{ display: none }