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.
640 lines
16 KiB
640 lines
16 KiB
/*Hell-/Dunkel-Modus*/ /*20251210 eingefügt*/ |
|
@media (prefers-color-scheme: dark) { |
|
:root { color-scheme: dark; } |
|
.label.is-small, strong {color: black !important; } |
|
.table th { color: black !important; } |
|
.table {--bulma-table-background-color: white !important; } |
|
.table {--bulma-table-color: black !important; } |
|
.table th { color: black !important; } |
|
.box { background-color: white !important; } |
|
.button { |
|
border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ |
|
border-radius: 0.3em; } |
|
.select:not(.is-multiple) { |
|
background: white; |
|
color: black; } |
|
textarea.editform { |
|
color: black; |
|
background: white; |
|
border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ |
|
border-radius: 0.3em; } |
|
} |
|
|
|
/*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; } |
|
|
|
/*!!!202605 deaktiviert: vgl. Zeile 373!!!*/ |
|
/*.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*/ |
|
/*!!!202605 deaktiviert: vgl. Zeile 385!!!*/ |
|
/*.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;*/ /* 202605 deakitviert*/ |
|
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; |
|
color: midnightblue; } |
|
|
|
.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; |
|
color: midnightblue; |
|
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; } |
|
} |
|
|
|
/* Button-Style und -Color*/ |
|
.buttons-container { /* 300425 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*/ |
|
|
|
/*Buttonleiste*/ |
|
.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:inherit; |
|
min-width: 10.0em; /*für kleine Viewports*/ |
|
width: 12%; /*202605 geändert v ursprgl. 10%*/ |
|
} |
|
|
|
.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; |
|
/*font-size:2em;*/ /*202605 deaktiviert*/ |
|
} |
|
|
|
/*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; |
|
} |
|
|
|
/*tooltips*/ |
|
.button.has-tooltip-bottom, .button.has-tooltip-right { |
|
height: 2.5em; /* entspricht der Höhe des Eingabeldes*/ |
|
} |
|
|
|
[data-tooltip]:not(.is-disabled).has-tooltip-bottom::before, |
|
[data-tooltip]:not(.is-loading).has-tooltip-bottom::before, |
|
[data-tooltip]:not([disabled]).has-tooltip-bottom::before, |
|
[data-tooltip]:not(.is-disabled).has-tooltip-right::before, |
|
[data-tooltip]:not(.is-loading).has-tooltip-right::before, |
|
[data-tooltip]:not([disabled]).has-tooltip-right::before { |
|
display: flex; |
|
margin: 0.5em; |
|
position: absolute; |
|
z-index: 1000; |
|
padding: 1em; |
|
background-color: #333; /*dklgrau*/ |
|
color: white; |
|
border-radius: 0.3em; |
|
white-space: wrap; |
|
text-align: left; |
|
width: 250px; |
|
height: fit-content; |
|
white-space: wrap; /* für Zeilenumbrüche nach Standard-Regeln*/ |
|
overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ |
|
hyphens: auto; |
|
} |
|
|
|
/*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; |
|
} |
|
|
|
.fixed-right-buttons { |
|
position: fixed; |
|
right: 0.1%; /* Abstand vom rechten Bildschirmrand */ |
|
top: 50%; /* Zentriert den Button-Block vertikal;*/ |
|
transform: translateY(-50%); /* Zentrierung anpassen */ |
|
display: flex; |
|
flex-direction: column; /* Buttons vertikal anordnen */ |
|
gap: 10px; /* Abstand zwischen den Buttons */ |
|
z-index: 600; |
|
padding: 0.7% 0% 0.7% 0%; |
|
} |
|
|
|
.inside-buttons { /*20250530 BF ergänzt: wenn sidebar offen*/ |
|
display: block; |
|
position: fixed; |
|
top: 50%; |
|
z-index: 700; |
|
left: calc(100% - 545px - 40px);/* Viewport-Breite minus Sidebar-Breite minus Abstand */ |
|
transform: none; /* keine vertikale Zentrierung */ |
|
} |
|
|
|
.sidebar { /*20250523 BF ergänzt*/ |
|
position: fixed; |
|
top: 120px; /*Abstand zur oberen Leiste*/ |
|
padding-top:2em; |
|
padding-left:0.5em; |
|
padding-right: 0.7em; |
|
right: 0em; |
|
bottom: 0; |
|
width: 545px; /*Breite nach Bedarf */ |
|
background: white; |
|
box-shadow: -2px 0 5px rgba(0,0,0,0.1); |
|
overflow-y: auto; |
|
z-index: 700; /*für Anzeige über Content*/ |
|
} |
|
|
|
.subheaderMaskDialogs |
|
{background-color:#cccccc; |
|
font-weight:bolder; |
|
font-size:2rem; |
|
/* margin-left:0;*/ |
|
margin-top:0.2em; |
|
margin-bottom:0.2em; |
|
margin-right:0px; |
|
padding-left:0.5em; |
|
} |
|
|
|
.viz_content { margin-left:1em; } |
|
|
|
|
|
//Für sidebar: |
|
.card-content { |
|
border: thin solid hsl(0, 0%, 71%); |
|
border-radius: 0.3rem !important; |
|
padding-right:20% |
|
} |
|
|
|
.vizLabel-container { |
|
display: flex; |
|
background: inherit; |
|
min-width: 26em; |
|
height:2.7rem; |
|
} |
|
|
|
.label.is-small { width: 100%; } /*einheitliche Labelbreite*/ |
|
|
|
.button { font-weight: bold; |
|
font-size:1.5em; |
|
} |
|
|
|
input.sideBarInput |
|
{ |
|
font-size:2.1rem; |
|
font-weight:normal; |
|
} |
|
|
|
/* Tooltip-Farbe */ |
|
[data-tooltip]:not(.is-disabled).has-tooltip-bottom::before, |
|
[data-tooltip]:not(.is-loading).has-tooltip-bottom::before, |
|
[data-tooltip]:not([disabled]).has-tooltip-bottom::before { |
|
background-color: #a6a6a6ff; /*#333;*/ |
|
color: white; |
|
} |
|
|
|
/*****************styleanweisungen aus html-Datei*/ |
|
textarea.editform { |
|
height: 4em; |
|
width: 100%; |
|
padding: 3px; |
|
transition: all 0.5s ease; |
|
} |
|
|
|
textarea.editform:focus { |
|
height: 40em; |
|
} |
|
|
|
.textarea, .is-small.textarea { /*20251210 eingefügt*/ |
|
color: black; |
|
background: white; |
|
border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ |
|
border-radius: 0.3em; |
|
} |
|
|
|
.field.is-grouped { /*20251210 eingefügt*/ |
|
gap: 0.2rem; } |
|
|
|
|
|
.node rect { |
|
cursor: move; |
|
fill-opacity: .9; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.node text { |
|
pointer-events: none; |
|
text-shadow: 0 1px 0 #fff; |
|
} |
|
|
|
.link { |
|
fill: none; |
|
stroke: #000; |
|
stroke-opacity: .2; |
|
} |
|
|
|
.link:hover { |
|
stroke-opacity: .5; |
|
}
|
|
|