svm0n_datadeck/docs/css-classes.md

CSS class reference

Reference doc — load when editing styles.css or tracing a visual bug to its rule. For the component each class belongs to, see architecture.md.

Class	Where	Description
.datadeck-root	Root	Sets CSS vars, flex column layout
.csv-toolbar	Both	Top toolbar; flex-wrap: wrap so controls drop to a second row on narrow viewports
.csv-toolbar-controls	Both	Right-hand group; also wraps
.csv-toolbar-title	Both	Filename header; hidden on max-width: 600px (redundant with tab)
.csv-mode-group	Both	Wrapper around the view-mode dropdown (hidden while mobile search is expanded)
.csv-mode-select	Both	View-mode <select> (Travel/Dashboard/Cards/Kanban/Table/Focus/Stats, filtered by availableModes)
.csv-cfg-btn	Both	"⚙ Config", "💾 Backup", "🎴 Anki" buttons
.csv-cfg-btn-secondary	Both	Modifier on the three secondary buttons above — hidden on max-width: 600px (collapsed into ⋯ overflow)
.csv-cfg-btn-overflow	Both	⋯ button shown only on max-width: 600px; click opens an Obsidian Menu with Columns / Mobile / Backup
.csv-add-btn	Both	"+ Add" button
.csv-row-count	Toolbar	Entry-count chip; hidden on mobile
.csv-kanban-groupbar	Kanban	"Group by" selector row above the board; -label for the caption span
.csv-kanban-board	Kanban	Horizontal flex container
.csv-kanban-col	Kanban	Single genre column; phone-scoped to calc(100vw - 60px) with scroll-snap
.csv-kanban-col-header	Kanban	Column title + count
.csv-kanban-col-title	Kanban	Uses var(--text-accent) to match Library headers
.csv-kanban-status-group	Kanban	Status subgroup within column
.csv-kanban-status-label	Kanban	Colored status pill
.csv-kanban-card	Kanban	Individual entry card
.csv-kanban-card-btns	Kanban	Button row (visible on hover)
.csv-kanban-notes-preview	Kanban	Plain-text note excerpt; --empty modifier hides it; itself click-to-edit
.csv-kanban-notes-editor	Kanban	Inline textarea wrapper (toggled via display)
.csv-select-chip	Both	Clickable dropdown chip; .empty = no value
.csv-chip-value	Both	Value span inside chip; max-width: 200px, ellipsis
.csv-select-picker	Both	Floating dropdown panel (fixed-positioned)
.csv-picker-search	Both	Picker search input
.csv-picker-item	Both	List item; .active/--hover = current; .csv-picker-add = new value
.csv-table	Table	Main table element
.csv-table-notes-cell	Table	Notes cell (relative-positioned for expand btn)
.csv-table-expand-btn	Table	"⤢" button, shown on row hover
.csv-col-resize-handle	Table	Drag handle on <th> right edge
.csv-cell--clipped	Table	Added at render time when a cell's content overflows its clamp; shows the bottom-fade
.csv-content-area	Both	Scroll container for view content
.csv-content-area--no-yscroll	Kanban	Modifier that hides outer y-scroll (kanban supplies its own)
.csv-search-wrap	Toolbar	Search bar container (flex: 1 on mobile, min-width: 0 so it can shrink)
.csv-search-input	Toolbar	Search input; desktop width: 180px (220px on focus); mobile width: 100% !important to defeat the focus expansion
.csv-search-clear	Toolbar	Clear search button (×)
.csv-search-results	Content	"Found X of Y entries" message
.csv-add-modal	Modal	Add entry modal content
.csv-modal-form	Modal	Scrollable form area
.csv-modal-row	Modal	Label + input pair
.csv-modal-select	Modal	<select> dropdown in FileConfigModal
.csv-modal-checkbox-grid	Modal	Habit column / cardFields selector grid
.csv-modal-checkbox-label	Modal	Checkbox + label; .auto-detected highlights auto-picked defaults
.csv-modal-dup-hint	Modal	Amber "already in this file" hint under the Add modal's title input (non-blocking)
.csv-note-expander-modal	Modal	Wide modal override (min(780px, 90vw))
.csv-expander-header	Modal	Title row
.csv-expander-fields	Modal	Flex-wrap row of label/value field pairs
.csv-expander-field-row	Modal	Single label + value pair
.csv-expander-field-label	Modal	Uppercase faint label
.csv-expander-field-value	Modal	Clickable editable value; truncated with ellipsis
.csv-expander-divider	Modal	Notes section header (label only — Edit toggle removed; click-to-edit)
.csv-expander-notes-label	Modal	"Notes" column name label
.csv-expander-rendered	Modal	Markdown rendered view (itself click-to-edit)
.csv-expander-editor	Modal	Textarea editor view (toggled via display)
.csv-expander-textarea	Modal	Raw markdown textarea
.csv-expander-footer	Modal	Cancel + Save & close buttons
.csv-dashboard	Dashboard	Root container with max-width
.csv-dash-nav	Dashboard	Date navigator bar
.csv-dash-nav-btn	Dashboard	Prev/next arrow buttons
.csv-dash-date-select	Dashboard	Date dropdown
.csv-dash-today-badge	Dashboard	"Today" indicator pill
.csv-dash-today-btn	Dashboard	"Today" quick nav button
.csv-dash-habits	Dashboard	Habit toggles section
.csv-dash-habits-grid	Dashboard	Grid of habit toggle buttons
.csv-dash-habit	Dashboard	Single habit toggle; .checked variant
.csv-dash-habit-check	Dashboard	Clickable ○/● indicator
.csv-dash-chart-section	Dashboard	Chart container
.csv-dash-stats-bar	Dashboard	Stats summary row
.csv-dash-cards-grid	Dashboard	Per-habit stat cards grid
.csv-dash-habit-card	Dashboard	Individual habit stat card
.csv-dash-habit-card-header	Dashboard	Icon + name row
.csv-dash-habit-icon	Dashboard	Emoji icon for habit
.csv-dash-habit-years	Dashboard	Year badges (2024 · 2025 · 2026)
.csv-dash-habit-progress	Dashboard	Progress bar container
.csv-dash-timeline-section	Dashboard	Per-habit timeline container
.csv-dash-timeline-grid	Dashboard	Heatmap grid of day cells
.csv-dash-timeline-cell	Dashboard	Single day cell; .done, .missed, .no-entry
.csv-dash-timeline-month	Dashboard	Month label in timeline
.csv-library-filters	Library	Filters bar (flex, gap)
.csv-library-filter-select	Library	Status/genre/sort dropdowns (also reused by the kanban group-by select)
.csv-library-search	Library	Search input
.csv-library-sections	Library	Container for genre sections
.csv-library-section	Library	Collapsible <details> element
.csv-library-section-header	Library	Genre header with arrow + count
.csv-library-grid	Library	Card grid (auto-fill columns)
.csv-library-card	Library	Individual entry card
.csv-library-card-title	Library	Title with green dot
.csv-library-done-dot	Library	Green dot for watched/read
.csv-library-card-meta	Library	Author/year text
.csv-library-card-rating	Library	Star rating display
.csv-library-card-tags	Library	Tags container
.csv-library-card-tag	Library	Individual tag chip
.csv-add-form	Code block	Mobile add entry form container
.csv-add-trigger	Code block	Collapsed pill (re-opens the card)
.csv-add-card	Code block	Expanded grouped card; .is-updating adds blue accent ring + tinted title when the date matches an existing row
.csv-add-card-header / -title / -close	Code block	Header bar with × close
.csv-add-rows	Code block	Grouped row list with hairline separators
.csv-add-row	Code block	Single label/control row; variants: -date, -toggle, -field, -custom, -notes
.csv-add-row-label	Code block	Left-aligned field label
.csv-add-row-control	Code block	Right-aligned input/select
.csv-add-row-textarea	Code block	Notes textarea (stacked, full width)
.csv-add-switch / -input / -track	Code block	iOS-style switch for binary toggle rows
.csv-add-submit	Code block	Submit button (label flips between "Add" / "Update")
.csv-add-error	Code block	Error message styling
.csv-refresh-btn	Code block	Mobile ↻ refresh button (subtle, no background)
.csv-stats-wrap	Stats	Centered column (max 720px) for all stats sections
.csv-stats-overview / -chip / -chip-value / -chip-label	Stats	Top row of stat tiles (entries, done %, avg rating…) — same visual family as travel-view stat tiles
.csv-stats-section / -section-title	Stats	One bar-chart block + its accent-colored uppercase title
.csv-stats-bar-row / -label / -track / -fill / -count	Stats	Grid bar row; fill modifiers .is-done (green), .is-progress (blue), .is-dropped (red), .is-rating (amber), default accent
.csv-focus-wrap	Focus	Centered column (max 640px), tabindex=0 so ←/→ keys work; outline: none
.csv-focus-card	Focus	The single entry card
.csv-focus-position	Focus	"n / N" indicator
.csv-focus-title	Focus	Big title; pre-wrap so quote line breaks survive; .is-clickable when an expander is available
.csv-focus-sub / -notes / -meta	Focus	Author line, rendered-markdown notes body, chip row (reuses .csv-kanban-chip)
.csv-focus-nav / -nav-btn / -nav-rand	Focus	Prev / 🔀 / next button row; full-width touch targets on mobile
.csv-th-sortable	Table	Modifier on every <th>; pointer cursor + accent hover
.csv-th-sort-indicator	Table	▲/▼ span inside the sorted column's <th>
.csv-clear-filters-btn	Library/Kanban/Focus	"Clear filters"/"Clear search" button in no-results empty states
.csv-tv-now / -now-loc / -now-sub	Travel	"📍 Currently in …" banner under the stats (gold-tinted; only when today is inside a confirmed trip)
.cp-selected	Travel	Accent stroke + brightness on the selected map country; overrides .cp-tiny's transparent halo stroke
.csv-tv-seg.is-dim	Travel	Timeline segment dimmed to 0.18 opacity while another country is selected
.csv-tv-row-click / .is-selected	Travel	Clickable Countries-table rows; selected row gets the amber tint
.csv-tv-detailwrap / .csv-tv-detail	Travel	Country detail panel slot under the map / the gold-bordered panel card
.csv-tv-detail-head / -flag / -titles / -name / -sub / -close	Travel	Panel header: big flag, country name, totals line, ✕ button
.csv-tv-tl-sub	Travel	Per-year "Nd · M countries" summary next to the timeline year label
.csv-picker-done	Both	Done button at the bottom of a multi-select picker (raw Obsidian vars — picker mounts on body, outside the root's --csv-* scope)
.csv-random-card / -text / -sub / -foot / -src / -btn	Code block	csv-random quote card (also raw Obsidian vars — renders in regular notes)
.csv-stats-bar-row.is-clickable	Stats	Status/category bars that jump to the filtered library on click

Status colors

Status color variants: .status-{slug} where slug = value lowercased, spaces → -. Palette:

Value	Color	CSS var
finished / read / watched / seen / done	green	--csv-green, --csv-green-bg
in-progress / reading / watching	blue	--csv-blue, --csv-blue-bg
not-started / to-read / unwatched / unread / todo / no	grey	--background-modifier-border + --text-muted
dropped	red	--csv-red, --csv-red-bg

Theme palette in :root (Apple-muted iOS systemGreen/Blue/Red/Orange — confident-but-quiet on both light and dark themes):

--csv-green:    #30A14E;  --csv-green-bg: rgba(52,199,89,0.13);
--csv-blue:     #2E7CE6;  --csv-blue-bg:  rgba(0,122,255,0.13);
--csv-red:      #D5443B;  --csv-red-bg:   rgba(255,59,48,0.12);
--csv-amber:    #C18000;  --csv-amber-bg: rgba(255,149,0,0.13);