mirror of
https://github.com/Shu-Ying/noname-shuying.git
synced 2026-10-14 02:50:00 +08:00
391 lines
15 KiB
CSS
391 lines
15 KiB
CSS
.mengsan-hand-zone-shuying {
|
|
--mengsan-hand-gold: #d8ba83;
|
|
--mengsan-hand-jade: #234844;
|
|
--mengsan-hand-ink: #fff1cb;
|
|
}
|
|
.mengsan-hand-scroll-shuying {
|
|
overflow: visible !important;
|
|
left: 0 !important;
|
|
top: 0 !important;
|
|
bottom: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
padding: 0 !important;
|
|
pointer-events: none;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #d8ba83 #234844;
|
|
overscroll-behavior-x: contain;
|
|
touch-action: none;
|
|
}
|
|
.mengsan-hand-root-shuying {
|
|
overflow: visible !important;
|
|
}
|
|
.mengsan-hand-scroll-shuying:focus-visible {
|
|
outline: 2px solid #d8ba83;
|
|
outline-offset: -2px;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying {
|
|
position: relative !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
left: 0 !important;
|
|
top: auto !important;
|
|
bottom: 0 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
box-sizing: border-box;
|
|
pointer-events: none;
|
|
overflow: visible !important;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card {
|
|
position: absolute !important;
|
|
width: 112px !important;
|
|
height: 156px !important;
|
|
left: 0 !important;
|
|
right: auto !important;
|
|
top: 100% !important;
|
|
bottom: auto !important;
|
|
margin: 0 !important;
|
|
transform-origin: 50% 100% !important;
|
|
transform: translate(var(--mengsan-fan-x, 0px), var(--mengsan-fan-y, -128px)) rotate(var(--mengsan-fan-angle, 0deg)) !important;
|
|
z-index: var(--mengsan-fan-z, 1) !important;
|
|
transition: transform 160ms cubic-bezier(.2,.7,.3,1), box-shadow 160ms ease-out !important;
|
|
pointer-events: auto;
|
|
touch-action: none;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card.selected {
|
|
transform: translate(var(--mengsan-fan-x, 0px), calc(var(--mengsan-fan-y, -128px) - 20px)) rotate(var(--mengsan-fan-angle, 0deg)) !important;
|
|
outline: 2px solid var(--mengsan-hand-gold);
|
|
outline-offset: -2px;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card.mengsan-hand-hover-shuying {
|
|
transform: translate(var(--mengsan-fan-x, 0px), calc(var(--mengsan-fan-y, -128px) - 62px)) rotate(0deg) scale(1.35) !important;
|
|
z-index: 220 !important;
|
|
box-shadow: 0 0 0 2px #b6e8de, 0 0 14px #68b6a58c, 0 12px 22px #0009;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card.mengsan-hand-drag-shuying {
|
|
top: 0 !important;
|
|
transform: translate(var(--mengsan-drag-x), var(--mengsan-drag-y)) rotate(0deg) !important;
|
|
z-index: 240 !important;
|
|
pointer-events: none !important;
|
|
transition: none !important;
|
|
box-shadow: 0 0 0 2px #b6e8de, 0 0 14px #68b6a58c, 0 12px 22px #0009;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card.mengsan-hand-free-drag-shuying {
|
|
transform: translate(var(--mengsan-drag-x), var(--mengsan-drag-y)) rotate(0deg) scale(1.22) !important;
|
|
transform-origin: 50% 50% !important;
|
|
}
|
|
.mengsan-hand-aim-shuying {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
overflow: visible;
|
|
}
|
|
.mengsan-hand-aim-shuying > path {
|
|
fill: none;
|
|
stroke: rgb(250, 220, 140);
|
|
stroke-width: 2.6;
|
|
stroke-linecap: round;
|
|
filter: drop-shadow(0 0 2px #f5d25b);
|
|
}
|
|
/* 只在梦三手牌挂载期间隐藏十周年阶段、等待响应和对方思考图片。 */
|
|
body.mengsan-hand-ui-shuying [style*="extension/十周年UI/ui/assets/lbtn/tips/"]:is(
|
|
[style*="/tips/hhks."], [style*="/tips/zbjd."], [style*="/tips/pdjd."],
|
|
[style*="/tips/mpjd."], [style*="/tips/cpjd."], [style*="/tips/qpjd."],
|
|
[style*="/tips/jsjd."], [style*="/tips/hhjs."],
|
|
[style*="/tips/ddxy."], [style*="/tips/dfsk."]
|
|
) {
|
|
display: none !important;
|
|
}
|
|
body.mengsan-hand-ui-shuying :is(
|
|
.mengsan-hand-controls-hidden-shuying,
|
|
.mengsan-hand-submitted-control-shuying
|
|
) {
|
|
visibility: hidden !important;
|
|
pointer-events: none !important;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card.removing,
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card.display-none {
|
|
display: none !important;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card > .info,
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card > .name {
|
|
transform: none !important;
|
|
}
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card > .info > span {
|
|
display: inline !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card > .mengsan-hand-cost-shuying,
|
|
.mengsan-hand-zone-shuying > .card > .mengsan-hand-upgrade-shuying {
|
|
position: absolute !important;
|
|
display: grid !important;
|
|
place-items: center;
|
|
z-index: 8 !important;
|
|
margin: 0 !important;
|
|
box-sizing: border-box;
|
|
pointer-events: none;
|
|
writing-mode: horizontal-tb !important;
|
|
font: 700 13px/1 "Microsoft YaHei", sans-serif;
|
|
box-shadow: 0 2px 4px #0008;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card > .mengsan-hand-cost-shuying {
|
|
top: 48% !important;
|
|
left: 3px !important;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1px solid var(--mengsan-hand-gold);
|
|
border-radius: 50%;
|
|
background: var(--mengsan-hand-jade);
|
|
color: var(--mengsan-hand-ink);
|
|
}
|
|
.mengsan-hand-zone-shuying > .card > .mengsan-hand-cost-shuying::before {
|
|
content: attr(data-mengsan-cost);
|
|
}
|
|
.mengsan-hand-zone-shuying > .card > .mengsan-hand-upgrade-shuying {
|
|
/* 扇形叠牌露出左侧：角标排在花色下、费用上，不抬高整张牌的层级。 */
|
|
top: calc(max(48%, 64px) - 25px) !important;
|
|
left: 3px !important;
|
|
right: auto !important;
|
|
white-space: nowrap;
|
|
width: 26px;
|
|
height: 20px;
|
|
border: 1px solid #86bd85;
|
|
border-radius: 4px;
|
|
background: #214f36;
|
|
color: #f5ffea;
|
|
}
|
|
/* 只为带强化角标的真实手牌预留左侧信息栏，避免窄屏挤压。 */
|
|
.mengsan-hand-zone-shuying > .card:has(> .mengsan-hand-upgrade-shuying) > .mengsan-hand-cost-shuying {
|
|
top: max(48%, 64px) !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card:has(> .mengsan-hand-upgrade-shuying) > .suit-num {
|
|
top: 6px !important;
|
|
}
|
|
@media (max-width: 640px), (max-height: 500px) {
|
|
.mengsan-hand-zone-shuying > .card:has(> .mengsan-hand-upgrade-shuying) > .suit-num {
|
|
top: 4px !important;
|
|
font-size: 20px !important;
|
|
line-height: 16px !important;
|
|
}
|
|
}
|
|
.mengsan-hand-zone-shuying > .card > .mengsan-hand-upgrade-shuying::before {
|
|
content: "+" attr(data-mengsan-upgrade);
|
|
}
|
|
@media (max-width: 640px), (max-height: 500px) {
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card {
|
|
width: 82px !important;
|
|
height: 114px !important;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mengsan-hand-zone-shuying.mengsan-hand-layout-shuying > .card {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* 按实际卡牌定义标记本地完整立绘，不再维护牌名清单；只协调梦三手牌原生节点。 */
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) {
|
|
background-size: cover !important;
|
|
background-position: center !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) > :is(.name, .top-name) {
|
|
display: block !important;
|
|
top: auto !important;
|
|
bottom: 8px !important;
|
|
left: auto !important;
|
|
right: 8px !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
padding: 3px 6px !important;
|
|
margin: 0 !important;
|
|
writing-mode: horizontal-tb !important;
|
|
-webkit-writing-mode: horizontal-tb !important;
|
|
font-size: 16px !important;
|
|
line-height: 20px !important;
|
|
letter-spacing: 1px !important;
|
|
color: #fff1cb !important;
|
|
text-shadow: 0 1px 2px #000 !important;
|
|
background: #231b17e6 !important;
|
|
border-radius: 3px;
|
|
z-index: 7 !important;
|
|
pointer-events: none;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) > :is(.name, .top-name) br {
|
|
display: none;
|
|
}
|
|
/* 十周年名称有文字时优先使用；空节点不能遮掉原生名称。 */
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip):has(> .top-name:not(:empty)) > .name {
|
|
display: none !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) > :is(.info:not(.gaintag), .suit-num) {
|
|
top: 6px !important;
|
|
left: 6px !important;
|
|
right: auto !important;
|
|
bottom: auto !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 0 !important;
|
|
padding: 2px 4px !important;
|
|
font-size: 18px !important;
|
|
line-height: 18px !important;
|
|
letter-spacing: 0 !important;
|
|
color: #231b17 !important;
|
|
text-shadow: none !important;
|
|
background: #fff1cbe6 !important;
|
|
border-radius: 3px;
|
|
z-index: 7 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"] > .image,
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"] > .info:empty {
|
|
display: none !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:is([data-suit="heart"], [data-suit="diamond"]):not(.infohidden):not(.infoflip) > :is(.info:not(.gaintag), .suit-num) {
|
|
color: #a52219 !important;
|
|
}
|
|
|
|
/* 强化卡牌的完整卡面样式优先级更高，窄屏同样为角标留出空隙。 */
|
|
@media (max-width: 640px), (max-height: 500px) {
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip):has(> .mengsan-hand-upgrade-shuying) > .suit-num {
|
|
top: 4px !important;
|
|
padding: 0 2px !important;
|
|
font-size: 18px !important;
|
|
line-height: 16px !important;
|
|
}
|
|
}
|
|
|
|
/* 本地完整卡面不绘制空标题或重复的花色信息条。 */
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) > :is(.name, .top-name):empty {
|
|
display: none !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:has(> .suit-num:not(:empty)) > .info:not(.gaintag) {
|
|
display: none !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) > .suit-num > .suit {
|
|
font-size: inherit !important;
|
|
line-height: inherit;
|
|
}
|
|
/* 保留原生词缀内容，覆盖十周年 fullimage 的字号归零，避开费用和名称。 */
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) > .gaintag.info:not(:empty) {
|
|
display: block !important;
|
|
top: auto !important;
|
|
bottom: 36px !important;
|
|
left: 31px !important;
|
|
right: 5px !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 0 !important;
|
|
padding: 2px 3px !important;
|
|
box-sizing: border-box;
|
|
font-size: 12px !important;
|
|
line-height: 14px !important;
|
|
letter-spacing: 0 !important;
|
|
white-space: normal !important;
|
|
overflow-wrap: anywhere;
|
|
overflow: visible !important;
|
|
background: #231b17e6 !important;
|
|
color: #fff1cb !important;
|
|
text-shadow: none !important;
|
|
border: 1px solid #d8ba83 !important;
|
|
border-radius: 3px;
|
|
z-index: 6 !important;
|
|
pointer-events: none;
|
|
}
|
|
/* 长牌名由翻译长度自动标记，新增牌不需要再抄写 CSS 名单。 */
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"][data-mengsan-long-name="true"]:not(.infohidden):not(.infoflip) > :is(.name, .top-name) {
|
|
font-size: 12px !important;
|
|
letter-spacing: 0 !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
@media (max-width: 640px), (max-height: 500px) {
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"][data-mengsan-long-name="true"]:not(.infohidden):not(.infoflip) > :is(.name, .top-name) {
|
|
font-size: 10px !important;
|
|
padding: 2px 4px !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-local-art="full"]:not(.infohidden):not(.infoflip) > .gaintag.info:not(:empty) {
|
|
font-size: 10px !important;
|
|
line-height: 12px !important;
|
|
}
|
|
}
|
|
|
|
/* Infection only; keep cost/name above it and leave native card::after alone. */
|
|
.mengsan-infection-border-shuying { display: none; }
|
|
.mengsan-hand-zone-shuying > .card[data-card-name="mengsan_infection_shuying"]:not(.infohidden):not(.infoflip) > .mengsan-infection-border-shuying {
|
|
display: block;
|
|
z-index: 5;
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
background-image: url("../../assets/card-overlays/infection-sprite.webp");
|
|
/* 30 source frames, six columns/five rows, 192x260 per cell. */
|
|
background-size: 600% 500%;
|
|
background-position: 0% 0%;
|
|
background-repeat: no-repeat;
|
|
animation: mengsan-infection-frames-shuying 2s steps(1, end) infinite;
|
|
}
|
|
@keyframes mengsan-infection-frames-shuying {
|
|
0% { background-position: 0% 0%; }
|
|
3.333333% { background-position: 20% 0%; }
|
|
6.666667% { background-position: 40% 0%; }
|
|
10% { background-position: 60% 0%; }
|
|
13.333333% { background-position: 80% 0%; }
|
|
16.666667% { background-position: 100% 0%; }
|
|
20% { background-position: 0% 25%; }
|
|
23.333333% { background-position: 20% 25%; }
|
|
26.666667% { background-position: 40% 25%; }
|
|
30% { background-position: 60% 25%; }
|
|
33.333333% { background-position: 80% 25%; }
|
|
36.666667% { background-position: 100% 25%; }
|
|
40% { background-position: 0% 50%; }
|
|
43.333333% { background-position: 20% 50%; }
|
|
46.666667% { background-position: 40% 50%; }
|
|
50% { background-position: 60% 50%; }
|
|
53.333333% { background-position: 80% 50%; }
|
|
56.666667% { background-position: 100% 50%; }
|
|
60% { background-position: 0% 75%; }
|
|
63.333333% { background-position: 20% 75%; }
|
|
66.666667% { background-position: 40% 75%; }
|
|
70% { background-position: 60% 75%; }
|
|
73.333333% { background-position: 80% 75%; }
|
|
76.666667% { background-position: 100% 75%; }
|
|
80% { background-position: 0% 100%; }
|
|
83.333333% { background-position: 20% 100%; }
|
|
86.666667% { background-position: 40% 100%; }
|
|
90% { background-position: 60% 100%; }
|
|
93.333333% { background-position: 80% 100%; }
|
|
96.666667% { background-position: 100% 100%; }
|
|
100% { background-position: 100% 100%; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mengsan-hand-zone-shuying > .card[data-card-name="mengsan_infection_shuying"]:not(.infohidden):not(.infoflip) > .mengsan-infection-border-shuying {
|
|
animation: none;
|
|
background-position: 0% 0%;
|
|
}
|
|
}
|
|
|
|
/* 稀有度是独立装饰层，不占用原生 card::after，也不改变尺寸、命中区或立绘。 */
|
|
.mengsan-hand-rarity-shuying { display: none; pointer-events: none; }
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-rarity]:not([data-mengsan-rarity="pending"]):not(.infohidden):not(.infoflip) > .mengsan-hand-rarity-shuying {
|
|
display: block; position: absolute; inset: 0; z-index: 4; border-radius: inherit;
|
|
margin: 0; padding: 0; width: 100%; height: 100%;
|
|
box-shadow: inset 0 0 0 2px var(--ms-rarity-accent), inset 0 0 0 4px var(--ms-rarity-dark);
|
|
background: linear-gradient(90deg, var(--ms-rarity-dark), var(--ms-rarity-accent), var(--ms-rarity-metal)) top / 100% 5px no-repeat;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-rarity]:not([data-mengsan-rarity="pending"]):not(.infohidden):not(.infoflip) > :is(.name, .top-name) {
|
|
background: var(--ms-rarity-accent) !important; color: var(--ms-rarity-ink) !important;
|
|
text-shadow: none !important; border-color: var(--ms-rarity-metal) !important;
|
|
}
|
|
.mengsan-hand-zone-shuying > .card[data-mengsan-rarity]:not([data-mengsan-rarity="pending"]):not(.infohidden):not(.infoflip) > .mengsan-hand-cost-shuying {
|
|
background: var(--ms-rarity-dark); color: var(--ms-rarity-metal); border-color: var(--ms-rarity-accent);
|
|
}
|