ywana-core8 0.2.5 → 0.2.6
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/index.css +682 -0
- package/dist/index.js +28 -3
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +28 -3
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +28 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/desktop/Desktop.stories.jsx +170 -0
- package/src/desktop/WindowContext.js +1 -0
- package/src/desktop/WindowManager.js +23 -0
- package/src/desktop/desktop-linux.css +232 -0
- package/src/desktop/desktop-macos.css +260 -0
- package/src/desktop/desktop-windows.css +190 -0
- package/src/desktop/desktop.js +8 -2
- package/src/desktop/window.js +9 -2
package/package.json
CHANGED
|
@@ -257,6 +257,176 @@ export const ApplicationMenuBasic = () => (
|
|
|
257
257
|
</div>
|
|
258
258
|
)
|
|
259
259
|
|
|
260
|
+
/**
|
|
261
|
+
* Windows Theme Desktop
|
|
262
|
+
*/
|
|
263
|
+
export const WindowsTheme = () => (
|
|
264
|
+
<div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
|
|
265
|
+
<Desktop theme="windows" desktopSize={{ width: 1200, height: 600 }}>
|
|
266
|
+
<div style={{
|
|
267
|
+
position: 'absolute',
|
|
268
|
+
top: '20px',
|
|
269
|
+
left: '20px',
|
|
270
|
+
background: 'rgba(255,255,255,0.9)',
|
|
271
|
+
padding: '20px',
|
|
272
|
+
borderRadius: '8px',
|
|
273
|
+
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
|
|
274
|
+
maxWidth: '400px'
|
|
275
|
+
}}>
|
|
276
|
+
<h3 style={{ margin: '0 0 15px 0' }}>🪟 Windows Theme</h3>
|
|
277
|
+
<p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
|
|
278
|
+
Windows-inspired desktop theme with Segoe UI font, blue gradient background,
|
|
279
|
+
and Windows-style window controls and taskbar.
|
|
280
|
+
</p>
|
|
281
|
+
<div style={{ fontSize: '14px', color: '#666' }}>
|
|
282
|
+
<p><strong>Features:</strong></p>
|
|
283
|
+
<ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
|
|
284
|
+
<li>Windows 11 inspired design</li>
|
|
285
|
+
<li>Segoe UI font family</li>
|
|
286
|
+
<li>Blue gradient background</li>
|
|
287
|
+
<li>Windows-style window controls</li>
|
|
288
|
+
</ul>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
</Desktop>
|
|
292
|
+
</div>
|
|
293
|
+
)
|
|
294
|
+
|
|
295
|
+
/**
|
|
296
|
+
* macOS Theme Desktop
|
|
297
|
+
*/
|
|
298
|
+
export const MacOSTheme = () => (
|
|
299
|
+
<div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
|
|
300
|
+
<Desktop theme="macos" desktopSize={{ width: 1200, height: 600 }}>
|
|
301
|
+
<div style={{
|
|
302
|
+
position: 'absolute',
|
|
303
|
+
top: '20px',
|
|
304
|
+
left: '20px',
|
|
305
|
+
background: 'rgba(255,255,255,0.9)',
|
|
306
|
+
padding: '20px',
|
|
307
|
+
borderRadius: '16px',
|
|
308
|
+
boxShadow: '0 8px 25px rgba(0,0,0,0.15)',
|
|
309
|
+
maxWidth: '400px',
|
|
310
|
+
backdropFilter: 'blur(20px)'
|
|
311
|
+
}}>
|
|
312
|
+
<h3 style={{ margin: '0 0 15px 0' }}>🍎 macOS Theme</h3>
|
|
313
|
+
<p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
|
|
314
|
+
macOS-inspired desktop theme with SF Pro Display font, purple gradient background,
|
|
315
|
+
and signature traffic light window controls.
|
|
316
|
+
</p>
|
|
317
|
+
<div style={{ fontSize: '14px', color: '#666' }}>
|
|
318
|
+
<p><strong>Features:</strong></p>
|
|
319
|
+
<ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
|
|
320
|
+
<li>macOS Big Sur/Monterey design</li>
|
|
321
|
+
<li>SF Pro Display font family</li>
|
|
322
|
+
<li>Purple gradient background</li>
|
|
323
|
+
<li>Traffic light window controls</li>
|
|
324
|
+
</ul>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</Desktop>
|
|
328
|
+
</div>
|
|
329
|
+
)
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* Linux Theme Desktop
|
|
333
|
+
*/
|
|
334
|
+
export const LinuxTheme = () => (
|
|
335
|
+
<div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
|
|
336
|
+
<Desktop theme="linux" desktopSize={{ width: 1200, height: 600 }}>
|
|
337
|
+
<div style={{
|
|
338
|
+
position: 'absolute',
|
|
339
|
+
top: '20px',
|
|
340
|
+
left: '20px',
|
|
341
|
+
background: 'rgba(255,255,255,0.9)',
|
|
342
|
+
padding: '20px',
|
|
343
|
+
borderRadius: '12px',
|
|
344
|
+
boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
|
|
345
|
+
maxWidth: '400px'
|
|
346
|
+
}}>
|
|
347
|
+
<h3 style={{ margin: '0 0 15px 0' }}>🐧 Linux Theme</h3>
|
|
348
|
+
<p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
|
|
349
|
+
Linux GNOME-inspired desktop theme with Ubuntu font, dark gradient background,
|
|
350
|
+
and colorful circular window controls.
|
|
351
|
+
</p>
|
|
352
|
+
<div style={{ fontSize: '14px', color: '#666' }}>
|
|
353
|
+
<p><strong>Features:</strong></p>
|
|
354
|
+
<ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
|
|
355
|
+
<li>GNOME/Ubuntu inspired design</li>
|
|
356
|
+
<li>Ubuntu/Cantarell font family</li>
|
|
357
|
+
<li>Dark gradient background</li>
|
|
358
|
+
<li>Colorful circular controls</li>
|
|
359
|
+
</ul>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</Desktop>
|
|
363
|
+
</div>
|
|
364
|
+
)
|
|
365
|
+
|
|
366
|
+
/**
|
|
367
|
+
* Theme Comparison - All three themes side by side
|
|
368
|
+
*/
|
|
369
|
+
export const ThemeComparison = () => (
|
|
370
|
+
<div style={{
|
|
371
|
+
display: 'grid',
|
|
372
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
373
|
+
gap: '20px',
|
|
374
|
+
padding: '20px',
|
|
375
|
+
height: '600px'
|
|
376
|
+
}}>
|
|
377
|
+
<div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
|
|
378
|
+
<div style={{
|
|
379
|
+
position: 'absolute',
|
|
380
|
+
top: '5px',
|
|
381
|
+
left: '5px',
|
|
382
|
+
background: 'rgba(0,0,0,0.7)',
|
|
383
|
+
color: 'white',
|
|
384
|
+
padding: '4px 8px',
|
|
385
|
+
borderRadius: '4px',
|
|
386
|
+
fontSize: '12px',
|
|
387
|
+
zIndex: 1000
|
|
388
|
+
}}>
|
|
389
|
+
Windows
|
|
390
|
+
</div>
|
|
391
|
+
<Desktop theme="windows" desktopSize={{ width: 400, height: 560 }} />
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
|
|
395
|
+
<div style={{
|
|
396
|
+
position: 'absolute',
|
|
397
|
+
top: '5px',
|
|
398
|
+
left: '5px',
|
|
399
|
+
background: 'rgba(0,0,0,0.7)',
|
|
400
|
+
color: 'white',
|
|
401
|
+
padding: '4px 8px',
|
|
402
|
+
borderRadius: '4px',
|
|
403
|
+
fontSize: '12px',
|
|
404
|
+
zIndex: 1000
|
|
405
|
+
}}>
|
|
406
|
+
macOS
|
|
407
|
+
</div>
|
|
408
|
+
<Desktop theme="macos" desktopSize={{ width: 400, height: 560 }} />
|
|
409
|
+
</div>
|
|
410
|
+
|
|
411
|
+
<div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
|
|
412
|
+
<div style={{
|
|
413
|
+
position: 'absolute',
|
|
414
|
+
top: '5px',
|
|
415
|
+
left: '5px',
|
|
416
|
+
background: 'rgba(0,0,0,0.7)',
|
|
417
|
+
color: 'white',
|
|
418
|
+
padding: '4px 8px',
|
|
419
|
+
borderRadius: '4px',
|
|
420
|
+
fontSize: '12px',
|
|
421
|
+
zIndex: 1000
|
|
422
|
+
}}>
|
|
423
|
+
Linux
|
|
424
|
+
</div>
|
|
425
|
+
<Desktop theme="linux" desktopSize={{ width: 400, height: 560 }} />
|
|
426
|
+
</div>
|
|
427
|
+
</div>
|
|
428
|
+
)
|
|
429
|
+
|
|
260
430
|
/**
|
|
261
431
|
* Desktop with ApplicationMenu - Advanced with controls
|
|
262
432
|
*/
|
|
@@ -63,6 +63,7 @@ export const WindowProvider = ({ children, desktopSize }) => {
|
|
|
63
63
|
minimizeWindow: (id, minimize) => windowManagerRef.current.minimizeWindow(id, minimize),
|
|
64
64
|
maximizeWindow: (id, maximize) => windowManagerRef.current.maximizeWindow(id, maximize),
|
|
65
65
|
updateWindowPosition: (id, position) => windowManagerRef.current.updateWindowPosition(id, position),
|
|
66
|
+
updateWindowSize: (id, size) => windowManagerRef.current.updateWindowSize(id, size),
|
|
66
67
|
|
|
67
68
|
// Window queries
|
|
68
69
|
getWindow: (id) => windowManagerRef.current.getWindow(id),
|
|
@@ -210,6 +210,29 @@ export class WindowManager {
|
|
|
210
210
|
return true
|
|
211
211
|
}
|
|
212
212
|
|
|
213
|
+
/**
|
|
214
|
+
* Update window size
|
|
215
|
+
*/
|
|
216
|
+
updateWindowSize(windowId, size) {
|
|
217
|
+
const window = this.windows.get(windowId)
|
|
218
|
+
if (!window) return false
|
|
219
|
+
|
|
220
|
+
// Ensure minimum size constraints
|
|
221
|
+
const minWidth = 200
|
|
222
|
+
const minHeight = 150
|
|
223
|
+
const maxWidth = this.desktopSize.width
|
|
224
|
+
const maxHeight = this.desktopSize.height - 50 // Space for taskbar
|
|
225
|
+
|
|
226
|
+
const constrainedSize = {
|
|
227
|
+
width: Math.max(minWidth, Math.min(size.width || window.size.width, maxWidth)),
|
|
228
|
+
height: Math.max(minHeight, Math.min(size.height || window.size.height, maxHeight))
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
window.size = { ...window.size, ...constrainedSize }
|
|
232
|
+
this.notifyListeners()
|
|
233
|
+
return true
|
|
234
|
+
}
|
|
235
|
+
|
|
213
236
|
/**
|
|
214
237
|
* Get all windows
|
|
215
238
|
*/
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
/* Linux Desktop Theme (GNOME/Ubuntu inspired) */
|
|
2
|
+
|
|
3
|
+
.desktop--linux {
|
|
4
|
+
background: linear-gradient(135deg, #2c001e 0%, #4c2c92 50%, #0e4b99 100%);
|
|
5
|
+
font-family: 'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.desktop--linux .desktop__background {
|
|
9
|
+
background-image:
|
|
10
|
+
radial-gradient(circle at 30% 70%, rgba(233, 84, 32, 0.2) 0%, transparent 50%),
|
|
11
|
+
radial-gradient(circle at 70% 30%, rgba(119, 41, 83, 0.3) 0%, transparent 50%),
|
|
12
|
+
radial-gradient(circle at 50% 50%, rgba(14, 75, 153, 0.2) 0%, transparent 50%);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Linux-style windows (GNOME) */
|
|
16
|
+
.desktop--linux .window {
|
|
17
|
+
border: 1px solid #2d2d2d;
|
|
18
|
+
border-radius: 12px 12px 0 0;
|
|
19
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
|
20
|
+
background: #ffffff;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.desktop--linux .window__header {
|
|
25
|
+
background: linear-gradient(180deg, #f6f5f4 0%, #e6e5e4 100%);
|
|
26
|
+
border-bottom: 1px solid #d0cfce;
|
|
27
|
+
border-radius: 12px 12px 0 0;
|
|
28
|
+
height: 38px;
|
|
29
|
+
padding: 0 16px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.desktop--linux .window__title {
|
|
33
|
+
font-size: 14px;
|
|
34
|
+
font-weight: 500;
|
|
35
|
+
color: #2e3436;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.desktop--linux .window__control {
|
|
39
|
+
width: 24px;
|
|
40
|
+
height: 24px;
|
|
41
|
+
border: none;
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
font-size: 12px;
|
|
44
|
+
color: #2e3436;
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
transition: all 0.2s ease;
|
|
49
|
+
margin-left: 8px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.desktop--linux .window__control--minimize {
|
|
53
|
+
background: #f6d32d;
|
|
54
|
+
border: 1px solid #f5c211;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.desktop--linux .window__control--maximize {
|
|
58
|
+
background: #33d17a;
|
|
59
|
+
border: 1px solid #2ec27e;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.desktop--linux .window__control--close {
|
|
63
|
+
background: #e01b24;
|
|
64
|
+
border: 1px solid #c01c28;
|
|
65
|
+
color: white;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.desktop--linux .window__control:hover {
|
|
69
|
+
transform: scale(1.1);
|
|
70
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.desktop--linux .window__control--minimize::before {
|
|
74
|
+
content: '−';
|
|
75
|
+
font-weight: bold;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.desktop--linux .window__control--maximize::before {
|
|
79
|
+
content: '□';
|
|
80
|
+
font-weight: bold;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.desktop--linux .window__control--close::before {
|
|
84
|
+
content: '×';
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Linux taskbar styling (GNOME Activities) */
|
|
89
|
+
.desktop--linux .desktop-taskbar {
|
|
90
|
+
background: rgba(0, 0, 0, 0.85);
|
|
91
|
+
backdrop-filter: blur(10px);
|
|
92
|
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.desktop--linux .taskbar-button {
|
|
96
|
+
background: rgba(255, 255, 255, 0.08);
|
|
97
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
98
|
+
border-radius: 8px;
|
|
99
|
+
color: #ffffff;
|
|
100
|
+
font-family: 'Ubuntu', sans-serif;
|
|
101
|
+
font-size: 13px;
|
|
102
|
+
font-weight: 400;
|
|
103
|
+
transition: all 0.3s ease;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.desktop--linux .taskbar-button:hover {
|
|
107
|
+
background: rgba(255, 255, 255, 0.15);
|
|
108
|
+
border-color: rgba(255, 255, 255, 0.25);
|
|
109
|
+
transform: translateY(-1px);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.desktop--linux .taskbar-button--active {
|
|
113
|
+
background: rgba(53, 132, 228, 0.3);
|
|
114
|
+
border-color: rgba(53, 132, 228, 0.5);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Linux Application Menu (Activities Overview) */
|
|
118
|
+
.desktop--linux .application-menu {
|
|
119
|
+
background: rgba(36, 31, 49, 0.95);
|
|
120
|
+
backdrop-filter: blur(20px);
|
|
121
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
122
|
+
border-radius: 12px;
|
|
123
|
+
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
|
|
124
|
+
color: #ffffff;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.desktop--linux .application-menu__header {
|
|
128
|
+
background: linear-gradient(180deg, rgba(46, 52, 54, 0.8) 0%, rgba(36, 31, 49, 0.8) 100%);
|
|
129
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
130
|
+
color: #ffffff;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.desktop--linux .application-menu__header h2 {
|
|
134
|
+
color: #ffffff;
|
|
135
|
+
font-family: 'Ubuntu', sans-serif;
|
|
136
|
+
font-weight: 500;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.desktop--linux .application-menu__close {
|
|
140
|
+
color: #ffffff;
|
|
141
|
+
background: rgba(255, 255, 255, 0.1);
|
|
142
|
+
border-radius: 6px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.desktop--linux .application-menu__close:hover {
|
|
146
|
+
background: rgba(224, 27, 36, 0.8);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.desktop--linux .application-menu__search-input {
|
|
150
|
+
background: rgba(255, 255, 255, 0.1);
|
|
151
|
+
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
152
|
+
border-radius: 8px;
|
|
153
|
+
color: #ffffff;
|
|
154
|
+
font-family: 'Ubuntu', sans-serif;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.desktop--linux .application-menu__search-input::placeholder {
|
|
158
|
+
color: rgba(255, 255, 255, 0.6);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.desktop--linux .application-menu__search-input:focus {
|
|
162
|
+
border-color: rgba(53, 132, 228, 0.8);
|
|
163
|
+
background: rgba(255, 255, 255, 0.15);
|
|
164
|
+
outline: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.desktop--linux .application-menu__category {
|
|
168
|
+
background: rgba(255, 255, 255, 0.1);
|
|
169
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
170
|
+
border-radius: 20px;
|
|
171
|
+
color: #ffffff;
|
|
172
|
+
font-family: 'Ubuntu', sans-serif;
|
|
173
|
+
font-size: 13px;
|
|
174
|
+
font-weight: 400;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.desktop--linux .application-menu__category:hover {
|
|
178
|
+
background: rgba(255, 255, 255, 0.2);
|
|
179
|
+
border-color: rgba(255, 255, 255, 0.3);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.desktop--linux .application-menu__category.active {
|
|
183
|
+
background: rgba(53, 132, 228, 0.8);
|
|
184
|
+
border-color: rgba(53, 132, 228, 1);
|
|
185
|
+
color: #ffffff;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.desktop--linux .application-menu__app {
|
|
189
|
+
background: rgba(255, 255, 255, 0.05);
|
|
190
|
+
border: 1px solid transparent;
|
|
191
|
+
border-radius: 12px;
|
|
192
|
+
transition: all 0.2s ease;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.desktop--linux .application-menu__app:hover {
|
|
196
|
+
background: rgba(255, 255, 255, 0.15);
|
|
197
|
+
border-color: rgba(255, 255, 255, 0.2);
|
|
198
|
+
transform: translateY(-2px);
|
|
199
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.desktop--linux .app-name {
|
|
203
|
+
font-family: 'Ubuntu', sans-serif;
|
|
204
|
+
font-size: 13px;
|
|
205
|
+
font-weight: 400;
|
|
206
|
+
color: #ffffff;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.desktop--linux .category-title {
|
|
210
|
+
color: #ffffff;
|
|
211
|
+
font-family: 'Ubuntu', sans-serif;
|
|
212
|
+
font-weight: 500;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* Linux scrollbar */
|
|
216
|
+
.desktop--linux .application-menu__content::-webkit-scrollbar {
|
|
217
|
+
width: 8px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.desktop--linux .application-menu__content::-webkit-scrollbar-track {
|
|
221
|
+
background: rgba(255, 255, 255, 0.1);
|
|
222
|
+
border-radius: 4px;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.desktop--linux .application-menu__content::-webkit-scrollbar-thumb {
|
|
226
|
+
background: rgba(255, 255, 255, 0.3);
|
|
227
|
+
border-radius: 4px;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.desktop--linux .application-menu__content::-webkit-scrollbar-thumb:hover {
|
|
231
|
+
background: rgba(255, 255, 255, 0.5);
|
|
232
|
+
}
|