felis/lxc-streamutils
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

装饰

Browse Source
This commit is contained in:
felis
2026-08-06 10:38:07 -07:00
parent ac80cd1db4
commit 97a3f1be48
29 changed files with 1008 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/overlay/src/song.css
+214 -52
View File
@@ -68,6 +68,11 @@ body,
font-size: 1.25em;
}
.song-current-mark-note,
.song-waveform {
display: none;
}
.song-current-copy,
.song-score {
position: relative;
@@ -87,11 +92,12 @@ body,
.song-current-copy small,
.song-score small {
color: var(--theme-compact-user);
color: var(--component-song-requester-color, var(--theme-compact-user));
font-size: 0.68em;
}
.song-current-copy strong {
color: var(--component-song-title-color, var(--theme-text));
overflow-wrap: anywhere;
font-size: 1.35em;
line-height: 1.08;
@@ -151,7 +157,7 @@ body,
.song-row {
display: grid;
min-width: 0;
grid-template-columns: 2.5em minmax(0, 1fr) minmax(4em, auto);
grid-template-columns: 2.5em minmax(0, 1fr);
align-items: center;
gap: 0.55em;
padding: 0.4em 0.62em;
@@ -203,8 +209,15 @@ body,
animation-delay: -1.7s;
}
.song-row-copy {
display: grid;
min-width: 0;
gap: 0.12em;
}
.song-row strong {
min-width: 0;
color: var(--component-song-title-color, var(--theme-text));
overflow-wrap: anywhere;
}
@@ -216,8 +229,8 @@ body,
.song-requester {
min-width: 0;
overflow: hidden;
color: var(--theme-compact-user);
text-align: right;
color: var(--component-song-requester-color, var(--theme-compact-user));
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -376,13 +389,15 @@ body,
}
}
/* 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. */
/* Moonlit Water follows the reference's restrained broadcast typography: a
compact current-song lockup above a borderless three-column programme. */
.song-overlay.theme-moonlit-water {
gap: clamp(5px, 0.7vmin, 9px);
padding: clamp(8px, 1.4vmin, 16px);
color: #eadfc3;
gap: clamp(12px, 2vmin, 24px);
padding: clamp(10px, 1.8vmin, 22px);
color: #c6ae7a;
font-family: var(--component-font-family, FangSong, STFangsong, 'Noto Serif SC', serif);
font-size: var(--song-moonlit-font-size, var(--song-font-size));
letter-spacing: 0.055em;
}
.theme-moonlit-water .song-current,
@@ -400,36 +415,52 @@ body,
}
.theme-moonlit-water .song-current {
min-height: min(var(--song-current-min, 56px), 62px);
min-height: var(--song-moonlit-current-min, 88px);
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);
gap: clamp(10px, 1.5vmin, 18px);
padding: clamp(6px, 0.8vmin, 10px) 0 clamp(12px, 1.6vmin, 20px);
border-bottom: 1px solid rgba(198, 174, 122, 0.26);
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;
position: relative;
width: clamp(46px, 3.7em, 68px);
border: 1px solid rgba(198, 174, 122, 0.62);
border-radius: 50%;
color: #d2b468;
background: radial-gradient(circle, rgba(198, 174, 122, 0.08), transparent 68%);
box-shadow:
inset 0 0 0 3px rgba(15, 57, 64, 0.2),
0 0 16px rgba(198, 174, 122, 0.08);
font-size: 1.3em;
}
.theme-moonlit-water .song-current-mark::after {
.theme-moonlit-water .song-current-mark::before {
content: '';
position: absolute;
top: -0.58em;
right: -0.18em;
width: 0.72em;
height: 0.42em;
border: 1px solid rgba(116, 166, 157, 0.52);
border-width: 1px 0 0 1px;
border-radius: 100% 0;
transform: rotate(-24deg);
}
.theme-moonlit-water .song-current-mark-label {
display: none;
}
.theme-moonlit-water .song-current-mark-note {
display: block;
width: 1.4em;
height: 1px;
margin-top: 0.1em;
background: linear-gradient(90deg, transparent, #e7c982, transparent);
line-height: 1;
}
.theme-moonlit-water .song-current-copy,
.theme-moonlit-water .song-score {
gap: 0.08em;
gap: 0.18em;
text-shadow: 0 1px 6px rgba(10, 34, 38, 0.82);
}
@@ -437,32 +468,89 @@ body,
.theme-moonlit-water .song-score small,
.theme-moonlit-water .song-requester,
.theme-moonlit-water .song-queue > header {
color: #afc2ad;
color: var(--component-song-requester-color, #a9b79b);
}
.theme-moonlit-water .song-current-copy strong {
color: #eadfc3;
font-size: 1.18em;
color: var(--component-song-title-color, #c6ae7a);
font-size: 1.52em;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 1.16;
text-shadow: 0 1px 7px rgba(10, 34, 38, 0.8);
}
.theme-moonlit-water .song-score b,
.theme-moonlit-water .song-index {
color: #e7c982;
color: #c9b06f;
}
.theme-moonlit-water .song-score {
min-width: clamp(72px, 6.8em, 116px);
justify-items: end;
align-self: center;
}
.theme-moonlit-water .song-score b {
font-size: 0.68em;
font-weight: 500;
letter-spacing: 0.04em;
}
.theme-moonlit-water .song-score small {
display: none;
}
.theme-moonlit-water .song-waveform {
display: flex;
height: 0.8em;
align-items: end;
gap: 0.16em;
opacity: 0.34;
}
.theme-moonlit-water .song-waveform i {
width: 2px;
height: 25%;
background: #6a9f99;
animation: moonlit-song-wave 1.8s ease-in-out infinite alternate;
}
.theme-moonlit-water .song-waveform i:nth-child(2),
.theme-moonlit-water .song-waveform i:nth-child(7) {
height: 48%;
animation-delay: -0.4s;
}
.theme-moonlit-water .song-waveform i:nth-child(3),
.theme-moonlit-water .song-waveform i:nth-child(6) {
height: 76%;
animation-delay: -0.9s;
}
.theme-moonlit-water .song-waveform i:nth-child(4),
.theme-moonlit-water .song-waveform i:nth-child(5) {
height: 100%;
animation-delay: -1.25s;
}
.theme-moonlit-water .song-queue > header {
padding: 0.32em 0;
border-bottom: 1px solid rgba(231, 201, 130, 0.24);
letter-spacing: 0.18em;
justify-content: flex-start;
gap: 0.6em;
padding: 0.28em 0 0.72em;
border-bottom: 0;
color: #a9b79b;
letter-spacing: 0.2em;
}
.theme-moonlit-water .song-queue > header::before {
content: '✦';
color: #6daaa3;
font-size: 0.66em;
}
.theme-moonlit-water .song-queue > header b {
padding: 0;
border-radius: 0;
color: #e7c982;
background: transparent;
display: none;
}
.theme-moonlit-water .song-queue-track {
@@ -471,10 +559,10 @@ body,
}
.theme-moonlit-water .song-row {
gap: 0.5em;
padding: 0.45em 0.12em;
grid-template-columns: 2.4em minmax(0, 1fr);
gap: 0.82em;
padding: 0.66em 1.3em 0.66em 0;
border: 0;
border-bottom: 1px solid rgba(231, 201, 130, 0.17);
border-radius: 0;
background: transparent;
box-shadow: none;
@@ -482,26 +570,50 @@ body,
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 {
.theme-moonlit-water .song-row::before {
display: none;
}
.theme-moonlit-water .song-row::after {
content: '✦';
top: 50%;
right: 0.15em;
bottom: auto;
width: auto;
height: auto;
border-radius: 0;
color: #8eb5a4;
background: none;
filter: drop-shadow(0 0 3px rgba(142, 181, 164, 0.38));
font-size: 0.68em;
transform: translateY(-50%);
}
.theme-moonlit-water .song-row strong {
color: #eadfc3;
font-weight: 600;
color: var(--component-song-title-color, #c6ae7a);
font-weight: 500;
letter-spacing: 0.09em;
text-shadow: 0 1px 6px rgba(10, 34, 38, 0.74);
}
.theme-moonlit-water .song-index {
font-size: 0.9em;
font-weight: 400;
letter-spacing: 0.08em;
}
.theme-moonlit-water .song-requester {
color: var(--component-song-requester-color, #a9b79b);
font-size: 0.78em;
letter-spacing: 0.06em;
}
.theme-moonlit-water .song-particle-layer {
opacity: 0.36;
opacity: 0.22;
}
.theme-moonlit-water .song-particle-layer > :nth-child(n + 5) {
display: none;
}
.theme-moonlit-water .song-particle.star {
@@ -518,6 +630,39 @@ body,
radial-gradient(circle at 50% 50%, #e7c982 0 18%, transparent 21%);
}
.song-overlay.theme-moonlit-water.song-narrow .song-current {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.song-overlay.theme-moonlit-water.song-narrow .song-score {
grid-column: auto;
grid-template-columns: 1fr;
min-width: 4.8em;
justify-items: end;
}
.song-overlay.theme-moonlit-water.song-short {
gap: 6px;
padding-block: 6px;
}
.song-overlay.theme-moonlit-water.song-short .song-current {
min-height: 58px;
padding-block: 3px 7px;
}
.song-overlay.theme-moonlit-water.song-short .song-current-mark {
width: 2.6em;
}
.song-overlay.theme-moonlit-water.song-short .song-current-copy strong {
font-size: 1.18em;
}
.song-overlay.theme-moonlit-water.song-short .song-row {
padding-block: 0.42em;
}
@keyframes moonlit-song-current {
from {
opacity: 0;
@@ -539,3 +684,20 @@ body,
transform: none;
}
}
@keyframes moonlit-song-wave {
from {
opacity: 0.32;
transform: scaleY(0.5);
}
to {
opacity: 0.88;
transform: scaleY(1);
}
}
@media (prefers-reduced-motion: reduce) {
.theme-moonlit-water .song-waveform i {
animation: none;
}
}