Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
174 lines
4.0 KiB
CSS
174 lines
4.0 KiB
CSS
/**
|
|
* Popover Component - Admin Interface
|
|
*
|
|
* Native Popover API für Dropdown-Menüs und Overlays.
|
|
* Baseline 2025: Popover API ist Baseline Newly available.
|
|
*
|
|
* Features:
|
|
* - Native Browser-Support (kein JavaScript nötig für Basis-Funktionalität)
|
|
* - Automatisches Focus-Management
|
|
* - ESC-Key Support (native)
|
|
* - Backdrop-Click Support (native)
|
|
* - View Transition Integration für Popover-Transitions
|
|
*/
|
|
|
|
@layer components {
|
|
/**
|
|
* Popover Base
|
|
*/
|
|
[popover] {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
margin: auto;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
background-color: var(--content-bg);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: var(--spacing-sm);
|
|
z-index: var(--z-popover);
|
|
color: var(--content-text);
|
|
|
|
/* Hide by default (popover API handles visibility) */
|
|
&:not(:popover-open) {
|
|
display: none;
|
|
}
|
|
|
|
/* View Transition für Popover-Öffnen/Schließen */
|
|
&::backdrop {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(2px);
|
|
transition: opacity var(--transition-base), backdrop-filter var(--transition-base);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Admin Popover Styles
|
|
*/
|
|
.admin-popover {
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
padding: var(--spacing-xs) 0;
|
|
background-color: var(--content-bg);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-lg);
|
|
overflow: hidden;
|
|
|
|
/* Positionierung */
|
|
&--bottom-start {
|
|
top: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
&--bottom-end {
|
|
top: auto;
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
&--top-start {
|
|
top: 0;
|
|
bottom: auto;
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
&--top-end {
|
|
top: 0;
|
|
bottom: auto;
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Popover Content (Menu Lists)
|
|
*/
|
|
.admin-popover ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.admin-popover li {
|
|
margin: 0;
|
|
}
|
|
|
|
/**
|
|
* Popover Links/Buttons
|
|
*/
|
|
.admin-popover a,
|
|
.admin-popover button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
width: 100%;
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--content-text);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: background-color var(--transition-base);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--hover-overlay);
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Popover Divider
|
|
*/
|
|
.admin-popover hr {
|
|
margin: var(--spacing-xs) 0;
|
|
border: none;
|
|
border-top: 1px solid var(--border-light);
|
|
}
|
|
|
|
/**
|
|
* Popover Animation (View Transitions)
|
|
*/
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
@view-transition-group(popover) {
|
|
animation-duration: var(--transition-base);
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
/**
|
|
* Dark Theme Optimizations
|
|
*/
|
|
@media (prefers-color-scheme: dark) {
|
|
[popover] {
|
|
background-color: var(--content-bg);
|
|
border-color: var(--border-light);
|
|
box-shadow: var(--shadow-lg);
|
|
|
|
&::backdrop {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
.admin-popover a:hover,
|
|
.admin-popover button:hover {
|
|
background-color: oklch(from var(--content-bg) calc(l + 0.08) c h);
|
|
}
|
|
}
|
|
}
|
|
|