167 lines
4.2 KiB
CSS
167 lines
4.2 KiB
CSS
/* RESET */
|
|
|
|
:root {
|
|
--font-tnum: "tnum" on;
|
|
}
|
|
|
|
* {
|
|
/* Remove default margin on everything */
|
|
margin: 0;
|
|
/* Remove default padding on everything */
|
|
padding: 0;
|
|
/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
|
|
line-height: calc(0.25rem + 1em + 0.25rem);
|
|
}
|
|
|
|
/* Use a more-intuitive box-sizing model on everything */
|
|
*,
|
|
::before,
|
|
::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
|
|
*:where(:not(fieldset, progress, meter)) {
|
|
border-width: 0;
|
|
border-style: solid;
|
|
background-origin: border-box;
|
|
background-repeat: no-repeat;
|
|
}
|
|
@supports (font-variant-numeric: tabular-nums) {
|
|
html {
|
|
--font-tnum: "____";
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
html {
|
|
/* Allow percentage-based heights in the application */
|
|
block-size: 100%;
|
|
/* Making sure text size is only controlled by font-size */
|
|
-webkit-text-size-adjust: none;
|
|
/* Improve text rendering */
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
font-feature-settings: var(--font-tnum);
|
|
}
|
|
|
|
/* Smooth scrolling for users that don't prefer reduced motion */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
html:focus-within {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
font-weight: normal;
|
|
/* Allow percentage-based heights in the application */
|
|
min-block-size: 100%;
|
|
/* https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ */
|
|
-webkit-marquee-increment: 0vw;
|
|
}
|
|
|
|
/* Improve media defaults */
|
|
:where(img, svg, video, canvas, audio, iframe, embed, object) {
|
|
display: block;
|
|
}
|
|
:where(img, svg, video) {
|
|
block-size: auto;
|
|
max-inline-size: 100%;
|
|
}
|
|
|
|
:where(details) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Remove stroke and set fill colour to the inherited font colour */
|
|
:where(svg) {
|
|
stroke: none;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Set a size for SVG's without a width attribute */
|
|
:where(svg):where(:not([width])) {
|
|
inline-size: 5rem;
|
|
}
|
|
|
|
/* Remove built-in form typography styles */
|
|
:where(input, button, textarea, select),
|
|
:where(input[type="file"])::-webkit-file-upload-button {
|
|
color: inherit;
|
|
font: inherit;
|
|
font-size: inherit;
|
|
letter-spacing: inherit;
|
|
}
|
|
|
|
/* Change textarea resize to vertical only and block only if the browser supports that */
|
|
:where(textarea) {
|
|
resize: vertical;
|
|
}
|
|
@supports (resize: block) {
|
|
:where(textarea) {
|
|
resize: block;
|
|
}
|
|
}
|
|
|
|
/* Avoid text overflows */
|
|
:where(h1, h2, h3) {
|
|
line-height: 1.1;
|
|
}
|
|
:where(p, h1, h2, h3, h4, h5, h6) {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
|
:where(ul, ol)[role="list"] {
|
|
list-style: none;
|
|
}
|
|
|
|
/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
|
|
a:not([class]) {
|
|
text-decoration-skip-ink: auto;
|
|
}
|
|
|
|
/* Make it clear that interactive elements are interactive */
|
|
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
:where(input[type="file"]) {
|
|
cursor: auto;
|
|
}
|
|
:where(input[type="file"])::-webkit-file-upload-button,
|
|
:where(input[type="file"])::file-selector-button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Animate focus outline */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
:focus-visible {
|
|
transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
|
|
}
|
|
:where(:not(:active)):focus-visible {
|
|
transition-duration: 0.25s;
|
|
}
|
|
}
|
|
:where(:not(:active)):focus-visible {
|
|
outline-offset: 5px;
|
|
}
|
|
|
|
/* Make sure users can't select button text */
|
|
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
|
|
:where(input[type="file"])::-webkit-file-upload-button,
|
|
:where(input[type="file"])::file-selector-button {
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-touch-callout: none;
|
|
user-select: none;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Disabled cursor for disabled buttons */
|
|
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* END RESET */
|