65 lines
1.5 KiB
CSS
65 lines
1.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
/* 暗黑模式过渡动画 */
|
|
* {
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
@keyframes screen-time-shimmer {
|
|
0% {
|
|
transform: translateX(-120%);
|
|
}
|
|
100% {
|
|
transform: translateX(120%);
|
|
}
|
|
}
|
|
|
|
.screen-time-skeleton {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(90deg, rgba(226, 232, 240, 0.7) 0%, rgba(241, 245, 249, 0.95) 50%, rgba(226, 232, 240, 0.7) 100%);
|
|
}
|
|
|
|
.screen-time-skeleton::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
|
|
animation: screen-time-shimmer 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.screen-time-skeleton {
|
|
background: linear-gradient(90deg, rgba(51, 65, 85, 0.7) 0%, rgba(71, 85, 105, 0.95) 50%, rgba(51, 65, 85, 0.7) 100%);
|
|
}
|
|
|
|
.screen-time-skeleton::after {
|
|
background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.18) 50%, transparent 100%);
|
|
}
|
|
}
|