3 changed files with 823 additions and 256 deletions
@ -0,0 +1 @@
@@ -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"} |
||||
@ -0,0 +1,537 @@
@@ -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*/ |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue