/* ===========================================================
SBN Teaching Hub — Design System
──────────────────────────────────────────────────────────
LOAD ORDER: This file must be loaded BEFORE admin2.css and
all module CSS files. It defines every color token, font
variable, and canonical component class used across the app.
Module CSS files (admin2.css, chords.css, leadsheets.css,
etc.) reference only. They NEVER re-define colors, fonts,
or base component shapes that are defined here.
admin.blade.php load order:
1. sbn-design-system.css ← this file
2. chord-symbols.css ← typography only, depends on --font-chord
3. admin2.css ← layout shell, references vars defined here
4. [module].css ← per-page, references vars defined here
When building the public frontend layout, load this file
first there too. All --clr-* and --font-* variables will
then be available to every frontend component.
=========================================================== */
/* ──────────────────────────────────────────────────────────
1. DESIGN TOKENS (single source of truth for all values)
────────────────────────────────────────────────────────── */
:root {
/* ── Brand palette ─────────────────────────────────── */
--clr-bg: #f8f9fb;
--clr-white: #ffffff;
--clr-surface: #ffffff;
--clr-surface-2: #f7fafc;
--clr-surface-3: #eef1f5;
--clr-raised: #f0f2f5;
/* ── Text ──────────────────────────────────────────── */
--clr-text: #2c3e50;
--clr-text-dim: #5a5a5a;
--clr-text-muted: #8896a4;
/* ── Accent (orange — primary brand color) ──────────── */
--clr-accent: #f39c12;
--clr-accent-dim: #e67e22;
--clr-accent-bg: #eef1f5;
--clr-accent-border: #e2e8f0;
/* ── Gradient (orange→red — primary buttons, avatar, highlights) */
--clr-gradient: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
--clr-gradient-hover: linear-gradient(135deg, #e67e22 0%, #c0392b 100%);
--clr-red: #e74c3c;
/* ── Soft gradient (orange→peach — secondary buttons, bossa badges) */
--clr-gradient-soft: linear-gradient(135deg, #f39c12 0%, color-mix(in srgb, #f39c12 60%, white) 100%);
--clr-gradient-soft-hover: linear-gradient(135deg, #e67e22 0%, color-mix(in srgb, #e67e22 60%, white) 100%);
/* ── Semantic ──────────────────────────────────────── */
--clr-success: #10b981;
--clr-warning: #f39c12;
/* same as accent intentionally */
--clr-error: #ef4444;
--clr-danger: var(--clr-error);
--clr-primary: #3b82f6; /* blue — same as mod-leadsheet */
--clr-star: #ffc107;
/* ── Surface variants ──────────────────────────────── */
--clr-bg-inset: #f0f2f5; /* slightly darker inset background (editors, textareas) */
/* ── Borders & Shadows ─────────────────────────────── */
--clr-border: #e2e8f0;
--clr-border-dim: #eef1f5;
--clr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--clr-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
--clr-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.1);
--clr-overlay-dark: rgba(45, 55, 72, 0.75);
/* ── Module accent colors (sidebar icons, stat cards) ─ */
--clr-mod-leadsheet: #3b82f6;
--clr-mod-chord: #f39c12;
--clr-mod-progression: #8b5cf6;
--clr-mod-rhythm: #10b981;
--clr-mod-voicing: #ec4899;
/* ── Music style colors — 4 canonical categories ────────
Used for category badges, pill filters, progression
dots, chord-diagram tints, and shop card accents. */
--clr-style-bossa: #f39c12; /* orange — bossa nova */
--clr-style-jazz: #3b82f6; /* blue — jazz */
--clr-style-classical: #10b981; /* green — classical */
--clr-style-pop: #ec4899; /* pink — pop */
/* Fallback when slug is unknown */
--clr-style-default: var(--clr-style-bossa);
/* ── Chord-tone role colors ──────────────────────────
Per-voice hues for chord-construction edu widgets
(triad-builder, drop2-visualizer). One fixed color
per scale degree so the visual language is shared
across every widget that stacks chord tones. */
--clr-role-root: #f39c12; /* accent orange — the root */
--clr-role-third: #3b82f6; /* blue — the third */
--clr-role-fifth: #10b981; /* green — the fifth */
--clr-role-seventh: #8b5cf6; /* purple — the seventh */
/* ── Role-color shorthands (used by home page + SyncedHero) ── */
--clr-root: var(--clr-role-root);
--clr-third: var(--clr-role-third);
--clr-fifth: var(--clr-role-fifth);
--clr-seventh: var(--clr-role-seventh);
/* ── Surface elevation tokens (home page cards, elevated panels) ── */
--clr-bg-elev: var(--clr-white); /* elevated surface (cards, panels) */
--clr-bg-card: var(--clr-surface-2); /* subtle card tint */
--clr-line: var(--clr-border); /* dividers, card borders */
/* ── Display typography (Fraunces — home page headings) ──────── */
--font-display: 'Fraunces', Georgia, serif;
/* ── Layout dimensions ─────────────────────────────── */
--sidebar-w: 260px;
--sidebar-w-sm: 68px;
--topbar-h: 60px;
--content-max-w: 1400px;
--context-w: 360px;
/* ── Border radius ─────────────────────────────────── */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
/* ── Typography ────────────────────────────────────── */
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-chord: 'Crimson Text', Georgia, serif;
/* Google Fonts URL (for reference — loaded in layout head):
DM Sans:400,500,600,700
JetBrains Mono:400,500
Crimson Text:400,600,700 */
/* ── Easing ────────────────────────────────────────── */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ──────────────────────────────────────────────────────────
2. CHORD DIAGRAM CARD (.sbn-diagram-card / .sbn-vp-card)
──────────────────────────────────────────────────────────
Single canonical card shell used in every chord diagram
context: chord library, voicing picker, progression builder,
chord grid, and all Phase 8 public pages.
SIZE IS ALWAYS CONTROLLED BY THE PARENT GRID — the card
has no intrinsic width. Use CSS grid column definitions
(minmax, repeat, fr) to size cards in each context.
The SVG diagram inside uses width="100%" height="auto" so
it scales with the card. No pixel sizes on cards or SVGs.
.sbn-vp-card is an alias that adds interactive affordances
(cursor, position:relative for the checkmark ::after).
────────────────────────────────────────────────────────── */
.sbn-diagram-card,
.sbn-vp-card {
background: var(--clr-white);
border: 0px solid var(--clr-border);
border-radius: var(--radius-sm);
padding: 10px 12px;
text-align: center;
transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
display: flex;
flex-direction: column;
align-items: center;
}
/* Interactive variant — all clickable card contexts */
.sbn-vp-card {
cursor: pointer;
position: relative;
}
.sbn-diagram-card:hover,
.sbn-vp-card:hover {
border-color: var(--clr-accent-border);
}
.sbn-diagram-card.is-selected,
.sbn-vp-card.is-selected {
border-color: var(--clr-accent);
box-shadow: 0 0 0 2px var(--clr-accent-bg);
}
/* Picker cards: no accent frame, light shadow + background on hover */
.sbn-vp-card:hover {
border-color: transparent;
box-shadow: 2px 2px 0 rgba(54, 131, 255, 0.2);
background: rgba(183, 211, 255, 0.06);
}
.sbn-vp-card.is-selected {
border-color: transparent;
box-shadow: none;
}
.sbn-vp-card.is-selected,
.sbn-vp-card--current,
.sbn-ve-voicing-card.sbn-vp-card--current {
background: #f8faff;
}
.sbn-vp-card.is-selected {
border-color: transparent !important;
outline: none;
box-shadow: 3px 3px 0 rgba(59, 130, 246, 0.45);
}
/* Current voicing — exact library match (blue shadow, right/bottom only) */
.sbn-vp-card--current,
.sbn-ve-voicing-card.sbn-vp-card--current {
border-color: transparent !important;
outline: none;
box-shadow: 3px 3px 0 rgba(59, 130, 246, 0.45);
position: relative;
}
/* "From tab" card — no library match, non-clickable (Phase 7-int Step 5) */
.sbn-vp-card--from-tab,
.sbn-ve-voicing-card.sbn-vp-card--from-tab {
border-color: transparent;
box-shadow: none;
background: #f8faff;
cursor: default;
opacity: 0.85;
margin-bottom: 4px;
}
.sbn-vp-card--from-tab:hover,
.sbn-ve-voicing-card.sbn-vp-card--from-tab:hover {
border-color: transparent;
box-shadow: none;
transform: none;
}
/* ──────────────────────────────────────────────────────────
2b. HTML FRETBOARD (.sbn-fretboard-*)
──────────────────────────────────────────────────────────
DOM-based fretboard used in the chord library and any
context needing info-in-dots mode (fingering/notes/functions).
Rendered by SbnChordCard.renderFretboard() + hydrateFretboard().
Class names unified from legacy sbn-fb-* (Laravel) and
sbn-fretboard-mini (WP). All new code uses sbn-fretboard-*.
────────────────────────────────────────────────────────── */
.sbn-fretboard {
position: relative;
width: 100%;
padding-left: 16px;
/* room for fret number label */
}
.sbn-fret-number {
position: absolute;
left: 0;
top: 16px;
font-size: 9px;
color: var(--clr-text-muted);
font-weight: 700;
font-family: var(--font-mono);
}
.sbn-string-indicators {
display: flex;
justify-content: space-around;
margin-bottom: 2px;
height: 13px;
}
.sbn-string-indicator {
width: 16px;
height: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 400;
color: transparent;
}
.sbn-string-indicator.muted {
color: var(--clr-text-muted);
}
.sbn-string-indicator.open {
color: var(--clr-text-dim);
}
.sbn-nut {
height: 3px;
background: var(--clr-text);
border-radius: 1px;
}
.sbn-frets {
display: flex;
flex-direction: column;
}
.sbn-fret-row {
display: flex;
height: 20px;
border-bottom: 1px solid var(--clr-border);
position: relative;
}
.sbn-string-space {
flex: 1;
position: relative;
}
/* Vertical string line */
.sbn-string-space::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--clr-text-muted);
transform: translateX(-50%);
opacity: 0.5;
}
/* Finger dot */
.sbn-finger-position {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--clr-red);
color: #fff;
font-size: 8px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
transition: background 0.15s, transform 0.15s;
}
/* Barre */
.sbn-barre {
position: absolute;
height: 10px;
background: var(--clr-red);
border-radius: 5px;
transform: translateY(-50%);
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 8px;
font-weight: 700;
transition: background 0.15s;
}
/* Interval labels row below fretboard */
.sbn-fret-intervals {
display: flex;
justify-content: space-around;
margin-top: 4px;
}
.sbn-fret-interval {
font-size: 8px;
color: var(--clr-text-muted);
font-weight: 600;
width: 18px;
text-align: center;
font-family: var(--font-mono);
}
/* ──────────────────────────────────────────────────────────
2c. CHORD CARD SHELL (.sbn-chord-card)
──────────────────────────────────────────────────────────
Card shell only — position, background, border, shadow,
hover lift, and size variants. All card internals (name,
diagram, footer, play button, badges, animations) live in
chord-library.css which loads after this file.
────────────────────────────────────────────────────────── */
.sbn-chord-card {
position: relative;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: 16px;
transition: border-color 0.15s var(--ease);
cursor: pointer;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
}
.sbn-chord-card:hover {
border-color: var(--clr-text-muted);
}
.sbn-chord-card:focus-visible {
outline: 2px solid var(--clr-accent);
outline-offset: 2px;
}
/* Clickable variant */
.sbn-chord-card--clickable {
cursor: pointer;
}
/* Detail variant */
.sbn-chord-card--detail {
padding: 20px;
cursor: default;
--card-play-size: 30px;
}
.sbn-chord-card--detail:hover {
border-color: var(--clr-border);
}
/* Mini variant */
.sbn-chord-card--mini {
padding: 8px 10px;
border-radius: var(--radius-sm);
--card-play-size: 18px;
}
/* ──────────────────────────────────────────────────────────
2d. RHYTHM CARD (.sbn-rhythm-card)
──────────────────────────────────────────────────────────
Library grid card. Vintage override at end of file. */
.sbn-rhythm-card {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: 16px;
transition: border-color 0.15s var(--ease);
}
.sbn-rhythm-card:hover {
border-color: var(--clr-text-muted);
}
/* ──────────────────────────────────────────────────────────
2e. RHYTHM PATTERN ROW (.sbn-pattern-row)
──────────────────────────────────────────────────────────
Frame + hover styles. Layout (margin, max-width) stays
in course-player.css. Vintage override at end of file. */
.sbn-pattern-row {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
transition: border-color 0.15s var(--ease);
}
.sbn-pattern-row:hover {
border-color: var(--clr-text-muted);
}
.sbn-pattern-row--bossa-nova { --row-color: var(--clr-style-bossa); }
.sbn-pattern-row--bossa { --row-color: var(--clr-style-bossa); }
.sbn-pattern-row--jazz { --row-color: var(--clr-style-jazz); }
.sbn-pattern-row--classical { --row-color: var(--clr-style-classical); }
.sbn-pattern-row--pop { --row-color: var(--clr-style-pop); }
/* ── Song Link (app-wide) ────────────────────────────
Canonical row for linking to a song from any library
page. Cover thumbnail + title + style category badge.
Rendered by Components/Library/SongLink.vue. */
.sbn-song-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
text-decoration: none;
color: var(--clr-text);
transition: background-color 0.12s ease;
}
.sbn-song-link:hover {
background: var(--clr-surface-2);
}
.sbn-song-link__thumb {
flex: 0 0 auto;
line-height: 0;
}
.sbn-song-link__img {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
display: block;
}
.sbn-song-link__img--fallback {
background: linear-gradient(
135deg,
var(--cat-clr, var(--clr-style-default)),
color-mix(in srgb, var(--cat-clr, var(--clr-style-default)) 35%, var(--clr-surface-2))
);
}
.sbn-song-link__title {
flex: 1 1 auto;
min-width: 0;
font-weight: 500;
font-size: 0.92em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sbn-song-link:hover .sbn-song-link__title {
color: var(--clr-red);
}
.sbn-song-link .sbn-cat-badge {
flex: 0 0 auto;
}
/* ── Progression link row ─────────────────────────────────
Rendered by Components/Library/ProgressionLink.vue.
Uses --prog-clr (set inline) for the left accent stripe. */
.sbn-prog-link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 14px;
border-radius: var(--radius);
border: 1px solid var(--clr-border);
border-left: 3px solid var(--prog-clr, var(--clr-accent));
text-decoration: none;
background: var(--clr-white);
transition: background 0.15s ease;
}
.sbn-prog-link:hover {
background: var(--clr-surface-2);
}
.sbn-prog-link__name {
font-weight: 600;
font-size: 0.92em;
color: var(--clr-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Chip row already has margin-bottom: 6px from sbn-numeral-chip-row;
suppress it inside a prog-link so the badge sits flush below */
.sbn-prog-link .sbn-numeral-chip-row {
margin-bottom: 0;
}
.sbn-prog-link .sbn-cat-badge {
align-self: flex-start;
margin-top: 2px;
}
/* ──────────────────────────────────────────────────────────
3. BUTTONS
──────────────────────────────────────────────────────────
All buttons use .sbn-btn as the base.
Modifier classes add color/size variants.
Never create a button with hardcoded colors — use these.
────────────────────────────────────────────────────────── */
.sbn-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s var(--ease);
text-decoration: none;
line-height: 1.4;
white-space: nowrap;
}
/* Primary — orange/red gradient. The main CTA button. */
.sbn-btn-primary {
background: var(--clr-gradient);
color: #fff;
border: none;
}
.sbn-btn-primary:hover {
background: var(--clr-gradient-hover);
color: #fff;
transform: translateY(-1px);
}
/* Secondary — white bg, border. Neutral action. */
.sbn-btn-secondary {
background: var(--clr-white);
color: var(--clr-text);
border: 1px solid var(--clr-border);
}
.sbn-btn-secondary:hover {
background: var(--clr-surface-3);
border-color: var(--clr-text-muted);
color: var(--clr-text);
}
/* Ghost — no background, no border. Used inline or in tight spaces. */
.sbn-btn-ghost {
background: transparent;
color: var(--clr-text-dim);
border: 1px solid transparent;
}
.sbn-btn-ghost:hover {
background: var(--clr-surface-3);
color: var(--clr-text);
border-color: var(--clr-border);
}
/* Outlined — white bg, border. Neutral action (formerly secondary). */
.sbn-btn-outlined {
background: var(--clr-white);
color: var(--clr-text);
border: 1px solid var(--clr-border);
}
.sbn-btn-outlined:hover {
background: var(--clr-surface-3);
border-color: var(--clr-text-muted);
color: var(--clr-text);
}
/* Accent ghost — transparent bg, accent color text. Subtle but branded. */
.sbn-btn-accent {
background: var(--clr-accent-bg);
color: var(--clr-accent-dim);
border: 1px solid var(--clr-accent-border);
}
.sbn-btn-accent:hover {
background: var(--clr-gradient-soft);
color: var(--clr-text);
border-color: transparent;
}
/* Danger — red. Destructive actions only. */
.sbn-btn-danger {
background: rgba(239, 68, 68, 0.06);
color: var(--clr-error);
border: 1px solid rgba(239, 68, 68, 0.15);
}
.sbn-btn-danger:hover {
background: rgba(239, 68, 68, 0.12);
color: var(--clr-error);
}
/* ── Size modifiers ──────────────────────────────────────── */
.sbn-btn-lg {
padding: 12px 28px;
font-size: 14px;
}
.sbn-btn-sm {
padding: 5px 12px;
font-size: 12px;
}
.sbn-btn-xs {
padding: 3px 8px;
font-size: 11px;
}
/* Icon-only square button (no text) */
.sbn-btn-icon {
padding: 7px;
width: 34px;
height: 34px;
justify-content: center;
}
.sbn-btn-icon.sbn-btn-sm {
width: 28px;
height: 28px;
padding: 5px;
}
.sbn-btn-icon.sbn-btn-xs {
width: 24px;
height: 24px;
padding: 4px;
}
/* ── Pill toggle (segmented control within a group) ──────── */
/* Used for: style selector (Shell/Drop2/Drop3/Any),
extension toggles, inversion toggles.
Wrap pills in .sbn-pill-group. */
.sbn-pill-group {
display: inline-flex;
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--clr-white);
}
.sbn-pill {
display: inline-flex;
align-items: center;
padding: 6px 14px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--clr-text-muted);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s var(--ease);
border-right: 1px solid var(--clr-border);
white-space: nowrap;
}
.sbn-pill:last-child {
border-right: none;
}
.sbn-pill:hover {
color: var(--clr-text);
background: var(--clr-surface-3);
}
.sbn-pill.is-active {
background: var(--clr-gradient);
color: #fff;
border-color: transparent;
}
/* Accent-only pill active (less prominent than gradient) */
.sbn-pill.is-active-soft {
background: var(--clr-accent-bg);
color: var(--clr-accent);
border-color: var(--clr-accent-border);
}
/* ──────────────────────────────────────────────────────────
3b. PLAY BUTTON (.sbn-play-btn)
──────────────────────────────────────────────────────────
Circular transport button used in rhythm and progression players.
Set --play-color on the parent wrapper to tint for a category.
Falls back to the orange-red gradient when no color is set.
────────────────────────────────────────────────────────── */
.sbn-play-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid var(--play-color, var(--clr-accent));
background: var(--clr-white);
color: var(--play-color, var(--clr-accent));
cursor: pointer;
display: grid;
place-items: center;
flex-shrink: 0;
padding: 0;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
color 0.15s var(--ease), box-shadow 0.15s var(--ease),
transform 0.15s var(--ease);
}
.sbn-play-btn:hover {
border-color: var(--play-color, var(--clr-accent));
background: color-mix(in srgb, var(--play-color, var(--clr-accent)) 10%, transparent);
transform: scale(1.08);
}
.sbn-play-btn.is-playing {
background: var(--play-bg-playing, var(--play-color, var(--clr-accent)));
border-color: var(--play-color, var(--clr-accent));
color: var(--clr-white);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--play-color, var(--clr-accent)) 20%, transparent);
}
.sbn-play-btn:focus-visible {
outline: 2px solid var(--play-color, var(--clr-accent));
outline-offset: 2px;
}
/* ──────────────────────────────────────────────────────────
4. BADGES
──────────────────────────────────────────────────────────
Small labels for status, category, count, key, etc.
────────────────────────────────────────────────────────── */
.sbn-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
white-space: nowrap;
}
/* Neutral grey */
.sbn-badge-muted {
background: var(--clr-surface-3);
color: var(--clr-text-muted);
}
/* Plain hashtag — #ballad #modal — no pill, just monospace text */
.sbn-hashtag {
font-size: 12px;
color: var(--clr-text-muted);
font-family: var(--font-mono, monospace);
font-weight: 400;
letter-spacing: -0.01em;
transition: color 0.15s;
}
.sbn-hashtag:hover {
color: var(--clr-text);
}
/* Accent (orange) — general highlight */
.sbn-badge-accent {
background: var(--clr-accent-bg);
color: var(--clr-accent-dim);
border: 1px solid var(--clr-accent-border);
}
/* Success green */
.sbn-badge-success {
background: rgba(16, 185, 129, 0.08);
color: var(--clr-success);
border: 1px solid rgba(16, 185, 129, 0.2);
}
/* Warning */
.sbn-badge-warning {
background: rgba(243, 156, 18, 0.1);
color: var(--clr-warning);
border: 1px solid rgba(243, 156, 18, 0.25);
}
/* Error/danger */
.sbn-badge-error {
background: rgba(239, 68, 68, 0.08);
color: var(--clr-error);
border: 1px solid rgba(239, 68, 68, 0.15);
}
/* ── Music style badges — 4 canonical categories ──────────
Tinted pill using the style color token.
Use: Bossa Nova */
.sbn-badge-style-bossa-nova,
.sbn-badge-style-bossa {
background: var(--clr-gradient-soft);
color: var(--clr-text);
border: none;
}
.sbn-badge-style-jazz {
background: color-mix(in srgb, var(--clr-style-jazz) 12%, transparent);
color: color-mix(in srgb, var(--clr-style-jazz) 80%, #000);
border: 1px solid color-mix(in srgb, var(--clr-style-jazz) 28%, transparent);
}
.sbn-badge-style-classical {
background: color-mix(in srgb, var(--clr-style-classical) 12%, transparent);
color: color-mix(in srgb, var(--clr-style-classical) 80%, #000);
border: 1px solid color-mix(in srgb, var(--clr-style-classical) 28%, transparent);
}
.sbn-badge-style-pop {
background: color-mix(in srgb, var(--clr-style-pop) 12%, transparent);
color: color-mix(in srgb, var(--clr-style-pop) 80%, #000);
border: 1px solid color-mix(in srgb, var(--clr-style-pop) 28%, transparent);
}
/* Filled variant — solid bg + white text, for header/hero contexts.
Use: */
.sbn-badge-style-filled {
background: var(--_style-clr, var(--clr-style-default));
color: #fff;
border-color: transparent;
}
.sbn-badge-style-bossa-nova.sbn-badge-style-filled,
.sbn-badge-style-bossa.sbn-badge-style-filled { background: var(--clr-gradient-soft); color: var(--clr-text); border-color: transparent; }
.sbn-badge-style-jazz.sbn-badge-style-filled { --_style-clr: var(--clr-style-jazz); }
.sbn-badge-style-classical.sbn-badge-style-filled{ --_style-clr: var(--clr-style-classical); }
.sbn-badge-style-pop.sbn-badge-style-filled { --_style-clr: var(--clr-style-pop); }
/* ── Rhythm grid-type badges ──────────────────────────────
Use: eighth
sixteenth is the default grid — no badge needed. */
.sbn-badge-grid-eighth {
background: color-mix(in srgb, var(--clr-style-jazz) 10%, transparent);
color: color-mix(in srgb, var(--clr-style-jazz) 80%, #000);
border: 1px solid color-mix(in srgb, var(--clr-style-jazz) 22%, transparent);
}
.sbn-badge-grid-triplet {
background: color-mix(in srgb, var(--clr-style-classical) 10%, transparent);
color: color-mix(in srgb, var(--clr-style-classical) 80%, #000);
border: 1px solid color-mix(in srgb, var(--clr-style-classical) 22%, transparent);
}
/* ── Category gradient utility ───────────────────────────────
Any element that needs the category-tinted gradient can add
.sbn-has-category-gradient. Set --category-color via inline
style (getCategoryStyle composable) or a parent class.
The --category-gradient custom property is then available to
children via background: var(--category-gradient). */
.sbn-has-category-gradient {
--category-color: var(--clr-style-default);
--category-gradient: linear-gradient(
135deg,
var(--category-color) 0%,
color-mix(in srgb, var(--category-color) 60%, white) 100%
);
}
/* Dynamic category badge — set --cat-clr on the element.
Used for progression/rhythm categories where color is data-driven.
Tinted: Bossa Nova
Filled gradient: add .sbn-cat-badge-filled — uses gradient from --cat-clr */
.sbn-cat-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: capitalize;
white-space: nowrap;
background: color-mix(in srgb, var(--cat-clr, var(--clr-text-muted)) 10%, transparent);
color: var(--cat-clr, var(--clr-text-muted));
border: 1px solid color-mix(in srgb, var(--cat-clr, var(--clr-text-muted)) 20%, transparent);
}
.sbn-cat-badge.sbn-cat-badge-filled {
background: linear-gradient(135deg, var(--cat-clr, #6b7280) 0%, color-mix(in srgb, var(--cat-clr, #6b7280) 60%, white) 100%);
color: #fff;
border-color: transparent;
}
/* Style slug modifiers — 4 canonical categories */
.sbn-cat-badge--bossa-nova,
.sbn-cat-badge--bossa { --cat-clr: var(--clr-style-bossa); }
.sbn-cat-badge--jazz { --cat-clr: var(--clr-style-jazz); }
.sbn-cat-badge--classical { --cat-clr: var(--clr-style-classical); }
.sbn-cat-badge--pop { --cat-clr: var(--clr-style-pop); }
/* ── Progression row category badge ─────────────────────────
Compact uppercase label inside progression list rows.
Uses .sbn-cat-badge sizing but slightly smaller font.
Set --cat-clr dynamically from useCategoryColors. */
.sbn-prog-row-cat-badge {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 100px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
background: color-mix(in srgb, var(--cat-clr, #6b7280) 12%, transparent);
color: var(--cat-clr, #6b7280);
border: 1px solid color-mix(in srgb, var(--cat-clr, #6b7280) 22%, transparent);
}
/* ── Progression tonality badge ──────────────────────────── */
.sbn-badge-tonality-major {
background: color-mix(in srgb, #d69e2e 12%, transparent);
color: color-mix(in srgb, #d69e2e 80%, #000);
border: 1px solid color-mix(in srgb, #d69e2e 25%, transparent);
}
/* ── Popularity badge ────────────────────────────────────────
Base: .sbn-card-pop Tiers: .sbn-pop-{occasional|common|essential|iconic}
Used on: ChordCard footer, chord detail page, progression rows, song detail */
.sbn-card-pop {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
}
.sbn-pop-occasional { background: var(--clr-surface-2); color: var(--clr-text-dim); }
.sbn-pop-common { background: color-mix(in srgb, var(--clr-style-jazz) 10%, transparent); color: color-mix(in srgb, var(--clr-style-jazz) 80%, #000); }
.sbn-pop-essential { background: var(--clr-gradient-soft); color: #fff; font-weight: 700; }
.sbn-pop-iconic { background: linear-gradient(135deg, #d69e2e 0%, color-mix(in srgb, #d69e2e 70%, #fff) 100%); color: #fff; font-weight: 800; }
/* ── Roman numeral chip ───────────────────────────────────────
Shared across: progression list rows, chord detail page,
song detail page, leadsheet EduPanel, ChordProgressionViewer.
Interactive (clickable) version: add .sbn-numeral-chip--btn */
.sbn-numeral-chip {
display: inline-block;
background: var(--clr-surface-2, #f3f4f6);
border: 1px solid var(--clr-border);
border-radius: 5px;
padding: 3px 9px;
font-size: 12px;
line-height: 1.5;
color: var(--clr-text-dim, #374151);
font-family: 'Georgia', 'Times New Roman', serif;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* Flex row wrapper for a sequence of numeral chips */
.sbn-numeral-chip-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
/* Button / interactive variant — used in ChordProgressionViewer header chips */
.sbn-numeral-chip--btn {
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sbn-numeral-chip--btn:hover {
background: color-mix(in srgb, var(--prog-color, var(--clr-accent)) 12%, var(--clr-surface-2));
border-color: color-mix(in srgb, var(--prog-color, var(--clr-accent)) 40%, transparent);
}
.sbn-numeral-chip--btn.active {
background: color-mix(in srgb, var(--prog-color, var(--clr-accent)) 18%, transparent);
border-color: color-mix(in srgb, var(--prog-color, var(--clr-accent)) 55%, transparent);
color: var(--clr-text);
font-weight: 700;
}
.sbn-badge-tonality-minor {
background: color-mix(in srgb, var(--clr-style-jazz) 12%, transparent);
color: color-mix(in srgb, var(--clr-style-jazz) 80%, #000);
border: 1px solid color-mix(in srgb, var(--clr-style-jazz) 25%, transparent);
}
/* Count badge (number in a circle/pill) */
.sbn-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
background: var(--clr-surface-3);
color: var(--clr-text-muted);
}
.sbn-count-badge-warn {
background: var(--clr-style-jazz, #3b82f6);
color: #fff;
}
/* ──────────────────────────────────────────────────────────
5. CARDS / SURFACE PANELS
──────────────────────────────────────────────────────────
Generic container surfaces. Don't use ad-hoc inline styles
for white-bg bordered panels — use these classes instead.
────────────────────────────────────────────────────────── */
/* Standard content card */
.sbn-card {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: 20px 24px;
transition: border-color 0.15s var(--ease);
}
.sbn-card:hover {
border-color: var(--clr-text);
}
/* Hitlist row rank column — shared by rhythm + progression library lists */
.sbn-hitlist-rank {
flex-shrink: 0;
align-self: stretch;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
font-weight: 900;
color: #94a3b8;
font-variant-numeric: tabular-nums;
letter-spacing: -0.04em;
text-indent: -0.04em;
background: #f9fafb;
border-right: 1px solid #f1f5f9;
border-radius: 9px 0 0 9px;
}
/* Larger card (form pages, detail views) */
.sbn-card-lg {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: 28px 32px;
}
/* Section within a card (separated area) */
.sbn-card-section {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: 16px 20px;
}
/* Dimmed surface — metadata, secondary info */
.sbn-surface-dim {
background: var(--clr-surface-2);
border-radius: var(--radius-sm);
padding: 10px 14px;
}
/* Info callout — accent left border, used for hints/notes */
.sbn-callout {
padding: 10px 14px;
background: var(--clr-surface-2);
border-left: 3px solid var(--clr-accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 13px;
color: var(--clr-text-dim);
line-height: 1.5;
}
/* Content panel — gray background box for grouped content */
.sbn-panel {
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: 20px;
}
/* Card link — clickable card with hover effect (for related products, etc.) */
.sbn-card-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
text-decoration: none;
transition: all 0.2s var(--ease);
}
.sbn-card-link:hover {
background: var(--clr-surface-3);
border-color: var(--clr-text);
}
/* ──────────────────────────────────────────────────────────
6. FORM ELEMENTS
──────────────────────────────────────────────────────────
Consistent inputs, selects, labels across all admin forms.
────────────────────────────────────────────────────────── */
.sbn-input,
.sbn-textarea {
width: 100%;
padding: 9px 14px;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
color: var(--clr-text);
font-family: var(--font-body);
font-size: 13px;
transition: border-color 0.15s;
outline: none;
}
.sbn-textarea {
resize: vertical;
min-height: 80px;
}
.sbn-input:focus,
.sbn-textarea:focus {
border-color: var(--clr-accent);
box-shadow: 0 0 0 3px var(--clr-accent-bg);
}
.sbn-input::placeholder,
.sbn-textarea::placeholder {
color: var(--clr-text-muted);
}
.sbn-select {
padding: 9px 32px 9px 12px;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
color: var(--clr-text);
font-family: var(--font-body);
font-size: 13px;
appearance: none;
cursor: pointer;
outline: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%238896a4'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.sbn-select:focus {
border-color: var(--clr-accent);
}
.sbn-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--clr-text-dim);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sbn-field-hint {
font-size: 12px;
color: var(--clr-text-muted);
margin-top: 4px;
line-height: 1.5;
}
.sbn-field-error {
display: block;
font-size: 12px;
color: var(--clr-error);
margin-top: 4px;
font-weight: 500;
}
/* ──────────────────────────────────────────────────────────
7. VOICING PICKER PANEL (.sbn-vp-*)
──────────────────────────────────────────────────────────
The shared voicing picker panel used in:
• Leadsheet editor right panel (edit.blade.php)
• Progression builder context panel (builder.blade.php)
• Any future page that needs voicing selection UI
Structure:
.sbn-vp-context — outer flex column, fills panel
.sbn-vp-picker-wrap — active picker (chord selected)
.sbn-vp-header — chord name + close
.sbn-vp-filters — pill filters + steppers
.sbn-vp-body — scrollable results
.sbn-vp-grid — card grid
.sbn-vp-card — individual voicing (design-system §2)
.sbn-vp-footer — count + remove button
.sbn-vp-overview — resting state (no chord selected)
────────────────────────────────────────────────────────── */
.sbn-vp-context {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: visible;
}
/* ── Active picker wrap ──────────────────────────────────── */
.sbn-vp-picker-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 14px 16px;
overflow: hidden;
}
/* Header: chord name + close button */
.sbn-vp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid var(--clr-border);
margin-bottom: 10px;
flex-shrink: 0;
}
.sbn-vp-subtitle {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-text-muted);
margin-bottom: 2px;
}
.sbn-vp-chord-name {
font-size: 20px;
font-weight: 800;
color: var(--clr-text);
font-family: var(--font-chord);
}
.sbn-vp-close {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--clr-border);
background: var(--clr-surface);
font-size: 16px;
color: var(--clr-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: color 0.15s, border-color 0.15s;
}
.sbn-vp-close:hover {
color: var(--clr-error);
border-color: var(--clr-error);
}
/* ── Filters ─────────────────────────────────────────────── */
.sbn-vp-filters {
margin-bottom: 10px;
flex-shrink: 0;
}
.sbn-vp-filter-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
.sbn-vp-pill {
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--clr-border);
background: var(--clr-surface-2);
color: var(--clr-text-dim);
transition: border-color 0.15s, background 0.15s, color 0.15s;
white-space: nowrap;
font-family: var(--font-body);
}
.sbn-vp-pill:hover {
border-color: var(--clr-accent);
color: var(--clr-accent);
}
.sbn-vp-pill.active {
background: var(--clr-accent-bg);
color: var(--clr-accent-dim);
border-color: var(--clr-accent-border);
}
/* Compact pill variant (modal picker, tighter spacing) */
.sbn-vp-filters-compact {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 12px;
}
.sbn-vp-filters-compact .sbn-vp-pill {
font-size: 10px;
padding: 2px 8px;
}
/* Stepper controls (Extension / Inversion) */
.sbn-vp-steppers {
gap: 8px;
}
.sbn-vp-stepper {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--clr-surface-2);
flex: 1;
transition: border-color 0.15s;
}
.sbn-vp-stepper.has-value {
border-color: var(--clr-accent-border);
}
.sbn-vp-stepper-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-text-muted);
padding: 4px 6px;
background: var(--clr-surface-3);
border-right: 1px solid var(--clr-border);
}
.sbn-vp-step-btn {
padding: 4px 7px;
background: none;
border: none;
cursor: pointer;
font-size: 12px;
color: var(--clr-text-dim);
font-weight: 600;
transition: color 0.15s;
}
.sbn-vp-step-btn:hover {
color: var(--clr-accent);
}
.sbn-vp-step-value {
flex: 1;
text-align: center;
font-size: 12px;
font-weight: 700;
color: var(--clr-text-dim);
padding: 4px 2px;
min-width: 28px;
cursor: pointer;
user-select: none;
transition: color 0.15s;
}
.sbn-vp-step-value.active {
color: var(--clr-accent-dim);
}
.sbn-vp-step-value:hover {
color: var(--clr-accent);
}
/* Reset filter link */
.sbn-vp-reset-row {
justify-content: flex-end;
}
.sbn-vp-reset {
font-size: 10px;
color: var(--clr-text-muted);
cursor: pointer;
background: none;
border: none;
text-decoration: underline;
text-underline-offset: 2px;
font-family: var(--font-body);
transition: color 0.15s;
}
.sbn-vp-reset:hover {
color: var(--clr-accent);
}
/* ── Results body ────────────────────────────────────────── */
.sbn-vp-body {
flex: 1;
min-height: 0;
overflow-y: auto;
position: relative;
}
.sbn-vp-loading-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 60px;
background: rgba(255, 255, 255, 0.8);
font-size: 13px;
color: var(--clr-text-muted);
pointer-events: none;
}
.sbn-vp-loading {
text-align: center;
padding: 24px;
color: var(--clr-text-muted);
font-size: 13px;
}
.sbn-vp-empty {
text-align: center;
padding: 24px;
color: var(--clr-text-muted);
font-size: 13px;
}
.sbn-vp-empty-hint {
font-size: 11px;
color: var(--clr-text-muted);
margin-top: 4px;
}
/* Card grid — fixed 3 columns to match leadsheet picker */
.sbn-vp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 4px;
transition: opacity 0.2s var(--ease);
}
/* Voicing category label — between chord name and diagram */
.sbn-vp-card-cat {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--clr-text-muted);
font-family: var(--font-body);
margin-bottom: 2px;
}
/* Card name inside picker — smaller than chord grid name */
.sbn-vp-card-name {
font-size: 13px;
font-family: var(--font-chord);
color: var(--clr-text-dim);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-bottom: 2px;
}
/* Fret string label inside card */
.sbn-vp-card-fret {
font-size: 10px;
font-weight: 500;
color: var(--clr-text-muted);
font-family: var(--font-mono);
line-height: 1;
align-self: flex-start;
margin-top: -2px;
}
/* Selected checkmark circle — hidden */
.sbn-vp-check {
display: none;
}
/* Card entry animation */
@keyframes sbnVpCardIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.sbn-vp-card {
animation: sbnVpCardIn 0.2s var(--ease) both;
}
/* ── Footer ──────────────────────────────────────────────── */
.sbn-vp-footer {
padding-top: 10px;
border-top: 1px solid var(--clr-border);
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.sbn-vp-count {
font-size: 11px;
color: var(--clr-text-muted);
}
/* ── Overview (resting state) ────────────────────────────── */
.sbn-vp-overview {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 14px 16px;
overflow: visible;
}
.sbn-vp-overview-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
flex-shrink: 0;
}
.sbn-vp-overview-count {
font-size: 11px;
color: var(--clr-text-muted);
}
.sbn-vp-overflow-menu {
position: relative;
}
.sbn-vp-overflow-trigger {
font-size: 16px;
line-height: 1;
padding: 1px 6px;
letter-spacing: 1px;
}
.sbn-vp-overflow-trigger.active {
background: var(--clr-accent);
color: #fff;
border-color: var(--clr-accent);
}
.sbn-vp-overflow-menu .sbn-vp-overflow-dropdown {
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 150px;
z-index: 200;
}
.sbn-context-menu-item--danger {
color: var(--clr-danger, #ef4444);
}
.sbn-context-menu-item--danger:hover {
background: var(--clr-danger-bg, #fee2e2);
}
.sbn-context-menu-divider {
height: 1px;
background: var(--clr-border);
margin: 4px 0;
}
.sbn-vp-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px;
overflow-y: auto;
flex: 1;
min-height: 0;
max-height: calc(100vh - var(--topbar-h, 60px) - 120px);
}
.sbn-vp-overview-card {
padding: 8px 6px;
background: var(--clr-white);
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.sbn-vp-overview-card:hover {
border-color: transparent;
}
.sbn-vp-overview-card.has-voicing {
border-color: transparent;
}
.sbn-vp-overview-empty {
width: 48px;
height: 48px;
border: 1px dashed var(--clr-border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-text-muted);
font-size: 18px;
opacity: 0.4;
}
/* Fill voicings panel */
.sbn-fill-panel {
background: var(--clr-surface-2, #f8f8f8);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin-bottom: 10px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.sbn-fill-row {
display: flex;
align-items: center;
gap: 8px;
}
.sbn-fill-label {
font-size: 11px;
color: var(--clr-text-muted);
white-space: nowrap;
min-width: 70px;
}
.sbn-fill-label-check {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 11px;
color: var(--clr-text-muted);
min-width: unset;
}
.sbn-fill-select {
flex: 1;
font-size: 11px;
padding: 3px 6px;
border: 1px solid var(--clr-border);
border-radius: var(--radius-xs, 4px);
background: var(--clr-white);
color: var(--clr-text);
}
.sbn-fill-actions {
display: flex;
gap: 6px;
margin-top: 2px;
}
.sbn-fill-message {
font-size: 11px;
padding: 4px 6px;
border-radius: var(--radius-xs, 4px);
margin-top: 2px;
}
.sbn-fill-message.ok {
background: rgba(34, 197, 94, 0.08);
color: var(--clr-success, #16a34a);
border: 1px solid rgba(34, 197, 94, 0.2);
}
.sbn-fill-message.error {
background: rgba(239, 68, 68, 0.06);
color: var(--clr-error);
border: 1px solid rgba(239, 68, 68, 0.15);
}
/* ──────────────────────────────────────────────────────────
8. CHORD GRID (.sbn-ve-*)
──────────────────────────────────────────────────────────
Read-only / display chord progression grid shared between:
• Leadsheet editor (edit.blade.php — also has edit variants)
• Progression builder output (builder.blade.php)
The builder uses these classes directly for its read-only
chord display. Edit-mode variants (.sbn-ve-measure-actions,
.sbn-ve-section-btn etc.) stay in edit.blade.php inline CSS
since they're editor-only.
────────────────────────────────────────────────────────── */
/* Measure cell */
.sbn-ve-measure {
flex: 1 1 0;
min-width: 0;
background: var(--clr-surface);
position: relative;
transition: background 0.1s;
}
/* ── Grid geometry (single source of truth) ─────────────────────────────────
The measure IS the grid cell. Its edges are the grid lines.
• Barlines = partial-height grid lines (always visible)
• Hover = full-height grid lines in accent color
• Selection = full-height grid lines in jazz blue
All three are the SAME edges — just different visibility/color.
──────────────────────────────────────────────────────────────────────── */
/* Barlines: partial-height grid edges */
.sbn-ve-measure::before,
.sbn-ve-measure::after {
content: '';
position: absolute;
top: 10%;
height: 70%;
width: 0.5px;
background: var(--clr-text-muted);
pointer-events: none;
z-index: 1;
}
.sbn-ve-measure::before {
left: 0;
}
.sbn-ve-measure::after {
right: 0;
}
/* First measure: thicker left barline */
.sbn-ve-row .sbn-ve-measure:first-of-type::before,
.sbn-pb-row .sbn-ve-measure:first-of-type::before {
height: 80%;
width: 2px;
}
/* Hover + Selection: full-height grid edges above beat dots (same geometry, different color) */
.sbn-ve-measure-content::after {
content: '';
position: absolute;
top: 0;
bottom: 18px;
/* exclude beat-dot strip */
left: 0;
right: 0;
pointer-events: none;
z-index: 2;
transition: box-shadow 0.12s;
}
.sbn-ve-measure:hover .sbn-ve-measure-content::after {
box-shadow: none;
}
/* Hover frame in the frontend leadsheet viewer — uses locally overridden --clr-accent (blue) */
.sbn-leadsheet-viewer .sbn-ve-measure:hover .sbn-ve-measure-content::after {
box-shadow: inset 0 0 0 1px var(--clr-accent);
}
/* ── Detected-progression highlight (leadsheet viewer only) ──────────────────
Rotating conic-gradient border on every bar in a detected progression.
Uses ::before on .sbn-ve-measure-content: 2px padding + background-clip trick
so only the border ring shows; no background fill on the measure itself.
--prog-angle is a registered custom property so transition/animation is smooth.
──────────────────────────────────────────────────────────────────────── */
@property --prog-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes prog-spin {
to { --prog-angle: 360deg; }
}
/* Border ring via ::before — static base + rotating sweep in one element */
.sbn-leadsheet-viewer .sbn-ve-measure.in-progression .sbn-ve-measure-content::before {
content: '';
position: absolute;
inset: 0 0 18px 0;
border-radius: 3px;
padding: 1.5px;
background:
conic-gradient(
from var(--prog-angle),
rgba(59, 130, 246, 0.18) 0%,
rgba(59, 130, 246, 0.18) 55%,
rgba(59, 130, 246, 0.6) 70%,
rgba(147, 197, 253, 0.85) 78%,
rgba(59, 130, 246, 0.6) 86%,
rgba(59, 130, 246, 0.18) 100%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 1;
animation: prog-spin 4s linear infinite;
}
/* Active: brighter sweep, slightly faster */
.sbn-leadsheet-viewer .sbn-ve-measure.in-progression--active .sbn-ve-measure-content::before {
background:
conic-gradient(
from var(--prog-angle),
rgba(59, 130, 246, 0.35) 0%,
rgba(59, 130, 246, 0.35) 48%,
rgba(59, 130, 246, 0.75) 65%,
rgba(147, 197, 253, 1.0) 76%,
rgba(59, 130, 246, 0.75) 85%,
rgba(59, 130, 246, 0.35) 100%
);
animation-duration: 2.5s;
}
.sbn-leadsheet-viewer .sbn-ve-measure.in-progression--active {
z-index: 2;
}
.sbn-leadsheet-viewer .sbn-ve-measure.in-progression--active .sbn-ve-measure-content::after {
background: rgba(59, 130, 246, 0.06);
border-radius: 3px;
}
/* Playback: measure z-index only (chord card gets the visual effect) */
.sbn-ve-measure.is-active {
z-index: 2;
position: relative;
}
/* Content area inside measure */
.sbn-ve-measure-content {
position: relative;
display: flex;
align-items: stretch;
min-height: 150px;
}
/* Bar number badge — rendered in template but hidden by default.
Phase 9 viewer may opt in by overriding this rule. */
.sbn-ve-measure-num {
display: none;
}
/* Pickup bar indicator badge */
.sbn-ve-pickup-badge {
position: absolute;
top: 2px;
right: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-accent, #b06000);
background: color-mix(in srgb, var(--color-accent, #b06000) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent, #b06000) 35%, transparent);
border-radius: 3px;
padding: 1px 3px;
line-height: 1.2;
pointer-events: none;
z-index: 2;
}
/* Pickup measure: dashed left barline to signal anacrusis */
.sbn-ve-measure.is-pickup {
border-left-style: dashed;
border-left-color: var(--color-accent, #b06000);
opacity: 0.85;
}
/* ── Volta bracket ──────────────────────────────────────────────────────────
Sits above the measure content. Left arm on --start, right arm on --end.
The row needs padding-top so the bracket isn't clipped.
────────────────────────────────────────────────────────────────────────── */
.sbn-ve-volta {
position: absolute;
top: -22px;
left: 0;
right: 0;
height: 20px;
border-top: 2px solid currentColor;
pointer-events: none;
z-index: 2;
}
.sbn-ve-volta--start {
border-left: 2px solid currentColor;
}
.sbn-ve-volta--end {
border-right: 2px solid currentColor;
}
.sbn-ve-volta-label {
position: absolute;
top: 2px;
left: 4px;
font-size: 11px;
font-weight: 700;
font-family: 'Crimson Text', Georgia, serif;
line-height: 1;
}
/* Rows need headroom for the bracket */
.sbn-ve-row {
padding-top: 26px;
}
/* ── Repeat barlines in chord grid ─────────────────────────────────────────────
Bars SVG stretches full height (preserveAspectRatio=none).
Dots SVG is a square overlay centered vertically, not stretched.
────────────────────────────────────────────────────────────────────────── */
.sbn-ve-rep-svg {
position: absolute;
top: 0;
bottom: 0;
width: 12px;
color: var(--color-text, #222);
pointer-events: none;
z-index: 3;
display: flex;
flex-direction: column;
}
.sbn-ve-rep-svg--start { left: 0; }
.sbn-ve-rep-svg--end { right: 0; }
.sbn-ve-rep-bars {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
}
.sbn-ve-rep-dots {
position: absolute;
top: 50%;
width: 32px;
height: 30px;
transform: translateY(-50%);
}
.sbn-ve-rep-svg--start .sbn-ve-rep-dots {
left: 12px;
}
.sbn-ve-rep-svg--end .sbn-ve-rep-dots {
right: 12px;
left: auto;
}
/* Individual chord cell inside a measure */
.sbn-ve-chord {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 0;
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--radius);
box-sizing: border-box;
position: relative;
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sbn-ve-chord:not(:last-child) {
border-right: 1px dashed var(--clr-border-dim);
}
/* Chord name — Crimson Text, large */
.sbn-ve-chord-name {
font-size: 18px;
font-weight: 400;
color: var(--clr-text);
text-align: center;
line-height: 1.2;
font-family: var(--font-chord);
}
.sbn-ve-chord-name sup {
font-size: 0.72em;
font-weight: 600;
}
.sbn-ve-chord-name-input {
width: 100%;
font-size: inherit;
font-family: var(--font-chord);
font-weight: 400;
color: var(--clr-text);
text-align: center;
background: var(--clr-surface, #fff);
border: 1px solid var(--clr-accent);
border-radius: 4px;
outline: none;
padding: 0 2px;
box-sizing: border-box;
}
.sbn-tab-chord-rename-input {
width: 80px;
font-size: 18px;
font-weight: 700;
}
/* Smaller when multiple chords share a measure */
.sbn-ve-chord.multi .sbn-ve-chord-name {
font-size: 15px;
}
/* Diagram area inside chord */
.sbn-ve-chord-diagram {
cursor: pointer;
transition: opacity 0.15s, max-height 0.2s ease-in-out;
max-height: 100px;
overflow: hidden;
}
.sbn-ve-chord-diagram.empty {
opacity: 0.3;
width: 64px;
height: 64px;
border: 1px dashed var(--clr-border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--clr-text-muted);
}
.sbn-ve-chord-diagram.empty:hover {
opacity: 0.6;
border-color: var(--clr-accent);
}
.sbn-ve-chord.multi .sbn-ve-chord-diagram.empty {
width: 44px;
height: 44px;
}
/* Density states - hide diagrams in compact mode */
.sbn-ve-measure.is-compact .sbn-ve-chord-diagram {
opacity: 0;
max-height: 0;
pointer-events: none;
transform: scale(0.95);
z-index: 1;
}
.sbn-ve-measure.is-full .sbn-ve-chord-diagram {
opacity: 1;
max-height: 500px;
pointer-events: auto;
transform: scale(1);
z-index: 1;
}
/* Ensure chord names stay on top during transitions */
.sbn-ve-chord-name {
position: relative;
z-index: 2;
}
/* Staged animation: different timing for fade-in vs fade-out */
.sbn-ve-chord-diagram {
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms,
max-height 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms,
transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
}
/* Measure content: immediate on expand, delayed on collapse */
.sbn-ve-measure-content {
transition: min-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Density rework - compact line height while keeping same row structure */
.sbn-ve-measure.is-compact .sbn-ve-measure-content {
min-height: 60px;
/* Reduced from 80px for more compact mode */
padding: 8px 12px;
display: flex;
align-items: center;
/* Center chord names vertically */
}
.sbn-ve-measure.is-compact .sbn-ve-chord {
padding: 6px 8px;
margin: 2px;
flex: 1;
text-align: center;
}
.sbn-ve-measure.is-compact .sbn-ve-chord-name {
font-size: 20px;
/* Original size */
font-weight: 700;
/* Original weight */
line-height: 1.2;
/* Original line height */
margin: 0;
/* Remove extra margins */
transform: translateY(0);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sbn-ve-measure.is-compact .sbn-ve-chord {
transition: background 200ms ease, transform 200ms ease;
}
.sbn-ve-measure.is-compact .sbn-ve-chord:hover {
transform: translateY(-1px);
}
/* Ensure full mode maintains proper spacing */
.sbn-ve-measure.is-full .sbn-ve-measure-content {
min-height: 150px;
padding: 12px 16px;
}
.sbn-ve-measure.is-full .sbn-ve-chord {
padding: 6px 8px;
margin: 3px;
}
/* is-active frame now unified in §8 grid geometry above */
/* ──────────────────────────────────────────────────────────
9. UTILITY CLASSES
────────────────────────────────────────────────────────── */
/* Alpine.js: hide before init */
[x-cloak] {
display: none !important;
}
/* Text color helpers */
.sbn-text-dim {
color: var(--clr-text-dim);
}
.sbn-text-muted {
color: var(--clr-text-muted);
}
.sbn-text-accent {
color: var(--clr-accent);
}
.sbn-text-error {
color: var(--clr-error);
}
.sbn-text-success {
color: var(--clr-success);
}
/* Mono / chord font helpers */
.sbn-font-mono {
font-family: var(--font-mono);
}
.sbn-font-chord {
font-family: var(--font-chord);
}
/* Spinner animation */
.sbn-spin {
animation: sbn-spin 0.8s linear infinite;
}
@keyframes sbn-spin {
to {
transform: rotate(360deg);
}
}
/* ──────────────────────────────────────────────────────────
10. PRINT OVERRIDES
────────────────────────────────────────────────────────── */
@media print {
:root {
--clr-bg: #fff;
--clr-surface: #fff;
--clr-border: #ccc;
}
}
/* ── §9 Context Menu ────────────────────────────────────────────────────────
Styles for the sbn-context-menu singleton (sbn-context-menu.js).
position:fixed so it floats above all UI.
──────────────────────────────────────────────────────────────────────── */
.sbn-context-menu {
position: fixed;
z-index: 9999;
min-width: 200px;
max-width: 280px;
background: var(--clr-bg-card, #fff);
border: 1px solid var(--clr-border, #e0e0e0);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .08);
padding: 4px 0;
font-family: var(--ff-sans);
font-size: 13px;
/* left/top set inline by sbn-context-menu.js */
}
.sbn-context-menu hr {
border: none;
border-top: 1px solid var(--clr-border, #e0e0e0);
margin: 4px 0;
}
.sbn-context-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 7px 12px;
border: none;
background: none;
cursor: pointer;
color: var(--clr-text, #1a1a1a);
font: inherit;
text-align: left;
gap: 12px;
border-radius: 0;
transition: background 0.1s;
white-space: nowrap;
}
.sbn-context-menu-item:hover:not(.disabled) {
background: var(--clr-bg-hover, #f0f0f0);
}
.sbn-context-menu-item.disabled {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
.sbn-context-menu-item.danger {
color: var(--clr-danger, #d32f2f);
}
.sbn-context-menu-item.danger:hover {
background: rgba(211, 47, 47, 0.08);
}
.sbn-context-menu-label {
flex: 1;
}
/* Pickup beat-count row inside the context menu */
.sbn-cm-pickup-row {
display: flex;
align-items: center;
gap: 4px;
cursor: default;
pointer-events: auto;
}
.sbn-cm-pickup-row:hover {
background: transparent;
}
.sbn-cm-pickup-label {
font-size: 11px;
color: var(--clr-text-muted, #888);
white-space: nowrap;
}
.sbn-cm-pickup-beats {
display: flex;
gap: 3px;
}
.sbn-cm-beat-btn {
min-width: 22px;
height: 22px;
padding: 0 4px;
font-size: 11px;
font-weight: 600;
border: 1px solid var(--clr-border, #ddd);
border-radius: 3px;
background: var(--clr-surface-2, #f5f5f5);
color: var(--clr-text, #222);
cursor: pointer;
transition: background 0.1s, border-color 0.1s;
}
.sbn-cm-beat-btn:hover {
background: var(--clr-accent-soft, #fff3e0);
border-color: var(--color-accent, #b06000);
}
.sbn-cm-beat-btn.active {
background: var(--color-accent, #b06000);
color: #fff;
border-color: var(--color-accent, #b06000);
}
.sbn-cm-beat-btn--clear {
color: var(--clr-danger, #d32f2f);
border-color: transparent;
background: transparent;
font-size: 13px;
font-weight: 400;
}
.sbn-cm-beat-btn--clear:hover {
background: rgba(211, 47, 47, 0.08);
border-color: transparent;
}
.sbn-context-menu-kbd {
font-size: 11px;
color: var(--clr-text-muted, #888);
}
/* ── §2d Chord card selection frame ────────────────────────────────────────
.sbn-ve-selected on .sbn-ve-chord — per-chord orange frame.
When all chords in a measure are selected the frames merge visually.
──────────────────────────────────────────────────────────────────────── */
.sbn-tab-editor-root .sbn-ve-chord:hover {
border-color: var(--clr-accent);
}
.sbn-ve-chord.sbn-ve-selected {
border-color: var(--clr-accent);
border-width: 2px;
border-radius: var(--radius);
background: var(--clr-accent-bg);
}
/* ── §10 Drag-to-reorder ────────────────────────────────────────────────────
Gap-based drop indicator: padding pushes content inward on the drop side,
opening a visible gap while keeping the hit area intact for dragover.
──────────────────────────────────────────────────────────────────────── */
/* Grab cursor on measure background; interactive children restore default */
.sbn-ve-measure {
cursor: grab;
transition: padding 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}
.sbn-ve-measure:active {
cursor: grabbing;
}
.sbn-ve-chord-name,
.sbn-ve-chord-diagram,
.sbn-ve-beat-dot,
.sbn-ve-chord {
cursor: default;
}
/* Source measure fades — clearly "in flight" */
.sbn-ve-measure.is-dragging {
opacity: 0.3;
cursor: grabbing;
}
/* Drop target — light accent tint */
.sbn-ve-measure.is-drag-target {
background: rgba(25, 118, 210, 0.07);
}
/* Gap opens via padding — stays inside the hit area so dragover still fires */
.sbn-ve-measure.drop-gap-before {
padding-left: 36px;
border-left: 3px solid var(--clr-accent);
}
.sbn-ve-measure.drop-gap-after {
padding-right: 36px;
border-right: 3px solid var(--clr-accent);
}
/* Read-only indicators for Phase A completion */
.sbn-ve-readonly {
opacity: 0.7;
cursor: not-allowed !important;
user-select: none;
}
.sbn-ve-readonly-hint {
font-size: 11px;
color: var(--clr-text-muted, #8896a4);
font-style: italic;
padding: 2px 6px;
background: rgba(136, 150, 164, 0.1);
border-radius: 3px;
margin-left: 8px;
}
.sbn-ve-readonly .sbn-ve-chord-name,
.sbn-ve-readonly .sbn-ve-chord-diagram {
cursor: not-allowed !important;
pointer-events: none;
}
.sbn-ve-readonly .sbn-ve-measure {
cursor: not-allowed !important;
pointer-events: none;
}
.sbn-ve-readonly .sbn-ve-section-id,
.sbn-ve-readonly .sbn-ve-section-name,
.sbn-ve-readonly .sbn-ve-section-rhythm,
.sbn-ve-readonly .sbn-ve-section-tonality {
background: var(--clr-surface-3, #eef1f5);
padding: 4px 8px;
border-radius: 3px;
border: 1px solid var(--clr-text-muted, #8896a4);
color: var(--clr-text-dim, #5a5a5a);
min-height: 24px;
display: flex;
align-items: center;
}
.sbn-ve-readonly .sbn-ve-add-section {
background: var(--clr-surface-3, #eef1f5);
color: var(--clr-text-muted, #8896a4);
border: 1px dashed var(--clr-text-muted, #8896a4);
cursor: not-allowed !important;
}
/* ──────────────────────────────────────────────────────────
8b. CHORD GRID STRUCTURAL COMPONENTS (Phase 9 extraction)
──────────────────────────────────────────────────────────
Structural layout classes needed by the leadsheet viewer.
Extracted from leadsheets.css for shared use across admin
and public contexts.
────────────────────────────────────────────────────────── */
/* Grid wrapper */
.sbn-ve-grid {
background: var(--clr-surface);
border-left: 1px solid var(--clr-border);
border-right: 1px solid var(--clr-border);
border-top: none;
padding: 16px 20px;
}
/* Section container */
.sbn-ve-section {
margin-bottom: 16px;
}
.sbn-ve-section:last-child {
margin-bottom: 0;
}
/* Section header base (shared readonly/editable) */
.sbn-ve-section-header {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--clr-surface-2);
border-bottom: 2px solid var(--clr-accent);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
transition: border-radius 0.2s;
}
.sbn-ve-section-header.is-collapsed {
border-radius: var(--radius-sm);
}
/* Section ID badge */
.sbn-ve-section-id {
width: 26px;
height: 26px;
text-align: center;
font-weight: 800;
font-size: 14px;
background: var(--clr-accent);
color: #fff;
border: none;
border-radius: var(--radius-sm);
text-transform: uppercase;
padding: 0;
line-height: 26px;
font-family: var(--font-body);
outline: none;
}
/* Section name field/display */
.sbn-ve-section-name {
flex: 1;
padding: 3px 8px;
font-size: 13px;
font-weight: 600;
background: transparent;
color: var(--clr-text);
border: 1px solid transparent;
border-radius: 4px;
font-family: var(--font-body);
outline: none;
}
.sbn-ve-section-name:focus {
border-color: var(--clr-border);
}
/* Section bar count */
.sbn-ve-section-bar-count {
font-size: 11px;
color: var(--clr-text-muted);
white-space: nowrap;
}
/* Bars-per-row control */
.sbn-ve-section-bpr {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.sbn-ve-section-bpr span {
font-size: 11px;
color: var(--clr-text-muted);
}
.sbn-ve-section-bpr input[type="number"] {
width: 42px;
padding: 2px 4px;
font-size: 12px;
font-family: var(--font-body);
background: var(--clr-surface);
color: var(--clr-text);
border: 1px solid var(--clr-border);
border-radius: 4px;
outline: none;
text-align: center;
}
.sbn-ve-section-bpr input[type="number"]:focus {
border-color: var(--clr-accent);
}
/* Section body */
.sbn-ve-section-body {
background: var(--clr-surface);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
overflow: hidden;
}
.sbn-ve-section-collapsed {
padding: 10px 14px;
background: var(--clr-surface-2);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
border: 1px solid var(--clr-border);
border-top: none;
font-size: 12px;
color: var(--clr-text-muted);
font-family: var(--font-mono);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Row layout */
.sbn-ve-row {
display: flex;
margin-bottom: .375rem;
position: relative;
}
.sbn-ve-row:last-child {
margin-bottom: 0;
}
/* Row resize controls (editor-only visual) */
.sbn-ve-row-resize {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding-left: 8px;
opacity: 0;
transition: opacity 0.2s ease;
}
.sbn-ve-row:hover .sbn-ve-row-resize {
opacity: 1;
}
/* Row buttons */
.sbn-ve-row-btn {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--clr-border);
border-radius: 4px;
background: var(--clr-surface);
color: var(--clr-text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 0;
transition: all 0.15s ease;
}
.sbn-ve-row-btn:hover:not(:disabled) {
border-color: var(--clr-accent);
color: var(--clr-accent);
background: var(--clr-accent-bg);
}
.sbn-ve-row-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.sbn-ve-row-btn-section {
border-style: dashed;
color: var(--clr-text-muted);
}
.sbn-ve-row-btn-section:hover {
border-color: var(--clr-accent);
color: var(--clr-accent);
border-style: solid;
}
/* Measure content - beat grid layout */
.sbn-ve-grid .sbn-ve-measure-content {
position: relative;
min-height: 148px;
padding: 0;
padding-bottom: 18px;
}
/* Beat grid layer */
.sbn-ve-beat-grid {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 18px;
pointer-events: none;
}
/* Beat tick dots */
.sbn-ve-beat-tick {
position: absolute;
bottom: 5px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--clr-border, rgba(0, 0, 0, 0.25));
transform: translateX(-50%);
transition: background 0.1s;
}
.sbn-ve-beat-tick.beat-one {
width: 11px;
height: 11px;
background: rgba(0, 0, 0, 0.35);
bottom: 4px;
}
.sbn-ve-beat-tick.beat-active {
background: var(--clr-accent, #f39c12);
animation: sbn-beat-pulse 0.25s ease-out forwards;
}
@keyframes sbn-beat-pulse {
0% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
40% {
transform: translateX(-50%) scale(1.7);
opacity: 0.9;
}
100% {
transform: translateX(-50%) scale(1);
opacity: 0.6;
}
}
/* Chord positioning within beat-grid measures */
.sbn-ve-grid .sbn-ve-chord {
position: absolute;
top: 0;
bottom: 18px;
flex: unset;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 16px 6px 6px;
box-sizing: border-box;
overflow: hidden;
min-width: 0;
z-index: 1;
}
.sbn-ve-grid .sbn-ve-chord .sbn-ve-chord-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Density variants */
.sbn-ve-grid .sbn-ve-chord.double .sbn-ve-chord-name {
font-size: 17px;
}
.sbn-ve-grid .sbn-ve-chord.multi .sbn-ve-chord-name {
font-size: 14px;
}
.sbn-ve-grid .sbn-ve-chord.dense .sbn-ve-chord-name {
font-size: 10px;
}
/* Diagram sizing in grid */
.sbn-ve-grid .sbn-ve-chord .sbn-ve-chord-diagram .sbn-diagram-card {
width: min(80px, 90%);
max-width: 80px;
padding: 2px 2px;
}
.sbn-ve-grid .sbn-ve-chord .sbn-ve-chord-diagram.empty {
width: min(64px, 90%);
height: min(64px, 90%);
}
/* Grid footer */
.sbn-ve-grid-footer {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sbn-ve-grid-footer-hint {
font-size: 10px;
color: var(--clr-text-muted);
letter-spacing: 0.02em;
opacity: 0.7;
}
/* Grid hint text */
.sbn-ve-grid-hint {
text-align: center;
font-size: 10px;
color: var(--clr-text-muted);
padding: 6px 0 2px;
letter-spacing: 0.02em;
opacity: 0.6;
}
/* Add section button */
.sbn-ve-add-section {
display: block;
width: 100%;
margin: 16px 0 0;
padding: 10px;
font-size: 13px;
font-weight: 700;
background: var(--clr-surface);
color: var(--clr-text-muted);
border: 2px dashed var(--clr-border);
border-left: 1px solid var(--clr-border);
border-right: 1px solid var(--clr-border);
cursor: pointer;
transition: all 0.2s;
font-family: var(--font-body);
}
.sbn-ve-add-section:hover {
border-color: var(--clr-accent);
color: var(--clr-accent);
}
/* ──────────────────────────────────────────────────────────
9. TAB SVG NOTATION (Phase 9 extraction)
──────────────────────────────────────────────────────────
Styles for tablature SVG rendering. Used by both admin
tab editor and public viewer (Phase 9b).
────────────────────────────────────────────────────────── */
/* Editor root */
.sbn-tab-editor-root {
outline: none;
position: relative;
user-select: none;
-webkit-user-select: none;
}
/* Chord root panel */
.sbn-ve-chords-root {
border-bottom: 1px solid var(--clr-border);
border-radius: 0 0 var(--radius) var(--radius);
}
/* Tab notation panel */
.sbn-ve-content-panel {
border-left: 1px solid var(--clr-border);
border-right: 1px solid var(--clr-border);
border-bottom: 1px solid var(--clr-border);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
background: var(--clr-surface);
}
.sbn-tab-editor-notation {
width: 100%;
overflow-x: auto;
padding: 16px 20px;
}
/* Bravura SMuFL font */
@font-face {
font-family: 'Bravura';
src: url('/fonts/Bravura.otf') format('opentype');
font-display: swap;
}
/* No-data state */
.sbn-tab-no-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .625rem;
padding: 3.5rem 0;
color: var(--clr-text-muted);
font-size: .875rem;
text-align: center;
}
.sbn-tab-no-data svg {
opacity: .3;
}
/* Tab row layout */
.sbn-tab-row {
display: flex;
flex-direction: row;
align-items: stretch;
margin-bottom: .375rem;
position: relative;
}
.sbn-tab-row--has-volta {
margin-top: 24px;
}
/* Tab measures container */
.sbn-tab-measures {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
width: 100%;
}
/* Individual tab measure */
.sbn-tab-measure {
flex: 0 0 25%;
min-width: 0;
box-sizing: border-box;
border-radius: 3px;
padding: 2px 0;
transition: background .12s;
cursor: default;
}
/* Selection highlight */
.sbn-tab-measure--selected {
outline: 2px solid var(--clr-style-jazz);
outline-offset: -2px;
background: rgba(59, 130, 246, 0.04);
}
/* Overfill indicator */
.sbn-tab-measure--overfill {
border-radius: 3px;
box-shadow: inset 0 0 0 1.5px rgba(220, 38, 38, 0.45);
}
.sbn-tab-overfill-bg {
fill: rgba(220, 38, 38, 0.06);
}
/* Playback highlighting */
.sbn-tab-note-text.is-active {
fill: var(--clr-accent, #000000);
}
.sbn-tab-note-text.sbn-beat-active {
fill: #ef4444 !important;
}
.sbn-tab-measure--playing {
background: none;
box-shadow: none;
border: none;
}
.sbn-tab-metronome-col {
fill: var(--clr-accent, #f39c12);
opacity: 0.1;
pointer-events: none;
}
/* Playback / active chord: red name always, scale only in frontend viewer */
.sbn-ve-chord.is-active .sbn-ve-chord-name {
color: var(--clr-red, #e74c3c) !important;
}
.sbn-leadsheet-viewer .sbn-ve-chord.is-active {
transform: scale(1.18);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 3;
}
/* Selected chord: scale only in frontend viewer */
.sbn-leadsheet-viewer .sbn-ve-chord.is-selected {
transform: scale(1.18);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 3;
}
/* ── Chord drag-and-drop ────────────────────────────────────────────────────── */
/* Chord card drag cursor in editor mode */
/* Resize handles — left and right edges of the card */
.sbn-ve-chord-resize-handle {
position: absolute;
top: 0;
width: 14px;
height: 100%;
cursor: ew-resize;
background: transparent;
opacity: 0;
transition: opacity 0.15s;
z-index: 10;
}
.sbn-ve-chord-resize-handle--right {
right: 0;
border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
}
.sbn-ve-chord-resize-handle--left {
left: 0;
border-radius: var(--radius, 4px) 0 0 var(--radius, 4px);
}
.sbn-ve-chord-resize-handle--right:hover {
opacity: 1;
border-right: 3px solid var(--clr-accent);
}
.sbn-ve-chord-resize-handle--left:hover {
opacity: 1;
border-left: 3px solid var(--clr-accent);
}
/* Drag cursor on diagram only */
.sbn-tab-editor-root .sbn-ve-chord-diagram {
cursor: grab;
}
.sbn-tab-editor-root .sbn-ve-chord-diagram:active {
cursor: grabbing;
}
/* Resize ghost — solid border instead of dashed to distinguish from move ghost */
.sbn-ve-chord-ghost--resize {
border-style: solid;
}
/* Dragged/resized source card — faded in place */
.sbn-ve-chord.is-being-dragged {
pointer-events: none;
transition: none;
}
/* Measure during drag — disable text selection */
.sbn-ve-measure.is-dragging {
user-select: none;
cursor: grabbing;
}
/* Ghost card — follows pointer at snapped beat position */
.sbn-ve-chord-ghost {
position: absolute;
top: 0;
bottom: 0;
pointer-events: none;
z-index: 20;
border: 2px dashed var(--clr-accent);
border-radius: var(--radius, 4px);
background: color-mix(in srgb, var(--clr-accent) 12%, transparent);
display: flex;
align-items: flex-start;
padding: 4px 6px;
box-sizing: border-box;
}
.sbn-ve-chord-ghost-name {
font-size: 18px;
font-weight: 600;
color: var(--clr-accent);
white-space: nowrap;
overflow: hidden;
}
/* Tab chord bar */
.sbn-tab-chord-bar {
position: relative;
padding: 10px 0;
height: 38px;
overflow: visible;
}
.sbn-tab-chord-empty-wrap {
cursor: pointer;
}
.sbn-tab-chord-placeholder {
opacity: 0.35;
user-select: none;
pointer-events: none;
}
.sbn-tab-chord-empty-wrap:hover .sbn-tab-chord-placeholder {
opacity: 0.65;
}
.sbn-tab-chord-name-wrap {
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.sbn-tab-chord-bar .sbn-tab-chord-name {
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: var(--clr-text);
white-space: nowrap;
cursor: default;
font-family: var(--font-chord);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sbn-tab-chord-name--clickable {
cursor: pointer;
transition: color 0.1s;
}
.sbn-tab-chord-name--clickable:hover {
color: var(--clr-red, #e74c3c);
}
.sbn-tab-chord-name.is-active {
transform: scale(1.15);
color: var(--clr-red, #e74c3c) !important;
}
/* SVG canvas */
.sbn-tab-svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* String lines */
.sbn-tab-string-line {
stroke: #404040;
stroke-width: .6;
}
/* Bar lines */
.sbn-tab-bar-line {
stroke: #000000;
stroke-width: 1.2;
}
/* Note numbers */
.sbn-tab-note-text {
font-family: 'Crimson Text', Georgia, serif;
font-size: 13px;
fill: #222;
font-weight: 900;
transition: fill 0.1s;
paint-order: stroke fill;
stroke: #fff;
stroke-width: 3px;
stroke-linejoin: round;
}
.sbn-tab-note-text:hover {
fill: var(--clr-accent, #f39c12);
cursor: pointer;
}
/* Stems */
.sbn-tab-stem {
stroke: #333;
stroke-width: 1;
stroke-linecap: butt;
}
/* Beams */
.sbn-tab-beam {
fill: #333;
}
/* Ties */
.sbn-tab-tie {
fill: #333;
stroke: none;
}
/* Rests (SMuFL) */
.sbn-tab-rest.smufl {
font-family: 'Bravura', serif;
fill: #333;
}
/* Flags (SMuFL) */
.sbn-tab-flag.smufl {
font-family: 'Bravura', serif;
fill: #333;
}
/* Augmentation dots */
.sbn-tab-dot {
fill: #333;
}
/* ──────────────────────────────────────────────────────────
10. TRANSPORT BAR (Phase 9 Step 7 polish)
──────────────────────────────────────────────────────────
Playback control bar with design-system polish.
Pill-shaped container, circular accent play button,
styled range sliders, monospace labels.
────────────────────────────────────────────────────────── */
/* Container: pill-shaped with shadow */
.sbn-transport-bar {
position: sticky;
bottom: 20px;
z-index: 10;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
margin: 0 20px 20px;
background: var(--clr-surface, #fff);
border: 1px solid var(--clr-border, #e2e8f0);
border-radius: 9999px;
box-shadow: var(--clr-shadow, 0 4px 12px rgba(0, 0, 0, 0.07));
font-size: 13px;
}
/* Modifier: floating container (LeadsheetViewer smart sticky) */
/* When wrapped in a fixed-position container, disable sticky behavior */
.sbn-leadsheet-transport .sbn-transport-bar {
position: static;
margin: 0;
}
/* Transport always uses orange-red regardless of page accent overrides.
Pinned to root token values — not var() references — so page-level
--clr-accent overrides (e.g. leadsheet blue) cannot bleed in. */
.sbn-transport-bar {
--play-color: #f39c12;
--play-bg-playing: var(--clr-gradient);
}
/* Play button — size override only; color/state from global .sbn-play-btn */
.sbn-transport-play {
width: 48px;
height: 48px;
}
/* Seek section */
.sbn-transport-seek {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
/* Time label: monospace pill */
.sbn-transport-time {
flex-shrink: 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--clr-text, #2c3e50);
background: var(--clr-surface-2, #f7fafc);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--clr-border-dim, #eef1f5);
min-width: 70px;
text-align: center;
}
/* Tempo section */
.sbn-transport-tempo {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
}
.sbn-transport-tempo>span:first-child {
font-size: 16px;
color: var(--clr-text-dim, #5a5a5a);
}
/* BPM label: monospace pill */
.sbn-transport-bpm {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--clr-text, #2c3e50);
background: var(--clr-surface-2, #f7fafc);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--clr-border-dim, #eef1f5);
min-width: 44px;
text-align: center;
}
/* Mixer section */
.sbn-transport-mixer {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 16px;
border-left: 1px solid var(--clr-border, #e2e8f0);
padding-left: 16px;
}
.sbn-transport-mixer-track {
display: flex;
align-items: center;
gap: 8px;
}
.sbn-transport-mixer-label {
font-size: 11px;
font-weight: 500;
color: var(--clr-text-muted, #8896a4);
white-space: nowrap;
}
/* ── Range slider styling (cross-browser) ── */
/* WebKit (Chrome, Safari, Edge) */
.sbn-transport-bar input[type=range] {
-webkit-appearance: none;
appearance: none;
height: 4px;
background: var(--clr-border-dim, #eef1f5);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.sbn-transport-bar input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: var(--clr-accent, #f39c12);
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.sbn-transport-bar input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}
.sbn-transport-bar input[type=range]::-webkit-slider-thumb:active {
transform: scale(1.05);
}
.sbn-transport-bar input[type=range]:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px var(--clr-accent-border, rgba(243, 156, 18, 0.25));
}
/* Firefox */
.sbn-transport-bar input[type=range]::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--clr-accent, #f39c12);
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
cursor: pointer;
}
.sbn-transport-bar input[type=range]::-moz-range-thumb:hover {
transform: scale(1.15);
box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}
.sbn-transport-bar input[type=range]::-moz-range-track {
height: 4px;
background: var(--clr-border-dim, #eef1f5);
border-radius: 2px;
border: none;
}
.sbn-transport-bar input[type=range]:focus::-moz-range-thumb {
box-shadow: 0 0 0 3px var(--clr-accent-border, rgba(243, 156, 18, 0.25));
}
/* Specific slider widths */
.sbn-transport-seek input[type=range] {
flex: 1;
min-width: 60px;
}
.sbn-transport-tempo input[type=range] {
width: 100px;
}
.sbn-transport-mixer-track input[type=range] {
width: 72px;
}
/* ── Mobile responsive ── */
@media (max-width: 768px) {
.sbn-transport-bar {
flex-wrap: wrap;
gap: 12px;
padding: 12px 16px;
margin: 0 12px 12px;
border-radius: 16px;
}
.sbn-transport-seek {
order: 1;
width: 100%;
min-width: 100%;
}
.sbn-transport-play {
order: 2;
width: 44px;
height: 44px;
}
.sbn-transport-stop {
order: 3;
width: 32px;
height: 32px;
}
.sbn-transport-tempo {
order: 4;
margin-left: auto;
}
.sbn-transport-mixer {
order: 5;
width: 100%;
border-left: none;
border-top: 1px solid var(--clr-border, #e2e8f0);
padding: 12px 0 0 0;
justify-content: space-around;
}
.sbn-transport-mixer-track input[type=range] {
width: 80px;
}
/* Ensure touch targets meet 44px minimum */
.sbn-transport-bar button,
.sbn-transport-bar input[type=range]::-webkit-slider-thumb {
min-height: 44px;
min-width: 44px;
}
}
@media (max-width: 480px) {
.sbn-transport-bar {
padding: 10px 12px;
margin: 0 8px 8px;
}
.sbn-transport-time,
.sbn-transport-bpm {
font-size: 12px;
padding: 3px 8px;
}
.sbn-transport-tempo input[type=range] {
width: 80px;
}
.sbn-transport-mixer {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.sbn-transport-mixer-track {
justify-content: space-between;
}
.sbn-transport-mixer-track input[type=range] {
flex: 1;
max-width: 120px;
}
}
/* 13. GLOBAL COMPONENTS */
/* Page containers — shared across all frontend library pages */
/* Index / listing pages (songs, chords, rhythms, progressions, courses) */
.sbn-page {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px 80px;
}
/* Detail / show pages (single item view) */
.sbn-page-detail {
max-width: 1100px;
margin: 0 auto;
padding: 40px 20px 80px;
}
@media (max-width: 768px) {
.sbn-page { padding: 24px 16px 60px; }
.sbn-page-detail { padding: 24px 16px 60px; }
}
/* ── Horizontal card scroll row ──────────────────────────────
.sbn-card-scroll-wrap — outer positioner, clips to N cards wide
.sbn-card-scroll — the scrollable flex row
.sbn-card-scroll-item — each fixed-width card slot
.sbn-card-scroll-btn — prev/next arrow buttons (show via JS v-if) */
.sbn-card-scroll-wrap {
position: relative;
}
.sbn-card-scroll {
display: flex;
flex-direction: row;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.sbn-card-scroll::-webkit-scrollbar {
display: none;
}
.sbn-card-scroll-item {
flex: 0 0 110px;
text-decoration: none;
display: block;
scroll-snap-align: start;
}
.sbn-card-scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--clr-border);
background: var(--clr-white);
color: var(--clr-text);
font-size: 1.2em;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
transition: background 0.12s;
z-index: 1;
}
.sbn-card-scroll-btn:hover { background: var(--clr-surface-2); }
.sbn-card-scroll-btn--prev { left: -14px; }
.sbn-card-scroll-btn--next { right: -14px; }
/* ── Show-page section heading row ───────────────────────────
.sbn-section-heading-row — flex row: title left, link right
.sbn-section-heading — the h2 inside
.sbn-section-link — the "View all →" muted link
*/
.sbn-section-heading-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--clr-border);
}
.sbn-section-heading {
font-size: 1.05em;
font-weight: 700;
color: var(--clr-text);
margin: 0;
}
.sbn-section-link {
font-size: 0.85em;
font-weight: 500;
color: var(--clr-text-muted);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.15s;
}
.sbn-section-link:hover { color: var(--clr-text); }
/* ── Show-page detail hero ────────────────────────────────────
Shared header anatomy used by rhythm, progression, song show.
.sbn-show-hero-badges — top row: filled cat badge + extra badges + hashtags
.sbn-show-hero-title — h1
.sbn-show-hero-subtitle — muted one-liner below title
.sbn-show-hero-meta — light grey key/value chip row
.sbn-meta-chip — individual chip (also aliased as .sbn-song-meta-chip) */
.sbn-show-hero-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.sbn-show-hero-title {
font-size: 2em;
font-weight: 800;
color: var(--clr-text);
margin: 0 0 6px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.sbn-show-hero-subtitle {
font-size: 1em;
color: var(--clr-text-muted);
margin: 0 0 14px;
font-weight: 400;
line-height: 1.5;
}
.sbn-show-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 0;
}
.sbn-meta-chip,
.sbn-song-meta-chip {
background: var(--clr-surface-2);
border-radius: 6px;
padding: 4px 10px;
font-size: 0.82em;
color: var(--clr-text-muted);
}
.sbn-meta-chip strong,
.sbn-song-meta-chip strong {
color: var(--clr-text);
margin-right: 4px;
}
/* ── Show-page two-column layout ─────────────────────────────
Used by progression, rhythm (and future chord/song) show pages.
.sbn-show-body — grid wrapper (header sits above, outside)
.sbn-show-main — left content column
.sbn-show-sidebar — right sticky sidebar column
.sbn-show-sidebar-card — framed card inside the sidebar
.sbn-show-sidebar-heading — uppercase eyebrow label */
.sbn-show-body {
display: grid;
grid-template-columns: 1fr 320px;
gap: 32px;
align-items: start;
}
.sbn-show-main,
.sbn-show-sidebar {
min-width: 0;
}
.sbn-show-sidebar {
position: sticky;
top: 80px;
}
.sbn-show-sidebar-card {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 16px;
}
.sbn-show-sidebar-card:last-child {
margin-bottom: 0;
}
.sbn-show-sidebar-heading {
font-size: 0.82em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--clr-text-muted);
margin: 0 0 12px;
}
@media (max-width: 1024px) {
.sbn-show-body {
grid-template-columns: 1fr;
}
.sbn-show-sidebar {
position: static;
}
}
/* Breadcrumb — gradient header band */
.sbn-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
padding: 10px 20px;
border-radius: var(--radius) var(--radius) 0 0;
margin-bottom: 0;
}
/* Category variant — uses --breadcrumb-clr set via inline style */
.sbn-breadcrumb--cat {
background: linear-gradient(100deg,
var(--breadcrumb-clr),
color-mix(in srgb, var(--breadcrumb-clr) 60%, white));
}
/* Brand variant — orange→red gradient, no category */
.sbn-breadcrumb--brand {
background: var(--clr-gradient);
}
/* Detail hero — white bordered box that connects flush beneath the breadcrumb */
.sbn-detail-hero {
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
margin-bottom: 32px;
}
.sbn-breadcrumb-link,
.sbn-breadcrumb-sep,
.sbn-breadcrumb-current {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
}
.sbn-breadcrumb-link:hover {
color: #fff;
}
.sbn-breadcrumb-current {
color: #fff;
font-weight: 600;
}
.sbn-breadcrumb-sep {
opacity: 0.55;
user-select: none;
}
/* Back Link (Unified style for all library return links) */
.sbn-back-link {
display: inline-block;
color: var(--clr-text-muted, #718096);
text-decoration: none;
font-weight: 500;
margin-bottom: 16px;
font-size: 14px;
transition: color 0.15s;
white-space: nowrap;
}
.sbn-back-link:hover {
color: var(--clr-text-muted);
}
/* ──────────────────────────────────────────────────────────
14. CHAT / MESSAGING (.sbn-chat-*)
──────────────────────────────────────────────────────────
Shared by the customer Vue messaging pages (Account/Messages,
Community/Show) and the admin Blade equivalents.
────────────────────────────────────────────────────────── */
.sbn-chat-shell {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--space-4, 1rem);
height: calc(100vh - var(--header-height, 102px) - 8rem);
min-height: 480px;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
overflow: hidden;
}
.sbn-chat-shell--single { grid-template-columns: 1fr; }
@media (max-width: 720px) {
.sbn-chat-shell {
grid-template-columns: 1fr;
}
}
.sbn-chat-list {
border-right: 1px solid var(--clr-border);
overflow-y: auto;
}
.sbn-chat-list-empty {
padding: var(--space-4, 1rem);
color: var(--clr-text-muted);
font-size: 0.9rem;
}
.sbn-chat-list-item {
display: block;
padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
border-bottom: 1px solid var(--clr-border);
color: var(--clr-text);
text-decoration: none;
transition: background 0.12s var(--ease);
}
.sbn-chat-list-item:hover { background: var(--clr-surface-3); }
.sbn-chat-list-item.is-active {
background: var(--clr-surface-3);
border-left: 3px solid var(--clr-accent);
}
.sbn-chat-list-title { font-weight: 600; margin-bottom: 2px; }
.sbn-chat-list-when { font-size: 0.75rem; color: var(--clr-text-muted); }
.sbn-chat-pane {
display: flex;
flex-direction: column;
min-width: 0;
}
.sbn-chat-header {
padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
border-bottom: 1px solid var(--clr-border);
background: var(--clr-surface-2);
display: flex;
align-items: baseline;
gap: var(--space-3, 0.75rem);
}
.sbn-chat-header-subtle { color: var(--clr-text-muted); font-size: 0.85rem; }
.sbn-chat-scroller {
flex: 1;
overflow-y: auto;
padding: var(--space-4, 1rem);
display: flex;
flex-direction: column;
gap: var(--space-2, 0.5rem);
}
.sbn-chat-empty,
.sbn-chat-empty-pane {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-text-muted);
text-align: center;
padding: var(--space-6, 1.5rem);
}
.sbn-chat-bubble-row { display: flex; justify-content: flex-start; }
.sbn-chat-bubble-row.is-mine { justify-content: flex-end; }
.sbn-chat-bubble {
max-width: 70%;
padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
background: var(--clr-surface-3);
border-radius: 14px;
}
.sbn-chat-bubble-row.is-mine .sbn-chat-bubble {
background: var(--clr-accent);
color: var(--clr-bg);
}
.sbn-chat-bubble.is-deleted {
background: transparent;
border: 1px dashed var(--clr-border);
color: var(--clr-text-muted);
}
.sbn-chat-bubble-author {
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-text-muted);
margin-bottom: 2px;
}
.sbn-chat-bubble-body { white-space: pre-wrap; word-wrap: break-word; }
.sbn-chat-bubble-deleted { font-style: italic; color: var(--clr-text-muted); }
.sbn-chat-bubble-time {
font-size: 0.7rem;
opacity: 0.7;
margin-top: 4px;
}
.sbn-chat-bubble-delete {
margin-left: var(--space-2, 0.5rem);
background: none;
border: none;
color: inherit;
opacity: 0.6;
cursor: pointer;
font-size: inherit;
text-decoration: underline;
padding: 0;
}
.sbn-chat-bubble-delete:hover { opacity: 1; }
.sbn-chat-composer {
border-top: 1px solid var(--clr-border);
padding: var(--space-3, 0.75rem);
display: flex;
gap: var(--space-2, 0.5rem);
background: var(--clr-surface-2);
}
.sbn-chat-composer-input {
flex: 1;
padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
background: var(--clr-bg);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
color: var(--clr-text);
font-family: inherit;
font-size: 0.95rem;
resize: vertical;
}
.sbn-chat-composer-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-2, 0.5rem);
gap: var(--space-3, 0.75rem);
}
.sbn-chat-composer-hint,
.sbn-chat-composer-error { font-size: 0.8rem; color: var(--clr-text-muted); }
.sbn-chat-composer-error { color: var(--clr-danger); }
.sbn-chat-readonly {
padding: var(--space-4, 1rem);
text-align: center;
color: var(--clr-text-muted);
border-top: 1px solid var(--clr-border);
background: var(--clr-surface-2);
}
.sbn-community-bar {
display: flex;
gap: var(--space-4, 1rem);
align-items: center;
margin-bottom: var(--space-4, 1rem);
}
.sbn-community-bar button {
background: none;
border: 1px solid var(--clr-border);
padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--clr-text);
}
.sbn-community-bar button:hover { background: var(--clr-surface-3); }
.sbn-community-banner {
display: inline-block;
margin-left: var(--space-2, 0.5rem);
padding: 2px 8px;
border-radius: 999px;
background: var(--clr-surface-3);
color: var(--clr-text);
font-size: 0.75rem;
}
/* ══════════════════════════════════════════════════════════════════════════
THEME: VINTAGE
Overrides for [data-theme="vintage"] on .
Default theme is "modern" — this block only activates when switched.
══════════════════════════════════════════════════════════════════════════ */
/* Rhythm card */
[data-theme="vintage"] .sbn-rhythm-card {
border: 1px solid var(--clr-border);
border-right: 3px solid var(--row-color, var(--clr-border));
border-bottom: 3px solid var(--row-color, var(--clr-border));
transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
[data-theme="vintage"] .sbn-rhythm-card:hover {
box-shadow: 3px 3px 0 var(--row-color, var(--clr-border));
transform: translate(-1px, -1px);
border-color: var(--row-color, var(--clr-border));
}
/* Chord card — offset shadow frame */
[data-theme="vintage"] .sbn-chord-card {
border-color: transparent;
box-shadow: 1px 1px 0 var(--clr-border);
}
[data-theme="vintage"] .sbn-chord-card:hover {
border-color: transparent;
box-shadow: 3px 3px 0 rgba(54, 131, 255, 0.35);
transform: translateY(-2px);
}
[data-theme="vintage"] .sbn-chord-card--detail:hover {
transform: none;
box-shadow: 1px 1px 0 var(--clr-border);
}
/* Progression viewer hover */
[data-theme="vintage"] .sbn-prog-viewer:not(.sbn-prog-viewer--compact):hover {
border-right: 3px solid var(--prog-color, var(--clr-accent));
border-bottom: 3px solid var(--prog-color, var(--clr-accent));
}
/* Rhythm pattern row — thick right+bottom border frame */
[data-theme="vintage"] .sbn-pattern-row {
border: 1px solid var(--clr-border);
border-right: 3px solid var(--row-color, var(--clr-border));
border-bottom: 3px solid var(--row-color, var(--clr-border));
border-left: 1px solid var(--clr-border);
transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
[data-theme="vintage"] .sbn-pattern-row:hover {
box-shadow: 3px 3px 0 var(--row-color, var(--clr-border));
transform: translate(-1px, -1px);
}
/* Pulse glow on playing rhythm/progression players */
[data-theme="vintage"] .sbn-rhythm-pattern.is-playing {
animation: sbn-pulse-card-strip 1.5s ease-in-out infinite;
}
[data-theme="vintage"] .sbn-prog-viewer.is-playing {
animation: sbn-pulse-card-prog 1.5s ease-in-out infinite;
}
@keyframes sbn-pulse-card-strip {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--strip-color, var(--clr-accent)) 15%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--strip-color, var(--clr-accent)) 15%, transparent); }
}
@keyframes sbn-pulse-card-prog {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--prog-color, var(--clr-accent)) 15%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--prog-color, var(--clr-accent)) 15%, transparent); }
}
/* ──────────────────────────────────────────────────────────
15. LIBRARY PAGES (.sbn-lib-*)
──────────────────────────────────────────────────────────
Shared layout for all hitlist-style library index pages
(Rhythms, Progressions, Chords). Page-specific row content
stays in each page's own file/component.
────────────────────────────────────────────────────────── */
/* ── Page header ── */
.sbn-lib-page-header {
text-align: center;
margin-bottom: 40px;
}
.sbn-lib-page-title {
font-size: 38px;
font-weight: 900;
color: var(--clr-text);
margin: 0 0 10px;
letter-spacing: -0.02em;
line-height: 1.1;
}
.sbn-lib-page-subtitle {
font-size: 17px;
color: var(--clr-text-muted);
margin: 0 auto 28px;
font-weight: 400;
line-height: 1.6;
max-width: 600px;
}
/* ── Search box ── */
.sbn-lib-search-wrap {
max-width: 560px;
margin: 0 auto;
}
.sbn-lib-search-box {
display: flex;
align-items: center;
background: var(--clr-white);
border: 2px solid var(--clr-border);
border-radius: 16px;
padding: 6px 6px 6px 20px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
transition: border-color 0.2s, box-shadow 0.2s;
}
.sbn-lib-search-box:focus-within {
border-color: var(--clr-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-accent) 15%, transparent);
}
.sbn-lib-search-icon {
color: var(--clr-text-muted);
flex-shrink: 0;
margin-right: 12px;
transition: color 0.2s;
}
.sbn-lib-search-box:focus-within .sbn-lib-search-icon {
color: var(--clr-accent);
}
.sbn-lib-search-input {
flex: 1;
border: none;
outline: none;
font-size: 16px;
color: var(--clr-text);
background: transparent;
padding: 10px 0;
font-weight: 500;
}
.sbn-lib-search-input::placeholder {
color: var(--clr-text-muted);
font-weight: 400;
}
.sbn-lib-search-clear {
width: 32px;
height: 32px;
border-radius: 10px;
border: none;
background: var(--clr-surface-2);
color: var(--clr-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.sbn-lib-search-clear:hover {
background: var(--clr-accent);
color: #fff;
}
/* ── Content layout ── */
.sbn-lib-content-wrapper {
display: flex;
gap: 24px;
align-items: flex-start;
}
.sbn-lib-list-container {
flex: 1;
min-width: 0;
}
/* ── List status bar ── */
.sbn-lib-list-status {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding: 8px 0;
font-size: 13px;
color: var(--clr-text-muted);
}
.sbn-lib-clear-btn {
border: 1px solid var(--clr-border);
background: none;
color: var(--clr-text-muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
transition: all 0.15s;
}
.sbn-lib-clear-btn:hover {
color: #e85d3b;
border-color: #e85d3b;
background: #fff8f5;
}
/* ── Hitlist rows ── */
.sbn-lib-hitlist {
display: flex;
flex-direction: column;
}
.sbn-lib-row {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 0 20px 0 0;
border: 1px solid var(--clr-border);
border-radius: var(--radius);
background: var(--clr-white);
margin-bottom: 8px;
transition: border-color 0.15s;
overflow: hidden;
}
.sbn-lib-row:hover {
border-color: var(--clr-text);
}
.sbn-lib-row-body {
flex: 1;
min-width: 0;
padding: 20px 0;
}
.sbn-lib-row-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.sbn-lib-row-title {
font-size: 20px;
font-weight: 800;
color: var(--clr-text);
margin: 0 0 6px;
line-height: 1.2;
letter-spacing: -0.01em;
}
.sbn-lib-row-link {
color: inherit;
text-decoration: none;
transition: color 0.12s;
}
.sbn-lib-row-link:hover {
color: var(--clr-accent);
}
.sbn-lib-row-desc {
margin: 0 0 10px;
font-size: 13px;
color: var(--clr-text-dim);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sbn-lib-row-popularity-phrase {
font-size: 13px;
color: var(--clr-text-muted);
line-height: 1.5;
margin: 0 0 4px;
}
.sbn-lib-row-read-more {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--clr-accent);
text-decoration: none;
margin-top: 4px;
transition: color 0.12s;
}
.sbn-lib-row-read-more:hover {
color: var(--clr-accent-dim);
}
.sbn-lib-row-read-more svg {
flex-shrink: 0;
transition: transform 0.12s;
}
.sbn-lib-row-read-more:hover svg {
transform: translateX(2px);
}
/* ── Empty state ── */
.sbn-lib-no-results {
text-align: center;
padding: 60px 20px;
color: var(--clr-text-muted);
}
.sbn-lib-no-results h3 {
font-size: 1.1em;
font-weight: 600;
margin: 16px 0 8px;
color: var(--clr-text-dim);
}
.sbn-lib-no-results p {
font-size: 0.9em;
margin: 0;
}
/* ── Filter sidebar ── */
.sbn-lib-filter-sidebar {
position: sticky;
top: 20px;
align-self: flex-start;
width: 220px;
min-width: 220px;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: 16px;
padding: 20px;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.sbn-lib-sidebar-header {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--clr-border);
}
.sbn-lib-sidebar-header h3 {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--clr-text);
}
.sbn-lib-sidebar-count {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--clr-text-muted);
font-weight: 400;
margin-bottom: 6px;
}
.sbn-lib-sidebar-section {
margin-bottom: 20px;
}
.sbn-lib-sidebar-label {
font-size: 10px;
font-weight: 700;
color: var(--clr-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 8px;
display: block;
}
.sbn-lib-sidebar-options {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.sbn-lib-sidebar-option {
padding: 5px 10px;
border: 1px solid var(--clr-border);
border-radius: 6px;
background: var(--clr-white);
color: var(--clr-text-dim);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.12s;
line-height: 1.2;
}
.sbn-lib-sidebar-option:hover {
border-color: #e85d3b;
color: #e85d3b;
background: #fff8f5;
}
.sbn-lib-sidebar-option.sbn-filter-active {
background: var(--cat-clr, var(--clr-text));
border-color: var(--cat-clr, var(--clr-text));
color: #fff;
}
.sbn-lib-sidebar-option.sbn-filter-active:hover {
background: color-mix(in srgb, var(--cat-clr, var(--clr-text)) 80%, #000);
border-color: color-mix(in srgb, var(--cat-clr, var(--clr-text)) 80%, #000);
}
.sbn-lib-sidebar-option.sbn-sort-active {
background: var(--clr-text);
border-color: var(--clr-text);
color: #fff;
}
.sbn-lib-sidebar-option.sbn-sort-active:hover {
background: var(--clr-gradient);
border-color: transparent;
}
.sbn-lib-sidebar-clear {
width: 100%;
padding: 9px;
border: 1px solid var(--clr-border);
border-radius: 8px;
background: var(--clr-white);
color: var(--clr-text-muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
margin-top: 4px;
}
.sbn-lib-sidebar-clear:hover {
border-color: #e85d3b;
color: #e85d3b;
background: #fff8f5;
}
/* ── Category section separators ── */
.sbn-lib-category-section { margin-bottom: 32px; }
.sbn-lib-category-header {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #fff;
margin: 0 0 14px;
padding: 10px 16px;
border-radius: var(--radius);
background: var(--cat-color, var(--clr-style-default));
}
.sbn-lib-category-header--bossa-nova { --cat-color: linear-gradient(100deg, var(--clr-style-bossa), color-mix(in srgb, var(--clr-style-bossa) 40%, white)); }
.sbn-lib-category-header--jazz { --cat-color: linear-gradient(100deg, var(--clr-style-jazz), color-mix(in srgb, var(--clr-style-jazz) 40%, white)); }
.sbn-lib-category-header--classical { --cat-color: linear-gradient(100deg, var(--clr-style-classical), color-mix(in srgb, var(--clr-style-classical) 40%, white)); }
.sbn-lib-category-header--pop { --cat-color: linear-gradient(100deg, var(--clr-style-pop), color-mix(in srgb, var(--clr-style-pop) 40%, white)); }
.sbn-lib-category-header--bossa { --cat-color: linear-gradient(100deg, var(--clr-style-bossa), color-mix(in srgb, var(--clr-style-bossa) 40%, white)); }
.sbn-lib-category-count {
font-weight: 500;
font-size: 12px;
opacity: 0.8;
background: rgba(255,255,255,0.2);
padding: 1px 7px;
border-radius: 999px;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.sbn-lib-content-wrapper {
flex-direction: column-reverse;
}
.sbn-lib-filter-sidebar {
position: static;
width: 100%;
min-width: 0;
max-height: none;
}
}
@media (max-width: 600px) {
.sbn-lib-page-title { font-size: 28px; }
.sbn-lib-row-title { font-size: 17px; }
}