119 lines
2.3 KiB
CSS
119 lines
2.3 KiB
CSS
|
:root {
|
||
|
|
--color-primary: #212121;
|
||
|
|
--color-secondary: #3a3636;
|
||
|
|
--color-tertiary: #17171b;
|
||
|
|
--color-quaternary: #757575;
|
||
|
|
--color-quinary: #9e9e9e;
|
||
|
|
--button-color: #212121;
|
||
|
|
--button-color-hover: #424242;
|
||
|
|
--button-color-active: #c72510;
|
||
|
|
--button-color-disabled: #757575;
|
||
|
|
--button-color-text: #9e9e9e;
|
||
|
|
--text-main: #ffffff;
|
||
|
|
--text-secondary: #ffffff;
|
||
|
|
--text-tertiary: #ffffff;
|
||
|
|
--background-color: #212121;
|
||
|
|
--invert: 1000;
|
||
|
|
--sidebar-button-color: white;
|
||
|
|
--sidebar-button-color-hover: #0e0e1d;
|
||
|
|
--card-bg: #353535;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--sidebar-size: 220px;
|
||
|
|
}
|
||
|
|
.nav-bar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
/* The side navigation menu */
|
||
|
|
.sidebar {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
width: var(--sidebar-size);
|
||
|
|
background-color: var(--color-tertiary);
|
||
|
|
position: fixed;
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
z-index: 999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sidebar links */
|
||
|
|
.sidebar a {
|
||
|
|
display: block;
|
||
|
|
color: var(--sidebar-button-color);
|
||
|
|
padding: 16px;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Active/current link */
|
||
|
|
.sidebar .router-link-active {
|
||
|
|
background-color: var(--button-color-active);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Links on mouse-over */
|
||
|
|
.sidebar a:hover:not(.router-link-active) {
|
||
|
|
background-color: var(--sidebar-button-color-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
|
||
|
|
div.content {
|
||
|
|
margin-left: var(--sidebar-size);
|
||
|
|
padding: 1px 16px;
|
||
|
|
height: 1000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* On screens that are less than 700px wide, make the sidebar into a topbar */
|
||
|
|
@media screen and (max-width: 700px) {
|
||
|
|
.sidebar {
|
||
|
|
width: 100%;
|
||
|
|
left: -700px;
|
||
|
|
transition: all 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.content {
|
||
|
|
margin-left: 0;
|
||
|
|
padding: 1px 16px;
|
||
|
|
height: 1000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active-nav {
|
||
|
|
left: 0;
|
||
|
|
margin-right: var(--sidebar-size);
|
||
|
|
width: var(--sidebar-size);
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
margin: 10px;
|
||
|
|
width: 200px;
|
||
|
|
height: 200px;
|
||
|
|
border-radius: 5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.smallAvatar {
|
||
|
|
width: 70px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar > * {
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left {
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.openMenu {
|
||
|
|
font-size: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.openMenu:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|