@panphora/hyper-cms 0.4.2 → 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/README.md +131 -5
- package/dist/hypercms.min.js +1204 -220
- package/package.json +5 -3
- package/src/events.js +298 -14
- package/src/form-builder.js +171 -19
- package/src/form-rules.js +23 -9
- package/src/hypercms-bundle.js +5 -2
- package/src/hypercms.js +197 -4
- package/src/refresh.js +2 -1
- package/src/shell.js +93 -18
- package/src/templates.js +431 -25
- package/src/theme/pixel-quiet.overrides.css +512 -0
- package/src/theme.generated.css +1175 -0
- package/src/vendor/mirk.vendor.js +197 -0
|
@@ -0,0 +1,1175 @@
|
|
|
1
|
+
/* GENERATED by scripts/build-theme.js from mirk-interface/mirk.css — DO NOT EDIT.
|
|
2
|
+
Source of truth: mirk-interface/mirk.css + src/theme/pixel-quiet.overrides.css.
|
|
3
|
+
Regenerate with: npm run build:theme */
|
|
4
|
+
|
|
5
|
+
/* ===== mirk-interface@2.2.0, scoped to .hcms-shell ===== */
|
|
6
|
+
/*
|
|
7
|
+
* mirk.css — the mirk UI kit, v2.
|
|
8
|
+
* Hand-written, no build. Fourteen form components as semantic BEM classes in
|
|
9
|
+
* @layer components, so utilities (Tailwind or your own) always override them
|
|
10
|
+
* with zero !important. Renders fully standalone; Tailwind is optional.
|
|
11
|
+
*
|
|
12
|
+
* Two hinges (see mirk-ui-guide.md):
|
|
13
|
+
* 1. Components live in @layer components → utilities win.
|
|
14
|
+
* 2. State serializes into the DOM (native attrs, :has(), inline --mirk-value)
|
|
15
|
+
* so document.documentElement.outerHTML round-trips every visible state.
|
|
16
|
+
*
|
|
17
|
+
* This @layer statement makes the file self-sufficient without Tailwind, and
|
|
18
|
+
* merges into Tailwind's own order (@layer theme, base, components, utilities)
|
|
19
|
+
* when present.
|
|
20
|
+
*/
|
|
21
|
+
@layer base, components;
|
|
22
|
+
|
|
23
|
+
@layer base {
|
|
24
|
+
/* Components are authored border-box (a 2px bevel must not grow the box). */
|
|
25
|
+
.hcms-shell *, .hcms-shell *::before, .hcms-shell *::after { box-sizing: border-box; }
|
|
26
|
+
.hcms-shell button, .hcms-shell input, .hcms-shell optgroup, .hcms-shell select, .hcms-shell textarea { margin: 0; }
|
|
27
|
+
|
|
28
|
+
@font-face {
|
|
29
|
+
font-family: 'Departure Mono';
|
|
30
|
+
src: url('https://cdn.jsdelivr.net/npm/mirk-interface@2.2.0/fonts/DepartureMono-1.500/DepartureMono-Regular.woff2') format('woff2');
|
|
31
|
+
font-weight: 400; font-style: normal; font-display: swap;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.hcms-shell { font-family: 'Departure Mono', ui-monospace, "Menlo", monospace; }
|
|
35
|
+
/* Preflight sets these to ui-monospace; keep them in Departure Mono. */
|
|
36
|
+
.hcms-shell pre, .hcms-shell code, .hcms-shell kbd, .hcms-shell samp { font-family: inherit; }
|
|
37
|
+
|
|
38
|
+
/* 28 tokens, one value each. light-dark() picks the side from color-scheme. */
|
|
39
|
+
.hcms-shell {
|
|
40
|
+
color-scheme: light dark; /* default: follow the OS */
|
|
41
|
+
|
|
42
|
+
--mirk-canvas: light-dark(#F7F2EA, #0B0C13);
|
|
43
|
+
--mirk-bg: light-dark(#F7F2EA, #1D1F2F);
|
|
44
|
+
--mirk-fg: light-dark(#15120e, #F6F7F9);
|
|
45
|
+
--mirk-accent: light-dark(#efefe5, #232639);
|
|
46
|
+
--mirk-destructive: light-dark(#d4183d, #ff5566);
|
|
47
|
+
--mirk-focus-color: light-dark(#BBA288, #5A607F);
|
|
48
|
+
--mirk-bevel-bg: light-dark(#e9d3bd, #1D1F2F);
|
|
49
|
+
--mirk-bevel-fg: light-dark(#15120e, #F6F7F9);
|
|
50
|
+
--mirk-bevel-tl: light-dark(#f3ddc7, #474C65);
|
|
51
|
+
--mirk-bevel-br: light-dark(#c2ad95, #131725);
|
|
52
|
+
--mirk-bevel-hover-bg: light-dark(#dfc9b3, #232639);
|
|
53
|
+
--mirk-pill-inner-top: light-dark(#efdac7, #232639);
|
|
54
|
+
--mirk-input-border: light-dark(#957E65, #6E738E);
|
|
55
|
+
--mirk-placeholder-color: light-dark(#7F7366, #545973);
|
|
56
|
+
--mirk-ctrl-bg: light-dark(#8C7660, #5F6582);
|
|
57
|
+
--mirk-toggle-bg: light-dark(#DFC9AF, #656D95);
|
|
58
|
+
--mirk-toggle-hi: light-dark(#E9D6C3, #7F87AD);
|
|
59
|
+
--mirk-toggle-lo: light-dark(#C7A88A, #505677);
|
|
60
|
+
--mirk-mark-fg: light-dark(#3F3225, #E1E3EA);
|
|
61
|
+
--mirk-sortable-dot: light-dark(#e2c5a6, #393f5b);
|
|
62
|
+
--mirk-sortable-shadow: light-dark(#c7a47f, #111527);
|
|
63
|
+
--mirk-sortable-label: light-dark(#231e18, #edeef2);
|
|
64
|
+
--mirk-sortable-placeholder: light-dark(#99826c, #6f7695);
|
|
65
|
+
--mirk-slider-fill: light-dark(#e9d3bd, #232639);
|
|
66
|
+
--mirk-slider-nub-bg: light-dark(#DFC9AF, #656D95);
|
|
67
|
+
--mirk-slider-nub-hi: light-dark(#E9D6C3, #7F87AD);
|
|
68
|
+
--mirk-slider-nub-lo: light-dark(#C7A88A, #505677);
|
|
69
|
+
|
|
70
|
+
--mirk-radius: 5px; /* the "rounded" corner */
|
|
71
|
+
--mirk-focus-offset: 2px; /* non-color → can't ride light-dark() */
|
|
72
|
+
|
|
73
|
+
background: var(--mirk-canvas);
|
|
74
|
+
color: var(--mirk-fg);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* The one non-color token with a real light/dark split (was 2px / 3px). */
|
|
78
|
+
@media (prefers-color-scheme: dark) { .hcms-shell { --mirk-focus-offset: 3px; } }
|
|
79
|
+
|
|
80
|
+
/* Force a mode on any subtree with one attribute (class aliases for hosts that
|
|
81
|
+
prefer class-based theming and Tailwind's dark-variant convention). Each also
|
|
82
|
+
paints its own canvas so a wrapper visibly flips. */
|
|
83
|
+
.hcms-shell[data-theme="light"], .hcms-shell.light {
|
|
84
|
+
color-scheme: light; --mirk-focus-offset: 2px;
|
|
85
|
+
background: var(--mirk-canvas); color: var(--mirk-fg);
|
|
86
|
+
}
|
|
87
|
+
.hcms-shell[data-theme="dark"], .hcms-shell.dark {
|
|
88
|
+
color-scheme: dark; --mirk-focus-offset: 3px;
|
|
89
|
+
background: var(--mirk-canvas); color: var(--mirk-fg);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Built-in brand variant — "Pixel Quiet": mirk's warm soul with the volume
|
|
93
|
+
down. A softened, near-equal bevel, warmer ink, terracotta destructive, a
|
|
94
|
+
deeper navy-black dark. Authored with light-dark() like :root, so it follows
|
|
95
|
+
the OS and still flips with .dark / .light. Opt in: data-theme="pixel-quiet".
|
|
96
|
+
Sits after :root (equal specificity, source order wins). --mirk-radius /
|
|
97
|
+
--mirk-focus-offset are inherited unchanged; --mirk-ctrl-bg is unused. */
|
|
98
|
+
.hcms-shell[data-theme="pixel-quiet"] {
|
|
99
|
+
--mirk-fg: light-dark(#2B241B, #ECEAF2);
|
|
100
|
+
--mirk-bg: light-dark(#F7F2EA, #11131E);
|
|
101
|
+
--mirk-canvas: light-dark(#F7F2EA, #0B0C13);
|
|
102
|
+
--mirk-accent: light-dark(#efefe5, #1D1F2F);
|
|
103
|
+
--mirk-destructive: light-dark(#C24A3A, #ff5566);
|
|
104
|
+
--mirk-focus-color: light-dark(#C7AE93, #4A506B);
|
|
105
|
+
--mirk-bevel-bg: light-dark(#FCF8F1, #1A1D2C);
|
|
106
|
+
--mirk-bevel-fg: light-dark(#2B241B, #ECEAF2);
|
|
107
|
+
--mirk-bevel-tl: light-dark(#F0E7D8, #2A2E42);
|
|
108
|
+
--mirk-bevel-br: light-dark(#E2D4BF, #14182A);
|
|
109
|
+
--mirk-bevel-hover-bg: light-dark(#F4ECDF, #202436);
|
|
110
|
+
--mirk-pill-inner-top: light-dark(#FBF6EE, #202436);
|
|
111
|
+
--mirk-input-border: light-dark(#D8C8AF, #353B52);
|
|
112
|
+
--mirk-placeholder-color: light-dark(#A8987F, #6A7090);
|
|
113
|
+
--mirk-mark-fg: light-dark(#6B5942, #C9CDE0);
|
|
114
|
+
--mirk-toggle-bg: light-dark(#EFDBBD, #3E4660);
|
|
115
|
+
--mirk-toggle-hi: light-dark(#F4EADA, #4E567A);
|
|
116
|
+
--mirk-toggle-lo: light-dark(#C2A87E, #262B42);
|
|
117
|
+
--mirk-sortable-dot: light-dark(#DDCBB0, #353B52);
|
|
118
|
+
--mirk-sortable-shadow: light-dark(#C9B493, #0E1120);
|
|
119
|
+
--mirk-sortable-label: light-dark(#8C7B62, #8A90AB);
|
|
120
|
+
--mirk-sortable-placeholder: light-dark(#A8987F, #6A7090);
|
|
121
|
+
/* slider nub reuses the toggle family (identical pairing in :root); the fill
|
|
122
|
+
is the one value with no CMS precedent — a soft warm / muted navy track. */
|
|
123
|
+
--mirk-slider-fill: light-dark(#F2E0BD, #2A2E42);
|
|
124
|
+
--mirk-slider-nub-bg: light-dark(#EFDBBD, #3E4660);
|
|
125
|
+
--mirk-slider-nub-hi: light-dark(#F4EADA, #4E567A);
|
|
126
|
+
--mirk-slider-nub-lo: light-dark(#C2A87E, #262B42);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* Roll your own the same way — an explicit [data-theme] block is the escape hatch:
|
|
130
|
+
[data-theme="sunset"] { color-scheme: light; --mirk-accent: #f0a868; … } */
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@layer components {
|
|
134
|
+
/* Visually hidden, still focusable/announced. The hidden native input behind
|
|
135
|
+
every custom control relies on it; Tailwind is optional now. */
|
|
136
|
+
.hcms-shell .mirk-sr-only {
|
|
137
|
+
position: absolute; width: 1px; height: 1px;
|
|
138
|
+
padding: 0; margin: -1px; overflow: hidden;
|
|
139
|
+
clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ============================ BUTTON ============================ */
|
|
143
|
+
.hcms-shell .mirk-button {
|
|
144
|
+
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
|
|
145
|
+
font: inherit; line-height: 1.5; cursor: pointer; user-select: none;
|
|
146
|
+
text-align: center;
|
|
147
|
+
color: var(--mirk-bevel-fg);
|
|
148
|
+
background: var(--mirk-bevel-bg);
|
|
149
|
+
border: 2px solid;
|
|
150
|
+
/* Raised bevel: light top+left, dark right+bottom. Shorthand is T R B L. */
|
|
151
|
+
border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
|
|
152
|
+
padding: 4px 14px 5px; /* medium */
|
|
153
|
+
outline: none;
|
|
154
|
+
}
|
|
155
|
+
.hcms-shell .mirk-button__label { white-space: nowrap; user-select: none; display: inline-block; }
|
|
156
|
+
|
|
157
|
+
/* States, written once, shared by every size and shape. */
|
|
158
|
+
.hcms-shell .mirk-button:hover { background-color: var(--mirk-bevel-hover-bg); }
|
|
159
|
+
.hcms-shell .mirk-button:active {
|
|
160
|
+
border-color: var(--mirk-bevel-br) var(--mirk-bevel-tl) var(--mirk-bevel-tl) var(--mirk-bevel-br);
|
|
161
|
+
}
|
|
162
|
+
.hcms-shell .mirk-button:not(.mirk-button--round):active .mirk-button__label { translate: 1.5px 1.5px; }
|
|
163
|
+
/* Direct focus (a real <button>) or a focus-visible descendant (a <label>
|
|
164
|
+
wrapping a hidden input, as the file/image upload triggers do). */
|
|
165
|
+
.hcms-shell .mirk-button:focus-visible, .hcms-shell .mirk-button:has(:focus-visible) {
|
|
166
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
167
|
+
}
|
|
168
|
+
.hcms-shell .mirk-button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
169
|
+
|
|
170
|
+
/* Sizes set padding + font (rect); round re-homes padding to the label below. */
|
|
171
|
+
.hcms-shell .mirk-button--small { padding: 3px 12px; font-size: 14px; }
|
|
172
|
+
.hcms-shell .mirk-button--large { padding: 4px 17px 7px; font-size: 18px; border-width: 3px; }
|
|
173
|
+
|
|
174
|
+
/* Round register: a gradient pill frame with the label as the inner fill. */
|
|
175
|
+
.hcms-shell .mirk-button--round {
|
|
176
|
+
border: none; padding: 2px; border-radius: 14px;
|
|
177
|
+
background-color: var(--mirk-canvas);
|
|
178
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
|
|
179
|
+
opacity: 0.9; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
180
|
+
}
|
|
181
|
+
.hcms-shell .mirk-button--round:hover { opacity: 1; }
|
|
182
|
+
.hcms-shell .mirk-button--round:active {
|
|
183
|
+
background-image: linear-gradient(to bottom in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
|
|
184
|
+
}
|
|
185
|
+
.hcms-shell .mirk-button--round .mirk-button__label {
|
|
186
|
+
display: flex; align-items: center; gap: 0.5rem;
|
|
187
|
+
padding: 4px 17px 6px; border-radius: 12px;
|
|
188
|
+
color: var(--mirk-bevel-fg);
|
|
189
|
+
background-color: var(--mirk-bevel-bg);
|
|
190
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
|
|
191
|
+
}
|
|
192
|
+
.hcms-shell .mirk-button--round.mirk-button--small { border-radius: 12px; }
|
|
193
|
+
.hcms-shell .mirk-button--round.mirk-button--small .mirk-button__label { padding: 2px 14px; border-radius: 10px; }
|
|
194
|
+
.hcms-shell .mirk-button--round.mirk-button--large { border-radius: 16px; }
|
|
195
|
+
.hcms-shell .mirk-button--round.mirk-button--large .mirk-button__label { padding: 7px 24px 9px; border-radius: 14px; }
|
|
196
|
+
|
|
197
|
+
/* ============================ TEXT INPUT ============================ */
|
|
198
|
+
.hcms-shell .mirk-input {
|
|
199
|
+
width: 100%;
|
|
200
|
+
background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
|
|
201
|
+
border: 1px solid var(--mirk-input-border);
|
|
202
|
+
padding: 5px 14px 6px; /* medium */
|
|
203
|
+
font: inherit; line-height: 1.5; border-radius: 0; outline: none;
|
|
204
|
+
}
|
|
205
|
+
.hcms-shell .mirk-input::placeholder { color: var(--mirk-placeholder-color); }
|
|
206
|
+
.hcms-shell .mirk-input:focus-visible {
|
|
207
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
208
|
+
}
|
|
209
|
+
.hcms-shell .mirk-input--small { padding: 4px 12px; font-size: 14px; }
|
|
210
|
+
.hcms-shell .mirk-input--large { padding: 6px 17px 9px; font-size: 18px; }
|
|
211
|
+
.hcms-shell .mirk-input--rounded { border-radius: var(--mirk-radius); }
|
|
212
|
+
|
|
213
|
+
/* ============================ TEXTAREA ============================ */
|
|
214
|
+
.hcms-shell .mirk-textarea {
|
|
215
|
+
width: 100%;
|
|
216
|
+
background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
|
|
217
|
+
border: 1px solid var(--mirk-input-border);
|
|
218
|
+
padding: 6px 17px 9px; font: inherit; font-size: 18px; line-height: 1.5;
|
|
219
|
+
border-radius: 0; outline: none; resize: vertical;
|
|
220
|
+
}
|
|
221
|
+
.hcms-shell .mirk-textarea::placeholder { color: var(--mirk-placeholder-color); }
|
|
222
|
+
.hcms-shell .mirk-textarea:focus-visible {
|
|
223
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
224
|
+
}
|
|
225
|
+
.hcms-shell .mirk-textarea--rounded { border-radius: var(--mirk-radius); }
|
|
226
|
+
|
|
227
|
+
/* ============================ NUMBER ============================ */
|
|
228
|
+
.hcms-shell .mirk-number {
|
|
229
|
+
display: flex; align-items: stretch; width: 100%;
|
|
230
|
+
background: var(--mirk-bevel-bg);
|
|
231
|
+
border: 1px solid var(--mirk-input-border); border-radius: 0;
|
|
232
|
+
}
|
|
233
|
+
.hcms-shell .mirk-number:has(:focus-visible) {
|
|
234
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
235
|
+
}
|
|
236
|
+
.hcms-shell .mirk-number__input {
|
|
237
|
+
flex: 1; min-width: 0; background: transparent; color: var(--mirk-bevel-fg);
|
|
238
|
+
padding: 5px 10px 6px 14px; /* medium */
|
|
239
|
+
font: inherit; line-height: 1.5; outline: none;
|
|
240
|
+
appearance: textfield; -webkit-appearance: textfield;
|
|
241
|
+
}
|
|
242
|
+
.hcms-shell .mirk-number__input::-webkit-outer-spin-button, .hcms-shell .mirk-number__input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }
|
|
243
|
+
.hcms-shell .mirk-number__steps { display: flex; flex-direction: column; padding: 2px; gap: 2px; }
|
|
244
|
+
.hcms-shell .mirk-number__step {
|
|
245
|
+
flex: 1; cursor: pointer; line-height: 1; padding: 0 10px; font-size: 9px; /* medium */
|
|
246
|
+
display: flex; align-items: center; justify-content: center;
|
|
247
|
+
background: var(--mirk-bevel-bg); outline: none;
|
|
248
|
+
border: 2px solid;
|
|
249
|
+
border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
|
|
250
|
+
}
|
|
251
|
+
.hcms-shell .mirk-number__step:hover { background: var(--mirk-bevel-hover-bg); }
|
|
252
|
+
.hcms-shell .mirk-number__step:active {
|
|
253
|
+
border-color: var(--mirk-bevel-br) var(--mirk-bevel-tl) var(--mirk-bevel-tl) var(--mirk-bevel-br);
|
|
254
|
+
}
|
|
255
|
+
.hcms-shell .mirk-number__step:focus-visible { outline: 1px solid var(--mirk-focus-color); outline-offset: 1px; }
|
|
256
|
+
|
|
257
|
+
.hcms-shell .mirk-number--small .mirk-number__input { padding: 4px 8px 4px 12px; font-size: 14px; }
|
|
258
|
+
.hcms-shell .mirk-number--small .mirk-number__step { padding: 0 8px; font-size: 8px; }
|
|
259
|
+
.hcms-shell .mirk-number--large .mirk-number__input { padding: 6px 12px 9px 17px; font-size: 18px; }
|
|
260
|
+
.hcms-shell .mirk-number--large .mirk-number__step { padding: 0 12px; font-size: 10px; }
|
|
261
|
+
|
|
262
|
+
.hcms-shell .mirk-number--rounded { border-radius: var(--mirk-radius); }
|
|
263
|
+
.hcms-shell .mirk-number--rounded .mirk-number__step { border-radius: 3px; }
|
|
264
|
+
|
|
265
|
+
/* ============================ SELECT / DROPDOWN ============================ */
|
|
266
|
+
/* Keeps appearance:none + a real chevron (renders identically everywhere today);
|
|
267
|
+
base-select/::picker is a future enhancement. */
|
|
268
|
+
.hcms-shell .mirk-select { position: relative; }
|
|
269
|
+
.hcms-shell .mirk-select__field {
|
|
270
|
+
width: 100%; appearance: none; -webkit-appearance: none;
|
|
271
|
+
background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
|
|
272
|
+
border: 2px solid;
|
|
273
|
+
border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
|
|
274
|
+
padding: 4px 40px 5px 14px; /* medium */
|
|
275
|
+
font: inherit; line-height: 1.5; border-radius: 0; outline: none;
|
|
276
|
+
}
|
|
277
|
+
.hcms-shell .mirk-select__field:focus-visible {
|
|
278
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
279
|
+
}
|
|
280
|
+
.hcms-shell .mirk-select__chevron {
|
|
281
|
+
pointer-events: none; position: absolute; top: 50%; right: 14px; /* medium */
|
|
282
|
+
translate: 0 -50%; rotate: 90deg; display: inline-block; line-height: 1; font-size: 20px;
|
|
283
|
+
}
|
|
284
|
+
.hcms-shell .mirk-select--small .mirk-select__field { padding: 3px 36px 3px 12px; font-size: 14px; }
|
|
285
|
+
.hcms-shell .mirk-select--small .mirk-select__chevron { right: 12px; font-size: 18px; }
|
|
286
|
+
.hcms-shell .mirk-select--large .mirk-select__field { padding: 4px 48px 7px 17px; font-size: 18px; border-width: 3px; }
|
|
287
|
+
.hcms-shell .mirk-select--large .mirk-select__chevron { right: 16px; font-size: 24px; }
|
|
288
|
+
|
|
289
|
+
/* Round: gradient pill frame around a borderless, pill-filled select. */
|
|
290
|
+
.hcms-shell .mirk-select--round .mirk-select__frame {
|
|
291
|
+
padding: 2px; border-radius: 14px; /* medium */
|
|
292
|
+
background-color: var(--mirk-canvas);
|
|
293
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
|
|
294
|
+
}
|
|
295
|
+
.hcms-shell .mirk-select--round .mirk-select__frame:has(:focus-visible) {
|
|
296
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
297
|
+
}
|
|
298
|
+
.hcms-shell .mirk-select--round .mirk-select__field {
|
|
299
|
+
border: none; background-color: transparent;
|
|
300
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
|
|
301
|
+
border-radius: 12px; padding: 4px 40px 6px 17px; /* medium */
|
|
302
|
+
}
|
|
303
|
+
.hcms-shell .mirk-select--round.mirk-select--small .mirk-select__frame { border-radius: 12px; }
|
|
304
|
+
.hcms-shell .mirk-select--round.mirk-select--small .mirk-select__field { border-radius: 10px; padding: 2px 36px 2px 14px; }
|
|
305
|
+
.hcms-shell .mirk-select--round.mirk-select--large .mirk-select__frame { border-radius: 16px; }
|
|
306
|
+
.hcms-shell .mirk-select--round.mirk-select--large .mirk-select__field { border-radius: 14px; padding: 7px 48px 9px 24px; }
|
|
307
|
+
.hcms-shell .mirk-select--round.mirk-select--large .mirk-select__chevron { right: 16px; font-size: 24px; }
|
|
308
|
+
|
|
309
|
+
/* ============================ CHECKBOX ============================ */
|
|
310
|
+
.hcms-shell .mirk-checkbox { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; width: fit-content; }
|
|
311
|
+
.hcms-shell .mirk-checkbox__box {
|
|
312
|
+
position: relative; flex-shrink: 0; width: 22px; height: 22px;
|
|
313
|
+
display: flex; align-items: center; justify-content: center; border-radius: 0;
|
|
314
|
+
background: var(--mirk-bevel-bg);
|
|
315
|
+
border: 2px solid;
|
|
316
|
+
border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
|
|
317
|
+
}
|
|
318
|
+
.hcms-shell .mirk-checkbox__mark {
|
|
319
|
+
opacity: 0; display: block; width: 6px; height: 12px;
|
|
320
|
+
border-right: 2.5px solid var(--mirk-mark-fg); border-bottom: 2.5px solid var(--mirk-mark-fg);
|
|
321
|
+
rotate: 45deg; translate: 0.5px -1.5px;
|
|
322
|
+
}
|
|
323
|
+
.hcms-shell .mirk-checkbox__label { font-size: 18px; line-height: 1.5; }
|
|
324
|
+
|
|
325
|
+
.hcms-shell .mirk-checkbox:has(:checked) .mirk-checkbox__box { border-color: var(--mirk-input-border); }
|
|
326
|
+
.hcms-shell .mirk-checkbox:has(:checked) .mirk-checkbox__mark { opacity: 1; }
|
|
327
|
+
.hcms-shell .mirk-checkbox:has(:focus-visible) .mirk-checkbox__box {
|
|
328
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.hcms-shell .mirk-checkbox--small { gap: 0.5rem; }
|
|
332
|
+
.hcms-shell .mirk-checkbox--small .mirk-checkbox__box { width: 18px; height: 18px; }
|
|
333
|
+
.hcms-shell .mirk-checkbox--small .mirk-checkbox__mark {
|
|
334
|
+
width: 5px; height: 10px;
|
|
335
|
+
border-right-width: 2px; border-bottom-width: 2px; translate: 0.5px -1px;
|
|
336
|
+
}
|
|
337
|
+
.hcms-shell .mirk-checkbox--small .mirk-checkbox__label { font-size: 14px; }
|
|
338
|
+
|
|
339
|
+
/* ============================ RADIO ============================ */
|
|
340
|
+
.hcms-shell .mirk-radio { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; width: fit-content; }
|
|
341
|
+
.hcms-shell .mirk-radio__ring {
|
|
342
|
+
position: relative; flex-shrink: 0; width: 25px; height: 25px; border-radius: 9999px;
|
|
343
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
|
|
344
|
+
}
|
|
345
|
+
.hcms-shell .mirk-radio__fill {
|
|
346
|
+
display: block; position: absolute; inset: 2px; border-radius: 9999px;
|
|
347
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
|
|
348
|
+
}
|
|
349
|
+
.hcms-shell .mirk-radio__dot {
|
|
350
|
+
display: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
|
|
351
|
+
width: 9px; height: 9px; border-radius: 9999px; background: var(--mirk-mark-fg);
|
|
352
|
+
}
|
|
353
|
+
.hcms-shell .mirk-radio__label { font-size: 18px; line-height: 1.5; }
|
|
354
|
+
|
|
355
|
+
.hcms-shell .mirk-radio:has(:checked) .mirk-radio__ring {
|
|
356
|
+
background-image: none; background-color: var(--mirk-bevel-bg);
|
|
357
|
+
border: 2px solid var(--mirk-input-border);
|
|
358
|
+
}
|
|
359
|
+
.hcms-shell .mirk-radio:has(:checked) .mirk-radio__fill { display: none; }
|
|
360
|
+
.hcms-shell .mirk-radio:has(:checked) .mirk-radio__dot { display: block; }
|
|
361
|
+
.hcms-shell .mirk-radio:has(:focus-visible) .mirk-radio__ring {
|
|
362
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.hcms-shell .mirk-radio--small { gap: 0.5rem; }
|
|
366
|
+
.hcms-shell .mirk-radio--small .mirk-radio__ring { width: 20px; height: 20px; }
|
|
367
|
+
.hcms-shell .mirk-radio--small .mirk-radio__dot { width: 7px; height: 7px; }
|
|
368
|
+
.hcms-shell .mirk-radio--small .mirk-radio__label { font-size: 14px; }
|
|
369
|
+
|
|
370
|
+
/* ============================ TOGGLE ============================ */
|
|
371
|
+
.hcms-shell .mirk-toggle { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; width: fit-content; }
|
|
372
|
+
.hcms-shell .mirk-toggle__track {
|
|
373
|
+
position: relative; flex-shrink: 0; width: 49px; height: 27px; border-radius: 0;
|
|
374
|
+
border: 1px solid var(--mirk-input-border);
|
|
375
|
+
}
|
|
376
|
+
.hcms-shell .mirk-toggle__thumb {
|
|
377
|
+
position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
|
|
378
|
+
background-color: var(--mirk-toggle-bg);
|
|
379
|
+
border: 2px solid;
|
|
380
|
+
border-color: var(--mirk-toggle-hi) var(--mirk-toggle-lo) var(--mirk-toggle-lo) var(--mirk-toggle-hi);
|
|
381
|
+
transition-property: transform, translate, scale, rotate;
|
|
382
|
+
transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
383
|
+
}
|
|
384
|
+
.hcms-shell .mirk-toggle__label { font-size: 18px; line-height: 1.5; }
|
|
385
|
+
|
|
386
|
+
.hcms-shell .mirk-toggle:has(:checked) .mirk-toggle__thumb { translate: 22px; }
|
|
387
|
+
.hcms-shell .mirk-toggle:has(:focus-visible) .mirk-toggle__track {
|
|
388
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.hcms-shell .mirk-toggle--round .mirk-toggle__track { width: 50px; height: 29px; border-radius: 9999px; }
|
|
392
|
+
.hcms-shell .mirk-toggle--round .mirk-toggle__thumb {
|
|
393
|
+
width: 21px; height: 21px; border: none; border-radius: 9999px;
|
|
394
|
+
background-color: transparent;
|
|
395
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-toggle-lo), var(--mirk-toggle-hi));
|
|
396
|
+
}
|
|
397
|
+
.hcms-shell .mirk-toggle--round .mirk-toggle__thumb::after {
|
|
398
|
+
content: ""; position: absolute; inset: 2px; border-radius: 9999px; background: var(--mirk-toggle-bg);
|
|
399
|
+
}
|
|
400
|
+
.hcms-shell .mirk-toggle--round:has(:checked) .mirk-toggle__thumb { translate: 21px; }
|
|
401
|
+
|
|
402
|
+
.hcms-shell .mirk-toggle--small { gap: 0.5rem; }
|
|
403
|
+
.hcms-shell .mirk-toggle--small .mirk-toggle__track { width: 42px; height: 23px; }
|
|
404
|
+
.hcms-shell .mirk-toggle--small .mirk-toggle__thumb { top: 2px; left: 2px; width: 17px; height: 17px; }
|
|
405
|
+
.hcms-shell .mirk-toggle--small:has(:checked) .mirk-toggle__thumb { translate: 19px; }
|
|
406
|
+
.hcms-shell .mirk-toggle--small .mirk-toggle__label { font-size: 14px; }
|
|
407
|
+
.hcms-shell .mirk-toggle--round.mirk-toggle--small .mirk-toggle__track { width: 43px; height: 25px; }
|
|
408
|
+
.hcms-shell .mirk-toggle--round.mirk-toggle--small .mirk-toggle__thumb { width: 19px; height: 19px; }
|
|
409
|
+
.hcms-shell .mirk-toggle--round.mirk-toggle--small:has(:checked) .mirk-toggle__thumb { translate: 18px; }
|
|
410
|
+
|
|
411
|
+
/* ============================ SLIDER ============================ */
|
|
412
|
+
.hcms-shell .mirk-slider { position: relative; height: 32px; width: 100%; --mirk-value: 0%; }
|
|
413
|
+
.hcms-shell .mirk-slider__input {
|
|
414
|
+
position: absolute; inset: 0; width: 100%; height: 100%;
|
|
415
|
+
opacity: 0; cursor: pointer; z-index: 10;
|
|
416
|
+
}
|
|
417
|
+
.hcms-shell .mirk-slider__track {
|
|
418
|
+
position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: 12px;
|
|
419
|
+
background: var(--mirk-canvas); border: 1px solid var(--mirk-input-border); overflow: hidden;
|
|
420
|
+
}
|
|
421
|
+
.hcms-shell .mirk-slider__fill { height: 100%; width: var(--mirk-value); background: var(--mirk-slider-fill); }
|
|
422
|
+
.hcms-shell .mirk-slider__nub {
|
|
423
|
+
position: absolute; top: 50%; left: var(--mirk-value); translate: -50% -50%;
|
|
424
|
+
width: 21px; height: 21px; pointer-events: none;
|
|
425
|
+
background-color: var(--mirk-slider-nub-bg);
|
|
426
|
+
border: 2px solid;
|
|
427
|
+
border-color: var(--mirk-slider-nub-hi) var(--mirk-slider-nub-lo) var(--mirk-slider-nub-lo) var(--mirk-slider-nub-hi);
|
|
428
|
+
}
|
|
429
|
+
.hcms-shell .mirk-slider__input:focus-visible ~ .mirk-slider__nub {
|
|
430
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.hcms-shell .mirk-slider--round .mirk-slider__track { height: 10px; border-radius: 9999px; }
|
|
434
|
+
.hcms-shell .mirk-slider--round .mirk-slider__nub {
|
|
435
|
+
width: 24px; height: 24px; border: none; border-radius: 9999px;
|
|
436
|
+
background-color: transparent;
|
|
437
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-slider-nub-lo), var(--mirk-slider-nub-hi));
|
|
438
|
+
}
|
|
439
|
+
.hcms-shell .mirk-slider--round .mirk-slider__nub::after {
|
|
440
|
+
content: ""; position: absolute; inset: 2px; border-radius: 9999px; background: var(--mirk-slider-nub-bg);
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.hcms-shell .mirk-slider--small { height: 24px; }
|
|
444
|
+
.hcms-shell .mirk-slider--small .mirk-slider__track { height: 8px; }
|
|
445
|
+
.hcms-shell .mirk-slider--small .mirk-slider__nub { width: 16px; height: 16px; }
|
|
446
|
+
.hcms-shell .mirk-slider--round.mirk-slider--small .mirk-slider__track { height: 7px; }
|
|
447
|
+
.hcms-shell .mirk-slider--round.mirk-slider--small .mirk-slider__nub { width: 18px; height: 18px; }
|
|
448
|
+
|
|
449
|
+
/* ============================ DATE ============================ */
|
|
450
|
+
.hcms-shell .mirk-date { position: relative; }
|
|
451
|
+
.hcms-shell .mirk-date__field {
|
|
452
|
+
width: 100%; background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
|
|
453
|
+
border: 1px solid var(--mirk-input-border);
|
|
454
|
+
padding: 6px 44px 9px 17px; font: inherit; font-size: 18px; line-height: 1.5;
|
|
455
|
+
border-radius: 0; outline: none;
|
|
456
|
+
}
|
|
457
|
+
.hcms-shell .mirk-date__field:focus-visible {
|
|
458
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
459
|
+
}
|
|
460
|
+
.hcms-shell .mirk-date__field::-webkit-calendar-picker-indicator {
|
|
461
|
+
opacity: 0; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; margin: 0; cursor: pointer;
|
|
462
|
+
}
|
|
463
|
+
.hcms-shell .mirk-date__field::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }
|
|
464
|
+
.hcms-shell .mirk-date__field::-webkit-clear-button { -webkit-appearance: none; appearance: none; }
|
|
465
|
+
.hcms-shell .mirk-date__icon {
|
|
466
|
+
pointer-events: none; position: absolute; right: 16px; top: 50%; translate: 0 -50%;
|
|
467
|
+
}
|
|
468
|
+
.hcms-shell .mirk-date--rounded .mirk-date__field { border-radius: var(--mirk-radius); }
|
|
469
|
+
|
|
470
|
+
.hcms-shell .mirk-date--small .mirk-date__field { padding: 4px 36px 4px 12px; font-size: 14px; }
|
|
471
|
+
.hcms-shell .mirk-date--small .mirk-date__field::-webkit-calendar-picker-indicator { width: 36px; }
|
|
472
|
+
.hcms-shell .mirk-date--small .mirk-date__icon { right: 12px; }
|
|
473
|
+
|
|
474
|
+
/* The native file/image inputs are visually hidden; their styled label drives
|
|
475
|
+
them, and the focus ring rides :has(:focus-visible) on button or container. */
|
|
476
|
+
.hcms-shell .mirk-file__input, .hcms-shell .mirk-image__input {
|
|
477
|
+
position: absolute; width: 1px; height: 1px;
|
|
478
|
+
padding: 0; margin: -1px; overflow: hidden;
|
|
479
|
+
clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
/* ============================ FILE ============================ */
|
|
483
|
+
.hcms-shell .mirk-file { display: flex; align-items: center; gap: 0.75rem; width: 100%; }
|
|
484
|
+
.hcms-shell .mirk-file__name {
|
|
485
|
+
color: var(--mirk-placeholder-color); font-size: 18px; line-height: 1.5;
|
|
486
|
+
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
487
|
+
}
|
|
488
|
+
.hcms-shell .mirk-file__name[data-filled] { color: var(--mirk-bevel-fg); }
|
|
489
|
+
|
|
490
|
+
/* Compact: a shared bordered container holds a smaller button + the name. */
|
|
491
|
+
.hcms-shell .mirk-file--compact {
|
|
492
|
+
padding: 4px 8px; background: var(--mirk-bevel-bg);
|
|
493
|
+
border: 1px solid var(--mirk-input-border); border-radius: 0;
|
|
494
|
+
}
|
|
495
|
+
.hcms-shell .mirk-file--compact:has(:focus-visible) {
|
|
496
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
497
|
+
}
|
|
498
|
+
/* The upload trigger is a .mirk-button; nudge it onto the container's left
|
|
499
|
+
border so the bevel sits flush (covers compact and round-compact). */
|
|
500
|
+
.hcms-shell .mirk-file--compact .mirk-button { margin-left: -1px; }
|
|
501
|
+
.hcms-shell .mirk-file--compact .mirk-file__name { font-size: 16px; }
|
|
502
|
+
.hcms-shell .mirk-file--compact.mirk-file--round { border-radius: 15px; }
|
|
503
|
+
|
|
504
|
+
/* Filled: the name slot becomes a link to the chosen file, beside a circular ×
|
|
505
|
+
to clear it: a 1px ring over a bevel fill that turns destructive on hover.
|
|
506
|
+
Empty keeps the placeholder span. */
|
|
507
|
+
.hcms-shell a.mirk-file__name { text-decoration: underline; text-underline-offset: 2px; }
|
|
508
|
+
.hcms-shell .mirk-file__remove {
|
|
509
|
+
appearance: none; -webkit-appearance: none; flex-shrink: 0;
|
|
510
|
+
width: 18px; height: 18px; border-radius: 50%;
|
|
511
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
512
|
+
margin: 0; padding: 0; cursor: pointer; line-height: 0;
|
|
513
|
+
color: var(--mirk-bevel-fg); background: var(--mirk-bevel-bg);
|
|
514
|
+
border: 1px solid var(--mirk-input-border);
|
|
515
|
+
}
|
|
516
|
+
.hcms-shell .mirk-file__remove svg { display: block; width: 66%; height: 66%; }
|
|
517
|
+
.hcms-shell .mirk-file__remove:hover { border-color: var(--mirk-destructive); color: var(--mirk-destructive); }
|
|
518
|
+
|
|
519
|
+
/* Small: tighter name + gap + remove ×; pair the trigger with mirk-button--small.
|
|
520
|
+
Composes with --compact (densest) and --round. */
|
|
521
|
+
.hcms-shell .mirk-file--small { gap: 0.5rem; }
|
|
522
|
+
.hcms-shell .mirk-file--small .mirk-file__name { font-size: 14px; }
|
|
523
|
+
.hcms-shell .mirk-file--small .mirk-file__remove { width: 16px; height: 16px; }
|
|
524
|
+
.hcms-shell .mirk-file--small.mirk-file--compact { padding: 3px 8px; }
|
|
525
|
+
.hcms-shell .mirk-file--small.mirk-file--compact .mirk-file__name { font-size: 13px; }
|
|
526
|
+
|
|
527
|
+
/* ============================ IMAGE ============================ */
|
|
528
|
+
.hcms-shell .mirk-image { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
529
|
+
.hcms-shell .mirk-image__frame {
|
|
530
|
+
position: relative; width: 120px; height: 120px; overflow: hidden; border-radius: 0;
|
|
531
|
+
display: flex; align-items: center; justify-content: center;
|
|
532
|
+
background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
|
|
533
|
+
color: var(--mirk-placeholder-color); font-size: 14px; line-height: 1.5;
|
|
534
|
+
}
|
|
535
|
+
.hcms-shell .mirk-image__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
536
|
+
.hcms-shell .mirk-image--rounded .mirk-image__frame { border-radius: var(--mirk-radius); }
|
|
537
|
+
/* The upload trigger is a .mirk-button; keep it hugging its label instead of
|
|
538
|
+
stretching to fill this column-flex container. */
|
|
539
|
+
.hcms-shell .mirk-image .mirk-button { width: fit-content; }
|
|
540
|
+
|
|
541
|
+
/* Compact: a focused 56px thumbnail upload. Empty shows a small upload button;
|
|
542
|
+
once an image is chosen the button hides and a thumbnail + corner × takes its
|
|
543
|
+
place. The frame clips the image (overflow hidden) while the thumb wrapper
|
|
544
|
+
stays visible, so the × can sit just outside the corner without being cut. */
|
|
545
|
+
.hcms-shell .mirk-image--compact { flex-direction: row; align-items: center; gap: 0; }
|
|
546
|
+
.hcms-shell .mirk-image__thumb { position: relative; display: inline-block; width: fit-content; margin: 0; line-height: 0; }
|
|
547
|
+
.hcms-shell .mirk-image--compact .mirk-image__frame {
|
|
548
|
+
width: 56px; height: 56px; overflow: hidden; border-radius: 0;
|
|
549
|
+
border: 1px solid var(--mirk-input-border);
|
|
550
|
+
}
|
|
551
|
+
.hcms-shell .mirk-image--compact.mirk-image--rounded .mirk-image__frame { border-radius: var(--mirk-radius); }
|
|
552
|
+
.hcms-shell .mirk-image--compact .mirk-image__preview {
|
|
553
|
+
position: static; inset: auto; width: 100%; height: 100%; display: block; object-fit: cover;
|
|
554
|
+
}
|
|
555
|
+
.hcms-shell .mirk-image__remove {
|
|
556
|
+
position: absolute; top: -7px; right: -7px;
|
|
557
|
+
width: 18px; height: 18px; border-radius: 50%; padding: 0;
|
|
558
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
559
|
+
appearance: none; -webkit-appearance: none; cursor: pointer; line-height: 0;
|
|
560
|
+
color: var(--mirk-bevel-fg); background: var(--mirk-bevel-bg);
|
|
561
|
+
border: 1px solid var(--mirk-input-border);
|
|
562
|
+
}
|
|
563
|
+
.hcms-shell .mirk-image__remove svg { display: block; width: 10px; height: 10px; }
|
|
564
|
+
.hcms-shell .mirk-image__remove:hover { color: var(--mirk-destructive); border-color: var(--mirk-destructive); }
|
|
565
|
+
|
|
566
|
+
/* ============================ TAGS ============================ */
|
|
567
|
+
.hcms-shell .mirk-tags {
|
|
568
|
+
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem;
|
|
569
|
+
background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
|
|
570
|
+
border-radius: 0; cursor: text;
|
|
571
|
+
}
|
|
572
|
+
.hcms-shell .mirk-tags:has(:focus-visible) {
|
|
573
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
574
|
+
}
|
|
575
|
+
.hcms-shell .mirk-tags__chip {
|
|
576
|
+
display: inline-flex; align-items: center; gap: 0.5rem;
|
|
577
|
+
padding: 2px 8px 2px 12px; font-size: 14px; line-height: 1.5;
|
|
578
|
+
color: var(--mirk-bevel-fg); background: var(--mirk-bevel-bg);
|
|
579
|
+
border: 2px solid;
|
|
580
|
+
border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
|
|
581
|
+
}
|
|
582
|
+
.hcms-shell .mirk-tags__remove {
|
|
583
|
+
appearance: none; -webkit-appearance: none;
|
|
584
|
+
margin: 0; padding: 0; border: 0; background: none; color: inherit;
|
|
585
|
+
cursor: pointer; font-size: 14px; line-height: 1;
|
|
586
|
+
}
|
|
587
|
+
.hcms-shell .mirk-tags__remove:hover { color: var(--mirk-destructive); }
|
|
588
|
+
.hcms-shell .mirk-tags__input {
|
|
589
|
+
appearance: none; -webkit-appearance: none;
|
|
590
|
+
border: 0; padding: 0;
|
|
591
|
+
flex: 1; min-width: 120px; background: transparent; color: var(--mirk-bevel-fg);
|
|
592
|
+
outline: none; font-size: 18px; line-height: 1.5;
|
|
593
|
+
}
|
|
594
|
+
.hcms-shell .mirk-tags__input::placeholder { color: var(--mirk-placeholder-color); }
|
|
595
|
+
|
|
596
|
+
.hcms-shell .mirk-tags--round { border-radius: 15px; }
|
|
597
|
+
.hcms-shell .mirk-tags--round .mirk-tags__chip {
|
|
598
|
+
padding: 2px; border: none; border-radius: 12px;
|
|
599
|
+
background-color: transparent;
|
|
600
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
|
|
601
|
+
}
|
|
602
|
+
.hcms-shell .mirk-tags__chip-inner {
|
|
603
|
+
display: inline-flex; align-items: center; gap: 0.5rem;
|
|
604
|
+
padding: 1px 8px 1px 12px; border-radius: 10px;
|
|
605
|
+
color: var(--mirk-bevel-fg); background-color: var(--mirk-bevel-bg);
|
|
606
|
+
background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.hcms-shell .mirk-tags--small { gap: 0.375rem; padding: 0.375rem; }
|
|
610
|
+
.hcms-shell .mirk-tags--small .mirk-tags__chip { padding: 1px 6px 1px 10px; font-size: 12px; }
|
|
611
|
+
.hcms-shell .mirk-tags--small .mirk-tags__remove { font-size: 12px; }
|
|
612
|
+
.hcms-shell .mirk-tags--small .mirk-tags__input { font-size: 14px; min-width: 90px; }
|
|
613
|
+
.hcms-shell .mirk-tags--small.mirk-tags--round { border-radius: 12px; }
|
|
614
|
+
.hcms-shell .mirk-tags--small.mirk-tags--round .mirk-tags__chip-inner { padding: 1px 6px 1px 10px; }
|
|
615
|
+
|
|
616
|
+
/* ============================ SORTABLE ============================ */
|
|
617
|
+
.hcms-shell .mirk-sortable { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
618
|
+
.hcms-shell .mirk-sortable__item {
|
|
619
|
+
display: flex; flex-direction: row; width: 100%;
|
|
620
|
+
background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
|
|
621
|
+
}
|
|
622
|
+
.hcms-shell .mirk-sortable__grip {
|
|
623
|
+
width: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
|
624
|
+
cursor: grab; border-right: 1px solid var(--mirk-input-border);
|
|
625
|
+
}
|
|
626
|
+
.hcms-shell .mirk-sortable__grip:active { cursor: grabbing; }
|
|
627
|
+
.hcms-shell .mirk-sortable__dots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
|
|
628
|
+
.hcms-shell .mirk-sortable__dot {
|
|
629
|
+
display: block; width: 4px; height: 4px; background: var(--mirk-sortable-dot);
|
|
630
|
+
box-shadow: 1px 0 0 0 var(--mirk-sortable-shadow), 0 1px 0 0 var(--mirk-sortable-shadow), 1px 1px 0 0 var(--mirk-sortable-shadow);
|
|
631
|
+
}
|
|
632
|
+
.hcms-shell .mirk-sortable__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
|
|
633
|
+
.hcms-shell .mirk-sortable__row { padding: 8px 17px 9px; }
|
|
634
|
+
.hcms-shell .mirk-sortable__row:not(:last-child) { border-bottom: 1px solid var(--mirk-input-border); }
|
|
635
|
+
.hcms-shell .mirk-sortable__label {
|
|
636
|
+
display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
|
|
637
|
+
margin-bottom: 2px; color: var(--mirk-sortable-label);
|
|
638
|
+
}
|
|
639
|
+
.hcms-shell .mirk-sortable__field {
|
|
640
|
+
width: 100%; background: transparent; color: var(--mirk-bevel-fg);
|
|
641
|
+
font-size: 18px; line-height: 1.5; outline: none;
|
|
642
|
+
}
|
|
643
|
+
.hcms-shell .mirk-sortable__field::placeholder { color: var(--mirk-sortable-placeholder); }
|
|
644
|
+
.hcms-shell .mirk-sortable__field:focus-visible {
|
|
645
|
+
outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
|
|
646
|
+
}
|
|
647
|
+
.hcms-shell .mirk-sortable--small { gap: 0.375rem; }
|
|
648
|
+
.hcms-shell .mirk-sortable--small .mirk-sortable__grip { width: 24px; }
|
|
649
|
+
.hcms-shell .mirk-sortable--small .mirk-sortable__row { padding: 5px 13px 6px; }
|
|
650
|
+
.hcms-shell .mirk-sortable--small .mirk-sortable__label { font-size: 10px; margin-bottom: 1px; }
|
|
651
|
+
.hcms-shell .mirk-sortable--small .mirk-sortable__field { font-size: 14px; }
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
/* Respect the machine — outside @layer components so it always wins. */
|
|
655
|
+
@media (prefers-reduced-motion: reduce) {
|
|
656
|
+
.hcms-shell .mirk-button--round, .hcms-shell .mirk-toggle__thumb { transition: none; }
|
|
657
|
+
.hcms-shell .mirk-button:active .mirk-button__label { translate: none; }
|
|
658
|
+
}
|
|
659
|
+
@media (forced-colors: active) {
|
|
660
|
+
.hcms-shell .mirk-button, .hcms-shell .mirk-select__field, .hcms-shell .mirk-checkbox__box, .hcms-shell .mirk-toggle__track { border: 1px solid ButtonText; }
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
/* ===== pixel-quiet overrides (hypercms-owned) ===== */
|
|
664
|
+
/* =====================================================================
|
|
665
|
+
Pixel Quiet — hypercms theme overrides (hypercms-owned).
|
|
666
|
+
|
|
667
|
+
Adapted from cms-sidebar/pixel-quiet/overrides.css. Two jobs:
|
|
668
|
+
1. Retune --mirk-* tokens, scoped to .hcms-shell.pixel-quiet (never :root).
|
|
669
|
+
2. Author the panel geometry + the functional chrome the static mockup
|
|
670
|
+
doesn't have (error banner, add/remove/move controls, the engine's
|
|
671
|
+
sortable cards, push / overlay / left-dock modes) on top of the
|
|
672
|
+
.hcms-* structural hooks.
|
|
673
|
+
|
|
674
|
+
This file is concatenated AFTER the scoped mirk base+components by
|
|
675
|
+
scripts/build-theme.js, so plain rules here win over mirk's @layer
|
|
676
|
+
components with zero !important. Loaded only inside .hcms-shell, so nothing
|
|
677
|
+
here leaks onto the host page.
|
|
678
|
+
===================================================================== */
|
|
679
|
+
|
|
680
|
+
/* ============================================================
|
|
681
|
+
TOKEN RETUNE — LIGHT (warm cream, gentle near-equal bevel)
|
|
682
|
+
============================================================ */
|
|
683
|
+
.hcms-shell.pixel-quiet {
|
|
684
|
+
color-scheme: light;
|
|
685
|
+
--mirk-canvas: #F7F2EA;
|
|
686
|
+
--mirk-bg: #F7F2EA;
|
|
687
|
+
--mirk-fg: #2B241B;
|
|
688
|
+
--mirk-accent: #efefe5;
|
|
689
|
+
--mirk-destructive: #C24A3A;
|
|
690
|
+
--mirk-focus-color: #C7AE93;
|
|
691
|
+
|
|
692
|
+
--mirk-bevel-bg: #FCF8F1;
|
|
693
|
+
--mirk-bevel-fg: #2B241B;
|
|
694
|
+
--mirk-bevel-tl: #F0E7D8;
|
|
695
|
+
--mirk-bevel-br: #E2D4BF;
|
|
696
|
+
--mirk-bevel-hover-bg: #F4ECDF;
|
|
697
|
+
--mirk-pill-inner-top: #FBF6EE;
|
|
698
|
+
--mirk-input-border: #D8C8AF;
|
|
699
|
+
--mirk-placeholder-color: #A8987F;
|
|
700
|
+
|
|
701
|
+
--mirk-mark-fg: #6B5942;
|
|
702
|
+
--mirk-toggle-bg: #EFDBBD;
|
|
703
|
+
--mirk-toggle-hi: #F4EADA;
|
|
704
|
+
--mirk-toggle-lo: #C2A87E;
|
|
705
|
+
--mirk-sortable-dot: #DDCBB0;
|
|
706
|
+
--mirk-sortable-shadow: #C9B493;
|
|
707
|
+
--mirk-sortable-label: #8C7B62;
|
|
708
|
+
--mirk-sortable-placeholder: #A8987F;
|
|
709
|
+
|
|
710
|
+
--mirk-radius: 5px;
|
|
711
|
+
--mirk-focus-offset: 2px;
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
/* dark token deltas, shared by the explicit .dark opt-in and OS preference */
|
|
715
|
+
.hcms-shell.pixel-quiet.dark,
|
|
716
|
+
.hcms-shell.pixel-quiet[data-theme="dark"] {
|
|
717
|
+
color-scheme: dark;
|
|
718
|
+
--mirk-canvas: #0B0C13;
|
|
719
|
+
--mirk-bg: #11131E;
|
|
720
|
+
--mirk-fg: #ECEAF2;
|
|
721
|
+
--mirk-accent: #1D1F2F;
|
|
722
|
+
--mirk-focus-color: #4A506B;
|
|
723
|
+
|
|
724
|
+
--mirk-bevel-bg: #1A1D2C;
|
|
725
|
+
--mirk-bevel-fg: #ECEAF2;
|
|
726
|
+
--mirk-bevel-tl: #2A2E42;
|
|
727
|
+
--mirk-bevel-br: #14182A;
|
|
728
|
+
--mirk-bevel-hover-bg: #202436;
|
|
729
|
+
--mirk-pill-inner-top: #202436;
|
|
730
|
+
--mirk-input-border: #353B52;
|
|
731
|
+
--mirk-placeholder-color: #6A7090;
|
|
732
|
+
|
|
733
|
+
--mirk-mark-fg: #C9CDE0;
|
|
734
|
+
--mirk-toggle-bg: #3E4660;
|
|
735
|
+
--mirk-toggle-hi: #4E567A;
|
|
736
|
+
--mirk-toggle-lo: #262B42;
|
|
737
|
+
--mirk-sortable-dot: #353B52;
|
|
738
|
+
--mirk-sortable-shadow: #0E1120;
|
|
739
|
+
--mirk-sortable-label: #8A90AB;
|
|
740
|
+
--mirk-sortable-placeholder: #6A7090;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
/* Auto-dark on OS preference, unless the shell pins light with .light */
|
|
744
|
+
@media (prefers-color-scheme: dark) {
|
|
745
|
+
.hcms-shell.pixel-quiet:not(.light):not([data-theme="light"]) {
|
|
746
|
+
color-scheme: dark;
|
|
747
|
+
--mirk-canvas: #0B0C13;
|
|
748
|
+
--mirk-bg: #11131E;
|
|
749
|
+
--mirk-fg: #ECEAF2;
|
|
750
|
+
--mirk-accent: #1D1F2F;
|
|
751
|
+
--mirk-focus-color: #4A506B;
|
|
752
|
+
|
|
753
|
+
--mirk-bevel-bg: #1A1D2C;
|
|
754
|
+
--mirk-bevel-fg: #ECEAF2;
|
|
755
|
+
--mirk-bevel-tl: #2A2E42;
|
|
756
|
+
--mirk-bevel-br: #14182A;
|
|
757
|
+
--mirk-bevel-hover-bg: #202436;
|
|
758
|
+
--mirk-pill-inner-top: #202436;
|
|
759
|
+
--mirk-input-border: #353B52;
|
|
760
|
+
--mirk-placeholder-color: #6A7090;
|
|
761
|
+
|
|
762
|
+
--mirk-mark-fg: #C9CDE0;
|
|
763
|
+
--mirk-toggle-bg: #3E4660;
|
|
764
|
+
--mirk-toggle-hi: #4E567A;
|
|
765
|
+
--mirk-toggle-lo: #262B42;
|
|
766
|
+
--mirk-sortable-dot: #353B52;
|
|
767
|
+
--mirk-sortable-shadow: #0E1120;
|
|
768
|
+
--mirk-sortable-label: #8A90AB;
|
|
769
|
+
--mirk-sortable-placeholder: #6A7090;
|
|
770
|
+
}
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
/* ============================================================
|
|
774
|
+
SHELL GEOMETRY — fixed, docked panel, single column.
|
|
775
|
+
position: fixed makes the shell a containing block so the absolute
|
|
776
|
+
minibar anchors to it; flex column so the body owns the scroll.
|
|
777
|
+
============================================================ */
|
|
778
|
+
.hcms-shell.pixel-quiet {
|
|
779
|
+
box-sizing: border-box;
|
|
780
|
+
position: fixed;
|
|
781
|
+
top: 0;
|
|
782
|
+
right: 0;
|
|
783
|
+
bottom: 0;
|
|
784
|
+
width: 380px;
|
|
785
|
+
max-width: 100vw;
|
|
786
|
+
z-index: 2147483000;
|
|
787
|
+
display: flex;
|
|
788
|
+
flex-direction: column;
|
|
789
|
+
color: var(--mirk-fg);
|
|
790
|
+
background: var(--mirk-bg);
|
|
791
|
+
border-left: 1px solid var(--mirk-input-border);
|
|
792
|
+
box-shadow: -16px 0 48px -28px rgba(43, 36, 27, 0.45);
|
|
793
|
+
}
|
|
794
|
+
.hcms-shell.pixel-quiet.dark {
|
|
795
|
+
box-shadow: -16px 0 48px -28px rgba(0, 0, 0, 0.6);
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
.hcms-shell.pixel-quiet.hcms-side-left {
|
|
799
|
+
right: auto;
|
|
800
|
+
left: 0;
|
|
801
|
+
border-left: 0;
|
|
802
|
+
border-right: 1px solid var(--mirk-input-border);
|
|
803
|
+
box-shadow: 16px 0 48px -28px rgba(43, 36, 27, 0.45);
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
/* Push the page over so docked content is never hidden underneath. */
|
|
807
|
+
body.hcms-open:not(.hcms-overlay) { padding-right: 380px; }
|
|
808
|
+
body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 380px; }
|
|
809
|
+
body.hcms-open.hcms-overlay { overflow: hidden; }
|
|
810
|
+
|
|
811
|
+
@media (max-width: 799px) {
|
|
812
|
+
.hcms-shell.pixel-quiet { width: 100vw; }
|
|
813
|
+
body.hcms-open:not(.hcms-overlay),
|
|
814
|
+
body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 0; }
|
|
815
|
+
body.hcms-open { overflow: hidden; }
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
/* ---------- SCROLL REGION — holds the (scrollable) header + form + save ---------- */
|
|
819
|
+
.hcms-shell-body {
|
|
820
|
+
flex: 1;
|
|
821
|
+
min-height: 0;
|
|
822
|
+
overflow-y: auto;
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
/* ---------- CONDENSED MINIBAR — appears once the full header scrolls away ---------- */
|
|
826
|
+
.hcms-shell-minibar {
|
|
827
|
+
position: absolute;
|
|
828
|
+
top: 0;
|
|
829
|
+
left: 0;
|
|
830
|
+
right: 0;
|
|
831
|
+
z-index: 2;
|
|
832
|
+
display: flex;
|
|
833
|
+
align-items: center;
|
|
834
|
+
justify-content: space-between;
|
|
835
|
+
gap: 12px;
|
|
836
|
+
padding: 9px 24px 10px;
|
|
837
|
+
background: var(--mirk-bg);
|
|
838
|
+
border-bottom: 1px solid var(--mirk-input-border);
|
|
839
|
+
opacity: 0;
|
|
840
|
+
transform: translateY(-100%);
|
|
841
|
+
pointer-events: none;
|
|
842
|
+
transition: opacity 140ms ease, transform 160ms ease;
|
|
843
|
+
}
|
|
844
|
+
.hcms-shell.is-condensed .hcms-shell-minibar {
|
|
845
|
+
opacity: 1;
|
|
846
|
+
transform: none;
|
|
847
|
+
pointer-events: auto;
|
|
848
|
+
}
|
|
849
|
+
.hcms-shell-minibar-title {
|
|
850
|
+
font-size: 14px;
|
|
851
|
+
line-height: 1;
|
|
852
|
+
color: var(--mirk-fg);
|
|
853
|
+
white-space: nowrap;
|
|
854
|
+
overflow: hidden;
|
|
855
|
+
text-overflow: ellipsis;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
/* ---------- HEADER (no underline rule — whitespace separates the bands) ---------- */
|
|
859
|
+
.hcms-shell-header {
|
|
860
|
+
flex-shrink: 0;
|
|
861
|
+
display: flex;
|
|
862
|
+
align-items: flex-start;
|
|
863
|
+
justify-content: space-between;
|
|
864
|
+
gap: 12px;
|
|
865
|
+
padding: 24px 24px 4px;
|
|
866
|
+
}
|
|
867
|
+
.hcms-shell-heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
|
|
868
|
+
.hcms-shell-eyebrow {
|
|
869
|
+
font-size: 11px;
|
|
870
|
+
text-transform: uppercase;
|
|
871
|
+
letter-spacing: 0.18em;
|
|
872
|
+
color: var(--mirk-placeholder-color);
|
|
873
|
+
}
|
|
874
|
+
.hcms-shell-title {
|
|
875
|
+
margin: 0;
|
|
876
|
+
font-size: 18px;
|
|
877
|
+
font-weight: 400;
|
|
878
|
+
line-height: 1.2;
|
|
879
|
+
color: var(--mirk-fg);
|
|
880
|
+
}
|
|
881
|
+
.hcms-shell-close.mirk-button {
|
|
882
|
+
flex-shrink: 0;
|
|
883
|
+
padding: 2px 9px 3px;
|
|
884
|
+
line-height: 1;
|
|
885
|
+
}
|
|
886
|
+
.hcms-shell-close .mirk-button__label { font-size: 16px; }
|
|
887
|
+
|
|
888
|
+
/* ---------- FORM — generous, even vertical rhythm ---------- */
|
|
889
|
+
.hcms-form {
|
|
890
|
+
display: flex;
|
|
891
|
+
flex-direction: column;
|
|
892
|
+
gap: 26px;
|
|
893
|
+
padding: 24px 24px 28px;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
/* one labeled scalar field */
|
|
897
|
+
.hcms-field { display: flex; flex-direction: column; gap: 9px; }
|
|
898
|
+
.hcms-field--row {
|
|
899
|
+
flex-direction: row;
|
|
900
|
+
align-items: center;
|
|
901
|
+
justify-content: space-between;
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
/* themed field label */
|
|
905
|
+
.hcms-label {
|
|
906
|
+
font-size: 11px;
|
|
907
|
+
text-transform: uppercase;
|
|
908
|
+
letter-spacing: 0.14em;
|
|
909
|
+
color: var(--mirk-sortable-label);
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
/* comfortable control padding + readable size, in mirk's own mono */
|
|
913
|
+
.hcms-shell.pixel-quiet .mirk-input,
|
|
914
|
+
.hcms-shell.pixel-quiet .mirk-textarea {
|
|
915
|
+
font-size: 15px;
|
|
916
|
+
padding: 9px 14px 10px;
|
|
917
|
+
}
|
|
918
|
+
.hcms-shell.pixel-quiet textarea.mirk-input { min-height: 76px; resize: vertical; }
|
|
919
|
+
.hcms-shell.pixel-quiet .mirk-select__field {
|
|
920
|
+
font-size: 15px;
|
|
921
|
+
padding: 8px 40px 9px 14px;
|
|
922
|
+
}
|
|
923
|
+
.hcms-shell.pixel-quiet .mirk-radio__label,
|
|
924
|
+
.hcms-shell.pixel-quiet .mirk-toggle__label,
|
|
925
|
+
.hcms-shell.pixel-quiet .mirk-tags__input { font-size: 15px; }
|
|
926
|
+
|
|
927
|
+
/* inline radio row */
|
|
928
|
+
.hcms-radio-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
|
|
929
|
+
|
|
930
|
+
/* chip-field (the @chips built-in): a borderless inline input that sizes to its
|
|
931
|
+
text, so chips read like static chips but stay inline-editable. */
|
|
932
|
+
.hcms-shell .mirk-tags__chip { padding-right: 6px; }
|
|
933
|
+
.hcms-shell .hcms-chip-field {
|
|
934
|
+
border: 0; background: transparent; color: inherit; font: inherit;
|
|
935
|
+
outline: none; min-width: 2ch; field-sizing: content; padding: 0;
|
|
936
|
+
}
|
|
937
|
+
.hcms-shell .hcms-chips .hcms-add { margin-top: 4px; align-self: flex-start; }
|
|
938
|
+
|
|
939
|
+
/* ---------- OBJECT GROUP — a quiet framed band, not a heavy card ---------- */
|
|
940
|
+
.hcms-object {
|
|
941
|
+
display: flex;
|
|
942
|
+
flex-direction: column;
|
|
943
|
+
gap: 16px;
|
|
944
|
+
}
|
|
945
|
+
.hcms-object-title {
|
|
946
|
+
margin: 0;
|
|
947
|
+
font-size: 11px;
|
|
948
|
+
font-weight: 400;
|
|
949
|
+
text-transform: uppercase;
|
|
950
|
+
letter-spacing: 0.14em;
|
|
951
|
+
color: var(--mirk-sortable-label);
|
|
952
|
+
}
|
|
953
|
+
.hcms-object-fields { display: flex; flex-direction: column; gap: 16px; }
|
|
954
|
+
|
|
955
|
+
/* ---------- SCALAR ARRAY — a calm list of mirk-input rows ---------- */
|
|
956
|
+
.hcms-array { display: flex; flex-direction: column; gap: 14px; }
|
|
957
|
+
.hcms-array-header { display: flex; align-items: baseline; justify-content: space-between; }
|
|
958
|
+
.hcms-array-title {
|
|
959
|
+
margin: 0;
|
|
960
|
+
font-size: 11px;
|
|
961
|
+
font-weight: 400;
|
|
962
|
+
text-transform: uppercase;
|
|
963
|
+
letter-spacing: 0.14em;
|
|
964
|
+
color: var(--mirk-sortable-label);
|
|
965
|
+
}
|
|
966
|
+
/* The generic stacked-list layout is unlayered, so it would beat mirk's
|
|
967
|
+
@layer-components rules on any slot that is also a mirk component. Exempt a
|
|
968
|
+
mirk tags box so it keeps mirk's own row-wrap layout and inner padding. */
|
|
969
|
+
.hcms-array-items:not(.mirk-tags) {
|
|
970
|
+
list-style: none;
|
|
971
|
+
margin: 0;
|
|
972
|
+
padding: 0;
|
|
973
|
+
display: flex;
|
|
974
|
+
flex-direction: column;
|
|
975
|
+
gap: 10px;
|
|
976
|
+
}
|
|
977
|
+
.hcms-array-item {
|
|
978
|
+
display: flex;
|
|
979
|
+
align-items: center;
|
|
980
|
+
gap: 8px;
|
|
981
|
+
}
|
|
982
|
+
.hcms-array-item .mirk-input { flex: 1; min-width: 0; }
|
|
983
|
+
|
|
984
|
+
/* ---------- OBJECT ARRAY — mirk-sortable cards from the engine markup ---------- */
|
|
985
|
+
.hcms-array--cards .hcms-array-items { gap: 14px; }
|
|
986
|
+
.hcms-card.mirk-sortable__item { background: var(--mirk-bevel-bg); position: relative; }
|
|
987
|
+
.hcms-card .hcms-card-fields { display: flex; flex-direction: column; flex: 1; min-width: 0; }
|
|
988
|
+
.hcms-card .hcms-field {
|
|
989
|
+
gap: 2px;
|
|
990
|
+
padding: 8px 14px 9px;
|
|
991
|
+
}
|
|
992
|
+
.hcms-card .hcms-field:not(:last-child) { border-bottom: 1px solid var(--mirk-input-border); }
|
|
993
|
+
.hcms-card .hcms-label { letter-spacing: 0.16em; }
|
|
994
|
+
/* fields inside a card read as quiet rows, not chunky boxed inputs */
|
|
995
|
+
.hcms-card .mirk-input,
|
|
996
|
+
.hcms-card .mirk-textarea {
|
|
997
|
+
border: none;
|
|
998
|
+
background: transparent;
|
|
999
|
+
padding: 0;
|
|
1000
|
+
font-size: 15px;
|
|
1001
|
+
}
|
|
1002
|
+
.hcms-card .mirk-input:focus-visible,
|
|
1003
|
+
.hcms-card .mirk-textarea:focus-visible { outline: none; }
|
|
1004
|
+
/* the remove × is pulled out to the card corner (below), so the controls row
|
|
1005
|
+
now only holds the sr-only move buttons — collapse it until one is focused. */
|
|
1006
|
+
.hcms-card-controls {
|
|
1007
|
+
display: flex;
|
|
1008
|
+
align-items: center;
|
|
1009
|
+
justify-content: flex-end;
|
|
1010
|
+
gap: 6px;
|
|
1011
|
+
padding: 0;
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
/* quiet × remove control, shared by scalar-array rows and object-array cards */
|
|
1015
|
+
.hcms-remove {
|
|
1016
|
+
flex-shrink: 0;
|
|
1017
|
+
appearance: none;
|
|
1018
|
+
border: 0;
|
|
1019
|
+
background: none;
|
|
1020
|
+
color: var(--mirk-placeholder-color);
|
|
1021
|
+
cursor: pointer;
|
|
1022
|
+
font-size: 16px;
|
|
1023
|
+
line-height: 1;
|
|
1024
|
+
padding: 2px 6px;
|
|
1025
|
+
}
|
|
1026
|
+
.hcms-remove:hover { color: var(--mirk-destructive); }
|
|
1027
|
+
.hcms-remove[hidden] { display: none; }
|
|
1028
|
+
|
|
1029
|
+
/* object-array card: the delete control is a square corner button pinned
|
|
1030
|
+
top-right, carrying the card's own 1px border + a crisp-line × icon. */
|
|
1031
|
+
.hcms-remove--card {
|
|
1032
|
+
position: absolute;
|
|
1033
|
+
top: -1px;
|
|
1034
|
+
right: -1px;
|
|
1035
|
+
width: 18px;
|
|
1036
|
+
height: 18px;
|
|
1037
|
+
padding: 0;
|
|
1038
|
+
display: flex;
|
|
1039
|
+
align-items: center;
|
|
1040
|
+
justify-content: center;
|
|
1041
|
+
border: 1px solid var(--mirk-input-border);
|
|
1042
|
+
background: var(--mirk-bevel-bg);
|
|
1043
|
+
color: var(--mirk-placeholder-color);
|
|
1044
|
+
}
|
|
1045
|
+
.hcms-remove--card:hover { border-color: var(--mirk-destructive); }
|
|
1046
|
+
.hcms-remove--card .hcms-x { width: 64%; height: 64%; display: block; }
|
|
1047
|
+
|
|
1048
|
+
/* "+ Add" — quiet, pinned left */
|
|
1049
|
+
.hcms-add.mirk-button { align-self: flex-start; }
|
|
1050
|
+
|
|
1051
|
+
/* ---------- UPLOAD COMPONENTS (@file / @image) ----------
|
|
1052
|
+
Built on the kit's mirk-file / mirk-image--compact chrome. The native picker
|
|
1053
|
+
is visually hidden but focusable (the mirk-button label is the visible
|
|
1054
|
+
trigger and rings via :has(:focus-visible)); it is NOT .mirk-*__input, so the
|
|
1055
|
+
vendored mirk runtime never handles it. The empty/filled chrome is driven by
|
|
1056
|
+
the bound leaf's value attribute (src/href) in CSS — no JS state to desync. */
|
|
1057
|
+
.hcms-upload input[type="file"] {
|
|
1058
|
+
position: absolute;
|
|
1059
|
+
width: 1px;
|
|
1060
|
+
height: 1px;
|
|
1061
|
+
padding: 0;
|
|
1062
|
+
margin: -1px;
|
|
1063
|
+
overflow: hidden;
|
|
1064
|
+
clip: rect(0, 0, 0, 0);
|
|
1065
|
+
white-space: nowrap;
|
|
1066
|
+
border: 0;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
/* @image: show the upload button until the bound <img> carries a real src. */
|
|
1070
|
+
.hcms-upload--image .mirk-image__thumb { display: none; }
|
|
1071
|
+
.hcms-upload--image:has(.mirk-image__preview[src]:not([src=""])) .mirk-image__upload { display: none; }
|
|
1072
|
+
.hcms-upload--image:has(.mirk-image__preview[src]:not([src=""])) .mirk-image__thumb { display: inline-block; }
|
|
1073
|
+
|
|
1074
|
+
/* @file: reveal the clear × and the filename only once the bound <a> has href. */
|
|
1075
|
+
.hcms-upload--file .hcms-upload-clear { display: none; }
|
|
1076
|
+
.hcms-upload--file:has(a.mirk-file__name[href]:not([href=""])) .hcms-upload-clear { display: inline-flex; }
|
|
1077
|
+
/* A filled filename uses the bright foreground (the kit's [data-filled] look),
|
|
1078
|
+
driven by the bound href so there's no JS attribute to keep in sync — the
|
|
1079
|
+
vendored runtime that would otherwise stamp data-filled is inert here. */
|
|
1080
|
+
.hcms-upload--file:has(a.mirk-file__name[href]:not([href=""])) a.mirk-file__name {
|
|
1081
|
+
color: var(--mirk-bevel-fg);
|
|
1082
|
+
}
|
|
1083
|
+
.hcms-upload--file a.mirk-file__name:empty {
|
|
1084
|
+
text-decoration: none;
|
|
1085
|
+
cursor: default;
|
|
1086
|
+
}
|
|
1087
|
+
.hcms-upload--file a.mirk-file__name:empty::after {
|
|
1088
|
+
content: "No file chosen";
|
|
1089
|
+
color: var(--mirk-placeholder-color);
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
/* clear-× (vendored-inert; data-hcms-action, never .mirk-*__remove). Bare × for
|
|
1093
|
+
@file, a pinned corner badge for @image — mirroring .hcms-remove / --card. */
|
|
1094
|
+
.hcms-upload-clear {
|
|
1095
|
+
flex-shrink: 0;
|
|
1096
|
+
appearance: none;
|
|
1097
|
+
border: 0;
|
|
1098
|
+
background: none;
|
|
1099
|
+
color: var(--mirk-placeholder-color);
|
|
1100
|
+
cursor: pointer;
|
|
1101
|
+
line-height: 0;
|
|
1102
|
+
padding: 2px 4px;
|
|
1103
|
+
display: inline-flex;
|
|
1104
|
+
align-items: center;
|
|
1105
|
+
justify-content: center;
|
|
1106
|
+
}
|
|
1107
|
+
.hcms-upload-clear:hover { color: var(--mirk-destructive); }
|
|
1108
|
+
.hcms-upload-clear .hcms-x { display: block; width: 14px; height: 14px; }
|
|
1109
|
+
|
|
1110
|
+
.hcms-upload-clear--badge {
|
|
1111
|
+
position: absolute;
|
|
1112
|
+
top: -7px;
|
|
1113
|
+
right: -7px;
|
|
1114
|
+
width: 18px;
|
|
1115
|
+
height: 18px;
|
|
1116
|
+
padding: 0;
|
|
1117
|
+
border-radius: 50%;
|
|
1118
|
+
border: 1px solid var(--mirk-input-border);
|
|
1119
|
+
background: var(--mirk-bevel-bg);
|
|
1120
|
+
color: var(--mirk-bevel-fg);
|
|
1121
|
+
}
|
|
1122
|
+
.hcms-upload-clear--badge:hover { color: var(--mirk-destructive); border-color: var(--mirk-destructive); }
|
|
1123
|
+
.hcms-upload-clear--badge .hcms-x { width: 10px; height: 10px; }
|
|
1124
|
+
|
|
1125
|
+
/* ---------- ERROR BANNER + inline errors ---------- */
|
|
1126
|
+
.hcms-shell-error,
|
|
1127
|
+
.hcms-error {
|
|
1128
|
+
font-size: 12px;
|
|
1129
|
+
line-height: 1.45;
|
|
1130
|
+
color: var(--mirk-destructive);
|
|
1131
|
+
background: var(--mirk-bevel-bg);
|
|
1132
|
+
border: 1px solid var(--mirk-destructive);
|
|
1133
|
+
padding: 8px 12px;
|
|
1134
|
+
}
|
|
1135
|
+
.hcms-shell-error { margin: 0 24px; }
|
|
1136
|
+
.hcms-error { margin-top: 6px; }
|
|
1137
|
+
.hcms-shell-error[hidden],
|
|
1138
|
+
.hcms-error[hidden] { display: none; }
|
|
1139
|
+
|
|
1140
|
+
/* ---------- SAVE (sits at the end of the scrolling form, not pinned) ---------- */
|
|
1141
|
+
.hcms-shell-footer {
|
|
1142
|
+
display: flex;
|
|
1143
|
+
justify-content: flex-end;
|
|
1144
|
+
padding: 4px 24px 28px;
|
|
1145
|
+
}
|
|
1146
|
+
.hcms-shell-footer[hidden] { display: none; }
|
|
1147
|
+
|
|
1148
|
+
/* ---------- sr-only move buttons: hidden, visible on keyboard focus ---------- */
|
|
1149
|
+
.hcms-sr-only {
|
|
1150
|
+
position: absolute;
|
|
1151
|
+
width: 1px;
|
|
1152
|
+
height: 1px;
|
|
1153
|
+
padding: 0;
|
|
1154
|
+
margin: -1px;
|
|
1155
|
+
overflow: hidden;
|
|
1156
|
+
clip: rect(0, 0, 0, 0);
|
|
1157
|
+
white-space: nowrap;
|
|
1158
|
+
border: 0;
|
|
1159
|
+
}
|
|
1160
|
+
.hcms-sr-only:focus {
|
|
1161
|
+
position: static;
|
|
1162
|
+
width: auto;
|
|
1163
|
+
height: auto;
|
|
1164
|
+
padding: 2px 6px;
|
|
1165
|
+
margin: 0 2px;
|
|
1166
|
+
overflow: visible;
|
|
1167
|
+
clip: auto;
|
|
1168
|
+
white-space: normal;
|
|
1169
|
+
background: var(--mirk-bevel-bg);
|
|
1170
|
+
border: 1px solid var(--mirk-input-border);
|
|
1171
|
+
color: var(--mirk-fg);
|
|
1172
|
+
font-size: 12px;
|
|
1173
|
+
cursor: pointer;
|
|
1174
|
+
}
|
|
1175
|
+
.hcms-sr-only[hidden] { display: none; }
|