diff --git a/src/assets/style/main.css b/src/assets/style/main.css index c6d95bf..1f97750 100644 --- a/src/assets/style/main.css +++ b/src/assets/style/main.css @@ -24,3 +24,52 @@ min-height: 2.75rem; min-width: 2.75rem; } + +.theme-2026-card { + position: relative; + overflow: hidden; + border: 1px solid rgba(191, 208, 211, 0.72); + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(234, 243, 245, 0.9)), + radial-gradient(circle at 14% 10%, rgba(122, 159, 171, 0.18), transparent 30%); + box-shadow: 0 14px 34px rgba(128, 151, 155, 0.22); +} + +.theme-2026-card::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + background: linear-gradient(120deg, rgba(255, 255, 255, 0.48), transparent 42%); + opacity: 0.74; +} + +.theme-2026-card > * { + position: relative; +} + +.theme-2026-card-hover { + transition: + transform 220ms ease, + border-color 220ms ease, + box-shadow 220ms ease, + background-color 220ms ease; +} + +.theme-2026-card-hover:hover { + border-color: rgba(116, 153, 165, 0.86); + box-shadow: 0 20px 42px rgba(114, 143, 150, 0.32); +} + +.dark .theme-2026-card { + border-color: rgba(68, 86, 94, 0.82); + background: + linear-gradient(135deg, rgba(34, 49, 56, 0.96), rgba(24, 35, 42, 0.92)), + radial-gradient(circle at 14% 10%, rgba(102, 142, 156, 0.18), transparent 32%); + box-shadow: 0 16px 36px rgba(4, 10, 14, 0.34); +} + +.dark .theme-2026-card-hover:hover { + border-color: rgba(113, 153, 168, 0.68); + box-shadow: 0 20px 44px rgba(4, 10, 14, 0.46); +} diff --git a/src/components/common/BaseModal.vue b/src/components/common/BaseModal.vue index 31520ca..0e06628 100644 --- a/src/components/common/BaseModal.vue +++ b/src/components/common/BaseModal.vue @@ -7,13 +7,16 @@ @click="handleBackdropClick" > -
+{{ tooltip.date }}
@@ -56,6 +56,7 @@ type TooltipState = { uploads: number downloadTraffic: string uploadTraffic: string + transform: string } type ChartPoint = { @@ -74,12 +75,14 @@ const rafId = ref