mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 17:06:15 -08:00
fix(ui): Cyrillic/Greek weights, html lang, weight normalisation (#1780)
Load Roboto 600/700 and DM Sans 700 so Cyrillic and Greek headings render real semibold and bold faces instead of a synthetic bold, keep <html lang> in step with the UI language, and move every font weight onto the 400/500/600/700 scale (JetBrains Mono at 500 or lighter; the dashboard LIVE badge now uses the interface font at 700). Add the `styles:font-weights:validate` ratchet guard and its CI step. It reads stylesheets much as Sass and the browser do (cascade, layers, mixins, content blocks, `@extend`, `@at-root`, `:is()`/`:where()`, keyframes) and lists what it deliberately does not trace in its header. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
ab8460338a
commit
e8b181fcea
52 files changed
+11216
-97
No files matched your search
@@ -192,7 +192,7 @@
|
||||
background: transparent;
|
||||
color: var(--app-heading-color);
|
||||
font-size: 0.93rem;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
transition: color 140ms ease;
|
||||
@@ -218,7 +218,7 @@
|
||||
padding: 8px 4px;
|
||||
background: transparent;
|
||||
color: var(--mat-sys-primary);
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.download-library__episode-label {
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
.downloaded-series-dialog__eyebrow {
|
||||
color: var(--app-eyebrow-color);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 750;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -93,7 +93,7 @@ mat-dialog-content {
|
||||
color: var(--mat-sys-primary);
|
||||
font-family: var(--mat-sys-label-small-font);
|
||||
font-size: 0.73rem;
|
||||
font-weight: 750;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(1.25rem, 1.8vw, 1.6rem);
|
||||
font-weight: 680;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
@@ -86,7 +86,7 @@
|
||||
'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono',
|
||||
monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 650;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,7 +188,7 @@
|
||||
background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
|
||||
font: inherit;
|
||||
font-size: 0.79rem;
|
||||
font-weight: 620;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
@@ -271,7 +271,7 @@
|
||||
margin: 0;
|
||||
color: var(--app-heading-color, var(--mat-sys-on-surface));
|
||||
font-size: 1rem;
|
||||
font-weight: 670;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
|
||||
@@ -44,7 +44,7 @@ mat-card-content {
|
||||
--error-empty-illustration-size: clamp(132px, 15vw, 180px);
|
||||
--error-empty-max-width: min(270px, 100%);
|
||||
--error-empty-title-size: clamp(1.15rem, 1.35vw, 1.4rem);
|
||||
--error-empty-title-weight: 610;
|
||||
--error-empty-title-weight: 600;
|
||||
--error-empty-title-spacing: -0.006em;
|
||||
--error-empty-copy-gap: 4px;
|
||||
--error-empty-description-opacity: 0.82;
|
||||
|
||||
@@ -193,7 +193,7 @@ mat-card {
|
||||
--error-empty-max-width: min(480px, 100%);
|
||||
--error-empty-title-size: clamp(1.45rem, 2vw, 1.9rem);
|
||||
--error-empty-description-size: clamp(0.95rem, 1.15vw, 1.05rem);
|
||||
--error-empty-title-weight: 660;
|
||||
--error-empty-title-weight: 600;
|
||||
--error-empty-title-spacing: -0.014em;
|
||||
--error-empty-copy-gap: 10px;
|
||||
--error-empty-description-line-height: 1.44;
|
||||
@@ -211,7 +211,7 @@ mat-card {
|
||||
--error-empty-max-width: 310px;
|
||||
--error-empty-title-size: 1.3rem;
|
||||
--error-empty-description-size: 0.9rem;
|
||||
--error-empty-title-weight: 640;
|
||||
--error-empty-title-weight: 600;
|
||||
--error-empty-copy-gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@
|
||||
--error-view-copy-width: var(--error-empty-max-width, 420px);
|
||||
--error-view-copy-gap: var(--error-empty-copy-gap, 8px);
|
||||
--error-view-title-size: var(--error-empty-title-size, 1.55rem);
|
||||
--error-view-title-weight: var(--error-empty-title-weight, 640);
|
||||
--error-view-title-weight: var(--error-empty-title-weight, 600);
|
||||
--error-view-title-spacing: var(--error-empty-title-spacing, -0.012em);
|
||||
--error-view-description-size: var(--error-empty-description-size, 0.98rem);
|
||||
--error-view-description-line-height: var(
|
||||
|
||||
+1
-1
@@ -27,7 +27,7 @@
|
||||
|
||||
.empty-state-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
+1
-1
@@ -150,7 +150,7 @@ app-unified-live-tab {
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
@include detail-view.base(
|
||||
$season-title-font-size: 1.2rem,
|
||||
$season-title-font-weight: 650,
|
||||
$season-title-font-weight: 600,
|
||||
$season-title-letter-spacing: -0.02em,
|
||||
$episode-title-font-size: 1rem,
|
||||
$episode-title-letter-spacing: -0.01em
|
||||
|
||||
+1
-1
@@ -115,7 +115,7 @@
|
||||
|
||||
.empty-state-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0 0 8px;
|
||||
text-wrap: balance;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
.recently-added-page__title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--app-heading-color, #d8dce8);
|
||||
|
||||
+1
-1
@@ -131,7 +131,7 @@
|
||||
|
||||
.no-results-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
+4
-2
@@ -69,7 +69,7 @@
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.2;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--app-heading-color, var(--mat-sys-on-surface));
|
||||
}
|
||||
@@ -169,7 +169,7 @@
|
||||
|
||||
.channel-stat__value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--app-heading-color, var(--mat-sys-on-surface));
|
||||
overflow: hidden;
|
||||
@@ -179,6 +179,8 @@
|
||||
&--mono {
|
||||
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
|
||||
font-size: 0.92rem;
|
||||
// JetBrains Mono is bundled up to 500; the value's 600 would be faked.
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&--empty {
|
||||
|
||||
+1
-1
@@ -57,7 +57,7 @@
|
||||
|
||||
.empty-source-state__title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
+1
-1
@@ -32,7 +32,7 @@
|
||||
.empty-favorites {
|
||||
margin-top: 40px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -220,7 +220,7 @@
|
||||
|
||||
&__title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 4px;
|
||||
text-wrap: balance;
|
||||
@@ -310,7 +310,7 @@
|
||||
|
||||
.empty-state-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
+1
-1
@@ -32,7 +32,7 @@
|
||||
.empty-recent {
|
||||
margin-top: 40px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@ $font-mono: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
|
||||
// size as the hint and the action beside it, so all three scanned as
|
||||
// column headers over the list.
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--app-on-surface);
|
||||
overflow: hidden;
|
||||
|
||||
+6
-6
@@ -41,7 +41,7 @@
|
||||
background: rgb(255 148 35 / 15%);
|
||||
color: #ffb24c;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
@@ -66,7 +66,7 @@
|
||||
margin: 20px 0 0;
|
||||
color: #fff;
|
||||
font-size: 1.65rem;
|
||||
font-weight: 760;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.05;
|
||||
}
|
||||
@@ -98,7 +98,7 @@
|
||||
background: rgb(255 255 255 / 5%);
|
||||
color: rgb(255 255 255 / 68%);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 620;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@@ -267,7 +267,7 @@
|
||||
.web-player-diagnostic__player-label {
|
||||
overflow: hidden;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 760;
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -289,7 +289,7 @@
|
||||
min-width: 0;
|
||||
color: currentColor;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 680;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
opacity: 0.82;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -325,7 +325,7 @@
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 640;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
@@ -196,7 +196,7 @@
|
||||
overflow: hidden;
|
||||
color: var(--pc-text);
|
||||
font-size: 17px;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -304,7 +304,7 @@
|
||||
.player-settings__seg-item--selected {
|
||||
color: var(--pc-accent-violet, #b599ff);
|
||||
background: rgba(181, 153, 255, 0.2);
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// The default value selected is "nothing changed": neutral, not violet.
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.2;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--app-heading-color, var(--mat-sys-on-surface));
|
||||
}
|
||||
@@ -184,7 +184,7 @@
|
||||
|
||||
.account-stat__value {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--app-heading-color, var(--mat-sys-on-surface));
|
||||
overflow-wrap: anywhere;
|
||||
@@ -360,6 +360,8 @@
|
||||
|
||||
.account-chip--mono {
|
||||
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
|
||||
// JetBrains Mono is bundled up to 500; the chip's 600 would be faked.
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -690,14 +690,6 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: var(
|
||||
--font-mono,
|
||||
ui-monospace,
|
||||
'SF Mono',
|
||||
'JetBrains Mono',
|
||||
Menlo,
|
||||
monospace
|
||||
);
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
|
||||
+1
-1
@@ -65,7 +65,7 @@
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 520;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
+2
-2
@@ -44,7 +44,7 @@
|
||||
color: var(--mat-sys-on-surface);
|
||||
font: inherit;
|
||||
font-size: 0.94rem;
|
||||
font-weight: 450;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
@@ -188,7 +188,7 @@
|
||||
|
||||
.palette-command__label {
|
||||
font-size: 0.84rem;
|
||||
font-weight: 530;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.006em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
+1
-1
@@ -104,7 +104,7 @@ mat-card-content {
|
||||
--error-empty-illustration-size: clamp(132px, 15vw, 180px);
|
||||
--error-empty-max-width: min(270px, 100%);
|
||||
--error-empty-title-size: clamp(1.15rem, 1.35vw, 1.4rem);
|
||||
--error-empty-title-weight: 610;
|
||||
--error-empty-title-weight: 600;
|
||||
--error-empty-title-spacing: -0.006em;
|
||||
--error-empty-copy-gap: 4px;
|
||||
--error-empty-description-opacity: 0.82;
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@
|
||||
--error-view-copy-width: var(--error-empty-max-width, 420px);
|
||||
--error-view-copy-gap: var(--error-empty-copy-gap, 8px);
|
||||
--error-view-title-size: var(--error-empty-title-size, 1.55rem);
|
||||
--error-view-title-weight: var(--error-empty-title-weight, 640);
|
||||
--error-view-title-weight: var(--error-empty-title-weight, 600);
|
||||
--error-view-title-spacing: var(--error-empty-title-spacing, -0.012em);
|
||||
--error-view-description-size: var(--error-empty-description-size, 0.98rem);
|
||||
--error-view-description-line-height: var(
|
||||
|
||||
+3
-3
@@ -117,7 +117,7 @@
|
||||
border: 1px solid var(--shortcut-border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -186,7 +186,7 @@
|
||||
margin: 0;
|
||||
color: var(--shortcut-text);
|
||||
font-size: 0.74rem;
|
||||
font-weight: 750;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -273,7 +273,7 @@
|
||||
0 1px 0 color-mix(in srgb, white 28%, transparent);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 750;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
+1
-1
@@ -52,7 +52,7 @@
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--app-heading-color);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user