@kolkrabbi/kol-theme 0.196.0 → 0.198.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-atoms.css +13 -0
- package/kol-components-organisms.css +48 -0
- package/kol-components-shell.css +2 -2
- package/kol-components-time.css +172 -0
- package/kol-components-workshop.css +2 -4
- package/kol-theme.css +1 -0
- package/package.json +1 -1
package/kol-components-atoms.css
CHANGED
|
@@ -1431,3 +1431,16 @@ a.kol-icon-frame {
|
|
|
1431
1431
|
background: var(--kol-oq-08);
|
|
1432
1432
|
color: var(--kol-fg-emphasis);
|
|
1433
1433
|
}
|
|
1434
|
+
|
|
1435
|
+
/* ───── THE SCROLL FADE — one rule for every box that scrolls vertically and clips (TimeSetAndSiteRailFade, 2026-10-29 —
|
|
1436
|
+
user: "FADE WHAT VERTICALLY SCROLLS into clipping!!!"). The head fades once the box is scrolled, the foot while more lies
|
|
1437
|
+
below; kol-component's `useScrollFade` sets the two attributes. The site rail, the app rail and the workshop's rails
|
|
1438
|
+
wear it; their foot-only masks (2026-10-01, 2026-10-28) are this rule now. ───── */
|
|
1439
|
+
.kol-scroll-fade {
|
|
1440
|
+
--kol-scroll-fade-top: 0px;
|
|
1441
|
+
--kol-scroll-fade-bottom: 0px;
|
|
1442
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--kol-scroll-fade-top), #000 calc(100% - var(--kol-scroll-fade-bottom)), transparent 100%);
|
|
1443
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--kol-scroll-fade-top), #000 calc(100% - var(--kol-scroll-fade-bottom)), transparent 100%);
|
|
1444
|
+
}
|
|
1445
|
+
.kol-scroll-fade[data-fade-top] { --kol-scroll-fade-top: 3rem; }
|
|
1446
|
+
.kol-scroll-fade[data-fade-bottom] { --kol-scroll-fade-bottom: 3rem; }
|
|
@@ -993,3 +993,51 @@
|
|
|
993
993
|
.kol-tool-palette .kol-btn-quiet { opacity: 1; }
|
|
994
994
|
.kol-tool-palette .kol-btn:disabled { opacity: var(--kol-opacity-disabled); }
|
|
995
995
|
.kol-tool-palette .kol-btn:not(:disabled):not(.kol-dd-trigger):active { transform: scale(0.92); }
|
|
996
|
+
|
|
997
|
+
/* ── Kanban — .kol-kanban (DocumentLibraryAndBoardParts, kol-website 2026-10-29) ─────────────────
|
|
998
|
+
* record's board: one column per stage from md, stacked on a phone. The column count is the
|
|
999
|
+
* component's (`--kol-kanban-cols`); the drop states are the card's and the column's. */
|
|
1000
|
+
.kol-kanban {
|
|
1001
|
+
display: grid;
|
|
1002
|
+
gap: 12px;
|
|
1003
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1004
|
+
}
|
|
1005
|
+
@media (min-width: 768px) {
|
|
1006
|
+
.kol-kanban { grid-template-columns: repeat(var(--kol-kanban-cols, 4), minmax(0, 1fr)); }
|
|
1007
|
+
}
|
|
1008
|
+
.kol-kanban-column {
|
|
1009
|
+
display: flex;
|
|
1010
|
+
flex-direction: column;
|
|
1011
|
+
gap: 8px;
|
|
1012
|
+
min-height: 10rem;
|
|
1013
|
+
padding: 8px;
|
|
1014
|
+
border: 1px solid var(--kol-fg-08);
|
|
1015
|
+
border-radius: 4px;
|
|
1016
|
+
transition: background-color 150ms;
|
|
1017
|
+
}
|
|
1018
|
+
.kol-kanban-column.is-over { background-color: var(--kol-fg-04); }
|
|
1019
|
+
.kol-kanban-card {
|
|
1020
|
+
display: flex;
|
|
1021
|
+
flex-direction: column;
|
|
1022
|
+
gap: 6px;
|
|
1023
|
+
padding: 8px;
|
|
1024
|
+
border: 1px solid var(--kol-fg-08);
|
|
1025
|
+
border-radius: 4px;
|
|
1026
|
+
background-color: var(--kol-surface-secondary);
|
|
1027
|
+
cursor: grab;
|
|
1028
|
+
}
|
|
1029
|
+
.kol-kanban-card:active { cursor: grabbing; }
|
|
1030
|
+
.kol-kanban-card.is-drop-target { box-shadow: 0 -2px 0 0 var(--kol-fg-64); }
|
|
1031
|
+
|
|
1032
|
+
/* ── SortableGrid — .kol-sortable-grid (the same ticket) ─────────────────────────────────────────
|
|
1033
|
+
* record's Projects grid: auto-fill tracks at least `--kol-sortable-min` wide; the item being dragged
|
|
1034
|
+
* fades, the one under it takes a dashed ring (record's kol-dashboard.css, carried). */
|
|
1035
|
+
.kol-sortable-grid {
|
|
1036
|
+
display: grid;
|
|
1037
|
+
gap: 16px;
|
|
1038
|
+
grid-template-columns: repeat(auto-fill, minmax(min(var(--kol-sortable-min, 280px), 100%), 1fr));
|
|
1039
|
+
}
|
|
1040
|
+
.kol-sortable-item.is-dragging { opacity: 0.35; }
|
|
1041
|
+
.kol-sortable-item.is-drop-target { outline: 2px dashed currentColor; outline-offset: 3px; border-radius: 4px; }
|
|
1042
|
+
.kol-sortable-handle { cursor: grab; }
|
|
1043
|
+
.kol-sortable-handle:active { cursor: grabbing; }
|
package/kol-components-shell.css
CHANGED
|
@@ -130,9 +130,9 @@
|
|
|
130
130
|
.kol-shell-rail-list::-webkit-scrollbar {
|
|
131
131
|
display: none;
|
|
132
132
|
}
|
|
133
|
+
/* the fade itself is `.kol-scroll-fade` (kol-components-atoms.css) — head and foot by scroll state; this keeps the last
|
|
134
|
+
row clear of it */
|
|
133
135
|
.kol-shell-rail-list--fade {
|
|
134
|
-
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
|
|
135
|
-
mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
|
|
136
136
|
padding-bottom: 3rem;
|
|
137
137
|
}
|
|
138
138
|
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
/* The timeline views (view.js). Plain CSS on purpose: the same file styles the dev page and the artifact, which has no
|
|
2
|
+
* Tailwind, and every rule targets generated HTML. Each host sets the --tl-* colours and fonts on .tl.
|
|
3
|
+
*
|
|
4
|
+
* kol-atlas's apps/workspace/src/timeline/timeline.css, carried verbatim into kol-theme (TimeSetAndSiteRailFade, 2026-10-29),
|
|
5
|
+
* with the --tl-* tokens mapped to KOL's here (atlas mapped them to its --ws palette in components/Timeline.jsx) and the
|
|
6
|
+
* Day view's rules at the foot. A host can still set any --tl-* on .tl. */
|
|
7
|
+
.tl {
|
|
8
|
+
--tl-bg: var(--kol-surface-primary); --tl-surface: var(--kol-surface-primary); --tl-ink: var(--kol-surface-on-primary);
|
|
9
|
+
--tl-muted: var(--kol-fg-64); --tl-line: var(--kol-fg-12); --tl-soft: var(--kol-fg-04); --tl-accent: var(--kol-accent-primary);
|
|
10
|
+
/* three milestones, three steps: the accent (in KOL the ink), 64 % ink, 14 % ink — atlas's accent and ink were two colours */
|
|
11
|
+
--tl-m1: var(--kol-accent-primary); --tl-on-m1: var(--kol-accent-on-primary); --tl-m2: var(--kol-fg-64); --tl-on-m2: var(--kol-surface-primary);
|
|
12
|
+
--tl-m3: color-mix(in srgb, var(--kol-surface-on-primary) 14%, transparent); --tl-on-m3: var(--kol-surface-on-primary);
|
|
13
|
+
--tl-hatch: color-mix(in srgb, var(--kol-surface-on-primary) 22%, transparent); --tl-weekend: var(--kol-fg-04);
|
|
14
|
+
--tl-break: color-mix(in srgb, var(--kol-accent-primary) 16%, transparent); --tl-today: var(--kol-status-danger, #bc583f);
|
|
15
|
+
--tl-sans: var(--kol-font-family-sans);
|
|
16
|
+
}
|
|
17
|
+
.tl { --tl-row: 34px; color: var(--tl-ink); font: 14px/1.45 var(--tl-sans); font-variant-numeric: tabular-nums; }
|
|
18
|
+
.tl *, .tl *::before, .tl *::after { box-sizing: border-box; }
|
|
19
|
+
.tl :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } /* :where keeps the reset below the milestone colours */
|
|
20
|
+
.tl button:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }
|
|
21
|
+
|
|
22
|
+
/* bar: switcher, title, nav */
|
|
23
|
+
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 14px; }
|
|
24
|
+
.tl-switch { display: inline-flex; border: 1px solid var(--tl-line); border-radius: 999px; padding: 3px; }
|
|
25
|
+
.tl-switch button { padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--tl-muted); }
|
|
26
|
+
.tl-switch button[aria-pressed="true"] { background: var(--tl-ink); color: var(--tl-bg); }
|
|
27
|
+
.tl-title { font-weight: 600; }
|
|
28
|
+
.tl-nav { display: inline-flex; align-items: center; gap: 10px; }
|
|
29
|
+
.tl-nav > button { min-width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--tl-line); text-align: center; font-size: 16px; }
|
|
30
|
+
.tl-nav > .tl-todayb { padding: 0 12px; font-size: 13px; }
|
|
31
|
+
|
|
32
|
+
/* legend */
|
|
33
|
+
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--tl-muted); margin-bottom: 18px; }
|
|
34
|
+
.tl-legend > span { display: inline-flex; align-items: center; gap: 6px; }
|
|
35
|
+
.tl-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; flex: none; }
|
|
36
|
+
.tl-sw-break { background: var(--tl-break); }
|
|
37
|
+
.tl-sw-today { width: 2px; height: 12px; border-radius: 0; background: var(--tl-today); }
|
|
38
|
+
|
|
39
|
+
/* milestone colours; the optional add-on is hatched */
|
|
40
|
+
.tl-m1 { background: var(--tl-m1); color: var(--tl-on-m1); }
|
|
41
|
+
.tl-m2 { background: var(--tl-m2); color: var(--tl-on-m2); }
|
|
42
|
+
.tl-m3 { background: var(--tl-m3); color: var(--tl-on-m3); }
|
|
43
|
+
.tl-opt { background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--tl-hatch) 5px 7px); }
|
|
44
|
+
|
|
45
|
+
/* marks */
|
|
46
|
+
.tl-dia { display: inline-block; width: 9px; height: 9px; background: var(--tl-ink); transform: rotate(45deg); flex: none; }
|
|
47
|
+
.tl-confirm { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tl-muted); font-weight: 400; white-space: nowrap; margin-left: 8px; }
|
|
48
|
+
.tl-legend .tl-confirm { margin-left: 0; font-size: 12px; }
|
|
49
|
+
.tl-confirm i { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-accent); display: inline-block; }
|
|
50
|
+
.tl-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--tl-line); color: var(--tl-muted); }
|
|
51
|
+
.tl-num { color: var(--tl-muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
|
|
52
|
+
.tl-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); margin: 22px 0 8px; }
|
|
53
|
+
|
|
54
|
+
/* body + detail panel */
|
|
55
|
+
.tl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
|
|
56
|
+
.tl-body.has-detail { grid-template-columns: minmax(0, 1fr) 300px; }
|
|
57
|
+
@media (max-width: 900px) { .tl-body.has-detail { grid-template-columns: minmax(0, 1fr); } }
|
|
58
|
+
/* on Timeline the chart keeps its width: the detail floats over its right side */
|
|
59
|
+
.tl-body.is-timeline { position: relative; }
|
|
60
|
+
.tl-body.is-timeline.has-detail { grid-template-columns: minmax(0, 1fr); }
|
|
61
|
+
@media (min-width: 901px) { .tl-body.is-timeline .tl-detail { position: absolute; top: 56px; right: 12px; width: 300px; z-index: 3; box-shadow: 0 12px 32px rgb(0 0 0 / .16); } }
|
|
62
|
+
.tl-detail { position: sticky; top: 16px; border: 1px solid var(--tl-line); border-radius: 12px; padding: 18px; background: var(--tl-surface); }
|
|
63
|
+
.tl-detail h3 { margin: 4px 0 10px; font-size: 18px; line-height: 1.3; }
|
|
64
|
+
.tl-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; font-size: 20px !important; text-align: center !important; color: var(--tl-muted) !important; }
|
|
65
|
+
.tl-eyebrow { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); }
|
|
66
|
+
.tl-meta { margin: 6px 0; font-size: 13px; color: var(--tl-muted); }
|
|
67
|
+
.tl-meta b { color: var(--tl-ink); }
|
|
68
|
+
.tl-items { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--tl-line); font-size: 13px; }
|
|
69
|
+
.tl-items li { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; flex-wrap: wrap; }
|
|
70
|
+
.tl-items .tl-num { margin-right: 2px; min-width: 38px; }
|
|
71
|
+
.tl-items .tl-dia { width: 7px; height: 7px; margin-right: 2px; }
|
|
72
|
+
.tl-items em { font-style: normal; color: var(--tl-muted); }
|
|
73
|
+
|
|
74
|
+
/* ---------- Timeline ---------- */
|
|
75
|
+
.tl-gantt { overflow-x: auto; border: 1px solid var(--tl-line); border-radius: 12px; }
|
|
76
|
+
.tl-ggrid { display: grid; grid-template-columns: 230px minmax(820px, 1fr); }
|
|
77
|
+
.tl-gl { position: sticky; left: 0; z-index: 2; background: var(--tl-bg); border-right: 1px solid var(--tl-line); }
|
|
78
|
+
.tl-gh { height: 46px; border-bottom: 1px solid var(--tl-line); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); padding: 16px 12px 0; }
|
|
79
|
+
.tl-lab { display: flex; align-items: center; width: 100%; padding: 0 12px; font-size: 13px; white-space: nowrap; overflow: hidden; }
|
|
80
|
+
.tl-lab-ms { font-size: 13px; background: var(--tl-soft); gap: 6px; }
|
|
81
|
+
button.tl-lab:hover, button.tl-lab.is-sel { background: var(--tl-soft); }
|
|
82
|
+
.tl-scale { position: relative; padding: 0; }
|
|
83
|
+
.tl-mo { position: absolute; top: 6px; padding-left: 6px; font-size: 12px; font-weight: 600; color: var(--tl-ink); text-transform: none; letter-spacing: 0; white-space: nowrap; border-left: 1px solid var(--tl-line); }
|
|
84
|
+
.tl-wk { position: absolute; top: 26px; padding-left: 3px; font-size: 10px; color: var(--tl-muted); font-weight: 400; letter-spacing: 0; }
|
|
85
|
+
.tl-plot { position: relative; }
|
|
86
|
+
.tl-plot > i { position: absolute; top: 0; bottom: 0; display: block; }
|
|
87
|
+
.tl-vline { width: 1px; background: var(--tl-line); }
|
|
88
|
+
.tl-weekend { background: var(--tl-weekend); }
|
|
89
|
+
.tl-break { background: var(--tl-break); }
|
|
90
|
+
.tl-break span { position: absolute; top: 4px; left: 4px; font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); }
|
|
91
|
+
.tl-today { width: 2px; margin-left: -1px; background: var(--tl-today); z-index: 1; }
|
|
92
|
+
.tl-today span { position: absolute; bottom: 4px; left: 4px; font-size: 10px; font-style: normal; color: var(--tl-today); font-weight: 600; }
|
|
93
|
+
.tl-band, .tl-barp { position: absolute; height: 20px; border-radius: 5px; display: flex; align-items: center; overflow: hidden; z-index: 1; }
|
|
94
|
+
.tl-band { height: 6px; margin-top: 7px; border-radius: 3px; }
|
|
95
|
+
.tl-barp:hover, .tl-barp.is-sel { box-shadow: 0 0 0 2px var(--tl-ink); }
|
|
96
|
+
.tl-cp { position: absolute; z-index: 1; display: flex; align-items: center; gap: 6px; margin-left: -5px; pointer-events: none; height: 16px; }
|
|
97
|
+
.tl-cp .tl-dia { box-shadow: 0 0 0 2px var(--tl-bg); }
|
|
98
|
+
.tl-cp.is-left { flex-direction: row-reverse; transform: translateX(-100%); margin-left: 5px; } /* near the right edge the label sits before its diamond */
|
|
99
|
+
.tl-cp em { font-style: normal; font-size: 11px; white-space: nowrap; color: var(--tl-ink); background: var(--tl-bg); padding: 0 4px; border-radius: 3px; }
|
|
100
|
+
|
|
101
|
+
/* ---------- Month ---------- */
|
|
102
|
+
.tl-month { border: 1px solid var(--tl-line); border-radius: 12px; overflow: hidden; }
|
|
103
|
+
.tl-wdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--tl-line); }
|
|
104
|
+
.tl-wdays span { padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); }
|
|
105
|
+
.tl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; min-height: 104px; border-bottom: 1px solid var(--tl-line); }
|
|
106
|
+
.tl-week:last-child { border-bottom: 0; }
|
|
107
|
+
.tl-day { border-right: 1px solid var(--tl-line); padding: 6px 8px 0; min-height: 104px; }
|
|
108
|
+
.tl-day:nth-child(7) { border-right: 0; }
|
|
109
|
+
.tl-day.is-we { background: var(--tl-weekend); }
|
|
110
|
+
.tl-day.is-break { background: var(--tl-break); }
|
|
111
|
+
.tl-day.is-out .tl-dn { opacity: .35; }
|
|
112
|
+
.tl-dn { font-size: 12px; color: var(--tl-muted); display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; margin-left: -4px; }
|
|
113
|
+
.tl-day.is-today .tl-dn { background: var(--tl-today); color: var(--tl-bg); font-weight: 600; }
|
|
114
|
+
.tl-mcp { padding: 0 6px; z-index: 1; display: grid; gap: 2px; align-self: start; }
|
|
115
|
+
.tl-mcp button { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.25; }
|
|
116
|
+
.tl-mcp .tl-dia { width: 7px; height: 7px; }
|
|
117
|
+
.tl-seg { z-index: 1; height: 22px; display: flex; align-items: center; margin: 0 1px; overflow: hidden; }
|
|
118
|
+
.tl-seg span { padding: 0 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
119
|
+
.tl-seg.is-start { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left: 6px; }
|
|
120
|
+
.tl-seg.is-end { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-right: 6px; }
|
|
121
|
+
.tl-seg:hover, .tl-seg.is-sel { box-shadow: inset 0 0 0 2px var(--tl-ink); }
|
|
122
|
+
|
|
123
|
+
/* ---------- Week ---------- */
|
|
124
|
+
.tl-wstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--tl-line); border-radius: 12px; overflow: hidden; }
|
|
125
|
+
.tl-wday { min-height: 120px; padding: 8px; border-right: 1px solid var(--tl-line); display: flex; flex-direction: column; gap: 6px; }
|
|
126
|
+
.tl-wday:last-child { border-right: 0; }
|
|
127
|
+
.tl-wday.is-we { background: var(--tl-weekend); }
|
|
128
|
+
.tl-wday.is-break { background: var(--tl-break); }
|
|
129
|
+
.tl-wdh { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-muted); }
|
|
130
|
+
.tl-wdh b { font-size: 16px; color: var(--tl-ink); letter-spacing: 0; margin-left: 2px; }
|
|
131
|
+
.tl-wday.is-today .tl-wdh b { color: var(--tl-today); }
|
|
132
|
+
.tl-wcp { display: grid; grid-template-columns: 9px 1fr; gap: 2px 8px; align-items: center; font-size: 12px; line-height: 1.3; padding: 6px; border-radius: 8px; background: var(--tl-soft); }
|
|
133
|
+
.tl-wcp em { grid-column: 2; font-style: normal; font-size: 11px; color: var(--tl-muted); }
|
|
134
|
+
.tl-act { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--tl-line); border-radius: 10px; margin-bottom: 8px; }
|
|
135
|
+
.tl-act:hover, .tl-act.is-sel { border-color: var(--tl-ink); }
|
|
136
|
+
.tl-act-t { font-weight: 600; }
|
|
137
|
+
.tl-act-d { font-size: 13px; color: var(--tl-muted); white-space: nowrap; }
|
|
138
|
+
.tl-act-s, .tl-act-a { grid-column: 2 / -1; font-size: 13px; color: var(--tl-muted); }
|
|
139
|
+
.tl-act-a b { color: var(--tl-ink); font-weight: 600; }
|
|
140
|
+
.tl-empty { color: var(--tl-muted); padding: 16px 0; }
|
|
141
|
+
|
|
142
|
+
@media (max-width: 640px) {
|
|
143
|
+
.tl-ggrid { grid-template-columns: 150px minmax(760px, 1fr); }
|
|
144
|
+
.tl-lab { font-size: 12px; padding: 0 8px; }
|
|
145
|
+
.tl-lab .tl-confirm { font-size: 0; gap: 0; }
|
|
146
|
+
.tl-lab-ms .tl-tag { display: none; } /* the hatched bars carry it on a phone */
|
|
147
|
+
.tl-week, .tl-day { min-height: 84px; }
|
|
148
|
+
.tl-seg span { padding: 0 4px; font-size: 10px; }
|
|
149
|
+
.tl-mcp button { font-size: 0; }
|
|
150
|
+
.tl-mcp .tl-dia { width: 8px; height: 8px; }
|
|
151
|
+
.tl-wstrip { grid-template-columns: 1fr; }
|
|
152
|
+
.tl-wday { min-height: 0; border-right: 0; border-bottom: 1px solid var(--tl-line); flex-direction: row; flex-wrap: wrap; align-items: center; }
|
|
153
|
+
.tl-act { grid-template-columns: 14px minmax(0, 1fr); }
|
|
154
|
+
.tl-act-d { grid-column: 2; }
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* ---------- Day (kol-component, 2026-10-29): the all-day lane, then the hours ---------- */
|
|
158
|
+
.tl-dayv { border: 1px solid var(--tl-line); border-radius: 12px; overflow: hidden; }
|
|
159
|
+
.tl-dayv.is-break .tl-dall { background: var(--tl-break); }
|
|
160
|
+
.tl-dall { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; border-bottom: 1px solid var(--tl-line); background: var(--tl-soft); }
|
|
161
|
+
.tl-dlab, .tl-hl { font-size: 11px; color: var(--tl-muted); font-variant-numeric: tabular-nums; padding-top: 4px; }
|
|
162
|
+
.tl-dall-b { display: flex; flex-direction: column; gap: 6px; }
|
|
163
|
+
.tl-dseg { height: 24px; display: flex; align-items: center; border-radius: 5px; overflow: hidden; }
|
|
164
|
+
.tl-dseg span { padding: 0 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
165
|
+
.tl-dseg:hover, .tl-dseg.is-sel { box-shadow: inset 0 0 0 2px var(--tl-ink); }
|
|
166
|
+
.tl-dall .tl-empty { padding: 2px 0; margin: 0; }
|
|
167
|
+
.tl-hours { position: relative; }
|
|
168
|
+
.tl-hour { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--tl-line); }
|
|
169
|
+
.tl-hour:last-child { border-bottom: 0; }
|
|
170
|
+
.tl-hb { display: flex; flex-direction: column; gap: 4px; }
|
|
171
|
+
.tl-dnow { position: absolute; left: 76px; right: 0; height: 2px; margin-top: -1px; background: var(--tl-today); z-index: 1; display: block; }
|
|
172
|
+
.tl-dnow span { position: absolute; right: 8px; top: -16px; font-size: 10px; font-style: normal; color: var(--tl-today); font-weight: 600; }
|
|
@@ -119,10 +119,8 @@
|
|
|
119
119
|
/* THE RAIL FADES OUT AT ITS FOOT (2026-10-01 — user, on shadcn's sidebar: "look how they use
|
|
120
120
|
* gradient fade for information to reveals on scroll"). A long list runs out under a fade instead
|
|
121
121
|
* of being cut by the window edge; the rail's own bottom padding (`pb-14` on the aside) keeps the last row clear of it. */
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
|
|
125
|
-
}
|
|
122
|
+
/* … the fade is kol-theme's `.kol-scroll-fade` now: the head once scrolled, the foot while more lies below
|
|
123
|
+
(TimeSetAndSiteRailFade, 2026-10-29) — ShellLayout's rails wear it. */
|
|
126
124
|
|
|
127
125
|
.shell-rail--nav {
|
|
128
126
|
border-right: 1px solid var(--kol-oq-08);
|
package/kol-theme.css
CHANGED
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
@import "./kol-components-workshop.css" layer(components);
|
|
48
48
|
@import "./kol-components-foundry.css" layer(components);
|
|
49
49
|
@import "./kol-components-styleguide.css" layer(components);
|
|
50
|
+
@import "./kol-components-time.css" layer(components);
|
|
50
51
|
@import "./kol-components-shell.css" layer(components);
|
|
51
52
|
@import "./kol-components-controls.css" layer(components);
|
|
52
53
|
|