tiennm99/noitu
1
0 Fork 0
mirror of https://github.com/tiennm99/noitu.git synced 2026-10-11 03:13:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(web): remap the remaining components onto the collapsed type ramp

Browse Source 
Mechanical follow-through on the app.css ramp collapse: every var(--text-N)
reference in these files moves to the step that carries the same size it did
under the old nine-step scale, and the remaining 6/10/14px spacing literals
become --space tokens. Accent hover/pressed tokens land on the two primary
buttons here (Lobby's "Bắt đầu"/"Sẵn sàng", the chat panel's "Gửi") for the
same reason the other primary buttons got them.
This commit is contained in:
tiennm99 committed 2026-09-21 16:59:33 +07:00
1 parent 2a7a2a7d53
commit 2a94e05752
9 files changed
+61 -43
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/lib/components/AttributionFooter.svelte
+1 -1
View File
@@ -37,7 +37,7 @@
padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
text-align: center;
color: var(--text-muted);
font-size: var(--text-2);
font-size: var(--text-1);
line-height: 1.4;
}
web/src/lib/components/ChatPanel.svelte
+16 -7
View File
@@ -222,7 +222,7 @@
border: 0;
background: none;
color: var(--text-muted);
font-size: var(--text-4);
font-size: var(--text-2);
font-weight: 600;
/* Uppercase Vietnamese stacks a tone mark above a capital. */
line-height: 1.6;
@@ -233,7 +233,7 @@
.header {
width: 100%;
min-height: 44px;
padding: 10px 0;
padding: var(--space-3) 0;
justify-content: space-between;
}
@@ -276,10 +276,10 @@
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
gap: var(--space-2);
/* Colour is set per line, from the author's seat. Everything else about
a line is the same for everybody. */
font-size: var(--text-6);
font-size: var(--text-3);
}
.author {
@@ -308,21 +308,30 @@
input {
flex: 1;
min-width: 0;
padding: 10px 12px;
padding: var(--space-3) 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
/* 16px or larger stops iOS Safari zooming the page on focus. */
font-size: var(--text-6);
font-size: var(--text-3);
}
.row button {
padding: 10px 16px;
padding: var(--space-3) 16px;
border: 0;
border-radius: var(--radius-sm);
background: var(--accent);
color: var(--accent-text);
font-weight: 600;
transition: background-color 150ms ease-out;
}
.row button:hover:not(:disabled) {
background: var(--accent-hover);
}
.row button:active:not(:disabled) {
background: var(--accent-pressed);
}
.row button:disabled {
web/src/lib/components/CountdownRing.svelte
+1 -1
View File
@@ -146,7 +146,7 @@
display: grid;
place-items: center;
color: var(--text);
font-size: 1.5rem;
font-size: var(--text-5);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
web/src/lib/components/Lobby.svelte
+24 -15
View File
@@ -231,7 +231,7 @@
.count {
margin: 0;
color: var(--text-muted);
font-size: var(--text-4);
font-size: var(--text-2);
font-weight: 600;
}
@@ -248,11 +248,11 @@
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
gap: var(--space-3);
/* A seat is a row to read, not a target to hit, so it keeps the
type and gives up the padding: four of them decide whether the
buttons under the list are on screen. */
padding: var(--space-2) 14px;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
@@ -261,7 +261,7 @@
/* Tighter still under a finished game, where the list is competing with a
result panel for the same screen. */
.compact .seat {
padding: var(--space-1) 14px;
padding: var(--space-1) var(--space-4);
}
/* Readiness is a tint. Being the owner is a marker down the edge: a fact
@@ -294,7 +294,7 @@
border-radius: var(--radius-pill);
background: var(--surface-alt);
color: var(--text-muted);
font-size: var(--text-2);
font-size: var(--text-1);
}
/* One right-hand group, so a row keeps its shape whether or not it has a
@@ -308,19 +308,19 @@
.wins {
color: var(--text-muted);
font-size: var(--text-2);
font-size: var(--text-1);
white-space: nowrap;
}
.wins strong {
color: var(--text);
font-size: var(--text-5);
font-size: var(--text-2);
font-variant-numeric: tabular-nums;
}
.state {
color: var(--text-muted);
font-size: var(--text-3);
font-size: var(--text-2);
}
.state.offline {
@@ -346,7 +346,7 @@
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-muted);
font-size: var(--text-6);
font-size: var(--text-3);
line-height: 1;
}
@@ -370,7 +370,7 @@
.hint {
margin: 0;
color: var(--text-muted);
font-size: var(--text-5);
font-size: var(--text-2);
text-align: center;
}
@@ -380,11 +380,11 @@
justify-content: space-between;
gap: var(--space-2);
margin: 0;
padding: 10px var(--space-3);
padding: var(--space-3) var(--space-3);
border-radius: var(--radius-sm);
background: var(--danger-soft);
color: var(--danger);
font-size: var(--text-5);
font-size: var(--text-2);
}
.actions {
@@ -397,7 +397,7 @@
/* Still a full 44px: readying and starting are what a player came
here to press. */
min-height: 44px;
padding: 10px var(--space-3);
padding: var(--space-3) var(--space-3);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
@@ -408,6 +408,15 @@
border-color: transparent;
background: var(--accent);
color: var(--accent-text);
transition: background-color 150ms ease-out;
}
.actions .primary:hover:not(:disabled) {
background: var(--accent-hover);
}
.actions .primary:active:not(:disabled) {
background: var(--accent-pressed);
}
.actions .primary.on {
@@ -429,7 +438,7 @@
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
font-size: var(--text-4);
font-size: var(--text-2);
}
.leave:disabled {
@@ -439,7 +448,7 @@
.note {
margin: 0;
color: var(--text-muted);
font-size: var(--text-3);
font-size: var(--text-2);
text-align: center;
}
</style>
web/src/lib/components/NicknameInput.svelte
+5 -5
View File
@@ -29,25 +29,25 @@
.field {
display: flex;
flex-direction: column;
gap: 6px;
gap: var(--space-2);
}
label {
font-weight: 600;
font-size: var(--text-5);
font-size: var(--text-2);
}
input {
padding: var(--space-3) 14px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
font-size: var(--text-6);
font-size: var(--text-3);
}
.hint {
margin: 0;
color: var(--text-muted);
font-size: var(--text-3);
font-size: var(--text-2);
}
</style>
web/src/lib/components/RoomCodePanel.svelte
+8 -8
View File
@@ -110,7 +110,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -135,7 +135,7 @@
.label {
margin: 0;
color: var(--text-muted);
font-size: var(--text-4);
font-size: var(--text-2);
}
/*
@@ -146,13 +146,13 @@
.code {
margin: 0;
font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;
font-size: var(--text-9);
font-size: var(--text-6);
font-weight: 700;
letter-spacing: 0.12em;
}
.panel.compact .code {
font-size: var(--text-7);
font-size: var(--text-4);
}
.actions {
@@ -164,18 +164,18 @@
.actions button {
min-height: 44px;
padding: 10px var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface-alt);
font-size: var(--text-4);
font-size: var(--text-2);
font-weight: 600;
}
.failed {
margin: 0;
color: var(--danger);
font-size: var(--text-3);
font-size: var(--text-2);
text-align: center;
}
@@ -187,7 +187,7 @@
margin: 0;
max-width: 100%;
color: var(--text-muted);
font-size: var(--text-3);
font-size: var(--text-2);
}
.link-label {
web/src/lib/components/ThemeToggle.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
border: 1px solid var(--border-strong);
border-radius: 50%;
background: var(--surface);
font-size: var(--text-6);
font-size: var(--text-3);
line-height: 1;
}
web/src/routes/+layout.svelte
+1 -1
View File
@@ -71,7 +71,7 @@
.brand {
color: inherit;
font-size: var(--text-7);
font-size: var(--text-4);
font-weight: 700;
text-decoration: none;
}
web/src/routes/rules/+page.svelte
+4 -4
View File
@@ -106,7 +106,7 @@
h1 {
margin: 0;
font-size: var(--text-8);
font-size: var(--text-5);
}
.intro {
@@ -126,7 +126,7 @@
border-radius: var(--radius-pill);
background: var(--surface-alt);
color: var(--text);
font-size: var(--text-3);
font-size: var(--text-2);
text-decoration: none;
}
@@ -141,7 +141,7 @@
h2 {
margin: 0;
font-size: var(--text-7);
font-size: var(--text-4);
}
p {
@@ -164,6 +164,6 @@
.back {
align-self: flex-start;
color: var(--text-muted);
font-size: var(--text-5);
font-size: var(--text-2);
}
</style>