@CHARSET "UTF-8"; @media only screen and (min-width: 70em){ .ui-page { position: relative !important; } .ui-page, .ui-header, .ui-footer { /* max-width: 70em !important; */ margin: 0 auto !important; border-right: 1px #eeeeee solid !important; border-left: 1px #eeeeee solid !important; } .ui-overlay-d { background: #333; } } /* Überschreibt eine jQueryMobile-Regel: Der Textshadow schadet viel mehr, als dass er nützt - generell abschalten */ .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { text-shadow: none; } .ui-popup-screen.in { background: #333 url("gifMobile/ui-bg_flat_100_333333_40x100.png") 50% 50% repeat-x; opacity: 0.3; } /* Trick um Inputs nebeneinander zu haben, wie inline beim Button */ .aside .ui-input-text { display:inline-block; } .ui-panel { width: 28em; } /* Menü auf der rechten und Bookmarks auf der linken Seite: das ist der Bereich, dessen Input dem Panel zugeschlagen wird. Weiter rechts bzw. links führt dann ein Klick dazu dass das Panel zugeht. Muss gleich sein wie bei #filterPanel die Breite */ .ui-panel-dismiss-open.ui-panel-dismiss-position-left { left: 28em; } .ui-panel-dismiss-open.ui-panel-dismiss-position-right { right: 28em; } /* RS, 20.11.2021: blöden Schatten und weiße Schrift aus dem jQM-Standard für selektierte Button überschreiben */ .ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head+body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active { background-color: #38c; border-color: #38c; color: black; text-shadow: none; } @media ( max-width :680px) { .ui-panel { width: 20em; } .ui-panel-dismiss-open.ui-panel-dismiss-position-left { left: 20em; } .ui-panel-dismiss-open.ui-panel-dismiss-position-right { right: 20em; } } /* RS, 31.08.2017: ganz seltsam: das führt bei kleinen Geräten bei ui-grid zu ungleichen rechten und linken Rändern */ [class*='ui-block-'] > .ui-btn, [class*='ui-block-'] > .ui-select, [class*='ui-block-'] > .ui-checkbox, [class*='ui-block-'] > .ui-radio, [class*='ui-block-'] > button.ui-btn-inline, [class*='ui-block-'] > button.ui-btn-icon-notext, .ui-header [class*='ui-block-'] > button.ui-btn, .ui-footer [class*='ui-block-'] > button.ui-btn { margin-right: inherit; margin-left: inherit; } /* völlig unverständlich wieso man das brauch: aber sonst ist der Header um die höhe des menuPanel zu hoch */ .ui-panel-wrapper { min-height: 0; } .ui-content { margin: 0 auto; padding: 0 0.5em 0.5em 0.5em; /* der jQM default ist hier 1em, was zu breit ist - und oben nicht nötig */ } .ui-body-a { border: 0 !important; } .ui-content .ui-listview-inset, .ui-panel-inner > .ui-listview-inset { margin: 0 0; } .ui-bar, .ui-body { padding: 0.1em 0.5em; /* Standard: 0.5 1 wodurch die Masken zu weit auseinanderlaufen */ } .ui-select, .ui-controlgroup, fieldset.ui-controlgroup { margin-bottom: 0em; /* die Combobox oder ui-controlgroup hat im Standard 0.5em, was unnötig weit ist */ margin-top: 0em; } /* damit die Zeile auch ganz genutzt wird - ist sonst nur teilweise genutzt */ .ui-controlgroup { display: block; } .ui-content, .ui-tabs-panel { /* background: #999999; */ } .ui-header .ui-title, .ui-footer .ui-title { margin: 0 10%; /* statt default 30% worurch ja 2/3 Platz verloren geht */ } /* Benutzerinfo, die auf der Seite statisch angezeigt wurd */ .userMessage { display: block; margin: auto; width: 20em; padding: 1em 1em 1em 3.5em; border: 1px solid #999999; border-radius: 4px; box-shadow: 4px 4px #efefef; background-color: #fafbfc; background-image: url(gifMobile/info32.png); background-repeat: no-repeat; background-position: 10px 20px; background-color: #ffffff; } .dataDetails h2 { padding-bottom: 6px !important; border-bottom: 2px solid #ddd !important; } h3.contentSeparator { margin: 0.4em 0 0.2em 0 !important; font-size: 16px !important; font-shadow: none !important; border-bottom: 1px solid #aaaaaa !important; border-top: none !important; border-left: none !important; border-right: none !important; } /* Welcome-Seite aus indexMobile.jsp ---------------------------------------------------------------------- */ #welcome { background: url(gifMobile/background-image.jpg) #ffffff !important; background-size: auto 100% !important; background-position: left top !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-color: #ffffff; padding-top: 0.5em; } #welcomeContent { text-align: center; padding-top: 1em; } .welcomeHeader { border-radius: 5px; margin-left:0.5em; margin-top: 0.5em; background-position: 10% top; background-color: #ffffff; } #welcomeLogoArea { margin: auto; margin-top: 60px; width: 400px; } #welcomeEcadiaImage { margin-left: -130px !important; display: none; border-radius: 10px; background: rgba(255, 255, 255, 0.6); } #welcome .footer { border-radius: 5px; position: absolute; bottom: 4px; margin-left: 0.5em; margin-right: 0.5em; padding-left: 0.5em; padding-right: 0.5em; background-color: #ffffff; height: 6em; /* wird sonst seltsam gekürzt */ width: 100%; font-weight: bold; } #welcome .footer p { background-color: #ffffff; color: #999999; margin: 0; } #welcomeTradeMark { font-size: 0.8em; } #ecadiaWelcomeLogo { background: rgba(255,255,255,0.5); padding: 0px; border-radius: 30px; } #welcomeNextButton { text-align: center; position: absolute; top: 400px; width: 100%; } @font-face { font-family: "OCR A Extended"; src: url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.eot"); src: url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.eot?#iefix") format("embedded-opentype"), url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.woff2") format("woff2"), url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.woff") format("woff"), url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.ttf") format("truetype"), url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.svg#OCR A Extended") format(""); } .contentDiv { /* Silbetrennung, speziell bei den Produktinhalten */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .contentDiv p { padding-bottom: 0.5em !important; } .ecadiaMobilePage.ui-page > .dataDetails > p, .ecadiaMobilePage.ui-page > .dataDetails > h1, .ecadiaMobilePage > h1, .ecadiaMobilePage.ui-page > .dataDetails > h2, .ecadiaMobilePage.ui-page > .dataDetails > h3 { background-color: white; padding: 0.4em; } /* Tab-Control */ .ui-tabs-nav .ui-state-active { background-color: #3388cc /* Standardfarbe jQM, sollte überschrieben werden, wenn aktive Buttons anders gefürbt wurden */; border-color: #3388cc; } .ui-tabs-nav .ui-btn-icon-left { padding-left: 2.5em !important; } .selectAccount ul li { font-weight: normal; } .selectAccount ul { list-style-image: url('gifMobile/checkbox12.png'); } .labelEcadiaSlogan { display: none; /* wird per js eingeblendet */ font-family: "OCR A Extended" !important; font-size: 28pt; font-weight: bold; color: #474849; /* #12345c lila */; text-shadow: 0 0 20px #ffffff !important; min-width: 20em; /* damit nicht zu früh umgebrochen wird */ text-align: left; padding: 0 !important; margin: 0 0 0 -20px !important; } .footerCopyrightInfo { position: absolute; right: 1em; bottom: 0.2em; font-size: 7pt; color: #aaaaaa; font-weight: normal; text-shadow: none; } h1, h2, h3, h4 { color: #0b3378; /* das ist ansonsten 1em und wirkt sehr verschwenderisch, speziell auf kleinen Geräten */ padding-bottom: 0.2em !important; margin-top: 0.3em !important; margin-bottom: 0.2em !important; } h1 { font-size: 1.5em; font-weight: 500; } h2 { font-size: 1.3em; font-weight: 500; } h3 { font-size: 1.3em; margin-bottom: 0.2em; font-weight: 500; } h4 { font-size: 1.3em; margin-bottom: 0.2em; margin-top: 0.2em; font-weight: 300; } h5 { color: #0b3378; font-size: 1.1em; margin-bottom: 0.1em; margin-top: 0.1em; font-weight: 500; } /* sonst ist der Text auf den Buttons zu fett */ a { font-weight: normal !important; } /* damit der Veranstaltungstermin nicht so fett angezeigt wird */ .eventExpandItem h4 a { font-weight: normal !important; } b, strong { font-weight: 900; } /* Überschrift mit icon über alle Seiten, die vom menü/Home aus aufgerufen werden */ .pageHeader { } .pageHeader img { margin-bottom: -9px; padding-left: .1em; padding-right: 1em; } .pageSubHeader { font-size: 0.6em; padding-left: 60px; display: block; color: black; } .partnerInactive { text-decoration: line-through; } .dataDetails, .pageTopArea { margin: 0 auto; } .headerText { padding-top: 2px; color: #0b3378 /* #0084A8; */; font-size: 1em; text-align: center; font-weight: normal; padding-bottom: 2px; margin: 0; } .headerArea { background-color: #F0F8Fe; background-image: url('gifMobile/ecadiaLogo220x54.png'); background-repeat: no-repeat; background-position: 110px 2px; padding-top: 56px; } .headerButton { height: 24px; /* RS, 01.12.2015: ist irgendwie seltsam, dass die Angaben zu headerButtonNoText nicht passen. Aber so sieht das gut aus */ padding-top: 15px !important; float:left; } /* Popup-div aus indexMobile.jsp */ #tooltipPopup { max-width:350px; } .infoMessagePopup { padding: 0.5em; } .infoMessageText { padding: 0.5em 1em 2em 4em; background-image: url('gifMobile/info32.png'); background-position: 0.5em 0.5em; background-repeat: no-repeat; width: 16em; } .headerSearchField { background-color: white !important; /* sonst ist das so grau wie die Buttons */ } /* der lösch-Button für den Suchtext soll mittig kommen */ .headerSearchField a { margin-top: -17px !important; } .openHeaderLanguageSelectionButton img { margin-top: 10px; /* für die kleine Anzeige wird das wieder auf 0 gesetzt */ } /* das Suchfeld im Header, nicht das im Explorer */ #searchHeaderInput { width: 12em !important; font-size: 16px !important; margin-top: -2px !important; height: 22px !important; padding-left: 10px; } .searchHeaderSubmit { position:absolute; left:-9999px; } .searchHeaderAutocompleteArea { position: absolute; width: 300px; } /* die Schnellsuche im Header */ .mobileAutocompleteItem { width: 300px; /* etwas willkürlich ... */ padding-right: 30px; /* damit das Icon rechts nicht überschrieben wird */ } .autocompleteHighlightSearchTerm { color: black; font-weight: bold; background-color: #efefef; } .mobileAutocompleteItem img { top: 0.3em !important; } /* speziell bei ui-block-b um dann aber im Smartphone wieder linksbündig zu stehen; wird bei Smartphones überschrieben mit left*/ .floatRightLargeMedia { float: right; } .moveUp3emLargeMedia { margin-top: -3em; } /* ecadia-grün als Hintergundfarbe */ .greenBackground { background-color: rgba(0, 114, 164, 0.3); } .hideLargeMedia { display: none !important; } /* die Inhaltsseiten z.B. mein Training oder meine WBT */ .contentArea { padding: 1em; } .roundCornerLeft { /* so tun wie bei ui-first-child */ -webkit-border-top-left-radius: inherit; border-top-left-radius: inherit; -webkit-border-bottom-left-radius: inherit; border-bottom-left-radius: inherit; } .roundCornerRight { /* so tun wie bei ui-last-child */ -webkit-border-top-right-radius: inherit; border-top-right-radius: inherit; -webkit-border-bottom-right-radius: inherit; border-bottom-right-radius: inherit; border-right-width: 1px !important; } .headerButtonNoText { height: 30px !important; } .ui-content table td { vertical-align: top; } .ui-block-largeMedia15 { width: 15% !important; } .ui-block-largeMedia20 { width: 20% !important; } .ui-block-largeMedia25 { width: 25% !important; } .ui-block-largeMedia30 { width: 30% !important; } .ui-block-largeMedia35 { width: 35% !important; } .ui-block-largeMedia40 { width: 40% !important; } .ui-block-largeMedia45 { width: 45% !important; } .ui-block-largeMedia50 { width: 50% !important; } .ui-block-largeMedia55 { width: 55% !important; } .ui-block-largeMedia60 { width: 60% !important; } .ui-block-largeMedia65 { width: 65% !important; } .ui-block-largeMedia70 { width: 70% !important; } .ui-block-largeMedia75 { width: 75% !important; } .ui-block-largeMedia80 { width: 80% !important; } .ui-block-largeMedia85 { width: 85% !important; } .ui-block-largeMedia100 { width: 100% !important; } /* z.B, die Checkbox der Ordnersuche im Explorer, die ansonsten zu hoch sitzt */ .marginTopLargeMedia1em { margin-top: 1em !important; } /* wird bei kleinen Geräten auf 0.2em überschrieben */ .paddingLargeMedia05_02 { padding: 0 0.5em 0.5em 0.5em; } .marginTopLargeMedia1Dot5em { margin-top: 1.5em; } /* die kleine Breite, z. B. iPhone */ @media ( max-width :680px) { body { font-size: 1em; } .ui-block-largeMedia85, .ui-block-largeMedia80, .ui-block-largeMedia50, .ui-block-largeMedia100, .ui-block-largeMedia15, .ui-block-largeMedia10, .ui-block-largeMedia20, .ui-block-largeMedia25, .ui-block-largeMedia30, .ui-block-largeMedia70, .ui-block-largeMedia35, .ui-block-largeMedia65, .ui-block-largeMedia40, .ui-block-largeMedia60, .ui-block-largeMedia45, .ui-block-largeMedia55 { width: 100% !important; } /* speziell bei ui-block-b um dann aber im Smartphone wieder linksbündig zu stehen; wird bei Smartphones überschrieben mit left */ .floatRightLargeMedia { float: left !important; } .moveUp3emLargeMedia { margin-top: 0 !important; } .hideSmallMedia { display: none !important; } .hideLargeMedia { display: block !important; } /* die Inhaltsseiten z.B. mein Training oder meine WBT */ .contentArea { padding: 0.3em !important; } .marginTopLargeMedia1em, .marginTopLargeMedia1Dot5em { margin-top: 0; } .paddingLargeMedia05_02 { padding: 0.2em !important; } /* das ist ansonsten 1em, für Smartphone zu viel */ .ui-tabs .ui-tabs-panel { padding: 0; } /* wurde für große Geräte zuvor gesetzt, wenn aber die blöcke sowieso untereinander kommen, dann braucht es den Rand natürlich nicht */ .ui-grid-a.ui-responsive > .ui-block-a, .ui-grid-b.ui-responsive > .ui-block-a { padding-right: 0px; } .ui-grid-a.ui-responsive > .ui-block-b, .ui-grid-b.ui-responsive > .ui-block-c { padding-left: 0px; } .headerArea { background-image: url('gifMobile/ecadialogo130x30.png'); padding-top: 38px; background-position: 100px top; } /* Überschrift mit icon über alle Seiten, die vom menü/Home aus aufgerufen werden */ .pageHeader { } .pageHeader img { margin-left: -2px; margin-bottom: -9px; padding-left: .2em; padding-right: .2em; /* nur ein kleiner Abstand zwischen dem Icon und dem Text */ } .pageSubHeader { font-size: 0.7em; padding-left: 38px; } #labelEcadiaSlogan { font-size: 14pt; } .headerButton { height: 16px !important; padding-top: 6px !important; } .headerButtonNoText { height: 13px !important; } /* das ecadia-Logo im Welcome kleiner machen */ #welcomeEcadiaImage { width: 250px !important; } /* und den Schriftzug auch etwas kleiner */ .labelEcadiaSlogan { font-size: 18pt; margin: 0 0 0 20px !important; text-shadow: 0 0 5px #ffffff !important; } #welcomeNextButton { top: 280px; } .openHeaderLanguageSelectionButton img { margin-top: 0px; } /* Tabs am Smartphone kleiner anzeigen */ .inlinetabs .ui-tabs-nav .ui-btn { padding: 1em .7em 1em 2.7em !important; } /* auf dem Smartphone ist der 1em Standard zu verschwenderisch */ .ui-collapsible- { padding-left: 0.5em; padding-right: 0.5em; } /* die Überschriften etwas kompakter anzeigen */ h1,h2, h3, h4, h5 { font-size: 1.1em; } /* *************************************************************************************************** */ /* Symbolanzeige in der linken Spalte (z.B. Forum ist im Smartphone etwas kompakter */ /* *************************************************************************************************** */ .ui-listview .ui-li-has-thumb > img:first-child, .ui-listview .ui-li-has-thumb > .ui-btn > img:first-child, .ui-listview .ui-li-has-thumb .ui-li-thumb { max-width: 4em !important; } .ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb { padding-left: 4.24em; } } .ui-collapsible-content { background-color: white; } .dataDetails { } .dataDetails td { padding-top: 0.2em; padding-bottom: 0.2em; padding-left: 0; padding-right: 1em; vertical-align: top; } /* --- die Bullets aus dem normalen ecadia, aber natürlich nicht die ganzen Listviews -------------------------- */ .bulletLevelUL1, .contentDiv ul:not([data-role=listview]), .mobileWidgetTinyMcePreviewDiv ul { padding-left: 26px; font-size: 1em; font-weight: normal; margin-top: 0.2em; /* das wird sonst ein zu breiter Abstand */ } .bulletLevelUL2, .contentDiv ul li ul { padding-left: 16px; font-weight: normal; } .bulletLevel1, .contentDiv ul:not([data-role=listview]) li, .mobileWidgetTinyMcePreviewDiv ul li { list-style-image: url(gif/bullet2.gif); padding-bottom: 2px; } .bulletLevel2, .contentDiv ul li ul li { list-style-image: url(gif/bullet3.gif); padding-bottom: 2px; } /* falls das ul durch den TextHelper erzeugt wurde, den sehr breiten Rand etwas kürzen */ ul.UL_TextHelper { margin-top: 4px; margin-bottom: 4px; } /* --- Ende - die Bullets aus dem normalen ecadia ------------------------------------------------------------- */ .eventDetail p, .trainingProductDetail p, .partnerDetail p, .pageTopArea p { padding: 0 0 0.58em 0; margin: 0; } .pageTopArea table td { padding: 0.2em; } .ui-input-text { margin-top: .1em /* 0.5em */; } .ui-icon-pdf::after { background-image: url(gif/pdf.png); } .ui-icon-play::after { background-image: url(gifMobile/caret-right-16.svg); } .ui-icon-folder::after { background-image: url(gifMobile/folder-open-16.svg); } .ui-icon-shoppingCart::after { background-image: url(gifMobile/shopping-cart-16.svg); } .ui-icon-calendar::after { background-image: url(gifMobile/calendar-16.svg); } .ui-icon-userplus::after { background-image: url(gifMobile/user-plus-16.svg); } .ui-icon-pdf::after { background-image: url(gifMobile/file-pdf-o-16.svg); } .ui-icon-cube::after { background-image: url(gifMobile/cube-16.svg); } .ui-icon-share::after { background-image: url(gifMobile/share-alt-16.svg); } .ui-icon-arrowDown::after { background-image: url(gifMobile/arrow-down-16.svg); } .ui-icon-arrowUp::after { background-image: url(gifMobile/arrow-up-16.svg); } .ui-icon-print::after { background-image: url(gifMobile/print-16.svg); } .ui-icon-upload::after { background-image: url(gifMobile/upload-16.svg); } .ui-icon-download::after { background-image: url(gifMobile/download-16.svg); } .ui-icon-cloud-upload::after { background-image: url(gifMobile/cloud-upload-16.svg); } .ui-icon-qrcode::after { background-image: url(gifMobile/qrcode-16.svg); } .ui-icon-save::after { background-image: url(gifMobile/save-16.svg); } .ui-icon-user-plus::after { background-image: url(gifMobile/user-plus-16.svg); } .ui-icon-exchange::after { background-image: url(gifMobile/exchange-16.svg); } .ui-icon-copy::after { background-image: url(gifMobile/copy-16.svg); } .ui-icon-square-o::after { background-image: url(gifMobile/square-o-16.svg); } .ui-icon-copy::after { background-image: url(gifMobile/square-o-16.svg); } .ui-icon-hotel::after { background-image: url(gifMobile/hotel-16.svg); } .icon24 { padding-right: 6px; padding-left: 0px; margin-bottom: -4px; } .icon16 { padding-right: 6px; padding-left: 0px; margin-bottom: -2px; } /* z. B. in register und preregister */ .iconLeft a { padding-left: 2.5em !important; padding-right: 1em !important; } .iconLeft a:after{ right: auto; left: 9px; transform: scaleX(-1); } .errorHighlight { border: red solid 2px !important; } /* 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 Kalender --------------------------------------------------------------------------------------------------- */ .jq-calendar-wrapper h1 { font-size: 1.4em !important; } .jq-calendar-wrapper table td { vertical-align: middle; } .jq-calendar-wrapper td, .jq-calendar-wrapper th { border: #555555 1px solid !important; } .jq-calendar-wrapper .holiday:not(.ui-btn-active) { background-color: #fedec4 !important; } .jq-calendar-wrapper .empty { background-color: #ffffff !important; } .jq-calendar-wrapper .training { background-color: PaleTurquoise !important; } .jq-calendar-wrapper .ui-btn-today { background-color: #ffdd6e !important; background-image: none; } .jq-calendar-wrapper .ui-btn-active { color: black !important; background-color: #cdcdcd !important; } .jq-calendar-wrapper .importance-0 { border: solid 2px #f6f6f6 !important; } .jq-calendar-wrapper td.darker, .jq-calendar-wrapper span.darker { opacity: 1; } .fc-text-arrow { font-size: inherit !important; } /* -- Der Kalender - Ende --------------------------------------------------------------------------------------------- */ /* Mitarbeiter-Ressourcen-Kalender -- Buttons dürfen nicht die jQM Nornalgröße haben, weil das sonst die Optik verhageln kann */ .fc-content .headerWeekCell .ui-btn { padding: 0 !important; margin: 0 !important; border-radius: 0; height: 100%; font-size: 12px; } .fc-content .headerWeekCell .ui-btn button { width: 100%; height: 100%; margin: auto; border: 0 !important; cursor: pointer; } /* -- Lernzielanzeige ------------------------------------------------------------------------------------------------- */ .learningTargetWidgetTable { border-collapse: collapse; margin: 0.2em; } .learningTargetWidgetTable td { border: 1px solid black; width: 1em; height: 1em !important /* wird sonst von der höher der gesamten Spalte überschrieben */; overflow: hidden; margin: 0.1em; } .learningTargetWidgetReached { background-color: #00ff00; } .learningTargetWidgetNoTarget { background-color: white; } .learningTargetWidgetTarget { background-color: #aaaaaa; } .setLearningTargetValueReached { background-color: #00ff00; box-shadow: 2px 2px #aaaaaa; } .setLearningTargetValueTarget { background-color: #a9a9a9; box-shadow: 2px 2px #777777; } .setLearningTargetValue { margin: 0; height:4em; width: 4em; vertical-align: middle; line-height:4em; text-align: center; border: #777777 solid 1px; } .setLearningTargetValue:hover { cursor: pointer; } .setLearningTargetValueInactive { background-color: #eaebec !important; box-shadow: none; } .setLearningTargetValueInactive:hover { cursor: initial !important; } .setLearningTargetValue.ui-btn-active, .setLearningTargetValue.ui-btn:visited, .setLearningTargetValue.ui-focus, .setLearningTargetValue.ui-btn:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none ; border: none; color: inherit; text-shadow: none; } .learningTargetWidgetArea { text-align: center; margin: auto; } /* -- Lernzielanzeige -- Ende ----------------------------------------------------------------------------------------- */ /* -- Kompetenzen Square4 --------------------------------------------------------------------------------------------- */ table.competenceSquareWidgetTable { border-collapse: collapse; margin: auto; min-width: 32px; /* Darstellung in der Liste soll nie kleiner werden */ } table.competenceSquareWidgetTable tr { line-height: 14px; } table.competenceSquareWidgetTable tbody > tr > td { border: 1px solid black !important; width: 14px; overflow: hidden; padding: 0 !important; line-height: 14px; } table.competenceSquareWidgetTableInactive tbody > tr > td { border: 1px dotted #aaaaaa !important; background-color: #eeeeee !important; color: #eeeeee !important; } .competenceSquareWidgetReached { background-color: #00ff00; } .competenceSquareWidgetReachedSelfAssessment { background-color: yellow; } .competenceSquareWidgetNoTarget { background-color: white; } .competenceSquareWidgetTarget { background-color: #aaaaaa; } .setCompetenceSquareValueReached { background-color: #00ff00; box-shadow: 2px 2px #aaaaaa; } .setCompetenceSquareValueReachedSelfAssessment { background-color: yellow; box-shadow: 2px 2px #aaaaaa; } .setCompetenceSquareValueTarget { background-color: #a9a9a9; box-shadow: 2px 2px #777777; } .setCompetenceSquareValue { margin: 0; height:4em; width: 4em; vertical-align: middle; line-height:4em; text-align: center; border: #777777 solid 1px; } .setCompetenceSquareValue:hover { cursor: pointer; } .setCompetenceSquareValueInactive { background-color: #eaebec !important; box-shadow: none; } .setLearningTargetValueInactive:hover { cursor: initial !important; } .setCompetenceSquareValue.ui-btn-active, .setCompetenceSquareValue.ui-btn:visited, .setCompetenceSquareValue.ui-focus, .setCompetenceSquareValue.ui-btn:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none ; border: none; color: inherit; text-shadow: none; } .competenceSquareWidget { text-align: center; margin: auto; } table.CompetenceSquareWidgetSmall > tr > td { vertical-align: middle !important; } #popupEmployeeCompetenceSquare #LastModification { padding: .2em; } #popupEmployeeCompetenceSquare #LastModification table td { font-size: 0.7em; line-height: 0.7em; } #select2-selectionTarget-container { background-color: #999999; color: white; } /* -- Kompetent (Quadrant) -- Ende ----------------------------------------------------------------------------------------- */ table.competenceListTrainingTable { width: 100%; border-collapse: collapse; } table.competenceListTrainingTable > tbody > tr > td { padding: 0.1em !important; border-bottom: 1px solid #999999 !important; font-size: 0.8em; } table.competenceListTrainingTable tr td:first-child { padding-left: 2px !important; border-left: none !important; } table.competenceListTrainingTable tr td:last-child { padding-right: 2px !important; border-right: none !important; } /* wegen der hohen Maßnhamen-Inhalte ist es besser alle Zeilen oben anzuordnen */ #MobileCompetenceList td { vertical-align: top !important; } /* QPMatrix ------------------------------------------------------------------------------------------------------------------------------------------ */ #inputCompetenceFilterQPMatrixFrame { margin-top: 60px; margin-left: 12px; } .btn-qpMatrix:hover { /* kleiner Schatten damit man den hover besser sieht */ box-shadow: 0px 0px 12px #999999; } .KompetenzMatrix { border-collapse: collapse; } .qpMatrix_tpHeaderTrainingScheduleChild { background-color: #dcffdc !important; text-shadow: none !important; } .qpMatrix_tpHeader { white-space: nowrap; -webkit-transform-origin: 148px 117px; -moz-transform-origin: 148px 117px; -o-transform-origin: 148px 117px; -ms-transform-origin: 148px 117px; transform-origin: 148px 117px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .KompetenzMatrix th:not(.qpMatrix_col1Fixed):not(.qpMatrix_col2Fixed) { white-space: nowrap; border: 1px solid black; overflow: hidden; } .KompetenzMatrix td { vertical-align: middle !important; } .KompetenzMatrix td:not(.qpMatrix_col1Fixed):not(.qpMatrix_col2Fixed) { border: 1px solid #888888; height: 28px; } #KompetenzMatrixParentDiv { overflow-x:scroll; overflow-y:visible; margin-left:280px; border-left: 1px solid #888888; left: 0; } .qpMatrix_header_duration { height: 30px; } .qpMatrix_tpHeaderText { vertical-align: bottom; height: 250px; width: 70px; padding-bottom: 20px /* fürs iPad nötig */; position: relative; } .KompetenzMatrix td.QPMatrixCell { padding: 2px 0 0 0; margin: 0; } .KompetenzMatrix td.QPMatrixCell a { padding: 0; margin: 0; width: 70px; text-align: center; display: inline-block; height: 25px; } .KompetenzMatrix td.QPMatrixCell a div { font-size: 10px; text-shadow: none !important; text-align: center; white-space: normal; height: 25px; padding: 0; margin: 0; vertical-align: middle; overflow: hidden; width: 68px; display: table-cell; } /* die Zelle macht die vertikale Zentrierung */ .QPMatrixCellNoButton { overflow: hidden; height: 30px; padding: 1px; vertical-align: middle; } /* das div in der Zelle macht die horizontale Zentrierung - das geht wohl nicht schöner */ .QPMatrixCellNoButton > div { overflow: hidden; width: 80px; /* die Buttons haben 60 + 2 x 10 padding */ text-align: center; } td.qpMatrix_keinBedarf, td.qpMatrix_geplant, td.qpMatrix_teilgenommen, td.qpMatrix_offen, td.qpMatrix_terminiert, td.qpMatrix_nichtTerminiert, td.qpMatrix_manuell, td.qpMatrix_bedarfInakiv { font-size: 10px; text-shadow: none !important; width: 70px; text-align: center; } td.qpMatrix_keinBedarf a, td.qpMatrix_keinBedarf, td.qpMatrix_geplant a, td.qpMatrix_geplant, td.qpMatrix_offen a, td.qpMatrix_offen, td.qpMatrix_terminiert a, td.qpMatrix_nichtTerminiert a, td.qpMatrix_bedarfInakiv a { color: black; } /* dunkle Zellen mit weißer Schrift */ td.qpMatrix_teilgenommen, td.qpMatrix_teilgenommen a, td.qpMatrix_manuell a, td.qpMatrix_manuell { color: white; } .qpMatrix_summe { text-align: right !important; padding-right: 6px; } .qpMatrix_col1FixedSum, .qpMatrix_col2FixedSum { text-align: right !important; padding-top: 3px !important; } .qpMatrix_col1Fixed { position:absolute; width:168px; left:0; border-bottom: 1px solid #888888; height: 30px; } .qpMatrix_col2Fixed { position:absolute; width:108px; left:168px; /* das padding einrechnen */ border-bottom: 1px solid #888888; height: 30px; } .qpMatrix_colFixedColspan2 { position:absolute; width:260px; left:0px; border: none !important; } td.qpMatrix_colName div, th.qpMatrix_colName div { white-space: nowrap; overflow: hidden; width: 160px !important; padding: 4px; } td.qpMatrix_colFunktion div, th.qpMatrix_colFunktion div { white-space: nowrap; overflow: hidden; width: 100px !important; padding: 4px; } .qpMatrix_col1Header, .qpMatrix_col2Header { padding-top: 242px; } .qpMatrix_tpHeaderCompetenceField { white-space: normal !important; color: #cf0000; background-color: #efefef; vertival-align: middle; padding: 0.6em 1em 0.2em 1em; } .qpMatrix_keinBedarf { background-color: white; } .qpMatrix_offen { background-color: red !important; } /* Vormerkung ohne Termn */ .qpMatrix_nichtTerminiert { background-color: orange !important; } .qpMatrix_terminiert { background-color: orange !important; } .qpMatrix_teilgenommen { background-color: green; } .qpMatrix_geplant { background-color: yellow; } .qpMatrix_manuell { background-color: green; } .qpMatrix_bedarfInakiv { background-color: white !important; } .qpMatrix_nichtAusQualiweg { background-color: white !important; } .qpMatrix_toggleCompetenceField { position: absolute; right: -24px; bottom: -10px; } .qpMatrix_toggleCompetenceShow { display: block; margin: 0; } .qpMatrix_toggleCompetenceShowHeader { text-align: center; border-top: none; border-bottom: none; } .qpMatrix_toggleCompetenceDummyTD { background-color: #efefef; border-top: none !important; border-bottom: none !important; } .qpMatrix_toggleCompetenceShowHeaderTextOuter { white-space: nowrap; -webkit-transform-origin: 142px 135px; -moz-transform-origin: 142px 135px; -o-transform-origin: 142px 135px; -ms-transform-origin: 142px 135px; transform-origin: 142px 140px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .qpMatrix_toggleCompetenceShowHeaderTextInner { vertical-align: bottom; height: 250px; width: 30px; padding-bottom: 20px /* fürs iPad nötig */; } .btn-competenceMatrixCompetenceWidget { display: inline-block; cursor: pointer; text-decoration: none; padding: 6px; margin: auto; border: 1px solid #999999; border-radius: 3px; text-align: center; padding: 3px; } .btn-qpMatrix, .btn-competenceMatrix { display: table-cell; width: 100px; height: 30px; max-height: 30px; overflow: hidden; /* damit mnicht ein zu langer Text das Layout verhagelt */ vertical-align: middle; cursor: pointer; border: 1px dotted #999999; text-decoration: none; } /* Ende QPMatrix ------------------------------------------------------------------------------------------------------------------------------------------ */ /* Kompetenzmatrix (competenceMatrix.jsp) ----------------------------------------------------------------------------------------------------------------- */ #CompetenceMatrix { border-collapse: collapse; display: block; overflow-x: auto; width: 2000px; /* wir starten mal recht breit, das wird dan per js wieder kleiner gemacht */ } #CompetenceMatrix > tbody > tr > td, #CompetenceMatrix > thead > tr > th { border: 1px solid black; padding: 0.4em; vertical-align: middle; } #CompetenceMatrix > thead { display: block; } #CompetenceMatrix > tbody { /* Scrollen des Body */ display: block; overflow-y: auto; height: 500px; } /* erste Zeile mit den gedrehten Namen */ #CompetenceMatrix > thead > tr.CompetenceMatrix_NameRow > th:nth-child(1) { height: 200px; } .CompetenceMatrix_NameCellInner { white-space: nowrap; transform-origin: 68px 50px; transform: rotate(270deg); } .CompetenceMatrix_NameCellFrame { } .CompetenceMatrix_CompetenceName { font-weight: bold; } .CompetenceMatrixTrainingProductHide { display: none; } .hideShowTrainingProductButton { margin-right: 0.5em; } .CompetenceMatrix_col2, .CompetenceMatrix_Required { display: none; /* Nutzen unklar, Tel. SG, RS, 08.01.2019 erstmal abgeklemmt */ } .CompetenceMatrix_colAvg { width: 60px; } /* der Trenner mit dem KOmpetenzfeld in einer eigenen Zeile */ .CompetenceMatrix_CompetenceFieldSeparator { background-color: steelblue; color: white; } tr.CompetenceMatrix_CompetenceRow > td { background-color: AliceBlue; } td.CompetenceMatrix_TrainingProduct { padding: 2px !important; background-color: white; } /* die Links der Produkte in Listview-Optik ----------------------------------------------------------------------------------- */ td.CompetenceMatrix_TrainingProduct > ul.ui-listview { margin: 0.1em; } .CompetenceMatrix_TrainingProduct ul.ui-listview > li > a { padding: 0 2em 0 1em; line-height: 1; } td.CompetenceMatrix_col1 > a { } .CompetenceMatrix_TrainingProduct ul.ui-listview > li > a > img { top: 4px !important; } .CompetenceMatrix_TrainingProduct ul.ui-listview > li > a > h3, .CompetenceMatrixTrainingProduct ul.ui-listview > li > a > p { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; line-height: 1.1; } #CompetenceMatrix > thead > tr > th.CompetenceMatrix_col1, #CompetenceMatrix > tbody > tr > td.CompetenceMatrix_col1 { width: 380px; max-width: 380px; overflow: hidden; white-space: nowrap; text-align: left; } #CompetenceMatrix > thead > tr > th.CompetenceMatrix_col2, #CompetenceMatrix > tbody > tr > td.CompetenceMatrix_col2 { width: 40px; max-width: 40px; overflow: hidden; white-space: nowrap; } #CompetenceMatrix > thead > tr > th.CompetenceMatrix_colAvg, #CompetenceMatrix > tbody > tr > td.CompetenceMatrix_colAvg { width: 50px; max-width: 50px; min-width: 50px; /*Nur so ist sichergestellt, dass die Spalten gleich breit sind, wenn viele Mitarbeiter in der Tabelle vorhanden sind*/ overflow: hidden; } #CompetenceMatrix > thead > tr > th.CompetenceMatrix_NameCell, #CompetenceMatrix > thead > tr > th.competenceMatrix_partnerAverage, #CompetenceMatrix > tbody > tr > td.CompetenceMatrix_Cell, #CompetenceMatrix > tbody > tr > td.CompetenceMatrix_trainingProductAction { width: 90px; max-width: 90px; overflow: hidden; white-space: nowrap; text-align: center; } #CompetenceMatrix > thead > tr > th.CompetenceMatrix_NameCell { text-align: left; } /* Ende Kompetenzmatrix (competenceMatrix.jsp) ------------------------------------------------------------------------------------------------------------ */ /* Anzeigebox innerhalb einer Kachel */ .qpMatrixSummary { float: left; border: 1px solid black; padding: 0.2em 0.4em 0.2em 0.2em; width: 60px; text-align: right; text-shadow: none !important; box-shadow: 2px 2px #aaaaaa; margin: 0.2em 0.2em 0.2em 0.2em; } .qpMatrixSummaryHeader { border: 1px solid black; padding: 0.1em 0.2em 0.1em 0.2em; min-width: 30px !important; max-width: 50px !important; text-align: center; text-shadow: none !important; box-shadow: none; margin: 0.1em .1em 0.1em 0.2em; text-align: center; font-size: 10pt; display: block; } /* Der Untertext zur farbigen Box */ .qpMatrixSummaryHeader + div { font-weight: normal; font-size: 8pt; text-align: center; white-space: nowrap; display: block; } .QPLEOverviewTable_headerRow td, .QPLEOverviewTable_headerRow th { padding: 0 12px 0 0 !important; margin: 0 12px 0 0 !important; font-weight:normal !important; background-color: #eeeeee; text-align: center; } /* Swipe works with mouse as well but often causes text selection. */ /* We'll deny text selecton on everything but INPUTs and TEXTAREAs. */ .ecadiaMobilePage :not(INPUT):not(TEXTAREA):not(a), .unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* -- Generelle Einstellung bei a-grids oder b-grids -------------------------------------------------------------------------------------- */ /* einen kleinen Abstand in den nebeneinander-Darstellung NUR zwischen den grids und nicht am rechten oder linken Rand; wird für kleine Geräte wieder auf 0 gesetzt */ .ui-grid-a > .ui-block-a, .ui-grid-b > .ui-block-a { padding-right: 4px; } .ui-grid-a > .ui-block-b, .ui-grid-b > .ui-block-c { padding-left: 4px; } /* ohne Abstand in den untereinander-Darstellung (dann ist ui-responsive gesetzt) */ @media (max-width: 35em) { .ui-grid-b.ui-responsive > .ui-block-a { padding-left: 0; } .ui-grid-a.ui-responsive > .ui-block-a { padding-right: 0; } .ui-grid-a.ui-responsive > .ui-block-b { padding-left: 0; } /* -- Ende Generelle Einstellung bei grids ----------------------------------------------------------------------------------------------- */ .ui-grid-b.ui-responsive .ui-block-c { padding-left: 0; } } /* -- Produkt und Veranstaltungssuche ---------------------------------------------------------------------------------------------------- */ /* -- Produkt und Veranstaltungssuche ---------------------------------------------------------------------------------------------------- */ .RankingWidget { float: left; } .RankingWidgetContainer { margin: 4px 10px 0 10px; } .checkKeyWordsForSearchText { white-space:nowrap; display: block; float: left; } .checkKeyWordsForSearchText img { padding-left: 20px; float: left; } .checkKeyWordsForSearchText label { padding-left: 6px; vertical-align: top; float: left; margin-top: -2px; } /* -- Ende Produkt und Veranstaltungssuche ----------------------------------------------------------------------------------------------- */ /* -- home-Seite ---------------------------------------------------------------------------------------------------- */ #infoArea { /* wie die ListView-Kacheln */ background-color: #f6f6f6; border: 1px solid #ddd; box-shadow: 0 0 9px #111; transition: all 500ms ease; border-radius: 5px; margin: 0 auto; /* zentriert */ min-height: 240px; /* damit das Logo gut aussieht */ max-width: 61.25em; /* so breit wie die 4 Boxen nebeneinander */ margin-bottom: 8px; } @media (max-width: 52em) { #infoArea .ui-block-a { width: 100%; } #infoArea .ui-block-b { width: 100%; } } /* -- Ende home-Seite ------------------------------------------------------------------------------------------ */ /* -- Feedback ------------------------------------------------------------------------------------------------- */ #FeedbackItems, .FeedbackInputMessage, .feedbackEvaluation { background-color: #fefefe; } .FeedbackSheet h2 { } .feedbackEvaluation { padding: 1em; } .QuestionScaleContainer label { max-width: 6em; min-width: 2.5em; min-height: 7em; text-align: center !important; position: relative; font-weight: normal; } .QuestionScaleContainer label div { position: absolute !important; bottom: 5px !important; left: 50%; margin-left: -12px; } .EvaluatorQuestionSelectionContainer table, .EvaluatorQuestionScaleContainer table { border-collapse: collapse; width: 94%; /* also die praktisch ganze Breite nutzen */ margin: 0 auto; /* vertikal zentriert */ max-width: 50em; /* Breiter macht keinen Sinn */ } .EvaluatorQuestionScaleContainer table { margin-bottom: 2em; } .EvaluatorQuestionSelectionContainer table td, .EvaluatorQuestionScaleContainer table td, .EvaluatorQuestionSelectionContainer table th, .EvaluatorQuestionScaleContainer table th { padding: 0.5em; text-align: center; border: 2px solid #999999; min-width: 6em; } .EvaluatorQuestionSelectionContainer table tr th, .EvaluatorQuestionScaleContainer table tr th, .EvaluatorQuestionScaleContainer table tr:nth-child(2) td { background-color: #dce6f1; } .EvaluatorQuestionSelectionContainer table tr:nth-child(2) td, .EvaluatorQuestionScaleContainer table tr:nth-child(3) td { height: 4em; vertical-align: bottom; padding-bottom: 0; border-bottom: 1px solid #cccccc; } .EvaluatorQuestionSelectionContainer table tr:nth-child(3) td, .EvaluatorQuestionScaleContainer table tr:nth-child(4) td { border-top: 1px solid #cccccc; } .EvaluatorQuestionSelectionContainer .barChart, .EvaluatorQuestionScaleContainer .barChart { width: 3em; background-color: #4f81bd; display: block; text-align: center; margin-left: auto ; margin-right: auto ; } /* die kleine Breite, z. B. iPhone */ @media ( max-width :640px) { .EvaluatorQuestionSelectionContainer .barChart, .EvaluatorQuestionScaleContainer .barChart { width: 1.8em; background-color: #4f81bd; display: block; text-align: center; margin-left: auto ; margin-right: auto ; } .EvaluatorQuestionSelectionContainer table td, .EvaluatorQuestionScaleContainer table td { padding: 0.1em; text-align: center; border: 2px solid #999999; min-width: 2em; font-size: 10pt; } .QuestionScaleContainer label { max-width: 5em; min-width: 2em; min-height: 7em; text-align: center !important; position: relative; font-size: 10pt; font-weight: normal; padding: 0 5px; } .QuestionScaleContainer label div { position: absolute !important; bottom: 5px !important; left: 50%; margin-left: -12px; } } /* -- Ende Feedback -------------------------------------------------------------------------------------------- */ /* -- Paginierung ---------------------------------------------------------------------------------------------- */ #paginate { width: 100%; text-align: right; } #paginate a { margin-right: 1em; } /* -- Ende Paginierung ----------------------------------------------------------------------------------------- */ /* -- Wizard-Control, Änderungen gegebnüber jquery.steps.css --------------------------------------------------- */ .wizard>.content>.body label { margin-bottom: 0 /* .5em */; } .wizard > .content > .body { position: absolute; padding: 0.5em; } .wizard a { font-weight: normal; } .actions li { min-width: 8em; text-align: center; } .wizard > .content { margin-top: 0; min-height: 32em; /* Größe der step-box */ } .wizard ul, .tabcontrol ul { margin-right: 0.5em; } /* .wizard>.steps .done a { background-image: url('gifMobile/ok24.png'); background-position: 90% 50%; background-repeat: no-repeat; } .wizard>.steps .failed a { background-image: url('gifMobile/fail24.png'); background-position: 90% 50%; background-repeat: no-repeat; } */ .wizard > .actions > ul > li.disabled { display: none; } /* die Prozessschritte */ .wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active { padding: 0.5em; margin-right: 0; } /* leichte optische Anzeige, dass der Button nun aktiv ist; Ziel so ähnlich wie die original jQM-Buttons wirken */ .wizard > .actions a:hover, .wizard > .actions a:active { background: #2f4f9f; /* etwas heller als das standardmäßige Dunkelblau */ } @media ( max-width :680px) { .wizard>.steps a, .wizard>.steps a:hover, .wizard>.steps a:active { padding: 0.3em; } /* der Weiter und zurück-Button */ .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active { padding: 0.3em 0.3em; } } /* -- Ende Wizard-Control, Änderungen gegebnüber jquery.steps.css --------------------------------- */ /* -- Quartalseingabe ----------------------------------------------------------------------------- */ .selectQuater { float: left; display: block; margin-right: 1em; margin-bottom: 0.5em; } .selectQuater .ui-radio { margin: 0; } /* -- Ende Quartalseingabe ------------------------------------------------------------------------ */ #ui-datepicker-div { /* Popups haben 1100 und dass der Datepicker sichtbar ist muss der darüber liegen */ /* der openConfirmMessageBox-Popup hat 2000, deswegen gehen wir auf 2100 */ z-index: 2100 !important; } .ui-datepicker { width: auto!important; } input.ui-date.ui-inline { width: 8em; display: inline-block; } /* -- Highlighting der Suchwörter im Text ------------------------------------------------------------------------ */ .highlight { background: #FAFAD2; /* lightgoldenrodyellow */ color: black; } /* HTML-Editor Felder ---------------------------------------------------------------------------------------------------------- */ /* RS, 31.01.2016: Bei Verwendung des HTML-Editors müssen Zeilenabstände und die Bullets und geordneten Listen angepasst werden. Ein sehr ähnliches HTML ist auch in ecadia.css für die Vorschau. Dort unter trainingProductContentPreview. Für die pdf Ausgabe muss im pdf ebenso ein entsprechender css gesetzt werden. */ .ecadiaHTMLContentArea p, .mobileWidgetTinyMcePreviewDiv p { margin: 0; /* sonst haben wir einen etwa 1em oberen und unteren Rand */ padding: 0; } .ecadiaHTMLContentArea ul > li, .mobileWidgetTinyMcePreviewDiv ul li { list-style-image: url(gif/bullet2.gif); padding-bottom: 2px; } .ecadiaHTMLContentArea ul > li > ul > li { list-style-image: url(gif/bullet3.gif); padding-bottom: 2px; } .ecadiaHTMLContentArea ul, .mobileWidgetTinyMcePreviewDiv ul { margin: 0; padding-top: 0.2em; /* ein kleiner Abstand zum vorherigen Abschnitt */ padding-bottom: 0.2em; padding-left: 1em; } .ecadiaHTMLContentArea ol { margin: 0; padding-top: 0.2em; /* ein kleiner Abstand zum vorherigen Abschnitt */ padding-bottom: 0.2em; padding-left: 1.6em; } /* Tabs (z.B. aus dem Explorer) ------------------------------------------------------------------------------------------------ */ /* vgl. https://github.com/kryops/jqm-inlinetabs */ .inlinetabs .ui-navbar { } .targetgroupDescription { font-size: 0.8em; padding: 0 !important; } /* RS, 06.08.2017: so passt das mit den Einstellungen .inlinetabs .ui-tabs-panel zusammen */ /* RS, 06.08.2017: so passt das mit den Einstellungen .inlinetabs .ui-tabs-panel zusammen */ .inlinetabs { padding:0.5em; } .inlinetabs .ui-navbar .ui-widget-header { background-color: transparent; } .inlinetabs .ui-tabs-nav > li { margin: 0 2px; width: auto; clear: none; } .inlinetabs .ui-tabs-nav .ui-btn { border: 1px solid #ddd; border-bottom: none; border-top-left-radius: .6em; border-top-right-radius: .6em; padding: 1em 2em 1em 3.5em; } .inlinetabs .ui-tabs-panel { border-top: 2px solid #ddd; margin-left: -0.5em; margin-right: -0.5em; } /* Bilder drehen (indexMobile.jsp werden alle src="action..." gedreht, wenn Orientierungseinstellungen im Bild sind --------------------- */ /* nur für IE und Safari ... */ .rotate-90 { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -o-transform: rotate(-90.0deg); } .rotate-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -o-transform: rotate(180.0deg); } /* YesNoMessageBox ---------------------------------------------------------------------------------------------------------------------- */ .inputReadOnly { border: none !important; background: #efefef !important; } #ecadiaPopupDiv { border: 2px solid #ddd; box-shadow: 0px 0px 12px rgba(0,0,0,0.6); border-radius: .3125em; position:absolute; z-index: 10; /* über den mainPage Sachen, aber noch hinter dem Kalenderpopup */ background: #ffffff; } .YesNoMessageBox { display: none; width: 96%; max-width: 32em; min-height: 16em; border: 2px solid #ddd; box-shadow: 0px 0px 12px rgba(0,0,0,0.6); border-radius: .3125em; position:absolute; z-index: 2000; /* 1100 hat der jQM Popup */ background: #ffffff; } .YesNoMessageBox .YesNoMessageBoxText { hight: 8em; padding: 1em 1em 1em 4em; background-image: url('gifMobile/question32.png'); background-position: 1em 22px; background-repeat: no-repeat; } .YesNoMessageBoxYes, .YesNoMessageBoxNo { min-width: 5em; } .YesNoMessageBoxHeader { text-align: center; } .YesNoMessageBoxButtons { position: absolute; bottom: 1em; padding-left: 2em; } /* liegt direkt im Body und macht die ganze Seite als readonly */ .bodyBackgroundDisable { position: absolute; width: 100%; height: 100%; background: #bbbbbb; opacity: 0.6; z-index: 1200; display: none; } .popupPrintBookmarksTitle { margin-left: 1em; } .bookmarksListview, .menuPanelListView { margin-top:-16px; } .bookmarkPanelInfoEmpty { border: 2px #888888 solid; padding: 1em 1em 1em 1em; margin: 3em 1em 1em 1em; text-align: center; } .popupPrintBookmarks { min-width: 24em; max-width: 30em; } .popupPrintBookmarksContent { padding: 1em; } /* dataTable-Anpassungen für Mobile --------------------------------------------------------------------------------------------------------- */ table.dataTable.compact tbody th, table.dataTable.compact tbody td { vertical-align: middle; } .dataTables_filter label { float: left; } .dataTables_filter button { float: right; } /* Styles von ui-btn nachbilden für den Excel-Button */ .dataTables_filter .button { padding: 0.4em 0.4em 0.4em 0.4em; margin: 0 0 0 .4em; border-radius: .3125em; border: 1px solid #ddd; cursor: pointer; } .dataTables_filter .ui-input-search { margin: 0; } /* bei paginierten Tabellen bieten wir keine Combobox zur Änderung der Anzahl an, weil sonst wegen des Height der Seite der untere teil ggf. abgeschnitten wird */ .dataTables_length { display: none; } .ui-dialog { background-color: #fafafa !important; } @media screen and (max-width:767px) { .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { text-align: left; /* sonst ist das seltsamerweise zentriert */ } } /* Dialog Zugriffsberechtigungen - Kopie aus ecaddia.css ------------------------------------------------------ */ /* Verwendung in ecadiaAdmin.js openDialogEditAccessProfile */ .AccessProfileDialogTable { border: 2px solid #999999; border-collapse: collapse; } .AccessProfileDialogTable th { bacgground-color: #cacbcc; width: 160px; border: 1px solid #999999; padding: 6px; text-align: center; } .AccessProfileDialogTable td { border: 1px solid #999999; padding: 4px; text-align: center; } /* damit die Tabelle im grau/weiß Wechsel kommt */ .AccessProfileDialogTable tr:nth-child(odd) { background-color: #eaeaea; } .AccessProfileDialogTable td:first-child { text-align: left; } .AccessProfileDialogTable .dragObject { background: #72879d !important; color: white; } .AccessProfileDialogTable .dropObject { background: #dddddd; color: #000000; } /* ----------------------------------------------------------------------------------------------------------- */ /* Besonderheiten explorer.jsp ------------------------------------------------------------------------------- */ .pageTypeClass-explorer h1 { margin-top: 0.2em; } .rangeSliderWidget .ui-rangeslider .ui-rangeslider-sliders { margin: 0 20px; /* da steht Standardmäßig 68px was zu breite Ränder ergibt */ } .rangeSlider { margin: 2px 0; /* sonst wird der Schieber-Knopf oben etwas abgeschhnitten */ } /* in der Kacheldarstellung ist einfach für diese Teile kein Platz */ .tileLayout .embeddedEventTable, .tileLayout .embeddedProductShortDescription { display: none; } table.embeddedEventTable td { text-align: right; } .embeddedProductShortDescription p { white-space: normal !important; } #resultSummary { padding-bottom: 0.5em; } /* das Suchfeld bei zweispaltiger Darstellung optisch schön gleichauf mit den Buttons anordnen */ .searchFieldContainer { padding-top: 4px; } @media (max-width: 35em) { .searchFieldContainer { padding-top: 0; } } .ui-listview > li table { margin: 0.5em 10px; font-size: .75em; font-weight: normal; display: block; } .ui-listview > li table td:not(.eventTableAfterImg) { padding: 2px 2px 2px 6px; } .ui-listview > li table tbody tr:not(:first-child) { border-top: 1px solid #aaaaaa; } .ui-listview > li table td img { padding-right: 6px; padding-left: 0px; margin-bottom: -3px; } .ui-listview > .ui-li-static { padding: .1em .1em; } .explorer.tileLayout .ui-listview .ui-li-icon { top: 0.25em !important; /* RS, 17.12.2016: leicht nach oben angehoben */ } #searchResult > li p { white-space: normal; } .custom-corners .ui-bar { -webkit-border-top-left-radius: inherit; border-top-left-radius: inherit; -webkit-border-top-right-radius: inherit; border-top-right-radius: inherit; } .custom-corners .ui-body { border-top-width: 0; -webkit-border-bottom-left-radius: inherit; border-bottom-left-radius: inherit; -webkit-border-bottom-right-radius: inherit; border-bottom-right-radius: inherit; } .ui-disabled, .ui-state-disabled, button[disabled], .ui-select .ui-btn.ui-state-disabled { opacity: 0.8; /* Standard ist 0.3, was sehr blass ist */ } .newTrainingProductText { background-color: white; padding: 5px; position: absolute; top: 0; right: 0; } /* Standardmäßig wird das nicht angezeigt, kann im Kundenprojekt aber gemchet werden um z.B. sowas wie "Online" optisch hervorzuheben */ .DeliveryModeTrainingProductText { display: none; } /* --- Bewertungen ---------------------------------------------------------------------------------------------------- */ .UserRating { height: 30px; /* damit die Anzahl-Box nicht unten abgeschnitten wird */ margin-left: 10px; } .embeddedProductRating { display: block; } .ratingCount { border: 1px solid #888888; border-radius: 4px; padding: 4px; width: 30px; height: 16px; margin-left: 10px; font-size: 0.8em; text-align: center; } #popupRating { min-width: 26em; } #ratingArea { padding: 1em 1em 1em 1em; } #ratingTable { width: 100%; margin-bottom: 2em; } #ratingTable td { width: 20%; height: 3em; border: 2px solid #888888; } /* Expandierbare Bereiche ---------------------------------------------------------------------------------------- */ .expandButton { /* wenn das expanden in einer Listview genutzt wird, dann haben die Buttons sondz unpassende Einstellungen */ min-height: 0 !important; padding-left: 0 !important; } .expandArea { padding-bottom: 4px; } /* sachtes Ausblenden bei abgeschnittenen Inhalten */ .expandAreaReduced:before { content:''; width: 100%; height: 200px; /* ab der Hälfte soll das Ausblenden anfangen: Problem dabei: Links mit sind nicht erreicbar weil der transparente Teil drüber liegt */ position:absolute; left:0; bottom:0; z-index: 1; background:linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); } /* Word cloud -------------------------------------------------------------------------------------------------- */ .wordclouditem:hover { color: rgb(112,175,255) !important; cursor: pointer; } /* *************************************************************************************************** */ /* jQuery dataTable */ /* *************************************************************************************************** */ table.dataTable th.alignRight, table.dataTable td.alignRight { text-align: right !important; } table.dataTable th.alignCenter, table.dataTable td.alignCenter { text-align: center !important; } /* inaktive Objekte in der List: durchstreichen */ tr.InactiveRowSubject td { text-decoration: line-through; } tr.hideInactiveRowSubject { display: none !important; } /* diesen Style kann man setzen, damit es durchgestrichen wird */ tr.lineThroughRowSubject td { text-decoration: line-through; } /* *************************************************************************************************** */ /* Ende jQuery dataTable */ /* *************************************************************************************************** */ /* *************************************************************************************************** */ /* Passwort Eingabe */ /* *************************************************************************************************** */ #indicator1OK, #indicator2OK, #indicator1Error, #indicator2Error, .indicatorOK, .indicatorError { display:none; margin-top: 4px; margin-left: 6px; } .rouleTextError { font-weight: bold; color: red; } /* *************************************************************************************************** */ /* Ende Passwort Eingabe */ /* *************************************************************************************************** */ .ecadiaVideo { padding-top: 1em; padding-bottom: 1em; } /* *************************************************************************************************** */ /* Standard Suchmasken wie z.B. enrolllist.jsp */ /* *************************************************************************************************** */ /* den Suchbutton bei zweispaltiger Darstellung optisch schön neben dem Eingabefold anordnen */ #searchButtonContainer { padding: 1em 6px 0 6px; } @media (max-width: 35em) { #searchButtonContainer { padding: 0; } } /* *************************************************************************************************** */ /* Ende Standard Suchmasken wie z.B. enrolllist.jsp */ /* *************************************************************************************************** */ /* *************************************************************************************************** */ /* Carousel z.B. im webSite.jsp */ /* *************************************************************************************************** */ .ContentSlider table { margin: 40px; } .ContentSlider table td { vertical-align: top; display: none; overflow: hidden; background-size: contain; } .ContentSlider table td:last-child { width: 45%; } .ContentSlider table td:first-child { width: 55%; background-repeat: no-repeat; background-position: 50% 30%; } .ContentSlider table td:last-child p { padding-left: 30px; font-size: 2vw; } .ContentSlider table td:last-child h1 { padding-left: 30px; font-size: 3vw; } .ContentSlider button.slick-prev { left: 20px; } .ContentSlider button.slick-next { right: 20px; } .ContentSlider button.slick-prev, .ContentSlider button.slick-next { position: absolute; top: 40%; background-color: #f6f6f6 /*{a-bup-background-color}*/; border-color: #ddd; color: #333; -webkit-border-radius: 1em; z-index: 100; } ul.slick-dots { position: absolute; left: 40%; bottom: -10px; display: block; margin-left:auto; margin-right:auto; } .slick-dots li { list-style-type: none; float: left; } .slick-dots li button { margin: 2px; border: 2px solid #aaaaaa; padding: 4px 6px 4px 6px; z-index: 100; } .slick-dots .slick-active button { border: 2px solid #666666 !important; } /* *************************************************************************************************** */ /* Ende Carousel z.B. im webSite.jsp */ /* *************************************************************************************************** */ .documentList p { padding: 0 !important; margin: 0 !important; } .documentList td:first-child { padding: 4px 0 0 0 !important; margin: 0 !important; vertical-align: middle; } .documentList td:last-child { padding-left: 10px !important; margin: 0 !important; } .cancellatonDetails ul li { color: red; } .registerAlternativeProductHeader { background-color: white !important; } .taggedValueArea .ui-btn-inline { margin-left: 0; } /* *************************************************************************************************** */ /* enroll.jsp */ /* *************************************************************************************************** */ .enrollDataTable td { font-weight: 400; /* sonst ist das so blass */ } /* *************************************************************************************************** */ /* Forum */ /* *************************************************************************************************** */ .forumItems h2 { margin: 0 !important; /* hier brauchen wir keinen Rand */ font-weight: 500 !important; } .forumItems > li ul { margin-left: 6px !important; } .forumItems > li p { margin-bottom: 0.1em !important; margin-top: 0.1em !important; margin-left: 0 !important; white-space: normal !important; /* nicht abschneiden sondern vollständig anzeigen */ } /* *************************************************************************************************** */ /* Dokumentliste im Produkt oder beim Forum */ /* *************************************************************************************************** */ table.documentTable td { vertical-align: middle; } /* die Textspalte mit etwas Rand zum Preview-Bild */ table.documentTable td:nth-child(2){ margin: 0 !important; padding: 0 0 0 4px !important; } /* das Preview-Bild ohen Rand */ table.documentTable td.documentTableThumbnail { margin: 0 !important; padding: 0 !important; } /* etwas kleinere Überschrift um Längeren Dateinamen gerecht zu werden */ table.documentTable td p { font-size: 1.1em; margin: 0 !important; padding: 0 !important; } table.documentTable td p:first-child { font-size: 1.5em; margin-bottom: 0.2em !important; } /* die Vorschau-Spalte */ .documentTableThumbnail { width: 100px; text-align: center; padding-right: 4px !important; } /* die Vorschau */ .documentTableThumbnail img { max-height: 100px; max-width: 100px; } /* die kleine Breite, z. B. iPhone */ @media ( max-width :640px) { /* *************************************************************************************************** */ /* Dokumentliste im Produkt oder beim Forum alle etwas kleiner */ /* *************************************************************************************************** */ .documentTableThumbnail img { max-height: 70px; max-width: 70px; } .documentTableThumbnail { width: 70px; } table.documentTable { margin: 0 !important; } table.documentTable td { margin: 0 !important; padding: 0 !important; } table.documentTable p { margin: 0 !important; } } /* *************************************************************************************************** */ /* Inquiry */ /* *************************************************************************************************** */ /* den ganzen Fragebogen umrahmen */ .inquiryForm { margin: 0.5em; padding: 1em; border: 2px solid #888888; box-shadow: 4px 4px 4px #999999; background-color: white; } /* der "submit"-Button unten am Fragebogen */ .inquiryForm #save { margin-top: 1em; background-color: LawnGreen; /* kräftiges grün */ height: 6em; } /* Matrix-Frage Zelle */ .matrixTable-cell { padding-left: 0px !important; padding-right: 0px !important; min-height: 80px !important; min-width: 50px !important; } .ui-btn.ui-checkbox-on.ui-checkbox-on:after, .ui-btn.ui-checkbox-off.ui-checkbox-off:after, .ui-btn.ui-radio-on:after, .ui-btn.ui-radio-off:after{ width: 22px !important; height: 22px !important; border-width: 0px !important; border-style: none !important; } label.ui-btn.ui-checkbox-on.ui-checkbox-on:after, .ui-btn.ui-radio-on:after{ background-image: url(gifMobile/checked.png) !important; background-color: white !important; } .contentArea_inquiryParticipant, .contentArea_inquiryEvaluation { max-width: 1200px; } .ui-btn-icon-bottom:after { margin-left: -11px !important; } .quest{ padding-top: 1em; } /* damit individuelle Bilder nicht das ganze Layout verhageln */ .inquiryForm img { max-width: 100%; height: auto; } .inquiryForm h1 { font-size: 1.4em; font-weight: bold; } .inquiryForm h2 { font-size: 1.2em; font-weight: bold; } .matrixTable .table h3 { padding-top: 1.5em !important; padding-left: 1em; font-size: 1em; } /* die Zeilen der Umfrageschaltflächen nicht abschneiden, weil sonst wichtige Infos abgeschnitten werden */ .inquiryList h3, .inquiryList .ui-btn { white-space: normal !important; } @media ( max-width :680px) { /* am Smartphone den Rahmen etwas klainer machen */ .inquiryForm { margin: 0.2em; padding: 0.2em; } } /* Vorschau der Fragebögen */ .inquiryThumbnail { width: 140px; text-align: center; padding-right: 4px !important; float: left; } .inquiryThumbnail img { max-height: 140px; max-width: 140px; } /* Highlighting bei nicht-ausgefüllten Pflichtfeldern ---------------------------------------------------- */ div.highlightRequired[data-required=true] .ui-btn, table.highlightRequired[data-required=true] .ui-btn, div.highlightRequired[data-required=true] .ui-input-text { border: 2px solid green !important; background-image: url("gif/warning.png"); background-repeat: no-repeat; background-position: right 10px center; } /* Warn-Symbol bei Matrix-Fragen besser oben anzeigen, weil das sonst gerne mit Text kollidiert */ table.highlightRequired[data-required=true] .ui-btn { background-position: right 4px top 4px; } /* --- Select2 Mobile Patches ----------------------------------------------------------------------------- */ /* großzügigere Anzeige im zugeklappten Zustand - größe wie ein Button */ /* die Box um das Select2 */ .select2-container--default .select2-selection--single { height: 38px; } /* der selektierte Text im Select2 */ .select2-container--default .select2-selection--single .select2-selection__rendered { padding-top: 4px; } /* der Pfeil rechts */ .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; } /* Achtung: sonst wird die Auswahl in Popups nicht angeuzeigt, https://stackoverflow.com/questions/46927681/select2-doesnt-show-options */ .select2-dropdown { z-index:99999; } .select2formatStandardSelectionAdminElement img { padding-right: 6px; padding-top: 4px; } .select2-container--default .select2-selection--single[aria-disabled=true] { border-color: #ddd; /* so wie die readonly Inputs */ } /* Eine Auswahl soll nie kleiner sein */ span.select2-selection.select2-selection--single { min-width: 5em; } /* HTMLTable2 speziell Responsive, den beiden Buttons ähnlich */ .filterResponsive input[type=search] { width: 5em; padding: 0.4em 0.4em 0.5em 20px; margin: 0 0 0 .4em; border-radius: .3125em; border: 1px solid #ddd; cursor: pointer; background-image: url('gifMobile/filter16.png'); background-repeat: no-repeat; background-position: 1px 8px; } /* Styles für includePopupLogin --------------------------------------------------- */ .errorMessage { color: red; display: none; } .textInputError { border: 3px solid red !important; } #requestPasswordArea { display: none; } .captchaImg.showWaitMessage { margin: auto; display: block; padding-top: 32px; } .buttonLogonAsGuestArea { float: right } .buttonLogonAsGuestArea .ui-btn-inline { margin-right: 0 !important; /* weil sonst inline-Buttons nicht rechts bündig sind */ color: blue !important; /* optisch diesen Button hervorheben */ } /* document.jsp ------------------------------------------------------------------- */ .contentArea_document { padding: 0; } .RegistrationResult { width: 100%; border-bottom: 1px solid #999999; padding-top: 6px; padding-bottom: 6px; } /* Buchungsresultat, wenn Kindbuchungen vorliegen */ .childRegistrationResultTable { border-collapse: collapse; } .childRegistrationResultTable td { padding: .5em; border-bottom: 1px solid #999999; } /* 16px Icon etwas nach unten ziehen */ .childRegistrationResultTable img { margin-bottom: -2px; } .childRegistrationResultTable li { display: list-item !important; } /* Bereich, der durch einen Radio-Button aktiviert oder deaktiviert wird; siehe externalProviderRegister.jsp */ .areaSelected { border: 1px solid #999999; padding: 1em 1em 1em 2.5em; /* damit das unter dem Radiobutton mit dem label in etwa bündig wird */ background-color: white; } .areaNotSelected { border: none; padding: 1em 1em 1em 2.5em; /* damit das unter dem Radiobutton mit dem label in etwa bündig wird */ background-color: #efefef; } /* Fileupload z.B. beim Inhalte Teilen oder beim Buchen externer Veranstaltungen */ .bar { height: 32px; background: #70d138; } /* die "Wolke" zum Upload */ .fileDropArea { padding: 20px; min-height: 150px; border: 5px dashed rgb(210, 214, 216); border-radius:20px; background: url('gifMobile/UploadCloudBackground.PNG') #ffffff no-repeat right center; background-position: 50% 80%; } #pdfCatalogueArea { margin-bottom: 0.5em; } #pdfCatalogueArea a { padding-top: 0; } /* Formatierung für Reporting */ #pdfCatalogueArea a h2 { padding-bottom: 0 !important; } /* Formatierung für Reporting */ div.barChartPercent { width: 100%; background-color: #c0eadc; height: 32px; text-align: left; border: 1px solid #555555; border-radius:5px; overflow: hidden; } div.barChartPercent div:nth-child(1) { float:left; padding: 4px 1px 1px 10px; color: black; } /* das ist der von links kommende %-Balken */ div.barChartPercent div:nth-child(2) { margin-right: 1px; background-color: #7dc6ae; border: 1px solid #77bda6; border-right: 2px solid #eeeeee; /* Trennbalken zwischen den Bereichen */ height:30px; } /* Formatierung für Reporting: das gestufte Balkendiagramm, horizontal */ div.stackedBarChart { height: 32px; border: 1px solid #555555; border-radius:5px; overflow: hidden; } span.formatStackedBarChartValueClass { display: inline-block; text-align: center; width: 100%; padding-top: 4px; } div.stackedBarChart div { float:left; color: black; height: 32px; } div.stackedBarChart div:nth-child(1), .stackedBarChart1 { background-color: Turquoise ; } div.stackedBarChart div:nth-child(2), .stackedBarChart2 { background-color: lightyellow ; } div.stackedBarChart div:nth-child(3), .stackedBarChart3 { background-color: SkyBlue; } div.stackedBarChart div:nth-child(4), .stackedBarChart4 { background-color: LightCoral; } div.stackedBarChart div:nth-child(5), .stackedBarChart5 { background-color: PaleGoldenRod; } .reportUtilImportant { background-color: red; color: white; font-weight: bold; } .productImageArea { margin: 0.5em; padding: 0.5em; } .productImage { float: left; box-shadow: 0 2px 5px 1px rgba(0,0,0,.2); border-radius: 3px; border: none; margin: 0.5em; } #popupImageDialog { } .ibanIcon, .validateIcon { float: right; margin-top: -1.8em; margin-right: 5px; } .mobileWidget .patternMessage{ float: left; z-index: 100; color: red; font-size: small; position: absolute; } label.mobileWidget p { margin: 0; /* dieses

kommt in der Regel vom TinyMce und ist gar nicht gewünscht */ } .mobileWidget.mobileUpload > form > div:nth-child(1){ /* padding: 10px 10px 10px 10px; */ border: dashed 4px #cccccc; border-radius: 20px; /* max-width: 50%; */ /* margin-right: 2em; */ } .mobileWidget.mobileUpload > form > div:nth-child(1) > img{ max-height: 140px; max-width: 140px; margin: auto; padding-top: 1em; padding-bottom: 1em; } /* Bei unseren MobileCollapsibleWidget sollen die Überschriften ohne Abstand zur Liste drunter angezeigt werden */ h3.collapsibleHeading{ margin-bottom: 0!important; padding-bottom: 0!important; } .mobileWidget.mobileUpload > form > div:nth-child(2){ /* margin: 0 auto !important; */ /* width: 50%; */ /* padding-left: 2em; */ } .mobileWidget.mobileUpload > form { margin-bottom: 10px; } .mobileWidget.mobileUpload a.document-link img.photo, .mobileWidget.mobileUpload div.description { display: table; margin-left: auto; margin-right: auto; max-width: 95%; margin-top: 5px; margin-bottom: 5px; border-radius: 20px; } .mobileWidgetFloatLeft { float:left; } img.iconInMobileCheckboxWidget { margin-bottom: -6px; /* wir müssen das leicht nach unten ziehen */ } /* Belegung: < 75% grün, dann gelb und bei 100% rot */ #popupCompetenceActions span.TrainingRecommandationLabelArea { line-height: 0.7em; float: left; /* in einer Reihe mit dem img */ } #popupCompetenceActions p.TrainingRecommandationLabelType { font-size: 0.7em; padding: 0 0 0.4em 0; margin: 0; } #popupCompetenceActions p.TrainingRecommandationLabelTitle { padding: 0; margin: 0; white-space: normal; } .HighlightExpringCompetence { color: red; font-weight: bold; } .MobileDateTimePickerNowButton { margin-top: 2px; } /* Buchungsprozess Liste Mitarbeiter ------------------------------------------------------ */ /* die listview mit den gefundenen Mitarbeiter - wenn das zu lang wird dann rutzscht der Weiter-Button zu weit nach unten */ #EmployeeListAutocomplete { max-height: 20em; /* etwa 4 Mitarbeiter */ overflow-y: auto; } .employeeListAutocompleteArea { padding: 1em; border-right: 1px solid #dddddd; } @media ( max-width :640px) { .employeeListAutocompleteArea { padding: 0.5em; border-right: none; } } /* damit die Eingaben der Meldezusätze nicht so eng aufeinander stehen; Select2 hat sowieso schon einen Abstand */ .TaggedValuesWidgetSection textarea, .TaggedValuesWidgetSection .ui-input-text, .TaggedValuesWidgetSection .ui-checkbox { margin-bottom: .5em !important; } .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 */ } .competenceMandatory a:first-child { /* background-image: url("gifMobile/competenceMandatoryInfo.png"); background-position: right 2px top 2px; background-repeat: no-repeat; */ } .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; font-color: #777777; } .competenceProgressBarTextOpen { font-size: .7em; font-color: black; font-weight: bold; } .competenceProgressBar { /* sonst kommt das von btn-ui und ist etwas hoch */ padding-bottom: .2em !important; } /* Kompetenzliste --------------------------------------------------------------------------------------------------- */ #explorer { } #folderListAreaExplorer { margin: 0 auto; /* wir starten mit der Breite */ max-width: 420px; } .btn-folderCell { float: left; width: 410px; } .FolderCell { height: 370px; padding: 0px 0px 4px 0px ; margin: 10px 10px 10px 10px; position: relative; background: #e6e7e8; background-image: url("gifMobile/arrowRight.png"); /* Pfeil rechts wie bei Link-Button */ background-position: right 10px center; background-repeat: no-repeat; } /* ohne Bild brauchen auch weniger höhe */ .FolderCell:hover { -moz-box-shadow: 0px 0px 12px #999999; -webkit-box-shadow: 0px 0px 12px #999999; box-shadow: 0px 0px 12px #999999; } /* ohne Bild brauchen auch weniger höhe */ .FolderCell.FolderCellNoImage { height: 175px; } /* ohne Bild soll der Produkt-zähler nicht im Text stehen */ .FolderCellNoImage .FolderDescription, .FolderCellNoImage h2 { padding-right: 30px !important; } .FolderCell .ui-li-count { background-color: white; right: 10px; top: 20px; z-index: 1000; /* damit die transition auf dem Untergrund die Zahl nicht ä */ } .FolderCellInner { overflow: hidden; display: inline-block; width: 100%; height: 100%; } .FolderCell h2 { padding: 0 10px 0 10px; white-space: normal; display: inline-block; } .FolderImageWrapper { overflow: hidden; width: 100%; } .FolderTitle { color: #0b3378; font-weight: bold; font-size: 1.1em; padding: 4px 16px 4px 8px; } .FolderDescription { padding: 0 10px 0 10px; } .FolderBoxBackgroundImage { overflow: hidden; } /* die kleine Breite, z. B. iPhone */ @media ( max-width :680px) { /* die Überschrift für den PDF-Katalog stört bei Mobile eher */ #pdfCatalogueArea > h2 { display: none; } /* 2-spaltige Darstllung */ .btn-folderCell { width: 100%; } .FolderCell { margin: 4px; height: auto; /* so hoch wie nötig, weil das hier ja sowieso einspaltig ist */ display: block; } /* am Handy sollen die Ordner im Bildungskatalog keinen besonderen Rand bekommen */ .FolderCell.FolderCellImage { height: auto;; } .FolderCellImage .FolderImageWrapper { float: left; width: 125px; /* das Bild ist 175 breit, wird aber links und rechts um je 25px abgeschnitten */ margin-right: 8px; } .FolderCellImage .FolderImageWrapper img { display: block; max-height: 100%; width: 175px; height: auto; float: left; overflow: hidden; margin: 0 -25px 0 -50px; } /* kein Effekt beim Bild - ist auch dem Smartphone sowiso nicht sichtbar */ .FolderCellImage .FolderBoxBackgroundImage { transition: none !important; overflow: hidden; } .FolderCellImage .FolderBoxBackgroundImage:hover { transition: none !important; } .FolderCellImage .FolderDescription { margin: 0; clear: both; padding: 4px 10px 0 10px; } .FolderCell.FolderCellNoImage { height: auto; min-height: 100px; } } /* 2-spaltige Darstllung */ @media ( min-width: 980px ) { #folderListAreaExplorer { max-width: 860px; } } /* 2-spaltige Darstllung */ @media ( min-width: 1400px ) { #folderListAreaExplorer { max-width: 1290px; } } .WidgetSettingsButton{ margin-left: 5px!important; } .left-grid { float: left; padding-right: 0.5em; display: inline-block; vertical-align: top; } /* newsItemList.jsp --------------------------------------------------------------------------------------------------------------------------------- */ /* tagesschau.de angelehnt */ .newsItemList { display: block; } .newsItemMain { display: block; /* https://stackoverflow.com/questions/10101841/how-to-auto-adjust-parent-div-height-according-to-the-contents-in-child-div */ overflow: hidden; padding-bottom: 10px; margin: 10px 10px 10px 0; padding: 20px; background: #efefef; } .newsItemImage { display: block; max-width:320px; max-height: 100%; width: 20%; height: auto; float: left; overflow: hidden; } .newsItemTextArea { float: left; overflow: hidden; width: 100%; } .newsItemTextAreaWithImage { padding-left: 10px; width: 75%; /* wenn es ein Image gibt dann istr der Text nur 75% breit */ } .newsItemTextArea p { color: black; margin: 0 !important; } .newsItemTextArea h2 { margin: 0 !important; } .newsItemLink { text-decoration: none; } #newsTicker .newsItemImage { width: 30%; /* damit da Bild nicht zu winzug wird auf 30% gehen */ } #newsTicker .newsItemTextAreaWithImage { width: 65%; } /* newsItem.jsp --------------------------------------------------------------------------------------------------------------------------------- */ .newsImage { width: 100%; height: 250px; background-position: center center; background-repeat: no-repeat; background-size: 100%; } .newsItemTeaser { font-weight: bold; padding-bottom: 10px; } /* rechts unten den Namen der jsp abdrucken ------------------------------------------------------------- */ .jspNameInfo { position: absolute; right: 6px;; bottom: 37px; 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; } /* Teilnehmer beim Umbuchen ----------------------------------------------------------------------------- */ .eventRegisterEmployeeList { max-height: 20em; overflow-y: scroll; } .IsOutsideQuater { background-color: #e5eaee !important; font-weight: normal !important; } /* Prozent-Balken default */ div.gray { background-color:#AAAAAA; height:28px; text-align:left; margin: auto;} div.Progressbar { height:24px; text-align:left; padding-top: 1px; border: 1px solid #AAAAAA; } div.Progressbar_25 { background-color:#FF3300; } div.Progressbar_50 { background-color:#FF3300; } div.Progressbar_100 { background-color:#2DFA00; text-align:center; } div.Progressbar_75 { background-color:#ffee00; } /* Prozent-Balken WBT-Fortschritt */ .wbtProgressbar div.Progressbar_25 { background-color:#2DFA00; } .wbtProgressbar div.Progressbar_50 { background-color:#2DFA00; } .wbtProgressbar div.Progressbar_100 { background-color:#FF3300; } .wbtProgressbar div.gray { background-color:#AAAAAA; } .wbtProgressbar div.Progressbar_75 { background-color:#ffee00; } .wbtProgressbar .Progressbar { color: white; text-shadow: none; } /* Prozent-Balken z.B. im DataProviderHotel - immer die gleiche Farbe */ .blueStyle div.Progressbar_25 { background-color: #6F9FD8; color: white; font-weight: bold; } .blueStyle div.Progressbar_50 { background-color: #6F9FD8; color: white; font-weight: bold; } .blueStyle div.Progressbar_100 { background-color: #6F9FD8; color: white; font-weight: bold; } .blueStyle div.Progressbar_75 { background-color: #6F9FD8; color: white; font-weight: bold; } /* Formatierung für Reporting */ div.blueStyle { width: 100%; background-color: #c0eadc; height: 24px; text-align: left; border: 1px solid #555555; border-radius:5px; overflow: hidden; margin: 0 !important; } /* Prozent-Balken beim Lernfortschritt */ .wbtProgressbar > div.Progressbar_100 { background-color:#6F9FD8; height:17px; text-align:left; padding: 0 0 6px 0; border: 1px solid #AAAAAA; } div.gray.wbtProgressbar { height:24px; display: inline-block; margin-left: 10px; border-radius: 3px; padding: 3px;} /* im Bildungskatalog die Anzeige der Belegung der Veranstaltungen */ div.gray.embeddedEventTableBar { height:21px; display: inline-block; } .embeddedEventTableBar div { height:17px; } div.embeddedEventTableBar div.Progressbar_90 { background-color:#2DFA00; } div.embeddedEventTableBar div.Progressbar_99 { background-color:#ffee00; } div.embeddedEventTableBar div.Progressbar_100 { background-color:#FF3300; } /* Produkt-Kachel der Suche/Explorer mit Veranstaltungsterminen ---------------------------------------------------------------------------------------------- */ .embeddedEventTable > table th { font-weight: bold; text-align: left; } .embeddedEventTable > table th, .embeddedEventTable > table td { padding: 0 2px 0 0 !important; } a.explorerTrainingProductListItem { padding-top: 2px; } /* das Explorer-Tab mit dem Ordnernamen nicht zu lang werden lassen */ #explorerTab { width: 400px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* die kleine Breite, z. B. iPhone */ @media ( max-width :680px) { /* hier etwas fremd: die Liste der Such-Treffer */ #searchResultArea { padding: 0; } /* das Explorer-Tab mit dem Ordnernamen nicht zu lang werden lassen, weil das ansonsten mit dem Suchergebnis zusammen zwei zeilig wird */ #explorerTab { width: 100px; } a.explorerTrainingProductListItem { padding-top: 2px; padding-left: 0 !important; } a.explorerTrainingProductListItem > h2, a.explorerTrainingProductListItem > .embeddedProductRating { padding-left: 3em; } a.explorerTrainingProductListItem > .embeddedProductRating .UserRating { padding-left: 0; } .embeddedEventTable img { display: none; } } .TrainingProductTitleExplorerTitle { display: block; /* damit es einen Umbruch danach gibt */ color: #0b3378; font-weight: bold; } .TrainingProductTitleExplorerID { font-size: 0.7em; } .explorer > ul > li > a > h2 , #productListAreaExplorer > ul > li > a > h2 { padding-top: 0; } /* Examen ----------------------------------------------------------------------------------------------- */ table.ExamParticipantSheetFolderOverviewTable { border-collapse: collapse; display: inline-block; } table.ExamParticipantSheetFolderOverviewTable th, table.ExamParticipantSheetFolderOverviewTable td { border: 2px solid #cdcdcd; padding: 0.1em 0.5em 0.1em 0.5em; vertical-align: middle; min-height: 2.5em; } /* Fragen-Kapitel Name */ table.ExamParticipantSheetFolderOverviewTable th:nth-child(1), table.ExamParticipantSheetFolderOverviewTable td:nth-child(1) { width: 2em; text-align: center; } /* Fragen-Kapitel Name */ table.ExamParticipantSheetFolderOverviewTable th:nth-child(2), table.ExamParticipantSheetFolderOverviewTable td:nth-child(2) { width: 15em; text-align: left; } /* Anzahl Fragen */ table.ExamParticipantSheetFolderOverviewTable th:nth-child(3), table.ExamParticipantSheetFolderOverviewTable td:nth-child(3) { width: 5em; text-align: right; } /* Erreichbare Punkte */ table.ExamParticipantSheetFolderOverviewTable th:nth-child(4), table.ExamParticipantSheetFolderOverviewTable td:nth-child(4) { width: 5em; text-align: right; } /* Progressbar, Anteil */ table.ExamParticipantSheetFolderOverviewTable th:nth-child(5), table.ExamParticipantSheetFolderOverviewTable td:nth-child(5) { width: 10em; text-align: center; } table.ExamParticipantSheetFolderOverviewTable th { background-color: #e1e2e3; } .ExamTemplateDescription ul, #examFolderQuestions ul:not(.examQuestionRankingList) { padding-left: 2em !important; list-style: square outside url(gif/bullet2.gif) !important; } .ExamTemplateDescription ul li, #examFolderQuestions ul:not(.examQuestionRankingList) li { padding-left: 10px !important; display: list-item; } #ExamParticipantSheetMain { width: 100%; } #Header { } #ExamParticipantSheetMain #examFolderQuestions{ margin-top: 40px; border-style: solid; border-radius: 10px; padding: 10px 10px 10px 10px; } #ExamParticipantSheetMain .dot { float: left; height: 25px; width: 25px; 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; } #ExamParticipantSheetMain #examFolderDrawerContainer{ margin-top: 20px; text-align: center; } #ExamParticipantSheetMain .answered { background-color: #bbb; } #ExamParticipantSheetMain .answering, #ExamParticipantSheetMain .answered.answering { background-color: #c0f0c6; } #ExamParticipantSheetMain ul.examQuestionRankingList { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } #ExamParticipantSheetMain ul.examQuestionRankingList li, #ExamParticipantSheetMain ul.examQuestionRankingList .ui-state-highligh { margin: 5px; padding: 10px; width: 90%; cursor: pointer; text-align: left !important; /* weil ui-btn den Text sonst zentriert */ } #ExamParticipantSheetMain #textDiv, #ExamParticipantSheetMain #imgDiv { clear: both; } #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; display: inline-block; 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; } /* füllt die übergeordnete Box vollständig aus */ #ExamParticipantSheetMain .dropAreaPicture { width: 100%; height: 100%; background-color: transparent; position: absolute; top: 0px; } #ExamParticipantSheetMain .dragAreaPicture { padding: 20px; max-width:140px; max-height:140px; min-width: 32px; min-height: 32px; width: auto; height: auto; z-index: 10; /*Damit wird sichergestellt, das die Bilder vor den jeweiligen Flächen sind */ } #ExamParticipantSheetMain .dropAreaLabel { margin: 4px; } #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 .examQuestionRadio, #ExamParticipantSheetMain .examQuestionCheckbox { width: 100%; margin: .5em 0; } #ExamParticipantSheetMain .ui-progressbar { position: relative; } #ExamParticipantSheetMain .progressbarMobile_label { position: absolute; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; margin-left: 10px; } #ExamParticipantSheetMain .lessTime{ background: #ff00c2; } #ExamParticipantSheetMain .lessTime2{ background: red; } /* Examen Ende -------------------------------------------------------------------------------------------- */ #popupDocumentEdit{ max-width: 98%; width: 40em; } #popupDocumentEdit .popupDocumentEditPreviewImage{ width: 200px; /* das ist eine gute Breite für die Preview-Bilder */ border: 1px solid #aaaaaa; box-shadow: 4px 4px #efefef; } /* der Bereich um die Bild-Vorschau */ .popupDocumentEditPreviewImageArea { text-align: center; } /* SSO-Login Anfang -------------------------------------------------------------------------------------------- */ #sso-saml2-area { position: relative; } #sso-saml2-area img[name="brandLogo"] { width: 70px; position: absolute; top: -30px; right: 0px; } #loginSSORequest { } .loginSSORequest img[name="loginSSOLogo"] { height: 40px; width: auto; } .loginSSORequest span[name="loginSSOText"]{ text-align: left; } /* Login Ende -------------------------------------------------------------------------------------------- */ .autorisation td { } .autorisationOpen td { font-weight: bold; color: red; } .autorisationFulfilled td { font-weight: bold; color: green; } /* Die Radio-Buttons mit der Beschreibung im p */ #inquiryFormListDiv label > p { margin: 0 !important; /* sonst haben wir einen etwa 1em oberen und unteren Rand */ padding: 0; } .mobileWidgetTinyMcePreviewDiv{ background-color: #f7f8f9; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; } /* vom Kunden angepasste Texte farblich hervorheben, in translateHelper.jpg */ .TranslateCustomized { background-color: yellow; } /* PartnerChooser sollen erstmal über die komplette Länge gehen */ .partnerRoleChooser { width: 100%; } /* Gast-Buchung Hotel-Information --------------------------------------------------------------------------------------- */ table.hotelRegistrationPriceInfo td { padding: 4px 12px 4px 12px; } table.hotelRegistrationPriceInfo th { text-align: left; /* damit dan icht zentriert wird */ padding: 4px 12px 4px 12px; color: #0b3378; /* wie h3 */ } /* Preis-Tabelle zum Produkt --------------------------------------------------------------------------------------------- */ #priceArea td:nth-child(1) { min-width: 8em; } #priceArea td:nth-child(2) { text-align: right; } .SelectPriceAdditionalPriceInfo { display: block; font-weight: normal; } .eventHTMLDescription td { padding: 2px 8px 2px 0; } .TrainerRequestExternalComment td { color: #0b3378; font-size: 1.1em; padding-top: 10px; } .TrainerRequestExternalComment td:nth-child(2) { padding-left: 24px; background-repeat:no-repeat; background-position: 0px 14px; background-image: url('gif/information.png'); } /* BBCode Editor CSS */ td.bbcode-table { min-width: 50px; border: 1px solid grey; padding-left: 3px; padding-right: 3px; } /* Siehe sceditor-custom.css - beides soll ähnlich aussehen */ .bbCodePreview ul { padding-left: 24px; list-style: square; } .bbCodePreview ol { padding-left: 24px; } .bbCodePreview li { padding-left: 18px; padding-bottom: 2px; } /* TOTP-Popup --------------------------------------------------------------------------------------- */ #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: 3em; overflow:auto; font-size: 0.9em; /* dann werden das 2 Zeilen */ } #inputOtp { border: 1px solid #777777; border-radius: 0.2em; padding: 0.5em; width: 4em; color: blue; font-family: monospace; font-size: 16pt; } .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 bleigt */ 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'); } .logonMFAEnterToken { padding-left: 80px; background-repeat:no-repeat; background-position: 0px 0px; background-image: url('gifMobile/getMFAKey64.png'); } .DocumentListFrame { margin: 1em; } #mydocumentsCollapsible .DocumentListFrame { margin: 0 !important; /* in "meine Lernunterlagen stört sonst der breite Rand */ } .DocumentListVCInfo { padding: 0.5em 1em 1em 1em !important; /* damit die Infos linksbündig mit den Angaben im darüberstehenden Link stehen */ } .DocumentListVCInfo h2, .DocumentListVCInfo p, .DocumentListVCURLLink p { padding-left: 0 !important; /* nicht nochmals links einrücken - sondet passt das nicht mehr linksbündig */ margin-left: 0 !important; } /* fullcalendar 5.5 in ------------------------------- */ .fc .fc-event, .fc .fc-daygrid-event { color: black !important; border: 1px solid #444444; padding: 2px; font-size: 0.9em; overflow: hidden; /* damit ein Eintrag nicht aus der Box herauslappt */ } .fc .fc-daygrid-dot-event { display: block; /* wird seltsamerweise für die Monatsanzeige gebraucht */ } .fc .fc-button-primary { color: black !important; background-color: #efefef !important; } .fc .fc-button-primary:hover { background-color: #dedede !important; } /* im Smartphone kein "Heute", weil der Platz nicht reicht */ @media ( max-width :680px) { /* Header kleiner */ .fc .fc-toolbar-title { font-size: 0.9em !important; text-align: center; } } /* RS, 21.03.2021: Burger-Menü nicht mit

sondern mit

- aber gleich wie h2 darstellen; Grund: für google gelten die Menüpunkte ansonsten als

- obwohl man sie ja nicht sieht */ .ui-listview > li p.MenuItemHeader { font-size: 1em; font-weight: bold; display: block; margin: 0.2em 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* RS, 26.08.2021: in openToDo.jsp */ #openToDoDialogArea { max-width: 50em; padding: 1em 1em 1em 3.5em; border: 1px solid #999999; border-radius: 4px; box-shadow: 4px 4px #efefef; background-color: #fafbfc; background-image: url(gifMobile/info32.png); background-repeat: no-repeat; background-position: 10px 20px; background-color: #ffffff; } /* RS, 06.10.2021: für ToDo-Liste, toDoList.jsp */ .toDoIsLate{ color: red; } .todoListIcon{ width: 32px; } .todoListIconFilter{ width: 32px; margin-bottom: -2px; } /* Alle Checkboxen die für das Filtern des ToDo-Status verwendet werden */ #toDoListFilterContainer .ui-checkbox{ padding: 5px; width: fit-content; display: inline-block; } #todoList .toDoIsLate h1 { color: red; } li.toDoIsLate a:first-child { background-image: url("gifMobile/deadline32.png"); background-repeat: no-repeat; background-position: right 10px center; } li.todoHighlight a:first-child { background-image: url("gifMobile/alert32.png"); background-repeat: no-repeat; background-position: right 10px center; } .ToDoExplanation img { margin-left: 3em; margin-right: 1em; } .ToDoExplanation label { padding-top: 0.3em; } .ToDoExplanation img, .ToDoExplanation label { float: left; } /* ToDos im Onboarding */ .onboardingOverview .toDoIsLate { background-image: url("gifMobile/deadline32.png"); background-repeat: no-repeat; background-position: right 5px center; } .onboardingOverview .todoHighlight { background-image: url("gifMobile/alert32.png"); background-repeat: no-repeat; background-position: right 5px center; } /* Onboarding ----------------------------------------------------------------------------------------------- */ /* von onBoardingOverview.jsp */ table.onboardingOverview { border-collapse: collapse; /*Keine Lücken zwischen Border*/ width: 100%; table-layout: fixed; margin-top: 2em; } table.onboardingOverview > thead > tr > th { /* ich verstehe es nicht, aber ein absolut positioniertes Element bezieht sich irgendwie zum ersten Parent, der relative ist https://www.freecodecamp.org/news/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd/ */ position: relative; } th.toggleTimeFrameHeader span.timespanText { display: block; } a.onboardingitem { margin: 4px; padding: 4px; color: black; /* z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). */ position: relative; /* so erst jetzt können wir den z-index setzen */ z-index: 100; /* bei sehr engen Bildschirmen dann eine y-Scrollbar */ overflow-y: auto; z-index: 100; text-shadow: none; } /* Klasse wird gesetzt im DP, wenn die Kompetenz nur durch WBTs vermittelt wird */ a.onboardingitem.WBTOnlyCompetence, #legendeTodoTrainingDigital { /* etwas helleres blau */ background-color: PaleGreen !important; color: black !important; } a.onboardingitem.DefaultCompetence, #legendeTodoTraining { /* etwas helleres blau */ background-color: LightCoral !important; color: black !important; } /* die Trennlinie zwischen den Spalten in der Tabelle*/ div.lineDivider { position: absolute; /* height wird nicht im CSS gesetzt, dies macht ein Skript, da wir im CSS die Höhe der Tabelle noch nicht wissen */ width: 2px; background-color: #666666; top: 0; } /* Das Icon des Bearbeitungsstandes links im Button */ a.onboardingitem img { /* damit die Icons nicht unterschiedlich groß werden, teils waren diese 64 oder 24px */ width: 24px; float: left; padding-top: 3px; } /* Text-Abschnitt im Onborading-Item */ a.onboardingitem > span { float: left; padding-left: 4px; width: 80%; } /* der untere Text */ a.onboardingitem > span > p { padding: 0; margin: 0; font-size: 0.8em; color: #666666; text-align: left; } /* der obere Text als Titel */ a.onboardingitem > span > p.TrainingTitle, a.onboardingitem > span > p.ToDOTitle { font-size: 1em; color: black; } /* die Area über der Tabelle */ #topArea { padding: 20px; margin-bottom: 30px; } /* Einfärbung der ToDos je nachdem wer Zuständig ist */ /* ToDo Mitarbeiter */ a.onboardingitem.employeeSelf, #legendArea .employeeSelf { background-color : LightYellow !important; } /* ToDo Manager */ a.onboardingitem.responsibleRelative-20, #legendArea .responsibleRelative-20 { background-color: LightBlue !important; } /* Buchung */ a.onboardingitem.enrollitem { background-color: #bf0000 !important; } /* der Block in der Legende für die Farbe */ div.legendSquare { height: 32px; width: 32px; display: inline-block; margin-right: 10px; } /** Bilder in der Legende */ img.legendImg { width: 32px; } /* Trennlinie von den Headern zu den TDs */ .onboardingOverview th { border-bottom: 2px solid #666666; } /* der Hinweistext hat etws mehr Abstand zum Zeitstrahl */ #disclaimerContainer { margin-bottom: 60px; } /* Pflichttraining im Onboarding, gleiches Icon wie bei wichtigen ToDos */ .MandatoryTraining { background-image: url("gifMobile/alert32.png"); background-repeat: no-repeat; background-position: right 5px center; } /* siehe https://stackoverflow.com/questions/28832129/replace-image-src-location-using-css */ #legendeMandatory { background: url("gifMobile/alert32.png") left top no-repeat; padding-left: 32px; box-sizing:border-box; width: 32px; height: 32px; } #legendeDeadline { background: url("gifMobile/deadline32.png") left top no-repeat; padding-left: 32px; box-sizing:border-box; width: 32px; height: 32px; } #legendAreaPiktogramm > div > span, #legendArea > div > span { vertical-align: top; padding-top: 6px; display: inline-block; padding-left: 8px; } /* damit bei vielen vom Manager gebuchten Tln auch eine Scrollbar angezeigt wird - man sieht das sonst nicht alle ausgewählten Tln */ #selectedParticipantsList { max-height: 450px; overflow-y: scroll; } /* Auslastung als Ampel */ .contentArea span.EventComplete, .contentArea span.EventWellBooked, .contentArea span.EventGuaranteed, .contentArea span.EventMinNotReached { -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; width: 16px; height: 16px; display: inline-block; border: 1px solid white; vertical-align: bottom; } .contentArea span.EventComplete { background-color: #f8484f; } .contentArea span.EventWellBooked { background-color: yellow; } .contentArea span.EventGuaranteed { background-color: #93d702; } /* Min-Tln.zahl noch nicht erreicht - das wird nur mit BookingTrafficLightMinNotReached=1 sichtbar */ .contentArea span.EventMinNotReached { background-color: #efefef; } /* Zahleneingabe - speziell Teilnehmergebühr */ .InputNumber { text-align: right !important; } /* die Monatsbuttons des veranstaltungskalenders zentriert */ .EventListMonths { text-align: center; } /* createNewevent.jsp Meldezusätze */ .TaggedValueGrid .ui-block-b, .TaggedValueGrid .ui-block-c { padding-top: .5em !important; } .TaggedValueGrid .ui-block-b label { padding-top: .5em; } ul.moduleEnrolls > li > a.subscription-link { background-color: #F0F8Fe; } ul.moduleEnrolls > li > a.subscription-link:hover { background-color: #d8e6f1; } /* dicke Linie um fehlende Leseberechtigung anzuzeigen */ .noAccessPlaceholder { height: 20px; border-radius: 20px; background-color: #aaaaaa; display: inline-block; } /*nur für 4.15 um hier einen Zeilenumbruch bei den rankingEQs zu machen*/ .rankingText{ font-weight: 700; border-width: 1px; border-style: solid; overflow: hidden; text-overflow: ellipsis; }