Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
98 lines
2.1 KiB
CSS
98 lines
2.1 KiB
CSS
/**
|
|
* View Transitions - Admin Interface
|
|
*
|
|
* View Transitions API für Admin-Navigation und Content-Updates.
|
|
* Baseline 2023: View Transitions API ist Baseline Newly available.
|
|
*
|
|
* Features:
|
|
* - View Transitions für Admin-Sidebar-Navigation
|
|
* - View Transitions für Admin-Content-Bereiche
|
|
* - View Transitions für Popover-Öffnen/Schließen
|
|
* - Benannte Bereiche für präzise Animationen
|
|
*/
|
|
|
|
@layer utilities {
|
|
/**
|
|
* View Transition Root
|
|
*/
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
/**
|
|
* Admin Sidebar View Transition
|
|
*/
|
|
@view-transition-group(admin-sidebar) {
|
|
animation-duration: var(--transition-base);
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
/**
|
|
* Admin Content View Transition
|
|
*/
|
|
@view-transition-group(admin-content) {
|
|
animation-duration: var(--transition-base);
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
/**
|
|
* Admin Header View Transition
|
|
*/
|
|
@view-transition-group(admin-header) {
|
|
animation-duration: var(--transition-base);
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
/**
|
|
* Popover View Transitions
|
|
*/
|
|
@view-transition-group(admin-popover) {
|
|
animation-duration: var(--transition-base);
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
/**
|
|
* View Transition Names für Admin-Bereiche
|
|
*/
|
|
.admin-sidebar {
|
|
view-transition-name: admin-sidebar;
|
|
}
|
|
|
|
.admin-content {
|
|
view-transition-name: admin-content;
|
|
}
|
|
|
|
.admin-header {
|
|
view-transition-name: admin-header;
|
|
}
|
|
|
|
/**
|
|
* Popover View Transition Names
|
|
*/
|
|
[popover].admin-popover {
|
|
view-transition-name: admin-popover;
|
|
}
|
|
|
|
/**
|
|
* Navigation Links mit View Transitions
|
|
*/
|
|
.admin-nav a {
|
|
view-transition-name: none; /* Disable for individual links */
|
|
}
|
|
|
|
/**
|
|
* View Transition für Content-Updates
|
|
*/
|
|
.admin-page {
|
|
view-transition-name: admin-content;
|
|
}
|
|
|
|
/**
|
|
* View Transition für Sidebar-Navigation
|
|
*/
|
|
.admin-nav__section[open] {
|
|
view-transition-name: admin-nav-section;
|
|
}
|
|
}
|
|
|