panel

frontend/static/js/css/panel/main.scss

@@ -0,0 +1,147 @@
+/*
+<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);
+  }
+
+  */