sganggs
e7d957b27c
css/screens/loadout.css: `.lo > * { position: relative }` (one class, a later rule) overrode `.lo__bg { position:
absolute }`, so the mint glow / grid layer was a 0-px flex item and never rendered. `.lo > :where(:not(.lo__bg))`
keeps the one-class specificity for every other layer and never matches the background.
Checked in headless Chrome at 1920x1080 and 844x390 (touch): the layer now covers the overlay (0 px tall before),
every other box of the screen is unchanged, no console errors. Tests: test/ui/loadout.test.js (the cascade; fails on
the old rule), opt-in test/ui/loadout.e2e.test.js (the layer's box and stacking at both sizes). DESIGN §21.25 credits
PR #14 and PR #10 (crossOrigin on the two new Image() loads); CHANGELOG 0.1.1 lines for both.
365 lines
27 KiB
CSS
365 lines
27 KiB
CSS
/* ==========================================================================================
|
||
screens/loadout.css — 干员调配 (Operator loadout, DESIGN §16; js/screens/loadout.js): full-screen overlay with a
|
||
filterable roster of the visible chess (left) and the selected chess's skills and elite modules (right).
|
||
Official preset sprites (ui/outer: operator_preset, image_skill_select_outline, skill_select_deco, icon_equip_non)
|
||
are used when the local-client art is present; every piece has a CSS fallback.
|
||
Sizes are design px ÷ 100 (theme.css root scale); text that must stay readable on phones uses max(.xxrem, N px).
|
||
========================================================================================== */
|
||
|
||
.lo {
|
||
position: fixed; inset: 0; z-index: 55; /* above every screen (1) and the in-match banners (40), below the connection
|
||
banner (60), modals / confirm dialogs (80), toasts and tooltips */
|
||
display: flex; flex-direction: column;
|
||
padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
|
||
background: var(--bg-0);
|
||
color: var(--text-hi);
|
||
animation: lo-in 200ms var(--ease-out) backwards;
|
||
overscroll-behavior: contain;
|
||
}
|
||
@keyframes lo-in { from { opacity: 0; } }
|
||
.lo__bg {
|
||
position: absolute; inset: 0; pointer-events: none;
|
||
background:
|
||
radial-gradient(70% 90% at 18% 10%, rgba(78, 216, 175, .07), transparent 60%),
|
||
radial-gradient(60% 70% at 100% 100%, rgba(52, 184, 216, .06), transparent 60%),
|
||
linear-gradient(rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
|
||
linear-gradient(90deg, rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
|
||
linear-gradient(180deg, #0f1312, #090b0a);
|
||
}
|
||
/* every layer but the background stacks above it. :where() keeps this at the specificity of the old `.lo > *` (one
|
||
class), so the rules after it still win where they did, and it never matches .lo__bg: as `.lo > *` (same specificity,
|
||
later rule) it beat the layer's `position: absolute`, which left a 0-px tall flex item that never drew (PR #14). */
|
||
.lo > :where(:not(.lo__bg)) { position: relative; }
|
||
|
||
/* ---- top bar ---------------------------------------------------------------------------------------------------- */
|
||
.lo-top {
|
||
flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .2rem;
|
||
height: max(1rem, 48px); padding: 0 .36rem;
|
||
background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.lo-top::after {
|
||
content: ''; position: absolute; left: .36rem; right: .36rem; bottom: -1px; height: 1px;
|
||
background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
|
||
}
|
||
.lo-top__left { justify-self: start; display: flex; align-items: center; gap: .14rem; }
|
||
.lo-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; }
|
||
.lo-top__title { display: flex; align-items: center; gap: .12rem; margin: 0; font-size: max(.32rem, 16px); font-weight: 900; letter-spacing: .14em; line-height: 1.15; }
|
||
.lo-top__icon { width: max(.3rem, 16px); height: max(.3rem, 16px); object-fit: contain; color: var(--mint-500); }
|
||
.lo-top__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
|
||
.lo-count { font-size: max(.16rem, 11px); color: var(--text-lo); white-space: nowrap; }
|
||
.lo-count b { color: var(--mint-400); font-size: max(.22rem, 13px); margin: 0 .02rem 0 .06rem; }
|
||
/* co-op briefing: time left before the match locks the loadout (the overlay covers the briefing's own countdown) */
|
||
.lo-deadline { --cd-h: max(.44rem, 20px); flex: none; }
|
||
.lo-deadline .countdown__label { font-size: max(.11rem, 8px); }
|
||
.lo-sync { font-size: max(.14rem, 10px); padding: .03rem .1rem; border: 1px solid var(--line-2); color: var(--text-lo); white-space: nowrap; letter-spacing: .04em; }
|
||
.lo-sync.is-ok { color: var(--mint-400); border-color: var(--mint-800); }
|
||
.lo-sync.is-busy { color: var(--text-md); }
|
||
.lo-sync.is-warn { color: var(--amber); border-color: rgba(246, 163, 41, .45); }
|
||
.lo-sync.is-bad { color: var(--red-premium); border-color: rgba(255, 84, 84, .45); }
|
||
|
||
.lo-note {
|
||
flex: none; display: flex; align-items: center; gap: .08rem; margin: 0; padding: .07rem .36rem;
|
||
font-size: max(.15rem, 10px); color: var(--text-lo);
|
||
background: linear-gradient(90deg, rgba(78, 216, 175, .08), transparent 70%);
|
||
border-bottom: 1px solid rgba(47, 58, 53, .6);
|
||
}
|
||
.lo-note .icon { width: max(.16rem, 11px); height: max(.16rem, 11px); color: var(--mint-500); flex: none; }
|
||
.lo-note.is-locked { color: var(--amber); background: linear-gradient(90deg, rgba(246, 163, 41, .12), transparent 70%); }
|
||
.lo-note.is-locked .icon { color: var(--amber); }
|
||
|
||
.lo-loading { flex: 1; display: flex; align-items: center; justify-content: center; gap: .14rem; color: var(--text-lo); font-size: max(.18rem, 12px); }
|
||
|
||
/* ---- body layout -------------------------------------------------------------------------------------------------- */
|
||
.lo-body {
|
||
flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7rem);
|
||
gap: .22rem; padding: .18rem .3rem .22rem;
|
||
}
|
||
.lo-roster { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .12rem; }
|
||
.lo-detail-wrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
|
||
.lo-detail-back { display: none; }
|
||
|
||
/* ---- filters ----------------------------------------------------------------------------------------------------------- */
|
||
.lo-filters { flex: none; display: flex; flex-direction: column; gap: .08rem; }
|
||
.lo-frow { display: flex; align-items: center; gap: .12rem; flex-wrap: wrap; min-width: 0; }
|
||
.lo-chips { display: flex; align-items: center; gap: .05rem; flex-wrap: wrap; }
|
||
.lo-chip {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: .05rem;
|
||
min-width: max(.46rem, 26px); height: max(.4rem, 24px); padding: 0 .12rem;
|
||
font: inherit; font-size: max(.15rem, 11px); font-weight: 700; color: var(--text-lo);
|
||
background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer;
|
||
clip-path: polygon(.07rem 0, 100% 0, calc(100% - .07rem) 100%, 0 100%);
|
||
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
|
||
touch-action: manipulation;
|
||
}
|
||
.lo-chip:hover { color: var(--text-hi); border-color: var(--line-3); }
|
||
.lo-chip.is-on { color: var(--text-on-mint); background: var(--mint-500); border-color: var(--mint-400); }
|
||
.lo-chip--tier .num { font-family: var(--font-num); font-size: max(.17rem, 12px); letter-spacing: .04em; }
|
||
.lo-chip--t1 { --tc: var(--tier-1); } .lo-chip--t2 { --tc: var(--tier-2); } .lo-chip--t3 { --tc: var(--tier-3); }
|
||
.lo-chip--t4 { --tc: var(--tier-4); } .lo-chip--t5 { --tc: var(--tier-5); } .lo-chip--t6 { --tc: var(--tier-6); }
|
||
.lo-chip--tier { color: var(--tc); box-shadow: inset 0 -2px 0 var(--tc); }
|
||
.lo-chip--tier.is-on { color: #0b0d0c; background: var(--tc); border-color: var(--tc); }
|
||
.lo-chip__icon { width: max(.22rem, 14px); height: max(.22rem, 14px); object-fit: contain; }
|
||
/* prof.large art is a black glyph on a white square: inverted + screen-blended it becomes a white glyph on any dark
|
||
surface; on the mint "on" chip it is multiplied instead (dark glyph, the square takes the chip colour) */
|
||
.lo-profglyph { filter: invert(1); mix-blend-mode: screen; opacity: .85; }
|
||
.lo-chip:hover .lo-profglyph { opacity: 1; }
|
||
.lo-chip.is-on .lo-profglyph { filter: none; mix-blend-mode: multiply; opacity: 1; }
|
||
.lo-chip__lbl { font-size: max(.14rem, 10px); }
|
||
.lo-search { flex: 1 1 2.6rem; min-width: 2rem; max-width: 4.2rem; margin-left: auto; }
|
||
|
||
.lo-select { display: inline-flex; align-items: center; gap: .06rem; height: max(.4rem, 24px); padding-left: .1rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
|
||
.lo-select__k { font-size: max(.13rem, 10px); color: var(--text-dim); letter-spacing: .06em; }
|
||
.lo-select select {
|
||
height: 100%; min-width: 1.6rem; padding: 0 .26rem 0 .06rem; border: 0; outline: none; cursor: pointer;
|
||
font: inherit; font-size: max(.15rem, 11px); color: var(--text-hi);
|
||
background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234ed8af' d='M7 9l5 6 5-6z'/></svg>") no-repeat right .04rem center / .2rem .2rem;
|
||
-webkit-appearance: none; appearance: none;
|
||
}
|
||
.lo-select select option { background: var(--bg-2); color: var(--text-hi); }
|
||
.lo-select:focus-within { border-color: var(--mint-700); }
|
||
|
||
.lo-toggle {
|
||
display: inline-flex; align-items: center; gap: .07rem; height: max(.4rem, 24px); padding: 0 .12rem;
|
||
font: inherit; font-size: max(.15rem, 11px); color: var(--text-lo); background: transparent; border: 1px solid transparent; cursor: pointer;
|
||
touch-action: manipulation;
|
||
}
|
||
.lo-toggle__box { display: grid; place-items: center; width: max(.2rem, 14px); height: max(.2rem, 14px); border: 1px solid var(--line-3); }
|
||
.lo-toggle__box .icon { width: 86%; height: 86%; opacity: 0; color: var(--text-on-mint); }
|
||
.lo-toggle.is-on { color: var(--mint-400); }
|
||
.lo-toggle.is-on .lo-toggle__box { background: var(--mint-500); border-color: var(--mint-400); }
|
||
.lo-toggle.is-on .lo-toggle__box .icon { opacity: 1; }
|
||
|
||
/* ---- roster grid ------------------------------------------------------------------------------------------------------------ */
|
||
.lo-grid {
|
||
flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
|
||
display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.16rem, 64px), 1fr)); grid-auto-rows: max-content;
|
||
align-content: start; gap: .1rem; padding: .06rem .08rem .2rem .02rem;
|
||
scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
|
||
}
|
||
.lo-empty { grid-column: 1 / -1; padding: .4rem; text-align: center; font-size: max(.16rem, 11px); }
|
||
|
||
.lo-card {
|
||
--tc: var(--tier-1);
|
||
position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0;
|
||
padding: 0; font: inherit; color: var(--text-hi); text-align: left; cursor: pointer;
|
||
background: linear-gradient(180deg, rgba(34, 41, 38, .95), rgba(14, 17, 16, .98));
|
||
border: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--tc);
|
||
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
|
||
touch-action: manipulation;
|
||
}
|
||
.lo-card--t1 { --tc: var(--tier-1); } .lo-card--t2 { --tc: var(--tier-2); } .lo-card--t3 { --tc: var(--tier-3); }
|
||
.lo-card--t4 { --tc: var(--tier-4); } .lo-card--t5 { --tc: var(--tier-5); } .lo-card--t6 { --tc: var(--tier-6); }
|
||
.lo-card:hover { border-color: var(--line-3); transform: translateY(-1px); }
|
||
.lo-card.is-sel { border-color: var(--mint-400); box-shadow: inset 0 -2px 0 var(--tc), 0 0 0 1px var(--mint-500), 0 0 .16rem rgba(23, 249, 183, .35); }
|
||
.lo-card:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
|
||
.lo-card__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #1b201e; }
|
||
.lo-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.lo-card__art::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 10, 9, .85)); }
|
||
.lo-card__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: .44rem; font-weight: 900; color: var(--text-dim); }
|
||
.lo-card__tier { position: absolute; left: .03rem; top: .03rem; z-index: 1; }
|
||
.lo-card__flag {
|
||
position: absolute; right: 0; top: 0; z-index: 1; width: .22rem; height: .22rem;
|
||
background: linear-gradient(225deg, var(--mint-400) 50%, transparent 50%);
|
||
}
|
||
.lo-card__name {
|
||
position: absolute; left: .05rem; right: .05rem; top: calc(100% - max(.64rem, 34px)); z-index: 1;
|
||
font-size: max(.15rem, 10px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
text-shadow: 0 1px 2px #000;
|
||
}
|
||
.lo-card__kit { display: flex; align-items: center; justify-content: space-between; gap: .04rem; height: max(.3rem, 18px); padding: 0 .04rem; background: rgba(0, 0, 0, .4); }
|
||
.lo-card__sk { display: inline-flex; align-items: center; gap: .04rem; font-size: max(.13rem, 9px); color: var(--text-lo); }
|
||
.lo-card__sk b { font-family: var(--font-num); letter-spacing: .04em; }
|
||
.lo-card__sk.is-alt { color: var(--mint-400); }
|
||
.lo-card__mod {
|
||
display: inline-grid; place-items: center; min-width: max(.24rem, 15px); height: max(.2rem, 13px); padding: 0 .03rem;
|
||
font-family: var(--font-num); font-size: max(.13rem, 9px); font-weight: 700; color: var(--text-lo);
|
||
border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
|
||
}
|
||
.lo-card__mod.is-alt { color: var(--text-on-mint); background: var(--gold-2); border-color: var(--gold); }
|
||
|
||
/* ---- skill icon / module glyph ---------------------------------------------------------------------------------------------- */
|
||
.lo-sicon { position: relative; flex: none; display: inline-grid; place-items: center; width: .72rem; height: .72rem; background: #151a18; border: 1px solid var(--line-2); }
|
||
.lo-sicon img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.lo-sicon--xs { width: max(.2rem, 13px); height: max(.2rem, 13px); border: 0; background: transparent; }
|
||
.lo-sicon--xs .lo-sicon__glyph { display: none; }
|
||
.lo-sicon--md { width: max(.72rem, 38px); height: max(.72rem, 38px); }
|
||
.lo-sicon__glyph { font-family: var(--font-num); font-size: max(.2rem, 12px); font-weight: 700; color: var(--text-lo); letter-spacing: .04em; }
|
||
.lo-sicon.is-on { border-color: #1ea0ff; }
|
||
.lo-sicon__outline { position: absolute; inset: -.05rem; width: calc(100% + .1rem) !important; height: calc(100% + .1rem) !important; object-fit: fill; pointer-events: none; }
|
||
.lo-sicon__ring { position: absolute; inset: -.05rem; border: 2px solid #1ea0ff; pointer-events: none; }
|
||
|
||
.lo-mglyph { position: relative; flex: none; display: inline-grid; place-items: center; width: max(.56rem, 30px); height: max(.56rem, 30px);
|
||
background: linear-gradient(180deg, #2a322f, #151a18); border: 1px solid var(--line-3); }
|
||
.lo-mglyph img { width: 78%; height: 78%; object-fit: contain; }
|
||
.lo-mglyph__t { font-family: var(--font-num); font-size: max(.26rem, 15px); font-weight: 700; color: var(--gold-2); line-height: 1; }
|
||
.lo-mglyph--none { background: #121615; border-style: dashed; }
|
||
.lo-mglyph__slash { position: absolute; inset: 22%; border-radius: 50%; border: 2px solid var(--text-dim); }
|
||
.lo-mglyph__slash::after { content: ''; position: absolute; left: 50%; top: -10%; bottom: -10%; width: 2px; background: var(--text-dim); transform: translateX(-50%) rotate(45deg); }
|
||
|
||
/* ---- detail panel -------------------------------------------------------------------------------------------------------- */
|
||
.lo-detail {
|
||
--bk-c: var(--mint-500);
|
||
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
|
||
background: linear-gradient(180deg, rgba(24, 30, 28, .97), rgba(10, 13, 12, .98));
|
||
border: 1px solid var(--line-2); box-shadow: 0 .14rem .4rem rgba(0, 0, 0, .45);
|
||
}
|
||
.lo-detail--empty { align-items: center; justify-content: center; font-size: max(.16rem, 11px); }
|
||
.lo-dhead { position: relative; flex: none; display: grid; grid-template-columns: max(1.3rem, 60px) minmax(0, 1fr); gap: .16rem; padding: .16rem .18rem .14rem; border-bottom: 1px solid var(--line); }
|
||
.lo-dhead__art { position: relative; overflow: hidden; aspect-ratio: 1 / 1.25; background: #1b201e; border: 1px solid var(--line-2); box-shadow: inset 0 -3px 0 var(--tc, var(--tier-1)); }
|
||
.lo-dhead__art--t1 { --tc: var(--tier-1); } .lo-dhead__art--t2 { --tc: var(--tier-2); } .lo-dhead__art--t3 { --tc: var(--tier-3); }
|
||
.lo-dhead__art--t4 { --tc: var(--tier-4); } .lo-dhead__art--t5 { --tc: var(--tier-5); } .lo-dhead__art--t6 { --tc: var(--tier-6); }
|
||
.lo-dhead__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
|
||
.lo-dhead__art .uthumb { width: 100%; height: 100%; }
|
||
.lo-dhead__info { min-width: 0; display: flex; flex-direction: column; gap: .04rem; }
|
||
.lo-dhead__chips { display: flex; align-items: center; gap: .08rem; }
|
||
.lo-dhead__name { margin: .02rem 0 0; font-size: max(.34rem, 17px); font-weight: 900; letter-spacing: .06em; line-height: 1.1; }
|
||
.lo-dhead__en { font-family: var(--font-display); font-size: max(.13rem, 9px); letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }
|
||
.lo-dhead__class { display: flex; align-items: center; gap: .05rem; font-size: max(.15rem, 10px); color: var(--text-md); }
|
||
.lo-dhead__prof { width: max(.2rem, 13px); height: max(.2rem, 13px); object-fit: contain; }
|
||
.lo-sep { width: 1px; height: .16rem; background: var(--line-3); margin: 0 .04rem; }
|
||
.lo-dhead__bonds { display: flex; flex-wrap: wrap; gap: .05rem; margin-top: .02rem; }
|
||
.lo-bond { display: inline-flex; align-items: center; gap: .04rem; padding: .01rem .08rem .01rem .04rem; font-size: max(.13rem, 9px); color: var(--text-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
|
||
.lo-bond__icon { width: max(.18rem, 12px); height: max(.18rem, 12px); object-fit: contain; }
|
||
.lo-bond__dot { width: .1rem; height: .1rem; border-radius: 50%; background: var(--mint-700); }
|
||
.lo-dhead__reset { position: absolute; right: .12rem; top: .12rem; }
|
||
|
||
.lo-detail__body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .12rem .18rem .2rem; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
|
||
.lo-sec { display: flex; flex-direction: column; gap: .08rem; }
|
||
.lo-sec + .lo-sec { margin-top: .18rem; }
|
||
.lo-sec__head { display: flex; align-items: center; gap: .12rem; min-height: max(.36rem, 22px); }
|
||
.lo-sec__head h3 { display: flex; align-items: baseline; gap: .08rem; margin: 0; font-size: max(.2rem, 13px); font-weight: 900; letter-spacing: .1em; }
|
||
.lo-sec__head h3::before { content: ''; align-self: center; width: .05rem; height: .2rem; background: var(--mint-500); }
|
||
.lo-sec__note { margin-left: auto; font-size: max(.13rem, 9px); color: var(--text-dim); }
|
||
.lo-sec__note b { color: var(--text-md); }
|
||
|
||
.lo-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line-2); }
|
||
.lo-seg button {
|
||
height: max(.32rem, 22px); padding: 0 .12rem; font: inherit; font-size: max(.13rem, 10px); color: var(--text-lo);
|
||
background: transparent; border: 0; cursor: pointer; touch-action: manipulation;
|
||
}
|
||
.lo-seg button + button { border-left: 1px solid var(--line-2); }
|
||
.lo-seg button.is-on { color: var(--text-on-mint); background: var(--mint-500); }
|
||
.lo-seg button:disabled { opacity: .4; cursor: default; }
|
||
|
||
/* skills */
|
||
.lo-skills { display: flex; flex-direction: column; gap: .07rem; }
|
||
.lo-skill {
|
||
position: relative; display: flex; align-items: flex-start; gap: .14rem; width: 100%; padding: .1rem .12rem .1rem .16rem;
|
||
font: inherit; color: var(--text-md); text-align: left; cursor: pointer;
|
||
background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
|
||
transition: background var(--t-fast), border-color var(--t-fast);
|
||
touch-action: manipulation;
|
||
}
|
||
.lo-skill:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
|
||
.lo-skill.is-on { color: var(--text-hi); background: linear-gradient(90deg, rgba(30, 160, 255, .13), rgba(30, 160, 255, .02) 70%); border-color: rgba(30, 160, 255, .55); }
|
||
.lo-skill__deco { position: absolute; left: -1px; top: 50%; transform: translate(-40%, -50%); width: .14rem; height: .17rem; }
|
||
.lo-skill__deco img, .lo-skill__deco i { display: block; width: 100%; height: 100%; }
|
||
.lo-skill__deco i { background: #1ea0ff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
|
||
.lo-skill__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
|
||
.lo-skill__head { display: flex; align-items: center; gap: .08rem; flex-wrap: wrap; }
|
||
.lo-skill__slot { font-family: var(--font-num); font-size: max(.13rem, 9px); font-weight: 700; color: var(--text-dim); padding: 0 .05rem; border: 1px solid var(--line-2); letter-spacing: .06em; }
|
||
.lo-skill.is-on .lo-skill__slot { color: #7cc8ff; border-color: rgba(30, 160, 255, .55); }
|
||
.lo-skill__name { font-size: max(.19rem, 12px); font-weight: 700; color: var(--text-hi); }
|
||
.lo-skill__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; }
|
||
.lo-skill__desc { display: block; font-size: max(.15rem, 10px); line-height: 1.55; color: var(--text-md); }
|
||
.lo-sp { padding: .01rem .07rem; font-size: max(.12rem, 9px); font-weight: 700; color: #0b0d0c; background: #9bd26b; }
|
||
.lo-sp--atk { background: #ff9a3c; }
|
||
.lo-sp--def { background: #f5c542; }
|
||
.lo-sp--passive { background: #9aa4a0; }
|
||
.lo-tag { font-size: max(.13rem, 9px); color: var(--text-lo); }
|
||
.lo-tag b { color: var(--text-hi); font-family: var(--font-num); margin-left: .02rem; }
|
||
|
||
.lo-badge { display: inline-flex; align-items: center; gap: .03rem; padding: .01rem .07rem; font-size: max(.12rem, 9px); font-weight: 700; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
|
||
.lo-badge .icon { width: .13rem; height: .13rem; }
|
||
.lo-badge--def { color: var(--gold-2); border: 1px solid rgba(242, 189, 62, .55); }
|
||
.lo-badge--on { color: #0b1a26; background: #1ea0ff; }
|
||
.lo-badge--changed { color: var(--text-on-mint); background: var(--mint-500); }
|
||
.lo-badge--plain { color: var(--text-dim); border: 1px solid var(--line-2); }
|
||
|
||
/* modules */
|
||
.lo-mods { display: flex; flex-wrap: wrap; gap: .08rem; }
|
||
.lo-mod {
|
||
position: relative; flex: 1 1 1.9rem; min-width: 1.7rem; max-width: 3.2rem; display: flex; align-items: center; gap: .1rem; padding: .08rem .12rem .08rem .08rem;
|
||
font: inherit; color: var(--text-md); text-align: left; cursor: pointer;
|
||
background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
|
||
transition: background var(--t-fast), border-color var(--t-fast); touch-action: manipulation;
|
||
}
|
||
.lo-mod:hover { border-color: var(--line-3); }
|
||
.lo-mod.is-on { color: var(--text-hi); background: linear-gradient(90deg, rgba(242, 189, 62, .14), rgba(242, 189, 62, .02) 75%); border-color: rgba(242, 189, 62, .7); }
|
||
.lo-mod.is-on .lo-mglyph { border-color: var(--gold-2); box-shadow: 0 0 .1rem rgba(255, 198, 0, .35); }
|
||
.lo-mod__text { min-width: 0; display: flex; flex-direction: column; gap: .01rem; }
|
||
.lo-mod__type { font-family: var(--font-num); font-size: max(.12rem, 9px); letter-spacing: .1em; color: var(--text-dim); }
|
||
.lo-mod__name { font-size: max(.16rem, 11px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.lo-mod__def { position: absolute; right: .04rem; top: .04rem; }
|
||
|
||
.lo-minfo { margin-top: .04rem; padding: .1rem .12rem; display: flex; flex-direction: column; gap: .07rem; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-left: 3px solid var(--gold-2); }
|
||
.lo-minfo--none { border-left-color: var(--line-3); }
|
||
.lo-minfo__lead { margin: 0; font-size: max(.15rem, 10px); color: var(--text-lo); }
|
||
.lo-minfo__title { display: flex; align-items: center; gap: .08rem; font-size: max(.17rem, 11px); }
|
||
.lo-minfo__type { font-family: var(--font-num); font-size: max(.13rem, 9px); color: var(--gold-2); letter-spacing: .1em; }
|
||
.lo-minfo__icon { flex: none; width: max(.26rem, 16px); height: max(.26rem, 16px); object-fit: contain; }
|
||
.lo-minfo__row { display: grid; grid-template-columns: max(.5rem, 28px) minmax(0, 1fr); gap: .08rem; align-items: baseline; }
|
||
.lo-minfo__k { font-size: max(.13rem, 9px); color: var(--text-dim); letter-spacing: .08em; }
|
||
.lo-minfo__v { font-size: max(.15rem, 10px); line-height: 1.55; color: var(--text-md); }
|
||
.lo-minfo__tname { color: var(--text-hi); margin-right: .06rem; }
|
||
.lo-attrs { display: flex; flex-wrap: wrap; gap: .06rem; }
|
||
.lo-attr { display: inline-flex; align-items: baseline; gap: .04rem; padding: .01rem .08rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: max(.13rem, 9px); color: var(--text-lo); }
|
||
.lo-attr b { font-family: var(--font-num); font-size: max(.15rem, 10px); }
|
||
.lo-attr.is-up b { color: var(--mint-400); }
|
||
.lo-attr.is-down b { color: var(--red-premium); }
|
||
.lo-locknote { display: flex; align-items: center; gap: .06rem; margin: .16rem 0 0; font-size: max(.14rem, 10px); color: var(--amber); }
|
||
.lo-locknote .icon { width: .16rem; height: .16rem; }
|
||
|
||
/* ---- entry button (lobby / room / briefing) --------------------------------------------------------------------------- */
|
||
.lo-entry { position: relative; gap: .08rem; }
|
||
.lo-entry__icon { width: 1.25em; height: 1.25em; object-fit: contain; flex: none; }
|
||
.lo-entry__n {
|
||
display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; margin-left: .02rem;
|
||
font-size: .8em; font-weight: 700; color: var(--text-on-mint); background: var(--mint-500); border-radius: 1em;
|
||
}
|
||
|
||
/* Untimed phases (user playtest #11 / #4 item 3: the official 独立模拟 shows no countdown outside combat — the server
|
||
sends deadline 0 for them, Match.soloUntimed): ui/components.js Countdown now renders nothing without a deadline;
|
||
this rule stays as a safety net for the old "无倒计时" placeholder ("--" digits + COUNTDOWN label). */
|
||
.countdown[aria-label="无倒计时"] { display: none; }
|
||
|
||
/* the app screens behind the overlay do not need to animate */
|
||
.sp-loadout-open .app-root > .screen { visibility: hidden; }
|
||
|
||
/* ---- narrow / short viewports ------------------------------------------------------------------------------------------- */
|
||
@media (max-width: 1100px) {
|
||
.lo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 6.4rem); gap: .16rem; padding: .12rem .2rem .16rem; }
|
||
.lo-chip__lbl { display: none; }
|
||
}
|
||
/* phones (the root scale is clamped at 40 px: less than ~14 rem of width): the detail slides over the roster */
|
||
@media (max-width: 760px) {
|
||
.lo-top { padding: 0 .16rem; }
|
||
.lo-count, .lo-sync { display: none; }
|
||
.lo-body { grid-template-columns: minmax(0, 1fr); }
|
||
.lo-detail-wrap { display: none; }
|
||
.lo-body.is-detail .lo-roster { display: none; }
|
||
.lo-body.is-detail .lo-detail-wrap { display: flex; }
|
||
.lo-detail-back {
|
||
display: inline-flex; align-self: flex-start; align-items: center; gap: .04rem; margin-bottom: .08rem; padding: .04rem .12rem .04rem .04rem;
|
||
font: inherit; font-size: max(.15rem, 11px); color: var(--mint-400); background: transparent; border: 1px solid var(--mint-800); cursor: pointer;
|
||
}
|
||
.lo-detail-back .icon { width: .2rem; height: .2rem; }
|
||
}
|
||
@media (max-height: 520px) {
|
||
.lo-note { display: none; }
|
||
.lo-dhead { grid-template-columns: max(1rem, 48px) minmax(0, 1fr); padding: .1rem .14rem; }
|
||
.lo-dhead__en { display: none; }
|
||
.lo-grid { grid-template-columns: repeat(auto-fill, minmax(max(1rem, 58px), 1fr)); }
|
||
}
|
||
/* the shared Button / TextField scale with the root (40 px/rem on phones ⇒ 6–7 px text, 14–20 px tall): the overlay's
|
||
own controls (返回, 全部恢复默认, 恢复默认, the search field) keep a readable size and a tappable height (review fix) */
|
||
.lo .lo-back { height: max(.5rem, 32px); padding: 0 max(.2rem, 10px) 0 max(.12rem, 6px); font-size: max(.18rem, 12px); }
|
||
.lo .lo-top__right .btn, .lo .lo-dhead__reset { height: max(.36rem, 28px); padding: 0 max(.16rem, 8px); font-size: max(.15rem, 11px); }
|
||
.lo .lo-search .field__box { height: max(.56rem, 28px); padding: 0 max(.16rem, 6px); }
|
||
.lo .lo-search .field__input { font-size: max(.2rem, 12px); }
|
||
.lo .lo-search .field__icon { width: max(.22rem, 14px); height: max(.22rem, 14px); }
|
||
.sp-coarse .lo-chip, .sp-coarse .lo-toggle, .sp-coarse .lo-select { min-height: 30px; }
|
||
.sp-coarse .lo-seg button { min-height: 28px; }
|
||
@media (prefers-reduced-motion: reduce) { .lo, .lo-card { animation: none; transition: none; } }
|