helm/home/profiles/firefox/sidebery.css
2022-12-06 17:09:27 +10:00

136 lines
2.2 KiB
CSS

/* ROOT */
#root {
/* Tab and PinnedTab height adjustment */
--tabs-height: 33px;
--tabs-pinned-height: var(--tabs-height);
/* Dark Theme base settings */
--bg: #1f2430 !important;
--tabs-fg: #d4d4d4 !important;
--tabs-bg-hover: #3b3948 !important;
--tabs-activated-bg: #5b5b66 !important;
--nav-btn-activated-bg: #1f222f !important;
}
#root .Tab {
--tabs-indent: 7px;
}
/* TABS */
.Tab .lvl-wrapper:after {
display: none;
}
.Tab {
margin: auto;
width: 94%;
border-radius: 3px;
}
.Tab .close > svg:hover {
/* Styling the tab close button */
border-radius: 3px;
background: #492121 !important;
opacity: 100%;
}
.Tab .title {
overflow: hidden !important;
}
/* PINNED TABS */
.PinnedDock {
background-color: var(--bg) !important;
}
.PinnedTab {
margin: 5px 0px 4px 6px;
border-radius: 3px;
}
/* NAV BAR */
.NavigationBar {
height: 41px !important;
padding: 4.5px 0px 0px 4.5px !important;
background-color: #2B2A33 !important;
margin-bottom: 5px;
}
.NavigationBar .panel-btn:hover {
border-radius: 3px !important;
background-color: var(--tabs-bg-hover) !important;
}
.NavigationBar .panel-btn[data-active="true"] {
border-radius: 3px !important;
background-color: var(--bg) !important;
}
.NavigationBar .panel-btn[data-active="true"]:hover {
border-radius: 3px !important;
background-color: var(--tabs-bg-hover) !important;
}
.NavigationBar .panel-btn > svg,
.NavigationBar .panel-btn > img {
fill: #f2f2f2 !important;
}
/* SIDEBAR HACK PATCHES */
@media (max-width: 50px) {
/* Fix to tab tree identation when minimised */
#root:not(:hover) .Tab {
--tabs-indent: 0px;
}
.Tab[data-lvl] > div.lvl-wrapper {
right: -2px;
}
.Tab {
max-width: 34px;
}
.Tab .fav {
z-index: 1;
}
.Tab .audio {
z-index: 1;
margin-left: -12px;
height: 26px;
}
.Tab .title {
display: none;
}
.PinnedTab {
margin-left: 5px;
}
.NavigationBar .settings-btn {
display: none;
}
}
/* OPTIONS */
/* Disable these two snippets below to make pinned tabs wrap when minimised */
.PinnedDock {
flex-wrap: nowrap! important;
}
.PinnedTab {
overflow: hidden !important;
min-width: var(--tabs-pinned-width) !important;
}