tenant.openagents/omega

1/* CSS for UI elements (a.k.a. chrome) */
2
3@import "variables.css";
4
5html {
6  background-color: var(--bg);
7  scrollbar-color: var(--scrollbar) var(--bg);
8}
9#searchresults a,
10.content a:link,
11a:visited,
12a > .hljs {
13  color: var(--links);
14}
15
16.icon-logo-img {
17  display: block;
18}
19
20.icon-button {
21  position: relative;
22  height: 28px;
23  width: 28px;
24  z-index: 10;
25  display: flex;
26  align-items: center;
27  justify-content: center;
28  cursor: pointer;
29  transition: color 0.5s;
30  border: 0;
31  background-color: transparent;
32  border-radius: 4px;
33  color: var(--icons);
34}
35
36.icon-button:hover {
37  color: var(--icons-hover);
38  background-color: var(--icon-btn-bg-hover);
39}
40
41.ib-hidden-desktop {
42  display: none;
43}
44
45.header-bar {
46  position: sticky;
47  top: 0;
48  z-index: 100;
49  padding: 12px 16px;
50  background-color: var(--sidebar-bg);
51  border-bottom: 1px solid var(--divider);
52  display: flex;
53  align-items: center;
54  justify-content: space-between;
55  flex-shrink: 0;
56}
57
58.header-bar .left-container {
59  width: 160px;
60  display: flex;
61  align-items: center;
62  gap: 8px;
63}
64
65.header-bar .right-container {
66  width: 160px;
67  display: flex;
68  align-items: center;
69  gap: 4px;
70}
71
72.logo-nav {
73  display: flex;
74  align-items: center;
75  justify-content: center;
76  filter: var(--logo-brightness);
77}
78
79.nav-chapters {
80  font-size: 2.5em;
81  text-align: center;
82  text-decoration: none;
83
84  position: fixed;
85  top: 0;
86  bottom: 0;
87  margin: 0;
88  max-width: 150px;
89  min-width: 90px;
90
91  display: flex;
92  justify-content: center;
93  align-content: center;
94  flex-direction: column;
95
96  transition:
97    color 0.5s,
98    background-color 0.5s;
99}
100
101.nav-chapters:hover {
102  text-decoration: none;
103  background-color: var(--theme-hover);
104  transition:
105    background-color 0.15s,
106    color 0.15s;
107}
108
109.nav-wrapper {
110  margin-block-start: 50px;
111  display: none;
112}
113
114.footer-buttons {
115  display: flex;
116  justify-content: space-between;
117  align-items: center;
118  gap: 1rem;
119  padding: 24px 0;
120}
121
122.footer-button {
123  width: 100%;
124  padding: 12px;
125  display: flex;
126  align-items: center;
127  justify-content: center;
128  gap: 0.5rem;
129  background-color: var(--footer-btn-bg);
130  border: 1px solid var(--footer-btn-border);
131  border-radius: 0.5rem;
132  font-size: 0.9em;
133}
134
135.footer-button:hover {
136  background-color: var(--footer-btn-bg-hover);
137  border-color: var(--footer-btn-border-hover);
138}
139
140.footer-button i {
141  text-decoration: underline !important;
142  text-decoration-color: transparent !important;
143}
144
145.footer {
146  display: flex;
147  align-items: center;
148  justify-content: center;
149  flex-wrap: wrap;
150  gap: 0.5rem;
151  padding: 24px 0;
152  border-top: 1px dashed var(--border-footer);
153}
154
155.footer-link {
156  font-size: 1.25rem;
157  color: var(--links);
158  text-decoration: underline;
159  text-decoration-color: var(--link-line-decoration);
160  text-wrap-mode: nowrap;
161
162  :hover {
163    text-decoration-color: var(--link-line-decoration-hover);
164  }
165}
166
167.footer-separator {
168  color: var(--border-light);
169  font-size: 0.8em;
170}
171
172.footer-logo {
173  height: 16px;
174  border-radius: 0 !important;
175  border: none !important;
176  background: transparent !important;
177}
178
179.mobile-nav-chapters {
180  font-size: 2.5em;
181  text-align: center;
182  text-decoration: none;
183  width: 90px;
184  border-radius: 5px;
185  background-color: var(--sidebar-bg);
186}
187
188/* Only Firefox supports flow-relative values */
189.previous {
190  float: left;
191}
192[dir="rtl"] .previous {
193  float: right;
194}
195
196/* Only Firefox supports flow-relative values */
197.next {
198  float: right;
199  right: var(--page-padding);
200}
201[dir="rtl"] .next {
202  float: left;
203  right: unset;
204  left: var(--page-padding);
205}
206
207/* Use the correct buttons for RTL layouts*/
208[dir="rtl"] .previous i.fa-angle-left:before {
209  content: "\f105";
210}
211[dir="rtl"] .next i.fa-angle-right:before {
212  content: "\f104";
213}
214
215@media only screen and (max-width: 1080px) {
216  .nav-wide-wrapper {
217    display: none;
218  }
219  .nav-wrapper {
220    display: block;
221  }
222}
223
224/* sidebar-visible */
225@media only screen and (max-width: 1380px) {
226  #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper {
227    display: none;
228  }
229  #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper {
230    display: block;
231  }
232}
233
234/* Inline code */
235
236:not(pre) > .hljs {
237  display: inline;
238  padding: 0.1em 0.3em;
239  border-radius: 3px;
240}
241
242:not(pre):not(a) > .hljs {
243  color: var(--inline-code-color);
244  overflow-x: initial;
245}
246
247a:hover > .hljs {
248  text-decoration: underline;
249}
250
251pre {
252  background-color: var(--pre-bg);
253  border: 1px solid;
254  border-color: var(--pre-border);
255  box-shadow: var(--pre-shadow) 4px 4px 0px 0px;
256  position: relative;
257}
258pre > .hljs {
259  background-color: initial;
260}
261pre > .buttons {
262  position: absolute;
263  z-index: 100;
264  right: 0px;
265  top: 2px;
266  margin: 0px;
267  padding: 2px 0px;
268
269  color: var(--sidebar-fg);
270  cursor: pointer;
271  visibility: hidden;
272  opacity: 0;
273  transition:
274    visibility 0.1s linear,
275    opacity 0.1s linear;
276}
277pre:hover > .buttons {
278  visibility: visible;
279  opacity: 1;
280}
281pre > .buttons :hover {
282  color: var(--sidebar-active);
283  border-color: var(--border-hover);
284  background-color: var(--theme-hover);
285}
286pre > .buttons i {
287  margin-inline-start: 8px;
288}
289pre > .buttons button {
290  cursor: inherit;
291  margin: 0 4px;
292  height: 26px;
293  width: 26px;
294  font-size: 14px;
295  border-style: solid;
296  border-width: 1px;
297  border-radius: 4px;
298  border-color: var(--border);
299  background-color: var(--popover-bg);
300  transition: 100ms;
301  transition-property: color, border-color, background-color;
302  color: var(--icons);
303}
304
305pre > .playground {
306  border: none;
307  margin: 0;
308  box-shadow: none;
309  /* HACK: This serves to visually hide nested <pre> elements in "playground" code snippets.
310  A more robust solution would involve modifying the rendered HTML. */
311}
312
313@media (pointer: coarse) {
314  pre > .buttons button {
315    /* On mobile, make it easier to tap buttons. */
316    padding: 0.3rem 1rem;
317  }
318
319  .sidebar-resize-indicator {
320    /* Hide resize indicator on devices with limited accuracy */
321    display: none;
322  }
323}
324pre > code {
325  display: block;
326  padding: 1rem;
327}
328
329/* TODO: ACE editors overlap their buttons because ACE does absolute
330   positioning within the code block which breaks padding. The only solution I
331   can think of is to move the padding to the outer pre tag (or insert a div
332   wrapper), but that would require fixing a whole bunch of CSS rules.
333*/
334.hljs.ace_editor {
335  padding: 0rem 0rem;
336}
337
338pre > .result {
339  margin-block-start: 10px;
340}
341
342/* Search */
343
344#searchresults a {
345  text-decoration: none;
346}
347
348mark {
349  border-radius: 2px;
350  padding-block-start: 0;
351  padding-block-end: 1px;
352  padding-inline-start: 3px;
353  padding-inline-end: 3px;
354  margin-block-start: 0;
355  margin-block-end: -1px;
356  margin-inline-start: -3px;
357  margin-inline-end: -3px;
358  background-color: var(--search-mark-bg);
359  transition: background-color 300ms linear;
360  cursor: pointer;
361}
362
363mark.fade-out {
364  background-color: rgba(0, 0, 0, 0) !important;
365  cursor: auto;
366}
367
368.searchbar-outer {
369  margin-inline-start: auto;
370  margin-inline-end: auto;
371  width: 100%;
372  max-width: var(--content-max-width);
373  box-sizing: border-box;
374  padding: 16px;
375}
376
377#searchbar {
378  width: 100%;
379  margin-block-start: 5px;
380  margin-block-end: 0;
381  margin-inline-start: auto;
382  margin-inline-end: auto;
383  padding: 10px 16px;
384  transition: box-shadow 300ms ease-in-out;
385  border: 1px solid var(--searchbar-border-color);
386  border-radius: 3px;
387  background-color: var(--searchbar-bg);
388  color: var(--searchbar-fg);
389}
390#searchbar:focus,
391#searchbar.active {
392  box-shadow: 0 0 3px var(--searchbar-shadow-color);
393  outline: none;
394  border-color: var(--search-mark-bg);
395}
396
397.searchresults-header {
398  font-weight: bold;
399  font-size: 1em;
400  padding-block-start: 0;
401  padding-block-end: 0;
402  color: var(--searchresults-header-fg);
403}
404
405ul#searchresults {
406  list-style: none;
407  padding-inline-start: 0;
408  margin-block-end: 0;
409}
410ul#searchresults li {
411  margin: 10px 0px;
412  padding: 2px;
413  border-radius: 2px;
414  scroll-margin-block-end: 10px;
415}
416ul#searchresults li.focus {
417  background-color: var(--searchresults-li-bg);
418}
419ul#searchresults span.teaser {
420  display: block;
421  font-size: 0.8em;
422  margin-block-start: 5px;
423  margin-inline-start: 4px;
424  padding-inline-start: 2ch;
425  border-left: 1px solid var(--divider);
426}
427ul#searchresults span.teaser em {
428  font-weight: bold;
429  color: var(--full-contrast);
430  background: var(--code-bg);
431}
432
433/* Sidebar */
434
435.sidebar {
436  position: relative;
437  order: 0;
438  width: var(--sidebar-width);
439  flex-shrink: 0;
440  display: flex;
441  flex-direction: column;
442  font-size: 0.875em;
443  box-sizing: border-box;
444  -webkit-overflow-scrolling: touch;
445  overscroll-behavior-y: none;
446  overflow: hidden;
447  background-color: var(--sidebar-bg);
448  color: var(--sidebar-fg);
449  border-right: 1px solid var(--divider);
450}
451
452[dir="rtl"] .sidebar {
453  left: unset;
454  right: 0;
455}
456.sidebar-resizing {
457  -moz-user-select: none;
458  -webkit-user-select: none;
459  -ms-user-select: none;
460  user-select: none;
461}
462.no-js .sidebar,
463.js:not(.sidebar-resizing) .sidebar {
464  transition: transform 0.3s; /* Animation: slide away */
465}
466.sidebar code {
467  line-height: 2em;
468}
469.sidebar .sidebar-scrollbox {
470  flex: 1;
471  overflow-y: auto;
472  min-height: 0;
473}
474
475.sidebar .sidebar-resize-handle {
476  position: absolute;
477  cursor: col-resize;
478  width: 0;
479  right: calc(var(--sidebar-resize-indicator-width) * -1);
480  top: 0;
481  bottom: 0;
482  display: flex;
483  align-items: center;
484}
485
486.sidebar-resize-handle .sidebar-resize-indicator {
487  width: 100%;
488  height: 12px;
489  background-color: var(--icons);
490  margin-inline-start: var(--sidebar-resize-indicator-space);
491}
492
493[dir="rtl"] .sidebar .sidebar-resize-handle {
494  left: calc(var(--sidebar-resize-indicator-width) * -1);
495  right: unset;
496}
497.js .sidebar .sidebar-resize-handle {
498  cursor: col-resize;
499  width: calc(
500    var(--sidebar-resize-indicator-width) -
501      var(--sidebar-resize-indicator-space)
502  );
503}
504.sidebar::-webkit-scrollbar {
505  background: var(--sidebar-bg);
506}
507.sidebar::-webkit-scrollbar-thumb {
508  background: var(--scrollbar);
509}
510
511@media only screen and (max-width: 780px) {
512  .sidebar {
513    position: fixed;
514    top: 0;
515    left: 0;
516    height: 100vh;
517    padding-top: 57px; /* Account for header height */
518    transform: translateX(-100%);
519    z-index: 99;
520    transition: transform 0.1s ease;
521  }
522
523  [dir="rtl"] .sidebar {
524    left: unset;
525    right: 0;
526    transform: translateX(100%);
527  }
528
529  body.sidebar-open .sidebar {
530    box-shadow: var(--sidebar-mobile-shadow);
531    transform: translateX(0);
532  }
533}
534
535.chapter {
536  list-style: none outside none;
537  padding: 16px;
538  padding-top: 8px;
539  line-height: 2.2em;
540  margin: 0;
541}
542
543.chapter ol {
544  width: 100%;
545}
546
547.chapter li {
548  display: flex;
549  color: var(--sidebar-non-existant);
550}
551
552.chapter li a {
553  display: block;
554  padding: 0 4px;
555  text-decoration: none;
556  color: var(--sidebar-fg);
557}
558
559.chapter li a:hover {
560  color: var(--sidebar-active);
561}
562
563.chapter li a.active {
564  color: var(--sidebar-active);
565  background-color: var(--sidebar-active-bg);
566}
567
568.chapter li > a.toggle {
569  cursor: pointer;
570  display: flex;
571  align-items: center;
572  justify-content: center;
573  margin-inline-start: auto;
574  user-select: none;
575  opacity: 0.5;
576  border-radius: 4px;
577  transition:
578    opacity 0.15s ease,
579    background-color 0.15s ease;
580}
581
582.chapter li > a.toggle:hover {
583  opacity: 1;
584  background-color: var(--theme-hover);
585}
586
587.chapter li.chapter-item {
588  display: flex;
589  flex-wrap: wrap;
590  align-items: center;
591  line-height: 1.5em;
592  margin-block-start: 0.6em;
593}
594
595.section li.chapter-item {
596  margin-block-start: 0;
597}
598
599.chapter li.part-title + li.chapter-item {
600  margin-block-start: 0.2em;
601}
602
603.chapter li.chapter-item > a:first-child {
604  flex: 1;
605  min-width: 0;
606}
607
608.chapter li.expanded > a.toggle div {
609  transform: rotate(90deg);
610}
611
612.chapter li.part-title {
613  font-size: 1.4rem;
614  padding: 0 8px 0 4px;
615  color: var(--title-color);
616  cursor: pointer;
617  user-select: none;
618  display: flex;
619  align-items: center;
620  justify-content: space-between;
621  line-height: auto;
622  border-radius: 2px;
623}
624
625.chapter li.part-title.collapsible:hover {
626  background-color: var(--hover-section-title);
627}
628
629.chapter li.part-title.collapsible::after {
630  content: "❯";
631  display: inline-block;
632  font-size: 1rem;
633  opacity: 0.6;
634  transition: transform 0.2s ease;
635  flex-shrink: 0;
636}
637
638.chapter li.part-title.collapsible.expanded::after {
639  transform: rotate(90deg);
640}
641
642.chapter li.section-spacer {
643  height: 1.5rem;
644  list-style: none;
645}
646
647.chapter li.section-hidden {
648  display: none !important;
649}
650
651.section {
652  list-style: none outside none;
653  padding-inline-start: 1.5ch;
654  margin-inline-start: 1ch;
655  margin-top: 6px;
656  border-left: 1px solid var(--border-light);
657  line-height: 1.9em;
658  display: flex;
659  flex-direction: column;
660  gap: 0.6em;
661}
662
663.theme-popup {
664  position: absolute;
665  right: 155px;
666  top: calc(var(--menu-bar-height) - 18px);
667  z-index: 1000;
668  border-radius: 4px;
669  font-size: 1.4rem;
670  color: var(--fg);
671  background: var(--popover-bg);
672  border: 1px solid var(--popover-border);
673  margin: 0;
674  padding: 0;
675  list-style: none;
676  display: none;
677  overflow: hidden;
678}
679
680[dir="rtl"] .theme-popup {
681  left: unset;
682  right: 10px;
683}
684.theme-popup .default {
685  color: var(--icons);
686}
687.theme-popup .theme {
688  width: 100%;
689  border: 0;
690  margin: 0;
691  padding: 2px 24px;
692  line-height: 25px;
693  white-space: nowrap;
694  text-align: start;
695  cursor: pointer;
696  color: inherit;
697  background: inherit;
698  font-size: inherit;
699  font-family: inherit;
700}
701.theme-popup .theme:hover {
702  background-color: var(--theme-hover);
703}
704
705.theme-selected::before {
706  font-family: Arial, Helvetica, sans-serif;
707  text-align: center;
708  display: inline-block;
709  content: "✓";
710  margin-inline-start: -20px;
711  width: 20px;
712}
713
714.download-button {
715  max-height: 28px;
716  margin-left: 8px;
717  background: var(--download-btn-bg);
718  color: var(--download-btn-color);
719  padding: 4px 8px;
720  border: 1px solid;
721  border-color: var(--download-btn-border);
722  font-size: 1.4rem;
723  border-radius: 4px;
724  box-shadow: var(--download-btn-shadow) 0px -2px 0px 0px inset;
725  text-decoration: none;
726  transition: 100ms;
727  transition-property: box-shadow, border-color, background-color;
728}
729
730.download-button:hover {
731  background: var(--download-btn-bg);
732  border-color: var(--download-btn-border-hover);
733  box-shadow: none;
734}
735
736.search-button {
737  min-width: 100px;
738  max-width: 300px;
739  height: 28px;
740  width: 100%;
741  padding: 4px 4px 4px 8px;
742  display: flex;
743  gap: 8px;
744  background: var(--search-btn-bg);
745  border: 1px solid;
746  border-color: var(--search-btn-border);
747  font-size: 1.4rem;
748  font-family: var(--font);
749  color: var(--icons);
750  border-radius: 4px;
751  transition: 100ms;
752  transition-property: box-shadow, border-color, background-color;
753}
754
755.search-button:hover {
756  background: var(--search-btn-bg-hover);
757}
758
759.search-button .icon {
760  width: 12px;
761  height: 12px;
762  transform: translateY(10%);
763  scale: 0.9;
764}
765
766.search-content-desktop {
767  width: 100%;
768  display: flex;
769  justify-content: space-between;
770}
771
772.search-content-mobile {
773  display: none;
774}
775
776.search-container {
777  box-sizing: border-box;
778  position: fixed;
779  inset: 0;
780  z-index: 1000;
781  padding: 24px;
782  padding-top: 72px;
783  background-color: rgba(0, 0, 0, 0.5);
784  display: none;
785  justify-content: center;
786}
787
788.search-container:has(#search-wrapper:not(.hidden)) {
789  display: flex;
790}
791
792.search-modal {
793  box-sizing: border-box;
794
795  max-width: 600px;
796  min-width: 600px;
797  height: fit-content;
798  max-height: 600px;
799  display: flex;
800  flex-direction: column;
801  overflow-y: hidden;
802
803  border-radius: 8px;
804  background: var(--popover-bg);
805  border: 1px solid var(--popover-border);
806  box-shadow: var(--popover-shadow);
807}
808
809.searchresults-outer {
810  flex: 1;
811  min-height: 0;
812  overflow-y: auto;
813  padding: 0px 22px 22px 22px;
814}
815
816#searchbar {
817  margin: 0;
818}
819
820@media only screen and (max-width: 780px) {
821  .header-bar {
822    padding: 16px;
823    justify-content: start;
824  }
825
826  .download-button {
827    display: none;
828  }
829
830  .ib-hidden-mobile {
831    display: none;
832  }
833
834  .header-bar .left-container {
835    width: fit-content;
836  }
837
838  .header-bar .right-container {
839    width: fit-content;
840  }
841
842  .search-button {
843    width: 100px;
844    margin-left: auto;
845    margin-right: 8px;
846  }
847
848  .ib-hidden-desktop {
849    display: block;
850  }
851
852  .search-modal {
853    width: 90vw;
854    min-width: auto;
855  }
856
857  .search-content-desktop {
858    display: none;
859  }
860
861  .search-content-mobile {
862    display: flex;
863  }
864
865  .theme-popup {
866    right: 15px;
867  }
868}
869