/**
* uaplus.css version 0.3.0
*/
/**
* Wrapping everything in an anonymous layer ensures that selectors
* in UA+ have the lowest specificty or the highest when using
* !important.
*/
@layer {
/**
* Different box model
*
* We use the traditional box model, where the padding and border
* of the element is drawn inside and not outside the specified
* width and height. That makes combining relative and absolute
* units in properties like inline-size and
* block-size easier.
*
* See https://en.wikipedia.org/wiki/CSS_box_model
*/
*,
*::after,
*::before {
box-sizing: border-box;
}
/**
* Improve focus styles
*
* Add spacing between content and its focus outline.
*/
:focus-visible {
outline-offset: 3px;
}
/**
* Disable text size adjustment
*
* To improve readability on non-mobile optimized websites, browsers
* like mobile Safari increase the default font size when you switch
* a website from portrait to landscape. We don't want that for our
* optimized sites.
*
* See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
*/
html {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/**
* Increase line height
*
* Long paragraphs are easier to read if the line height is higher.
*/
html {
line-height: 1.5;
}
/**
* Add scrollbar gutter
*
* Prevent the page from “jumping” when switching from a long to a short page.
*
*/
html {
scrollbar-gutter: stable;
}
/**
* Remove UA styles for h1s nested in sectioning content
*
* Nesting h1s in section, articles, etc., shouldn't influence the
* styling of the heading since nesting doesn't influence
* semantics either.
*
* See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
* See https://github.com/whatwg/html/pull/11102
* See https://html.spec.whatwg.org/#sections-and-headings
*/
h1 {
font-size: 2em;
margin-block: 0.67em;
}
/**
* Improve abbreviations with titles
*
* The abbr element with the title isn't helpful regarding
* accessibility because support is inconsistent, and it's only
* accessible to some users. Still, it's commonly used.
* This rule shows a dotted underline on abbreviations in all
* browsers (there's a bug in Safari) and changes the cursor.
*
* See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
*/
abbr[title] {
cursor: help;
text-decoration-line: underline;
text-decoration-style: dotted;
}
/**
* Optimize mark element in Forced Colors Mode
*
* The colors of the mark element don't change in Forced Colors Mode,
* which can be problematic. Use system colors instead.
*
* See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
*/
@media (forced-colors: active) {
mark {
color: HighlightText;
background-color: Highlight;
}
}
/**
* Avoid overflow caused by embedded content
*
* Ensure that embedded content (audio, video, images, etc.)
* doesn't overflow its container.
*/
audio,
iframe,
img,
svg,
video {
max-block-size: 100%;
max-inline-size: 100%;
}
/**
* Prevent fieldsets from causing overflow
*
* Reset the default `min-inline-size: min-content` to prevent
* children from stretching fieldsets
*
* See https://github.com/twbs/bootstrap/issues/12359
* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
fieldset {
min-inline-size: 0;
}
/**
* Turn labels into block elements
*
* Labels for inputs, selects, and textarea should be block
* elements.
*/
label:has(+ input:not([type="radio"], [type="checkbox"]), select, textarea) {
display: block;
}
/**
* Increase the block-size of textareas
*
* The default height of textareas is small. We increase it a bit.
*/
textarea:not([rows]) {
min-block-size: 6em;
}
/**
* Inherit font styling in form elements
*
* buttons, inputs, selects, and textarea should have the same font
* family and size as the rest of the page.
*/
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
}
/**
* Normalize search input styles
*
* Remove the rounded corners of search inputs on macOS and IOS
* and normalize the background color
*/
[type="search"] {
-webkit-appearance: textfield;
}
/* iOS only */
@supports (-webkit-touch-callout: none) {
[type="search"] {
border: 1px solid -apple-system-secondary-label;
background-color: canvas;
}
}
/**
* Maintain direction in some input types
*
* Some input types should remain left-aligned in right-to-left
* languages,but only if the value isn't empty because the
* placeholder should be right-aligned.
*
* See https://rtlstyling.com/posts/rtl-styling#form-inputs
*/
input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
direction: ltr;
}
/**
* Improve table styling
*
* With the default styling, tables are hard to scan. These rules
* add padding and collapsed borders.
*/
table {
border-collapse: collapse;
border: 1px solid;
}
th,
td {
border: 1px solid;
padding: 0.25em 0.5em;
vertical-align: top;
}
/**
* Fading dialogs
*
* Add fade in and fade out transitions for the dialog element
* and backdrops
*/
dialog::backdrop {
background: oklch(0% 0 0 / 0.3);
}
dialog,
[popover],
dialog::backdrop {
opacity: 0;
transition: opacity 150ms ease-out, display 150ms allow-discrete,
overlay 150ms allow-discrete;
}
dialog[open],
:popover-open,
dialog[open]::backdrop {
opacity: 1;
}
@starting-style {
dialog[open],
:popover-open,
dialog[open]::backdrop {
opacity: 0;
}
}
/**
* Increase specificity of [hidden]
*
* Make it harder to accidentally unhide elements with the
* [hidden] attribute while still maintaining the until-found
* functionality.
*/
[hidden]:not([hidden="until-found"]) {
display: none !important;
}
/**
* Turn images into block elements
*/
img {
display: block;
}
/**
* Change cursor of
*
* By default, only the ::marker inside the summary uses the
* default cursor.
*/
summary {
cursor: default;
}
/**
* Remove the default border from iframes
*/
iframe {
border: none;
}
/**
* By default popovers look like modals without a backdrop.
* This makes use of the implicit anchor in popvers to position
* it closely to the trigger.
*/
@supports(position-area: block-end span-inline-end) {
[popover] {
margin: 0;
position-area: block-end span-inline-end;
}
}
}