add temporary dummy variables for tab-block-margin

This commit is contained in:
MrOtherGuy 2021-06-05 00:17:16 +03:00
parent 753c37d010
commit 7db2c96530
14 changed files with 56 additions and 20 deletions

View file

@ -1,6 +1,9 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_and_main_toolbars.css made available under Mozilla Public License v. 2.0 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_and_main_toolbars.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */ See the above repository for updates as well as full license text. */
/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }
#navigator-toolbox{ #navigator-toolbox{
--uc-bm-height: 22px; /* Might need to adjust if the toolbar has other buttons */ --uc-bm-height: 22px; /* Might need to adjust if the toolbar has other buttons */
--uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */ --uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */
@ -25,7 +28,7 @@ See the above repository for updates as well as full license text. */
:root[sessionrestored] #PersonalToolbar{ :root[sessionrestored] #PersonalToolbar{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
background-position: top,var(--lwt-background-alignment); background-position: top,var(--lwt-background-alignment);
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--proton-tab-block-margin,0px)); background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
background-repeat: repeat,var(--lwt-background-tiling); background-repeat: repeat,var(--lwt-background-tiling);
transform: rotateX(90deg); transform: rotateX(90deg);
transform-origin: top; transform-origin: top;
@ -35,7 +38,7 @@ See the above repository for updates as well as full license text. */
:root[sessionrestored] #PersonalToolbar{ :root[sessionrestored] #PersonalToolbar{
z-index: 1; z-index: 1;
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--proton-tab-block-margin,0px) + var( --uc-navbar-height)); background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
} }
:root[lwtheme-image] #nav-bar, :root[lwtheme-image] #nav-bar,

View file

@ -6,6 +6,7 @@ See the above repository for updates as well as full license text. */
:root{ :root{
--toolbarbutton-inner-padding: 6px !important; --toolbarbutton-inner-padding: 6px !important;
--proton-tab-block-margin: 2px !important; --proton-tab-block-margin: 2px !important;
--tab-block-margin: 2px !important;
--tabs-shadow-size: 0px !important; --tabs-shadow-size: 0px !important;
--arrowpanel-menuitem-padding: 5px !important; --arrowpanel-menuitem-padding: 5px !important;
--panel-font-size: inherit !important; --panel-font-size: inherit !important;

View file

@ -7,6 +7,7 @@ See the above repository for updates as well as full license text. */
--uc-tab-curve-size:17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --uc-tab-curve-size:17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--uc-tabs-scrollbutton-border: 0px; --uc-tabs-scrollbutton-border: 0px;
--proton-tab-block-margin:0px; --proton-tab-block-margin:0px;
--tab-block-margin:0px;
--tab-min-height: 34px; --tab-min-height: 34px;
--uc-tab-line-color: rgb(10, 132, 255); --uc-tab-line-color: rgb(10, 132, 255);
} }

View file

@ -4,6 +4,8 @@ See the above repository for updates as well as full license text. */
/* Makes tabs toolbar items zero-height initially and sets enlarge them to fill up space equal to tab-min-height set on tabs. Optionally use privatemode_indicator_as_menu_button.css to replace main menu icon with private browsing indicator while tabs are hidden. */ /* Makes tabs toolbar items zero-height initially and sets enlarge them to fill up space equal to tab-min-height set on tabs. Optionally use privatemode_indicator_as_menu_button.css to replace main menu icon with private browsing indicator while tabs are hidden. */
/* Firefox 65+ only */ /* Firefox 65+ only */
/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }
:root[sizemode="normal"] #nav-bar{ --uc-window-drag-space-width: 20px } :root[sizemode="normal"] #nav-bar{ --uc-window-drag-space-width: 20px }
@ -30,7 +32,7 @@ See the above repository for updates as well as full license text. */
} }
.accessibility-indicator > hbox{ padding-block: 0 !important } .accessibility-indicator > hbox{ padding-block: 0 !important }
#tabbrowser-tabs .tabbrowser-tab{ height: calc(var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)) } #tabbrowser-tabs .tabbrowser-tab{ height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) }
#tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{ #tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{
visibility: collapse !important; visibility: collapse !important;

View file

@ -11,6 +11,9 @@ Get window_control_placeholder_support.css
Window controls will be all wrong without it Window controls will be all wrong without it
*/ */
/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }
#titlebar{ -moz-appearance: none !important; } #titlebar{ -moz-appearance: none !important; }
/* We'll use window controls from menubar instead */ /* We'll use window controls from menubar instead */
#TabsToolbar > .titlebar-buttonbox-container { display: none } #TabsToolbar > .titlebar-buttonbox-container { display: none }
@ -66,5 +69,5 @@ Window controls will be all wrong without it
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none !important; } :root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none !important; }
:root[sizemode="fullscreen"] #TabsToolbar > #window-controls{ :root[sizemode="fullscreen"] #TabsToolbar > #window-controls{
z-index: 2; z-index: 2;
top: calc(var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)); top: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
} }

View file

@ -28,6 +28,10 @@ See the above repository for updates as well as full license text. */
} }
@-moz-document url(chrome://browser/content/browser.xhtml){ @-moz-document url(chrome://browser/content/browser.xhtml){
/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }
#scrollbutton-up~spacer, #scrollbutton-up~spacer,
#scrollbutton-up, #scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) } #scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }
@ -36,7 +40,7 @@ See the above repository for updates as well as full license text. */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow-y: auto; overflow-y: auto;
max-height: calc((var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)) * var(--multirow-n-rows)); max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
scrollbar-color: currentColor transparent; scrollbar-color: currentColor transparent;
scrollbar-width: thin; scrollbar-width: thin;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;

View file

@ -18,6 +18,9 @@ See the above repository for updates as well as full license text. */
@-moz-document url(chrome://browser/content/browser.xhtml){ @-moz-document url(chrome://browser/content/browser.xhtml){
/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }
:root{ :root{
--multirow-toolbar-height: 40px; --multirow-toolbar-height: 40px;
--multirow-top-padding: 0px; --multirow-top-padding: 0px;
@ -150,14 +153,14 @@ See the above repository for updates as well as full license text. */
overflow: -moz-hidden-unscrollable; overflow: -moz-hidden-unscrollable;
display: block; display: block;
--scrollbutton-display-model: none; --scrollbutton-display-model: none;
--uc-scrollbox-max-height: calc((var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)) * var(--multirow-n-rows)); --uc-scrollbox-max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
} }
:root[inFullscreen] .scrollbox-clip[orient="horizontal"]:not(:hover), :root[inFullscreen] .scrollbox-clip[orient="horizontal"]:not(:hover),
:root[inFullscreen] #tabbrowser-arrowscrollbox:not(:hover){ --uc-scrollbox-max-height: 1px; min-height: 1px !important; } :root[inFullscreen] #tabbrowser-arrowscrollbox:not(:hover){ --uc-scrollbox-max-height: 1px; min-height: 1px !important; }
.tabbrowser-tab{ .tabbrowser-tab{
height: calc((var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px))) !important; height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px))) !important;
scroll-snap-align: start; scroll-snap-align: start;
} }

View file

@ -9,7 +9,10 @@ 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 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; } :root[uidensity="compact"]{
--tab-block-margin: 2px !important;
--proton-tab-block-margin: 2px !important;
}
/* Modify these to change relative widths or default height */ /* Modify these to change relative widths or default height */
#navigator-toolbox{ #navigator-toolbox{
@ -35,7 +38,7 @@ urlbar_popup_full_width.css is VERY MUCH recommended for Firefox 71+ because of
--tabs-navbar-shadow-size: 0px; --tabs-navbar-shadow-size: 0px;
} }
#tabbrowser-tabs{ #tabbrowser-tabs{
--tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--tab-block-margin,0px)) !important;
} }
/* This isn't useful when tabs start in the middle of the window */ /* This isn't useful when tabs start in the middle of the window */

View file

@ -9,7 +9,10 @@ Get window_control_placeholder_support.css
Window controls will be all wrong without it Window controls will be all wrong without it
*/ */
:root[proton][uidensity="compact"]{ --proton-tab-block-margin: 2px !important; } :root[uidensity="compact"]{
--tab-block-margin: 2px !important;
--proton-tab-block-margin: 2px !important;
}
/* Modify these to change relative widths or default height */ /* Modify these to change relative widths or default height */
#navigator-toolbox{ #navigator-toolbox{
@ -49,7 +52,7 @@ Window controls will be all wrong without it
} }
#tabbrowser-tabs{ #tabbrowser-tabs{
--tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--tab-block-margin,0px)) !important;
} }
/* Need to set background color for selected tab so it can be distinguished from background */ /* Need to set background color for selected tab so it can be distinguished from background */
#TabsToolbar .tab-background[selected]{ #TabsToolbar .tab-background[selected]{

View file

@ -9,7 +9,10 @@ Get window_control_placeholder_support.css
Window controls will be all wrong without it Window controls will be all wrong without it
*/ */
:root[proton][uidensity="compact"]{ --proton-tab-block-margin: 2px !important; } :root[uidensity="compact"]{
--tab-block-margin: 2px !important;
--proton-tab-block-margin: 2px !important;
}
/* Modify these to change relative widths or default height */ /* Modify these to change relative widths or default height */
#navigator-toolbox{ #navigator-toolbox{
@ -52,7 +55,7 @@ Window controls will be all wrong without it
} }
#tabbrowser-tabs{ #tabbrowser-tabs{
--tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--tab-block-margin,0px)) !important;
} }
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container{ #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container{

View file

@ -12,7 +12,10 @@ See the above repository for updates as well as full license text. */
/* Modify it to suit your needs */ /* Modify it to suit your needs */
@media screen and (min-width: 1100px){ @media screen and (min-width: 1100px){
:root[proton][uidensity="compact"]{ --proton-tab-block-margin: 2px !important; } :root[uidensity="compact"]{
--tab-block-margin: 2px !important;
--proton-tab-block-margin: 2px !important;
}
/* Modify these to change relative widths or default height */ /* Modify these to change relative widths or default height */
#navigator-toolbox{ #navigator-toolbox{
@ -38,7 +41,7 @@ See the above repository for updates as well as full license text. */
--tabs-navbar-shadow-size: 0px; --tabs-navbar-shadow-size: 0px;
} }
#tabbrowser-tabs{ #tabbrowser-tabs{
--tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--proton-tab-block-margin,0px)) !important; --tab-min-height: calc(var(--uc-toolbar-height) - 2 * var(--tab-block-margin,0px)) !important;
} }
/* This isn't useful when tabs start in the middle of the window */ /* This isn't useful when tabs start in the middle of the window */

View file

@ -7,6 +7,7 @@ See the above repository for updates as well as full license text. */
:root{ :root{
--proton-tab-block-margin: 0px !important; --proton-tab-block-margin: 0px !important;
--tab-block-margin: 0px !important;
--tabs-shadow-size: 1px !important; --tabs-shadow-size: 1px !important;
/* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color */ /* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color */

View file

@ -3,6 +3,9 @@ See the above repository for updates as well as full license text. */
/* Makes menubar appear as overlay in the top left corner */ /* Makes menubar appear as overlay in the top left corner */
/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }
#toolbar-menubar{ #toolbar-menubar{
position: fixed; position: fixed;
display: flex; display: flex;
@ -20,7 +23,7 @@ See the above repository for updates as well as full license text. */
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ display: none } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ display: none }
#main-menubar{ #main-menubar{
height: calc(var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)); height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
background-color: var(--arrowpanel-background); background-color: var(--arrowpanel-background);
color: var(--arrowpanel-color); color: var(--arrowpanel-color);
} }
@ -30,7 +33,7 @@ See the above repository for updates as well as full license text. */
content: ""; content: "";
display: -moz-box; display: -moz-box;
width: 30px; width: 30px;
height: calc(var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)); height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent); background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent);
} }

View file

@ -10,6 +10,9 @@ Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css linux_gtk_window_control_patch.css
*/ */
/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }
.titlebar-buttonbox-container{ .titlebar-buttonbox-container{
position: fixed; position: fixed;
display: block; display: block;
@ -37,7 +40,7 @@ linux_gtk_window_control_patch.css
:root[sizemode="maximized"] #toolbar-menubar:not([autohide="false"]) .titlebar-buttonbox-container{ top: 8px } :root[sizemode="maximized"] #toolbar-menubar:not([autohide="false"]) .titlebar-buttonbox-container{ top: 8px }
} }
/* Move tabs below content */ /* Move tabs below content */
:root:not([inDOMFullscreen]) #browser-bottombox{ margin-bottom: calc(var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)) } :root:not([inDOMFullscreen]) #browser-bottombox{ margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) }
:root[inFullscreen]:not([inDOMFullscreen]) #browser-bottombox{ margin-bottom: 1px; } :root[inFullscreen]:not([inDOMFullscreen]) #browser-bottombox{ margin-bottom: 1px; }
#TabsToolbar{ #TabsToolbar{
@ -45,7 +48,7 @@ linux_gtk_window_control_patch.css
display: block; display: block;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
height: calc(var(--tab-min-height) + 2 * var(--proton-tab-block-margin,0px)); height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
--tabs-navbar-shadow-size: 0px; --tabs-navbar-shadow-size: 0px;
} }
#TabsToolbar:hover{ z-index: 1 } #TabsToolbar:hover{ z-index: 1 }