新主题
This commit is contained in:
+173
-1
@@ -16,7 +16,7 @@ body,
|
||||
gap: clamp(4px, 0.8vmin, 8px);
|
||||
padding: clamp(4px, 0.8vmin, 9px);
|
||||
color: var(--theme-text);
|
||||
font-family: 'Noto Serif SC', 'Microsoft YaHei', sans-serif;
|
||||
font-family: var(--component-font-family, 'Noto Serif SC', 'Songti SC', 'STSong', serif);
|
||||
font-size: var(--song-font-size, clamp(12px, 2.4vmin, 24px));
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -77,6 +77,14 @@ body,
|
||||
gap: 0.12em;
|
||||
}
|
||||
|
||||
.song-current-copy,
|
||||
.song-score,
|
||||
.song-queue > header,
|
||||
.song-row,
|
||||
.song-queue-empty {
|
||||
filter: brightness(var(--component-font-brightness, 1.3));
|
||||
}
|
||||
|
||||
.song-current-copy small,
|
||||
.song-score small {
|
||||
color: var(--theme-compact-user);
|
||||
@@ -367,3 +375,167 @@ body,
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Moonlit Water keeps the queue as a quiet typeset list: no panel fill, no
|
||||
glass, and just enough gold rule-work to remain legible over an OBS scene. */
|
||||
.song-overlay.theme-moonlit-water {
|
||||
gap: clamp(5px, 0.7vmin, 9px);
|
||||
padding: clamp(8px, 1.4vmin, 16px);
|
||||
color: #eadfc3;
|
||||
font-family: var(--component-font-family, FangSong, STFangsong, 'Noto Serif SC', serif);
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current,
|
||||
.theme-moonlit-water .song-queue {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current::after,
|
||||
.theme-moonlit-water .song-queue::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current {
|
||||
min-height: min(var(--song-current-min, 56px), 62px);
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: clamp(5px, 0.9vmin, 10px);
|
||||
padding: 0 0 clamp(6px, 0.9vmin, 10px);
|
||||
border-bottom: 1px solid rgba(231, 201, 130, 0.38);
|
||||
animation: moonlit-song-current 0.68s ease-out both;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current-mark {
|
||||
width: 1.72em;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: #e7c982;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
font-size: 1.42em;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current-mark::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1.4em;
|
||||
height: 1px;
|
||||
margin-top: 0.1em;
|
||||
background: linear-gradient(90deg, transparent, #e7c982, transparent);
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current-copy,
|
||||
.theme-moonlit-water .song-score {
|
||||
gap: 0.08em;
|
||||
text-shadow: 0 1px 6px rgba(10, 34, 38, 0.82);
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current-copy small,
|
||||
.theme-moonlit-water .song-score small,
|
||||
.theme-moonlit-water .song-requester,
|
||||
.theme-moonlit-water .song-queue > header {
|
||||
color: #afc2ad;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-current-copy strong {
|
||||
color: #eadfc3;
|
||||
font-size: 1.18em;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 7px rgba(10, 34, 38, 0.8);
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-score b,
|
||||
.theme-moonlit-water .song-index {
|
||||
color: #e7c982;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-queue > header {
|
||||
padding: 0.32em 0;
|
||||
border-bottom: 1px solid rgba(231, 201, 130, 0.24);
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-queue > header b {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: #e7c982;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-queue-track {
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-row {
|
||||
gap: 0.5em;
|
||||
padding: 0.45em 0.12em;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(231, 201, 130, 0.17);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
animation: moonlit-song-row-insert 0.54s ease-out both;
|
||||
animation-delay: var(--song-row-delay, 0ms);
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-row::before,
|
||||
.theme-moonlit-water .song-row::after {
|
||||
width: 0.42em;
|
||||
height: 0.42em;
|
||||
background: #e7c982;
|
||||
filter: drop-shadow(0 0 3px rgba(231, 201, 130, 0.5));
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-row::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-row strong {
|
||||
color: #eadfc3;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 6px rgba(10, 34, 38, 0.74);
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-particle-layer {
|
||||
opacity: 0.36;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-particle.star {
|
||||
background: #e7c982;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.theme-moonlit-water .song-particle.floret {
|
||||
background:
|
||||
radial-gradient(circle at 50% 17%, #d9e0c1 0 19%, transparent 22%),
|
||||
radial-gradient(circle at 82% 50%, #d9e0c1 0 19%, transparent 22%),
|
||||
radial-gradient(circle at 50% 83%, #d9e0c1 0 19%, transparent 22%),
|
||||
radial-gradient(circle at 18% 50%, #d9e0c1 0 19%, transparent 22%),
|
||||
radial-gradient(circle at 50% 50%, #e7c982 0 18%, transparent 21%);
|
||||
}
|
||||
|
||||
@keyframes moonlit-song-current {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-song-row-insert {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user