diff --git a/apps/web/src/m3-theme.scss b/apps/web/src/m3-theme.scss index f3ecf65d1..5afe17fb3 100644 --- a/apps/web/src/m3-theme.scss +++ b/apps/web/src/m3-theme.scss @@ -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; diff --git a/apps/web/src/nav-list.scss b/apps/web/src/nav-list.scss index 14caa972c..dfb6df175 100644 --- a/apps/web/src/nav-list.scss +++ b/apps/web/src/nav-list.scss @@ -47,7 +47,6 @@ text-overflow: ellipsis; flex: 1; min-width: 0; - padding-left: 10px; } .nav-item-meta { diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss index 8066edd49..3ef90bcd5 100644 --- a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss +++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss @@ -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; diff --git a/libs/portal/downloads/feature/src/lib/downloads.component.html b/libs/portal/downloads/feature/src/lib/downloads.component.html index 3f0062731..a6cecbeab 100644 --- a/libs/portal/downloads/feature/src/lib/downloads.component.html +++ b/libs/portal/downloads/feature/src/lib/downloads.component.html @@ -2,9 +2,6 @@
-
- downloading -

{{ 'DOWNLOADS.TITLE' | translate }}

@if (activeCount() > 0) { diff --git a/libs/portal/downloads/feature/src/lib/downloads.component.scss b/libs/portal/downloads/feature/src/lib/downloads.component.scss index bf994722b..6f8d1a40b 100644 --- a/libs/portal/downloads/feature/src/lib/downloads.component.scss +++ b/libs/portal/downloads/feature/src/lib/downloads.component.scss @@ -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); } diff --git a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss index c1a3d1f47..64dc76ee5 100644 --- a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss +++ b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss @@ -103,8 +103,9 @@ } p { - font-size: 1.1rem; + font-size: 0.85rem; margin: 0; + opacity: 0.65; } } diff --git a/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss index d85777730..2a57f575b 100644 --- a/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss +++ b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss @@ -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; diff --git a/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss index 45e6a4f29..9d6b7b8ef 100644 --- a/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss +++ b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss @@ -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 { diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss index f1ab9d91b..d5accac09 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss @@ -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; } } diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss index 9c27a6732..438a3a179 100644 --- a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss +++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss @@ -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; } diff --git a/libs/portal/stalker/feature/src/lib/styles/detail-view.scss b/libs/portal/stalker/feature/src/lib/styles/detail-view.scss index a3fda850e..23d60ef58 100644 --- a/libs/portal/stalker/feature/src/lib/styles/detail-view.scss +++ b/libs/portal/stalker/feature/src/lib/styles/detail-view.scss @@ -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); } diff --git a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss index 50a3f8c70..3cfbfb0b4 100644 --- a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss +++ b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss @@ -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; } diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss index ac07e7ddf..f617e264d 100644 --- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss +++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss @@ -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 { diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss index 17ca19c40..1842d04c2 100644 --- a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss +++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss @@ -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; } diff --git a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss index 05d9519f6..47dd77cde 100644 --- a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss +++ b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss @@ -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; } } diff --git a/libs/portal/xtream/feature/src/lib/recently-viewed/recently-viewed.component.scss b/libs/portal/xtream/feature/src/lib/recently-viewed/recently-viewed.component.scss index 7aa1b2cbb..198d892ba 100644 --- a/libs/portal/xtream/feature/src/lib/recently-viewed/recently-viewed.component.scss +++ b/libs/portal/xtream/feature/src/lib/recently-viewed/recently-viewed.component.scss @@ -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; } } diff --git a/libs/portal/xtream/feature/src/lib/search-results/search-results.component.scss b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.scss index d5c323bef..e9c3e0eab 100644 --- a/libs/portal/xtream/feature/src/lib/search-results/search-results.component.scss +++ b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.scss @@ -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; } } diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss index 22dfa5c6d..c0719b49a 100644 --- a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss +++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss @@ -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) { diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss index 82ba34e29..10d7db944 100644 --- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss +++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss @@ -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; } diff --git a/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss index 3e8caad02..70364be49 100644 --- a/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss +++ b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss @@ -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; } diff --git a/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.scss b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.scss index a9839386a..a0fe319e8 100644 --- a/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.scss +++ b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.scss @@ -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; } diff --git a/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss b/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss index 12a401b86..53fdbbf1b 100644 --- a/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss +++ b/libs/workspace/dashboard/feature/src/lib/workspace-dashboard.component.scss @@ -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; diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss index ed09e3152..2d73c75a0 100644 --- a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss +++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss @@ -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; } diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss index 38bc7e72f..eb6610c47 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss @@ -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 { diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss index 652e72b7e..bdea40228 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss @@ -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; } diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss index f07af68d0..0810420aa 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss @@ -23,7 +23,8 @@ .sources-title { margin: 0; font-size: 1.2rem; - font-weight: 600; + font-weight: 650; + letter-spacing: -0.02em; } .sources-subtitle {