.moreCoreEdit textarea{ border-style:solid; } /* moreCore: Symbol für ungültig ausgefüllte Controls */ .moreCore_ValidationMsgError { color: var(--warning); display: flex; flex-direction: column; justify-content: center; /* vertikal zentrieren*/ } .moreCore_ValidationMsgError::before { content: '\f06a'; font-family: "FontAwesome"; font-size: 1.1em; margin-right: 0.2em; } /* Node in der Hinweise für ungültig ausgefüllte Controls stehen */ div.moreCore_ErrorMsgNode { display: flex; justify-content: center; } div.moreCore_ErrorMsgNode.show { margin: 0 var(--paddingYSmall) 0 0; } .loadingBar{ height:12px; width:100%; } /* NAVIGATION & SIDEBAR */ #sidebar { top: 0; max-height: calc(100vh - var(--marginTopbar)); margin-top: var(--marginTopbar); z-index: 18; width: 300px; box-shadow: 2px 0px 8px 2px var(--mediumTransparent); overflow: hidden; overflow-y: auto; display: flex; flex-direction: column; } #sidebar #stickySection { box-shadow: 0px 0px 12px -4px var(--darkTransparent); padding-top: var(--paddingY); z-index: 1; max-height:78vh; /* #linksection + #stickysection sollten maximal 100 ergeben!*/ /*min-height:*/ overflow-y:auto; } #sidebar #stickySection .sidebarNavigationHeader { margin-top: 0; margin-bottom: 0; padding: 8px 0 0 16px; padding-bottom: var(--paddingY); } #sidebar .sidebarPinButton.pinned { /*box-shadow: 0 0 0 2px var(--primary);*/ background-color: var(--complimentary); color: var(--complimentaryText); } #sidebar #linkSection { flex: 1; overflow-y: auto; min-height: max(150px, 20vh); /* % viewport height - Rest sollte für den Stickycontainer benutzt werden! */ margin-top: var(--paddingY); /*--selectedColor: var(--primary);*/ } #sidebar .profilePicContainer { width: 2.7em; height: 2.7em; position: absolute; right: var(--paddingX); } #sidebar .userInfoContainer { margin-bottom: var(--paddingXSmall); } #sidebar .userInfoContainer.loading { position: relative; pointer-events: none; }#sidebar .userInfoContainer.loading > * { opacity:0.6; } #sidebar .userInfoContainer .profilePicContainer img.profilePic { top: unset; left: unset; right: unset; bottom: unset; position: relative; height: 100%; width: 100%; outline: 2px solid var(--secondary); outline-offset: -1px; pointer-events: none; } #sidebar .userInfoContainer:hover { /*outline: 2px solid var(--primary);*/ } #sidebar .userInfoContainer:hover .profilePicContainer img.profilePic { outline-color: var(--complimentary); } #sidebar #linkSection .linkItem.selected > a { pointer-events: none; --selectedColor: var(--primary); background-color:var(--selectedColor); box-shadow: inset 0px -2px 0px 0px var(--selectedColor), inset 0px 2px 0px 0px var(--selectedColor); } #sidebar #linkSection .linkItem > a span{ margin-left:0.8ch; } #sidebar #linkSection .linkItem.selected > a span { /* sonst funktionieren ggf. fa-icons nimmer ? */ font-weight: normal; } #sidebar #linkSection .linkItem.selected > a *:is(i, span) { color: var(--primaryText); } #sidebar #linkSection .linkItem > a.mds-button-base { position: relative; padding-left: var(--paddingY) !important; } #sidebar #linkSection .linkItem > a .sidebarLinkIcon { color: var(--secondary); min-width:2.5ch; max-width:3.5ch; /*overflow:hidden;*/ } #sidebar #linkSection .linkItem.selected .sidebarLinkIcon{ } #sidebar #linkSection .linkItem > .subEntry { display: none; /*background-color: var(--accentThemeTransparent);*/ /*box-shadow: inset 4px 0px var(--accentThemeTransparent);*/ display: flex; color: var(--accentThemeD4); /*font-size: 0.9em;*/ padding: var(--paddingSmall); padding-left: 1em; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-wrap: nowrap; width: 100%; --linkColor: var(--accentThemeTransparent); } #sidebar #linkSection .linkItem > .subEntry > a > i{ color: var(--accentThemeD3); } #sidebar #linkSection .linkItem > .subEntry.selected { /*box-shadow: inset 4px 0px var(--primary);*/ } #sidebar #linkSection .linkItem > .subEntry > a { min-width: 10ch; flex: 1; border-top-left-radius: var(--round); border-bottom-left-radius: var(--round); padding: var(--paddingSmall); overflow: hidden; text-overflow: ellipsis; position:relative; } /*#sidebar #linkSection .linkItem > .subEntry > a::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 2px 0px var(--linkColor); }*/ #sidebar #linkSection .linkItem > .subEntry.dirty > a::before { font-family: var(--fontawesome); font-weight: bold; content: '\f069'; margin-right: 0.4em; color: var(--complimentaryThemeD4); } #sidebar #linkSection .linkItem > .subEntry.selected > a { pointer-events: none; background-color: var(--accentThemeTransparent); } #sidebar #linkSection .linkItem > .subEntry > a:only-child { border-top-right-radius: var(--round); border-bottom-right-radius: var(--round); } #sidebar #linkSection .linkItem > .subEntry > a > i { margin-right: 0.4em; } #sidebar #linkSection .linkItem > .subEntry > #closeBtn { background-color: transparent; border-radius: 0px; border-top-right-radius: var(--round); border-bottom-right-radius: var(--round); } #sidebar #linkSection .linkItem > .subEntry.selected > #closeBtn { background-color: var(--mediumTransparent); } #sidebar #linkSection a:hover .sidebarLinkIcon, #sidebar #linkSection a.selected .sidebarLinkIcon { /*color: var(--selectedColor); text-shadow: 1px 1px var(--dark);*/ color:inherit; } /* NEUE SIDEBAR */ #dynamicSidebar { --animationSpeed: 2s; /* Achtung: das Timing wird im JS überschrieben, damit Timeouts etc dort führend sind*/ --animationDelay:1s; /* und immer zusammen passen! */ --animationSpeedShort:1s; --collapsedSidebarWidth: 40px; --openSidebarWidth: 300px; --collapsedItemWidth: var(--collapsedSidebarWidth); --currentWidth:var(--collapsedSidebarWidth); top: 0; height: calc(100vh - var(--marginTopbar)); margin-top: var(--marginTopbar); z-index: 18; width: var(--collapsedSidebarWidth); overflow: hidden; display: flex; flex-direction: column; position: fixed; transition: var(--animationSpeed) ease-in-out width; box-shadow: -1px 0px 7px 2px var(--darkTransparent); background-color: var(--brighter); line-height:1.15; } .darkTheme #dynamicSidebar { background-color: var(--darkThemeBG); box-shadow: -1px 0px 7px 2px var(--mediumTransparent), 1px 0px var(--mediumDark); } .darkTheme #dynamicSidebar > #verticalContainer { background-color: var(--darkThemeBG); } .darkTheme #dynamicSidebar .item, .darkTheme #dynamicSidebar .link .label { color: var(--brightText); } #dynamicSidebar .highlightedArea{ } .darkTheme #dynamicSidebar .highlightedArea { background-color: var(--mediumDarkThemeBG); } #topBar_layout > #menu_btn { display: none; } @media screen and (max-width: 1080px) { #topBar_layout > #menu_btn { display: flex; } #dynamicSidebar { --collapsedItemWidth: 40px; --collapsedSidebarWidth: 0px; --openSidebarWidth: min(400px, 85vw); } /* Aufklappsymbol wächst mobil auf die ganze Breite, Symbol soll aber rechts bleiben */ #dynamicSidebar #controlContainer #expanderContainer { flex-grow: 1; text-align: right; justify-content: end; } /* eigentlich brauchen wir den Container gar nicht. Weg damit. */ #dynamicSidebar #controlContainer{ display:none; } } #dynamicSidebar #expanderIcon{ transition-property:transform; transition-duration:var(--animationSpeed); transition-timing-function:ease-in-out; transform:rotate(0deg); } #dynamicSidebar.show:not(.collapsing) #expanderIcon{ transform:rotate(180deg); } #dynamicSidebar #controlContainer { gap: 0; flex-direction:row-reverse; } #dynamicSidebar #scrollingContainer{ overflow-y:auto; flex-grow:1; overflow-x:clip; max-width:100%; } #dynamicSidebar #sidebar_content_top{ max-height:299vh; /* braucht eine Maximalhöhe für die Animation*/ } #dynamicSidebar a { text-decoration: none; } #dynamicSidebar.show:not(.collapsing) { width: var(--openSidebarWidth); --currentWidth: var(--openSidebarWidth); } #dynamicSidebar > #verticalContainer { overflow-y:auto; overflow-x:clip; max-width:100%; } #dynamicSidebar .link { display: flex; flex-direction: row; flex-wrap: nowrap; justify-items: center; gap: var(--paddingXSmall); text-decoration: none; align-items: center; width: 100%; line-height: 1.3; } #dynamicSidebar .collapsedWidth { width: var(--collapsedItemWidth); } #dynamicSidebar .dynamicWidth { width: var(--currentWidth); } #dynamicSidebar .dynamicWidth.animated { transition: var(--animationSpeed) ease-in-out width; } #dynamicSidebar *:is(.link, #logoutContainer) .icon { width: var(--collapsedItemWidth); min-width: var(--collapsedItemWidth); /* ohne gehts nicht richtig*/ padding: var(--paddingXSmall); color: var(--secondary); transition-duration: var(--transitionDurationLong); transition-property: color; order: 1; font-size: 1.1rem; text-align: center; justify-content: center; } #dynamicSidebar .link .icon i { transform: scale(0.8); transition-duration: var(--animationSpeedShort); transition-property: transform; } #dynamicSidebar *:is(.link, #logoutContainer):hover .icon { color: var(--accentThemeD4); transition-duration: 0s; } .darkTheme #dynamicSidebar *:is(.link, #logoutContainer):hover .icon { color: var(--accentThemeD1); } #dynamicSidebar .label { text-align: left; white-space: nowrap; justify-content: end; text-overflow:ellipsis; } #dynamicSidebar .link .label { flex-grow: 1; color: var(--dark); /*display: none;*/ opacity: 0; transition: var(--animationSpeedShort) opacity; transition-delay: var(--animationDelay); order: 1; pointer-events: none; } #dynamicSidebar .link.selected { background-color: var(--accentTheme); color: var(--accentThemeTxt); pointer-events: none; } #dynamicSidebar .link.clicked{ background-color:var(--accentThemeTransparent); pointer-events:none; } ric #dynamicSidebar.clicked .link:not(.clicked) { opacity:0.4; transition:var(--transitionDurationLong) opacity; }#dynamicSidebar.clicked .item:has(.link:not(.clicked)) .subentryContainer { height:0; } #dynamicSidebar .link.selected > *:is(.label, .icon){ background-color:var(--accentTheme); color: var(--accentThemeTxt)!important; } #dynamicSidebar.show .link .icon i { transform: scale(1); } #dynamicSidebar:not(.show) .link.hasSubentries .icon { position: relative; left: calc(-0.5 * var(--paddingXSmall)); /*transform: translateX(calc(-1 * var(--paddingXSmall)));*/ } #dynamicSidebar:not(.show) .link.hasSubentries .icon:after { /*font-family: var(--fontawesome); content: '\f055';*/ border-radius: 20em; padding: 0.1em; content: attr(data-subentrycount); font-weight: bold; color: var(--accentThemeL2txt); background-color: var(--accentThemeL2); /*outline: 1px solid currentColor;*/ box-shadow:-1px -1px 2px var(--dark); position: absolute; font-size: 0.6em; min-width: 3ch; min-height: 3ch; right: calc(-0.5 * var(--paddingXSmall)); bottom: 0em; display: flex; justify-content: center; align-items: center; /*transform: translateY(-50%);*/ } #dynamicSidebar.show .link .label { display: block; opacity: 1; /*pointer-events: all;*/ } #dynamicSidebar.show.opening .link .label { opacity: 0; } #dynamicSidebar.show.collapsing .link .label { transition-delay: 0s; opacity: 0; } #dynamicSidebar.show .showOnCollapse { opacity: 0; transition: var(--animationSpeedShort) opacity; transition-delay: var(--animationDelay); } #dynamicSidebar.show.collapsing .showOnCollapse { opacity: 1; } #dynamicSidebar.show.opening .showOnCollapse { opacity: 0; } #dynamicSidebar .collapseV.fadeOnCollapse { transition-property: opacity, transform, max-height; } #dynamicSidebar .collapseV { max-width: 100%; overflow-x: clip; } #dynamicSidebar:not(.show) .collapseV { max-height: 0px !important; transition: var(--animationSpeedShort); transition-property: transform, max-height; transition-duration: var(--animationSpeedShort); transform: scale(0.9, 0.2) translateY(-20%); overflow-y: clip; white-space: nowrap; } #dynamicSidebar.show:not(.opening, .collapsing) .collapseV { transform: scale(1) translateY(0); /*max-height: inherit; *//* wir wissen es nicht, die Animation ist zum Scheitern verurteilt eigentlich...*/ overflow-y: auto; } #dynamicSidebar.opening .collapseV { transform: scale(1) translateY(0); max-height: 100vh; } #dynamicSidebar.show.collapsing .collapseV { transform: scale(0.9, 0.2) translateY(-20%); white-space: nowrap; } #dynamicSidebar .fadeOnCollapse { opacity: 0; /*display:none;*/ transition: var(--animationSpeedShort) opacity; transition-delay: var(--animationDelay); } #dynamicSidebar.show.collapsing .fadeOnCollapse { opacity:0; transition-delay:0s; } #dynamicSidebar.show.opening .fadeOnCollapse { opacity:0; } #dynamicSidebar.show .fadeOnCollapse { /*display:block;*/ opacity: 1; } #dynamicSidebar > #verticalContainer { height: 100%; width: var(--openSidebarWidth); display: flex; flex-direction: column; background-color: var(--brighter); overflow-y: auto; overflow: clip; } #dynamicSidebar > #sidebarOverlay { position: fixed; width: 100%; height: 100%; inset: 0; background-color: var(--darkTransparent); opacity: 0; transition: var(--animationSpeed) opacity; pointer-events: none; z-index: -1; } #dynamicSidebar.show:not(.pinned, .collapsing) > #sidebarOverlay{ opacity:1; pointer-events:all; } #dynamicSidebar.pinned .pinButton { /*box-shadow: 0 0 0 2px var(--primary);*/ background-color: var(--complimentary); color: var(--complimentaryText); } #dynamicSidebar #userInfoContainer { } #dynamicSidebar #userInfoContainer #userLink { overflow: hidden; min-width: var(--collapsedItemWidth); /* damit der Hoverlink so breit bleibt dass das User-Symbol sichtbar ist!*/ } #dynamicSidebar #userInfoContainer #username { font-weight:bold; } #dynamicSidebar #userInfoContainer #userDisplayname { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } #dynamicSidebar #userInfoContainer:hover { } #dynamicSidebar #logoutContainer{ } #dynamicSidebar .link #userAvatar { /*transform: scale(1);*/ font-size: 1.7rem; } #dynamicSidebar #userAvatar > #placeholder > img.profilePic { position: absolute; inset: 0; z-index: 2; height: 100%; width: 100%; outline: 1px solid var(--darkTransparent); outline-offset: -1px; pointer-events: none; } #dynamicSidebar #userAvatar > #placeholder { position: relative; } #dynamicSidebar #userInfoContainer:hover #userAvatar { } #dynamicSidebar .item{ position:relative; max-width:100%; } #dynamicSidebar .item .subentryContainer { display: flex; font-size: 0.95em; flex-direction: column; gap: 0.2em; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: clip; --currentHeight: 0px; height: 0px; position: relative; transition: var(--animationSpeed) ease-out height; } #dynamicSidebar.collapsing .item .subentryContainer { height: 0px; } #dynamicSidebar.show .item .subentryContainer { height: var(--currentHeight); } #dynamicSidebar .item .subentryContainer > .subEntry { display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; margin-right: 0.1em; margin-left: 1em; max-width:calc(100% - 1em); text-overflow:ellipsis; overflow:clip; }#dynamicSidebar .item .subentryContainer > .subEntry:first-child { margin-top:0.2em; }#dynamicSidebar .item .subentryContainer > .subEntry:last-child { margin-bottom:0.7em; } #dynamicSidebar .item .subentryContainer > .subEntry.selected { pointer-events:none; background-color:var(--accentThemeTransparent); } #dynamicSidebar .item .subentryContainer > .subEntry > .link { flex-grow: 1; color: var(--accentThemeD4); padding: var(--paddingSmall); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display:block; /* sonst funktioniert ellipsis nicht, lustig*/ } .darkTheme #dynamicSidebar .item .subentryContainer > .subEntry > .link { color: var(--accentThemeD1); } .darkTheme #dynamicSidebar .item .subentryContainer > .subEntry.selected > .link { color: var(--accentThemeL1); } #dynamicSidebar .item .subentryContainer > .subEntry.selected > #closeBtn { pointer-events:all; } #dynamicSidebar .item .subentryContainer > .subEntry.dirty > .link::before { font-family: var(--fontawesome); font-weight: bold; content: '\f069'; margin-right: 0.2em; color: var(--complimentaryTheme); } #dynamicSidebar .subentryContainer > .collapsedSubEntry{ position:absolute; top:0; left:0; background-color:transparent; } #dynamicSidebar .subentryContainer > .collapsedSubEntry::before { /*font-family: var(--fontawesome);*/ /*content: '\f111';*/ content: attr(data-subentryCount); font-size: 0.6em; font-weight: bold; color: var(--complimentaryThemeD2); padding:1em; border-radius:20em; } #dynamicSidebar .subentryContainer.modal { position: absolute; box-shadow: var(--boxShadowLargeMedium); } /* Startnavigation */ .NavigationTile { --txtColor: var(--dark); flex: 1; transition: var(--transitionDurationLong) opacity; } @media screen and (max-width: 800px) { .NavigationTile { flex-shrink: 0; flex-basis: 45%; min-width: 95px; font-size:1.2rem; } .NavigationTile > #outerClickContainer { min-height: 5.5em !important; max-height: 7.5em !important; min-width: 100% !important; } } .NavigationTile > #outerClickContainer { --bgColor: var(--tertiary); min-width: 95px; height: 95px; line-height: 1.1; padding: var(--paddingY) var(--paddingY); line-break: auto; transition: transform var(--mds-hover-transition-out) ease-out !important; /*overflow:clip;*/ /* nicht clippen: box-shadow verschwindet sonst*/ border-radius: var(--round); } .NavigationTile > #outerClickContainer.directColor { background-color: var(--bgColor); color: var(--txtColor); } .darkTheme > #outerClickContainer, .darkTheme #outerClickContainer.directColor { background-color: var(--mediumDarkThemeBG); outline: 2px solid var(--bgColor); outline-offset: -2px; color: var(--brightText); } .NavigationTileContainer { justify-content: space-between; gap: 0.7em; } .NavigationTile > #outerClickContainer:hover, .NavigationTile.clicked > #outerClickContainer { outline: 2px solid var(--dark); /*transform: scale(1.05);*/ /* irgendwie bissl too much... */ transform: translate(-0.2em, -0.2em); } .NavigationTile > #outerClickContainer:hover:active{ transform: translate(-0.05em, -0.05em); transition-duration:calc(0.5 * var(--transitionDurationLong)); } .NavigationTileContainer.clicked .NavigationTile:not(.clicked) { opacity: 0.6; } .darkTheme .NavigationTile > #outerClickContainer:hover { outline: 2px solid var(--bgColor); } .NavigationTile #innerContainer { flex-direction: column; min-height: 100%; max-height: 110%; /*overflow:clip;*/ /* nicht clippen, weil sonst das transform beim hover abgeschnitten ist*/ } .NavigationTile #innerContainer #labelNode { overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .NavigationTile #outerClickContainer { position: relative; } .NavigationTile #outerClickContainer::after { /* erweitern um einen drop-shadow*/ box-shadow: var(--boxShadowMediumDark); transition: opacity var(--mds-hover-transition-out); opacity: 0; content: ''; top: 0; left: 0; right: 0; bottom: 0; position: absolute; } .darkTheme .NavigationTile #outerClickContainer::after{ box-shadow:0px 2px 5px 0px var(--bgColor); } .NavigationTile #outerClickContainer:hover::after { /* erweitern um einen drop-shadow*/ opacity: 1; } .NavigationTile i { transition: transform var(--mds-hover-transition-out) ease-out; } .NavigationTile > #outerClickContainer:hover i { transform: scale(1.2); } .NavigationTile i.profilePic { position: relative; } .NavigationTile img { position: absolute; top: -10%; left: -10%; right: 0; bottom: 0; width: 120%; height: 120%; pointer-events: none; outline: 2px solid; outline-offset: -1px; } /* ================= */ /* GENERIC DIALOG */ .GenericDialog .w3-modal { padding-top: calc(2 * var(--paddingY)); } .GenericDialog .genericdialog { max-height: calc(100% - 1em); overflow: hidden; display: flex; flex-flow: column; border-radius: var(--round); } .GenericDialog .genericdialog.vgrowing { max-height: unset; overflow: unset; } .GenericDialog .w3-modal-content { /**/ } .GenericDialog .genericdialog #content { flex: 1; overflow: auto; /*box-shadow:*/ /*inset 0px 12px 8px -12px var(--mediumTransparent),*/ /*inset 0px -12px 8px -12px var(--mediumTransparent);*/ } .GenericDialog .genericdialog .w3-row { } .GenericDialog .overflow-visible { overflow: visible !important; } .GenericDialog div[data-dojo-attach-point=textNode], .GenericDialog div[data-dojo-attach-point=subTitleNode], .GenericDialog div[data-dojo-attach-point=bottomSubTitleNode] { user-select: text; } .GenericDialog button[data-dojo-attach-point=topCloseBtn] { padding: var(--padding); color: var(--currentTextcolor); background-color: var(--currentColor); } .GenericDialog .genericdialog #bottomActionContainer { width: 100%; background-color: var(--secondaryThemeL4) } .darkTheme .GenericDialog .genericdialog #bottomActionContainer { background-color: var(--secondaryThemeD5) } .GenericDialog .genericdialog #bottomActionContainer *:is(#left, #right) { row-gap: var(--paddingY); column-gap: var(--paddingX); } .GenericDialog .genericdialog #bottomActionContainer #left { /* der unwichtigere der beiden Container*/ flex: 1; } .GenericDialog .genericdialog #bottomActionContainer #right { flex-direction: row-reverse; } /*für icons margin left auf den Button: */ .GenericDialog .genericdialog #bottomActionContainer *:is(#left, #right) > button > *:nth-child(n+2) { margin-left: 0.4em; } .GenericDialog .genericdialog #bottomActionContainer *:is(#left, #right) > button { min-width: 100px; /*margin-left: var(--paddingX);*/ } /* Animation */ .GenericDialog > .w3-modal { transition-property: opacity, backdrop-filter; transition-duration: var(--transitionDurationLong); opacity: 1; background-color: var(--darkTransparent); } .GenericDialog > .w3-modal.w3-show.outfade { backdrop-filter: blur(0px); opacity: 0; } .GenericDialog > .w3-modal .w3-modal-content.genericdialog { --sizeFactor: 1; opacity: 1; transform: scale(var(--sizeFactor), var(--sizeFactor)); transition-duration: var(--transitionDurationLong); transition-property: transform, opacity; max-height: calc(100vh - calc(4 * var(--paddingY))); } .darkTheme .GenericDialog > .w3-modal .w3-modal-content.genericdialog { box-shadow: 0px 1px 4px 2px var(--brightTransparent); outline: 2px solid var(--brightTransparent); } .GenericDialog > .w3-modal.w3-show.outfade .w3-modal-content.genericdialog { --sizeFactor: 0.95; opacity: 0; } .GenericDialog > .w3-modal .w3-modal-content.genericdialog:has(.floatingContainer) { transform: unset; } /* das ist die Action-Bar unten im Dlg, die hat keinen eindeutigen Bezeichner...*/ .darkTheme .GenericDialog .genericdialog > .w3-container { background-color: var(--mediumDarkThemeBG); } /* FILTERPANEL */ .filterPanel { display: flex; flex-flow: column; gap: 1em; } .darkTheme .filterPanel .w3-input { } .filterPanel #mainSplitContainer { /*display: flex; flex-direction: column; gap: 1em; align-items:start;*/ } .filterPanel #hiddenSectionsControlContainer { display: flex; flex-direction: column; gap: 0.5em; border: 1px solid var(--tertiary); border-radius: var(--round); padding: var(--paddingSmall); } .filterPanel #hiddenSectionsControlContainer #hiddenSectionsSelectorContainer { display: flex; flex-wrap: wrap; gap: 0.5em; max-width: 25ch; overflow: hidden; } .filterPanel #hiddenSectionsControlContainer #hiddenSectionsSelectorContainer > button { max-width: 22ch; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .filterPanel .filterPanelSection #sectionControlContainer #btnMovePrevious, .filterPanel .filterPanelSection #sectionControlContainer #btnMoveNext { display: none; } .filterPanel .filterPanelSection.moveable:not(:first-child) #sectionControlContainer #btnMovePrevious, .filterPanel .filterPanelSection.moveable:not(:last-child) #sectionControlContainer #btnMoveNext { display: unset; } .filterPanel #sectionsContainer, .filterPanel #collapsedSectionsContainer { display: flex; flex-wrap: wrap; gap: 0.8em; /*align-items: start;*/ /*Mit start werden die Container oben angeordnet. Ohne wachsen sie alle auf gleiche Höhe */ } /* wichtig: die Gap-Value hier platzieren, damit das 12er-Raster das abzieht*/ .filterPanelSection.w3-col { --subtractValue: 0.8em; } /* filtersection, wenn sie in einem Filterpanel enthalten ist - ggf. könnte es auch sections ohne Panel geben, aber unwahrscheinlich */ .filterPanel .filterPanelSection { /*border: 1px solid var(--medium); border-radius: var(--round); padding: var(--padding); background-color:var(--brightTransparent);*/ margin-bottom: 0; min-width: 40ch; flex-grow: 1; } .filterPanel .filterPanelSection.w3-col { flex-grow: unset; } .filterPanelSection h4 { margin-top: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .filterPanelSection.collapsed h4 { margin-bottom: 0; } .filterPanelSection { overflow: visible !important; } .filterPanelSection #filterOptionsContainer { gap: 0.5em; display: flex; flex-wrap: wrap; /*overflow: hidden;*/ /* wegen Searchselects nicht hidden!!*/ } .filterPanelSection #filterOptionsContainer .filterOptionRoot { flex-basis: 55%; flex-grow: 1; max-width: 60ch; } .filterOptionRoot input { border-top-right-radius: var(--round); border-bottom-right-radius: var(--round); } .filterOptionRoot.selected { } .filterOptionRoot.deselected { } .darkTheme .filterOptionRoot.deselected input { color: var(--dark); } .filterPanel .filterOptionRoot .optionContainer { /*border-radius:inherit;*/ /*background-color:var(--mediumTransparent);*/ } .filterPanel .filterOptionRoot .optionContainer .selectbutton { border-radius: inherit; padding: var(--padding); } .filterPanel .filterOptionRoot.mandatory .optionContainer > span{ padding-left:var(--paddingX); }.filterPanel .filterOptionRoot:not(.mandatory) .optionContainer:not(.toggle) > span{ padding-left:0; /* bei nicht verpflichtenden wird der Selectbutton angezeigt, kein Padding-L nötig*/ } .filterOptionRoot .multiSelect_root div#outerContainer, .filterOptionRoot .searchSelect_root div#outerContainer { border: 0; } .filterOptionRoot .multiSelect_root div#dropdownContainer, .filterOptionRoot .searchSelect_root div#dropdownContainer { right: -1px !important; width: unset !important; } .filterOptionRoot .multiSelect_root div#buttonsContainer, .filterOptionRoot .multiSelect_root div#innerContainer, .filterOptionRoot .optionContainer > select[data-dojo-attach-point=select_Input], .filterOptionRoot .searchSelect_root div#innerContainer, .filterOptionRoot .searchSelect_root div[data-dojo-attach-point=closeDropdownBtn] { border-top: 0; border-radius: 0; border-top-right-radius: var(--round); } .filterOptionRoot .multiSelect_root div#innerContainer input, .filterOptionRoot .searchSelect_root div#innerContainer input{ border-radius:0; } .filterOptionRoot .multiSelect_root div[data-dojo-attach-point=openDropdownBtn], .filterOptionRoot .multiSelect_root div#contentLine, .filterOptionRoot .multiSelect_root div#contentLine > div, .filterOptionRoot .optionContainer > select[data-dojo-attach-point=select_Input], .filterOptionRoot .searchSelect_root div[data-dojo-attach-point=openDropdownBtn], .filterOptionRoot .searchSelect_root div#contentLine, .filterOptionRoot .searchSelect_root div#contentLine > div { border-top-right-radius: var(--round); border-bottom-right-radius: var(--round); } /* FILETRANSFER / FILEUPLOAD */ .fileUploadRow { gap: 1em; } .fileUploadRow .singleElement { flex-basis: 90%; } .fileUploadRow .halfElement { flex-basis: 40ch; flex-grow: 9999; } .fileUploadRow #fileNameContainer { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; align-self: end; } .fileUploadRow #removeButtonContainer { text-align: center; align-self: end; padding: var(--paddingYSmall) 0; flex-grow: 1; } .Control_FileTransfer_Uploader .customFileInput { font-weight: bold; } .Control_FileTransfer_Uploader .customFileInput.true { } .Control_FileTransfer_Uploader .file1 { overflow: unset; top: 0; left: 0; font-size: 1rem; /*16px;*/ } .Control_FileTransfer_Uploader .file1.hidden { position: absolute; overflow: hidden; top: 0; left: 0; opacity: 0; font-size: 100px; cursor: pointer; /*pointer-events:none;*/ } .Control_FileTransfer_Uploader .progressBar { width: 300px; } .Control_FileTransfer_Uploader .progressStatus { min-width: 4ch; max-width: 40px; padding-right: var(--w3PaddingSmallX); /*8px;*/ position: relative; } .Control_FileTransfer_Uploader .progressStatus::before { content: ""; /*check*/ font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-weight: bold; /*position: absolute;*/ top: 0px; right: 0px; left: 0px; pointer-events: none; user-select: none; } .Control_FileTransfer_Uploader .progressStatus.uploadERROR::before { content: "\f00d"; /*times*/ } .Control_FileTransfer_Uploader .progressStatus.uploadOK::before { content: "\f00c"; /*check*/ } .Control_FileTransfer_Uploader #inputContainer { position: static; } .Control_FileTransfer_Uploader #inputContainer #inputButton { position: absolute; /*left:-100%; transform:translateX(100%);*/ inset: 0; width: 100%; pointer-events: none; } .Control_FileTransfer_Uploader #inputContainer:hover { cursor: pointer; } .Control_FileTransfer_Uploader #inputContainer:hover #inputButton { background-color: var(--tertiary); } .Control_FileTransfer_Uploader #inputContainer .file1 { opacity: 0.1; padding: var(--paddingSmall); isolation: isolate; } /* LOGINFORM */ .loginForm .userInfoContainer { margin-top: var(--paddingY); margin-bottom: var(--paddingY); } #profilePicDlg { display: flex; justify-content: center; flex-wrap: wrap; } #profilePicDlg .profilePicContainer { /*padding:var(--paddingSmall);*/ /*background-color:var(--tertiary);*/ display: flex; flex-flow: column; justify-content: center; } #profilePicDlg .deleteIcon { margin-right: 0.4em; } #profilePicDlg img.profilePic { border: 2px solid var(--tertiary); max-height: 20rem; } #profilePicDlg .profilePicContainer { position: relative; cursor: pointer; } #profilePicDlg .profilePicContainer::after { font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ content: '\f07c'; /* Folder-Open */ color: white; font-weight: bold; font-size: 3em; display: flex; flex-flow: column; justify-content: center; text-align: center; position: absolute; height: 100%; width: 100%; background-color: var(--mediumTransparent); pointer-events: none; opacity: 0; transition: opacity var(--mds-hover-transition-out) ease-out; } #profilePicDlg .profilePicContainer:hover::after { opacity: 1; } #profilePicDlg .profilePicContainer img.changed { border-color: var(--primary); } #profilePicDlg .profilePicContainer img { min-width: 12rem; } #profilePicDlg .profilePicContainer.empty img { min-height: 15rem; min-width: 12rem; visibility: hidden; } #profilePicDlg .profilePicContainer.empty::before { content: '\f2bd'; /*user-circle*/ color: var(--mediumTransparent); font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-size: 3em; pointer-events: none; display: flex; flex-flow: column; justify-content: center; text-align: center; border: 2px solid var(--mediumTransparent); position: absolute; height: 100%; width: 100%; } #profilePicDlg .profilePicContainer.empty { /*background-color:red;*/ } #profilePicDlg .hidden { visibility: hidden; pointer-events: none; position: absolute; opacity: 0; bottom: -100%; } .loginForm .profilePic::after { content: '\f303'; /*pencil-alt*/ color: white; /*var(--brightTransparent);*/ background-color: var(--mediumTransparent); font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ pointer-events: none; opacity: 0; z-index: 10; position: absolute; top: -25%; width: 150%; left: -25%; height: 150%; border-radius: 50%; text-align: center; font-size: 0.75em; line-height: 2; /* damit Icon halbwegs mittig, is aber nicht die schönste Lösung... */ transition: opacity var(--mds-hover-transition-out) ease-out; } .loginForm .profilePic { margin-right: 0.4em; position: relative; transition: transform var(--mds-hover-transition-out) ease-out; cursor: pointer; } .loginForm .profilePic img.profilePic { position: absolute; z-index: 5; } .loginForm .profilePic:hover { transform: scale(1.1); } .loginForm .profilePic:hover::after { opacity: 1; } /* SIMPLE FILE UPLOAD SIMPLEFILEUPLOAD */ .simpleFileUploadRoot { position: relative; } /* HINTBOX */ .hintbox { position: relative; display: inline-block; width: 100%; --inputPaddingRight: var(--paddingX); } .hintbox #dropdownContainer { position: absolute; border: 1px solid var(--medium); background-color: var(--veryBright); border-top: none; z-index: 99; top: 100%; left: 0; right: 0; max-height: 300px; overflow: auto; border-bottom-left-radius: var(--round); border-bottom-right-radius: var(--round); box-shadow: var(--boxShadowSmallLight); } .hintbox .hintbox-items{ max-height:200px; overflow-y:auto; } .hintbox-items.disabled div { opacity: 0.3; pointer-events: none; user-select: none; } .hintbox-items > div { padding: 10px; cursor: pointer; background-color: var(--veryBright); border-bottom: 1px solid var(--medium); color: var(--veryDark); transition-duration: var(--transitionDurationLong); transition-property: background-color; }.hintbox-items > div:last-child { border-bottom:0px; } .hintbox #bottomActionContainer{ } .hintbox-items > div:hover { background-color: var(--mediumTransparent); transition-duration: var(--transitionDurationShort); } .hintbox-active { background-color: var(--primary) !important; color: var(--primaryText) !important; } .hintbox.plaintextValue { /*background-color: purple;*/ /*outline: 2px solid purple;*/ } .hintbox.plaintextValue input { color: var(--accentThemeD2); } .hintbox.plaintextValue .inputRow::before { content: '\f246'; /* Cursor für rote Eingaben */ font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ color: var(--secondary); font-weight: bold; vertical-align: middle; padding: var(--paddingSmall); } .hintbox .searchIcon { position: absolute; margin: 10px 5px; right: 2px } .hintbox input { padding-right: var(--inputPaddingRight); } .hintbox .inputRow { position: relative; display: flex; flex-flow: row; align-items: center; } .hintbox #innerInputContainer { position: absolute; right: 1px; top: 1px; height: calc(100% - 2 * 1px); padding-left: var(--paddingXSmall); padding-right: var(--paddingXSmall); display: flex; flex-flow: row; align-items: center; gap: 0.4em; } /* SELECTBOX */ .selectbox { position: relative; display: inline-block; width: 100%; } .selectbox select[disabled], .selectbox select.disabled { opacity: 0.6; } .selectbox-items { position: absolute; border: 1px solid var(--mds-light-gray); background-color: #fff; border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0; } .selectbox-items div, option.selectbox-items { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid var(--mds-light-gray); color: black; } .selectbox-items div:hover, option.selectbox-items:hover { background-color: var(--mds-gray-transparent); } .selectbox-active { background-color: var(--primary) !important; color: var(--primaryText) !important; } /*merge - fehler - weiß noch nicht was das ist*/ /*background-color: rgba(236,103,7,0.15) !important; color: #ffffff; }*/ /* ----------------- moreCore/UI/DateTimeInput ------------------------------START */ .DateTimeInput_container { display: flex; justify-content: space-around; align-items: center; } .DateTimeInput_container > #combineContainer { background-color: var(--brighter); overflow: hidden; } .DateTimeInput_DateInputContainer { /*margin-right: 1em;*/ flex-grow: 9999; /* das Date darf viel mehr wachsen als das Time. Das Time bricht daher früher um in seine eigene Zeile */ flex-basis: 25ch; } .DateTimeInput_DateInput { } .DateTimeInput_container > #combineContainer.border *:is(.DateTimeInput_TimeInput, .DateTimeInput_DateInput) input { background-color: transparent; } .DateTimeInput_TimeInputContainer { flex-grow: 1; /*margin-left: -1px;*/ } .DateTimeInput_TimeInput { } .DateTimeInput_container > #combineContainer.border *:is(.DateTimeInput_TimeInput, .DateTimeInput_DateInput) input.w3-input.border { border: 0; /* kein eigener Rahmen mehr, sondern... */ } .DateTimeInput_container > #combineContainer.border .DateTimeInput_DateInputContainer { outline: 1px solid var(--medium); /* einen Rahmen hinfaken, der über dem tatsächlichen Rahmen liegt */ } /* ----------------- moreCore/UI/DateTimeInput ------------------------------END */ /* ----------------- moreCore/UI/CheckBox ------------------------------START */ .moreCoreCheckBox { } .moreCoreCheckBox .checkboxNode { padding-right: var(--paddingSmall); width: 1.1em; /*display: flex;*/ } .moreCoreCheckBox .label { padding-left: var(--paddingX); } .moreCoreCheckBox_mainContainer { display: flex; align-items: center; user-select: none; margin: 0.2em auto; } .moreCoreCheckBox .inputContainer { position: relative; } /* native styles ------------------- start*/ .moreCoreCheckBox label { /*padding-right: 2.4em;*/ /*padding-left: 0.75em;*/ align-self: center; } /* native styles ------------------- end*/ /* default custom moreCore Styles ----start*/ .moreCoreCheckBox .inputContainer input { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; display: block; /*float: right;*/ /*margin-right: -2em;*/ /* um das nachfolgende Label samt Pseudo-Icon darüber zu rücken*/ /*margin-top: -0.4em;*/ visibility: hidden; /*width: 1.55em;*/ /*height: 1.55em;*/ /*z-index: 2;*/ /*height: 0.2em;*/ /*width: 0.2em;*/ position: relative; /*right: 0;*/ } .moreCoreCheckBox .inputContainer.left label.right, .moreCoreCheckBox .inputContainer.right label.left { display: none; } .moreCoreCheckBox .inputContainer.left input { margin-left: 0.4em; } .moreCoreCheckBox label.custom { text-decoration: none; display: inline-block; font-size: 1em; position: relative; /*margin-bottom: 3px;*/ } .moreCoreCheckBox { --checked: '\f058'; --checkedColor: var(--accentThemeD2); --hoverColor: var(--accentThemeD1); --checkedFontWeight: bold; --unchecked: '\f111'; --uncheckedColor: var(--dark); --uncheckedFontWeight: normal; --tristate: '\f042'; --tristateColor: var(--accentThemeD2); } /* Hovereffekt */ .moreCoreCheckBox .inputContainer input::before, .moreCoreCheckBox .inputContainer label { transition-duration: var(--transitionDurationLong); transition-property: color; } .moreCoreCheckBox:hover .inputContainer:not(.disabled) input::before, .moreCoreCheckBox:hover .inputContainer:not(.disabled) label { transition-duration: var(--transitionDurationShort); color: var(--hoverColor); } .moreCoreCheckBox, .moreCoreCheckBox .inputContainer:not(.disabled) *:is(label, input) { cursor: pointer; } .moreCoreCheckBox:has(.inputContainer.disabled), .moreCoreCheckBox .inputContainer.disabled *:is(label, input) { cursor: not-allowed; } .moreCoreCheckBox .inputContainer.disabled, .moreCoreCheckBox .inputContainer.disabled *:is(label, input) { pointer-events: none; } .moreCoreCheckBox .inputContainer > input { isolation: isolate; } /* Pseudoelement mit dem eigentlichen Icon */ .moreCoreCheckBox .inputContainer input::before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ margin-right: 0.4em; content: ''; display: inline-block; /*width: 1.5em;*/ font-size: 1.5em; text-align: center; z-index: 1; visibility: visible; } .moreCoreCheckBox .inputContainer.checked input::before { content: var(--checked); color: var(--checkedColor); font-weight: var(--checkedFontWeight); } .moreCoreCheckBox .inputContainer:not(.checked) input::before { content: var(--unchecked); color: var(--uncheckedColor); font-weight: var(--uncheckedFontWeight); } .moreCoreCheckBox .inputContainer.tristate { } .moreCoreCheckBox .inputContainer.tristate input::before { content: var(--tristate); font-weight: bold; color: var(--tristateColor); transform: rotate(40deg); } /*.moreCoreCheckBox .inputContainer.tristate input::after { position: absolute; z-index: 2; top: 0; content: var(--tristate);*/ /*asterisk*/ /*color: var(--brighter); font-weight: bold; transform: translateX(-100%) scale(0.75); position: absolute; }*/ .moreCoreCheckBox .inputContainer.toggle { --checked: '\f205'; --unchecked: '\f204'; --uncheckedFontWeight: bold; } .moreCoreCheckBox .inputContainer.disabled *:is(label, input) { /*color: var(--medium);*/ opacity: 0.6; pointer-events: none; --checkedColor: var(--secondary); --uncheckedColor: var(--secondary); --tristateColor: var(--secondary); /*pointer-events: none;*/ /* Hinweis: damit geht der custom cursor auch nicht mehr */ } /* default custom moreCore Styles ----end*/ /* ----------------- moreCore/UI/CheckBox ------------------------------END */ /* ----------------- moreCore/UI/RadioGroup ------------------------------START */ /* ----------------- moreCore/UI/RadioGroup ------------------------------START */ .moreCoreRadioGroup_root { width: 100%; display: flex; flex-direction: column; } .moreCoreRadioGroup_root #scrollContainer { display: flex; flex-direction: column; flex-shrink: 1; min-height: 2em; } .moreCoreRadioGroup_root #itemContainer { /* border-color:var(--borderColor); background-color:var(--brightInput);*/ overflow-y: auto; } .moreCoreRadioGroup_root #itemContainer > .item { border-radius: var(--round); padding: 0 var(--paddingSmallX); font-size: 0.95em; transition-property: background-color; transition-duration: var(--transitionDurationLong); background-color: transparent; } .moreCoreRadioGroup_root #itemContainer > .item:has(.moreCoreCheckBox.checked) { background-color: var(--mediumTransparent); transition-duration: var(--transitionDurationShort); } .moreCoreRadioGroup_root.invalid #itemContainer { box-shadow: 0px 0px 3px -1px var(--warning), inset 0px 0px 2px -1px var(--warning); outline: 1px solid var(--warning); outline-offset: -1px; } .moreCoreRadioGroup_root #itemContainer.horizontal { display: flex; flex-direction: row; max-width: 100%; flex-wrap: wrap; } .moreCoreRadioGroup_root #itemContainer.horizontal > .item { flex-basis: 25%; max-width: 45ch; white-space: nowrap; overflow: clip; } .moreCoreRadiogroup_rootNode { /*domNode*/ --moreCoreRadiogroup_customContent_selected: "\f111"; /*circle*/ --moreCoreRadiogroup_customColor_selected: black; --moreCoreRadiogroup_borderColor_default: black; --moreCoreRadiogroup_customColor_disabled: gray; } .moreCoreRadiogroup_mainLabel { /*label of the group*/ } .moreCoreRadiogroup_inputsContainer { /*container of all inputs*/ } .moreCoreRadiogroup_input { /*always set*/ } .moreCoreRadiogroup_singleInputContainer { } .moreCoreRadiogroup_inputLabel { /*always set*/ margin-left: 0.5em; margin-right: 1.3em; } .moreCoreRadiogroup_customInput { /*set if isCustomStyleEnabled*/ -moz-appearance: initial; visibility: hidden; position: relative; cursor: pointer; } .moreCoreRadiogroup_customInputLabel { /*set if isCustomStyleEnabled*/ cursor: pointer } .moreCoreRadiogroup_customInput:before { visibility: visible; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-style: normal; font-weight: normal; font-size: 24px; color: var(--moreCoreRadiogroup_borderColor_default); text-transform: none !important; content: '\f111'; height: 24px; width: 24px; line-height: 24px; position: absolute; text-align: center; left: 0; top: 0; } .moreCoreRadiogroup_customSelected:before { font-weight: bold; content: var(--moreCoreRadiogroup_customContent_selected); color: var(--moreCoreRadiogroup_customColor_selected); } .moreCoreRadiogroup_customInput_disabled:before { color: var(--moreCoreRadiogroup_customColor_disabled); cursor: not-allowed; } .moreCoreRadiogroup_customInputLabel_disabled { color: var(--moreCoreRadiogroup_customColor_disabled); } /* ----------------- moreCore/UI/RadioGroup ------------------------------END */ /* TICKETFINDER */ .ticketFinderRoot .GenericDialog .hintbox { } /*------------------ moreCore staticTable -------------------------------- START*/ .moreCore_staticTable_th, .staticTable th.sticky { position: sticky; z-index: 2; } .staticTable { user-select: text; --rowColor: transparent; --colBG: var(--transparent); --colTXT: unset; --borderOffsetX: 0px; --borderOffsetY: 0px; --borderGrowth: 0px; --actionColumnWidth: 10ch; /* hm. das sollte im JS dynamisch ermittelt werden... */ font-size: 0.8em; /*line-height: 1.2;*/ table-layout: auto; } .staticTable.fixedLayout { table-layout: fixed; } .responsiveTable.vTop td { vertical-align: top; } .responsiveTable.vBottom td { vertical-align: bottom; } .responsiveTable.vMiddle td { vertical-align: middle; } .staticTable tr { border-bottom: 1px solid var(--tertiary); --colBG: var(--rowColor); } .staticTable.searchActive tr:not(.staticTable_thead) { display: none; } .staticTable.searchActive:has(tr.show) tbody tr { display: none; } .staticTable.searchActive:has(tr.show) tr.show { opacity: 1; display: table-row; } .staticTable { --indexColWidth: 5ch; } .staticTable th.indexColumn { padding-left: var(--paddingXSmall) !important; width: var(--indexColWidth); } .staticTable td.indexColumn { outline: 2px; text-align: left; padding-left: var(--paddingXSmall) !important; background-color: var(--secondary); color: var(--secondaryText); --cellShadow: 2px 0px 3px -1px var(--darkTransparent) } .staticTable td.noEntries { text-align: center; font-style: italic; color: var(--secondaryThemeL1); user-select: none; } .staticTable tr.staticTable_thead { line-height: 1.5em; } .staticTable tr.staticTable_thead th { overflow: hidden; text-overflow: ellipsis; vertical-align:bottom; } .staticTable tr.staticTable_thead:last-child { border-bottom: 3px solid var(--complimentaryThemeD1); box-shadow: 0px 2px 4px var(--darkTransparent); z-index: 1; } .staticTable tr td { background-color: var(--colBG, var(--rowColor)); color: var(--colTXT); --cellShadow: 0px 0px transparent; box-shadow: var(--cellShadow); } .staticTable tr.bordered.bottom-left, .staticTable tr.bordered.bottom-right, .staticTable tr.bordered.bottom { --borderOffsetY: -2px; } .staticTable tr.bordered.top, .staticTable tr.bordered.top-right, .staticTable tr.bordered.top-left { --borderOffsetY: 2px; } .staticTable tr.bordered.top-left td:first-child, .staticTable tr.bordered.bottom-left td:first-child, .staticTable tr.bordered.left td:first-child { --borderOffsetX: 4px; } .staticTable tr.bordered.inset { --borderGrowth: 4px; } .staticTable tr.bordered.right td:last-child, .staticTable tr.bordered.bottom-right td:last-child, .staticTable tr.bordered.top-right td:last-child { --borderOffsetX: -2px; } .staticTable tr.bordered { --rowColor: var(--mediumTransparent); --colBG: transparent; } /* bei bordered wird die Hintergrundfarbe stattdessen als "Rahmen" dargestellt */ .staticTable tr.bordered td { /*background-color: unset;*/ /*color: unset;*/ --cellShadow: inset var(--borderOffsetX) var(--borderOffsetY) 0 var(--borderGrowth) var(--rowColor); vertical-align: unset; /* w3 stellt sonst alles auf top */ } .staticTable.fixedLayout .overflowContainer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .staticTable .overflowContainer.table_dropdown { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .staticTable .overflowContainer.clickable:hover, .staticTable .overflowContainer.clickable.table_dropdown.clicked { cursor: pointer; outline: 2px solid var(--primary); outline-offset: 2px; /*font-weight: bold;*/ border-radius: var(--round); } .staticTable th.sticky { } .staticTable td.clickable { cursor: pointer; /*position:relative;*/ } .staticTable td.clickable::before { } .staticTable td.clickable:hover { /*box-shadow: inset 0px 0px 0px 200px var(--mediumTransparent);*/ background-color: var(--mediumTransparent); outline: 2px solid var(--medium); outline-offset: -4px; /*border-radius: var(--round);*/ /*position:absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;*/ } .staticTable tr.clickable { cursor: pointer; } .staticTable tr.clickable:hover td { /* den womöglich bestehenden box-shadow erweitern um einen zweiten, deshalb per Variable! */ box-shadow: var(--cellShadow), inset 0px 0px 0px 200px var(--mediumTransparent); } .staticTable td div.table_dropdown_content { position: absolute; background-color: var(--bright); border: 1px solid var(--dark); min-width: 10ch; max-width: 70ch; overflow: auto; box-shadow: 0px 8px 16px 0px var(--darkTransparent); z-index: 1; padding: 5px; margin-bottom: 10px; border-radius: var(--round); line-height: 1.1; } .staticTable .table_groupHeader { background-color: var(--mediumTransparent); font-weight: bold; } .staticTable .highlight > td { /* hm. nicht ganz das richtige*/ /*outline-width: 3px; outline-style: solid; outline-color: transparent; outline-offset: -3px; animation-name: staticTableRowhighlight; animation-duration: 0.6s; animation-iteration-count: 12; animation-timing-function: ease-in-out; animation-direction: alternate; margin-top: 2px;*/ } @keyframes staticTableRowhighlight { from { outline-color: transparent; background-color: transparent; } to { outline-color: var(--primary); background-color: var(--brightTransparent); } } .staticTable th.actionsColumn { width: var(--actionColumnWidth); /*opacity: 0;*/ } .staticTable td.actionsColumn { color: initial; /* Farbe zurücksetzen, könnte von einem Formatter sonst überschrieben worden sein */ /*position:relative; transition-duration: var(--transitionDurationLong); transition-property: background-color, transform; transition-timing-function:ease-out;*/ /*background-color: var(--complimentaryThemeTransparent);*/ } /*.staticTable td.actionsColumn:hover{ transform:scale(1.5); position:absolute; background-color:var(--bright); }*/ .staticTable td.actionsColumn > .actionsContainer { gap: 0.5em; justify-content: center; /*color: var(--complimentaryThemeD5);*/ } .staticTable td.actionsColumn > .actionsContainer > i { } /* FINDERBASE, FINDERVIEWBASE */ .finderContainer { } .finderContainer #topContainer { margin-bottom: 1em; } .finderContainer #topContainer #filterContainer { margin-bottom: 1em; } .finderContainer #topContainer #mainButtonsContainer { display: flex; flex-flow: row; gap: 1em; margin-bottom: 1em; } .finderContainer #submitButton { } .finderContainer #submitButton::before { font-family: var(--fontawesome); font-weight: bold; content: '\f002'; margin-right: 0.4em; } .finderContainer #newButton { } .finderContainer #newButton::before { font-family: var(--fontawesome); font-weight: bold; content: '\f055'; margin-right: 0.4em; } .finderContainer #reloadButton { } .finderContainer #reloadButton::before { } .finderContainer #bottomContainer { } .finderContainer #bottomContainer::before { } .finderContainer #bottomContainer #resultSection { /* komplette Ergebnissection (exklusive Error-Container) */ } .finderContainer #pagingContainerBottom, .finderContainer #pagingContainerTop { padding: var(--paddingSmall); } .finderContainer #pagingContainerTop #pagingButtons { min-width: 20ch; } .finderContainer #pagingContainerTop #pagingButtons { padding-left: var(--paddingXSmall); padding-right: var(--paddingXSmall); } .finderContainer #pagingContainerTop { margin-bottom: 1em; } .finderContainer #pagingContainerBottom { margin-top: 1em; } .finderContainer #bottomContainer #errorContainer .finderPaging { /*margin: var(--w3PaddingY);*/ padding: var(--w3PaddingY); } .finderPaging div[data-dojo-attach-point=pagingContainer] { flex: 1; } .finderPaging div[data-dojo-attach-point=reloadContainer] { } .finderPaging div[data-dojo-attach-point=reloadContainer] button[data-dojo-attach-point=btnReloadPage] { background-color: var(--secondary); color: var(--secondaryText); margin: var(--w3PaddingY); } button.pagingButton { border: 1px solid var(--secondary); background-color: var(--tertiary); color: var(--tertiaryText); margin: 2px; border-radius: var(--round); } button.pagingButton.selected { background-color: var(--primary); border-color: var(--primary); color: var(--primaryText); pointer-events: none; font-weight: bold; } .finderPaging[data-dojo-attach-point=bottomPagingSection] { justify-content: center; display: flex; flex-flow: row; align-content: center; } @media screen and (max-width: 900px) { .responsiveTable table.staticTable { table-layout: auto; } .responsiveTable table.staticTable thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: 0px; overflow: hidden; padding: 0; position: absolute; width: 1px; text-overflow: ellipsis; } .responsiveTable table.staticTable tr { border-bottom: 1px solid var(--tertiary); border-top: 2px solid var(--tertiary); display: block; margin-bottom: 6px; font-size: 1rem; } .responsiveTable table.staticTable td { border-bottom: 1px solid var(--tertiary); display: block; text-align: left; /*right;*/ width: 100% !important; /*min-height: 2.634em;*/ /*???*/ } /* */ .responsiveTable table.staticTable td:not(.actionsColumn)::before { content: attr(data-label); float: none; /*left;*/ color: var(--secondary); /*font-size-adjust: 0.4; geht nur im Firefox*/ font-size: 0.75em; max-width: 45ch; display: block;/* inline-block;*/ margin-bottom: 0.2em; word-wrap: normal; white-space: break-spaces; } } /*------------------ moreCore staticTable -------------------------------- END*/ /* FILEDASHBOARD */ /*.dashboardTile .filesSection h4::after { content:var(--row-count); margin-right:0.4em; } */ .fileDashboardRoot .tilesContainer { } .fileDashboardRoot .tilesContainer button.btnCloseError{ } .darkTheme .fileDashboardRoot .tilesContainer button.btnCloseError{ background-color:var(--complimentaryTheme); } .fileDashboardRoot .tilesContainer .dashboardTileOuter { display: inline-block; /*margin-left:var(--paddingX);*/ /*border: var(--paddingY) solid var(--transparent);*/ /* ein bisschen ein gap faken...*/ padding-right: var(--paddingXSmall); padding-bottom: var(--paddingXSmall); } .fileDashboardRoot .tilesContainer .dashboardTile.innerContent { padding-right: var(--paddingX); padding-left: var(--paddingX); height: 100%; --txtColor: inherit; --bgColor: var(--mediumTransparent); color: var(--txtColor); background-color: var(--bgColor); } .tabContainer .fileDashboardRoot .tilesContainer .dashboardTile.innerContent { background-color: var(--brightTransparent); color: unset; outline: 2px solid var(--bgColor); outline-offset: -2px; } .darkTheme .tabContainer .fileDashboardRoot .tilesContainer .dashboardTile.innerContent { background-color: var(--mediumDarkThemeBG); } .dashboardTile .tableContainer { max-height: 20em; overflow: hidden; overflow-y: auto; /*box-shadow: inset 3px 4px 4px -3px var(--darkTransparent);*/ } .dashboardTile table { /*border: 1px solid var(--tertiary);*/ border-collapse: collapse; /*separate;*/ /*padding: var(--paddingSmall);*/ width: 100%; border-spacing: var(--paddingYSmall); /* margin-top: var(--paddingY);*/ /*margin-bottom: var(--paddingY);*/ } .dashboardTile > .description { /*color:red;*/ margin-bottom: 0.5em; } .dashboardTile > .heading { /*color:blue;*/ } .dashboardTile table th { } .dashboardTile table td { padding: var(--paddingSmall); border-radius: inherit; } .dashboardTile table td .colTitle { font-weight: bold; width: 100%; } .dashboardTile table td .colDescription { font-size: 0.9em; padding-top: 0; } .dashboardTile table tr { outline: 1px solid var(--tertiary); outline-offset: -1px; padding: var(--paddingSmall); border-radius: var(--round); } .dashboardTile table tr.new { position: relative; border-top-left-radius:0px; border-bottom-left-radius:0px; box-shadow: inset 3px 0px var(--primary); } /*.dashboardTile table tr.new::after { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background-color: var(--primary); pointer-events: none; }*/ .dashboardTile table tr.new.downloadable { outline-width: 3px; outline-style: solid; outline-color: transparent; outline-offset: -3px; animation-name: filerowhighlight; animation-duration: 0.6s; animation-iteration-count: 12; animation-timing-function: ease-in-out; animation-direction: alternate; } @keyframes filerowhighlight { from { outline-color: transparent; background-color: transparent; } to { outline-color: var(--primary); background-color: var(--brightTransparent); } } .dashboardTile table tr.new td.new { min-height: 2em; text-align: center; pointer-events: none; height: 3em; padding: 0; background-color: var(--mediumTransparent); } .dashboardTile table tr.new td.new.waiting { } .dashboardTile table tr.new.error td.message { opacity: 1; color: var(--warning); } .dashboardTile table tr.downloadable { /*position:relative;*/ /*cursor:pointer;*/ } /* .dashboardTile table tr.downloadable::before { content: attr(data-download-info); position: absolute; top: 50%; right: 2em; transform: translateY(-50%); opacity: 1; pointer-events: none; opacity: 0.3; transition: opacity 0.15s; user-select:none; } */ .dashboardTile table tr.downloadable td div.colTitle.colored { } .dashboardTile table tr.downloadable td div.colTitle.colored::before { content: '\f111'; /* fa-circle*/ font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-weight: bold; color: var(--symbol-color); /* Variable wird direkt als Element-Style gesetzt und bekommt daher den Wert */ margin-right: 0.4em; } .dashboardTile table tr.downloadable td.colDlInfo { vertical-align: bottom; text-align: right; white-space: nowrap; /* normale Umbrüche gehen*/ } .dashboardTile table tr.downloadable .colDlInfo::after { content: '\f56d'; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-weight: bold; /*position: absolute;*/ opacity: 0.8; transition: opacity 0.15s; pointer-events: none; margin-left: 0.4em; } .dashboardTile table tr.downloadable:hover .colDlInfo::after { transition-duration: 0s; opacity: 1; } .dashboardTile table tr.downloadable:hover { /*background-color: var(--darkTransparent);*/ } .dashboardTile .filtersection, .dashboardTile .filesSection { /* margin-top: var(--paddingY); margin-bottom: var(--paddingY);*/ position: relative; } .dashboardTile .filtersection .buttonRow { width: 100%; text-align: center; } .dashboardTile .filtersection .animationContainer { position: absolute; bottom: -1px; left: 0; border-bottom-left-radius: var(--round); border-bottom-right-radius: var(--round); height: 1.5em; width: 100%; /*background-color: red;*/ pointer-events: none; } .dashboardTile .filtersection .animationContainer > div { position: relative; height: 100%; width: 100%; /*background-color: red;*/ pointer-events: none; } .dashboardTile table tr.empty td { text-align: center; } .dashboardTile table tr.empty { color: var(--tertiary); } .multiSelect_root .item { flex-wrap: nowrap; gap: var(--paddingSmallX); padding: var(--paddingSmall); /*max-width: 400px;*/ text-overflow: ellipsis; overflow: hidden; } .multiSelect_root .item.colored { border-left: 8px solid var(--bgColor, var(--bright)); margin-bottom: var(--paddingSmallY); /*border-left: 4px solid hsl(from var(--bgColor, var(--bright)) h s l / 50% );*/ } .darkTheme .multiSelect_root .item.colored { --bgColorDark: hsl(from var(--bgColor) h s calc(l * 0.8) / 50%); border-left-color: var(--bgColorDark); } .multiSelect_root .label:not(:empty) { /*padding-left: var(--paddingX);*/ margin-right: var(--paddingX); } .multiSelect_root #outerInputWrapper { flex: 1; position: relative; background-color: var(--brightInput); } .multiSelect_root #outerInputWrapper > .w3-input { background-color: transparent; } *:is(.multiSelect_root, .searchSelect_root) #scrollContainer { overscroll-behavior: contain; } *:is(.multiSelect_root, .searchSelect_root) #dropdownContainer > #innerContainer { border: 1px solid var(--medium); background-color: var(--brightInput); overflow: clip; border-bottom-left-radius: var(--round); border-bottom-right-radius: var(--round); border-top-right-radius: var(--round); .darkTheme & { background-color: var(--darkThemeBG); } } *:is(.multiSelect_root, .searchSelect_root) #dropdownContainer .item.selected { background: var(--mediumTransparent); /*outline:2px solid var(--medium);*/ } .multiSelect_root #dropdownContainer .groupLabel { font-weight: bold; font-size: 1.05em; padding-left: 0; /*border-bottom:1px solid var(--medium);*/ } .multiSelect_root #dropdownContainer .groupLabel i:not(.invisible) { padding-left: 10px; } .multiSelect_root #dropdownContainer button#btnShowSelected.active { background-color: var(--primary); color: var(--primaryText); } .multiSelect_root #dropdownContainer .groupLabel.colored { background-color: var(--bgColor, var(--mediumTransparent)); } .multiSelect_root #dropdownContainer .groupLabel.colored.darkBG { color: var(--bright); --hoverColor: var(--brightTransparent); } .multiSelect_root #dropdownContainer .groupLabel > i { width: 1.5em; max-width: 1.5em; min-width: 1.5em; overflow: clip; } .multiSelect_root #dropdownContainer .groupLabel > .label > hr { margin: 0; } .hintbox #inputWrapper:has(button.hintboxInlinebutton) { border-top-right-radius: var(--round); border-bottom-right-radius: var(--round); overflow: clip; } *:is(.multiSelect_root, .searchSelect_root) #outerContainer { border-top-right-radius: var(--round); border-bottom-right-radius: var(--round); overflow: clip; /*background-color: var(--brightInput);*/ .darkTheme & { /*background-color: var(--darkThemeBG);*/ } } *:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang):not(.readonly) #dropdownButton, .hintbox #inputWrapper button.hintboxInlinebutton { background-color: var(--mediumTransparent); color: initial; } /* ab dem zweiten Inlinebutton kleinen Schattenwurf als optische Trennung: */ .hintbox #inputWrapper button.hintboxInlinebutton:not(:first-child) { --inlineButtonShadow: -2px 0px 6px -3px var(--darkTransparent); box-shadow: var(--inlineButtonShadow); } .hintbox #inputWrapper button.hintboxInlinebutton:hover { box-shadow: var(--hoverBoxShadow), var(--inlineButtonShadow, 0 0 transparent); } *:is( .moreCoreEdit:not(.multilang), .selectbox, .moreCore_NumberInput, .moreCoreCheckBox, .moreCore_TimeInput, .moreCore_DateInput).invalid *[data-dojo-attach-point=inputNodeContainer] > *:is(textarea, input, select), .moreCoreEdit.multilang.invalid #mainRow[data-dojo-attach-point=inputContainer], *:is(.multiSelect_root, .searchSelect_root).invalid #outerContainer, *:is(.moreCore_DateTimeInput).invalid #combineContainer, *:is(.emailRecipientInput_root).invalid #rowContainer, .moreCoreColorPicker.invalid *:is(#bgContainer, #txtContainer), *:is(.hintbox).invalid #inputWrapper { --borderColor: var(--warning); box-shadow: 0px 0px 3px -1px var(--warning), inset 0px 0px 2px -1px var(--warning); } .moreCoreCheckBox.invalid .moreCoreCheckBox_mainContainer .inputContainer { border: 1px solid red; } *:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang) #selectInfoContainer { padding-left: 0.4em; padding-right: 0.4em; white-space: nowrap; display: flex; flex-wrap: nowrap; align-items: center; background-color: var(--brightInput); } *:is(.multiSelect_root, .searchSelect_root) #outerInput { } *:is(.multiSelect_root, .searchSelect_root) #outerInputWrapper #outerInput { opacity: 0; } *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay { overflow: clip; position: absolute; inset: 0; pointer-events: none; gap: 2px; } *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay.crowded { flex-wrap: wrap; max-height: 2.2lh; } *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay > .valueDisplay.darkBG { --bgColor: var(--bright); } *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay.crowded > .valueDisplay { /*content-visibility: hidden;*/ max-height: 1lh; min-width: 0.7lh; max-width: 10ch; font-size: 0.6em; flex-basis: 6ch; flex-grow: 1; flex-shrink: 1; } .multiSelect_root.singleSelect #outerInputOverlay > .valueDisplay { --bgColor: transparent; } *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay > .valueDisplay { --bgColor: var(--mediumTransparent); --txtColor: var(--darker); background-color: var(--bgColor); color: var(--txtColor); border-radius: var(--roundest); padding: 0.05em 0.3em; font-size: 0.90em; white-space: nowrap; text-overflow: ellipsis; overflow: clip; min-width: 1em; flex-shrink: 1; .darkTheme & { --bgColorDark: hsl(from var(--bgColor) h s calc(l * 0.8) / 50%); background-color: var(--bgColorDark); --txtColor: var(--brighter); } } .multiSelect_root.singleSelect #outerInputOverlay > .valueDisplay { font-size: 1em; padding: var(--paddingY); border-radius: 0; flex-grow: 1; body: not(.darkTheme) & { --bgColor: var(--brightInput); } } .darkTheme .multiSelect_root #selectInfoContainer { /*background-color: var(--brightInput);*/ } *:is(.moreCoreEdit.multilang) #selectInfoContainer.complete { display: none; /* bei Multilang ausblenden, wenn alles gewählt */ } *:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang) .secondaryLabel { opacity: 0.8; } *:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang) #selectInfo { border-radius: var(--roundest); padding: var(--paddingSmall); /*0.4em;*/ /*background-color: var(--secondary);*/ /*color: var(--secondaryText);*/ font-size: var(--w3Small); outline: 1px solid var(--borderColor); outline-offset: -1px; } *:is(.multiSelect_root, .searchSelect_root) #selectInfoContainer.complete #selectInfo { outline-color: var(--success); } /* all input fields */ .passwordChange_input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; } /* submit button */ .passwordChange_submitButton { background-color: var(--primary); color: var(--primaryText); } /* container for inputs */ .passwordChange_container { /*background-color: #f1f1f1;*/ /*padding: var(--padding);*/ } /* The message box is shown when the user clicks on the password field */ .passwordChange_messageNode { /*background: #f1f1f1;*/ /*color: #000;*/ position: relative; /*padding: var(--padding);*/ /*margin-top: 10px;*/ } .passwordChange_messageNode p { padding-bottom: var(--paddingYSmall); /*font-size: 14px;*/ } /* Add a green text color and a checkmark when the requirements are right */ .passwordChange_valid { color: var(--w3Green); } .passwordChange_valid:before { position: relative; /*left: -35px;*/ content: "\f00c"; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ margin-right: 0.3em; font-weight: bold; } /* Add a red text color and an "x" when the requirements are wrong */ .passwordChange_invalid { color: var(--warning); } .passwordChange_invalid:before { position: relative; /*left: -35px;*/ content: "\f00d"; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ margin-right: 0.3em; } .table_dropdown { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table_dropdown_content { position: absolute; background-color: #bfbfbf; border: 1px solid black; min-width: 160px; max-width: 600px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; padding: 5px; margin-bottom: 10px; } .table_groupHeader { background-color: #999999; } /*.tab { /* ?????? */ /* height: 40px; width: 250px; border-radius: 10px 10px 0px 0px; background-color: red; position: relative; }*/ .arrow { border-color: transparent transparent #FFF #FFF; border-style: solid; border-width: 23px 23px 23px 23px; height: 0; width: 0; position: absolute; bottom: 0px; right: -43px; } .NestedTable_tabLabel { text-align: center; height: 30px; padding: 5px; font-weight: bold; width: 300px; border-radius: 5px 10px 0px 0px; position: relative; display: inline-block; margin-right: 28px; transition: all 0.3s; } .NestedTable_tabLabel_arrow { border-color: #FFF #FFF transparent transparent; border-style: solid; border-width: 14px 14px 14px 14px; height: 0; width: 0; position: absolute; bottom: 0px; right: -24px; transition: all 0.3s; } .NestedTable_tabLabel_selected { opacity: 1; } .NestedTable_tabLabel_not_selected { opacity: 0.4; } /* WIZARDVIEW */ .wizardView { --borderColor: var(--secondary); --borderWidth: 2px; --borderWidthThin: 1px; --selectedColor: var(--primary); --validColor: var(--w3Green); /* --paddingX: var(--paddingX); --paddingXSmall: var(--paddingXSmall); --paddingY: var(--paddingY); --paddingYSmall: var(--paddingYSmall); --padding: var(--paddingY) var(--paddingX); --paddingSmall: var(--paddingYSmall) var(--paddingXSmall); */ } .wizardView .navRow { border-top: var(--borderWidthThin) solid var(--borderColor); border-bottom: var(--borderWidthThin) solid var(--borderColor); padding-top: var(--paddingY); padding-bottom: var(--paddingY); width: 100%; } .wizardView .navButton, .wizardView .navRow .topNavButton { /*margin-left: 0.4em; margin-right: 0.4em;*/ max-width: 35ch; padding: var(--paddingSmall); background-color: var(--mediumTransparent); } /*.wizardView .navButton.previous, .wizardView .navRow .topNavButton:first-child{ margin-left:0; }*/ .wizardView .navRow .topNavButton .title { font-size: 1.1em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .wizardView .navRow .topNavButton .summary { font-size: 0.8em; margin-top: 0.2em; margin-bottom: 0.2em; } .wizardView .navRow .topNavButton.valid .title::before { content: '\f00c'; /* fa-check*/ font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ color: var(--validColor); margin-right: 0.4em; font-weight: bold; } .wizardView .navRow .topNavButton.inactive, .wizardView .navButton.inactive { opacity: 0.3; cursor: not-allowed; background-color: transparent; pointer-events: none; } .wizardView .navRow .topNavButton.selectable, .wizardView .navButton.selectable { transition: var(--mds-hover-transition-out); transition-property: background-color; opacity: 1; } .wizardView .navRow .topNavButton.selectable:not(.selected):hover, .wizardView .navButton.selectable:hover { /*font-weight:bold;*/ background-color: var(--darkTransparent); cursor: pointer; transition: var(--mds-hover-transition-in); } .darkTheme .wizardView .navRow .topNavButton.selectable:not(.selected):hover, .darkTheme .wizardView .navButton.selectable:hover { /*font-weight:bold;*/ background-color: var(--brightTransparent); } .wizardView .navRow .topNavButton.selected { /*outline: var(--borderWidth) solid var(--selectedColor); outline-offset: -2px;*/ box-shadow: inset 0px calc(-1 * var(--borderWidth)) var(--selectedColor); background-color: var(--mediumTransparent); } .wizardView .navRow .topNavButton.selected .title { font-weight: bold; } .wizardView .wizardPage > .content { /*border: var(--borderWidth) solid var(--borderColor);*/ width: 100%; } /* RESOURCEPICKER */ .resourcePicker { --baseFontSize: 1rem; --sizeBaseUnit: 60px; /* Basiseinheit für die Kastln, multipliziert mit Höhe und Breite drunter */ --heightFactor: 1; /* Seitenverhältnis Breite */ --widthFactor: 2.5; /* Seitenverhältnis Höhe */ --selectedColor: var(--primary); /* vom Benutzer gewählt (oder vorausgewählt)*/ --selectedColorTxt: var(--primaryText); /* vom Benutzer gewählt (oder vorausgewählt)*/ --occupiedColor: var(--warning); /* wenns belegt ist */ --occupiedColorTxt: var(--primaryText); /* wenns belegt ist */ --blockedColor: transparent; /*var(--w3PaleRed); */ /* blockierte Gruppe */ --blockedColorTxt: inherit; --itemDefaultColor: transparent; /*var(--mediumTransparent);*/ /* Standardfarbe */ --itemSelectableColor: var(--mediumTransparent); /*var(--accentThemeL4);*/ --spacing: 2px; /* Abstand der Tabellenzellen - führt effektiv zu Abstand vertikal unter der Gruppe und horizontal zwischen Spalten */ --itemGap: 0px; /* Abstand zwischen den Kastln zum Klicken. ACHTUNG: bei unterschiedlichen Höhen alignen sich Items nicht mehr! */ --itemBorderWidth: 1px; /* Rahmen um die Kastln*/ --itemBorderColor: var(--medium); /* Farbe des Rahmens */ --layoutBorderWidth: 2px; --layoutBorderColor: var(--secondary); --groupDefaultColor: var(--secondary); --groupDefaultTxtColor: var(--veryBright); --tooltipColor: var(--w3Blue); --tooltipTxtColor: white; --tooltipBorderColor: var(--brightTransparent); --maxHeight: unset; } /* div das den table-Tag enthält*/ .resourcePicker .tableContainer { max-height: var(--maxHeight); width: max-content; /*overflow: auto;*/ /* sticky header geht besser ohne overflow, lustig...*/ } /* die eigentliche Table*/ .resourcePicker table { font-size: var(--baseFontSize); /*border-collapse:collapse;*/ border-spacing: var(--spacing); width: 100%; } .resourcePicker table tbody { vertical-align: top; } /* DEBUG */ .resourcePicker table tr.contentrow { /*border: 1px solid red;*/ /*background-color: palegoldenrod;*/ } .resourcePicker table tr.contentrow td:nth-child(2n) { /*background-color: paleturquoise;*/ } .resourcePicker .headrow { position: sticky; top: 0; z-index: 5; box-shadow: 0px 2px 4px var(--darkTransparent); font-weight: normal; } /* Spalte, in der die einzelnen Items landen*/ .resourcePicker .resourceContainer { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--itemGap); /*box-shadow: inset var(--itemBorderWidth) 0px var(--itemBorderColor), inset calc(-1 * var(--itemBorderWidth)) 0px var(--itemBorderColor);*/ /*border-left: var(--itemBorderWidth) solid var(--itemBorderColor);*/ /*border-right: var(--itemBorderWidth) solid var(--itemBorderColor);*/ /*border-top: var(--itemBorderWidth) solid var(--itemBorderColor);*/ outline: var(--itemBorderWidth) solid var(--itemBorderWidth); outline-offset: calc( -1 * var(--itemBorderWidth) ); max-width: 100%; width: 100%; } /* sowohl Gruppenkopf als auch die items sind einmal horizontal unterteilt, damit tooltip-Button und Inhalt nebeneinander Platz haben */ .resourcePicker .splitContainer { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: relative; height: 100%; } .resourcePicker .groupHead > .splitContainer > .mainContainer { flex: 1; pointer-events: none; } .resourcePicker .mobileHeader.clickableTooltip, .resourcePicker .groupHead.clickableTooltip { cursor: pointer; transition: var(--mds-hover-transition-out); transition-property: box-shadow; } .resourcePicker .groupHead.clickableTooltip { position: relative; } /* Table-Head-Spalte mit dem Gruppendeskriptor */ /* Table-Head-Spalte mit dem Gruppendeskriptor */ .resourcePicker .groupHead, .resourcePicker .mobileHeader { min-width: calc(var(--widthFactor) * var(--sizeBaseUnit)); /*white-space: pre-line;*/ /*border-bottom: var(--layoutBorderWidth) solid var(--layoutBorderColor);*/ /*vertical-align: bottom;*/ outline: var(--layoutBorderWidth) solid var(--layoutBorderColor); outline-offset: calc( -1 * var(--layoutBorderWidth) ); background-color: var(--groupDefaultColor); color: var(--groupDefaultTxtColor); padding: var(--layoutBorderWidth); } .resourcePicker .groupHead { max-width: calc(var(--widthFactor) * var(--sizeBaseUnit)); /* nicht bei mobile!*/ } /*.resourcePicker .groupHead:nth-child(n + 2) { border-left: var(--layoutBorderWidth) solid var(--layoutBorderColor); }*/ /* klickbares Item */ .resourcePicker .item { background: var(--itemDefaultColor); /*width: 100%;*/ /*calc(var(--widthFactor) * var(--sizeBaseUnit));*/ height: calc(var(--heightFactor) * var(--sizeBaseUnit)); border-bottom: var(--itemBorderWidth) solid var(--itemBorderColor); display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; position: relative; } /* die items dürfen ja eigentlich nicht overflowen, aber weils Tooltips gibt, müssen wir doch trennen: */ .resourcePicker .mainContainer { overflow: hidden; width: 100%; display: flex; flex-direction: column; justify-content: center; height: 100%; /*padding: var(--paddingSmall);*/ } .resourcePicker .overflowContainer { overflow: visible; position: absolute; top: calc(100% - 3px); z-index: 3; } .resourcePicker .groupHead > .overflowContainer { overflow: visible; position: absolute; top: 100%; z-index: 3; } .resourcePicker .groupHead.customColor { /*box-shadow: inset calc( 2 * var(--layoutBorderWidth)) calc( -2 * var(--layoutBorderWidth) ) var(--bgColor);*/ background-color: var(--bgColor); } .resourcePicker .mainLabel { text-align: center; font-weight: bold; } .resourcePicker .groupHead .secondaryLabel, .resourcePicker .item .secondaryLabel { font-size: 0.8em; text-align: center; font-weight: normal; } .resourcePicker .item { } .resourcePicker .item.selectable { cursor: pointer; transition: var(--mds-hover-transition-out); transition-property: box-shadow; background-color: var(--itemSelectableColor); } .resourcePicker .item.selectable:hover { transition: var(--mds-hover-transition-in); box-shadow: inset 0 0 100px var(--darkTransparent); } .darkTheme .resourcePicker .item.selectable:hover { box-shadow: inset 0 0 100px var(--brightTransparent); } .resourcePicker .item.disabled .mainContainer { pointer-events: none; opacity: 0.6; } .resourcePicker .item.invisible { pointer-events: none; opacity: 0 !important; } .resourcePicker .item.occupied { background-color: var(--occupiedColor); color: var(--occupiedColorTxt); } .resourcePicker .item.selected { color: var(--selectedColorTxt); border-bottom-color: var(--selectedColor); position: relative; } .resourcePicker .item.selected:before { content: ''; position: absolute; pointer-events: none; top: 0; right: 0; left: 0; bottom: 0; background: var(--selectedColor); } .resourcePicker .item.selected.disabled:before { opacity: 0.3; } .resourcePicker .item.selected.first:before { position: absolute; pointer-events: none; content: '\f0d7'; /* caret-down*/ font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-weight: bold; bottom: 0; width: 100%; margin-left: var(--paddingXSmall); } .resourcePicker .item.selected.between:before { position: absolute; pointer-events: none; content: '\f2d1'; /* fa-window-minimize*/ /*'\f142'; */ /* ellipsis-v */ font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-weight: bold; transform: rotate(90deg); top: 50%; width: 100%; margin-left: var(--paddingXSmall); } .resourcePicker .item.selected.last:before { position: absolute; pointer-events: none; content: '\f0d8'; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-weight:bold; top: 0; width: 100%; margin-left: var(--paddingXSmall); } .resourcePicker .blockedGroup, .resourcePicker .emptyGroup:after, .resourcePicker .resourceContainer.emptyGroup.expanded:after { /*transform: rotate(0deg);*/ /* führt zu falschem Layout... */ writing-mode: vertical-lr; background-color: var(--blockedColor); color: var(--blockedColorTxt); height: 100%; display: flex; font-size: 1.2em; /*justify-content: center;*/ align-items: center; padding: var(--padding); pointer-events: none; opacity: 0.6; height: max-content; content: attr(emptyLabel); } .resourcePicker .emptyGroup:after { font-size: 1em; opacity: 0.3; } .resourcePicker .emptyGroup:after { } /* Tooltip text */ .resourcePicker .tooltiptext { /*visibility: hidden;*/ display: none; background-color: var(--tooltipColor); color: var(--tooltipTxtColor); text-align: left; font-weight: normal; font-size: 0.9em; padding: var(--padding); border-radius: var(--round); box-shadow: 1px 2px 4px var(--darkTransparent); outline: var(--layoutBorderWidth) solid var(--tooltipBorderColor); /* Position the tooltip text - see examples below! */ position: absolute; z-index: 3; left: calc(-2 * var(--round)); top: calc(100% + 10px); } /* Show the tooltip text when you mouse over the tooltip container */ .resourcePicker .showTooltip .tooltiptext { display: block; /*white-space:nowrap;*/ /* zu extrem... */ min-width: calc(var(--widthFactor) * var(--sizeBaseUnit)); } /* das kleine Dreieck, das am Tooltip die Herkunft markiert*/ .resourcePicker .showTooltip .tooltiptext:after { content: ''; position: absolute; left: var(--round); top: -6px; border-top: none; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom: 10px solid var(--tooltipColor); } .resourcePicker .tooltipIcon.showTooltip { outline: var(--layoutBorderWidth) solid var(--tooltipColor); outline-offset: calc(-1 * var(--layoutBorderWidth)); background-color: var(--tooltipColor); color: var(--tooltipTxtColor); cursor: pointer; } .resourcePicker .tooltipIcon, .resourcePicker .expanderIcon { padding: var(--paddingSmall); /*position: absolute; left: 0; z-index: 1;*/ border-radius: var(--round); transition-property: background-color; transition-duration: var(--mds-hover-transition-out); cursor: pointer; position: relative; } .resourcePicker .tooltipIcon:hover, .resourcePicker .expanderIcon:hover { background-color: var(--brightTransparent); transition-duration: var(--mds-hover-transition-in); } .darkTheme .resourcePicker .tooltipIcon:hover, .darkTheme .resourcePicker .expanderIcon:hover { background-color: var(--darkTransparent); } .resourcePicker .mobileHeader .expanderButton { display: none; } .resourcePicker .mobileHeader { display: none; } @media screen and (max-width: 900px) { .resourcePicker table { table-layout: auto; width: 100%; } /* standardmäßig: Container ist collapsed*/ .resourcePicker .resourceContainer .item { display: none; } .resourcePicker .mobileHeader .expanderButton { display: block; } .resourcePicker .resourceContainer.expanded .item { display: block; } .resourcePicker .emptyGroup:after { display: none; } /* wenne in einer Gruppe nix drin ist: ausgrauen, dann sieht mans auch ohne aufklappen gelich*/ .resourcePicker .resourceContainer.emptyGroup .mobileHeader { opacity: 0.6; } /* überschreiben, dass das Pseudoelement vertikal im Picker drinsteht */ .resourcePicker .resourceContainer.emptyGroup.expanded:after { writing-mode: initial; justify-content: center; } .resourcePicker .mobileHeader { display: block !important; background-color: var(--groupDefaultColor); width: 100%; text-align: center; color: var(--groupDefaultTxtColor); display: contents; font-weight: bold; position: sticky; top: 0; z-index: 5; box-shadow: 0px 2px 4px var(--darkTransparent); } .resourcePicker table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: 0px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .resourcePicker table tr { border-bottom: 1px solid var(--tertiary); border-top: 2px solid var(--tertiary); display: block; margin-bottom: 6px; } .resourcePicker table td { border-bottom: 1px solid var(--tertiary); display: block; text-align: right; width: 100% !important; } .resourceContainer .itemsContainer { width: 100%; display: flex; align-content: center; } /*.resourcePicker table .resourceContainer::before { content: attr(groupLabel); background-color: var(--groupDefaultColor); width: 100%;*/ /*calc(var(--widthFactor) * attr(widthfactor) * var(--sizeBaseUnit));*/ /*float: left;*/ /*text-align: center; padding: var(--padding); color: var(--groupDefaultTxtColor); display: contents; font-weight: bold; position: sticky; top: 0; z-index: 5; box-shadow: 0px 2px 4px var(--darkTransparent);*/ /*font-size: 0.8em;*/ /*}*/ /* wenns einen Tooltip gibt, dann hover-Effekt im Pseudo-Gruppenkopf: */ .resourcePicker table .resourceContainer.clickableTooltip::after { content: ''; position: sticky; top: 0; } .resourcePicker table .resourceContainer.clickableTooltip::after:hover { } .resourcePicker .blockedGroup { /*transform: rotate(0deg);*/ /* führt zu falschem Layout... */ writing-mode: unset; justify-content: center; } .resourcePicker .tableContainer { width: unset; } } /* SELECTENTITYDIALOG */ .selectEntityDialog { --selectedColor: var(--primary); --selectedColorTxt: var(--primaryText); } .selectEntityDialog #verticalContainer #descriptionContainer { padding: var(--padding); } .selectEntityDialog #verticalContainer pre#treeDescription { font-family: inherit; margin: 0; line-height: 1.2; } .genericdialog #content #progressContainer { } .selectEntityDialog button.dlgSubmitCount::after, .selectEntityDialog span#itemCountLabel::after { content: attr(itemcount); margin-left: 0.4em; } .selectEntityDialog button#spacer { flex: 1; visibility: hidden; opacity: 0; margin-left: 0 !important; flex-basis: 0px; overflow: visible; pointer-events: none; padding: 0 !important; } .selectEntityDialog button#deselectAll, .selectEntityDialog button#createNew, .selectEntityDialog button#selectNone { margin-left: 0 !important; margin-right: var(--paddingX) !important; } .selectEntityDialog button#createNew::before { content: '\f055'; font-weight: bold; font-family: var(--fontawesome); margin-right: 0.4em; } .selectEntityDialog div.selectableItem { width: 100%; background-color: var(--mediumTransparent); border-bottom: 1px solid var(--medium); display: flex; flex-flow: row; align-items: center; padding: var(--paddingY); } .selectEntityDialog .selectableItem #rightContainer { max-width: 40%; overflow: hidden; text-overflow: ellipsis; text-align: right; white-space: nowrap; line-height: 1.2; } .selectEntityDialog .selectableItem #rightContainer .itemType { opacity: 0.6; text-transform: uppercase; font-weight: bold; } .selectEntityDialog .selectableItem #rightContainer .sourceTreename { opacity: 0.6; font-size: 0.8em; } .selectEntityDialog div.selectableItem > #labelContainer { display: flex; flex-flow: column; justify-content: center; flex: 1; flex-basis: 10ch; position: relative; } .selectEntityDialog .itemContainer#selectedItems div.selectableItem > #labelContainer #sourceTree { } .selectEntityDialog div.selectableItem.selected { background-color: var(--selectedColor); color: var(--selectedColorTxt); } .selectEntityDialog div.selectableItem > #labelContainer > div#label { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold; } .selectEntityDialog div.selectableItem > #labelContainer > div#secondarylabel { line-height: 1.05em; font-size: 0.8em; margin-bottom: 0.4em; } .selectEntityDialog.multiselectable div.selectableItem::before { content: '\f111'; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ margin-right: 0.6em; } .selectEntityDialog.multiselectable div.selectableItem.selected::before { content: '\f058'; font-weight: bold; } .selectEntityDialog #filterContainer { outline: 2px solid var(--primary); margin-bottom: 2px; } .selectEntityDialog input#simpleSearch { border: 0px; width: 100%; } .selectEntityDialog input#simpleSearch, .selectEntityDialog .filterPanel { box-shadow: 0px -2px 3px 0px var(--darkTransparent) /*, 0px 3px 3px 0px var(--darkTransparent)*/; z-index: 2; } .selectEntityDialog .filterPanel { padding: var(--padding); } .selectEntityDialog #verticalContainer { display: flex; flex-flow: column; } .selectEntityDialog #resultContainer, .selectEntityDialog #noResultContainer { box-shadow: inset 0px 2px 4px -2px var(--darkTransparent); } .selectEntityDialog #tabContainer { align-items: flex-end; flex-wrap: nowrap; justify-content: space-between; display: flex; flex-flow: row; border-bottom: 2px solid var(--medium); z-index: 1; } .selectEntityDialog #descriptionContainer { background-color: var(--selectedColor); color: var(--selectedColorTxt); padding: var(--paddingSmall); } .selectEntityDialog #tabContainer #leftContainer { column-gap: 1em; } .selectEntityDialog #tabContainer #rightContainer button:last-child { margin-right: 0.8em; } .selectEntityDialog #tabContainer #leftContainer button:first-child { margin-left: 0.8em; } .selectEntityDialog #tabContainer button.treebutton { position: relative; user-select: none; cursor: pointer; padding: var(--paddingSmall); max-width: 25ch; word-wrap: anywhere; /*box-shadow:1px 2px 3px 0px var(--mediumTransparent);*/ } .selectEntityDialog #tabContainer button > .label { /* container, der text und icon enthält */ display: flex; align-items: center; gap: 0.4em; flex-wrap: nowrap; } .selectEntityDialog #tabContainer button > .label > #text { /* Hauptbeschriftung */ flex: 1; } .selectEntityDialog #tabContainer button > .label > #iconContainer { } .selectEntityDialog #tabContainer #warningIcon { display: none; } .selectEntityDialog #tabContainer button.invalidRule { color: var(--warning); } .selectEntityDialog #tabContainer button.invalidRule #warningIcon { display: block; } .selectEntityDialog #tabContainer button > .rulesLabel { /* Beschriftung von Regeln (min/max) */ line-height: 1.05; font-size: 0.8em; text-align: left; } .selectEntityDialog #rulesLabelContainer { padding: var(--padding); border: 1px solid var(--medium); background-color: var(--mediumTransparent); border-radius: var(--round); /*margin-bottom: var(--paddingY);*/ gap: 0.4em; } .selectEntityDialog #rulesLabelContainer.invalidRule { color: var(--warning); background-color: var(--warningBG); } .selectEntityDialog #rulesLabelContainer #rulesWarningIconContainer { display: none; } .selectEntityDialog #rulesLabelContainer.invalidRule #rulesWarningIconContainer { display: block; } .selectEntityDialog #tabContainer button.treebutton.selected > .label, .selectEntityDialog #tabContainer #btnShowSelection.selected { /*font-weight: bold;*/ } .selectEntityDialog #tabContainer button.treebutton.selected { background-color: var(--selectedColor); color: var(--selectedColorTxt); } .selectEntityDialog #tabContainer #leftContainer button.treebutton.selected { cursor: default; pointer-events: none; outline: 4px solid var(--selectedColor); } .selectEntityDialog button.treebutton { border-top-left-radius: var(--round); border-top-right-radius: var(--round); } /*addressWizard*/ .addressWizard { } .addressWizard .plz { /*margin-left: 29px;*/ } .addressWizard .checkboxSpacing { /*margin-top: 21px;*/ } .addressWizard .collapsed .body { /*display: none;*/ } @media screen and (max-width: 600px) { .addressWizard .plz { margin-left: 0; } .addressWizard .checkboxSpacing { /*margin-top: 0;*/ } } .addressWizard .deleteBtn { /*background-color: #ffffff;*/ } /* MainCatalogs */ .mainCatalogsRoot { } .mainCatalogsRoot .editorContainer { display: none; overflow: visible; } .mainCatalogsRoot .mainCatalogSection { } .mainCatalogsRoot .mainCatalogSection #catalogEditContainer { min-height: 20px; } /* ================================ */ /* TABCONTAINER / TABBING */ .tabContainer { margin-bottom: 4em; } .tabContainer #mainContainer { --containerColor: var(--primary); /*box-shadow: inset 0px 2px var(--containerColor);*/ box-shadow: inset 0px 2px var(--primary); border-top: none; } .tabContainer #tabRowContainer { padding-left: var(--paddingX); padding-right: var(--paddingX); } .tabContainer #tabRow { column-gap: 0.5em; row-gap: 1px; flex: 1; flex-wrap: nowrap; align-items: end; padding-top: 8px; padding-left: 2px; /* sonst schneidet overflow hidden die outline vom aktiven Tab weg...*/ overflow: hidden; } .tabContainer #tabRow.tabOverflow { } .tabContainer #tabRow .tab { white-space: nowrap; } .tabContainer #tabRow.tabOverflow .tab { } .tabContainer #tabSwitchContainer { white-space: nowrap; } .tabContainer #tabRow.tabOverflow #tabSwitchContainer { display: block !important; margin-left: var(--paddingX); } .tabContainer #tabRow.tabOverflow .tab:after { content: ''; width: calc(2* var(--round)); height: calc(100% + 1* var(--round)); border-radius: var(--round); box-shadow: 3px 0px var(--secondaryThemeL4); position: absolute; right: -10px; z-index: -1; } .tabContainer #tabRow.tabOverflow .tab:before { content: ''; width: calc(2* var(--round)); height: calc(100% + 1* var(--round)); border-radius: var(--round); box-shadow: 4px 0px var(--secondaryThemeL3); position: absolute; right: -4px; z-index: -1; } .tabContainer #tabRow.tabOverflow .tab.active + .tab:not(.detachable) { margin-left: var(--paddingX); } .tabContainer #tabRow.tabOverflow .tab.detachable:not(.active):not(.previouslyActive) { display: none; } .tabContainer #tabRow.tabOverflow.minimal .tab:not(.active) { display: none; } .tabContainer #contextTabRow { column-gap: 0.5em; row-gap: 2px; min-width: 4em; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-start; flex-flow: wrap-reverse; position: relative; overflow: hidden; padding-top: var(--paddingY); } /* Contextabs sind eigentlich nur noch schwebende Ellipsen-Buttons */ .tabContainer #tabRowContainer #bottomContainer, .tabContainer #fixedBottomContainer, .tabContainer #contextTabRow { --tabColor: var(--primary); color: var(--primaryText); } .tabContainer #fixedBottomContainer.brightColor { color: var(--dark); } .tabContainer .tab { background-color: var(--primary); /*var(--tabColor);*/ color: var(--primaryText); } .tabContainer #contextTabRow .contextButton { border-radius: var(--round); margin-bottom: 2px; /*background-color: var(--primary);*/ background-color: var(--tabColor); /*color: var(--primaryText);*/ color: inherit; } .tabContainer #tabRowContainer #tabRow .tab { /* gilt nur für die RICHTIGEN Tabs */ --tabColor: transparent; /* box-shadow: 0px -2px var(--tabColor);*/ /*box-shadow: 0px -2px var(--tertiary);*/ /*transition-property:transform;*/ /*transition-duration: var(--w3AnimationDuration);*/ } .tabContainer #tabRowContainer .tab .spinner { opacity: 0; pointer-events: none; transition-duration: 0; transition-property: opacity; animation-play-state: paused; /*color: var(--secondary);*/ vertical-align: middle; overflow: hidden; width: 0; /*margin-right: 0.2em;*/ } .tabContainer #tabRowContainer .tab.busy .spinner { opacity: 0.8; width: unset; animation-play-state: running; transition-duration: var(--mds-hover-transition-out); /*margin-left:0.4em;*/ margin-right: 0.4em; } .tabContainer #tabRowContainer .tab.dirty .pageSelector:before { font-family: var(--fontawesome); font-weight: bold; content: '\f069'; /* asterisk */ margin-right: 0.4em; /*margin-right:0.4em;*/ } .tabContainer #tabRowContainer .tab.active.dirty .pageSelector:before { color: var(--complimentaryTheme); /*margin-right:0.4em;*/ } .tabContainer #tabRowContainer #tabRow .tab { border-top-left-radius: var(--round); border-top-right-radius: var(--round); background-color: var(--tertiary); color: var(--tertiaryText); position: relative; } .tabContainer #tabRowContainer .tab:not(.active) { box-shadow: 0px -2px var(--tabColor); } .tabContainer #tabRowContainer .tab:not(.active)::after { position: absolute; content: ''; top: 0; right: 0; left: 0; bottom: 0; pointer-events: none; z-index: 1; box-shadow: inset 0px -4px 4px -4px var(--darkTransparent) } .tabContainer #tabRowContainer #tabRow .tab.active { --tabColor: var(--primary); outline: 2px solid var(--tabColor); /*outline: 2px solid var(--primary);*/ background-color: var(--tabColor); /*background-color: var(--primary);*/ color: var(--primaryText); z-index: 2; } .tabContainer #tabRowContainer #tabRow .tab.active.brightColor { color: var(--dark); } .darkTheme .tabContainer #tabRowContainer #tabRow .tab.active.brightColor { color: var(--darker); } .tabContainer #tabRow .tab > .pageSelector:only-child { border-top-right-radius: var(--round); } .tabContainer #tabRow .tab > .pageSelector { /*border-top-right-radius: var(--round);*/ border-top-left-radius: var(--round); background-color: transparent; /* Beschriftung des Tabs begrenzen */ max-width: 28ch; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .tabContainer #tabRowContainer #tabRow .tab.active > .pageSelector { pointer-events: none; cursor: default; /*font-weight: bold;*/ background-color: var(--tabColor); /* background-color: var(--primary); */ /* essentials*/ /*color: var(--primaryText);*/ color: inherit; } .tabContainer #tabRow .tab.disabled > .pageSelector { pointer-events: none; opacity: 0.6; } .tabContainer #tabRow .tab > .closeBtn { cursor: pointer; /*border-top-right-radius: var(--round);*/ border-top-right-radius: var(--round); background-color: var(--brightTransparent); color: var(--tertiaryText); } .tabContainer #tabRow .tab:last-child { margin-right: 0.8em; } .tabContainer #tabRow .tab:first-child { /*margin-left: 0.8em;*/ } .tabContainer #tabRowContainer { /* position: sticky; top: var(--marginTopbar); */ } .tabContainer #contextTabRow .contextEntry#topMenuBtn { position: relative; } .tabContainer #contextTabRow #topMenuContainer { position: absolute; display: flex; flex-direction: column; right: 0; background: var(--bright); z-index: 100; } .tabContainer #fixedBottomContainer { position: fixed; bottom: 0; left: var(--sidebarWidth); right: 0; z-index: 1; pointer-events: none; } .tabContainer #fixedBottomContainer { gap: 0.4em; } .tabContainer #fixedBottomContainer.hidden .contextEntry, .tabContainer #fixedBottomContainer.hidden .contextEntry button { pointer-events: none; } /* .tabContainer #fixedBottomContainer:not(.hidden) { opacity: 0.65; transition-duration: 0.5s; transition-delay: 1s; transition-property: opacity; } .tabContainer #fixedBottomContainer:not(.hidden):hover{ opacity:1; transition-delay:0; } */ .tabContainer #fixedBottomContainer .contextEntry { border-radius: var(--round); } .tabContainer #fixedBottomContainer .contextEntry:not(.disabled) { box-shadow: var(--boxShadowSmallLight); } .tabContainer #fixedBottomContainer .contextEntry button { height: 3rem; min-width: 3rem; pointer-events: all; align-items: center; justify-content: center; display: flex; padding: var(--padding); border-radius: inherit; color: inherit; background-color: var(--tabColor); } .tabContainer #fixedBottomContainer .contextEntry button > i { font-size: 1.2em; } .tabContainer #containerClasp { --containerColor: var(--primary); /*border-top: 1px solid var(--tertiary);*/ border-left: 1px solid var(--tertiary); border-right: 1px solid var(--tertiary); box-shadow: inset 0px 2px var(--containerColor); /*box-shadow: inset 0px 2px var(--primary);*/ min-height: var(--round); border-top-left-radius: var(--round); border-top-right-radius: var(--round); background-color: var(--mediumTransparent); padding-top: 2px; overflow: hidden; /* position: sticky; top: calc(40px + var(--marginTopbar)); */ } .tabContainer #actionBar { --actionBarColor: var(--primaryTransparent); background-color: var(--actionBarColor); margin-bottom: var(--paddingY); display: flex; } .tabContainer #actionBarButtonsContainer { display: flex; column-gap: 2px; row-gap: 8px; overflow-x:auto; } .tabContainer #actionBar .contextButton { background-color: var(--transparent); /*color:var(--accentThemeD5);*/ padding: var(--padding); height:100%; } .tabContainer #actionBar .contextButton.disabled { pointer-events: none; opacity: 0.3; } .tabContainer #actionBar .action.menuBtn { float: right; height:100%; display:flex; align-items:stretch; } .tabContainer #contentNode { padding: var(--padding); background-color: var(--mediumTransparent); border-left: 1px solid var(--tertiary); border-right: 1px solid var(--tertiary); border-bottom: 1px solid var(--tertiary); /*background-color: white;*/ border-bottom-left-radius: var(--round); border-bottom-right-radius: var(--round); } .staticTable tr, .staticTable thead, .staticTable tbody { width: 100% } .tabContainer *:is(#fixedBottomContainer, #tabRowContainer, #actionBar) i.labelIcon { margin-right: 0.4em; } /* FLOATING CONTAINER*/ .floatingContainer { --minMargin: 20px; --mouse-x: 0; --mouse-y: 0; --offsetX: 0px; --offsetY: 0px; display: none; position: fixed; margin: 0; color: var(--dark); /*margin-left:-20px; margin-right:-20px;*/ left: 0; top: 0; /* The following line is responsible for all the magic */ transform: translateX(calc(min(var(--mouse-x), calc(100vw - 100% - var(--minMargin))) + var(--offsetX))) translateY(calc(min(calc(var(--mouse-y) + (-1 * var(--scrollY))), calc(100vh)) + var(--offsetY))); /* weiteres von mds ... */ --scrollY: 0px; z-index: 2; font-size: 1rem; font-family: var(--font); color: initial; font-weight: initial; line-height: initial; min-width: 10ch; } .floatingContainer.verticalUp { transform: translateX(calc(min(var(--mouse-x), calc(100vw - 100% - var(--minMargin))) + var(--offsetX))) translateY(calc( -1 * var(--scrollY))); top: unset; bottom: 0; margin-top:unset; margin-bottom: var(--paddingX); } .floatingContainer > .mainContainer { } .floatingContainer .floatingTooltip { text-align: initial; --offsetX: 0; --offsetY: 0; color: initial; font-size: initial; max-width: 40ch; margin-top: var(--paddingXSmall); overflow: hidden; border: 1px solid var(--medium); background-color: var(--brighter); border-radius: var(--round); box-shadow: var(--boxShadowSmallMedium); } .floatingTooltip { font-size: 1rem; } .floatingTooltip #iconContainer { padding-right: 0; } .floatingTooltip > .mainContainer { line-height: 1.2; white-space: normal; } .floatingTooltip > .subtitleContainer { line-height: 1.2; white-space: normal; } /* MENU */ .moreCoreMenuRoot { cursor: default; min-width: 27ch; max-width: 40ch; margin-top: var(--paddingXSmall); overflow: hidden; border: 1px solid var(--medium); background-color: var(--brighter); border-radius: var(--round); box-shadow: var(--boxShadowSmallMedium); } .darkTheme .moreCoreMenuRoot { background-color: var(--dark); color: var(--brightText); } .moreCoreMenuRoot > div { overflow: hidden; } .moreCoreMenuRoot > div:not(.w3-hide):first-child { border-radius: inherit; } .moreCoreMenuRoot #entryContainer { display: flex; flex-flow: column; --iconWidth: 0em; } .moreCoreMenuRoot #entryContainer.hasIcons { --iconWidth: 1.2em; } .moreCoreMenuRoot #topBar { /*font-size:0.9rem;*/ border-bottom: 1px solid var(--secondaryThemeL2); padding: var(--paddingSmall); font-weight: bold; background-color: var(--accentTheme); color: var(--accentThemeTxt); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .moreCoreMenuRoot #topBar button { background-color: var(--mediumBrightTransparent); /*outline: 1px solid var(--accentThemeL3);*/ } .moreCoreMenuRoot div.heading { padding: var(--paddingSmall); color: var(--secondaryTheme); text-align: left; cursor: default; font-size: 0.85em; font-weight: bold; /*margin-bottom: 0.5em;*/ margin-top: 0.5em; position: relative; } .darkTheme .moreCoreMenuRoot div.heading { color: var(--medium); } .moreCoreMenuRoot div.heading:after { /*content: ''; position:absolute; inset: 100% 0; border-bottom:1px solid currentColor;*/ } .moreCoreMenuRoot .groupContainer:first-child { /*padding-top: var(--paddingYSmall);*/ margin-top: 0; border-top: 0px; } .moreCoreMenuRoot .groupContainer:not(:first-child):not(:has(.heading)) { margin-top: 0.5em; } .moreCoreMenuRoot .groupContainer:not(:last-child) { padding-bottom: 0.5em; /*margin-bottom:0.5em;*/ border-bottom: 1px solid var(--secondaryThemeL2); } .moreCoreMenuRoot .groupContainer .moreCoreMenuRoot .groupContainer:not(:first-child) { border-top: 1px solid var(--secondaryThemeL3); /*margin-top: var(--paddingY);*/ } .moreCoreMenuRoot button.menuEntry { border: none; padding: var(--paddingXSmall) var(--paddingY); text-align: left; display: flex; flex-flow: row; align-items: center; flex-wrap: nowrap; background-color: transparent; position: relative; width: 100%; color:var(--dark); } .darkTheme .moreCoreMenuRoot button.menuEntry { color: var(--bright); } .moreCoreMenuRoot button.menuEntry:not(.disabled) { cursor: pointer; } .moreCoreMenuRoot button.menuEntry > span { max-width: 25ch; } /* .moreCoreMenuRoot button.menuEntry:not(.headingChanged):not(:first-child):after { content: ''; position: absolute; border-bottom: 1px solid var(--secondaryThemeL3); left: calc(2* var(--paddingX)); right: calc(2* var(--paddingX)); top: -1px; height: 1px; }*/ .moreCoreMenuRoot .groupIcon { margin-right: 0.5em; opacity:0.7; } .moreCoreMenuRoot button .icon { min-width: var(--iconWidth); margin-right: 0.4em; color:var(--mediumDark); /*max-width:var(--iconWidth);*/ /*overflow:hidden;*/ } .darkTheme .moreCoreMenuRoot button .icon { color:var(--medium); /*max-width:var(--iconWidth);*/ /*overflow:hidden;*/ } /* ACHTUNG: :has muss in manchen Browsern aktiviert werden und ist noch recht neu (Stand 2022)*/ /* Layout prüfen, falls das verwendet werden soll */ /* .moreCoreMenuRoot #entryContainer:has(button) span:only-child { margin-left:var(--iconWidth); } */ .moreCoreMenuRoot button.menuEntry.disabled { cursor: default; } .moreCoreMenuRoot button.menuEntry.selected { cursor: default; color: var(--accentThemeD4); background-color: var(--accentThemeTransparent); font-weight: bold; } /* EXPANDER SECTIONS */ .moreCoreExpandableSection { --animationDuration: var(--transitionDurationLong); } .moreCoreExpandableSection.sectionBG { border: none; padding: 0; } .moreCoreExpandableSection #headerContainer { position: relative; isolation: isolate; } .moreCoreExpandableSection #headerContainer #progressContainer { position: absolute; inset: 0; margin: var(--paddingY); opacity: 0.6; /*background-color: lime;*/ border-radius: var(--round); z-index: -1; } .moreCoreExpandableSection.small > #headerContainer > div > *:is(h1, h2, h3, h4) { display: none; } .moreCoreExpandableSection.medium > #headerContainer > div > *:is(h1, h2, h3, h5, h6 ) { display: none; } .moreCoreExpandableSection.large > #headerContainer > div > *:is(h3, h4, h5, h6 ) { display: none; } .moreCoreExpandableSection > #headerContainer { border-top-left-radius: inherit; border-top-right-radius: inherit; } .moreCoreExpandableSection:not(.expanded) > #headerContainer { border-radius: inherit; } .moreCoreExpandableSection > #modalContainer { /* modaler, fix statischer Container, der nur zum Ausmessen des Contents dient*/ background-color: rgba(255, 120, 50, 0.3); pointer-events: none; visibility: hidden; position: fixed; left: 0; top: 0; } .moreCoreExpandableSection > #headerContainer > div > * > #expanderIcon { transition: transform var(--transitionDurationLong) ease 0s; } .moreCoreExpandableSection:not(:default) /*, .moreCoreExpandableSection:not(:default) #headerContainer*/ { transition-property: opacity, color, border-color; transition-duration: var(--transitionDurationLong); } .moreCoreExpandableSection > #headerContainer { transition-property: background-color, box-shadow; user-select: none; /*transition-duration: var(--transitionDurationLong);*/ } /* wenn Inhalt leer (Expander hat nix erhalten)*/ .moreCoreExpandableSection._emptyChild { color: var(--warning); background-color: var(--warningBG); outline: 2px solid var(--warning); outline-offset: 2px; } .moreCoreExpandableSection > .expandingContent { display: none; padding: var(--padding); --knownHeight: 200px; /* Anfangswert...*/ } .moreCoreExpandableSection > .expandingContent.animate { transition-property: opacity, max-height; transition-duration: var(--animationDuration); pointer-events: none; opacity: 0; max-height: 0; overflow: hidden; display: block; } .moreCoreExpandableSection.expanded > .expandingContent.animate { transition-duration: var(--animationDuration); max-height: var(--knownHeight); overflow: hidden; } .moreCoreExpandableSection.expanded > .expandingContent { opacity: 1; display: block; box-shadow: inset 0px 3px 3px -3px var(--darkTransparent); } /* EMPTY: es ist wirklich nix von Interesse im Expander */ .moreCoreExpandableSection.empty:not(.expanded) > #headerContainer { /*opacity:0.6;*/ /*color:var(--medium);*/ } .moreCoreExpandableSection.empty:not(.expanded) > #headerContainer > div > * > #expanderIcon { /*opacity:0;*/ } .moreCoreExpandableSection.empty:not(.expanded) { border-color: var(--mediumBright); } /* WARNING: es fehlen Angaben (quasi mandatory) oder sonst irgend ein Problem */ .moreCoreExpandableSection.warning > #headerContainer { background-color: var(--warningBG); color: var(--warning); } .moreCoreExpandableSection.warning { border-color: var(--warning); } .moreCoreExpandableSection.warning > #headerContainer > #headerTxt > *:is(h2, h3, h4, h5, h6)::after { content: '\f071'; color: var(--warning); font-family: var(--fontawesome); font-weight: bold; float: right; } .moreCoreExpandableSection.hidden { display: none; } .moreCoreExpandableSection.default.expanded > #headerContainer { background-color: var(--brightTransparent); /*color:var(--accentThemeL4txt);*/ } /* HAS CONTENT: es ist Inhalt im Expander. der Bereich ist ausgefüllt, es ist etwas von Interesse drin. */ .moreCoreExpandableSection:is(.hasContent, .highlight):not(.expanded) { border-color: var(--accentTheme); } .moreCoreExpandableSection:is(.hasContent, .highlight) > #headerContainer { background-color: var(--accentThemeTransparent); /*color:var(--accentThemeL4txt);*/ } /* CHECKED: der Bereich ist "erfolgreich ausgefüllt" (zB. für Abschnitte in Formularen) */ .moreCoreExpandableSection.checked { outline: 1px solid var(--accentThemeD1); outline-offset: -1px; } .moreCoreExpandableSection.checked > #headerContainer { background-color: var(--accentThemeTransparent); /*color: var(--accentThemeL5txt);*/ } .moreCoreExpandableSection.checked > #headerContainer > #headerTxt > *:is(h2, h3, h4, h5, h6)::after { content: '\f00c'; margin-left: 0.5em; color: var(--accentThemeD1); font-family: var(--fontawesome); font-weight: bold; float: right; } .agendaView .show { z-index: 10; } .agendaView #topContainer { display: flex; flex-flow: column; align-items: center; } .agendaViewCard { background-color: var(--mds-blue); } .agendaViewCard header { background-color: var(--mds-gray); } .agendaViewCard div { background-color: var(--mds-light-gray-transparent); } .agendaView .animateTr { animation-name: groupHeaderAnimation; animation-duration: 1s; animation-iteration-count: 3; animation-timing-function: ease-in-out; } @keyframes groupHeaderAnimation { to { background-color: var(--mds-dark-transparent); } } .agendaView .datePicker { } .datePicker { --inactive: var(--secondary); --weekendTxt: var(--w3Red); --baseFontSize: 1rem; --popupFontSize: 0.9em; --calendarFontSize: 0.9em; --baseSizeUnit: 32px; /* Basiseinheit für Tage und Menüs, multipliziert mit Höhen und Breiten */ --heightFactor: 1; /* Seitenverhältnis Breite */ --widthFactor: 1.1; /* Seitenverhältnis Höhe */ --menuHeightFactor: 0.9; /* Höhenmultiplikator für Menüleiste oben */ --todayColor: var(--complimentaryTheme); /* Farbe die 'heute' markiert */ --todayColorTxt: var(--complimentaryThemeTxt); /* Farbe die 'heute' markiert */ --selectedColor: var(--primary); /* vom Benutzer gewählt (oder vorausgewählt)*/ --selectedColorTxt: var(--primaryText); /* vom Benutzer gewählt (oder vorausgewählt)*/ --weekendColor: var(--warning); /* Wochenend-Markierungen */ --borderWidth: 2px; } .datePicker { font-size: var(--baseFontSize); width:fit-content; } /* .datePicker > div { display: grid; grid-template-columns: repeat(7, 20px [col-start]); } */ .datePicker *:has(table) { /*border-collapse: collapse;*/ width:100%; min-width:15rem; overflow-x:auto; }.datePicker table { /*border-collapse: collapse;*/ table-layout: fixed; width:100%; } .datePicker tr { height: 5px; /* die Höhe von tr wächst sowieso mit dem Inhalt. Ohne height können die tds aber nicht auf 100% wachsen!*/ min-height: 5px; } .datePicker td { height: 100%; } .datePicker.popupActive .daySelectorCell { opacity: 0.6; pointer-events: none; width: 14%; min-width: calc( 12px * var(--widthFactor)); } .datePicker .daySelector { min-height: calc(var(--baseSizeUnit) * var(--heightFactor)); /*min-width: calc( 12px * var(--widthFactor));*/ width:100%; font-size: var(--calendarFontSize); } .datePicker .daySelector.inactive, .datePicker .daySelector.othermonth { pointer-events: none; opacity: 0.5; } .datePicker .daySelector.today { /*font-weight: bold;*/ /*outline: var(--borderWidth) solid var(--todayColor);*/ /*background-color: var(--todayColor);*/ /*outline-offset: calc(-1 * var(--borderWidth));*/ /*box-shadow: inset 0px calc(1 * var(--borderWidth)) var(--todayColor);*/ border-radius: calc(1 * var(--round)); --currentColor: var(--todayColor); } .datePicker .daySelector.today .daySelectorLabel { } .datePicker .daySelector.today .daySelectorLabel > #dayNo { border-radius: 10em; outline: 2px solid var(--todayColor); background-color: var(--todayColor); color: var(--todayColorTxt); font-weight: bold; } /* Tage im Kalender, die nicht mehr zum gewählten Monat gehören: */ .datePicker .daySelector.othermonth { visibility: hidden; } .datePicker .daySelector.selected { font-weight: bold; /*outline: var(--borderWidth) solid var(--selectedColor);*/ background-color: var(--selectedColor); --currentColor: var(--selectedColor); color: var(--selectedColorTxt); } /* im Agendaview-Mode: Tageslabel immer nach oben links rücken. Die Icons darunter stehen im Mittelpunkt*/ .datePicker .daySelectorIconContainer { display: none; } .datePicker.agendamode .daySelectorIconContainer { display: flex; gap: 0.3em; flex-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 0.9em; color: var(--dark); } .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer{ position:relative; } .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer.multiple::after { display:block; } .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer::after { display: none; content: attr(entryCount); position: absolute; left: 50%; bottom: 0em; border-radius: var(--roundest); padding: 0.05em 0.2em; line-height: 1.1; font-size: 0.7em; background: rgba(255,255,255,0.8); } .darkTheme .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer::after { background: rgba(0,0,0,0.6); color:var(--brightText); } .datePicker .daySelectorCell .daySelectorIconContainer i { text-shadow: 1px 1px 0px var(--dark); } .datePicker .daySelectorCell .daySelector.selected .daySelectorIconContainer i { color: var(--selectedColorTxt); } .datePicker.agendamode .daySelectorCell { vertical-align: top; } .datePicker.agendamode .daySelectorCell .daySelector, .datePicker.agendamode .daySelectorCell.selected .daySelector, .datePicker.agendamode .daySelectorCell.today .daySelector { border-right: 1px solid var(--currentColor); border-top: 1px solid var(--currentColor); justify-content: start; } .datePicker.agendamode .daySelectorLabel { text-align: left; font-size: 0.7em; margin-left: 2px; } .datePicker button { /*border: 0px;*/ } .datePicker button:hover { /*border: 0px;*/ /*box-shadow: rgba(136,136,136, 0.2) 0px 0px 0px 100px inset;*/ } .datePicker table input[type=button] { /*background-color: initial; width: 100%;*/ } .datePicker #menuContainer { gap: 0.2em; position: relative; z-index:1; } .datePicker #menuContainer button { background-color: var(--tertiary); height: calc(var(--menuHeightFactor) * var(--baseSizeUnit)); } .datePicker .daySelectorCell { } .datePicker.showEntries .daySelectorCell .daySelector { justify-content: start; } .datePicker.showEntries .daySelectorCell { border-bottom: 1px solid var(--tertiary); } .datePicker.showEntries .daySelectorCell:not(:first-child) { border-left: 1px solid var(--tertiary); } .datePicker.popupActive .daySelectorCell { opacity: 0.6; pointer-events: none; } .datePicker .daySelectorCell .daySelector { display: flex; flex-direction: column; justify-content: center; border-radius: calc(1 * var(--round)); } .datePicker #monthMenuButton { flex-grow: 1; } .datePicker #yearMenuButton { flex-grow: 0.5; } .datePicker #monthMenuButton, .datePicker #yearMenuButton { position: relative; border-radius: 0; } .datePicker #previousMonthButton { border-top-right-radius: 0; border-bottom-right-radius: 0; } .datePicker #nextMonthButton { border-top-left-radius: 0; border-bottom-left-radius: 0; } .datePicker #monthMenuButton.show, .datePicker #yearMenuButton.show { background-color: var(--selectedColor); color: var(--selectedColorTxt); } .datePicker #monthMenuButton.show:hover, .datePicker #yearMenuButton.show:hover { /*box-shadow:none;*/ } .datePicker #monthMenuButton:before, .datePicker #yearMenuButton:before { margin-right: 0.4em; font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/ font-weight: bold; content: '\f0d7'; /* caret down */ } .datePicker #monthMenuButton.show:before, .datePicker #yearMenuButton.show:before { content: '\f0d8'; /* caret up */ } .datePicker #yearselectorPopup.show, .datePicker #monthselectorPopup.show { display: flex; } .datePicker #monthselectorPopup, .datePicker #yearselectorPopup { position: absolute; background-color: var(--bright); display: none; /*width: 200px;*/ flex-direction: column; font-size: var(--popupFontSize); /*top:0;*/ left: 0; width: 100%; max-height: calc(18 * var(--baseFontSize)); overflow-y: auto; font-weight: normal; cursor: default; } .datePicker #monthselectorPopup .monthSelect, .datePicker #yearselectorPopup .yearSelect { text-align: center; background-color: var(--bright); border: 0px; padding: var(--paddingSmall); border-radius: var(--round); } .datePicker #yearselectorPopup .yearSelect.currentvalue::before, .datePicker #monthselectorPopup .monthSelect.currentvalue::before { content: '\f274'; /* calendar-check */ /* '\f00c'; /* check */ font-family: var(--fontawesome); font-weight: bold; margin-right: 0.4em; } .datePicker #yearselectorPopup .yearSelect.current, .datePicker #monthselectorPopup .monthSelect.current { outline: var(--borderWidth) solid var(--todayColor); /*background-color: var(--todayColor);*/ outline-offset: calc(-2 * var(--borderWidth)); } .datePicker #yearselectorPopup .yearSelect.selected, .datePicker #monthselectorPopup .monthSelect.selected { background-color: var(--selectedColor); color: var(--selectedColorTxt); pointer-events: none; font-weight: bold; } .datePicker .weekend { /*font-weight: bold;*/ color: var(--weekendTxt); --currentColor: var(--weekendTxt); /*width: 30px!important; LH*/ } .datePicker .default:hover { } .datePicker .weekdaysRow .header { color: var(--secondary); /*font-weight: bold;*/ /*width: 30px!important; LH*/ text-align: center; padding: var(--paddingSmall); } .datePicker table tr td { text-align: center; } .datePicker table td:first-child { /*padding-left: 0;*/ } /* .datePicker table td div:hover { box-shadow: rgba(136,136,136, 0.2) 0px 0px 0px 100px inset; } */ .datePicker td { border: 0px; } /* PROGRESSBAR */ .moreCoreProgressbarRoot { --animationDuration: 100ms; --progress: 0%; --progressLabel: 0%; /* isolation:isolate;*/ border-radius: var(--round); height: 100%; position: relative; } .moreCoreProgressbarRoot dialog#modalContainer { min-width: min(55rem, 95vw); width: min(55rem, 100vw); max-height: 30rem; min-height: 2rem; overflow: hidden; position: relative; } .moreCoreProgressbarRoot #modalContainer #dialogContent { border-radius: inherit; } .moreCoreProgressbarRoot #barContainer { border-radius: inherit; min-height: 12px; max-width: 100%; /*overflow:hidden;*/ overflow-x: clip; overflow-y: visible; margin-bottom: var(--paddingY); } /* Messagecontainer unterhalb platzieren, wenn nicht modal: */ .moreCoreProgressbarRoot > #messageContainer { border: 1px solid var(--accentThemeL1); border-top: 0; border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0 !important; padding: var(--paddingSmall); min-width: min-content; max-width: var(--progress) !important; overflow: hidden; transition: var(--animationDuration) max-width ease-out; } .moreCoreProgressbarRoot > #messageContainer > * { margin: 0 !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .moreCoreProgressbarRoot #dialogContent > #barContainer { min-height: 18px; } .moreCoreProgressbarRoot #noResponseOverlay { opacity: 0; background-color: var(--mediumTransparent); font-size: 1.1em; color: var(--secondary); position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; /*backdrop-filter:blur(2px);*/ transition: 0s opacity; overflow: hidden; } .moreCoreProgressbarRoot.noResponse #noResponseOverlay { opacity: 1; transition-duration: 1s; } .moreCoreProgressbarRoot #barContainer > #bar { height: 100%; min-height: inherit; transition-property: width; width: var(--progress); transition-duration: var(--animationDuration); transition-timing-function: ease-out; border-radius: inherit; position: relative; } .moreCoreProgressbarRoot #barContainer > #bar > #progressLabel { position: absolute; z-index: 1; display: block; color: inherit; background-color: inherit; border-radius: var(--rounder); border-top-left-radius: 0px; left: 100%; top: calc(100% + 2px); padding: var(--paddingSmall); min-width: 4ch; text-align: center; /*color:red; border:2px solid blue; background-color:purple;*/ transition-property: transform, opacity; transition-duration: 0.2s; } .moreCoreProgressbarRoot #dialogHeader { } .moreCoreProgressbarRoot #dialogContent > #barContainer { } .moreCoreProgressbarRoot #dialogContent > #barContainer > #bar > #progressLabel { background-color: inherit; top: 50%; transform: translateX(-100%) translateY(-50%); padding: var(--paddingSmall); min-width: unset; text-align: center; padding: unset; background-color: transparent; border-radius: 0; font-size: 85%; /*color:red; border:2px solid blue; background-color:purple;*/ transition-property: unset; } .moreCoreProgressbarRoot.null > #barContainer > #bar > #progressLabel { color: var(--secondaryText); background-color: var(--secondary); } .moreCoreProgressbarRoot.full > #barContainer > #bar > #progressLabel { color: var(--complimentaryText); background-color: var(--complimentary); } .moreCoreProgressbarRoot.leftLabel #barContainer > #bar > #progressLabel { border-radius: inherit; border-top-right-radius: 0px; transform: translateX(calc(-101% - 2px)); } .moreCoreProgressbarRoot #messageContainer > *:not(:last-child) { color: var(--darkTransparent); } .moreCoreProgressbarRoot #messageContainer > p::before { content: '\f111'; font-weight: bold; font-family: var(--fontawesome); color: var(--mediumTransparent); margin-right: 0.5em; } .moreCoreProgressbarRoot #messageContainer > *:not(:last-child)::before, .moreCoreProgressbarRoot.full #messageContainer > p::before { content: '\f00c'; color: var(--primary); }