571 lines
12 KiB
CSS
571 lines
12 KiB
CSS
.gift-effect-overlay {
|
|
position: relative;
|
|
isolation: isolate;
|
|
/* Percentages fill both a real OBS viewport and the nested control preview. */
|
|
width: 100%;
|
|
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;
|
|
}
|
|
|
|
.meteor-sky,
|
|
.meteor-burst {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meteor-burst {
|
|
animation: gift-burst-lifetime var(--burst-duration) linear both;
|
|
}
|
|
|
|
.gift-meteor {
|
|
position: absolute;
|
|
top: var(--meteor-y);
|
|
left: 0;
|
|
width: var(--meteor-size);
|
|
height: var(--meteor-size);
|
|
opacity: 0;
|
|
will-change: transform, opacity;
|
|
animation: var(--gift-motion-meteor, gift-meteor-flight) var(--meteor-duration) linear
|
|
var(--meteor-delay) both;
|
|
}
|
|
|
|
.meteor-core {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 3;
|
|
display: grid;
|
|
overflow: hidden;
|
|
place-items: center;
|
|
border: max(2px, calc(var(--meteor-size) * 0.035)) solid
|
|
color-mix(in srgb, var(--gift-jade) 72%, white);
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.42), transparent 25%),
|
|
radial-gradient(circle, rgba(31, 125, 122, 0.94), rgba(2, 24, 39, 0.96));
|
|
box-shadow:
|
|
0 0 calc(var(--meteor-size) * 0.18) var(--gift-cyan),
|
|
0 0 calc(var(--meteor-size) * 0.55) color-mix(in srgb, var(--gift-jade) 56%, transparent),
|
|
inset 0 0 calc(var(--meteor-size) * 0.18) rgba(223, 255, 247, 0.45);
|
|
}
|
|
|
|
.meteor-core::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 5%;
|
|
border: 1px solid rgba(255, 236, 173, 0.6);
|
|
border-radius: inherit;
|
|
box-shadow: inset 0 0 12px rgba(255, 238, 185, 0.25);
|
|
}
|
|
|
|
.meteor-core img {
|
|
width: 82%;
|
|
height: 82%;
|
|
object-fit: contain;
|
|
opacity: 0.96;
|
|
filter: blur(0.55px) saturate(0.92) brightness(1.08)
|
|
drop-shadow(0 0 7px rgba(255, 238, 178, 0.72)) drop-shadow(0 0 13px rgba(225, 255, 248, 0.48));
|
|
}
|
|
|
|
.meteor-fallback {
|
|
color: var(--gift-gold);
|
|
font-size: calc(var(--meteor-size) * 0.55);
|
|
text-shadow: 0 0 12px var(--gift-cyan);
|
|
}
|
|
|
|
.meteor-tail {
|
|
position: absolute;
|
|
top: 38%;
|
|
right: 48%;
|
|
z-index: 1;
|
|
width: calc(var(--meteor-size) * 5.4);
|
|
height: 24%;
|
|
border-radius: 100% 0 0 100%;
|
|
opacity: var(--trail-opacity);
|
|
background:
|
|
linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 190, 54, 0.025) 18%,
|
|
rgba(255, 199, 67, 0.14) 42%,
|
|
rgba(255, 211, 91, 0.5) 72%,
|
|
rgba(255, 244, 185, 0.96) 100%
|
|
),
|
|
linear-gradient(90deg, transparent 8%, rgba(255, 174, 26, 0.08) 48%, #ffd96d 100%);
|
|
filter: blur(calc(var(--meteor-size) * 0.022))
|
|
drop-shadow(0 0 calc(var(--meteor-size) * 0.08) rgba(255, 196, 54, 0.72));
|
|
clip-path: polygon(0 50%, 100% 8%, 100% 92%);
|
|
}
|
|
|
|
.meteor-tail::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 39% 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 205, 75, 0.12) 48%,
|
|
rgba(255, 249, 207, 0.92)
|
|
);
|
|
box-shadow: 0 0 calc(var(--meteor-size) * 0.06) rgba(255, 218, 100, 0.72);
|
|
}
|
|
|
|
.tier-high .meteor-tail {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 184, 33, 0.12) 35%,
|
|
rgba(255, 211, 77, 0.62) 74%,
|
|
#fff2ac
|
|
);
|
|
}
|
|
|
|
.tier-featured .meteor-tail {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 171, 19, 0.16) 28%,
|
|
rgba(255, 207, 62, 0.72) 70%,
|
|
#fff9cf
|
|
);
|
|
filter: blur(calc(var(--meteor-size) * 0.02))
|
|
drop-shadow(0 0 calc(var(--meteor-size) * 0.12) rgba(255, 207, 55, 0.88));
|
|
}
|
|
|
|
.meteor-spark {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 12%;
|
|
height: 12%;
|
|
background: var(--gift-gold);
|
|
clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
|
|
filter: drop-shadow(0 0 5px var(--gift-cyan));
|
|
animation: gift-meteor-sparkle 720ms ease-in-out infinite alternate;
|
|
}
|
|
|
|
.meteor-spark-a {
|
|
top: -8%;
|
|
right: -15%;
|
|
}
|
|
|
|
.meteor-spark-b {
|
|
right: 14%;
|
|
bottom: -14%;
|
|
width: 8%;
|
|
height: 8%;
|
|
animation-delay: -360ms;
|
|
}
|
|
|
|
.gift-low-motion .meteor-spark {
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes gift-meteor-flight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(calc(var(--meteor-size) * -5.5), 0, 0) scale(0.76) rotate(-5deg);
|
|
}
|
|
8% {
|
|
opacity: 1;
|
|
}
|
|
88% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(calc(100vw + var(--meteor-size) * 2), var(--meteor-drift), 0) scale(1.06)
|
|
rotate(8deg);
|
|
}
|
|
}
|
|
|
|
@keyframes gift-burst-lifetime {
|
|
from,
|
|
to {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@keyframes gift-meteor-sparkle {
|
|
from {
|
|
opacity: 0.25;
|
|
transform: rotate(0) scale(0.55);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: rotate(45deg) scale(1.2);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.gift-meteor {
|
|
animation-duration: max(var(--meteor-duration), 6s);
|
|
}
|
|
|
|
.meteor-spark {
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|