x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-12 20:16:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

style: add shared count-badge style and update component usage

Browse Source 
Entire-Checkpoint: c2cea9c530e6
This commit is contained in:
4gray committed 2026-04-30 20:32:55 +02:00
1 parent e9a36b55ff
commit b5a85fdf5f
9 files changed
+46 -59
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/styles.scss
+22
View File
@@ -70,6 +70,28 @@
}
}
// Shared count-badge pill. Section headers (dashboard rails, content rails)
// and dense list rows (category sidebars) share a single visual treatment so
// "count" reads consistently across the app. Theme-aware via --app-muted-color.
.app-count-badge {
display: inline-flex;
align-items: center;
flex-shrink: 0;
font-size: 0.78rem;
font-weight: 500;
line-height: 1;
color: var(--app-muted-color, #8891a4);
font-variant-numeric: tabular-nums;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(
in srgb,
var(--app-muted-color, #8891a4) 18%,
transparent
);
letter-spacing: 0;
}
app-root.macos-platform .current-playlist {
padding-top: 30px;
}
libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html
+2 -2
View File
@@ -17,11 +17,11 @@
}}
</span>
@if (showCounts()) {
<div class="nav-item-meta item-count">
<div class="item-count app-count-badge">
{{ getItemCount(item) }}
</div>
} @else if ($any(item).count !== undefined) {
<div class="nav-item-meta item-count">
<div class="item-count app-count-badge">
{{ $any(item).count }}
</div>
}
libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss
+9 -9
View File
@@ -13,17 +13,17 @@
.category-item {
cursor: pointer;
width: auto;
.item-count {
opacity: 0.6;
font-size: 0.85em;
margin-left: 4px;
}
}
.category-item--selected .item-count {
color: var(--app-selection-color) !important;
opacity: 0.95;
// Selected row: tint the badge surface with the selection accent. Text colour
// is already swapped to --app-selection-color by the parent `.nav-item.selected
// *` rule in nav-list.scss, so we only need to override the background here.
.category-item--selected .item-count.app-count-badge {
background: color-mix(
in srgb,
var(--app-selection-color) 18%,
transparent
);
}
mat-card-content {
libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html
+1 -1
View File
@@ -3,7 +3,7 @@
<h3 class="rail__title">
<span class="rail__label">{{ label() }}</span>
@if ((totalCount() ?? 0) > 0) {
<span class="rail__count" aria-hidden="true">{{
<span class="rail__count app-count-badge" aria-hidden="true">{{
totalCount()
}}</span>
}
libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
-16
View File
@@ -57,22 +57,6 @@
color: var(--app-heading-color, #1a1d23);
}
.rail__count {
font-size: 0.78rem;
font-weight: 500;
line-height: 1;
color: var(--app-muted-color, #8891a4);
font-variant-numeric: tabular-nums;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(
in srgb,
var(--app-muted-color, #8891a4) 18%,
transparent
);
letter-spacing: 0;
}
.rail__see-all {
display: inline-flex;
align-items: center;
libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html
+1 -1
View File
@@ -3,7 +3,7 @@
<h2 class="rail__title">
<span class="rail__label">{{ label() }}</span>
@if ((totalCount() ?? items().length) > 0) {
<span class="rail__count" aria-hidden="true">{{
<span class="rail__count app-count-badge" aria-hidden="true">{{
totalCount() ?? items().length
}}</span>
}
libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
-18
View File
@@ -33,24 +33,6 @@
color: var(--app-heading-color, #1a1d23);
}
// Muted count badge, tabular numerals for alignment, sits just after label.
.rail__count {
font-size: 0.78rem;
font-weight: 500;
line-height: 1;
color: var(--app-muted-color, #8891a4);
font-variant-numeric: tabular-nums;
// Tiny capsule to read as a "count chip", not a number-in-text
padding: 2px 8px;
border-radius: 999px;
background: color-mix(
in srgb,
var(--app-muted-color, #8891a4) 18%,
transparent
);
letter-spacing: 0;
}
.rail__see-all {
display: inline-flex;
align-items: center;
libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html
+3 -3
View File
@@ -30,16 +30,16 @@
@if (showCounts()) {
@if (countDisplayMode() === 'loading') {
<div
class="nav-item-meta item-count item-count--loading"
class="item-count item-count--loading"
aria-hidden="true"
></div>
} @else {
<div class="nav-item-meta item-count">
<div class="item-count app-count-badge">
{{ getItemCount(item) }}
</div>
}
} @else if ($any(item).count !== undefined) {
<div class="nav-item-meta item-count">
<div class="item-count app-count-badge">
{{ $any(item).count }}
</div>
}
libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
+8 -9
View File
@@ -35,12 +35,6 @@
font: inherit;
cursor: pointer;
width: auto;
.item-count {
opacity: 0.6;
font-size: 0.85em;
margin-left: 4px;
}
}
.category-item--disabled,
@@ -82,9 +76,14 @@
}
}
.category-item--selected .item-count {
color: var(--app-selection-color) !important;
opacity: 0.95;
// Selected row: tint badge surface with selection accent. Text colour comes
// from the parent `.nav-item.selected *` rule in nav-list.scss.
.category-item--selected .item-count.app-count-badge {
background: color-mix(
in srgb,
var(--app-selection-color) 18%,
transparent
);
}
mat-card-content {