starlight-cannoli-plugins 1.0.7 → 1.0.8

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.
@@ -0,0 +1,394 @@
1
+ $info-color: #3b82f6;
2
+ $warning-color: #f59e0b;
3
+
4
+ html {
5
+ scroll-behavior: smooth;
6
+ }
7
+
8
+ // invert img.note-svg when on dark mode
9
+ img.note-svg {
10
+ color-scheme: light dark;
11
+ padding-top: 1em;
12
+ padding-bottom: 1em;
13
+
14
+ html[data-theme="light"] & {
15
+ filter: none;
16
+ }
17
+
18
+ html:not([data-theme="light"]) & {
19
+ filter: invert(1) hue-rotate(180deg);
20
+ }
21
+ }
22
+
23
+ .katex-html svg {
24
+ height: inherit;
25
+ }
26
+
27
+ /************ Starlight Additions/Overrides ************/
28
+
29
+ .sl-container:where(.astro-7nkwcw3z) {
30
+ max-width: 50rem;
31
+ }
32
+
33
+ .main-pane {
34
+ table > thead > tr > th {
35
+ border-bottom: 1px solid hsl(228, 6.2%, 47.3%);
36
+ }
37
+ }
38
+
39
+ starlight-toc {
40
+ a {
41
+ transition: transform 0.2s ease;
42
+ transform-origin: left;
43
+
44
+ span {
45
+ position: relative;
46
+ display: inline-block;
47
+ transition: color 0.2s ease;
48
+
49
+ &::before {
50
+ content: "";
51
+ position: absolute;
52
+ left: -8px;
53
+ top: 0;
54
+ bottom: 0;
55
+ width: 3px;
56
+ background-color: transparent;
57
+ border-radius: 2px;
58
+ transition: background-color 0.2s ease;
59
+ }
60
+ }
61
+ }
62
+
63
+ a[aria-current="true"] {
64
+ transform: scale(1.04);
65
+
66
+ span {
67
+ &::before {
68
+ background-color: var(--sl-color-text-accent);
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ #starlight__search mark {
75
+ color: hsl(339.8, 63.4%, 60.4%);
76
+ }
77
+
78
+ #starlight__mobile-toc {
79
+ > .dropdown {
80
+ border-bottom: 1px solid hsla(0, 0%, 100%, 0.6);
81
+ }
82
+ }
83
+
84
+ .expressive-code .copy > button {
85
+ height: 2rem;
86
+ width: 2rem;
87
+ }
88
+
89
+ /************ Details/Summary Styles ************/
90
+ .main-pane details {
91
+ background: var(--sl-color-bg-nav);
92
+ border-radius: 4px;
93
+ padding: 0.3rem 0.6rem;
94
+ display: block;
95
+
96
+ &[open] {
97
+ max-width: 100%;
98
+
99
+ > div.details-wrapper {
100
+ overflow: auto;
101
+ max-height: 67vh;
102
+ padding-right: 0.8rem;
103
+ padding-left: 0.8rem;
104
+ }
105
+
106
+ p > img {
107
+ height: auto;
108
+ width: auto;
109
+ }
110
+ }
111
+ }
112
+
113
+ /********** MathJax/LaTeX Styling **********/
114
+ mjx-container[jax="SVG"] {
115
+ overflow-x: auto;
116
+
117
+ &[display="true"] {
118
+ margin: 0.5em 0 !important;
119
+ padding: 0.5em 0 !important;
120
+ }
121
+ }
122
+
123
+ .katex-display {
124
+ margin: 0.5em 0 !important;
125
+ padding: 0.5em 0 !important;
126
+ }
127
+
128
+ /********** TikZ SVG Styling **********/
129
+ script[type="text/tikz"] {
130
+ display: block;
131
+ }
132
+
133
+ div > div[class="page"] > svg {
134
+ color-scheme: light dark;
135
+
136
+ html[data-theme="light"] & {
137
+ stroke: currentColor;
138
+ fill: currentColor;
139
+ }
140
+
141
+ html:not([data-theme="light"]) & {
142
+ stroke: white;
143
+ fill: white;
144
+ filter: invert(1) hue-rotate(180deg);
145
+ }
146
+ }
147
+
148
+ /********** Mimic Bootstrap Class Utilities **********/
149
+ .visually-hidden {
150
+ display: none !important;
151
+ }
152
+
153
+ .visibility-hidden {
154
+ visibility: hidden !important;
155
+ }
156
+
157
+ .visible {
158
+ display: block !important;
159
+ }
160
+
161
+ .text-center {
162
+ text-align: center !important;
163
+ }
164
+
165
+ .d-block {
166
+ display: block !important;
167
+ }
168
+
169
+ .d-flex {
170
+ display: flex !important;
171
+ }
172
+
173
+ .flex-row {
174
+ flex-direction: row !important;
175
+ }
176
+
177
+ .flex-column {
178
+ flex-direction: column !important;
179
+ }
180
+
181
+ .justify-content-center {
182
+ justify-content: center !important;
183
+ }
184
+
185
+ .justify-content-between {
186
+ justify-content: space-between !important;
187
+ }
188
+
189
+ .justify-content-around {
190
+ justify-content: space-around !important;
191
+ }
192
+
193
+ .justify-content-evenly {
194
+ justify-content: space-evenly !important;
195
+ }
196
+
197
+ .align-items-center {
198
+ align-items: center !important;
199
+ }
200
+
201
+ .align-items-start {
202
+ align-items: flex-start !important;
203
+ }
204
+
205
+ .flex-wrap {
206
+ flex-wrap: wrap !important;
207
+
208
+ .flex-fill {
209
+ flex: 1 1 auto;
210
+ margin-top: unset;
211
+ }
212
+
213
+ .flex-fill.flex-code {
214
+ min-width: 0;
215
+ }
216
+ }
217
+
218
+ .flex-grow-1 {
219
+ flex-grow: 1 !important;
220
+ }
221
+
222
+ /* Overflow utilities */
223
+ .overflow-auto {
224
+ overflow: auto !important;
225
+ }
226
+
227
+ .overflow-y-auto {
228
+ overflow-y: auto !important;
229
+ }
230
+
231
+ .overflow-x-hidden {
232
+ overflow-x: hidden !important;
233
+ }
234
+
235
+ /* Padding and Margin Utilities */
236
+ /* Exposes utility classes like .p-0, .p-1, .pt-2, .mb-3, ..., .m-6, .gap-6 */
237
+
238
+ $spacings: (
239
+ p: padding,
240
+ pt: padding-top,
241
+ pb: padding-bottom,
242
+ ps: padding-left,
243
+ pe: padding-right,
244
+ m: margin,
245
+ mt: margin-top,
246
+ mb: margin-bottom,
247
+ ms: margin-left,
248
+ me: margin-right,
249
+ gap: gap,
250
+ gap-row: row-gap,
251
+ gap-col: column-gap,
252
+ );
253
+
254
+ $axis-spacings: (
255
+ px: (
256
+ padding-left,
257
+ padding-right,
258
+ ),
259
+ py: (
260
+ padding-top,
261
+ padding-bottom,
262
+ ),
263
+ mx: (
264
+ margin-left,
265
+ margin-right,
266
+ ),
267
+ my: (
268
+ margin-top,
269
+ margin-bottom,
270
+ ),
271
+ );
272
+
273
+ @each $class, $property in $spacings {
274
+ .#{$class}-0 {
275
+ #{$property}: 0 !important;
276
+ }
277
+
278
+ $scalar: 0.125;
279
+ $accumulated: 0;
280
+
281
+ @for $i from 1 through 6 {
282
+ $scalar: $scalar + ($i % 2) * $scalar;
283
+ $accumulated: $accumulated + $scalar;
284
+
285
+ .#{$class}-#{$i} {
286
+ #{$property}: #{$accumulated}rem !important;
287
+ }
288
+ }
289
+ }
290
+
291
+ /* Axis-specific spacing utilities (-x and -y) */
292
+ @each $class, $properties in $axis-spacings {
293
+ .#{$class}-0 {
294
+ @each $property in $properties {
295
+ #{$property}: 0 !important;
296
+ }
297
+ }
298
+
299
+ $scalar: 0.125;
300
+ $accumulated: 0;
301
+
302
+ @for $i from 1 through 6 {
303
+ $scalar: $scalar + ($i % 2) * $scalar;
304
+ $accumulated: $accumulated + $scalar;
305
+
306
+ .#{$class}-#{$i} {
307
+ @each $property in $properties {
308
+ #{$property}: #{$accumulated}rem !important;
309
+ }
310
+ }
311
+ }
312
+ }
313
+
314
+ /************ Custom Styles ************/
315
+
316
+ .highlight-green,
317
+ .highlight-red {
318
+ padding: 5px;
319
+ }
320
+
321
+ .highlight-green {
322
+ background: #7de37d34;
323
+ }
324
+
325
+ .highlight-red {
326
+ background: #f7535b46;
327
+ }
328
+
329
+ .admin-only {
330
+ display: none;
331
+ }
332
+
333
+ .note-indicator {
334
+ display: inline-block;
335
+ width: 8px;
336
+ height: 8px;
337
+ border-radius: 50%;
338
+ background-color: $info-color;
339
+ margin-right: 6px;
340
+ vertical-align: middle;
341
+ opacity: 0.6;
342
+ }
343
+
344
+ div.note {
345
+ display: none;
346
+ border: 3px solid $warning-color;
347
+ border-left: 6px solid $warning-color;
348
+ padding: 12px;
349
+ border-radius: 4px;
350
+ margin: 10px 0;
351
+
352
+ &::before {
353
+ content: "Personal Note";
354
+ display: block;
355
+ font-weight: bold;
356
+ color: $info-color;
357
+ margin-bottom: 8px;
358
+ font-size: 0.95em;
359
+ }
360
+ }
361
+
362
+ /********** Toggle Checkbox Styles **********/
363
+ #toggle-all-details-btn {
364
+ display: flex;
365
+ align-items: center;
366
+ gap: 0.5rem;
367
+ cursor: pointer;
368
+
369
+ input[type="checkbox"] {
370
+ position: relative;
371
+ appearance: none;
372
+ width: 1.2em;
373
+ height: 1.2em;
374
+ border: 2px solid currentColor;
375
+ border-radius: 2px;
376
+ cursor: pointer;
377
+ display: flex;
378
+ align-items: center;
379
+ justify-content: center;
380
+ transition: background-color 0.2s ease;
381
+
382
+ &:checked {
383
+ background-color: var(--sl-color-accent);
384
+ border-color: var(--sl-color-accent);
385
+
386
+ &::after {
387
+ content: "✓";
388
+ color: white;
389
+ font-size: 0.8em;
390
+ font-weight: bold;
391
+ }
392
+ }
393
+ }
394
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "starlight-cannoli-plugins",
3
3
  "type": "module",
4
- "version": "1.0.7",
4
+ "version": "1.0.8",
5
5
  "description": "Starlight plugins for automatic sidebar generation and link validation",
6
6
  "license": "ISC",
7
7
  "main": "./dist/index.js",
@@ -47,7 +47,7 @@
47
47
  "app:preview": "astro build && astro preview --port 5600",
48
48
  "app:help": "astro --help",
49
49
  "app:check": "astro check",
50
- "lib:build": "tsup && mkdir -p dist/styles && npx sass src/styles:dist/styles --no-source-map",
50
+ "lib:build": "tsup && cp -r src/styles dist/",
51
51
  "prepublishOnly": "npm run lib:build",
52
52
  "tree:index": "tree -P index.md src/content/docs",
53
53
  "tree:depth": "bash scripts/tree-depth.sh",
@@ -1,789 +0,0 @@
1
- @charset "UTF-8";
2
- html {
3
- scroll-behavior: smooth;
4
- }
5
-
6
- img.note-svg {
7
- color-scheme: light dark;
8
- padding-top: 1em;
9
- padding-bottom: 1em;
10
- }
11
- html[data-theme=light] img.note-svg {
12
- filter: none;
13
- }
14
- html:not([data-theme=light]) img.note-svg {
15
- filter: invert(1) hue-rotate(180deg);
16
- }
17
-
18
- /************ Starlight Additions/Overrides ************/
19
- .sl-container:where(.astro-7nkwcw3z) {
20
- max-width: 50rem;
21
- }
22
-
23
- .main-pane table > thead > tr > th {
24
- border-bottom: 1px solid hsl(228, 6.2%, 47.3%);
25
- }
26
-
27
- starlight-toc a {
28
- transition: transform 0.2s ease;
29
- transform-origin: left;
30
- }
31
- starlight-toc a span {
32
- position: relative;
33
- display: inline-block;
34
- transition: color 0.2s ease;
35
- }
36
- starlight-toc a span::before {
37
- content: "";
38
- position: absolute;
39
- left: -8px;
40
- top: 0;
41
- bottom: 0;
42
- width: 3px;
43
- background-color: transparent;
44
- border-radius: 2px;
45
- transition: background-color 0.2s ease;
46
- }
47
- starlight-toc a[aria-current=true] {
48
- transform: scale(1.04);
49
- }
50
- starlight-toc a[aria-current=true] span::before {
51
- background-color: var(--sl-color-text-accent);
52
- }
53
-
54
- #starlight__search mark {
55
- color: hsl(339.8, 63.4%, 60.4%);
56
- }
57
-
58
- #starlight__mobile-toc > .dropdown {
59
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.6);
60
- }
61
-
62
- .expressive-code .copy > button {
63
- height: 2rem;
64
- width: 2rem;
65
- }
66
-
67
- /************ Details/Summary Styles ************/
68
- .main-pane details {
69
- background: var(--sl-color-bg-nav);
70
- border-radius: 4px;
71
- padding: 0.3rem 0.6rem;
72
- display: block;
73
- }
74
- .main-pane details[open] {
75
- max-width: 100%;
76
- }
77
- .main-pane details[open] > div.details-wrapper {
78
- overflow: auto;
79
- max-height: 67vh;
80
- padding-right: 0.8rem;
81
- padding-left: 0.8rem;
82
- }
83
- .main-pane details[open] p > img {
84
- height: auto;
85
- width: auto;
86
- }
87
-
88
- /********** MathJax/LaTeX Styling **********/
89
- mjx-container[jax=SVG] {
90
- overflow-x: auto;
91
- }
92
- mjx-container[jax=SVG][display=true] {
93
- margin-top: 0.7em !important;
94
- margin-bottom: 0.7em !important;
95
- padding-top: 0.3em;
96
- padding-bottom: 0.3em;
97
- }
98
- mjx-container[jax=SVG] > svg {
99
- display: unset;
100
- max-width: unset;
101
- height: unset;
102
- }
103
-
104
- /********** TikZ SVG Styling **********/
105
- script[type="text/tikz"] {
106
- display: block;
107
- }
108
-
109
- div > div[class=page] > svg {
110
- color-scheme: light dark;
111
- }
112
- html[data-theme=light] div > div[class=page] > svg {
113
- stroke: currentColor;
114
- fill: currentColor;
115
- }
116
- html:not([data-theme=light]) div > div[class=page] > svg {
117
- stroke: white;
118
- fill: white;
119
- filter: invert(1) hue-rotate(180deg);
120
- }
121
-
122
- /********** Mimic Bootstrap Class Utilities **********/
123
- .visually-hidden {
124
- display: none !important;
125
- }
126
-
127
- .visibility-hidden {
128
- visibility: hidden !important;
129
- }
130
-
131
- .visible {
132
- display: block !important;
133
- }
134
-
135
- .text-center {
136
- text-align: center !important;
137
- }
138
-
139
- .d-block {
140
- display: block !important;
141
- }
142
-
143
- .d-flex {
144
- display: flex !important;
145
- }
146
-
147
- .flex-row {
148
- flex-direction: row !important;
149
- }
150
-
151
- .flex-column {
152
- flex-direction: column !important;
153
- }
154
-
155
- .justify-content-center {
156
- justify-content: center !important;
157
- }
158
-
159
- .justify-content-between {
160
- justify-content: space-between !important;
161
- }
162
-
163
- .justify-content-around {
164
- justify-content: space-around !important;
165
- }
166
-
167
- .justify-content-evenly {
168
- justify-content: space-evenly !important;
169
- }
170
-
171
- .align-items-center {
172
- align-items: center !important;
173
- }
174
-
175
- .align-items-start {
176
- align-items: flex-start !important;
177
- }
178
-
179
- .flex-wrap {
180
- flex-wrap: wrap !important;
181
- }
182
- .flex-wrap .flex-fill {
183
- flex: 1 1 auto;
184
- margin-top: unset;
185
- }
186
- .flex-wrap .flex-fill.flex-code {
187
- min-width: 0;
188
- }
189
-
190
- .flex-grow-1 {
191
- flex-grow: 1 !important;
192
- }
193
-
194
- /* Overflow utilities */
195
- .overflow-auto {
196
- overflow: auto !important;
197
- }
198
-
199
- .overflow-y-auto {
200
- overflow-y: auto !important;
201
- }
202
-
203
- .overflow-x-hidden {
204
- overflow-x: hidden !important;
205
- }
206
-
207
- /* Padding and Margin Utilities */
208
- /* Exposes utility classes like .p-0, .p-1, .pt-2, .mb-3, ..., .m-6, .gap-6 */
209
- .p-0 {
210
- padding: 0 !important;
211
- }
212
-
213
- .p-1 {
214
- padding: 0.25rem !important;
215
- }
216
-
217
- .p-2 {
218
- padding: 0.5rem !important;
219
- }
220
-
221
- .p-3 {
222
- padding: 1rem !important;
223
- }
224
-
225
- .p-4 {
226
- padding: 1.5rem !important;
227
- }
228
-
229
- .p-5 {
230
- padding: 2.5rem !important;
231
- }
232
-
233
- .p-6 {
234
- padding: 3.5rem !important;
235
- }
236
-
237
- .pt-0 {
238
- padding-top: 0 !important;
239
- }
240
-
241
- .pt-1 {
242
- padding-top: 0.25rem !important;
243
- }
244
-
245
- .pt-2 {
246
- padding-top: 0.5rem !important;
247
- }
248
-
249
- .pt-3 {
250
- padding-top: 1rem !important;
251
- }
252
-
253
- .pt-4 {
254
- padding-top: 1.5rem !important;
255
- }
256
-
257
- .pt-5 {
258
- padding-top: 2.5rem !important;
259
- }
260
-
261
- .pt-6 {
262
- padding-top: 3.5rem !important;
263
- }
264
-
265
- .pb-0 {
266
- padding-bottom: 0 !important;
267
- }
268
-
269
- .pb-1 {
270
- padding-bottom: 0.25rem !important;
271
- }
272
-
273
- .pb-2 {
274
- padding-bottom: 0.5rem !important;
275
- }
276
-
277
- .pb-3 {
278
- padding-bottom: 1rem !important;
279
- }
280
-
281
- .pb-4 {
282
- padding-bottom: 1.5rem !important;
283
- }
284
-
285
- .pb-5 {
286
- padding-bottom: 2.5rem !important;
287
- }
288
-
289
- .pb-6 {
290
- padding-bottom: 3.5rem !important;
291
- }
292
-
293
- .ps-0 {
294
- padding-left: 0 !important;
295
- }
296
-
297
- .ps-1 {
298
- padding-left: 0.25rem !important;
299
- }
300
-
301
- .ps-2 {
302
- padding-left: 0.5rem !important;
303
- }
304
-
305
- .ps-3 {
306
- padding-left: 1rem !important;
307
- }
308
-
309
- .ps-4 {
310
- padding-left: 1.5rem !important;
311
- }
312
-
313
- .ps-5 {
314
- padding-left: 2.5rem !important;
315
- }
316
-
317
- .ps-6 {
318
- padding-left: 3.5rem !important;
319
- }
320
-
321
- .pe-0 {
322
- padding-right: 0 !important;
323
- }
324
-
325
- .pe-1 {
326
- padding-right: 0.25rem !important;
327
- }
328
-
329
- .pe-2 {
330
- padding-right: 0.5rem !important;
331
- }
332
-
333
- .pe-3 {
334
- padding-right: 1rem !important;
335
- }
336
-
337
- .pe-4 {
338
- padding-right: 1.5rem !important;
339
- }
340
-
341
- .pe-5 {
342
- padding-right: 2.5rem !important;
343
- }
344
-
345
- .pe-6 {
346
- padding-right: 3.5rem !important;
347
- }
348
-
349
- .m-0 {
350
- margin: 0 !important;
351
- }
352
-
353
- .m-1 {
354
- margin: 0.25rem !important;
355
- }
356
-
357
- .m-2 {
358
- margin: 0.5rem !important;
359
- }
360
-
361
- .m-3 {
362
- margin: 1rem !important;
363
- }
364
-
365
- .m-4 {
366
- margin: 1.5rem !important;
367
- }
368
-
369
- .m-5 {
370
- margin: 2.5rem !important;
371
- }
372
-
373
- .m-6 {
374
- margin: 3.5rem !important;
375
- }
376
-
377
- .mt-0 {
378
- margin-top: 0 !important;
379
- }
380
-
381
- .mt-1 {
382
- margin-top: 0.25rem !important;
383
- }
384
-
385
- .mt-2 {
386
- margin-top: 0.5rem !important;
387
- }
388
-
389
- .mt-3 {
390
- margin-top: 1rem !important;
391
- }
392
-
393
- .mt-4 {
394
- margin-top: 1.5rem !important;
395
- }
396
-
397
- .mt-5 {
398
- margin-top: 2.5rem !important;
399
- }
400
-
401
- .mt-6 {
402
- margin-top: 3.5rem !important;
403
- }
404
-
405
- .mb-0 {
406
- margin-bottom: 0 !important;
407
- }
408
-
409
- .mb-1 {
410
- margin-bottom: 0.25rem !important;
411
- }
412
-
413
- .mb-2 {
414
- margin-bottom: 0.5rem !important;
415
- }
416
-
417
- .mb-3 {
418
- margin-bottom: 1rem !important;
419
- }
420
-
421
- .mb-4 {
422
- margin-bottom: 1.5rem !important;
423
- }
424
-
425
- .mb-5 {
426
- margin-bottom: 2.5rem !important;
427
- }
428
-
429
- .mb-6 {
430
- margin-bottom: 3.5rem !important;
431
- }
432
-
433
- .ms-0 {
434
- margin-left: 0 !important;
435
- }
436
-
437
- .ms-1 {
438
- margin-left: 0.25rem !important;
439
- }
440
-
441
- .ms-2 {
442
- margin-left: 0.5rem !important;
443
- }
444
-
445
- .ms-3 {
446
- margin-left: 1rem !important;
447
- }
448
-
449
- .ms-4 {
450
- margin-left: 1.5rem !important;
451
- }
452
-
453
- .ms-5 {
454
- margin-left: 2.5rem !important;
455
- }
456
-
457
- .ms-6 {
458
- margin-left: 3.5rem !important;
459
- }
460
-
461
- .me-0 {
462
- margin-right: 0 !important;
463
- }
464
-
465
- .me-1 {
466
- margin-right: 0.25rem !important;
467
- }
468
-
469
- .me-2 {
470
- margin-right: 0.5rem !important;
471
- }
472
-
473
- .me-3 {
474
- margin-right: 1rem !important;
475
- }
476
-
477
- .me-4 {
478
- margin-right: 1.5rem !important;
479
- }
480
-
481
- .me-5 {
482
- margin-right: 2.5rem !important;
483
- }
484
-
485
- .me-6 {
486
- margin-right: 3.5rem !important;
487
- }
488
-
489
- .gap-0 {
490
- gap: 0 !important;
491
- }
492
-
493
- .gap-1 {
494
- gap: 0.25rem !important;
495
- }
496
-
497
- .gap-2 {
498
- gap: 0.5rem !important;
499
- }
500
-
501
- .gap-3 {
502
- gap: 1rem !important;
503
- }
504
-
505
- .gap-4 {
506
- gap: 1.5rem !important;
507
- }
508
-
509
- .gap-5 {
510
- gap: 2.5rem !important;
511
- }
512
-
513
- .gap-6 {
514
- gap: 3.5rem !important;
515
- }
516
-
517
- .gap-row-0 {
518
- row-gap: 0 !important;
519
- }
520
-
521
- .gap-row-1 {
522
- row-gap: 0.25rem !important;
523
- }
524
-
525
- .gap-row-2 {
526
- row-gap: 0.5rem !important;
527
- }
528
-
529
- .gap-row-3 {
530
- row-gap: 1rem !important;
531
- }
532
-
533
- .gap-row-4 {
534
- row-gap: 1.5rem !important;
535
- }
536
-
537
- .gap-row-5 {
538
- row-gap: 2.5rem !important;
539
- }
540
-
541
- .gap-row-6 {
542
- row-gap: 3.5rem !important;
543
- }
544
-
545
- .gap-col-0 {
546
- column-gap: 0 !important;
547
- }
548
-
549
- .gap-col-1 {
550
- column-gap: 0.25rem !important;
551
- }
552
-
553
- .gap-col-2 {
554
- column-gap: 0.5rem !important;
555
- }
556
-
557
- .gap-col-3 {
558
- column-gap: 1rem !important;
559
- }
560
-
561
- .gap-col-4 {
562
- column-gap: 1.5rem !important;
563
- }
564
-
565
- .gap-col-5 {
566
- column-gap: 2.5rem !important;
567
- }
568
-
569
- .gap-col-6 {
570
- column-gap: 3.5rem !important;
571
- }
572
-
573
- /* Axis-specific spacing utilities (-x and -y) */
574
- .px-0 {
575
- padding-left: 0 !important;
576
- padding-right: 0 !important;
577
- }
578
-
579
- .px-1 {
580
- padding-left: 0.25rem !important;
581
- padding-right: 0.25rem !important;
582
- }
583
-
584
- .px-2 {
585
- padding-left: 0.5rem !important;
586
- padding-right: 0.5rem !important;
587
- }
588
-
589
- .px-3 {
590
- padding-left: 1rem !important;
591
- padding-right: 1rem !important;
592
- }
593
-
594
- .px-4 {
595
- padding-left: 1.5rem !important;
596
- padding-right: 1.5rem !important;
597
- }
598
-
599
- .px-5 {
600
- padding-left: 2.5rem !important;
601
- padding-right: 2.5rem !important;
602
- }
603
-
604
- .px-6 {
605
- padding-left: 3.5rem !important;
606
- padding-right: 3.5rem !important;
607
- }
608
-
609
- .py-0 {
610
- padding-top: 0 !important;
611
- padding-bottom: 0 !important;
612
- }
613
-
614
- .py-1 {
615
- padding-top: 0.25rem !important;
616
- padding-bottom: 0.25rem !important;
617
- }
618
-
619
- .py-2 {
620
- padding-top: 0.5rem !important;
621
- padding-bottom: 0.5rem !important;
622
- }
623
-
624
- .py-3 {
625
- padding-top: 1rem !important;
626
- padding-bottom: 1rem !important;
627
- }
628
-
629
- .py-4 {
630
- padding-top: 1.5rem !important;
631
- padding-bottom: 1.5rem !important;
632
- }
633
-
634
- .py-5 {
635
- padding-top: 2.5rem !important;
636
- padding-bottom: 2.5rem !important;
637
- }
638
-
639
- .py-6 {
640
- padding-top: 3.5rem !important;
641
- padding-bottom: 3.5rem !important;
642
- }
643
-
644
- .mx-0 {
645
- margin-left: 0 !important;
646
- margin-right: 0 !important;
647
- }
648
-
649
- .mx-1 {
650
- margin-left: 0.25rem !important;
651
- margin-right: 0.25rem !important;
652
- }
653
-
654
- .mx-2 {
655
- margin-left: 0.5rem !important;
656
- margin-right: 0.5rem !important;
657
- }
658
-
659
- .mx-3 {
660
- margin-left: 1rem !important;
661
- margin-right: 1rem !important;
662
- }
663
-
664
- .mx-4 {
665
- margin-left: 1.5rem !important;
666
- margin-right: 1.5rem !important;
667
- }
668
-
669
- .mx-5 {
670
- margin-left: 2.5rem !important;
671
- margin-right: 2.5rem !important;
672
- }
673
-
674
- .mx-6 {
675
- margin-left: 3.5rem !important;
676
- margin-right: 3.5rem !important;
677
- }
678
-
679
- .my-0 {
680
- margin-top: 0 !important;
681
- margin-bottom: 0 !important;
682
- }
683
-
684
- .my-1 {
685
- margin-top: 0.25rem !important;
686
- margin-bottom: 0.25rem !important;
687
- }
688
-
689
- .my-2 {
690
- margin-top: 0.5rem !important;
691
- margin-bottom: 0.5rem !important;
692
- }
693
-
694
- .my-3 {
695
- margin-top: 1rem !important;
696
- margin-bottom: 1rem !important;
697
- }
698
-
699
- .my-4 {
700
- margin-top: 1.5rem !important;
701
- margin-bottom: 1.5rem !important;
702
- }
703
-
704
- .my-5 {
705
- margin-top: 2.5rem !important;
706
- margin-bottom: 2.5rem !important;
707
- }
708
-
709
- .my-6 {
710
- margin-top: 3.5rem !important;
711
- margin-bottom: 3.5rem !important;
712
- }
713
-
714
- /************ Custom Styles ************/
715
- .highlight-green,
716
- .highlight-red {
717
- padding: 5px;
718
- }
719
-
720
- .highlight-green {
721
- background: rgba(125, 227, 125, 0.2039215686);
722
- }
723
-
724
- .highlight-red {
725
- background: rgba(247, 83, 91, 0.2745098039);
726
- }
727
-
728
- .admin-only {
729
- display: none;
730
- }
731
-
732
- .note-indicator {
733
- display: inline-block;
734
- width: 8px;
735
- height: 8px;
736
- border-radius: 50%;
737
- background-color: #3b82f6;
738
- margin-right: 6px;
739
- vertical-align: middle;
740
- opacity: 0.6;
741
- }
742
-
743
- div.note {
744
- display: none;
745
- border: 3px solid #f59e0b;
746
- border-left: 6px solid #f59e0b;
747
- padding: 12px;
748
- border-radius: 4px;
749
- margin: 10px 0;
750
- }
751
- div.note::before {
752
- content: "Personal Note";
753
- display: block;
754
- font-weight: bold;
755
- color: #3b82f6;
756
- margin-bottom: 8px;
757
- font-size: 0.95em;
758
- }
759
-
760
- /********** Toggle Checkbox Styles **********/
761
- #toggle-all-details-btn {
762
- display: flex;
763
- align-items: center;
764
- gap: 0.5rem;
765
- cursor: pointer;
766
- }
767
- #toggle-all-details-btn input[type=checkbox] {
768
- position: relative;
769
- appearance: none;
770
- width: 1.2em;
771
- height: 1.2em;
772
- border: 2px solid currentColor;
773
- border-radius: 2px;
774
- cursor: pointer;
775
- display: flex;
776
- align-items: center;
777
- justify-content: center;
778
- transition: background-color 0.2s ease;
779
- }
780
- #toggle-all-details-btn input[type=checkbox]:checked {
781
- background-color: var(--sl-color-accent);
782
- border-color: var(--sl-color-accent);
783
- }
784
- #toggle-all-details-btn input[type=checkbox]:checked::after {
785
- content: "✓";
786
- color: white;
787
- font-size: 0.8em;
788
- font-weight: bold;
789
- }