fenix-fox/chrome/autohide_sidebar.css
MrOtherGuy 0e2727345b inherit sidebar background color
inherited background is safer than using --toolbar-bgcolor which is very
likely to have transparency if theme has images.
2022-05-07 20:46:15 +03:00

66 lines
2.3 KiB
CSS

/* 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: 40px;
--uc-sidebar-hover-width: 210px;
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
position: relative;
min-width: var(--uc-sidebar-width) !important;
width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-width) !important;
z-index:1;
}
#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}
#sidebar{
transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
min-width: var(--uc-sidebar-width) !important;
will-change: min-width;
}
#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; }