Scope styles that select #browser to browser.xhtml
This commit is contained in:
MrOtherGuy
parent
783914689c
commit
6263334baa
5 changed files with 284 additions and 270 deletions
|
|
@ -16,120 +16,121 @@ See the above repository for updates as well as full license text. */
|
||||||
/* This maximum visible rows won't work before Fx66 */
|
/* This maximum visible rows won't work before Fx66 */
|
||||||
/* So this setting does nothing on Fx65 and all tab rows will be shown */
|
/* So this setting does nothing on Fx65 and all tab rows will be shown */
|
||||||
|
|
||||||
:root{
|
|
||||||
--multirow-toolbar-height: 40px;
|
|
||||||
--multirow-top-padding: 0px;
|
|
||||||
--multirow-n-rows: 3;
|
|
||||||
--multirow-tab-min-width: 100px;
|
|
||||||
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
|
|
||||||
}
|
|
||||||
@media (-moz-os-version: windows-win10){
|
|
||||||
:root[sizemode="maximized"]{ --multirow-top-padding: 8px }
|
|
||||||
}
|
|
||||||
:root[uidensity="compact"]{--multirow-toolbar-height: 32px}
|
|
||||||
:root{ border-top-width: 0px !important }
|
|
||||||
|
|
||||||
#main-window > body > box,
|
|
||||||
#navigator-toolbox{ -moz-box-ordinal-group: 2; border-bottom: 0px !important }
|
|
||||||
|
|
||||||
#titlebar{-moz-appearance: none !important; } /* Try setting to "-moz-window-titlebar" if you face issues */
|
|
||||||
|
|
||||||
#nav-bar{
|
|
||||||
position: fixed !important;
|
|
||||||
display: flex;
|
|
||||||
margin-left: 30px;
|
|
||||||
width: calc(100vw - 30px);
|
|
||||||
top: var(--multirow-top-padding);
|
|
||||||
}
|
|
||||||
:root[inFullscreen] #nav-bar,
|
|
||||||
:root[tabsintitlebar] #nav-bar{
|
|
||||||
margin-right: 138px;
|
|
||||||
/* width == 100vw - margins */
|
|
||||||
width: calc(100vw - 168px);
|
|
||||||
top: var(--multirow-top-padding);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[inFullscreen] #TabsToolbar > #window-controls{
|
|
||||||
display: flex !important;
|
|
||||||
justify-content: flex-end;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
width: 138px;
|
|
||||||
height: var(--multirow-toolbar-height);
|
|
||||||
background:var(--toolbar-bgcolor);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fix incorrect vertical alignment with megabar */
|
|
||||||
#urlbar[breakout]{ --urlbar-toolbar-height: var(--multirow-toolbar-height) !important; }
|
|
||||||
|
|
||||||
/* Fix customization view */
|
|
||||||
#customization-panelWrapper > .panel-arrowbox > .panel-arrow{ margin-inline-end: initial !important; }
|
|
||||||
|
|
||||||
#customization-container,
|
|
||||||
:root:not([inFullscreen]) #content-deck,
|
|
||||||
:root:not([inFullscreen]) #browser{ margin-top: calc(var(--multirow-toolbar-height) + var(--multirow-top-padding))}
|
|
||||||
|
|
||||||
:root[inFullscreen] #TabsToolbar > #window-controls,
|
|
||||||
:root[inFullscreen] #toolbar-menubar,
|
|
||||||
:root[inFullscreen] #nav-bar{ top: calc(1px - (var(--multirow-toolbar-height) + var(--multirow-top-padding))) }
|
|
||||||
|
|
||||||
:root[inFullscreen] #navigator-toolbox:hover > #titlebar > #TabsToolbar > #window-controls,
|
|
||||||
:root[inFullscreen] #navigator-toolbox:hover > #nav-bar,
|
|
||||||
:root[inFullscreen] #navigator-toolbox:hover > #titlebar > #toolbar-menubar{ top: 0px }
|
|
||||||
|
|
||||||
/* Restyle nav-bar and menubar */
|
|
||||||
#nav-bar-customization-target{ flex-grow: 1 }
|
|
||||||
|
|
||||||
#nav-bar-overflow-button,
|
|
||||||
#PanelUI-menu-button{ height: var(--multirow-toolbar-height); }
|
|
||||||
|
|
||||||
#toolbar-menubar{
|
|
||||||
height: var(--multirow-toolbar-height);
|
|
||||||
position: fixed;
|
|
||||||
display: flex;
|
|
||||||
visibility: visible !important;
|
|
||||||
top: var(--multirow-top-padding);
|
|
||||||
width: 100vw;
|
|
||||||
color: var(--lwt-text-color);
|
|
||||||
background: linear-gradient(to right, var(--toolbar-bgcolor), var(--toolbar-bgcolor) 30px, transparent 30px) no-repeat;
|
|
||||||
}
|
|
||||||
#menubar-items + spacer{ flex-grow: 1 }
|
|
||||||
|
|
||||||
#toolbar-menubar > #menubar-items{
|
|
||||||
-moz-box-pack: center;
|
|
||||||
height: 100%;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar-menubar:hover{ z-index: 2 }
|
|
||||||
#toolbar-menubar:hover > #menubar-items{
|
|
||||||
visibility: visible;
|
|
||||||
background-image: linear-gradient( to left,transparent,var(--lwt-accent-color) 35px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar-menubar > .titlebar-buttonbox-container{ background: var(--toolbar-bgcolor); }
|
|
||||||
|
|
||||||
#toolbar-menubar > .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100% ;}
|
|
||||||
|
|
||||||
#main-menubar:last-child{ padding-inline-end: 40px }
|
|
||||||
#toolbar-menubar > toolbarspring {
|
|
||||||
background: url("chrome://global/skin/icons/settings.svg") no-repeat 10px;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
fill: currentColor;
|
|
||||||
-moz-context-properties: fill;
|
|
||||||
min-width: 28px !important;
|
|
||||||
max-width: 28px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[tabsintitlebar] #PanelUI-button{ margin-right: 20px; }
|
|
||||||
|
|
||||||
#tabbrowser-tabs{
|
|
||||||
min-height: unset !important;
|
|
||||||
padding-inline-start: 0px !important
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-document url(chrome://browser/content/browser.xhtml){
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
||||||
|
|
||||||
|
:root{
|
||||||
|
--multirow-toolbar-height: 40px;
|
||||||
|
--multirow-top-padding: 0px;
|
||||||
|
--multirow-n-rows: 3;
|
||||||
|
--multirow-tab-min-width: 100px;
|
||||||
|
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
|
||||||
|
}
|
||||||
|
@media (-moz-os-version: windows-win10){
|
||||||
|
:root[sizemode="maximized"]{ --multirow-top-padding: 8px }
|
||||||
|
}
|
||||||
|
:root[uidensity="compact"]{--multirow-toolbar-height: 32px}
|
||||||
|
:root{ border-top-width: 0px !important }
|
||||||
|
|
||||||
|
#main-window > body > box,
|
||||||
|
#navigator-toolbox{ -moz-box-ordinal-group: 2; border-bottom: 0px !important }
|
||||||
|
|
||||||
|
#titlebar{-moz-appearance: none !important; } /* Try setting to "-moz-window-titlebar" if you face issues */
|
||||||
|
|
||||||
|
#nav-bar{
|
||||||
|
position: fixed !important;
|
||||||
|
display: flex;
|
||||||
|
margin-left: 30px;
|
||||||
|
width: calc(100vw - 30px);
|
||||||
|
top: var(--multirow-top-padding);
|
||||||
|
}
|
||||||
|
:root[inFullscreen] #nav-bar,
|
||||||
|
:root[tabsintitlebar] #nav-bar{
|
||||||
|
margin-right: 138px;
|
||||||
|
/* width == 100vw - margins */
|
||||||
|
width: calc(100vw - 168px);
|
||||||
|
top: var(--multirow-top-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[inFullscreen] #TabsToolbar > #window-controls{
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: flex-end;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
width: 138px;
|
||||||
|
height: var(--multirow-toolbar-height);
|
||||||
|
background:var(--toolbar-bgcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix incorrect vertical alignment with megabar */
|
||||||
|
#urlbar[breakout]{ --urlbar-toolbar-height: var(--multirow-toolbar-height) !important; }
|
||||||
|
|
||||||
|
/* Fix customization view */
|
||||||
|
#customization-panelWrapper > .panel-arrowbox > .panel-arrow{ margin-inline-end: initial !important; }
|
||||||
|
|
||||||
|
#customization-container,
|
||||||
|
:root:not([inFullscreen]) #content-deck,
|
||||||
|
:root:not([inFullscreen]) #browser{ margin-top: calc(var(--multirow-toolbar-height) + var(--multirow-top-padding))}
|
||||||
|
|
||||||
|
:root[inFullscreen] #TabsToolbar > #window-controls,
|
||||||
|
:root[inFullscreen] #toolbar-menubar,
|
||||||
|
:root[inFullscreen] #nav-bar{ top: calc(1px - (var(--multirow-toolbar-height) + var(--multirow-top-padding))) }
|
||||||
|
|
||||||
|
:root[inFullscreen] #navigator-toolbox:hover > #titlebar > #TabsToolbar > #window-controls,
|
||||||
|
:root[inFullscreen] #navigator-toolbox:hover > #nav-bar,
|
||||||
|
:root[inFullscreen] #navigator-toolbox:hover > #titlebar > #toolbar-menubar{ top: 0px }
|
||||||
|
|
||||||
|
/* Restyle nav-bar and menubar */
|
||||||
|
#nav-bar-customization-target{ flex-grow: 1 }
|
||||||
|
|
||||||
|
#nav-bar-overflow-button,
|
||||||
|
#PanelUI-menu-button{ height: var(--multirow-toolbar-height); }
|
||||||
|
|
||||||
|
#toolbar-menubar{
|
||||||
|
height: var(--multirow-toolbar-height);
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
visibility: visible !important;
|
||||||
|
top: var(--multirow-top-padding);
|
||||||
|
width: 100vw;
|
||||||
|
color: var(--lwt-text-color);
|
||||||
|
background: linear-gradient(to right, var(--toolbar-bgcolor), var(--toolbar-bgcolor) 30px, transparent 30px) no-repeat;
|
||||||
|
}
|
||||||
|
#menubar-items + spacer{ flex-grow: 1 }
|
||||||
|
|
||||||
|
#toolbar-menubar > #menubar-items{
|
||||||
|
-moz-box-pack: center;
|
||||||
|
height: 100%;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar-menubar:hover{ z-index: 2 }
|
||||||
|
#toolbar-menubar:hover > #menubar-items{
|
||||||
|
visibility: visible;
|
||||||
|
background-image: linear-gradient( to left,transparent,var(--lwt-accent-color) 35px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar-menubar > .titlebar-buttonbox-container{ background: var(--toolbar-bgcolor); }
|
||||||
|
|
||||||
|
#toolbar-menubar > .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100% ;}
|
||||||
|
|
||||||
|
#main-menubar:last-child{ padding-inline-end: 40px }
|
||||||
|
#toolbar-menubar > toolbarspring {
|
||||||
|
background: url("chrome://global/skin/icons/settings.svg") no-repeat 10px;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
fill: currentColor;
|
||||||
|
-moz-context-properties: fill;
|
||||||
|
min-width: 28px !important;
|
||||||
|
max-width: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[tabsintitlebar] #PanelUI-button{ margin-right: 20px; }
|
||||||
|
|
||||||
|
#tabbrowser-tabs{
|
||||||
|
min-height: unset !important;
|
||||||
|
padding-inline-start: 0px !important
|
||||||
|
}
|
||||||
|
|
||||||
#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) }
|
||||||
|
|
@ -142,43 +143,43 @@ See the above repository for updates as well as full license text. */
|
||||||
scrollbar-color: currentColor transparent;
|
scrollbar-color: currentColor transparent;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tabbrowser-arrowscrollbox{
|
||||||
|
overflow: -moz-hidden-unscrollable;
|
||||||
|
display: block;
|
||||||
|
--scrollbutton-display-model: none;
|
||||||
|
--uc-scrollbox-max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
|
||||||
|
}
|
||||||
|
:root[inFullscreen] #tabbrowser-arrowscrollbox:not(:hover){ --uc-scrollbox-max-height: 1px; min-height: 1px !important; }
|
||||||
|
|
||||||
|
.tabbrowser-tab{ height: var(--tab-min-height); }
|
||||||
|
|
||||||
|
.tabbrowser-tab[pinned]{
|
||||||
|
position: static !important;
|
||||||
|
margin-inline-start: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbrowser-tab[fadein]:not([pinned]){
|
||||||
|
min-width: var(--multirow-tab-min-width) !important;
|
||||||
|
flex-grow: var(--multirow-tab-dynamic-width);
|
||||||
|
/*
|
||||||
|
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
|
||||||
|
Don't set to none or you'll see errors in console when closing tabs
|
||||||
|
*/
|
||||||
|
/*max-width: 100vw !important;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbrowser-tab > stack{ width: 100%; height: 100%; }
|
||||||
|
|
||||||
|
/* This should fix potential flash that could occur when bottom border is hovered to show tabs in fullscreen mode */
|
||||||
|
#tabbrowser-tabpanels{ background-color: var(--lwt-accent-color) !important; }
|
||||||
|
|
||||||
|
/* Hide some things that are unnecessary in multi-row below content mode */
|
||||||
|
|
||||||
|
#TabsToolbar > #window-controls,
|
||||||
|
#alltabs-button,
|
||||||
|
:root:not([customizing]) #TabsToolbar #new-tab-button,
|
||||||
|
#tabbrowser-arrowscrollbox > spacer,
|
||||||
|
.tabbrowser-tab::after{ display: none !important } /* Also disables tab separators since they mysteriously break tab-row scrolling */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabbrowser-arrowscrollbox{
|
|
||||||
overflow: -moz-hidden-unscrollable;
|
|
||||||
display: block;
|
|
||||||
--scrollbutton-display-model: none;
|
|
||||||
--uc-scrollbox-max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
|
|
||||||
}
|
|
||||||
:root[inFullscreen] #tabbrowser-arrowscrollbox:not(:hover){ --uc-scrollbox-max-height: 1px; min-height: 1px !important; }
|
|
||||||
|
|
||||||
.tabbrowser-tab{ height: var(--tab-min-height); }
|
|
||||||
|
|
||||||
.tabbrowser-tab[pinned]{
|
|
||||||
position: static !important;
|
|
||||||
margin-inline-start: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbrowser-tab[fadein]:not([pinned]){
|
|
||||||
min-width: var(--multirow-tab-min-width) !important;
|
|
||||||
flex-grow: var(--multirow-tab-dynamic-width);
|
|
||||||
/*
|
|
||||||
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
|
|
||||||
Don't set to none or you'll see errors in console when closing tabs
|
|
||||||
*/
|
|
||||||
/*max-width: 100vw !important;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbrowser-tab > stack{ width: 100%; height: 100%; }
|
|
||||||
|
|
||||||
/* This should fix potential flash that could occur when bottom border is hovered to show tabs in fullscreen mode */
|
|
||||||
#tabbrowser-tabpanels{ background-color: var(--lwt-accent-color) !important; }
|
|
||||||
|
|
||||||
/* Hide some things that are unnecessary in multi-row below content mode */
|
|
||||||
|
|
||||||
#TabsToolbar > #window-controls,
|
|
||||||
#alltabs-button,
|
|
||||||
:root:not([customizing]) #TabsToolbar #new-tab-button,
|
|
||||||
#tabbrowser-arrowscrollbox > spacer,
|
|
||||||
.tabbrowser-tab::after{ display: none !important } /* Also disables tab separators since they mysteriously break tab-row scrolling */
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,34 +3,36 @@ See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
/* Moves the main toolbar (#nav-bar) to the bottom of the window */
|
/* Moves the main toolbar (#nav-bar) to the bottom of the window */
|
||||||
|
|
||||||
/* REQUIRES browser.urlbar.update1 to be true, otherwise urlbar won't show any results */
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
||||||
|
|
||||||
|
:root:not([inFullscreen]){
|
||||||
|
--uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[uidensity="compact"]:not([inFullscreen]){
|
||||||
|
--uc-bottom-toolbar-height: calc(29px + var(--toolbarbutton-outer-padding) )
|
||||||
|
}
|
||||||
|
|
||||||
|
#browser,
|
||||||
|
#customization-container{ margin-bottom: var(--uc-bottom-toolbar-height,0px) }
|
||||||
|
|
||||||
|
#nav-bar{
|
||||||
|
position: fixed !important;
|
||||||
|
bottom: 0px;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar-customization-target{ flex-grow: 1; }
|
||||||
|
|
||||||
|
#urlbar[breakout][breakout-extend]{
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
bottom: -2px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
|
||||||
|
top: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar[open] > .urlbarView{ margin-block: 0px calc(var(--urlbar-height) + 1px) !important; box-shadow: none !important; }
|
||||||
|
|
||||||
:root:not([inFullscreen]){
|
|
||||||
--uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[uidensity="compact"]:not([inFullscreen]){
|
|
||||||
--uc-bottom-toolbar-height: calc(29px + var(--toolbarbutton-outer-padding) )
|
|
||||||
}
|
|
||||||
|
|
||||||
#browser,
|
|
||||||
#customization-container{ margin-bottom: var(--uc-bottom-toolbar-height,0px) }
|
|
||||||
|
|
||||||
#nav-bar{
|
|
||||||
position: fixed !important;
|
|
||||||
bottom: 0px;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-bar-customization-target{ flex-grow: 1; }
|
|
||||||
|
|
||||||
#urlbar[breakout][breakout-extend]{
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
bottom: -2px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
|
|
||||||
top: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#urlbar[open] > .urlbarView{ margin-block: 0px calc(var(--urlbar-height) + 1px) !important; box-shadow: none !important; }
|
|
||||||
|
|
@ -5,57 +5,61 @@ See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
/* By default, menubar will stay on top with two options to select it's behavior - see below */
|
/* By default, menubar will stay on top with two options to select it's behavior - see below */
|
||||||
|
|
||||||
#titlebar{ -moz-appearance: none !important; }
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
||||||
|
|
||||||
|
#titlebar{ -moz-appearance: none !important; }
|
||||||
|
|
||||||
|
@media (-moz-os-version: windows-win10){
|
||||||
|
:root[sizemode="maximized"][tabsintitlebar] :-moz-any(#browser,#customization-container,#toolbar-menubar){ margin-top: 8px !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#mainPopupSet,
|
||||||
|
#browser,
|
||||||
|
#customization-container
|
||||||
|
,#nav-bar, #PersonalToolbar/* Remove this row if you want tabs to be the top-most row */
|
||||||
|
{ -moz-box-ordinal-group: 0 }
|
||||||
|
|
||||||
|
#toolbar-menubar{ position: fixed; display: flex; width: 100vw; top: 0px; }
|
||||||
|
|
||||||
|
#toolbar-menubar > spacer{ flex-grow: 1 }
|
||||||
|
|
||||||
|
#urlbar[breakout][breakout-extend]{
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
bottom: -2px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
|
||||||
|
top: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar[open] > .urlbarView{ margin-block: 0px calc(var(--urlbar-height) + 1px) !important; box-shadow: none !important; }
|
||||||
|
|
||||||
|
/* Yeah, removes window controls. Likely not wanted on bottom row */
|
||||||
|
#TabsToolbar > .titlebar-buttonbox-container{ display: none }
|
||||||
|
#toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 }
|
||||||
|
|
||||||
|
/**************
|
||||||
|
Menubar options
|
||||||
|
***************/
|
||||||
|
|
||||||
|
/* Activate only ONE of the following */
|
||||||
|
|
||||||
|
/* 1. Overlay menubar on top of web-content (default) */
|
||||||
|
/* This should be used if menubar is disabled and Alt-key is used to activate it temporarily */
|
||||||
|
|
||||||
|
#toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black) }
|
||||||
|
|
||||||
|
/* 2. Static menubar on top of the window, uncomment to enable this option */
|
||||||
|
/* Use when menubar is enabled to always show it */
|
||||||
|
|
||||||
|
/*
|
||||||
|
#browser,#customization-container{ padding-top: 28px }
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 3. Menubar below content, above tabs toolbar */
|
||||||
|
/*
|
||||||
|
#toolbar-menubar{ position: static; display: -moz-box; margin-top: 0px !important; }
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* set to "reverse" (without quotes) if you want tabs above menubar with option 3 */
|
||||||
|
#titlebar{ -moz-box-direction: normal; }
|
||||||
|
|
||||||
@media (-moz-os-version: windows-win10){
|
|
||||||
:root[sizemode="maximized"][tabsintitlebar] :-moz-any(#browser,#customization-container,#toolbar-menubar){ margin-top: 8px !important; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#mainPopupSet,
|
|
||||||
#browser,
|
|
||||||
#customization-container
|
|
||||||
,#nav-bar, #PersonalToolbar/* Remove this row if you want tabs to be the top-most row */
|
|
||||||
{ -moz-box-ordinal-group: 0 }
|
|
||||||
|
|
||||||
#toolbar-menubar{ position: fixed; display: flex; width: 100vw; top: 0px; }
|
|
||||||
|
|
||||||
#toolbar-menubar > spacer{ flex-grow: 1 }
|
|
||||||
|
|
||||||
#urlbar[breakout][breakout-extend]{
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
bottom: -2px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
|
|
||||||
top: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#urlbar[open] > .urlbarView{ margin-block: 0px calc(var(--urlbar-height) + 1px) !important; box-shadow: none !important; }
|
|
||||||
|
|
||||||
/* Yeah, removes window controls. Likely not wanted on bottom row */
|
|
||||||
#TabsToolbar > .titlebar-buttonbox-container{ display: none }
|
|
||||||
#toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 }
|
|
||||||
|
|
||||||
/**************
|
|
||||||
Menubar options
|
|
||||||
***************/
|
|
||||||
|
|
||||||
/* Activate only ONE of the following */
|
|
||||||
|
|
||||||
/* 1. Overlay menubar on top of web-content (default) */
|
|
||||||
/* This should be used if menubar is disabled and Alt-key is used to activate it temporarily */
|
|
||||||
|
|
||||||
#toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black) }
|
|
||||||
|
|
||||||
/* 2. Static menubar on top of the window, uncomment to enable this option */
|
|
||||||
/* Use when menubar is enabled to always show it */
|
|
||||||
|
|
||||||
/*
|
|
||||||
#browser,#customization-container{ padding-top: 28px }
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* 3. Menubar below content, above tabs toolbar */
|
|
||||||
/*
|
|
||||||
#toolbar-menubar{ position: static; display: -moz-box; margin-top: 0px !important; }
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* set to "reverse" (without quotes) if you want tabs above menubar with option 3 */
|
|
||||||
#titlebar{ -moz-box-direction: normal; }
|
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,41 @@
|
||||||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.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. */
|
||||||
|
|
||||||
Makes bookmarks toolbar appear vertically at the left side of the window
|
/* Makes bookmarks toolbar appear vertically at the left side of the window */
|
||||||
|
|
||||||
:root:not([inDOMFullscreen]){
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
||||||
--uc-vertical-toolbar-width: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#PersonalToolbar{
|
:root:not([inDOMFullscreen]){
|
||||||
position: fixed;
|
--uc-vertical-toolbar-width: 60px;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
left: 0;
|
|
||||||
width: var(--uc-vertical-toolbar-width,0);
|
|
||||||
|
|
||||||
/* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
|
#PersonalToolbar{
|
||||||
max-height: 100vh !important;
|
position: fixed;
|
||||||
padding-bottom: 120px !important;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
left: 0;
|
||||||
|
width: var(--uc-vertical-toolbar-width,0);
|
||||||
|
|
||||||
|
/* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
|
||||||
|
max-height: 100vh !important;
|
||||||
|
padding-bottom: 120px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#personal-bookmarks{ overflow-y: auto; scrollbar-width: none;}
|
||||||
|
|
||||||
|
#PersonalToolbar > #personal-bookmarks > #PlacesToolbar > hbox{ -moz-box-orient: vertical !important; }
|
||||||
|
#PersonalToolbar #PlacesToolbarItems{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PersonalToolbar #PlacesToolbarItems > .bookmark-item{ padding-block: 4px !important; }
|
||||||
|
|
||||||
|
body > #browser,
|
||||||
|
body > #browser-bottombox,
|
||||||
|
#customization-container{
|
||||||
|
margin-left: var(--uc-vertical-toolbar-width,0);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#personal-bookmarks{ overflow-y: auto; scrollbar-width: none;}
|
|
||||||
|
|
||||||
#PersonalToolbar > #personal-bookmarks > #PlacesToolbar > hbox{ -moz-box-orient: vertical !important; }
|
|
||||||
#PersonalToolbar #PlacesToolbarItems{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#PersonalToolbar #PlacesToolbarItems > .bookmark-item{ padding-block: 4px !important; }
|
|
||||||
|
|
||||||
body > #browser,
|
|
||||||
body > #browser-bottombox,
|
|
||||||
#customization-container{
|
|
||||||
margin-left: var(--uc-vertical-toolbar-width,0);
|
|
||||||
}
|
|
||||||
|
|
@ -6,48 +6,51 @@ See the above repository for updates as well as full license text. */
|
||||||
/* The first element in the menubar is used to "toggle" the file-menu & friends */
|
/* The first element in the menubar is used to "toggle" the file-menu & friends */
|
||||||
/* So, if you want the menu items to be toggleable, just move one button to be before menubar items in the toolbar. If all buttons come after menubar items, then none of those will trigger menubar items. */
|
/* So, if you want the menu items to be toggleable, just move one button to be before menubar items in the toolbar. If all buttons come after menubar items, then none of those will trigger menubar items. */
|
||||||
|
|
||||||
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
||||||
|
|
||||||
|
:root:not([customizing]) #titlebar{
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
-moz-appearance: none !important;
|
||||||
|
right: 0px;
|
||||||
|
height: 100vh;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
:root:not([customizing]) #navigator-toolbox{ margin-top: var(--tab-min-height) }
|
||||||
|
|
||||||
|
#TabsToolbar:not([customizing]){
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100vw;
|
||||||
|
padding-left: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px) }
|
||||||
|
#TabsToolbar > .titlebar-buttonbox-container{
|
||||||
|
display: block !important;
|
||||||
|
float: right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar-menubar:not([customizing]){
|
||||||
|
margin-top: 40px;
|
||||||
|
width: 30px;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar-menubar > .titlebar-buttonbox-container,#toolbar-menubar > spacer{ display: none !important; }
|
||||||
|
|
||||||
|
#toolbar-menubar > #menubar-items{ visibility: collapse }
|
||||||
|
#toolbar-menubar > .toolbarbutton-1:first-child:hover + #menubar-items,#toolbar-menubar > #menubar-items:hover{ visibility: visible }
|
||||||
|
|
||||||
|
#toolbar-menubar:not([customizing]) #main-menubar{
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
margin-left: -60px;
|
||||||
|
background-color: var(--lwt-accent-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not([inDOMFullscreen]) > #content-deck,:root:not([inDOMFullscreen]) #browser{ margin-right: 30px }
|
||||||
|
|
||||||
:root:not([customizing]) #titlebar{
|
|
||||||
position: fixed;
|
|
||||||
display: block;
|
|
||||||
-moz-appearance: none !important;
|
|
||||||
right: 0px;
|
|
||||||
height: 100vh;
|
|
||||||
width: 30px;
|
|
||||||
}
|
}
|
||||||
:root:not([customizing]) #navigator-toolbox{ margin-top: var(--tab-min-height) }
|
|
||||||
|
|
||||||
#TabsToolbar:not([customizing]){
|
|
||||||
position: fixed;
|
|
||||||
display: block;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100vw;
|
|
||||||
padding-left: 30px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px) }
|
|
||||||
#TabsToolbar > .titlebar-buttonbox-container{
|
|
||||||
display: block !important;
|
|
||||||
float: right !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar-menubar:not([customizing]){
|
|
||||||
margin-top: 40px;
|
|
||||||
width: 30px;
|
|
||||||
-moz-box-orient: vertical;
|
|
||||||
-moz-box-flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar-menubar > .titlebar-buttonbox-container,#toolbar-menubar > spacer{ display: none !important; }
|
|
||||||
|
|
||||||
#toolbar-menubar > #menubar-items{ visibility: collapse }
|
|
||||||
#toolbar-menubar > .toolbarbutton-1:first-child:hover + #menubar-items,#toolbar-menubar > #menubar-items:hover{ visibility: visible }
|
|
||||||
|
|
||||||
#toolbar-menubar:not([customizing]) #main-menubar{
|
|
||||||
-moz-box-orient: vertical;
|
|
||||||
margin-left: -60px;
|
|
||||||
background-color: var(--lwt-accent-color)
|
|
||||||
}
|
|
||||||
|
|
||||||
:root:not([inDOMFullscreen]) > #content-deck,:root:not([inDOMFullscreen]) #browser{ margin-right: 30px }
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue