aex/style/reset.scss

940 lines
13 KiB
SCSS
Raw Normal View History

2025-09-11 07:27:57 +00:00
@namespace svg "http://www.w3.org/2000/svg";
/**
* Total Reset
* ==================================================
* Universal reset of styles for all elements and pseudo-elements for customizing Web Components and browser extensions.
*/
/* Selector targets all elements except tables and svg elements */
*:where(:not(table, thead, tbody, tr, th, td, svg|*)) {
/* Resets all styles for the selected elements */
all: unset;
/* Set box-sizing to border-box so padding and borders do not affect the total width and height of elements */
box-sizing: border-box;
/* Resets styles for ::before and ::after pseudo-elements */
}
*:where(:not(table, thead, tbody, tr, th, td, svg|*))::before, *:where(:not(table, thead, tbody, tr, th, td, svg|*))::after {
/* Unsets all styles for pseudo-elements */
all: unset;
/* Set box-sizing to border-box for pseudo-elements */
box-sizing: border-box;
}
a,
abbr,
acronym,
address,
article,
aside,
audio,
b,
big,
blockquote,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
font-size: 100%;
}
article,
aside,
blockquote,
details,
div,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
main,
menu,
nav,
p,
pre,
section {
display: block;
}
audio,
canvas,
video,
img,
picture,
svg {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
canvas,
iframe {
display: block;
}
[hidden] {
display: none;
}
head,
link,
meta,
script,
title,
template,
style {
display: none;
}
a[href],
label[for],
select,
button {
cursor: pointer;
}
/**
* Table
*/
table {
border-collapse: collapse;
border-spacing: 0;
text-indent: 0;
}
table,
thead,
tbody,
tr,
th,
td {
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/**
* Forms
*/
input {
appearance: none;
display: inline-block;
}
input[type=color] {
width: 15px;
height: 15px;
}
input[type=color]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type=color]::-webkit-color-swatch {
border: none;
}
input:required,
input {
box-shadow: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
-moz-appearance: none;
}
input[type=search] {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
input:focus {
outline: none;
}
/**
* Only apply smooth scrolling when the user hasn't set their motion preference to "reduce"
*/
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/*# sourceMappingURL=total-reset.css.map */
/**
* Modern CSS Reset Tweaks
* ==================================================
* A collection of modern CSS reset and normalization styles
* to ensure consistent behavior across browsers, OS and devices.
*/
/* Ensure consistent font resizing on mobile devices */
html {
-webkit-text-size-adjust: 100%;
}
html:focus-within {
scroll-behavior: smooth;
}
/* Basic body setup for layout and text rendering optimization */
body {
text-size-adjust: 100%;
position: relative;
width: 100%;
min-height: 100vh;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
}
/* Apply box-sizing globally for consistent element sizing */
*,
::after,
::before {
box-sizing: border-box;
}
/* Style unclassed links for better accessibility */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/**
* CSS Reset Tweaks
* Based on Eric Meyer's CSS Reset v2.0-modified (public domain)
* URL: http://meyerweb.com/eric/tools/css/reset/
*/
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
br,
button,
canvas,
caption,
center,
cite,
code,
col,
colgroup,
data,
datalist,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hgroup,
hr,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
link,
main,
map,
mark,
menu,
meta,
meter,
nav,
noscript,
object,
ol,
optgroup,
option,
output,
p,
param,
picture,
pre,
progress,
q,
rb,
rp,
rt,
rtc,
ruby,
s,
samp,
script,
section,
select,
small,
source,
span,
strong,
style,
svg,
sub,
summary,
sup,
table,
tbody,
td,
template,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
track,
tt,
u,
ul,
var,
video,
wbr {
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* Add focus styles to improve accessibility */
:focus {
outline: 0;
}
/* Normalize HTML5 elements for older browsers */
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
object,
section {
display: block;
}
canvas,
iframe {
max-width: 100%;
height: auto;
display: block;
}
/* Remove default list styling */
ol,
ul {
list-style: none;
}
/* Normalize quote styling */
blockquote,
q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
/* Reset and normalize form inputs */
input:required,
input {
box-shadow: none;
}
/* Autofill styling for better compatibility */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset;
}
/* Improve appearance of search inputs */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
-moz-appearance: none;
}
input[type=search] {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
input:focus {
outline: none;
}
video {
background: #000;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
*/
[hidden] {
display: none;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: none;
}
/**
* Make media easier to work with
*/
audio,
img,
picture,
svg,
video {
max-width: 100%;
display: inline-block;
vertical-align: middle;
height: auto;
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
border: 0;
background: transparent;
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/* Additional attribute handling for accessibility */
[disabled],
[disabled=true],
[aria-disabled=true] {
pointer-events: none;
}
/**
* Address box sizing set to content-box in IE 8/9.
*/
input[type=checkbox],
input[type=radio] {
padding: 0;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button {
border: 0;
background: transparent;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
text-indent: 0;
}
/**
* Based on normalize.css v8.0.1
* github.com/necolas/normalize.css
*/
hr {
box-sizing: content-box;
overflow: visible;
background: #000;
border: 0;
height: 1px;
line-height: 0;
margin: 0;
padding: 0;
page-break-after: always;
width: 100%;
}
/**
* Correct the inheritance and scaling of font size in all browsers.
*/
pre {
font-family: monospace, monospace;
font-size: 100%;
}
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
text-decoration: none;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 75%;
}
/**
* 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: -5px;
}
sup {
top: -5px;
}
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1;
margin: 0;
padding: 0;
}
/**
* Show the overflow in IE and Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
outline: 0;
}
legend {
color: inherit;
white-space: normal;
display: block;
border: 0;
max-width: 100%;
width: 100%;
}
fieldset {
min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
display: block;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-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 all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
template {
display: none;
}
/**
* Variables
*/
/*
* Fonts
* ========================================================================== */
/*
* Palette
* ========================================================================== */
/*
* Basic Colors
* ========================================================================== */
/*
* Mixing Colors
* ========================================================================== */
/**
* Typography
*/
html,
body {
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
}
html {
font-size: 100%;
}
body {
color: #000;
font-size: 16px;
line-height: 24px;
}
h1,
h2,
h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
}
html,
button,
input,
select,
textarea {
color: #000;
}
a {
color: #000;
text-decoration: none;
}
a:visited {
outline: 0;
}
a:focus, a:active, a:hover {
text-decoration: underline;
outline: 0;
}
i,
em {
font-style: italic;
}
b,
strong {
font-weight: bold;
}
.br {
display: block;
}