regular-layout 0.5.0 → 0.6.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.
- package/dist/index.js +19 -17
- package/dist/index.js.map +3 -3
- package/dist/regular-layout-frame.d.ts +12 -10
- package/package.json +1 -1
- package/src/layout/generate_grid.ts +39 -13
- package/src/layout/generate_overlay.ts +1 -1
- package/src/regular-layout-frame.ts +58 -56
- package/themes/borland.css +6 -4
- package/themes/chicago.css +12 -4
- package/themes/fluxbox.css +6 -3
- package/themes/gibson.css +8 -22
- package/themes/hotdog.css +13 -4
- package/themes/lorax.css +40 -43
package/themes/lorax.css
CHANGED
|
@@ -10,50 +10,62 @@
|
|
|
10
10
|
* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
/*
|
|
14
|
+
* In the own-tab model, the frames of a stack overlap in one cell: each frame
|
|
15
|
+
* renders only its own tab (the engine tiles them into the shared titlebar) and
|
|
16
|
+
* only the selected frame shows its content. So this theme styles appearance,
|
|
17
|
+
* not layout - panel chrome lives on `::part(container)` (shown only for the
|
|
18
|
+
* selected frame) rather than the overlapping frame box, and the titlebar strip
|
|
19
|
+
* is transparent so every stacked frame's tab shows through.
|
|
20
|
+
*/
|
|
21
|
+
|
|
13
22
|
regular-layout.lorax {
|
|
14
23
|
font-family:
|
|
15
24
|
"ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
|
|
16
25
|
"Liberation Mono", monospace;
|
|
17
26
|
}
|
|
18
27
|
|
|
19
|
-
/* Frame */
|
|
20
28
|
regular-layout.lorax regular-layout-frame {
|
|
21
|
-
|
|
22
|
-
margin-top: 27px;
|
|
23
|
-
border-radius: 0 6px 6px 6px;
|
|
24
|
-
border: 1px solid #666;
|
|
25
|
-
box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
|
|
29
|
+
--rl-tab-width: 200px;
|
|
26
30
|
}
|
|
27
31
|
|
|
32
|
+
/* Panel content chrome (only the selected frame's container is rendered). */
|
|
28
33
|
regular-layout.lorax regular-layout-frame::part(container) {
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
margin: 0 3px 3px 3px;
|
|
29
36
|
padding: 6px;
|
|
37
|
+
/* Square top so the tab strip sits flush; rounded bottom. */
|
|
38
|
+
border-radius: 0 6px 6px 6px;
|
|
39
|
+
border: 1px solid #666;
|
|
40
|
+
box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
|
|
30
41
|
}
|
|
31
42
|
|
|
43
|
+
/* Transparent strip; the engine tiles the per-frame tabs across it. */
|
|
32
44
|
regular-layout.lorax regular-layout-frame::part(titlebar) {
|
|
33
|
-
|
|
34
|
-
align-items:
|
|
35
|
-
margin-left: -1px;
|
|
36
|
-
margin-right: -1px;
|
|
37
|
-
margin-bottom: 0px;
|
|
38
|
-
margin-top: -24px;
|
|
39
|
-
padding-right: 6px;
|
|
45
|
+
margin: 3px 6px 0 3px;
|
|
46
|
+
align-items: end;
|
|
40
47
|
}
|
|
41
48
|
|
|
42
49
|
regular-layout.lorax regular-layout-frame::part(tab) {
|
|
43
|
-
|
|
44
|
-
flex: 1 1 150px;
|
|
50
|
+
box-sizing: border-box;
|
|
45
51
|
align-items: center;
|
|
46
|
-
|
|
52
|
+
justify-content: center;
|
|
47
53
|
font-size: 10px;
|
|
48
54
|
padding: 0 6px;
|
|
55
|
+
margin-right: 2px;
|
|
49
56
|
cursor: pointer;
|
|
50
|
-
max-width: 150px;
|
|
51
|
-
text-overflow: ellipsis;
|
|
52
57
|
border: 1px solid #666;
|
|
58
|
+
border-bottom: none;
|
|
53
59
|
border-radius: 6px 6px 0 0;
|
|
54
60
|
opacity: 0.5;
|
|
55
61
|
}
|
|
56
62
|
|
|
63
|
+
regular-layout.lorax regular-layout-frame::part(title) {
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
text-overflow: ellipsis;
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
}
|
|
68
|
+
|
|
57
69
|
regular-layout.lorax regular-layout-frame::part(active-tab) {
|
|
58
70
|
opacity: 1;
|
|
59
71
|
}
|
|
@@ -71,67 +83,52 @@ regular-layout.lorax regular-layout-frame::part(close):hover {
|
|
|
71
83
|
background-color: rgba(255, 0, 0, 0.2);
|
|
72
84
|
}
|
|
73
85
|
|
|
74
|
-
/* Frame in Overlay Mode */
|
|
75
86
|
regular-layout.lorax regular-layout-frame.overlay {
|
|
76
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
77
|
-
border: 1px dashed rgb(0, 0, 0);
|
|
78
|
-
border-radius: 6px;
|
|
79
|
-
margin: 3px;
|
|
80
|
-
box-shadow: none;
|
|
81
87
|
transition:
|
|
88
|
+
maring 0.1s ease-in-out,
|
|
82
89
|
top 0.1s ease-in-out,
|
|
83
90
|
height 0.1s ease-in-out,
|
|
84
91
|
width 0.1s ease-in-out,
|
|
85
92
|
left 0.1s ease-in-out;
|
|
86
93
|
}
|
|
87
94
|
|
|
88
|
-
|
|
89
|
-
regular-layout.lorax
|
|
90
|
-
display: none;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
regular-layout.lorax regular-layout-frame:not(.overlay)::part(container),
|
|
94
|
-
regular-layout.lorax regular-layout-frame:not(.overlay)::part(titlebar) {
|
|
95
|
-
display: flex;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/* Colors */
|
|
99
|
-
regular-layout.lorax :nth-child(8n + 1),
|
|
95
|
+
/* Colors (per panel position) - the content area and its tab share a hue. */
|
|
96
|
+
regular-layout.lorax :nth-child(8n + 1)::part(container),
|
|
100
97
|
regular-layout.lorax :nth-child(8n + 1)::part(tab) {
|
|
101
98
|
background-color: #ffadadff;
|
|
102
99
|
}
|
|
103
100
|
|
|
104
|
-
regular-layout.lorax :nth-child(8n + 2),
|
|
101
|
+
regular-layout.lorax :nth-child(8n + 2)::part(container),
|
|
105
102
|
regular-layout.lorax :nth-child(8n + 2)::part(tab) {
|
|
106
103
|
background-color: #ffd6a5ff;
|
|
107
104
|
}
|
|
108
105
|
|
|
109
|
-
regular-layout.lorax :nth-child(8n + 3),
|
|
106
|
+
regular-layout.lorax :nth-child(8n + 3)::part(container),
|
|
110
107
|
regular-layout.lorax :nth-child(8n + 3)::part(tab) {
|
|
111
108
|
background-color: #fdffb6ff;
|
|
112
109
|
}
|
|
113
110
|
|
|
114
|
-
regular-layout.lorax :nth-child(8n + 4),
|
|
111
|
+
regular-layout.lorax :nth-child(8n + 4)::part(container),
|
|
115
112
|
regular-layout.lorax :nth-child(8n + 4)::part(tab) {
|
|
116
113
|
background-color: #caffbfff;
|
|
117
114
|
}
|
|
118
115
|
|
|
119
|
-
regular-layout.lorax :nth-child(8n + 5),
|
|
116
|
+
regular-layout.lorax :nth-child(8n + 5)::part(container),
|
|
120
117
|
regular-layout.lorax :nth-child(8n + 5)::part(tab) {
|
|
121
118
|
background-color: #9bf6ffff;
|
|
122
119
|
}
|
|
123
120
|
|
|
124
|
-
regular-layout.lorax :nth-child(8n + 6),
|
|
121
|
+
regular-layout.lorax :nth-child(8n + 6)::part(container),
|
|
125
122
|
regular-layout.lorax :nth-child(8n + 6)::part(tab) {
|
|
126
123
|
background-color: #a0c4ffff;
|
|
127
124
|
}
|
|
128
125
|
|
|
129
|
-
regular-layout.lorax :nth-child(8n + 7),
|
|
126
|
+
regular-layout.lorax :nth-child(8n + 7)::part(container),
|
|
130
127
|
regular-layout.lorax :nth-child(8n + 7)::part(tab) {
|
|
131
128
|
background-color: #bdb2ffff;
|
|
132
129
|
}
|
|
133
130
|
|
|
134
|
-
regular-layout.lorax :nth-child(8n + 8),
|
|
131
|
+
regular-layout.lorax :nth-child(8n + 8)::part(container),
|
|
135
132
|
regular-layout.lorax :nth-child(8n + 8)::part(tab) {
|
|
136
133
|
background-color: #ffc6ffff;
|
|
137
134
|
}
|