style: add board light mode

This commit is contained in:
2026-05-18 16:51:34 +08:00
parent cdffc4ba08
commit 78bd294d57
4 changed files with 188 additions and 16 deletions

View File

@@ -540,6 +540,135 @@ nextjs-portal {
color: #fff;
}
.skg-board-theme--light {
color: #22261f;
background:
radial-gradient(circle at 12% 0%, rgba(214, 179, 106, 0.18), transparent 30%),
radial-gradient(circle at 82% 8%, rgba(143, 176, 113, 0.14), transparent 28%),
linear-gradient(126deg, #f7f4ea 0%, #eef1e7 48%, #f9f6ee 100%);
}
.skg-board-theme--light::before {
background:
linear-gradient(90deg, rgba(42, 50, 36, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(42, 50, 36, 0.045) 1px, transparent 1px);
opacity: 0.72;
}
.skg-board-theme--light::after {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 46%, rgba(214, 179, 106, 0.08)),
linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent 42%, rgba(255, 255, 255, 0.24));
}
.skg-board-theme--light .skg-board-ambient {
background:
radial-gradient(circle at 20% 18%, rgba(214, 179, 106, 0.2), transparent 28%),
radial-gradient(circle at 70% 6%, rgba(143, 176, 113, 0.16), transparent 30%),
radial-gradient(circle at 52% 100%, rgba(214, 179, 106, 0.12), transparent 38%);
}
.skg-board-theme--light .skg-board-topbar,
.skg-board-theme--light .skg-board-panel {
border-color: rgba(82, 93, 62, 0.16) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
rgba(249, 246, 236, 0.7) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.78),
0 18px 48px rgba(65, 55, 30, 0.1);
}
.skg-board-theme--light .skg-board-topbar {
background:
linear-gradient(100deg, rgba(214, 179, 106, 0.14), rgba(143, 176, 113, 0.08) 42%, rgba(255, 255, 255, 0.58)),
rgba(252, 249, 241, 0.82) !important;
}
.skg-board-theme--light .skg-board-theme-toggle {
border-color: rgba(82, 93, 62, 0.16) !important;
background: rgba(255, 255, 255, 0.54) !important;
color: rgba(36, 40, 30, 0.72) !important;
}
.skg-board-theme--light .text-white,
.skg-board-theme--light [class*="text-white/"] {
color: rgba(32, 36, 28, 0.78) !important;
}
.skg-board-theme--light [class*="bg-black/"],
.skg-board-theme--light [class*="bg-white/"] {
background-color: rgba(255, 255, 250, 0.52) !important;
}
.skg-board-theme--light [class*="border-white/"] {
border-color: rgba(70, 78, 54, 0.14) !important;
}
.skg-board-theme--light [class*="text-[#d7efbc]"] {
color: #43662d !important;
}
.skg-board-theme--light [class*="text-[#e8c77a]"],
.skg-board-theme--light [class*="text-[#f2d58a]"],
.skg-board-theme--light [class*="text-[#f5d98e]"] {
color: #856015 !important;
}
.skg-board-theme--light [class*="text-emerald-"] {
color: #2f6d3d !important;
}
.skg-board-theme--light [class*="text-cyan-"],
.skg-board-theme--light [class*="text-sky-"],
.skg-board-theme--light [class*="text-teal-"] {
color: #17606f !important;
}
.skg-board-theme--light [class*="text-amber-"],
.skg-board-theme--light [class*="text-yellow-"] {
color: #8a5c00 !important;
}
.skg-board-theme--light [class*="text-rose-"],
.skg-board-theme--light [class*="text-red-"] {
color: #9f1239 !important;
}
.skg-board-theme--light [class*="text-violet-"],
.skg-board-theme--light [class*="text-purple-"] {
color: #62438a !important;
}
.skg-board-theme--light [class*="border-[#8fb071]"] {
border-color: rgba(67, 102, 45, 0.28) !important;
}
.skg-board-theme--light [class*="border-[#d6b36a]"] {
border-color: rgba(133, 96, 21, 0.26) !important;
}
.skg-board-theme--light [class*="bg-[#8fb071]"],
.skg-board-theme--light [class*="bg-[#d6b36a]"] {
background-color: rgba(214, 179, 106, 0.14) !important;
}
.skg-board-theme--light input,
.skg-board-theme--light textarea,
.skg-board-theme--light select {
color: #22261f !important;
}
.skg-board-theme--light input::placeholder,
.skg-board-theme--light textarea::placeholder {
color: rgba(34, 38, 31, 0.36) !important;
}
.skg-board-theme--light ::selection {
background: rgba(214, 179, 106, 0.32);
color: #171a14;
}
.login-hero {
isolation: isolate;
color: #282828;