mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-12 20:16:15 -08:00
style: update font sizes, weights, and letter-spacing for improved readability and consistency across various components
Entire-Checkpoint: e6dee91f3aee
This commit is contained in:
1 parent
cd4121f798
commit
251b922659
26 files changed
+115
-93
No files matched your search
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
+2
-1
@@ -103,8 +103,9 @@
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -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 {
|
||||
|
||||
+6
-4
@@ -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;
|
||||
}
|
||||
}
|
||||
+4
-4
@@ -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;
|
||||
}
|
||||
|
||||
+3
-3
@@ -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 {
|
||||
|
||||
+4
-4
@@ -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;
|
||||
}
|
||||
}
|
||||
+5
-4
@@ -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) {
|
||||
|
||||
+1
-1
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+5
-3
@@ -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;
|
||||
}
|
||||
+5
-3
@@ -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;
|
||||
|
||||
+5
-4
@@ -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;
|
||||
}
|
||||
|
||||
+8
-8
@@ -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 {
|
||||
|
||||
+2
-1
@@ -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;
|
||||
}
|
||||
+2
-1
@@ -23,7 +23,8 @@
|
||||
.sources-title {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.sources-subtitle {
|
||||
|
||||
Reference in new issue
Block a user