regular-layout 0.3.0 → 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 +6 -0
  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 +2 -2
  8. package/dist/layout/calculate_intersect.d.ts +1 -1
  9. package/dist/layout/calculate_path.d.ts +1 -1
  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 +2 -2
  13. package/dist/layout/generate_overlay.d.ts +18 -2
  14. package/dist/layout/insert_child.d.ts +1 -1
  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 +37 -9
  21. package/package.json +5 -4
  22. package/src/{layout → core}/constants.ts +2 -2
  23. package/src/{layout → core}/types.ts +7 -0
  24. package/src/extensions.ts +13 -1
  25. package/src/index.ts +3 -1
  26. package/src/layout/calculate_edge.ts +2 -2
  27. package/src/layout/calculate_intersect.ts +5 -2
  28. package/src/layout/calculate_path.ts +1 -1
  29. package/src/layout/calculate_presize_paths.ts +93 -0
  30. package/src/layout/flatten.ts +1 -1
  31. package/src/layout/generate_grid.ts +2 -2
  32. package/src/layout/generate_overlay.ts +48 -16
  33. package/src/layout/insert_child.ts +1 -1
  34. package/src/layout/redistribute_panel_sizes.ts +2 -2
  35. package/src/layout/remove_child.ts +2 -2
  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 +2 -2
  39. package/src/regular-layout-tab.ts +1 -1
  40. package/src/regular-layout.ts +166 -131
  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/fluxbox.css CHANGED
@@ -11,100 +11,104 @@
11
11
  */
12
12
 
13
13
  regular-layout.fluxbox {
14
- background-color: #DBDFE6;
15
- font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
16
- padding: 16px;
14
+ background-color: #dbdfe6;
15
+ font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
16
+ padding: 16px;
17
17
  }
18
18
 
19
19
  /* Frame */
20
20
  regular-layout.fluxbox regular-layout-frame {
21
- position: relative;
22
- box-sizing: border-box;
23
- margin: 8px;
24
- background: #FFFFFF;
25
- border: 1px solid #9DACBE;
26
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
21
+ position: relative;
22
+ box-sizing: border-box;
23
+ margin: 8px;
24
+ background: #ffffff;
25
+ border: 1px solid #9dacbe;
26
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
27
+ }
28
+
29
+ regular-layout.fluxbox regular-layout-frame::part(container) {
30
+ padding: 6px;
27
31
  }
28
32
 
29
33
  regular-layout.fluxbox regular-layout-frame::part(close) {
30
- border: 1px solid #8A96A3;
31
- height: 14px;
32
- background: linear-gradient(to bottom, #E8ECEF 0%, #CDD5DD 100%);
33
- align-self: center;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- padding: 0px;
38
- width: 14px;
39
- margin-right: 2px;
34
+ border: 1px solid #8a96a3;
35
+ height: 14px;
36
+ background: linear-gradient(to bottom, #e8ecef 0%, #cdd5dd 100%);
37
+ align-self: center;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ padding: 0px;
42
+ width: 14px;
43
+ margin-right: 2px;
40
44
  }
41
45
 
42
46
  regular-layout.fluxbox regular-layout-frame::part(close):hover {
43
- background: linear-gradient(to bottom, #F0F3F5 0%, #D8DFE6 100%);
47
+ background: linear-gradient(to bottom, #f0f3f5 0%, #d8dfe6 100%);
44
48
  }
45
49
 
46
50
  regular-layout.fluxbox regular-layout-frame::part(close):active {
47
- background: linear-gradient(to bottom, #C5CFD9 0%, #B3BEC9 100%);
51
+ background: linear-gradient(to bottom, #c5cfd9 0%, #b3bec9 100%);
48
52
  }
49
53
 
50
54
  regular-layout.fluxbox regular-layout-frame::part(close):before {
51
- content: "×";
52
- font-size: 14px;
53
- font-weight: normal;
54
- color: #444444;
55
- line-height: 1;
55
+ content: "×";
56
+ font-size: 14px;
57
+ font-weight: normal;
58
+ color: #444444;
59
+ line-height: 1;
56
60
  }
57
61
 
58
62
  regular-layout.fluxbox regular-layout-frame::part(titlebar) {
59
- display: flex;
60
- align-items: stretch;
61
- padding-right: 0px;
62
- height: 22px;
63
+ display: flex;
64
+ align-items: stretch;
65
+ padding-right: 0px;
66
+ height: 22px;
63
67
  }
64
68
 
65
69
  regular-layout.fluxbox regular-layout-frame::part(tab) {
66
- display: flex;
67
- flex: 1 1 150px;
68
- align-items: center;
69
- padding: 0 8px;
70
- cursor: pointer;
71
- text-overflow: ellipsis;
72
- background: linear-gradient(to bottom, #C7D1DB 0%, #B3BEC9 100%);
73
- color: #4A4A4A;
74
- font-size: 11px;
75
- font-weight: normal;
76
- border-right: 1px solid #9DACBE;
77
- opacity: 0.85;
70
+ display: flex;
71
+ flex: 1 1 150px;
72
+ align-items: center;
73
+ padding: 0 8px;
74
+ cursor: pointer;
75
+ text-overflow: ellipsis;
76
+ background: linear-gradient(to bottom, #c7d1db 0%, #b3bec9 100%);
77
+ color: #4a4a4a;
78
+ font-size: 11px;
79
+ font-weight: normal;
80
+ border-right: 1px solid #9dacbe;
81
+ opacity: 0.85;
78
82
  }
79
83
 
80
84
  regular-layout.fluxbox regular-layout-frame::part(tab):hover {
81
- background: linear-gradient(to bottom, #D2DBE4 0%, #BEC9D4 100%);
85
+ background: linear-gradient(to bottom, #d2dbe4 0%, #bec9d4 100%);
82
86
  }
83
87
 
84
88
  regular-layout.fluxbox regular-layout-frame::part(active-tab) {
85
- background: linear-gradient(to bottom, #E0E7EF 0%, #D1DAE3 100%);
86
- color: #1A1A1A;
87
- opacity: 1;
88
- font-weight: 500;
89
+ background: linear-gradient(to bottom, #e0e7ef 0%, #d1dae3 100%);
90
+ color: #1a1a1a;
91
+ opacity: 1;
92
+ font-weight: 500;
89
93
  }
90
94
 
91
- regular-layout.fluxbox:has(.overlay)>* {
92
- opacity: 0.7;
95
+ regular-layout.fluxbox:has(.overlay) > * {
96
+ opacity: 0.7;
93
97
  }
94
98
 
95
- regular-layout.fluxbox:has(.overlay)>.overlay {
96
- opacity: 1;
99
+ regular-layout.fluxbox:has(.overlay) > .overlay {
100
+ opacity: 1;
97
101
  }
98
102
 
99
103
  /* Frame in Overlay Mode */
100
104
  regular-layout.fluxbox regular-layout-frame.overlay {
101
- margin: 0;
102
- background-color: rgba(155, 172, 190, 0.25);
103
- border: 1px solid #6B7C8F;
104
- box-shadow: none;
105
- transition:
106
- top 0.1s ease-in-out,
107
- height 0.1s ease-in-out,
108
- width 0.1s ease-in-out,
109
- left 0.1s ease-in-out;
105
+ margin: 0;
106
+ background-color: rgba(155, 172, 190, 0.25);
107
+ border: 1px solid #6b7c8f;
108
+ box-shadow: none;
109
+ transition:
110
+ top 0.1s ease-in-out,
111
+ height 0.1s ease-in-out,
112
+ width 0.1s ease-in-out,
113
+ left 0.1s ease-in-out;
110
114
  }
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
  }