Something went wrong. Try again.
gotta store my records
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168/* Panels mount/unmount via the vdom, so entrance is a keyframe animation: a transition would never fire on insert. */@keyframes panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; }}.edit-panel { animation: panel-in var(--dur-fast) var(--ease-out-cubic);}
.field.checkbox { display: flex; align-items: center; gap: 10px;}.field.checkbox input { width: auto;}.field.checkbox span { margin: 0;}
/* --- record detail ---------------------------------------------------- */.titleblock { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 4px;}.titleblock__title { font: 900 26px/1.1 var(--serif); margin: 0;}.titleblock__artist { font: 700 15px/1 var(--mono); color: var(--ink-muted);}.titleblock__via { display: block; margin-top: 2px; font: 400 11px/1 var(--mono); color: var(--ink-muted); font-style: italic;}.titleblock__source { display: block; margin-top: 2px; font: 400 11px/1 var(--mono); color: var(--ink-muted); font-style: italic;}.stars { display: flex; align-items: center; gap: 8px; padding-top: 4px;}.stars__glyphs { font: 700 18px/1 var(--mono); color: var(--accent); letter-spacing: 1px;}.stars__count { font: 400 12px/1 var(--mono); color: var(--ink-muted);}
.detail-body { display: flex; flex-direction: column; gap: 18px; padding: 16px 18px 20px;}.grades { display: flex; gap: 12px;}.grade { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow-sm); padding: 12px 14px;}.grade__label { font: 700 10px/1.2 var(--mono); letter-spacing: 0.8px; color: var(--ink-muted);}.grade__value { font: 400 34px/1 var(--display); color: var(--owned);}.grade__name { font: 400 10px/1.2 var(--mono); color: var(--ink-muted);}
.detail-rows { background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow-sm); padding: 0 14px;}.detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font: 700 12px/1.3 var(--mono);}.detail-row:last-child { border-bottom: none;}.detail-row__label { color: var(--ink-muted); letter-spacing: 0.5px; flex-shrink: 0;}.detail-row__value { color: var(--ink); text-align: right; min-width: 0;}
.notes { background: var(--owned); border: 2px solid var(--ink); box-shadow: var(--shadow-sm); padding: 14px 16px 16px;}.notes__label { font: 700 11px/1 var(--mono); letter-spacing: 1.5px; color: var(--accent); margin: 0 0 8px;}.notes__text { font: italic 900 16px/1.4 var(--serif); color: var(--cream-fixed); margin: 0;}
.actions-block { display: flex; flex-direction: column; gap: 8px;}.actions-footnote { margin: 0; font: 400 12px/1.4 var(--mono); font-style: italic; color: var(--ink-muted);}