feedback1 final: merge the strategy draft's 查看禁用盟约与干员 dialog (GitHub issue #8 item 1; one matchInfo component for the briefing, the draft and the in-game 本局信息 tab)
Conflicts resolved keeping both sides: - bandDraft.js header: the 本局禁用 mark of a strategy tied to a switched-off bond, then the 本局信息 dialog; the code merged cleanly (the card's 本局禁用 tag and the detail note sit beside the dialog's state and button). - draft.css: the 本局禁用 tag / note rules, then the 本局信息 entry and dialog block (its header cites DESIGN §21.28). - CHANGELOG 0.1.1 界面: the gaps and issue #5 / #8 lines, then the dialog line. - PLAYING §6: the disabled-bond line says where to look again (draft dialog, in-game 🔍); the 变形同构体 line keeps its pairing explanation. - DESIGN: the branch's "§21.26 Match info in the strategy draft" becomes §21.28; its two §10 references follow.
This commit is contained in:
sganggs committed
commit
ff7ce30907
12 files changed
+865
-61
No files matched your search
@@ -1,6 +1,7 @@
|
||||
/* ==========================================================================================
|
||||
screens/draft.css — BAND_DRAFT strategy pick (js/screens/bandDraft.js). Research 06 §4.2:
|
||||
draft order on the left, portrait grid, detail pane with 初始生命值 and 确认选择 / 跳过.
|
||||
draft order on the left, portrait grid, detail pane with 初始生命值 and 确认选择 / 跳过; the 本局信息 entry under
|
||||
the order list and its dialog (js/ui/matchInfo.js MatchInfoDialog, GitHub issue #8 item 1).
|
||||
========================================================================================== */
|
||||
|
||||
.draft__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 3.9rem 1fr 5rem; gap: .3rem; padding: .3rem .42rem .36rem; }
|
||||
@@ -83,3 +84,50 @@
|
||||
font-size: max(.14rem, 9px); line-height: 1.5; color: var(--text-lo); background: rgba(255, 255, 255, .03); border-left: 2px solid rgba(255, 255, 255, .28); }
|
||||
.draft-detail__off .icon { width: max(.16rem, 10px); height: max(.16rem, 10px); flex: none; margin-top: .02rem; }
|
||||
.draft-detail__offname { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(255, 84, 84, .6); }
|
||||
|
||||
/* ---- 本局信息 (GitHub issue #8 item 1, DESIGN §21.28): the entry under the order list and the read-only dialog -------
|
||||
The dialog shows the briefing's own blocks (.brief-bonds / .brief-legend / .brief-banned, css/screens/briefing.css)
|
||||
at the briefing's size on desktop; every size is max(design rem, px floor), so on a phone (1rem = 40 px) the text
|
||||
stays at ≥ 9–15 px and the dialog's body scrolls inside the screen (756×366, 844×390) while the header and the
|
||||
footer (the turn's countdown, 关闭) stay in view. */
|
||||
.draft-order__info {
|
||||
margin-top: .04rem; justify-content: flex-start; padding: 0 .16rem;
|
||||
height: max(.5rem, 28px); font-size: max(.18rem, 10px);
|
||||
--btn-bd: var(--mint-800); --btn-bg: rgba(78, 216, 175, .06); --btn-bg-hover: rgba(78, 216, 175, .14);
|
||||
}
|
||||
.draft-order__info .btn__icon { color: var(--mint-400); }
|
||||
.modal__box.minfo-dlg {
|
||||
width: min(max(12rem, 600px), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px)));
|
||||
max-height: calc(100vh - .6rem);
|
||||
max-height: calc(100svh - .6rem);
|
||||
}
|
||||
.minfo-dlg .modal__head { padding: .16rem .3rem .02rem; }
|
||||
.minfo-dlg .modal__head .micro { font-size: max(.11rem, 8px); }
|
||||
.minfo-dlg .modal__title { font-size: max(.26rem, 15px); }
|
||||
.minfo-dlg .modal__body { display: flex; flex-direction: column; gap: max(.16rem, 6px); padding: .1rem .3rem .2rem; }
|
||||
.minfo-dlg .modal__actions { align-items: center; padding: .12rem .3rem; }
|
||||
.minfo-dlg .modal__actions .btn { height: max(.5rem, 30px); font-size: max(.18rem, 12px); }
|
||||
.minfo-dlg__status { margin-right: auto; min-width: 0; }
|
||||
.minfo-dlg__turn { display: inline-flex; align-items: center; gap: .06rem; font-size: max(.17rem, 11px); font-weight: 700; color: var(--gold); white-space: nowrap; }
|
||||
.minfo-dlg__turn .icon { width: max(.18rem, 12px); height: max(.18rem, 12px); }
|
||||
.minfo-dlg__turn b { margin-left: .04rem; font-size: max(.22rem, 14px); }
|
||||
.minfo-dlg__turn.is-warn { color: var(--orange-hi); }
|
||||
.minfo-dlg__turn.is-mint { color: var(--mint-400); }
|
||||
.minfo-dlg__turn.is-dim { color: var(--text-lo); }
|
||||
.minfo-dlg .brief-bonds, .minfo-dlg .brief-banned { padding: max(.16rem, 6px) max(.2rem, 8px) max(.2rem, 8px); }
|
||||
.minfo-dlg .brief-h { font-size: max(.21rem, 12px); margin-bottom: max(.12rem, 5px); }
|
||||
.minfo-dlg .brief-h::before { width: max(.06rem, 3px); height: max(.2rem, 11px); }
|
||||
.minfo-dlg .brief-bonds__row { gap: max(.16rem, 6px) max(.1rem, 4px); }
|
||||
.minfo-dlg .brief-bond { width: max(1rem, 50px); }
|
||||
.minfo-dlg .brief-bond .bond { --disc: max(.66rem, 32px); }
|
||||
.minfo-dlg .brief-bond .bond__name { font-size: max(.16rem, 10px); }
|
||||
.minfo-dlg .brief-bond__ban { font-size: max(.12rem, 9px); padding: 0 max(.05rem, 2px); }
|
||||
.minfo-dlg .brief-bond__ban .icon { width: max(.12rem, 9px); height: max(.12rem, 9px); }
|
||||
.minfo-dlg .brief-legend { margin-top: 0; font-size: max(.14rem, 10px); }
|
||||
.minfo-dlg .brief-legend__off { width: max(.16rem, 9px); height: max(.16rem, 9px); }
|
||||
.minfo-dlg .brief-legend__ban { width: max(.2rem, 12px); height: max(.18rem, 11px); }
|
||||
.minfo-dlg .brief-legend__ban .icon { width: max(.12rem, 8px); height: max(.12rem, 8px); }
|
||||
.minfo-dlg .brief-banned__n { font-size: max(.22rem, 13px); }
|
||||
.minfo-dlg .brief-banned__grid { grid-template-columns: repeat(auto-fill, minmax(max(.6rem, 34px), 1fr)); gap: max(.08rem, 3px); }
|
||||
.minfo-dlg .brief-banned__grid .uthumb { --ut: max(.6rem, 34px); }
|
||||
.minfo-dlg .t-dim { font-size: max(.16rem, 10px); }
|
||||
Reference in new issue
Block a user