@kolkrabbi/kol-theme 0.165.0 → 0.167.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/kol-components-organisms.css +26 -0
- package/kol-opaque.css +36 -0
- package/package.json +1 -1
|
@@ -520,6 +520,32 @@
|
|
|
520
520
|
background: var(--kol-surface-primary);
|
|
521
521
|
}
|
|
522
522
|
|
|
523
|
+
/* ON A PHONE THE PICKER IS A FULL-HEIGHT SHEET (2026-10-07). The card had no phone layout:
|
|
524
|
+
* at 390 it kept its 64rem ask, overflowed the viewport sideways and the header ran off the
|
|
525
|
+
* right edge. The sheet takes the viewport — the overlay's 24px lane goes, the border and the
|
|
526
|
+
* radius go — the body still owns the scroll, and tiles pack two across. The same cut the
|
|
527
|
+
* sheet's own tables use (`.kol-table-cell-*` above). */
|
|
528
|
+
@media (max-width: 768px) {
|
|
529
|
+
.kol-overlay:has(> .kol-overlay-sheet > .kol-media-picker) { padding: 0; }
|
|
530
|
+
.kol-overlay-sheet:has(> .kol-media-picker) { width: 100%; }
|
|
531
|
+
.kol-media-picker {
|
|
532
|
+
--kol-media-tile-min: 8rem;
|
|
533
|
+
width: 100%;
|
|
534
|
+
height: 100dvh;
|
|
535
|
+
max-height: none;
|
|
536
|
+
border: 0;
|
|
537
|
+
border-radius: 0;
|
|
538
|
+
padding: var(--kol-spacing-12) var(--kol-spacing-4) var(--kol-spacing-4);
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/* MediaTileGallery's grid — `cols` from `sm` up, two across below it (08-breakpoints rule 6; found
|
|
543
|
+
* on apps/media/viewer at 390, 2026-10-08: four 75px tiles). */
|
|
544
|
+
.kol-media-tiles { grid-template-columns: repeat(var(--kol-media-tiles-cols, 4), minmax(0, 1fr)); }
|
|
545
|
+
@media (max-width: 640px) {
|
|
546
|
+
.kol-media-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
547
|
+
}
|
|
548
|
+
|
|
523
549
|
/* The browser is the same body with no card around it — in flow, it takes the
|
|
524
550
|
* width the consumer gives it. Tiles at 260 (MediaLibraryReconcile, kol-r2b2
|
|
525
551
|
* 2026-08-26 — FileList's `minmax(260px, 1fr)`; the picker keeps 10rem
|
package/kol-opaque.css
CHANGED
|
@@ -182,6 +182,42 @@
|
|
|
182
182
|
.text-oq-inverse-88 { color: var(--kol-oq-inverse-88); }
|
|
183
183
|
.text-oq-inverse-96 { color: var(--kol-oq-inverse-96); }
|
|
184
184
|
|
|
185
|
+
/* ==============================================================================
|
|
186
|
+
* CLASSES — Text hover (standard + inverse)
|
|
187
|
+
* ============================================================================== */
|
|
188
|
+
|
|
189
|
+
.hover\:text-oq-01:hover { color: var(--kol-oq-01); }
|
|
190
|
+
.hover\:text-oq-02:hover { color: var(--kol-oq-02); }
|
|
191
|
+
.hover\:text-oq-04:hover { color: var(--kol-oq-04); }
|
|
192
|
+
.hover\:text-oq-08:hover { color: var(--kol-oq-08); }
|
|
193
|
+
.hover\:text-oq-12:hover { color: var(--kol-oq-12); }
|
|
194
|
+
.hover\:text-oq-16:hover { color: var(--kol-oq-16); }
|
|
195
|
+
.hover\:text-oq-24:hover { color: var(--kol-oq-24); }
|
|
196
|
+
.hover\:text-oq-32:hover { color: var(--kol-oq-32); }
|
|
197
|
+
.hover\:text-oq-40:hover { color: var(--kol-oq-40); }
|
|
198
|
+
.hover\:text-oq-48:hover { color: var(--kol-oq-48); }
|
|
199
|
+
.hover\:text-oq-64:hover { color: var(--kol-oq-64); }
|
|
200
|
+
.hover\:text-oq-72:hover { color: var(--kol-oq-72); }
|
|
201
|
+
.hover\:text-oq-80:hover { color: var(--kol-oq-80); }
|
|
202
|
+
.hover\:text-oq-88:hover { color: var(--kol-oq-88); }
|
|
203
|
+
.hover\:text-oq-96:hover { color: var(--kol-oq-96); }
|
|
204
|
+
|
|
205
|
+
.hover\:text-oq-inverse-01:hover { color: var(--kol-oq-inverse-01); }
|
|
206
|
+
.hover\:text-oq-inverse-02:hover { color: var(--kol-oq-inverse-02); }
|
|
207
|
+
.hover\:text-oq-inverse-04:hover { color: var(--kol-oq-inverse-04); }
|
|
208
|
+
.hover\:text-oq-inverse-08:hover { color: var(--kol-oq-inverse-08); }
|
|
209
|
+
.hover\:text-oq-inverse-12:hover { color: var(--kol-oq-inverse-12); }
|
|
210
|
+
.hover\:text-oq-inverse-16:hover { color: var(--kol-oq-inverse-16); }
|
|
211
|
+
.hover\:text-oq-inverse-24:hover { color: var(--kol-oq-inverse-24); }
|
|
212
|
+
.hover\:text-oq-inverse-32:hover { color: var(--kol-oq-inverse-32); }
|
|
213
|
+
.hover\:text-oq-inverse-40:hover { color: var(--kol-oq-inverse-40); }
|
|
214
|
+
.hover\:text-oq-inverse-48:hover { color: var(--kol-oq-inverse-48); }
|
|
215
|
+
.hover\:text-oq-inverse-64:hover { color: var(--kol-oq-inverse-64); }
|
|
216
|
+
.hover\:text-oq-inverse-72:hover { color: var(--kol-oq-inverse-72); }
|
|
217
|
+
.hover\:text-oq-inverse-80:hover { color: var(--kol-oq-inverse-80); }
|
|
218
|
+
.hover\:text-oq-inverse-88:hover { color: var(--kol-oq-inverse-88); }
|
|
219
|
+
.hover\:text-oq-inverse-96:hover { color: var(--kol-oq-inverse-96); }
|
|
220
|
+
|
|
185
221
|
/* ==============================================================================
|
|
186
222
|
* CLASSES — Border opacity (standard + inverse)
|
|
187
223
|
* ============================================================================== */
|