940 lines
13 KiB
SCSS
940 lines
13 KiB
SCSS
@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;
|
|
}
|