regular-layout 0.2.2 → 0.4.0

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.
Files changed (47) hide show
  1. package/README.md +110 -22
  2. package/dist/{layout → core}/types.d.ts +14 -4
  3. package/dist/extensions.d.ts +6 -1
  4. package/dist/index.d.ts +2 -1
  5. package/dist/index.js +7 -7
  6. package/dist/index.js.map +4 -4
  7. package/dist/layout/calculate_edge.d.ts +4 -4
  8. package/dist/layout/calculate_intersect.d.ts +1 -1
  9. package/dist/layout/calculate_path.d.ts +12 -0
  10. package/dist/layout/calculate_presize_paths.d.ts +10 -0
  11. package/dist/layout/flatten.d.ts +1 -1
  12. package/dist/layout/generate_grid.d.ts +5 -5
  13. package/dist/layout/generate_overlay.d.ts +18 -2
  14. package/dist/layout/insert_child.d.ts +2 -2
  15. package/dist/layout/redistribute_panel_sizes.d.ts +2 -2
  16. package/dist/layout/remove_child.d.ts +1 -1
  17. package/dist/model/overlay_controller.d.ts +34 -0
  18. package/dist/model/presize_queue.d.ts +17 -0
  19. package/dist/regular-layout-tab.d.ts +1 -1
  20. package/dist/regular-layout.d.ts +44 -9
  21. package/package.json +5 -4
  22. package/src/{layout → core}/constants.ts +2 -2
  23. package/src/{layout → core}/types.ts +17 -5
  24. package/src/extensions.ts +13 -1
  25. package/src/index.ts +3 -1
  26. package/src/layout/calculate_edge.ts +17 -8
  27. package/src/layout/calculate_intersect.ts +13 -4
  28. package/src/layout/calculate_path.ts +53 -0
  29. package/src/layout/calculate_presize_paths.ts +93 -0
  30. package/src/layout/flatten.ts +4 -4
  31. package/src/layout/generate_grid.ts +8 -8
  32. package/src/layout/generate_overlay.ts +48 -16
  33. package/src/layout/insert_child.ts +16 -16
  34. package/src/layout/redistribute_panel_sizes.ts +5 -5
  35. package/src/layout/remove_child.ts +6 -6
  36. package/src/model/overlay_controller.ts +162 -0
  37. package/src/model/presize_queue.ts +79 -0
  38. package/src/regular-layout-frame.ts +3 -3
  39. package/src/regular-layout-tab.ts +1 -1
  40. package/src/regular-layout.ts +180 -133
  41. package/themes/borland.css +103 -0
  42. package/themes/chicago.css +55 -49
  43. package/themes/fluxbox.css +64 -60
  44. package/themes/gibson.css +174 -164
  45. package/themes/hotdog.css +53 -47
  46. package/themes/lorax.css +82 -75
  47. /package/dist/{layout → core}/constants.d.ts +0 -0
package/themes/gibson.css CHANGED
@@ -11,254 +11,264 @@
11
11
  */
12
12
 
13
13
  regular-layout.gibson {
14
- background: radial-gradient(ellipse at center, #0a0a1a 0%, #000000 100%);
15
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
16
- padding: 8px;
14
+ background: radial-gradient(ellipse at center, #0a0a1a 0%, #000000 100%);
15
+ font-family:
16
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
17
+ "Liberation Mono", monospace;
18
+ padding: 8px;
17
19
  }
18
20
 
19
21
  /* Frame */
20
22
  regular-layout.gibson regular-layout-frame {
21
- --titlebar-height: 28px;
22
- position: relative;
23
- box-sizing: border-box;
24
- margin: 8px;
25
- background: rgba(10, 10, 26, 0.85);
26
- backdrop-filter: blur(4px);
23
+ --titlebar-height: 28px;
24
+ position: relative;
25
+ box-sizing: border-box;
26
+ margin: 8px;
27
+ background: rgba(10, 10, 26, 0.85);
28
+ backdrop-filter: blur(4px);
29
+ color: white;
30
+ text-shadow:
31
+ 0 0 5px #fff,
32
+ 0 0 10px #fff,
33
+ 0 0 20px #fff;
34
+ }
35
+
36
+ regular-layout.gibson regular-layout-frame::part(container) {
37
+ padding: 6px;
27
38
  }
28
39
 
29
40
  regular-layout.gibson regular-layout-frame::part(active-close) {
30
- border: 1px solid #ff00ff;
31
- height: 18px;
32
- width: 18px;
33
- background: rgba(255, 0, 255, 0.1);
34
- align-self: center;
35
- /* biome-ignore lint/complexity/noImportantStyles: reasons */
36
- display: flex !important;
37
- align-items: center;
38
- justify-content: center;
39
- margin-right: 1px;
40
- box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
41
- transition: all 0.1s ease;
41
+ border: 1px solid #ff00ff;
42
+ height: 18px;
43
+ width: 18px;
44
+ background: rgba(255, 0, 255, 0.1);
45
+ align-self: center;
46
+ /* biome-ignore lint/complexity/noImportantStyles: reasons */
47
+ display: flex !important;
48
+ align-items: center;
49
+ justify-content: center;
50
+ margin-right: 1px;
51
+ box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
52
+ transition: all 0.1s ease;
42
53
  }
43
54
 
44
55
  regular-layout.gibson regular-layout-frame::part(active-close):hover {
45
- background: rgba(255, 0, 255, 0.3);
46
- box-shadow: 0 0 12px rgba(255, 0, 255, 0.8);
56
+ background: rgba(255, 0, 255, 0.3);
57
+ box-shadow: 0 0 12px rgba(255, 0, 255, 0.8);
47
58
  }
48
59
 
49
60
  regular-layout.gibson regular-layout-frame::part(active-close):before {
50
- content: "×";
51
- font-size: 14px;
52
- font-weight: bold;
53
- color: #ff00ff;
54
- text-shadow: 0 0 4px rgba(255, 0, 255, 0.8);
61
+ content: "×";
62
+ font-size: 14px;
63
+ font-weight: bold;
64
+ color: #ff00ff;
65
+ text-shadow: 0 0 4px rgba(255, 0, 255, 0.8);
55
66
  }
56
67
 
57
68
  regular-layout.gibson regular-layout-frame::part(close) {
58
- display: none;
69
+ display: none;
59
70
  }
60
71
 
61
-
62
72
  regular-layout.gibson regular-layout-frame::part(titlebar) {
63
- display: flex;
64
- justify-content: flex-end;
65
- align-items: stretch;
66
- padding-left: 12px;
67
- height: 32px;
73
+ display: flex;
74
+ justify-content: flex-end;
75
+ align-items: stretch;
76
+ padding-left: 12px;
77
+ height: 32px;
68
78
 
69
- /* border-bottom: 1px solid rgba(0, 255, 255, 0.3); */
79
+ /* border-bottom: 1px solid rgba(0, 255, 255, 0.3); */
70
80
  }
71
81
 
72
82
  regular-layout.gibson regular-layout-frame::part(tab) {
73
- display: flex;
74
- flex: 1 1 150px;
75
- max-width: 200px;
76
- align-items: center;
77
- padding: 0 5px 0 12px;
78
- cursor: pointer;
79
- text-overflow: ellipsis;
80
- background: rgba(255, 0, 255, 0.1);
81
- color: #00ffff;
82
- font-size: 11px;
83
- font-weight: 500;
84
- letter-spacing: 0.5px;
85
- text-transform: uppercase;
86
- /* border-right: 1px solid rgba(0, 255, 255, 0.2); */
87
- opacity: 0.6;
88
- transition: all 0.2s ease;
89
- text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
83
+ display: flex;
84
+ flex: 1 1 150px;
85
+ max-width: 200px;
86
+ align-items: center;
87
+ padding: 0 5px 0 12px;
88
+ cursor: pointer;
89
+ text-overflow: ellipsis;
90
+ background: rgba(255, 0, 255, 0.1);
91
+ color: #00ffff;
92
+ font-size: 11px;
93
+ font-weight: 500;
94
+ letter-spacing: 0.5px;
95
+ text-transform: uppercase;
96
+ /* border-right: 1px solid rgba(0, 255, 255, 0.2); */
97
+ opacity: 0.6;
98
+ transition: all 0.2s ease;
99
+ text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
90
100
  }
91
101
 
92
102
  regular-layout.gibson regular-layout-frame::part(tab):hover {
93
- box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.9);
103
+ box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.9);
94
104
  }
95
105
 
96
106
  regular-layout.gibson regular-layout-frame::part(active-tab) {
97
- background: rgba(0, 255, 255, 0.15);
98
- opacity: 1;
99
- border: 2px solid #00ffff;
100
- border-bottom-width: 1px;
101
- box-shadow:
102
- inset 0 0 12px rgba(0, 255, 255, 0.3),
103
- 0 0 8px rgba(0, 255, 255, 0.4);
107
+ background: rgba(0, 255, 255, 0.15);
108
+ opacity: 1;
109
+ border: 2px solid #00ffff;
110
+ border-bottom-width: 1px;
111
+ box-shadow:
112
+ inset 0 0 12px rgba(0, 255, 255, 0.3),
113
+ 0 0 8px rgba(0, 255, 255, 0.4);
104
114
  }
105
115
 
106
116
  regular-layout.gibson:has(.overlay) > * {
107
- opacity: 0.5;
117
+ opacity: 0.5;
108
118
  }
109
119
 
110
120
  regular-layout.gibson:has(.overlay) > .overlay {
111
- opacity: 1;
121
+ opacity: 1;
112
122
  }
113
123
 
114
124
  /* Frame in Overlay Mode */
115
125
  regular-layout.gibson regular-layout-frame.overlay {
116
- background: rgba(255, 0, 255, 0.1);
117
- border: 1px dashed #ff00ff;
118
- border-radius: 12px;
119
- box-shadow:
120
- 0 0 15px rgba(255, 0, 255, 0.6),
121
- inset 0 0 20px rgba(255, 0, 255, 0.2);
122
- margin: 0;
123
- transition:
124
- top 0.075s ease-out,
125
- height 0.075s ease-out,
126
- width 0.075s ease-out,
127
- left 0.075s ease-out;
126
+ background: rgba(255, 0, 255, 0.1);
127
+ border: 1px dashed #ff00ff;
128
+ border-radius: 12px;
129
+ box-shadow:
130
+ 0 0 15px rgba(255, 0, 255, 0.6),
131
+ inset 0 0 20px rgba(255, 0, 255, 0.2);
132
+ margin: 0;
133
+ transition:
134
+ top 0.075s ease-out,
135
+ height 0.075s ease-out,
136
+ width 0.075s ease-out,
137
+ left 0.075s ease-out;
128
138
  }
129
139
 
130
140
  regular-layout.gibson regular-layout-frame::part(container) {
131
- display: none;
132
- border: 1px solid #00ffff;
133
- border-radius: 12px 0 12px 0;
141
+ display: none;
142
+ border: 1px solid #00ffff;
143
+ border-radius: 12px 0 12px 0;
134
144
  }
135
145
 
136
146
  regular-layout.gibson regular-layout-frame::part(titlebar) {
137
- display: none;
147
+ display: none;
138
148
  }
139
149
 
140
150
  regular-layout.gibson regular-layout-frame:not(.overlay)::part(container),
141
151
  regular-layout.gibson regular-layout-frame:not(.overlay)::part(titlebar) {
142
- display: flex;
152
+ display: flex;
143
153
  }
144
154
 
145
155
  /* Cyberpunk color variations */
146
- regular-layout.gibson :nth-child(6n+1)::part(container) {
147
- border-color: #00ffff;
148
- box-shadow:
149
- 0 0 10px rgba(0, 255, 255, 0.75),
150
- inset 0 0 20px rgba(0, 255, 255, 0.1);
156
+ regular-layout.gibson :nth-child(6n + 1)::part(container) {
157
+ border-color: #00ffff;
158
+ box-shadow:
159
+ 0 0 10px rgba(0, 255, 255, 0.75),
160
+ inset 0 0 20px rgba(0, 255, 255, 0.1);
151
161
  }
152
162
 
153
- regular-layout.gibson :nth-child(6n+1)::part(tab) {
154
- color: #00ffff;
155
- text-shadow: 0 0 4px rgba(0, 255, 255, 0.6);
163
+ regular-layout.gibson :nth-child(6n + 1)::part(tab) {
164
+ color: #00ffff;
165
+ text-shadow: 0 0 4px rgba(0, 255, 255, 0.6);
156
166
  }
157
167
 
158
- regular-layout.gibson :nth-child(6n+1)::part(active-tab) {
159
- background: #00ffff44;
160
- border-color: #00ffff;
161
- box-shadow:
162
- inset 0 0 12px rgba(0, 255, 255, 0.3),
163
- 0 0 8px rgba(0, 255, 255, 0.4);
168
+ regular-layout.gibson :nth-child(6n + 1)::part(active-tab) {
169
+ background: #00ffff44;
170
+ border-color: #00ffff;
171
+ box-shadow:
172
+ inset 0 0 12px rgba(0, 255, 255, 0.3),
173
+ 0 0 8px rgba(0, 255, 255, 0.4);
164
174
  }
165
175
 
166
- regular-layout.gibson :nth-child(6n+2)::part(container) {
167
- border-color: #ff00ff;
168
- box-shadow:
169
- 0 0 10px rgba(255, 0, 255, 0.75),
170
- inset 0 0 20px rgba(255, 0, 255, 0.1);
176
+ regular-layout.gibson :nth-child(6n + 2)::part(container) {
177
+ border-color: #ff00ff;
178
+ box-shadow:
179
+ 0 0 10px rgba(255, 0, 255, 0.75),
180
+ inset 0 0 20px rgba(255, 0, 255, 0.1);
171
181
  }
172
182
 
173
- regular-layout.gibson :nth-child(6n+2)::part(tab) {
174
- color: #ff00ff;
175
- text-shadow: 0 0 4px rgba(255, 0, 255, 0.6);
183
+ regular-layout.gibson :nth-child(6n + 2)::part(tab) {
184
+ color: #ff00ff;
185
+ text-shadow: 0 0 4px rgba(255, 0, 255, 0.6);
176
186
  }
177
187
 
178
- regular-layout.gibson :nth-child(6n+2)::part(active-tab) {
179
- background: #ff00ff44;
180
- border-color: #ff00ff;
181
- box-shadow:
182
- inset 0 0 12px rgba(255, 0, 255, 0.3),
183
- 0 0 8px rgba(255, 0, 255, 0.4);
188
+ regular-layout.gibson :nth-child(6n + 2)::part(active-tab) {
189
+ background: #ff00ff44;
190
+ border-color: #ff00ff;
191
+ box-shadow:
192
+ inset 0 0 12px rgba(255, 0, 255, 0.3),
193
+ 0 0 8px rgba(255, 0, 255, 0.4);
184
194
  }
185
195
 
186
- regular-layout.gibson :nth-child(6n+3)::part(container) {
187
- border-color: #00ff00;
188
- box-shadow:
189
- 0 0 10px rgba(0, 255, 0, 0.75),
190
- inset 0 0 20px rgba(0, 255, 0, 0.1);
196
+ regular-layout.gibson :nth-child(6n + 3)::part(container) {
197
+ border-color: #00ff00;
198
+ box-shadow:
199
+ 0 0 10px rgba(0, 255, 0, 0.75),
200
+ inset 0 0 20px rgba(0, 255, 0, 0.1);
191
201
  }
192
202
 
193
- regular-layout.gibson :nth-child(6n+3)::part(tab) {
194
- color: #00ff00;
195
- text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
203
+ regular-layout.gibson :nth-child(6n + 3)::part(tab) {
204
+ color: #00ff00;
205
+ text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
196
206
  }
197
207
 
198
- regular-layout.gibson :nth-child(6n+3)::part(active-tab) {
199
- background: #00ff0044;
200
- border-color: #00ff00;
201
- box-shadow:
202
- inset 0 0 12px rgba(0, 255, 0, 0.3),
203
- 0 0 8px rgba(0, 255, 0, 0.4);
208
+ regular-layout.gibson :nth-child(6n + 3)::part(active-tab) {
209
+ background: #00ff0044;
210
+ border-color: #00ff00;
211
+ box-shadow:
212
+ inset 0 0 12px rgba(0, 255, 0, 0.3),
213
+ 0 0 8px rgba(0, 255, 0, 0.4);
204
214
  }
205
215
 
206
- regular-layout.gibson :nth-child(6n+4)::part(container) {
207
- border-color: #ff0080;
208
- box-shadow:
209
- 0 0 10px rgba(255, 0, 128, 0.75),
210
- inset 0 0 20px rgba(255, 0, 128, 0.1);
216
+ regular-layout.gibson :nth-child(6n + 4)::part(container) {
217
+ border-color: #ff0080;
218
+ box-shadow:
219
+ 0 0 10px rgba(255, 0, 128, 0.75),
220
+ inset 0 0 20px rgba(255, 0, 128, 0.1);
211
221
  }
212
222
 
213
- regular-layout.gibson :nth-child(6n+4)::part(tab) {
214
- color: #ff0080;
215
- text-shadow: 0 0 4px rgba(255, 0, 128, 0.6);
223
+ regular-layout.gibson :nth-child(6n + 4)::part(tab) {
224
+ color: #ff0080;
225
+ text-shadow: 0 0 4px rgba(255, 0, 128, 0.6);
216
226
  }
217
227
 
218
- regular-layout.gibson :nth-child(6n+4)::part(active-tab) {
219
- background: #ff008044;
220
- border-color: #ff0080;
221
- box-shadow:
222
- inset 0 0 12px rgba(255, 0, 128, 0.3),
223
- 0 0 8px rgba(255, 0, 128, 0.4);
228
+ regular-layout.gibson :nth-child(6n + 4)::part(active-tab) {
229
+ background: #ff008044;
230
+ border-color: #ff0080;
231
+ box-shadow:
232
+ inset 0 0 12px rgba(255, 0, 128, 0.3),
233
+ 0 0 8px rgba(255, 0, 128, 0.4);
224
234
  }
225
235
 
226
- regular-layout.gibson :nth-child(6n+5)::part(container) {
227
- border-color: #8000ff;
228
- box-shadow:
229
- 0 0 10px rgba(128, 0, 255, 0.75),
230
- inset 0 0 20px rgba(128, 0, 255, 0.1);
236
+ regular-layout.gibson :nth-child(6n + 5)::part(container) {
237
+ border-color: #8000ff;
238
+ box-shadow:
239
+ 0 0 10px rgba(128, 0, 255, 0.75),
240
+ inset 0 0 20px rgba(128, 0, 255, 0.1);
231
241
  }
232
242
 
233
- regular-layout.gibson :nth-child(6n+5)::part(tab) {
234
- color: #8000ff;
235
- text-shadow: 0 0 4px rgba(128, 0, 255, 0.6);
243
+ regular-layout.gibson :nth-child(6n + 5)::part(tab) {
244
+ color: #8000ff;
245
+ text-shadow: 0 0 4px rgba(128, 0, 255, 0.6);
236
246
  }
237
247
 
238
- regular-layout.gibson :nth-child(6n+5)::part(active-tab) {
239
- background: #8000ff44;
240
- border-color: #8000ff;
241
- box-shadow:
242
- inset 0 0 12px rgba(128, 0, 255, 0.3),
243
- 0 0 8px rgba(128, 0, 255, 0.4);
248
+ regular-layout.gibson :nth-child(6n + 5)::part(active-tab) {
249
+ background: #8000ff44;
250
+ border-color: #8000ff;
251
+ box-shadow:
252
+ inset 0 0 12px rgba(128, 0, 255, 0.3),
253
+ 0 0 8px rgba(128, 0, 255, 0.4);
244
254
  }
245
255
 
246
- regular-layout.gibson :nth-child(6n+6)::part(container) {
247
- border-color: #ffff00;
248
- box-shadow:
249
- 0 0 10px rgba(255, 255, 0, 0.75),
250
- inset 0 0 20px rgba(255, 255, 0, 0.1);
256
+ regular-layout.gibson :nth-child(6n + 6)::part(container) {
257
+ border-color: #ffff00;
258
+ box-shadow:
259
+ 0 0 10px rgba(255, 255, 0, 0.75),
260
+ inset 0 0 20px rgba(255, 255, 0, 0.1);
251
261
  }
252
262
 
253
- regular-layout.gibson :nth-child(6n+6)::part(tab) {
254
- color: #ffff00;
255
- text-shadow: 0 0 4px rgba(255, 255, 0, 0.6);
263
+ regular-layout.gibson :nth-child(6n + 6)::part(tab) {
264
+ color: #ffff00;
265
+ text-shadow: 0 0 4px rgba(255, 255, 0, 0.6);
256
266
  }
257
267
 
258
- regular-layout.gibson :nth-child(6n+6)::part(active-tab) {
259
- background: #ffff0044;
260
- border-color: #ffff00;
261
- box-shadow:
262
- inset 0 0 12px rgba(255, 255, 0, 0.3),
263
- 0 0 8px rgba(255, 255, 0, 0.4);
268
+ regular-layout.gibson :nth-child(6n + 6)::part(active-tab) {
269
+ background: #ffff0044;
270
+ border-color: #ffff00;
271
+ box-shadow:
272
+ inset 0 0 12px rgba(255, 255, 0, 0.3),
273
+ 0 0 8px rgba(255, 255, 0, 0.4);
264
274
  }
package/themes/hotdog.css CHANGED
@@ -11,78 +11,84 @@
11
11
  */
12
12
 
13
13
  regular-layout.hotdog {
14
- background-color: #FF0000;
15
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
16
- padding: 24px;
14
+ background-color: #ff0000;
15
+ font-family:
16
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
17
+ "Liberation Mono", monospace;
18
+ padding: 24px;
17
19
  }
18
20
 
19
21
  /* Frame */
20
22
  regular-layout.hotdog regular-layout-frame {
21
- margin: 12px;
22
- background: #FFFF00;
23
- border-width: 2px;
24
- border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
25
- border-style: solid;
23
+ margin: 12px;
24
+ background: #ffff00;
25
+ border-width: 2px;
26
+ border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
27
+ border-style: solid;
28
+ }
29
+
30
+ regular-layout.hotdog regular-layout-frame::part(container) {
31
+ padding: 6px;
26
32
  }
27
33
 
28
34
  regular-layout.hotdog regular-layout-frame::part(close) {
29
- border-width: 1px;
30
- border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
31
- border-style: solid;
32
- height: 16px;
33
- background: #FF0000;
34
- align-self: center;
35
- display: flex;
36
- align-items: center;
37
- padding: 0px 4px;
38
- color: #FFFF00;
35
+ border-width: 1px;
36
+ border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
37
+ border-style: solid;
38
+ height: 16px;
39
+ background: #ff0000;
40
+ align-self: center;
41
+ display: flex;
42
+ align-items: center;
43
+ padding: 0px 4px;
44
+ color: #ffff00;
39
45
  }
40
46
 
41
47
  regular-layout.hotdog regular-layout-frame::part(close):before {
42
- content: "X";
43
- font-size: 10px;
44
- font-weight: bold;
48
+ content: "X";
49
+ font-size: 10px;
50
+ font-weight: bold;
45
51
  }
46
52
 
47
53
  regular-layout.hotdog regular-layout-frame::part(titlebar) {
48
- display: flex;
49
- align-items: stretch;
50
- padding-right: 0px;
54
+ display: flex;
55
+ align-items: stretch;
56
+ padding-right: 0px;
51
57
  }
52
58
 
53
59
  regular-layout.hotdog regular-layout-frame::part(tab) {
54
- display: flex;
55
- flex: 1 1 150px;
56
- align-items: center;
57
- padding: 0 3px 0 8px;
58
- cursor: pointer;
59
- text-overflow: ellipsis;
60
- background: #CC0000;
61
- color: #FFFF00;
62
- font-family: "Tahoma", "Arial", sans-serif;
63
- font-weight: bold;
64
- font-size: 11px;
60
+ display: flex;
61
+ flex: 1 1 150px;
62
+ align-items: center;
63
+ padding: 0 3px 0 8px;
64
+ cursor: pointer;
65
+ text-overflow: ellipsis;
66
+ background: #cc0000;
67
+ color: #ffff00;
68
+ font-family: "Tahoma", "Arial", sans-serif;
69
+ font-weight: bold;
70
+ font-size: 11px;
65
71
  }
66
72
 
67
73
  regular-layout.hotdog regular-layout-frame::part(active-tab) {
68
- background: #FF0000;
69
- opacity: 1;
74
+ background: #ff0000;
75
+ opacity: 1;
70
76
  }
71
77
 
72
- regular-layout.hotdog:has(.overlay)>* {
73
- opacity: 0.8;
78
+ regular-layout.hotdog:has(.overlay) > * {
79
+ opacity: 0.8;
74
80
  }
75
81
 
76
- regular-layout.hotdog:has(.overlay)>.overlay {
77
- opacity: 1;
82
+ regular-layout.hotdog:has(.overlay) > .overlay {
83
+ opacity: 1;
78
84
  }
79
85
 
80
86
  /* Frame in Overlay Mode */
81
87
  regular-layout.hotdog regular-layout-frame.overlay {
82
- margin: 0;
83
- transition:
84
- top 0.1s ease-in-out,
85
- height 0.1s ease-in-out,
86
- width 0.1s ease-in-out,
87
- left 0.1s ease-in-out;
88
+ margin: 0;
89
+ transition:
90
+ top 0.1s ease-in-out,
91
+ height 0.1s ease-in-out,
92
+ width 0.1s ease-in-out,
93
+ left 0.1s ease-in-out;
88
94
  }