theme-store/themes/39907934-59e9-4e42-89f0-a254d3c5e280/chrome.css
mauro 🤙 00044ecc3b
Add theme: Sidebery (#529)
* Add theme: Sidebery

* Update readme.md (#530)

* Smaller image (#539)

---------

Co-authored-by: shanto <shanto@users.noreply.github.com>
Co-authored-by: Shaan <yafarhad@gmail.com>
2024-10-09 20:27:03 +02:00

137 lines
4.1 KiB
CSS

@media (-moz-bool-pref: 'theme.sidebery.hide-zen-tabbar') {
#zen-sidebar-splitter {
display: none !important;
}
#tabbrowser-tabbox,
#sidebar-box {
margin-left: calc(var(--zen-element-separation) / 2) !important;
}
#navigator-toolbox {
position: absolute !important;
top: -9999px;
left: -9999px;
}
html:has(#sidebar-box[hidden='true']) #tabbrowser-tabpanels {
padding-left: var(--zen-element-separation) !important;
margin-left: -2px;
}
#sidebar-box {
min-width: 34px !important;
}
#sidebar-splitter {
right: -8px;
z-index: 999 !important;
border: 2px solid transparent !important;
}
}
@media (-moz-bool-pref: 'theme.sidebery.sidebar.auto-collapse.enable') and (-moz-bool-pref: 'theme.sidebery.hide-zen-tabbar') {
#sidebar-box {
border-left-width: 0 !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
@media (-moz-bool-pref: 'theme.sidebery.sidebar.auto-collapse.enable') {
/* credits: https://canary.discord.com/channels/1088172780480114748/1290440055126495343 */
html {
--sidebery-width: 36px;
--sidebery-hidden-width: 8px;
--sidebery-open-width: 256px;
}
html {
#sidebar-box {
margin-left: 0 !important;
transition:
width 100ms,
background 400ms,
border 200ms;
transition-delay: 150ms;
z-index: 1;
position: absolute;
border: 1px solid var(--sidebar-border-color) !important;
/* border-radius: var(--zen-border-radius) !important; */
left: 0;
top: 0;
bottom: 2px;
box-shadow: none !important;
min-width: var(--sidebery-width) !important;
width: var(--sidebery-width) !important;
&:hover {
background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent) !important;
width: var(--sidebery-open-width) !important;
}
&:not(:hover) #sidebar-header {
display: none !important;
}
}
#tabbrowser-tabbox {
margin-left: calc(var(--sidebery-width) + var(--zen-element-separation) / 2) !important;
}
}
html[inFullscreen='true'] {
#sidebar-box {
border-color: transparent !important;
opacity: 0;
width: var(--sidebery-hidden-width) !important;
min-width: var(--sidebery-hidden-width) !important;
&:hover {
border: 1px solid var(--sidebar-border-color) !important;
opacity: 1;
width: var(--sidebery-open-width) !important;
}
}
#tabbrowser-tabbox {
margin-left: calc(
var(--sidebery-hidden-width) + var(--zen-element-separation)
) !important;
}
}
}
@media (-moz-bool-pref: 'browser.tabs.allow_transparent_browser') {
html {
--lwt-sidebar-background-color: transparent !important;
--sidebar-background-color: transparent !important;
}
window.sidebar-panel,
window#webextpanels-window {
/* background: var(--sidebar-background-color) !important; */
background: transparent !important;
}
#sidebar-box {
border-color: transparent !important;
box-shadow: none !important;
#sidebar-header {
order: 0;
border: none !important;
border-bottom: 1px solid var(--sidebar-border-color) !important;
font-size: 1em !important;
}
}
}
@media not (-moz-bool-pref: 'theme.sidebery.hide-zen-tabbar') {
#tabbrowser-tabbox {
margin-left: calc(var(--zen-element-separation) / 2) !important;
}
@media not (-moz-bool-pref: 'browser.tabs.allow_transparent_browser') {
#tabbrowser-tabbox {
margin-left: calc(var(--zen-element-separation) / 1.5) !important;
}
}
}
@media (-moz-bool-pref: 'theme.sidebery.sidebar-header.bottom-layout') {
#sidebar-box #sidebar-header {
order: 1;
border: none !important;
border-top: 1px solid var(--sidebar-border-color) !important;
font-size: 1em !important;
#sidebar-switcher-arrow {
list-style-image: url('chrome://global/skin/icons/arrow-up-12.svg') !important;
}
}
}
@media (-moz-bool-pref: 'theme.sidebery.sidebar-header.hide') {
#sidebar-header {
display: none !important;
}
}