hyl.st
nix config
1:root{
2 --dark-0: #1A1E28;
3 --dark-base: #1F2430;
4 --dark-1: #2A3141;
5 --dark-2: #323A4E;
6 --dark-3: #424D67;
7 --dark-4: #4A5673;
8 --light-0: #E8E7E3;
9 --light-base: #CCCAC2;
10 --light-1: #C3C0B7;
11 --light-2: #B9B7AC;
12 --light-3: #B0ADA0;
13 --light-4: #A7A395;
14 --accent: #FFCC66;
15 --yellow: #695380;
16 --green: #D5FF80;
17 --red: #f28779;
18 --extension-icon-mask: grayscale(85%) invert(30%) sepia(13%) saturate(1019%) hue-rotate(184deg) brightness(95%) contrast(96%);
19}
20
21:root.incognito{
22 --dark-0: #1C0E34;
23 --dark-base: #20103c;
24 --dark-1: #2F1D4E;
25 --dark-2: #38225D;
26 --dark-3: #4A2D7B;
27 --dark-4: #53338A;
28 --light-0: #CC6B9C;
29 --light-base: #B9407C;
30 --light-1: #AB3B73;
31 --light-2: #9C3569;
32 --light-3: #8D305E;
33 --light-4: #7D2B54;
34 --accent: #e9207e;
35 --yellow: #C9B336;
36 --green: #36C987;
37 --red: #C9365D;
38 --extension-icon-mask: grayscale(85%) invert(17%) sepia(33%) saturate(3632%) hue-rotate(245deg) brightness(92%) contrast(90%);
39}
40
41
42:root{
43 --tab-border-radius: 7px; /* border radius of tabs */
44 --animation-duration: 200ms; /* duration of different animations [0s: turn all animations off] */
45 --spacing: 14px; /* spacing between tabs. [<15px: compact tabs] */
46 --distance-from-edge: 10px; /* distance between tabs, and left-right edges of sidebar*/
47 --hover-text-spacing: 0.1; /* should be left alone. with hover sidebar, if text is visible in collapsed status, increase this */
48
49 --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
50 --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
51 --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
52
53 --collapsed-width: 60px;
54}
55
56/************UNCUSTOMIZED CSS************/
57#tabbar-container #tabbar{
58 margin-bottom: 15px !important;
59}
60
61:root, #background{
62 background: var(--dark-base) !important;
63}
64
65#all-tabs{
66 margin: 10px var(--distance-from-edge);
67}
68
69tab-item:not(.collapsed) {
70 margin-top: var(--spacing);
71 border-radius: var(--tab-border-radius);
72 border: none !important;
73 padding-top: 9px;
74 padding-bottom: 10px;
75}
76
77tab-item.collapsed{
78 height: 0;
79 margin: 0 !important;
80 padding: 0 !important;
81}
82
83tab-item:not([data-level="0"]):not(.pinned){
84 border-left: dashed 2px var(--light-4) !important;
85 border-top-left-radius: 0;
86 border-bottom-left-radius: 0;
87 margin-top: calc(var(--spacing)/2);
88}
89
90tab-item tab-favicon{
91 left: 0;
92 filter: var(--extension-icon-mask);
93 transition: left calc(var(--animation-duration)*2) var(--ease-out);
94}
95
96.highlighter {
97 display: none !important;
98}
99
100tab-item .label {
101 color: var(--light-2) !important;
102 padding-bottom: 2px;
103}
104
105
106tab-item .twisty:before{
107 background: var(--light-3) !important;
108}
109
110tab-item.active .label {
111 color: var(--light-0) !important;
112}
113
114tab-item.active {
115 background: var(--dark-3) !important;
116}
117
118
119tab-item:not(.active).highlighted{
120 background: var(--dark-1) !important;
121}
122
123tab-item:not(active):hover {
124 background: var(--dark-1);
125}
126
127tab-item:hover tab-closebox {
128 right: 10px;
129 opacity: 1;
130}
131
132tab-item:not(pinned) tab-closebox {
133 position: absolute;
134 margin-top: 2px;
135 height: 20px;
136 width: 20px;
137 right: -30px;
138 border-radius: 50%;
139 padding-top: 2px;
140 padding-left: 2px;
141 background: var(--light-4);
142 transition : all var(--animation-duration) var(--ease-out);
143}
144
145.sound-button:after {
146 background: var(--light-3) !important;
147 margin-top: 2px;
148}
149
150.counter{
151 color: var(--light-4) !important;
152 background: var(--dark-2) !important;
153 border-radius: 7px;
154 margin: 2px 2px 0px 0px;
155 padding: 0 4px;
156 padding-bottom: 2px;
157 order: -2 !important;
158}
159
160.counter:before, .counter:after{ content: ""}
161
162/********LEFT CONTENT TAB(static)*************/
163
164:root.left tab-item{
165 padding-left: 0;
166}
167
168:root.left tab-item tab-favicon {
169 transform: scale(120%);
170 margin-right: 5px;
171 left: 80%;
172}
173
174:root.left tab-item .label {
175 transform: translateX(10px);
176 right: 28%;
177}
178
179
180:root.left tab-item[data-child-ids] .twisty{
181 margin-right: 5px;
182}
183
184/********RIGHT CONTENT TAB(hover)*************/
185
186:root.right tab-item .label {
187 margin-left: 10px;
188 margin-right: calc(var(--collapsed-width)*0.3) !important;
189}
190
191:root.right tab-item:not(pinned):hover tab-closebox{
192 right: calc(var(--collapsed-width)*0.3);
193}
194
195:root.right tab-item:not([data-level="0"]):not(.pinned){
196 border: none !important;
197 border-right: dashed 2px var(--light-4) !important;
198 border-radius: var(--tab-border-radius);
199 border-top-right-radius: 0;
200 border-bottom-right-radius: 0;
201}
202
203:root.right tab-item.active:not([data-level="0"]):not(.pinned){
204 margin-right: 5px !important;
205}
206
207:root.right .sound-button{
208 order: -1 !important;
209}
210
211:root.right tab-item.active.pinned {
212 position: relative;
213 left: 190px !important;
214}
215
216:root.right tab-item.active.pinned tab-favicon {
217 transform: scale(130%) !important;
218 margin-left: 7px;
219}
220
221/***********************************/
222
223.tab
224 .favicon
225 .favicon-default::before {
226 filter: var(--extension-icon-mask); // change for light theme
227}
228
229.tab[data-current-favicon-uri="undefined"]
230 .favicon
231 .favicon-default::before{
232 background: url("chrome://branding/content/identity-icons-brand.svg") no-repeat center !important;
233 mask: none !important;
234}
235
236/***********NEW TAB BUTTON**********/
237
238.newtab-button-box {
239 border: none !important;
240 margin: 0 50px;
241}
242
243.newtab-button {
244 border: none !important;
245 border-radius: 8px;
246 padding: 8px 0 !important;
247 margin: 0 5px;
248}
249
250.newtab-button::before{
251 background: var(--light-3) !important;
252}
253
254.newtab-action-selector-anchor {
255 border: none !important;
256 margin-right: 10px;
257 margin-top: 3px;
258}
259
260.newtab-button:hover {
261 background: var(--dark-1);
262}
263
264/**********PINNED TAB***************/
265
266tab-item.pinned {
267 margin: 5px !important;
268 padding: 5px !important;
269 transition : all 0.1s var(--ease-out);
270}
271
272/***********************************/
273
274#all-tabs {
275 border: none !important;
276}
277
278