万圣节&圣诞节皮肤

2026-09-30 17:48:27 +08:00
parent 65f9be4f64
commit db76456ee0
31 changed files with 1038 additions and 27 deletions
@@ -0,0 +1,120 @@
+/* modern 与 legacy 共用；只装饰万圣节组件，不改变音量条的几何与交互。 */
+/* 万圣节横幅：紫黑夜空中的南瓜火光字。 */
+.festival-greeting--halloween {
+  background: #120b1c;
+}
+
+.halloween-greeting-text {
+  font-family: "Chiller", "Trattatello", "Herculanum", "Papyrus", fantasy;
+  font-size: 64px;
+  letter-spacing: 2px;
+  color: #ff9b32;
+  text-shadow:
+    0 -1px 1px #ffe294,
+    0 1px 2px #9b2609,
+    0 0 6px rgba(255, 104, 16, 0.85),
+    0 -3px 14px rgba(232, 65, 8, 0.7),
+    0 2px 3px #170407;
+}
+
+.halloween-witch-thumb {
+  width: 44px;
+  height: 44px;
+  object-fit: contain;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+}
+
+.halloween-pumpkin {
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
+}
+
+.halloween-pumpkin-dim {
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)) saturate(0.7);
+}
+
+/* 占位与原喇叭保持 24px 一致，大小南瓜仅在视觉层变化。 */
+.halloween-pumpkin-slot {
+  display: block;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+}
+
+.halloween-pumpkin-slot > img {
+  position: absolute;
+  max-width: none;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 装饰层限于卡片顶部；所有子元素穿透点击且不进入辅助技术阅读顺序。 */
+.halloween-card-decoration {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 42px;
+  z-index: 1;
+  pointer-events: none;
+  user-select: none;
+}
+
+.halloween-card-decoration * {
+  pointer-events: none;
+}
+
+.halloween-card-web {
+  position: absolute;
+  top: 0;
+  width: 34px;
+  height: 30px;
+}
+
+.halloween-card-web-left {
+  left: 0;
+}
+
+.halloween-card-web-right {
+  right: 0;
+  transform: scaleX(-1);
+}
+
+.halloween-card-bats {
+  position: absolute;
+  top: 1px;
+  left: 40px;
+  right: 46px;
+  height: 18px;
+}
+
+.halloween-card-wire {
+  display: block;
+  width: 100%;
+  height: 18px;
+}
+
+/* 1px 吊线 + 固定尺寸蝙蝠剪影。 */
+.halloween-card-bat {
+  position: absolute;
+  width: 1px;
+  height: 2px;
+  background: #4d4358;
+}
+
+.halloween-card-bat > svg {
+  position: absolute;
+  top: 2px;
+  left: -4.5px;
+  width: 10px;
+  height: 5px;
+}
+
+.halloween-card-cat {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  width: 40px;
+  height: 36px;
+}