j0.lol
Website version 6
v6.j0.lol
1/**
2 * uaplus.css version 0.3.1
3 */
4
5/**
6 * Wrapping everything in an anonymous layer ensures that selectors
7 * in UA+ have the lowest specificty or the highest when using
8 * !important.
9 */
10@layer {
11 /**
12 * Different box model
13 *
14 * We use the traditional box model, where the padding and border
15 * of the element is drawn inside and not outside the specified
16 * width and height. That makes combining relative and absolute
17 * units in properties like <code>inline-size</code> and
18 * <code>block-size</code> easier.
19 *
20 * See https://en.wikipedia.org/wiki/CSS_box_model
21 */
22 *,
23 *::after,
24 *::before {
25 box-sizing: border-box;
26 }
27
28 /**
29 * Improve focus styles
30 *
31 * Add spacing between content and its focus outline.
32 */
33 :focus-visible {
34 outline-offset: 3px;
35 }
36
37 /**
38 * Disable text size adjustment
39 *
40 * To improve readability on non-mobile optimized websites, browsers
41 * like mobile Safari increase the default font size when you switch
42 * a website from portrait to landscape. We don't want that for our
43 * optimized sites.
44 *
45 * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
46 */
47 html {
48 -webkit-text-size-adjust: none;
49 text-size-adjust: none;
50 }
51
52 /**
53 * Increase line height
54 *
55 * Long paragraphs are easier to read if the line height is higher.
56 */
57 html {
58 line-height: 1.5;
59 }
60
61 /**
62 * Add scrollbar gutter
63 *
64 * Prevent the page from “jumping” when switching from a long to a short page.
65 *
66 */
67 html {
68 scrollbar-gutter: stable;
69 }
70
71 /**
72 * Remove UA styles for h1s nested in sectioning content
73 *
74 * Nesting h1s in section, articles, etc., shouldn't influence the
75 * styling of the heading since nesting doesn't influence
76 * semantics either.
77 *
78 * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
79 * See https://github.com/whatwg/html/pull/11102
80 * See https://html.spec.whatwg.org/#sections-and-headings
81 */
82 h1 {
83 font-size: 2em;
84 margin-block: 0.67em;
85 }
86
87 /**
88 * Improve abbreviations with titles
89 *
90 * The abbr element with the title isn't helpful regarding
91 * accessibility because support is inconsistent, and it's only
92 * accessible to some users. Still, it's commonly used.
93 * This rule shows a dotted underline on abbreviations in all
94 * browsers (there's a bug in Safari) and changes the cursor.
95 *
96 * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
97 */
98 abbr[title] {
99 cursor: help;
100 text-decoration-line: underline;
101 text-decoration-style: dotted;
102 }
103
104 /**
105 * Optimize mark element in Forced Colors Mode
106 *
107 * The colors of the mark element don't change in Forced Colors Mode,
108 * which can be problematic. Use system colors instead.
109 *
110 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
111 */
112 @media (forced-colors: active) {
113 mark {
114 color: HighlightText;
115 background-color: Highlight;
116 }
117 }
118
119 /**
120 * Avoid overflow caused by embedded content
121 *
122 * Ensure that embedded content (audio, video, images, etc.)
123 * doesn't overflow its container.
124 */
125 audio,
126 iframe,
127 img,
128 svg,
129 video {
130 max-block-size: 100%;
131 max-inline-size: 100%;
132 }
133
134 /**
135 * Prevent fieldsets from causing overflow
136 *
137 * Reset the default `min-inline-size: min-content` to prevent
138 * children from stretching fieldsets
139 *
140 * See https://github.com/twbs/bootstrap/issues/12359
141 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
142 */
143 fieldset {
144 min-inline-size: 0;
145 }
146
147 /**
148 * Turn labels into block elements
149 *
150 * Labels for inputs, selects, and textarea should be block
151 * elements.
152 */
153 label:has(+ :where(input:not([type="radio"], [type="checkbox"]), select, textarea)) {
154 display: block;
155 }
156
157 /**
158 * Increase the block-size of textareas
159 *
160 * The default height of textareas is small. We increase it a bit.
161 */
162 textarea:not([rows]) {
163 min-block-size: 6em;
164 }
165
166 /**
167 * Inherit font styling in form elements
168 *
169 * buttons, inputs, selects, and textarea should have the same font
170 * family and size as the rest of the page.
171 */
172 button,
173 input,
174 select,
175 textarea {
176 font-family: inherit;
177 font-size: inherit;
178 }
179
180 /**
181 * Normalize search input styles
182 *
183 * Remove the rounded corners of search inputs on macOS and IOS
184 * and normalize the background color
185 */
186 [type="search"] {
187 -webkit-appearance: textfield;
188 }
189
190 /* iOS only */
191 @supports (-webkit-touch-callout: none) {
192 [type="search"] {
193 border: 1px solid -apple-system-secondary-label;
194 background-color: canvas;
195 }
196 }
197
198 /**
199 * Maintain direction in some input types
200 *
201 * Some input types should remain left-aligned in right-to-left
202 * languages,but only if the value isn't empty because the
203 * placeholder should be right-aligned.
204 *
205 * See https://rtlstyling.com/posts/rtl-styling#form-inputs
206 */
207 input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
208 direction: ltr;
209 }
210
211 /**
212 * Improve table styling
213 *
214 * With the default styling, tables are hard to scan. These rules
215 * add padding and collapsed borders.
216 */
217 table {
218 border-collapse: collapse;
219 border: 1px solid;
220 }
221
222 th,
223 td {
224 border: 1px solid;
225 padding: 0.25em 0.5em;
226 vertical-align: top;
227 }
228
229 /**
230 * Fading dialogs
231 *
232 * Add fade in and fade out transitions for the dialog element
233 * and backdrops
234 */
235 dialog::backdrop {
236 background: oklch(0% 0 0 / 0.3);
237 }
238
239 dialog,
240 [popover],
241 dialog::backdrop {
242 opacity: 0;
243 transition:
244 opacity 150ms ease-out,
245 display 150ms allow-discrete,
246 overlay 150ms allow-discrete;
247 }
248
249 dialog[open],
250 :popover-open,
251 dialog[open]::backdrop {
252 opacity: 1;
253 }
254
255 @starting-style {
256 dialog[open],
257 :popover-open,
258 dialog[open]::backdrop {
259 opacity: 0;
260 }
261 }
262
263 /**
264 * Increase specificity of [hidden]
265 *
266 * Make it harder to accidentally unhide elements with the
267 * [hidden] attribute while still maintaining the until-found
268 * functionality.
269 */
270 [hidden]:not([hidden="until-found"]) {
271 display: none !important;
272 }
273
274 /**
275 * Turn images into block elements
276 */
277 img {
278 display: block;
279 }
280
281 /**
282 * Change cursor of <summary>
283 *
284 * By default, only the ::marker inside the summary uses the
285 * default cursor.
286 */
287 summary {
288 cursor: default;
289 }
290
291 /**
292 * Remove the default border from iframes
293 */
294 iframe {
295 border: none;
296 }
297
298 /**
299 * By default popovers look like modals without a backdrop.
300 * This makes use of the implicit anchor in popvers to position
301 * it closely to the trigger.
302 */
303 @supports (position-area: end) {
304 [popover] {
305 margin: 0;
306 position-area: end span-end;
307 position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
308 }
309 }
310}