regular-layout/themes/lorax.css at main · texodus/regular-layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
 * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
 * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 * ┃  *  Copyright (c) 2026, the Regular Layout Authors. This file is part  *  ┃
 * ┃  *  of the Regular Layout library, distributed under the terms of the  *  ┃
 * ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 */

/*
 * In the own-tab model, the frames of a stack overlap in one cell: each frame
 * renders only its own tab (the engine tiles them into the shared titlebar) and
 * only the selected frame shows its content. So this theme styles appearance,
 * not layout - panel chrome lives on `::part(container)` (shown only for the
 * selected frame) rather than the overlapping frame box, and the titlebar strip
 * is transparent so every stacked frame's tab shows through.
 */

regular-layout.lorax {
	font-family:
		"ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
		"Liberation Mono", monospace;
}

regular-layout.lorax regular-layout-frame {
	--rl-tab-width: 200px;
}

/* Panel content chrome (only the selected frame's container is rendered). */
regular-layout.lorax regular-layout-frame::part(container) {
	box-sizing: border-box;
	margin: 0 3px 3px 3px;
	padding: 6px;
	/* Square top so the tab strip sits flush; rounded bottom. */
	border-radius: 0 6px 6px 6px;
	border: 1px solid #666;
	box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
}

/* Transparent strip; the engine tiles the per-frame tabs across it. */
regular-layout.lorax regular-layout-frame::part(titlebar) {
	margin: 3px 6px 0 3px;
	align-items: end;
}

regular-layout.lorax regular-layout-frame::part(tab) {
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	padding: 0 6px;
	margin-right: 2px;
	cursor: pointer;
	border: 1px solid #666;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	opacity: 0.5;
}

regular-layout.lorax regular-layout-frame::part(title) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

regular-layout.lorax regular-layout-frame::part(active-tab) {
	opacity: 1;
}

regular-layout.lorax regular-layout-frame::part(close) {
	border-radius: 7px;
	border: 1px solid #666;
	background: transparent;
	height: 14px;
	align-self: center;
}

regular-layout.lorax regular-layout-frame::part(close):hover {
	transition: background-color 0.2s;
	background-color: rgba(255, 0, 0, 0.2);
}

regular-layout.lorax regular-layout-frame.overlay {
	transition:
		maring 0.1s ease-in-out,
		top 0.1s ease-in-out,
		height 0.1s ease-in-out,
		width 0.1s ease-in-out,
		left 0.1s ease-in-out;
}

/* Colors (per panel position) - the content area and its tab share a hue. */
regular-layout.lorax :nth-child(8n + 1)::part(container),
regular-layout.lorax :nth-child(8n + 1)::part(tab) {
	background-color: #ffadadff;
}

regular-layout.lorax :nth-child(8n + 2)::part(container),
regular-layout.lorax :nth-child(8n + 2)::part(tab) {
	background-color: #ffd6a5ff;
}

regular-layout.lorax :nth-child(8n + 3)::part(container),
regular-layout.lorax :nth-child(8n + 3)::part(tab) {
	background-color: #fdffb6ff;
}

regular-layout.lorax :nth-child(8n + 4)::part(container),
regular-layout.lorax :nth-child(8n + 4)::part(tab) {
	background-color: #caffbfff;
}

regular-layout.lorax :nth-child(8n + 5)::part(container),
regular-layout.lorax :nth-child(8n + 5)::part(tab) {
	background-color: #9bf6ffff;
}

regular-layout.lorax :nth-child(8n + 6)::part(container),
regular-layout.lorax :nth-child(8n + 6)::part(tab) {
	background-color: #a0c4ffff;
}

regular-layout.lorax :nth-child(8n + 7)::part(container),
regular-layout.lorax :nth-child(8n + 7)::part(tab) {
	background-color: #bdb2ffff;
}

regular-layout.lorax :nth-child(8n + 8)::part(container),
regular-layout.lorax :nth-child(8n + 8)::part(tab) {
	background-color: #ffc6ffff;
}