/* ==================================== NATIVE LOOK (only active with class="p11-mobile") ==================================== Use when native appearance is needed ------------------------------------ Use when a native look is not needed ------------------------------------ */ :root { /* DEFAULT CONFIGURATION */ --p11-footer-fix: 0px; --p11-safe-area-top: env(safe-area-inset-top, 0px); --p11-safe-area-bottom: env(safe-area-inset-bottom, 0px); --p11-main-padding-bottom: 15px; --p11-swipe-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --p11-overlay-bg: #000000; --p11-overlay-max-opacity: 0.5; } /* 1. GLOBAL BASE - VIEWPORT FIXATION */ html.p11-mobile, html.p11-mobile body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden !important; /* Prevents layout expansion */ position: fixed; inset: 0; -webkit-tap-highlight-color: transparent; touch-action: pan-y; box-sizing: border-box; } html.p11-mobile body { display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; } /* 2. THE SWIPE CONTAINER (#app) */ .p11-mobile #app { height: 100%; width: 100%; display: flex; flex-direction: column; min-height: 0; transition: transform var(--p11-swipe-transition); will-change: transform; overflow-y: hidden; /* Respect Safe Areas */ padding-top: var(--p11-safe-area-top); padding-bottom: var(--p11-safe-area-bottom); box-sizing: border-box; } /* 3. INTERACTION */ .p11-mobile input, .p11-mobile textarea, .p11-mobile [contenteditable="true"], .p11-mobile .selectable { -webkit-user-select: text; user-select: text; } .p11-mobile button, .p11-mobile .btn, .p11-mobile [role="button"] { touch-action: manipulation; cursor: pointer; } /* 4. SCROLL AREAS */ .p11-mobile main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; padding-top: 0px; padding-bottom: var(--p11-main-padding-bottom); } .p11-mobile .scrollable, .p11-mobile .overflow-auto, .p11-mobile .overflow-y-auto { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; } /* 5. SYSTEM & SAFE AREAS */ .p11-mobile .status-bar-safe-area { position: fixed; top: 0; height: var(--p11-safe-area-top); z-index: 10000; pointer-events: none; } /* 6. FOOTER & NAVIGATION */ .p11-mobile footer, .p11-mobile .footer, .p11-mobile .fixed-bottom { position: fixed; left: 0; right: 0; z-index: 1000; /* Combined fix for dynamic logic and Safe Areas */ bottom: var(--p11-footer-fix); margin-bottom: var(--p11-safe-area-bottom); } /* 7. MODALS & OVERLAYS */ .p11-mobile .modal, .p11-mobile .modal-backdrop { top: 0 !important; padding-top: 0 !important; } .p11-mobile #p11-swipe-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--p11-overlay-bg); opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; z-index: -1; box-sizing: border-box; } /* BLAZOR ERROR UI */ .p11-mobile #blazor-error-ui { background: #fff3cd; color: #856404; bottom: 0; display: none; position: fixed; width: 100%; z-index: 20000; padding: 0.75rem 1.25rem; } .p11-mobile #blazor-error-ui.show { display: block !important; } /* ==================================== */ /* ==================================== P11AccordionNative ==================================== */ /* Haupt-Panel-Container */ .tpc-accordion-nativ { border-color: var(--tpc-accordion-border-color); border-radius: var(--tpc-accordion-border-radius); box-shadow: var(--tpc-accordion-shadow); } /* Header-Bereich */ .tpc-accordion-nativ > summary { background-color: var(--tpc-accordion-header-bg); color: var(--tpc-accordion-header-color); padding: var(--tpc-accordion-header-padding); } /* Titel-Text */ .tpc-accordion-nativ > summary .fw-bold { font-weight: var(--tpc-accordion-title-font-weight); font-size: var(--tpc-accordion-title-size); } /* Inhaltsbereich */ .tpc-accordion-nativ > div { background-color: var(--tpc-accordion-content-bg); color: var(--tpc-accordion-content-color); padding: var(--tpc-accordion-content-padding); } /* Das Icon im Header */ .native-accordion-icon { color: var(--tpc-accordion-icon-color); } /* MINIMAL CUSTOM CSS: Hide the native disclosure marker of the summary element. This is essential as Bootstrap doesn't provide a class for this, and we want to use our own icon. */ details > summary::-webkit-details-marker { display: none; } details > summary::marker { /* Standard syntax for the native marker */ display: none; } /* Rotate the custom Bootstrap Icon based on the native details 'open' attribute. */ details[open] .native-accordion-icon { transform: rotate(-180deg); transition: transform 0.2s ease-in-out; /* Smooth rotation */ } details:not([open]) .native-accordion-icon { transform: rotate(0deg); transition: transform 0.2s ease-in-out; /* Smooth rotation */ } /* Ensure the summary has a pointer cursor to indicate it's clickable */ summary { cursor: pointer; } /* ==================================== */ /* ==================================== P11DrawerNative ==================================== */ /* P11DrawerNative.razor.css */ /* Base drawer styles */ .tpc-drawer { position: fixed; background-color: var(--tpc-drawer-bg); box-shadow: var(--tpc-drawer-shadow); transition: transform var(--tpc-drawer-transition-duration) ease-in-out; z-index: var(--tpc-drawer-z-index); display: flex; flex-direction: column; pointer-events: none; visibility: hidden; } /* Open states */ .tpc-drawer--open { transform: translateX(0) translateY(0) !important; pointer-events: auto; visibility: visible; } /* Positioning - Left */ .tpc-drawer--left { top: 0; left: 0; height: 100vh; width: var(--tpc-drawer-width); transform: translateX(-100%); } .tpc-drawer--left.tpc-drawer--open { transform: translateX(0); } /* Positioning - Right */ .tpc-drawer--right { top: 0; right: 0; height: 100vh; width: var(--tpc-drawer-width); transform: translateX(100%); } .tpc-drawer--right.tpc-drawer--open { transform: translateX(0); } /* Positioning - Top */ .tpc-drawer--top { top: 0; left: 0; width: 100vw; height: var(--tpc-drawer-height); transform: translateY(-100%); } .tpc-drawer--top.tpc-drawer--open { transform: translateY(0); } /* Positioning - Bottom */ .tpc-drawer--bottom { bottom: 0; left: 0; width: 100vw; height: var(--tpc-drawer-height); transform: translateY(100%); } .tpc-drawer--bottom.tpc-drawer--open { transform: translateY(0); } /* Drawer content */ .tpc-drawer-content { padding: var(--tpc-drawer-padding); overflow-y: auto; flex-grow: 1; } /* Drawer title */ .tpc-drawer-title { margin-top: 0; margin-bottom: 1rem; font-size: var(--tpc-drawer-title-font-size); font-weight: var(--tpc-drawer-title-font-weight); } /* Close button */ .tpc-drawer-close-btn { position: absolute; top: var(--tpc-drawer-close-top-offset); right: var(--tpc-drawer-close-right-offset); background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--tpc-drawer-close-color); cursor: pointer; padding: 0; opacity: 0.5; transition: opacity var(--tpc-drawer-transition-duration) ease-in-out; z-index: 1; } .tpc-drawer-close-btn:hover { opacity: var(--tpc-drawer-close-hover-opacity); } /* Overlay styles */ .tpc-drawer-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--tpc-drawer-overlay-bg); z-index: var(--tpc-drawer-overlay-z-index); opacity: 0; transition: opacity var(--tpc-drawer-transition-duration) ease-in-out; } .tpc-drawer--open + .tpc-drawer-overlay { opacity: 1; } /* Development warning */ .tpc-drawer-dev-warning { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 600px; z-index: 9999; border: 2px solid var(--bs-danger, #dc3545); } .tpc-drawer--fullscreen { /* Setzt die Größe auf den gesamten Viewport */ width: 100vw; height: 100vh; /* Positioniert den Drawer explizit am oberen linken Rand */ top: 0; left: 0; right: 0; bottom: 0; /* Deaktiviert die transform-Logik der Standard-Positionen */ transform: none; } .tpc-drawertest--fullscreen { padding: 0 5px !important; } /* ==================================== */ /* ==================================== P11Dropdown ==================================== */ /* Overlay bedeckt die ganze Seite, liegt aber UNTER dem Dropdown */ .p11-dropdown-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9990; /* Unter allen Panels */ background: transparent; cursor: default; } .dropdown { position: relative; /* Kein z-index mehr hier - wird pro Panel gesetzt */ } .dropdown-menu { position: absolute; /* z-index wird jetzt per style-Attribut gesetzt */ } /* Positionierungsklassen bleiben gleich */ .p11-dropdown-topstart { bottom: 100%; top: auto; left: 0; right: auto; margin-bottom: 0.25rem; } .p11-dropdown-topcenter { bottom: 100%; top: auto; left: 50%; right: auto; transform: translateX(-50%); margin-bottom: 0.25rem; } .p11-dropdown-topend { bottom: 100%; top: auto; left: auto; right: 0; margin-bottom: 0.25rem; } .p11-dropdown-bottomstart { top: 100%; bottom: auto; left: 0; right: auto; margin-top: 0.25rem; } .p11-dropdown-bottomcenter { top: 100%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); margin-top: 0.25rem; } .p11-dropdown-bottomend { top: 100%; bottom: auto; left: auto; right: 0; margin-top: 0.25rem; } .p11-dropdown-bottom { top: 100%; bottom: auto; left: 0; right: 0; margin-top: 0.25rem; } .p11-dropdown-left { top: 0; bottom: auto; right: 100%; left: auto; margin-right: 0.25rem; } .p11-dropdown-right { top: 0; bottom: auto; left: 100%; right: auto; margin-left: 0.25rem; } /* ==================================== */ /* ==================================== P11Dropdown ==================================== */ /* * Central variables for the entire panel. * These are now defined in your ThemeStyle component and can be overridden. */ .tpc-floating-panel { /* Using the variables */ background-color: var(--tpc-panel-bg); border: var(--tpc-panel-border); box-shadow: var(--tpc-panel-shadow); /* min-width: var(--tpc-panel-min-width); */ border-radius: var(--tpc-panel-border-radius); /* Static properties that don't need to be adjusted */ position: absolute; text-align: left; display: block; overflow: hidden; touch-action: none; -ms-touch-action: none; transition: z-index 0.1s ease-in-out; } /* * Header section. */ .tpc-floating-panel-header { /* Using the variables */ padding: var(--tpc-panel-header-padding); background-color: var(--tpc-panel-header-bg); color: var(--tpc-panel-header-color); border-top-left-radius: var(--tpc-panel-header-radius); border-top-right-radius: var(--tpc-panel-header-radius); /* Static properties */ cursor: grab; display: flex; justify-content: space-between; align-items: center; } .tpc-floating-panel-header:active { cursor: grabbing; } /* * Title section */ .tpc-floating-panel-title { /* Using the variables */ font-weight: var(--tpc-panel-title-weight); font-size: var(--tpc-panel-title-size); /* Static properties */ flex-grow: 1; } /* * Close button */ .tpc-floating-panel-close { /* Using the variables */ color: var(--tpc-panel-close-color); margin-left: var(--tpc-panel-close-margin-left); /* Static properties */ background: none; border: none; font-weight: bold; cursor: pointer; padding: 0; margin: 0; font-size: 16px; opacity: 0.8; } .tpc-floating-panel-close:hover { color: var(--tpc-panel-close-hover-color); opacity: 1; } /* * Content section */ .tpc-floating-panel-content { /* Using the variables */ background-color: var(--tpc-panel-content-bg); color: var(--tpc-panel-content-color); font-size: var(--tpc-panel-content-size); padding: var(--tpc-panel-content-padding); /* Static properties */ text-align: left; /* max-width: 300px; */ word-wrap: break-word; max-height: 300px; overflow-y: auto; } /* ==================================== */ /* ==================================== P11HoverEffect ==================================== */ /* base: animate child (or wrapper) smoothly */ .p11-hover-wrapper > * { transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease, border-color 0.28s ease; will-change: transform, box-shadow, filter, border; } /* SCALE: either on :hover OR if the class p11-hover-active is present */ .p11-hover-wrapper.p11-effect-scale:hover > *, .p11-hover-wrapper.p11-effect-scale.p11-hover-active > * { transform: scale(1.03); } /* SHADOW LIFT */ .p11-hover-wrapper.p11-effect-shadow-lift:hover > *, .p11-hover-wrapper.p11-effect-shadow-lift.p11-hover-active > * { box-shadow: var(--bs-box-shadow-lg) !important; } /* SCALE + SHADOW */ .p11-hover-wrapper.p11-effect-scale-and-shadow:hover > *, .p11-hover-wrapper.p11-effect-scale-and-shadow.p11-hover-active > * { transform: scale(1.03); box-shadow: var(--bs-box-shadow-lg) !important; } /* BORDER GLOW */ .p11-hover-wrapper.p11-effect-border-glow:hover > *, .p11-hover-wrapper.p11-effect-border-glow.p11-hover-active > * { box-shadow: 0 0 0.5rem 0.2rem rgba(var(--bs-primary-rgb), 0.5) !important; border-color: var(--bs-primary) !important; } /* QUICK TILT - HIGH SPECIFICITY */ .p11-hover-wrapper.p11-effect-quick-tilt:hover > *, .p11-hover-wrapper.p11-effect-quick-tilt.p11-hover-active > * { transform: perspective(500px) rotateY(5deg) !important; } /* QUICK TILT EXTRA SPECIFICITY FOR IMAGES */ .p11-hover-wrapper.p11-effect-quick-tilt:hover > img, .p11-hover-wrapper.p11-effect-quick-tilt.p11-hover-active > img { transform: perspective(500px) rotateY(5deg) !important; } /* QUICK TILT EXTRA SPECIFICITY FOR BUTTONS */ .p11-hover-wrapper.p11-effect-quick-tilt:hover > button, .p11-hover-wrapper.p11-effect-quick-tilt.p11-hover-active > button { transform: perspective(500px) rotateY(5deg) !important; } /* QUICK TILT LEFT */ .p11-hover-wrapper.p11-effect-quick-tilt-left:hover > *, .p11-hover-wrapper.p11-effect-quick-tilt-left.p11-hover-active > * { transform: perspective(500px) rotateY(-5deg) !important; } /* QUICK TILT EXTRA SPECIFICITY FOR IMAGES */ .p11-hover-wrapper.p11-effect-quick-tilt-left:hover > img, .p11-hover-wrapper.p11-effect-quick-tilt-left.p11-hover-active > img { transform: perspective(500px) rotateY(-5deg) !important; } /* QUICK TILT EXTRA SPECIFICITY FOR BUTTONS */ .p11-hover-wrapper.p11-effect-quick-tilt-left:hover > button, .p11-hover-wrapper.p11-effect-quick-tilt-left.p11-hover-active > button { transform: perspective(500px) rotateY(-5deg) !important; } /* BRIGHTNESS PULSE */ .p11-hover-wrapper.p11-effect-brightness-pulse:hover > *, .p11-hover-wrapper.p11-effect-brightness-pulse.p11-hover-active > * { filter: brightness(1.15); } /* BORDER FLASH */ .p11-hover-wrapper.p11-effect-border-flash:hover > *, .p11-hover-wrapper.p11-effect-border-flash.p11-hover-active > * { border: 4px solid var(--bs-primary) !important; } /* PRESS DOWN */ .p11-hover-wrapper.p11-effect-press-down:hover > *, .p11-hover-wrapper.p11-effect-press-down.p11-hover-active > * { transform: scale(0.96) translateY(2px); box-shadow: var(--bs-box-shadow-sm) inset !important; } /* BORDER BOTTOM GRADIENT SLIDE-IN */ .p11-hover-wrapper.p11-effect-border-bottom-gradient > * { background-image: linear-gradient(to right, var(--bs-primary) 100%, transparent 0); background-size: 0 3px; background-repeat: no-repeat; background-position: left bottom; transition: background-size 0.3s ease; } .p11-hover-wrapper.p11-effect-border-bottom-gradient:hover > *, .p11-hover-wrapper.p11-effect-border-bottom-gradient.p11-hover-active > * { background-size: 100% 3px; /* füllt die ganze Breite */ } /* FLIP CARD */ /* Basiscontainer für die Flip-Card */ .p11-hover-wrapper.p11-effect-flip > * { perspective: 1000px; } /* Inneres, das sich dreht */ .flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } /* Drehen bei Hover */ .p11-hover-wrapper.p11-effect-flip:hover .flip-inner, .p11-hover-wrapper.p11-effect-flip.p11-hover-active .flip-inner { transform: rotateY(180deg); } /* Vorder- und Rückseite */ .p11-flip-front, .p11-flip-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } /* Rückseite wird auf 180° gespiegelt */ .p11-flip-back { transform: rotateY(180deg); } /* Rotate right */ .p11-hover-wrapper.p11-effect-rotate:hover > *, .p11-hover-wrapper.p11-effect-rotate.p11-hover-active > * { transform: rotate(3deg); } /* Rotate left */ .p11-hover-wrapper.p11-effect-rotate-left:hover > *, .p11-hover-wrapper.p11-effect-rotate-left.p11-hover-active > * { transform: rotate(-3deg); } /* Pulse */ .p11-hover-wrapper.p11-effect-pulse:hover > * { animation: p11-pulse 0.5s; } @keyframes p11-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } /* Shake */ .p11-hover-wrapper.p11-effect-shake:hover > * { animation: p11-shake 0.4s; } @keyframes p11-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* Swing */ .p11-hover-wrapper.p11-effect-swing:hover > * { animation: p11-swing 0.6s ease-in-out; } @keyframes p11-swing { 20% { transform: rotate(6deg); } 40% { transform: rotate(-4deg); } 60% { transform: rotate(2deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0); } } /* Skew right */ .p11-hover-wrapper.p11-effect-skew:hover > *, .p11-hover-wrapper.p11-effect-skew.p11-hover-active > * { transform: skewX(5deg); } /* Skew left */ .p11-hover-wrapper.p11-effect-skew-left:hover > *, .p11-hover-wrapper.p11-effect-skew-left.p11-hover-active > * { transform: skewX(-5deg); } /* Wrapper für Slide-In Effekt */ /* .p11-hover-wrapper.p11-effect-slide-in { position: relative; overflow: hidden; } */ /* Der zusätzliche Content (Overlay), standardmäßig versteckt */ /* .p11-hover-wrapper.p11-effect-slide-in .slide-in-content { position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; background: rgba(var(--bs-dark-rgb), 0.8); color: #fff; display: flex; align-items: center; justify-content: center; transition: bottom 0.4s ease; padding: 1rem; text-align: center; } */ /* Beim Hover sichtbar machen */ /* .p11-hover-wrapper.p11-effect-slide-in:hover .slide-in-content, .p11-hover-wrapper.p11-effect-slide-in.p11-hover-active .slide-in-content { bottom: 0; } */ /* Wrapper für Slide-In Effekte */ /* Wrapper für Slide-In Effekt */ .p11-hover-wrapper.p11-effect-slide-in { position: relative; overflow: hidden; } /* Gemeinsame Styles für alle Slide-In Contents */ .p11-hover-wrapper.p11-effect-slide-in .slide-in-content { position: absolute; width: 100%; height: 100%; background: rgba(var(--bs-dark-rgb), 0.8); color: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; padding: 1rem; text-align: center; } /* Slide-In von UNTEN (wie bisher) */ .p11-hover-wrapper.p11-effect-slide-in .slide-in-content.slide-from-bottom { bottom: -100%; left: 0; } .p11-hover-wrapper.p11-effect-slide-in:hover .slide-in-content.slide-from-bottom, .p11-hover-wrapper.p11-effect-slide-in.p11-hover-active .slide-in-content.slide-from-bottom { bottom: 0; } /* Slide-In von OBEN */ .p11-hover-wrapper.p11-effect-slide-in .slide-in-content.slide-from-top { top: -100%; left: 0; } .p11-hover-wrapper.p11-effect-slide-in:hover .slide-in-content.slide-from-top, .p11-hover-wrapper.p11-effect-slide-in.p11-hover-active .slide-in-content.slide-from-top { top: 0; } /* Slide-In von RECHTS */ .p11-hover-wrapper.p11-effect-slide-in .slide-in-content.slide-from-right { right: -100%; top: 0; } .p11-hover-wrapper.p11-effect-slide-in:hover .slide-in-content.slide-from-right, .p11-hover-wrapper.p11-effect-slide-in.p11-hover-active .slide-in-content.slide-from-right { right: 0; } /* Slide-In von LINKS */ .p11-hover-wrapper.p11-effect-slide-in .slide-in-content.slide-from-left { left: -100%; top: 0; } .p11-hover-wrapper.p11-effect-slide-in:hover .slide-in-content.slide-from-left, .p11-hover-wrapper.p11-effect-slide-in.p11-hover-active .slide-in-content.slide-from-left { left: 0; } /* ==================================== */ /* ==================================== P11MediaPlayerNative ==================================== */ .tpc-media-player-native-container { margin-bottom: 1rem; max-width: 800px; /* Optional: Limit max width of the container */ margin-left: auto; margin-right: auto; } .tpc-media-player-native-container video, .tpc-media-player-native-container audio { width: 100%; /* Make media element responsive within its container */ display: block; /* Ensures no extra space below the element */ border: 1px solid #ccc; /* Simple border */ background-color: #000; /* Background for video before load / if no content */ } /* ==================================== */ /* ==================================== P11ModalNative ==================================== */ /* Erhöht den Header nur, wenn er im Native-Kontext (iPhone/Android) gerendert wird */ .modal-header.p11-native-header { /* Fügt den Abstand zur Statusleiste oben hinzu */ padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important; /* Optional: Falls der Header fixiert ist (p11-sticky-header) */ top: 0; z-index: 1051; } /* Stellt sicher, dass bei Fullscreen-Modals auf Mobile nichts abgeschnitten wird */ .modal-fullscreen .modal-content { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Sticky Header Logik */ .p11-sticky-header { position: sticky; top: 0; z-index: 1020; background-color: inherit; border-top-left-radius: inherit; border-top-right-radius: inherit; } /* Grundstruktur für die native Zentrierung */ .p11-native-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0.75rem 1rem !important; border-bottom: none !important; min-height: 56px; } .p11-header-separator { border-bottom: 1px solid #dee2e6 !important; } .p11-header-left, .p11-header-right { flex: 1; display: flex; align-items: center; min-width: 60px; } .p11-header-right { justify-content: flex-end; } .p11-header-center { flex: 2; display: flex; justify-content: center; align-items: center; text-align: center; min-width: 0; } .p11-modal-title-text { font-weight: 600; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* macOS: Ampel-Punkte */ .p11-btn-native-mac { width: 12px; height: 12px; border-radius: 50%; padding: 0; border: 1px solid rgba(0,0,0,0.1); display: inline-block; } .p11-mac-red { background-color: #ff5f56; border-color: #e0443e; cursor: pointer; } .p11-mac-red:hover { background-color: #ff3b30; } .p11-mac-green { background-color: #28c840; border-color: #24aa33; cursor: pointer; } .p11-mac-green:hover { background-color: #22a835; } .p11-mac-disabled { background-color: #e6e6e6; border-color: #d1d1d1; cursor: default; } /* Maximize Button Windows Style */ .p11-btn-maximize { background: none; border: none; padding: 0.5rem; margin-left: 5px; color: #6c757d; display: flex; align-items: center; cursor: pointer; transition: color 0.2s; } .p11-btn-maximize:hover { color: #000; } /* Mobile: Buttons (iOS Style) */ .p11-btn-native-mobile { background: none; border: none; color: #007aff; padding: 0; display: flex; align-items: center; font-size: 1.05rem; cursor: pointer; white-space: nowrap; } .p11-btn-native-mobile i { margin-right: 4px; font-size: 1.4rem; line-height: 1; } /* Windows Close Button Reset */ .p11-native-header .btn-close { margin: 0 0 0 10px; padding: 0.5rem; } /* ==================================== */ /* ==================================== P11SelectMultiple ==================================== */ .tpc-select-multiple { min-height: 8rem; resize: vertical; border: 1px solid var(--bs-border-color, #ced4da); border-radius: .375rem; padding: .5rem; background-color: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); } .tpc-select-multiple:focus { border-color: var(--bs-primary); outline: none; box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253), .25); } .tpc-select-multiple-wrapper { display: flex; flex-direction: column; gap: .25rem; } /* ==================================== */ /* ==================================== P11ShadowEffect ==================================== */ /* P11ShadowEffect.css - FULL VERSION WITH 15 SHADOW VARIANTS AND LAYER SUPPORT */ /* ------------------------------------- */ /* 1. BASE & FALLBACK STYLES */ /* ------------------------------------- */ .p11-shadow-wrapper { /* Sets the variable for color inheritance/customization. */ --p11-shadow-color: rgba(0, 0, 0, 0.15); } /* General styles for the child element (inherits variable, adds transition) */ .p11-shadow-wrapper > * { transition: box-shadow 0.3s ease; } /* ------------------------------------- */ /* 2. SHADOW GEOMETRY BY VARIANT & SIZE */ /* ------------------------------------- */ /* --- Shared Shadow Mixins (using CSS variables for clean repetition) --- */ /* These variables must be redefined for each size block (small, medium, large) to allow for size-specific adjustments. */ /* === SUBTLE SHADOW === */ .p11-shadow-subtle.p11-size-small > * { box-shadow: 0 0.5px 1px 0 var(--p11-shadow-color); } .p11-shadow-subtle.p11-size-medium > * { box-shadow: 0 1px 3px 0 var(--p11-shadow-color), 0 1px 2px -1px rgba(0, 0, 0, 0.1); } .p11-shadow-subtle.p11-size-large > * { box-shadow: 0 2px 4px 0 var(--p11-shadow-color), 0 2px 2px -1px rgba(0, 0, 0, 0.1); } /* === MEDIUM SHADOW === */ .p11-shadow-medium.p11-size-small > * { box-shadow: 0 2px 4px -1px var(--p11-shadow-color), 0 1px 2px -2px rgba(0, 0, 0, 0.1); } .p11-shadow-medium.p11-size-medium > * { box-shadow: 0 4px 6px -1px var(--p11-shadow-color), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .p11-shadow-medium.p11-size-large > * { box-shadow: 0 8px 10px -3px var(--p11-shadow-color), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* === LIFTED SHADOW === */ .p11-shadow-lifted.p11-size-small > * { box-shadow: 0 4px 8px -1px var(--p11-shadow-color), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .p11-shadow-lifted.p11-size-medium > * { box-shadow: 0 10px 15px -3px var(--p11-shadow-color), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .p11-shadow-lifted.p11-size-large > * { box-shadow: 0 15px 25px -5px var(--p11-shadow-color), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* === INSET SHADOW === */ .p11-shadow-inset.p11-size-small > * { box-shadow: inset 0 1px 3px 0 var(--p11-shadow-color); } .p11-shadow-inset.p11-size-medium > * { box-shadow: inset 0 2px 4px 0 var(--p11-shadow-color); } .p11-shadow-inset.p11-size-large > * { box-shadow: inset 0 4px 8px 0 var(--p11-shadow-color); } /* === COLOR GLOW SHADOW === */ .p11-shadow-color-glow.p11-size-small > * { box-shadow: 0 0 10px 0 var(--p11-shadow-color) !important; } .p11-shadow-color-glow.p11-size-medium > * { box-shadow: 0 0 15px 0 var(--p11-shadow-color) !important; } .p11-shadow-color-glow.p11-size-large > * { box-shadow: 0 0 25px 0 var(--p11-shadow-color) !important; } /* ------------------------------------- */ /* NEW: POSITIONAL & MODERN VARIANTS */ /* ------------------------------------- */ /* === TOP ONLY SHADOW === */ .p11-shadow-top-only.p11-size-medium > * { box-shadow: 0 -4px 6px -1px var(--p11-shadow-color); /* Only negative Y-offset */ } /* === BOTTOM ONLY SHADOW (Softer, wider) === */ .p11-shadow-bottom-only.p11-size-medium > * { box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2); /* Use a standard dark, wide shadow */ } /* === SHARP SHADOW (MD3-like, low blur) === */ .p11-shadow-sharp.p11-size-medium > * { box-shadow: 0 4px 0 0 var(--p11-shadow-color), 0 8px 0 0 rgba(0, 0, 0, 0.05); /* Two sharp layers */ } /* === AMBIENT SHADOW (Wide, transparent, little offset) === */ .p11-shadow-ambient.p11-size-medium > * { box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.08); /* Minimal offset, high blur, low opacity */ } /* ------------------------------------- */ /* NEW: COMPLEX & DYNAMIC VARIANTS */ /* ------------------------------------- */ /* === Z-DEPTH SHADOW (Simulates high elevation/layering) === */ .p11-shadow-z-depth.p11-size-medium > * { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } /* === DOUBLE LAYER SHADOW (Sharp contour + soft depth) === */ .p11-shadow-double-layer.p11-size-medium > * { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), /* Sharp contour */ 0 6px 10px 0 rgba(0, 0, 0, 0.08); /* Soft depth */ } /* === CONCAVE SHADOW (Stronger Inset) === */ .p11-shadow-concave.p11-size-medium > * { box-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, 0.25); } /* === FOCUS RING SHADOW (Thin, colored outline) === */ .p11-shadow-focus-ring.p11-size-medium > * { box-shadow: 0 0 0 3px var(--p11-shadow-color); /* Uses spread radius as thickness */ } /* ------------------------------------- */ /* NEW: ANIMATED & INTERACTIVE VARIANTS */ /* ------------------------------------- */ /* === PULSE SHADOW (Requires @keyframes ) === */ .p11-shadow-pulse.p11-size-medium > * { /* Set base shadow */ box-shadow: 0 4px 6px -1px var(--p11-shadow-color); animation: p11-pulse-shadow 2s infinite alternate; } @keyframes p11-pulse-shadow { from { box-shadow: 0 4px 6px -1px var(--p11-shadow-color), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } to { box-shadow: 0 8px 10px -3px var(--p11-shadow-color), 0 4px 6px -4px rgba(0, 0, 0, 0.15); } } /* === SOFT HOVER (Only applied on interaction) === */ /* The base shadow is NONE, and the transition handles the change */ .p11-shadow-soft-hover > * { box-shadow: none; } .p11-shadow-soft-hover:hover > *, .p11-shadow-soft-hover > *:hover, .p11-shadow-soft-hover > *:focus { box-shadow: 0 4px 8px -1px var(--p11-shadow-color); } /* ------------------------------------- */ /* 3. CONTEXTUAL OVERRIDES (p11-shadow-layer) */ /* ------------------------------------- */ /* The p11-shadow-layer class is applied to the modal/popup wrapper div. This rule targets the child element of the modal (e.g., the modal-content div) if that child element has the p11-shadow-layer class. We only need to override the box-shadow for the specific element that carries the class. */ /* Generic Rule: Target the element that actually has the "p11-shadow-layer" class (your modal-content). We assume the modal-content is a child of the p11-shadow-wrapper. */ .p11-shadow-wrapper .p11-shadow-layer { /* This ensures the shadow is applied directly to the modal content. We use !important only if absolutely necessary to override internal modal styles. */ box-shadow: var(--p11-final-shadow, none) !important; /* The modal-content itself must often define a high z-index, but we ensure the element carrying the shadow has the correct z-index */ } /* Since we cannot dynamically set --p11-final-shadow in CSS, we must redeclare the required shadow for the p11-shadow-layer element based on the variant and size. */ /* Example using ColorGlow (reusing original logic, but targeting the 'p11-shadow-layer' element) */ .p11-shadow-wrapper.p11-shadow-color-glow.p11-size-small .p11-shadow-layer { box-shadow: 0 0 10px 0 var(--p11-shadow-color) !important; } .p11-shadow-wrapper.p11-shadow-color-glow.p11-size-medium .p11-shadow-layer { box-shadow: 0 0 15px 0 var(--p11-shadow-color) !important; } .p11-shadow-wrapper.p11-shadow-color-glow.p11-size-large .p11-shadow-layer { box-shadow: 0 0 25px 0 var(--p11-shadow-color) !important; } /* HINWEIS: This layered approach ensures that the shadow is applied to the inner element (like modal-content) instead of the wrapper div, which is necessary when the inner element already carries its own class for layering/styling. */ /* ==================================== */ /* ==================================== P11OverlayNative ==================================== */ /* ==================================== P11OverlayNative (Final Version) ==================================== */ /* In deiner p11.css oder im