255 lines
6.1 KiB
Plaintext
Executable File
255 lines
6.1 KiB
Plaintext
Executable File
////////////////////////////////////////
|
|
////////////// - Imports - /////////////
|
|
////////////////////////////////////////
|
|
|
|
@import "constants";
|
|
|
|
////////////////////////////////////////
|
|
/////////////// - Aside - //////////////
|
|
////////////////////////////////////////
|
|
|
|
.admin {
|
|
.aside {
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 20px 20px 40px 20px;
|
|
box-shadow: 0 0 20px -5px fade(@slate_600, 10%);
|
|
border-right: 1px solid @slate_200;
|
|
z-index: 800;
|
|
transition: padding 0.2s ease-out;
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
|
|
.main-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
|
|
////////////////////////////////////////
|
|
|
|
a {
|
|
color: @slate_600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
|
|
&:hover,
|
|
&.active {
|
|
background-color: fade(@slate_400, 10%);
|
|
|
|
span {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
&:hover span,
|
|
&.active span {
|
|
// font-weight: 800;
|
|
color: @slate_800;
|
|
}
|
|
|
|
&:hover svg,
|
|
&.active svg {
|
|
color: @slate_800;
|
|
opacity: 1;
|
|
}
|
|
|
|
span {
|
|
font-weight: 500;
|
|
}
|
|
|
|
img {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
svg {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
|
|
&.mobile-collapsed {
|
|
position: sticky;
|
|
height: 100vh;
|
|
width: 100%;
|
|
top: 0;
|
|
max-width: 300px;
|
|
width: 300px;
|
|
}
|
|
|
|
&.mobile-expanded {
|
|
height: 100vh;
|
|
position: fixed;
|
|
overflow-y: auto;
|
|
padding-bottom: 40px;
|
|
top: 0;
|
|
width: 300px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
|
|
@media @media_lg {
|
|
& {
|
|
min-width: 150px;
|
|
width: 150px;
|
|
}
|
|
|
|
&.mobile-collapsed {
|
|
position: absolute;
|
|
height: 49px;
|
|
width: 300px;
|
|
overflow: hidden;
|
|
padding: 8px 8px 8px 20px;
|
|
}
|
|
|
|
&.mobile-expanded {
|
|
height: 100vh;
|
|
position: fixed;
|
|
overflow-y: auto;
|
|
padding-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
@media @media_sm {
|
|
&.mobile-collapsed {
|
|
position: absolute;
|
|
height: 49px;
|
|
width: 180px;
|
|
|
|
.logo {
|
|
.logo-text {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mobile-expanded {
|
|
max-width: 230px;
|
|
width: 230px;
|
|
|
|
.logo {
|
|
.logo-text {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
|
|
.admin-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 30px;
|
|
gap: 30px;
|
|
background-color: fade(@slate_100, 60%);
|
|
|
|
@media @media_md {
|
|
padding: 30px 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////
|
|
///////////// - Dark Mode - ////////////
|
|
////////////////////////////////////////
|
|
|
|
html.dark .admin {
|
|
.aside {
|
|
background-color: @slate_800;
|
|
box-shadow: 0 0 20px -5px fade(@slate_600, 10%);
|
|
border-right: 1px solid @slate_700;
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
|
|
.main-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
|
|
////////////////////////////////////////
|
|
|
|
a {
|
|
color: @slate_500;
|
|
|
|
&:hover span,
|
|
&:hover svg,
|
|
&.active span,
|
|
&.active svg {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
|
|
.admin-content {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.terminal {
|
|
div {
|
|
display: block;
|
|
}
|
|
|
|
// .xterm-helper-textarea {
|
|
// position: absolute;
|
|
// }
|
|
}
|
|
|
|
.xterm {
|
|
padding: 20px;
|
|
}
|
|
|
|
.xterm,
|
|
.xterm-screen {
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.xterm-viewport {
|
|
background-color: transparent !important;
|
|
&::-webkit-scrollbar {
|
|
// width: 12px;
|
|
background-color: @slate_800;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
// width: 12px;
|
|
background-color: lighten(@slate_600, 10%);
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////
|
|
////////////// - Connect - /////////////
|
|
////////////////////////////////////////
|