Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/css/skin-warm.css

10.2 KiB, 1 run

created by r2519314175:1127, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1/* ============================================================
2 skin-warm.css — the "Warm" skin.
3 ------------------------------------------------------------
4 Everything here is scoped to :root[data-skin="warm"], so the
5 default (sharp) skin is not affected by a single rule -- the
6 whole file is dormant until a user chooses Warm.
7
8 It carries the two halves a token swap cannot: the DENSITY
9 (Tier 2 -- paddings and gaps loosened, driven by --space-scale
10 so the whole skin breathes from one number) and the CALMER
11 CHROME (Tier 3 -- the monospace telemetry de-teched, section
12 headers softened, cards lifted on soft shadows rather than
13 ruled with hard borders, buttons rounded toward pills, the
14 primary Start surface made inviting).
15
16 The shape tokens (radius, font, shadows, --space-scale) are in
17 variables.css under the same selector; this file spends them.
18 ============================================================ */
19
20/* The friendly typeface. One variable file covers 400..800; it is
21 only fetched when an element actually renders in it, i.e. when the
22 warm skin is active, so the sharp skin pays nothing for it. */
23@font-face {
24 font-family: 'Nunito';
25 font-style: normal;
26 font-weight: 400 800;
27 font-display: swap;
28 src: url('../fonts/nunito-var-latin.woff2') format('woff2');
29}
30
31/* ── Base tone ─────────────────────────────────────────────── */
32:root[data-skin="warm"] body {
33 line-height: 1.55;
34 -webkit-font-smoothing: antialiased;
35}
36/* The dense monospace furniture is what most reads as "developer tool".
37 Under the soft skin the small telemetry speaks in the friendly face
38 instead, which de-techs the whole surface in one stroke. The real
39 monospace is kept for actual code (pre/code), where it belongs. */
40:root[data-skin="warm"] .top-meter,
41:root[data-skin="warm"] .rail-count,
42:root[data-skin="warm"] .astat-aside,
43:root[data-skin="warm"] .session-box-meta,
44:root[data-skin="warm"] .session-box-ctx,
45:root[data-skin="warm"] .session-box-cost,
46:root[data-skin="warm"] .session-box-time,
47:root[data-skin="warm"] .tile-meter {
48 font-family: var(--font);
49 letter-spacing: 0;
50}
51/* The always-on stats bar is telemetry, not a task. Kept, but quietened,
52 so the eye lands on the work rather than the numbers. */
53:root[data-skin="warm"] .top-meter { opacity: 0.6; }
54:root[data-skin="warm"] .top-meter:hover { opacity: 1; }
55
56/* Section headers lose the ALL-CAPS engineering shout for a friendly weight.
57 The global pause row is NOT one of them -- it is a switch, already in
58 sentence case in both skins, and dressing it as a header is what made it
59 look like a third section with its alignment lost. */
60:root[data-skin="warm"] .railhead > span:first-child,
61:root[data-skin="warm"] .pop-head,
62:root[data-skin="warm"] .admin-sec,
63/* The Models/Credits/Push drawer headings share the account menu's `.admin-sec`
64 idiom (see app.css), so they take the same friendly weight here -- otherwise
65 the two settings menus read as two systems under this skin. */
66:root[data-skin="warm"] .admin-body .settings-section h3 {
67 text-transform: none;
68 letter-spacing: 0;
69 font-weight: 700;
70 font-size: var(--fs-sm);
71 color: var(--text-secondary);
72}
73
74/* ── Panels: lift, don't rule ──────────────────────────────── */
75:root[data-skin="warm"] .ai,
76:root[data-skin="warm"] .web,
77:root[data-skin="warm"] .doc,
78:root[data-skin="warm"] .msg,
79:root[data-skin="warm"] .compose,
80:root[data-skin="warm"] .tools,
81/* The terminal panel was added after this list and never joined it, so under
82 the warm skin it kept a hard border while every sibling wore a shadow. It was
83 invisible for as long as the warm skin was the one nobody had by default;
84 Simple made warm the default and `verify_termpanel` said so at once -- it
85 measures this panel against the AI panel across all eleven palettes. */
86:root[data-skin="warm"] .termpanel {
87 border-color: transparent;
88 box-shadow: var(--shadow-1);
89}
90
91/* ── Cards and dialogs: more room, a soft lift ─────────────── */
92:root[data-skin="warm"] .login-card,
93:root[data-skin="warm"] .modal-card,
94:root[data-skin="warm"] .dlg-card {
95 border-color: transparent;
96 box-shadow: var(--shadow-2);
97 padding: calc(24px * var(--space-scale));
98}
99/* The About card's splash and its foot rule bleed to the card's edges by
100 cancelling its padding out, so the loosened padding above has to be told to
101 them as well -- `--about-pad` is that number, and it is set here for the same
102 reason the line above it is. A bleed measured against the sharp skin's 24px
103 would hang the picture past the edge of a warm card. `verify_about.mjs`
104 measures the splash against the card's padding box in BOTH skins, so a third
105 skin that changes this fails loudly instead of quietly. */
106:root[data-skin="warm"] .about-card { --about-pad: calc(24px * var(--space-scale)); }
107:root[data-skin="warm"] .pass-gen {
108 padding: calc(12px * var(--space-scale));
109 border-color: transparent;
110 box-shadow: var(--shadow-1);
111}
112
113/* ── Buttons: rounded toward pills, roomier hit targets ────── */
114:root[data-skin="warm"] .dlg-ok,
115:root[data-skin="warm"] .dlg-cancel,
116:root[data-skin="warm"] .modal-close,
117:root[data-skin="warm"] #id-primary,
118:root[data-skin="warm"] .id-passkey,
119:root[data-skin="warm"] .compose-send,
120:root[data-skin="warm"] .compose-btn,
121:root[data-skin="warm"] .admin-btn,
122:root[data-skin="warm"] .pass-gen-btn,
123:root[data-skin="warm"] .empty-new-session,
124:root[data-skin="warm"] .login-card button {
125 border-radius: 999px;
126 padding: calc(9px * var(--space-scale)) calc(18px * var(--space-scale));
127 font-weight: 600;
128}
129/* The primary calls to action carry the accent as a fill, the way an
130 approachable UI makes the one next step obvious. */
131:root[data-skin="warm"] .empty-new-session,
132:root[data-skin="warm"] #id-primary,
133:root[data-skin="warm"] .dlg-ok {
134 box-shadow: var(--shadow-1);
135}
136/* Small icon and add buttons just round off; they stay compact. */
137:root[data-skin="warm"] .icon-btn,
138:root[data-skin="warm"] .addbtn {
139 border-radius: var(--radius);
140}
141
142/* ── Inputs: rounder, with room to type ────────────────────── */
143:root[data-skin="warm"] .dlg-input,
144:root[data-skin="warm"] .login-card input,
145:root[data-skin="warm"] .compose-row input,
146:root[data-skin="warm"] .compose-text,
147:root[data-skin="warm"] #chat-input,
148:root[data-skin="warm"] textarea,
149:root[data-skin="warm"] input[type="text"],
150:root[data-skin="warm"] input[type="password"] {
151 border-radius: var(--radius);
152 padding: calc(9px * var(--space-scale)) calc(13px * var(--space-scale));
153}
154
155/* ── The rail: roomier rows, calmer boxes ──────────────────── */
156:root[data-skin="warm"] .session-box {
157 padding: calc(9px * var(--space-scale)) calc(11px * var(--space-scale));
158 border-color: transparent;
159 box-shadow: var(--shadow-1);
160}
161/* The selected tile's ring, drawn INSIDE the border box.
162 Outside it, the ring takes no layout space, and the Chats list is
163 `overflow-x: hidden` -- so the two vertical sides were sliced clean off and
164 the tile appeared to have a border that stopped at the corners. Same fault as
165 the selected tag chip's ring, in a different list: ink that has to survive
166 belongs inside the box, not in the margin a scroll container is entitled to
167 cut. Inset, the 2px reads identically and cannot be clipped by anything. */
168:root[data-skin="warm"] .session-box.active {
169 box-shadow: inset 0 0 0 2px var(--accent);
170}
171/* The resting tiles are lifted by a soft shadow rather than ruled by a border,
172 and that shadow spreads sideways into the same clipped margin. Three pixels
173 of room, this skin only: the compact skin draws borders, needs none of it,
174 and its rail metrics must not move. */
175:root[data-skin="warm"] .session-list,
176:root[data-skin="warm"] .diamond-list {
177 padding-left: 3px;
178 padding-right: 3px;
179}
180:root[data-skin="warm"] .admin-item {
181 border-radius: var(--radius);
182 padding: calc(8px * var(--space-scale)) calc(10px * var(--space-scale));
183}
184:root[data-skin="warm"] .admin-item:hover {
185 background: var(--bg-hover);
186}
187:root[data-skin="warm"] .astat-row {
188 padding: calc(4px * var(--space-scale)) calc(6px * var(--space-scale));
189}
190
191/* ── Chat: friendlier bubbles, more breathing room ─────────── */
192:root[data-skin="warm"] .chat-output {
193 padding: calc(14px * var(--space-scale));
194}
195:root[data-skin="warm"] .chat-msg-user .chat-msg-content {
196 border-radius: 20px 20px 6px 20px;
197 padding: calc(9px * var(--space-scale)) calc(14px * var(--space-scale));
198}
199:root[data-skin="warm"] .chat-msg-assistant .chat-msg-content {
200 line-height: 1.6;
201}
202:root[data-skin="warm"] .chat-input-bar {
203 padding: calc(10px * var(--space-scale)) calc(12px * var(--space-scale));
204 border-top-color: transparent;
205 gap: 10px;
206}
207
208/* ── Chips and tags: soft pills ────────────────────────────── */
209:root[data-skin="warm"] .tag-chip,
210:root[data-skin="warm"] .seg button {
211 border-radius: 999px;
212}
213
214/* All | Any, under this skin's typeface. Centring puts the LINE BOX in the
215 middle of the pill, and a line box is not the ink: Nunito's ascent sits
216 higher above the baseline than the system stack's, so the same rule that
217 lands the letters dead centre in the sharp skin lifts them 0.31px here --
218 measured off the paint at 8x, not predicted. That is five times the offset
219 the closer was corrected by, and at 10px type it is visible as a switch
220 whose words float.
221
222 Stated in em so it follows the reading control, and scoped to this skin
223 because the sharp skin measures centred and must not be moved. */
224:root[data-skin="warm"] .tag-mode-btn { transform: translateY(0.031em); }
225
226/* ── The empty state: an inviting Start, not a placeholder ─── */
227:root[data-skin="warm"] .empty-state {
228 gap: calc(12px * var(--space-scale));
229 padding: calc(24px * var(--space-scale));
230}
231:root[data-skin="warm"] .empty-state h2 {
232 font-weight: 800;
233 letter-spacing: -0.01em;
234}
235:root[data-skin="warm"] .empty-new-session {
236 font-size: var(--fs-lg);
237 padding: calc(11px * var(--space-scale)) calc(24px * var(--space-scale));
238}