104 lines
1.9 KiB
CSS
104 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--paper: #f4ece0;
|
|
--paper-soft: #fbf7f1;
|
|
--paper-strong: #fffdf8;
|
|
--ink: #241b14;
|
|
--ink-soft: #3d2d20;
|
|
--muted: #726153;
|
|
--line: rgba(85, 60, 42, 0.15);
|
|
--copper: #c76733;
|
|
--copper-deep: #964722;
|
|
--olive: #76845e;
|
|
--olive-deep: #596946;
|
|
--font-body:
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
"PingFang SC",
|
|
"Hiragino Sans GB",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft YaHei",
|
|
sans-serif;
|
|
--font-display:
|
|
ui-serif,
|
|
"Songti SC",
|
|
"STSong",
|
|
"SimSun",
|
|
"Times New Roman",
|
|
serif;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--paper);
|
|
--color-foreground: var(--ink);
|
|
--font-sans: var(--font-body);
|
|
--font-serif: var(--font-display);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
background: #ecdfcf;
|
|
}
|
|
|
|
body {
|
|
color: var(--ink);
|
|
font-family: var(--font-body), sans-serif;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 34%),
|
|
radial-gradient(circle at 88% 10%, rgba(205, 126, 76, 0.22), transparent 22%),
|
|
linear-gradient(180deg, #f6eee1 0%, #efe2d1 52%, #e8d6c3 100%);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(199, 103, 51, 0.18);
|
|
}
|
|
|
|
@keyframes route-progress-slide {
|
|
0% {
|
|
transform: translateX(-140%) scaleX(0.72);
|
|
}
|
|
|
|
55% {
|
|
transform: translateX(78%) scaleX(1);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(240%) scaleX(0.86);
|
|
}
|
|
}
|
|
|
|
.route-progress-bar {
|
|
animation: route-progress-slide 1.15s ease-in-out infinite;
|
|
transform-origin: left center;
|
|
box-shadow: 0 0 18px rgba(199, 103, 51, 0.28);
|
|
}
|
|
|
|
.paper-panel {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 249, 241, 0.84)),
|
|
repeating-linear-gradient(
|
|
135deg,
|
|
rgba(198, 163, 127, 0.06),
|
|
rgba(198, 163, 127, 0.06) 10px,
|
|
rgba(255, 255, 255, 0.08) 10px,
|
|
rgba(255, 255, 255, 0.08) 20px
|
|
);
|
|
}
|