eafonyang
159 lines
3.3 KiB
CSS
159 lines
3.3 KiB
CSS
/* modern / legacy 共用的静态横幅与导航贴纸；不改变设备卡片几何。 */
|
|
.festival-greeting {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.festival-greeting *,
|
|
.festival-vu-status {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 状态信息始终盖在插画上，顶部暗色渐变保证小字可读。 */
|
|
.festival-vu-status {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-wrap: wrap;
|
|
column-gap: 4px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
background: linear-gradient(rgba(0, 0, 0, 0.72), transparent);
|
|
text-shadow: 0 1px 3px #000;
|
|
}
|
|
|
|
.festival-vu-status > span {
|
|
flex: none;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: rgba(255, 250, 224, 0.88);
|
|
}
|
|
|
|
.festival-vu-status > span + span {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.festival-greeting-backdrop,
|
|
.festival-greeting-shade {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.festival-greeting-backdrop {
|
|
background-size: auto 100%;
|
|
background-position: center;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
/* 两侧插画不随横屏宽度拉伸；渐隐接缝融入中央夜空。 */
|
|
.festival-greeting-art {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 150px;
|
|
max-width: 50%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.festival-greeting-art--left {
|
|
left: 0;
|
|
object-position: left center;
|
|
-webkit-mask-image: linear-gradient(to right, #000 65%, transparent);
|
|
mask-image: linear-gradient(to right, #000 65%, transparent);
|
|
}
|
|
|
|
.festival-greeting-art--right {
|
|
right: 0;
|
|
object-position: right center;
|
|
-webkit-mask-image: linear-gradient(to left, #000 65%, transparent);
|
|
mask-image: linear-gradient(to left, #000 65%, transparent);
|
|
}
|
|
|
|
.festival-greeting-shade {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(0, 0, 0, 0.38) 40%,
|
|
rgba(0, 0, 0, 0.38) 60%,
|
|
transparent
|
|
);
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.festival-greeting-title {
|
|
position: absolute;
|
|
top: 17px;
|
|
bottom: 5px;
|
|
left: 6px;
|
|
right: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 自然宽度测量不受 flex 收缩影响，缩放只作用于文字。 */
|
|
.festival-greeting-inner {
|
|
display: flex;
|
|
flex: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
line-height: 1.05;
|
|
white-space: nowrap;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.festival-greeting-line {
|
|
display: block;
|
|
}
|
|
|
|
/* 以 VU 容器宽度判断横排，不依赖视口媒体查询或容器查询支持。 */
|
|
.festival-greeting[data-layout="wide"] .festival-greeting-art {
|
|
max-width: 30%;
|
|
opacity: 1;
|
|
}
|
|
|
|
.festival-greeting[data-layout="wide"] .festival-greeting-title {
|
|
left: min(26%, 150px);
|
|
right: min(26%, 150px);
|
|
}
|
|
|
|
.festival-greeting[data-layout="wide"] .festival-greeting-inner {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.festival-greeting[data-layout="wide"]
|
|
.festival-greeting-line
|
|
+ .festival-greeting-line {
|
|
margin-left: 0.22em;
|
|
}
|
|
|
|
/* 导航贴纸与 lucide 图标同一 22px 视觉尺寸。 */
|
|
.festival-nav-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
max-width: none;
|
|
object-fit: contain;
|
|
transition:
|
|
filter 0.2s ease,
|
|
opacity 0.2s ease,
|
|
transform 0.2s ease;
|
|
}
|
|
|
|
.festival-nav-icon-active {
|
|
transform: scale(1.08);
|
|
filter: drop-shadow(0 0 6px rgba(0, 255, 246, 0.65));
|
|
}
|
|
|
|
.festival-nav-icon-idle {
|
|
opacity: 0.55;
|
|
filter: saturate(0.75);
|
|
}
|