v3: button styling consistency pass

This commit is contained in:
khannurien
2026-03-21 19:41:15 +00:00
parent 5bed03baa5
commit 39a0cc397e
12 changed files with 42 additions and 26 deletions

View File

@@ -280,7 +280,7 @@
}
/* ── Mode toggle — segmented control ── */
.dump-mode-toggle {
.visibility-toggle {
display: flex;
background: var(--color-bg);
border: 1.5px solid var(--color-border);
@@ -289,7 +289,7 @@
gap: 2px;
}
.dump-mode-toggle button {
.visibility-toggle button {
flex: 1;
padding: 0.3rem 0.9rem;
border-radius: 6px;
@@ -303,12 +303,12 @@
white-space: nowrap;
}
.dump-mode-toggle button.active {
.visibility-toggle button.active {
background: var(--color-accent);
color: var(--color-on-accent);
}
.dump-mode-toggle button:not(.active):hover {
.visibility-toggle button:not(.active):hover {
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
@@ -1059,7 +1059,7 @@ body.has-player .fab-new {
font-weight: 600;
}
.profile-header .logout-btn {
.profile-header .btn-border {
margin-top: 0.5rem;
}
@@ -1091,7 +1091,7 @@ body.has-player .fab-new {
margin-top: 0.5rem;
align-items: center;
}
.profile-own-actions .logout-btn {
.profile-own-actions .btn-border {
margin-top: 0;
}
.invite-generate {
@@ -1189,7 +1189,10 @@ body.has-player .fab-new {
color: var(--color-accent);
}
.logout-btn {
/* ── Border-tinted buttons ── */
.btn-border-danger,
.btn-border-success,
.btn-border {
padding: 0.3rem 0.9rem;
border: 1.5px solid var(--color-border);
border-radius: 6px;
@@ -1197,14 +1200,22 @@ body.has-player .fab-new {
color: var(--color-text-muted);
font-size: 0.85rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.logout-btn:hover {
.btn-border-danger:hover,
.btn-border-danger.active,
.btn-border:hover {
border-color: var(--color-danger);
color: var(--color-danger);
}
.btn-border-success:hover,
.btn-border-success.active {
border-color: var(--color-success);
color: var(--color-success);
}
/* ── ErrorCard ── */
.error-card-wrap {
display: flex;