feat(design): Huegel im Theme Aura schaukeln leicht
Die Seitenleiste im hellen Aura sah aus wie ein Standbild. Jetzt bewegt @keyframes aura-hills die Grafik-Ebene in 26 s um +-9 px waagerecht und 4 px senkrecht - langsam genug, dass es beim Arbeiten nicht auffaellt. Bewegt wird nur die zweite Hintergrundebene. Der Schleier davor bleibt stehen, sonst wandert die Helligkeit unter den Menuepunkten. Die Grafik ist unten verankert und beschnitten, deshalb reisst am Rand keine Luecke auf. Bei "Bewegung reduzieren" bleibt sie stehen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
3c56cf8361
commit
ad7f806258
+38
-1
@@ -1113,6 +1113,19 @@ html.theme-aura.dark {
|
||||
animation: aura-clouds 150s linear infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
* Aura, hell: die Huegel in der Seitenleiste schaukeln langsam hin und her.
|
||||
*
|
||||
* Bewegt wird nur die Grafik-Ebene (zweiter Wert), der Schleier darueber
|
||||
* bleibt stehen. Die Grafik ist an der Unterkante verankert und wird
|
||||
* beschnitten (preserveAspectRatio slice), deshalb entsteht am Rand keine
|
||||
* Luecke. 26 Sekunden pro Runde: als Bewegung kaum zu bemerken, aber die
|
||||
* Leiste wirkt nicht mehr wie ein Standbild.
|
||||
*/
|
||||
html.theme-aura:not(.dark) .app-sidebar {
|
||||
animation: aura-hills 26s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Sonnenstrahl (components/AuraWeather.tsx): verjuengt zur Sonne hin. */
|
||||
.aura-ray {
|
||||
position: absolute;
|
||||
@@ -1130,7 +1143,8 @@ html.theme-aura.dark {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html.theme-aura .app-header::before {
|
||||
html.theme-aura .app-header::before,
|
||||
html.theme-aura:not(.dark) .app-sidebar {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -1253,3 +1267,26 @@ html.theme-aura.dark {
|
||||
background-position: 1600px 0, 800px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Schaukelnde Huegel in der Seitenleiste (Theme Aura, hell). Der erste Wert ist
|
||||
* der Schleier und bleibt stehen, der zweite die Grafik: 9 px nach rechts,
|
||||
* dabei 4 px tiefer, und zurueck.
|
||||
*/
|
||||
@keyframes aura-hills {
|
||||
0% {
|
||||
background-position:
|
||||
center top,
|
||||
calc(50% - 9px) bottom;
|
||||
}
|
||||
50% {
|
||||
background-position:
|
||||
center top,
|
||||
calc(50% + 9px) calc(100% + 4px);
|
||||
}
|
||||
100% {
|
||||
background-position:
|
||||
center top,
|
||||
calc(50% - 9px) bottom;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user