Syco/Dashboard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add weather to header, collapsible sections, staggered card animation
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Syco21
2026-05-16 16:13:10 +02:00
parent 6389e323dd
commit 7bbefaa1f6
6 changed files with 212 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+27
View File
@@ -73,6 +73,11 @@ header {
.clock-time { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 500; letter-spacing: 1px; }
.clock-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text2); margin-top: 2px; }
.weather-inline { display: flex; align-items: center; gap: 8px; }
.weather-emoji { font-size: 22px; line-height: 1; }
.weather-temp { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 500; letter-spacing: 1px; }
.weather-desc { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text2); margin-top: 2px; }
/* ── Section label ── */
.section-label {
font-family: 'JetBrains Mono', monospace;
@@ -81,8 +86,18 @@ header {
color: var(--muted);
margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
cursor: pointer;
user-select: none;
}
.section-label:hover { color: var(--text2); }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-chevron {
font-size: 12px;
transition: transform 0.2s ease;
margin-left: -4px;
letter-spacing: 0;
}
.section-chevron.collapsed { transform: rotate(-90deg); }
/* ── Grid ── */
.infra-grid {
@@ -115,6 +130,18 @@ header {
}
.card { animation: fadeUp 0.4s ease both; }
/* ── Staggered card entrance ── */
.infra-grid > *:nth-child(1) { animation-delay: 0ms; }
.infra-grid > *:nth-child(2) { animation-delay: 60ms; }
.infra-grid > *:nth-child(3) { animation-delay: 120ms; }
.infra-grid > *:nth-child(4) { animation-delay: 180ms; }
.infra-grid > *:nth-child(5) { animation-delay: 240ms; }
.infra-grid > *:nth-child(6) { animation-delay: 300ms; }
.infra-grid > *:nth-child(7) { animation-delay: 360ms; }
.infra-grid > *:nth-child(8) { animation-delay: 420ms; }
.infra-grid > *:nth-child(9) { animation-delay: 480ms; }
.infra-grid > *:nth-child(10) { animation-delay: 540ms; }
/* ── Widget header ── */
.widget-header {
display: flex; align-items: center; justify-content: space-between;