/** * In dieser CSS Datei soll alles landen, was die PrimeFaces betrifft... * Dabei ist zwingend darauf zu achten, dass unsere Überschreibung immer mit einer ID * arbeitet... da die originale CSS Datei HINTER unserer CSS Datei im Source landet. * Ohne eine #ID können wir das originale CSS nicht überladen! */ #body .ui-tabs .ui-tabs-panels { background: var(--color-background-box); border: 1px solid #8ac; border-radius: 0 0 var(--border-radius-tabs) var(--border-radius-tabs); border-top: 2px solid var(--color-border-active); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); display: inline-block; min-width: 100%; } #body .notMaximized .ui-tabs .ui-tabs-panels { min-width: auto; } #body .ui-tabs .ui-tabs-panel { padding: 10px; } #body .ui-tabs .ui-tabs-nav li { border: 1px solid var(--color-border-soft); border-radius: var(--border-radius-tabs) var(--border-radius-tabs) 0 0; border-bottom: none; margin: 0 3px 1px 0; background: var(--color-shade-soft-two); background: linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two)); background: -o-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two)); background: -ms-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two)); background: -moz-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two)); background: -webkit-linear-gradient(top, var(--color-shade-soft-one), var(--color-shade-soft-two)); } #body .ui-tabs .ui-tabs-nav li.ui-tabs-selected { border-color: var(--color-border-active); font-weight: bold; background: var(--color-shade-active-two); background: linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two)); background: -o-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two)); background: -ms-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two)); background: -moz-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two)); background: -webkit-linear-gradient(top, var(--color-shade-active-one), var(--color-shade-active-two)); } #body .ui-tabs .ui-tabs-nav li:hover { border-color: #039; } #body .ui-tabs .ui-tabs-nav li a { color: #000; padding: 4px 8px 3px 8px; } #body .ui-tabs form > div.footer { margin: 10px -10px -10px -10px; } /** * Die folgenden Eigenschaften gelten dem ... * * NOTE: Das ist nur WIP... ich habe das nicht bis zu Ende durch gezogen. * Statt dessen bin ich auf TabellenDelegate.css umgestiegen! */ #body .ui-datatable { width: 100%; border: none; } #body .ui-datatable table { table-layout: auto; } #body .ui-datatable tbody td { border: none; /* reset */ overflow: visible; width: auto; } #body .ui-datatable > div > table > thead th, #body .ui-datatable > div > table > tbody td, #body .ui-datatable > div > table > tfoot td { border: 1px solid var(--color-border-soft); padding: 4px; } #body .ui-datatable-header { border: 1px solid var(--color-border-soft); background: #ccc; background: linear-gradient(top, var(--color-table-head-one), #ccc); background: -o-linear-gradient(top, var(--color-table-head-one), #ccc); background: -ms-linear-gradient(top, var(--color-table-head-one), #ccc); background: -moz-linear-gradient(top, var(--color-table-head-one), #ccc); background: -webkit-linear-gradient(top, var(--color-table-head-one), #ccc); font-size: 13px; font-weight: bold; text-align: left; } #body .ui-datatable > div > table > thead { background: var(--color-table-sort-two); background: linear-gradient(top, var(--color-table-sort-one), var(--color-table-sort-two)); background: -o-linear-gradient(top, var(--color-table-sort-one), var(--color-table-sort-two)); background: -ms-linear-gradient(top, var(--color-table-sort-one), var(--color-table-sort-two)); background: -moz-linear-gradient(top, var(--color-table-sort-one), var(--color-table-sort-two)); background: -webkit-linear-gradient(top, var(--color-table-sort-one), var(--color-table-sort-two)); } #body .ui-datatable > div > table > tfoot { background: #cdc; background: linear-gradient(top, #bcb, #efe); background: -o-linear-gradient(top, #bcb, #efe); background: -ms-linear-gradient(top, #bcb, #efe); background: -moz-linear-gradient(top, #bcb, #efe); background: -webkit-linear-gradient(top, #bcb, #efe); text-align: inherit; } #body .ui-datatable-even { background: #fff; } #body .ui-datatable-odd { background: #eee; } #body tr.selected { background: var(--color-table-row-selected); } /* disabled tabs */ * li.ui-state-disabled, li.ui-state-disabled:hover { background: #eee; background: linear-gradient(top, #fff, #eee); background: -o-linear-gradient(top, #fff, #eee); background: -ms-linear-gradient(top, #fff, #eee); background: -moz-linear-gradient(top, #fff, #eee); background: -webkit-linear-gradient(top, #fff, #eee); } #body .ui-tabs .ui-tabs-nav li.ui-state-disabled a { color: #aaa; } /** * Die folgenden Eigenschaften gelten dem ... */ #body *.ui-tree { width: 100%; box-sizing: border-box; } #body *.ui-tree a { color: black; text-decoration: none; vertical-align: middle; } #body *.ui-treenode-leaf-icon, #body *.ui-icon { width: 14px; height: 14px; text-indent: 0; display: inline-block; } #body *.ui-treenode-leaf-icon::before, #body *.ui-icon-triangle-1-s::before, #body *.ui-icon-triangle-1-e::before { font-family: FontAwesome; font-size: 12px; color: #aaa; padding-left: 3px; } #body *.ui-treenode-leaf-icon:hover::before, #body *.ui-icon:hover::before { color: #000 ; } #body *.ui-treenode-leaf-icon::before { content: "\f0da"; padding-left: 8px; } #body *.ui-icon-triangle-1-s::before { content: "\f056"; } #body *.ui-icon-triangle-1-e::before { content: "\f055"; } #body *.ui-treenode.selected > *.ui-treenode-content { background: #def; } #body *.ui-treenode-label { padding: 0; display: inline; /* Damit es VOR dem ::BEFORE stopp macht... */ } #body *.ui-treenode-content { width: 100%; height: 18px; display: block; border-radius: 3px; vertical-align: middle; overflow: hidden; /* Damit es VOR dem ::BEFORE stopp macht... */ text-overflow: ellipsis; } #body *.ui-treenode-content input[type=image] { margin: 0 4px; vertical-align: middle; } #body *.ui-treenode-content:hover { background: #eee; } #body *.ui-treenode-content.ui-draggable { cursor: auto; /* Ich lass den erst mal wie er ist... */ } #body *.ui-droppable-active { opacity: 0.5; } #body *.ui-droppable-active.ui-draggable-active, #body *.ui-treenode-content.ui-draggable-active, #body *.ui-treenode-content.ui-droppable-hover { opacity: 1.0; background: #beb !important; } #body *.ui-tree-draghelper.ui-draggable-dragging { border: 1px solid blue; border-radius: 3px; background: rgba(255,255,255,0.5); } #body *.ui-tree-draghelper.ui-draggable-dragging::before { content: "Bitte an geeigneter Stelle fallen lassen..."; margin-left: 4px; margin-top: 2px; display: inline-block; } #body *.ui-tree-droppoint { height: 0; /* drückt sonst alles auseinander - ist eigentlich für DnD zwischen den Knoten gedacht! */ } /** * EURNEU-10013: Icons für bestimmte Arten von Features... * A1E-1269: Und jetzt auch für Formular-Elemente... */ #body .ui-treenode.mandatory > *.ui-treenode-content::before, #body .ui-treenode.auto > *.ui-treenode-content::before, #body .ui-treenode.condition > *.ui-treenode-content::before, #body .ui-treenode.indirekt > *.ui-treenode-content::before, #body .ui-treenode.timed > *.ui-treenode-content::before, #body .ui-treenode.stackable > *.ui-treenode-content::before { font: normal normal normal 14px/1 FontAwesome; float: right; color: #888; margin: 2px; } /** Alles einzeln... */ #body .ui-treenode.mandatory > *.ui-treenode-content::before { content: "\f069"; } #body .ui-treenode.auto > *.ui-treenode-content::before { content: "\f144"; } #body .ui-treenode.condition > *.ui-treenode-content::before { content: "\f059"; } #body .ui-treenode.indirekt > *.ui-treenode-content::before { content: "\f057"; } #body .ui-treenode.timed > *.ui-treenode-content::before { content: "\f017"; } #body .ui-treenode.stackable > *.ui-treenode-content::before { content: "\f24d"; } /** Alle Paare... */ #body .ui-treenode.mandatory.auto > *.ui-treenode-content::before { content: "\f069 \f144"; } #body .ui-treenode.mandatory.condition > *.ui-treenode-content::before { content: "\f069 \f059"; } #body .ui-treenode.mandatory.indirekt > *.ui-treenode-content::before { content: "\f069 \f057"; } #body .ui-treenode.mandatory.timed > *.ui-treenode-content::before { content: "\f069 \f017"; } #body .ui-treenode.mandatory.stackable > *.ui-treenode-content::before { content: "\f069 \f24d"; } #body .ui-treenode.auto.condition > *.ui-treenode-content::before { content: "\f144 \f059"; } #body .ui-treenode.auto.indirekt > *.ui-treenode-content::before { content: "\f144 \f057"; } #body .ui-treenode.auto.timed > *.ui-treenode-content::before { content: "\f144 \f017"; } #body .ui-treenode.auto.stackable > *.ui-treenode-content::before { content: "\f144 \f24d"; } #body .ui-treenode.condition.indirekt > *.ui-treenode-content::before { content: "\f059 \f057"; } #body .ui-treenode.condition.timed > *.ui-treenode-content::before { content: "\f059 \f017"; } #body .ui-treenode.condition.stackable > *.ui-treenode-content::before { content: "\f059 \f24d"; } #body .ui-treenode.indirekt.timed > *.ui-treenode-content::before { content: "\f057 \f017"; } #body .ui-treenode.indirekt.stackable > *.ui-treenode-content::before { content: "\f057 \f24d"; } #body .ui-treenode.timed.stackable > *.ui-treenode-content::before { content: "\f017 \f24d"; } /** Alle Tripple... */ #body .ui-treenode.mandatory.auto.condition > *.ui-treenode-content::before { content: "\f069 \f144 \f059"; } #body .ui-treenode.mandatory.auto.indirekt > *.ui-treenode-content::before { content: "\f069 \f144 \f057"; } #body .ui-treenode.mandatory.auto.timed > *.ui-treenode-content::before { content: "\f069 \f144 \f017"; } #body .ui-treenode.mandatory.auto.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f24d"; } #body .ui-treenode.mandatory.condition.indirekt > *.ui-treenode-content::before { content: "\f069 \f059 \f057"; } #body .ui-treenode.mandatory.condition.timed > *.ui-treenode-content::before { content: "\f069 \f059 \f017"; } #body .ui-treenode.mandatory.condition.stackable > *.ui-treenode-content::before { content: "\f069 \f059 \f24d"; } #body .ui-treenode.mandatory.indirekt.timed > *.ui-treenode-content::before { content: "\f069 \f057 \f017"; } #body .ui-treenode.mandatory.indirekt.stackable > *.ui-treenode-content::before { content: "\f069 \f057 \f24d"; } #body .ui-treenode.mandatory.timed.stackable > *.ui-treenode-content::before { content: "\f069 \f017 \f24d"; } #body .ui-treenode.auto.condition.indirekt > *.ui-treenode-content::before { content: "\f144 \f059 \f057"; } #body .ui-treenode.auto.condition.timed > *.ui-treenode-content::before { content: "\f144 \f059 \f017"; } #body .ui-treenode.auto.condition.stackable > *.ui-treenode-content::before { content: "\f144 \f059 \f24d"; } #body .ui-treenode.auto.indirekt.timed > *.ui-treenode-content::before { content: "\f144 \f057 \f017"; } #body .ui-treenode.auto.indirekt.stackable > *.ui-treenode-content::before { content: "\f144 \f057 \f24d"; } #body .ui-treenode.auto.timed.stackable > *.ui-treenode-content::before { content: "\f144 \f017 \f24d"; } #body .ui-treenode.condition.indirekt.timed > *.ui-treenode-content::before { content: "\f059 \f057 \f017"; } #body .ui-treenode.condition.indirekt.stackable > *.ui-treenode-content::before { content: "\f059 \f057 \f24d"; } #body .ui-treenode.condition.timed.stackable > *.ui-treenode-content::before { content: "\f059 \f017 \f24d"; } #body .ui-treenode.indirekt.timed.stackable > *.ui-treenode-content::before { content: "\f057 \f017 \f24d"; } /** Alle 4er... */ #body .ui-treenode.mandatory.auto.condition.indirekt > *.ui-treenode-content::before { content: "\f069 \f144 \f059 \f057"; } #body .ui-treenode.mandatory.auto.condition.timed > *.ui-treenode-content::before { content: "\f069 \f144 \f059 \f017"; } #body .ui-treenode.mandatory.auto.condition.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f059 \f24d"; } #body .ui-treenode.mandatory.auto.indirekt.timed > *.ui-treenode-content::before { content: "\f069 \f144 \f057 \f017"; } #body .ui-treenode.mandatory.auto.indirekt.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f057 \f24d"; } #body .ui-treenode.mandatory.auto.timed.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f017 \f24d"; } #body .ui-treenode.auto.condition.indirekt.timed > *.ui-treenode-content::before { content: "\f144 \f059 \f057 \f017"; } #body .ui-treenode.auto.condition.indirekt.stackable > *.ui-treenode-content::before { content: "\f144 \f059 \f057 \f24d"; } #body .ui-treenode.auto.condition.stackable.timed > *.ui-treenode-content::before { content: "\f144 \f059 \f24d \f017"; } #body .ui-treenode.auto.stackable.indirekt.timed > *.ui-treenode-content::before { content: "\f144 \f24d \f057 \f017"; } #body .ui-treenode.stackable.condition.indirekt.timed > *.ui-treenode-content::before { content: "\f24d \f059 \f057 \f017"; } /** Alle 5er... */ #body .ui-treenode.mandatory.auto.condition.indirekt.timed > *.ui-treenode-content::before { content: "\f069 \f144 \f059 \f057 \f017"; } #body .ui-treenode.mandatory.auto.condition.indirekt.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f059 \f057 \f24d"; } #body .ui-treenode.mandatory.auto.condition.timed.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f059 \f017 \f24d"; } #body .ui-treenode.mandatory.auto.indirekt.timed.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f057 \f017 \f24d"; } #body .ui-treenode.mandatory.condition.indirekt.timed.stackable > *.ui-treenode-content::before { content: "\f069 \f059 \f057 \f017 \f24d"; } /** Alles zusammen... */ #body .ui-treenode.mandatory.auto.condition.indirekt.timed.stackable > *.ui-treenode-content::before { content: "\f069 \f144 \f059 \f057 \f017 \f24d"; } /** * Hier einige Angaben für . Die Breite des Eingabefeldes lässt sich auch über das size-Attribut steuern. * Für Datumsfelder passt size="10" gut, für Timestamp size="16". */ #body .ui-inputfield { padding: 1px; } #body .ui-calendar { width: 120px; display: inline-block; } #body .ui-calendar.stretch { width: 100%; } /** * Bei von-bis-Angaben ist die Style-Class wAuto häufig günstig, weil das Eingabefeld in einen größeren span gekapselt wird, * was dazu führt, dass das "bis" nicht mittig zwischen den Eingabefeldern steht. * (Um "form.formular div.element div.input input[type=text]" zu überschreiben, müssen wir hier auch die input[type=text]-Varante definieren.) */ #body .ui-calendar.wAuto, #body .ui-calendar.wAuto input[type=text] { width: auto; } #body .ui-datepicker { background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.25); border-radius: 3px; padding: 2px; } #body .ui-datepicker .ui-datepicker-header { background: var(--color-shade-hard-two); background: linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two)); background: -o-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two)); background: -ms-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two)); background: -moz-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two)); background: -webkit-linear-gradient(top, var(--color-shade-hard-one), var(--color-shade-hard-two)); } #body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::after, #body .ui-datepicker .ui-datepicker-header .ui-datepicker-next::after { font: normal normal normal 14px/1 FontAwesome; float: right; color: #888; margin: 5px 8px; } #body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev::after { content: "\f0d9"; } #body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev span { display: none; } #body .ui-datepicker .ui-datepicker-header .ui-datepicker-next::after { content: "\f0da"; } #body .ui-datepicker .ui-datepicker-header .ui-datepicker-next span { display: none; } #body .ui-datepicker .ui-datepicker-calendar { margin: 0; } #body .ui-datepicker .ui-datepicker-calendar thead { background: var(--color-shade-soft-one); background: linear-gradient(top, #fff, #eee); background: -o-linear-gradient(top, #fff, #eee); background: -ms-linear-gradient(top, #fff, #eee); background: -moz-linear-gradient(top, #fff, #eee); background: -webkit-linear-gradient(top, #fff, #eee); } #body .ui-datepicker .ui-datepicker-calendar tbody td { background: #fff; border: 1px solid #aaa; } #body .ui-datepicker .ui-datepicker-calendar tbody td:hover { background: #def; } #body .ui-datepicker .ui-datepicker-calendar tbody td a { color: #000; text-align: center; } #body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-week-end { background: #eee; } #body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-unselectable { background: #ddd; } #body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-today { background: #dfd; } #body .ui-datepicker .ui-datepicker-calendar tbody .ui-datepicker-current-day { background: #cde; } #body .ui-datepicker .ui-datepicker-title select { margin: 0 2px; } #body .ui-datepicker .ui-datepicker-buttonpane { margin: 3px 0; background: var(--color-shade-soft-one); background: linear-gradient(top, #fff, #eee); background: -o-linear-gradient(top, #fff, #eee); background: -ms-linear-gradient(top, #fff, #eee); background: -moz-linear-gradient(top, #fff, #eee); background: -webkit-linear-gradient(top, #fff, #eee); } #body .ui-datepicker .ui-datepicker-buttonpane button { background: #fff; margin: 3px; padding: 1px 4px; font-size: 11px; border-radius: 3px; } #body .ui-datepicker .ui-datepicker-buttonpane button:hover { background: #eee; } #body .ui-datepicker .ui-timepicker-div { font-size: 0.8em; } #body .ui-datepicker .ui-slider { background: #ccc; border: 1px solid #555; border-radius: 3px; } #body .ui-datepicker .ui-slider .ui-slider-handle { border: 1px solid #000; border-radius: 3px; box-shadow: 1px 1px 5px rgba(0,0,0,0.25); background: var(--color-shade-soft-one); background: linear-gradient(top, #fff, #eee); background: -o-linear-gradient(top, #fff, #eee); background: -ms-linear-gradient(top, #fff, #eee); background: -moz-linear-gradient(top, #fff, #eee); background: -webkit-linear-gradient(top, #fff, #eee); } /** * Mit dem Upgrade von PrimeFaces 6.2 auf 8.0 gab es unerwartete Probleme mit der Positionierung des Overlay bei unseren modalen Dialogen. * Mit A1E-3899 konnte es auf das folgende CSS eingegrenzt werden. Wir werden sehen, ob sich daraus unerwartet weitere Probleme ergeben. */ #body .ui-tabs { position: inherit; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } /** * Mit PrimeFaces v10 kommt der dazu, den wir etwas besser stylen können, damit er auch im DarkMode funktioniert. */ #body .ql-snow .ql-fill { fill: var(--color-default); } #body .ql-snow .ql-stroke { stroke: var(--color-default); } #body .ql-snow .ql-picker { color: var(--color-default); } #body .ql-snow .ql-picker-options { background-color: var(--color-background); } /* A1E-17279: Wir wollen scrollen, wenn der Editor DISABLED ist! */ #body .ui-texteditor.ui-state-disabled { pointer-events: revert; } #body .ql-editor p { margin: revert; } #body .ql-editor { background-color: var(--color-input); border-radius: 0 0 var(--border-radius-buttons) var(--border-radius-buttons); } #body .ql-container.ql-disabled .ql-editor { background-color: var(--color-input-disabled); border-radius: var(--border-radius-buttons); } #body .ql-toolbar.ql-snow { border-radius: var(--border-radius-buttons) var(--border-radius-buttons) 0 0; } #body .ql-container.ql-snow { background-color: var(--color-input); border-radius: 0 0 var(--border-radius-buttons) var(--border-radius-buttons); } #body .ql-container.ql-snow.ql-disabled { background-color: var(--color-input-disabled); border-radius: var(--border-radius-buttons); } #body .ql-snow.ql-toolbar:after { display: initial; /* Sonst ist der Toolbar im klassischen Formular viel zu groß. */ } /* Das PopUp beim Bearbeiten eines Links muss ein wenig korrigiert werden. */ #body .ql-snow .ql-tooltip { background-color: var(--color-background); color: var(--color-default); left: 50% !important; /* horizontal zentrieren */ transform: translateX(-50%); } #body .ql-snow .ql-tooltip input[type=text] { width: 350px; } /* Die H1 wird im Dialog (Modal) ungewollt gestört. */ #body .ql-snow .ql-editor h1 { font-size: 1.5em; background: revert; margin: revert; padding: revert; line-height: revert; min-height: revert; box-shadow: revert; border-bottom: revert; } #body .ql-snow .ql-editor h2 { font-size: 1.25em; } /* A1E-17105: Der RichEditor ergänzt beim Anzeigen von
    und
      immer automatisch * ein


      , welches dort aber nichts zu suchen hat. Damit das nicht * zu optischen Effekten kommt, blende ich das Element künstlich aus. */ ul + p:has(> br:only-child), ol + p:has(> br:only-child) { display: none; }