hyl.st
nix config
1/* ROOT */
2
3#root {
4 /* Tab and PinnedTab height adjustment */
5 --tabs-height: 33px;
6 --tabs-pinned-height: var(--tabs-height);
7 /* Dark Theme base settings */
8 --bg: #1f2430 !important;
9 --tabs-fg: #d4d4d4 !important;
10 --tabs-bg-hover: #3b3948 !important;
11 --tabs-activated-bg: #5b5b66 !important;
12 --nav-btn-activated-bg: #1f222f !important;
13}
14
15#root .Tab {
16 --tabs-indent: 7px;
17}
18
19/* TABS */
20
21.Tab .lvl-wrapper:after {
22 display: none;
23}
24
25.Tab {
26margin: auto;
27 width: 94%;
28 border-radius: 3px;
29}
30
31.Tab .close > svg:hover {
32 /* Styling the tab close button */
33 border-radius: 3px;
34 background: #492121 !important;
35 opacity: 100%;
36}
37
38.Tab .title {
39 overflow: hidden !important;
40}
41
42
43/* PINNED TABS */
44
45.PinnedDock {
46 background-color: var(--bg) !important;
47}
48
49.PinnedTab {
50 margin: 5px 0px 4px 6px;
51 border-radius: 3px;
52}
53
54
55/* NAV BAR */
56
57.NavigationBar {
58 height: 41px !important;
59 padding: 4.5px 0px 0px 4.5px !important;
60 background-color: #2B2A33 !important;
61 margin-bottom: 5px;
62}
63
64.NavigationBar .panel-btn:hover {
65 border-radius: 3px !important;
66 background-color: var(--tabs-bg-hover) !important;
67}
68
69.NavigationBar .panel-btn[data-active="true"] {
70 border-radius: 3px !important;
71 background-color: var(--bg) !important;
72}
73
74.NavigationBar .panel-btn[data-active="true"]:hover {
75 border-radius: 3px !important;
76 background-color: var(--tabs-bg-hover) !important;
77}
78
79.NavigationBar .panel-btn > svg,
80.NavigationBar .panel-btn > img {
81 fill: #f2f2f2 !important;
82}
83
84
85/* SIDEBAR HACK PATCHES */
86
87@media (max-width: 50px) {
88 /* Fix to tab tree identation when minimised */
89 #root:not(:hover) .Tab {
90 --tabs-indent: 0px;
91 }
92
93 .Tab[data-lvl] > div.lvl-wrapper {
94 right: -2px;
95 }
96
97 .Tab {
98 max-width: 34px;
99 }
100
101 .Tab .fav {
102 z-index: 1;
103 }
104
105 .Tab .audio {
106 z-index: 1;
107 margin-left: -12px;
108 height: 26px;
109 }
110
111 .Tab .title {
112 display: none;
113 }
114
115 .PinnedTab {
116 margin-left: 5px;
117 }
118
119 .NavigationBar .settings-btn {
120 display: none;
121 }
122}
123
124
125/* OPTIONS */
126
127/* Disable these two snippets below to make pinned tabs wrap when minimised */
128.PinnedDock {
129 flex-wrap: nowrap! important;
130}
131
132.PinnedTab {
133 overflow: hidden !important;
134 min-width: var(--tabs-pinned-width) !important;
135}