diff --git a/superx/style/sx_common.css b/superx/style/sx_common.css index 3f23f5e..7e9daf2 100644 --- a/superx/style/sx_common.css +++ b/superx/style/sx_common.css @@ -1,8 +1,4 @@ /*Hell-/Dunkel-Modus*/ -@media (prefers-color-scheme: light) { -:root { color-scheme: light; } -} - @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } @@ -21,16 +17,14 @@ body { background-color: white; background-color: white; color: hsl(0, 0%, 21%); /*dklgrau;*/ border: thin solid hsl(0, 0%, 71%); } /*hellgrau*/ - -.card-footer-item:not(:last-child) { - border: none; } +.card-footer-item:not(:last-child) { border: none; } .article { color: black; } -.buttons, .button.is-outlined { border-color: white; } /*20250214 BF: betr.Top-Navi-Buttoms*/ +.buttons, .button.is-outlined { border-color: white; } /*für Top-Navi-Buttoms*/ -.button { background-color: white; } /*20250214 BF: betr. Reset-u ok-Button*/ +.button { background-color: white; } /*für betr. Reset-u ok-Button*/ .dropdown { --bulma-dropdown-content-background-color: white !important; @@ -45,23 +39,11 @@ a, .themenbaumLinkName, .labelSichtorComboButton { text-decoration: none; color: blue !important; } -.menu {--bulma-menu-item-background-l: unset !important;} /*20250526 BF: betr. Elemente in menue, z.B. weitere Einstellungen*/ +.menu {--bulma-menu-item-background-l: unset !important;} /*betr. Elemente in menue, z.B. weitere Einstellungen*/ -/*img { filter:brightness(.8) contrast(1.2); } /*Helligkeit wird auf 80 % des Originals reduziert; Contrast um 20% erhöht, da 1=normal)-20250526 BF: auskommentiert*/. - } -/*[data-theme=light], -.theme-light { - /* CSS Variables */ -/*} - -[data-theme=dark], -.theme-dark { - /* CSS Variables */ -/*} - -/*Weitere allgemeine Basics*/ +/*Allgemeine Basics*/ div.columns { /*für Abstand zum Seitenrand*/ margin-top: 1px; margin-right:5px; } @@ -73,9 +55,6 @@ body { /*für Seiteninhalt*/ margin: 0.1rem; } -/*body.dark-theme img { /*filter für theme dark-20250526 BF:auskommentiert*/ -/* filter:brightness(.80) contrast(1.2); } */ - .hero-body { margin-left: 1.5em; margin-right: 1.5em; } @@ -102,7 +81,7 @@ body { /*für Seiteninhalt*/ .card, .article { /*für Cardposition, -style*/ display: flex; flex-flow: column; - margin: 1%; /*171024 BF geändert von 0em*/ + margin: 1%; white-space: normal; /* für Zeilenumbrüche nach Standard-Regeln*/ word-wrap: normal; /* veraltet: für Umbrüche nach Standard-Regeln*/ overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ @@ -112,7 +91,7 @@ body { /*für Seiteninhalt*/ font-size: 12px; width: 100%; } -.card {margin-top: 0.5rem !important;} /*20240907BF ergänzt*/ +.card {margin-top: 0.5rem !important;} .card-content { padding-left: 1.3rem;} @@ -129,12 +108,11 @@ body { /*für Seiteninhalt*/ .form-submit { display: flex; - justify-content: center; column-gap: 0.5rem; background: inherit; border: none; - margin-top: 1rem; - margin-left: 2rem; } + margin-top: 1em; + margin-left: 22em; } .form-submit-item { display: flex; @@ -143,20 +121,18 @@ body { /*für Seiteninhalt*/ /*Cell*/ .container { display: flex; - flex-wrap: wrap; /* Damit die Zellen umgebrochen werden, wenn nicht genug Platz ist */ - justify-content: flex-start; /* Inhalte links */ - align-items: flex-start; /* Inhalte vertikal ausrichten */ + flex-wrap: wrap; /*für Zeilenumbruch bei Platzmangel*/ + justify-content: flex-start; /*Inhalte links*/ + align-items: flex-start; /*Inhalte vertikal ausrichten*/ margin-left: 0rem; } .cell { - flex: 1 1 auto; /*flex-grow, flex-shrink, flex-basis = ; /*für flexibles Verhalten der Zeile*/ + flex: 1 1 auto; /*flex-grow, flex-shrink, flex-basis = ; für flexibles Verhalten der Zeile*/ display: flex; /*flexibles Wachstum ohne feste Breite */ padding: 0rem 0.25rem; /*padding oben+unten, rechts+links*/ margin-bottom: 0.1rem; box-sizing: border-box; - /*width: calc(100% - 0.5rem);*/ - /*max-width: 100%;*/ border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ border-radius: 0.3em; } @@ -167,7 +143,7 @@ body { /*für Seiteninhalt*/ .breadcrumb { padding: 0.3rem; border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ - border-radius: 0.3em; } /*für Padding: ob re un li*/ + border-radius: 0.3em; } .breadcrumb.has-path-separator li + li::before { content: " >"; @@ -177,35 +153,35 @@ body { /*für Seiteninhalt*/ user-select: auto; } /*für Markierung des Inhalts */ /*Buttonleiste, div. Buttons*/ -.buttonbar { /*für resposive Buttonleiste*/ - display: flex; +.buttonbar { + display: flex; /*für resposive Buttonleiste*/ flex-flow: row wrap; justify-content: flex-start; align-items: normal; } .buttonbar img { /*für Icongröße in Buttonleiste*/ height: 1.5rem; - width: 1.7rem; /*ursprgl. 1.5*/ - margin: 8px 0px 0px 0px; /*neu 20240828 BF*/ + width: 1.7rem; + margin: 8px 0px 0px 0px; padding: 0rem 0.1rem 0rem 0.1rem; } /*für Padding: ob re un li*/ .buttonbar_text { font-size: 10px; } -.button { /*für Button-Bezeichner-Ausrichtung*/ +.button { /*für Button-Bezeichner-Ausrichtung*/ display: flex; justify-content: left !important; } -.submit_button { /* zum Abschicken, Übernehmen*/ +.submit_button { /* zum Abschicken, Übernehmen*/ border: thin solid hsl(141, 71%, 48%); /*grün*/ border-radius: 0.3em; } -.reset_button { /* zum Zurücksetzen, Leeren*/ +.reset_button { /* zum Zurücksetzen, Leeren*/ border: thin solid hsl(48, 100%, 67%); /*gelb-orange*/ border-radius: 0.3em; } -.close_button { /* zum Schließen*/ - border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ +.close_button { /*zum Schließen*/ + border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ border-radius: 0.3em; } .menubutton, .orgunitbutton, .closebutton { /*für Button-Style*/ @@ -213,11 +189,11 @@ body { /*für Seiteninhalt*/ justify-content: center; background: inherit; padding: 0.4rem 0rem 0.4rem 0rem; /*für Padding: ob re un li*/ - border: thin solid white /*hsl(48, 100%, 67%)*/; + border: thin solid white; border-radius: 0.3em; box-shadow: rgb(0 0 0 /0.1) 0.1em 1.1px; - width: 1.8rem; /*1.7rem*/ - height: 1.8rem;} /*1.7rem*/ + width: 1.8rem; + height: 1.8rem;} /*Top-, Bottom-Navigation*/ .navbar { @@ -232,103 +208,16 @@ body { /*für Seiteninhalt*/ .navbar-item { margin-bottom: 0.1rem; } -/*Webanwendungsmanager*/ /* Box-Sizing auf Border-Box setzen */ *, *::before, *::after { box-sizing: border-box; } -.nd_navi_wam { - display: flex; - max-width: 2.0rem; } /*1.7rem*/ - -.navi_wam { - position: static /*damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/ - padding: 0; } - -.navi_wam ul { /*für sichtbaren Webanwendungsmanager*/ - display: flex; - flex-flow: column; - flex: 1; - list-style: none; - padding: 0; margin: 0; - background: inherit; } - -.navi_wam a { /*für WAM-Elemente*/ - display: flex; /*block*/ - text-decoration: none; - background: #ECF0F3; /*whitesmoke;*/ - border: thin solid white /*hsl(48, 100%, 67%)*/; - border-radius: 0.3em; - box-shadow: rgb(0 0 0 /0.1) 0.1em 2.1px; - width: auto; - padding: 0.3rem 0.3rem; /*für Innenraumplatzum Text ob/un + re/li*/ - margin: 0rem; } /*für Außenabstand*/ - -.navi_wam a:hover, .navi_wam a:focus { /*für angetipptes/steuertes Element*/ - background: hsl(219, 70%, 76%); /*inherit*/ - color: white; } /*inherit*/ - -.navi_wam ul { /*für versteckten Webanwendungsmanager*/ - max-height: 0; - overflow: hidden; - padding: 0; } - -.showwam + ul { - display: flex; - flex-flow: column; - max-height: -600rem; - transition: 500ms; - overflow: initial; } - -/*Profil*/ -.nd_navi_profil { - display: flex; - max-width: 2.0rem; } - -.navi_profil { - position: static /*damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/ - padding: 0; } - -.navi_profil ul { /*für sichtbaren Profil*/ - display: flex; - flex-flow: column; - flex: 1; - list-style: none; - padding: 0; margin: 0; - background: inherit; } - -.navi_profil a { /*für Profil-Elemente*/ - display: flex; - text-decoration: none; - background: #ECF0F3; /*Memtext-Blaugrau*/ - border: thin solid white /*hsl(48, 100%, 67%)*/; - border-radius: 0.3em; - box-shadow: rgb(0 0 0 /0.1) 0.1em 2.1px; - width: auto; - padding: 0.3rem 0.3rem; /*für Innenraumplatzum Text ob/un + re/li*/ - margin: 0rem; } /*für Außenabstand*/ - -.navi_profil a:hover, .navi_profil a:focus { /*für angetipptes Element*/ - background: hsl(219, 70%, 76%); /*inherit*/ - color: white; } - -.navi_profil ul { /*für verstecktes Profil*/ - max-height: 0; - overflow: hidden; - padding: 0; } - -.showprofil + ul { - display: flex; - flex-flow: column; - max-height: -600rem; - transition: 500ms; - overflow: initial; } /*Bottom-Navi*/ -#nd_navi_bottom { /*20250130BF ergänzt*/ - position: fixed; +#nd_navi_bottom { + /*position: fixed; /*20250602 damit gesamtes Menü sichtbar ist*/ bottom: 0; width: 100%;} @@ -337,7 +226,7 @@ body { /*für Seiteninhalt*/ flex-flow: row nowrap; justify-content: center; background: #ECF0F3; /*Memtext-Blaugrau*/ - height: 45px; } /*20240911BF ergänzt*/ + height: 45px; } .bottom-nav li { /*für Bottomnav-Liste*/ display: flex; @@ -364,15 +253,7 @@ body { /*für Seiteninhalt*/ .navpanelFrame /*.navpanelFrame_ou*/ { /*zum Ausblenden gesamten NavPanels*/ display: none; } -.navpanel a { /*20240209 BF Eigenschaften deaktiviert da überlagert mit themenbaumStatic/.Nested a und li; sh. Z480+Z486*/ /*für Nav-Elemente*/ - /* display: flex; - flex:1; - text-decoration: none; - align-content: center; -/* 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 { } /*Eigenschaften deaktiviert da überlagert mit themenbaumStatic/.Nested a und li; sh. Z480+Z486*/ /*für Nav-Elemente*/ .level-center { display: flex; @@ -384,75 +265,19 @@ body { /*für Seiteninhalt*/ .panel-block { display: flex; } - -.panel-block-search { + +.panel-block-search { margin-left: 10px; } .menu-label { margin-left: 5.0%; - text-transform: unset; } /*20240812 BF geändert von uppercase*/ - -.panel-block-ebene1 { - display: flex; - flex: 1; - width: auto; - margin-left: 0%; } - -.panel-block-ebene2 { - display: flex; - flex: 1; - width: auto; - margin-left: 10.0%; } - -.panel-block-ebene3 { - display: flex; - flex: 1; - width: auto; - margin-left: 15.0%; } - -.panel-block-ebene4 { - display: flex; - flex: 1; - width: auto; - margin-left: 20.0%; } - -.panel-block-ebene5 { - display: flex; - flex: 1; - width: auto; - margin-left: 25.0%; } - -.panel-block-ebene6 { - display: flex; - flex: 1; - width: auto; - margin-left: 30.0%; } - -.panel-block-ebene7 { - display: flex; - flex: 1; - width: auto; - margin-left: 35.0%; } - -.panel-block-ebene8 { - display: flex; - flex: 1; - width: auto; - margin-left: 40.0%; } - -.panel-block-ebene9 { - display: flex; - flex: 1; - width: auto; - margin-left: 45.0%; } - + text-transform: unset; } + .panel-icon { margin: 2%; }*/ - + /***Auf-/Zuklappen von Themenbaum/ThemenbaumNested***/ -.themenbaumStatic li, themenbaumNested li { -/* margin: 0.1rem; */ -} +.themenbaumStatic li, themenbaumNested li { }/*erforderlich für initial zusammengklappten Themenbaum*/ .themenbaumNested { /*zum Auf-/Zuklappen*/ display: none; @@ -468,20 +293,47 @@ body { /*für Seiteninhalt*/ margin-left: 23px; width: 310px; border-bottom: 0.3px solid #ccccccff; - box-sizing: border-box; /* Beinhaltet Padding und Border in der Breitenberechnung */ - margin-top: 0; /* 20240910 Verhindert zusätzlichen Freiraum oberhalb */ - margin-bottom: 0; /* 20240910 Verhindert zusätzlichen Freiraum unterhalb */ + box-sizing: border-box; /* Beinhaltet Padding und Border in der Breitenberechnung*/ + margin-top: 0; /* ohne zusätzlichen Freiraum oberhalb*/ + margin-bottom: 0; /* ohne zusätzlichen Freiraum unterhalb*/ } .themenbaumNested li.themenbaumEintrag { /*für ListElemente*/ width: 95%; - border-bottom: 0.3px dotted lightgrey /*#ccccccff*/; + border-bottom: 0.3px dotted lightgrey; + box-sizing: border-box; /* Verhindert überschüssige Breitenänderungen */ + margin-top: 0; /* ohne zusätzlichen Freiraum oberhalb */ + margin-bottom: 0; /* ohne zusätzlichen Freiraum unterhalb */ +} + +.panel-block-ebene1 { /*20250704 ergänzt*/ + width: 310px; + border-top: 0.3px solid #ccccccff; + box-sizing: border-box; /* Beinhaltet Padding und Border in der Breitenberechnung*/ + margin-top: -20px; + margin-bottom: 0; + margin-left: 0.5em; +} + +.panel-block-ebene2 { /*20250704 ergänzt*/ + width: 95%; + border-bottom: 0.3px dotted lightgrey; box-sizing: border-box; /* Verhindert überschüssige Breitenänderungen */ - margin-top: 0; /* 20240910 Kein zusätzlicher Freiraum oberhalb */ - margin-bottom: 0; /* 20240910 Kein zusätzlicher Freiraum unterhalb */ + margin-top: -20px; + margin-bottom: 0; + margin-left: 2.5em; +} + +.panel-block-ebene3 { /*20250704 ergänzt*/ + width: 80%; + border-bottom: 0.3px dotted lightgrey; + box-sizing: border-box; /* Verhindert überschüssige Breitenänderungen */ + margin-top: -20px; + margin-bottom: 0; + margin-left: 4.5em; } -.themenbaumStatic a, themenbaumNested a { /*für BaumElemente*/ +.themenbaumStatic a, .themenbaumNested a { /*für BaumElemente*/ font-family: sans-serif; font-weight: normal; font-size: 12px; @@ -494,11 +346,11 @@ a.themenbaumLink:hover, a.themenbaumLink:focus { /*für Hervorhebung bei Anwahl* background-color: transparent;} .themenbaumEintrag { - display: block; /* Zeigt jedes Thema als Blockelement, sodass es vertikal gestapelt wird */ + display: block; /*Zeigt jedes Thema als Blockelement, sodass es vertikal gestapelt wird */ } -.themenbaumLink { - display: inline-flex; /* Flexbox sorgt dafür, dass die Icons und der Text korrekt ausgerichtet sind */ +.themenbaumLink, .panel-item { /*20250704 panel-item ergänzt*/ + display: inline-flex; /* Flexbox sorgt dafür, dass Icons und Text korrekt ausgerichtet sind */ align-items: baseline; /* Vertikale Zentrierung von Icon und Text */ } @@ -509,9 +361,6 @@ a.themenbaumLink:hover, a.themenbaumLink:focus { /*für Hervorhebung bei Anwahl* display: block; /* Block, um Zeilenumbrüche zu unterstützen */ } -.themenbaumSpacer { /*???*/ - /*padding-left: 10px;*/ } - .themenbaumLinkWithSpace { text-decoration: none; /*keine Unterstreichung für Links */ box-decoration-break: clone; @@ -559,9 +408,6 @@ ol.themenbaumSearchResults { /*für Suchergebnisse*/ width: 1.0rem; height: 0.8rem; } -.hidenavpanel + ul { /*//zum Ausblenden des NavPanels alterntiv zu display: none*/ - display: none; } - .closenavpanel.closebutton::before { /*für Buttonanzeige bei geschlossenem NavPanel*/ display: flex; content: url(../images/burger.svg); } @@ -605,7 +451,6 @@ ol.themenbaumSearchResults { /*für Suchergebnisse*/ .label-container, .button-label { /*für einh.responsive Feldbezeichner; vgl. dazu auch: sx_menu.css*/ display: flex; - /*justify-content: right; /*20240619BF geändert*/ background: inherit; min-width: 7.5rem; /*für kleine Viewports*/ width: 100%; } @@ -657,20 +502,19 @@ ol.themenbaumSearchResults { /*für Suchergebnisse*/ .field { margin-left: 1%; - align-items: center; /*für horizontale Label-Ausrichtung*/ - /*width: 250px;*/ } /*Labelbreite=Abstand zum Eingabefeld; 28082024 deaktiviert*/ + align-items: center; } /*für horizontale Label-Ausrichtung*/ .field-body { /*für Feldhöhe/-abstand*/ height: 1.2rem } -.input, .select select, is-small.input { /*20250528 BF is-small.input ergänzt*/ +.input, .select select, is-small.input { padding-left: 10px; - border-radius: 0.2em !important; } /*20250528 BF important ergänzt*/ + border-radius: 0.2em !important; } input.schluesselfeld { font-size:0.9em; background-color:#ffffcc; - color:blue + color: blue; } input.ndSchluesselfeld { @@ -688,7 +532,7 @@ input.ndSchluesselfeld { color: darkgrey /*rgba(54, 54, 54, 0.3)*/; } .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { - color: darkgrey /*(54, 54, 54, 0.3);*/; } + color: darkgrey /*rgba (54, 54, 54, 0.3);*/; } .trennung { -webkit-hyphens: auto; @@ -696,15 +540,6 @@ input.ndSchluesselfeld { .required:before { content: "* ";} /*Kennz. für obligatorische Eingabefelder*/ -/*.comboDiv { /*20241102 BF: deaktivert, da hier unnötig, weil in sx_sichtauswahl definiert*/ - /* background-color: white; - border-radius: 0.5em; - padding-left: 0.5em;*/ - /*legt max. sichtbare Höhe u. vertikalen Scrollbalken fest, wir wollen aber keinen Scrollbalken: - max-height: 700px; - overflow-y: auto;*/ /*fixiert an position*/ -/*}*/ - .field-container { display: flex; flex-direction: column; /* Ordnet alle Felder vertikal */ @@ -720,16 +555,16 @@ input.ndSchluesselfeld { /* Tooltip-Stil und Positionen */ .field.has-addons .control .select select, .input, -.field.has-addons .control .button { /*20250528 BF eingefügt*/ +.field.has-addons .control .button { height: 2.5em; border: thin solid hsl(0, 0%, 71%); } /*hellgrau*/ } -.field.has-addons .control:not(:last-child) { /*20250528 BF eingefügt*/ +.field.has-addons .control:not(:last-child) { margin-right: -2px; /* damit sich die Ränder optisch überlagern */ } -.button.has-tooltip-bottom { /*20250528 BF eingefügt*/ +.button.has-tooltip-bottom { height: 2.5em; /* entspricht der Höhe des Eingabeldes*/ } @@ -748,8 +583,8 @@ input.ndSchluesselfeld { 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*/ + white-space: wrap; /* für Zeilenumbrüche nach Standard-Regeln*/ + overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ hyphens: auto; } /*Listen*/ @@ -776,7 +611,7 @@ li.submenu_listelem { } .submenu_listelem:hover, .submenu_listelem:focus { - background-color: white; } /*#eaeaea;*/ + background-color: white; } /*Modal Cards*/ .box-new { /*für Kopfzeile mit Close-Button*/ @@ -786,7 +621,7 @@ li.submenu_listelem { } .modalValues { - background-color: #ECF0F3; /*whitesmoke;*/ /*für Abschnitthintergrund, Schrift*/ + background-color: #ECF0F3; /*für Abschnitthintergrund, Schrift*/ font-size: 0.8em; } @@ -801,13 +636,9 @@ li.submenu_listelem { span.feldname {font-weight:medium; } span.feldwert {font-weight:bolder; } - - /*Logobuttons und Icons*/ -img.svg_icon{ - height:20px; -} +img.svg_icon { height:20px; } .icon_themenbaum_admin_small{content:url(../images/logobutton_kern.svg);height:20px;width:20px;display:inline;} .icon_themenbaum_admin_normal{content:url(../images/logobutton_kern.svg);height:100px;width:100px;display:inline;}