You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
4.1 KiB
130 lines
4.1 KiB
/*Basics*/ |
|
div.columns { margin-top: 1px; } /*für Abstand zum oberen Seitenrand*/ |
|
|
|
body { /*für Seiteninhalt*/ |
|
display: flex; |
|
flex-flow: column; |
|
min-hight: 100vh; min-hight: -webkit-fill-available; |
|
margin: 0.1rem; } |
|
|
|
.title, .subtitle, .label, .subdir-button, .stb-button, .supplement, .navbar-item, .navbar-dropdown, .bottom-nav, .button, .breadcrumb, .legende, .dontprint, .panel-block, .panel-tabs { |
|
color: hsl(0, 0%, 21%); /*für Schrift in diversen Elementen*/ |
|
font-family: sans-serif; |
|
font-weight: normal; |
|
font-size: 0.9rem; } |
|
|
|
.breadcrumb.has-path-separator li + li::before { /*für Breadcumb-Separator*/ |
|
content: ">"; } |
|
|
|
.box, .card { /*Box für Pfad, Buttonleiste bzw. Menü-Kacheln; Card für Formulare, Ergebnistabellen*/ |
|
background: ; /*wird weiß dargestellt, wenn nix anderes festgelegt ist*/; |
|
box-shadow: none; } |
|
|
|
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { |
|
color: grey /*rgba(54, 54, 54, 0.3)*/; } |
|
|
|
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { |
|
color: grey /*(54, 54, 54, 0.3);*/; } |
|
|
|
/*NavPanel*/ |
|
.navpanel { |
|
position: static /* damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/ |
|
padding: 0; } |
|
|
|
.navpanel ul { /*für gesamtes NavPanel*/ |
|
display: flex; |
|
flex-flow: column; |
|
list-style: none; |
|
padding: 0; |
|
background: inherit; } |
|
|
|
.navpanel ul { /*zum Ausblenden gesamten NavPanels*/ |
|
display: none; } |
|
|
|
.navpanel a { /*für Nav-Element*/ |
|
display: flex; |
|
text-decoration: none; |
|
background: white; |
|
width: auto; |
|
padding: 0rem 0rem; /*für Innenraumplatz um Text ob/un + re/li*/ |
|
margin-left: 0rem; } /*für Außenabstand*/ |
|
|
|
.navpanel a:hover, .navpanel a:focus { /*für angetipptes Element*/ |
|
background: inherit; |
|
color: inherit; } |
|
|
|
.current a { background: inherit; color: black; } /*für current-Element*/ |
|
.active { background: inherit; color: black; } /*für panel-item-active"*/ |
|
|
|
.panel-block { |
|
display: flex; |
|
width: auto; |
|
margin-left: 5.0%; } |
|
|
|
.panel-tabs { /*für PanelTab-Zeile (= Funktionsfeldzeile)*/ |
|
display: flex; |
|
flex-flow: row nowrap; |
|
justify-content: space-evenly; |
|
margin-left: 0.5%; |
|
padding: 1rem 0rem 1rem 1.3rem; } /*für Padding: ob re un li*/ |
|
|
|
.panel-tabs a { /*für PanelTab-Element (= Funktionsfelde)*/ |
|
display: flex; |
|
flex-flow: row nowrap; |
|
/*padding: 0.3rem;*/ |
|
background-color: whitesmoke; } |
|
|
|
.panel-item { /*für rechtsbündige Icons*/ |
|
display: flex; |
|
flex: 1; } /*für gleichgroße Icons*/ |
|
|
|
.shownavpanel + ul { |
|
display: flex; |
|
flex-flow: column; |
|
max-height: 600rem; |
|
transition: 500ms; |
|
overflow: initial; } |
|
|
|
.shownavpanel.menubutton::before { /*für Close-Buttonanzeige*/ |
|
display: flex; |
|
content: url(../images/close.svg); |
|
width: 1.0rem; /*funkt, da menubutton=flex-container statt inlineBox (wg. Pseudoelent ::before/afer)*/ |
|
height: 1.0rem; } /*funkt, da menubutton=flex-container statt inlineBox (wg. Pseudoelent ::before/afer)*/ |
|
|
|
.menubutton { |
|
display: flex; |
|
background: inherit; |
|
padding: 0.3rem 0.5rem 0rem 0.8rem; /*für Padding: ob re un li*/ |
|
border: 0; |
|
margin: 0rem 0.8rem 0.8rem 0.8rem; } /*für Randabstand: ob re un li*/ |
|
|
|
.menubutton::before { /*für Burger-Buttonanzeige*/ |
|
display: flex; |
|
content: url(../images/burger.svg); |
|
width: 1rem; /*funkt, weil menubutton=flex-container statt inlineBox, wg. Pseudoelent ::before)*/ |
|
height: 1rem; } /*funkt, weil menubutton=flex-container statt inlineBox, wg. Pseudoelent ::before)*/ |
|
|
|
/*Top-, BottomNav*/ |
|
.navbar { |
|
display: flex; |
|
flex-flow: row wrap; } |
|
|
|
.navbar-end { |
|
display: flex; } |
|
|
|
.bottom-nav { /*für Bottomnav*/ |
|
display: flex; |
|
padding: 7px; |
|
height: 2em; |
|
flex-flow: row nowrap; |
|
justify-content: center; } |
|
|
|
.bottom-nav li { /*für Bottomnav-Liste*/ |
|
display: flex; |
|
flex: 1; |
|
align-items: center; |
|
justify-content: space-evenly; } |
|
|
|
|
|
|
|
|
|
|