82 lines
1.5 KiB
CSS
82 lines
1.5 KiB
CSS
@import './variables.css' layer(theme);
|
|
|
|
@layer base {
|
|
:root {
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size);
|
|
line-height: var(--line-height);
|
|
font-weight: 400;
|
|
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:where(html, body) {
|
|
color-scheme: dark;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
color: var(--color-on-surface);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
:where(h1, h2, h3, h4, h5, h6, p, div, span) {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:where(menu) {
|
|
margin: 0;
|
|
}
|
|
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: 15;
|
|
}
|
|
|
|
.evelation-0 {
|
|
box-shadow: var(--elevation-0);
|
|
}
|
|
|
|
.evelation-1 {
|
|
box-shadow: var(--elevation-1-ambient), --var(--elevation-1-umbra);
|
|
}
|
|
|
|
.elevation-2 {
|
|
box-shadow: var(--elevation-2-ambient), var(--elevation-2-umbra);
|
|
}
|
|
|
|
.elevation-3 {
|
|
box-shadow: var(--elevation-3-ambient), var(--elevation-3-umbra);
|
|
}
|
|
|
|
.elevation-4 {
|
|
box-shadow: var(--elevation-4-ambient), var(--elevation-4-umbra);
|
|
}
|
|
|
|
.elevation-5 {
|
|
box-shadow: var(--elevation-5-ambient), var(--elevation-5-umbra);
|
|
}
|
|
}
|