forked from xziino/ff14-mitigator
Scale up UI: larger fonts, icons and spacing across all CSS
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
xziino
parent
5f0bdb3504
commit
5df03a3915
@ -1,7 +1,7 @@
|
||||
/* ── Player Grid ─────────────────────────────────────────────────────────── */
|
||||
.player-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r);
|
||||
padding: 7px 9px;
|
||||
padding: 9px 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, border-color 0.15s;
|
||||
user-select: none;
|
||||
@ -24,7 +24,7 @@
|
||||
.player-card--ref:hover { border-color: rgba(100, 160, 255, 0.7); }
|
||||
|
||||
.ref-player-label {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
color: var(--t3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
@ -32,13 +32,13 @@
|
||||
}
|
||||
|
||||
.player-job-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 9px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-d);
|
||||
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-name {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--t1);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.player-type {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--t2);
|
||||
margin-top: 1px;
|
||||
}
|
||||
@ -71,8 +71,8 @@
|
||||
|
||||
.filter-input {
|
||||
width: 200px;
|
||||
padding: 4px 9px;
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@ -93,16 +93,16 @@
|
||||
|
||||
.ref-report-input {
|
||||
width: 200px;
|
||||
padding: 4px 9px;
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── AoE Timeline ────────────────────────────────────────────────────────── */
|
||||
.aoe-event {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr;
|
||||
grid-template-columns: 60px 1fr;
|
||||
gap: 14px;
|
||||
padding: 11px 0;
|
||||
padding: 13px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
align-items: start;
|
||||
}
|
||||
@ -110,7 +110,7 @@
|
||||
|
||||
.aoe-time {
|
||||
font-family: var(--font-d);
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
color: var(--gold);
|
||||
padding-top: 2px;
|
||||
letter-spacing: 0.03em;
|
||||
@ -120,12 +120,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
color: var(--t1);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.aoe-total {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--t2);
|
||||
margin-left: 6px;
|
||||
}
|
||||
@ -149,8 +149,8 @@
|
||||
background: var(--bg3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r);
|
||||
padding: 3px 8px 4px 6px;
|
||||
font-size: 11px;
|
||||
padding: 4px 9px 5px 7px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.aoe-target--dead {
|
||||
@ -167,7 +167,7 @@
|
||||
}
|
||||
|
||||
.aoe-target-overkill {
|
||||
font-size: 9px;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-d);
|
||||
color: var(--red);
|
||||
font-weight: 600;
|
||||
@ -176,7 +176,7 @@
|
||||
|
||||
.aoe-target-job {
|
||||
font-family: var(--font-d);
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
padding-top: 2px;
|
||||
@ -206,7 +206,7 @@
|
||||
|
||||
/* ── HP Bar ──────────────────────────────────────────────────────────────── */
|
||||
.aoe-hp-bar {
|
||||
height: 6px;
|
||||
height: 7px;
|
||||
background: var(--bg0);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
@ -233,7 +233,7 @@
|
||||
}
|
||||
|
||||
.aoe-ref-label {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--t3);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
@ -249,13 +249,13 @@
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r);
|
||||
padding: 2px 8px 2px 6px;
|
||||
font-size: 11px;
|
||||
padding: 3px 9px 3px 7px;
|
||||
font-size: 13px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.aoe-delta-worse { font-size: 10px; color: var(--red); }
|
||||
.aoe-delta-better { font-size: 10px; color: var(--green); }
|
||||
.aoe-delta-worse { font-size: 12px; color: var(--red); }
|
||||
.aoe-delta-better { font-size: 12px; color: var(--green); }
|
||||
|
||||
.aoe-buff-missing {
|
||||
opacity: 0.5;
|
||||
@ -278,9 +278,9 @@
|
||||
}
|
||||
|
||||
.aoe-target-buff-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 3px;
|
||||
object-fit: cover;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
10
css/base.css
10
css/base.css
@ -59,7 +59,7 @@ body {
|
||||
background: var(--bg0);
|
||||
color: var(--t1);
|
||||
font-family: var(--font-b);
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@ -70,7 +70,7 @@ code {
|
||||
background: var(--bg2);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -96,7 +96,7 @@ ol li {
|
||||
border-radius: var(--r);
|
||||
padding: 10px 14px;
|
||||
color: var(--red);
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
@ -106,7 +106,7 @@ ol li {
|
||||
border-radius: var(--r);
|
||||
padding: 10px 14px;
|
||||
color: var(--green);
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
@ -142,7 +142,7 @@ ol li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.empty h3 {
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
color: var(--t1);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
background: var(--bgcard);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--rl);
|
||||
padding: 18px;
|
||||
padding: 22px;
|
||||
}
|
||||
.card + .card { margin-top: 16px; }
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-d);
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@ -22,7 +22,7 @@
|
||||
content: '';
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 13px;
|
||||
height: 15px;
|
||||
background: var(--gold);
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
@ -35,8 +35,8 @@ input, select, textarea {
|
||||
border-radius: var(--r);
|
||||
color: var(--t1);
|
||||
font-family: var(--font-b);
|
||||
font-size: 13px;
|
||||
padding: 7px 11px;
|
||||
font-size: 15px;
|
||||
padding: 8px 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
width: 100%;
|
||||
@ -50,12 +50,12 @@ select option { background: var(--bg2); }
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 16px;
|
||||
padding: 8px 18px;
|
||||
border-radius: var(--r);
|
||||
border: 1px solid var(--borderem);
|
||||
background: var(--bg2);
|
||||
color: var(--t1);
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
font-family: var(--font-b);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
@ -78,7 +78,7 @@ select option { background: var(--bg2); }
|
||||
}
|
||||
.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 {
|
||||
@ -96,20 +96,20 @@ select option { background: var(--bg2); }
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
color: var(--t2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.stat-value { font-size: 20px; font-weight: 600; }
|
||||
.stat-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }
|
||||
.stat-value { font-size: 24px; font-weight: 600; }
|
||||
.stat-sub { font-size: 13px; color: var(--t3); margin-top: 2px; }
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────────────────── */
|
||||
.badge {
|
||||
padding: 1px 7px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@ -145,8 +145,8 @@ select option { background: var(--bg2); }
|
||||
border-radius: var(--r);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.dmg-box-label { font-size: 11px; color: var(--t2); margin-bottom: 3px; }
|
||||
.dmg-box-val { font-size: 16px; font-weight: 600; }
|
||||
.dmg-box-label { font-size: 13px; color: var(--t2); margin-bottom: 3px; }
|
||||
.dmg-box-val { font-size: 18px; font-weight: 600; }
|
||||
|
||||
/* ── Mitigation picker ──────────────────────────────────────────────────────── */
|
||||
.mitig-picker {
|
||||
@ -170,8 +170,8 @@ select option { background: var(--bg2); }
|
||||
.mitig-opt:hover { border-color: var(--borderem); }
|
||||
.mitig-opt.sel { border-color: var(--gold); background: var(--goldbg); }
|
||||
.mitig-opt.active-log { opacity: 0.5; cursor: default; }
|
||||
.mitig-opt .opt-name { font-size: 12px; flex: 1; }
|
||||
.mitig-opt .opt-dr { font-size: 11px; color: var(--t2); }
|
||||
.mitig-opt .opt-name { font-size: 13px; flex: 1; }
|
||||
.mitig-opt .opt-dr { font-size: 12px; color: var(--t2); }
|
||||
|
||||
/* ── Event Explorer ─────────────────────────────────────────────────────────── */
|
||||
.explorer-grid {
|
||||
@ -188,7 +188,7 @@ select option { background: var(--bg2); }
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
color: var(--t2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
@ -207,7 +207,7 @@ select option { background: var(--bg2); }
|
||||
min-height: 200px;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 0 20px;
|
||||
height: 52px;
|
||||
padding: 0 24px;
|
||||
height: 58px;
|
||||
background: var(--bg1);
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: sticky;
|
||||
@ -22,14 +22,14 @@
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-d);
|
||||
font-size: 15px;
|
||||
font-size: 17px;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.logo span {
|
||||
font-family: var(--font-b);
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
color: var(--t3);
|
||||
margin-left: 8px;
|
||||
font-weight: 400;
|
||||
@ -43,11 +43,11 @@
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 5px 14px;
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--t2);
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--r);
|
||||
font-family: var(--font-b);
|
||||
@ -60,10 +60,10 @@
|
||||
/* ── Main content ───────────────────────────────────────────────────────────── */
|
||||
#main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
max-width: 1360px;
|
||||
padding: 24px;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
width: min(85%, calc(100% - 40px));
|
||||
}
|
||||
|
||||
/* ── Two-column panel layout (timeline + detail) ────────────────────────────── */
|
||||
@ -94,14 +94,14 @@
|
||||
min-width: 120px;
|
||||
}
|
||||
.fg label {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
color: var(--t2);
|
||||
}
|
||||
|
||||
/* ── Topbar user badge ───────────────────────────────────────────────────────── */
|
||||
.topbar-user {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--t2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user