ywana-core8 0.2.19 → 0.2.21
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 +2833 -714
- package/dist/index.js +433 -111
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +433 -111
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +433 -111
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/desktop/Desktop.stories.jsx +424 -11
- package/src/desktop/{ApplicationMenu.css → LaunchPad.css} +82 -107
- package/src/desktop/{ApplicationMenu.js → LaunchPad.js} +30 -30
- package/src/desktop/WindowContext.js +2 -0
- package/src/desktop/WindowManager.js +54 -0
- package/src/desktop/{desktop-linux.css → desktop-gnome.css} +64 -46
- package/src/desktop/desktop-macintosh.css +330 -0
- package/src/desktop/desktop-macos.css +60 -18
- package/src/desktop/desktop-msx.css +337 -0
- package/src/desktop/desktop-nextstep.css +315 -0
- package/src/desktop/desktop-windows.css +39 -21
- package/src/desktop/desktop-windows98.css +284 -0
- package/src/desktop/desktop-windowsxp.css +294 -0
- package/src/desktop/desktop.css +428 -1
- package/src/desktop/desktop.js +393 -69
- package/src/desktop/index.js +2 -2
- package/src/html/Menu.stories.jsx +504 -0
- package/src/html/menu.css +85 -6
- package/src/html/menu.js +40 -16
@@ -0,0 +1,330 @@
|
|
1
|
+
/* Classic Macintosh Desktop Theme (System 7) */
|
2
|
+
|
3
|
+
.desktop--macintosh {
|
4
|
+
background: #FFFFFF;
|
5
|
+
font-family: 'Chicago', 'Charcoal', 'Geneva', monospace;
|
6
|
+
}
|
7
|
+
|
8
|
+
.desktop--macintosh .desktop__background {
|
9
|
+
background: #FFFFFF;
|
10
|
+
background-image: repeating-linear-gradient(
|
11
|
+
45deg,
|
12
|
+
#FFFFFF 0px,
|
13
|
+
#FFFFFF 2px,
|
14
|
+
#F0F0F0 2px,
|
15
|
+
#F0F0F0 4px
|
16
|
+
);
|
17
|
+
}
|
18
|
+
|
19
|
+
/* Classic Mac-style windows */
|
20
|
+
.desktop--macintosh .window {
|
21
|
+
border: 2px solid #000000;
|
22
|
+
border-radius: 8px 8px 0 0;
|
23
|
+
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
|
24
|
+
background: #FFFFFF;
|
25
|
+
}
|
26
|
+
|
27
|
+
.desktop--macintosh .window__header {
|
28
|
+
background: repeating-linear-gradient(
|
29
|
+
90deg,
|
30
|
+
#000000 0px,
|
31
|
+
#000000 1px,
|
32
|
+
#FFFFFF 1px,
|
33
|
+
#FFFFFF 2px
|
34
|
+
);
|
35
|
+
border-bottom: 2px solid #000000;
|
36
|
+
border-radius: 6px 6px 0 0;
|
37
|
+
height: 20px;
|
38
|
+
padding: 0 6px;
|
39
|
+
}
|
40
|
+
|
41
|
+
.desktop--macintosh .window__title {
|
42
|
+
font-size: 12px;
|
43
|
+
font-weight: bold;
|
44
|
+
color: #000000;
|
45
|
+
text-align: center;
|
46
|
+
background: #FFFFFF;
|
47
|
+
padding: 0 8px;
|
48
|
+
border: 1px solid #000000;
|
49
|
+
margin: 0 auto;
|
50
|
+
}
|
51
|
+
|
52
|
+
.desktop--macintosh .window__controls {
|
53
|
+
order: -1;
|
54
|
+
margin-right: auto;
|
55
|
+
}
|
56
|
+
|
57
|
+
.desktop--macintosh .window__control {
|
58
|
+
width: 14px;
|
59
|
+
height: 14px;
|
60
|
+
border: 1px solid #000000;
|
61
|
+
border-radius: 0;
|
62
|
+
font-size: 9px;
|
63
|
+
font-weight: bold;
|
64
|
+
color: #000000;
|
65
|
+
background: #FFFFFF;
|
66
|
+
display: flex;
|
67
|
+
align-items: center;
|
68
|
+
justify-content: center;
|
69
|
+
transition: none;
|
70
|
+
margin-right: 3px;
|
71
|
+
}
|
72
|
+
|
73
|
+
.desktop--macintosh .window__control:active {
|
74
|
+
background: #000000;
|
75
|
+
color: #FFFFFF;
|
76
|
+
}
|
77
|
+
|
78
|
+
.desktop--macintosh .window__control--close {
|
79
|
+
background: #FFFFFF;
|
80
|
+
}
|
81
|
+
|
82
|
+
.desktop--macintosh .window__control--minimize {
|
83
|
+
display: none; /* Classic Mac didn't have minimize */
|
84
|
+
}
|
85
|
+
|
86
|
+
.desktop--macintosh .window__control--maximize {
|
87
|
+
display: none; /* Classic Mac didn't have maximize */
|
88
|
+
}
|
89
|
+
|
90
|
+
.desktop--macintosh .window__control--close::before {
|
91
|
+
content: '□';
|
92
|
+
font-size: 10px;
|
93
|
+
}
|
94
|
+
|
95
|
+
/* Classic Mac taskbar styling (Menu Bar) */
|
96
|
+
.desktop--macintosh .desktop-taskbar {
|
97
|
+
background: #FFFFFF;
|
98
|
+
border-top: 2px solid #000000;
|
99
|
+
box-shadow: 0 -2px 0 #000000;
|
100
|
+
}
|
101
|
+
|
102
|
+
.desktop--macintosh .desktop-taskbar .icon {
|
103
|
+
color: #000000;
|
104
|
+
}
|
105
|
+
|
106
|
+
.desktop--macintosh .desktop-taskbar .icon:hover {
|
107
|
+
background-color: #000000;
|
108
|
+
color: #FFFFFF;
|
109
|
+
}
|
110
|
+
|
111
|
+
/* Classic Mac taskbar menu styling */
|
112
|
+
.desktop--macintosh .desktop-taskbar .menu-icon > menu {
|
113
|
+
background-color: #FFFFFF;
|
114
|
+
border: 2px solid #000000;
|
115
|
+
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
|
116
|
+
}
|
117
|
+
|
118
|
+
.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item > label {
|
119
|
+
color: #000000;
|
120
|
+
}
|
121
|
+
|
122
|
+
.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item > .icon {
|
123
|
+
color: #000000;
|
124
|
+
}
|
125
|
+
|
126
|
+
.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item:hover {
|
127
|
+
background: #000000;
|
128
|
+
color: #FFFFFF;
|
129
|
+
}
|
130
|
+
|
131
|
+
.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item:hover > label,
|
132
|
+
.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item:hover > .icon {
|
133
|
+
color: #FFFFFF;
|
134
|
+
}
|
135
|
+
|
136
|
+
.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-separator {
|
137
|
+
border-color: #000000;
|
138
|
+
}
|
139
|
+
|
140
|
+
.desktop--macintosh .taskbar-button {
|
141
|
+
background: #FFFFFF;
|
142
|
+
border: 1px solid #000000;
|
143
|
+
border-radius: 0;
|
144
|
+
color: #000000;
|
145
|
+
font-family: 'Chicago', monospace;
|
146
|
+
font-size: 12px;
|
147
|
+
font-weight: bold;
|
148
|
+
transition: none;
|
149
|
+
}
|
150
|
+
|
151
|
+
.desktop--macintosh .taskbar-button:hover {
|
152
|
+
background: #F0F0F0;
|
153
|
+
}
|
154
|
+
|
155
|
+
.desktop--macintosh .taskbar-button:active,
|
156
|
+
.desktop--macintosh .taskbar-button--active {
|
157
|
+
background: #000000;
|
158
|
+
color: #FFFFFF;
|
159
|
+
}
|
160
|
+
|
161
|
+
/* Classic Mac Start Button (Apple Menu) */
|
162
|
+
.desktop--macintosh .toggle-button {
|
163
|
+
position: relative;
|
164
|
+
padding: 2px 8px;
|
165
|
+
display: flex;
|
166
|
+
align-items: center;
|
167
|
+
justify-content: center;
|
168
|
+
gap: 4px;
|
169
|
+
border: 2px solid #000000;
|
170
|
+
outline: none;
|
171
|
+
color: #000000;
|
172
|
+
background: #FFFFFF;
|
173
|
+
min-height: 24px;
|
174
|
+
border-radius: 0;
|
175
|
+
cursor: pointer;
|
176
|
+
font-family: 'Chicago', monospace;
|
177
|
+
font-weight: bold;
|
178
|
+
font-size: 12px;
|
179
|
+
box-shadow: none;
|
180
|
+
}
|
181
|
+
|
182
|
+
.desktop--macintosh .toggle-button:hover:not(.toggle-button--disabled) {
|
183
|
+
background: #F0F0F0;
|
184
|
+
}
|
185
|
+
|
186
|
+
.desktop--macintosh .toggle-button:active,
|
187
|
+
.desktop--macintosh .toggle-button.selected {
|
188
|
+
background: #000000;
|
189
|
+
color: #FFFFFF;
|
190
|
+
}
|
191
|
+
|
192
|
+
.desktop--macintosh .toggle-button:focus {
|
193
|
+
outline: 2px dotted #000000;
|
194
|
+
outline-offset: -4px;
|
195
|
+
}
|
196
|
+
|
197
|
+
/* Classic Mac LaunchPad (Apple Menu) */
|
198
|
+
.desktop--macintosh .launchpad {
|
199
|
+
background: #FFFFFF;
|
200
|
+
border: 2px solid #000000;
|
201
|
+
border-radius: 0;
|
202
|
+
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
|
203
|
+
}
|
204
|
+
|
205
|
+
.desktop--macintosh .launchpad__header {
|
206
|
+
background: repeating-linear-gradient(
|
207
|
+
90deg,
|
208
|
+
#000000 0px,
|
209
|
+
#000000 1px,
|
210
|
+
#FFFFFF 1px,
|
211
|
+
#FFFFFF 2px
|
212
|
+
);
|
213
|
+
border-bottom: 2px solid #000000;
|
214
|
+
color: #000000;
|
215
|
+
}
|
216
|
+
|
217
|
+
.desktop--macintosh .launchpad__header h2 {
|
218
|
+
color: #000000;
|
219
|
+
font-family: 'Chicago', monospace;
|
220
|
+
font-weight: bold;
|
221
|
+
font-size: 14px;
|
222
|
+
background: #FFFFFF;
|
223
|
+
padding: 0 8px;
|
224
|
+
border: 1px solid #000000;
|
225
|
+
display: inline-block;
|
226
|
+
}
|
227
|
+
|
228
|
+
.desktop--macintosh .launchpad__close {
|
229
|
+
color: #000000;
|
230
|
+
background: #FFFFFF;
|
231
|
+
border: 1px solid #000000;
|
232
|
+
border-radius: 0;
|
233
|
+
}
|
234
|
+
|
235
|
+
.desktop--macintosh .launchpad__close:active {
|
236
|
+
background: #000000;
|
237
|
+
color: #FFFFFF;
|
238
|
+
}
|
239
|
+
|
240
|
+
.desktop--macintosh .launchpad__search-input {
|
241
|
+
background: #FFFFFF;
|
242
|
+
border: 2px solid #000000;
|
243
|
+
border-radius: 0;
|
244
|
+
font-family: 'Chicago', monospace;
|
245
|
+
font-size: 12px;
|
246
|
+
}
|
247
|
+
|
248
|
+
.desktop--macintosh .launchpad__sidebar {
|
249
|
+
background: #FFFFFF;
|
250
|
+
border-right: 2px solid #000000;
|
251
|
+
}
|
252
|
+
|
253
|
+
.desktop--macintosh .launchpad__categories {
|
254
|
+
background: #FFFFFF;
|
255
|
+
}
|
256
|
+
|
257
|
+
.desktop--macintosh .launchpad__category {
|
258
|
+
background: #FFFFFF;
|
259
|
+
border: 1px solid #000000;
|
260
|
+
border-radius: 0;
|
261
|
+
color: #000000;
|
262
|
+
font-family: 'Chicago', monospace;
|
263
|
+
font-size: 12px;
|
264
|
+
font-weight: bold;
|
265
|
+
}
|
266
|
+
|
267
|
+
.desktop--macintosh .launchpad__category:hover {
|
268
|
+
background: #F0F0F0;
|
269
|
+
}
|
270
|
+
|
271
|
+
.desktop--macintosh .launchpad__category:active,
|
272
|
+
.desktop--macintosh .launchpad__category.active {
|
273
|
+
background: #000000;
|
274
|
+
color: #FFFFFF;
|
275
|
+
}
|
276
|
+
|
277
|
+
.desktop--macintosh .launchpad__app {
|
278
|
+
background: #FFFFFF;
|
279
|
+
border: 1px solid transparent;
|
280
|
+
border-radius: 0;
|
281
|
+
transition: none;
|
282
|
+
}
|
283
|
+
|
284
|
+
.desktop--macintosh .launchpad__app:hover {
|
285
|
+
background: #000000;
|
286
|
+
color: #FFFFFF;
|
287
|
+
}
|
288
|
+
|
289
|
+
.desktop--macintosh .launchpad__app:hover .app-name {
|
290
|
+
color: #FFFFFF;
|
291
|
+
}
|
292
|
+
|
293
|
+
.desktop--macintosh .app-name {
|
294
|
+
font-family: 'Chicago', monospace;
|
295
|
+
font-size: 12px;
|
296
|
+
font-weight: bold;
|
297
|
+
color: #000000;
|
298
|
+
}
|
299
|
+
|
300
|
+
/* Classic Mac scrollbar */
|
301
|
+
.desktop--macintosh .launchpad__content::-webkit-scrollbar {
|
302
|
+
width: 16px;
|
303
|
+
}
|
304
|
+
|
305
|
+
.desktop--macintosh .launchpad__content::-webkit-scrollbar-track {
|
306
|
+
background: #FFFFFF;
|
307
|
+
border: 1px solid #000000;
|
308
|
+
}
|
309
|
+
|
310
|
+
.desktop--macintosh .launchpad__content::-webkit-scrollbar-thumb {
|
311
|
+
background: repeating-linear-gradient(
|
312
|
+
45deg,
|
313
|
+
#000000 0px,
|
314
|
+
#000000 2px,
|
315
|
+
#FFFFFF 2px,
|
316
|
+
#FFFFFF 4px
|
317
|
+
);
|
318
|
+
border: 1px solid #000000;
|
319
|
+
}
|
320
|
+
|
321
|
+
.desktop--macintosh .launchpad__content::-webkit-scrollbar-button {
|
322
|
+
background: #FFFFFF;
|
323
|
+
border: 1px solid #000000;
|
324
|
+
height: 16px;
|
325
|
+
}
|
326
|
+
|
327
|
+
.desktop--macintosh .launchpad__content::-webkit-scrollbar-button:active {
|
328
|
+
background: #000000;
|
329
|
+
}
|
330
|
+
|
@@ -112,6 +112,39 @@
|
|
112
112
|
border-radius: 16px 16px 0 0;
|
113
113
|
}
|
114
114
|
|
115
|
+
.desktop--macos .desktop-taskbar .icon {
|
116
|
+
color: rgba(0, 0, 0, 0.7);
|
117
|
+
}
|
118
|
+
|
119
|
+
.desktop--macos .desktop-taskbar .icon:hover {
|
120
|
+
color: rgba(0, 0, 0, 0.9);
|
121
|
+
background-color: rgba(0, 0, 0, 0.08);
|
122
|
+
}
|
123
|
+
|
124
|
+
/* macOS taskbar menu styling */
|
125
|
+
.desktop--macos .desktop-taskbar .menu-icon > menu {
|
126
|
+
background-color: rgba(255, 255, 255, 0.95);
|
127
|
+
backdrop-filter: blur(40px);
|
128
|
+
border-color: rgba(0, 0, 0, 0.15);
|
129
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
130
|
+
}
|
131
|
+
|
132
|
+
.desktop--macos .desktop-taskbar .menu-icon > menu .menu-item > label {
|
133
|
+
color: rgba(0, 0, 0, 0.9);
|
134
|
+
}
|
135
|
+
|
136
|
+
.desktop--macos .desktop-taskbar .menu-icon > menu .menu-item > .icon {
|
137
|
+
color: rgba(0, 0, 0, 0.7);
|
138
|
+
}
|
139
|
+
|
140
|
+
.desktop--macos .desktop-taskbar .menu-icon > menu .menu-item:hover {
|
141
|
+
background: rgba(0, 122, 255, 0.15);
|
142
|
+
}
|
143
|
+
|
144
|
+
.desktop--macos .desktop-taskbar .menu-icon > menu .menu-separator {
|
145
|
+
border-color: rgba(0, 0, 0, 0.1);
|
146
|
+
}
|
147
|
+
|
115
148
|
.desktop--macos .taskbar-button {
|
116
149
|
background: rgba(0, 0, 0, 0.05);
|
117
150
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
@@ -194,8 +227,8 @@
|
|
194
227
|
backdrop-filter: none;
|
195
228
|
}
|
196
229
|
|
197
|
-
/* macOS
|
198
|
-
.desktop--macos .
|
230
|
+
/* macOS LaunchPad */
|
231
|
+
.desktop--macos .launchpad {
|
199
232
|
background: rgba(255, 255, 255, 0.9);
|
200
233
|
backdrop-filter: blur(40px);
|
201
234
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
@@ -203,33 +236,33 @@
|
|
203
236
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
204
237
|
}
|
205
238
|
|
206
|
-
.desktop--macos .
|
239
|
+
.desktop--macos .launchpad__header {
|
207
240
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 248, 248, 0.8) 100%);
|
208
241
|
backdrop-filter: blur(20px);
|
209
242
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
210
243
|
border-radius: 20px 20px 0 0;
|
211
244
|
}
|
212
245
|
|
213
|
-
.desktop--macos .
|
246
|
+
.desktop--macos .launchpad__header h2 {
|
214
247
|
color: #1d1d1f;
|
215
248
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
216
249
|
font-weight: 600;
|
217
250
|
font-size: 20px;
|
218
251
|
}
|
219
252
|
|
220
|
-
.desktop--macos .
|
253
|
+
.desktop--macos .launchpad__close {
|
221
254
|
color: #8e8e93;
|
222
255
|
background: rgba(0, 0, 0, 0.05);
|
223
256
|
border-radius: 8px;
|
224
257
|
font-size: 18px;
|
225
258
|
}
|
226
259
|
|
227
|
-
.desktop--macos .
|
260
|
+
.desktop--macos .launchpad__close:hover {
|
228
261
|
background: rgba(255, 95, 87, 0.8);
|
229
262
|
color: white;
|
230
263
|
}
|
231
264
|
|
232
|
-
.desktop--macos .
|
265
|
+
.desktop--macos .launchpad__search-input {
|
233
266
|
background: rgba(0, 0, 0, 0.05);
|
234
267
|
border: 2px solid rgba(0, 0, 0, 0.1);
|
235
268
|
border-radius: 12px;
|
@@ -238,18 +271,27 @@
|
|
238
271
|
font-size: 15px;
|
239
272
|
}
|
240
273
|
|
241
|
-
.desktop--macos .
|
274
|
+
.desktop--macos .launchpad__search-input::placeholder {
|
242
275
|
color: #8e8e93;
|
243
276
|
}
|
244
277
|
|
245
|
-
.desktop--macos .
|
278
|
+
.desktop--macos .launchpad__search-input:focus {
|
246
279
|
border-color: rgba(0, 122, 255, 0.8);
|
247
280
|
background: rgba(255, 255, 255, 0.8);
|
248
281
|
outline: none;
|
249
282
|
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
|
250
283
|
}
|
251
284
|
|
252
|
-
.desktop--macos .
|
285
|
+
.desktop--macos .launchpad__sidebar {
|
286
|
+
background: rgba(248, 248, 248, 0.8);
|
287
|
+
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
288
|
+
}
|
289
|
+
|
290
|
+
.desktop--macos .launchpad__categories {
|
291
|
+
background: rgba(248, 248, 248, 0.8);
|
292
|
+
}
|
293
|
+
|
294
|
+
.desktop--macos .launchpad__category {
|
253
295
|
background: rgba(0, 0, 0, 0.05);
|
254
296
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
255
297
|
border-radius: 20px;
|
@@ -259,18 +301,18 @@
|
|
259
301
|
font-weight: 500;
|
260
302
|
}
|
261
303
|
|
262
|
-
.desktop--macos .
|
304
|
+
.desktop--macos .launchpad__category:hover {
|
263
305
|
background: rgba(0, 0, 0, 0.1);
|
264
306
|
border-color: rgba(0, 0, 0, 0.2);
|
265
307
|
}
|
266
308
|
|
267
|
-
.desktop--macos .
|
309
|
+
.desktop--macos .launchpad__category.active {
|
268
310
|
background: rgba(0, 122, 255, 0.8);
|
269
311
|
border-color: rgba(0, 122, 255, 1);
|
270
312
|
color: white;
|
271
313
|
}
|
272
314
|
|
273
|
-
.desktop--macos .
|
315
|
+
.desktop--macos .launchpad__app {
|
274
316
|
background: rgba(255, 255, 255, 0.6);
|
275
317
|
border: 1px solid transparent;
|
276
318
|
border-radius: 16px;
|
@@ -278,7 +320,7 @@
|
|
278
320
|
backdrop-filter: blur(10px);
|
279
321
|
}
|
280
322
|
|
281
|
-
.desktop--macos .
|
323
|
+
.desktop--macos .launchpad__app:hover {
|
282
324
|
background: rgba(255, 255, 255, 0.8);
|
283
325
|
border-color: rgba(0, 0, 0, 0.1);
|
284
326
|
transform: translateY(-4px) scale(1.05);
|
@@ -299,19 +341,19 @@
|
|
299
341
|
}
|
300
342
|
|
301
343
|
/* macOS scrollbar */
|
302
|
-
.desktop--macos .
|
344
|
+
.desktop--macos .launchpad__content::-webkit-scrollbar {
|
303
345
|
width: 6px;
|
304
346
|
}
|
305
347
|
|
306
|
-
.desktop--macos .
|
348
|
+
.desktop--macos .launchpad__content::-webkit-scrollbar-track {
|
307
349
|
background: transparent;
|
308
350
|
}
|
309
351
|
|
310
|
-
.desktop--macos .
|
352
|
+
.desktop--macos .launchpad__content::-webkit-scrollbar-thumb {
|
311
353
|
background: rgba(0, 0, 0, 0.2);
|
312
354
|
border-radius: 3px;
|
313
355
|
}
|
314
356
|
|
315
|
-
.desktop--macos .
|
357
|
+
.desktop--macos .launchpad__content::-webkit-scrollbar-thumb:hover {
|
316
358
|
background: rgba(0, 0, 0, 0.4);
|
317
359
|
}
|