Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
100 lines
2.1 KiB
CSS
100 lines
2.1 KiB
CSS
/**
|
|
* Mixins & Utilities - Admin Interface
|
|
*
|
|
* Wiederverwendbare CSS-Patterns als @apply Rules.
|
|
* Hinweis: @apply ist nicht Teil des CSS-Standards, aber von PostCSS unterstützt.
|
|
* Alternativ: Plain CSS Custom Properties oder Utility Classes verwenden.
|
|
*/
|
|
|
|
@layer admin-tools {
|
|
/**
|
|
* Visually Hidden
|
|
*
|
|
* Versteckt Elemente visuell, aber behält sie für Screen Reader zugänglich.
|
|
*/
|
|
.admin-visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/**
|
|
* Focus Visible
|
|
*
|
|
* Konsistenter Focus-Ring für Tastatur-Navigation.
|
|
*/
|
|
.admin-focus-ring {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/**
|
|
* Smooth Scroll
|
|
*/
|
|
.admin-smooth-scroll {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.admin-smooth-scroll {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clearfix
|
|
*
|
|
* Für float-basierte Layouts (falls benötigt).
|
|
*/
|
|
.admin-clearfix::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/**
|
|
* Truncate Text
|
|
*
|
|
* Einzeiliger Text mit Ellipsis.
|
|
*/
|
|
.admin-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/**
|
|
* Multi-line Truncate
|
|
*
|
|
* Mehrzeiliger Text mit Ellipsis (WebKit only).
|
|
*/
|
|
.admin-line-clamp {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/**
|
|
* Backdrop Blur
|
|
*
|
|
* Für Overlays und Modals.
|
|
*/
|
|
.admin-backdrop-blur {
|
|
backdrop-filter: blur(8px);
|
|
background-color: oklch(0% 0 0 / 0.5);
|
|
}
|
|
|
|
@supports not (backdrop-filter: blur(8px)) {
|
|
.admin-backdrop-blur {
|
|
background-color: oklch(0% 0 0 / 0.75);
|
|
}
|
|
}
|
|
}
|