style: update font sizes, weights, and letter-spacing for improved readability and consistency across various components

Entire-Checkpoint: e6dee91f3aee
This commit is contained in:
4gray committed 2026-03-26 08:12:50 +01:00
1 parent cd4121f798
commit 251b922659
26 files changed
+115 -93

No files matched your search

+4
View File
@@ -50,6 +50,8 @@ html {
--app-header-bg: #eef0f3;
--app-content-bg: #f5f6f8;
--app-rail-border: transparent;
--app-on-surface: #1d1b1e;
--app-hover-overlay: rgba(0, 0, 0, 0.06);
--app-search-bg: rgba(255, 255, 255, 0.7);
--app-search-border: rgba(0, 0, 0, 0.1);
--app-selection-color: #2f7bff;
@@ -120,6 +122,8 @@ html {
--app-header-bg: #111318;
--app-content-bg: #161a22;
--app-rail-border: transparent;
--app-on-surface: #e6e1e5;
--app-hover-overlay: rgba(255, 255, 255, 0.08);
--app-search-bg: rgba(255, 255, 255, 0.05);
--app-search-border: rgba(255, 255, 255, 0.09);
--app-selection-color: #78adff;
-1
View File
@@ -47,7 +47,6 @@
text-overflow: ellipsis;
flex: 1;
min-width: 0;
padding-left: 10px;
}
.nav-item-meta {
@@ -12,7 +12,7 @@
&:hover {
background: color-mix(
in srgb,
var(--mat-sys-on-surface) 8%,
var(--app-on-surface) 8%,
transparent
);
}
@@ -31,7 +31,7 @@
justify-content: center;
background: color-mix(
in srgb,
var(--mat-sys-on-surface) 8%,
var(--app-on-surface) 8%,
transparent
);
flex-shrink: 0;
@@ -133,7 +133,7 @@
margin: 0 8px 4px;
background: color-mix(
in srgb,
var(--mat-sys-on-surface) 6%,
var(--app-on-surface) 6%,
transparent
);
border-radius: 8px;
@@ -263,7 +263,11 @@
}
.playlist-item:hover:not(.selected) {
background: var(--mat-sys-surface-container);
background: color-mix(
in srgb,
var(--app-on-surface) 8%,
transparent
);
}
.playlist-icon-container {
@@ -276,7 +280,7 @@
border-radius: 8px;
background: color-mix(
in srgb,
var(--mat-sys-on-surface) 6%,
var(--app-on-surface) 6%,
transparent
);
flex-shrink: 0;
@@ -2,9 +2,6 @@
<div class="downloads">
<header class="downloads__header">
<div class="downloads__header-left">
<div class="settings-group__header-icon">
<mat-icon>downloading</mat-icon>
</div>
<div class="settings-group__header-text">
<h1>{{ 'DOWNLOADS.TITLE' | translate }}</h1>
@if (activeCount() > 0) {
@@ -35,24 +35,6 @@
align-items: center;
gap: 16px;
.settings-group__header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 14px;
background: var(--mat-sys-secondary-container);
color: var(--mat-sys-on-secondary-container);
mat-icon {
font-size: 24px;
width: 24px;
height: 24px;
}
}
.settings-group__header-text {
display: flex;
align-items: center;
@@ -60,8 +42,8 @@
h1 {
margin: 0;
font-size: 1.25rem;
font-weight: 800;
font-size: 1.2rem;
font-weight: 650;
letter-spacing: -0.02em;
}
}
@@ -144,8 +126,9 @@
p {
margin: 0 0 0.5rem;
font-size: 1.25rem;
font-weight: 600;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
color: var(--mat-sys-on-surface);
}
@@ -103,8 +103,9 @@
}
p {
font-size: 1.1rem;
font-size: 0.85rem;
margin: 0;
opacity: 0.65;
}
}
@@ -26,8 +26,8 @@
}
.empty-state-title {
font-size: 1.1rem;
font-weight: 500;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
margin: 0;
opacity: 0.5;
@@ -53,6 +53,9 @@
h2 {
margin: 0;
white-space: nowrap;
font-size: 1.2rem;
font-weight: 650;
letter-spacing: -0.02em;
}
.type-filters {
@@ -116,15 +119,16 @@
.no-items-content {
h3 {
margin: 0 0 0.5rem;
font-size: 1.5rem;
font-weight: 500;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
color: var(--text-color);
}
p {
font-size: 1.1rem;
font-size: 0.85rem;
margin: 0;
opacity: 0.8;
opacity: 0.65;
}
.search-term-note {
@@ -32,8 +32,9 @@
}
.collection-title {
font-size: 15px;
font-size: 0.94rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--mat-sys-on-surface);
margin-right: auto;
}
@@ -42,7 +43,7 @@
.scope-toggle {
.toggle-label {
margin-left: 4px;
font-size: 12px;
font-size: 0.75rem;
}
mat-icon {
@@ -79,8 +80,9 @@ app-unified-grid-tab {
}
.empty-title {
font-size: 14px;
font-weight: 500;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
margin: 0;
}
}
@@ -104,16 +104,16 @@
}
h3 {
font-size: 1.125rem;
font-weight: 600;
font-size: 1.05rem;
font-weight: 520;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
p {
font-size: 0.875rem;
font-size: 0.85rem;
margin: 0;
opacity: 0.7;
opacity: 0.65;
line-height: 1.4;
max-width: 260px;
}
@@ -385,8 +385,9 @@
box-sizing: border-box;
&__title {
font-size: 1.375rem;
font-weight: 600;
font-size: 1.2rem;
font-weight: 650;
letter-spacing: -0.02em;
margin: 0 0 20px 0;
color: var(--text-primary);
}
@@ -479,8 +480,9 @@
width: 100%;
h3 {
font-size: 1.125rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 12px 0;
color: var(--text-primary);
}
@@ -19,7 +19,9 @@
.info-section h3 {
margin-bottom: 16px;
padding-left: 16px;
font-size: 1.1em;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
border-bottom: 1px solid var(--mat-sys-outline-variant);
padding-bottom: 8px;
}
@@ -26,7 +26,7 @@
}
.selection-info {
font-size: 13px;
font-size: 0.8125rem;
color: var(--mat-sys-on-surface-variant);
strong {
@@ -82,7 +82,7 @@
.category-name {
flex: 1;
font-size: 13px;
font-size: 0.8125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -92,7 +92,7 @@
padding: 24px;
text-align: center;
color: var(--mat-sys-on-surface-variant);
font-size: 13px;
font-size: 0.8125rem;
}
:host ::ng-deep {
@@ -127,16 +127,16 @@
}
h3 {
font-size: 1.125rem;
font-weight: 600;
font-size: 1.05rem;
font-weight: 520;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
p {
font-size: 0.875rem;
font-size: 0.85rem;
margin: 0;
opacity: 0.7;
opacity: 0.65;
line-height: 1.4;
max-width: 260px;
}
@@ -9,7 +9,10 @@
}
h2 {
margin-bottom: 24px;
margin: 0 0 24px;
font-size: 1.2rem;
font-weight: 650;
letter-spacing: -0.02em;
}
.section {
@@ -27,6 +30,9 @@ h2 {
align-items: center;
gap: 8px;
margin-bottom: 16px;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
opacity: 0.8;
}
}
@@ -18,6 +18,13 @@
align-items: center;
margin-bottom: 20px;
h2 {
margin: 0;
font-size: 1.2rem;
font-weight: 650;
letter-spacing: -0.02em;
}
.header-actions {
display: flex;
align-items: center;
@@ -95,8 +102,9 @@
padding: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
font-size: 1.1rem;
font-weight: 500;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
mat-icon {
opacity: 0.7;
@@ -104,7 +112,7 @@
.item-count {
margin-left: auto;
font-size: 0.9rem;
font-size: 0.85rem;
opacity: 0.7;
}
}
@@ -107,8 +107,9 @@
padding: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
font-size: 1.1rem;
font-weight: 500;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
mat-icon {
opacity: 0.7;
@@ -116,7 +117,7 @@
.item-count {
margin-left: auto;
font-size: 0.9rem;
font-size: 0.85rem;
opacity: 0.7;
}
}
@@ -150,9 +151,10 @@
.playlist-section {
.section-title {
margin: 0 0 1.5rem;
font-size: 1.2rem;
font-weight: normal;
color: var(--text-color-secondary);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--mat-sys-on-surface);
padding: 0 8px;
}
}
@@ -85,14 +85,15 @@
}
.no-results-title {
font-size: 1.1rem;
font-weight: 500;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.no-results-hint {
opacity: 0.7;
font-size: 0.9rem;
opacity: 0.65;
font-size: 0.85rem;
}
@media only screen and (max-width: 599px) {
@@ -121,7 +121,7 @@
white-space: nowrap;
font-size: 0.96rem;
font-weight: 600;
letter-spacing: 0.01em;
letter-spacing: -0.01em;
line-height: 1.2;
}
@@ -24,10 +24,12 @@
.empty-favorites {
margin-top: 40px;
font-size: 1rem;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
}
.empty-favorites-hint {
opacity: 0.7;
font-size: 0.9rem;
opacity: 0.65;
font-size: 0.85rem;
}
@@ -24,10 +24,12 @@
.empty-recent {
margin-top: 40px;
font-size: 1rem;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
}
.empty-recent-hint {
opacity: 0.7;
font-size: 0.9rem;
opacity: 0.65;
font-size: 0.85rem;
}
@@ -57,7 +57,7 @@
.topbar-label {
margin: 0;
font-size: 0.75rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--mat-sys-on-surface-variant);
text-transform: uppercase;
@@ -66,14 +66,15 @@
}
.empty-title {
font-size: 14px;
font-weight: 500;
font-size: 1.05rem;
font-weight: 520;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.empty-hint {
font-size: 12px;
opacity: 0.7;
font-size: 0.85rem;
opacity: 0.65;
margin: 0;
max-width: 260px;
}
@@ -19,9 +19,9 @@
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
--rail-link-color: var(--mat-sys-on-surface-variant);
--rail-link-hover-color: var(--mat-sys-on-surface);
--rail-link-hover-bg: var(--mat-sys-surface-container);
--rail-link-color: color-mix(in srgb, var(--app-on-surface) 65%, transparent);
--rail-link-hover-color: var(--app-on-surface);
--rail-link-hover-bg: var(--app-hover-overlay);
--rail-link-active-bg: var(--app-selection-surface);
--rail-link-active-bg-strong: var(--app-selection-surface-strong);
--rail-link-active-color: var(--app-selection-color);
@@ -127,8 +127,8 @@
padding: 5px 2px;
margin: 4px 0;
border-radius: 14px;
background: color-mix(in srgb, var(--mat-sys-on-surface) 3%, transparent);
border: 1px solid color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
background: color-mix(in srgb, var(--app-on-surface) 3%, transparent);
border: 1px solid color-mix(in srgb, var(--app-on-surface) 4%, transparent);
position: relative;
animation: region-enter 0.25s ease-out both;
@@ -195,7 +195,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--mat-sys-on-surface-variant);
color: color-mix(in srgb, var(--app-on-surface) 65%, transparent);
app-region: no-drag;
mat-icon {
@@ -205,8 +205,8 @@
}
&:hover:not(.is-active) {
background: var(--app-selection-surface);
color: var(--mat-sys-on-surface);
background: var(--app-hover-overlay);
color: var(--app-on-surface);
}
&.is-active::after {
@@ -96,6 +96,7 @@
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
letter-spacing: 0.08em;
color: var(--mat-sys-on-surface-variant);
opacity: 0.6;
}
@@ -23,7 +23,8 @@
.sources-title {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
font-weight: 650;
letter-spacing: -0.02em;
}
.sources-subtitle {