akurosia/ff14-mitigator
1
0
Fork 0
forked from xziino/ff14-mitigator
Code Pull Requests Activity

Scale up UI: larger fonts, icons and spacing across all CSS

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
xziino 2026-05-21 17:08:17 +02:00
parent 5f0bdb3504
commit 5df03a3915
4 changed files with 66 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
css/analysis.css
View File

@ -1,7 +1,7 @@
/* ── Player Grid ─────────────────────────────────────────────────────────── */ /* ── Player Grid ─────────────────────────────────────────────────────────── */
.player-grid { .player-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 6px; gap: 6px;
} }
@ -9,10 +9,10 @@
background: var(--bg2); background: var(--bg2);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r); border-radius: var(--r);
padding: 7px 9px; padding: 9px 11px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 7px; gap: 8px;
cursor: pointer; cursor: pointer;
transition: opacity 0.15s, border-color 0.15s; transition: opacity 0.15s, border-color 0.15s;
user-select: none; user-select: none;
@ -24,7 +24,7 @@
.player-card--ref:hover { border-color: rgba(100, 160, 255, 0.7); } .player-card--ref:hover { border-color: rgba(100, 160, 255, 0.7); }
.ref-player-label { .ref-player-label {
font-size: 11px; font-size: 13px;
color: var(--t3); color: var(--t3);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
@ -32,13 +32,13 @@
} }
.player-job-icon { .player-job-icon {
width: 28px; width: 32px;
height: 28px; height: 32px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 9px; font-size: 11px;
font-weight: 600; font-weight: 600;
font-family: var(--font-d); font-family: var(--font-d);
letter-spacing: 0.03em; letter-spacing: 0.03em;
@ -49,14 +49,14 @@
.player-job-icon.role-dps { background: rgba(224,92,92,.15); color: var(--red); border: 1px solid rgba(224,92,92,.35); } .player-job-icon.role-dps { background: rgba(224,92,92,.15); color: var(--red); border: 1px solid rgba(224,92,92,.35); }
.player-name { .player-name {
font-size: 12px; font-size: 14px;
color: var(--t1); color: var(--t1);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.player-type { .player-type {
font-size: 10px; font-size: 12px;
color: var(--t2); color: var(--t2);
margin-top: 1px; margin-top: 1px;
} }
@ -71,8 +71,8 @@
.filter-input { .filter-input {
width: 200px; width: 200px;
padding: 4px 9px; padding: 5px 10px;
font-size: 12px; font-size: 13px;
margin-left: auto; margin-left: auto;
} }
@ -93,16 +93,16 @@
.ref-report-input { .ref-report-input {
width: 200px; width: 200px;
padding: 4px 9px; padding: 5px 10px;
font-size: 12px; font-size: 13px;
} }
/* ── AoE Timeline ────────────────────────────────────────────────────────── */ /* ── AoE Timeline ────────────────────────────────────────────────────────── */
.aoe-event { .aoe-event {
display: grid; display: grid;
grid-template-columns: 52px 1fr; grid-template-columns: 60px 1fr;
gap: 14px; gap: 14px;
padding: 11px 0; padding: 13px 0;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
align-items: start; align-items: start;
} }
@ -110,7 +110,7 @@
.aoe-time { .aoe-time {
font-family: var(--font-d); font-family: var(--font-d);
font-size: 13px; font-size: 15px;
color: var(--gold); color: var(--gold);
padding-top: 2px; padding-top: 2px;
letter-spacing: 0.03em; letter-spacing: 0.03em;
@ -120,12 +120,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 13px; font-size: 15px;
color: var(--t1); color: var(--t1);
margin-bottom: 7px; margin-bottom: 7px;
} }
.aoe-total { .aoe-total {
font-size: 12px; font-size: 14px;
color: var(--t2); color: var(--t2);
margin-left: 6px; margin-left: 6px;
} }
@ -149,8 +149,8 @@
background: var(--bg3); background: var(--bg3);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r); border-radius: var(--r);
padding: 3px 8px 4px 6px; padding: 4px 9px 5px 7px;
font-size: 11px; font-size: 13px;
} }
.aoe-target--dead { .aoe-target--dead {
@ -167,7 +167,7 @@
} }
.aoe-target-overkill { .aoe-target-overkill {
font-size: 9px; font-size: 11px;
font-family: var(--font-d); font-family: var(--font-d);
color: var(--red); color: var(--red);
font-weight: 600; font-weight: 600;
@ -176,7 +176,7 @@
.aoe-target-job { .aoe-target-job {
font-family: var(--font-d); font-family: var(--font-d);
font-size: 10px; font-size: 12px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
padding-top: 2px; padding-top: 2px;
@ -206,7 +206,7 @@
/* ── HP Bar ──────────────────────────────────────────────────────────────── */ /* ── HP Bar ──────────────────────────────────────────────────────────────── */
.aoe-hp-bar { .aoe-hp-bar {
height: 6px; height: 7px;
background: var(--bg0); background: var(--bg0);
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
@ -233,7 +233,7 @@
} }
.aoe-ref-label { .aoe-ref-label {
font-size: 10px; font-size: 12px;
color: var(--t3); color: var(--t3);
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@ -249,13 +249,13 @@
background: var(--bg2); background: var(--bg2);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r); border-radius: var(--r);
padding: 2px 8px 2px 6px; padding: 3px 9px 3px 7px;
font-size: 11px; font-size: 13px;
opacity: 0.75; opacity: 0.75;
} }
.aoe-delta-worse { font-size: 10px; color: var(--red); } .aoe-delta-worse { font-size: 12px; color: var(--red); }
.aoe-delta-better { font-size: 10px; color: var(--green); } .aoe-delta-better { font-size: 12px; color: var(--green); }
.aoe-buff-missing { .aoe-buff-missing {
opacity: 0.5; opacity: 0.5;
@ -278,9 +278,9 @@
} }
.aoe-target-buff-icon { .aoe-target-buff-icon {
width: 16px; width: 28px;
height: 16px; height: 28px;
border-radius: 2px; border-radius: 3px;
object-fit: cover; object-fit: cover;
cursor: default; cursor: default;
} }

10
css/base.css
View File

@ -59,7 +59,7 @@ body {
background: var(--bg0); background: var(--bg0);
color: var(--t1); color: var(--t1);
font-family: var(--font-b); font-family: var(--font-b);
font-size: 14px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
min-height: 100vh; min-height: 100vh;
} }
@ -70,7 +70,7 @@ code {
background: var(--bg2); background: var(--bg2);
padding: 1px 6px; padding: 1px 6px;
border-radius: 3px; border-radius: 3px;
font-size: 12px; font-size: 13px;
} }
hr { hr {
@ -96,7 +96,7 @@ ol li {
border-radius: var(--r); border-radius: var(--r);
padding: 10px 14px; padding: 10px 14px;
color: var(--red); color: var(--red);
font-size: 13px; font-size: 14px;
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -106,7 +106,7 @@ ol li {
border-radius: var(--r); border-radius: var(--r);
padding: 10px 14px; padding: 10px 14px;
color: var(--green); color: var(--green);
font-size: 13px; font-size: 14px;
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -142,7 +142,7 @@ ol li {
margin-bottom: 10px; margin-bottom: 10px;
} }
.empty h3 { .empty h3 {
font-size: 14px; font-size: 15px;
color: var(--t1); color: var(--t1);
margin-bottom: 4px; margin-bottom: 4px;
} }

38
css/components.css
View File

@ -3,13 +3,13 @@
background: var(--bgcard); background: var(--bgcard);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--rl); border-radius: var(--rl);
padding: 18px; padding: 22px;
} }
.card + .card { margin-top: 16px; } .card + .card { margin-top: 16px; }
.card-title { .card-title {
font-family: var(--font-d); font-family: var(--font-d);
font-size: 12px; font-size: 14px;
color: var(--gold); color: var(--gold);
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@ -22,7 +22,7 @@
content: ''; content: '';
display: block; display: block;
width: 3px; width: 3px;
height: 13px; height: 15px;
background: var(--gold); background: var(--gold);
border-radius: 2px; border-radius: 2px;
flex-shrink: 0; flex-shrink: 0;
@ -35,8 +35,8 @@ input, select, textarea {
border-radius: var(--r); border-radius: var(--r);
color: var(--t1); color: var(--t1);
font-family: var(--font-b); font-family: var(--font-b);
font-size: 13px; font-size: 15px;
padding: 7px 11px; padding: 8px 13px;
outline: none; outline: none;
transition: border-color 0.15s; transition: border-color 0.15s;
width: 100%; width: 100%;
@ -50,12 +50,12 @@ select option { background: var(--bg2); }
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 7px 16px; padding: 8px 18px;
border-radius: var(--r); border-radius: var(--r);
border: 1px solid var(--borderem); border: 1px solid var(--borderem);
background: var(--bg2); background: var(--bg2);
color: var(--t1); color: var(--t1);
font-size: 13px; font-size: 15px;
font-family: var(--font-b); font-family: var(--font-b);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
@ -78,7 +78,7 @@ select option { background: var(--bg2); }
} }
.btn-red:hover { background: var(--redbg); } .btn-red:hover { background: var(--redbg); }
.btn-sm { padding: 4px 11px; font-size: 12px; } .btn-sm { padding: 5px 13px; font-size: 13px; }
/* ── Stats row ──────────────────────────────────────────────────────────────── */ /* ── Stats row ──────────────────────────────────────────────────────────────── */
.stats-row { .stats-row {
@ -96,20 +96,20 @@ select option { background: var(--bg2); }
padding: 12px 14px; padding: 12px 14px;
} }
.stat-label { .stat-label {
font-size: 11px; font-size: 13px;
color: var(--t2); color: var(--t2);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
margin-bottom: 5px; margin-bottom: 5px;
} }
.stat-value { font-size: 20px; font-weight: 600; } .stat-value { font-size: 24px; font-weight: 600; }
.stat-sub { font-size: 11px; color: var(--t3); margin-top: 2px; } .stat-sub { font-size: 13px; color: var(--t3); margin-top: 2px; }
/* ── Badges ─────────────────────────────────────────────────────────────────── */ /* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge { .badge {
padding: 1px 7px; padding: 2px 8px;
border-radius: 2px; border-radius: 2px;
font-size: 11px; font-size: 12px;
font-weight: 500; font-weight: 500;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -145,8 +145,8 @@ select option { background: var(--bg2); }
border-radius: var(--r); border-radius: var(--r);
padding: 10px 12px; padding: 10px 12px;
} }
.dmg-box-label { font-size: 11px; color: var(--t2); margin-bottom: 3px; } .dmg-box-label { font-size: 13px; color: var(--t2); margin-bottom: 3px; }
.dmg-box-val { font-size: 16px; font-weight: 600; } .dmg-box-val { font-size: 18px; font-weight: 600; }
/* ── Mitigation picker ──────────────────────────────────────────────────────── */ /* ── Mitigation picker ──────────────────────────────────────────────────────── */
.mitig-picker { .mitig-picker {
@ -170,8 +170,8 @@ select option { background: var(--bg2); }
.mitig-opt:hover { border-color: var(--borderem); } .mitig-opt:hover { border-color: var(--borderem); }
.mitig-opt.sel { border-color: var(--gold); background: var(--goldbg); } .mitig-opt.sel { border-color: var(--gold); background: var(--goldbg); }
.mitig-opt.active-log { opacity: 0.5; cursor: default; } .mitig-opt.active-log { opacity: 0.5; cursor: default; }
.mitig-opt .opt-name { font-size: 12px; flex: 1; } .mitig-opt .opt-name { font-size: 13px; flex: 1; }
.mitig-opt .opt-dr { font-size: 11px; color: var(--t2); } .mitig-opt .opt-dr { font-size: 12px; color: var(--t2); }
/* ── Event Explorer ─────────────────────────────────────────────────────────── */ /* ── Event Explorer ─────────────────────────────────────────────────────────── */
.explorer-grid { .explorer-grid {
@ -188,7 +188,7 @@ select option { background: var(--bg2); }
} }
.form-group label { .form-group label {
font-size: 11px; font-size: 13px;
color: var(--t2); color: var(--t2);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -207,7 +207,7 @@ select option { background: var(--bg2); }
min-height: 200px; min-height: 200px;
white-space: pre-wrap; white-space: pre-wrap;
overflow-x: auto; overflow-x: auto;
font-size: 13px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
} }

22
css/layout.css
View File

@ -10,8 +10,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 0 20px; padding: 0 24px;
height: 52px; height: 58px;
background: var(--bg1); background: var(--bg1);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
position: sticky; position: sticky;
@ -22,14 +22,14 @@
.logo { .logo {
font-family: var(--font-d); font-family: var(--font-d);
font-size: 15px; font-size: 17px;
color: var(--gold); color: var(--gold);
letter-spacing: 0.05em; letter-spacing: 0.05em;
white-space: nowrap; white-space: nowrap;
} }
.logo span { .logo span {
font-family: var(--font-b); font-family: var(--font-b);
font-size: 11px; font-size: 12px;
color: var(--t3); color: var(--t3);
margin-left: 8px; margin-left: 8px;
font-weight: 400; font-weight: 400;
@ -43,11 +43,11 @@
} }
.tab { .tab {
padding: 5px 14px; padding: 6px 16px;
border: none; border: none;
background: transparent; background: transparent;
color: var(--t2); color: var(--t2);
font-size: 13px; font-size: 15px;
cursor: pointer; cursor: pointer;
border-radius: var(--r); border-radius: var(--r);
font-family: var(--font-b); font-family: var(--font-b);
@ -60,10 +60,10 @@
/* ── Main content ───────────────────────────────────────────────────────────── */ /* ── Main content ───────────────────────────────────────────────────────────── */
#main { #main {
flex: 1; flex: 1;
padding: 20px; padding: 24px;
max-width: 1360px; max-width: 1920px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: min(85%, calc(100% - 40px));
} }
/* ── Two-column panel layout (timeline + detail) ────────────────────────────── */ /* ── Two-column panel layout (timeline + detail) ────────────────────────────── */
@ -94,14 +94,14 @@
min-width: 120px; min-width: 120px;
} }
.fg label { .fg label {
font-size: 11px; font-size: 13px;
color: var(--t2); color: var(--t2);
} }
/* ── Topbar user badge ───────────────────────────────────────────────────────── */ /* ── Topbar user badge ───────────────────────────────────────────────────────── */
.topbar-user { .topbar-user {
margin-left: auto; margin-left: auto;
font-size: 12px; font-size: 13px;
color: var(--t2); color: var(--t2);
white-space: nowrap; white-space: nowrap;
} }