Move window control placeholder styles to shared stylesheet
This commit is contained in:
MrOtherGuy
parent
feba8a6403
commit
5e46b7a0a3
10 changed files with 140 additions and 73 deletions
|
|
@ -4,10 +4,19 @@ Use Fx65_tabs_on_bottom_menubar_on_top_patch if you
|
|||
have menubar permanently enabled and want it on top
|
||||
*/
|
||||
|
||||
/* IMPORTANT */
|
||||
/*
|
||||
Get EITHER
|
||||
window_control_placeholder_support.css
|
||||
OR
|
||||
window_control_placeholder_support_mac.css
|
||||
|
||||
Window controls will be all wrong without it
|
||||
|
||||
*/
|
||||
|
||||
:root{
|
||||
--uc-titlebar-padding: 0px;
|
||||
--uc-window-control-width: 138px
|
||||
}
|
||||
--uc-titlebar-padding: 0px; }
|
||||
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
|
||||
:root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px; }
|
||||
|
||||
|
|
@ -32,12 +41,6 @@ have menubar permanently enabled and want it on top
|
|||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
|
||||
padding-left: var(--window-drag-space-width,0px)
|
||||
}
|
||||
|
||||
.titlebar-placeholder,
|
||||
#TabsToolbar .titlebar-spacer{ display: none; }
|
||||
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
|
||||
|
|
|
|||
|
|
@ -1,25 +1,26 @@
|
|||
/* Hide tabs toolbar Fx65+ */
|
||||
:root{
|
||||
--uc-toolbar-height: 32px;
|
||||
--uc-window-control-width: 138px;
|
||||
}
|
||||
#navigator-toolbox{ --window-drag-space-width: 24px; }
|
||||
|
||||
/* IMPORTANT */
|
||||
/*
|
||||
Get EITHER
|
||||
window_control_placeholder_support.css
|
||||
OR
|
||||
window_control_placeholder_support_mac.css
|
||||
|
||||
Window controls will be all wrong without it
|
||||
|
||||
*/
|
||||
|
||||
:root{ --uc-toolbar-height: 32px; }
|
||||
|
||||
:root:not([uidensity="compact"]){--uc-toolbar-height: 38px}
|
||||
|
||||
|
||||
#TabsToolbar{visibility: collapse}
|
||||
#TabsToolbar{ visibility: collapse }
|
||||
|
||||
:root:not([inFullscreen]) #nav-bar{
|
||||
margin-top: calc(0px - var(--uc-toolbar-height));
|
||||
}
|
||||
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
|
||||
padding-left: var(--window-drag-space-width,0px)
|
||||
}
|
||||
|
||||
#toolbar-menubar{
|
||||
min-height:unset !important;
|
||||
height:var(--uc-toolbar-height) !important;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,12 @@
|
|||
/* Firefox 65+ only */
|
||||
/* !!USER!! - REMOVE ALL BUTTONS you can from the tabs toolbar */
|
||||
|
||||
/* Configurable window drag space */
|
||||
#navigator-toolbox{
|
||||
--window-drag-space-width: 20px;
|
||||
}
|
||||
:root[sizemode="normal"] #nav-bar{ --uc-window-drag-space-width: 20px }
|
||||
|
||||
#titlebar{ -moz-appearance: none !important; }
|
||||
|
||||
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox{ min-height: 0 !important; }
|
||||
|
||||
:root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
|
||||
:root:not([customizing]) #TabsToolbar .titlebar-button{
|
||||
-moz-appearance: none !important;
|
||||
|
|
@ -19,12 +18,14 @@
|
|||
margin: 0 !important;
|
||||
}
|
||||
#tabbrowser-tabs .tabbrowser-tab{ height: var(--tab-min-height) }
|
||||
|
||||
#tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{
|
||||
visibility: collapse !important;
|
||||
}
|
||||
|
||||
/* Button re-styling */
|
||||
#tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) }
|
||||
|
||||
#tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{
|
||||
padding: 0 !important;
|
||||
transform: scale(0.6);
|
||||
|
|
@ -32,11 +33,11 @@
|
|||
}
|
||||
/* Extra top padding in maximized window */
|
||||
:root[sizemode="maximized"] > #navigator-toolbox{ padding-top:7px !important; }
|
||||
|
||||
/* Fix window controls not being clickable */
|
||||
#toolbar-menubar:hover{
|
||||
min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
|
||||
-moz-appearance: initial !important;
|
||||
}
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { padding: 0px var(--window-drag-space-width,0px) }
|
||||
#nav-bar{ padding: 0 var(--uc-window-drag-space-width,0px) }
|
||||
|
|
|
|||
|
|
@ -2,10 +2,16 @@
|
|||
/* Firefox 65+ only */
|
||||
/* !!USER!! - REMOVE ALL BUTTONS you can from the tabs toolbar */
|
||||
|
||||
:root{ --uc-window-control-width: 138px; }
|
||||
/* IMPORTANT */
|
||||
/*
|
||||
Get EITHER
|
||||
window_control_placeholder_support.css
|
||||
OR
|
||||
window_control_placeholder_support_mac.css
|
||||
|
||||
/* Configurable window drag space */
|
||||
#navigator-toolbox{ --window-drag-space-width: 20px }
|
||||
Window controls will be all wrong without it
|
||||
|
||||
*/
|
||||
|
||||
#titlebar{ -moz-appearance: none !important; }
|
||||
/* We'll use window controls from menubar instead */
|
||||
|
|
@ -30,6 +36,7 @@
|
|||
|
||||
/* Button re-styling */
|
||||
#tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) }
|
||||
|
||||
#tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{
|
||||
padding: 0 !important;
|
||||
transform: scale(0.6);
|
||||
|
|
@ -46,9 +53,3 @@
|
|||
}
|
||||
|
||||
:root:not([customizing]) #toolbar-menubar[autohide][inactive] > #menubar-items{ pointer-events: none; opacity: 0 }
|
||||
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
|
||||
padding-left: var(--window-drag-space-width,0px)
|
||||
}
|
||||
|
|
@ -1,12 +1,17 @@
|
|||
/*Make tabs and navbar appear side-by-side tabs on right */
|
||||
|
||||
/* Modify these to change relative widths or default height */
|
||||
#navigator-toolbox{ --uc-navigationbar-width: 40vw; --uc-toolbar-height: 40px; --window-drag-space-width: 20px}
|
||||
#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; }
|
||||
|
||||
/* prevent urlbar overflow on narrow windows */
|
||||
/* Dependent on how many items are in navigation toolbar ADJUST AS NEEDED */
|
||||
@media screen and (max-width: 1000px){
|
||||
@media screen and (max-width: 1100px){
|
||||
#urlbar-container{ min-width:unset !important }
|
||||
}
|
||||
|
||||
|
|
@ -18,16 +23,23 @@
|
|||
#nav-bar{
|
||||
margin-right:calc(100vw - var(--uc-navigationbar-width));
|
||||
margin-top: calc(0px - var(--uc-toolbar-height));
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
/* Space to drag the window on left side of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: 0px !important;
|
||||
padding-left: var(--window-drag-space-width,0px)
|
||||
padding-left: var(--uc-window-drag-space-width,20px);
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
|
||||
:root:not([inFullscreen]) #nav-bar{
|
||||
padding-left: calc(var(--uc-window-control-width,72px) + var(--uc-window-drag-space-width,20px));
|
||||
}
|
||||
.titlebar-buttonbox-container{ position: fixed; left: 0px; z-index: 3; }
|
||||
}
|
||||
|
||||
/* 1px margin on touch density causes tabs to be too high */
|
||||
.tab-close-button{ margin-top: 0 !important }
|
||||
|
||||
/* Hide dropdown placeholder */
|
||||
#urlbar-container:not(:hover) .urlbar-history-dropmarker{margin-inline-start: -28px;}
|
||||
#urlbar-container:not(:hover) .urlbar-history-dropmarker{ margin-inline-start: -28px; }
|
||||
|
|
@ -1,9 +1,21 @@
|
|||
/* Variation of oneliner where menubutton and overflow button are next to window controls (if window controls are on right side) */
|
||||
|
||||
/* IMPORTANT */
|
||||
/*
|
||||
Get EITHER
|
||||
window_control_placeholder_support.css
|
||||
OR
|
||||
window_control_placeholder_support_mac.css
|
||||
|
||||
Window controls will be all wrong without it
|
||||
|
||||
*/
|
||||
|
||||
/* Modify these to change relative widths or default height */
|
||||
|
||||
#navigator-toolbox{
|
||||
--uc-navigationbar-width: 50vw;
|
||||
--uc-window-control-width: 138px;
|
||||
--uc-toolbar-height: 40px;
|
||||
--window-drag-space-width: 20px
|
||||
}
|
||||
/* reserved space for overflow + menu buttons */
|
||||
#navigator-toolbox{--uc-buttons-width: calc(56px + 4 * var(--toolbarbutton-outer-padding) + var(--uc-menubutton-padding,6px))}
|
||||
|
|
@ -24,17 +36,19 @@
|
|||
.titlebar-placeholder[type="pre-tabs"],.titlebar-spacer[type="pre-tabs"]{ width:8px !important}
|
||||
#nav-bar{ margin-top: calc(0px - var(--uc-toolbar-height)); }
|
||||
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
|
||||
padding-left: var(--window-drag-space-width,0px)
|
||||
#nav-bar-customization-target{ margin-right: calc(100vw - (var(--uc-navigationbar-width)) - var(--uc-window-control-width) - var(--uc-buttons-width) - var(--uc-window-drag-space-width)) }
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
|
||||
:root:not([inFullscreen]) #nav-bar{
|
||||
padding-left: calc(var(--uc-window-control-width,72px) + var(--uc-window-drag-space-width,20px));
|
||||
}
|
||||
.titlebar-buttonbox-container{ position: fixed; left: 0px; z-index: 3; }
|
||||
#nav-bar-customization-target{ margin-right: calc(100vw - (var(--uc-navigationbar-width)) - var(--uc-buttons-width) - var(--uc-window-drag-space-width)) }
|
||||
}
|
||||
|
||||
#nav-bar-customization-target{ margin-right: calc(100vw - (var(--uc-navigationbar-width)) - var(--uc-buttons-width) - (3 * 46px) - var(--window-drag-space-width)) }
|
||||
#TabsToolbar > :not(hbox){ position: relative !important; z-index: 2 }
|
||||
.titlebar-placeholder[type="post-tabs"],
|
||||
.titlebar-spacer[type="post-tabs"]{
|
||||
width: calc(var(--uc-buttons-width) + var(--window-drag-space-width)) !important;
|
||||
width: calc(var(--uc-buttons-width) + var(--uc-window-drag-space-width)) !important;
|
||||
}
|
||||
#PanelUI-button,#nav-bar-overflow-button{
|
||||
margin: 0px !important;
|
||||
|
|
@ -46,4 +60,4 @@
|
|||
.tab-close-button{ margin-top: 0 !important }
|
||||
|
||||
/* Hide dropdown placeholder */
|
||||
#urlbar-container:not(:hover) .urlbar-history-dropmarker{margin-inline-start: -28px;}
|
||||
#urlbar-container:not(:hover) .urlbar-history-dropmarker{ margin-inline-start: -28px; }
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
/*Make tabs and navbar appear side-by-side tabs on left */
|
||||
|
||||
/* IMPORTANT */
|
||||
/*
|
||||
Get EITHER
|
||||
window_control_placeholder_support.css
|
||||
OR
|
||||
window_control_placeholder_support_mac.css
|
||||
|
||||
Window controls will be all wrong without it
|
||||
|
||||
*/
|
||||
|
||||
/* Modify these to change relative widths or default height */
|
||||
#navigator-toolbox{
|
||||
--uc-navigationbar-width: 40vw;
|
||||
--uc-toolbar-height: 40px;
|
||||
--window-drag-space-width: 20px;
|
||||
--uc-window-control-width: 138px;
|
||||
}
|
||||
/* Override for other densities */
|
||||
:root[uidensity="compact"] > #navigator-toolbox{ --uc-toolbar-height: 32px;}
|
||||
:root[uidensity="compact"] > #navigator-toolbox{ --uc-toolbar-height: 31px;}
|
||||
:root[uidensity="touch"] > #navigator-toolbox{ --uc-toolbar-height: 40px; }
|
||||
|
||||
/* prevent urlbar overflow on narrow windows */
|
||||
|
|
@ -15,12 +26,11 @@
|
|||
#urlbar-container{ min-width:unset !important }
|
||||
}
|
||||
|
||||
#toolbar-menubar{ height:initial !important; }
|
||||
#toolbar-menubar{ height: initial !important; }
|
||||
#toolbar-menubar[inactive] > #menubar-items{ opacity: 0; pointer-events: none; }
|
||||
#toolbar-menubar[inactive]{ margin-bottom: calc(0px - var(--uc-toolbar-height)) }
|
||||
|
||||
#TabsToolbar > .titlebar-buttonbox-container,
|
||||
#TabsToolbar > .toolbar-items > spacer,
|
||||
.titlebar-spacer[type="post-tabs"]{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -39,14 +49,16 @@
|
|||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
|
||||
padding-left: var(--window-drag-space-width,0px)
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
|
||||
:root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
|
||||
width: var(--uc-window-drag-space-width) !important;
|
||||
display: -moz-box !important;
|
||||
}
|
||||
#TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box; }
|
||||
}
|
||||
|
||||
/* 1px margin on touch density causes tabs to be too high */
|
||||
.tab-close-button{ margin-top: 0 !important }
|
||||
|
||||
/* Hide dropdown placeholder */
|
||||
#urlbar-container:not(:hover) .urlbar-history-dropmarker{margin-inline-start: -28px;}
|
||||
#urlbar-container:not(:hover) .urlbar-history-dropmarker{ margin-inline-start: -28px; }
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
/* Modify this to change window drag space width */
|
||||
/* IMPORTANT */
|
||||
/*
|
||||
Get EITHER
|
||||
window_control_placeholder_support.css
|
||||
OR
|
||||
window_control_placeholder_support_mac.css
|
||||
|
||||
:root{
|
||||
--uc-window-control-width: 138px;
|
||||
}
|
||||
Window controls will be all wrong without it
|
||||
|
||||
#navigator-toolbox{ --window-drag-space-width: 24px }
|
||||
*/
|
||||
|
||||
.titlebar-buttonbox-container{
|
||||
position: fixed;
|
||||
|
|
@ -31,12 +34,6 @@
|
|||
:root[sizemode="maximized"] > #navigator-toolbox{ padding-top: 8px !important; }
|
||||
:root[sizemode="maximized"] #toolbar-menubar:not([autohide="false"]) .titlebar-buttonbox-container{ top: 8px }
|
||||
|
||||
/* Space to drag the window on both sides of navbar */
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
|
||||
padding-left: var(--window-drag-space-width,0px)
|
||||
}
|
||||
|
||||
/* Move tabs below content */
|
||||
:root:not([inDOMFullscreen]) #content-deck{ margin-bottom: var(--tab-min-height) }
|
||||
#TabsToolbar{ position: fixed; bottom: 0px; width: 100vw; }
|
||||
|
|
|
|||
13
chrome/window_control_placeholder_support.css
Normal file
13
chrome/window_control_placeholder_support.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* Creates placeholders for window controls */
|
||||
/* For window controls on RIGHT side of the window */
|
||||
/* This is a supporting file used by other stylesheets */
|
||||
|
||||
:root{
|
||||
--uc-window-control-width: 138px;
|
||||
--uc-window-drag-space-width: 24px;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-right: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-width,0px));
|
||||
padding-left: var(--window-drag-space-width);
|
||||
}
|
||||
13
chrome/window_control_placeholder_support_mac.css
Normal file
13
chrome/window_control_placeholder_support_mac.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* Creates placeholders for window controls */
|
||||
/* For window controls on LEFT side of the window */
|
||||
/* This is a supporting file used by other stylesheets */
|
||||
|
||||
:root{
|
||||
--uc-window-control-width: 72px;
|
||||
--uc-window-drag-space-width: 24px;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
|
||||
padding-left: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-width,0px));
|
||||
padding-right: var(--window-drag-space-width);
|
||||
}
|
||||
Loading…
Reference in a new issue