mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2026-02-11 10:05:41 +00:00
115 lines
2.0 KiB
SCSS
115 lines
2.0 KiB
SCSS
@import '../vars';
|
|
|
|
$nav-width: 220px;
|
|
$nav-txt-color: #dde9f8;
|
|
$nav-bg-color: #242e42;
|
|
|
|
|
|
.nav-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: auto;
|
|
padding-top: 20px;
|
|
width: $nav-width;
|
|
color: $nav-txt-color;
|
|
background: $nav-bg-color;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.nav__home-btn {
|
|
display: block;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.nav__logo {
|
|
max-width: 120px;
|
|
fill: $white;
|
|
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
|
|
brightness(104%) contrast(101%);
|
|
}
|
|
|
|
.nav__show-menu {
|
|
display: none;
|
|
margin-left: 5px;
|
|
padding: 4px;
|
|
background: $page-content-blockColor;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.nav__show-menu-icon {
|
|
fill: $black;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.page-header .admin-menu li:nth-last-child(2) {
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.page-header .admin-menu li:last-child {
|
|
margin-top: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.page-header .admin-menu li > * {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.page-header .admin-menu .switcher {
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
|
|
.page-header .admin-menu .menu-heading h3 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
font-size: 12px;
|
|
margin-top: 12px;
|
|
color: var(--page-header-headingColor);
|
|
}
|
|
|
|
.page-header .admin-menu svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: var(--page-header-txtColor);
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.page-header .admin-menu a,
|
|
.page-header .admin-menu button {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.page-header .admin-menu a:hover,
|
|
.page-header .admin-menu a:focus,
|
|
.page-header .admin-menu button:hover,
|
|
.page-header .admin-menu button:focus {
|
|
background: var(--page-header-bgColor-hover);
|
|
color: var(--blue);
|
|
outline: none;
|
|
}
|
|
|
|
.page-header .admin-menu a:hover svg,
|
|
.page-header .admin-menu a:focus svg,
|
|
.page-header .admin-menu button:hover svg,
|
|
.page-header .admin-menu button:focus svg {
|
|
fill: var(--blue);
|
|
}
|