Skip to content
This repository was archived by the owner on May 28, 2023. It is now read-only.

Commit 2eef91c

Browse files
MotorTruck1221MotorTruck1221
committed
TABS
1 parent be59afc commit 2eef91c

21 files changed

+1659
-68
lines changed

‎public/chrome-tabs/chrome-tabs.css

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
.chrome-tabs {
2+
box-sizing: border-box;
3+
position: relative;
4+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
5+
font-size: 12px;
6+
height: 46px;
7+
padding: 8px 3px 4px 3px;
8+
background: var(--bg-color);
9+
filter: var(--brightness-filter);
10+
border-radius: 5px 5px 0 0;
11+
overflow: hidden;
12+
}
13+
.chrome-tabs * {
14+
box-sizing: inherit;
15+
font: inherit;
16+
}
17+
.chrome-tabs .chrome-tabs-content {
18+
position: relative;
19+
width: 90%;
20+
height: 100%;
21+
}
22+
@media (max-width: 846px) {
23+
.chrome-tabs .chrome-tabs-content {
24+
width: 85%;
25+
}
26+
}
27+
@media (max-width: 589px) {
28+
.chrome-tabs .chrome-tabs-content {
29+
width: 80%;
30+
}
31+
}
32+
@media (max-width: 460px) {
33+
.chrome-tabs .chrome-tabs-content {
34+
width: 70%;
35+
}
36+
}
37+
.chrome-tabs .chrome-tab {
38+
position: absolute;
39+
left: 0;
40+
height: 36px;
41+
width: 240px;
42+
border: 0;
43+
margin: 0;
44+
z-index: 1;
45+
pointer-events: none;
46+
}
47+
.chrome-tabs .chrome-tab,
48+
.chrome-tabs .chrome-tab * {
49+
user-select: none;
50+
cursor: default;
51+
}
52+
.chrome-tabs .chrome-tab .chrome-tab-dividers {
53+
position: absolute;
54+
top: 7px;
55+
bottom: 7px;
56+
left: var(--tab-content-margin);
57+
right: var(--tab-content-margin);
58+
}
59+
.chrome-tabs .chrome-tab .chrome-tab-dividers,
60+
.chrome-tabs .chrome-tab .chrome-tab-dividers::before,
61+
.chrome-tabs .chrome-tab .chrome-tab-dividers::after {
62+
pointer-events: none;
63+
}
64+
.chrome-tabs .chrome-tab .chrome-tab-dividers::before,
65+
.chrome-tabs .chrome-tab .chrome-tab-dividers::after {
66+
content: "";
67+
display: block;
68+
position: absolute;
69+
top: 0;
70+
bottom: 0;
71+
width: 1px;
72+
background: var(--text-bg-color);
73+
opacity: 1;
74+
transition: opacity 0.2s ease;
75+
}
76+
.chrome-tabs .chrome-tab .chrome-tab-dividers::before {
77+
left: 0;
78+
}
79+
.chrome-tabs .chrome-tab .chrome-tab-dividers::after {
80+
right: 0;
81+
}
82+
.chrome-tabs .chrome-tab:first-child .chrome-tab-dividers::before,
83+
.chrome-tabs .chrome-tab:last-child .chrome-tab-dividers::after {
84+
opacity: 0;
85+
}
86+
.chrome-tabs .chrome-tab .chrome-tab-background {
87+
position: absolute;
88+
top: 0;
89+
left: 0;
90+
width: 100%;
91+
height: 100%;
92+
overflow: hidden;
93+
pointer-events: none;
94+
}
95+
.chrome-tabs .chrome-tab .chrome-tab-background > svg {
96+
width: 100%;
97+
height: 100%;
98+
}
99+
.chrome-tabs .chrome-tab .chrome-tab-background > svg .chrome-tab-geometry {
100+
fill: var(--bg-color);
101+
filter: brightness(200%);
102+
}
103+
.chrome-tabs .chrome-tab[active] {
104+
z-index: 5;
105+
}
106+
.chrome-tabs .chrome-tab[active] .chrome-tab-background > svg .chrome-tab-geometry {
107+
fill: var(--text-bg-color);
108+
filter: var(--brightness-filter);
109+
}
110+
.chrome-tabs .chrome-tab:not([active]) .chrome-tab-background {
111+
transition: opacity 0.2s ease;
112+
opacity: 0;
113+
}
114+
@media (hover: hover) {
115+
.chrome-tabs .chrome-tab:not([active]):hover {
116+
z-index: 2;
117+
}
118+
.chrome-tabs .chrome-tab:not([active]):hover .chrome-tab-background {
119+
opacity: 1;
120+
}
121+
}
122+
.chrome-tabs .chrome-tab.chrome-tab-was-just-added {
123+
top: 10px;
124+
animation: chrome-tab-was-just-added 120ms forwards ease-in-out;
125+
}
126+
.chrome-tabs .chrome-tab .chrome-tab-content {
127+
position: absolute;
128+
display: flex;
129+
top: 0;
130+
bottom: 0;
131+
left: var(--tab-content-margin);
132+
right: var(--tab-content-margin);
133+
padding: 9px 8px;
134+
border-top-left-radius: 8px;
135+
border-top-right-radius: 8px;
136+
overflow: hidden;
137+
pointer-events: all;
138+
}
139+
.chrome-tabs .chrome-tab[is-mini] .chrome-tab-content {
140+
padding-left: 2px;
141+
padding-right: 2px;
142+
}
143+
.chrome-tabs .chrome-tab .chrome-tab-favicon {
144+
position: relative;
145+
flex-shrink: 0;
146+
flex-grow: 0;
147+
height: 16px;
148+
width: 16px;
149+
background-size: 16px;
150+
margin-left: 4px;
151+
}
152+
.chrome-tabs .chrome-tab[is-small] .chrome-tab-favicon {
153+
margin-left: 0;
154+
}
155+
.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-favicon {
156+
margin-left: auto;
157+
margin-right: auto;
158+
}
159+
.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-favicon {
160+
display: none;
161+
}
162+
.chrome-tabs .chrome-tab .chrome-tab-title {
163+
flex: 1;
164+
vertical-align: top;
165+
overflow: hidden;
166+
white-space: nowrap;
167+
margin-left: 4px;
168+
color: var(--text-color);
169+
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent);
170+
mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent);
171+
}
172+
.chrome-tabs .chrome-tab[is-small] .chrome-tab-title {
173+
margin-left: 0;
174+
}
175+
.chrome-tabs .chrome-tab .chrome-tab-favicon + .chrome-tab-title,
176+
.chrome-tabs .chrome-tab[is-small] .chrome-tab-favicon + .chrome-tab-title {
177+
margin-left: 8px;
178+
}
179+
.chrome-tabs .chrome-tab[is-smaller] .chrome-tab-favicon + .chrome-tab-title,
180+
.chrome-tabs .chrome-tab[is-mini] .chrome-tab-title {
181+
display: none;
182+
}
183+
.chrome-tabs .chrome-tab[active] .chrome-tab-title {
184+
color: var(--text-color);
185+
}
186+
.chrome-tabs .chrome-tab .chrome-tab-drag-handle {
187+
position: absolute;
188+
top: 0;
189+
bottom: 0;
190+
right: 0;
191+
left: 0;
192+
border-top-left-radius: 8px;
193+
border-top-right-radius: 8px;
194+
}
195+
.chrome-tabs .chrome-tab .chrome-tab-close {
196+
flex-grow: 0;
197+
flex-shrink: 0;
198+
position: relative;
199+
width: 16px;
200+
height: 16px;
201+
border-radius: 50%;
202+
}
203+
.chrome-tabs .chrome-tab .chrome-tab-close > svg {
204+
width: 8px;
205+
height: 8px;
206+
transform: translate(50%, 50%);
207+
}
208+
@media (hover: hover) {
209+
.chrome-tabs .chrome-tab .chrome-tab-close:hover {
210+
background-color: var(--text-color);
211+
}
212+
.chrome-tabs .chrome-tab .chrome-tab-close:hover:active {
213+
background-color: var(--text-color);
214+
filter: var(--brightness-filter);
215+
}
216+
}
217+
@media not all and (hover: hover) {
218+
.chrome-tabs .chrome-tab .chrome-tab-close:active {
219+
background-color: var(--text-color);
220+
filter: var(--brightness-filter);
221+
}
222+
}
223+
@media (hover: hover) {
224+
.chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active) {
225+
opacity: 0.8;
226+
}
227+
}
228+
.chrome-tabs .chrome-tab[is-smaller] .chrome-tab-close {
229+
margin-left: auto;
230+
}
231+
.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-close {
232+
display: none;
233+
}
234+
.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-close {
235+
margin-left: auto;
236+
margin-right: auto;
237+
}
238+
@-moz-keyframes chrome-tab-was-just-added {
239+
to {
240+
top: 0;
241+
}
242+
}
243+
@-webkit-keyframes chrome-tab-was-just-added {
244+
to {
245+
top: 0;
246+
}
247+
}
248+
@-o-keyframes chrome-tab-was-just-added {
249+
to {
250+
top: 0;
251+
}
252+
}
253+
@keyframes chrome-tab-was-just-added {
254+
to {
255+
top: 0;
256+
}
257+
}
258+
.chrome-tabs.chrome-tabs-is-sorting .chrome-tab:not(.chrome-tab-is-dragging),
259+
.chrome-tabs:not(.chrome-tabs-is-sorting) .chrome-tab.chrome-tab-was-just-dragged {
260+
transition: transform 120ms ease-in-out;
261+
}
262+
.chrome-tabs .chrome-tabs-bottom-bar {
263+
position: absolute;
264+
bottom: 0;
265+
height: 4px;
266+
left: 0;
267+
width: 100%;
268+
background: var(--text-bg-color);
269+
z-index: 10;
270+
}
271+
.chrome-tabs-optional-shadow-below-bottom-bar {
272+
position: relative;
273+
height: 1px;
274+
width: 100%;
275+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'><rect x='0' y='0' width='1' height='1' fill='rgba(0, 0, 0, .17)'></rect></svg>");
276+
background-size: 1px 1px;
277+
background-repeat: repeat-x;
278+
background-position: 0% 0%;
279+
}
280+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
281+
.chrome-tabs-optional-shadow-below-bottom-bar {
282+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'><rect x='0' y='0' width='2' height='1' fill='rgba(0, 0, 0, .27)'></rect></svg>");
283+
}
284+
}

0 commit comments

Comments
 (0)