classicy 0.6.51 → 0.6.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/classicy.es.js +1103 -1103
- package/dist/classicy.umd.js +125 -125
- package/package.json +5 -3
- package/src/SystemFolder/ControlPanels/AppearanceManager/styles/appearance.scss +186 -0
- package/src/SystemFolder/ControlPanels/AppearanceManager/styles/assets.scss +13 -0
- package/src/SystemFolder/ControlPanels/AppearanceManager/styles/fonts.scss +90 -0
- package/src/SystemFolder/ControlPanels/AppearanceManager/styles/scrollbars.scss +296 -0
- package/src/SystemFolder/ControlPanels/AppearanceManager/styles/themes.json +1158 -0
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
@mixin scrollbars() {
|
|
2
|
+
::-webkit-scrollbar {
|
|
3
|
+
width: var(--window-scrollbar-size);
|
|
4
|
+
height: var(--window-scrollbar-size);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
::-webkit-scrollbar-button:start:vertical,
|
|
8
|
+
::-webkit-scrollbar-button:start:horizontal {
|
|
9
|
+
display: block;
|
|
10
|
+
top: 16px;
|
|
11
|
+
background-color: var(--color-system-02);
|
|
12
|
+
width: var(--window-scrollbar-size) v;
|
|
13
|
+
height: var(--window-scrollbar-size);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
::-webkit-scrollbar-button:start:vertical {
|
|
17
|
+
border-left: 1px solid var(--color-black);
|
|
18
|
+
border-right: 1px solid var(--color-black);
|
|
19
|
+
border-bottom: 1px solid var(--color-black);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
::-webkit-scrollbar-button:start:vertical:decrement {
|
|
23
|
+
background: linear-gradient(transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
|
|
24
|
+
linear-gradient(transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
|
|
25
|
+
linear-gradient(transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
26
|
+
linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
|
|
27
|
+
var(--color-system-02);
|
|
28
|
+
width: var(--window-scrollbar-size);
|
|
29
|
+
height: var(--window-scrollbar-size);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
::-webkit-scrollbar-button:start:vertical:decrement:active {
|
|
33
|
+
background: linear-gradient(transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
|
|
34
|
+
linear-gradient(transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
|
|
35
|
+
linear-gradient(transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
36
|
+
linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
|
|
37
|
+
var(--color-system-06);
|
|
38
|
+
box-shadow: inset 1px 1px 0 var(--color-system-07),
|
|
39
|
+
inset -1px -1px 0 var(--color-system-07);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
::-webkit-scrollbar-button:start:vertical:increment {
|
|
43
|
+
background: linear-gradient(0deg, transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
|
|
44
|
+
linear-gradient(0deg, transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
|
|
45
|
+
linear-gradient(0deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
46
|
+
linear-gradient(0deg, var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
|
|
47
|
+
var(--color-system-02);
|
|
48
|
+
border-bottom: none;
|
|
49
|
+
width: var(--window-scrollbar-size);
|
|
50
|
+
height: var(--window-scrollbar-size);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
::-webkit-scrollbar-button:start:vertical:increment:active {
|
|
54
|
+
background: linear-gradient(0deg, transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
|
|
55
|
+
linear-gradient(0deg, transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
|
|
56
|
+
linear-gradient(0deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
57
|
+
linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
|
|
58
|
+
var(--color-system-06);
|
|
59
|
+
box-shadow: inset 1px 1px 0 var(--color-system-06),
|
|
60
|
+
inset -1px -1px 0 var(--color-system-07);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
::-webkit-scrollbar-button:start:horizontal {
|
|
64
|
+
border-top: 1px solid var(--color-black);
|
|
65
|
+
border-bottom: 1px solid var(--color-black);
|
|
66
|
+
border-right: 1px solid var(--color-black);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
::-webkit-scrollbar-button:start:horizontal:decrement {
|
|
70
|
+
background: linear-gradient(90deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
|
|
71
|
+
linear-gradient(90deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
|
|
72
|
+
linear-gradient(90deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
73
|
+
linear-gradient(90deg, var(--color-black) 50%, var(--color-black) 0) 50%/4px 2px no-repeat,
|
|
74
|
+
var(--color-system-02);
|
|
75
|
+
width: var(--window-scrollbar-size);
|
|
76
|
+
height: var(--window-scrollbar-size);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
::-webkit-scrollbar-button:start:horizontal:decrement:active {
|
|
80
|
+
background: linear-gradient(90deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
|
|
81
|
+
linear-gradient(90deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
|
|
82
|
+
linear-gradient(90deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
83
|
+
linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
|
|
84
|
+
var(--color-system-06);
|
|
85
|
+
box-shadow: inset 1px 1px 0 var(--color-system-06),
|
|
86
|
+
inset -1px -1px 0 var(--color-system-07);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
::-webkit-scrollbar-button:start:horizontal:increment {
|
|
90
|
+
background: linear-gradient(270deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
|
|
91
|
+
linear-gradient(270deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
|
|
92
|
+
linear-gradient(270deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
93
|
+
linear-gradient(270deg, var(--color-black) 50%, var(--color-black) 0) 50%/4px 2px no-repeat,
|
|
94
|
+
var(--color-system-02);
|
|
95
|
+
border-right: none;
|
|
96
|
+
width: var(--window-scrollbar-size);
|
|
97
|
+
height: var(--window-scrollbar-size);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
::-webkit-scrollbar-button:start:horizontal:increment:active {
|
|
101
|
+
background: linear-gradient(270deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
|
|
102
|
+
linear-gradient(270deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
|
|
103
|
+
linear-gradient(270deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
|
|
104
|
+
linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
|
|
105
|
+
var(--color-system-06);
|
|
106
|
+
box-shadow: inset 1px 1px 0 var(--color-system-06),
|
|
107
|
+
inset -1px -1px 0 var(--color-system-07);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
::-webkit-scrollbar-track {
|
|
111
|
+
background-color: var(--color-system-04);
|
|
112
|
+
border: 1px solid var(--color-black);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
::-webkit-scrollbar-track:vertical {
|
|
116
|
+
box-shadow: inset 1px 1px 0 var(--color-system-06),
|
|
117
|
+
inset -1px 2px 0 var(--color-system-03),
|
|
118
|
+
inset 2px 0 0 rgba(0, 0, 0, 0.25),
|
|
119
|
+
inset -2px 0 0 rgba(255, 255, 255, 0.25);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
::-webkit-scrollbar-track:horizontal {
|
|
123
|
+
box-shadow: inset 1px 1px 0 var(--color-system-06),
|
|
124
|
+
inset 2px -1px 0 var(--color-system-03),
|
|
125
|
+
inset 2px 0 0 rgba(0, 0, 0, 0.25),
|
|
126
|
+
inset -2px 0 0 rgba(255, 255, 255, 0.25);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
::-webkit-scrollbar-corner {
|
|
130
|
+
border-top: 1px solid var(--color-black);
|
|
131
|
+
border-left: 1px solid var(--color-black);
|
|
132
|
+
box-shadow: inset 1px 1px 0 var(--color-white);
|
|
133
|
+
background: var(--color-system-03);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
::-webkit-scrollbar {
|
|
137
|
+
margin-bottom: 100px;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@mixin scrollbars-inactive() {
|
|
142
|
+
::-webkit-scrollbar-button:start:vertical,
|
|
143
|
+
::-webkit-scrollbar-button:start:horizontal {
|
|
144
|
+
background-color: var(--color-system-02);
|
|
145
|
+
box-shadow: inset 1px 1px 0 var(--color-white),
|
|
146
|
+
inset -1px -1px 0 rgba(255, 255, 255, 0.5);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
::-webkit-scrollbar-button:start:vertical {
|
|
150
|
+
background: var(--color-system-02) !important;
|
|
151
|
+
border: none !important;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
::-webkit-scrollbar-button:start:vertical:decrement {
|
|
155
|
+
background: var(--color-system-02) !important;
|
|
156
|
+
border: none !important;
|
|
157
|
+
box-shadow: none !important;
|
|
158
|
+
width: 0 !important;
|
|
159
|
+
height: 0 !important;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
::-webkit-scrollbar-button:start:vertical:increment {
|
|
163
|
+
background: var(--color-system-02) !important;
|
|
164
|
+
border: none !important;
|
|
165
|
+
box-shadow: none !important;
|
|
166
|
+
width: 0 !important;
|
|
167
|
+
height: 0 !important;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
::-webkit-scrollbar-button:start:horizontal {
|
|
171
|
+
border: none !important;
|
|
172
|
+
box-shadow: none !important;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
::-webkit-scrollbar-button:start:horizontal:decrement {
|
|
176
|
+
background: var(--color-system-02) !important;
|
|
177
|
+
border: none !important;
|
|
178
|
+
box-shadow: none !important;
|
|
179
|
+
width: 0 !important;
|
|
180
|
+
height: 0 !important;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
::-webkit-scrollbar-button:start:horizontal:increment {
|
|
184
|
+
background: var(--color-system-02) !important;
|
|
185
|
+
border: none !important;
|
|
186
|
+
box-shadow: none !important;
|
|
187
|
+
width: 0 !important;
|
|
188
|
+
height: 0 !important;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
::-webkit-scrollbar-track {
|
|
192
|
+
background: var(--color-system-02) !important;
|
|
193
|
+
border: 1px solid var(--color-system-06) !important;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
::-webkit-scrollbar-track:vertical {
|
|
197
|
+
box-shadow: none !important;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
::-webkit-scrollbar-track:horizontal {
|
|
201
|
+
box-shadow: none !important;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
::-webkit-scrollbar-corner {
|
|
205
|
+
border: none !important;
|
|
206
|
+
box-shadow: none !important;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
::-webkit-scrollbar-thumb {
|
|
210
|
+
display: none !important;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
@mixin scrollbars-themed() {
|
|
215
|
+
::-webkit-scrollbar-thumb {
|
|
216
|
+
min-width: var(--window-control-size);
|
|
217
|
+
min-height: var(--window-control-size);
|
|
218
|
+
border: var(--window-border-size) solid var(--color-theme-07);
|
|
219
|
+
box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-02),
|
|
220
|
+
inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 var(--color-theme-04) !important;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
::-webkit-scrollbar-thumb:vertical {
|
|
224
|
+
background: linear-gradient(
|
|
225
|
+
transparent 12.5%,
|
|
226
|
+
var(--color-theme-05) 0,
|
|
227
|
+
var(--color-theme-05) 25%,
|
|
228
|
+
transparent 0,
|
|
229
|
+
transparent 37.5%,
|
|
230
|
+
var(--color-theme-05) 0,
|
|
231
|
+
var(--color-theme-05) 50%,
|
|
232
|
+
transparent 0,
|
|
233
|
+
transparent 62.5%,
|
|
234
|
+
var(--color-theme-05) 0,
|
|
235
|
+
var(--color-theme-05) 75%,
|
|
236
|
+
transparent 0,
|
|
237
|
+
transparent 87.5%,
|
|
238
|
+
var(--color-theme-05) 0
|
|
239
|
+
) 50%/7px 8px no-repeat,
|
|
240
|
+
linear-gradient(
|
|
241
|
+
var(--color-theme-01) 12.5%,
|
|
242
|
+
transparent 0,
|
|
243
|
+
transparent 25%,
|
|
244
|
+
var(--color-theme-01) 0,
|
|
245
|
+
var(--color-theme-01) 37.5%,
|
|
246
|
+
transparent 0,
|
|
247
|
+
transparent 50%,
|
|
248
|
+
var(--color-theme-01) 0,
|
|
249
|
+
var(--color-theme-01) 62.5%,
|
|
250
|
+
transparent 0,
|
|
251
|
+
transparent 75%,
|
|
252
|
+
var(--color-theme-01) 0,
|
|
253
|
+
var(--color-theme-01) 87.5%,
|
|
254
|
+
transparent 0
|
|
255
|
+
) 49%/7px 8px no-repeat,
|
|
256
|
+
var(--color-theme-03);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
::-webkit-scrollbar-thumb:horizontal {
|
|
260
|
+
background: linear-gradient(
|
|
261
|
+
90deg,
|
|
262
|
+
transparent 12.5%,
|
|
263
|
+
var(--color-theme-05) 0,
|
|
264
|
+
var(--color-theme-05) 25%,
|
|
265
|
+
transparent 0,
|
|
266
|
+
transparent 37.5%,
|
|
267
|
+
var(--color-theme-05) 0,
|
|
268
|
+
var(--color-theme-05) 50%,
|
|
269
|
+
transparent 0,
|
|
270
|
+
transparent 62.5%,
|
|
271
|
+
var(--color-theme-05) 0,
|
|
272
|
+
var(--color-theme-05) 75%,
|
|
273
|
+
transparent 0,
|
|
274
|
+
transparent 87.5%,
|
|
275
|
+
var(--color-theme-05) 0
|
|
276
|
+
) 50%/8px 7px no-repeat,
|
|
277
|
+
linear-gradient(
|
|
278
|
+
90deg,
|
|
279
|
+
var(--color-theme-01) 12.5%,
|
|
280
|
+
transparent 0,
|
|
281
|
+
transparent 25%,
|
|
282
|
+
var(--color-theme-01) 0,
|
|
283
|
+
var(--color-theme-01) 37.5%,
|
|
284
|
+
transparent 0,
|
|
285
|
+
transparent 50%,
|
|
286
|
+
var(--color-theme-01) 0,
|
|
287
|
+
var(--color-theme-01) 62.5%,
|
|
288
|
+
transparent 0,
|
|
289
|
+
transparent 75%,
|
|
290
|
+
var(--color-theme-01) 0,
|
|
291
|
+
var(--color-theme-01) 87.5%,
|
|
292
|
+
transparent 0
|
|
293
|
+
) center 49%/8px 7px no-repeat,
|
|
294
|
+
var(--color-theme-03);
|
|
295
|
+
}
|
|
296
|
+
}
|