From f48f1c1509471382fc82d4d81c6d3397ebfb1173 Mon Sep 17 00:00:00 2001 From: hfcRed Date: Sun, 21 Dec 2025 22:23:46 +0100 Subject: [PATCH] Update reset and common styles --- app/root.tsx | 2 +- app/styles/common.css | 99 +++++++++++++----- app/styles/normalize.css | 214 +++++++++++++++++++++++++++++++++++++++ app/styles/reset.css | 29 ------ 4 files changed, 290 insertions(+), 54 deletions(-) create mode 100644 app/styles/normalize.css delete mode 100644 app/styles/reset.css diff --git a/app/root.tsx b/app/root.tsx index a53e2d826..6c6567073 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -57,7 +57,7 @@ import "~/styles/common.css"; import "~/styles/elements.css"; import "~/styles/flags.css"; import "~/styles/layout.css"; -import "~/styles/reset.css"; +import "~/styles/normalize.css"; import "~/styles/utils.css"; import "~/styles/vars.css"; diff --git a/app/styles/common.css b/app/styles/common.css index 9b2a2d871..0a80f2b53 100644 --- a/app/styles/common.css +++ b/app/styles/common.css @@ -1,26 +1,86 @@ /** biome-ignore-all lint/style/noDescendingSpecificity: Biome v2 migration */ -*, -*::before, -*::after { - box-sizing: border-box; -} -body { - width: 100%; - background-color: var(--bg); - color: var(--text); - font-family: lexend, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: antialiased; - line-height: 1.5; - overflow-x: hidden; - -webkit-tap-highlight-color: transparent; +* { + margin: 0; + overflow-wrap: break-word; } *:focus:not(:focus-visible):not([data-focus-visible]) { outline: none !important; } +html { + color-scheme: light dark; + accent-color: var(--theme); + + /* TODO: update colors */ + @supports not selector(::-webkit-scrollbar) { + scrollbar-width: thin; + scrollbar-color: var(--color-primary-transparent) var(--color-base-section); + } + + &::-webkit-scrollbar, + &::-webkit-scrollbar-track { + background-color: var(--color-base-section); + height: 6px; + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-primary-transparent); + border-radius: 99999px; + } +} + +body { + width: 100%; + line-height: 1.5; + overflow-x: hidden; + color: var(--text); + background-color: var(--bg); + font-family: lexend, sans-serif; + + -moz-osx-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; + -webkit-tab-highlight-color: transparent; + -webkit-text-size-adjust: 100%; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + overflow-wrap: anywhere; +} + +img, +svg, +canvas, +video, +audio, +iframe, +embed, +object { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +details summary { + cursor: pointer; + user-select: none; + -webkit-user-select: none; +} + a { color: var(--theme); font-weight: var(--semi-bold); @@ -43,10 +103,6 @@ textarea:not(.plain, [name="text"]) { overflow-x: auto; } -progress { - accent-color: var(--theme); -} - textarea:not(.plain, [name="text"]):focus-within { border-color: transparent; outline: 2px solid var(--theme); @@ -131,11 +187,6 @@ label { margin-block-end: var(--label-margin); } -details summary { - cursor: pointer; - user-select: none; -} - .text-only-button { cursor: pointer; border: 0; diff --git a/app/styles/normalize.css b/app/styles/normalize.css new file mode 100644 index 000000000..e72e1e136 --- /dev/null +++ b/app/styles/normalize.css @@ -0,0 +1,214 @@ +/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +::before, +::after { + box-sizing: border-box; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the line height in all browsers. +3. Prevent adjustments of font size after orientation changes in iOS. +4. Use a more readable tab size (opinionated). +*/ + +html { + font-family: + system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji"; /* 1 */ + line-height: 1.15; /* 2 */ + -webkit-text-size-adjust: 100%; /* 3 */ + tab-size: 4; /* 4 */ +} + +/* +Sections +======== +*/ + +/** +Remove the margin in all browsers. +*/ + +body { + margin: 0; +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct font weight in Chrome and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: + ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + border-color: currentcolor; +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + appearance: button; + -webkit-appearance: button; +} + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type="search"] { + appearance: textfield; /* 1 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} diff --git a/app/styles/reset.css b/app/styles/reset.css deleted file mode 100644 index fffff0076..000000000 --- a/app/styles/reset.css +++ /dev/null @@ -1,29 +0,0 @@ -/* - Modified from https://www.joshwcomeau.com/css/custom-css-reset/ -*/ -*, -*::before, -*::after { - box-sizing: border-box; -} - -* { - margin: 0; - overflow-wrap: break-word; -} - -img, -picture, -video, -canvas, -svg { - display: block; - max-width: 100%; -} - -input, -button, -textarea, -select { - font: inherit; -}