Skip to content

Commit e7537e7

Browse files
texodustexodus
committed
WIP
1 parent 334c4ab commit e7537e7

10 files changed

Lines changed: 781 additions & 173 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
node_modules
22
dist
33
test-results
4+
.vscode/settings.json
5+
.esbuild-serve

‎chicago.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
2+
* ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
3+
* ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
4+
* ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
5+
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
6+
* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
7+
* ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
8+
* ┃ * of the Regular Layout library, distributed under the terms of the * ┃
9+
* ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
10+
* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
11+
*/
12+
13+
regular-layout.chicago {
14+
background-color: #008080;
15+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
16+
padding: 24px;
17+
}
18+
19+
/* Frame */
20+
regular-layout.chicago regular-layout-frame {
21+
position: relative;
22+
box-sizing: border-box;
23+
margin: 12px;
24+
background: #C0C0C0;
25+
border-width: 2px;
26+
border-color: #FFFFFF #808080 #808080 #FFFFFF;
27+
border-style: solid;
28+
}
29+
30+
regular-layout.chicago regular-layout-frame::part(close) {
31+
border-width: 1px;
32+
border-color: #FFFFFF #808080 #808080 #FFFFFF;
33+
border-style: solid;
34+
height: 16px;
35+
background: #C0C0C0;
36+
align-self: center;
37+
display: flex;
38+
align-items: center;
39+
padding: 0px 4px;
40+
}
41+
42+
regular-layout.chicago regular-layout-frame::part(close):before {
43+
content: "X";
44+
font-size: 10px;
45+
font-weight: bold;
46+
}
47+
48+
regular-layout.chicago regular-layout-frame::part(titlebar) {
49+
display: flex;
50+
align-items: stretch;
51+
padding-right: 0px;
52+
}
53+
54+
regular-layout.chicago regular-layout-frame::part(tab) {
55+
display: flex;
56+
flex: 1 1 150px;
57+
align-items: center;
58+
padding: 0 3px 0 8px;
59+
cursor: pointer;
60+
text-overflow: ellipsis;
61+
background: #808080;
62+
color: #FFF;
63+
font-family: "Tahoma", "Arial", sans-serif;
64+
font-weight: bold;
65+
font-size: 11px;
66+
}
67+
68+
regular-layout.chicago regular-layout-frame::part(active-tab) {
69+
background: #000080;
70+
opacity: 1;
71+
}
72+
73+
regular-layout.chicago:has(.overlay)>* {
74+
opacity: 0.8;
75+
}
76+
77+
regular-layout.chicago:has(.overlay)>.overlay {
78+
opacity: 1;
79+
}
80+
81+
/* Frame in Overlay Mode */
82+
regular-layout.chicago regular-layout-frame.overlay {
83+
margin: 0;
84+
transition:
85+
top 0.1s ease-in-out,
86+
height 0.1s ease-in-out,
87+
width 0.1s ease-in-out,
88+
left 0.1s ease-in-out;
89+
}

‎fluxbox.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
2+
* ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
3+
* ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
4+
* ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
5+
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
6+
* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
7+
* ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
8+
* ┃ * of the Regular Layout library, distributed under the terms of the * ┃
9+
* ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
10+
* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
11+
*/
12+
13+
regular-layout.fluxbox {
14+
background-color: #DBDFE6;
15+
font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
16+
padding: 16px;
17+
}
18+
19+
/* Frame */
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);
27+
}
28+
29+
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;
40+
}
41+
42+
regular-layout.fluxbox regular-layout-frame::part(close):hover {
43+
background: linear-gradient(to bottom, #F0F3F5 0%, #D8DFE6 100%);
44+
}
45+
46+
regular-layout.fluxbox regular-layout-frame::part(close):active {
47+
background: linear-gradient(to bottom, #C5CFD9 0%, #B3BEC9 100%);
48+
}
49+
50+
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;
56+
}
57+
58+
regular-layout.fluxbox regular-layout-frame::part(titlebar) {
59+
display: flex;
60+
align-items: stretch;
61+
padding-right: 0px;
62+
height: 22px;
63+
}
64+
65+
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;
78+
}
79+
80+
regular-layout.fluxbox regular-layout-frame::part(tab):hover {
81+
background: linear-gradient(to bottom, #D2DBE4 0%, #BEC9D4 100%);
82+
}
83+
84+
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+
}
90+
91+
regular-layout.fluxbox:has(.overlay)>* {
92+
opacity: 0.7;
93+
}
94+
95+
regular-layout.fluxbox:has(.overlay)>.overlay {
96+
opacity: 1;
97+
}
98+
99+
/* Frame in Overlay Mode */
100+
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;
110+
}

0 commit comments

Comments
 (0)