blob: 041c848fe132dd0d61f841f6127718c48f5ba1c5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
// simple-bar' global styles
const baseStyles = /* css */ `
.simple-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 0;
height: var(--bar-height);
display: flex;
align-items: stretch;
padding: var(--bar-inner-margin);
box-sizing: border-box;
color: var(--foreground);
font-size: var(--font-size);
font-family: var(--font);
background-color: var(--background);
border: var(--bar-border);
box-shadow: var(--light-shadow);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.simple-bar {
-webkit-font-smoothing: antialiased;
}
}
.simple-bar--floating {
top: var(--bar-outer-margin, 5px);
left: var(--bar-outer-margin, 5px);
width: calc(100% - (var(--bar-outer-margin, 5px) * 2));
border-radius: var(--bar-radius);
}
.simple-bar--no-bar-background {
padding: 0;
}
.simple-bar--on-bottom {
top: unset;
bottom: 0;
}
.simple-bar--floating.simple-bar--on-bottom {
bottom: var(--bar-outer-margin, 5px);
}
.simple-bar--no-bar-background,
.simple-bar--no-shadow {
box-shadow: none;
}
.simple-bar--focused,
.simple-bar--no-shadow.simple-bar--focused {
box-shadow: inset 0 0 0 1px var(--red);
}
.simple-bar--no-bar-background {
background-color: transparent;
}
.simple-bar--empty {
height: var(--bar-height);
display: flex;
align-items: center;
}
.simple-bar--empty {
z-index: 2;
}
.simple-bar--empty > span {
position: relative;
display: flex;
align-items: center;
color: var(--foreground);
}
.simple-bar--empty > span::before {
content: "";
width: 6px;
height: 6px;
margin-right: 7px;
background-color: var(--red);
border-radius: 50%;
}
.simple-bar--empty.simple-bar--loading > span::before {
background-color: var(--green);
}
.simple-bar__data {
position: relative;
display: flex;
align-items: stretch;
margin-left: auto;
}
.simple-bar__data:empty {
display: none;
}
.simple-bar--no-color-in-data .simple-bar__data {
color: var(--white);
}
.simple-bar--no-bar-background .simple-bar__data {
padding: 4px 5px 4px 0;
background-color: var(--background);
box-shadow: var(--light-shadow);
border-radius: var(--bar-radius);
}
.simple-bar--no-bar-background.simple-bar--no-shadow .simple-bar__data {
box-shadow: none;
}
.simple-bar-icon-loader {
flex: 0 0 10px;
width: 10px;
height: 10px;
margin-right: 7px;
background-color: currentColor;
border-radius: 50%;
}
#simple-bar-click-effect {
position: absolute;
border-radius: 50%;
pointer-events: none;
touch-action: none;
background-color: var(--click-effect);
z-index: 2147483647;
}
`;
export { baseStyles as styles };
|
