mirror of
https://github.com/Swarsel/.dotfiles.git
synced 2025-12-06 17:17:22 +01:00
220 lines
7 KiB
CSS
220 lines
7 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar
|
|
* Dimensions on non-Win10 OS probably needs to be adjusted.
|
|
*/
|
|
|
|
:root{
|
|
--uc-autohide-toolbox-delay: 0ms; /* Wait 0.1s before hiding toolbars */
|
|
--uc-toolbox-rotation: 107deg; /* This may need to be lower on mac - like 75 or so */
|
|
|
|
--base00: #1D252C;
|
|
--base01: #171D23;
|
|
--base02: #5EC4FF;
|
|
--base03: #566C7D;
|
|
--base04: #5EC4FF;
|
|
--base05: #A0B3C5;
|
|
--base06: #C06ECE;
|
|
--base07: #A0B3C5;
|
|
--base08: #D95468;
|
|
--base09: #FFA880;
|
|
--base0A: #5EC4FF;
|
|
--base0B: #8BD49C;
|
|
--base0C: #008B94;
|
|
--base0D: #5EC4FF;
|
|
--base0E: #C06ECE;
|
|
--base0F: #5EC4FF;
|
|
|
|
}
|
|
|
|
:root[sizemode="maximized"]{
|
|
--uc-toolbox-rotation: 88.5deg;
|
|
}
|
|
|
|
@media (-moz-platform: windows){
|
|
:root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog !important; }
|
|
}
|
|
|
|
:root[sizemode="fullscreen"],
|
|
:root[sizemode="fullscreen"] #navigator-toolbox{ margin-top: 0 !important; }
|
|
|
|
#navigator-toolbox{
|
|
--browser-area-z-index-toolbox: 3;
|
|
position: fixed !important;
|
|
background-color: var(--lwt-accent-color,black) !important;
|
|
transition: transform 0ms linear, opacity 0ms linear !important;
|
|
transition-delay: var(--uc-autohide-toolbox-delay) !important;
|
|
transform-origin: top;
|
|
transform: rotateX(var(--uc-toolbox-rotation));
|
|
opacity: 0;
|
|
line-height: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
:root[sessionrestored] #urlbar[popover]{
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: transform 0ms linear var(--uc-autohide-toolbox-delay), opacity 0ms calc(var(--uc-autohide-toolbox-delay) + 0ms);
|
|
transform-origin: 0px calc(0px - var(--tab-min-height) - var(--tab-block-margin) * 2);
|
|
transform: rotateX(89.9deg);
|
|
}
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts)) ~ toolbox #urlbar[popover],
|
|
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
|
|
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
transition-delay: 0ms;
|
|
transform: rotateX(0deg);
|
|
}
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts)) ~ toolbox,
|
|
#navigator-toolbox:has(#urlbar:is([open],[focus-within])),
|
|
#navigator-toolbox:hover,
|
|
#navigator-toolbox:focus-within{
|
|
transition-delay: 0ms !important;
|
|
transform: rotateX(0);
|
|
opacity: 1;
|
|
}
|
|
/* This makes things like OS menubar/taskbar show the toolbox when hovered in maximized windows.
|
|
* Unfortunately it also means that other OS native surfaces (such as context menu on macos)
|
|
* and other always-on-top applications will trigger toolbox to show up. */
|
|
@media (-moz-bool-pref: "userchrome.autohide-toolbox.unhide-by-native-ui.enabled"){
|
|
:root[sizemode="maximized"]:not(:hover){
|
|
#navigator-toolbox:not(:-moz-window-inactive),
|
|
#urlbar[popover]:not(:-moz-window-inactive){
|
|
transition-delay: 0ms !important;
|
|
transform: rotateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox > *{ line-height: normal; pointer-events: auto }
|
|
|
|
#navigator-toolbox,
|
|
#navigator-toolbox > *{
|
|
width: 100vw;
|
|
-moz-appearance: none !important;
|
|
}
|
|
|
|
/* These two exist for oneliner compatibility */
|
|
#nav-bar{ width: var(--uc-navigationbar-width,100vw) }
|
|
#TabsToolbar
|
|
{
|
|
visibility: collapse;
|
|
}
|
|
/* Don't apply transform before window has been fully created */
|
|
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
|
|
|
|
:root[customizing] #navigator-toolbox{
|
|
position: relative !important;
|
|
transform: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#navigator-toolbox[inFullscreen] > #PersonalToolbar,
|
|
#PersonalToolbar[collapsed="true"]{ display: none }
|
|
|
|
/* Uncomment this if tabs toolbar is hidden with hide_tabs_toolbar.css */
|
|
/*#titlebar{ margin-bottom: -9px }*/
|
|
|
|
/* Uncomment the following for compatibility with tabs_on_bottom.css - this isn't well tested though */
|
|
/*
|
|
#navigator-toolbox{ flex-direction: column; display: flex; }
|
|
#titlebar{ order: 2 }
|
|
*/
|
|
#sidebar-header {
|
|
display: none;
|
|
}
|
|
#sidebar-header {
|
|
/* display: none; */
|
|
visibility: collapse !important;
|
|
}
|
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Show sidebar only when the cursor is over it */
|
|
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
|
|
|
|
#sidebar-box{
|
|
--uc-sidebar-width: 30px;
|
|
--uc-sidebar-hover-width: 210px;
|
|
--uc-autohide-sidebar-delay: 0ms; /* Wait 0.6s before hiding sidebar */
|
|
--uc-autohide-transition-duration: 0ms;
|
|
--uc-autohide-transition-type: linear;
|
|
--browser-area-z-index-sidebar: 3;
|
|
position: relative;
|
|
min-width: var(--uc-sidebar-width) !important;
|
|
width: var(--uc-sidebar-width) !important;
|
|
max-width: var(--uc-sidebar-width) !important;
|
|
z-index: var(--browser-area-z-index-sidebar,3);
|
|
}
|
|
#sidebar-box[positionend]{ direction: rtl }
|
|
#sidebar-box[positionend] > *{ direction: ltr }
|
|
|
|
#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
|
|
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }
|
|
|
|
#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }
|
|
|
|
#sidebar-splitter{ display: none }
|
|
|
|
#sidebar-header{
|
|
overflow: hidden;
|
|
color: var(--chrome-color, inherit) !important;
|
|
padding-inline: 0 !important;
|
|
}
|
|
|
|
#sidebar-header::before,
|
|
#sidebar-header::after{
|
|
content: "";
|
|
display: flex;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
#sidebar-header,
|
|
#sidebar{
|
|
transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
|
|
min-width: var(--uc-sidebar-width) !important;
|
|
will-change: min-width;
|
|
}
|
|
#sidebar-box:hover > #sidebar-header,
|
|
#sidebar-box:hover > #sidebar{
|
|
min-width: var(--uc-sidebar-hover-width) !important;
|
|
transition-delay: 0ms !important;
|
|
}
|
|
|
|
.sidebar-panel{
|
|
background-color: transparent !important;
|
|
color: var(--newtab-text-primary-color) !important;
|
|
}
|
|
|
|
.sidebar-panel #search-box{
|
|
-moz-appearance: none !important;
|
|
background-color: rgba(249,249,250,0.1) !important;
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* Add sidebar divider and give it background */
|
|
|
|
#sidebar,
|
|
#sidebar-header{
|
|
background-color: inherit !important;
|
|
border-inline: 1px solid rgb(80,80,80);
|
|
border-inline-width: 0px 1px;
|
|
}
|
|
|
|
#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
|
|
#sidebar-box[positionend] > *{
|
|
border-inline-width: 1px 0px;
|
|
}
|
|
|
|
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
|
|
|
|
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
|
|
inset-inline: auto 0px !important;
|
|
}
|
|
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
|
|
margin-inline: 0px !important;
|
|
border-left-style: solid !important;
|
|
}
|