/*! browserux.css 3.0.0 | 2026 MIT Licence | github.com/Effeilo/browserux.css */
/* ----------------------------------------------------------------------------
### Variables
---------------------------------------------------------------------------- */
:root {
/* Global colors */
--bux-page-bg: #eaeaea;
--bux-page-color: #121212;
--bux-color-primary: #f05e0e;
--bux-color-secondary: #0e93f0;
--bux-transparent: transparent;
/* Form validation colors */
--bux-valid-border-color: #29b94c;
--bux-valid-bg-color: #f0fff5;
--bux-invalid-border-color: #dc303e;
--bux-invalid-bg-color: #fff0f0;
--bux-placeholder-color: #aaa;
--bux-invalid-placeholder-color: #dc303e;
/* Progress bar colors */
--bux-progress-bar-bg: #efefef;
--bux-progress-value-bg: #29b94c;
/* Text selection */
--bux-selection-bg: var(--bux-page-color);
--bux-selection-color: var(--bux-page-bg);
--bux-selection-text-shadow: none;
/* Scrollbar */
--bux-scrollbar: var(--bux-page-bg);
--bux-scrollbar-track: #ddecf6;
--bux-scrollbar-thumb: var(--bux-color-secondary);
--bux-scrollbar-thumb-hover: var(--bux-color-primary);
--bux-scrollbar-vertical-width: 10px;
--bux-scrollbar-horizontal-height: 10px;
/* Typography */
--bux-typo-font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
--bux-typo-font-family-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--bux-typo-font-size: 1.6rem;
--bux-typo-line-height: 1.6;
/* Color scheme: tells the browser which themes are supported.
Native UI elements (date pickers, file inputs, selects, scrollbars)
will automatically adapt to the active color scheme. */
color-scheme: light dark;
/* Enables smooth transitions to and from intrinsic size keywords
(auto, min-content, max-content, fit-content) across the document.
Without this, animating height: auto or similar is not possible in CSS.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size */
interpolate-size: allow-keywords;
}
/* ----------------------------------------------------------------------------
### Browser User Preferences
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
## Theme Preferences
---------------------------------------------------------------------------- */
/**
* Global colors for Dark Mode
*/
@media (prefers-color-scheme: dark) {
:root {
/* Global colors */
--bux-page-bg: #121212;
--bux-page-color: #eaeaea;
--bux-color-primary: #f05e0e;
--bux-color-secondary: #0e93f0;
/* Form validation colors adjusted for dark backgrounds */
--bux-valid-bg-color: #0d2e18;
--bux-invalid-bg-color: #2e0d0d;
/* Scrollbar track adjusted for dark backgrounds */
--bux-scrollbar-track: #1a2535;
}
}
/* ----------------------------------------------------------------------------
## Animations Preferences
---------------------------------------------------------------------------- */
/**
* If the user has not requested the system to minimize the amount of animation or movement.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
* Defines a smooth scroll effect to the scrolling behavior for a scrolling box,
when scrolling happens due to navigation or CSSOM scrolling APIs.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
* Enables smooth transition between Light Mode and Dark Mode only for users
who have not requested reduced motion.
*/
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
body {
transition: background-color 0.3s, color 0.3s;
}
}
/**
* When the user has requested reduced motion (for accessibility reasons).
@see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
* 1. Force animations to have zero duration to avoid triggering motion sickness or distraction.
* 2. Force animations to stop after a single iteration to prevent infinite animations from continuing.
* 3. Disable smooth scrolling, falling back to instant jumps between anchors and scroll events.
* 4. Force transitions to have zero duration to eliminate motion during state changes.
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0s !important; /* 1 */
animation-iteration-count: 1 !important; /* 2 */
scroll-behavior: auto !important; /* 3 */
transition-duration: 0s !important; /* 4 */
}
}
/* ----------------------------------------------------------------------------
## Contrast Preferences
---------------------------------------------------------------------------- */
/**
* Enhances readability for users who prefer increased contrast.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
*/
@media (prefers-contrast: more) {
/**
* Improves visibility of placeholder text and disabled elements.
* These elements are often too faint in default browser styles.
*/
::placeholder {
color: rgba(16, 16, 16, 0.8);
opacity: 1;
}
[disabled] {
color: rgba(16, 16, 16, 0.8);
}
/**
* Removes text shadow on selected text.
* Prevents visual artifacts that reduce contrast when selecting text.
*/
::selection {
text-shadow: none;
}
/**
* Reinforces visibility of typographically de-emphasized elements.
* Italic or small text can be hard to read in high-contrast environments.
*/
em,
i,
small {
font-weight: bold;
}
}
/**
* In dark mode combined with high contrast, the near-black placeholder and
* disabled-element colors defined above would become invisible against the
* dark background. This block overrides them with near-white values to
* preserve legibility.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
*/
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
::placeholder {
color: rgba(239, 239, 239, 0.9);
opacity: 1;
}
[disabled] {
color: rgba(239, 239, 239, 0.9);
}
}
/* ----------------------------------------------------------------------------
## Transparency Preferences
---------------------------------------------------------------------------- */
/**
* Reduces transparency for users who prefer it, typically for readability
* or motion-sensitivity reasons.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency
*/
@media (prefers-reduced-transparency: reduce) {
/**
* Replaces the semi-transparent backdrop with a near-opaque overlay
* to ensure dialog content is clearly distinguishable from background.
*/
dialog::backdrop {
background: rgba(0, 0, 0, 0.9);
}
/**
* Removes the semi-transparent scrollbar background
* by aligning it with the page background.
*/
::-webkit-scrollbar {
background: var(--bux-page-bg);
}
}
/* ----------------------------------------------------------------------------
## Forced Colors
---------------------------------------------------------------------------- */
/**
* Windows High Contrast Mode and other forced-colors environments override
* most CSS colors with system colors. This block restores critical UX cues
* that the rest of the file may have inadvertently removed.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
*/
@media (forced-colors: active) {
/**
* Restore the focus ring using a system color so it remains visible
* regardless of the user's high-contrast color palette.
* `Highlight` is a CSS system color that maps to the selection/accent color.
*/
:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}
/**
* Restore a visible border on form elements that have had their border
* removed by our reset. In forced-colors mode, borders are the primary
* visual cue for interactive elements.
*/
button,
input,
select,
textarea {
border: 1px solid ButtonText;
}
/**
* Ensure disabled elements remain visually distinguishable.
*/
[disabled],
[aria-disabled="true"] {
opacity: 0.5;
}
}
/* ----------------------------------------------------------------------------
### Browser UI Theme
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
## Text Selection
---------------------------------------------------------------------------- */
/**
* Customizes text selection background and text color.
*/
::selection {
background: var(--bux-selection-bg);
color: var(--bux-selection-color);
text-shadow: var(--bux-selection-text-shadow);
}
/* ----------------------------------------------------------------------------
## Scrollbar
---------------------------------------------------------------------------- */
/**
* Applies standard scrollbar styling only in Firefox, allowing more advanced
* customization with WebKit pseudo-elements in other modern browsers (Chrome, Safari, Edge).
* Without this block, `::-webkit-scrollbar` rules will be ignored in
* Chrome > 120, Edge > 120, and Safari > 18.1, because `scrollbar-color`
* overrides them if present globally.
*/
@supports (-moz-appearance: none) {
html {
scrollbar-color: var(--bux-scrollbar-thumb) var(--bux-scrollbar-track);
scrollbar-width: auto;
}
}
/**
* WebKit scrollbar pseudo-elements used for advanced customization
* in all modern non-Firefox browsers. These styles are now fully active because
* scrollbar-color is scoped to Firefox only.
*/
/**
* Styles the native scrollbar.
*/
::-webkit-scrollbar {
background: var(--bux-scrollbar);
height: var(--bux-scrollbar-horizontal-height);
width: var(--bux-scrollbar-vertical-width);
}
/**
* Hides scrollbar buttons for a cleaner look.
*/
::-webkit-scrollbar-button {
display: none;
}
/**
* Styles the scrollbar track and thumb.
*/
::-webkit-scrollbar-track {
background-color: var(--bux-scrollbar-track);
}
::-webkit-scrollbar-thumb {
background-color: var(--bux-scrollbar-thumb);
border-radius: calc(var(--bux-scrollbar-vertical-width) / 2);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--bux-scrollbar-thumb-hover);
}
/**
* Prevents a background color from appearing in the scrollbar corner
* (the intersection between horizontal and vertical scrollbars).
*/
::-webkit-scrollbar-corner {
background: transparent;
}
/* ----------------------------------------------------------------------------
## Form components
---------------------------------------------------------------------------- */
/**
* Customizes placeholder text color.
*/
::placeholder {
color: var(--bux-placeholder-color);
}
/**
* Applies the primary color to the text insertion cursor in input fields,
* textareas, and contenteditable elements for consistent theming.
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
*/
input,
textarea,
[contenteditable] {
caret-color: var(--bux-color-primary);
}
/**
* Applies the primary color as accent for form elements.
*/
input[type="checkbox"],
input[type="radio"],
input[type="range"],
meter,
select {
accent-color: var(--bux-color-primary);
}
progress {
accent-color: var(--bux-progress-value-bg);
}
/**
* Styles the slider thumb for WebKit and Firefox.
*/
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
background: var(--bux-color-primary);
border: none;
}
/**
* Styles form fields depending on validation state.
*
* Uses :user-valid and :user-invalid instead of :valid/:invalid.
* These pseudo-classes only apply after the user has interacted with the field,
* preventing red/green states from appearing before the user has typed anything.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid
@see https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid
*/
input:user-valid,
textarea:user-valid,
select:user-valid {
background-color: var(--bux-valid-bg-color);
border-color: var(--bux-valid-border-color);
}
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
background-color: var(--bux-invalid-bg-color);
border-color: var(--bux-invalid-border-color);
}
input:user-invalid::placeholder,
textarea:user-invalid::placeholder {
color: var(--bux-invalid-placeholder-color);
}
/**
* Styles the native progress bar appearance for WebKit and Firefox.
*/
progress::-webkit-progress-bar {
background-color: var(--bux-progress-bar-bg);
border-radius: 8px;
}
progress::-webkit-progress-value {
background-color: var(--bux-progress-value-bg);
border-radius: 8px;
}
progress::-moz-progress-bar {
background-color: var(--bux-progress-value-bg);
}
/* ----------------------------------------------------------------------------
## Focus & Accessibility
---------------------------------------------------------------------------- */
/**
* Removes default focus outline on all elements.
*/
:focus {
outline: none;
}
/**
* Displays a visible focus outline only for keyboard and assistive technology users.
* Improves accessibility without affecting mouse/touch interactions.
*/
:focus-visible {
outline: 2px solid var(--bux-color-primary);
outline-offset: 2px;
}
/* ----------------------------------------------------------------------------
### Browser Default styles
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
## Spacings reset
---------------------------------------------------------------------------- */
/**
* Reset margins and paddings.
*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
/* ----------------------------------------------------------------------------
## Hidden attribute
---------------------------------------------------------------------------- */
/**
* Ensures the HTML `hidden` attribute always hides elements,
* even when a CSS display property (e.g. `display: flex`) is set
* on the same element or inherited from a parent rule.
@see https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
*/
[hidden] {
display: none !important;
}
/* ----------------------------------------------------------------------------
## Box model
---------------------------------------------------------------------------- */
/**
* Inherits the `box-sizing` property for all elements and pseudo-elements.
@for All modern browsers.
@see https://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
*,
::before,
::after {
box-sizing: inherit;
}
/**
* Sets `box-sizing: border-box` globally by assigning it to the root element.
* This ensures predictable sizing behavior across the entire document.
*/
html {
box-sizing: border-box;
}
/* ----------------------------------------------------------------------------
## The root element
---------------------------------------------------------------------------- */
/**
* 1. Improve consistency of default fonts in all browsers.
@see https://github.com/sindresorhus/modern-normalize/issues/3
* 2. Relative value unit refers to the size of the parent element.
Browsers' font size default is 16px. For a 1em/10px report,
we divide the size by the default size: 10/16 x 100 = 62.5%.
* 3. Ensure the root element covers the full viewport height for consistent layouts.
* 4. Fallback for browsers that do not support scrollbar-gutter: stable (see 9).
Forces the vertical scrollbar to always be visible to prevent layout
shifts between pages with and without enough content to scroll.
@see https://css-tricks.com/snippets/css/force-vertical-scrollbar/
* 5. Fonts on macOS will look more consistent with other systems that do not
render text using sub-pixel anti-aliasing.
@for macOS.
* 6. Remove the highlighting effect when "tapped" action on webkit browsers.
@for Androids.
* 7. Use a more readable tab size.
* 8. Prevent iOS text size adjust after orientation change, without disabling
user zoom.
@for iOS Safari 5.1+.
* 9. Modern replacement for overflow-y: scroll (see 4) to prevent layout shifts
caused by the scrollbar appearing or disappearing.
Reserves space for the scrollbar gutter even when no scrollbar is displayed,
without forcing a permanent visible scrollbar.
Both rules are kept for full cross-browser coverage:
scrollbar-gutter for modern browsers, overflow-y: scroll as fallback.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
* 10. Prevents scroll chaining: when a scrollable area reaches its boundary,
the page itself will not scroll.
`contain` preserves native elastic/bounce scrolling on the element itself,
while preventing it from propagating to the viewport.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
*/
html {
font-family: var(--bux-typo-font-family); /* 1 */
font-size: 62.5%; /* 2 */
min-height: 100%; /* 3 */
overflow-y: scroll; /* 4 */
-moz-osx-font-smoothing: grayscale; /* 5 */
-webkit-font-smoothing: antialiased; /* 5 */
-webkit-tap-highlight-color: transparent; /* 6 */
tab-size: 4; /* 7 */
-moz-tab-size: 4; /* 7 */
text-size-adjust: 100%; /* 8 */
-webkit-text-size-adjust: 100%; /* 8 */
scrollbar-gutter: stable; /* 9 */
overscroll-behavior: contain; /* 10 */
}
/* ----------------------------------------------------------------------------
## Sections
---------------------------------------------------------------------------- */
/**
* 1. Initializes page background color.
* 2. Initializes page color, font size and line height using CSS variables.
* 3. Ensures the body element always fills at least the full viewport height,
providing better structure for layouts and preventing collapsing pages.
* 4. Prevents long words or URLs from overflowing their container,
especially on narrow viewports.
*/
body {
background: var(--bux-page-bg); /* 1 */
color: var(--bux-page-color); /* 2 */
font-size: var(--bux-typo-font-size); /* 2 */
line-height: var(--bux-typo-line-height); /* 2 */
min-height: 100%; /* 3 */
overflow-wrap: break-word; /* 4 */
}
/* ----------------------------------------------------------------------------
## Headings
---------------------------------------------------------------------------- */
/**
* Balances heading text across lines to avoid typographic widows
* (single short words alone on the last line).
* Gracefully ignored by browsers that don't support text-wrap: balance.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
*/
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/* ----------------------------------------------------------------------------
## Grouping content
---------------------------------------------------------------------------- */
/**
* Prevents overflow from blockquote, pre, and code blocks.
*/
blockquote,
pre {
max-width: 100%;
}
/**
* Applies a consistent monospace font stack across browsers.
@see https://github.com/sindresorhus/modern-normalize/issues/3
*/
pre {
font-family: var(--bux-typo-font-family-mono);
}
/**
* Normalizes the element across browsers.
* 1. Removes the default border in favor of a controlled border-top.
* 2. Sets height to 0 for consistent rendering across browsers.
* 3. Inherits the current text color for easy theming.
* 4. Ensures content is not clipped in overflow scenarios.
*/
hr {
border: none; /* 1 */
border-top: 1px solid currentColor; /* 1 */
color: inherit; /* 3 */
height: 0; /* 2 */
overflow: visible; /* 4 */
}
/* ----------------------------------------------------------------------------
## Text-level semantics
---------------------------------------------------------------------------- */
/**
* 1. Removes text-decoration and outline on links.
* 2. Improves underline rendering by skipping descenders.
* 3. Moves the underline slightly below the text baseline for improved legibility.
@see https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
* 4. Removes 300ms delay on clickable elements on mobile.
@see https://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/
*/
a {
outline: 0; /* 1 */
text-decoration: none; /* 1 */
text-decoration-skip-ink: auto; /* 2 */
text-underline-offset: 0.2em; /* 3 */
touch-action: manipulation; /* 4 */
}
/**
* 1. Shows help cursor for elements providing additional info on hover.
* 2. Applies correct underline decoration for better readability.
*/
abbr[title],
dfn[title] {
cursor: help; /* 1 */
text-decoration: underline dotted; /* 2 */
}
/**
* Ensures correct font weight on bold text across browsers.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Prevents overflow from blockquote, pre, and code blocks.
* 2. Displays code content with preserved white space and line breaks.
*/
code {
max-width: 100%; /* 1 */
white-space: pre-wrap; /* 2 */
}
/**
* Applies a consistent monospace font stack across browsers.
@see https://github.com/sindresorhus/modern-normalize/issues/3
*/
code,
kbd,
samp {
font-family: var(--bux-typo-font-family-mono);
}
/**
* Ensures correct sizing for small text.
*/
small {
font-size: 80%;
}
/**
* Fixes sub and sup rendering to prevent line-height issues.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* ----------------------------------------------------------------------------
## Embedded content
---------------------------------------------------------------------------- */
/**
* Removes 300ms delay on area elements on mobile.
@see https://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/
*/
area {
touch-action: manipulation;
}
/**
* Remove the gap between audio, canvas, iframes,
images, videos and the bottom of their containers.
@see https:////github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/**
* Prevents selection highlight when dragging images.
* Not all browsers apply ::selection on images consistently.
@see https://stackoverflow.com/questions/6816080/how-to-disable-highlight-on-a-image
*/
img::selection {
background-color: var(--bux-transparent);
}
/**
* 1. Preserves aspect ratio for images.
* 2. Ensures media elements do not overflow their container.
*/
img,
svg,
video {
height: auto; /* 1 */
max-width: 100%; /* 2 */
}
/**
* Ensures SVG fills match the text color for easier theming.
*/
svg {
fill: currentColor;
}
/* ----------------------------------------------------------------------------
## Tabular data
---------------------------------------------------------------------------- */
/**
* 1. Correct table border color inheritance in Chrome and Safari.
@see https://bugs.chromium.org/p/chromium/issues/detail?id=935729
@see https://bugs.webkit.org/show_bug.cgi?id=195016
* 2. Remove text indentation from table contents in Chrome and Safari.
@see https://bugs.chromium.org/p/chromium/issues/detail?id=999088
@see https://bugs.webkit.org/show_bug.cgi?id=201297
*/
table {
border-color: inherit; /* 1 */
text-indent: 0; /* 2 */
}
/**
* Prevent tables and table cells from overflowing their container,
* maintaining layout integrity on small screens.
*/
table,
td {
max-width: 100%;
}
/* ----------------------------------------------------------------------------
## Forms
---------------------------------------------------------------------------- */
/**
* Resets the default border and padding of