Автоскрытие панели sidebery в firefox
Posted on Вт 04 февраля 2025 in misc
Новый способ
about:config:
icefox.disable-autohide-sidebar - отключить автоскрытие боковой панели
icefox.disable-sidebar-border - отключить границу боковой панели
icefox.show-pinned-tabs - отображать закрепленны вкладки при закрытой боковой панели
userChome.css:
@import url("recipes/autohide-sidebar.css");
@import url("recipes/sideberry.css");
recipes/autohide-sidebar.css:
:root {
--icefox-autohide-sidebar-extended: 330px; /* width of panel extended */
--icefox-autohide-sidebar-collapsed: 41px; /* width of panel collapsed */
--sidebar-height: calc(100vh - 45px) /*96.5vh;*/
--icefox-sidebar-splitter-width 8px;
--splitter-width: var(--icefox-sidebar-splitter-width) !important;
}
/* --------Sidebery Auto-hiding Sidebar ----------- */
@media not (-moz-bool-pref: "icefox.disable-autohide-sidebar") {
/* width of panel (grey box) (different from width of each tab) */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) {
width: var(--icefox-autohide-sidebar-collapsed) !important;
min-width: 0 !important;
z-index: 999;
transition: all 0.2s ease-in-out; /* doesn't do anything unless you uncomment lower bit of code */
}
/* width of panel (grey box) on hover */
/* uncomment this section if you want the webpage to move when your tabs are extended- otherwise covers */
/*
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]):hover {
width: var(--icefox-autohide-sidebar-extended) !important;
min-width: unset !important;
z-index: 1;
}
*/
/* width of tabs */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
width: var(--icefox-autohide-sidebar-collapsed) !important;
transition: all 0.2s ease-in-out;
}
/* width of tabs on hover */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover #sidebar {
width: var(--icefox-autohide-sidebar-extended) !important;
}
}
/* adjust if your sidebery is not tall enough */
#main-window:not([extradragspace="true"])[inFullscreen]
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"],
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { height: var(--sidebar-height); }
/*? remove ugly border below "tabs" text */
#sidebar-header { border-bottom: 0 !important; }
@media (-moz-bool-pref: "icefox.disable-sidebar-border") {
#sidebar-splitter {
--sidebar-splitter: var(--icefox-sidebar-splitter-width) !important;
width: var(--sidebar-splitter) !important;
min-width: var(--sidebar-splitter) !important;
background: rgba(0, 0, 0, 0) !important;
border: 0 !important;
margin: 0 !important;
}
}
recipes/sideberry.css:
@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") {
@media not (-moz-bool-pref: "icefox.show-pinned-tabs") {
#root.root {
.PinnedTabsBar { flex-wrap: nowrap!important; }
}
}
#nav_bar {
padding: 2px !important;
}
#root.root {--toolbar-bg: transparent;}
#root.root {--frame-bg: #ffffffff !important;}
#root.root {--general-border-radius: 8px !important;}
#root.root {--general-margin: 6px !important;}
.Tab .body::before, .NavigationBar .nav-item, .Sidebar .tool-btn::before, .TabsPanel .new-tab-btn::before, .CtxMenu .opt::before, .icon-opt::before {
transition: background 0.075s linear, opacity 0.075s linear;
}
.hidden-panels-popup-layer > * {
background: var(--s-frame-bg) !important;
}
@media not (-moz-bool-pref: "icefox.disable-autohide-sidebar") {
#root:not(:hover) .top-horizontal-box, #root:not(:hover) .BottomBar {
opacity: 0;
transition: all 0s;
}
#root .top-horizontal-box, #root .BottomBar {
transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
#root:not(:hover) .scroll-container {
overflow: hidden !important;
}
#root:not(:hover) .scroll-container > * {
width: fit-content;
}
#root:not(:hover) .Tab {
padding-left: 0 !important;
}
/* #root:not(:hover) .Tab > .body > *:not(.fav) {*/
/* display: none !important;*/
/* }*/
#root:not(:hover) .TabsPanel {--tabs-indent: 0px;}
#root:not(:hover) .new-tab-btns svg {
opacity: 0 !important;
transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#root:not(:hover) .new-tab-btns {
transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#root:not(:hover) .top-shadow, #root:not(:hover) .bottom-shadow, #root:not(:hover) .scroll-container .new-tab-btns::before {
display: none;
}
}
}
Старый способ
userChome.css:
:root {
--autohide-sidebar-extended: 330px; /* width of panel extended */
--autohide-sidebar-collapsed: 34px; /* width of panel collapsed */
--sidebar-height: calc(100vh - 45px);
}
/* --------Sidebery Auto-hiding Sidebar ----------- */
/* width of panel (grey box) (different from width of each tab) */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) {
width: var(--autohide-sidebar-collapsed) !important;
min-width: unset !important;
z-index: 1;
transition: all 0.2s ease-in-out; /* doesn't do anything unless you uncomment lower bit of code */
}
/* width of panel (grey box) on hover */
/* uncomment this section if you want the webpage to move when your tabs are extended- otherwise covers */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]):hover {
width: var(--autohide-sidebar-extended) !important;
min-width: unset !important;
z-index: 1;
}
/* width of tabs */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
width: var(--autohide-sidebar-collapsed) !important;
transition: all 0.2s ease-in-out;
}
/* width of tabs on hover */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover #sidebar {
width: var(--autohide-sidebar-extended) !important;
}
/* adjust if your sidebery is not tall enough */
#main-window:not([extradragspace="true"])[inFullscreen]
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"],
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
height: var(--sidebar-height);
}
CSS в Sideberry:
#root.root {--frame-bg: #ffffffff;}
#root.root {--general-border-radius: 8px;}
#root.root {--general-margin: 6px;}
#nav_bar {
padding: 12px !important;
}
#root.root {--toolbar-bg: transparent;}
.Tab .body::before, .NavigationBar .nav-item, .Sidebar .tool-btn::before, .TabsPanel .new-tab-btn::before, .CtxMenu .opt::before, .icon-opt::before {
transition: background 0.075s linear, opacity 0.075s linear;
}
.hidden-panels-popup-layer > * {
background: var(--s-frame-bg) !important;
}
.PinnedTabsBar { flex-wrap: nowrap!important; }
/* \/ \/ \/ COMMENT OUT TO DISABLE COLLAPSING SIDEBAR \/ \/ \/ */
#root:not(:hover) .top-horizontal-box, #root:not(:hover) .BottomBar {
opacity: 0;
transition: all 0s;
}
#root .top-horizontal-box, #root .BottomBar {
transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
#root:not(:hover) .scroll-container {
overflow: hidden;
}
#root:not(:hover) .scroll-container > * {
width: fit-content;
}
#root:not(:hover) .Tab {
padding-left: 0 !important;
}
#root:not(:hover) .Tab > .body > *:not(.fav) {
display: none !important;
}
#root:not(:hover) .new-tab-btns svg {
opacity: 0 !important;
transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#root:not(:hover) .new-tab-btns {
transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#root:not(:hover) .top-shadow, #root:not(:hover) .bottom-shadow, #root:not(:hover) .scroll-container .new-tab-btns::before {
display: none;
}