jcs.org
Serenity Operating System
1/* Default user-agent stylesheet for LibWeb
2 * Note: This stylesheet starts with a bunch of ad-hoc custom rules.
3 * After that, rules from the HTML spec follow.
4 */
5
6html {
7 font-family: sans-serif;
8 color: -libweb-palette-base-text;
9}
10
11body {
12 margin: 8px;
13}
14
15center {
16 text-align: -libweb-center;
17}
18
19blink {
20 display: inline;
21}
22
23/* FIXME: This doesn't seem right. */
24label {
25 display: inline-block;
26}
27
28/* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
29input, textarea {
30 border: 1px solid -libweb-palette-threed-shadow1;
31 min-width: 80px;
32 min-height: 16px;
33 width: 120px;
34 cursor: text;
35 overflow: hidden;
36}
37
38textarea {
39 padding: 2px;
40 display: inline-block;
41 overflow: scroll;
42}
43
44input[type=submit], input[type=button], input[type=reset], input[type=checkbox], input[type=radio] {
45 border: none;
46 min-width: unset;
47 min-height: unset;
48 width: unset;
49 cursor: unset;
50}
51
52input::placeholder {
53 color: rgb(117, 117, 117);
54}
55
56button, input[type=submit], input[type=button], input[type=reset] {
57 padding: 1px 4px;
58 background-color: -libweb-palette-button;
59 border: 1px solid -libweb-palette-threed-shadow1;
60 color: -libweb-palette-button-text;
61}
62
63button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
64 background-color: -libweb-palette-hover-highlight;
65}
66
67input[type=checkbox] {
68 display: inline-block;
69 width: 12px;
70 height: 12px;
71 margin: 2px;
72 border: 1px solid -libweb-palette-threed-shadow1;
73}
74
75input[type=checkbox]:checked {
76 /*
77 This roughly resembles ClassicStylePainter's paint_check_box() while uncoupling the styling from LibGfx, similar to
78 <button> above. This is a simple checkmark that still looks ok at 2x scale.
79 Eventually we should respect the `accent-color` property here, which may require going back to an implementation via
80 CheckBoxPaintable::paint().
81 */
82 image-rendering: pixelated;
83 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAEhJREFUKFNjYBgs4D/MIYxEuAiuGKiWkZAGFMUgw5mQbECWBAljKAYJwmxAl0Tnw81FdhK6DcgGYtWA0xlw1TgY2GzCoZQWwgCU1woFwvnCFQAAAABJRU5ErkJggg==);
84}
85
86option {
87 display: none;
88}
89
90/* 15.3.1 Hidden elements
91 * https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
92 */
93
94area, base, basefont, datalist, head, link, meta, noembed,
95noframes, param, rp, script, style, template, title {
96 display: none;
97}
98
99[hidden]:not([hidden=until-found i]) {
100 display: none;
101}
102
103[hidden=until-found i]:not(embed) {
104 content-visibility: hidden;
105}
106
107embed[hidden] {
108 display: inline;
109 height: 0;
110 width: 0;
111}
112
113input[type=hidden i] {
114 display: none !important;
115}
116
117@media (scripting) {
118 noscript {
119 display: none !important;
120 }
121}
122
123/* 15.3.2 The page
124 * https://html.spec.whatwg.org/multipage/rendering.html#the-page
125 */
126
127html, body {
128 display: block;
129}
130
131/* 15.3.3 Flow content
132 * https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
133 */
134address, blockquote, center, dialog, div, figure, figcaption, footer, form,
135header, hr, legend, listing, main, p, plaintext, pre, xmp {
136 display: block;
137}
138
139blockquote, figure, listing, p, plaintext, pre, xmp {
140 margin-top: 1em;
141 margin-bottom: 1em;
142}
143
144blockquote, figure {
145 margin-left: 40px;
146 margin-right: 40px;
147}
148
149address {
150 font-style: italic;
151}
152
153listing, plaintext, pre, xmp {
154 font-family: monospace;
155 white-space: pre;
156}
157
158dialog:not([open]) {
159 display: none;
160}
161
162dialog {
163 position: absolute;
164 inset-left: 0;
165 inset-right: 0;
166 width: fit-content;
167 height: fit-content;
168 margin: auto;
169 border: solid;
170 padding: 1em;
171 background-color: Canvas;
172 color: CanvasText;
173}
174
175dialog::backdrop {
176 background: rgba(0, 0, 0, 0.1);
177}
178
179slot {
180 display: contents;
181}
182
183/* 15.3.4 Phrasing content
184 * https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
185 */
186
187cite, dfn, em, i, var {
188 font-style: italic;
189}
190
191b, strong {
192 font-weight: bolder;
193}
194
195code, kbd, samp, tt {
196 font-family: monospace;
197}
198
199big {
200 font-size: larger;
201}
202
203small {
204 font-size: smaller;
205}
206
207sub {
208 vertical-align: sub;
209}
210
211sup {
212 vertical-align: super;
213}
214
215sub, sup {
216 line-height: normal;
217 font-size: smaller;
218}
219
220ruby {
221 display: ruby;
222}
223
224rt {
225 display: ruby-text;
226}
227
228:link {
229 color: -libweb-link;
230}
231
232:visited {
233 color: -libweb-palette-visited-link;
234}
235
236:link:active, :visited:active {
237 color: -libweb-palette-active-link;
238}
239
240:link, :visited {
241 text-decoration: underline;
242 cursor: pointer;
243}
244
245:focus-visible {
246 outline: auto;
247}
248
249mark {
250 background: yellow;
251 color: black;
252}
253
254/* this color is just a suggestion and can be changed based on implementation feedback */
255
256abbr[title], acronym[title] {
257 text-decoration: dotted underline;
258}
259
260ins, u {
261 text-decoration: underline;
262}
263
264del, s, strike {
265 text-decoration: line-through;
266}
267
268q::before {
269 content: open-quote;
270}
271
272q::after {
273 content: close-quote;
274}
275
276br {
277 display-outside: newline;
278}
279
280/* this also has bidi implications */
281nobr {
282 white-space: nowrap;
283}
284
285wbr {
286 display-outside: break-opportunity;
287}
288
289/* this also has bidi implications */
290nobr wbr {
291 white-space: normal;
292}
293
294/* 15.3.5 Bidirectional text
295 * https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering
296 */
297
298[dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) {
299 direction: ltr;
300}
301
302[dir]:dir(rtl), bdi:dir(rtl) {
303 direction: rtl;
304}
305
306address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
307legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
308h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead,
309tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
310[dir=ltr i], [dir=rtl i], [dir=auto i] {
311 unicode-bidi: isolate;
312}
313
314bdo, bdo[dir] {
315 unicode-bidi: isolate-override;
316}
317
318input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],
319[type=email i]), textarea[dir=auto i], pre[dir=auto i] {
320 unicode-bidi: plaintext;
321}
322
323/* 15.3.6 Sections and headings
324 * https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings
325 */
326
327article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
328 display: block;
329}
330
331h1 {
332 margin-top: 0.67em;
333 margin-bottom: 0.67em;
334 font-size: 2.00em;
335 font-weight: bold;
336}
337
338h2 {
339 margin-top: 0.83em;
340 margin-bottom: 0.83em;
341 font-size: 1.50em;
342 font-weight: bold;
343}
344
345h3 {
346 margin-top: 1.00em;
347 margin-bottom: 1.00em;
348 font-size: 1.17em;
349 font-weight: bold;
350}
351
352h4 {
353 margin-top: 1.33em;
354 margin-bottom: 1.33em;
355 font-size: 1.00em;
356 font-weight: bold;
357}
358
359h5 {
360 margin-top: 1.67em;
361 margin-bottom: 1.67em;
362 font-size: 0.83em;
363 font-weight: bold;
364}
365
366h6 {
367 margin-top: 2.33em;
368 margin-bottom: 2.33em;
369 font-size: 0.67em;
370 font-weight: bold;
371}
372
373:is(article, aside, nav, section) h1 {
374 margin-top: 0.83em;
375 margin-bottom: 0.83em;
376 font-size: 1.50em;
377}
378
379:is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
380 margin-top: 1.00em;
381 margin-bottom: 1.00em;
382 font-size: 1.17em;
383}
384
385:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
386 margin-top: 1.33em;
387 margin-bottom: 1.33em;
388 font-size: 1.00em;
389}
390
391:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
392 margin-top: 1.67em;
393 margin-bottom: 1.67em;
394 font-size: 0.83em;
395}
396
397:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
398 margin-top: 2.33em;
399 margin-bottom: 2.33em;
400 font-size: 0.67em;
401}
402
403/* 15.3.7 Lists
404 * https://html.spec.whatwg.org/multipage/rendering.html#lists
405 */
406dir, dd, dl, dt, menu, ol, ul {
407 display: block;
408}
409
410li {
411 display: list-item;
412 text-align: match-parent;
413}
414
415dir, dl, menu, ol, ul {
416 margin-top: 1em;
417 margin-bottom: 1em;
418}
419
420:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
421 margin-top: 0;
422 margin-bottom: 0;
423}
424
425dd {
426 margin-left: 40px;
427}
428
429dir, menu, ol, ul {
430 padding-left: 40px;
431}
432
433ol, ul, menu {
434 counter-reset: list-item;
435}
436
437ol {
438 list-style-type: decimal;
439}
440
441dir, menu, ul {
442 list-style-type: disc;
443}
444
445:is(dir, menu, ol, ul) :is(dir, menu, ul) {
446 list-style-type: circle;
447}
448
449:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
450 list-style-type: square;
451}
452
453/* 15.3.8 Tables
454 * https://html.spec.whatwg.org/multipage/rendering.html#tables-2
455 */
456
457table {
458 display: table;
459}
460
461caption {
462 display: table-caption;
463}
464
465colgroup, colgroup[hidden] {
466 display: table-column-group;
467}
468
469col, col[hidden] {
470 display: table-column;
471}
472
473thead, thead[hidden] {
474 display: table-header-group;
475}
476
477tbody, tbody[hidden] {
478 display: table-row-group;
479}
480
481tfoot, tfoot[hidden] {
482 display: table-footer-group;
483}
484
485tr, tr[hidden] {
486 display: table-row;
487}
488
489td, th {
490 display: table-cell;
491}
492
493colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
494tfoot[hidden], tr[hidden] {
495 visibility: collapse;
496}
497
498table {
499 box-sizing: border-box;
500 border-spacing: 2px;
501 border-collapse: separate;
502 text-indent: initial;
503}
504
505td, th {
506 padding: 1px;
507}
508
509th {
510 font-weight: bold;
511}
512
513caption {
514 text-align: center;
515}
516
517thead, tbody, tfoot, table > tr {
518 vertical-align: middle;
519}
520
521tr, td, th {
522 vertical-align: inherit;
523}
524
525thead, tbody, tfoot, tr {
526 border-color: inherit;
527}
528
529table[rules=none i], table[rules=groups i], table[rules=rows i],
530table[rules=cols i], table[rules=all i], table[frame=void i],
531table[frame=above i], table[frame=below i], table[frame=hsides i],
532table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
533table[frame=box i], table[frame=border i],
534table[rules=none i] > tr > td, table[rules=none i] > tr > th,
535table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
536table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
537table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
538table[rules=all i] > tr > td, table[rules=all i] > tr > th,
539table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
540table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
541table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
542table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
543table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
544table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
545table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
546table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
547table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
548table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
549table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
550table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
551table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
552table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
553table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
554 border-color: black;
555}
556
557/* 15.3.10 Form controls
558 * https://html.spec.whatwg.org/multipage/rendering.html#form-controls
559 */
560
561input, select, button, textarea {
562 letter-spacing: initial;
563 word-spacing: initial;
564 line-height: initial;
565 text-transform: initial;
566 text-indent: initial;
567 text-shadow: initial;
568 appearance: auto;
569}
570
571input, select, textarea {
572 text-align: initial;
573}
574
575input:is([type=reset i], [type=button i], [type=submit i]), button {
576 text-align: center;
577}
578
579input, button {
580 display: inline-block;
581}
582
583input[type=hidden i], input[type=file i], input[type=image i] {
584 appearance: none;
585}
586
587input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
588[type=submit i], [type=color i], [type=search i]), select, button {
589 box-sizing: border-box;
590}
591
592textarea {
593 white-space: pre-wrap;
594}
595
596/* 15.3.11 The hr element
597 * https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2
598 */
599
600hr {
601 color: gray;
602 border-style: inset;
603 border-width: 1px;
604 margin: 0.5em auto;
605 overflow: hidden;
606}
607
608/* 15.3.12 The fieldset and legend elements
609 * https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements
610 */
611
612fieldset {
613 display: block;
614 margin-left: 2px;
615 margin-right: 2px;
616 border: groove 2px ThreeDFace;
617 padding: 0.35em 0.75em 0.625em;
618 min-inline-size: min-content;
619}
620
621legend {
622 padding-left: 2px;
623 padding-right: 2px;
624}
625
626legend[align=left i] {
627 justify-self: left;
628}
629
630legend[align=center i] {
631 justify-self: center;
632}
633
634legend[align=right i] {
635 justify-self: right;
636}
637
638/* 15.3.8 Embedded content
639 * https://html.spec.whatwg.org/multipage/rendering.html#tables-2
640 */
641
642table {
643 display: table;
644}
645
646caption {
647 display: table-caption;
648}
649
650colgroup, colgroup[hidden] {
651 display: table-column-group;
652}
653
654col, col[hidden] {
655 display: table-column;
656}
657
658thead, thead[hidden] {
659 display: table-header-group;
660}
661
662tbody, tbody[hidden] {
663 display: table-row-group;
664}
665
666tfoot, tfoot[hidden] {
667 display: table-footer-group;
668}
669
670tr, tr[hidden] {
671 display: table-row;
672}
673
674td, th {
675 display: table-cell;
676}
677
678colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
679tfoot[hidden], tr[hidden] {
680 visibility: collapse;
681}
682
683table {
684 box-sizing: border-box;
685 border-spacing: 2px;
686 border-collapse: separate;
687 text-indent: initial;
688}
689
690td, th {
691 padding: 1px;
692}
693
694th {
695 font-weight: bold;
696}
697
698caption {
699 text-align: center;
700}
701
702thead, tbody, tfoot, table > tr {
703 vertical-align: middle;
704}
705
706tr, td, th {
707 vertical-align: inherit;
708}
709
710thead, tbody, tfoot, tr {
711 border-color: inherit;
712}
713
714table[rules=none i], table[rules=groups i], table[rules=rows i],
715table[rules=cols i], table[rules=all i], table[frame=void i],
716table[frame=above i], table[frame=below i], table[frame=hsides i],
717table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
718table[frame=box i], table[frame=border i],
719table[rules=none i] > tr > td, table[rules=none i] > tr > th,
720table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
721table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
722table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
723table[rules=all i] > tr > td, table[rules=all i] > tr > th,
724table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
725table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
726table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
727table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
728table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
729table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
730table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
731table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
732table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
733table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
734table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
735table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
736table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
737table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
738table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
739 border-color: black;
740}
741
742/* 15.4.1 Embedded content
743 * https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
744 */
745
746iframe {
747 border: 2px inset;
748}
749
750video {
751 object-fit: contain;
752}
753
754/* 15.4.3 Attributes for embedded content and images
755 * https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
756 */
757
758iframe[frameborder='0'], iframe[frameborder=no i] { border: none; }
759
760embed[align=left i], iframe[align=left i], img[align=left i],
761input[type=image i][align=left i], object[align=left i] {
762 float: left;
763}
764
765embed[align=right i], iframe[align=right i], img[align=right i],
766input[type=image i][align=right i], object[align=right i] {
767 float: right;
768}
769
770embed[align=top i], iframe[align=top i], img[align=top i],
771input[type=image i][align=top i], object[align=top i] {
772 vertical-align: top;
773}
774
775embed[align=baseline i], iframe[align=baseline i], img[align=baseline i],
776input[type=image i][align=baseline i], object[align=baseline i] {
777 vertical-align: baseline;
778}
779
780embed[align=texttop i], iframe[align=texttop i], img[align=texttop i],
781input[type=image i][align=texttop i], object[align=texttop i] {
782 vertical-align: text-top;
783}
784
785embed[align=absmiddle i], iframe[align=absmiddle i], img[align=absmiddle i],
786input[type=image i][align=absmiddle i], object[align=absmiddle i],
787embed[align=abscenter i], iframe[align=abscenter i], img[align=abscenter i],
788input[type=image i][align=abscenter i], object[align=abscenter i] {
789 vertical-align: middle;
790}
791
792embed[align=bottom i], iframe[align=bottom i], img[align=bottom i],
793input[type=image i][align=bottom i], object[align=bottom i] {
794 vertical-align: bottom;
795}
796
797/* 15.5.4 The details and summary elements
798 * https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
799 */
800
801summary {
802 display: list-item;
803 counter-increment: list-item 0;
804 list-style: disclosure-closed inside;
805}
806
807details[open] > summary {
808 list-style-type: disclosure-open;
809}
810
811/* 15.5.12 The marquee element
812 * https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2
813 */
814
815marquee {
816 display: inline-block;
817 text-align: initial;
818}
819
820/* 15.5.13 The meter element
821 * https://html.spec.whatwg.org/multipage/rendering.html#the-meter-element-2
822 */
823
824meter {
825 appearance: auto;
826}
827
828/* 15.5.14 The progress element
829 * https://html.spec.whatwg.org/multipage/rendering.html#the-progress-element-2
830 */
831
832progress {
833 appearance: auto;
834}
835
836/* https://www.w3.org/TR/mediaqueries-5/#descdef-media-inverted-colors
837 */
838@media (inverted-colors) {
839 img:not(picture>img),
840 picture,
841 video {
842 filter: invert(100%);
843 }
844}
845
846/* This is the same as default intrinsic size of a <progress> element */
847progress {
848 width: 300px;
849 height: 12px;
850}
851
852/* The default progress-value/bar CSS below is the same as Blink/WebKit.
853 * Note: Setting any more than the backgrond-color may have unintended consequences, as sites don't expect to unset more than that.
854 */
855
856progress::-webkit-progress-bar {
857 width: inherit;
858 height: inherit;
859 background-color: grey;
860}
861
862progress::-webkit-progress-value {
863 height: inherit;
864 background-color: green;
865}