classic_admin.scss

@import 'modules/theme';
@import 'partials/basic';
@import 'partials/button_animated';
@import 'partials/shape';

body {
  display: block;
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background-color: $mainColor;
  background-image: $adminBackground;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/***********************
* side nav bar
***********************/
div.admincontent {
  overflow: auto;
  height: 100%;
  padding: 5em 1em;
}

#admincontentpage {
  margin-left: 200px;
}

.adminsidebar {
  margin: 0;
  padding: 5em 1em;
  width: 200px;
  background: $panelColor;
  color: $fontColor;
  position: fixed;
  height: 100%;
  overflow: auto;
  display: block;
  z-index: 10;
}

.admintopnavbar {
  height: 4em;
  width: 100%;
  position: fixed;
  z-index: 15;
  top: 0;
  background-color: $panelColor;
}

.admintopnavbar > i {
  color: $fontColor;
  position: initial;
  padding: 0.15em 0.2em 0em 0.2em;
}

ul.adminnavlist {
  list-style-position: inside;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

/* nav bar links */
a.adminnavlistelement {
  display: block;
  color: $fontColor;
  padding: 16px;
  text-decoration: none;
  font-size: $fontSize;
}

a.adminnavlistelement > div {
  display: table-cell;
  vertical-align: middle;
}

/* nav bar active/current link */
a.adminnavlistelement.active {
  background-color: $hoverPanelColor;
  font-weight: bold;
}

/* nav bar links on mouse-over */
a.adminnavlistelement:hover:not(.active) {
  background-color: $hoverPanelColor;
  color: white;
}

#adminnavlisttextback {
  position: relative;
  top: -0.3em;
  left: 0.5em;
}

#adminnavlisttextlogout {
  padding: 5px;
}

/* navbar debug panel */
#debugpanel_autorefresh {
  float: right;
  margin-right: 2em;
}

div.debugcontent {
  background-color: white;
}

/* debug panel text output */
pre {
  white-space: pre-wrap;
}

/**************************
* Settings Content Container
**************************/

/* settings section container */
div.setting_section {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7);
  display: block;
  padding: 5px 5px;
  margin: 0 25px 25px 25px;
  color: $fontColor;
  background-color: $panelColor;
}

/* Clear floats */
.setting_section::after {
  content: '';
  clear: both;
  display: table;
}

.setting_section_heading {
  padding: 10px 0px;
  margin: 0px;
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: bold;
}

div.setting_element {
  float: left;
  width: 32%;
  height: 5em;
  margin-bottom: 16px;
  margin-right: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.1);
}

.hidden {
  display: none;
}

.settinglabel {
  width: 100%;
  overflow: hidden;
  font-weight: bold;
}

.floatright {
  float: right;
}

.settinginput {
  width: 100%;
}

.settinginput.color {
  width: 30%;
  display: block;
}

/***************************
* Screen size @media queries
****************************/
@media screen and (max-width: 1400px) {
  div.setting_element {
    float: left;
    width: 48%;
  }
}

@media screen and (max-width: 1000px) {
  div.setting_element {
    width: 98%;
    float: left;
  }
}

@media screen and (min-width: 701px) {
  .adminsidebar {
    display: block;
  }
}
/* On screens that are less than 700px wide, make the sidebar hidden */
@media screen and (max-width: 700px) {
  .adminsidebar,
  #adminsidebar {
    display: none;
    padding-top: 5em;
  }

  #admincontentpage {
    margin-left: 0px;
  }

  div.admincontent {
    padding-top: 5em;
    width: 100%;
  }

  div.setting_section {
    margin: 0 0 25px 0;
  }
}

/*************************
* Show manual as tooltip
* for setting elements
*************************/

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  width: 300px;
  bottom: 100%;
  left: 5em;
  margin-left: -60px;
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*****************
* Toggle Button
*****************/

/* https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-Tut-button-5.html */

.toggle input {
  display: none;
}

.toggle .slider {
  /* Grundfläche */
  position: relative;
  cursor: pointer;
  display: block;
  left: 0.2em;
  width: 2.9em;
  height: 1.4em;
  background-color: rgba(195, 46, 4, 0.6);
  transition: all 0.3s ease-in-out;
}

.toggle .slider::before {
  /* verschiebbarer Button */
  position: absolute;
  content: '';
  height: 1.2em;
  width: 1.2em;
  left: 0.1em;
  bottom: 0.1em;
  background-color: white;
  transition: all 0.3s ease-in-out;
}

.toggle input:checked + .slider {
  background-color: rgba(90, 153, 00, 0.8); /* green */
}

.toggle input:focus + .slider {
  background-color: pink;
  box-shadow: 0 0 1px #5a9900;
}

.toggle input:checked + .slider:before {
  -webkit-transform: translateX(1.5em); /* Android 4 */
  -ms-transform: translateX(1.5em); /* IE9 */
  transform: translateX(1.5em);
}

.toggleTextON,
.toggleTextOFF {
  position: absolute;
  color: $fontColor;
  left: 4.5em;
}

.shape--classic_rounded,
.shape--modern,
.shape--modern_squared {
  &.slider,
  &.toggle {
    border-radius: 5px;
  }

  &.slider::-webkit-slider-thumb,
  &.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 1em;
  }

  &.slider:before,
  &.toggle:before {
    border-radius: 50%;
  }
}
/********************************************
* Adjust style of selectize lib for our needs - multiselects only
********************************************/
.selectize-control.multi .selectize-input.has-items {
  height: 3.35em;
  overflow: auto;
  font-size: $fontSize;
  padding: 0 0 0;
}

.selectize-control.multi .selectize-input > div.active {
  background-color: #dddddd;
}

.selectize-control.multi .selectize-input > div {
  font-family: inherit;
  font-size: $fontSize;
  margin: 0 1px 0px 0;
  padding: 0px 2px;
}

/**************************
* Version Check text table
***************************/
#version_text_table {
  height: 3em;
  position: relative;
  left: 1em;
  top: -0.5em;
}

#version_text_table + td {
  padding: 0 1em 0 0;
}