@kolkrabbi/kol-theme 0.1.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 +26 -0
- package/kol-base-tokens.css +74 -0
- package/kol-color.css +280 -0
- package/kol-components-atoms.css +709 -0
- package/kol-components-molecules.css +255 -0
- package/kol-components-organisms.css +220 -0
- package/kol-opacity.css +369 -0
- package/kol-opaque.css +203 -0
- package/kol-theme.css +110 -0
- package/kol-type-mono-classes.css +115 -0
- package/kol-typography-mono.css +64 -0
- package/kol-typography.css +1090 -0
- package/kol-utilities.css +92 -0
- package/package.json +34 -0
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* KOL components — molecule tier
|
|
3
|
+
*
|
|
4
|
+
* Pill / Tag / Badge — three pill-shaped status / label molecules with
|
|
5
|
+
* overlapping use cases. Future consolidation candidate (see
|
|
6
|
+
* docs/kol-migration/components/02-components-molecules.md §6 / §7).
|
|
7
|
+
* For now they ship with their original CSS surface, just relocated
|
|
8
|
+
* out of the kol-components.css kitchen sink.
|
|
9
|
+
*
|
|
10
|
+
* ─────────────────────────────────────────────────────────────────────
|
|
11
|
+
* Pill — molecules/Pill.jsx
|
|
12
|
+
* Variants: outline / subtle / inverse
|
|
13
|
+
* Sizes: sm / md / lg
|
|
14
|
+
* ─────────────────────────────────────────────────────────────────────
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/* Popover — default chrome for floating-ui-positioned panels.
|
|
18
|
+
* Used by molecules/Popover.jsx PopoverPanel. */
|
|
19
|
+
.kol-popover {
|
|
20
|
+
background: var(--kol-surface-secondary);
|
|
21
|
+
border: 1px solid var(--kol-fg-08);
|
|
22
|
+
border-radius: 6px;
|
|
23
|
+
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4),
|
|
24
|
+
0 2px 6px -2px rgba(0, 0, 0, 0.3);
|
|
25
|
+
z-index: 1000;
|
|
26
|
+
outline: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Tooltip — hover-triggered text label with optional kbd-style shortcut chip.
|
|
30
|
+
* Used by molecules/Popover.jsx Tooltip. No border (intentionally distinct
|
|
31
|
+
* from native browser tooltips); shortcut renders as a fg-tinted chip. */
|
|
32
|
+
.kol-tooltip {
|
|
33
|
+
display: inline-flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
gap: 6px;
|
|
36
|
+
background: var(--kol-surface-secondary);
|
|
37
|
+
border-radius: 6px;
|
|
38
|
+
padding: 4px 4px 4px 8px;
|
|
39
|
+
font-family: var(--kol-font-family-mono);
|
|
40
|
+
font-size: 11px;
|
|
41
|
+
line-height: 1;
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
z-index: 1000;
|
|
45
|
+
box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.kol-tooltip-key {
|
|
49
|
+
display: inline-flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
min-width: 16px;
|
|
53
|
+
height: 16px;
|
|
54
|
+
padding: 0 4px;
|
|
55
|
+
background: var(--kol-fg-08);
|
|
56
|
+
border-radius: 3px;
|
|
57
|
+
font-size: 10px;
|
|
58
|
+
letter-spacing: 0.02em;
|
|
59
|
+
color: var(--kol-surface-on-primary);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.pill-inverse {
|
|
63
|
+
display: inline-flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
padding: 4px 16px;
|
|
66
|
+
border-radius: var(--kol-radius-full);
|
|
67
|
+
background-color: var(--kol-surface-on-primary);
|
|
68
|
+
font-family: var(--kol-font-family-mono);
|
|
69
|
+
color: var(--kol-surface-primary);
|
|
70
|
+
border: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.pill-subtle {
|
|
74
|
+
display: inline-flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
padding: 4px 16px;
|
|
77
|
+
border-radius: var(--kol-radius-full);
|
|
78
|
+
background-color: color-mix(in srgb, var(--kol-surface-on-primary) 16%, transparent);
|
|
79
|
+
font-family: var(--kol-font-family-mono);
|
|
80
|
+
color: var(--kol-surface-on-primary);
|
|
81
|
+
border: 1px solid transparent;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.pill-outline {
|
|
85
|
+
display: inline-flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
padding: 4px 16px;
|
|
88
|
+
border-radius: var(--kol-radius-full);
|
|
89
|
+
background-color: var(--kol-surface-primary);
|
|
90
|
+
font-family: var(--kol-font-family-mono);
|
|
91
|
+
color: var(--kol-surface-on-primary);
|
|
92
|
+
border: 1px solid var(--kol-border-default);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.pill-sm {
|
|
96
|
+
font-size: 10px;
|
|
97
|
+
font-weight: 470;
|
|
98
|
+
padding: 2px 10px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.pill-md {
|
|
102
|
+
font-size: 12px;
|
|
103
|
+
font-weight: 470;
|
|
104
|
+
padding: 4px 16px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.pill-lg {
|
|
108
|
+
font-size: 14px;
|
|
109
|
+
font-weight: 470;
|
|
110
|
+
padding: 6px 20px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
/* ─────────────────────────────────────────────────────────────────────
|
|
115
|
+
* Tag — molecules/Tag.jsx
|
|
116
|
+
* .tag-control / -sm / -md / -lg
|
|
117
|
+
* .control-unified-inverse (inverse variant — ad-hoc legacy naming)
|
|
118
|
+
* ───────────────────────────────────────────────────────────────────── */
|
|
119
|
+
|
|
120
|
+
.tag-control {
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
padding: 4px 16px;
|
|
124
|
+
border-radius: var(--kol-radius-full);
|
|
125
|
+
background-color: var(--kol-surface-primary);
|
|
126
|
+
font-size: 10px;
|
|
127
|
+
font-weight: 400;
|
|
128
|
+
font-family: var(--kol-font-family-mono);
|
|
129
|
+
color: var(--kol-surface-on-primary);
|
|
130
|
+
border: 1px solid var(--kol-border-default);
|
|
131
|
+
transition: background-color var(--kol-transition-base),
|
|
132
|
+
color var(--kol-transition-base);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.tag-control:hover {
|
|
136
|
+
background-color: color-mix(in srgb, var(--kol-surface-on-primary) 24%, transparent);
|
|
137
|
+
color: var(--kol-surface-on-primary);
|
|
138
|
+
border-color: transparent;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.tag-control.is-active {
|
|
142
|
+
background-color: color-mix(in srgb, var(--kol-surface-on-primary) 24%, transparent);
|
|
143
|
+
color: var(--kol-surface-on-primary);
|
|
144
|
+
border-color: color-mix(in srgb, var(--kol-surface-on-primary) 24%, transparent);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.tag-sm { font-size: 10px; font-weight: 470; padding: 4px 10px; }
|
|
148
|
+
.tag-md { font-size: 12px; font-weight: 470; padding: 5px 12px; }
|
|
149
|
+
.tag-lg { font-size: 14px; font-weight: 470; padding: 6px 14px; }
|
|
150
|
+
|
|
151
|
+
.control-unified-inverse {
|
|
152
|
+
display: inline-flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
padding: 4px 0;
|
|
155
|
+
border-radius: var(--kol-radius-full);
|
|
156
|
+
background-color: var(--kol-surface-on-primary);
|
|
157
|
+
color: var(--kol-surface-primary);
|
|
158
|
+
border: 1px solid transparent;
|
|
159
|
+
transition: background-color var(--kol-transition-base),
|
|
160
|
+
color var(--kol-transition-base);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.control-unified-inverse:hover {
|
|
164
|
+
background-color: var(--kol-surface-primary);
|
|
165
|
+
color: var(--kol-surface-on-primary);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
/* ─────────────────────────────────────────────────────────────────────
|
|
170
|
+
* Badge — molecules/Badge.jsx
|
|
171
|
+
* 8 variants: default / secondary / destructive / outline / success /
|
|
172
|
+
* warning / critical / info
|
|
173
|
+
* 3 sizes: sm / md / lg
|
|
174
|
+
*
|
|
175
|
+
* Note: status colors (destructive / success / warning / critical / info)
|
|
176
|
+
* use literal hex; could migrate to --ui-error / --ui-warning / etc.
|
|
177
|
+
* tokens in a future pass.
|
|
178
|
+
* ───────────────────────────────────────────────────────────────────── */
|
|
179
|
+
|
|
180
|
+
.kol-badge {
|
|
181
|
+
display: inline-flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
border-radius: 4px;
|
|
185
|
+
font-family: var(--kol-font-family-mono);
|
|
186
|
+
font-weight: 470;
|
|
187
|
+
transition: background-color var(--kol-transition-base),
|
|
188
|
+
color var(--kol-transition-base);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.kol-badge-default {
|
|
192
|
+
background-color: var(--kol-surface-on-primary);
|
|
193
|
+
color: var(--kol-surface-primary);
|
|
194
|
+
border: 1px solid transparent;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.kol-badge-secondary {
|
|
198
|
+
background-color: color-mix(in srgb, var(--kol-surface-on-primary) 12%, transparent);
|
|
199
|
+
color: var(--kol-surface-on-primary);
|
|
200
|
+
border: 1px solid transparent;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.kol-badge-destructive {
|
|
204
|
+
background-color: color-mix(in srgb, #ef4444 20%, transparent);
|
|
205
|
+
color: #ef4444;
|
|
206
|
+
border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.kol-badge-outline {
|
|
210
|
+
background-color: transparent;
|
|
211
|
+
color: var(--kol-surface-on-primary);
|
|
212
|
+
border: 1px solid var(--kol-border-default);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.kol-badge-success {
|
|
216
|
+
background-color: color-mix(in srgb, #22c55e 20%, transparent);
|
|
217
|
+
color: #22c55e;
|
|
218
|
+
border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.kol-badge-warning {
|
|
222
|
+
background-color: color-mix(in srgb, #eab308 20%, transparent);
|
|
223
|
+
color: #eab308;
|
|
224
|
+
border: 1px solid color-mix(in srgb, #eab308 30%, transparent);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.kol-badge-critical {
|
|
228
|
+
background-color: color-mix(in srgb, #ef4444 20%, transparent);
|
|
229
|
+
color: #ef4444;
|
|
230
|
+
border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.kol-badge-info {
|
|
234
|
+
background-color: color-mix(in srgb, #3b82f6 20%, transparent);
|
|
235
|
+
color: #3b82f6;
|
|
236
|
+
border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.kol-badge-sm {
|
|
240
|
+
height: 20px;
|
|
241
|
+
padding: 0 6px;
|
|
242
|
+
font-size: 10px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.kol-badge-md {
|
|
246
|
+
height: 24px;
|
|
247
|
+
padding: 0 8px;
|
|
248
|
+
font-size: 12px;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.kol-badge-lg {
|
|
252
|
+
height: 28px;
|
|
253
|
+
padding: 0 12px;
|
|
254
|
+
font-size: 14px;
|
|
255
|
+
}
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* KOL components — organism tier
|
|
3
|
+
*
|
|
4
|
+
* Component CSS that belongs to the organism layer (composite, multi-part
|
|
5
|
+
* components). Atoms + molecules live elsewhere (see kol-components.css for
|
|
6
|
+
* now; will split into kol-components-atoms.css / -molecules.css when the
|
|
7
|
+
* volume justifies it).
|
|
8
|
+
*
|
|
9
|
+
* ─────────────────────────────────────────────────────────────────────
|
|
10
|
+
* Table — src/components/organisms/Table.jsx
|
|
11
|
+
* ─────────────────────────────────────────────────────────────────────
|
|
12
|
+
*
|
|
13
|
+
* Structural (applied by Table.jsx; do not use directly):
|
|
14
|
+
* .kol-table-wrapper outer container — scroll, border, radius
|
|
15
|
+
* .kol-table the <table>
|
|
16
|
+
* .kol-table-thead header bg + bottom border
|
|
17
|
+
* .kol-table-row body row separator
|
|
18
|
+
*
|
|
19
|
+
* Cell classes (pass via column.className / column.headerClassName):
|
|
20
|
+
* .kol-table-cell-title header cells — 12px mono, uppercase, nowrap
|
|
21
|
+
* .kol-table-cell-text default body cell — 12px mono, nowrap
|
|
22
|
+
* .kol-table-cell-meta wrapping description — 10px, max 24rem
|
|
23
|
+
* .kol-table-cell-meta-strong same as -meta, full ink opacity
|
|
24
|
+
*
|
|
25
|
+
* Inline content (use inside cell render() funcs; no padding):
|
|
26
|
+
* .kol-table-meta meta text, no cell padding
|
|
27
|
+
* .kol-table-meta-strong same, full opacity
|
|
28
|
+
* .kol-table-pair min-width 18rem container for key-value
|
|
29
|
+
* .kol-table-pill base pill (combine with variant below)
|
|
30
|
+
* .kol-table-pill-light pill — secondary surface bg
|
|
31
|
+
* .kol-table-pill-muted pill — fg-16 bg
|
|
32
|
+
* .kol-table-pill-dark pill — inverted ink
|
|
33
|
+
* .kol-table-token inline code-token badge
|
|
34
|
+
*
|
|
35
|
+
* Variant (set via Table component's `variant` prop, not directly):
|
|
36
|
+
* .kol-table--simple borderless, flush, no column dividers
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
/* =============================================================================
|
|
40
|
+
* Table
|
|
41
|
+
* ============================================================================= */
|
|
42
|
+
|
|
43
|
+
.kol-table-wrapper {
|
|
44
|
+
overflow-x: auto;
|
|
45
|
+
scrollbar-width: none;
|
|
46
|
+
border: 1px solid var(--kol-fg-08);
|
|
47
|
+
border-radius: 4px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.kol-table-wrapper::-webkit-scrollbar { display: none; }
|
|
51
|
+
|
|
52
|
+
.kol-table {
|
|
53
|
+
width: 100%;
|
|
54
|
+
min-width: 100%;
|
|
55
|
+
border-collapse: collapse;
|
|
56
|
+
text-align: left;
|
|
57
|
+
font-family: var(--kol-font-family-mono);
|
|
58
|
+
font-size: 0.8125rem;
|
|
59
|
+
line-height: 1.5;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.kol-table-thead {
|
|
63
|
+
background: var(--kol-fg-04);
|
|
64
|
+
border-bottom: 1px solid var(--kol-fg-08);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.kol-table-row {
|
|
68
|
+
border-bottom: 1px solid var(--kol-fg-08);
|
|
69
|
+
vertical-align: top;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.kol-table-row:last-child { border-bottom: none; }
|
|
73
|
+
|
|
74
|
+
.kol-table-cell-title {
|
|
75
|
+
padding: 12px 16px;
|
|
76
|
+
font-family: var(--kol-font-family-mono);
|
|
77
|
+
font-size: 0.75rem;
|
|
78
|
+
font-weight: 400;
|
|
79
|
+
line-height: 1.3;
|
|
80
|
+
text-transform: uppercase;
|
|
81
|
+
color: var(--kol-surface-on-primary);
|
|
82
|
+
white-space: nowrap;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.kol-table-cell-text {
|
|
86
|
+
padding: 12px 16px;
|
|
87
|
+
font-family: var(--kol-font-family-mono);
|
|
88
|
+
font-size: 0.75rem;
|
|
89
|
+
font-weight: 400;
|
|
90
|
+
line-height: 1.4;
|
|
91
|
+
color: var(--kol-fg-64);
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.kol-table-cell-meta {
|
|
96
|
+
padding: 12px 16px;
|
|
97
|
+
font-family: var(--kol-font-family-mono);
|
|
98
|
+
font-size: 0.625rem;
|
|
99
|
+
font-weight: 400;
|
|
100
|
+
line-height: 1.3;
|
|
101
|
+
color: var(--kol-fg-64);
|
|
102
|
+
white-space: normal;
|
|
103
|
+
min-width: 10rem;
|
|
104
|
+
max-width: 24rem;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.kol-table-cell-meta-strong {
|
|
108
|
+
padding: 12px 16px;
|
|
109
|
+
font-family: var(--kol-font-family-mono);
|
|
110
|
+
font-size: 0.625rem;
|
|
111
|
+
font-weight: 400;
|
|
112
|
+
line-height: 1.3;
|
|
113
|
+
color: var(--kol-surface-on-primary);
|
|
114
|
+
white-space: normal;
|
|
115
|
+
min-width: 10rem;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Content classes — no padding, used inside cells */
|
|
119
|
+
|
|
120
|
+
.kol-table-meta {
|
|
121
|
+
font-family: var(--kol-font-family-mono);
|
|
122
|
+
font-size: 0.625rem;
|
|
123
|
+
font-weight: 400;
|
|
124
|
+
line-height: 1.3;
|
|
125
|
+
color: var(--kol-fg-64);
|
|
126
|
+
white-space: normal;
|
|
127
|
+
max-width: 24rem;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.kol-table-meta-strong {
|
|
131
|
+
font-family: var(--kol-font-family-mono);
|
|
132
|
+
font-size: 0.625rem;
|
|
133
|
+
font-weight: 400;
|
|
134
|
+
line-height: 1.3;
|
|
135
|
+
color: var(--kol-surface-on-primary);
|
|
136
|
+
white-space: normal;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.kol-table-pair {
|
|
140
|
+
min-width: 18rem;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.kol-table-pill {
|
|
144
|
+
display: inline-flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
justify-content: center;
|
|
147
|
+
padding: 2px 12px;
|
|
148
|
+
border-radius: 9999px;
|
|
149
|
+
font-family: var(--kol-font-family-mono);
|
|
150
|
+
font-size: 0.75rem;
|
|
151
|
+
font-weight: 400;
|
|
152
|
+
white-space: nowrap;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.kol-table-pill-light { background-color: var(--kol-surface-secondary); color: var(--kol-surface-on-secondary); }
|
|
156
|
+
.kol-table-pill-muted { background-color: var(--kol-fg-16); color: var(--kol-surface-on-primary); }
|
|
157
|
+
.kol-table-pill-dark { background-color: var(--kol-surface-on-primary); color: var(--kol-surface-primary); }
|
|
158
|
+
|
|
159
|
+
.kol-table-token {
|
|
160
|
+
display: inline-flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
padding: 2px 4px;
|
|
163
|
+
margin: 0 4px;
|
|
164
|
+
border-radius: 2px;
|
|
165
|
+
font-family: var(--kol-font-family-mono);
|
|
166
|
+
font-size: 0.75rem;
|
|
167
|
+
font-weight: 400;
|
|
168
|
+
line-height: 1;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.kol-table-wrapper.kol-table--simple { border: none; border-radius: 0; }
|
|
173
|
+
.kol-table-wrapper.kol-table--simple .kol-table-thead { background: none; border-bottom: 1px solid var(--kol-fg-12); }
|
|
174
|
+
.kol-table-wrapper.kol-table--simple .kol-table-row { border-bottom: 1px solid var(--kol-fg-08); }
|
|
175
|
+
.kol-table-wrapper.kol-table--simple .kol-table th,
|
|
176
|
+
.kol-table-wrapper.kol-table--simple .kol-table td { border-right: none; }
|
|
177
|
+
.kol-table-wrapper.kol-table--simple .kol-table th:first-child,
|
|
178
|
+
.kol-table-wrapper.kol-table--simple .kol-table td:first-child { padding-inline-start: 0; }
|
|
179
|
+
.kol-table-wrapper.kol-table--simple .kol-table th:last-child,
|
|
180
|
+
.kol-table-wrapper.kol-table--simple .kol-table td:last-child { padding-inline-end: 0; }
|
|
181
|
+
|
|
182
|
+
.kol-table th,
|
|
183
|
+
.kol-table td { border-right: 1px solid var(--kol-fg-08); }
|
|
184
|
+
.kol-table th:last-child,
|
|
185
|
+
.kol-table td:last-child { border-right: none; }
|
|
186
|
+
|
|
187
|
+
.kol-table code {
|
|
188
|
+
font-family: var(--kol-font-family-mono);
|
|
189
|
+
font-size: 11px;
|
|
190
|
+
color: var(--kol-fg-80);
|
|
191
|
+
padding: 2px 5px;
|
|
192
|
+
background-color: var(--kol-fg-08);
|
|
193
|
+
border-radius: 3px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.kol-table a {
|
|
197
|
+
color: var(--kol-fg-88);
|
|
198
|
+
text-decoration: underline;
|
|
199
|
+
text-decoration-thickness: 1px;
|
|
200
|
+
text-underline-offset: 2px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.kol-table a:hover { color: var(--kol-accent-primary); }
|
|
204
|
+
|
|
205
|
+
@media (max-width: 768px) {
|
|
206
|
+
.kol-table-cell-title,
|
|
207
|
+
.kol-table-cell-text,
|
|
208
|
+
.kol-table-cell-meta,
|
|
209
|
+
.kol-table-cell-meta-strong { padding: 8px 12px; }
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@media (max-width: 480px) {
|
|
213
|
+
.kol-table-cell-title,
|
|
214
|
+
.kol-table-cell-text,
|
|
215
|
+
.kol-table-cell-meta,
|
|
216
|
+
.kol-table-cell-meta-strong {
|
|
217
|
+
font-size: 0.65rem;
|
|
218
|
+
padding: 6px 10px;
|
|
219
|
+
}
|
|
220
|
+
}
|