80 lines
2.2 KiB
SCSS
80 lines
2.2 KiB
SCSS
// ─── Shared sidebar + sidebar-header styles ───────────────────────────────────
|
|
// Plain CSS rules (not a mixin) used for M3U/legacy sidebar layouts.
|
|
//
|
|
// Usage (after adding libs/ui/styles to stylePreprocessorOptions.includePaths):
|
|
// @use 'portal-sidebar'; (no alias needed — no exported members to call)
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|