Files
arne-drums/src/ui/global.css
2023-02-26 22:14:43 +01:00

125 lines
2.4 KiB
CSS

:root {
--color-ui-accent: #00b3ba;
--color-ui-accent-hover: #00c1c9;
--color-ui-accent-active: #008e93;
--color-ui-neutral-light: #fdfdfe;
--color-ui-neutral-light-hover: #fdfdfe;
--color-ui-neutral-light-active: #fdfdfe;
--color-ui-neutral-dark: #8b8b8b;
--color-ui-neutral-dark-hover: #a1a1a1;
--color-ui-neutral-dark-active: #c1c1c1;
--color-bg-light: #464646;
--color-bg-medium: #323232;
--color-bg-dark: #282828;
--color-p-light: #fafafa;
--color-p-light-hover: #fafafa;
--color-p-light-active: #fafafa;
--color-p-dark: #282828;
--color-p-dark-hover: #464646;
--color-p-dark-active: #464646;
--color-title-light: #fafafa;
--color-title-dark: #282828;
}
html, body {
position: relative;
width: 100%;
height: 100%;
}
* {
box-sizing: border-box;
}
body {
color: #333;
margin: 0;
font-family: DMSans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0,80,160);
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
::-webkit-scrollbar {
background-color: transparent;
}
body {
scrollbar-width: thin;
scrollbar-color: var(--color-ui-neutral-dark) transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0);
}
@font-face {
font-family: 'DMSans';
font-style: normal;
font-weight: 400;
src: url(assets/fonts/DMSans-Regular.ttf) format('woff2');
}
@font-face {
font-family: 'DMSans';
font-style: normal;
font-weight: 600;
src: url(assets/fonts/DMSans-Bold.ttf) format('woff2');
}
@font-face {
font-family: 'DMSans';
font-style: italic;
font-weight: 400;
src: url(assets/fonts/DMSans-Italic.ttf) format('woff2');
}
@font-face {
font-family: 'DMSans';
font-style: italic;
font-weight: 600;
src: url(assets/fonts/DMSans-BoldItalic.ttf) format('woff2');
}