Raid replay plays like a fight; fight-once can be joined
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
4f2d113abd
commit
387f4c201b
4 changed files with 513 additions and 112 deletions
|
|
@ -451,10 +451,30 @@ button.sheet-skill:hover { background: var(--panel-2); }
|
|||
.banner-ico { font-size: 22px; display: flex; }
|
||||
|
||||
/* Raid replay */
|
||||
.battle-side { display: grid; gap: 6px; margin: 12px 0; }
|
||||
.battle-side .bar.hp.you > span { background: var(--good); }
|
||||
.battle-side .bar > span { transition: width .8s ease-out; }
|
||||
.modal-box .battle-log { min-height: 96px; margin: 14px 0 10px; padding-left: 0; }
|
||||
.modal-box:has(.battle) { max-width: 980px; max-height: 92vh; }
|
||||
.tug { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 4px 0 18px; font-variant-numeric: tabular-nums; }
|
||||
.tug > b:first-child { color: var(--good); } .tug > b:last-child { color: var(--bad); }
|
||||
.tug-bar { position: relative; background: var(--bad); }
|
||||
.tug-bar > span { background: var(--good); }
|
||||
.tug-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--panel); }
|
||||
.battle-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
|
||||
.b-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
|
||||
.battle .squads { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
|
||||
.battle .fighter-name .gi { width: 16px; height: 16px; vertical-align: -3px; }
|
||||
.battle .fighter-name .crest { vertical-align: -4px; }
|
||||
.battle .fighter.squad .bar.hp { height: 6px; }
|
||||
.fight.battle .bar.hp > span.lag { background: rgba(255, 236, 200, .55); transition: none; }
|
||||
.battle .fight-log { margin: 0; padding: 0; line-height: 1.35; height: calc(7 * 1.35em + 12px); min-height: 0; overflow: hidden; }
|
||||
.battle .btns { margin: 0; }
|
||||
/* Narrow: you, then the raiders and the log, then the rest of the city */
|
||||
@media (max-width: 700px) {
|
||||
.battle-frame { display: flex; flex-direction: column; gap: 14px; }
|
||||
.b-side { display: contents; }
|
||||
.battle .b-me { order: 1; } .battle .ability-bar { order: 2; } .b-foes { order: 3; } .battle .fight-log { order: 4; }
|
||||
.b-allies { order: 5; } .b-city { order: 6; } .battle .dps { order: 7; } .battle [data-battle] { order: 8; } .battle .btns { order: 9; }
|
||||
.battle .squads { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
|
||||
.battle .fighter-name { flex-direction: row; }
|
||||
}
|
||||
.battle-result { font-weight: 700; font-size: 17px; margin: 6px 0 8px; }
|
||||
.battle-result.win { color: var(--good); }
|
||||
.battle-result.loss { color: var(--bad); }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue