177 lines
16 KiB
CSS
177 lines
16 KiB
CSS
@font-face {
|
|
font-family: "Aetherbound UI";
|
|
src: url("assets/fonts/NotoSansSC.ttf") format("truetype");
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--ink: #182127;
|
|
--ink-2: #34424a;
|
|
--mist: #f3f6f2;
|
|
--mist-2: #d7e0dd;
|
|
--teal: #13818a;
|
|
--gold: #d6a72e;
|
|
--jade: #27845e;
|
|
--coral: #c94e52;
|
|
--cobalt: #4169b1;
|
|
--plum: #855579;
|
|
--silver: #88969b;
|
|
--paper: rgba(246, 249, 244, 0.94);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { width: 844px; height: 390px; margin: 0; overflow: hidden; }
|
|
body {
|
|
background: #10181d;
|
|
color: var(--ink);
|
|
font-family: "Aetherbound UI", sans-serif;
|
|
letter-spacing: 0;
|
|
}
|
|
button { font: inherit; color: inherit; }
|
|
.slice { position: relative; width: 844px; height: 390px; overflow: hidden; background: #c7d8cf; }
|
|
|
|
.status-rail {
|
|
position: absolute; z-index: 80; left: 12px; top: 10px; width: 820px; height: 54px;
|
|
display: flex; align-items: center; gap: 8px; padding: 2px 8px;
|
|
color: var(--mist); background: rgba(24, 33, 39, 0.94);
|
|
border: 1px solid rgba(243, 246, 242, 0.34); border-radius: 4px;
|
|
box-shadow: 0 4px 14px rgba(15, 24, 29, 0.25);
|
|
}
|
|
.tool {
|
|
width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center;
|
|
border: 1px solid rgba(243,246,242,.3); border-radius: 4px; background: #34424a; color: white;
|
|
}
|
|
.tool.active { border-color: #8fcfd1; box-shadow: inset 0 -3px 0 var(--teal); }
|
|
.icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
.status-copy { min-width: 250px; display: flex; flex-direction: column; line-height: 1.05; }
|
|
.status-copy .eyebrow { color: #b9cac6; font-size: 9px; margin-bottom: 4px; }
|
|
.status-copy strong { color: white; font-size: 15px; font-weight: 700; }
|
|
.status-spacer { flex: 1; }
|
|
.resource, .battle-index { min-width: 70px; height: 42px; display: flex; flex-direction: column; justify-content: center; padding: 0 9px; border-left: 2px solid var(--gold); }
|
|
.resource span, .battle-index span { color: #bdcbc7; font-size: 9px; }
|
|
.resource b, .battle-index b { font-size: 12px; color: white; }
|
|
|
|
.field-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
.formation-world { position: absolute; left: 18px; top: 72px; width: 544px; height: 242px; overflow: hidden; border: 1px solid rgba(24,33,39,.4); border-radius: 4px; background: #6f9b86; }
|
|
.formation-world .field-art { object-position: center 66%; filter: saturate(.72) brightness(.76); }
|
|
.formation-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,44,46,.42), rgba(39,56,50,.03) 58%, rgba(21,32,36,.32)); }
|
|
.formation-cord { position: absolute; left: 90px; right: 82px; bottom: 46px; height: 18px; border-bottom: 3px solid rgba(243,246,242,.75); }
|
|
.formation-cord:before, .formation-cord:after { content: ""; position: absolute; bottom: -7px; width: 10px; height: 10px; background: var(--gold); border: 2px solid var(--ink); transform: rotate(45deg); }
|
|
.formation-cord:before { left: 42px; }.formation-cord:after { right: 50px; }
|
|
.threat-gap { position: absolute; right: 12px; bottom: 56px; width: 90px; height: 35px; color: white; font-size: 9px; text-align: right; }
|
|
.threat-gap i { position: absolute; right: 0; bottom: 0; width: 75px; border-top: 2px dashed var(--coral); }
|
|
.threat-gap i:after { content:""; position:absolute; right:-1px; top:-5px; border-left:8px solid var(--coral); border-top:4px solid transparent; border-bottom:4px solid transparent; }
|
|
|
|
.actor { position: absolute; z-index: 24; left: var(--x); top: var(--y); width: 132px; height: 185px; }
|
|
.actor > img { position: absolute; left: 4px; top: 2px; width: 124px; height: 126px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 5px 3px rgba(15,23,28,.45)); }
|
|
.formation-world .actor { width: 142px; height: 175px; }
|
|
.formation-world .actor > img { width: 138px; height: 148px; left: 2px; top: 0; }
|
|
.actor-badge { position: absolute; z-index: 4; left: 0; top: 3px; display: flex; align-items: center; height: 30px; color: white; background: rgba(24,33,39,.93); border: 1px solid rgba(255,255,255,.46); }
|
|
.actor-badge b { width: 30px; height: 28px; display: grid; place-items: center; background: var(--gold); color: var(--ink); }
|
|
.actor-badge span { padding: 0 7px; font-size: 10px; }
|
|
.actor-meta { position: absolute; z-index: 4; left: 0; bottom: 0; width: 132px; min-height: 51px; padding: 5px 7px; color: white; background: rgba(24,33,39,.94); border-left: 3px solid var(--silver); border-radius: 2px; }
|
|
.actor.urgent .actor-meta { border-left-color: var(--coral); box-shadow: 0 0 0 1px rgba(201,78,82,.55); }
|
|
.actor-meta strong { display: block; font-size: 11px; line-height: 14px; }
|
|
.actor-meta small { display: block; margin-top: 2px; color: #d7e0dd; font-size: 8px; }
|
|
.hp { display: block; width: 100%; height: 6px; margin-top: 3px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.33); }
|
|
.hp i { display: block; width: var(--hp); height: 100%; background: var(--jade); }
|
|
.formation-world .actor-meta { display: none; }
|
|
.formation-world .actor-badge { top: 112px; left: 14px; }
|
|
|
|
.formation-note { position: absolute; bottom: 7px; z-index: 32; width: 185px; min-height: 42px; padding: 5px 7px; background: rgba(243,246,242,.94); border-left: 3px solid var(--teal); box-shadow: 0 2px 8px rgba(10,20,24,.22); }
|
|
.formation-note b { display: block; font-size: 10px; }
|
|
.formation-note span { display: block; font-size: 9px; line-height: 13px; color: var(--ink-2); }
|
|
.note-second { left: 18px; }.note-lead { left: 260px; border-left-color: var(--coral); }
|
|
|
|
.context-rail { position: absolute; z-index: 60; left: 570px; top: 72px; width: 256px; height: 242px; padding: 13px 14px; overflow: hidden; background: var(--paper); border: 1px solid #b7c3bf; border-radius: 4px; box-shadow: 0 3px 12px rgba(20,31,36,.16); }
|
|
.rail-kicker { display: block; color: var(--teal); font-size: 9px; font-weight: 800; }
|
|
.context-rail h2 { margin: 3px 0 7px; font-size: 17px; line-height: 21px; }
|
|
.context-rail p { margin: 0 0 8px; font-size: 10px; line-height: 14px; color: var(--ink-2); }
|
|
.evidence-row { display: grid; grid-template-columns: 31px 1fr; gap: 7px; align-items: start; margin: 7px 0; padding-top: 6px; border-top: 1px solid #cbd4d1; }
|
|
.evidence-row span { font-size: 9px; line-height: 13px; }
|
|
.evidence-row b { display: block; font-size: 10px; }
|
|
.symbol { width: 27px; height: 27px; display: grid; place-items: center; font-style: normal; font-weight: 900; color: white; background: var(--coral); clip-path: polygon(50% 0,100% 20%,84% 100%,16% 100%,0 20%); }
|
|
.symbol.heal { background: var(--jade); clip-path: polygon(50% 0,70% 28%,100% 50%,70% 72%,50% 100%,30% 72%,0 50%,30% 28%); }
|
|
.system-note { padding-left: 8px; border-left: 2px solid var(--gold); font-weight: 700; }
|
|
|
|
.action-dock { position: absolute; z-index: 80; left: 18px; top: 322px; width: 808px; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--mist); background: rgba(24,33,39,.96); border-radius: 4px; }
|
|
.action-dock > span { flex: 1; text-align: center; color: #bfcac7; font-size: 9px; }
|
|
.action-dock button { height: 48px; border-radius: 4px; }
|
|
.secondary { min-width: 146px; padding: 0 14px; color: white; border: 1px solid #77888e; background: #34424a; }
|
|
.primary { min-width: 248px; height: 56px !important; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; color: var(--ink); border: 2px solid #f0c854; border-bottom: 5px solid #936c12; background: var(--gold); font-weight: 800; }
|
|
.primary .icon { width: 18px; height: 18px; }
|
|
|
|
.battlefield { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: #588771; }
|
|
.battlefield .field-art { object-position: 50% 68%; filter: saturate(.78) brightness(.73) contrast(1.04); }
|
|
.field-wash { position: absolute; inset: 64px 0 0; background: linear-gradient(180deg, rgba(9,32,40,.16), rgba(17,31,33,.05) 47%, rgba(12,25,29,.72)); }
|
|
.objective { position: absolute; z-index: 8; left: 18px; top: 72px; width: 274px; min-height: 44px; padding: 7px 10px; color: white; background: rgba(24,33,39,.86); border-left: 3px solid var(--gold); }
|
|
.objective span { display: block; color: #bdd1cb; font-size: 8px; }.objective strong { display: block; margin-top: 2px; font-size: 12px; }
|
|
.party-ground { position: absolute; z-index: 4; left: 92px; top: 275px; width: 368px; height: 18px; border-bottom: 2px solid rgba(243,246,242,.55); transform: skewX(-10deg); }
|
|
.party-ground i { position: absolute; bottom: -6px; width: 11px; height: 11px; background: var(--gold); border: 2px solid var(--ink); transform: rotate(45deg); }
|
|
.party-ground i:first-child { left: 92px; }.party-ground i:last-child { left: 257px; }
|
|
|
|
.enemy { position: absolute; z-index: 24; left: 558px; top: 126px; width: 170px; height: 175px; }
|
|
.enemy-sprite { position: absolute; left: 12px; top: 17px; width: 144px; height: 132px; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(12,16,21,.5)); transform: scaleX(-1); }
|
|
.enemy-name { position: absolute; z-index: 3; top: 0; right: 0; min-width: 120px; padding: 4px 7px; text-align: right; color: white; background: rgba(24,33,39,.93); border-right: 3px solid var(--plum); }
|
|
.enemy-name strong { display:block; font-size: 11px; }.enemy-name span { display:block; font-size:8px; color:#d4c6d1; }
|
|
.enemy-hp { position: absolute; z-index: 4; left: 18px; bottom: 10px; width: 136px; height: 7px; }
|
|
.enemy small { position: absolute; z-index: 4; right: 17px; bottom: -2px; color: white; font-size: 8px; text-shadow: 0 1px 2px black; }
|
|
.enemy.urgent .enemy-name { border-right-color: var(--coral); }
|
|
|
|
.event-ribbon { position: absolute; z-index: 70; left: 18px; bottom: 12px; width: 808px; height: 62px; display: grid; grid-template-columns: 84px 244px 1fr; align-items: center; gap: 10px; padding: 8px 11px; color: white; background: rgba(24,33,39,.96); border: 1px solid rgba(243,246,242,.35); border-radius: 4px; box-shadow: 0 -3px 14px rgba(12,20,25,.25); }
|
|
.event-step { align-self: stretch; display: grid; place-items: center; color: #d3e1dd; font-size: 9px; border-right: 1px solid #617178; }
|
|
.event-ribbon > strong { font-size: 12px; line-height: 16px; }
|
|
.event-chain { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 8px; color: #d6e0dd; background: #2a373e; border-left: 3px solid var(--teal); font-size: 9px; }
|
|
.event-chain i { color: #819295; font-style: normal; }.event-chain b { color: white; font-size: 10px; }
|
|
|
|
.target-line { position: absolute; z-index: 20; left: 392px; top: 195px; width: 184px; border-top: 3px dashed var(--coral); transform: rotate(-4deg); transform-origin: left; }
|
|
.target-line:before, .target-line:after { content:""; position:absolute; top:-7px; width:11px; height:11px; border:2px solid var(--coral); transform:rotate(45deg); background:rgba(201,78,82,.18); }
|
|
.target-line:before { left:-4px; }.target-line:after { right:-4px; }
|
|
.target-line span { position:absolute; left:44px; top:-24px; padding:2px 7px; color:white; background:rgba(90,31,35,.86); font-size:9px; transform:rotate(4deg); }
|
|
.threat-mark { position:absolute; z-index:38; left:372px; top:137px; width:42px; height:40px; }
|
|
.threat-mark i { position:absolute; bottom:0; width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:31px solid var(--coral); }
|
|
.threat-mark i:first-child { left:-8px; transform:rotate(-16deg); }.threat-mark i:nth-child(2) { right:-8px; transform:rotate(16deg); }
|
|
.threat-mark span { position:absolute; z-index:2; left:15px; top:13px; color:white; font-weight:900; }
|
|
|
|
.impact-line { position:absolute; z-index:20; left:390px; top:207px; width:181px; border-top:5px solid var(--coral); transform:rotate(-2deg); box-shadow:0 0 0 2px rgba(255,255,255,.42); }
|
|
.impact-line:after { content:""; position:absolute; left:-10px; top:-10px; width:19px; height:19px; background:var(--coral); clip-path:polygon(50% 0,100% 100%,0 100%); transform:rotate(-90deg); }
|
|
.damage-burst { position:absolute; z-index:35; left:350px; top:155px; width:86px; height:86px; }.vfx { width:100%; height:100%; object-fit:contain; }
|
|
.number { position:absolute; z-index:45; min-width:76px; padding:4px 7px; color:white; text-align:center; border:2px solid white; box-shadow:0 3px 0 rgba(24,33,39,.8); }
|
|
.number b { display:block; font-size:21px; line-height:22px; }.number span { display:block; font-size:8px; }
|
|
.damage-number { left:392px; top:122px; background:var(--coral); clip-path:polygon(0 0,100% 0,88% 100%,12% 100%); }
|
|
|
|
.heal-path { position:absolute; z-index:20; left:232px; top:214px; width:137px; border-top:4px solid var(--jade); transform:rotate(-11deg); box-shadow:0 0 0 1px rgba(255,255,255,.45); }
|
|
.heal-path i { position:absolute; top:-8px; width:12px; height:12px; background:var(--jade); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
|
|
.heal-path i:nth-child(1) { left:12px; }.heal-path i:nth-child(2) { left:61px; }.heal-path i:nth-child(3) { right:-2px; }
|
|
.heal-burst { position:absolute; z-index:35; left:345px; top:155px; width:82px; height:82px; }
|
|
.heal-number { left:388px; top:122px; background:var(--jade); clip-path:polygon(50% 0,100% 25%,92% 100%,8% 100%,0 25%); }
|
|
|
|
.projectile-line { position:absolute; z-index:26; left:389px; top:195px; width:190px; height:4px; background:var(--gold); box-shadow:0 0 0 1px white, 12px 0 8px var(--gold); transform:rotate(-2deg); }
|
|
.projectile-line:after { content:""; position:absolute; right:-10px; top:-6px; border-left:12px solid var(--gold); border-top:7px solid transparent; border-bottom:7px solid transparent; }
|
|
.projectile-line span { position:absolute; left:70px; top:-5px; width:9px; height:9px; border-radius:50%; background:white; box-shadow:0 0 9px var(--gold); }
|
|
.enemy-number { left:590px; top:119px; background:var(--coral); clip-path:polygon(0 0,100% 0,88% 100%,12% 100%); }
|
|
|
|
.result-world { position:absolute; left:18px; top:72px; width:544px; height:242px; overflow:hidden; border:1px solid rgba(24,33,39,.4); border-radius:4px; background:#547d6d; }
|
|
.result-world .field-art { object-position:48% 70%; filter:saturate(.55) brightness(.62); }
|
|
.result-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,33,37,.68),rgba(25,44,43,.26)); }
|
|
.result-party img { position:absolute; z-index:10; bottom:18px; width:104px; height:168px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 5px 3px rgba(8,17,20,.45)); }
|
|
.result-kindhand { left:18px; }.result-farstring { left:102px; }
|
|
.result-order { position:absolute; z-index:12; bottom:9px; padding:3px 7px; color:white; background:rgba(24,33,39,.94); font-size:8px; border-top:2px solid var(--gold); }
|
|
.result-order.second { left:17px; }.result-order.lead { left:115px; }
|
|
.cause-path { position:absolute; z-index:20; left:204px; top:20px; width:326px; height:204px; display:flex; flex-direction:column; justify-content:space-between; }
|
|
.cause-node { position:relative; min-height:50px; padding:6px 9px 6px 13px; color:white; background:rgba(24,33,39,.92); border-left:4px solid var(--teal); box-shadow:0 2px 7px rgba(8,16,20,.28); }
|
|
.cause-node span,.cause-node small { display:block; font-size:8px; color:#c6d6d1; }.cause-node b { display:block; margin:1px 0; font-size:13px; }.cause-node.divergence { border:2px solid white; border-left:5px solid var(--coral); box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--cobalt); }.cause-node.response { border-left-color:var(--jade); }
|
|
.cause-path > i { align-self:center; width:2px; height:12px; background:var(--gold); position:relative; }
|
|
.cause-path > i:after { content:""; position:absolute; left:-3px; bottom:-1px; border-top:6px solid var(--gold); border-left:4px solid transparent; border-right:4px solid transparent; }
|
|
.result-rail { padding:10px 12px; }
|
|
.result-rail h2 { margin-bottom:5px; font-size:15px; line-height:18px; }
|
|
.result-copy { margin:0; }
|
|
.result-copy div { display:grid; grid-template-columns:76px 1fr; gap:6px; padding:3px 0; border-top:1px solid #ccd5d2; }
|
|
.result-copy dt { color:var(--teal); font-size:9px; line-height:12px; font-weight:800; }.result-copy dd { margin:0; font-size:9px; line-height:12px; }
|
|
.result-copy div:nth-child(3) { border-left:3px solid var(--coral); padding-left:5px; background:rgba(201,78,82,.07); }
|
|
.result-dock .receipt { color:#cce8dc; }.result-dock .receipt .icon { width:15px; height:15px; margin-right:4px; vertical-align:-3px; color:#65bf91; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
|
|
}
|