mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2025-11-29 00:23:01 +00:00
148 lines
3.2 KiB
SCSS
148 lines
3.2 KiB
SCSS
/*
|
||
<style>
|
||
/* RESET RULES
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
:root {
|
||
--page-header-bgColor: #242e42;
|
||
--page-header-bgColor-hover: #1d2636;
|
||
--page-header-txtColor: #dde9f8;
|
||
--page-header-headingColor: #7889a4;
|
||
--page-header-width: 220px;
|
||
--page-content-bgColor: #f0f1f6;
|
||
--page-content-txtColor: #171616;
|
||
--page-content-blockColor: #fff;
|
||
--white: #fff;
|
||
--black: #333;
|
||
--blue: #00b9eb;
|
||
--red: #ec1848;
|
||
--border-radius: 4px;
|
||
--box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
|
||
--switch-bgLightModeColor: #87cefa;
|
||
--switch-sunColor: gold;
|
||
--switch-moonColor: #f4f4f4;
|
||
--switch-bgDarkModeColor: #1f1f27;
|
||
|
||
}
|
||
|
||
$nav-width: 220px;
|
||
$nav-txt-color: #dde9f8;
|
||
$nav-bg-color: #242e42;
|
||
|
||
$page-content-blockColor: #fff;
|
||
$border-radius: 4px;
|
||
$black: #333;
|
||
$white: #fff;
|
||
|
||
|
||
/* HEADER STYLES
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
.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);
|
||
}
|
||
|
||
*/
|