First Commit
This commit is contained in:
Benjamin Toby
Executable
+254
@@ -0,0 +1,254 @@
|
||||
////////////////////////////////////////
|
||||
////////////// - 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 - /////////////
|
||||
////////////////////////////////////////
|
||||
Executable
+52
@@ -0,0 +1,52 @@
|
||||
////////////////////////////////////////
|
||||
////////////// - Imports - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@import "constants";
|
||||
|
||||
////////////////////////////////////////
|
||||
///////////// - Fade In - //////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@fadein: fadein;
|
||||
|
||||
@keyframes @fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
///////////// - Fade Out - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@fadeout: fadeout;
|
||||
|
||||
@keyframes @fadeout {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 2;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
///////////// - Fade Out - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@rotation: rotation;
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Executable
+415
@@ -0,0 +1,415 @@
|
||||
////////////////////////////////////////
|
||||
////////////// - Imports - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@import "constants";
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////// - Buttons - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
button,
|
||||
.button {
|
||||
// Main Styles
|
||||
background-color: lighten(@main_color, 10%);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
transition: all 0.2s ease-out;
|
||||
font-family: inherit;
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@main_color, 10%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
// Combo Styles
|
||||
&.white {
|
||||
background-color: white;
|
||||
color: darken(@main_color, 30%, relative);
|
||||
border: 1px solid @slate_200;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid @slate_400;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary-light {
|
||||
background-color: lighten(@main_color, 75%, relative);
|
||||
color: darken(@main_color, 30%, relative);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: @slate_700;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: @slate_900;
|
||||
}
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background-color: @blue_color;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@blue_color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.small-text {
|
||||
font-size: 13px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
&.smallest {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
&.plain-text {
|
||||
background-color: transparent;
|
||||
color: @slate_700;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: @slate_100;
|
||||
color: @slate_600;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.more-padding {
|
||||
padding: 13px 18px;
|
||||
}
|
||||
|
||||
&.normal-weight {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: @sec_color;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@sec_color, 5%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
background-color: transparent;
|
||||
color: darken(@sec_color, 10%);
|
||||
border: 1px solid @sec_color;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background-color: @slate_200;
|
||||
color: @slate_600;
|
||||
|
||||
&:hover {
|
||||
background-color: @slate_300;
|
||||
}
|
||||
}
|
||||
|
||||
&.light-gray {
|
||||
background-color: @slate_100;
|
||||
color: @slate_500;
|
||||
|
||||
&:hover {
|
||||
background-color: @slate_200;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&.outlined {
|
||||
background-color: transparent;
|
||||
color: @main_color;
|
||||
border: 1px solid lighten(@main_color, 10%);
|
||||
outline: 5px solid transparent;
|
||||
|
||||
&:hover {
|
||||
outline-color: fade(@slate_600, 8%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
border-color: @slate_300;
|
||||
color: @slate_600;
|
||||
}
|
||||
|
||||
&.light-gray {
|
||||
border-color: @slate_200;
|
||||
color: @slate_500;
|
||||
}
|
||||
|
||||
&.black {
|
||||
border-color: @slate_700;
|
||||
color: @slate_900;
|
||||
}
|
||||
|
||||
&.light {
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
&:hover {
|
||||
outline-color: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: darken(@warning_color, 20%);
|
||||
border-color: @warning_color;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&.outlined-gray {
|
||||
background-color: transparent;
|
||||
color: @slate_600;
|
||||
border: 1px solid @slate_300;
|
||||
outline: 5px solid transparent;
|
||||
|
||||
&:hover {
|
||||
outline-color: fade(@slate_500, 10%);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&.ghost {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark button,
|
||||
html.dark .button {
|
||||
// Main Styles
|
||||
background-color: @main_color;
|
||||
color: white;
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@main_color, 10%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&.primary-light {
|
||||
background-color: fade(@main_color, 20%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: @slate_700;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: @slate_900;
|
||||
}
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background-color: @blue_color;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@blue_color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.small-text {
|
||||
font-size: 13px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
&.smallest {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
&.plain-text {
|
||||
background-color: transparent;
|
||||
color: fade(white, 80%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: fade(@slate_100, 5%);
|
||||
color: fade(white, 80%);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.more-padding {
|
||||
padding: 13px 18px;
|
||||
}
|
||||
|
||||
&.normal-weight {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: darken(@sec_color, 10%);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@sec_color, 12%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
background-color: transparent;
|
||||
color: lighten(@sec_color, 30%);
|
||||
border: 1px solid fade(@sec_color, 50%);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background-color: @slate_600;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: @slate_500;
|
||||
}
|
||||
}
|
||||
|
||||
&.light-gray {
|
||||
background-color: @slate_700;
|
||||
color: fade(white, 70%);
|
||||
&:hover {
|
||||
background-color: @slate_600;
|
||||
}
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
background-color: transparent;
|
||||
color: lighten(@main_color, 20%);
|
||||
border: 1px solid fade(@main_color, 50%);
|
||||
outline: 5px solid transparent;
|
||||
|
||||
&:hover {
|
||||
outline-color: fade(white, 5%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
border-color: fade(@slate_300, 20%);
|
||||
color: fade(white, 70%);
|
||||
}
|
||||
|
||||
&.light-gray {
|
||||
border-color: fade(@slate_300, 10%);
|
||||
color: fade(white, 60%);
|
||||
}
|
||||
|
||||
&.light {
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
&:hover {
|
||||
outline-color: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: lighten(@warning_color, 10%);
|
||||
border-color: fade(@warning_color, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&.outlined-gray {
|
||||
background-color: transparent;
|
||||
color: @slate_300;
|
||||
border: 1px solid fade(@slate_300, 50%);
|
||||
outline: 5px solid transparent;
|
||||
|
||||
&:hover {
|
||||
outline-color: fade(@slate_500, 10%);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
svg {
|
||||
color: white;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&.ghost {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
//////////// - Button Group - //////////
|
||||
////////////////////////////////////////
|
||||
|
||||
// .button-group {
|
||||
// gap: 0;
|
||||
|
||||
// ////////////////////////////////////////
|
||||
// ////////////////////////////////////////
|
||||
|
||||
// & > button,
|
||||
// & > .dropdown > button,
|
||||
// & > .button,
|
||||
// & > .dropdown > .button {
|
||||
// &:first-child {
|
||||
// border-top-right-radius: 0;
|
||||
// border-bottom-right-radius: 0;
|
||||
// }
|
||||
// &:last-child {
|
||||
// border-top-left-radius: 0;
|
||||
// border-bottom-left-radius: 0;
|
||||
// outline: 10px solid red;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
Executable
+53
@@ -0,0 +1,53 @@
|
||||
////////////////////////////////////////
|
||||
///////////// - Variables - ////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@media_xl: ~"(max-width: 1200px)";
|
||||
@media_lg: ~"(max-width: 990px)";
|
||||
@media_sl: ~"(max-width: 800px)";
|
||||
@media_md: ~"(max-width: 600px)";
|
||||
@media_sm: ~"(max-width: 450px)";
|
||||
@media_xs: ~"(max-width: 350px)";
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@main_color: #1059b8;
|
||||
@main_color_2: #2076e6;
|
||||
@sec_color: #00948a;
|
||||
@sec_color_2: #0abbaf;
|
||||
@blue_color: #325fc2;
|
||||
|
||||
@text_color: #353b46;
|
||||
@warning_color: #ec9176;
|
||||
@dark_color: #28272b;
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
@slate_100: rgb(241 245 249);
|
||||
@slate_200: rgb(226 232 240);
|
||||
@slate_300: rgb(203 213 225);
|
||||
@slate_400: rgb(148 163 184);
|
||||
@slate_500: rgb(100 116 139);
|
||||
@slate_600: #475569;
|
||||
@slate_700: rgb(51 65 85);
|
||||
@slate_800: rgb(30 41 59);
|
||||
@slate_900: rgb(15 23 42);
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
.flex() {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stack() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
Executable
+140
@@ -0,0 +1,140 @@
|
||||
////////////////////////////////////////
|
||||
////////////// - Imports - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@import "constants";
|
||||
@import "animations";
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////// - Wrapper - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.dropdown-wrapper {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
&:hover {
|
||||
& > .dropdown {
|
||||
display: flex;
|
||||
animation: 0.2s @fadein;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: calc(100% + 20px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
&::before {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
|
||||
@media @media_xl {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
top: auto;
|
||||
bottom: calc(100% + 10px);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
@media @media_xl {
|
||||
& {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////// - Dropdown - ////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
left: 50%;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
transform: translate(-50%, 0);
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 3px;
|
||||
min-width: 200px;
|
||||
gap: 0;
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.right-aligned {
|
||||
left: auto;
|
||||
transform: none;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.left-aligned {
|
||||
left: 0;
|
||||
transform: none;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&.mobile-transform {
|
||||
@media @media_xl {
|
||||
& {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@media @media_xl {
|
||||
&:not(.always) {
|
||||
position: static;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
border-top: 2px solid @main_color;
|
||||
}
|
||||
}
|
||||
|
||||
@media @media_sm {
|
||||
& {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark .dropdown {
|
||||
background-color: @slate_800;
|
||||
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
}
|
||||
Executable
+369
@@ -0,0 +1,369 @@
|
||||
////////////////////////////////////////
|
||||
////////////// - Imports - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@import "constants";
|
||||
@import "animations";
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////// - General - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
font-family: "Inter", Helvetica, Arial, system-ui;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: @text_color;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color: @slate_400;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: @text_color;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
background-color: @slate_900;
|
||||
color: @slate_400;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
#__next {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////// - General - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@media @media_md {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////// - General - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid @slate_200;
|
||||
width: 100%;
|
||||
|
||||
&.vertical {
|
||||
width: auto;
|
||||
border-left: 1px solid @slate_200;
|
||||
border-bottom: none;
|
||||
height: auto;
|
||||
min-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
html.dark hr {
|
||||
border-color: @slate_600;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
a {
|
||||
color: @slate_800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: @sec_color;
|
||||
}
|
||||
|
||||
span a,
|
||||
p a {
|
||||
color: @sec_color;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
span a:hover,
|
||||
p a:hover {
|
||||
border-bottom-color: @sec_color;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
html.dark a {
|
||||
color: @slate_200;
|
||||
}
|
||||
|
||||
html.dark a:hover {
|
||||
color: fade(white, 60%);
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
a.active-page-link {
|
||||
color: @main_color;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
html.dark a.active-page-link {
|
||||
color: white;
|
||||
}
|
||||
|
||||
header.dark-content nav a.active-page-link {
|
||||
color: @slate_400;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////// - General - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.left-border {
|
||||
border-left: 1px solid @slate_300;
|
||||
}
|
||||
|
||||
.window-click-hide {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-pointer-events {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pointer-events {
|
||||
pointer-events: visible;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
///////////// - Collapse - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.collapse-block {
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
white,
|
||||
fade(white, 90%),
|
||||
fade(white, 0%)
|
||||
);
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
html.dark .collapse-block {
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
@slate_800,
|
||||
fade(@slate_800, 90%),
|
||||
fade(@slate_800, 0%)
|
||||
);
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////// - Loading Block - ///////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.general_loader {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
border: 4px solid @slate_200;
|
||||
border-bottom-color: @main_color;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: @rotation 0.5s linear infinite;
|
||||
}
|
||||
|
||||
html.dark .general_loader {
|
||||
border: 4px solid fade(white, 10%);
|
||||
border-bottom-color: white;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////// - Form Elements - ///////////
|
||||
////////////////////////////////////////
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
border: 1px solid @slate_300;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
font-family: inherit;
|
||||
|
||||
&:focus {
|
||||
outline-color: @main_color;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border: 2px solid @warning_color;
|
||||
outline-color: @warning_color;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
padding: 10px 28px 10px 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 13px;
|
||||
color: var(--slate-400);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
html.dark input,
|
||||
html.dark textarea,
|
||||
html.dark select {
|
||||
border: 1px solid fade(@slate_300, 30%);
|
||||
color: white;
|
||||
background-color: @slate_700;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline-color: fade(@slate_300, 60%);
|
||||
border-color: fade(@slate_300, 60%);
|
||||
background-color: @slate_800;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border: 2px solid @warning_color;
|
||||
outline-color: @warning_color;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: fade(white, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
html.dark label {
|
||||
font-size: 13px;
|
||||
color: var(--slate-400);
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
///////////// - Actions - //////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.fade-side {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(0deg, white, transparent);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
html.dark .fade-side {
|
||||
background: linear-gradient(0deg, @slate_900, transparent);
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 0 50px -10px fade(@slate_800, 20%);
|
||||
}
|
||||
|
||||
html.dark .box-shadow {
|
||||
box-shadow: 0 0 50px -10px fade(@slate_800, 90%);
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
/////////////// - Ace - ////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.ace_text-input {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.stack {
|
||||
.stack;
|
||||
}
|
||||
.row {
|
||||
.flex;
|
||||
}
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
////////////////////////////////////////
|
||||
////////////// - Imports - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@import "root";
|
||||
@import "general";
|
||||
@import "scroll-bars";
|
||||
@import "button";
|
||||
@import "dropdown";
|
||||
@import "typography";
|
||||
@import "ui-elements";
|
||||
@import "rich-text-editor";
|
||||
@import "admin";
|
||||
@@ -0,0 +1,82 @@
|
||||
.rte-wrapper {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
border: 1px solid @slate_200;
|
||||
border-radius: 5px;
|
||||
gap: 0;
|
||||
|
||||
.rte {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 20px;
|
||||
|
||||
.rte-placeholder {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
.rte-placeholder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
div {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
&:focus {
|
||||
background-color: @slate_200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rte-header {
|
||||
.flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid @slate_200;
|
||||
|
||||
.rte-el-select {
|
||||
min-width: 140px;
|
||||
|
||||
.form-select-block {
|
||||
select {
|
||||
padding: 7px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
//////////////////////////////
|
||||
//////////////////////////////
|
||||
|
||||
[data-slate-editor] {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
Executable
+433
@@ -0,0 +1,433 @@
|
||||
// @import url("https://fonts.googleapis.com/css?family=Comme:300,400,500,600,700,800,900");
|
||||
// @import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,500");
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
:root {
|
||||
--primary: #1059b8;
|
||||
--secondary: #00948a;
|
||||
|
||||
--main-color: #00948a;
|
||||
--main-color-lighter: #31aaa2;
|
||||
--main-color-darker: #00776f;
|
||||
--main-color-darker-2: #0b5a55;
|
||||
--main-color-dark: #0c3d3a;
|
||||
--main-color-dark-lighter: #3b2a4b;
|
||||
--main-color-dark-lighter-2: #4b286b;
|
||||
--main-color-dark-lighter-3: #5a278a;
|
||||
|
||||
--sec-color: #107ab8;
|
||||
--sec-color-lighter: #47a2d6;
|
||||
--sec-color-light: #bfe3f8;
|
||||
--sec-color-darker: #0b8862;
|
||||
|
||||
--sec-color-2: #66ced6;
|
||||
--sec-color-2-darker: #169286;
|
||||
|
||||
--text-color: #242527;
|
||||
--light-color: #d3dae4;
|
||||
--dark-color: #120e16;
|
||||
|
||||
--slate-100: rgb(241 245 249);
|
||||
--slate-200: rgb(226 232 240);
|
||||
--slate-300: rgb(203 213 225);
|
||||
--slate-400: rgb(148 163 184);
|
||||
--slate-500: rgb(100 116 139);
|
||||
--slate-600: rgb(71 85 105);
|
||||
--slate-700: #334155;
|
||||
--slate-800: #1e293b;
|
||||
--slate-900: #0f172a;
|
||||
|
||||
--warning-color: rgb(236, 145, 118);
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
.swiper-wrapper {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
.tox .tox-sidebar-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tox .tox-edit-area {
|
||||
height: 100%;
|
||||
padding: 10px 20px;
|
||||
|
||||
iframe {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-tinymce {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tox-collection__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tox .tox-edit-area,
|
||||
.tox .tox-edit-area iframe,
|
||||
.tox .tox-editor-container,
|
||||
.tox .tox-editor-container > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tox:not(.tox-tinymce-inline) .tox-editor-header {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
nav a {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header.dark-content {
|
||||
background-color: var(--dark-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
header.dark-content.hero-overlay {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
header.dark-content #main-header-logo-link-block * {
|
||||
color: white;
|
||||
}
|
||||
|
||||
header.dark-content nav a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
header.dark-content nav a:hover {
|
||||
color: var(--slate-400);
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
ul,
|
||||
ol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--slate-200);
|
||||
}
|
||||
|
||||
html.dark footer {
|
||||
border-top: 1px solid var(--slate-700);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--sec-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
#theme-selector-wrapper {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#theme-selector-graphic-wrapper {
|
||||
outline-color: transparent;
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
background-color: var(--slate-200);
|
||||
}
|
||||
|
||||
html.dark #theme-selector-graphic-wrapper {
|
||||
background-color: var(--slate-700);
|
||||
}
|
||||
|
||||
#theme-selector-wrapper:hover #theme-selector-graphic-wrapper {
|
||||
outline-color: var(--slate-300);
|
||||
}
|
||||
|
||||
html.dark #theme-selector-wrapper:hover #theme-selector-graphic-wrapper {
|
||||
outline-color: var(--slate-500);
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
aside a.active {
|
||||
font-weight: 800;
|
||||
color: var(--main-color);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// aside a.active::after {
|
||||
// content: "<";
|
||||
// position: absolute;
|
||||
// right: -15px;
|
||||
// }
|
||||
|
||||
html.dark aside a.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
.tox-editor-header::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.RTE-DOCS {
|
||||
max-width: 800px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.RTE-DOCS img {
|
||||
box-shadow: 0 0 40px rgba(30, 41, 59, 0.1);
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
object-position: top left;
|
||||
}
|
||||
}
|
||||
|
||||
.RTE-DOCS pre,
|
||||
.RTE-DOCS li,
|
||||
.RTE-DOCS ol {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.RTE-DOCS p code,
|
||||
.RTE-DOCS span code {
|
||||
font-family: "IBM Plex Mono";
|
||||
background-color: var(--slate-100);
|
||||
border: 1px solid var(--slate-200);
|
||||
border-radius: 2px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
// .RTE-DOCS div {
|
||||
// display: block !important;
|
||||
// }
|
||||
|
||||
html.dark .RTE-DOCS .code-block {
|
||||
background-color: var(--slate-700) !important;
|
||||
}
|
||||
|
||||
.target-node {
|
||||
outline: 3px solid var(--main-color-lighter) !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
.gray-bordered {
|
||||
border: 1px solid var(--slate-200);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ace-editor-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#ace-editor-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#ace-editor-wrapper div,
|
||||
.ace_editor div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.copy-code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
font-family: "IBM Plex Mono" !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.code-block:hover .copy-code {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ###############################################################################################
|
||||
##################################################################################################
|
||||
##################################################################################################
|
||||
##################################################################################################
|
||||
##################################### -- Mobile Styles -- ########################################
|
||||
##################################################################################################
|
||||
##################################################################################################
|
||||
##################################################################################################
|
||||
############################################################################################### */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
#main-nav-content-wrapper {
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html.dark #main-nav-content-wrapper {
|
||||
background-color: var(--slate-800);
|
||||
box-shadow: 0 0 50px black;
|
||||
}
|
||||
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
/* * */
|
||||
|
||||
nav a {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header.dark-content {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
header.dark-content nav a {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#main-nav-content-wrapper {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
section {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
}
|
||||
Executable
+62
@@ -0,0 +1,62 @@
|
||||
////////////////////////////////////////
|
||||
////////////// - Imports - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
@import "constants";
|
||||
|
||||
////////////////////////////////////////
|
||||
/////////// - Scroll Bars - ////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
aside,
|
||||
.login-block,
|
||||
.minimal-scrollbars,
|
||||
.minimal-scrollbars.all-children * {
|
||||
scrollbar-width: thin;
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: @slate_200;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: @slate_300;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: @slate_500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
///////////// - Dark Mode - ////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
html.dark aside,
|
||||
html.dark .login-block,
|
||||
html.dark .minimal-scrollbars,
|
||||
html.dark .minimal-scrollbars.all-children * {
|
||||
&::-webkit-scrollbar-track {
|
||||
background: @slate_500;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: @slate_600;
|
||||
|
||||
&:hover {
|
||||
background: @slate_400;
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+85
@@ -0,0 +1,85 @@
|
||||
////////////////////////////////////////
|
||||
///////////// - Headers - //////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
|
||||
@media @media_md {
|
||||
& {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
|
||||
@media @media_md {
|
||||
& {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
|
||||
@media @media_md {
|
||||
& {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
|
||||
@media @media_md {
|
||||
& {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.4;
|
||||
color: black;
|
||||
font-family: "Poppins", Helvetica, Arial, system-ui;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
/////////// - Paragraphs - /////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
///////// - Text Components - //////////
|
||||
////////////////////////////////////////
|
||||
|
||||
.metric {
|
||||
font-size: 36px;
|
||||
}
|
||||
Executable
+1010
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user