Visualisierungsmodul für SuperX
http://www.superx-projekt.de/doku/viz_modul/
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.
431 lines
12 KiB
431 lines
12 KiB
/*dateispezifische Basics*/ |
|
html, body { |
|
height: auto; |
|
min-height: 100vh; |
|
overflow-x: auto; |
|
overflow-y: auto; |
|
} |
|
|
|
.hero-body { margin-left: 1.5em; } /*Abstand zum Burger-Button*/ |
|
|
|
.title, .subtitle { /*für Seitentitel*/ |
|
margin-left: 0.4em; |
|
margin-top: 0%; } |
|
|
|
.columns { |
|
display: flex; |
|
flex-wrap: wrap; } |
|
|
|
.card { /*für Cardposition, -style*/ |
|
display: flex; |
|
flex-flow: column; |
|
margin-left: 0em; /*1.5em bei farbigem Hintergrund*/ |
|
margin-top: 0em; /*-1.2em bei farbigem Hintergrund*/ |
|
box-shadow: none; } |
|
|
|
/*Buttonleiste, Legende*/ |
|
.legende { /*für Berichtslegende*/ |
|
margin-left: 0.15em; |
|
padding: 0.4rem 0.4rem 0.4rem 0.4rem; } /*für Padding: ob re un li*/ |
|
|
|
/*Tabs, Selektionsfelder-Formular*/ |
|
.label-container { /*für Responsibility der Eingabefelder*/ |
|
display: flex; |
|
justify-content: left; |
|
background: inherit; |
|
min-width: 10.0em; } |
|
|
|
.label { /*für Selektionsfeld-Bezeichner*/ |
|
font-family: sans-serif; |
|
font-weight: normal; |
|
font-size: 2rem; |
|
margin-left: 1.0em; |
|
margin-top: 0.4em; } |
|
|
|
.control-new { /*für einheitliche Controlbreite*/ |
|
width: 17.0em; } |
|
|
|
.tabs { |
|
font-family: sans-serif; |
|
font-weight: normal; } |
|
|
|
.tabs { /*für Tab-Namen*/ |
|
font-size: 2rem; } |
|
|
|
.grid { /*20250917 eingefügt*/ |
|
display: flex; |
|
flex-wrap: wrap; } /*erlaubt Umbruch'*/ |
|
|
|
/*20251007 eingefügt*/ |
|
.fullwidth-grid { |
|
width: 100vw; /* gesamte Viewport-Breite */ |
|
padding-right: 2em; } |
|
|
|
.dashboard-tabs { /*20250917 eingefügt*/ |
|
display: flex; |
|
flex-wrap: wrap; /* erlaubt Umbruch */ |
|
list-style: none; |
|
margin: 1rem; |
|
padding: 0; |
|
cursor: pointer; } |
|
|
|
.dashboard-tabs li { /*20250917 eingefügt*/ |
|
flex: 1 1 auto; /* alle Tabs gleich breit, aber flexibel */ |
|
text-align: center; |
|
border: 1px solid #ccc; |
|
background: #f9f9f9; } |
|
|
|
.dashboard-tabs li a { /*20250917 eingefügt*/ |
|
display: block; |
|
text-decoration: none; |
|
font-weight: bold; |
|
color: #333; } |
|
|
|
.dashboard-tabs li a:hover, .dashboard-tabs li a:focus { /*20250917 eingefügt*/ |
|
background: #e0e0e0; } |
|
|
|
.dashboard-tabs li.is-active { /*20251007 eingefügt*/ |
|
background: #ebf1f3; } |
|
|
|
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { |
|
font-size: 0.8rem; |
|
color: black; } |
|
|
|
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { |
|
font-size: 0.8rem; |
|
color: hsl(0, 0%, 29%); } |
|
|
|
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder, .select select::-webkit-input-selected { |
|
font-size: 0.8rem; |
|
color: hsl(0, 0%, 29%); } |
|
|
|
.vizTooltip { |
|
position: absolute; |
|
text-align: center; |
|
width: 60px; |
|
height: 28px; |
|
padding: 2px; |
|
font: 12px sans-serif; |
|
background: lightsteelblue; |
|
border: 0px; |
|
border-radius: 8px; |
|
pointer-events: none; |
|
} |
|
.dojoDialog {background : #eee; border : 1px solid #999;-moz-border-radius : 5px;padding : 4px;width:650;height:420px;overflow:scroll} |
|
|
|
.treebutton { |
|
border:none; |
|
margin: 0 4px 0 0; |
|
} |
|
|
|
/*Cockpit-Header*/ |
|
.hs_header { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: 20; /*positioniert sich im flow am nähesten zum Betrachter*/ |
|
background-color:white; |
|
padding-top: 3rem; } |
|
|
|
.hs_header_box1 { /*für Balken-Box über/unter Cockpittitel*/ |
|
background: white; |
|
height: 1.0rem; |
|
color: black; } |
|
|
|
.hs_header_box2 { /*für Logo-/Cockpittitel-Box*/ |
|
display: flex; |
|
/* height: 4.0rem;*/ |
|
padding: 0.3rem 17.0rem 0rem 9.0rem; /*für Padding: ob re un li*/ |
|
align-items: left; /*für vertikale Ausrichtung d Elemente*/ |
|
/*justify-content: space-between;*/ /*für gleichm. Leerraum zw. Elementen*/ |
|
background-color: #004c93; } |
|
|
|
.cockpit_title { |
|
color: white; |
|
font-size: 2rem; |
|
font-weight: 800; |
|
background-color: #004c93; |
|
padding-left:20px; } |
|
|
|
.vizTitle { |
|
margin-left: 0.8em; |
|
margin-right: 0.8em; |
|
white-space: normal; |
|
word-wrap: normal; |
|
overflow-wrap: break-word; |
|
hyphens: auto; |
|
text-align: center; |
|
font-size:1.2em; |
|
font-weight:bolder; |
|
background: #ebf1f3; } |
|
|
|
.navbar {background-color: white;} /*20250221 eingefügt*/ |
|
.navbar-item img, .navbar-item svg { /*20250221 eingefügt*/ |
|
max-height: unset !important; } /*var(--bulma-navbar-item-img-max-height);*/ |
|
|
|
/*Media-queries**/ |
|
@media print{ |
|
.dontprint {display:none;} |
|
} |
|
|
|
/* 20250919 eingefügt: bis 769px: mobile; ab 769px: tablet and up; ab 1024px: desctop an up */ |
|
@media (max-width: 403px) { |
|
.columns { padding-top: 2.5rem; } |
|
.grid { padding-top: 18.5rem; } |
|
} |
|
|
|
@media (min-width: 404px) and (max-width: 468px) { |
|
.grid { padding-top: 17rem; } |
|
} |
|
|
|
@media (min-width: 469px) and (max-width: 473px) { |
|
.grid { padding-top: 15.5rem; } |
|
} |
|
|
|
@media (min-width: 474px) and (max-width: 549px) { |
|
.grid { padding-top: 14rem; } |
|
} |
|
|
|
@media (min-width: 550px) and (max-width: 552px) { |
|
.grid { padding-top: 12rem; } |
|
} |
|
|
|
@media (min-width: 553px) and (max-width: 576px) { |
|
.grid { padding-top: 10.5rem; } |
|
} |
|
|
|
@media (min-width: 577px) and (max-width: 636px) { |
|
.grid { padding-top: 7.5rem; } |
|
} |
|
@media (min-width: 637px) and (max-width: 917px) { |
|
.grid { padding-top: 6rem; } |
|
} |
|
|
|
@media (min-width: 918px) and (max-width: 927px) { |
|
.grid { padding-top: 5rem; } |
|
} |
|
|
|
@media (min-width: 928px) and (max-width: 1644px) { |
|
.grid { padding-top: 3rem; } |
|
} |
|
|
|
@media (min-width: 1645px) { |
|
.grid { padding-top: 1.5rem; } |
|
} |
|
|
|
.buttons-container { /* 300425BF eingefügt*/ |
|
display: flex; |
|
justify-content: flex-end; /* rechts ausrichten */ |
|
align-items: center; /* vertikal zentrieren */ |
|
flex-wrap: wrap; /* für kleine Viewports */ |
|
padding-top: 1.0rem; |
|
} |
|
|
|
.button.is-link { |
|
background-color: white; /*link-Blau:#3273dc; UDE-Blau:#004C93*/ |
|
border-color: transparent; |
|
color: #004C93; } |
|
.button.is-link:hover, .button.is-link.is-hovered { |
|
background-color: #276cda; |
|
border-color: transparent; |
|
color: #004C93; } |
|
.button.is-link:focus, .button.is-link.is-focused { |
|
border-color: transparent; |
|
color: #004C93; } |
|
.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { |
|
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } |
|
.button.is-link:active, .button.is-link.is-active { |
|
background-color: white; |
|
border-color: transparent; |
|
color: #004C93; } |
|
.button.is-link[disabled], |
|
fieldset[disabled] .button.is-link { |
|
background-color: #004C93; |
|
border-color: transparent; |
|
box-shadow: none; } |
|
.button.is-link.is-inverted { |
|
background-color: #fff; |
|
color: #004C93; } |
|
.button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { |
|
background-color: #f2f2f2; } |
|
.button.is-link.is-inverted[disabled], |
|
fieldset[disabled] .button.is-link.is-inverted { |
|
background-color: #fff; |
|
border-color: transparent; |
|
box-shadow: none; |
|
color: #004C93; } |
|
.button.is-link.is-loading::after { |
|
border-color: transparent transparent #fff #fff !important; } |
|
.button.is-link.is-outlined { |
|
background-color: white; |
|
border-color: #004C93; |
|
color: #004C93; } |
|
.button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused { |
|
background-color: #004C93; |
|
border-color: #004C93; |
|
color: #fff; } |
|
.button.is-link.is-outlined.is-loading::after { |
|
border-color: transparent transparent #004C93; #004C93; !important; } |
|
.button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { |
|
border-color: transparent transparent #fff #fff !important; } |
|
.button.is-link.is-outlined[disabled], |
|
fieldset[disabled] .button.is-link.is-outlined { |
|
background-color: transparent; |
|
border-color: #004C93; |
|
box-shadow: none; |
|
color: #004C93; } |
|
.button.is-link.is-inverted.is-outlined { |
|
background-color: transparent; |
|
border-color: #fff; |
|
color: #fff; } |
|
.button.is-link.is-inverted.is-outlined:hover, |
|
.button.is-link.is-inverted.is-outlined.is-hovered, |
|
.button.is-link.is-inverted.is-outlined:focus, |
|
.button.is-link.is-inverted.is-outlined.is-focused { |
|
background-color: #fff; |
|
color: #004C93; } |
|
.button.is-link.is-inverted.is-outlined.is-loading:hover::after, |
|
.button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, |
|
.button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after { |
|
border-color: transparent transparent #004C93; #004C93; !important; } |
|
|
|
.button.is-link.is-inverted.is-outlined { |
|
background-color: transparent; |
|
border-color: #fff; |
|
color: #fff; } |
|
.button.is-link.is-inverted.is-outlined:hover, |
|
.button.is-link.is-inverted.is-outlined.is-hovered, |
|
.button.is-link.is-inverted.is-outlined:focus, |
|
.button.is-link.is-inverted.is-outlined.is-focused { |
|
background-color: #fff; |
|
color: #004C93; } |
|
|
|
.button.is-small.is-rounded.is-link.has-tooltip-bottom { background-color: #004C93; /*UDE-Blau*/ } /*20250711 eingefügt*/ |
|
|
|
.exportoptions { |
|
margin-top: 2.0em; |
|
} |
|
|
|
.buttonlist{ /*für resposive Buttonleiste*/ |
|
display: flex; |
|
flex-flow: no wrap; |
|
justify-content: flex-start; |
|
padding: 0.3rem 0rem 0.3rem 0rem; /*für Padding: ob re un li*/ |
|
} |
|
|
|
.buttonlist img { /*für Icongröße in Buttonleiste*/ |
|
height: 2.5rem; |
|
width: auto; |
|
margin-top: 0em; } |
|
|
|
/*Auswahlfelder*/ |
|
.card { /*für Auswahlfeldercard-Position*/ |
|
display: flex; |
|
flex-flow: column; |
|
margin-left: 0em; |
|
margin-top: 8em; |
|
min-width: 10.0em; |
|
width: 100%; |
|
} |
|
|
|
.card.is-shady { border: unset !important; } /*20250709 eingefügt */ |
|
|
|
.label-container, .button-label { /*für einh.responsive Feldbezeichner*/ |
|
display: flex; |
|
justify-content: left; |
|
background: ; |
|
min-width: 10.0em; /*für kleine Viewports*/ |
|
width: 10%; } /*für kleine Viewports*/ |
|
|
|
.control-new { /*für einheitliche Controls*/ |
|
min-width: 10.0em; /*für kleine Viewports*/ |
|
width: 10%; /*für große Viewports*/ |
|
} |
|
|
|
.button { /*für Button-Bezeichner-Ausrichtung*/ |
|
display: flex; |
|
justify-content: left; } |
|
|
|
/*Erläuterungen/Legende*/ |
|
.box-new { /*für Kopfzeile mit Close-Button*/ |
|
display: flex; |
|
justify-content: space-between; |
|
font-weight: bold; |
|
} |
|
|
|
.leg_erl { |
|
background-color: whitesmoke; /*für Abschnitthintergrund, Schrift*/ |
|
font-size: 0.8em; |
|
} |
|
|
|
.dl_title { /*für Texthervorhebungen*/ |
|
display: flex; |
|
justify-content: center; |
|
background: inherit; |
|
font-size: 1.2em; |
|
font-weight: 400; |
|
} |
|
/*Datentabellen*/ |
|
.table-container { |
|
z-index: 10; /*positioniert sich im flow hinter dem hs_header*/ |
|
} |
|
table.ergtabelle tr.listRowOdd td.leer |
|
{ |
|
border:thin solid white; |
|
background-color:white; |
|
} |
|
table.ergtabelle tr.listRowEven td.leer |
|
{ |
|
border:thin solid white; |
|
background-color:white; |
|
} |
|
table.ergtabelle tr td.leer |
|
{ |
|
border:thin solid white; |
|
background-color:white; |
|
} |
|
table.ergtabelle tr th.leer |
|
{ |
|
border:thin solid white; |
|
background-color:white; |
|
} |
|
table.ergtabelle tr th.header |
|
{ |
|
vertical-align:center; |
|
text-align:center; |
|
} |
|
|
|
table.ergtabelle |
|
{ |
|
border:thin solid white; |
|
font-size:1.5rem; |
|
} |
|
|
|
/* Zahlen rechtsbündig:*/ |
|
table.ergtabelle tbody tr.listRowEven td.integer |
|
{ |
|
text-align:right; |
|
empty-cells:show |
|
vertical-align:center; |
|
} |
|
table.ergtabelle tbody tr.listRowOdd td.integer |
|
{ |
|
text-align:right; |
|
empty-cells:show |
|
vertical-align:center; |
|
} |
|
table.ergtabelle tbody tr.listRowEven td.decimal |
|
{ |
|
text-align:right; |
|
empty-cells:show |
|
vertical-align:center; |
|
} |
|
table.ergtabelle tbody tr.listRowOdd td.decimal |
|
{ |
|
text-align:right; |
|
empty-cells:show |
|
vertical-align:center; |
|
} |
|
|
|
|
|
|