Skip to content

Commit 82aaf13

Browse files
not-holarnot-holar
committed
tst: fixed pinned tabs, improved css quality
1 parent 7c8c785 commit 82aaf13

File tree

1 file changed

+83
-77
lines changed

1 file changed

+83
-77
lines changed

‎tree_style_tabs/extra_style_rules.css‎

Lines changed: 83 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,148 @@
11
/* Hide close buttons on tabs. */
22
tab-item .closebox {
3-
visibility: collapse;
3+
visibility: collapse;
44
}
55

66
tab-item {
7-
border: none;
8-
outline: 1px solid hsla(0, 0%, 0%, 0.09);
9-
--tab-size: 38px !important;
10-
height: var(--tab-size);
7+
border: none;
8+
outline: 1px solid hsla(0, 0%, 0%, 0.09);
9+
--tab-size: 38px !important;
10+
height: var(--tab-size);
1111

12-
display: flex;
13-
flex-direction: row;
14-
align-items: center;
15-
gap: 12px;
16-
vertical-align: middle;
17-
padding: 0 0 0 14px !important;
18-
padding-right: 0 !important;
19-
margin: 0 0 0 0;
12+
display: flex;
13+
flex-direction: row;
14+
align-items: center;
15+
justify-content: center;
16+
gap: 12px;
17+
padding: 0 0 0 14px !important;
18+
margin: 0;
2019
}
2120

2221
tab-item.unread {
23-
opacity: .5;
22+
opacity: .5;
23+
}
24+
25+
tab-item.pinned {
26+
padding: unset !important;
2427
}
2528

2629
.tabs::after {
27-
content: '';
28-
position: fixed;
29-
right: 0;
30-
top: 0;
31-
bottom: 0;
32-
left: 0;
33-
display: block;
34-
z-index: 999999999999999999;
35-
pointer-events: none;
30+
content: '';
31+
position: fixed;
32+
inset: 0;
33+
display: block;
34+
z-index: 999999999999999999;
35+
pointer-events: none;
3636

37-
box-shadow:
38-
inset 0 24px 38px 3px rgba(0,0,0,0.14),
39-
inset 0 9px 46px 8px rgba(0,0,0,0.12),
40-
inset 0 11px 15px -7px rgba(0,0,0,0.20),
41-
inset 0 2px 2px 0 rgba(0,0,0,0.14),
42-
inset 0 3px 1px -2px rgba(0,0,0,0.12),
43-
inset 0 1px 5px 0 rgba(0,0,0,0.20) !important;
37+
box-shadow:
38+
inset 0 24px 38px 3px rgba(0,0,0,0.14),
39+
inset 0 9px 46px 8px rgba(0,0,0,0.12),
40+
inset 0 11px 15px -7px rgba(0,0,0,0.20),
41+
inset 0 2px 2px 0 rgba(0,0,0,0.14),
42+
inset 0 3px 1px -2px rgba(0,0,0,0.12),
43+
inset 0 1px 5px 0 rgba(0,0,0,0.20) !important;
4444
}
4545

46+
tab-item.active:not(.pinned) {
47+
padding-right: 10px !important;
48+
margin-right: 2px !important;
49+
}
4650
tab-item.active {
47-
padding-right: 10px !important;
48-
margin-right: 2px !important;
49-
z-index: 100;
50-
box-shadow:
51-
0 24px 38px 3px rgba(0,0,0,0.14),
52-
0 9px 46px 8px rgba(0,0,0,0.12),
53-
0 11px 15px -7px rgba(0,0,0,0.20),
54-
0 2px 2px 0 rgba(0,0,0,0.14),
55-
0 3px 1px -2px rgba(0,0,0,0.12),
56-
0 1px 5px 0 rgba(0,0,0,0.20) !important;
51+
z-index: 100;
52+
box-shadow:
53+
0 24px 38px 3px rgba(0,0,0,0.14),
54+
0 9px 46px 8px rgba(0,0,0,0.12),
55+
0 11px 15px -7px rgba(0,0,0,0.20),
56+
0 2px 2px 0 rgba(0,0,0,0.14),
57+
0 3px 1px -2px rgba(0,0,0,0.12),
58+
0 1px 5px 0 rgba(0,0,0,0.20) !important;
5759
}
5860

5961
tab-item.active::after {
60-
border-right: 10px solid currentcolor;
61-
opacity: .5;
62-
content: '';
63-
position: absolute;
64-
left: 0; top: 0; bottom: 0; right: 0;
62+
width: 10px;
63+
background: currentcolor;
64+
opacity: .5;
65+
content: '';
66+
position: absolute;
67+
inset: 0;
68+
left: unset;
69+
}
70+
71+
tab-item.active.pinned::after {
72+
width: 50%;
6573
}
6674

6775
tab-item.active > :nth-child(8),
6876
tab-item > :nth-child(8)::before,
6977
tab-item > :nth-child(8)::after {
70-
display: none !important;
78+
display: none !important;
7179
}
7280
tab-item > tab-favicon {
73-
order: 1;
81+
order: 1;
7482
}
7583
tab-item > tab-label {
76-
order: 2;
84+
order: 2;
7785
}
7886
tab-item > tab-sound-button {
79-
grid-area: sound;
80-
order: 3;
87+
grid-area: sound;
88+
order: 3;
8189
}
8290
tab-item > tab-counter {
83-
order: 4;
91+
order: 4;
8492
}
8593
tab-item > tab-twisty {
86-
order: 99 !important;
87-
position: unset;
88-
display: block;
94+
order: 99 !important;
95+
position: unset;
96+
display: block;
8997
}
9098
tab-item:not([data-child-ids]) tab-twisty,
9199
tab-item.pinned tab-twisty,
92100
tab-item.collapsed tab-twisty {
93-
display: none !important;
101+
display: none !important;
94102
}
95103
tab-item > * {
96-
margin-left: 0 !important;
97-
margin-right: 0 !important;
98-
padding-left: 0 !important;
99-
padding-right: 0 !important;
104+
margin: 0 !important;
105+
padding-inline: 0 !important;
100106
}
101107

102108
.newtab-button::before {
103-
height: 12px;
104-
width: 12px;
105-
margin: 11px;
109+
height: 12px;
110+
width: 12px;
111+
margin: 11px;
106112
}
107113

108114
#tabbar {
109-
bottom: 36px !important;
115+
bottom: 36px !important;
110116
}
111117

112118
tab-item::before {
113-
content: var(--overlay-content);
114-
background: var(--overlay-color);
115-
position: absolute;
116-
left: 0; top: 0; bottom: 0; right: 0;
119+
content: var(--overlay-content);
120+
background: var(--overlay-color);
121+
position: absolute;
122+
inset: 0;
117123
}
118124

119125
tab-item[data-current-uri^="https://github.com"],
120126
tab-item[data-current-uri^="https://gist.github.com"] {
121-
--overlay-content: '';
122-
--overlay-color: hsla(195, 100%, 70%, .15);
127+
--overlay-content: '';
128+
--overlay-color: hsla(195, 100%, 70%, .15);
123129
}
124130
tab-item[data-current-uri^="https://api.flutter.dev"],
125131
tab-item[data-current-uri^="https://pub.dev/documentation"],
126132
tab-item[data-current-uri^="https://flutter.dev/docs"] {
127-
--overlay-content: '';
128-
--overlay-color: hsla(225, 60%, 50%, .15);
133+
--overlay-content: '';
134+
--overlay-color: hsla(225, 60%, 50%, .15);
129135
}
130136
tab-item[data-current-uri^="https://stackoverflow.com"] {
131-
--overlay-content: '';
132-
--overlay-color: hsla(25, 100%, 25%, .15);
137+
--overlay-content: '';
138+
--overlay-color: hsla(25, 100%, 25%, .15);
133139
}
134140
tab-item[data-current-uri^="about:"] {
135-
--overlay-content: '';
136-
--overlay-color: hsla(0, 0%, 0%, .35);
141+
--overlay-content: '';
142+
--overlay-color: hsla(0, 0%, 0%, .35);
137143
}
138144
/*tab-item[data-current-uri^="https://www.google.com"],
139145
tab-item[data-current-uri^="https://google.com"] {
140-
--overlay-content: '';
141-
--overlay-color: hsla(350, 100%, 22%, .15);
146+
--overlay-content: '';
147+
--overlay-color: hsla(350, 100%, 22%, .15);
142148
}*/

0 commit comments

Comments
 (0)