新主题
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--gift-cyan, #a9fff2);
|
||||
font-family: var(--component-font-family, 'Noto Serif SC', 'Songti SC', 'STSong', serif);
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -353,3 +354,440 @@
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Moonlit Water */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* This theme intentionally has no scene-sized colour wash. Every visible
|
||||
pixel below belongs to an effect, allowing OBS to retain a true alpha
|
||||
background over games, cameras and artwork. */
|
||||
.gift-theme-moonlit-water {
|
||||
color: #eadfc3;
|
||||
font-family: var(--component-font-family, FangSong, STFangsong, 'Noto Serif SC', serif);
|
||||
}
|
||||
|
||||
.moonlit-whisper-copy,
|
||||
.moonlit-gift-whisper > small,
|
||||
.moonlit-ceremony-copy,
|
||||
.guard-copy {
|
||||
filter: brightness(var(--component-font-brightness, 1.3));
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .moonlit-gift-whisper {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
display: grid;
|
||||
min-width: min(82vw, 310px);
|
||||
grid-template-columns: 2.5em minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.65em;
|
||||
color: #eadfc3;
|
||||
font-size: clamp(14px, 1.15vw, 23px);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.045em;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 1px 7px rgba(11, 40, 42, 0.82);
|
||||
transform: translate3d(18px, 0, 0);
|
||||
animation: moonlit-whisper-appear 7.2s ease-in-out var(--moonlit-whisper-delay) both;
|
||||
}
|
||||
|
||||
.moonlit-whisper-ripple {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -0.35em;
|
||||
left: 2.7em;
|
||||
height: 1px;
|
||||
opacity: 0.65;
|
||||
background: linear-gradient(90deg, transparent, #e7c982 18% 72%, transparent);
|
||||
box-shadow: 0 0 7px rgba(231, 201, 130, 0.38);
|
||||
transform-origin: left;
|
||||
animation: moonlit-ripple-line 2.8s ease-out var(--moonlit-whisper-delay) both;
|
||||
}
|
||||
|
||||
.moonlit-whisper-image,
|
||||
.moonlit-ceremony-image {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.moonlit-whisper-image {
|
||||
width: 2.25em;
|
||||
height: 2.25em;
|
||||
}
|
||||
|
||||
.moonlit-whisper-image img,
|
||||
.moonlit-ceremony-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: saturate(0.78) sepia(0.12) brightness(1.12) drop-shadow(0 0 8px rgba(231, 201, 130, 0.48));
|
||||
}
|
||||
|
||||
.moonlit-whisper-image .meteor-fallback,
|
||||
.moonlit-ceremony-image .meteor-fallback {
|
||||
color: #e7c982;
|
||||
font-size: 1.55em;
|
||||
text-shadow: 0 0 10px rgba(231, 201, 130, 0.7);
|
||||
}
|
||||
|
||||
.moonlit-whisper-copy {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.08em;
|
||||
}
|
||||
|
||||
.moonlit-whisper-copy b {
|
||||
overflow: hidden;
|
||||
color: #b9caaa;
|
||||
font-size: 0.76em;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.moonlit-whisper-copy span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.moonlit-gift-whisper small {
|
||||
align-self: end;
|
||||
color: #e7c982;
|
||||
font-size: 0.75em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .moonlit-gift-ceremony {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 12;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
color: #eadfc3;
|
||||
isolation: isolate;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
animation: moonlit-offering-sweep 8.4s ease-in-out both;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-moon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -3;
|
||||
width: min(44vmin, 560px);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
opacity: 0.76;
|
||||
background:
|
||||
radial-gradient(circle at 35% 30%, rgba(255, 250, 226, 0.8), transparent 6%),
|
||||
radial-gradient(circle at 68% 43%, rgba(180, 194, 168, 0.24), transparent 12%),
|
||||
radial-gradient(circle at 42% 72%, rgba(172, 186, 159, 0.2), transparent 9%),
|
||||
radial-gradient(
|
||||
circle,
|
||||
#f4e8c8 0 43%,
|
||||
#d9d5b7 64%,
|
||||
rgba(212, 218, 188, 0.12) 71%,
|
||||
transparent 72%
|
||||
);
|
||||
box-shadow: 0 0 72px rgba(239, 224, 180, 0.23);
|
||||
transform: translate(-50%, -50%) scale(0.25);
|
||||
animation: moonlit-moon-rise 8.4s cubic-bezier(0.2, 0.78, 0.25, 1) both;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-water {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 7%;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
height: 30%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-water i {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: min(60vw, 1040px);
|
||||
height: clamp(14px, 2.1vmin, 28px);
|
||||
border-top: 1px solid rgba(234, 223, 195, 0.6);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 -2px 16px rgba(154, 187, 167, 0.26);
|
||||
transform: translateX(-50%) scaleX(0.12);
|
||||
animation: moonlit-water-spread 5.5s ease-out both;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-water i:nth-child(1) {
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-water i:nth-child(2) {
|
||||
bottom: 25%;
|
||||
width: min(47vw, 780px);
|
||||
animation-delay: 0.42s;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-water i:nth-child(3) {
|
||||
bottom: 45%;
|
||||
width: min(33vw, 560px);
|
||||
animation-delay: 0.72s;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-stars,
|
||||
.moonlit-ceremony-stars i {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-stars i {
|
||||
inset: auto;
|
||||
width: var(--moonlit-size);
|
||||
height: var(--moonlit-size);
|
||||
opacity: 0;
|
||||
background: #eadfc3;
|
||||
clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
|
||||
filter: drop-shadow(0 0 5px rgba(231, 201, 130, 0.78));
|
||||
animation: moonlit-ceremony-sparkle 2.4s ease-in-out var(--moonlit-delay) infinite;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-copy {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
max-width: min(80vw, 940px);
|
||||
justify-items: center;
|
||||
gap: clamp(5px, 0.9vmin, 12px);
|
||||
padding-bottom: min(17vmin, 180px);
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 11px rgba(10, 38, 40, 0.88);
|
||||
}
|
||||
|
||||
.moonlit-ceremony-copy span {
|
||||
color: #b9caaa;
|
||||
font-size: clamp(12px, 1.35vw, 25px);
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-copy b {
|
||||
color: #e7c982;
|
||||
font-size: clamp(18px, 2.15vw, 41px);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-copy strong {
|
||||
color: #eadfc3;
|
||||
font-size: clamp(27px, 4.5vw, 84px);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-copy small {
|
||||
color: #e7c982;
|
||||
font-size: clamp(13px, 1.55vw, 29px);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.moonlit-ceremony-image {
|
||||
position: absolute;
|
||||
bottom: max(7%, 4vmin);
|
||||
left: 50%;
|
||||
z-index: 3;
|
||||
width: min(14vmin, 176px);
|
||||
aspect-ratio: 1;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.moonlit-ceremony-image::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -22%;
|
||||
z-index: -1;
|
||||
border: 1px solid rgba(231, 201, 130, 0.7);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 26px rgba(231, 201, 130, 0.32),
|
||||
inset 0 0 18px rgba(196, 219, 196, 0.16);
|
||||
animation: moonlit-image-halo 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Reuse the membership DOM but make its backdrop transparent and turn the
|
||||
generic nebula into a quiet, full-scene moon-and-water celebration. */
|
||||
.gift-theme-moonlit-water .guard-celebration {
|
||||
color: #eadfc3;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-celebration::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: min(62vmin, 780px);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(246, 237, 207, 0.82) 0 42%,
|
||||
rgba(226, 224, 193, 0.2) 63%,
|
||||
transparent 71%
|
||||
);
|
||||
box-shadow: 0 0 80px rgba(231, 201, 130, 0.24);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-nebula {
|
||||
background:
|
||||
repeating-radial-gradient(
|
||||
ellipse at 50% 80%,
|
||||
transparent 0 7%,
|
||||
rgba(220, 225, 192, 0.2) 7.2% 7.45%,
|
||||
transparent 7.7% 12%
|
||||
),
|
||||
linear-gradient(90deg, transparent, rgba(231, 201, 130, 0.12), transparent);
|
||||
filter: blur(1px);
|
||||
animation: moonlit-guard-water 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-stars i {
|
||||
background: linear-gradient(135deg, #eadfc3, #e7c982 62%, #adc3ad);
|
||||
filter: drop-shadow(0 0 5px rgba(231, 201, 130, 0.72));
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-halo {
|
||||
width: min(77vmin, 930px);
|
||||
border-color: rgba(231, 201, 130, 0.42);
|
||||
box-shadow:
|
||||
0 0 44px rgba(231, 201, 130, 0.18),
|
||||
inset 0 0 65px rgba(182, 207, 180, 0.1);
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-halo i {
|
||||
border-color: rgba(203, 219, 184, 0.36);
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-copy {
|
||||
text-shadow: 0 2px 13px rgba(8, 35, 38, 0.86);
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-copy span,
|
||||
.gift-theme-moonlit-water .guard-copy b {
|
||||
color: #e7c982;
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water .guard-copy strong {
|
||||
color: #eadfc3;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.gift-theme-moonlit-water.gift-low-motion .moonlit-ceremony-moon,
|
||||
.gift-theme-moonlit-water.gift-low-motion .moonlit-ceremony-water i,
|
||||
.gift-theme-moonlit-water.gift-low-motion .moonlit-ceremony-stars,
|
||||
.gift-theme-moonlit-water.gift-low-motion .moonlit-ceremony-image::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes moonlit-whisper-appear {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(18px, 0, 0);
|
||||
}
|
||||
12%,
|
||||
78% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-ripple-line {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleX(0.15);
|
||||
}
|
||||
28%,
|
||||
78% {
|
||||
opacity: 0.7;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scaleX(1.18);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-offering-sweep {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
9%,
|
||||
85% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-moon-rise {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -40%) scale(0.2);
|
||||
}
|
||||
22%,
|
||||
78% {
|
||||
opacity: 0.76;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -55%) scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-water-spread {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scaleX(0.12);
|
||||
}
|
||||
20%,
|
||||
76% {
|
||||
opacity: 0.8;
|
||||
transform: translateX(-50%) scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) scaleX(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-ceremony-sparkle {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.06;
|
||||
transform: scale(0.45) rotate(0);
|
||||
}
|
||||
46% {
|
||||
opacity: 0.95;
|
||||
transform: scale(1.12) rotate(42deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-image-halo {
|
||||
50% {
|
||||
opacity: 0.46;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonlit-guard-water {
|
||||
50% {
|
||||
opacity: 0.68;
|
||||
transform: scale(1.04) translateY(-1.4%);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user