@kenjura/ursa 0.90.0 → 0.93.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/meta/default.css DELETED
@@ -1,1206 +0,0 @@
1
- body, html {
2
- margin: 0;
3
- padding: 0;
4
- }
5
- body {
6
- font-family: sans-serif;
7
- }
8
-
9
- :root {
10
- --article-width: 50rem;
11
- --global-nav-height: 48px;
12
- --twisty-size: 1.1rem;
13
- }
14
-
15
- @media (prefers-color-scheme: dark) {
16
- :root {
17
- --bg-color: #121212;
18
- --text-color: #f2f2f2;
19
- --nav-top-bg: #242424;
20
- --widget-bg: #242424;
21
- --widget-border: #3a3a3a;
22
- }
23
- }
24
-
25
- @media (prefers-color-scheme: light) {
26
- :root {
27
- --bg-color: white;
28
- --text-color: black;
29
- --nav-top-bg: #f2f2f2;
30
- --widget-bg: #f2f2f2;
31
- --widget-border: #ddd;
32
- }
33
- }
34
-
35
- body {
36
- background: var(--bg-color);
37
- color: var(--text-color);
38
- }
39
-
40
- /* Inactive/broken links */
41
- a.inactive {
42
- filter: brightness(0.5);
43
- cursor: not-allowed;
44
- text-decoration: line-through;
45
- }
46
-
47
- h1 {
48
- max-width: var(--article-width);
49
- overflow: hidden ;
50
- text-overflow: ellipsis;
51
- }
52
-
53
- nav#nav-global {
54
- background-color: var(--nav-top-bg);
55
- height: var(--global-nav-height);
56
- position: fixed;
57
- top: 0;
58
- left: 0;
59
- width: 100vw;
60
- display: grid;
61
- grid-template-columns: 1fr var(--article-width) 1fr;
62
- align-items: center;
63
- padding: 0 8px;
64
- box-sizing: border-box;
65
- z-index: 1001;
66
-
67
- button.menu-button {
68
- color: var(--text-color);
69
- font-size: calc(var(--global-nav-height) / 2);
70
- line-height: 1;
71
- padding: 8px;
72
- background: none;
73
- border: none;
74
- cursor: pointer;
75
- }
76
- button.menu-button:hover {
77
- opacity: 0.7;
78
- }
79
-
80
- /* Left controls: menu button + left-side widgets */
81
- .nav-left-controls {
82
- display: flex;
83
- align-items: center;
84
- justify-self: start;
85
- gap: 0;
86
- }
87
-
88
- /* Center container for search and top menu */
89
- .nav-center {
90
- width: calc(var(--article-width) + 38px);
91
- justify-self: center;
92
- position: relative;
93
- }
94
-
95
- .search-wrapper {
96
- position: relative;
97
- width: 100%;
98
- }
99
-
100
- input#global-search {
101
- width: 100%;
102
- height: calc(var(--global-nav-height) - 16px);
103
- border-radius: 5px;
104
- background: rgba(0,0,0,0.25);
105
- color: var(--text-color);
106
- border-width: 0px;
107
- padding: 0 2.5rem 0 1rem;
108
- box-sizing: border-box;
109
- }
110
-
111
- .search-clear-button {
112
- position: absolute;
113
- right: 8px;
114
- top: 50%;
115
- transform: translateY(-50%);
116
- background: none;
117
- border: none;
118
- color: var(--text-color);
119
- font-size: 1.25rem;
120
- line-height: 1;
121
- cursor: pointer;
122
- padding: 4px 8px;
123
- opacity: 0.6;
124
- transition: opacity 0.2s ease;
125
- }
126
-
127
- .search-clear-button:hover {
128
- opacity: 1;
129
- }
130
-
131
- .search-clear-button.hidden {
132
- display: none;
133
- }
134
- }
135
-
136
- /* ==========================================
137
- WIDGET SYSTEM STYLES
138
- Nav widgets (TOC, Search, Profile, Recent Activity)
139
- ========================================== */
140
-
141
- /* Widget bar in the nav right column */
142
- nav#nav-global .nav-right-controls {
143
- display: flex;
144
- align-items: center;
145
- justify-self: end;
146
- gap: 0;
147
- }
148
-
149
- .widget-bar {
150
- display: flex;
151
- align-items: center;
152
- gap: 0;
153
- }
154
-
155
- /* Ursa update indicator (loading spinner in nav bar) */
156
- .ursa-update-indicator {
157
- display: none;
158
- align-items: center;
159
- justify-content: center;
160
- width: var(--global-nav-height);
161
- height: var(--global-nav-height);
162
- opacity: 0.7;
163
- }
164
- .ursa-spinner {
165
- width: 14px;
166
- height: 14px;
167
- border: 2px solid rgba(128, 128, 128, 0.3);
168
- border-top-color: rgba(128, 128, 128, 0.8);
169
- border-radius: 50%;
170
- animation: ursa-spin 0.8s linear infinite;
171
- }
172
- .ursa-update-gray .ursa-spinner {
173
- border-color: rgba(128, 128, 128, 0.3);
174
- border-top-color: rgba(128, 128, 128, 0.8);
175
- }
176
- .ursa-update-green .ursa-spinner {
177
- border-color: rgba(76, 175, 80, 0.3);
178
- border-top-color: rgba(76, 175, 80, 0.9);
179
- }
180
- @keyframes ursa-spin {
181
- to { transform: rotate(360deg); }
182
- }
183
-
184
- .widget-button {
185
- display: flex;
186
- align-items: center;
187
- justify-content: center;
188
- background: none;
189
- border: none;
190
- color: var(--text-color);
191
- font-size: 1.1rem;
192
- width: var(--global-nav-height);
193
- height: var(--global-nav-height);
194
- cursor: pointer;
195
- opacity: 0.7;
196
- transition: opacity 0.15s ease, background-color 0.15s ease;
197
- }
198
-
199
- .widget-button:hover {
200
- opacity: 1;
201
- background-color: rgba(128, 128, 128, 0.15);
202
- }
203
-
204
- .widget-button.active {
205
- opacity: 1;
206
- background-color: var(--widget-bg);
207
- }
208
-
209
- .widget-icon {
210
- pointer-events: none;
211
- }
212
-
213
- /* Widget dropdown panel (right-side, default) */
214
- .widget-dropdown {
215
- position: fixed;
216
- top: var(--global-nav-height);
217
- right: 0;
218
- width: min(420px, 100vw);
219
- max-height: calc(100vh - var(--global-nav-height));
220
- overflow-y: auto;
221
- background: var(--widget-bg);
222
- border-left: 1px solid var(--widget-border);
223
- border-bottom: 1px solid var(--widget-border);
224
- box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.2);
225
- z-index: 1100;
226
- transition: opacity 0.15s ease;
227
- }
228
-
229
- /* Widget dropdown panel (left-side) */
230
- .widget-dropdown.widget-dropdown-left {
231
- right: auto;
232
- left: 0;
233
- border-left: none;
234
- border-right: 1px solid var(--widget-border);
235
- box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.2);
236
- }
237
-
238
- .widget-dropdown.hidden {
239
- display: none;
240
- }
241
-
242
- /* Widget header with title and close button */
243
- .widget-header {
244
- display: flex;
245
- align-items: center;
246
- justify-content: space-between;
247
- padding: 0.5rem 0.75rem;
248
- border-bottom: 1px solid var(--widget-border);
249
- }
250
-
251
- .widget-header-title {
252
- font-weight: 600;
253
- font-size: 0.85rem;
254
- text-transform: uppercase;
255
- letter-spacing: 0.03em;
256
- opacity: 0.7;
257
- }
258
-
259
- .widget-close-btn {
260
- background: none;
261
- border: none;
262
- color: var(--text-color);
263
- font-size: 1rem;
264
- cursor: pointer;
265
- opacity: 0.5;
266
- padding: 4px 8px;
267
- line-height: 1;
268
- border-radius: 3px;
269
- transition: opacity 0.15s ease, background-color 0.15s ease;
270
- }
271
-
272
- .widget-close-btn:hover {
273
- opacity: 1;
274
- background-color: rgba(128, 128, 128, 0.2);
275
- }
276
-
277
- /* Widget content panels — only the active one is visible */
278
- .widget-content {
279
- display: none;
280
- }
281
-
282
- .widget-content.active {
283
- display: block;
284
- }
285
-
286
- /* --- TOC Widget --- */
287
- #widget-content-toc {
288
- padding: 0.5rem 0;
289
-
290
- ul {
291
- list-style: none;
292
- margin: 0;
293
- padding: 0;
294
-
295
- li {
296
- margin-bottom: 0.15rem;
297
- padding: 0;
298
-
299
- > a {
300
- text-decoration: none;
301
- color: var(--text-color);
302
- opacity: 0.75;
303
- display: block;
304
- padding: 0.3rem 1rem;
305
- border-left: 2px solid transparent;
306
- transition: all 0.2s ease;
307
- font-size: 0.9rem;
308
- }
309
-
310
- > a:hover {
311
- opacity: 1;
312
- border-left-color: var(--text-color);
313
- background-color: rgba(128, 128, 128, 0.1);
314
- }
315
-
316
- > a.active {
317
- opacity: 1;
318
- border-left-color: aqua;
319
- background-color: rgba(0, 255, 255, 0.1);
320
- }
321
-
322
- /* Indent nested headings */
323
- &.toc-h1 > a {
324
- padding-left: 1rem;
325
- font-weight: 600;
326
- }
327
-
328
- &.toc-h2 > a {
329
- padding-left: 1.5rem;
330
- font-size: 0.85rem;
331
- }
332
-
333
- &.toc-h3 > a {
334
- padding-left: 2rem;
335
- font-size: 0.8rem;
336
- }
337
- }
338
- }
339
- }
340
-
341
- /* --- Search Widget --- */
342
- .widget-search-wrapper {
343
- padding: 0.5rem;
344
- }
345
-
346
- .widget-search-input {
347
- width: 100%;
348
- height: 40px;
349
- border-radius: 5px;
350
- background: rgba(0, 0, 0, 0.15);
351
- color: var(--text-color);
352
- border: 1px solid var(--widget-border);
353
- padding: 0 1rem;
354
- box-sizing: border-box;
355
- font-size: 1rem;
356
- }
357
-
358
- .widget-search-input:focus {
359
- outline: none;
360
- border-color: aqua;
361
- box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.2);
362
- }
363
-
364
- .widget-search-results {
365
- max-height: calc(100vh - var(--global-nav-height) - 80px);
366
- overflow-y: auto;
367
- }
368
-
369
- .widget-search-results .search-result-item {
370
- padding: 10px 12px;
371
- border-bottom: 1px solid var(--widget-border);
372
- cursor: pointer;
373
- transition: background-color 0.15s ease;
374
- }
375
-
376
- .widget-search-results .search-result-item:last-child {
377
- border-bottom: none;
378
- }
379
-
380
- .widget-search-results .search-result-item:hover,
381
- .widget-search-results .search-result-item.selected {
382
- background-color: rgba(128, 128, 128, 0.15);
383
- }
384
-
385
- .widget-search-results .search-result-title {
386
- font-weight: 600;
387
- margin-bottom: 2px;
388
- color: var(--text-color);
389
- font-size: 0.9rem;
390
- }
391
-
392
- .widget-search-results .search-result-path {
393
- font-size: 0.8rem;
394
- color: var(--text-color);
395
- opacity: 0.6;
396
- }
397
-
398
- .widget-search-results .search-result-message {
399
- padding: 12px;
400
- text-align: center;
401
- color: var(--text-color);
402
- opacity: 0.6;
403
- font-style: italic;
404
- font-size: 0.85rem;
405
- }
406
-
407
- .widget-search-results .search-section-header {
408
- padding: 6px 12px;
409
- font-size: 0.7em;
410
- font-weight: 600;
411
- text-transform: uppercase;
412
- letter-spacing: 0.5px;
413
- color: var(--text-color);
414
- opacity: 0.5;
415
- background-color: rgba(128, 128, 128, 0.1);
416
- border-bottom: 1px solid var(--widget-border);
417
- }
418
-
419
- /* --- Profile Widget --- */
420
- .widget-profile-placeholder {
421
- display: flex;
422
- flex-direction: column;
423
- align-items: center;
424
- padding: 2rem 1rem;
425
- text-align: center;
426
- color: var(--text-color);
427
- opacity: 0.7;
428
- }
429
-
430
- .widget-profile-avatar {
431
- font-size: 3rem;
432
- margin-bottom: 1rem;
433
- }
434
-
435
- .widget-profile-placeholder p {
436
- margin: 0.5rem 0;
437
- font-size: 0.9rem;
438
- }
439
-
440
- .widget-profile-signin {
441
- margin-top: 0.5rem;
442
- padding: 8px 24px;
443
- background: var(--nav-top-bg);
444
- border: 1px solid var(--widget-border);
445
- color: var(--text-color);
446
- border-radius: 4px;
447
- cursor: not-allowed;
448
- opacity: 0.5;
449
- }
450
-
451
- .widget-profile-note {
452
- font-size: 0.75rem;
453
- opacity: 0.5;
454
- font-style: italic;
455
- }
456
-
457
- /* --- Recent Activity Widget --- */
458
- .recent-activity-list {
459
- padding: 0;
460
- }
461
-
462
- .recent-activity-loading,
463
- .recent-activity-empty {
464
- padding: 1.5rem 1rem;
465
- text-align: center;
466
- color: var(--text-color);
467
- opacity: 0.6;
468
- font-style: italic;
469
- font-size: 0.85rem;
470
- }
471
-
472
- .recent-activity-items {
473
- list-style: none;
474
- margin: 0;
475
- padding: 0;
476
- }
477
-
478
- .recent-activity-item {
479
- display: flex;
480
- align-items: baseline;
481
- justify-content: space-between;
482
- gap: 0.75rem;
483
- padding: 0.5rem 0.75rem;
484
- border-bottom: 1px solid var(--widget-border);
485
- transition: background-color 0.15s ease;
486
- }
487
-
488
- .recent-activity-item:last-child {
489
- border-bottom: none;
490
- }
491
-
492
- .recent-activity-item:hover {
493
- background-color: rgba(128, 128, 128, 0.1);
494
- }
495
-
496
- .recent-activity-link {
497
- color: var(--text-color);
498
- text-decoration: none;
499
- font-size: 0.9rem;
500
- flex: 1;
501
- min-width: 0;
502
- overflow: hidden;
503
- text-overflow: ellipsis;
504
- white-space: nowrap;
505
- }
506
-
507
- .recent-activity-link:hover {
508
- text-decoration: underline;
509
- }
510
-
511
- .recent-activity-time {
512
- font-size: 0.75rem;
513
- color: var(--text-color);
514
- opacity: 0.5;
515
- white-space: nowrap;
516
- flex-shrink: 0;
517
- }
518
-
519
- /* Search functionality styles */
520
- .search-results {
521
- position: fixed;
522
- top: calc(var(--global-nav-height) + 4px);
523
- left: 50%;
524
- transform: translateX(-50%);
525
- width: min(var(--article-width), calc(100vw - 100px));
526
- background: var(--bg-color);
527
- border: 1px solid var(--nav-top-bg);
528
- border-radius: 5px;
529
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
530
- max-height: 400px;
531
- overflow-y: auto;
532
- z-index: 1002;
533
- }
534
-
535
- .search-results.hidden {
536
- display: none;
537
- }
538
-
539
- .search-result-item {
540
- padding: 12px 16px;
541
- border-bottom: 1px solid var(--nav-top-bg);
542
- cursor: pointer;
543
- transition: background-color 0.2s ease;
544
- }
545
-
546
- .search-result-item:last-child {
547
- border-bottom: none;
548
- }
549
-
550
- .search-result-item:hover,
551
- .search-result-item.selected {
552
- background-color: var(--nav-top-bg);
553
- }
554
-
555
- .search-result-title {
556
- font-weight: 600;
557
- margin-bottom: 4px;
558
- color: var(--text-color);
559
- }
560
-
561
- .search-result-path {
562
- font-size: 0.85em;
563
- color: var(--text-color);
564
- opacity: 0.7;
565
- }
566
-
567
- .search-result-message {
568
- padding: 16px;
569
- text-align: center;
570
- color: var(--text-color);
571
- opacity: 0.7;
572
- font-style: italic;
573
- }
574
-
575
- /* Search section styling (for combined path/full-text results) */
576
- .search-section {
577
- border-bottom: 1px solid var(--nav-top-bg);
578
- }
579
-
580
- .search-section:last-child {
581
- border-bottom: none;
582
- }
583
-
584
- .search-section-header {
585
- padding: 8px 16px;
586
- font-size: 0.75em;
587
- font-weight: 600;
588
- text-transform: uppercase;
589
- letter-spacing: 0.5px;
590
- color: var(--text-color);
591
- opacity: 0.6;
592
- background-color: color-mix(in srgb, var(--nav-top-bg) 50%, transparent);
593
- border-bottom: 1px solid var(--nav-top-bg);
594
- }
595
-
596
- .search-show-more {
597
- display: block;
598
- width: 100%;
599
- padding: 8px 16px;
600
- background: transparent;
601
- border: none;
602
- color: var(--link-color);
603
- font-size: 0.85em;
604
- cursor: pointer;
605
- text-align: center;
606
- transition: background-color 0.2s ease;
607
- }
608
-
609
- .search-show-more:hover {
610
- background-color: var(--nav-top-bg);
611
- text-decoration: underline;
612
- }
613
-
614
- /* ==========================================
615
- TOP NAVIGATION MENU STYLES
616
- When body[data-menu-position="top"] is set
617
- ========================================== */
618
-
619
- /* Top menu container - positioning handled by parent .nav-center */
620
- nav#nav-main-top {
621
- display: none;
622
- width: 100%;
623
- }
624
-
625
- /* Show top menu when position is top */
626
- body[data-menu-position="top"] nav#nav-main-top {
627
- display: flex;
628
- align-items: center;
629
- }
630
-
631
- /* Hide inline search when top menu is present — widget handles search */
632
- body[data-menu-position="top"] nav#nav-global .search-wrapper-inline {
633
- display: none;
634
- }
635
-
636
- /* Hide side nav when top menu is active */
637
- body[data-menu-position="top"] nav#nav-main {
638
- display: none;
639
- }
640
-
641
- /* Full-width article when side nav is hidden */
642
- body[data-menu-position="top"] article#main-content {
643
- margin-left: auto;
644
- margin-right: auto;
645
- }
646
-
647
- /* Update nav-global grid to accommodate top menu - keep search+avatar together on right */
648
- body[data-menu-position="top"] nav#nav-global {
649
- grid-template-columns: 1fr var(--article-width) 1fr;
650
- }
651
-
652
- /* Top-level menu list */
653
- nav#nav-main-top .top-menu-level {
654
- display: flex;
655
- list-style: none;
656
- margin: 0;
657
- padding: 0;
658
- gap: 0;
659
- }
660
-
661
- /* Top-level menu items */
662
- nav#nav-main-top .top-menu-item {
663
- position: relative;
664
- padding: 0;
665
- margin: 0;
666
- }
667
-
668
- nav#nav-main-top .top-menu-label {
669
- display: block;
670
- padding: 0px 16px;
671
- line-height: var(--global-nav-height);
672
- color: var(--text-color);
673
- text-decoration: none;
674
- white-space: nowrap;
675
- cursor: pointer;
676
- transition: background-color 0.15s ease;
677
- }
678
-
679
- nav#nav-main-top .top-menu-label:hover {
680
- background-color: rgba(255, 255, 255, 0.1);
681
- }
682
-
683
- nav#nav-main-top a.top-menu-label:hover {
684
- text-decoration: none;
685
- }
686
-
687
- /* Dropdown indicator for items with children */
688
- nav#nav-main-top .top-menu-item.has-dropdown > .top-menu-label::after {
689
- content: '▼';
690
- font-size: 0.4em;
691
- margin-left: 6px;
692
- opacity: 0.6;
693
- vertical-align: bottom;
694
- }
695
-
696
- /* Use widget-bg for dropdown/flyout backgrounds (shared CSS var) */
697
- nav#nav-main-top .top-menu-dropdown {
698
- display: none;
699
- position: absolute;
700
- top: 100%;
701
- left: 0;
702
- min-width: 200px;
703
- max-height: calc(100vh - var(--global-nav-height) - 20px);
704
- overflow-y: auto;
705
- background-color: var(--widget-bg);
706
- border: 1px solid var(--widget-border);
707
- border-radius: 4px;
708
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
709
- list-style: none;
710
- margin: 0;
711
- padding: 0;
712
- z-index: 1005;
713
- }
714
-
715
- /* Show dropdown on hover */
716
- nav#nav-main-top .top-menu-item.has-dropdown:hover > .top-menu-dropdown {
717
- display: block;
718
- }
719
-
720
- /* Dropdown items */
721
- nav#nav-main-top .dropdown-item {
722
- position: relative;
723
- }
724
-
725
- nav#nav-main-top .dropdown-label {
726
- display: flex;
727
- align-items: center;
728
- justify-content: space-between;
729
- padding: 8px 16px;
730
- color: var(--text-color);
731
- text-decoration: none;
732
- white-space: nowrap;
733
- cursor: pointer;
734
- transition: background-color 0.15s ease;
735
- }
736
-
737
- nav#nav-main-top .dropdown-label:hover {
738
- background-color: rgba(255, 255, 255, 0.1);
739
- }
740
-
741
- nav#nav-main-top a.dropdown-label:hover {
742
- text-decoration: none;
743
- }
744
-
745
- /* Flyout indicator */
746
- nav#nav-main-top .flyout-indicator {
747
- font-size: 0.7em;
748
- opacity: 0.6;
749
- margin-left: 8px;
750
- }
751
-
752
- /* Flyout menu (nested children) - uses fixed positioning to avoid clipping by parent overflow */
753
- nav#nav-main-top .top-menu-flyout {
754
- display: none;
755
- position: fixed;
756
- min-width: 200px;
757
- max-height: calc(100vh - var(--global-nav-height) - 40px);
758
- overflow-y: auto;
759
- background-color: var(--widget-bg);
760
- border: 1px solid var(--widget-border);
761
- border-radius: 4px;
762
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
763
- list-style: none;
764
- margin: 0;
765
- padding: 0;
766
- z-index: 1006;
767
- /* JS will set top/left via inline styles */
768
- }
769
-
770
- /* Show flyout on hover - JS handles positioning */
771
- nav#nav-main-top .dropdown-item.has-flyout:hover > .top-menu-flyout {
772
- display: block;
773
- }
774
-
775
- nav#nav-main {
776
- position: fixed;
777
- top: calc(var(--global-nav-height));
778
- left: 0;
779
- width: 260px;
780
- max-height: calc(100vh - var(--global-nav-height));
781
- overflow: hidden;
782
- padding: 0;
783
- font-size: 0.85rem;
784
- transition: transform 0.2s ease;
785
- }
786
-
787
- /* Collapsed state for desktop - slide off screen */
788
- nav#nav-main.collapsed {
789
- transform: translateX(-100%);
790
- }
791
-
792
- /* When nav is collapsed, article can use full width */
793
- body:has(nav#nav-main.collapsed) article#main-content {
794
- margin-left: auto;
795
- margin-right: auto;
796
- }
797
-
798
- nav#nav-main {
799
- /* Column-based menu styles */
800
-
801
- .menu-loading {
802
- padding: 1rem;
803
- opacity: 0.6;
804
- text-align: center;
805
- }
806
-
807
- /* Container that clips the columns */
808
- .menu-columns-container {
809
- width: 100%;
810
- height: calc(100vh - var(--global-nav-height) - 40px);
811
- overflow: hidden;
812
- position: relative;
813
- }
814
-
815
- /* Wrapper that holds all columns and transforms for scrolling */
816
- .menu-columns-wrapper {
817
- display: flex;
818
- height: 100%;
819
- min-height: 0; /* Allow flex children to shrink */
820
- transition: transform 0.25s ease-out;
821
- }
822
-
823
- /* Individual column */
824
- .menu-column {
825
- width: 130px;
826
- min-width: 130px;
827
- flex-shrink: 0;
828
- height: 100%;
829
- min-height: 0; /* Allow flex child to shrink and enable scrolling */
830
- overflow-y: auto;
831
- overflow-x: hidden;
832
- border-right: 1px solid rgba(128, 128, 128, 0.15);
833
-
834
- /* Scrollbar styling */
835
- &::-webkit-scrollbar {
836
- width: 4px;
837
- }
838
- &::-webkit-scrollbar-track {
839
- background: transparent;
840
- }
841
- &::-webkit-scrollbar-thumb {
842
- background: rgba(128, 128, 128, 0.2);
843
- border-radius: 2px;
844
- }
845
- &::-webkit-scrollbar-thumb:hover {
846
- background: rgba(128, 128, 128, 0.4);
847
- }
848
- }
849
-
850
- .menu-column:last-child {
851
- border-right: none;
852
- }
853
-
854
- /* Column list */
855
- .menu-column-list {
856
- list-style: none;
857
- margin: 0;
858
- padding: 4px 0;
859
- }
860
-
861
- /* Column item */
862
- .menu-column-item {
863
- margin: 0;
864
- padding: 0;
865
- }
866
-
867
- .menu-column-item-row {
868
- display: flex;
869
- align-items: center;
870
- padding: 6px 8px;
871
- margin: 1px 4px;
872
- border-radius: 4px;
873
- cursor: pointer;
874
- transition: background-color 0.15s ease;
875
- gap: 4px;
876
- }
877
-
878
- .menu-column-item-row:hover {
879
- background-color: rgba(128, 128, 128, 0.15);
880
- }
881
-
882
- /* Label styling */
883
- .menu-column-label {
884
- flex: 1;
885
- text-decoration: none;
886
- color: var(--text-color);
887
- opacity: 0.85;
888
- white-space: nowrap;
889
- overflow: hidden;
890
- text-overflow: ellipsis;
891
- font-weight: 400;
892
- line-height: 1.3;
893
- text-transform: capitalize;
894
- font-size: 0.8rem;
895
- }
896
-
897
- .menu-column-item-row:hover .menu-column-label {
898
- opacity: 1;
899
- }
900
-
901
- /* Arrow for folders */
902
- .menu-column-arrow {
903
- opacity: 0.4;
904
- font-size: 12px;
905
- flex-shrink: 0;
906
- }
907
-
908
- .menu-column-item.has-children .menu-column-item-row:hover .menu-column-arrow {
909
- opacity: 0.8;
910
- }
911
-
912
- /* Selected item (on path to current doc) */
913
- .menu-column-item.selected > .menu-column-item-row {
914
- background-color: rgba(128, 128, 128, 0.2);
915
- }
916
-
917
- .menu-column-item.selected > .menu-column-item-row .menu-column-label {
918
- font-weight: 500;
919
- opacity: 1;
920
- }
921
-
922
- /* Current page item */
923
- .menu-column-item.current-page > .menu-column-item-row {
924
- background-color: rgba(0, 255, 255, 0.2);
925
- }
926
-
927
- .menu-column-item.current-page > .menu-column-item-row .menu-column-label {
928
- font-weight: 600;
929
- opacity: 1;
930
- }
931
-
932
- /* Index file styling - appears at top of menu with subtle emphasis */
933
- .menu-column-item.is-index > .menu-column-item-row {
934
- border-bottom: 1px solid rgba(128, 128, 128, 0.15);
935
- margin-bottom: 4px;
936
- padding-bottom: 8px;
937
- }
938
-
939
- .menu-column-item.is-index > .menu-column-item-row .menu-column-label {
940
- font-weight: 500;
941
- opacity: 0.95;
942
- }
943
-
944
- /* Scroll buttons */
945
- .menu-scroll-btn {
946
- position: absolute;
947
- top: 50%;
948
- transform: translateY(-50%);
949
- width: 24px;
950
- height: 48px;
951
- background: rgba(0, 0, 0, 0.4);
952
- border: none;
953
- color: var(--text-color);
954
- font-size: 18px;
955
- cursor: pointer;
956
- z-index: 10;
957
- border-radius: 4px;
958
- transition: all 0.2s ease;
959
- display: flex;
960
- align-items: center;
961
- justify-content: center;
962
- }
963
-
964
- .menu-scroll-btn:hover:not(:disabled) {
965
- background: rgba(0, 0, 0, 0.6);
966
- }
967
-
968
- .menu-scroll-btn:disabled {
969
- cursor: default;
970
- }
971
-
972
- .menu-scroll-btn.scroll-left {
973
- left: 2px;
974
- }
975
-
976
- .menu-scroll-btn.scroll-right {
977
- right: 2px;
978
- }
979
-
980
- /* Scroll indicator for current doc */
981
- .menu-scroll-indicator {
982
- position: absolute;
983
- bottom: 8px;
984
- left: 50%;
985
- transform: translateX(-50%);
986
- z-index: 10;
987
- }
988
-
989
- .menu-scroll-indicator .scroll-to-current {
990
- background: rgba(0, 255, 255, 0.3);
991
- border: 1px solid rgba(0, 255, 255, 0.5);
992
- color: var(--text-color);
993
- padding: 4px 12px;
994
- border-radius: 12px;
995
- font-size: 0.75rem;
996
- cursor: pointer;
997
- transition: all 0.2s ease;
998
- white-space: nowrap;
999
- }
1000
-
1001
- .menu-scroll-indicator .scroll-to-current:hover {
1002
- background: rgba(0, 255, 255, 0.5);
1003
- }
1004
- }
1005
-
1006
- article#main-content {
1007
- width: var(--article-width);
1008
- margin: calc(var(--global-nav-height) + 16px) auto 0 auto;
1009
-
1010
- img {
1011
- max-width: 100%;
1012
- }
1013
- }
1014
-
1015
- /* Breadcrumb navigation */
1016
- .breadcrumbs {
1017
- display: flex;
1018
- align-items: center;
1019
- flex-wrap: wrap;
1020
- gap: 0;
1021
- font-size: 0.8rem;
1022
- margin-bottom: 0.25rem;
1023
- color: var(--text-color);
1024
- opacity: 0.55;
1025
- }
1026
-
1027
- .breadcrumb-link {
1028
- color: var(--text-color);
1029
- text-decoration: none;
1030
- transition: opacity 0.15s ease;
1031
- }
1032
-
1033
- .breadcrumb-link:hover {
1034
- opacity: 1;
1035
- text-decoration: underline;
1036
- }
1037
-
1038
- .breadcrumb-sep {
1039
- margin: 0 0.4em;
1040
- opacity: 0.4;
1041
- font-size: 0.85em;
1042
- }
1043
-
1044
- .breadcrumb-current {
1045
- font-weight: 500;
1046
- }
1047
-
1048
- /* Footer styles */
1049
- footer#site-footer {
1050
- width: var(--article-width);
1051
- margin: 3rem auto 2rem auto;
1052
- padding-top: 2rem;
1053
- border-top: 1px solid rgba(128, 128, 128, 0.3);
1054
- text-align: center;
1055
-
1056
- .footer-content {
1057
- margin-bottom: 1.5rem;
1058
- font-size: 0.95rem;
1059
- opacity: 0.85;
1060
- }
1061
-
1062
- .footer-meta {
1063
- font-size: 0.8rem;
1064
- opacity: 0.6;
1065
- margin-bottom: 0.5rem;
1066
-
1067
- a {
1068
- color: inherit;
1069
- }
1070
- }
1071
-
1072
- .footer-copyright {
1073
- font-size: 0.8rem;
1074
- opacity: 0.6;
1075
- }
1076
- }
1077
-
1078
- @media (max-width: 800px) {
1079
- footer#site-footer {
1080
- width: calc(100vw - 2rem);
1081
- margin: 3rem 1rem 2rem 1rem;
1082
- }
1083
- }
1084
-
1085
- @media (max-width: 800px) {
1086
- nav#nav-global {
1087
- display: flex;
1088
-
1089
- .search-wrapper {
1090
- flex: 1;
1091
- width: auto;
1092
- max-width: none;
1093
- margin: 0 8px;
1094
- }
1095
-
1096
- input#global-search {
1097
- width: 100%;
1098
- }
1099
- }
1100
- article#main-content {
1101
- width: calc(100vw - 2rem);
1102
- margin: calc(var(--global-nav-height) + 16px) 1rem 0 1rem;
1103
- }
1104
- h1 {
1105
- font-size: 1.5rem;
1106
- }
1107
-
1108
- /* On mobile, hide the top menu and show search inline instead */
1109
- body[data-menu-position="top"] nav#nav-main-top {
1110
- display: none !important;
1111
- }
1112
- body[data-menu-position="top"] nav#nav-global .search-wrapper-inline {
1113
- display: block !important;
1114
- }
1115
-
1116
- /* Hide widget buttons on mobile — they're accessible via the inline search and mobile menu */
1117
- .widget-bar {
1118
- display: none !important;
1119
- }
1120
-
1121
- /* Hide widget dropdown on mobile */
1122
- .widget-dropdown {
1123
- display: none !important;
1124
- }
1125
-
1126
- nav#nav-main {
1127
- display: none !important;
1128
- position: fixed;
1129
- top: var(--global-nav-height);
1130
- left: 0;
1131
- width: 100vw;
1132
- height: calc(100vh - var(--global-nav-height));
1133
- max-width: none;
1134
- background: var(--bg-color);
1135
- z-index: 1000;
1136
- overflow-y: auto;
1137
- margin: 0;
1138
- padding: 0;
1139
- transform: none; /* Reset desktop transform */
1140
- }
1141
- nav#nav-main.active {
1142
- display: block !important;
1143
- }
1144
- nav#nav-main.collapsed {
1145
- display: none !important;
1146
- transform: none;
1147
- }
1148
-
1149
- /* Mobile menu list styles */
1150
- nav#nav-main .mobile-menu-list {
1151
- list-style: none;
1152
- margin: 0;
1153
- padding: 0;
1154
- }
1155
-
1156
- nav#nav-main .mobile-menu-item {
1157
- border-bottom: 1px solid rgba(128, 128, 128, 0.15);
1158
- }
1159
-
1160
- nav#nav-main .mobile-menu-label {
1161
- display: block;
1162
- padding: 14px 20px;
1163
- color: var(--text-color);
1164
- text-decoration: none;
1165
- font-size: 1rem;
1166
- }
1167
-
1168
- nav#nav-main a.mobile-menu-label:hover {
1169
- background-color: rgba(128, 128, 128, 0.1);
1170
- }
1171
-
1172
- nav#nav-main span.mobile-menu-label {
1173
- opacity: 0.5;
1174
- }
1175
-
1176
- /* Indent deeper levels */
1177
- nav#nav-main .mobile-menu-depth-1 .mobile-menu-label { padding-left: 40px; font-size: 0.95rem; }
1178
- nav#nav-main .mobile-menu-depth-2 .mobile-menu-label { padding-left: 56px; font-size: 0.9rem; }
1179
- nav#nav-main .mobile-menu-depth-3 .mobile-menu-label { padding-left: 72px; font-size: 0.85rem; }
1180
- nav#nav-main .mobile-menu-depth-4 .mobile-menu-label { padding-left: 88px; font-size: 0.85rem; }
1181
-
1182
- /* Current page highlight in mobile menu */
1183
- nav#nav-main .mobile-menu-current .mobile-menu-label {
1184
- font-weight: 600;
1185
- background-color: rgba(0, 255, 255, 0.1);
1186
- }
1187
-
1188
- /* Home item styling */
1189
- nav#nav-main .mobile-menu-home .mobile-menu-label {
1190
- font-weight: 600;
1191
- border-bottom: 2px solid rgba(128, 128, 128, 0.25);
1192
- }
1193
-
1194
- /* Override desktop indentation for mobile */
1195
- nav#nav-main > ul > li > ul > li > .menu-item-row,
1196
- nav#nav-main > ul > li > ul > li > ul > li > .menu-item-row,
1197
- nav#nav-main > ul > li > ul > li > ul > li > ul > li > .menu-item-row {
1198
- padding-left: 8px;
1199
- }
1200
- html {
1201
- font-size: 18px;
1202
- /* Prevents zoomed out appearance on mobile */
1203
- -webkit-text-size-adjust: 100%;
1204
- text-size-adjust: 100%;
1205
- }
1206
- }