mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 09:01:03 -08:00
4gray
2ac0de752f
* docs(skills): design implementation synchronization * docs(skills): plan implementation synchronization * fix(release): filter internal notes from public body * docs(release): synchronize release workflow guidance * fix(stalker): normalize catalog series flags * fix(stalker): preserve progress with scoped episode IDs * fix(playback): expose strict position persistence * docs(stalker): record series position compatibility * test(skills): validate repository skill contracts * fix(database): keep SQL trace values private * docs(skills): refresh Nx and SQLite ownership * docs(skills): align provider and UI guidance * docs(skills): tighten validated guidance * docs(release): require exact release pushes * style(electron): remove trailing blank line * fix(ci): classify repository skills coverage
82 lines
2.3 KiB
SCSS
82 lines
2.3 KiB
SCSS
// ─── Shared sidebar + sidebar-header styles ───────────────────────────────────
|
|
// Plain CSS rules (not a mixin) used for M3U/legacy sidebar layouts.
|
|
//
|
|
// Choose the relative @use path from each consuming stylesheet. Current portal
|
|
// live layouts use the example below; other consumers may need a different
|
|
// depth. No alias is needed because this partial exports no callable members.
|
|
// @use '../../../../../../ui/styles/portal-sidebar';
|
|
|
|
.sidebar {
|
|
// Width is controlled by the resizable directive
|
|
// Default fallback if directive not applied
|
|
width: 400px;
|
|
min-width: 250px;
|
|
max-width: 600px;
|
|
border-right: 1px solid var(--app-separator);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0; // Prevent sidebar from shrinking
|
|
|
|
.sidebar-header {
|
|
padding: 8px 12px;
|
|
background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
|
|
border-bottom: 1px solid var(--app-separator);
|
|
app-region: drag;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 0.94rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
color: var(--mat-sys-on-surface);
|
|
flex: 1;
|
|
}
|
|
|
|
button {
|
|
app-region: no-drag;
|
|
}
|
|
|
|
.switcher {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.manage-categories-btn {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.category-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.category-title {
|
|
margin: 0;
|
|
font-size: 0.94rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
color: var(--mat-sys-on-surface);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.category-count {
|
|
flex-shrink: 0;
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
color: var(--mat-sys-on-surface-variant);
|
|
background: var(--mat-sys-surface-container);
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
}
|
|
}
|
|
}
|