136 lines
2.2 KiB
CSS
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;
|
||
|
|
}
|