tenant.openagents/omega

1/* Base styles and content styles */
2
3@import "variables.css";
4
5:root {
6  /* Browser default font-size is 16px, this way 1 rem = 10px */
7  font-size: 62.5%;
8  color-scheme: var(--color-scheme);
9}
10
11html {
12  font-family: var(--font);
13  color: var(--fg);
14  background-color: var(--bg);
15  text-size-adjust: none;
16  -webkit-text-size-adjust: none;
17
18  text-rendering: geometricPrecision !important;
19  -webkit-font-smoothing: antialiased !important;
20  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005);
21}
22
23body {
24  margin: 0;
25  font-size: 1.6rem;
26  overflow: hidden;
27  height: 100vh;
28  overscroll-behavior-y: none;
29}
30
31#body-container {
32  display: flex;
33  flex-direction: column;
34  height: 100vh;
35  overflow: hidden;
36}
37
38code {
39  font-family: var(--mono-font) !important;
40  font-size: var(--code-font-size);
41  direction: ltr !important;
42}
43
44/* make long words/inline code not x overflow */
45main {
46  overflow-wrap: break-word;
47}
48
49.noise-pattern {
50  pointer-events: none;
51  user-select: none;
52  z-index: 105;
53  position: absolute;
54  inset: 0;
55  background-size: 180px;
56  background-repeat: repeat;
57  opacity: var(--noise-opacity);
58}
59
60/* make wide tables scroll if they overflow */
61.table-wrapper {
62  overflow-x: auto;
63}
64
65h1,
66h2,
67h3,
68h4,
69h5,
70h6 {
71  position: relative;
72  font-family: var(--title-font);
73  font-weight: 400;
74}
75
76h1 {
77  color: var(--title-color);
78}
79
80h2,
81h3,
82h4,
83h5,
84h6 {
85  color: var(--full-contrast);
86}
87
88/* Don't change font size in headers. */
89h1 code,
90h2 code,
91h3 code,
92h4 code,
93h5 code,
94h6 code {
95  font-size: unset;
96}
97
98.left {
99  float: left;
100}
101.right {
102  float: right;
103}
104.boring {
105  opacity: 0.6;
106}
107.hide-boring .boring {
108  display: none;
109}
110.hidden {
111  display: none !important;
112}
113
114h1 {
115  font-size: 3.4rem;
116}
117
118h2 {
119  padding-bottom: 1rem;
120  border-bottom: 1px solid;
121  border-color: var(--border-light);
122}
123
124h3 {
125  font-size: 2rem;
126  padding-bottom: 0.8rem;
127  border-bottom: 1px dashed;
128  border-color: var(--border-light);
129}
130
131h4 {
132  font-size: 1.8rem;
133}
134
135h5 {
136  font-size: 1.6rem;
137}
138
139h2,
140h3,
141h4,
142h5 {
143  margin-block-start: 1.5em;
144  margin-block-end: 0;
145}
146
147strong {
148  color: var(--full-contrast);
149}
150
151code:focus-visible,
152pre:focus-visible,
153li:focus-visible,
154button:focus-visible,
155a:focus-visible {
156  outline: 3px solid #094ece80;
157}
158
159.header + .header h3,
160.header + .header h4,
161.header + .header h5 {
162  margin-block-start: 1em;
163}
164
165h1:target::before,
166h2:target::before,
167h3:target::before,
168h4:target::before,
169h5:target::before,
170h6:target::before {
171  content: "»";
172  position: absolute;
173  left: -1.5ch;
174}
175
176hr {
177  border: 0px solid;
178  color: transparent;
179  width: 100%;
180  height: 1px;
181  background-color: var(--border-light);
182}
183
184/* This is broken on Safari as of version 14, but is fixed
185   in Safari Technology Preview 117 which I think will be Safari 14.2.
186   https://bugs.webkit.org/show_bug.cgi?id=218076
187*/
188:target {
189  /* Safari does not support logical properties */
190  scroll-margin-top: calc(var(--menu-bar-height) + 2rem);
191}
192
193.page-wrapper {
194  box-sizing: border-box;
195  background-color: var(--bg);
196  display: flex;
197  flex: 1;
198  overflow: hidden;
199  min-height: 0;
200}
201
202.page {
203  outline: 0;
204  order: 1;
205  flex: 1;
206  display: flex;
207  flex-direction: column;
208  overflow-x: hidden;
209  overflow-y: auto;
210  overscroll-behavior-y: none;
211  min-width: 0;
212  position: relative;
213}
214
215.no-js .page-wrapper,
216.js:not(.sidebar-resizing) .page-wrapper {
217  transition:
218    margin-left 0.3s ease,
219    transform 0.3s ease; /* Animation: slide away */
220}
221[dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper {
222  transition:
223    margin-right 0.3s ease,
224    transform 0.3s ease; /* Animation: slide away */
225}
226
227.content {
228  padding: 32px 32px 0 32px;
229  display: flex;
230  justify-content: space-between;
231  gap: 36px;
232}
233
234.content main {
235  margin-inline-start: auto;
236  margin-inline-end: auto;
237  max-width: var(--content-max-width);
238}
239
240.content p {
241  line-height: 1.625em;
242}
243.content div.video {
244  z-index: 150;
245  margin-top: 1rem;
246  border: 1px solid;
247  border-color: var(--border);
248  border-radius: 8px;
249  overflow: clip;
250}
251.content div.video iframe {
252  margin: 0;
253}
254.content ol {
255  marker: none;
256  line-height: 1.8;
257  padding-left: 2em;
258  ::marker {
259    font-size: 1.4rem;
260  }
261  li {
262    padding-left: 0;
263  }
264}
265.content ul {
266  line-height: 1.8;
267  padding-left: 1.8em;
268}
269.content a {
270  text-decoration: underline;
271  text-decoration-color: var(--link-line-decoration);
272}
273.content a:hover {
274  text-decoration-color: var(--link-line-decoration-hover);
275}
276.content img,
277.content video {
278  position: relative;
279  z-index: 150;
280  max-width: 100%;
281  background-color: var(--media-bg);
282  border: 1px solid;
283  border-color: var(--border);
284  border-radius: 8px;
285  overflow: clip;
286}
287.content h1 .header:link,
288.content h1 .header:visited {
289  color: var(--title-color);
290}
291.content :is(h2, h3, h4, h5, h6) .header:link,
292.content :is(h2, h3, h4, h5, h6) .header:visited {
293  color: var(--full-contrast);
294}
295.content .header:link,
296.content .header:visited:hover {
297  text-decoration: none;
298}
299
300iframe {
301  margin-top: 1rem;
302  margin-bottom: 10rem;
303}
304
305table {
306  margin-top: 1.4rem;
307  width: 100%;
308  border-collapse: collapse;
309  font-size: 1.4rem;
310}
311table td {
312  padding: 4px 12px;
313  border: 1px var(--table-border-color) solid;
314}
315table thead {
316  background: var(--table-header-bg);
317}
318table thead td {
319  font-weight: 700;
320  border: none;
321}
322table thead th {
323  padding: 6px 12px;
324  color: var(--full-contrast);
325  text-align: left;
326  border: 1px var(--table-border-color) solid;
327}
328table thead tr {
329  border: 1px var(--table-border-color) solid;
330}
331/* Alternate background colors for rows */
332table tbody tr:nth-child(2n) {
333  background: var(--table-alternate-bg);
334}
335
336blockquote {
337  margin: auto;
338  margin-top: 1rem;
339  padding: 1rem 1.25rem;
340  color: var(--full-contrast);
341  background-color: var(--quote-bg);
342  border: 1px solid var(--quote-border);
343}
344
345blockquote > p {
346  margin: 0;
347  padding-left: 2.6rem;
348  font-size: 1.4rem;
349}
350
351blockquote:before {
352  --size: 1.4rem;
353  position: absolute;
354  content: "ⓘ";
355  margin: 0.3rem 0;
356  width: var(--size);
357  height: var(--size);
358  font-size: var(--size);
359  font-weight: bold;
360  color: var(--icons);
361  display: flex;
362  align-items: center;
363  justify-content: center;
364  line-height: 1.625em;
365}
366
367blockquote .warning:before {
368  background-color: var(--quote-bg);
369}
370
371.warning {
372  margin: auto;
373  padding: 1rem 1.25rem;
374  color: var(--full-contrast);
375  background-color: var(--warning-bg);
376  border: 1px solid var(--warning-border);
377}
378
379.warning > p {
380  margin: 0;
381  padding-left: 2.6rem;
382  font-size: 1.4rem;
383}
384
385.warning:before {
386  --size: 1.4rem;
387  position: absolute;
388  content: "ⓘ";
389  margin: 0.3rem 0;
390  width: var(--size);
391  height: var(--size);
392  font-size: var(--size);
393  font-weight: bold;
394  color: var(--warning-icon);
395  display: flex;
396  align-items: center;
397  justify-content: center;
398  line-height: 1.625em;
399}
400
401kbd {
402  background-color: var(--keybinding-bg);
403  padding: 4px 4px 6px 4px;
404  border-radius: 4px;
405  font-family: var(--mono-font);
406  display: inline-block;
407  margin: 0 2px;
408  border: solid 1px var(--popover-border);
409  box-shadow: inset 0 -1px 0 var(--theme-hover);
410  font-size: var(--code-font-size);
411  color: var(--full-contrast);
412  line-height: 10px;
413  vertical-align: middle;
414}
415
416:not(.footnote-definition) + .footnote-definition,
417.footnote-definition + :not(.footnote-definition) {
418  margin-block-start: 2em;
419}
420.footnote-definition {
421  font-size: 1.4rem;
422  margin: 0.5em 0;
423  border-bottom: 1px solid;
424  border-color: var(--divider);
425}
426.footnote-definition p {
427  display: inline;
428}
429
430.tooltiptext {
431  position: absolute;
432  visibility: hidden;
433  color: #fff;
434  background-color: #333;
435  transform: translateX(
436    -50%
437  ); /* Center by moving tooltip 50% of its width left */
438  left: -8px; /* Half of the width of the icon */
439  top: -35px;
440  font-size: 0.8em;
441  text-align: center;
442  border-radius: 6px;
443  padding: 5px 8px;
444  margin: 5px;
445  z-index: 1000;
446}
447.tooltipped .tooltiptext {
448  visibility: visible;
449}
450
451.result-no-output {
452  font-style: italic;
453}
454
455code:not(pre code).hljs {
456  color: var(--code-text) !important;
457  background-color: var(--code-bg) !important;
458}
459
460@media only screen and (max-width: 1020px) {
461  .content {
462    padding: 16px 32px 0 32px;
463  }
464
465  .content main {
466    width: 100%;
467  }
468}
469
470@media only screen and (max-width: 400px) {
471  .content {
472    padding: 16px 16px 0 16px;
473  }
474}
475