forked from mirzaev/ff
166 lines
3.4 KiB
CSS
166 lines
3.4 KiB
CSS
@import url('/fonts/comissioner.ttf');
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--background: #eee;
|
|
--text : 'dark';
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background-light-3: #403939;
|
|
--background-light-2: #322d2d;
|
|
--background-light-1: #2b2525;
|
|
--background-light : #252020;
|
|
--background : #221e1e;
|
|
--background-dark : ;
|
|
--text : #e6e6e6;
|
|
--text-hover : #fff;
|
|
--text-active : #d0d0d0;
|
|
--red-light-1 : #dc4343;
|
|
--red-light : #bf3737;
|
|
--red : #a43333;
|
|
--red-dark : #8d2a2a;
|
|
}
|
|
}
|
|
|
|
|
|
* {
|
|
text-decoration: none;
|
|
outline : none;
|
|
border : none;
|
|
color : var(--text);
|
|
font-family : 'Commissioner', sans-serif;
|
|
transition : 0.1s ease-out;
|
|
}
|
|
|
|
.unselectable {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select : none;
|
|
-khtml-user-select : none;
|
|
-moz-user-select : none;
|
|
-ms-user-select : none;
|
|
user-select : none;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--text-hover);
|
|
}
|
|
|
|
a:active {
|
|
color: var(--text-active);
|
|
}
|
|
|
|
body {
|
|
height : 100vh;
|
|
margin : 0;
|
|
display : grid;
|
|
grid-template-rows : 10px 200px auto 10px;
|
|
grid-template-columns: 250px auto 300px;
|
|
grid-row-gap : 20px;
|
|
grid-column-gap : 15px;
|
|
overflow: hidden;
|
|
background-color : var(--background);
|
|
}
|
|
|
|
aside {
|
|
z-index : 500;
|
|
grid-column: 1/ 4;
|
|
grid-row : 2;
|
|
overflow : hidden;
|
|
}
|
|
|
|
header {
|
|
z-index : 5000;
|
|
grid-column : 1;
|
|
grid-row : 1 / 5;
|
|
display : flex;
|
|
flex-direction: column;
|
|
box-shadow : 2px 0 5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
header>menu {
|
|
margin : unset;
|
|
padding : 20px;
|
|
display : flex;
|
|
flex-direction : column;
|
|
flex-grow : 1;
|
|
background-color: var(--background-light-1);
|
|
}
|
|
|
|
header>#account>button#login {
|
|
z-index : 1500;
|
|
}
|
|
|
|
header>menu a {
|
|
margin-bottom: 8px;
|
|
display : flex;
|
|
align-items : center;
|
|
}
|
|
|
|
header>menu a:last-child {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
header>menu a svg {
|
|
margin-right: 8px;
|
|
height : 1.2rem;
|
|
position : relative;
|
|
}
|
|
|
|
header>menu a:hover svg {
|
|
margin-left : -5px;
|
|
margin-right: 13px;
|
|
}
|
|
|
|
header>menu a svg path {
|
|
fill: var(--text);
|
|
}
|
|
|
|
header>section {
|
|
background-color: var(--background-light-1);
|
|
}
|
|
|
|
header :is(button, a[type="button"]) {
|
|
width : 100%;
|
|
height : 40px;
|
|
display : flex;
|
|
justify-content : center;
|
|
align-items : center;
|
|
cursor : pointer;
|
|
background-color: var(--red);
|
|
transition : unset;
|
|
}
|
|
|
|
header button {
|
|
font-weight : bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
header :is(button, a[type="button"]):hover {
|
|
background-color: var(--red-light);
|
|
}
|
|
|
|
header :is(button, a[type="button"]):active {
|
|
background-color: var(--red-dark);
|
|
}
|
|
|
|
header>nav {
|
|
margin-top : auto;
|
|
display : flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main {
|
|
z-index : 1000;
|
|
grid-column: 2;
|
|
grid-row : 3;
|
|
}
|
|
|
|
footer {
|
|
z-index : 3000;
|
|
grid-column: 3;
|
|
grid-row : 1 / 5;
|
|
}
|