@kenjura/ursa 0.9.0 → 0.32.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 CHANGED
@@ -1,154 +1,490 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;300;400;600&display=swap");
2
- @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
3
-
4
- body {
5
- background-color: #123;
6
- color: #ccc;
7
- font-family: "Work Sans", sans-serif;
1
+ body, html {
2
+ margin: 0;
3
+ padding: 0;
8
4
  }
9
- article {
10
- max-width: 40em;
11
- margin: 0 auto;
12
- padding: 5em;
13
- box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
14
- background-color: rgba(0, 0, 0, 0.15);
5
+ body {
6
+ font-family: sans-serif;
15
7
  }
16
- article aside {
17
- float: right;
18
- border: 1px solid #234;
19
- margin: 0 0 20px 20px;
20
- padding: 20px;
21
- max-width: 40%;
8
+
9
+ :root {
10
+ --article-width: 50rem;
11
+ --global-nav-height: 48px;
12
+ --twisty-size: 1.1rem;
22
13
  }
23
- article aside img {
24
- max-width: 100%;
14
+
15
+ @media (prefers-color-scheme: dark) {
16
+ :root {
17
+ --bg-color: #121212;
18
+ --text-color: #f2f2f2;
19
+ --nav-top-bg: #242424;
20
+ }
25
21
  }
26
- article a {
27
- color: #136ac1;
28
- text-decoration: none;
22
+
23
+ @media (prefers-color-scheme: light) {
24
+ :root {
25
+ --bg-color: white;
26
+ --text-color: black;
27
+ --nav-top-bg: #f2f2f2;
28
+ }
29
29
  }
30
30
 
31
- nav#nav-main {
32
- position: fixed;
33
- max-width: calc(50vw - 28rem);
34
- left: 1rem;
35
- top: 1rem;
36
- font-weight: 300;
31
+ body {
32
+ background: var(--bg-color);
33
+ color: var(--text-color);
37
34
  }
38
- nav#nav-main a {
39
- text-decoration: none;
40
- box-sizing: border-box;
41
- color: inherit;
42
- display: inline-block;
43
- padding: 0.15rem 1rem;
44
- width: 100%;
45
- position: relative;
35
+
36
+ /* Inactive/broken links */
37
+ a.inactive {
38
+ filter: brightness(0.5);
39
+ cursor: not-allowed;
40
+ text-decoration: line-through;
46
41
  }
47
- nav#nav-main a:hover {
48
- /* color: #7070b7; */
42
+
43
+ h1 {
44
+ max-width: var(--article-width);
45
+ overflow: hidden ;
46
+ text-overflow: ellipsis;
49
47
  }
50
- nav#nav-main ul {
51
- margin: 0;
52
- padding: 0;
48
+
49
+ nav#nav-global {
50
+ background-color: var(--nav-top-bg);
51
+ height: var(--global-nav-height);
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100vw;
56
+ display: grid;
57
+ grid-template-columns: auto 1fr auto;
58
+ align-items: center;
59
+ padding: 0 8px;
60
+ box-sizing: border-box;
61
+ z-index: 1001;
62
+
63
+ button.menu-button {
64
+ color: var(--text-color);
65
+ font-size: calc(var(--global-nav-height) / 2);
66
+ line-height: 1;
67
+ padding: 8px;
68
+ background: none;
69
+ border: none;
70
+ cursor: pointer;
71
+ justify-self: start;
72
+ }
73
+ button.menu-button:hover {
74
+ opacity: 0.7;
75
+ }
76
+
77
+ input#global-search {
78
+ width: var(--article-width);
79
+ max-width: calc(100% - 16px);
80
+ height: calc(var(--global-nav-height) - 16px);
81
+ border-radius: 5px;
82
+ background: rgba(0,0,0,0.25);
83
+ color: var(--text-color);
84
+ border-width: 0px;
85
+ padding: 0 1rem;
86
+ justify-self: center;
87
+ }
88
+
89
+ .avatar {
90
+ font-size: 1.5rem;
91
+ line-height: 1;
92
+ padding: 8px;
93
+ justify-self: end;
94
+ }
53
95
  }
54
- nav#nav-main li {
55
- list-style: none;
96
+
97
+ /* Search functionality styles */
98
+ .search-results {
99
+ position: fixed;
100
+ top: calc(var(--global-nav-height) + 4px);
101
+ left: 50%;
102
+ transform: translateX(-50%);
103
+ width: min(var(--article-width), calc(100vw - 100px));
104
+ background: var(--bg-color);
105
+ border: 1px solid var(--nav-top-bg);
106
+ border-radius: 5px;
107
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
108
+ max-height: 400px;
109
+ overflow-y: auto;
110
+ z-index: 1002;
56
111
  }
57
- nav#nav-main ul ul {
112
+
113
+ .search-results.hidden {
58
114
  display: none;
59
- position: absolute;
60
- background-color: #123;
61
- /* padding: 10px; */
62
- left: 100%;
63
- top: 0;
64
- height: 100%;
65
- min-width: 100%;
66
- overflow: auto;
67
115
  }
68
- nav#nav-main li {
69
- /* position: relative; */
116
+
117
+ .search-result-item {
118
+ padding: 12px 16px;
119
+ border-bottom: 1px solid var(--nav-top-bg);
120
+ cursor: pointer;
121
+ transition: background-color 0.2s ease;
70
122
  }
71
- nav#nav-main li:hover > ul {
72
- display: block;
73
- background-color: rgba(255, 255, 255, 0.1);
123
+
124
+ .search-result-item:last-child {
125
+ border-bottom: none;
74
126
  }
75
- nav#nav-main li:hover {
76
- background-color: rgba(255, 255, 255, 0.1);
127
+
128
+ .search-result-item:hover,
129
+ .search-result-item.selected {
130
+ background-color: var(--nav-top-bg);
77
131
  }
78
- nav#nav-main li li {
79
- width: 100%;
80
- white-space: nowrap;
132
+
133
+ .search-result-title {
134
+ font-weight: 600;
135
+ margin-bottom: 4px;
136
+ color: var(--text-color);
81
137
  }
82
- nav#nav-main li[data-has-children="true"] > a::after {
83
- content: ">";
84
- position: absolute;
85
- top: 5px;
86
- right: 2px;
87
- opacity: 0.5;
88
- font-size: 70%;
138
+
139
+ .search-result-path {
140
+ font-size: 0.85em;
141
+ color: var(--text-color);
142
+ opacity: 0.7;
89
143
  }
90
144
 
91
- #global-nav {
145
+ nav#nav-main {
92
146
  position: fixed;
93
- max-width: calc(50vw - 28rem);
94
- left: 1rem;
95
- bottom: 1rem;
96
- font-weight: 300;
147
+ top: calc(var(--global-nav-height) + 0.5rem);
148
+ left: 0;
149
+ width: 260px;
150
+ max-height: calc(100vh - var(--global-nav-height) - 1rem);
151
+ overflow-y: auto;
152
+ padding: 0.5rem 0;
153
+ font-size: 0.9rem;
154
+ transition: transform 0.2s ease;
97
155
  }
98
156
 
99
- @media screen and (min-width:1200px) {
100
- nav#nav-main #menu-icon {
101
- display: none;
157
+ /* Collapsed state for desktop - slide off screen */
158
+ nav#nav-main.collapsed {
159
+ transform: translateX(-100%);
160
+ }
161
+
162
+ /* When nav is collapsed, article can use full width */
163
+ body:has(nav#nav-main.collapsed) article#main-content {
164
+ margin-left: auto;
165
+ margin-right: auto;
166
+ }
167
+
168
+ nav#nav-main {
169
+
170
+ /* Scrollbar styling */
171
+ &::-webkit-scrollbar {
172
+ width: 6px;
102
173
  }
103
- nav#mobile-menu {
104
- display: none;
174
+ &::-webkit-scrollbar-track {
175
+ background: transparent;
105
176
  }
106
- nav#desktop-menu {
107
- display: block;
177
+ &::-webkit-scrollbar-thumb {
178
+ background: rgba(128, 128, 128, 0.3);
179
+ border-radius: 3px;
180
+ }
181
+ &::-webkit-scrollbar-thumb:hover {
182
+ background: rgba(128, 128, 128, 0.5);
108
183
  }
109
- }
110
184
 
111
- @media screen and (max-width:1199px) {
112
- nav#mobile-menu {
113
- display: block;
185
+ /* Breadcrumb navigation header */
186
+ .menu-breadcrumb {
187
+ display: flex;
188
+ align-items: center;
189
+ gap: 8px;
190
+ padding: 0.5rem 1rem;
191
+ margin: 0 8px 0.5rem 8px;
192
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
114
193
  }
115
- nav#desktop-menu {
116
- display: none;
194
+
195
+ .menu-breadcrumb button {
196
+ background: none;
197
+ border: none;
198
+ color: var(--text-color);
199
+ cursor: pointer;
200
+ padding: 4px 8px;
201
+ border-radius: 4px;
202
+ font-size: 1rem;
203
+ opacity: 0.7;
204
+ transition: all 0.2s ease;
117
205
  }
118
- nav#nav-main {
119
- font-size: 3rem;
206
+
207
+ .menu-breadcrumb button:hover {
208
+ opacity: 1;
209
+ background: rgba(128, 128, 128, 0.2);
120
210
  }
121
- nav#nav-main ul {
122
- background-color: #123;
123
- width: calc(100vw - 32px);
124
- height: calc(100vw - 32px);
211
+
212
+ .menu-current-path {
213
+ flex: 1;
214
+ font-weight: 500;
215
+ opacity: 0.9;
216
+ text-transform: capitalize;
217
+ white-space: nowrap;
218
+ overflow: hidden;
219
+ text-overflow: ellipsis;
125
220
  }
126
- nav#nav-main > ul {
127
- display: block; /* temp! */
128
- }
129
- nav#nav-main #menu-icon {
130
- display: block;
221
+
222
+ /* Root ul */
223
+ ul.menu-level {
224
+ list-style: none;
225
+ margin: 0;
226
+ padding: 0;
131
227
  }
132
- nav#nav-main:hover > ul {
133
- display: block;
228
+
229
+ ul {
230
+ list-style: none;
231
+ margin: 0;
232
+ padding: 0;
134
233
  }
135
- article {
136
- max-width: 100%;
234
+
235
+ li {
236
+ margin: 0;
237
+ padding: 0;
137
238
  }
138
- nav#nav-main li {
139
- position: relative;
239
+
240
+ /* Menu item row container - cleaner style like reference */
241
+ .menu-item-row {
242
+ display: flex;
243
+ align-items: center;
244
+ padding: 0.5rem 0.75rem;
245
+ margin: 2px 8px;
246
+ border-radius: 6px;
247
+ cursor: pointer;
248
+ transition: all 0.15s ease;
249
+ gap: 10px;
140
250
  }
141
- nav#nav-main ul ul {
142
- top: 100%;
143
- left: 0;
251
+
252
+ .menu-item-row:hover {
253
+ background-color: rgba(128, 128, 128, 0.1);
254
+ }
255
+
256
+ /* Icon container */
257
+ .menu-icon {
258
+ display: flex;
259
+ align-items: center;
260
+ justify-content: center;
261
+ width: 20px;
262
+ height: 20px;
263
+ flex-shrink: 0;
264
+ font-size: 16px;
265
+ opacity: 0.7;
266
+ }
267
+
268
+ .menu-icon img {
269
+ width: 18px;
270
+ height: 18px;
271
+ object-fit: contain;
272
+ border-radius: 3px;
273
+ }
274
+
275
+ /* Menu link */
276
+ .menu-label {
277
+ flex: 1;
278
+ text-decoration: none;
279
+ color: var(--text-color);
280
+ opacity: 0.85;
281
+ white-space: nowrap;
282
+ overflow: hidden;
283
+ text-overflow: ellipsis;
284
+ font-weight: 400;
285
+ line-height: 1.4;
286
+ text-transform: capitalize;
287
+ }
288
+
289
+ .menu-item-row:hover .menu-label {
290
+ opacity: 1;
291
+ }
292
+
293
+ /* More indicator for items with children */
294
+ .menu-more {
295
+ opacity: 0.4;
296
+ font-size: 14px;
297
+ padding: 0 4px;
298
+ cursor: pointer;
299
+ transition: opacity 0.15s ease;
300
+ }
301
+
302
+ .menu-item-row:hover .menu-more {
303
+ opacity: 0.7;
304
+ }
305
+
306
+ .menu-more:hover {
307
+ opacity: 1 !important;
308
+ }
309
+
310
+ /* Caret indicator for level-1 expandable items */
311
+ .menu-caret {
312
+ opacity: 0.4;
313
+ font-size: 12px;
314
+ padding: 0 4px;
315
+ cursor: pointer;
316
+ transition: opacity 0.15s ease;
317
+ font-weight: bold;
318
+ }
319
+
320
+ .menu-item-row:hover .menu-caret {
321
+ opacity: 0.7;
322
+ }
323
+
324
+ .menu-caret:hover {
325
+ opacity: 1 !important;
326
+ }
327
+
328
+ /* Current/active item */
329
+ .current-menu-item > .menu-item-row {
330
+ background-color: rgba(0, 255, 255, 0.15);
331
+ }
332
+
333
+ .current-menu-item > .menu-item-row .menu-label {
334
+ opacity: 1;
335
+ font-weight: 500;
336
+ }
337
+
338
+ /* Level 1 items - main folder entries */
339
+ .menu-item.level-1 > .menu-item-row {
340
+ font-size: 0.9rem;
341
+ }
342
+
343
+ .menu-item.level-1.has-children > .menu-item-row {
344
+ margin-top: 0.25rem;
345
+ }
346
+
347
+ /* Sublevel container - always visible for 2-level nav */
348
+ .menu-sublevel {
349
+ margin-left: 0;
350
+ padding-left: 0;
351
+ }
352
+
353
+ /* Level 2 items - nested under folders */
354
+ .menu-item.level-2 > .menu-item-row {
355
+ padding-left: 2.5rem;
356
+ font-size: 0.85rem;
357
+ }
358
+
359
+ .menu-item.level-2 > .menu-item-row .menu-icon {
360
+ display: none;
361
+ }
362
+
363
+ /* Separator between sections */
364
+ .menu-item.level-1.has-children + .menu-item.level-1:not(.has-children) {
365
+ margin-top: 0.5rem;
366
+ padding-top: 0.5rem;
367
+ border-top: 1px solid rgba(128, 128, 128, 0.15);
368
+ }
369
+ }
370
+
371
+ /* Table of Contents - Right side navigation */
372
+ nav#nav-toc {
373
+ position: fixed;
374
+ top: calc(var(--global-nav-height) + 1rem);
375
+ right: 1rem;
376
+ max-width: calc(50vw - var(--article-width) / 2 - 2rem);
377
+ max-height: calc(100vh - var(--global-nav-height) - 2rem);
378
+ overflow-y: auto;
379
+ z-index: 100;
380
+
381
+ ul {
382
+ list-style: none;
383
+ margin: 0;
384
+ padding: 0;
385
+
386
+ li {
387
+ margin-bottom: 0.25rem;
388
+ padding: 0;
389
+
390
+ > a {
391
+ text-decoration: none;
392
+ color: var(--text-color);
393
+ opacity: 0.7;
394
+ display: block;
395
+ padding: 0.25rem 0.5rem;
396
+ border-left: 2px solid transparent;
397
+ transition: all 0.3s ease;
398
+ font-size: 0.9rem;
399
+ }
400
+
401
+ > a:hover {
402
+ opacity: 1;
403
+ border-left-color: var(--text-color);
404
+ }
405
+
406
+ > a.active {
407
+ opacity: 1;
408
+ border-left-color: aqua;
409
+ background-color: rgba(0, 255, 255, 0.1);
410
+ }
411
+
412
+ /* Indent nested headings */
413
+ &.toc-h2 > a {
414
+ padding-left: 1rem;
415
+ font-size: 0.85rem;
416
+ }
417
+
418
+ &.toc-h3 > a {
419
+ padding-left: 1.5rem;
420
+ font-size: 0.8rem;
421
+ }
422
+ }
144
423
  }
145
424
  }
146
425
 
426
+ article#main-content {
427
+ width: var(--article-width);
428
+ margin: calc(var(--global-nav-height) + 16px) auto 0 auto;
147
429
 
148
- .material-symbols-outlined {
149
- font-variation-settings:
150
- 'FILL' 0,
151
- 'wght' 400,
152
- 'GRAD' 0,
153
- 'opsz' 48
430
+ img {
431
+ max-width: 100%;
432
+ }
433
+ }
434
+
435
+ @media (max-width: 800px) {
436
+ nav#nav-global {
437
+ display: flex;
438
+
439
+ input#global-search {
440
+ flex: 1;
441
+ width: auto;
442
+ max-width: none;
443
+ margin: 0 8px;
444
+ }
445
+ }
446
+ article#main-content {
447
+ width: calc(100vw - 2rem);
448
+ margin: calc(var(--global-nav-height) + 16px) 1rem 0 1rem;
449
+ }
450
+ h1 {
451
+ font-size: 1.5rem;
452
+ }
453
+ nav#nav-toc {
454
+ display: none !important;
455
+ }
456
+ nav#nav-main {
457
+ display: none !important;
458
+ position: fixed;
459
+ top: var(--global-nav-height);
460
+ left: 0;
461
+ width: 100vw;
462
+ height: 100vh;
463
+ max-width: none;
464
+ background: var(--bg-color);
465
+ z-index: 1000;
466
+ overflow-y: auto;
467
+ margin: 0;
468
+ padding: calc(var(--global-nav-height) + 1rem) 0 2rem 0;
469
+ transform: none; /* Reset desktop transform */
470
+ }
471
+ nav#nav-main.active {
472
+ display: block !important;
473
+ }
474
+ nav#nav-main.collapsed {
475
+ display: none !important;
476
+ transform: none;
477
+ }
478
+ /* Override desktop indentation for mobile */
479
+ nav#nav-main > ul > li > ul > li > .menu-item-row,
480
+ nav#nav-main > ul > li > ul > li > ul > li > .menu-item-row,
481
+ nav#nav-main > ul > li > ul > li > ul > li > ul > li > .menu-item-row {
482
+ padding-left: 8px;
483
+ }
484
+ html {
485
+ font-size: 18px;
486
+ /* Prevents zoomed out appearance on mobile */
487
+ -webkit-text-size-adjust: 100%;
488
+ text-size-adjust: 100%;
489
+ }
154
490
  }