diff --git a/superx/style/sx_tabelle.css b/superx/style/sx_tabelle.css index 1585fd8..b4f36ad 100644 --- a/superx/style/sx_tabelle.css +++ b/superx/style/sx_tabelle.css @@ -1,117 +1,150 @@ +@charset "UTF-8"; /*Hell-/Dunkel-Modus*/ @media (prefers-color-scheme: light) { /*20250210 BF media-Zeile eingefügt*/ -:root { color-scheme: light; } + :root { + color-scheme: light; + } } - @media (prefers-color-scheme: dark) { -:root { color-scheme: dark; } -table.ergtabelle { color: black; } + :root { + color-scheme: dark; + } + table.ergtabelle { + color: black; + } } - /*spezifische Basics */ html, body { - max-width: 100%; - overflow-x: visible; + max-width: 100%; + overflow-x: visible; } - + .table-container { - border-collapse: collapse; - font-family: sans-serif; - font-weight: normal; - font-size: 0.8em; - overflow-x: auto; /* Nur horizontales Scrollen */ - overflow-y: auto; /* Vertikales Scrollen */ - max-height: 80vh; /* max. Container-Höhe 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ - max-width: 185vb; /* max. Container-Breite 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ - width: 100%; /* volle Container-Breite */ - white-space: normal; /* Ermöglicht Zeilenumbrüche in den Tabellenzellen */ - /*white-space: nowrap; /* Verhindert Zeilenumbrüche in den Tabellenzellen */ - -webkit-overflow-scrolling: touch; /* Für bessere Scroll-Erfahrung auf Mobilgeräten */ - } - -.level-center { /*für zentrierte Icons in Tabelle*/ + border-collapse: collapse; + font-family: sans-serif; + font-weight: normal; + font-size: 0.8em; + overflow-x: auto; /* Nur horizontales Scrollen */ + overflow-y: auto; /* Vertikales Scrollen */ + max-height: 80vh; /* max. Container-Höhe 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ + max-width: 185vb; /* max. Container-Breite 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ + width: 100%; /* volle Container-Breite */ + white-space: normal; /* Ermöglicht Zeilenumbrüche in den Tabellenzellen */ + /*white-space: nowrap; /* Verhindert Zeilenumbrüche in den Tabellenzellen */ + -webkit-overflow-scrolling: touch; /* Für bessere Scroll-Erfahrung auf Mobilgeräten */ +} + +.level-center { /*für zentrierte Icons in Tabelle*/ display: flex; justify-content: center; } -table { - border-collapse: collapse; /* Verhindert Doppellinien an den Grenzen */ - /*min-width: 130%;*/ /* Tabellen-Breite gößer als Container-Breite, damit Scrollbalken sichtbar ist */ - max-width:100%; - white-space: normal; +table { + border-collapse: collapse; /* Verhindert Doppellinien an den Grenzen */ + /*min-width: 130%;*/ /* Tabellen-Breite gößer als Container-Breite, damit Scrollbalken sichtbar ist */ + max-width: 100%; + white-space: normal; } th, td { padding: 8px; border: 1px solid #ddd; - white-space: normal; /* Erlaubt Zeilenumbrüche */ + vertical-align: bottom !important; /*202608 eingefügt*/ + white-space: normal; /* Erlaubt Zeilenumbrüche */ } -table thead th { /*für Tabellenposition*/ +table thead th { /*für Tabellenposition*/ position: sticky; top: 0; - z-index: 20; + z-index: 20; } -table th.header, table th.fixed-column1-title*/ { /*für Spaltentitel*/ - background: #ECF0F3 /*#dbdee3ff*/; +table th.header, table th.fixed-column1-title { /*für Spaltentitel*/ + background: #ECF0F3; color: hsl(0, 0%, 21%); - font-weight: bold; } + font-weight: bold; +} -table th.fixed-column1-title, table td.fixed-column1 { /*zum Fixieren des 1. Spaltentitels b. horizont. Scrollen*/ +table th.fixed-column1-title, table td.fixed-column1 { /*zum Fixieren des 1. Spaltentitels b. horizont. Scrollen*/ position: sticky; z-index: 25; - left: 0em; } + left: 0em; +} table td.fixed-column1 { - background: #ECF0F3; /*whitesmoke; /*zum Fixieren der 1. TabSpalte b. horizont. Scrollen*/ - filter: opacity(1.0); + background: #ECF0F3; /*whitesmoke; /*zum Fixieren der 1. TabSpalte b. horizont. Scrollen*/ + filter: opacity(1); position: sticky; - z-index: 20/*500*/; + z-index: 20; left: 0em; - border: thin solid; - border-collapse: collapse; }*/ - -table tr.erglevel0 { - font-weight:bolder; + border: thin solid; + border-collapse: collapse; +} + +/*table tr.erglevel0 { /*202608 entfernt*/ +/* font-weight:bold; background: white; border: thin solid; border-collapse: collapse; } - +*/ table tr.erglevel_1 { - font-weight:bolder; - background: white; + font-weight: bold; + background: aliceblue; /*202608 geändert: snow;*/ color: hsl(0, 0%, 21%); - border: thin solid; - border-collapse: collapse; } - + border: thin solid; + border-collapse: collapse; +} + table tr.erglevel_2 { - font-weight:bold; - background: white /*#f1f1f1*/; + font-weight: normal; + background: azure; /*202608 geändert: azure*/ color: hsl(0, 0%, 21%); - border: thin solid; - border-collapse: collapse; } - + border: thin solid; + border-collapse: collapse; +} + table tr.erglevel_3 { - font-weight:normal; - background: white /*#f1f1f1*/; - border: thin solid; - border-collapse: collapse; } -/*nach oben verschoben*/ + font-weight: normal; + background: snow; /*202608 geändert: antiquewhite*/ + border: thin solid; + border-collapse: collapse; +} + +table tr.erglevel_4 { /*202608 eingefügt: aliceblue*/ + font-weight: normal; + background: beige; + border: thin solid; + border-collapse: collapse; +} + +table tr.erglevel_5 { /*202608 eingefügt: beige*/ + font-weight: normal; + background: antiquewhite; + border: thin solid; + border-collapse: collapse; +} + +table tr.erglevel_6 { /*202608 eingefüg: khaki*/ + font-weight: normal; + background: khaki; + border: thin solid; + border-collapse: collapse; +} + table.ergtabelle { - margin-left:0px; - margin-right:0px; - margin-top:0px; - margin-bottom:0px; - padding-left:0px; - padding-right:0px; - padding-top:0px; - padding-bottom:0px; -/*border:thin solid rgb(0,0,0);*/ /*20240619 BF auskommentiert*/ - empty-cells:show; + margin-left: 0px; + margin-right: 0px; + margin-top: 0px; + margin-bottom: 0px; + padding-left: 0px; + padding-right: 0px; + padding-top: 0px; + padding-bottom: 0px; + /*border:thin solid rgb(0,0,0);*/ /*20240619 entfernt*/ + empty-cells: show; border-collapse: separate; border-spacing: 0; - font-size:80%; + font-size: 80%; } table.ergtabelle thead { @@ -121,95 +154,88 @@ table.ergtabelle thead { z-index: 4; } -table td.ergfeld -{ -empty-cells:show; -vertical-align:top; -border:thin solid gray; +table td.ergfeld { + empty-cells: show; + vertical-align: top; + border: thin solid gray; } -table td.prozent -{ -border:thin solid gray; -empty-cells:show; -font-style:italic; -color:#999999; +table td.prozent { + border: thin solid gray; + empty-cells: show; + font-style: italic; + color: #999999; } -table td.lt5 -{ -border:thin solid gray; -empty-cells:show; +table td.lt5 { + border: thin solid gray; + empty-cells: show; } -table td.lt5:before {content:"< 5";color:#ff0000;} - -table th.header -{ -background-color: #ECF0F3; /*#dbdee3ff;*/ -color: black; -border: 1px solid black; -padding: 5px; -border-collapse: separate; -border-spacing: 0; -empty-cells: show; -/*font-size: 80%; 20250210 Bf entfernt*/ +table td.lt5:before { + content: "< 5"; + color: #ff0000; } -table th.printheader -{ -font-size:10pt; -font-weight:bold; -text-align:center; -background-color:white; -border-top:1px solid; -border-right:1px solid; -border-bottom:1px solid; -border-left:0; +table th.header { + background-color: #ECF0F3; /*#dbdee3ff;*/ + color: black; + border: 1px solid black; + padding: 5px; + border-collapse: separate; + border-spacing: 0; + empty-cells: show; + /*font-size: 80%; 20250210 Bf entfernt*/ } -table td.result -{ -font-size:10pt; -empty-cells:show; +table th.printheader { + font-size: 10pt; + font-weight: bold; + text-align: center; + background-color: white; + border-top: 1px solid; + border-right: 1px solid; + border-bottom: 1px solid; + border-left: 0; } -table td.string -{ -text-align:left; -empty-cells:show; -border:thin solid gray; +table td.result { + font-size: 10pt; + empty-cells: show; } -table td.decimal -{ -text-align:right; -empty-cells:show; -border:thin solid gray; +table td.string { + text-align: left; + empty-cells: show; + border: thin solid gray; +} +table td.decimal { + text-align: right; + empty-cells: show; + border: thin solid gray; } -table td.boldnumber -{ -text-align:right; -empty-cells:show; -font-weight:bold; + +table td.boldnumber { + text-align: right; + empty-cells: show; + font-weight: bold; } -table td.integer -{ -text-align:right; -empty-cells:show; -border:thin solid gray; +table td.integer { + text-align: right; + empty-cells: show; + border: thin solid gray; } -p.errmsg -{ -border: medium solid red; -text-align:left; -background-color:#d7d7d7; +p.errmsg { + border: medium solid red; + text-align: left; + background-color: #d7d7d7; } -table tr.erglevel0 +/*202608 entfernt, da ab Z.75 vorhanden*/ +/*table tr.erglevel0 {font-weight:bolder; background-color:#f1f1f1; } @@ -232,9 +258,9 @@ background-color:#f1f1f1; table tr.erglevel_4 {font-weight:normal;; background-color:#f1f1f1; -} -/*Wenn nur 1 Ebene vorlieg:*/ -table tr.erglevel1_0 +}*/ +/*202608 entfernt s.o.: Wenn nur 1 Ebene vorliegt:*/ +/*table tr.erglevel1_0 {font-weight:bolder; } @@ -242,8 +268,8 @@ table tr.erglevel1_1 {font-weight:normal;; } -/*Wenn nur 2 Ebenen vorliegen:*/ -table tr.erglevel2_0 +/*202608 entfernt s.o.: Wenn nur 2 Ebenen vorliegen:*/ +/*table tr.erglevel2_0 {font-weight:bolder; background-color:#f1f1f1; } @@ -256,8 +282,8 @@ table tr.erglevel2_2 {font-weight:normal;; } -/*Wenn nur 3 Ebenen vorliegen:*/ -table tr.erglevel3_0 +/*202608 entfernt s.o.:Wenn nur 3 Ebenen vorliegen:*/ +/*table tr.erglevel3_0 {font-weight:bolder; background-color:#f1f1f1; } @@ -275,8 +301,8 @@ table tr.erglevel3_3 {font-weight:normal;; } -/*Wenn nur 4 Ebenen vorliegen:*/ -table tr.erglevel4_0 +/*202608 entfernt s.o.: Wenn nur 4 Ebenen vorliegen:*/ +/*table tr.erglevel4_0 {font-weight:bolder; background-color:#f1f1f1; } @@ -297,54 +323,55 @@ table tr.erglevel4_3 table tr.erglevel4_4 {font-weight:normal;; } - -table tr.issumme -{font-weight:bolder; -background-color:#d7d7d7; +*/ +table tr.issumme { + font-weight: bolder; + background-color: #d7d7d7; } -span.hidden_navi -{ -margin:0px; -padding:0px; -font-size:smaller; -display:inline +span.hidden_navi { + margin: 0px; + padding: 0px; + font-size: smaller; + display: inline; } .listRowEven { - background-color: #EFEFEF; + background-color: #EFEFEF; } .listRowEvenHover { -/* background-color: #EFEAB3; */ - background-color: #FFFABF; + /* background-color: #EFEAB3; */ + background-color: #FFFABF; } .listRowOdd { - background-color: #FFFFFF; + background-color: #FFFFFF; } .listRowOddHover { - background-color: #FFFABF; + background-color: #FFFABF; } table.ergtabelle, table.ergtabelle th, table.ergtabelle td { - /*border: 1px solid black;*//*20240619 BF auskommentiert*/ - border-collapse: separate; - border-spacing: 0; + /*border: 1px solid black;*/ /*20240619 BF auskommentiert*/ + border-collapse: separate; + border-spacing: 0; } -table.ergtabelle tr:hover {background-color: hsl(219, 70%, 76%); /*#e5e5e5;*/ } +table.ergtabelle tr:hover { + background-color: hsl(219, 70%, 76%); /*#e5e5e5;*/ +} table.ergtabelle th { - background-color: #dbdee3ff; - color: black; - border: 1px solid black; - border-collapse: separate; + background-color: #dbdee3; + color: black; + border: 1px solid black; + border-collapse: separate; } table.ergtabelle th, table.ergtabelle td { - padding: 5px; + padding: 5px; } /*20260304:Zahlen rechtsbündig*/ @@ -365,122 +392,124 @@ p.teiltabelle_titel { padding: 0px 0px 0px 5px; } -/*Legende*/ -.legende { - display: flex; - /*flex: 1 1 auto; /* 202604 weg; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/ - flex-grow: 1; - flex-shrink: 1; - flex-flow: row wrap; - justify-content: flex-start; - align-items: normal; - padding: 0.3rem; - margin-bottom: 0.1rem; - border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ - border-radius: 0.3em; } +/*Legende*/ +.legende { + display: flex; + /*flex: 1 1 auto; /* 202604 weg; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/ + flex-grow: 1; + flex-shrink: 1; + flex-flow: row wrap; + justify-content: flex-start; + align-items: normal; + padding: 0.3rem; + margin-bottom: 0.1rem; + border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ + border-radius: 0.3em; +} p.legende { color: black; - gap: 3px; /* Abstand zwischen den Elementen */ - width: auto; } + gap: 3px; /* Abstand zwischen den Elementen */ + width: auto; +} .legende-info { - font-weight: normal; } + font-weight: normal; +} - /*Table-Buttonleiste mit input-container inkl.: Label, Auswahlfeld, Button*/ -.input-container { +.input-container { display: flex; align-items: center; - flex-wrap: normal; /* 20260326 neu*/ - flex: 1 1 auto; /* 20260304; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/ + flex-wrap: normal; /* 20260326 neu*/ + flex: 1 1 auto; /* 20260304; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/ padding-bottom: 0.1rem; } -.field { margin-left: 1px; } /*für Abstand Buttonbar-SelectFeld*/ +.field { + margin-left: 1px; +} /*für Abstand Buttonbar-SelectFeld*/ +.select select { /*für Auswahlfeldstyle*/ + border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ /*oder var(--bulma-link-light)*/ + border-radius: 0.3em; +} -.select select { /*für Auswahlfeldstyle*/ - border:thin solid hsl(0, 0%, 71%); /*hellgrau*/ /*oder var(--bulma-link-light)*/ - border-radius: 0.3em; } - /* Standarddarstellung für größere Viewports */ .input-container > .label { - margin-bottom: 0.3rem; - margin-right: 0.5rem; } /* Abstand zwischen Label und Eingabefeld*/ - - + margin-bottom: 0.3rem; + margin-right: 0.5rem; +} /* Abstand zwischen Label und Eingabefeld*/ /*Datensatzinfo unterhalb Ergebnistabelle*/ .pagination-container { - display: inline-flex; - align-items: center; - justify-content: left; - /*max-width: 80%;*/ /*202604 weg*/ - gap: 2px; } /* Abstand zwischen den Elementen */ - + display: inline-flex; + align-items: center; + justify-content: left; + /*max-width: 80%;*/ /*202604 weg*/ + gap: 2px; +} /* Abstand zwischen den Elementen */ /******202603************/ /* Mobile */ -@media (max-width:768px){ - .container,.input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ - max-width:100%; /*202604 geänd von 800px;*/ - white-space:normal; - overflow-wrap: break-word; +@media (max-width: 768px) { + .hero-body { /*202608 integriert*/ + margin-left: 0; /*überschreibt -50px aus sx_common.css*/ + margin-right: 0; /*überschreibt 1.5em aus sx_common.css*/ + } + .container, .input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ + max-width: 100%; /*202604 geänd von 800px;*/ + white-space: normal; + overflow-wrap: break-word; } - table.ergtabelle, - table.ergtabellexy { - max-width:70%; /*202604 geänd. v 600px;*/ - font-size:0.65rem; - /*white-space:nowrap;*/ + table.ergtabelle, + table.ergtabellexy { + max-width: 70%; /*202604 geänd. v 600px;*/ + font-size: 0.65rem; + /*white-space:nowrap;*/ } - - table.ergtabelle th, - table.ergtabelle td, - table.ergtabellexy th, - table.ergtabellexy td { + table.ergtabelle th, + table.ergtabelle td, + table.ergtabellexy th, + table.ergtabellexy td { /*word-break:break-word !important;*/ - min-width:50px; - max-width:60px; - white-space: normal; /* Zeilenumbruch nach Standard-Regeln*/ - /*word-wrap: normal; /* veraltet: f Umbruch nach Standard-Regeln*/ - overflow-wrap: break-word !important; /* aktuell: Umbruch nach Standard-Regeln*/ - hyphens: auto; + min-width: 50px; + max-width: 60px; + white-space: normal; /* Zeilenumbruch nach Standard-Regeln*/ + /*word-wrap: normal; /* veraltet: f Umbruch nach Standard-Regeln*/ + overflow-wrap: break-word !important; /* aktuell: Umbruch nach Standard-Regeln*/ + hyphens: auto; } } - /* Tablet */ -@media (min-width:769px) and (max-width:1024px){ - .container,.input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ - max-width:100%; /*202604 geänd v 700px*/ - white-space:normal; - overflow-wrap: break-word; +@media (min-width: 769px) and (max-width: 1023px) { /*202608 geändert v 1024px auf 1023px gem. Bulma-Brakpoint*/ + .container, .input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ + max-width: 100%; /*202604 geänd v 700px*/ + white-space: normal; + overflow-wrap: break-word; } - table.ergtabelle, - table.ergtabellexy { - max-width:80%; /*202604: geänd. v 700px;*/ - font-size:0.7rem; + table.ergtabelle, + table.ergtabellexy { + max-width: 80%; /*202604: geänd. v 700px;*/ + font-size: 0.7rem; } - - table.ergtabelle th, - table.ergtabelle td, - table.ergtabellexy th, - table.ergtabellexy td { + table.ergtabelle th, + table.ergtabelle td, + table.ergtabellexy th, + table.ergtabellexy td { /*word-break:break-word !important;*/ - min-width:50px; /*202604: geänd. v 80px;*/ - max-width:70px; /*202604: geänd. v 80px;*/ - white-space: normal; /* Zeilenumbruch nach Standard-Regeln*/ - /*word-wrap: normal; /* veraltet: f Umbruch nach Standard-Regeln*/ - overflow-wrap: break-word !important; /* aktuell: Umbruch nach Standard-Regeln*/ - hyphens: auto; + /*min-width:50px; /*202608 entfernt; 202604: geänd. v 80px;*/ + max-width: 80%; /*202608 geänd auf 80%; 202604: geänd. v 80px; */ + white-space: normal; /* Zeilenumbruch nach Standard-Regeln*/ + /*word-wrap: normal; /* veraltet: f Umbruch nach Standard-Regeln*/ + overflow-wrap: break-word !important; /* aktuell: Umbruch nach Standard-Regeln*/ + hyphens: auto; } } - /* Desktop */ -@media (min-width:1025px){ - - table.ergtabelle, - table.ergtabellexy { - font-size:0.75rem; - +@media (min-width: 1024px) { /*202608 geändert v 1025px auf 1024px gem. Bulma-Brakpoint*/ + table.ergtabelle, + table.ergtabellexy { + font-size: 0.75rem; + /*max-width:80%; /*202604: weg*/ } - } +/*# sourceMappingURL=sx_tabelle.css.map */ diff --git a/superx/style/sx_tabelle.css.map b/superx/style/sx_tabelle.css.map new file mode 100644 index 0000000..ce2332d --- /dev/null +++ b/superx/style/sx_tabelle.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["sx_tabelle.scss"],"names":[],"mappings":";AA6BA;AACA;EACA;IAAQ;;;AAGR;EACA;IAAQ;;EACR;IAAmB;;;AAGnB;AACA;EACI;EACA;;;AAGJ;EACM;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;;;AAGN;EACE;EACA;;;AAGF;EACE;AACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA,YA3FmB,WA2FgB;EACnC;EACA;EACA;;;AAEF;EACE;EACA,YAjGmB,OAiGe;EAClC;EACA;EACA;;;AAEF;EACE;EACA,YAvGmB,MAuGe;EAClC;EACA;;;AAEF;EACE;EACA,YA3GmB;EA4GnB;EACA;;;AAEF;EACE;EACA,YAlHmB;EAmHnB;EACA;;;AAEF;EACE;EACA,YAtHmB;EAuHnB;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EAEA;EACA;EACA;;;AAGA;EAEA;EACA;EACA;EACA;;;AAGA;EAEA;EACA;;;AAGA;EAAqB;EAAc;;;AAEnC;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;;;AAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGA;EAEA;EACA;;;AAGA;EAEA;EACA;EACA;;;AAGA;EAEA;EACA;EACA;;;AAGA;EAEA;EACA;EACA;;;AAGA;EAEA;EACA;EACA;;;AAGA;EAEA;EACA;EACA;;;AAEA;AACA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AASA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAcA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAmBA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAsBA;EACC;EACD;;;AAGA;EAEA;EACA;EACA;EACA;;;AAGA;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACC;EACA;EACA;;;AAGD;EAA2B;;;AAE3B;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;AACA;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACG;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEH;EACE;EACA;EACA;;;AAEF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAAS;EAAqB;AAE9B;EACC;EACA;;;AAED;AACA;EACC;EACA;EAAwB;AAGzB;AACA;EACE;EACA;EACA;AACA;EACA;EAAa;AAEf;AACA;AACA;EACG;IACF;IACA;;EAEE;IACE;IACA;IACA;;EAEF;AAAA;IAEE;IACA;AACA;;EAGF;AAAA;AAAA;AAAA;AAIC;IACC;IACA;IACA;AACA;IACA;IACA;;;AAIL;AACA;EACG;IACE;IACA;IACA;;EAEF;AAAA;IAEE;IACA;;EAGF;AAAA;AAAA;AAAA;AAIC;AACC;IACA;IACA;AACA;IACA;IACA;;;AAIL;AACA;EACG;AAAA;IAEE;AACA","file":"sx_tabelle.css"} \ No newline at end of file diff --git a/superx/style/sx_tabelle.scss b/superx/style/sx_tabelle.scss new file mode 100644 index 0000000..5b280ce --- /dev/null +++ b/superx/style/sx_tabelle.scss @@ -0,0 +1,537 @@ +@charset "utf-8"; +//1. Farben +$purple: #8a4d76; +$pink: #fa7c91; +$brown: #757763; +$beige-light: #d0d1cd; +$beige-lighter: #eff0eb; +$beige:#f5f5dc; +$antiquewhite:#faebd7; +$snow:#fffafa; +$blue: #3333ff; +$aliceblue:#f0f8ff; +$azure:#f0ffff; +$dklgrau:hsl(0, 0%, 21%); +$default-blaugrau:#ECF0F3; +$mittelgrau:hsl(0, 0%, 60%); +$hellgrau:hsl(0, 0%, 71%); +$grün:hsl(141, 71%, 48%); +$gelb-orange:hsl(48, 100%, 67%); +$khaki:#f0e68c; + +//2. default-Farben für Hierarchieebenen +$background_level_1: aliceblue; +$background_level_2: azure; +$background_level_3: snow; +$background_level_5: antiquewhite; +$background_level_4: beige; +$background_level_6: khaki; + +/*Hell-/Dunkel-Modus*/ +@media (prefers-color-scheme: light) { /*20250210 BF media-Zeile eingefügt*/ +:root { color-scheme: light; } +} + +@media (prefers-color-scheme: dark) { +:root { color-scheme: dark; } +table.ergtabelle { color: black; } +} + +/*spezifische Basics */ +html, body { + max-width: 100%; + overflow-x: visible; +} + +.table-container { + border-collapse: collapse; + font-family: sans-serif; + font-weight: normal; + font-size: 0.8em; + overflow-x: auto; /* Nur horizontales Scrollen */ + overflow-y: auto; /* Vertikales Scrollen */ + max-height: 80vh; /* max. Container-Höhe 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ + max-width: 185vb; /* max. Container-Breite 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ + width: 100%; /* volle Container-Breite */ + white-space: normal; /* Ermöglicht Zeilenumbrüche in den Tabellenzellen */ + /*white-space: nowrap; /* Verhindert Zeilenumbrüche in den Tabellenzellen */ + -webkit-overflow-scrolling: touch; /* Für bessere Scroll-Erfahrung auf Mobilgeräten */ +} + +.level-center { /*für zentrierte Icons in Tabelle*/ + display: flex; + justify-content: center; +} + +table { + border-collapse: collapse; /* Verhindert Doppellinien an den Grenzen */ + /*min-width: 130%;*/ /* Tabellen-Breite gößer als Container-Breite, damit Scrollbalken sichtbar ist */ + max-width:100%; + white-space: normal; +} + +th, td { + padding: 8px; + border: 1px solid #ddd; + vertical-align:bottom !important; /*202608 eingefügt*/ + white-space: normal; /* Erlaubt Zeilenumbrüche */ +} + +table thead th { /*für Tabellenposition*/ + position: sticky; + top: 0; + z-index: 20; +} + +table th.header, table th.fixed-column1-title { /*für Spaltentitel*/ + background: #ECF0F3 /*#dbdee3ff*/; + color: hsl(0, 0%, 21%); + font-weight: bold; } + +table th.fixed-column1-title, table td.fixed-column1 { /*zum Fixieren des 1. Spaltentitels b. horizont. Scrollen*/ + position: sticky; + z-index: 25; + left: 0em; } + +table td.fixed-column1 { + background: #ECF0F3; /*whitesmoke; /*zum Fixieren der 1. TabSpalte b. horizont. Scrollen*/ + filter: opacity(1.0); + position: sticky; + z-index: 20/*500*/; + left: 0em; + border: thin solid; + border-collapse: collapse; } + +/*table tr.erglevel0 { /*202608 entfernt*/ +/* font-weight:bold; + background: white; + border: thin solid; + border-collapse: collapse; } +*/ + +table tr.erglevel_1 { + font-weight:bold; + background: $background_level_1; /*202608 geändert: snow;*/ + color: hsl(0, 0%, 21%); + border: thin solid; + border-collapse: collapse; } + +table tr.erglevel_2 { + font-weight: normal; + background: $background_level_2; /*202608 geändert: azure*/ + color: hsl(0, 0%, 21%); + border: thin solid; + border-collapse: collapse; } + +table tr.erglevel_3 { + font-weight:normal; + background: $background_level_3; /*202608 geändert: antiquewhite*/ + border: thin solid; + border-collapse: collapse; } + +table tr.erglevel_4 { /*202608 eingefügt: aliceblue*/ + font-weight:normal; + background: $background_level_4; + border: thin solid; + border-collapse: collapse; } + +table tr.erglevel_5 { /*202608 eingefügt: beige*/ + font-weight:normal; + background: $background_level_5; + border: thin solid; + border-collapse: collapse; } + +table tr.erglevel_6 { /*202608 eingefüg: khaki*/ + font-weight:normal; + background: $background_level_6; + border: thin solid; + border-collapse: collapse; } + +table.ergtabelle { + margin-left:0px; + margin-right:0px; + margin-top:0px; + margin-bottom:0px; + padding-left:0px; + padding-right:0px; + padding-top:0px; + padding-bottom:0px; +/*border:thin solid rgb(0,0,0);*/ /*20240619 entfernt*/ + empty-cells:show; + border-collapse: separate; + border-spacing: 0; + font-size:80%; +} + +table.ergtabelle thead { + position: -webkit-sticky; + position: sticky; + top: 50px; + z-index: 4; +} + +table td.ergfeld +{ +empty-cells:show; +vertical-align:top; +border:thin solid gray; +} + +table td.prozent +{ +border:thin solid gray; +empty-cells:show; +font-style:italic; +color:#999999; +} + +table td.lt5 +{ +border:thin solid gray; +empty-cells:show; +} + +table td.lt5:before {content:"< 5";color:#ff0000;} + +table th.header +{ +background-color: #ECF0F3; /*#dbdee3ff;*/ +color: black; +border: 1px solid black; +padding: 5px; +border-collapse: separate; +border-spacing: 0; +empty-cells: show; +/*font-size: 80%; 20250210 Bf entfernt*/ +} + +table th.printheader +{ +font-size:10pt; +font-weight:bold; +text-align:center; +background-color:white; +border-top:1px solid; +border-right:1px solid; +border-bottom:1px solid; +border-left:0; +} + +table td.result +{ +font-size:10pt; +empty-cells:show; +} + +table td.string +{ +text-align:left; +empty-cells:show; +border:thin solid gray; +} + +table td.decimal +{ +text-align:right; +empty-cells:show; +border:thin solid gray; + +} +table td.boldnumber +{ +text-align:right; +empty-cells:show; +font-weight:bold; +} + +table td.integer +{ +text-align:right; +empty-cells:show; +border:thin solid gray; +} + +p.errmsg +{ +border: medium solid red; +text-align:left; +background-color:#d7d7d7; +} +/*202608 entfernt, da ab Z.75 vorhanden*/ +/*table tr.erglevel0 +{font-weight:bolder; +background-color:#f1f1f1; +} + +table tr.erglevel_1 +{font-weight:bold; +background-color:#f1f1f1; +} + +table tr.erglevel_2 +{font-weight:bold; +background-color:#f1f1f1; +} + +table tr.erglevel_3 +{font-weight:normal;; +background-color:#f1f1f1; +} + +table tr.erglevel_4 +{font-weight:normal;; +background-color:#f1f1f1; +}*/ +/*202608 entfernt s.o.: Wenn nur 1 Ebene vorliegt:*/ +/*table tr.erglevel1_0 +{font-weight:bolder; +} + +table tr.erglevel1_1 +{font-weight:normal;; +} + +/*202608 entfernt s.o.: Wenn nur 2 Ebenen vorliegen:*/ +/*table tr.erglevel2_0 +{font-weight:bolder; +background-color:#f1f1f1; +} + +table tr.erglevel2_1 +{font-weight:bolder; +} + +table tr.erglevel2_2 +{font-weight:normal;; +} + +/*202608 entfernt s.o.:Wenn nur 3 Ebenen vorliegen:*/ +/*table tr.erglevel3_0 +{font-weight:bolder; +background-color:#f1f1f1; +} + +table tr.erglevel3_1 +{font-weight:bolder; +background-color:#f1f1f1; +} + +table tr.erglevel3_2 +{font-weight:bolder; +} + +table tr.erglevel3_3 +{font-weight:normal;; +} + +/*202608 entfernt s.o.: Wenn nur 4 Ebenen vorliegen:*/ +/*table tr.erglevel4_0 +{font-weight:bolder; +background-color:#f1f1f1; +} + +table tr.erglevel4_1 +{font-weight:bolder; +background-color:#f1f1f1; +} + +table tr.erglevel4_2 +{font-weight:bolder; +} + +table tr.erglevel4_3 +{font-style:italic; +} + +table tr.erglevel4_4 +{font-weight:normal;; +} +*/ +table tr.issumme +{font-weight:bolder; +background-color:#d7d7d7; +} + +span.hidden_navi +{ +margin:0px; +padding:0px; +font-size:smaller; +display:inline +} + +.listRowEven { + background-color: #EFEFEF; +} + +.listRowEvenHover { +/* background-color: #EFEAB3; */ + background-color: #FFFABF; +} + +.listRowOdd { + background-color: #FFFFFF; +} + +.listRowOddHover { + background-color: #FFFABF; +} + +table.ergtabelle, table.ergtabelle th, table.ergtabelle td { + /*border: 1px solid black;*//*20240619 BF auskommentiert*/ + border-collapse: separate; + border-spacing: 0; +} + +table.ergtabelle tr:hover {background-color: hsl(219, 70%, 76%); /*#e5e5e5;*/ } + +table.ergtabelle th { + background-color: #dbdee3ff; + color: black; + border: 1px solid black; + border-collapse: separate; +} + +table.ergtabelle th, table.ergtabelle td { + padding: 5px; +} + +/*20260304:Zahlen rechtsbündig*/ +.table td:nth-last-child(-n+2), +.table th:nth-last-child(-n+2) { + text-align: right; +} + +p.teiltabelle_titel { + clear: left; + line-height: 2em; + border-bottom: 2px solid black; + color: black; + display: block; + font-size: 2em; + font-weight: bolder; + margin: 5px 0 20px 5px; + padding: 0px 0px 0px 5px; +} + +/*Legende*/ +.legende { + display: flex; + /*flex: 1 1 auto; /* 202604 weg; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/ + flex-grow: 1; + flex-shrink: 1; + flex-flow: row wrap; + justify-content: flex-start; + align-items: normal; + padding: 0.3rem; + margin-bottom: 0.1rem; + border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ + border-radius: 0.3em; } + +p.legende { + color: black; + gap: 3px; /* Abstand zwischen den Elementen */ + width: auto; } + +.legende-info { + font-weight: normal; } + + +/*Table-Buttonleiste mit input-container inkl.: Label, Auswahlfeld, Button*/ +.input-container { + display: flex; + align-items: center; + flex-wrap: normal; /* 20260326 neu*/ + flex: 1 1 auto; /* 20260304; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/ + padding-bottom: 0.1rem; +} + +.field { margin-left: 1px; } /*für Abstand Buttonbar-SelectFeld*/ + +.select select { /*für Auswahlfeldstyle*/ + border:thin solid hsl(0, 0%, 71%); /*hellgrau*/ /*oder var(--bulma-link-light)*/ + border-radius: 0.3em; } + +/* Standarddarstellung für größere Viewports */ +.input-container > .label { + margin-bottom: 0.3rem; + margin-right: 0.5rem; } /* Abstand zwischen Label und Eingabefeld*/ + + +/*Datensatzinfo unterhalb Ergebnistabelle*/ +.pagination-container { + display: inline-flex; + align-items: center; + justify-content: left; + /*max-width: 80%;*/ /*202604 weg*/ + gap: 2px; } /* Abstand zwischen den Elementen */ + +/******202603************/ +/* Mobile */ +@media (max-width:768px){ + .hero-body { /*202608 integriert*/ + margin-left: 0; /*überschreibt -50px aus sx_common.css*/ + margin-right: 0; /*überschreibt 1.5em aus sx_common.css*/ + } + .container,.input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ + max-width:100%; /*202604 geänd von 800px;*/ + white-space:normal; + overflow-wrap: break-word; + } + table.ergtabelle, + table.ergtabellexy { + max-width:70%; /*202604 geänd. v 600px;*/ + font-size:0.65rem; + /*white-space:nowrap;*/ + } + + table.ergtabelle th, + table.ergtabelle td, + table.ergtabellexy th, + table.ergtabellexy td { + /*word-break:break-word !important;*/ + min-width:50px; + max-width:60px; + white-space: normal; /* Zeilenumbruch nach Standard-Regeln*/ + /*word-wrap: normal; /* veraltet: f Umbruch nach Standard-Regeln*/ + overflow-wrap: break-word !important; /* aktuell: Umbruch nach Standard-Regeln*/ + hyphens: auto; + } +} + +/* Tablet */ +@media (min-width:769px) and (max-width:1023px){ /*202608 geändert v 1024px auf 1023px gem. Bulma-Brakpoint*/ + .container,.input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ + max-width:100%; /*202604 geänd v 700px*/ + white-space:normal; + overflow-wrap: break-word; + } + table.ergtabelle, + table.ergtabellexy { + max-width:80%; /*202604: geänd. v 700px;*/ + font-size:0.7rem; + } + + table.ergtabelle th, + table.ergtabelle td, + table.ergtabellexy th, + table.ergtabellexy td { + /*word-break:break-word !important;*/ + /*min-width:50px; /*202608 entfernt; 202604: geänd. v 80px;*/ + max-width:80%; /*202608 geänd auf 80%; 202604: geänd. v 80px; */ + white-space: normal; /* Zeilenumbruch nach Standard-Regeln*/ + /*word-wrap: normal; /* veraltet: f Umbruch nach Standard-Regeln*/ + overflow-wrap: break-word !important; /* aktuell: Umbruch nach Standard-Regeln*/ + hyphens: auto; + } +} + +/* Desktop */ +@media (min-width:1024px){ /*202608 geändert v 1025px auf 1024px gem. Bulma-Brakpoint*/ + table.ergtabelle, + table.ergtabellexy { + font-size:0.75rem; + /*max-width:80%; /*202604: weg*/ + } +} +