Merge upstream 0.2.2 and resolve reroll conflicts (#408)
This commit is contained in:
Siornya committed
commit
be095d8638
447 files changed
+33376
-8843
No files matched your search
@@ -515,6 +515,8 @@ button.bpop__harmony:hover { border-style: solid; color: #fff; }
|
||||
|
||||
/* ---- direction wheel (ui/facingWheel.js, research 09 §1.2): white diamond, 4 chevrons, "✕ 点击取消", orange range ---- */
|
||||
.fwheel { position: fixed; inset: 0; z-index: 6; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
|
||||
/* the wheel takes the keyboard focus when it opens (Enter confirms there, GitHub #394): no ring around the whole screen */
|
||||
.fwheel:focus-visible { outline: none; }
|
||||
.fwheel__stripes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
|
||||
.fwheel__dia { position: absolute; transform: translate(-50%, -50%); pointer-events: none; animation: fwheel-in 160ms var(--ease-out); }
|
||||
@keyframes fwheel-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } }
|
||||
|
||||
@@ -156,6 +156,9 @@
|
||||
.scard__idesc { font-size: .12rem; line-height: 1.45; color: var(--text-lo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.scard--sold { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 .08rem, transparent .08rem .16rem), rgba(8, 11, 10, .75); border: 1px dashed var(--line-2); justify-content: center; align-items: center; }
|
||||
.scard__soldtxt { display: flex; flex-direction: column; align-items: center; gap: .02rem; font-size: .16rem; color: var(--text-dim); }
|
||||
/* a slot the 调度中心's upgrade opened and nothing filled yet (ui/shopBar.js EmptyCard, also .scard--sold): the bare frame — no hatching,
|
||||
no SOLD OUT text */
|
||||
.scard--sold.scard--empty { background: rgba(8, 11, 10, .4); border-color: var(--line); }
|
||||
|
||||
/* ---- funds card ---- */
|
||||
.funds { width: 1.18rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; padding: .06rem; border-left: 1px solid var(--line); }
|
||||
|
||||
@@ -30,6 +30,21 @@
|
||||
.gtop > * { pointer-events: auto; }
|
||||
.gtop__left { display: flex; align-items: center; gap: .16rem; }
|
||||
.gtop__meta { display: flex; flex-direction: column; align-items: flex-start; gap: .06rem; }
|
||||
/* the latency pill and, beside it, the 观战席 capsule (ui/hud.js SpectatorPill: an eye + how many are watching; opens the roster) */
|
||||
.gtop__net { display: flex; align-items: center; gap: .08rem; }
|
||||
.specpill { --btn-bg: rgba(0, 0, 0, .5); --btn-bg-hover: rgba(0, 0, 0, .66); --btn-bd: var(--line); height: .32rem; min-width: 0; padding: 0 .12rem; gap: .05rem; border-radius: 99px; }
|
||||
.specpill .btn__icon { width: .18rem; height: .18rem; color: var(--mint-500); }
|
||||
.specpill__num { font-size: .18rem; font-weight: 700; color: var(--mint-400); }
|
||||
.specpill.is-me { --btn-bd: var(--mint-600); }
|
||||
/* the roster inside its modal */
|
||||
.spec__roster { display: flex; flex-direction: column; gap: .06rem; margin: 0 0 .1rem; padding: 0; list-style: none; }
|
||||
.spec__row { display: flex; align-items: center; gap: .1rem; min-height: .44rem; padding: .04rem .1rem; background: rgba(255, 255, 255, .03); border: 1px solid transparent; }
|
||||
.spec__row.is-me { border-color: var(--mint-700); background: rgba(45, 212, 191, .08); }
|
||||
.spec__row.is-offline .spec__name { color: var(--text-dim); }
|
||||
.spec__ico { width: .18rem; height: .18rem; flex: none; color: var(--mint-500); }
|
||||
.spec__row.is-offline .spec__ico { color: var(--text-dim); }
|
||||
.spec__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .19rem; color: var(--text-hi); }
|
||||
.spec__hint { margin: .04rem 0 0; font-size: .15rem; line-height: 1.45; }
|
||||
.gtop__exit { box-shadow: 0 .06rem .2rem rgba(0, 0, 0, .5); }
|
||||
.gtop__center {
|
||||
--bk-c: var(--mint-700);
|
||||
@@ -501,6 +516,10 @@
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ---- settings modal ------------------------------------------------------------------------------------------------ */
|
||||
/* the 设置 trigger of the lobby and the room (ui/settings.js SettingsButton, GitHub #238): the 玩法说明 button's twin; its gear sits
|
||||
inside the label, so the label lays glyph and text out like the button itself */
|
||||
.settings-btn .btn__label { display: inline-flex; align-items: center; gap: .1rem; }
|
||||
.settings-btn .btn__icon { color: var(--mint-500); }
|
||||
.set-list { display: flex; flex-direction: column; gap: .16rem; padding-top: .06rem; }
|
||||
.set-row { display: grid; grid-template-columns: 3.3rem 1fr auto; align-items: center; gap: .18rem; min-height: .44rem; }
|
||||
.set-row__label { display: flex; align-items: center; gap: .1rem; font-size: .18rem; color: var(--text-hi); white-space: nowrap; }
|
||||
@@ -543,6 +562,26 @@
|
||||
.set-keys__more > summary { padding: .06rem 0; font-size: .15rem; color: var(--mint-400); cursor: pointer; }
|
||||
.set-keys__more[open] > summary { margin-bottom: .08rem; }
|
||||
@keyframes set-key-wait { to { box-shadow: 0 0 .12rem rgba(246, 163, 41, .45); } }
|
||||
/* 问题反馈 (ui/settings.js DiagSection): laid out like 快捷键 — a head with its button, a hint, the result line; the
|
||||
recorded-error count in the figure face of the slider values (amber once there is one); the report box only when the
|
||||
clipboard refused it, styled like 干员调配's 导出 box (screens/loadout.css .lo-io__text) */
|
||||
.set-diag { display: flex; flex-direction: column; gap: .08rem; padding-top: .1rem; border-top: 1px solid var(--line); }
|
||||
.set-diag__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .04rem .2rem; }
|
||||
.set-diag__stat { display: inline-flex; align-items: baseline; gap: .1rem; font-size: .14rem; color: var(--text-lo); }
|
||||
.set-diag__count { font-family: var(--font-num); font-size: .2rem; line-height: 1; color: var(--mint-400); }
|
||||
.set-diag__count.is-warn { color: var(--amber); }
|
||||
.set-diag__url { min-width: 0; font-size: .13rem; color: var(--text-dim); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
|
||||
.set-diag__battle-hint { margin-top: -.06rem; }
|
||||
.set-diag__text {
|
||||
box-sizing: border-box; width: 100%; height: max(2rem, 140px); min-height: 120px; resize: vertical;
|
||||
padding: max(.1rem, 8px) max(.12rem, 10px);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: max(.13rem, 11px); line-height: 1.5;
|
||||
color: var(--text-hi); background: rgba(4, 10, 8, .55); border: 1px solid var(--line-2); border-radius: 2px; outline: none;
|
||||
white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto;
|
||||
}
|
||||
.set-diag__text:focus { border-color: var(--mint-700); }
|
||||
/* touch: 16 px, below which iOS zooms into the focused box (as 干员调配's 导出 box and ui/clipboard.js) */
|
||||
.sp-coarse .set-diag__text { font-size: 16px; }
|
||||
@media (max-width: 767px) { .set-keys__list { grid-template-columns: minmax(0, 1fr); } }
|
||||
@media (max-height: 600px) and (pointer: coarse), (max-height: 600px) and (any-pointer: coarse) {
|
||||
.set-key { height: max(.38rem, 30px); }
|
||||
|
||||
+102
-45
@@ -138,56 +138,93 @@
|
||||
.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 {
|
||||
/* ---- roster: one list, one row per operator (0.2.2) ------------------------------------------------------------------------ */
|
||||
/* The quick choices of PR #301 (by @farridge) as ONE list instead of three columns of cards (the owner's decision of
|
||||
2026-10-08: 「三个竖排有点乱影响观感」): every row has the same four columns — the operator (portrait, name, bonds), the
|
||||
skills, the elite's modules, 潜能 / 练度 — aligned under a sticky head row, so the eye runs down a column. Sizes: --q a
|
||||
quick button (a skill / module), --art the portrait; a coarse pointer gets 40 px targets. */
|
||||
.lo-list {
|
||||
--q: max(.4rem, 32px); --qg: max(.05rem, 4px); --art: max(.52rem, 40px);
|
||||
--cols: minmax(max(2.2rem, 110px), max(3.2rem, 260px)) calc(3 * var(--q) + 2 * var(--qg)) calc(4 * var(--q) + 3 * var(--qg)) max(2.2rem, 160px);
|
||||
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;
|
||||
padding: 0 .06rem .2rem 0; 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); }
|
||||
.sp-coarse .lo-list { --q: max(.44rem, 40px); }
|
||||
.lo-list__head, .lo .lo-card { display: grid; grid-template-columns: var(--cols); justify-content: start; align-items: center; column-gap: max(.12rem, 8px); }
|
||||
/* (the head has the rows' box — the same borders, transparent, and padding — so its columns are the rows' to the pixel) */
|
||||
.lo-list__head {
|
||||
position: sticky; top: 0; z-index: 2; padding: .05rem .1rem .05rem .07rem; border: 1px solid transparent; border-left-width: 3px;
|
||||
font-size: max(.12rem, 9px); font-weight: 700; letter-spacing: .12em; color: var(--text-dim);
|
||||
background: linear-gradient(180deg, #0d1110 70%, rgba(13, 17, 16, .85)); box-shadow: inset 0 -1px 0 var(--line);
|
||||
}
|
||||
.lo-list__h small { margin-left: .05rem; font-weight: 400; letter-spacing: .04em; color: var(--gold-2); opacity: .8; }
|
||||
.lo-list__rows { display: flex; flex-direction: column; gap: max(.04rem, 3px); padding-top: max(.05rem, 4px); }
|
||||
.lo-empty { padding: .4rem; text-align: center; font-size: max(.16rem, 11px); }
|
||||
|
||||
.lo-card {
|
||||
.lo .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;
|
||||
position: relative; min-width: 0; padding: max(.05rem, 4px) .1rem max(.05rem, 4px) .07rem;
|
||||
background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-left: 3px solid var(--tc);
|
||||
transition: background var(--t-fast), border-color var(--t-fast);
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
/* 0.2.0 补位: a chess marked 未持有 on the 干员持有 tab (its stand-in fights with a fixed skill) */
|
||||
.lo-card__sub { position: absolute; right: .03rem; top: .26rem; z-index: 1; padding: 0 .04rem; font-size: max(.11rem, 8px); font-weight: 700; line-height: 1.4; color: var(--ice-900); background: var(--ice); }
|
||||
.lo .lo-card:hover { background: rgba(255, 255, 255, .045); border-color: var(--line-3); border-left-color: var(--tc); }
|
||||
.lo .lo-card.is-sel { background: linear-gradient(90deg, rgba(78, 216, 175, .1), rgba(78, 216, 175, .02) 60%); border-color: var(--mint-700); border-left-color: var(--tc); box-shadow: 0 0 0 1px var(--mint-500) inset; }
|
||||
.lo-card button:focus-visible, .lo-card select:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
|
||||
.lo-card__pick { display: flex; align-items: center; gap: max(.1rem, 6px); min-width: 0; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
|
||||
.lo-card__art { position: relative; flex: none; width: var(--art); height: var(--art); overflow: hidden; background: #1b201e; border: 1px solid var(--line-2); }
|
||||
.lo-card__art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.lo-card__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: max(.24rem, 16px); font-weight: 900; color: var(--text-dim); }
|
||||
.lo-card__tier { position: absolute; left: 1px; top: 1px; z-index: 1; transform-origin: 0 0; transform: scale(.8); }
|
||||
.lo-card__id { display: flex; flex-direction: column; gap: max(.03rem, 2px); min-width: 0; }
|
||||
.lo-card__name { font-size: max(.17rem, 12px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.lo-card__bonds { display: flex; flex-wrap: wrap; gap: max(.04rem, 3px); min-height: max(.16rem, 12px); }
|
||||
.lo-card__bond, .lo-card__bonds .lo-bond__dot { width: max(.18rem, 13px); height: max(.18rem, 13px); object-fit: contain; }
|
||||
.lo-card__flag { position: absolute; right: 0; top: 0; z-index: 1; width: max(.16rem, 10px); height: max(.16rem, 10px); background: linear-gradient(225deg, var(--mint-400) 50%, transparent 50%); pointer-events: none; }
|
||||
/* 0.2.0 补位: a chess marked 未持有 on the 干员持有 tab — its stand-in fights with a fixed skill and no 潜能 / 练度; the choices
|
||||
here apply once it is owned again */
|
||||
.lo-card__sub { align-self: flex-start; padding: 0 .04rem; font-size: max(.11rem, 8px); font-weight: 700; line-height: 1.4; color: var(--ice-900); background: var(--ice); }
|
||||
.lo .lo-card.is-standin .lo-card__skills, .lo .lo-card.is-standin .lo-card__mods, .lo .lo-card.is-standin .lo-cult { opacity: .55; }
|
||||
.lo-locknote--standin { color: var(--ice); }
|
||||
.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__skills, .lo-card__mods { display: flex; align-items: center; gap: var(--qg); min-width: 0; }
|
||||
.lo-card__mods { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
|
||||
.lo-q {
|
||||
position: relative; flex: none; display: grid; place-items: center; width: var(--q); height: var(--q); padding: 0;
|
||||
font: inherit; color: var(--text-lo); background: none; border: 0; cursor: pointer; touch-action: manipulation;
|
||||
}
|
||||
.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); }
|
||||
.lo-q--empty { border: 1px dashed rgba(255, 255, 255, .07); cursor: default; }
|
||||
.lo-q:not(.is-on):not(.lo-q--empty) { opacity: .62; }
|
||||
.lo-q:not(.is-on):not(.lo-q--empty):hover { opacity: 1; }
|
||||
.lo-q__type { position: absolute; left: 0; bottom: 0; padding: 0 2px; font-size: max(.11rem, 8px); line-height: 1.3; color: var(--text-hi); background: rgba(0, 0, 0, .7); pointer-events: none; }
|
||||
.lo-q--mod.is-on .lo-mglyph { border-color: var(--gold-2); box-shadow: 0 0 .08rem rgba(255, 198, 0, .35); }
|
||||
|
||||
/* 潜能 / 练度 (screens/cultivation.js): two compact selects side by side in the row's last column; at the defaults (潜能 6,
|
||||
精英2 Lv.60 — the same on every row) they stay quiet, a changed one is mint */
|
||||
.lo-cult { display: flex; align-items: center; gap: max(.04rem, 3px); min-width: 0; }
|
||||
.lo .lo-cult .lo-select { min-height: 0; height: max(.32rem, 22px); padding-left: 0; border-color: transparent; background: rgba(255, 255, 255, .03); }
|
||||
.lo .lo-cult .lo-select:hover, .lo .lo-cult .lo-select:focus-within { border-color: var(--line-3); }
|
||||
.lo .lo-cult .lo-select select { width: 100%; min-width: 0; padding: 0 max(.2rem, 14px) 0 max(.06rem, 4px); font-size: max(.14rem, 10px); color: var(--text-lo); }
|
||||
.lo-cult__pot { flex: 0 0 auto; }
|
||||
.lo-cult__tier { flex: 1 1 auto; min-width: 0; }
|
||||
.lo .lo-cult .lo-select.is-off { border-color: var(--mint-700); background: rgba(78, 216, 175, .08); }
|
||||
.lo .lo-cult .lo-select.is-off select { color: var(--mint-400); font-weight: 700; }
|
||||
.sp-coarse .lo .lo-cult .lo-select { height: max(.32rem, 28px); }
|
||||
|
||||
/* the detail's 潜能 / 练度 section */
|
||||
.lo-sec--cult { padding: .08rem .1rem .1rem; margin-bottom: .14rem; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-left: 3px solid var(--mint-500); }
|
||||
.lo-sec--cult .lo-sec__head .lo-badge { margin-left: auto; }
|
||||
.lo-cult__row { display: grid; grid-template-columns: max(.5rem, 30px) minmax(0, 1fr); align-items: center; gap: .08rem; }
|
||||
.lo-cult__k { font-size: max(.13rem, 10px); color: var(--text-dim); letter-spacing: .08em; }
|
||||
.lo .lo-cult__row .lo-seg { margin-left: 0; flex-wrap: wrap; justify-self: start; }
|
||||
.lo-seg--pot button { min-width: max(.36rem, 26px); font-family: var(--font-num); }
|
||||
.lo-seg--tier button { padding: 0 .1rem; }
|
||||
.lo-cult__eff { margin: .02rem 0 0; font-size: max(.14rem, 10px); line-height: 1.5; color: var(--text-md); }
|
||||
.lo-cult__eff b { color: var(--mint-400); margin-right: .04rem; }
|
||||
.lo-cult__note { margin: 0; font-size: max(.12rem, 9px); line-height: 1.5; color: var(--text-dim); }
|
||||
.lo-sec--cult.is-moot .lo-cult__row, .lo-sec--cult.is-moot .lo-cult__eff { opacity: .55; }
|
||||
.lo-sec--cult.is-moot .lo-cult__note { color: var(--ice); }
|
||||
|
||||
/* ---- 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); }
|
||||
@@ -195,9 +232,13 @@
|
||||
.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--q { width: 86%; height: 86%; }
|
||||
.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; }
|
||||
/* the selected skill's frame (a 30 × 30 sprite, a 3 px ring to its edges) drawn .05rem outside the icon on every side, square:
|
||||
theme.css `img { max-width: 100% }` clamped its width to the icon's while its height grew by .1rem, and `.lo-sicon img`
|
||||
(more specific) made it `cover` — a tall, left-shifted frame with clipped side lines (GitHub #398, PR #399) */
|
||||
.lo-sicon .lo-sicon__outline { position: absolute; inset: -.05rem; width: calc(100% + .1rem) !important; height: calc(100% + .1rem) !important; max-width: none; 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);
|
||||
@@ -205,6 +246,7 @@
|
||||
.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--q { width: 86%; height: 86%; }
|
||||
.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); }
|
||||
|
||||
@@ -236,6 +278,11 @@
|
||||
.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-garrisons { margin-bottom: .18rem; }
|
||||
.lo-garrisons .dgarrison__k { font-size: max(.14rem, 11px); }
|
||||
.lo-garrisons .dgarrison__type { font-size: max(.12rem, 10px); }
|
||||
.lo-garrisons .dgarrison__icon { width: max(.18rem, 14px); height: max(.18rem, 14px); }
|
||||
.lo-garrisons .dgarrison__text { font-size: max(.15rem, 11px); }
|
||||
.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); }
|
||||
@@ -425,6 +472,9 @@
|
||||
.diy-slot__sicon, .diy-slot__micon { flex: none; display: inline-grid; place-items: center; width: max(.24rem, 16px); height: max(.24rem, 16px); object-fit: contain; font-size: .8em; color: var(--text-lo); }
|
||||
.diy-slot__micon--none { border: 1px solid var(--line-2); }
|
||||
.diy-slot__acts { display: flex; flex-direction: column; gap: .04rem; }
|
||||
/* 0.2.2: an owned pick's 潜能 / 练度 (screens/cultivation.js) — a prototype has neither (a dim line instead) */
|
||||
.diy-slot__cult { display: block; margin-top: .03rem; font-size: max(.12rem, 9px); }
|
||||
.diy-slot__cult .lo-cult { max-width: max(2.6rem, 200px); }
|
||||
.diy-slot__bad { display: flex; align-items: center; gap: .04rem; margin: .02rem 0 0; font-size: max(.12rem, 9px); color: var(--amber); }
|
||||
.diy-slot.is-bad { border-color: rgba(255, 196, 0, .45); }
|
||||
.diy-tag { display: inline-flex; align-items: center; height: 1.5em; padding: 0 .4em; font-size: max(.11rem, 8px); font-weight: 700; border-radius: 1em; white-space: nowrap; }
|
||||
@@ -527,9 +577,13 @@
|
||||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
}
|
||||
/* phones (the root scale is clamped at 40 px: less than ~14 rem of width): the detail slides over the roster */
|
||||
/* phones and small tablets (up to 1000 px wide; 0.2.2 — 760 px before the roster became one list with quick choices): the
|
||||
list takes the whole width and the detail slides over it — a row's quick choice keeps the list, its portrait / name
|
||||
opens the detail */
|
||||
@media (max-width: 760px) {
|
||||
.lo-top { padding: 0 .16rem; }
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.lo-body { grid-template-columns: minmax(0, 1fr); }
|
||||
.lo-detail-wrap { display: none; }
|
||||
.lo-body.is-detail .lo-roster { display: none; }
|
||||
@@ -540,11 +594,14 @@
|
||||
}
|
||||
.lo-detail-back .icon { width: .2rem; height: .2rem; }
|
||||
}
|
||||
/* narrow phones: the row's bonds give their line to the name, the columns keep their place */
|
||||
@media (max-width: 700px) {
|
||||
.lo-card__bonds { display: none; }
|
||||
}
|
||||
@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) */
|
||||
@@ -555,7 +612,7 @@
|
||||
.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; } }
|
||||
@media (prefers-reduced-motion: reduce) { .lo, .lo .lo-card { animation: none; transition: none; } }
|
||||
|
||||
/* 导出 / 导入 (干员调配 presets): the dialog is the shared Modal, rendered NEXT TO `.lo` (a sibling) rather than inside
|
||||
it — so components.css `.modal { position: fixed }` and its z-index above the overlay apply as they do everywhere
|
||||
|
||||
@@ -8,8 +8,6 @@
|
||||
.result__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
|
||||
background: linear-gradient(rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .6rem .6rem, linear-gradient(90deg, rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .6rem .6rem;
|
||||
-webkit-mask-image: radial-gradient(70% 70% at 25% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 25% 50%, #000, transparent); }
|
||||
/* The settlement can scroll in portrait; the game-wide rotate overlay must not cover it. */
|
||||
.sp-rotatable.sp-result .rotate-hint { display: none; }
|
||||
.result__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 5.6rem 1fr; gap: .5rem; padding: .36rem .5rem .3rem .6rem; }
|
||||
.result__hero { display: flex; flex-direction: column; align-items: flex-start; gap: .16rem; padding-top: .3rem; min-height: 0; }
|
||||
.result__logoimg { height: 1.1rem; width: auto; opacity: .92; }
|
||||
@@ -44,57 +42,29 @@
|
||||
@keyframes card-in { from { opacity: 0; transform: translateX(.3rem); } }
|
||||
.rcard.is-self { border-left-color: var(--mint-500); background: linear-gradient(90deg, rgba(78, 216, 175, .08), rgba(11, 15, 13, .9) 40%); }
|
||||
.rcard.is-dead { opacity: .8; }
|
||||
.rcard__head {
|
||||
display: grid; grid-template-columns: auto minmax(0, 1fr) auto 2.3rem;
|
||||
grid-template-areas: 'avatar who rounds title' 'lineup lineup lineup lineup'; gap: .12rem .18rem; align-items: center;
|
||||
}
|
||||
.rcard__head .pavatar { --pa: .6rem; grid-area: avatar; }
|
||||
.rcard__who { display: flex; flex-direction: column; gap: .03rem; min-width: 0; grid-area: who; }
|
||||
.rcard__head { display: grid; grid-template-columns: auto minmax(1.5rem, 2.1rem) minmax(0, 1fr) auto 2.3rem; gap: .18rem; align-items: center; }
|
||||
.rcard__head .pavatar { --pa: .6rem; }
|
||||
.rcard__who { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
|
||||
.rcard__name { font-size: .22rem; display: flex; align-items: center; gap: .08rem; }
|
||||
.rcard__ai, .rcard__you { font-size: .11rem; padding: 0 .05rem; font-weight: 700; }
|
||||
.rcard__ai { background: #a9c3d8; color: #0b1520; }
|
||||
.rcard__you { background: var(--mint-500); color: var(--text-on-mint); }
|
||||
.rcard__band { display: inline-flex; align-items: center; gap: .06rem; font-size: .15rem; color: var(--text-lo); }
|
||||
.rcard__round { display: flex; flex-direction: column; align-items: center; grid-area: rounds; }
|
||||
.rcard__round { display: flex; flex-direction: column; align-items: center; }
|
||||
.rcard__round b { font-size: .34rem; line-height: 1; color: #fff; }
|
||||
.rcard__gain { display: flex; gap: .08rem; margin-top: .03rem; font-size: .13rem; color: var(--gold); }
|
||||
.rcard__gain span { display: inline-flex; align-items: center; gap: .02rem; }
|
||||
.rcard__gain .icon { width: .14rem; height: .14rem; }
|
||||
.rcard__gain b { font-size: .14rem; color: var(--gold); }
|
||||
.rcard__title { display: flex; align-items: center; gap: .08rem; padding: .06rem .14rem .06rem .06rem; border: 1px solid rgba(255, 198, 0, .4); background: rgba(255, 198, 0, .06); min-width: 0; grid-area: title; }
|
||||
.rcard__title { display: flex; align-items: center; gap: .08rem; padding: .06rem .14rem .06rem .06rem; border: 1px solid rgba(255, 198, 0, .4); background: rgba(255, 198, 0, .06); min-width: 0; }
|
||||
.rcard__title--none { border-style: dashed; border-color: var(--line); background: none; height: .64rem; }
|
||||
.rcard__title > span { display: flex; flex-direction: column; }
|
||||
.rcard__title b { font-size: .19rem; color: var(--gold); }
|
||||
.rcard__ticon { width: .5rem; height: .5rem; object-fit: contain; }
|
||||
.rcard__title .icon { width: .3rem; height: .3rem; color: var(--gold); }
|
||||
.rcard__mid { display: flex; flex-direction: column; justify-content: center; gap: .08rem; min-width: 0; grid-area: lineup; }
|
||||
.rcard__mid { display: flex; flex-direction: column; justify-content: center; gap: .06rem; min-width: 0; }
|
||||
.rcard__lineup .uthumb { --ut: .46rem; }
|
||||
.rcard__lineup { display: flex; flex-wrap: wrap; gap: .05rem; }
|
||||
.runit { width: max(.9rem, 56px); min-width: 0; }
|
||||
.runit__open {
|
||||
display: flex; flex-direction: column; align-items: center; gap: .04rem; width: 100%; padding: .04rem;
|
||||
color: var(--text-md); background: #101613; border: 1px solid var(--line-2); cursor: pointer;
|
||||
}
|
||||
.runit__open:hover, .runit__open:focus-visible { border-color: var(--mint-400); background: #17231d; }
|
||||
.runit__open:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 2px; }
|
||||
.runit__open.is-golden { border-color: var(--gold); }
|
||||
.runit__art { position: relative; display: grid; place-items: center; width: 100%; height: max(1.4rem, 80px); overflow: hidden; background: radial-gradient(ellipse at bottom, #2a3d32, #111713); }
|
||||
.runit__portrait { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
|
||||
.runit__art > .uthumb { --ut: .56rem; }
|
||||
.runit__tier { position: absolute; left: .02rem; top: .02rem; }
|
||||
.runit__standin { position: absolute; bottom: 0; right: 0; padding: .02rem .04rem; background: #101613; font-size: max(.1rem, 10px); }
|
||||
.runit__items { display: flex; gap: .04rem; }
|
||||
.runit__items .uthumb, .runit__empty { --ut: max(.28rem, 22px); width: max(.28rem, 22px); height: max(.28rem, 22px); }
|
||||
.runit__empty { display: grid; place-items: center; border: 1px dashed var(--line-2); font-size: .11rem; color: var(--text-dim); }
|
||||
.result-unit__body { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .24rem; }
|
||||
.result-unit__portrait { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
|
||||
.result-unit__portrait > img { width: 100%; max-height: 3rem; object-fit: contain; }
|
||||
.result-unit__elite { display: inline-block; margin-left: .06rem; padding: .02rem .06rem; font-size: .12rem; color: var(--gold); border: 1px solid var(--gold); }
|
||||
.result-unit__equipment h3 { display: flex; justify-content: space-between; gap: .1rem; margin-bottom: .12rem; font-size: max(.18rem, 14px); }
|
||||
.result-unit__item { display: flex; gap: .12rem; padding: .14rem 0; border-top: 1px solid var(--line-2); }
|
||||
.result-unit__item > .uthumb { flex-shrink: 0; }
|
||||
.result-unit__item > div { min-width: 0; }
|
||||
.result-unit__item h4 { margin-bottom: .06rem; color: var(--text-hi); font-size: max(.16rem, 13px); }
|
||||
.result-unit__item p { font-size: max(.14rem, 12px); line-height: 1.6; overflow-wrap: anywhere; }
|
||||
.rcard__noinfo { font-family: var(--font-display); font-size: .14rem; letter-spacing: .3em; color: var(--text-dim); padding: .14rem .2rem; border: 1px dashed var(--line-2); }
|
||||
.rcard__bonds { display: flex; gap: .05rem; flex-wrap: wrap; }
|
||||
.rbond { display: inline-flex; align-items: center; gap: .04rem; padding: .01rem .07rem .01rem .03rem; border: 1px solid var(--line-2); font-size: .13rem; color: var(--text-lo); }
|
||||
@@ -106,35 +76,3 @@
|
||||
.rstat.is-best b { color: var(--gold); }
|
||||
.result__foot { margin-top: auto; padding-top: .2rem; display: flex; }
|
||||
.result__foot .btn { min-width: 3.4rem; }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.result__main { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .2rem; padding: .2rem; }
|
||||
.result__hero { padding-top: 0; }
|
||||
.result__headline { font-size: .6rem; }
|
||||
.result__sub { font-size: max(.16rem, 10px); letter-spacing: 0; }
|
||||
.result__logoimg { height: .65rem; }
|
||||
.result__rnum { font-size: 1rem; }
|
||||
.result__foot .btn { min-width: 0; }
|
||||
.rcard__name { font-size: max(.22rem, 13px); }
|
||||
.rcard__band, .rcard__title b { font-size: max(.15rem, 11px); }
|
||||
.rcard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.rstat { font-size: max(.13rem, 10px); }
|
||||
.rstat b { font-size: max(.18rem, 12px); }
|
||||
.result-unit { width: min(6.8rem, 94vw); }
|
||||
.result-unit .modal__title { font-size: 18px; }
|
||||
.result-unit .modal__actions .btn { min-width: 64px; min-height: 44px; font-size: 14px; }
|
||||
.result-unit__elite { font-size: max(.12rem, 10px); }
|
||||
.result-unit__item > .uthumb { --ut: max(.5rem, 36px); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.result__main { display: flex; flex-direction: column; overflow: auto; }
|
||||
.result__hero { flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .12rem; align-items: center; }
|
||||
.result__logo, .result__sub, .result__medals, .result__time { display: none; }
|
||||
.result__rounds { grid-column: 1; }
|
||||
.result__foot { grid-column: 2; grid-row: 2; margin: 0; padding: 0; }
|
||||
.result__players { flex-shrink: 0; overflow: visible; }
|
||||
.rcard__head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'avatar who rounds' 'title title title' 'lineup lineup lineup'; }
|
||||
.rcard__title--none { display: none; }
|
||||
.result-unit { width: 94vw !important; }
|
||||
.result-unit__body { grid-template-columns: 1rem minmax(0, 1fr); gap: .12rem; }
|
||||
}
|
||||
@@ -296,6 +296,13 @@
|
||||
}
|
||||
.dpick__opt.is-active .icon { opacity: 1; filter: drop-shadow(0 0 5px var(--d-color)); }
|
||||
.dpick--ro { border: 0; background: none; gap: .18rem; align-items: center; font-size: .14rem; }
|
||||
/* 「AI 队友最后选择」 (GitHub #338, co-op): one switch styled like a difficulty option, under the difficulty picker */
|
||||
.room-bar__opts { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; min-width: 0; }
|
||||
.ailast { display: flex; align-items: center; gap: .12rem; font-size: .14rem; }
|
||||
.ailast__opt { --d-color: var(--mint-400); height: .36rem; padding: 0 .14rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); font-size: .15rem; letter-spacing: .04em; }
|
||||
.ailast__opt:last-child { border-right: 1px solid var(--line-2); }
|
||||
.ailast__opt .icon { opacity: .25; }
|
||||
.ailast__opt .icon.is-on { opacity: 1; }
|
||||
|
||||
.ready-count[hidden] { display: none; }
|
||||
.ready-count { display: flex; align-items: baseline; gap: .06rem; font-size: .16rem; }
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
/* ==========================================================================================
|
||||
screens/stats.css — 统计数据 (js/screens/stats.js): the local match record as a full-screen overlay in the grammar of
|
||||
干员调配 (screens/loadout.css) — a top bar with the back button, four tabs (总览 / 策略 / 战斗累计 / 对局记录) and
|
||||
导出 / 导入 / 清空, a note line, a scrolling body of number cards, tables, the six 评语 and the history list; a stored
|
||||
match re-viewed as its settlement fills the overlay (.st--replay).
|
||||
Sizes are design px ÷ 100 (theme.css root scale); text that must stay readable on phones uses max(.xxrem, N px)
|
||||
(the root scale is clamped at 40 px there, so a bare .15rem would be 6 px). Ported from PR #323 by @2321Robin.
|
||||
========================================================================================== */
|
||||
|
||||
.st {
|
||||
position: fixed; inset: 0; z-index: 55; /* like .lo: 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);
|
||||
outline: none;
|
||||
animation: st-in 200ms var(--ease-out) backwards;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
@keyframes st-in { from { opacity: 0; } }
|
||||
.st__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(246, 163, 41, .05), 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);
|
||||
}
|
||||
.st-top, .st-note, .st-body { position: relative; }
|
||||
/* the app screens behind the overlay do not need to animate */
|
||||
.sp-stats-open .app-root > .screen { visibility: hidden; }
|
||||
/* a stored match re-viewed as its settlement (the result screen fills the overlay) */
|
||||
.st--replay { background: var(--bg-0); }
|
||||
|
||||
/* ---- top bar ----------------------------------------------------------------------------------------------------- */
|
||||
.st-top {
|
||||
flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 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);
|
||||
}
|
||||
.st-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));
|
||||
}
|
||||
.st-top__left { justify-self: start; display: flex; align-items: center; gap: .14rem; }
|
||||
.st-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; min-width: 0; }
|
||||
.st-top__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
|
||||
.st-tabs { display: flex; align-items: stretch; gap: .04rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
|
||||
.st-tab {
|
||||
display: inline-flex; align-items: center; padding: .02rem .16rem; font: inherit; font-size: max(.24rem, 13px); font-weight: 900;
|
||||
letter-spacing: .12em; line-height: 1.2; color: var(--text-lo); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
|
||||
touch-action: manipulation; white-space: nowrap;
|
||||
}
|
||||
.st-tab:hover { color: var(--text-hi); }
|
||||
.st-tab.is-on { color: var(--text-hi); border-bottom-color: var(--mint-500); }
|
||||
|
||||
/* the note lines under the bar: where the data lives, what went wrong with the stored value */
|
||||
.st-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);
|
||||
}
|
||||
.st-note .icon { width: max(.16rem, 11px); height: max(.16rem, 11px); color: var(--mint-500); flex: none; }
|
||||
.st-note.is-warn { color: var(--amber); background: linear-gradient(90deg, rgba(246, 163, 41, .12), transparent 70%); }
|
||||
.st-note.is-warn .icon { color: var(--amber); }
|
||||
|
||||
/* ---- body ------------------------------------------------------------------------------------------------------------ */
|
||||
.st-body {
|
||||
flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
|
||||
padding: .2rem .36rem .32rem; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
|
||||
}
|
||||
.st-body > * { max-width: max(12.4rem, 760px); margin-left: auto; margin-right: auto; }
|
||||
.st-loading { flex: 1; display: grid; place-items: center; min-height: 2rem; }
|
||||
.st-empty { margin: .6rem auto; text-align: center; font-size: max(.2rem, 13px); color: var(--text-lo); letter-spacing: .06em; }
|
||||
|
||||
.st-sec__h { display: flex; align-items: baseline; gap: .12rem; margin: 0 0 .1rem; font-size: max(.22rem, 14px); font-weight: 800; letter-spacing: .1em; color: var(--text-hi); }
|
||||
.st-sub { margin: .22rem 0 .08rem; font-size: max(.17rem, 12px); font-weight: 700; letter-spacing: .08em; color: var(--text-md); }
|
||||
|
||||
/* number cards */
|
||||
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(1.5rem, 96px), 1fr)); gap: .08rem; }
|
||||
.st-card {
|
||||
display: flex; flex-direction: column; gap: .02rem; min-width: 0; padding: .08rem .12rem .07rem;
|
||||
background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
|
||||
}
|
||||
.st-card--mint { border-color: var(--mint-800); background: var(--mint-a10); }
|
||||
.st-card--gold { border-color: rgba(246, 163, 41, .45); background: rgba(246, 163, 41, .07); }
|
||||
.st-card__num { font-size: max(.3rem, 17px); font-weight: 900; line-height: 1.15; color: var(--text-hi); overflow-wrap: anywhere; }
|
||||
.st-card--mint .st-card__num { color: var(--mint-400); }
|
||||
.st-card--gold .st-card__num { color: var(--amber); }
|
||||
.st-card__label { font-size: max(.14rem, 10px); color: var(--text-md); letter-spacing: .06em; }
|
||||
.st-split { display: flex; gap: .26rem; margin: .1rem 0 .14rem; font-size: max(.15rem, 11px); color: var(--text-md); }
|
||||
.st-split b { margin-left: .06rem; font-size: max(.18rem, 12px); color: var(--text-hi); }
|
||||
|
||||
/* tables (难度 / 策略 / 对局记录) */
|
||||
.st-tablewrap { overflow-x: auto; }
|
||||
.st-table { width: 100%; border-collapse: collapse; font-size: max(.17rem, 11px); }
|
||||
.st-table th {
|
||||
padding: .05rem .1rem; text-align: left; font-size: max(.14rem, 10px); font-weight: 600; letter-spacing: .08em;
|
||||
color: var(--text-lo); border-bottom: 1px solid var(--line-2); white-space: nowrap;
|
||||
}
|
||||
.st-table td { padding: .06rem .1rem; color: var(--text-md); border-bottom: 1px solid var(--line); vertical-align: middle; }
|
||||
/* the per-difficulty and per-strategy tables stay narrow enough to read across; the history takes the width */
|
||||
.st-table:not(.st-table--history) { max-width: max(9.4rem, 560px); }
|
||||
.st-table th.num, .st-table td.num { text-align: right; }
|
||||
.st-table tbody tr:hover td { background: rgba(78, 216, 175, .05); }
|
||||
.st-table td.st-diff { color: var(--d-color, var(--text-md)); font-weight: 700; white-space: nowrap; }
|
||||
.st-band { display: inline-flex; align-items: center; gap: .06rem; color: var(--text-hi); white-space: nowrap; vertical-align: middle; }
|
||||
.st-band .bandicon { flex: none; }
|
||||
.st-t { font-family: var(--font-num); font-size: max(.15rem, 10px); color: var(--text-lo); white-space: nowrap; }
|
||||
.st-rate { white-space: nowrap; }
|
||||
.st-rate b { color: var(--text-hi); font-weight: 700; }
|
||||
.st-bar { display: inline-block; width: max(.8rem, 48px); height: max(.07rem, 4px); margin-right: .1rem; vertical-align: middle; background: var(--line); }
|
||||
.st-bar i { display: block; height: 100%; background: var(--mint-500); }
|
||||
|
||||
/* 对局记录: result colours, the 不计入统计 chip, clickable rows */
|
||||
.st-res { white-space: nowrap; }
|
||||
.t-win { color: var(--mint-400); font-weight: 800; }
|
||||
.t-lose { color: var(--red-premium); font-weight: 800; }
|
||||
.t-quit { color: var(--amber); font-weight: 800; }
|
||||
.st-chip {
|
||||
display: inline-block; margin-left: .08rem; padding: 0 .06rem; font-style: normal; font-size: max(.12rem, 9px); letter-spacing: .04em;
|
||||
color: var(--text-lo); border: 1px solid var(--line-2); white-space: nowrap;
|
||||
}
|
||||
.st-table tr.is-excluded td { opacity: .6; }
|
||||
.st-table tr.is-clickable { cursor: pointer; }
|
||||
.st-table tr.is-clickable:hover td, .st-table tr.is-clickable:focus-visible td { background: rgba(78, 216, 175, .1); color: var(--text-hi); }
|
||||
.st-table tr.is-clickable:focus-visible { outline: 2px solid var(--mint-400); outline-offset: -2px; }
|
||||
.st-go { width: .24rem; color: var(--text-lo); }
|
||||
.st-go .icon { width: max(.18rem, 12px); height: max(.18rem, 12px); }
|
||||
.st-table tr.is-clickable:hover .st-go { color: var(--mint-400); }
|
||||
.st-more { display: flex; justify-content: center; margin: .14rem 0 0; }
|
||||
.st-hint { margin: .1rem 0 0; font-size: max(.13rem, 10px); line-height: 1.6; color: var(--text-lo); letter-spacing: .04em; }
|
||||
|
||||
/* the six 评语 with their counts */
|
||||
.st-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.9rem, 120px), 1fr)); gap: .08rem; }
|
||||
.st-title { display: flex; align-items: center; gap: .08rem; min-width: 0; padding: .06rem .1rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
|
||||
.st-title.is-none { opacity: .45; }
|
||||
.st-title__icon { width: max(.38rem, 24px); height: max(.38rem, 24px); flex: none; object-fit: contain; }
|
||||
.st-title__text { display: flex; flex-direction: column; min-width: 0; }
|
||||
.st-title__text span { font-size: max(.15rem, 10px); color: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.st-title__text b { font-size: max(.22rem, 14px); font-weight: 900; color: var(--amber); line-height: 1.1; }
|
||||
|
||||
/* what counts (the rule of ui/stats.js countsTowardStats) */
|
||||
.st-rule { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; margin: .24rem 0 0; font-size: max(.14rem, 10px); line-height: 1.6; color: var(--text-lo); }
|
||||
.st-rule .icon { width: max(.16rem, 11px); height: max(.16rem, 11px); flex: none; color: var(--mint-500); }
|
||||
.st-rule b { color: var(--amber); font-weight: 700; }
|
||||
|
||||
/* 战斗累计 */
|
||||
.st-sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(2.4rem, 150px), 1fr)); gap: .06rem; }
|
||||
.st-sum { display: flex; align-items: baseline; justify-content: space-between; gap: .08rem; padding: .08rem .12rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
|
||||
.st-sum span { font-size: max(.15rem, 10px); color: var(--text-md); }
|
||||
.st-sum b { font-size: max(.22rem, 14px); font-weight: 800; color: var(--text-hi); }
|
||||
|
||||
/* the shared Button scales with the root (40 px/rem on phones ⇒ 6–7 px text, 14–20 px tall): the overlay's own controls keep a
|
||||
readable size and a tappable height */
|
||||
.st .st-back { height: max(.5rem, 32px); padding: 0 max(.2rem, 10px) 0 max(.12rem, 6px); font-size: max(.18rem, 12px); }
|
||||
.st .st-top__right .btn, .st .st-more .btn { height: max(.36rem, 28px); padding: 0 max(.16rem, 8px); font-size: max(.15rem, 11px); }
|
||||
|
||||
/* the entry buttons of the lobby / room top bars: on the narrowest phones (≤ 700 px) the icon alone — the room's top bar has
|
||||
no room for another label beside 玩法说明 (its title ran under the label at 640 px); the name stays aria-label / title */
|
||||
@media (max-width: 700px) {
|
||||
.stats-entry .btn__icon + .btn__label {
|
||||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- narrow / short viewports ------------------------------------------------------------------------------------------ */
|
||||
@media (max-width: 1200px) {
|
||||
.st-tab { padding: .02rem .08rem; letter-spacing: .04em; }
|
||||
}
|
||||
/* phones in landscape (up to 932 px wide): 返回 shows its icon only (the text stays its name) */
|
||||
@media (max-width: 1000px) {
|
||||
.st-top .btn__icon + .btn__label {
|
||||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.st-top { padding: 0 .16rem; gap: .1rem; }
|
||||
.st-top::after { left: .16rem; right: .16rem; }
|
||||
.st-note { padding: .07rem .16rem; }
|
||||
.st-body { padding: .12rem .16rem .2rem; }
|
||||
}
|
||||
@media (max-height: 520px) {
|
||||
.st-note { display: none; }
|
||||
.st-body { padding-top: .12rem; }
|
||||
.st-split { margin: .06rem 0 .08rem; }
|
||||
}
|
||||
.sp-coarse .st-tab, .sp-coarse .st-table tr.is-clickable td { min-height: 30px; }
|
||||
@media (prefers-reduced-motion: reduce) { .st { animation: none; } }
|
||||
@@ -243,6 +243,9 @@
|
||||
.title-invite .icon { width: .2rem; height: .2rem; }
|
||||
.title-invite b { font-size: .2rem; letter-spacing: .2em; color: #ffd08a; }
|
||||
.title-conn { display: flex; align-items: center; justify-content: center; gap: .1rem; min-height: .32rem; font-size: .14rem; color: var(--text-lo); }
|
||||
/* 统计 (the local stats page) beside the language menu in the top-right corner */
|
||||
.title-corner__tools { display: flex; align-items: center; justify-content: flex-end; gap: .1rem; margin-bottom: .1rem; }
|
||||
.title-corner__tools .title-lang { margin-bottom: 0; }
|
||||
/* language menu (中文 | English | …, ui/lang.js) in the top-right corner; more than four languages make it a list */
|
||||
.title-lang { display: inline-flex; margin-bottom: .1rem; }
|
||||
.title-lang button { min-width: .74rem; height: .3rem; font-size: .14rem; cursor: pointer; }
|
||||
|
||||
Reference in new issue
Block a user