/* Dieser pixel-Wert wird in der ecadiaMobile.js abgefragt. Sollte er hier verändert werden, dann auch dort. Stichwort toggleSidebar */ /* Die Sidebar verhält sich auf dem Desktop anderst. Das sind die Regeln hier*/ /*------------------------VARIABLES-----------------------*/ :root { --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --svg-accordion-collapsed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black' %3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --svg-accordion-notcollapsed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white' %3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /*Es gibt wenige CSS-Pseudoelemente die als Font-AwesomeIcon angezeigt werden. Die brauchen immer eine Font. Damit die nur an einer Stelle geändert werden muss hier die Font in eine Variable gelegt*/ --fa-font-ecadia: "Font Awesome 6 Pro"; } /*--------------------------------------------------------*/ /*------------------------FONTS-----------------------*/ body { font-family: var(--bs-font-sans-serif); background-color: var(--color-bg-body); color: var(--color-text); } /*----------------------------------------------------*/ /*--------------------- GENERAL ----------------------*/ /* Bisher sind alle Links immer blau und unterstrichen, das sieht aber etwas blöd aus*/ a { text-decoration: none; color: var(--color-text-link); cursor: pointer; } a:hover:not(.nav-link):not(.btn):not(.dropdown-item):not(.nav_link):not(.monthCalendar-dayButton) { text-decoration: none; color: var(--color-text-link); /* das sollte --color-text-primary-hover sein?? */ } h1 { color: var(--color-header-1); } h2 { color: var(--color-header-2); } a.link-action:hover { text-decoration: underline; cursor: pointer; } /* das wird seltsamer weise auf 2rem definiert */ ol, ul { padding-left: 0; } /*Standardmäßig ist ein großer margin-bottom, sodass der optische Bezug zum Input nicht optimal ist */ .form-label { margin-bottom: 0.2rem; margin-top: 0.3rem; /* in der Summe ist das wieder 0.5rem */ } /* generell bei den Checkboxen den Pionter anzeigen, damit man sieht, dass eine aktion möglich ist */ .form-check-label, .form-check-label .form-check-input { cursor: pointer; } .form-check-input:checked { border-color: var(--color-bg-quaternary); } .form-check-input:checked { background-color: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-bg-primary); } .form-switch.form-switch-md { padding-left: 3.5em; height: 2.0em; } .form-switch.form-switch-md .form-check-input { margin-left: -3.5em; height: 1.5em; width: 3em; } .form-switch.form-switch-md .form-check-label { padding-top: 0.5em; } .form-switch.form-switch-lg { padding-left: 8.5em; height: 4.5em; } .form-switch.form-switch-lg .form-check-input { margin-left: -8.5em; height: 4em; width: 8em; } .form-switch.form-switch-lg .form-check-label { padding-top: 1.5em; } img.filter-invert-50 { filter: invert(0.5); } img.filter-invert-100 { filter: invert(1); } nav.bg-ecadia-navbar { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); height: var(--header-inner-height); box-shadow: -1px 12px 27px 3px rgb(0 0 0 / 18%); -webkit-box-shadow: -1px 12px 27px 3px rgb(0 0 0 / 18%); -moz-box-shadow: -1px 12px 27px 3px rgba(0, 0, 0, 0.18); flex-wrap: nowrap; /* background: linear-gradient(170deg, var(--color-bg-quaternary), var(--color-bg-tertiary)); */ } .navbar-nav .dropdown-menu[data-bs-popper] { right: 0px; left: unset; } nav.bg-ecadia-navbar .navbar .navbar-nav .nav-link, nav.bg-ecadia-navbar .nav-item .nav-link { color: var(--color-text-secondary); } .pageSubHeader { font-size: 0.4em; display: block; color: #565656; margin-top: 10px; } .header .navbar .navbar-nav .nav-link:hover, .header .nav-item .nav-link, .header .navbar .navbar-nav .nav-link:focus { color: var(--color-text-secondary-hover); } img.select2Icon { vertical-align: baseline; margin-right: 10px; } /* Große Checkboxen vor allem in Listen vorne (employeeGroup, enrollModules) */ input.bigCheckbox { width: 25px; height: 25px; } /* HTML wird zum Teil so zusammengebaut durch TrainingProduct.getMobileButtonText */ /* ?bergangsl?sung sobald die Methode da kein h3 mehr reinschreibt sollte die Regel entfernt werden */ /* NMA 15.02.2022*/ .btn>h3, a>h3, input[type=button]>h3, button>h3 { display: inline; } .table-hover>tbody>tr:hover { --bs-table-accent-bg: var(--bs-table-hover-bg); } .modal { /* Oben und unten ist der Standar 1rem relativ viel */ --bs-modal-padding: 0.5rem 1rem 0.5rem 1rem; } .modal-content { background-color: var(--color-bg-body); } .modal .ecadia-alert { padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; } /* ein Trick: damit leere alert-Bereiche keinen Platz wegnehmen */ .modal .ecadia-alert:empty { display: none; } #ecadiaAlert { position: sticky; top: 60px; z-index: 100; background-color: var(--color-bg-body); } #ecadiaAlert .ecadia-alert { margin-bottom: 0.5rem; } .mobile-list .card a.stretched-link:focus-visible:after { background-color: var(--color-bg-primary-hover); opacity: 0.5; } .mobile-list .list-group-item a.stretched-link:focus-visible:after { background-color: var(--color-bg-quaternary-hover); opacity: 0.5; } /* form-controls mit unseren Farben - Aber Achtung: required hat eine eigene Farbe */ .form-control, select:not(required) .select2.select2-container--default .select2-selection, /* NMA 03.08.22 Ist wahrscheinlich überflüssig */ select:not(required) .select2.select2-container--default.select2-container--disabled .select2-selection, /* NMA 03.08.22 Ist wahrscheinlich überflüssig */ select.form-control:not(.requiredInput)+span .select2-selection { background-color: var(--color-bg-body); color: var(--color-text); } #searchHeaderInput.form-control, #searchHeaderInput.form-control:focus { background-color: var(--color-bg-secondary); color: var(--color-secondary); } li.autocomplete-result-entry { padding: 0.2em 0.8em 0.2em 0; } /**Icons in der Schnellsuche oben sollen immer eine bestimmte Größe haben. Das soll nicht vom Text daneben oder der größe des Icons abhängen */ .autocomplete-result-entry .img-thumbnail { max-width: 24px; min-width: 24px; text-align: center; line-height: 24px; height: 24px; /* soll ja ein quadratisches Icon sein */ } .form-control:disabled, .form-control[readonly]:not(.flatpickr, .flatpickr-timepicker), .select2.select2-container--default.select2-container--disabled .select2-selection { background-color: var(--color-bg-body); color: var(--color-text); filter: brightness(0.75); opacity: .50; } .form-control:focus { color: var(--color-text); background-color: var(--color-bg-body); border-color: var(--color-bg-primary); box-shadow: 0 0 0 0.15rem var(--color-bg-primary); } .form-control::placeholder { color: var(--color-text); opacity: 0.5; filter: grayscale(0.6); } .select2.select2-container--default .select2-selection .select2-selection__rendered { color: var(--color-text); } .select2-selection { background-color: var(--color-bg-body) } .select2-search__field { color: var(--color-text); } .select2-container--default .select2-dropdown { background-color: var(--color-bg-body); } .select2-container--default .select2-dropdown .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted[aria-selected] { background-color: var(--color-bg-primary); } .select2-container--default .select2-dropdown .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { background-color: var(--color-bg-body); filter: brightness(0.75); } .select2-selection__choice { background-color: var(--color-bg-quaternary) !important; color: var(--color-text); border: var(--color-bg-body) !important; } .select2-selection:focus-within { border-color: var(--color-bg-primary) !important; box-shadow: 0 0 0 0.15rem var(--color-bg-primary) !important; } .form-control.flatpickr:not(.inputReadOnly):not([required]), .form-control.flatpickr-timepicker:not(.inputReadOnly) { background-color: var(--color-bg-body); } /* RS, 14.09.2024: der Kalenderpopup ist immer etwas zu weit unten */ .flatpickr-calendar { margin-top: -56px; /* irgendwie keine schlaue Lösung, aber es bewirkt genu das Gewünschte */ } .form-range::-moz-range-track { background-color: var(--color-text); } .documentTableThumbnail i { color: var(--color-bg-primary); } .dropdown-menu { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } .dropdown-menu .dropdown-item { color: var(--color-text-quaternary); } .dropdown-menu .dropdown-item:hover { background-color: var(--color-bg-quaternary-hover); color: var(--color-text-quaternary-hover); } .dropdown-menu .dropdown-item.btn-secondary:hover { background-color: var(--color-bg-primary-hover); color: var(--color-text-primary-hover); } /*Kleine Alerts, bisher nur in Popups die unter dem Header angezeigt werden*/ .alert.alert-primary { color: var(--color-text-primary); background-color: var(--color-bg-primary); border-color: var(--color-bg-primary); } .alert.alert-primary.alert-dismissible>button.btn-close { color: var(--color-text-primary); } .img-thumbnail { padding: 0; /* besser kein (weißen) Rahmen, den man bei pdf-Previews nicht braucht und bei dunklen Bildern wirkt es nicht so gut */ color: var(--text-bg); background-color: var(--color-bg); border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; height: auto; } /* icon die im Standard nicht schön aussehen */ i.fa-person-chalkboard { padding-left: 0px; padding-right: 4px; } .popover { background-color: var(--color-bg-tertiary); color: var(--color-text-tertiary); position: relative; margin-left: - calc(var(--nav-width) + var(--nav-open-padding)); } .popover-header { background-color: var(--color-bg-primary); color: var(--color-header-primary); } .popover-nav .nav_link { color: var(--color-text-tertiary); } .bs-popover-end>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after { border-right-color: var(--color-bg-tertiary); } .breadcrumb-item { color: var(--color-text); } a:focus-visible { outline: .15rem solid var(--color-bg-primary-hover); box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover); } .btn:focus, .btn:focus-visible { outline: .15rem solid var(--color-bg-primary-hover); box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover); } .form-check-input:focus { border-color: var(--color-bg-primary-hover); box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover); } .form-control:focus, .form-control:focus-visible { outline: .15rem solid var(--color-bg-primary-hover); box-shadow: inset 0 1px 1px outline var(--color-bg-primary-hover), 0 0 8px var(--color-bg-primary-hover); } .select2-selection:focus, .select2-selection:focus-visible { outline: .15rem solid var(--color-bg-primary-hover); box-shadow: inset 0 1px 1px outline var(--color-bg-primary-hover), 0 0 8px var(--color-bg-primary-hover); } .accordion-button:focus, .accordion-button:focus-visible { outline: .15rem solid var(--color-bg-primary-hover); box-shadow: inset 0 1px 1px outline var(--color-bg-primary-hover), 0 0 8px var(--color-bg-primary-hover); } textarea:focus, textarea:focus-visible, input[type="text"]:focus, input[type="text"]:focus-visible, input[type="password"]:focus, input[type="password"]:focus-visible, input[type="datetime"]:focus, input[type="datetime"]:focus-visible, input[type="datetime-local"]:focus, input[type="datetime-local"]:focus-visible, input[type="date"]:focus, input[type="date"]:focus-visible, input[type="month"]:focus, input[type="month"]:focus-visible, input[type="time"]:focus, input[type="time"]:focus-visible, input[type="week"]:focus, input[type="week"]:focus-visible, input[type="number"]:focus, input[type="number"]:focus-visible, input[type="email"]:focus, input[type="email"]:focus-visible, input[type="url"]:focus, input[type="url"]:focus-visible, input[type="search"]:focus, input[type="search"]:focus-visible, input[type="tel"]:focus, input[type="tel"]:focus-visible, input[type="color"]:focus, input[type="color"]:focus-visible, .uneditable-input:focus { border-color: var(--color-bg-primary-hover); box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover); } /*-----------------------END GENERAL-----------------------*/ /*-----------------------START HELPERS-----------------------*/ /* diese media-queries für position gibts nicht nativ in bootstrap */ @media (min-width: 576px) { .position-sm-static { position: static !important; } .position-sm-relative { position: relative !important; } .position-sm-absolute { position: absolute !important; } .position-sm-fixed { position: fixed !important; } .position-sm-sticky { position: sticky !important; } } @media (min-width: 768px) { .position-md-static { position: static !important; } .position-md-relative { position: relative !important; } .position-md-absolute { position: absolute !important; } .position-md-fixed { position: fixed !important; } .position-md-sticky { position: sticky !important; } } @media (min-width: 992px) { .position-lg-static { position: static !important; } .position-lg-relative { position: relative !important; } .position-lg-absolute { position: absolute !important; } .position-lg-fixed { position: fixed !important; } .position-lg-sticky { position: sticky !important; } } @media (min-width: 1200px) { .position-xl-static { position: static !important; } .position-xl-relative { position: relative !important; } .position-xl-absolute { position: absolute !important; } .position-xl-fixed { position: fixed !important; } .position-xl-sticky { position: sticky !important; } } /* für schnelleres Farben setzen */ .color-body { background-color: var(--color-bg-body); color: var(--color-text); } .color-primary { background-color: var(--color-bg-primary); color: var(--color-text-primary); } .color-secondary { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); } .color-tertiary { background-color: var(--color-bg-tertiary); color: var(--color-text-tertiary); } .color-quaternary { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } .color-text-body { color: var(--color-text); } .color-text-primary { color: var(--color-text-primary); } .color-text-secondary { color: var(--color-text-secondary); } .color-text-tertiary { color: var(--color-text-tertiary); } .color-text-quaternary { color: var(--color-text-quaternary); } .color-bg-body { background-color: var(--color-bg-body); } .color-bg-primary { background-color: var(--color-bg-primary); } .color-bg-secondary { background-color: var(--color-bg-secondary); } .color-bg-tertiary { background-color: var(--color-bg-tertiary); } .color-bg-quaternary { background-color: var(--color-bg-quaternary); } /* diese kleinen font-sizes werden nativ nicht von Bootstrap unterstützt */ .display-7 { font-size: 2.0rem; } .display-8 { font-size: 1.5rem; } .z-index-1 { z-index: 100; } .z-index-2 { z-index: 500; } .z-index-3 { z-index: 1000; } .z-index-4 { z-index: 2000; } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } .btn-rounded { border-radius: 10em; } /* das ist problematisch, weil hier mit padding: .44rem 1.64rem; riesige Buttons entstehen */ .btn-long { padding: .4rem 1.2rem; margin-top: .2rem; } .btn-long.buttonWithRightIcon { padding-right: 1.8rem; /* wenn rechts noch ein Icon eingeblendet werden sol, dann braucht es meht Platz */ } .btn-label { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); border-radius: 5px; padding-top: 0.8rem; padding-bottom: 0.8rem; } .btn-label:hover { background-color: var(--color-bg-secondary-hover); color: var(--color-text-secondary-hover); } .btn-label input.form-check-input:checked { border-color: var(--color-bg-secondary); } .radio .btn-label { border-radius: 5px; } .btn-label.checked { background-color: var(--color-bg-primary); color: var(--color-text-primary); } @keyframes slide-in-down { 0% { transform: translateY(1rem); opacity: 0; } 100% { transform: translateY(0rem); opacity: 1; } } @keyframes slide-in-up { 0% { transform: translateY(-1rem); opacity: 0; } 100% { transform: translateY(0rem); opacity: 1; } } @keyframes slide-in-start { 0% { transform: translateX(-1rem); opacity: 0; } 100% { transform: translateX(0rem); opacity: 1; } } @keyframes slide-in-end { 0% { transform: translateX(1rem); opacity: 0; } 100% { transform: translateX(0rem); opacity: 1; } } .slide-in { animation-duration: 0.4s; animation-fill-mode: both; } /* Leider funktioniert das derzeit alles nicht so richtig .. */ /* .slide-in.start { */ /* -webkit-animation-name: slide-in-start; */ /* animation-name: slide-in-start; */ /* } */ /* .slide-in.end { */ /* -webkit-animation-name: slide-in-end; */ /* animation-name: slide-in-end; */ /* } */ /* .slide-in.up { */ /* -webkit-animation-name: slide-in-up; */ /* animation-name: slide-in-up; */ /* } */ /* .slide-in.down { */ /* -webkit-animation-name: slide-in-down; */ /* animation-name: slide-in-down; */ /* } */ /* .btn:hover, .btn:focus, .btn:active { */ /* -webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%); */ /* box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%); */ /* } */ /************************************************************ * MobileTag *************************************************************/ .item-list-tag { background-color: var(--color-bg-primary); color: var(--color-text-primary); border-radius: 3px; } .item-list-tag.tag-danger { background-color: var(--color-bg-danger); color: var(--color-text-danger); } .item-list-tag.tag-warning { background-color: var(--color-bg-warning); color: var(--color-text-warning); } .item-list-tag.tag-success { background-color: var(--color-bg-success); color: var(--color-text-success); } .item-list-tag { padding: 3px 5px 3px 5px; } .ecadia-card .item-list-tag { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } /************************************************************ * MobileList *************************************************************/ .list-item-tags>*:not(:last-child) { margin-right: .3rem; } .list-item-tags { margin-bottom: 0.5em; } .list-group-item.list-group-item-action:hover, ul.mobile-list .list-group-item.list-group-item-action:hover, ul.mobile-list .list-group-item-primary.list-group-item-action:hover, ul.mobile-list .list-group-item-primary.list-group-item-action:focus ul.mobile-list .list-group-item-action a.stretched-link:focus-visible:after { color: var(--color-text-quaternary-hover); background-color: var(--color-bg-quaternary-hover); } .list-group-item { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); /* overflow: hidden; /* keine Texte, die über die Schaltfäche rausgehen */ padding: 0; /* den Platz ganz nutzen */ } .item-count-circle { position: absolute; display: flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 30px; box-sizing: border-box; top: 4px; /* Achtung: falls >4 wird das in der Stichwortliste unschön */ right: 10px; min-width: 24px; height: 24px; font-size: 10pt; font-weight: normal; text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 3px; background-color: var(--color-bg-body); color: var(--color-text); } .list-group-item .item-count-html { font-size: 0.9rem; position: absolute; right: 4px; top: 4px; } .list-group-item h1, .list-group-item h2, .list-group-item h3, .list-group-item h4, .list-group-item h5, .list-group-item .h5 /* eine Klasse, die so aussieht wie h5 */ .list-group-item h6 { color: var(--color-header-quaternary); } /* beim hover für h5 aber die hover-Farbe und nicht die header-Farbe nehmen */ .list-group-item:hover h5, .list-group-item:hover .h5 { color: var(--color-header-quaternary-hover); } .list-group-item.listDivider { background-color: var(--color-bg-primary); color: var(--color-header-primary); } .list-group-item.listDivider h5 { color: var(--color-header-primary); } .mobileWidget.mobile-list .list-group-item.list-item-large-img .img-thumbnail { min-width: 94px; max-width: 94px; } .mobileWidget.mobile-list .list-group-item.list-item-large-img i.img-thumbnail { font-size: 60px; line-height: 120px; text-align: center; } .mobileWidget.mobile-list .list-group-item .img-thumbnail { max-width: 38px; min-width: 38px; } .mobileWidget.mobile-list .list-group-item .img-thumbnail.font-icon { height: 38px; /* soll ja ein quadratisches Icon sein */ background-color: var(--color-bg-body); color: var(--color-text) !important; /* auch bei hiver in dieser Farbe bleiben */ } .mobileWidget.mobile-list .list-group-item i.img-thumbnail { font-size: 24px; line-height: inherit; text-align: center; } .mobileWidget.mobile-list .list-group-item.active { background-color: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-bg-primary); } .mobileWidget.mobile-list .list-group-item.list-group-item-action.active:hover { background-color: var(--color-bg-primary-hover); color: var(--color-text-primary-hover); border-color: var(--color-bg-primary-hover); } .list-group-item.list-divider { background-color: #f3f3f3; margin-top: 10px; border-radius: 0.25rem 0.25rem 0 0; border-top-width: 1px; } .list-group-item.disabled, .list-group-item:disabled { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); /* filter: grayscale(0.2) opacity(0.6); */ color: inherit; } /* Wird benötigt, damit Text in Flex-Containern mit drei Punkten abgeschnitten werden kann */ /* https://css-tricks.com/flexbox-truncated-text/ */ .d-flex { min-width: 0px; } .list-item-block-withIcon { display: grid; grid-template-columns: max-content auto; /* Icon - Inhaltsbereich (wobei die Zeilen in Tite/Titleright nochmasl aufgesplittet wedren */ padding-right: 4px; padding-top: 4px; padding-bottom: 4px; } .list-item-block-noIcon { padding: 4px; } .mobile-list .card { min-height: 100% /* 200px */ ; /* sind immer unterschiedlich groß */ } /* Der Dropdown-Container in den ListItems, wo man verschiedene Aktionen ausführen kann für jedes ListItem bzw. der Buttoncontainer um eine Aktion auszuführen*/ .dropdown-actions-container, .button-actions-container { position: absolute; right: 3px; bottom: 3px; z-index: 100; /* die Icon-Counts in der MobileList haben 50 */ } /* Die Icons links in der MobileList: Wenn diese auf Große gesetzt werden, dann bestimmen wir die Größe auf 80 - 120px*/ .listitem-icon-big { max-width: 120px; min-width: 80px; } .item-count { position: absolute; right: 10px; top: min(20%, 20px); max-width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 4; } .table { color: inherit; } .table td.bordered, .table th.bordered, .table tr.bordered td, .table tr.bordered th { border-color: currentColor; border-width: 1px; } .table tr.hide-border td, .table tr.hide-border th, .table td.hide-border, .table th.hide-border { border-width: 0px !important; } .card-icon-ecadia { height: 1em; } .avatar { display: flex; justify-content: center; color: white; align-items: center; } /*-----------------------END HELPERS-----------------------*/ /*------------------------COLORS (BUTTONS, BORDERS ETC.) -----------------------*/ .btn-primary { background-color: var(--color-bg-primary); border-color: var(--color-bg-primary); color: var(--color-text-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-bg-primary-hover); border-color: var(--color-bg-primary-hover); color: var(--color-text-primary-hover); } .btn-secondary { background-color: var(--color-bg-secondary); border-color: var(--color-bg-secondary); color: var(--color-text-secondary); } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--color-bg-secondary-hover); border-color: var(--color-bg-secondary-hover); color: var(--color-text-secondary-hover); } .btn.collapsed { background-color: var(--color-bg-body); border-color: var(--color-bg-body); color: var(--color-text-body); } .btn-success { background-color: var(--color-bg-success); border-color: var(--color-bg-success); color: var(--color-text-success); } .btn-success:hover { background-color: var(--color-bg-success-hover); border-color: var(--color-bg-success-hover); color: var(--color-text-success-hover); } .btn-danger { background-color: var(--color-bg-danger); border-color: var(--color-bg-danger); color: var(--color-text-danger); } .btn-danger:hover { background-color: var(--color-bg-danger-hover); border-color: var(--color-bg-danger-hover); color: var(--color-text-danger-hover); } .btn-warning { background-color: var(--color-bg-warning); border-color: var(--color-bg-warning); color: var(--color-text-warning); } .btn-warning:hover { background-color: var(--color-bg-warning-hover); border-color: var(--color-bg-warning-hover); color: var(--color-text-warning-hover); } .border-ecadia-primary { border-color: var(--color-bg-primary) !important; } .border { border: var(--bs-border-width) var(--bs-border-style) var(--color-text) !important; } .form-check .form-check-input { border-color: var(--color-bg-primary); color: var(--color-text-primary); background-color: #f3f3f3; } .form-check .form-check-input:checked { border-color: var(--color-bg-primary); background-color: var(--color-bg-primary); } .form-check .form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--color-bg-secondary-hover); } .btn-primary .form-check-input { color: var(--color-text-primary); } .btn-primary .form-check-input:checked { background-color: var(--color-bg-primary); border-color: var(--color-bg-primary); } .btn-primary .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--color-bg-secondary-hover); } input.form-range::-webkit-slider-thumb, input.form-range::-moz-range-thumb { background: var(--color-bg-primary); } .text-success { color: var(--color-bg-success) !important; } .text-danger { color: var(--color-bg-danger) !important; } .text-warning { color: var(--color-bg-warning) !important; } .progress-bar { color: var(--color-text-primary); background-color: var(--color-bg-primary); overflow: visible; /* brauchen wir, damit wir den Text unten transformen können und er über das eigentliche Div rauskann */ } /*Normaler Text einer Progressbar (annahme er hat Platz im linken Teil angezeigt zu werden*/ .progress-bar-text { transform: none; transition-duration: 1s; /*Dann ist verschieben von Text animiert / flüssiger */ color: var(--color-text-primary); } /* Die Klasse bekomt Text in einer Progressbar zusätzlich, wenn der Text im linken Teil der Progresbar angezeigt werden muss*/ .progress-bar-text.progress-bar-text-outside { transform: translate(100%); /*Wir verschieben den Text weiter nach rechts*/ color: var(--color-text); } .table-danger { --bs-table-color: var(--color-text-danger); --bs-table-bg: var(--color-bg-danger); --bs-table-border-color: black; --bs-table-striped-bg: var(--color-bg-danger-hover); --bs-table-striped-color: var(--color-text-danger-hover); --bs-table-active-bg: var(--color-bg-danger-hover); --bs-table-active-color: var(--color-text-danger-hover); --bs-table-hover-bg: var(--color-bg-danger-hover); --bs-table-hover-color: var(--color-color-danger-hover); } .table-success { --bs-table-color: var(--color-text-success); --bs-table-bg: var(--color-bg-success); --bs-table-border-color: black; --bs-table-striped-bg: var(--color-bg-success-hover); --bs-table-striped-color: var(--color-text-success-hover); --bs-table-active-bg: var(--color-bg-success-hover); --bs-table-active-color: var(--color-text-success-hover); --bs-table-hover-bg: var(--color-bg-success-hover); --bs-table-hover-color: var(--color-text-success-hover); } .table-warning { --bs-table-color: var(--color-text-warning); --bs-table-bg: var(--color-bg-warning); --bs-table-border-color: black; --bs-table-striped-bg: var(--color-bg-warning-hover); --bs-table-striped-color: var(--color-text-warning-hover); --bs-table-active-bg: var(--color-bg-warning-hover); --bs-table-active-color: var(--color-text-warning-hover); --bs-table-hover-bg: var(--color-bg-warning-hover); --bs-table-hover-color: var(--color-text-warning-hover); } .table td.bordered, .table th.bordered, .table tr.bordered td, .table tr.bordered th { border-color: black; } /* ------------ BURGERMENU & BOOKMARKS ------------ */ :root { --header-height: 56px; --header-inner-height: 55px; --nav-width: 68px; --nav-open-padding: 200px; } .main-area { margin-top: var(--header-height); transition: 0.5s; } .header { width: 100%; /*height: var(--header-height);*/ position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; transition: 0.5s; z-index: 1000; } .navbar-left { position: fixed; top: 0; left: 0; width: 0; height: 100%; /* Für mobile-Browser wie Chrome und Safari dürfen das leider nicht 100vh sein, da sonst die Größe nicht passt wenn die Adressleiste angezeigt wird */ background-color: var(--color-bg-tertiary); padding: 0.5rem 0 0 0; transition: all 0.5s ease 0s; z-index: 100; box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px; -webkit-box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px; } .navbar-left.show { width: var(--nav-width); padding: 0.5rem 1rem 0 0; } .navbar-left .nav_list { overflow-y: auto; max-height: calc(100vh - 190px); } #nav-bar * { font-size: 0.9rem; } #nav-bar .nav { height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } #nav-bar .accordion-button { width: 220px; border: none; } #nav-bar .accordion-item .accordion-button span { margin-right: 0; width: 100%; } #nav-bar .accordion-item .accordion-button span.collapsed { white-space: nowrap; overflow: hidden; } #nav-bar .accordion-item, #nav-bar .accordion-item .accordion-button { color: var(--color-text-tertiary) !important; background-color: var(--color-bg-tertiary) !important; } #nav-bar .accordion-item .accordion-button::after { color: var(--color-text-tertiary); background-color: var(--color-bg-tertiary); line-height: 1em; } #nav-bar .accordion-item .accordion-button:not(.collapsed)::after { color: var(--color-text-tertiary); font-weight: bold; } #nav-bar .accordion-button, #nav-bar .accordion-body { background-color: unset; padding: unset; } #nav-bar .accordion-item, #nav-bar .accordion-button:focus { border: none; box-shadow: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #nav-bar .accordion-button::after { margin-left: 1em; width: 0.9rem; height: 0.9rem; background-size: 0.9rem; } #nav-bar .accordion-header .accordion-button:not(.collapsed) { color: inherit; box-shadow: none; } #nav-bar .accordion-header:hover { color: inherit; } #nav-bar .accordion-header .accordion-button.active { font-weight: bold; color: var(--color-text-tertiary); } #nav-bar .accordion-body .nav_link { padding-left: 4em; } .nav_link { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: 1rem; padding: 0.5rem 0.5rem 0.5rem 1.5rem; } .popover-nav .nav_link { padding: 0.25rem 0.5rem 0.25rem 1.5rem; } .nav_logo img { max-height: 45px; max-width: 140px; } .nav_link { position: relative; color: var(--color-text-tertiary); margin-bottom: 0.5rem; transition: 0.3s; } .popover-nav:hover, .nav_link:hover { color: var(--color-text-tertiary-hover); } .nav_link::before { content: ""; position: absolute; left: 0; width: 4px; height: 32px; /* opacity: 0; */ transition: 0.3s; } .nav_link:hover::before, .nav_link.active:hover::before { /* opacity: 1; */ background-color: var(--color-text-tertiary-hover); } .nav_link.active::before { /* opacity: 1; */ background-color: var(--color-text-tertiary); } .nav_link .nav_name { width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav_icon { font-size: 1.25rem; } .navbar-left .scroll_icon { /* margin-left: 1.5em; */ width: 100%; text-align: center; /* margin-bottom: 1em; */ } #sidebarCollapseIcon { transition: transform 0.3s; } #sidebarCollapseDivOutsideSidebar { bottom: 4px; transition: 1s; left: 0; background-color: var(--color-bg-tertiary); box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px; -webkit-box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px; margin-bottom: 0.5em; /* CNG 16.11.22 Vorerst abgeklemmt, weil es über das Bürgermenue geht #3303 */ display: none; } #sidebarCollapseDivOutsideSidebar .sidebarCollapse { margin-bottom: 0; } /* * Im Mobile im Status sidebarInitialState wird die Sidebar nicht angezeigt, also auch * das Overlay nicht */ #pageOverlay.sidebarInitialState { position: none; } /* Im Mobile im Status sidebarInitialState wird die Sidebar nicht ausgeklappt angezeigt*/ .navbar-left.sidebarInitialState { width: 0; } /* Wenn im Mobile wird nicht im Status sidebarInitialState sind, wird die Sidebar ausgeklappt angezeigt wir berechnen also die Width*/ .navbar-left { width: calc(var(--nav-width) + var(--nav-open-padding)); } /* Im Mobile im Status sidebarInitialState den Burger-Button zum Ausfahren der Sidebar anzeigen */ #burgerMenuBtn>i#openMenuIcon.sidebarInitialState { display: inline-block; } /* Im Mobile das X zum einklappen der Sidebar immer verstecken */ #burgerMenuBtn>i#closeMenuIcon { display: none } /* Im Mobile wird der Body beim Aus- und Einklappen der sidebar in der Größe nicht geändert */ body, body.sidebarInitialState { padding-left: 0; } /* Wenn im Mobile wird nicht im Status sidebarInitialState sind, wird der Button zum Ausfahren der Sidebar um 180° gedreht (einfahre) da die Sidebar ja ausgeklappt ist*/ #sidebarCollapseIcon:not(.sidebarInitialState) { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); ; transform: rotate(180deg); ; -o-transform: rotate(180deg); ; } /* Im Mobile im Status sidebarInitialState wird der Button zum Ausfahren der Sidebar um 360° gedreht (ausfahren) da die Sidebar ja eingeklappt ist Ohne ein Transform haben gewisse Animationen nicht funktioniert, daher drehen wir um 360°*/ #sidebarCollapseIcon.sidebarInitialState { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -o-transform: rotate(360deg); } #pageOverlay { position: fixed; } /* Im Mobile im Status sidebarInitialState wird der Button zum Ausfahren der Sidebar (unten links losgelöst von der Sidebar) angezeigt Ist man nicht mehr im initial-State ist Mobile die Sidebar ausgefahren und der Button soll versteckt werden Lösung über opacity, da eine Animation mit display nicht möglich ist*/ #sidebarCollapseDivOutsideSidebar:not(.sidebarInitialState) { opacity: 0; } /* Im Mobile im Status sidebarInitialState wird der Button zum Ausfahren der Sidebar (unten links losgelöst von der Sidebar) angezeigt Lösung über opacity, da eine Animation mit display nicht möglich ist*/ #sidebarCollapseDivOutsideSidebar.sidebarInitialState { opacity: 1; } .sidebar-wrapper { display: flex; align-items: stretch; position: fixed; top: 0; z-index: 50; background-color: var(--color-bg-tertiary); color: var(--color-text-tertiary); } .sidebar-wrapper.left { left: 0; box-shadow: rgba(99, 99, 99, 0.2) 8px 2px 8px 0px; } .sidebar-wrapper.right { right: calc(-100vw - 8px); box-shadow: rgba(99, 99, 99, 0.2) -8px 2px 8px 0px; } #sidebar, #bookmarks { min-width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh; transition: margin 500ms; } #sidebar.inactive { margin-left: calc(-100vw - 8px); transition: margin 500ms; } #bookmarks.active { margin-right: calc(100vw + 8px); transition: margin 500ms; } #bookmarks-panel { z-index: 520; /* einige andere Elemente wie z.B. die Ampel scheinen sonst durch */ } @media only screen and (min-width: 576px) { #sidebar, #bookmarks { min-width: 350px; max-width: 350px; min-height: 100vh; max-height: 100vh; transition: margin 500ms; } .sidebar-wrapper.right { right: -358px; } #sidebar.inactive { margin-left: -358px; } #bookmarks.active { margin-right: 358px; } } @media only screen and (min-width: 768px) { .navbar-left { z-index: 50; } } /*----------------sidebar-wrapper----------------*/ .sidebar-wrapper ul { list-style-type: none; padding: 0; margin: 0; } .sidebar-wrapper a { text-decoration: none; color: var(--color-text-tertiary); } /*----------------sidebar-content----------------*/ .sidebar-content { position: relative; height: 100%; } .sidebar-content .scrollbar { scrollbar-color: var(--color-bg-tertiary-hover) var(--color-bg-tertiary); scrollbar-width: thin; } .sidebar-content .scrollbar::-webkit-scrollbar-thumb { background: #ffffff85; border-radius: 10px; } .sidebar-content .scrollbar::-webkit-scrollbar { min-height: 20px; width: 8px; } .sidebar-content .scrollbar { max-height: calc(100% - 50px); height: calc(100% - 50px); overflow-y: auto; -webkit-overflow-scrolling: touch; margin-right: 5px; /*damit die scrollbar etwas Abstand hat*/ } /*--------------------sidebar-brand----------------------*/ .sidebar-wrapper .sidebar-brand { padding: 10px 20px; display: flex; align-items: center; /* border-bottom: 1px solid var(--color-bg-divider-dark); */ background-color: var(--color-bg-primary); color: var(--color-text-primary); -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%); box-shadow: 0px 5px 5px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%); } .sidebar-wrapper .sidebar-brand>a, .sidebar-wrapper .sidebar-brand>p { text-transform: uppercase; font-weight: bold; flex-grow: 1; color: var(--color-text-primary); margin: 0; } .sidebar-wrapper .sidebar-brand #close-sidebar, .sidebar-wrapper .sidebar-brand #close-bookmarks { cursor: pointer; font-size: 20px; float: right; /* color: var(--color-text-light); */ } /*----------------------sidebar-menu-------------------------*/ .sidebar-wrapper .sidebar-menu { padding-bottom: 10px; } .sidebar-wrapper .sidebar-menu ul li a { display: flex; width: 100%; text-decoration: none; position: relative; padding: 8px 30px 8px 20px; height: 50px; /* border-bottom: 1px solid var(--color-special-primary); */ } .sidebar-wrapper .sidebar-menu ul li a:hover { background-color: var(--color-bg-tertiary-hover); color: var(--color-text-tertiary-hover); } .sidebar-wrapper .sidebar-menu .img-thumbnail { width: 32px; height: 32px; font-size: 1.3rem; } .ecadia-card .card-icon { width: 3rem; height: 3rem; line-height: 48px !important; border: var(--bs-border-width) var(--bs-border-style) var(--color-text); border-radius: var(--bs-border-radius); background-color: var(--color-bg-body); color: var(--color-text); text-align: center; font-size: 2.0rem; margin-bottom: 3em; } .sidebar-wrapper .sidebar-menu ul li a p { position: relative; top: 5px; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; height: 1.5em; white-space: nowrap; /* font-weight: bold; */ } .sidebar-wrapper .sidebar-menu ul li a:hover>i::before { display: inline-block; animation: swing ease-in-out 0.5s 1 alternate; } #bookmarks .sidebar-menu { padding-bottom: 0; border-bottom: 20px solid var(--color-bg-secondary-dark); } /*----------------------bookmarks-list-------------------------*/ #bookmarks .bookmarks-list li.bookmarks-item { display: flex; align-items: center; padding-left: 20px; padding-right: 30px; height: 40px; } #bookmarks .bookmarks-list li.bookmarks-item a:not(.remove-bookmark) { margin-left: 10px; } /* #bookmarks .bookmarks-list { */ /* margin-top: 8px; */ /* } */ #bookmarks .bookmarks-list a.remove-bookmark { position: absolute; right: 10px; } /* ------------ END BURGERMENU ------------ */ /* ------------ START FOOTER ------------ */ #footer { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); /* background: linear-gradient(170deg, var(--color-bg-primary), var(--color-bg-tertiary)); */ box-shadow: 0px -12px 27px 3px rgb(0 0 0 / 18%); -webkit-box-shadow: 0px -12px 27px 3px rgb(0 0 0 / 18%); -moz-box-shadow: 0px -12px 27px 3px rgba(0, 0, 0, 0.18); padding: 0; } #footer a { color: var(--color-text-quaternary); } #footer a:hover { text-decoration: underline; } .footer-copyright { position: absolute; bottom: 5px; right: 20px; font-size: x-small; opacity: 0.5; letter-spacing: 0.025em; } /* ------------ END FOOTER ------------ */ /* ------------ START BOOKMARKS ------------ */ input#pdfTitle { width: 100%; margin-top: 1em; } button#runPDFPrint>i { margin-right: 10px; } /* ------------ END BOOKMARKS ------------ */ /* ------------ START LOADING MESSAGE ------------ */ #loadingPopup { position: fixed; top: 50%; left: 50%; text-align: center; width: 18em; height: 12em; margin-top: -6em; margin-left: -9em; z-index: 1060; /*Muss vor den normalen popups angezeigt werden */ /* background-color: lightgray; */ /* border-radius: 1em; */ /* border: 1px solig gray; */ } #loadingPopup .loading-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ------------ END LOADING MESSAGE ------------ */ /* -------------- START INDEXMOBILE.JSP ---------------- */ img.tab-header-icon { margin-bottom: 6px; margin-right: 16px; width: 40px; } img.ecadia-mobile-logo { max-height: 45px; width: auto; } @media only screen and (min-width: 768px) { img.tab-header-icon { margin-bottom: 7px; margin-right: 16px; width: 40px; } } .template-container { margin-bottom: 2em; } /* -------------- END INDEXMOBILE.JSP ---------------- */ /* ---------------ecadiaMobileAdmin.js----------------*/ #widgetSettingsDialogContentFields #roleSelectionComboboxVisible { width: 90%; } #widgetSettingsDialogContentFields #roleSelectionComboboxEnabled { width: 90%; } #widgetSettingsDialogContentFields #roleSelectionComboboxStyle { width: 400px; } #widgetSettingsDialogContentFields #inputStyle { width: 200px; } #widgetSettingsDialogContentFields td { min-width: 10%; } .drop-highlight:not(.drag-highlight) { background-color: var(--color-bg-primary); color: var(--color-text-primary); } .drag-highlight { font-weight: bold; } /* widgetSettingsDialog (aus ecadia.js) ----------------------------------------------------- */ #widgetSettingsDialogContentFields table { border-collapse: collapse; width: 100%; margin-top: 30px; } #widgetSettingsDialogContentFields table td, #widgetSettingsDialogContentFields table th { padding: 10px; border-bottom: 1px solid #888888; } #widgetSettingsDialogContentFields table th { font-weight: bold; background-color: #dddddd; } /* Der Name des Ecadia-Java-Einsprungspunktes für dieses Widget */ #widgetSettingsDialog span.widgetNameEcadiaJava { user-select: text; } /* ----------------- START HOME ----------------- */ .ecadia-card { border-radius: 4px; background-color: var(--color-bg-primary); color: var(--color-text-primary); box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05); transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12); padding: 4px; cursor: pointer; display: block; } .ecadia-card:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06); background-color: var(--color-bg-primary-hover); color: var(--color-text-primary-hover) !important; } .ecadia-card:hover .home-title { color: var(--color-text-primary-hover); } .ecadia-card h1, .ecadia-card h2, .ecadia-card h3, .ecadia-card h4, .ecadia-card h5, .ecadia-card h6 { color: var(--color-header-primary); } .ecadia-card:hover h1, .ecadia-card:hover h2, .ecadia-card:hover h3, .ecadia-card:hover h4, .ecadia-card:hover h5, .ecadia-card:hover h6 { color: var(--color-header-primary-hover); } .ecadia-card h3 { font-weight: 400; } .ecadia-card p { font-weight: normnal; font-size: 0.9em; display: block; } .ecadia-card-img { height: 42px; width: 42px; } /* .ecadia-card img{ */ /* position: absolute; */ /* top: 10px; */ /* left: 10px; */ /* } */ .ecadia-card i.img-thumbnail { font-size: 1.6rem; text-align: center; width: 42px; height: 42px; line-height: 1.9rem; } .ecadia-card .card-title { text-overflow: ellipsis; white-space: nowrap; overflow-x: clip; /* margin-top: 2.5em !important; */ /* margin-left: 0 !important; */ /* display: block; */ } /* Aktions-Buttons, die "altenn" Kacheln */ .home-title h2.card-title { text-overflow: visible; /* nicht einzeilig undnicht abschneiden */ white-space: normal; } .invert-color .ecadia-card { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); } .invert-color .card-title { color: var(--color-text-secondary) !important; } .invert-color .item-list-tag { background-color: var(--color-bg-primary); color: var(--color-text-primary); } /*---------media-queries-----------*/ @media only screen and (min-width: 992px) { /* .card.ecadia-card, */ /* .card.ecadia-card * { */ /* color: var(--color-text-primary); */ /* } */ .card-text-home {} .home-title { min-height: 40px; vertical-align: middle; } } /* ----------------- END HOME ----------------- */ /* ------------ START EXPLORER ------------ */ .ecadia-folder-card { overflow: hidden; background-color: var(--color-bg-quaternary); } .ecadia-folder-card a:hover { color: inherit; text-decoration: none; } .ecadia-folder-card .card-img-top { width: 100%; height: 200px; object-fit: cover; } .ecadia-folder-card .card-body { position: absolute; height: 140px; bottom: 0px; width: 100%; background-color: var(--color-bg-quaternary); } .ecadia-folder-card, .ecadia-folder-card * { transition: all .4s ease-out; } .card-body { padding-top: .4em; /* viel weniger als Standard, damit 2-zeilige Texte sichtbar sind */ } /* Zeile vertikal zentrieren, damit 1 und 2-zeilige Texte gut aussehen */ h5.ecadia-folder-title { height: 2em; display: flex; align-items: center; } .ecadia-folder-card:hover { -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); } .ecadia-folder-card:hover img { transform: scale(1.1); } .ecadia-folder-card:hover .card-text { display: block; } .ecadia-folder-card-no-img { padding-top: 1.5em; background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } .ecadia-folder-card-no-img-icon:after { font-family: var(--fa-font-ecadia); font-size: 10em; content: "\f19d"; text-align: center; min-width: 100%; display: inline-block; margin-top: -40px; /* etwas nach oben verschoben, damit man das Icon nicht unten abgeschnitten wird */ } /* Über eine Systemvariable kann man einstellen, dass bei Ordnern ohne Bild immer der Text direkt angezeigt wird Dann bekommen diese Ordner diese Klasse und der Text wird immer angezeigt */ .ecadia-folder-card-always-expanded { transform: translate(0, -90px); } .ecadia-count>i { display: none; } .ecadia-count, .ecadia-count-circle { position: absolute; top: 6px; right: 6px; min-width: 24px; height: 24px; font-size: 10pt; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .ecadia-count-circle { background-color: var(--color-bg-body); color: var(--color-text); font-weight: normal; text-align: center; vertical-align: middle; line-height: 30px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.125); box-sizing: border-box; display: flex; align-items: center; justify-content: center; } /* Bildungsprodukt-Liste (z.B. Suchergebnis im Katalog oder Produkte zum Ordner) */ .explorer-event-table table { font-size: 11pt; width: auto !important; /* seltsam, die Tabelle wird sonst auf 100% angezeigt */ } .explorer-event-table table th, .explorer-event-table table td { padding-right: 2rem; padding-left: 0; /* damit wir auch ganz am linken Rand bündig sind */ padding-top: 0; } /*Progressbar Farben*/ .explorer-event-table .progress-bar-step-0 { background-color: green; } .explorer-event-table .progress-bar-step-80 { background-color: orange; } .explorer-event-table .progress-bar-step-100 { background-color: red; } /* Auslastung als Ampel */ span.eventComplete, span.eventWellBooked, span.eventGuaranteed, span.eventDeadline, span.eventMinNotReached { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 16px; height: 16px; min-width: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */ min-height: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */ display: inline-block; border: 1px solid white; vertical-align: bottom; /* position: fixed; RS, 17.12.2022: führt dazu, dass im Dashborad der Punkt außerhalb li-Bereichts angezeigt wird */ /* right: 30px; Wird nur gebraucht wenn position fixed an wäre /* auf der rechten Seite vor dem Symbol fürs aufklappen */ z-index: 50; } .trainingProductListItem span.eventComplete, .trainingProductListItem span.eventDeadline, .trainingProductListItem span.eventWellBooked, .trainingProductListItem span.eventGuaranteed, .trainingProductListItem span.eventMinNotReached { position: relative; /* sonst funktioniert der z-index nicht richtig */ } /* in der Übersichtstabelle nicht rechtsbündig */ .trainingProductListItem span.eventComplete, .trainingProductListItem span.eventWellBooked, .trainingProductListItem span.eventGuaranteed, .trainingProductListItem span.eventDeadline, .trainingProductListItem span.eventMinNotReached { right: auto !important; } span.eventComplete, span.eventDeadline { background-color: var(--color-bg-danger); border: 1px solid #999999; } span.eventWellBooked { background-color: var(--color-bg-warning); border: 1px solid #999999; /* sonst ist der gelbe Kreis nicht gut zu sehen */ } span.eventGuaranteed, span.eventMinNotReached { background-color: var(--color-bg-success); border: 1px solid #999999; } /* Label in Checkboxen brauchen einen anderen cursor- ansonsten suggerieren sie, dass sie nicht klickbar sind */ label.btn label.form-check-label { cursor: pointer; } /* im Lerncoach-Kachel, der Button für das private Forum */ .dashboardForumButton { top: 10px; position: absolute; right: 15px; } /* RS, 15.04.2022: so ist das gedacht: je deliveryMode gibt es dann eine eigene Klasse */ .trainingProductListItem .rating { padding: 2px 6px 2px 6px; position: absolute; top: 14px; right: 200px; } .trainingProductListItem table.embeddedEventTable td { text-align: right; } div#explorerAdvancedSearch * { color: var(--color-text); } /** * Hier ist der Bereich für die Smartphone-Einstellungen * */ @media (max-width :680px) { .home-title { display: grid; grid-template-columns: 56px auto; } i.card-icon {} /* Kachel im Home */ .ecadia-card .card-title { margin-top: .5em !important; } .ecadia-card .card-icon { margin-bottom: 0.2em !important; } .action-item { margin-top: 4px !important; } .card-body { padding: 0.5em; /* etwas weniger als beim Desktop */ } .trainingProductListItem .rating { position: relative; display: inline-block; top: auto; right: auto; padding-left: 0; } .explorer-event-table table th, .explorer-event-table table td { padding: 0.1rem 0.5rem 0.1rem 0.1rem; font-size: 9pt; } /* für den Titel haben wir am Handy keinen Platz */ .explorer-event-table table .title { display: none; } /* für den Trainer haben wir am Handy keinen Platz */ .explorer-event-table table .trainer { display: none; } .list-item-subtitle { font-size: 0.7em; } span.mobileWidget.progress { max-width: 60px !important; } .list-item-tags { font-size: 0.7em; margin-bottom: 0em; } .mobileWidget.mobile-list .list-group-item i.img-thumbnail { font-size: 18px; max-width: 30px; min-width: 30px; height: 32px; } .mobileWidget.mobile-list .list-group-item .img-thumbnail.font-icon { height: 32px; } .tab-content { padding: 0.5rem 0 0 0 !important; /* das ist ansonsten mit 1rem sehr breit */ } } #explorer-tp-list a.list-group-item:hover, #pdf-catalogue-download a.list-group-item:hover { -webkit-box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.2); } #pdf-catalogue-download img { max-height: 100px; } #pdf-catalogue-download { margin-bottom: 3em; margin-top: 2em; } /* #pdf-catalogue-download a.list-group-item { */ /* background-color: var(--color-bg-quaternary); */ /* color: var(--color-text-light); */ /* } */ /* #pdf-catalogue-download a.list-group-item:hover { */ /* background-color: var(--color-special-secondary); */ /* } */ /* Explorer - Suche */ /* In der Katalog-Suche, begrenzen wir Bilder in Suchergebnisen maximal auf die Breite des Suchergebnisses */ #searchResultArea #explorer-tp-list img { max-width: 95%; height: auto; } /* In der Katalog-Suche, begrenzen darf die Beschreibung nicht größer als das Element sein. Zielt auch auf Biler mit komischen Style ab.*/ #searchResultArea #explorer-tp-list .shortDescription { overflow-x: hidden; } #explorerSearchRow { display: flex; justify-content: center; /* hier auf left umstellen, wenn das Suchfeld links bündig sein soll */ margin-bottom: 4px; } #explorerSearchBar { display: grid; grid-template-columns: max-content auto; } .explorer-search { position: relative; width: 30em; /* vernünftige Länge für das Suchfeld, man schreibt ja keine Romane */ } #explorerSearchFolderOnly { max-width: 20em; /* der Bereich für die Checkbox des aktuellen Ordners */ } @media (max-width : 680px) { .explorer-search { width: 100%; } #explorerSearchBar { grid-template-columns: auto; /* damit das responsiv wird nur 1x auto */ width: 100%; /* Am Handy nehmen wir die ganze Breite */ } #explorerSearchFolderOnly { max-width: 100%; } } .explorer-search input { height: 60px; } .explorer-search .search-icon { position: absolute; top: 18px; left: 16px; font-size: 1.6em; } .explorer-search button { position: absolute; top: 5px; right: 5px; height: 50px; padding-left: 20px; padding-right: 20px; } .explorerExtendedSearchArea { border-bottom: 3px solid var(--color-bg-primary); display: flex; justify-content: center; width: 100%; } .explorerExtendedSearchArea a { width: 100%; } #folderCardsAreaExplorer { margin-bottom: 1em; } /* Advanced Search */ #advancedSearchCollapsible legend { padding: inherit; float: none; } /*---------media-queries-----------*/ @media only screen and (min-width: 768px) { .explorer-search input { text-indent: 45px; } } @media only screen and (min-width: 992px) { .ecadia-folder-card:hover .card-body { transform: translate(0, -90px); } .ecadia-folder-card .card-body { bottom: -90px; } } /* ------------ END EXPLORER ------------ */ /* ------------ START SPLASH SCREEN ------------ */ .welcome { position: absolute; top: calc(0px - var(--header-height)); left: 0; height: 100vh; width: 100%; background-color: var(--color-bg-secondary); z-index: 500; animation: hide 1s 3s ease forwards; } @keyframes hide { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* ------------ END SPLASH SCREEN ------------ */ /* ------------ START FILTER LIST ------------ */ input.filter-input { margin-bottom: 1em; } /* ------------ END FILTER LIST ------------ */ /* ------------ START EVENT LIST ------------ */ /* kleiner Abstand um die einzelnen Tage zu trennen */ #calendarList .eventlist-dayHeader { margin-top: 0.5rem; background: none; border: none; } #calendarList .eventlist-dayHeader h5 { color: var(--color-header-1); font-size: 1.2em; } .eventlist-noevent-color.workday { background-color: white; } .eventlist-noevent-color.holiday { background-color: #f9dada; } .eventlist-color.workday, .eventlist-color.weekend, .eventlist-color.holiday { background-color: var(--color-bg-primary); color: var(--color-text-primary); } .eventlist-noevent-color.weekend { background-color: #f1f1f1; } /* ------------ END EVENT LIST ------------ */ /* ------------ START inquiryKey.jsp CSS ------------ */ #popupInquiryKeyInput { width: 100%; height: 38px; border-radius: 5px; } #InquiryKeyIcon1 { float: left; margin-top: 4px; } /* ------------ END inquiryKey CSS ------------ */ /* ------------ START examParticipantKey.jsp CSS ------------ */ #examKeyInput { width: 100%; height: 38px; border-radius: 5px; } #examKeyIcon1 { float: left; margin-top: 4px; } /* ------------ END examParticipantKey.jsp CSS ------------ */ /* ------------ START WIDGETS ------------ */ /* TinyMCE Higlighting übernommen aus Commit c693557c5257592f49e285e7b89137c4dda94440 -------------------------------- */ /* Mobile-Widgets Pflichtfelder leicht gelber Hintergrund, aber nicht bei disable ------------------------------------ */ input:required:not([disabled]), textarea:required:not([disabled]), textarea:required:not([disabled])+div.tox-tinymce iframe, /* etwas kompliziert, aber so erericht man den Textbereich bei tinymce */ .requiredInput:not(.select2-container-disabled), .requiredInput:not(.select2-container-disabled)>.select2-choice, select:required+span .select2-selection { background-color: #FFFBDF; } /* Der TinyMCE hat in seinem Menü einen grauen Strich, den wollen wir nicht haben, da sich das Menü eh visuell vom Text abhebt */ div.tox .tox-toolbar, div.tox .tox-toolbar__overflow, div.tox .tox-toolbar__primary { background-image: none; } label.required:before { content: '*'; } span.select2-selection.is-valid { border-color: #198754; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } span.select2-selection.is-invalid, .is-invalid { border-color: #dc3545 !important; /* damit das :valid aus dem bootstrap-Standard überschrieben wird, :valid verlangt halt nur irgendeinen Inhalt */ padding-right: calc(1.5em + 0.75rem) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important; background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .select2-selection.is-invalid>span.select2-selection__rendered, .select2-selection.is-valid>span.select2-selection__rendered { background-repeat: no-repeat; background-position: right 1.5em top .55em; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .select2-selection.is-invalid .select2-selection__arrow, .select2-selection.is-valid .select2-selection__arrow { display: none; } label.required:before { content: '*'; } /* Die Row braucht man, damit nur vertikale Tabs auf ihre volle Größe gehen */ .row .nav-tabs .nav-item, .nav-tabs .nav-item>div { width: 100%; /*Notwendig um die enthaltenen Texte in der Seitenleiste Menü umzubrechen*/ } .nav-tabs .nav-link { font-size: 12px; color: var(--color-text); font-weight: 500; font-size: 18px; padding: 10px 15px; } .nav-tabs .nav-link.tab-clickable { border: none; } .nav-tabs .nav-link:not(.tab-clickable) { border-width: 0 0 2px; } .nav-tabs .nav-link.active { color: var(--color-text-primary); border-color: var(--color-bg-primary); background-color: var(--color-bg-primary); } .nav-tabs .nav-link.active:not(.tab-clickable) { border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, var(--color-bg-primary) 5%, var(--color-bg-primary) 95%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%); border-image-slice: 1; } .nav-tabs .nav-link:hover:not(.active) { background-color: var(--color-bg-secondary-hover); border-color: var(--color-text-secondary-hover); color: var(--color-text-secondary-hover); } .nav-tabs .nav-link:hover { background-color: var(--color-bg-primary-hover); border-color: var(--color-text-primary-hover); color: var(--color-text-primary-hover); } .nav-tabs .nav-link:hover:not(.active), .nav-tabs .nav-link:focus:not(.active) { border-color: var(--color-bg-primary); border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, var(--color-bg-primary) 5%, var(--color-bg-primary) 95%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%); border-image-slice: 1; } /* Time-picker müssen nicht so groß sein- daher hier mal alle standardmäßig etwas kleiner setzen*/ .form-control.MobileTimePicker { width: 4rem; } /* Date range picker brauchen aber mehr Platz */ .form-control.MobileDatePicker.fp-range { width: 16rem; } /* Popup beim Erfassen des Datums */ .flatpickr-calendar.hasTime.noCalendar { width: 8em; } .accordion-container, .accordion { margin-top: 0.5em; margin-bottom: 1em; } .mobile-list { margin-bottom: 1em; width: 100%; /* immer die ganze Breite nutzen */ } .mobile-list-spacing>li { margin-bottom: 0.4em; border-radius: 4px; border-top-width: 1px !important; } .accordion-item .accordion-header { position: relative; margin-top: 0; /* weil sonst ein Abstand zwischen dem Button und dem Rahmen entsteht; Standard von h3 zurücksetzen */ } /* Den Margin braucht man, damit der Text der collapsibles nicht in den (evtl. vorhandenen) Zähler reinragt */ .accordion-item .accordion-button>span { margin-right: 1.25em; } /* kleiner Abstand zwischen den einzelnen Accordions bei den Veranstaltungen */ #accordionEvents .accordion-item { margin-bottom: 1em; } .accordion-item .accordion-button::after { background-image: none; font-family: var(--fa-font-ecadia); content: "\f078"; color: var(--color-text-quaternary); background-color: var(--color-bg-quaternary); width: 16px; text-align: center; } /* RS, 15.12.2021 im Colapsible die Anzhal etwas höher anzeigen */ .accordion .ecadia-count-circle { right: 50px; top: 12px; z-index: 50; } /* Accordions sind wie im Tooltip angegeben quaternary */ .accordion-item .accordion-button { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } /* den hover berücksichtigen; die Farben gibts im Theme */ .accordion-item .accordion-button:hover { color: var(--color-text-quaternary-hover) !important; background-color: var(--color-bg-quaternary-hover) !important; } /* auch der Titel ind er Hover-Farbe, weil der sonnst evtl. zu schlecht lesbar ist */ .accordion-item .accordion-button h5:hover { color: var(--color-text-quaternary-hover) !important; } .accordion-body { background-color: var(--color-bg-body); color: var(--color-text); } .accordion-header .accordion-button:not(.collapsed):hover { background-color: var(--color-bg-primary-hover); color: var(--color-text-primary-hover); box-shadow: 0px 12px 18px -16px var(--color-bg-primary-hover); } h3.accordion-header { margin-top: 0; /* damit es zwischen Rand und Fläche keinen Abstand gibt */ } /* Tabs werden Mobile zu Accordions - hier wollen wir aber kein Padding */ .accordion.tab-content { padding: 0; } /* Das Dreieck bei Dropdowns und bei Accordions was immer hin und her rotiert beim öffnen und schließen*/ .dropdown-toggle[aria-expanded="true"]:after, .accordion-item .accordion-button[aria-expanded="true"]:after { transform: rotate(180deg); } .dropdown-toggle:after, .accordion-item .accordion-button::after { transition: 0.4s; } /* Der Button um in der Partnerauswahl einen MA zu bearbeiten, und die count-info für die Anzahl der NN-Buchungen müssen vor dem Lösch-Icon platziert werden */ #selectedPartnerList .edit-employee, #selectedPartnerList #nnBookingItem .item-count-circle { position: absolute; bottom: 10px; right: 50px; font-size: 16pt; } #selectedPartnerList .delete-employee { position: absolute; bottom: 10px; right: 15px; font-size: 16pt; } #selectedPartnerList .ecadia-count-circle { right: 50px; } #employeeList1 .list-group-item:not(.d-none), #employeeList2 .list-group-item:not(.d-none), #employeeList3 .list-group-item:not(.d-none), #completePartnerList .list-group-item:not(.d-none), #selectedPartnerList .list-group-item:not(.d-none) { border-top-left-radius: inherit; border-top-right-radius: inherit; border-top-width: 1px; } #employeeList1 .list-group-item:not(.d-none)~.list-group-item:not(.d-none), #employeeList2 .list-group-item:not(.d-none)~.list-group-item:not(.d-none), #employeeList3 .list-group-item:not(.d-none)~.list-group-item:not(.d-none), #completePartnerList .list-group-item:not(.d-none)~.list-group-item:not(.d-none), #selectedPartnerList .list-group-item:not(.d-none)~.list-group-item:not(.d-none) { border-top-width: 0px; } /* Liste der Mitarbeiter z.B. für Manager im Buchungsprozess */ #componentEmployeeListGrid #leftColumnJoker .row.align-items-start { max-height: 600px; overflow: auto; } #componentEmployeeListGrid #rightColumnJoker .row.align-items-start { max-height: 600px; overflow: auto; } /*MobileTextInput - Passwort */ .passWord-icon { float: right; margin-left: -25px; margin-top: -38px; height: 38px; position: relative; z-index: 2; width: 48px; text-align: center; cursor: pointer; background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } /*MobileTextInput - Passwort */ .passWord-icon i { width: 100%; } /* ------------ END WIDGETS ------------ */ /* -------------- START employeeCompetence.jsp -------------- */ .barchart-container { min-height: 200px; } .summaryTable { text-align: right; } div#employeeCompetenceContainer div.row:nth-child(2) { align-items: center; } table.competence-table { font-size: 14px; max-width: 500px; } .competence-icon { width: 22px; } @media only screen and (min-width: 768px) { .radio-sort-div { float: right; margin-top: -26px; } } /* -------------- END employeeCompetence.jsp -------------- */ /* -------------- START HTMLTABLE2 -------------- */ .dataTables_wrapper .filterResponsive input[type=search] { width: 8em; padding: 0.6em 0.5em 0.5em 34px; /* border-radius: .3125em; */ border: 1px solid #ddd; /* cursor: pointer; */ background-image: url('../gifMobile/filter16.png'); background-repeat: no-repeat; background-position: 10px 11px; } .filterResponsive { float: right; } .dataTables_info { font-size: 14px; } /* Buttons in Zellen mit kleinem Abstand */ .dataTable td .btn { top: 3px; margin-bottom: 3px; } /* NMA 14.2.24 Es gibt bei HTMLTable2's SubmitButtons. Die werden im Moment mobile nur für Reports mit Aktionen angezeigt. Wir passen hier einen Text an, der vor diesen Buttons angezeigt wird */ div.dataTableArea div.ActionPanel>span { margin-top: 20px; } /* -------------- END HTMLTABLE2 -------------- */ /* -------------- START Tooltips -------------- */ a.tooltip-icon { margin-left: 10px; } .tooltip-inner { text-align: left; background-color: #fefefe; color: black; box-shadow: 0px 0px 4px black; opacity: 1 !important; } /* -------------- END Tooltips -------------- */ /* -------------- START SEARCH.JSP -------------- */ .ranking-result-1 { background-color: var(--color-bg-tertiary); color: var(--color-text-tertiary); width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; } .ranking-result-0 { background-color: lightgray; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; } /* -------------- END SEARCH.JSP -------------- */ /* -------------- START employeelist.jsp -------------- */ /* Ansicht ab Tablets, PCs usw. wegen der Combolist eine fixi groe?e gegeben */ @media (min-width: 600px) { .tableEmployeelist { width: 50%; } } /* Ansicht für Handys wegen der Combolist eine fixe Große gegeben */ @media (max-width: 400px) { .tableEmployeelist { width: 100%; } } /* -------------- END employeelist.jsp -------------- */ /* -------------- START competences --------------- */ list-group-item .openCompetenceActions i { font-size: 16pt; } list-group-item .openCompetenceActions:hover i { color: var(--color-text-emphasize); } table.competenceListTrainingTable>tbody>tr>td { font-size: 0.8em; } table.competenceListTrainingTable td { vertical-align: middle; } /* -------------- END competences --------------- */ /* *************************************************************************************************** */ /* resourcePlannerMobile.jsp */ /* *************************************************************************************************** */ /* Zusammengefasst die css f?r die fullcalendar (Raum?bersicht, Trainingplanner, Belegungsanzeige (CalendarPartnerView) ---------------------------- */ #calendarResourcePlannerMobile #fc-headerTableWeeks { table-layout: fixed; } #calendarResourcePlannerMobile .fc-event a { font-weight: bold; } #calendarResourcePlannerMobile .fc-event { cursor: pointer; } #calendarResourcePlannerMobile td.fc-resourceName, #calendarResourcePlannerMobile th.fc-resourceName { padding: 2px; border-bottom: 2px solid #aaaaaa; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #efefef; vertical-align: top; width: 150px !important; /*white-space: nowrap;*/ overflow: hidden; } #calendarResourcePlannerMobile td.fc-weekend-column { background-color: #e6edf7; /* das Blau aus Outlook */ } /* leider gibt es f?r die Wochentage keine bessere Selektion */ #calendarResourcePlannerMobile .fc td { background-color: #ffffff; /* wei?er Hintergrund f?r den Kalender - wie Outlook */ } /* die Zeile mit der Monats?berschrift und den View-Buttons */ #calendarResourcePlannerMobile .fc-header td { background-color: #eaeaea; } #calendarResourcePlannerMobile .headerWeekCell { text-align: center; } #calendarResourcePlannerMobile .fc-headerCellDay { text-align: center; } #calendarResourcePlannerMobile .fc-holiday { background-color: #bbbbdd; } /* needed for modifying fullcalendar.css file */ #calendarResourcePlannerMobile .fc-view { height: 700px; position: absolute; overflow-y: auto; } #calendarResourcePlannerMobile .fc-border-separate th { border-right: 1px solid #999999; border-top: 1px solid #999999; border-bottom: 1px solid #999999; } #calendarResourcePlannerMobile .fc-border-separate th { border-right: 1px solid #999999; border-top: 1px solid #999999; border-bottom: 1px solid #999999; } #calendarResourcePlannerMobile .fc-event-title { text-shadow: none !important; } /* die Zeile mit den Monat/Woche/Tag-Buttons */ #calendarResourcePlannerMobile .fc-header td { background-color: #ffffff; } #calendarResourcePlannerMobile .fc-widget-header, #calendarResourcePlannerMobile .fc-widget-content { border-bottom: 2px solid #aaaaaa; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } #calendarResourcePlannerMobile .fc-view { height: 510px; position: absolute; overflow-y: auto; } #exportExcelResourcePlannerMobile { margin-left: 10px; width: 50px; float: right; margin-bottom: 1em; margin-top: -3em; } /* *************************************************************************************************** */ /* popupResourceAssignment.jsp */ /* *************************************************************************************************** */ /*Zwischen den beiden Datumsangaben und Uhrzeitangaben der Strich */ #modal_resourceAssignmentDialog label[name=separator] { text-align: center; margin-top: 10px; } /* *************************************************************************************************** */ /* participantHotelneed.jsp */ /* *************************************************************************************************** */ #completeHotelBookingOverview .dot { height: 1.25em; width: 1.25em; background-color: #bbb; border-radius: 50%; display: inline-block; margin-bottom: -0.25em; } #completeHotelBookingOverview #calendarLegende>div { min-width: 9em; } #completeHotelBookingOverview .acommodation_background { background-color: #f03c35 !important; } #completeHotelBookingOverview .acommodation_booked_background { background-color: yellow !important; } #completeHotelBookingOverview .catering_background { background-color: orange !important; } #completeHotelBookingOverview .childCare_background { background-color: green !important; } #completeHotelBookingOverview .training_background, .training_background, .type-bul.event /* wird in eventCalendar.jsp gebraucht */ { background-color: #555555 /* schön dunkel grau, damit das gut zu erkennen ist */ !important; } #completeHotelBookingOverview .today_background { background-color: #fcf8e3 !important; } /* Dieses Popup kann nur bestätigt werden oder man verlässt die Seite über den zurück button */ /* Es soll nicht mäglich sein das Popup über x zu schließen, daher zeigen wir es einfach nicht an */ #modal_initialConfirmPopup .btn-close { display: none; } /* *************************************************************************************************** */ /* popupCompetenceActions.jsp */ /* *************************************************************************************************** */ #modal_popupCompetenceActions button[name=trainingNotRequiredSave] { margin-top: 1em; } /* *************************************************************************************************** */ /* popupOpenToDo.jsp */ /* *************************************************************************************************** */ #todoPopupButtonContainer button.actionButton { width: 100%; } /* *************************************************************************************************** */ /* enrollList.jsp */ /* *************************************************************************************************** */ div#enrollListRootContainer button[name='startSearch'] { margin: 22px; } /* *************************************************************************************************** */ /* approvalEnrollList.jsp */ /* *************************************************************************************************** */ #modal_popupApproval #commentForApproveArea { background-repeat: no-repeat; background-position: 8px 40px; } #modal_popupApproval .employeeRequestColumn p { margin: 0; } /* *************************************************************************************************** */ /* popupTrainerChangeParticipants.jsp */ /* *************************************************************************************************** */ #modal_popupTrainerChangeParticipants label[name=popupTrainerChangeParticipantsParticipantInfo] { margin-bottom: 2em; } /* *************************************************************************************************** */ /* eventParticipantsSignature.jsp */ /* *************************************************************************************************** */ #signatureCanvas { /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #signatureCanvas { border: 2px solid #888; border-radius: 4px; position: relative; /* Necessary for correct mouse co-ords in Firefox */ } .signatureImage { max-height: 70px; width: 200px; border: 1px dashed blue; cursor: pointer; /* weil man durch klicken erneut unterschreiben kann */ } /* *************************************************************************************************** */ /* eventParticipants.jsp */ /* *************************************************************************************************** */ #eventParticipantsContainer .attendanceButton[disabled=disabled]:hover { cursor: default !important; } #eventParticipantsContainer .attendanceButton[disabled=disabled] { border: 0; background-color: transparent !important; } /* *************************************************************************************************** */ /* homeworkTrainerParticipantSubmission.jsp */ /* *************************************************************************************************** */ #modal_popupSubmission label[for=statusSubmission_3], #modal_popupSubmission label[for=statusSubmission_2], #modal_popupSubmission label[for=statusSubmission_1], #modal_popupSubmission label[for=statusSubmission_0], .SubmissionStatusText { width: 100%; } #modal_popupSubmission .SubmissionStatusText { display: inline-block; margin-top: 4px; } #modal_popupSubmission label[name=infoLabel] { padding-bottom: 10px; } /* *************************************************************************************************** */ /* selfServiceDSGVO.jsp */ /* *************************************************************************************************** */ .dsgvoRadioText { margin-left: 30px; } #dsgvoGridRoot div.form-check /*die Radio-Buttons*/ { margin-bottom: 50px; } /* *************************************************************************************************** */ /* translateHelper.jsp */ /* *************************************************************************************************** */ #translateHelperTable.itemTable tr:hover, #translateHelperTable.itemTable tr:hover td { background-color: #d0e0f0 !important; } #translateHelperTable.itemTable thead th, #translateHelperTable.itemTable tbody tr:last-child { border-bottom: 1px solid #d6d6d6; padding: 4px; } #translateHelperTable.itemTable tbody th, #translateHelperTable.itemTable tbody td { border-bottom: 1px solid #e6e6e6; padding: 4px; vertical-align: middle; } #translateHelperTable.itemTable tbody tr:nth-child(odd) td, #translateHelperTable.itemTable tbody tr:nth-child(odd) th { background-color: #eeeeee; } /* *************************************************************************************************** */ /* Examen.jsp */ /* *************************************************************************************************** */ .ExamTemplateDescription ul li, #examFolderQuestions ul:not(.examQuestionRankingList) li { padding-left: 10px !important; display: list-item; } /* damit die Dokumente kein Bullet bekommen */ #examFolderQuestions ul#documentList { list-style-type: none !important; padding-left: 0 !important; } #ExamParticipantSheetMain { width: 100%; } /* ExamParticipantSheet Formatierung des "Verbleibenden Berabeitungszeit" Infotexts */ #ExamParticipantSheetMain .examRemainingDurationInfo { font-size: 1.1rem; } /* ExamParticipantSheet Formatierung der verbleibenden Zeit */ #ExamParticipantSheetMain .examRemainingDurationTime { font-size: 1.2rem; } table.ExamResultTable { margin-top: 10px; width: 100%; } table.ExamResultTable tr td { padding: 4px; color: #444444; font-size: 12pt; border: 1px solid #777777; } /* die 2. Spalte mit den Punkten */ table.ExamResultTable tr td:nth-child(2) { text-align: right; font-family: monospace; } #ExamParticipantSheetMain #examFolderDrawerContainer { margin-top: 20px; text-align: center; } #ExamParticipantSheetMain .dot.answered { background-color: #e3f9e7; } #ExamParticipantSheetMain .dot.answering, #ExamParticipantSheetMain .dot.answered.answering { background-color: #6add79; } #ExamParticipantSheetMain .dot.marked.answering, #ExamParticipantSheetMain .dot.answered.marked.answering { background-color: #98e067; } #ExamParticipantSheetMain .dot.marked, #ExamParticipantSheetMain .marked { background-color: #ffff80; } #ExamParticipantSheetMain .dot.marked.answered, #ExamParticipantSheetMain .dot.answered.marked { background-color: #ffff80; } #ExamParticipantSheetMain #textDiv, #ExamParticipantSheetMain #imgDiv { overflow: auto; } #ExamParticipantSheetMain .buttonDiv { text-align: center; width: 100%; } #ExamParticipantSheetMain .folderDiv { padding-top: 1em; } #ExamParticipantSheetMain .tableDragDrop { margin: 0 auto; } #ExamParticipantSheetMain .examFolderStartInfo { margin-top: 20px; border-style: solid; border-width: 1px; border-radius: 10px; padding: 10px 10px 10px 10px; width: 96%; margin: 0 auto /* Zentriert im div dar?ber */ } #ExamParticipantSheetMain p.folderInformation { margin: 0px; } /* b?ndig machen mit der Progressbar f?r die verbleibende Zeit sowie die bearbeiteten Punkte */ #ExamParticipantSheetMain #remainingPointLabel, #ExamParticipantSheetMain #examRemainingTimeLabel { margin: 5px 0 4px 0; } #ExamParticipantSheetMain #pBTime, #ExamParticipantSheetMain #progressBarPoint { width: 90%; } #ExamParticipantSheetMain .dot { float: left; height: 27px; width: 27px; border-style: solid; border-radius: 50%; display: inline-block; z-index: 1000; background-color: white; position: relative; text-align: center; font-weight: bold; } #ExamParticipantSheetMain .lane { float: left; margin-top: 13px; background-color: red; width: 30px; height: 3px; border-radius: 10%; z-index: 500; margin-left: -5px; margin-right: -5px; position: relative; } #ExamParticipantSheetMain .center { text-align: center; } #ExamParticipantSheetMain .centerNG { display: flex; width: 100%; flex-flow: row wrap; align-content: space-between; margin-bottom: -2em; justify-content: center; } #examFolderDrawer .points { float: right; } #ExamParticipantSheetMain #textDiv { padding-bottom: 10px; /* kleiner Abstand zur Ternnlinie */ } #ExamParticipantSheetMain #imgDiv { /* Trennlinie zwischen den Bildern und dem Drop */ border-top: 4px solid #efefef; padding-top: 10px; } #ExamParticipantSheetMain .dropAreaPictureTD, #ExamParticipantSheetMain .dropAreaBack { width: 180px; vertical-align: top; text-align: center; padding-bottom: 0px !important; margin: 0.2em; /* so passen auf dem iPad 5 Fragen nebeneinander */ height: 180px; border: 1px solid #ababab !important; border-radius: 3px; box-shadow: 4px 4px #efefef; position: relative; background-color: white; /* INhalt zentrieren */ display: flex; align-items: center; float: left; position: relative; } #ExamParticipantSheetMain .dropAreaPicture.dropAreaBorder { border: dashed 4px #cccccc; border-radius: 20px; } #ExamParticipantSheetMain .dragAreaPicture.hide { transition: 0.01s; transform: translateX(-9999px); } #ExamParticipantSheetMain .dropAreaPicture { width: 90%; height: 80%; background-color: transparent; position: absolute; top: 20%; left: 5%; padding-top: 20px; } #ExamParticipantSheetMain .dropAreaLabel { margin: 4px; margin: auto; position: absolute; top: 0; width: 100%; } /* Checkboxen und Radios im gleichen Style wie die Sortierbaren listen, primarycolor umrandet alles*/ #ExamParticipantSheetMain .examQuestionRadio, #ExamParticipantSheetMain .examQuestionCheckbox { width: 100%; margin: 0.5em 0; color: var(--color-text-primary); background-color: var(--color-bg-primary); border-radius: 4px; } #ExamParticipantSheetMain .examQuestionRadio>label, #ExamParticipantSheetMain .examQuestionCheckbox>label { padding: 0.5rem; width: 100%; /*So ist die ganze "zeile" Klickbar f?r die Checkbox */ height: 100%; /*So ist die ganze "zeile" Klickbar f?r die Checkbox */ } #ExamParticipantSheetMain .examQuestionRadio .answerText, #ExamParticipantSheetMain .examQuestionCheckbox .answerText { margin-left: 5px; } #ExamParticipantSheetMain .progress .progress-bar.lessTime { background: #ff00c2; } #ExamParticipantSheetMain .progress .progress-bar.lessTime2 { background: red; } /* Der Container f?r die Progressbar, anders gesagt die "Umrandung" */ #ExamParticipantSheetMain .progress { height: 24px; border: 1px solid; } /* Text innerhalb des Fortschrittbalkens */ #ExamParticipantSheetMain .progress-bar-text { padding-left: 10px; } /* Placeholder beim Sortieren der Listen */ #ExamParticipantSheetMain li.sortable-placeholder { list-style-type: none; background-color: var(--color-bg-tertiary); color: var(--color-text-tertiary); padding: 0.5rem 1rem; margin-bottom: 0.5em; } /*Bei der Sortierbaren Liste sollen die Elemente nie beim hover "hochploppen" Das f?hrt beim ziehen eines anderen Elements nur zu Verwirrung */ #ExamParticipantSheetMain .list-group-item:hover { transform: none; box-shadow: none; } /* das Bild beim Drag&Drop */ #ExamParticipantSheetMain .dragAreaPictureImg { max-width: 140px; max-height: 140px; min-width: 32px; min-height: 32px; z-index: 10; /*Damit wird sichergestellt, das die Bilder vor den jeweiligen Fl?chen sind */ -webkit-user-drag: none; user-select: none; display: block; margin: auto; } #ExamParticipantSheetMain .dragAreaPicture { margin: auto; user-select: none; -webkit-user-drag: element; } #ExamParticipantSheetMain [draggable=true] { cursor: move; } /* Die Auswahllisten in den Lückentexten */ #examFolderQuestions .select2 { width: 20em !important; /* Das muss leider important sein, irgendwo wird das auf witdh auto gestellt und wir müssen das ?berschreiben*/ } #ExamParticipantSheetMain #examFolderQuestions { margin-top: 40px; border-style: solid; border-radius: 10px; padding: 10px 10px 10px 10px; } .examQuestionRankingList { margin: 0 auto; } .examQuestionRankingList .list-group-item { padding: 4px; margin-bottom: 8px; border-top-width: 1px; /*Alternativ: generell abgerundet*/ /* border-top-right-radius: inherit; border-top-left-radius: inherit; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; */ } .examQuestionRankingList .list-group-item:nth-child(2) { border-top-right-radius: inherit; border-top-left-radius: inherit; } span.connectionStatusOK, span.connectionStatusNotOK { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 16px; height: 16px; min-width: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */ min-height: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */ display: inline-block; border: 1px solid #999999; vertical-align: bottom; z-index: 50; } span.connectionStatusNotOK { background-color: var(--color-bg-danger); } span.connectionStatusOK { background-color: var(--color-bg-success); } /* *************************************************************************************************** */ /* trainerPopup.jsp */ /* *************************************************************************************************** */ .trainerPopupImg { display: block; margin: 0 auto; image-orientation: from-image; max-width: 100%; } /* *************************************************************************************************** */ /* examEvaluation.jsp */ /* *************************************************************************************************** */ #exam-evaluation-container table#participantSheetTable { border-collapse: separate; border-spacing: 0 2px; } #exam-evaluation-container table#participantSheetTable td { border: 1px solid black; padding-left: 8px; padding-right: 8px; } #exam-evaluation-container td.achievedPointsColumn, #exam-evaluation-container td.achievablePointsColumn { width: 100px; } #exam-evaluation-container table#participantSheetTable thead td.topFolder { font-weight: bold !important; padding: 8px; text-align: center; } #exam-evaluation-container td.achievablePointsColumn.editableRow p { margin-top: 28px; } #exam-evaluation-container td.evaluationCommentColumn { min-width: 220px; } #exam-evaluation-container table#participantSheetTable tbody td.achievedPointsColumn, #exam-evaluation-container table#participantSheetTable tbody td.achievablePointsColumn { text-align: right; padding-right: 5px !important; } #exam-evaluation-container div.participant-answer { background-color: white; } #exam-evaluation-container ul.document-download-list { list-style-type: none; background-color: white; padding-left: 15px; padding: 8px; } #exam-evaluation-container .document-download-list li::before { content: "\2B73"; margin-right: 5px; } #exam-evaluation-container textarea.evaluationCommentInput { min-height: 150px !important; margin-top: 20px; margin-bottom: 20px; } /* Die Bilder in der Frage dürfen maximal so breit werden wie die Spalte in der sie eingebettet sind */ #exam-evaluation-container .questionText img { max-width: 100%; width: auto; height: auto; } /* Hier sollen die Listen auf keinen Fall "animiert" sein */ #exam-evaluation-container .list-group-item:hover { transform: none; box-shadow: none; } /* *************************************************************************************************** */ /* inquiryParticipant.jsp */ /* *************************************************************************************************** */ #inquiryFormGrid .hidden-page, #inquiryFormGrid div.hidden-condition { display: none; } /* Der Container für die Progressbar, anders gesagt die "Umrandung" */ #paginationNavigation .progress { height: 24px; border: 1px solid; background-color: white; } .progressBarMobileInquiry { width: 20%; } /*Der Balken der den Fortschritt markiert */ #paginationNavigation .progress .progress-bar { overflow: visible; background-color: lightgrey; color: black; } /* Text innerhalb des Fortschrittbalkens */ #paginationNavigation .progress-bar-text { padding-left: 10px; } /* .matrixTable .table h3 { */ /* padding-top: 1.5em; */ /* padding-left: 1em; */ /* font-size: 1em; */ /* } */ /* .matrixTable tbody{ */ /* border: none; */ /* } */ /* Matrix-Frage Zelle */ .matrixTable-cell { padding-left: 0px; padding-right: 0px; min-height: 80px; min-width: 50px; width: 100%; color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border-radius: 5px; text-align: center; } .matrixTable-cell:hover { color: var(--color-text-secondary-hover); background-color: var(--color-bg-secondary-hover); } .matrixTable-cell.checked { color: var(--color-text-primary); background-color: var(--color-bg-primary); } .check-matrix-grid { gap: 0.5rem; grid-template-columns: repeat(var(--col-amount), minmax(0, 1fr)); } .matrixTable-cell input.form-check-input:checked { border-color: var(--color-bg-secondary); } .matrixTable-cell .answerText { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* .matrixTable-cell input{ */ /* margin-top: 25px; */ /* } */ /* Bei Umfragen sollen die Checkboxen und Radio-Buttons etwas größer und auffälliger sein */ /* .question_container .form-check.checkbox, .question_container .form-check.radio { */ /* border: 1px solid #ced4da; */ /* padding-left: 2em; */ /* border-radius: 0.25rem; */ /* transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */ /* } */ /* Bei Umfragen sollen die Checkboxen und Radio-Buttons etwas größer und auffälliger sein, und dann soll die komplette Fläche klickbar sein */ .question_container .form-check.checkbox>label, .question_container .form-check.radio>label { width: 100%; } .matrixTable .highlightRequired, .quest.highlightRequired { border: 2px solid var(--color-bg-danger) !important; } /* *************************************************************************************************** */ /* employeeTrainingPathAssignment.jsp */ /* *************************************************************************************************** */ #trainingPathAssignmentSteps ul#automaticPreregistrationError { color: red; } /* *************************************************************************************************** */ /* employeeCompetence.jsp */ /* *************************************************************************************************** */ #employeeCompetenceContainer .statusTableNumber { text-align: right; } #employeeCompetenceContainer .sumTable td { font-weight: bold; color: black; } #employeeCompetenceContainer div.red { background-color: red; height: 18px; text-align: left; } #employeeCompetenceContainer div.green { background-color: green; height: 18px; } #employeeCompetenceContainer div.gray { background-color: #AAAAAA; height: 18px; text-align: left; } #employeeCompetenceContainer div.yellow { background-color: yellow; height: 18px; text-align: left; } #employeeCompetenceContainer .trainingPathRow td { font-weight: bold; } #employeeCompetenceContainer .summaryTable { border-collapse: collapse; } #employeeCompetenceContainer .summaryTable th { color: #0b3378; text-align: center; } #employeeCompetenceContainer .summaryTable td, .summaryTable th { padding: 0.4em .4em 0.4em .4em; border: 1px solid #aaaaaa; border-collapse: collapse; font-size: 0.8em; } #employeeCompetenceContainer #chartLegend td { font-size: 0.7em; } /* #employeeCompetenceContainer input[type=checkbox] img { */ /* width: 24px; */ /* height: 24px; */ /* } */ /* *************************************************************************************************** */ /* employeeCompetence.jsp */ /* *************************************************************************************************** */ #competenceContainer #productListAreaExplorer .img-thumbnail { padding: 0; background-color: unset; border: none; } /* *************************************************************************************************** */ /* createInquiryFormTrainer.jsp */ /* *************************************************************************************************** */ /* Leider funktionieren die ecadia-Standardklassen f?r klein und gro?e Bildschirme hier nicht richtig. Daher hier selbst gemacht (normalerweise ist display:block)*/ #selectInquiryDiv .large { display: inline; } /* Auskommentiert fuer Issue #4588 @ilu weil matrix Spalten nur unter Mobile Ansicht ihre Beschreibung angezeigt haben*/ /*#selectInquiryDiv .small{ display: none; }*/ #selectInquiryDiv .Xlarge { display: none; } @media (max-width :680px) { #selectInquiryDiv .large { display: none; } #selectInquiryDiv .small { display: inline; } } @media (min-width :1200px) { #selectInquiryDiv .Xlarge { display: inline; } } #selectInquiryDiv .buttonCreateFormElement { background-color: white; } #selectInquiryDiv .btn-secondary.buttonCreateFormElement:hover { background-color: lightgrey; } /* *************************************************************************************************** */ /* employeeCompetenceList.jsp */ /* *************************************************************************************************** */ .competenceText { text-shadow: none; /* kann man sinst nicht gescheit lesen */ font-weight: normal; } td.ActiveAssessment { background-color: #fef3de !important; /* pastell gelb zum highlighten der aktuellen Spalte */ } .competenceOptional { background-color: #cccccc !important; } .competenceIsAutorization a:first-child, .competenceIsAutorization { background-image: url("../gifMobile/competenceAutorisationInfo.png") !important; background-position: right 2px bottom 2px; background-repeat: no-repeat; } .competenceProgressBarFrame { border: 1px solid #999999; box-shadow: 2px 2px #999999; background: white; } .competenceProgressBarCurrent { background: #00ff00; margin: 2px; font-size: .7em; color: black; } .competenceProgressBarCurrentSelfAssessment { background: yellow; margin: 2px; font-size: .7em; color: black; } .competenceProgressBarRequired { background: #999999; margin: 2px; font-size: .7em; color: black; } .competenceProgressBarText, .competenceSquareWidgetText { font-size: .7em; color: #777777; } .competenceProgressBarTextOpen { font-size: .7em; color: black; font-weight: bold; } .competenceProgressBar { /* sonst kommt das von btn-ui und ist etwas hoch */ padding-bottom: .2em !important; } .competenceSquareWidgetText.competenceSquareEmpty { border: 1px solid black; width: 32px; height: 32px; } /* *************************************************************************************************** */ /* myTrainerRequests.jsp */ /* *************************************************************************************************** */ #listTrainerRequest p.rejectedTrainerRequest { font-size: small; } /* *************************************************************************************************** */ /* myCorrespondenceList.jsp */ /* *************************************************************************************************** */ table#correspondenceJobTable a { color: black; text-decoration: none; font-weight: inherit !important; } table#correspondenceJobTable a:hover { color: black; text-decoration: underline; } /* *************************************************************************************************** */ /* correspondenceJob.jsp */ /* *************************************************************************************************** */ #correspondenceJobBody iframe { width: 100%; } .correspondenceJobBody { background-color: rgb(252, 253, 254); border-radius: 10px; border: 1px solid black; } /* *************************************************************************************************** */ /* toDoList.jsp */ /* *************************************************************************************************** */ .mobile-list li.toDoListItem .img-thumbnail { max-height: 32px; } #todoList .toDoIsLate h1 { color: red; } #todoList li.toDoIsLate { background-image: url("../gifMobile/deadline32.png"); background-repeat: no-repeat; background-position: right 10px center; } #todoList li.todoHighlight { background-image: url("../gifMobile/alert32.png"); background-repeat: no-repeat; background-position: right 10px center; } #toDoDateFilterContainer input.filterButton { margin-top: 8px; } #toDoDateFilterContainer div.form-check { margin-top: 35px; } /* *************************************************************************************************** */ /* cancelEnroll.jsp */ /* *************************************************************************************************** */ #cancellationOverviewContainer .successfulCancelation { color: green; } #cancellationOverviewContainer .unsuccessfulCancelation { color: red; } /* *************************************************************************************************** */ /* autocomplete von input feldern */ /* *************************************************************************************************** */ .autocomplete-result-area { position: absolute; margin-top: 4px; z-index: 5; /* So ist die Autocomplete-Liste über den Suchergebnisen im Explorer. Ansonsten kann es sein, dass man auf ein Ergebnis der Autocomplete-Liste klicken will aber ausversehen ein Suchergebnis öffnet*/ } /* die results in der schnellsuche sollen etwas breiter sein als das input-feld */ nav.navbar .autocomplete-result-area { max-width: 50em !important; } li.autocomplete-result-entry img.img-thumbnail { height: 32px; } /* um über die Pfeiltasten ausgewählten Eintrag hervorzuheben*/ li.autocomplete-result-entry-selected { background-color: var(--color-bg-primary) /*var(--bg-body)*/ !important; color: var(--color-header-primary); } /* *************************************************************************************************** */ /* myinquiryEvaluationList.jsp */ /* *************************************************************************************************** */ /* Im PopupQR-Code für den Trainer */ #inquiryQRCode { padding: 1em; text-align: center; } .participantKeyLabelText { font-weight: bold; margin-top: 25px; margin-bottom: 25px; margin-right: 5px; } .participantKey { padding: 5px; font-family: 'Courier New', monospace; border: 1px solid black; border-radius: 0.2em; margin-top: 25px; margin-bottom: 25px; } /* *************************************************************************************************** */ /* inquiryEvaluation.jsp */ /* *************************************************************************************************** */ /* Die Fragebögen haben eine Umrandung, dann machen wir das hier für die Zusammenfassung auch so*/ #allEvalDiv { margin: 0.5em; padding: 1em; border: 2px solid #888888; box-shadow: 4px 4px 4px #999999; background-color: white; } #singleEvalDiv .singleEval { min-width: 20px; width: 100%; } #inquiryEvaluationButtonContainer .summaryButton { width: 100% } #singleEvalDiv { padding-left: 0.5em; width: 100% !important } /* *************************************************************************************************** */ /* myDocumentsToRead.jsp */ /* *************************************************************************************************** */ li.list-group-item.count-icon-red .item-count { color: red; } li.list-group-item.count-icon-orange .item-count { color: orange; } li.list-group-item.count-icon-green .item-count { color: green; } /* *************************************************************************************************** */ /* TOTP-Popup */ /* *************************************************************************************************** */ #inputOtp { border: 1px solid #777777; border-radius: 0.2em; color: blue; font-family: monospace; font-size: 16pt; margin: auto; width: 4.5em; text-align: center; } #mfaSecretField { word-break: break-all; user-select: all; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: text; background-color: #f3f4f5; border: 1px solid #777777; border-radius: 0.2em; padding: 0.5em; width: 95%; height: 6em; overflow: auto; font-size: 0.9em; /* dann werden das 3 Zeilen */ } #logonTab>h3, #newAccountTab>h3, #otherNewAccountTab>h3 { display: none; /* Stand 26.04.22 wird bei den Tabs das Label auch auf den Container nochmal abgedruckt*/ } .logonMFAStep1 { padding-left: 40px; background-repeat: no-repeat; background-position: 0px 0px; background-image: url('../gifMobile/processStep1.png'); } .logonMFAStep1 p:nth-child(1) { padding-right: 100px; height: 70px; /* damit das Bild ganz sichtbar bleibt */ background-repeat: no-repeat; background-position: right top; background-image: url('../gifMobile/qrCodeScan64.png'); } .logonMFAStep2 { padding-left: 40px; background-repeat: no-repeat; background-position: 0px 0px; background-image: url('../gifMobile/processStep2.png'); } .logonMFAStep2 p:nth-child(1) { padding-right: 100px; height: 70px; /* damit das Bild ganz sichtbar bleigt */ background-repeat: no-repeat; background-position: right top; background-image: url('../gifMobile/getMFAKey64.png'); } /* *************************************************************************************************** */ /* popupSelectWBTLanguage*/ /* *************************************************************************************************** */ #modal_selectWBTLanguage .modal-body, #modal_selectWBTLanguage .mobileRootContainer { padding: 0; /* wir wollen, dass die Sprachauswahl so groß wie möglich im Popup ist */ } /* Um die Flaggen kein Border */ #modal_selectWBTLanguage #languageList .img-thumbnail { border: none; } #modal_selectWBTLanguage .modal-body { overflow-y: clip; /* Stand 13.6.22 wurde sonst eine Scrollbar angezeigt die es nicht braucht*/ } /* *************************************************************************************************** */ /* trainingProduct.jsp, selfstudy.jsp */ /* *************************************************************************************************** */ /* Schloß-Icon um im Buchen-Button zu signalisieren, dass man sich erst einloggen muss bevor man buchen kann */ .lock-icon { background: rgba(255, 255, 255, 0.9); padding: 0.3rem; margin-left: 0.3rem; margin-bottom: -0.5rem; margin-top: -0.5rem; border-radius: 50%; color: #6c757d; font-size: .8em; } @media only screen and (min-width: 900px) { /* Auf großen Bildschirmen soll das Schloß-Icon den Buchen-Button nicht verlängern, der hat genug Platz. Auf dem Handy braucht es aber den Platz */ .lock-icon { margin-right: -1.25rem; } } .card-header { background-color: var(--color-bg-secondary); color: var(--color-header-secondary); } .text-body { color: var(--color-text) !important; margin-top: 0.5rem; padding: 0.5rem; background-color: var(--color-bg-secondary); } .text-body ul, .text-body ol { margin-left: 1rem; } .documentTableThumbnail>img { padding: 3px; } .document-body { font-size: small; } .DocumentListFrame>ul { list-style: none; } .ratingBlock, .forumBlock { border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; padding: 15px; margin: 5px; } #forumforSubjectContainer .row .col-md { text-align: right; } .productImage { box-shadow: 0 2px 5px 1px rgb(0 0 0 / 20%); border-radius: 5px; border: none; margin: 0.5em; } .event-box .accordion-flush, #accordionPanelsRight .accordion-flush { margin-top: 1em; margin-bottom: 1em; } .event-box .accordion-button, #accordionPanelsRight .accordion-button { padding: 1em; } .event-box .list-group-item, #accordionPanelsRight .list-group-item { padding: 5px; border-radius: 5px; } #accordionPanelsRight .accordion-body { margin: 0.5em; padding: 0.5em; } .accordion-flush .accordion-button.collapsed { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } /* *************************************************************************************************** */ /* myAzubiWeekReport*/ /* *************************************************************************************************** */ .emptyHoursSpan { color: red; } /* ausgeblendete Forumitems für Moderatoren durchgestrichen anzeigen */ .forumEntryHidden { text-decoration: line-through; } /* *************************************************************************************************** */ /* myInhouseEventsList*/ /* *************************************************************************************************** */ .eventLink { color: blue; cursor: pointer; text-decoration: underline blue; } /* *********************************************************************************************************************/ /* Theme Vorschau*/ /* *********************************************************************************************************************/ .primaryBGDiv, .secondaryBGDiv, .bodyBGDiv, .tertiaryBGDiv { color: black; background-color: white; border: 1px solid black; } /* Im PopupQR-Code für den Trainer */ .inquiryQRCode { padding: 1em; text-align: center; } /* *************************************************************************************************** */ /* includePopupLogin*/ /* *************************************************************************************************** */ /* Abstände im Popup zum Einloggen etwas anpassen */ #MobilepopupLogon_TabSetLogonTabSet.nav-tabs { margin-bottom: 0px; } #MobilepopupLogon_TabSetLogonTabSet-accordion.tab-content { padding: 0px; } #logonTab img.brandLogo { max-height: 32px; position: absolute; top: 0; right: 20px; } /* *************************************************************************************************** */ /* createNewEvent.jsp*/ /* *************************************************************************************************** */ /* createNewevent.jsp Meldezusätze */ .createNewEvent_TaggedValueGrid { padding-top: .5em !important; } .createNewEvent_TaggedValueGrid input { margin-top: 12px; } .createNewEvent_TaggedValueGrid label { padding-top: .5em; } #createNewEvent_taggedValueGrid div { vertical-align: middle !important; } #gridPrice .row { vertical-align: middle } /* *************************************************************************************************** */ /* myWBT.jsp*/ /* *************************************************************************************************** */ /* *************************************************************************************************** */ /* eventParticipant.jsp*/ /* *************************************************************************************************** */ .attendanceButton[disabled=disabled]:hover { cursor: default !important; } .attendanceButton[disabled=disabled] { border: 0; background-color: transparent !important; } /* da ma ein a-Tag im Safari nicht disabeln kann kommt hier dieser Work-Arround; https://stackoverflow.com/questions/2091168/how-to-disable-a-link-using-only-css */ .not-active { pointer-events: none; cursor: default; } /* *************************************************************************************************** */ /* DashboardwidgetmyProfile.jsp*/ /* *************************************************************************************************** */ /* Das kleine Avatarbild soll immer ein perfekter Kreis und keine Elipse sein. Umso weiter wir von einem Quadrat wegkommen im Originalbild umso mehr muss reingezoomt werden */ img.avatar { border-radius: 50%; height: 100px; width: 100px; object-fit: cover; object-position: center; } /* im Handy etwas kleiner */ @media (max-width :680px) { img.avatar { height: 70px; width: 70px; } } /* *************************************************************************************************** */ /* DASHBOARD GRID */ /* *************************************************************************************************** */ .dashboard-grid { display: grid; gap: 1em; grid-auto-rows: auto; grid-template-columns: minmax(0, 1fr); } /* MEDIUM */ @media (min-width: 768px) { .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* EXTRA LARGE */ @media (min-width: 1200px) { .dashboard-grid { grid-auto-rows: 5.0em; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } } .dashboard-tile { /* padding: 20px; */ grid-column-start: span 1; border-radius: 15px; /* min-width: 0px; */ } .dashboard-tile--inner { /* margin: 1em; */ padding: 1em; border-radius: 15px; height: 100%; position: relative; background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); } .dashboard-tile--inner:after { content: ""; position: absolute; z-index: 25; bottom: 0; left: 0; pointer-events: none; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-bg-quaternary)); width: 100%; height: 1em; } .dashboard-tile--inner .tile-title { color: var(--color-header-quaternary); } .dashboard-tile--inner .link-icon { float: right; opacity: 0.6; font-size: 1.2em; } .dashboard-tile--inner .dashboard-list { margin-top: 1.5em; } .dashboard-tile--inner .dashboard-list .list-group-item { border-radius: 15px 15px 15px 15px; margin-bottom: 0.5em; border: 1px solid var(--color-bg-primary); background-color: var(--color-bg-body); color: var(--color-text); } .dashboard-tile--inner .dashboard-list .list-group-item:hover { background-color: var(--color-bg-quaternary-hover); color: var(--color-text-quaternary-hover); } .dashboard-tile--inner .dashboard-list .dashboard-title { max-width: 80%; } .dashboard-tile--inner .ecadia-count-circle .new-icon { position: absolute; right: 0px; top: 0px; text-transform: uppercase; font-size: small; font-weight: bold; padding: 5px 10px; background-color: var(--color-bg-primary); border-radius: 10px 10px 10px 10px; color: var(--color-text-primary); } .dashboard-tile--inner .ecadia-count-circle { background-color: var(--color-bg-quaternary); border: 0px; } .dashboard-tile--inner .dashboard-list-text p { margin: 0; } .dashboard-date { position: absolute; right: 5px; top: 5px; font-size: 10pt; } /* das "2 weitere" als Zusatzinfo für den Detail-Button */ .tile-moreInfo { position: relative; text-align: end; padding: 0; margin-top: -12px; color: var(--color-text-quaternary); /* Farbe der H2-Überschrift, damit das etwas hervorsticht */ } .tile-moreInfo:empty { margin-top: 0; /* leereTags ohne Layoutänderung */ } /* für zentrierte Kacheln */ .dashboard-tile .dashboard-tile-center { display: block; text-align: center; } .dashboard-tile ul li.list-group-item { background-color: var(--color-bg-body); } /* Änderung für Handy damit die Schrift nicht in die Überschrift reinläuft -------------------------------------------------------------------------- */ @media (max-width :680px) { .dashboard-date { top: 0px; font-size: 8pt; } } /* Die Liste an Dashboardwidgets, die konfigurierbar ist im Dashboard-Admin-Modus */ #dashboardNewEntriesArea { max-height: 95vh; /* Den Header muss man immer wegrechenen */ overflow: auto; right: 0; top: var(--header-height); /* Initial direkt unter dem Header positionieren */ max-width: 350px; background-color: var(--color-bg-body); z-index: 6; /*Es gibt Kalender im Dashboard die sonst über diese Admin-Liste gelegt werden. Außerdem muss dieses Div über den Buttons im Bearbeitenmodus liegen*/ cursor: move } /* Informationen zu einem Dashboard-Widget */ .dashboardInformationGrid { background-color: var(--color-bg-quaternary); color: var(--color-text-quaternary); border: 3px solid var(--color-text); border-radius: 15px; } /* Bereits im Dashboard konfigurierte Kacheln sind in der Liste zwar vorhanden aber nicht sichtbar */ .dashboardElementInitialHiden { display: none; } /* Die Elemente die gerade verschoben werden, sind zwar leicht transparent aber liegen über allem anderen */ .dashboardInformationGrid.dragging { z-index: 100; opacity: 0.8; } /* rechts unten den Namen der Kachel anzeigen, nur für Admins ------------------------------------------------------------- */ .tileNameInfo { position: absolute; right: 2px; ; bottom: 2px; font-size: 6pt; color: #dddddd; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; -o-user-select: text !important; user-select: text !important; } /* PIE CHART */ property --percent { syntax: ''; inherits: true; initial-value: 0; } .pie { --percent: 20; --b: 16px; --c: var(--color-bg-primary); --w: 150px; width: var(--w); aspect-ratio: 1; position: relative; display: inline-grid; place-content: center; font-size: 25px; font-weight: bold; font-family: sans-serif; z-index: 39; } .pie:before, .pie:after { content: ""; position: absolute; border-radius: 50%; } .pie:before { inset: 0; background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--percent)*1%), var(--color-bg-secondary) 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); } .pie:after { inset: calc(50% - var(--b)/2); background: var(--c); transform: rotate(calc(var(--percent)*3.6deg)) translateY(calc(50% - var(--w)/2)); } .bottom:after { inset: 0; } .topping { z-index: 40; } .topping:after { display: none; } .topping:before { position: absolute; background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--percent)*1%), rgba(0, 0, 0, 0) 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); } .animate { animation: p 1s .5s both; } /* die Farbbox der Legende unter dem Pie */ span.pieLegendColorBox { width: 30px; height: 12px; border: 1px solid #555555; display: inline-block; margin-right: 6px; } span.pieLegendPercent { margin-left: 6px; margin-right: 12px; /* der Abstand zum nächsten Legendenelement */ } @keyframes p { from { --p: 0 } } .pie-titlebox { display: table; height: 50px; width: 100%; text-align: center } .pie-title { display: table-cell; vertical-align: middle; } div.dashboard-tile img.rounded-circle { max-width: 100%; max-height: 100%; width: auto; height: auto; } #tile-my-learningcoach .tile-title .mobileRootContainer { position: absolute; right: 15px; top: 15px; } #dashboardAdminArea .widget-setting { display: none; } .dashboard-tile.editing { cursor: move; border: 3px solid var(--color-text); position: relative; z-index: 1; /* Brauchen wir an der Stelle, damit die Buttons aus anderen Kacheln, nicht in einer anderen Kachel angezeigt werden, wenn sie sich gerade überschneiden */ } /* Gerade hinzugefügte Elemente die noch nicht gespeichert wurden besonders anzeigen */ .dashboard-tile.editing.nonStoredItem { border: 5px dashed var(--color-bg-warning); } /* Icon zum Verschieben einer Dashboard-Kachel*/ .dashboard-tile.editing.dragging { z-index: 100; opacity: 0.8; } /* Icon zur Größenänderung einer Dashboard-Kachel*/ .dashboard-tile.editing>.resize-icon { position: absolute; bottom: 3px; right: 5px; font-size: 1.25em; padding: 5px; cursor: se-resize; z-index: 5; background-color: var(--color-bg-body); border-radius: 10px; } /* Icon zum Löschen einer Dashboard-Kachel*/ .dashboard-tile.editing>.delete-icon { position: absolute; bottom: 3px; font-size: 1.25em; padding: 5px; cursor: pointer; z-index: 5; background-color: var(--color-bg-body); border-radius: 10px; } .dashboard-tile.editing>.edit-icon { position: absolute; bottom: 3px; right: 40px; font-size: 1.25em; padding: 5px; cursor: pointer; z-index: 5; background-color: var(--color-bg-body); border-radius: 10px; } .dashboardElementInitialHidden { display: none; } .dashboard-tile.editing button, .dashboard-tile.editing a { pointer-events: none; } /* der Forum-Link rechts am Rand beim WBT-Player */ .button-wbt-forum { display: block; position: fixed; top: 30em; /* wird fürs Handy überschrieben */ transform: rotate(90deg); transform-origin: 100% 0 0; right: 0; } /* der Forum-Link rechts am Rand beim WBT-Player */ .button-wbt-PWA-back { display: block; position: fixed; top: 4px; right: 0; padding-left: 1em; padding-right: 1em; } /*um auf dem Dahboard Platz zu sparen, MobileLists erzeugen unnötige

Tags */ .dashboard-tile p { margin-bottom: 0rem; } /* die Kachel DashboardWidgetMyProfile nutz den css.GridContainer, der ansonsten fürdiesen Fall zu großes padding hat */ #PersonalData>div { padding: 0; } /* *************************************************************************************************** */ /* DASHBOARD DashboardWidgetTimeTracking Kachel Meine Aufwände */ /* *************************************************************************************************** */ div#tile-effort-list { overflow-y: auto } /* *************************************************************************************************** */ /* Multi-Carousel */ /* *************************************************************************************************** */ /* die Bilder immer mit etwas Abstand zueinander */ .carousel-multi .carousel-inner img { padding: 10px; } .carousel-multi .carousel-inner .active, .carousel-multi .carousel-inner .carousel-item-next, .carousel-multi .carousel-inner .carousel-item-prev { display: flex; } /* Standardfall (wird für größere Bildschime im Fogenden überschrieben - mit 2 Bildern */ .carousel-multi .carousel-inner .carousel-item-end.active, .carousel-multi .carousel-inner .carousel-item-next { transform: translateX(50%); } .carousel-multi .carousel-inner .carousel-item-start.active, .carousel-multi .carousel-inner .carousel-item-prev { transform: translateX(-50%); } /* der Link "zum Artikel */ .mobile-carousel .ecadia-card-link { position: absolute; right: 1em; top: -1em; /* rechts unten im Text-Breeich, also über dem Footer */ } /* Sonderfall: es gibt kein Bild */ .mobile-carousel .card .no-image .card-text { padding-top: 2em; /* damit das nicht mit dem Datum überlappt */ } .mobile-carousel .card-title { height: 5em !important; /* 5em entspricht 4 Zeilen Text, dfann wird abgeschnitten - es ist aber auch der Teaser, der soll ja kurz sein */ } .mobile-carousel .card-footer { position: relative; /* weil der Link "zum Artikel" hier eingebettet ist */ } .mobile-carousel .card-text { height: auto; /* wird ansonsten mit 22px willkürlich hoch gemacht */ } /* iPad, 3 Bilder */ @media (min-width: 768px) { .carousel-multi .carousel-inner .carousel-item-end.active, .carousel-multi .carousel-inner .carousel-item-next { transform: translateX(33.3%); } .carousel-multi .carousel-inner .carousel-item-start.active, .carousel-multi .carousel-inner .carousel-item-prev { transform: translateX(-33.3%); } } /* Desktop , 5 Bilder */ @media (min-width: 1200px) { .carousel-multi .carousel-inner .carousel-item-end.active, .carousel-multi .carousel-inner .carousel-item-next { transform: translateX(20%); } .carousel-multi .carousel-inner .carousel-item-start.active, .carousel-multi .carousel-inner .carousel-item-prev { transform: translateX(-20%); } } .carousel-multi .carousel-inner .carousel-item-end, .carousel-multi .carousel-inner .carousel-item-start { transform: translateX(0); } .carousel-multi .carousel-control-prev-icon, .carousel-multi .carousel-control-next-icon { background-color: #999999; } /* *************************************************************************************************** */ /*Pinnwand */ /* *************************************************************************************************** */ .pinnwand-container { background: var(--color-bg-body); /* linear-gradient(to left bottom,#0087ac4a, #3a4895a8);#0087ac; linear-gradient(to left bottom,#ffffff, #dbdbdb); */ min-height: 100vh; width: 100%; height: 100%; margin: 0; position: relative; } .pinnwand-container #stickyContainer { background-image: url("cork_background.jpg"); /*https://pixabay.com/photos/background-cork-board-blank-72250/*/ height: 1600px; position: relative; border-style: solid; border-width: 20px; border-image: url(wood.jpg) 30 round; /*https://pixabay.com/de/photos/holz-brett-struktur-bretter-591631/ */ } .pinnwand-container .drag { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: grab; } .pinnwand-container .sticky { /* background: linear-gradient(to left bottom, #ffffff, #dbdbdb); */ box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); color: #00243f; /* 0 0 150px rgba(0, 0, 0, 0.2); */ display: inline-block; padding: 1rem; position: absolute; width: 15rem; } .pinnwand-container .sticky .pin { left: 0rem; top: 0rem; position: absolute; width: 1rem; height: 1rem; background-image: url("stecknadel.png"); /*https://pixabay.com/de/illustrations/fehler-textmarker-zeiger-brosche-2997212/*/ } .pinnwand-container .sticky h3, .pinnwand-container .sticky p { /* color: #0065b3; */ color: #00243f; pointer-events: none; /*verhindert anklicken von Links*/ } .pinnwand-container .sticky a { pointer-events: auto; } .pinnwand-container .sticky h3 { border-bottom: dashed 2px #666; margin: 0 0 0.5rem; min-height: 2.5rem; padding: 0 1.5rem 0.25rem 0; } .pinnwand-container .sticky p { margin: 0; /*height: 1rem;*/ } .pinnwand-container .sticky .deletesticky { color: #666; cursor: pointer; font-size: 1.5rem; position: absolute; right: 0.4rem; top: 0.8rem; } .pinnwand-container #popupImageDiv img { object-fit: scale-down; } .pinnwand-container .sticky .editsticky { color: #666; cursor: pointer; font-size: 1.5rem; position: absolute; right: 2.4rem; top: 0.8rem; } .pinnwand-container .sticky .fa-up-down-left-right { color: #666; font-size: 1.5rem; position: absolute; right: 0.6rem; bottom: 0.8rem; } .pinnwand-container .metadata { font-size: 0.8rem } .pinnwand-container .highlighted { box-shadow: 0 0 40px red } .pinnwand-container .smallview .sticky { padding: 0.4rem; position: absolute; width: 12rem; } .pinnwand-container .smallview .sticky h3 { border-bottom: dashed 2px #666; margin: 0 0 0rem; min-height: 1rem; padding: 0 0rem 0rem 0; } .pinnwand-container .smallview .sticky .deletesticky { font-size: 1rem; right: 0.4rem; top: 0.4rem; } .pinnwand-container .smallview .sticky .editsticky { font-size: 1rem; right: 1.8rem; top: 0.4rem; } .pinnwand-container .smallview .metadata { font-size: 0.7rem; line-height: 0.8rem !important } .pinnwand-container .smallview .sticky p { font-size: 0rem; height: 0.2rem } .pinnwand-container .smallview .sticky * { margin: 0 0 0 0; padding: 0 0 0 0; line-height: 1.1rem } .pinnwand-container .smallview .sticky img { width: 3.7rem !important; height: 3.7rem !important } .pinnwand-container #stickyContainer.smallview { border-style: none; } .pinnwand-container #stickiesWithNoPosition { width: 1296px; position: relative; border-style: dashed; border-color: var(- -color-bg-primary); } .pinnwand-container .largeview #stickyContainer { width: 1296px; } /** * Hier ist der Bereich (2) - ober kam schon mal diese Media-Query - für die Smartphone-Einstellungen * */ @media (max-width :680px) { .main-area { padding-top: 0; /** den kostbaren Platz nicht verschwenden */ } .ecadia-card { margin: 0; padding: 2px; } .nav_logo img { max-height: 45px; max-width: 100px; } .content ol, .contentul { padding-left: 1rem; } .row { margin: 0; } /* etwas weniger Rand als beim Desktop um jedes einzelne Element */ .row>* { padding-right: calc(var(--bs-gutter-x) * .1); /* anstelle .5 */ padding-left: calc(var(--bs-gutter-x) * .1); } /* insgesamt etwas Abstand zum Rahmen, damit das nicht am Handy-Rand klebt */ .main-area { padding-left: .2em; padding-right: .2em; } .dashboard-tile--inner { padding: 0.7em 0.4em 0.7em 0.4em !important; } .mobile-list .mt-2 { margin-top: 1rem !important; } /* alles etwas kompakter - default ist 1 */ p { margin-bottom: 0.5rem; } .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { padding: 2px; } /* in einem accordion brauchen wir es nicht und sollte dementsprechend gleich bleiben */ .accordion-header>.ecadia-count, .accordion-header>.ecadia-count-circle { position: absolute; right: 50px; top: 12px; z-index: 50; vertical-align: middle; line-height: 20px; } .mobile-list .card { min-height: 0; /* weil die Kacheln alle untereinande sind, sind unterschiedliche Höhen OK */ } /* Überschriften insgesamt etwas kleiner */ .h1, h1 { font-size: 1.4em; } .h2, h2 { font-size: 1.2em; } .h3, h3, .h4, h4 { font-size: 1.1em; } .btn-long { padding: .3rem .6rem; /* etwas kompakter*/ } .btn-long.buttonWithRightIcon { padding-right: .6rem; /* deutlich kompakter */ } .btn { font-size: 0.9em; } .accordion-body { padding: 0.3em; /* etwas weniger as beim Desktop */ } /* eFeedback - der Fragebogen insgesamt mit weniger padding ----------------------------------------------- */ /* die Einzelbuttons einer Matrixfrage kompakter */ .matrixTable .row .col-md-8, .matrixTable .row .col { padding: 0.2em !important; } /* generell den Rahmen kompakter */ #questions .row .col-12, #questions .row .col { padding: 0.2em !important; } /* im Lerncoach-Kachel, der Button für das private Forum - etwas weiter rechts oben */ .dashboardForumButton { top: 0px; position: absolute; right: 5px; } .button-wbt-forum { top: 20em; } /* weitere Regeln zum eFeedback stehen in ecadiaMoble.css */ } /* Änderung für Handy -------------------------------------------------------------------------- */ li.showCountInListItem { padding-right: 2em; /* damit die Texte etc nicht in den count lappen */ } /* abgeschlossene WBTs etwas aufhübschen, damit man das gut erkennen kann */ li.WBTListItemClosed { background-image: url('../gifMobile/checkboxChecked.png'); background-repeat: no-repeat; background-position: right 0 bottom 0; background-size: 32px; padding-right: 2em; /* damit die Texte etc nicht ins logo lappen */ } li.WBTListItemOpen { background-image: url('../gifMobile/checkboxInProgres.png'); background-repeat: no-repeat; background-position: right 0 bottom 0; background-size: 32px; padding-right: 2em; /* damit die Texte etc nicht ins logo lappen */ } .loader { border: 8px solid var(--color-bg-quaternary); /* Light grey */ border-top: 8px solid var(--color-bg-primary); /* Blue */ border-radius: 50%; width: 50px; height: 50px; animation: spin 2s linear infinite; margin: 12px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* MobileGridContsiner */ .containerGrid { display: grid; grid-template-columns: max-content auto; /* Standard: 2 Spalten - das typische Label - Input Grid */ } @media (max-width :680px) { .containerGrid { grid-template-columns: 30% auto; /* etwas anders */ } } /* Tabellenartig etwas padding um die Zellen */ .containerGrid>div { padding: 0.2rem 0.4rem 0.2rem 0.4rem; } /* Tabelle in Tabelle hat den äußeren Rand nicht */ .containerGrid>div .containerGrid div { padding: 0 0.4rem 0.2rem 0; } /* Report */ .addFilterButton, .removeFilterButton, .additionalFilterButton { margin-bottom: 4px; } /* DatePicker */ .MobileDatePicker { width: 8em; /* sinnvolle Breite */ } #validDateTrainerAssignmentDocument .MobileDatePicker { width: 100%; /* aufgrund von Problemen beim bearbeiten von Dokumenten bei einer Veranstaltung als Trainer https://devinternal.ecadia.com/ecadia-developers/ecadia/-/issues/4920 */ } .datePickerToBetween { display: none; } /* generell etwas Abstand zwischen den Zeilen - sonst sitzen die Widgets direkt aufeinander */ .mobileContainer .row { padding-bottom: 4px; } .callout { display: flex; margin-top: 1.25rem; margin-bottom: 1.25rem; background-color: var(--bs-gray-100); border-radius: 0.25rem; border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300)); } .callout-info { border-color: var(--color-bg-primary, lightblue); } .callout-info>.callout-icon { background-color: var(--color-bg-primary, lightblue); color: var(--color-text-primary, black); } .callout-warning { border-color: var(--color-bg-warning, orange); } .callout-warning>.callout-icon { background-color: var(--color-bg-warning, orange); color: var(--color-text-warning, black); } .callout-danger { border-color: var(--color-bg-danger, red); } .callout-danger .callout-icon { background-color: var(--color-bg-danger, red); color: var(--color-text-danger, black); } .buttonFocusedBorder { border: 1px solid; border-color: #6edff6; } .mobileDefaultButtons button { margin-left: 0.5em; } /* -- Carousel ----------------------------------------------------------------------------------------------------- */ /* Den Teaser nicht abschneiden, sieht blöd aus, zumal genügend pPlatz da ist */ .mobile-carousel .card-body>h5.card-title { height: auto; } ul.MobileButtonList { list-style: none; } ul.MobileButtonList li { display: flex; align-items: center; } /* die Varante mit einfachen Bullets - die sind eher klein */ i.MobileButtonList { color: var(--color-text-link); /* in der Regel hat die Zeile eine Kink */ font-size: 5pt; top: 1px; left: -15pt; position: relative; } /* explizi Icons, die sich größer, sonst erkennt man nichts */ i.MobileButtonListWithIcon { color: var(--color-text-link); /* in der Regel hat die Zeile eine Kink */ display: inline-block; width: 15px; vertical-align: top; left: -15pt; position: relative; } .passwordGuidelineInvisible { display: none; } div.PasswordCircleCheck { float: right; margin-right: 50px; margin-top: -35px; color: green; }