/***************************************************************************************************************************************************************************************************
Project Name: Gastrowiki - Website
Description: CSS Datei für die grafische Gestaltung der Gastrowiki Website
Author: Adrian Kölliker und Yael van Dok
Author URI: https://wirtepatent.ch
*
*
* Table of Content
*
********************* 1 Normalization *************************************************************
* 1.1 - Normalization
********************* 2 Allgemein *****************************************************************
* 2.1 - Allgemein
* 2.2 - Allgemeine Klassen
********************* 3 Farben ********************************************************************
* 3.1 - Farben
********************* 4 Header, Footer, Searchbar und Tabellen ************************************
* 4.1 - Header
* 4.2 - Footer
* 4.3 - Searchbar
********************* 5 Base Components *************************************************************
* 5.1 - Forms
* 5.2 - Tabellen
* 5.3 - Preloader
* 5.4 - Buttons
********************* 6 Advanced Components *********************************************************
* 6.1 - Panel
* 6.2 - Texteingabepanel
* 6.3 - Breadcrumb
********************* 7 End Components ************************************************************
* 7.1 -
**************************************************************************************************************************************************************************************************/
/**************************************************************************************************************************************************************************************************
* 1.1 Normalization
*
* Hier werden die verschiedenen Tags über alle Browser hinweg normalisiert und zu einem einheitlichen Format gebracht.
* Quelle: normalize.css - Version: 8.0.1 - https://necolas.github.io/normalize.css/8.0.1/normalize.css
*
*************************************************************************************************************************************************************************************************/
/* #region Normalization */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b, strong {
font-weight: 700;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code, kbd, samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button, input, optgroup, select, textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button, input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button, select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted black;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 2.1 Allgemein
*
* Hier werden verschiedene Allgemeine Befehle, welche im ganzen Dokument verwendet werden, hinterlegt.
*
*************************************************************************************************************************************************************************************************/
/* #region Allgemein */
html {
line-height: 22.5px;
font-family: Roboto, sans-serif;
}
svg {
height: inherit;
width: inherit;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
padding: 20px 0;
align-items: stretch;
flex: 1 0 auto;
flex-direction: row;
flex-wrap: wrap;
}
img {
width: 100%;
height: auto;
}
a {
text-decoration: none;
color: inherit;
}
form {
width: 100%;
}
p {
margin: 0;
hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
}
h1{
font-size: 3rem;
}
h2{
font-size: 2.5rem;
}
h3{
font-size: 2rem;
}
h4{
font-size: 1.5rem;
}
* {
box-sizing: border-box;
}
.word-wrap{
word-break: break-all;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 2.2 Allgemeine Klassen
*
* Hier werden allgemeine Klassen definiert, die auf der ganzen Website immer wieder verwendet werden
*
*************************************************************************************************************************************************************************************************/
/* #region Allgemeine Klassen */
#map {
height: calc(100vh - 30vh);
}
.float-left{
float:left;
}
.container_schmal{
max-width: 1000px;
margin: 0 auto;
}
.pointer:hover{
cursor:pointer;
}
.move:hover{
cursor:move;
}
.fehlermeldung {
color: red!important;
width: 100%!important;
text-align: right;
padding-bottom: 20px;
}
.visibilityhidden {
visibility: hidden;
}
.links {
display: flex;
justify-content: flex-start;
}
.rechts {
display: flex;
justify-content: flex-end;
}
.zentriert {
display: flex;
justify-content: center;
}
.spacebetween{
display:flex;
justify-content: space-between;
}
.wrap{
flex-wrap: wrap;
}
.textalignleft {
text-align: left;
}
.textaligncenter {
text-align: center;
}
.textalignright {
text-align: right;
}
.hide {
display: none!important;
}
.form-display-none{
display:none;
}
.flex {
display: flex;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.flex-col {
display: flex;
flex-direction: column;
max-width: 100%;
}
.grow {
flex: 1;
}
.textaligncenter{
text-align: center;
}
.textalignleft{
text-align:left;
}
.textalignright{
text-align:right;
}
.verticalaligncenter {
align-items: center;
}
.verticalaligntop {
align-items: flex-start;
}
.verticalalignbottom {
align-items: flex-end;
}
.horizontalaligncenter {
justify-content: center;
}
.horizontalalignleft {
justify-content: flex-start;
}
.horizontalalignright {
justify-content: flex-end;
}
.flex-col.verticalaligncenter {
justify-content: center;
}
.flex-col.verticalaligntop {
justify-content: flex-start;
}
.flex-col.verticalalignbottom {
justify-content: flex-end;
}
.flex-col.horizontalaligncenter {
align-content: center;
}
.flex-col.horizontalalignright {
align-items: flex-end;
}
.flex-col.horizontalalignleft {
align-items: flex-start;
}
.margin-box {
margin: 20px;
}
.margin-box-top {
margin-top: 20px;
}
.margin-box-right {
margin-right: 20px;
}
.margin-box-bottom {
margin-bottom: 20px;
}
.margin-box-left {
margin-left: 20px;
}
.margin-box-none {
margin: 0;
}
.margin-box-small {
margin: 10px;
}
.margin-box-small-top {
margin-top: 10px;
}
.margin-box-small-right {
margin-right: 10px;
}
.margin-box-small-bottom {
margin-bottom: 10px;
}
.margin-box-small-left {
margin-left: 10px;
}
.padding-box-none {
padding: 0;
}
.padding-box-small {
padding: 10px;
}
.padding-box-small-top {
padding-top: 10px;
}
.padding-box-small-right {
padding-right: 10px;
}
.padding-box-small-bottom {
padding-bottom: 10px;
}
.padding-box-small-left {
padding-left: 10px;
}
.padding-box {
padding: 20px;
}
.padding-box-top {
padding-top: 20px;
}
.padding-box-right {
padding-right: 20px;
}
.padding-box-bottom {
padding-bottom: 20px;
}
.padding-box-left {
padding-left: 20px;
}
.padding-box-large {
padding: 40px;
}
.padding-box-large-top {
padding-top: 40px;
}
.padding-box-large-right {
padding-right: 40px;
}
.padding-box-large-bottom {
padding-bottom: 40px;
}
.padding-box-large-left {
padding-left: 40px;
}
.border-bottom {
border-bottom: 1px solid #E9E6E4;
}
.shrunk {
max-height: 0;
overflow: hidden;
}
.shrinkable {
transition: max-height 1s ease-in-out;
overflow: hidden;
}
.icon-container {
width: 100%;
}
img.abgerundet{
border-radius: 50%;
}
.light{
font-weight: 100;
}
.bold{
font-weight: bold;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 2.3 Custom Grid
*
* Hier wird das Grid definiert, welches zum Anordnen von Elementen verwendet wird
*
*************************************************************************************************************************************************************************************************/
/* #region Grid */
.s0{
width: 0%;
}
.s1 {
width: 8.3333333333%;
}
.s1_5 {
width: 12.5%;
}
.s2 {
width: 16.6666666667%;
}
.s3 {
width: 25%;
}
.s4 {
width: 33.3333333333%;
}
.s5 {
width: 41.6666666667%;
}
.s6 {
width: 50%;
}
.s7 {
width: 58.3333333333%;
}
.s8 {
width: 66.6666666667%;
}
.s9 {
width: 75%;
}
.s10 {
width: 83.3333333333%;
}
.s11 {
width: 91.6666666667%;
}
.s12 {
width: 100%;
}
@media only screen and (min-width: 601px) {
.sm0{
width: 0%;
}
.sm1 {
width: 8.3333333333%;
}
.sm2 {
width: 16.6666666667%;
}
.sm3 {
width: 25%;
}
.sm4 {
width: 33.3333333333%;
}
.sm5 {
width: 41.6666666667%;
}
.sm6 {
width: 50%;
}
.sm7 {
width: 58.3333333333%;
}
.sm8 {
width: 66.6666666667%;
}
.sm9 {
width: 75%;
}
.sm10 {
width: 83.3333333333%;
}
.sm11 {
width: 91.6666666667%;
}
.sm12 {
width: 100%;
}
}
@media only screen and (min-width: 701px) {
.m0{
width: 0%;
}
.m1 {
width: 8.3333333333%;
}
.m2 {
width: 16.6666666667%;
}
.m3 {
width: 25%;
}
.m4 {
width: 33.3333333333%;
}
.m5 {
width: 41.6666666667%;
}
.m6 {
width: 50%;
}
.m7 {
width: 58.3333333333%;
}
.m8 {
width: 66.6666666667%;
}
.m9 {
width: 75%;
}
.m10 {
width: 83.3333333333%;
}
.m11 {
width: 91.6666666667%;
}
.m12 {
width: 100%;
}
}
@media only screen and (min-width: 801px) {
.ml0{
width: 0%;
}
.ml1 {
width: 8.3333333333%;
}
.ml2 {
width: 16.6666666667%;
}
.ml3 {
width: 25%;
}
.ml4 {
width: 33.3333333333%;
}
.ml5 {
width: 41.6666666667%;
}
.ml6 {
width: 50%;
}
.ml7 {
width: 58.3333333333%;
}
.ml8 {
width: 66.6666666667%;
}
.ml9 {
width: 75%;
}
.ml10 {
width: 83.3333333333%;
}
.ml11 {
width: 91.6666666667%;
}
.ml12 {
width: 100%;
}
}
@media only screen and (min-width: 993px) {
.l0{
width: 0%;
}
.l1 {
width: 8.3333333333%;
}
.l2 {
width: 16.6666666667%;
}
.l3 {
width: 25%;
}
.l4 {
width: 33.3333333333%;
}
.l5 {
width: 41.6666666667%;
}
.l6 {
width: 50%;
}
.l7 {
width: 58.3333333333%;
}
.l8 {
width: 66.6666666667%;
}
.l9 {
width: 75%;
}
.l10 {
width: 83.3333333333%;
}
.l11 {
width: 91.6666666667%;
}
.l12 {
width: 100%;
}
}
@media only screen and (min-width: 1201px) {
.xl0{
width: 0;
}
.xl1 {
width: 8.3333333333%;
}
.xl2 {
width: 16.6666666667%;
}
.xl3 {
width: 25%;
}
.xl4 {
width: 33.3333333333%;
}
.xl5 {
width: 41.6666666667%;
}
.xl6 {
width: 50%;
}
.xl7 {
width: 58.3333333333%;
}
.xl8 {
width: 66.6666666667%;
}
.xl9 {
width: 75%;
}
.xl10 {
width: 83.3333333333%;
}
.xl11 {
width: 91.6666666667%;
}
.xl12 {
width: 100%;
}
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 3.1 Farben
*
* Hier werden verschiedene Farben definiert
*
*************************************************************************************************************************************************************************************************/
/* #region Farben */
.inactive{
background-color: #f3716d;
}
.sgfsultradarkblue-text {
color:#002D67;
}
.sgfsdarkblue-text {
color: #454F69!important;
}
.sgfsdarkblue {
background-color: #454F69!important;
}
.sgfsblue-text {
color: #7789B5!important;
}
.sgfsblue {
background-color: #7789B5!important;
}
.sgfsdarkbrown-text {
color: #B98D30!important;
}
.sgfsdarkbrown {
background-color: #B98D30!important;
}
.sgfsbrown-text {
color: #D1B149!important;
}
.sgfsbrown {
background-color: #D1B149!important;
}
.sgfsred-text {
color:#692C30!important;
}
.sgfsred {
background-color:#692C30!important;
}
.sgfsgreen-text {
color:#003D00!important;
}
.sgfsgreen {
background-color:#003D00!important;
}
.sgfsgrey {
background-color:#777777!important;
}
.sgfsgrey-text {
color:#777777!important;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 4.1 Header
*
* Hier wird die Header Navigation grafisch formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Header */
#headernavigation .logo-container{
height: 100%;
display:inline-flex;
align-items: center;
}
#headernavigation .logo-container img{
height: 80%;
width: auto;
}
#headernavigation .statusbadge {
width: 15px;
height: 15px;
display: block;
position: relative;
top: -52px;
left: 21px;
border-radius: 50%;
}
#headernavigation ul.sidenav li a {
font-size: 20px;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 4.2 Footer
*
* Hier wird die Footer Navigation grafisch formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Footer */
.page-footer .footer-title{
border-bottom: 1px white solid;
padding-bottom: 10px;
}
.page-footer .footer-copyright{
background-color: rgba(51,51,51,0.3);
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 4.3 Searchbar
*
* Hier wird die Suchbar formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Serchbar */
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 5.1 Forms
*
* Hier werden Fomularfelder formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Forms */
/* #region Allgemein */
/* #endregion */
/* #region Allgemeine Materialize Override Styles */
/* label focus color */
.input-field input[type=text]:focus + label {
color: #D09B2B !important;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #002D67 !important;
box-shadow: 0 1px 0 0 #002D67 !important;
}
/* label focus color */
.input-field input[type=password]:focus + label {
color: #D09B2B !important;
}
/* label underline focus color */
.input-field input[type=password]:focus {
border-bottom: 1px solid #002D67 !important;
box-shadow: 0 1px 0 0 #002D67 !important;
}
/* label focus color */
.input-field input[type=number]:focus + label {
color: #D09B2B !important;
}
/* Hide Up and Down Buttons */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* label underline focus color */
.input-field input[type=number]:focus {
border-bottom: 1px solid #002D67 !important;
box-shadow: 0 1px 0 0 #002D67 !important;
}
/* label focus color */
.input-field textarea:focus + label {
color: #D09B2B !important;
}
/* label underline focus color */
.input-field textarea:focus {
border-bottom: 1px solid #002D67 !important;
box-shadow: 0 1px 0 0 #002D67 !important;
}
.input:focus{
border-bottom: 1px solid #002D67 !important;
box-shadow: 0 1px 0 0 #002D67 !important;
}
.input-field .prefix.active{
color: #D09B2B !important;
fill: #D09B2B !important;
}
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #002D67;
-webkit-box-shadow: 0 1px 0 0 #002D67;
box-shadow: 0 1px 0 0 #002D67;
}
.chips.focus{
border-bottom: 1px solid #002D67 !important;
box-shadow: 0 1px 0 0 #002D67 !important;
}
.switch label input[type=checkbox]:checked+.lever {
background-color: #29587F;
}
.switch label input[type=checkbox]:checked+.lever:after {
background-color: #002D67;
}
.switch label input[type=checkbox][disabled]+.lever:after, .switch label input[type=checkbox][disabled]:checked+.lever:after {
background-color: grey;
}
[type="checkbox"]:checked+label:before {
border-right: 2px solid #D09B2B;
border-bottom: 2px solid #D09B2B;
}
/*Select*/
.select-wrapper .caret {
height: auto;
width: auto;
}
/*Date Time Picker */
.picker__date-display {
background-color: #454F69;
color: #fff;
}
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
border-radius: 50%;
background-color: #D09B2B;
color: #ffffff;
}
.picker__close, .picker__today, .picker__clear {
color: #454F69;
}
.picker__clear {
color: #f44336;
}
/*Time Picker */
.clockpicker-canvas-bearing{
fill: #D09B2B;
}
.clockpicker-canvas-bg{
fill: #D09B2B;
}
.clockpicker-canvas line{
stroke: #D09B2B;
}
.clockpicker-tick.active, .clockpicker-tick:hover{
background-color: rgba(69,79,105,0.25);
}
.dropdown-content li>a, .dropdown-content li>span {
color: #454F69;;
}
[type="checkbox"]:checked+span:not(.lever):before {
border-right: 2px solid #D09B2B;
border-bottom: 2px solid #D09B2B;
}
[type="checkbox"]:checked:disabled+span:not(.lever):before {
border-right: 2px solid #454F69;
border-bottom: 2px solid #454F69;
}
[type="checkbox"].filled-in:checked+span:not(.lever):after {
border: 2px solid #D09B2B;
background-color: #D09B2B;
}
input[type=time]:not(.browser-default):focus:not([readonly])+label {
color: #D09B2B;
}
.datepicker-date-display{
background-color: #454F69;
}
.datepicker-table td.is-today{
color: #D09B2B;
}
.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done{
color: #D09B2B;
}
.datepicker-table td.is-selected{
background-color: #454F69;
}
.timepicker-digital-display {
background-color: #454F69;
}
.timepicker-close {
color: #D09B2B;
}
.timepicker-canvas line {
stroke: #D09B2B;
}
.timepicker-canvas-bg {
fill: #D09B2B;
}
.timepicker-canvas-bearing {
stroke: none;
fill: #D09B2B;
}
.timepicker-tick.active, .timepicker-tick:hover {
background-color: rgba(208,155,43,0.25);
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after{
background-color: #D09B2B;
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after{
border: 2px solid #D09B2B;
}
/* Fileupload */
.file-field .file-path-wrapper {
padding-left: 0;
}
.file-button-wrapper {
display: flex;
align-items: center;
margin-left: 10px;
}
.file-path-wrapper>input.valid+label,
.file-path-wrapper>input+label.active{
position: absolute;
top: -26px;
font-size: .8rem;
}
.file-path-wrapper>label {
color: #9e9e9e;
position: absolute;
top: 0;
left: 0;
font-size: 1rem;
cursor: text;
-webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
transition: color .2s ease-out, -webkit-transform .2s ease-out;
transition: transform .2s ease-out, color .2s ease-out;
transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
text-align: initial;
-webkit-transform: translateY(12px);
transform: translateY(12px);
}
/* #endregion */
/* #region Bildupload */
.sgfs-imageupload label{
cursor:pointer;
padding: 140px 20px 20px 20px;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
max-width: 180px;
max-height: 180px;
width:100%;
height: 100%;
object-fit: contain;
position:relative;
}
.sgfs-imageupload .imagepreview{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
}
.sgfs-imageupload label span{
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
background-color: #DDDDDD;
border-radius: 50%;
color: black;
}
.sgfs-imageupload label img{
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: contain;
}
/* #endregion */
/* Colorpicker */
.colorpicker input[type=color] {
visibility: hidden;
width: 0px;
}
/* #region Switchcard */
.switchcard .card{
margin-left:3rem;
}
.switchcard .titelcontainer{
margin-left: 3rem;
width: calc(100% - 3rem);
border-bottom: 1px solid #9e9e9e;
}
.switchcard .titelcontainer span{
display:block;
height: 3rem;
display:flex;
align-items: center;
color: #9e9e9e;
}
.switchcard .switch{
flex: 1;
display: flex;
}
.switchcard .switch label{
display:flex;
align-items: center;
}
.switchcard .switch label .lever{
flex-shrink: 0;
}
/* #endregion */
/* #region Chips */
.input-field .chips.focus + label,
.input-field .chips.active + label {
-webkit-transform: translateY(-14px) scale(0.8);
transform: translateY(-14px) scale(0.8);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
color: #D09B2B !important;
}
.chips.input-field{
margin-top:0;
margin-bottom:0;
}
.chips.input-field input[type=text],
.chips.input-field input[type=text]:focus{
border-bottom:none!important;
box-shadow: none!important;
}
.chips .chip:focus {
background-color: #D09B2B;
}
/* #endregion */
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 5.2 Tabellen
*
* Hier werden Tabellen formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Tabellen */
table .tabellenbild{
max-width: 50px;
max-height: 50px;
width: 100%;
height: 100%;
object-fit: contain;
border-radius:50%;
}
#dateientabelle tr td:nth-child(2):hover{
cursor:pointer;
text-decoration: underline;
color: #D09B2B;
}
#dateientabelle tr td[contenteditable="true"]:hover{
text-decoration: none;
color:black;
cursor:initial;
}
/* Tabelsorter Layout */
.tablesorter-materialize {
width: 100%;
}
.tablesorter-materialize thead th,
.tablesorter-materialize thead td,
.tablesorter-materialize tfoot th,
.tablesorter-materialize tfoot td {
font: 14px/20px Arial, Sans-serif;
font-weight: bold;
padding: 4px;
margin: 0 0 18px;
}
.tablesorter-materialize .tablesorter-header {
cursor: pointer;
}
.tablesorter-materialize .sorter-false {
cursor: default;
}
.tablesorter-materialize .tablesorter-header-inner {
position: relative;
padding: 4px 18px 4px 4px;
}
/* sort icons */
.tablesorter-materialize thead .tablesorter-header {
background-repeat: no-repeat;
background-position: center right;
padding: 4px 18px 4px 4px;
white-space: normal;
cursor: pointer;
}
/* black unsorted icon */
.tablesorter-materialize thead .tablesorter-headerUnSorted {
/* */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgOCAxIDggOCAwek0xNSA5IDEgOSA4IDE2eiIgZmlsbD0iIzIyMiIvPjwvc3ZnPg==);
}
/* black asc icon */
.tablesorter-materialize thead .tablesorter-headerAsc {
/* */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgMTEgMSAxMSA4IDN6IiBmaWxsPSIjMjIyIi8+PC9zdmc+);
}
/* black desc icon */
.tablesorter-materialize thead .tablesorter-headerDesc {
/* */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgNiAxIDYgOCAxM3oiIGZpbGw9IiMyMjIiLz48L3N2Zz4=);
}
/* white unsorted icon */
.tablesorter-materialize-dark thead .tablesorter-headerUnSorted {
/* */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgOCAxIDggOCAwek0xNSA5IDEgOSA4IDE2eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
}
/* white asc icon */
.tablesorter-materialize-dark thead .tablesorter-headerAsc {
/* */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgMTEgMSAxMSA4IDN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
/* white desc icon */
.tablesorter-materialize-dark thead .tablesorter-headerDesc {
/* */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgNiAxIDYgOCAxM3oiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);
}
/* since materialize (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
.tablesorter-materialize > tbody > tr.odd > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
background-color: #f9f9f9;
}
.tablesorter-materialize > tbody > tr.hover > td,
.tablesorter-materialize > tbody > tr.odd:hover > td,
.tablesorter-materialize > tbody > tr.even:hover > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
background-color: #f5f5f5;
}
.tablesorter-materialize > tbody > tr.even > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
background-color: #fff;
}
/* processing icon */
.tablesorter-materialize .tablesorter-processing {
background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* caption */
.tablesorter-materialize > .caption {
background-color: #fff;
}
/* filter widget */
.tablesorter-materialize .tablesorter-filter-row input.tablesorter-filter,
.tablesorter-materialize .tablesorter-filter-row select.tablesorter-filter {
width: 98%;
margin: 0;
padding: 4px 6px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: height 0.1s ease;
-moz-transition: height 0.1s ease;
-o-transition: height 0.1s ease;
transition: height 0.1s ease;
}
.tablesorter-materialize .tablesorter-filter-row .tablesorter-filter.disabled {
background-color: #eee;
color: #555;
cursor: not-allowed;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
box-sizing: border-box;
transition: height 0.1s ease;
}
.tablesorter-materialize .tablesorter-filter-row {
background-color: #efefef;
}
.tablesorter-materialize .tablesorter-filter-row td {
background-color: #efefef;
line-height: normal;
text-align: center;
padding: 4px 6px;
vertical-align: middle;
-webkit-transition: line-height 0.1s ease;
-moz-transition: line-height 0.1s ease;
-o-transition: line-height 0.1s ease;
transition: line-height 0.1s ease;
}
/* hidden filter row */
.tablesorter-materialize .tablesorter-filter-row.hideme td {
padding: 2px; /* change this to modify the thickness of the closed border row */
margin: 0;
line-height: 0;
}
.tablesorter-materialize .tablesorter-filter-row.hideme * {
height: 1px;
min-height: 0;
border: 0;
padding: 0;
margin: 0;
/* don't use visibility: hidden because it disables tabbing */
opacity: 0;
filter: alpha(opacity=0);
}
/* rows hidden by filtering (needed for child rows) */
.tablesorter .filtered {
display: none;
}
/* pager plugin */
.tablesorter-materialize .tablesorter-pager select {
padding: 4px 6px;
display: inline-block;
width: auto;
}
.tablesorter-materialize .tablesorter-pager .pagedisplay {
border: 0;
}
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
text-align: center;
cursor: pointer;
background-color: #e6bf99;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 5.3 Preloader
*
* Hier wird der Preloader formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Preloader */
.preloader-wrapper{
display:inline-block!important;
}
.preloader-wrapper .spinner-layer{
border-color: #D09B2B;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 5.4 Buttons
*
* Hier werden die Buttons formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Buttons */
.btn.sgfsdarkblue:hover {
background-color: #D09B2B;
}
.btn.sgfsdarkbrown:hover{
background-color: #454F69;
}
.btn.sgfsred:hover{
background-color: #D09B2B;
}
.inlayiconbutton {
font-size: 30px;
color: darkgrey;
padding: 5px 0 2px 0;
}
.inlayiconbutton:hover {
color: black;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 5.5 Contxtmenu
*
* Hier werden die Contextmenus formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Contxtmenu */
.contextmenu ul.contextmenu-content{
position: absolute;
top: 0;
left: 0;
background-color: #fff;
margin: 0;
display: none;
min-width: 100px;
overflow-y: auto;
z-index: 9999;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
}
.contextmenu ul.contextmenu-content.open{
display:block;
}
.contextmenu ul.contextmenu-content li:hover{
background-color: #eee;
cursor:pointer;
}
.contextmenu ul.contextmenu-content li a{
min-height: 0;
padding: 4px 16px 4px 16px;
display: flex;
flex-direction: row;
}
.contextmenu ul.contextmenu-content li a{
color: black;
padding: 3px 5px 3px 0;
line-height: 1.5rem;
}
/* #region Allgemeine Context menus */
.contextmenu ul.contextmenu-content li .iconkasten {
width: 20px;
height: 20px;
margin-right: 10px;
margin-left: 10px;
}
/* #region Farbencontextmenu */
.contextmenu.contextmenu-colors ul.contextmenu-content{
width: 400px;
}
.contextmenu.contextmenu-colors ul.contextmenu-content li .farbenkasten {
width: 20px;
height: 20px;
border: 1px solid rgba(0,0,0,0.14);
margin-right: 10px;
margin-left: 10px;
}
/* #endregion */
/* #endregion */
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 6.1 Panel
*
* Hier wird die Panel formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Panel */
.sgfskarte{
height: 160px;
display: flex;
justify-content: center;
align-items: center;
cursor:pointer;
}
.sgfskarte.sgfsgrey {
cursor:initial;
}
.sgfskarte.sgfsdarkblue:hover{
opacity: 0.9;
transform: scale(1.05);
}
.sgfskarte:not(.sgfsgrey):hover{
opacity: 0.9;
transform: scale(1.05);
}
.sgfskarte .card-content{
width:100%;
}
.sgfskarte.grosserTitel .card-content .card-title{
font-weight: bold;
font-size:40px;
}
.sgfskarte i{
display: block;
font-size: 40px;
margin: 0 auto 10px auto;
}
.sgfskarteMitAbgerundetemBild{
width: 100%;
margin: 10px;
}
.sgfskarteMitAbgerundetemBild .card-image{
width: 80px;
border-radius: 50%;
margin-bottom: 10px;
}
/* #endregion */
/* #region Zeiterfassungskarte */
.zeiterfassungskarte{
padding: 30px 60px 60px 60px;
}
.zeiterfassungskarte tfoot{
border-top: 1px solid #d0d0d0;
border-bottom: 3px double #d0d0d0;
}
/* #endregion */
/* #region Zeiterfassungskarte */
.zeitsaldokarte{
padding: 20px 30px 0 30px;
}
.zeitsaldokarte tr{
border-bottom: 0;
}
.zeitsaldokarte td{
padding:2px;
}
.zeitsaldokarte tfoot{
line-height: 35px;
border-top: 1px solid #d0d0d0;
border-bottom: 3px double #d0d0d0;
}
/* #endregion */
/* #region Informationskarte */
.informationspanel {
display:flex;
padding: 10px;
}
.informationspanel .card{
margin:0;
}
.informationspanel .card-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.informationspanel .card-titel{
display: flex;
justify-content: space-between;
}
.informationspanel .card-titel h3{
font-weight: 300;
font-size:24px;
margin-top:5px;
}
.informationspanel .card-title a{
font-size: 15px;
}
.informationspanel .card-inhalt{
height:100%;
}
.informationspanel .card-inhalt>img{
max-height: 150px;
width: auto;
margin: 0 auto;
display: flex;
}
.informationspanel .panelicon{
font-size: 80px;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.informationspanel .label{
font-size: 12px;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 6.2 Texteingabe- und Selectpanel
*
* Hier wird das Texteingabepanel und das Selectpanel formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Texteingabepanel */
.sgfstexteingabepanel{
height: 160px;
display: flex;
justify-content: center;
align-items: center;
cursor:pointer;
}
/* #endregion */
/* #region Selectpanel */
.sgfsselectpanel{
height: 120px;
display: flex;
justify-content: center;
align-items: center;
cursor:pointer;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 6.2 Breadcrumb
*
* Hier wird der Breadcrumb formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Breadcrumb */
.sgfsbreadcrumb{
font-size: 14px;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 6.3 Tabs
*
* Hier werden die Tabs formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Tabs */
.tabs .indicator{
background-color: #D09B2B;
}
.tabs .tab a:focus, .tabs .tab a:focus.active {
background-color:transparent;/* #F6EBD5;*/
}
.tabs::-webkit-scrollbar {
height:3px;
}
/* Track */
.tabs::-webkit-scrollbar-track {
background: white;
}
/* Handle */
.tabs::-webkit-scrollbar-thumb {
background: #D09B2B;
}
/* Handle on hover */
.tabs::-webkit-scrollbar-thumb:hover {
background: #D09B2B;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 6.4 Textblock mit Bild und Icon
*
* Hier wird der Textblock mit Bild und Icon formatiert
*
*************************************************************************************************************************************************************************************************/
/* #region Textblock mit Bild und Icon */
.textblockmitbildundicon {
display:flex;
margin-top: 1rem;
margin-bottom: 1rem;
align-items: flex-start;
}
.textblockmitbildundicon i{
font-size: 2rem;
margin-right: 20px;
width: 30px;
}
.textblockmitbildundicon label{
top: -8px;
left: 2px!important;
position: relative;
}
.textblockmitbildundicon>div{
position:relative;
min-height: 30px;
width: 100%;
}
.textblockmitbildundicon>div>span{
font-size: 12px;
color: #9e9e9e;
position:absolute;
top: -20px;
}
.textblockmitbildundicon>div>p,
.textblockmitbildundicon>div>div{
padding-top: 7px;
}
.textblockmitbildundicon ul{
list-style-type: disc;
padding-left: 20px;
}
.textblockmitbildundicon ul li{
list-style-type: inherit;
}
.textblockmitbildundicon .sgfs-froala-editor-container .collapsible .collapsible-body{
display: block!important;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 6.4 Froala Editor
*
* Hier wird der Editor von Froala für unsere Bedürfnisse gestylt
*
*************************************************************************************************************************************************************************************************/
/* #region Textblock mit Bild und Icon */
.sgfs-froala-editor:not(textarea), .sgfs-froala-editor-container{
padding: 10px;
border: lightgray solid 1px;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
}
textarea.sgfs-froala-editor{
border:none;
}
.sgfs-froala-editor-container.fix .fr-wrapper,
.sgfs-froala-editor-container.fix .fr-toolbar.fr-top,
.sgfs-froala-editor-container.fix .fr-second-toolbar{
border:none!important;
}
.sgfs-froala-editor svg, .sgfs-froala-editor-container svg{
height: auto;
width: auto;
}
.sgfs-froala-editor ul, .sgfs-froala-editor-container ul{
list-style-type: disc;
padding-left: 20px;
}
.sgfs-froala-editor ul li, .sgfs-froala-editor-container ul li{
list-style-type: inherit;
}
/* #endregion */
/**************************************************************************************************************************************************************************************************
* 6.5 Bewertungspanel
*
* Hier wird der Editor von Froala für unsere Bedürfnisse gestylt
*
*************************************************************************************************************************************************************************************************/
/* #region Bewertungspanel */
.sgfsbewertungspaneluebersicht i{
font-size: 40px;
}
.sgfsbewertungspaneluebersicht .sgfsbewertungssterne.klickbar i{
cursor: pointer;
}
.sgfsbewertungspanel{
width: 100%;
}
.sgfsbewertungspanel img{
width: 40px;
height: 40px;
border-radius: 50%;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.6 Boxen
* Hier werden alle css Befehle für alle Boxen aufgeführt
*
***************************************************************************************************************************************************************************************/
/* #region Infobox */
.infobox{
margin: 20px 0;
}
.infobox i{
font-size: 50px;
}
.infobox h3{
font-size: 25px;
font-weight: bold;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.7 Startseite
* Hier werden alle css Befehle für die Startseite aufgeführt
*
***************************************************************************************************************************************************************************************/
/* #region Startseite */
.startseite{
width: 100%;
flex: 1;
display:flex;
flex-direction:column;
justify-content: center;
}
.startseite img{
display:block;
margin: 0 auto;
max-width: 200px;
}
.startseite a{
display: block;
font-family: Roboto-Bold, sans-serif;
margin: 0 auto;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.8 Dropzone
* Hier werden alle css Befehle für die Dropzone aufgeführt
*
***************************************************************************************************************************************************************************************/
/* #region Startseite */
.sgfs-dropzone{
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed #D09B2B!important;
border-radius: 5px!important;
background: white!important;
}
.sgfs-dropzone .dz-message{
color: #D09B2B!important;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.9 Mitarbeiterseite
* Hier werden alle css Befehle für die Mitarbeiterseite aufgeführt
*
***************************************************************************************************************************************************************************************/
/* #region Infobox */
.personalienfoto{
padding: 20px;
max-height: 200px;
max-width: 200px;
border-radius: 50%;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.8 NoUISlider
* Hier werden alle css Befehle für den NoUISlider definiert
*
***************************************************************************************************************************************************************************************/
/* #region NoUISlider */
.noUi-connect {
background: #B98D30;
}
.noUi-horizontal .noUi-handle{
width: 14px;
right: -12px;
}
.noUi-handle:after, .noUi-handle:before{
left: 8px;
}
.noUi-handle:after{
left: 4px;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.9 Schichtplan
* Hier werden alle css Befehle für den Schichtplan definiert
*
***************************************************************************************************************************************************************************************/
/* #region Schichtplaner */
/* #region Schichtplaner */
.schichtplan {
width: 100%;
margin-top: 30px;
}
@media only screen and (max-width: 1400px){
.schichtplan .card{
overflow-x: scroll;
}
}
.schichtplan .sp_schichtplanungswoche{
overflow:hidden;
min-width: 940px;
}
.schichtplan .sp_rowheader{
overflow:hidden;
float:left;
}
.schichtplan .sp_column_employee:first-child{
border-top: solid 1px rgba(0,0,0,0.14);
}
.schichtplan .sp_column_employee{
height: 30px;
border-left: solid 1px rgba(0,0,0,0.14);
border-right: solid 1px rgba(0,0,0,0.14);
border-bottom: solid 1px rgba(0,0,0,0.14);
}
.schichtplan .sp_column_employee:nth-child(3){
border-top: solid 1px black;
}
.schichtplan .sp_column_employee p{
margin: 0;
padding: 5px 10px 5px 10px;
}
.schichtplan .sp_columns{
overflow:hidden;
}
.schichtplan .sp_column{
width:20%;
float:left;
padding:0;
}
.schichtplan .sp_column_header{
height: 30px;
border-top: solid 1px rgba(0,0,0,0.14);
border-left: solid 1px black;
border-bottom: solid 1px rgba(0,0,0,0.14);
border-right: solid 1px rgba(0,0,0,0.14);
display: flex;
justify-content: center;
align-items: center;
}
.schichtplan .sp_column_header p{
margin: 0;
text-align:center;
}
.schichtplan .sp_column_time{
overflow:hidden;
border-bottom: 1px solid black;
}
.schichtplan .sp_column_content{
float:left;
width:20%;
height: 30px;
border-right: solid 1px rgba(0,0,0,0.14);
border-bottom: solid 1px rgba(0,0,0,0.14);
text-align:center;
}
.schichtplan .sp_column_content:nth-child(5n+1){
border-left: solid 1px black;
}
.schichtplan .sp_column_content p{
margin: 0;
padding: 5px 0 5px 0;
}
.schichtplan .singleshift.selected{
border: 1px solid #D09B2B;
}
/* #endregion */
/* #region Schichtplaner Farben */
.farbkasten {
width: 20px;
height: 20px;
border: 1px solid rgba(0,0,0,0.14);
margin-right: 10px;
margin-left: 10px;
}
/* #endregion */
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.10 Wiki
* Hier werden alle css Befehle für den Schichtplan definiert
*
***************************************************************************************************************************************************************************************/
/* #region Wiki */
/* Wiki-Titel */
.wikititelcontainer h1 {
color: #002D67;
font-size: 3rem;
font-weight: bold;
}
/* Wikiinhalt */
.wikiinhaltcontainer{
font-size: 17px;
margin-bottom: 50px;
}
.wikiinhaltcontainer a {
color: #039be5 !important;
}
.wikiinhaltcontainer ol {
padding-left: 20px;
margin: 0;
}
.wikiinhaltcontainer ul{
padding-left: 20px !important;
list-style-type: disc;
margin: 0;
}
.wikiinhaltcontainer ul li{
list-style-type: disc !important;
}
.wikiinhaltcontainer ul.collapsible {
list-style-type: none !important;
padding: 0 !important;
margin-bottom: 50px;
}
.wikiinhaltcontainer ul.collapsible li{
list-style-type: none !important;
}
.wikiinhaltcontainer pre{
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
padding: 0.5rem;
}
.wikiinhaltcontainer p {
margin: 10px 0 10px 0;
font-weight: 300;
}
.wikiinhaltcontainer h1 {
color: #002D67;
font-size: 3rem;
font-weight: bold;
}
.wikiinhaltcontainer h2{
font-size: 2rem;
font-weight: bold;
}
.wikiinhaltcontainer h3 {
margin-top: 1.5px;
font-size: 2rem;
}
.wikiinhaltcontainer h4 {
font-size: 1rem;
}
.wikiinhaltcontainer table{
margin: 0 auto 0 auto;
border-bottom: 1px solid #d0d0d0;
width: 100%!important;
}
.wikiinhaltcontainer tr td:nth-child(2){
font-weight: normal;
}
.wikiinhaltcontainer tr:first-child {
border-bottom: 1px solid #d0d0d0;
padding: 15px 5px;
font-weight: bold;
}
.wikiinhaltcontainer table.highlight>tbody>tr:first-child:hover {
background-color: transparent;
}
.wikiinhaltcontainer .tabellentitel{
background-color: #d0d0d0;
text-align: center;
padding: 0px;
font-weight:bold;
margin: 30px 0 0 0;
}
.wikiinhaltcontainer td p{
margin: 0;
}
.wikiinhaltcontainer .collapsible-header{
font-size: 1.5rem;
}
.wikiinhaltcontainer .collapsible-body{
margin: 0;
padding: 15px 1rem 1rem 1rem;
}
.wikiinhaltcontainer .collapsible-body p{
margin: 0;
padding: 0 0 1rem 0;
}
.wikiinhaltcontainer .collapsible .collapsible-body ul{
list-style-type: circle;
padding: 0 0 2rem 15px;
}
.wikiinhaltcontainer .collapsible .collapsible-body li{
list-style-type: circle;
}
.wikiinhaltcontainer img {
width: 100%;
display: block;
height: auto;
max-width: 600px;
margin: 0 auto 0 auto;
}
.wikiinhaltcontainer .beispielbox{
padding: 10px 20px;
background-color: #D09B2B;
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}
.wikiinhaltcontainer .beispielbox h6{
margin-top: 20px;
color: white;
font-size: 1.5rem;
}
.wikiinhaltcontainer .wichtigbox{
color: white;
padding: 1px 20px;
background-color: #BF4F3A;
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}
.wikiinhaltcontainer .wichtigbox h6{
margin-top: 20px;
color: white;
font-size: 1.5rem;
}
.wikiinhaltcontainer .definitionsbox{
color: white;
padding: 1px 20px;
background-color: #13B271;
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}
.wikiinhaltcontainer .definitionsbox h6{
margin-top: 20px;
color: white;
font-size: 1.5rem;
}
.wikiinhaltcontainer .merkebox{
color: white;
padding: 1px 20px;
background-color: #002D67;
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}
.wikiinhaltcontainer .merkebox h6{
margin-top: 20px;
color: white;
font-size: 1.5rem;
}
.wikiinhaltcontainer .codebox {
background-color: rgba(0,0,0,.05);
border-radius: 3px;
padding: 1rem;
margin: 1rem 0;
}
.wikiinhaltcontainer .zweispaltig-normal td{
padding: 0 0;
}
.wikiinhaltcontainer .zweispaltig-normal td p{
margin: 0;
}
.wikiinhaltcontainer .rahmenlos{
margin-top: 5px;
border-bottom: none;
}
.wikiinhaltcontainer .rahmenlos tr:first-child {
font-weight: normal;
border-bottom: none;
}
.wikiinhaltcontainer .rahmenlinien-unten tr{
border-bottom: 1px solid #d0d0d0;
}
.wikiinhaltcontainer .kreuztabelle tr td:first-child{
border-right: 1px solid #d0d0d0;
}
.wikiinhaltcontainer .kreuztabelle tr{
border-bottom: 1px solid #d0d0d0;
}
.wikiinhaltcontainer .kreuztabelle td{
padding: 10px;
}
.wikiinhaltcontainer .allerahmenlinien tr{
border-bottom: 1px solid #d0d0d0;
}
.wikiinhaltcontainer .allerahmenlinien td{
border-right: 1px solid #d0d0d0;
}
.wikiinhaltcontainer .allerahmenlinien td:last-child{
border-right: none;
}
.bilanztabelle tr td:first-child{
border-right: 1px solid #d0d0d0;
}
.wikiinhaltcontainer table.ohne_titel tr:first-child {
font-weight: normal;
border-top: 1px solid #d0d0d0;
}
/* Wikiknoten */
.wikiknotencontainer h2 {
line-height: 27px;
margin: 0;
font-weight: 600;
padding-bottom: 0;
color: #D09B2B;
font-size: 18px;
}
/* Wiki-Struktur */
/* Remove default bullets */
ul, #wikistruktur {
list-style-type: none;
}
/* Remove margins and padding from the parent ul */
#wikistruktur {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
.wikistruktureintrag li {
margin-left: 15px;
}
.wikistruktureintrag ul {
margin-left: 15px;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.11 Passwörter
* Hier werden alle css Befehle für die Passwortzentrale definiert
*
***************************************************************************************************************************************************************************************/
/* #region Paswoerter */
.passwortanzeigefeld {
cursor: pointer;
color: #B98D30 !important;
}
.passwortanzeigefeld :hover {
cursor: pointer;
color: #002D67 !important;
}
/* #endregion */
/**************************************************************************************************************************************************************************************
* 6.12 Modals
* Hier werden alle css Befehle für die Modals definiert
*
***************************************************************************************************************************************************************************************/
/* #region Modals */
/* #region Projektzeiteintragsmodal */
#modal-projektzeiteintrag{
overflow: initial;
}
/* #endregion */
/* #endregion */
@keyframes loading {
0% {
cy: 10;
}
25% {
cy: 3;
}
50% {
cy: 10;
}
}
canvas {
height: 100vh;
pointer-events: none;
width: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
#button {
margin-top:32px;
margin-left:190px;
background: none;
border: none;
color: #f4f7ff;
cursor: pointer;
font-family: "Quicksand", sans-serif;
font-size: 14px;
font-weight: 500;
height: 40px;
outline: none;
overflow: hidden;
padding: 0 10px;
transform: translate(-50%, -50%);
width: 190px;
-webkit-tap-highlight-color: transparent;
z-index: 1;
}
#button::before {
background: #454F69;
border-radius: 50px;
box-shadow: 0 2px 5px rgba(27, 31, 41, 0.4) inset;
content: "";
display: block;
height: 100%;
margin: 0 auto;
position: relative;
transition: width 0.2s cubic-bezier(0.39, 1.86, 0.64, 1) 0.3s;
width: 100%;
}
#button.ready .submitMessage svg {
opacity: 1;
top: 1px;
transition: top 0.4s ease 600ms, opacity 0.3s linear 600ms;
}
#button.ready .submitMessage .button-text span {
top: 0;
opacity: 1;
transition: all 0.2s ease calc(var(--dr) + 600ms);
}
#button.loading::before {
transition: width 0.3s ease;
width: 80%;
}
#button.loading .loadingMessage {
opacity: 1;
}
#button.loading .loadingCircle {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: loading;
}
#button.complete .submitMessage svg {
top: -30px;
transition: none;
}
#button.complete .submitMessage .button-text span {
top: -8px;
transition: none;
}
#button.complete .loadingMessage {
top: 80px;
}
#button.complete .successMessage .button-text span {
left: 0;
opacity: 1;
transition: all 0.2s ease calc(var(--d) + 1000ms);
}
#button.complete .successMessage svg {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.3s ease-in-out 1.4s;
}
.button-text span {
opacity: 0;
position: relative;
}
.message {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.message svg {
display: inline-block;
fill: none;
margin-right: 5px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.submitMessage .button-text span {
top: 8px;
transition: all 0.2s ease var(--d);
}
.submitMessage svg {
color: #5c86ff;
margin-left: -1px;
opacity: 0;
position: relative;
top: 30px;
transition: top 0.4s ease, opacity 0.3s linear;
width: 14px;
}
.loadingMessage {
opacity: 0;
transition: opacity 0.3s linear 0.3s, top 0.4s cubic-bezier(0.22, 0, 0.41, -0.57);
}
.loadingMessage svg {
fill: #5c86ff;
margin: 0;
width: 22px;
}
.successMessage .button-text span {
left: 5px;
transition: all 0.2s ease var(--dr);
}
.successMessage svg {
color: #5cffa1;
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.3s ease-in-out;
width: 14px;
}
.loadingCircle:nth-child(2) {
animation-delay: 0.1s;
}
.loadingCircle:nth-child(3) {
animation-delay: 0.2s;
}
.memeArea{
display: block;
margin: 0 auto;
float: left;
width: 50%;
padding: 5px;
}
/**************************************************************************************************************************************************************************************
* 6.12 Lohnteablle
* Hier werden alle css Befehle für die Lohntabelle definiert
*
***************************************************************************************************************************************************************************************/
/* #region Paswoerter */
.lohntabelle{
width:100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
}
.lohntabelle .lohntabellenspalte{
display:flex;
flex-direction: column;
flex:1;
}
.lohntabelle .lohntabellenspalte .header {
display:flex;
border-bottom: 1px black solid;
align-items: flex-end;
padding: 10px;
height: 60px;
font-weight: bold;
}
.lohntabelle .lohntabellenspalte .entry {
justify-content: center;
align-items: center;
padding: 10px;
height: 40px;
text-align: left;
white-space: nowrap;
}
.lohntabelle .grundlohn{
background-color: #ABF587;
}
.lohntabelle .verantwortungslohn{
background-color: #ECF57A;
}
.lohntabelle .ausbildungslohn{
background-color: #F5C093;
}
.lohntabelle .weiterbildungslohn{
background-color: #F5A4F2;
}
.lohntabelle .internererfahrungslohn{
background-color: #CE9FF5;
}
.lohntabelle .externererfahrungslohn{
background-color: #B0E9F5;
}
.lohntabelle .marktzulage{
background-color: #ABF5DF;
}
/* #endregion */