Lucas WintherandClaude Opus 5.5
0d4a1a61fa
- A link reused from the rehost cache keeps the expiry it was uploaded with, and links near expiry are uploaded again (a dead litterbox link could be filed). - History saving moves into HistoryKeeper (tested): removing an entry or clearing the history cancels a pending save and stops tracking the series on screen; a pending edit is saved before a new search, before opening another entry and when the page is hidden; opening an entry no longer re-saves the current one. - The "couldn't be saved" line sits outside the History list, so it shows even when the list is empty; a refused IndexedDB says history is off. - Recently searched bands wrap their meta line instead of cutting the count. Co-Authored-By: Claude Opus 5.5 <[email protected]>
471 lines
31 KiB
CSS
471 lines
31 KiB
CSS
/* mangabaka-seeder — the Obi Shelf in a console layout (DESIGN.md).
|
|
Every rule is scoped under .mbseed-app / .mbseed-panel / .mbseed-page: the same file is injected
|
|
into a shadow root on mangabaka.org by the userscript. Never pure black or white grounds: covers
|
|
with black or white backgrounds must still show their edge. */
|
|
|
|
.mbseed-page, .mbseed-frame, .mbseed-panel {
|
|
--mb-page: #efe9df;
|
|
--mb-panel: #e6dfd2;
|
|
--mb-slip: #f8f4ec;
|
|
--mb-ink: #1d1b22;
|
|
--mb-ink-2: #55505a;
|
|
--mb-obi: #d6362f;
|
|
--mb-obi-deep: #8f1d18;
|
|
--mb-obi-ink: #fffaf6;
|
|
--mb-obi-text: #a3261f; /* red for small text: 6.1:1 on the page, 5.5:1 on the panel */
|
|
--mb-teal: #2f6f6a;
|
|
--mb-kraft: #b59d78;
|
|
--mb-rail: #7d6847;
|
|
--mb-line: rgba(29, 27, 34, 0.2);
|
|
--mb-frame: rgba(29, 27, 34, 0.35);
|
|
--mb-track: rgba(29, 27, 34, 0.12);
|
|
--mb-shadow: rgba(29, 20, 10, 0.5);
|
|
--mb-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
|
--mb-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
|
|
--mb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d1b22' stroke-width='1.6'/%3E%3C/svg%3E");
|
|
color-scheme: light;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.mbseed-page, .mbseed-frame, .mbseed-panel {
|
|
--mb-page: #2a2520;
|
|
--mb-panel: #332d27;
|
|
--mb-slip: #3b342d;
|
|
--mb-ink: #ece4d6;
|
|
--mb-ink-2: #bdb2a2;
|
|
--mb-obi: #c42f28;
|
|
--mb-obi-deep: #8e1f1a;
|
|
--mb-obi-text: #f2867b;
|
|
--mb-teal: #6db3a9;
|
|
--mb-kraft: #6e5a3f;
|
|
--mb-rail: #4a3c2a;
|
|
--mb-line: rgba(236, 228, 214, 0.16);
|
|
--mb-frame: rgba(236, 228, 214, 0.35);
|
|
--mb-track: rgba(236, 228, 214, 0.14);
|
|
--mb-shadow: rgba(0, 0, 0, 0.6);
|
|
--mb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ece4d6' stroke-width='1.6'/%3E%3C/svg%3E");
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
/* The same dark tokens when the page forces dark (dark-reader.ts sets <html data-theme="dark">).
|
|
Keep identical to the block above; test/dark-reader.test.ts checks it. Never matches inside the
|
|
userscript's shadow root. */
|
|
:root[data-theme="dark"] .mbseed-page, :root[data-theme="dark"] .mbseed-frame, :root[data-theme="dark"] .mbseed-panel {
|
|
--mb-page: #2a2520;
|
|
--mb-panel: #332d27;
|
|
--mb-slip: #3b342d;
|
|
--mb-ink: #ece4d6;
|
|
--mb-ink-2: #bdb2a2;
|
|
--mb-obi: #c42f28;
|
|
--mb-obi-deep: #8e1f1a;
|
|
--mb-obi-text: #f2867b;
|
|
--mb-teal: #6db3a9;
|
|
--mb-kraft: #6e5a3f;
|
|
--mb-rail: #4a3c2a;
|
|
--mb-line: rgba(236, 228, 214, 0.16);
|
|
--mb-frame: rgba(236, 228, 214, 0.35);
|
|
--mb-track: rgba(236, 228, 214, 0.14);
|
|
--mb-shadow: rgba(0, 0, 0, 0.6);
|
|
--mb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ece4d6' stroke-width='1.6'/%3E%3C/svg%3E");
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ---------- the page around the app ---------- */
|
|
.mbseed-page { margin: 0; background: var(--mb-page); color: var(--mb-ink); font: 14px/1.5 var(--mb-sans); }
|
|
|
|
/* ---------- app frame: three columns, stacking in narrow containers ---------- */
|
|
/* The frame is the size container: a container query cannot restyle the container itself. */
|
|
.mbseed-frame { container-type: inline-size; }
|
|
.mbseed-app {
|
|
display: grid;
|
|
grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(260px, 300px);
|
|
background: var(--mb-page);
|
|
color: var(--mb-ink);
|
|
font: 14px/1.5 var(--mb-sans);
|
|
min-height: 100%;
|
|
}
|
|
.mbseed-app *, .mbseed-app *::before, .mbseed-app *::after { box-sizing: border-box; }
|
|
.mbseed-app [hidden] { display: none !important; }
|
|
.mbseed-app ::selection { background: color-mix(in srgb, var(--mb-obi) 30%, transparent); }
|
|
.mbseed-app :focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }
|
|
.mbseed-app .mbseed-review { display: contents; }
|
|
|
|
.mbseed-app .mbseed-side {
|
|
background: var(--mb-panel);
|
|
padding: 18px 16px 24px;
|
|
display: flex; flex-direction: column; gap: 14px;
|
|
position: sticky; top: 0; align-self: start;
|
|
min-height: 100vh; max-height: 100vh; overflow: auto;
|
|
scrollbar-width: thin; scrollbar-color: var(--mb-kraft) transparent;
|
|
}
|
|
.mbseed-app .mbseed-side-left { grid-column: 1; grid-row: 1; border-right: 1px solid var(--mb-line); }
|
|
.mbseed-app .mbseed-side-right { grid-column: 3; grid-row: 1; border-left: 1px solid var(--mb-line); }
|
|
.mbseed-app .mbseed-main, .mbseed-app .mbseed-empty { grid-column: 2; grid-row: 1; padding: 18px 26px 56px; min-width: 0; }
|
|
.mbseed-app:has(#review:not([hidden])) .mbseed-empty { display: none; }
|
|
|
|
@container (max-width: 1000px) {
|
|
.mbseed-app { grid-template-columns: minmax(0, 1fr); }
|
|
.mbseed-app .mbseed-side { position: static; min-height: 0; max-height: none; border: 0; }
|
|
.mbseed-app .mbseed-side-left { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--mb-line); }
|
|
.mbseed-app .mbseed-main, .mbseed-app .mbseed-empty { grid-column: 1; grid-row: 2; padding: 16px; }
|
|
.mbseed-app .mbseed-side-right { grid-column: 1; grid-row: 3; border-top: 3px solid var(--mb-ink); }
|
|
}
|
|
|
|
/* ---------- type and small parts ---------- */
|
|
.mbseed-app h2, .mbseed-app h3, .mbseed-app h4 { margin: 0; }
|
|
.mbseed-app .mbseed-cap {
|
|
font: 700 10.5px/1.2 var(--mb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mb-ink-2);
|
|
}
|
|
.mbseed-app .mbseed-hint { margin: 0; font-size: 12.5px; color: var(--mb-ink-2); }
|
|
.mbseed-app .mbseed-line { margin: 0; font-size: 13px; min-height: 1.5em; }
|
|
.mbseed-app .is-error { color: var(--mb-obi-text); font-weight: 600; }
|
|
.mbseed-app a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
|
|
.mbseed-app a:hover { color: var(--mb-obi-text); }
|
|
|
|
/* ---------- desk: slips, settings, the stamp ---------- */
|
|
.mbseed-app .mbseed-brand { margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--mb-ink); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
|
|
.mbseed-app .mbseed-install { margin-top: auto; font-size: 12.5px; }
|
|
.mbseed-panel .mbseed-install, .mbseed-panel .mbseed-brand { display: none; }
|
|
.mbseed-app .mbseed-desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
|
|
.mbseed-app .mbseed-slip {
|
|
display: grid; gap: 3px; padding: 7px 10px 8px;
|
|
background: var(--mb-slip); border: 1px solid var(--mb-line);
|
|
}
|
|
.mbseed-app .mbseed-slip-label { font: 700 10px var(--mb-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-ink-2); }
|
|
.mbseed-app .mbseed-slip-hint { font-size: 11.5px; color: var(--mb-ink-2); }
|
|
.mbseed-app .mbseed-slip input {
|
|
width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px dotted var(--mb-ink-2);
|
|
background: transparent; color: var(--mb-ink); font: 14px var(--mb-sans); text-overflow: ellipsis;
|
|
}
|
|
.mbseed-app .mbseed-slip input:focus { outline: none; border-bottom: 1.5px solid var(--mb-ink); }
|
|
.mbseed-app .mbseed-slip:focus-within { border-color: var(--mb-ink); }
|
|
.mbseed-app .mbseed-slip input::placeholder { color: var(--mb-ink-2); opacity: 0.7; }
|
|
|
|
.mbseed-app .mbseed-settings { display: grid; gap: 6px; }
|
|
.mbseed-app .mbseed-setting {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
|
font-size: 13px; color: var(--mb-ink-2); white-space: nowrap;
|
|
}
|
|
.mbseed-app .mbseed-settings { grid-template-columns: minmax(0, 1fr); }
|
|
.mbseed-app .mbseed-setting > span { flex: none; }
|
|
.mbseed-app .mbseed-setting > select { flex: 1 1 auto; min-width: 0; max-width: 11rem; text-overflow: ellipsis; }
|
|
.mbseed-app .mbseed-setting.is-stacked { flex-direction: column; align-items: stretch; gap: 3px; }
|
|
.mbseed-app .mbseed-setting.is-stacked input {
|
|
padding: 5px 8px; border: 1px solid var(--mb-line); background: var(--mb-slip); color: var(--mb-ink); font: 13px var(--mb-mono);
|
|
}
|
|
|
|
/* Editable at a glance: every select is a boxed field with a drawn chevron. */
|
|
.mbseed-app select, .mbseed-app .mbseed-select {
|
|
appearance: none; -webkit-appearance: none;
|
|
padding: 4px 26px 4px 9px;
|
|
border: 1px solid var(--mb-frame); border-bottom: 2px solid var(--mb-ink);
|
|
background: var(--mb-slip) var(--mb-chevron) no-repeat right 9px center;
|
|
color: var(--mb-ink); font: 600 13px var(--mb-sans); cursor: pointer;
|
|
}
|
|
.mbseed-app select:hover { border-color: var(--mb-ink); background-color: var(--mb-page); }
|
|
.mbseed-app select.is-small { padding: 2px 22px 2px 6px; font-size: 11.5px; background-position: right 7px center; min-width: 0; }
|
|
.mbseed-app select option { color: initial; }
|
|
|
|
.mbseed-app .mbseed-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
|
|
/* Checkboxes and radios share the jacket ticks' square language. */
|
|
.mbseed-app input[type="checkbox"]:not(.mbseed-tick), .mbseed-app input[type="radio"] {
|
|
appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 2px 0 0;
|
|
border: 1.5px solid var(--mb-ink); background: var(--mb-slip); display: inline-grid; place-content: center; cursor: pointer;
|
|
}
|
|
.mbseed-app input[type="checkbox"]:not(.mbseed-tick)::before, .mbseed-app input[type="radio"]::before {
|
|
content: ""; width: 7px; height: 7px; background: var(--mb-ink); transform: scale(0); transition: transform 0.12s;
|
|
}
|
|
.mbseed-app input[type="checkbox"]:checked::before, .mbseed-app input[type="radio"]:checked::before { transform: scale(1); }
|
|
/* Single choice reads round; multiple choice stays square like the jacket ticks. */
|
|
.mbseed-app input[type="radio"], .mbseed-app input[type="radio"]::before { border-radius: 50%; }
|
|
.mbseed-app .mbseed-check.is-main input:checked { border-color: var(--mb-obi); }
|
|
.mbseed-app .mbseed-check.is-main input::before { background: var(--mb-obi); }
|
|
.mbseed-app input:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
|
|
.mbseed-app .mbseed-button {
|
|
display: block; width: 100%; padding: 8px 12px;
|
|
border: 1.5px solid var(--mb-ink); background: transparent; color: var(--mb-ink);
|
|
font: 700 13px var(--mb-sans); cursor: pointer; text-align: center;
|
|
transition: background-color 0.15s, color 0.15s;
|
|
}
|
|
.mbseed-app .mbseed-button:hover:not(:disabled) { background: var(--mb-ink); color: var(--mb-page); }
|
|
.mbseed-app .mbseed-button.is-stamp {
|
|
background: var(--mb-obi); border-color: var(--mb-obi); color: var(--mb-obi-ink);
|
|
font-weight: 800; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 12px;
|
|
}
|
|
.mbseed-app .mbseed-button.is-stamp:hover:not(:disabled) { background: var(--mb-obi-deep); border-color: var(--mb-obi-deep); color: var(--mb-obi-ink); }
|
|
.mbseed-app .mbseed-button.is-quiet { border-color: transparent; text-decoration: underline; font-weight: 600; padding: 4px; }
|
|
.mbseed-app .mbseed-button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.mbseed-app .mbseed-run-actions { display: grid; gap: 2px; }
|
|
.mbseed-app .mbseed-run-actions:not(:has(button:not([hidden]))) { display: none; }
|
|
|
|
/* ---------- run status: stage plates that change in place ---------- */
|
|
.mbseed-app .mbseed-status { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
|
|
.mbseed-app .mbseed-plates { list-style: none; margin: 0; padding: 0; display: grid; }
|
|
.mbseed-app .mbseed-plates li span { flex: 1; }
|
|
.mbseed-app .mbseed-plates li em { font: 500 11.5px var(--mb-sans); font-style: normal; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
|
|
.mbseed-app .mbseed-plates li {
|
|
display: flex; align-items: center; gap: 8px; margin-top: -1px; padding: 5px 10px;
|
|
border: 1px solid var(--mb-line); font: 700 10.5px var(--mb-sans); letter-spacing: 0.1em; text-transform: uppercase;
|
|
color: var(--mb-ink-2); transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
.mbseed-app .mbseed-plates li::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; flex: none; }
|
|
.mbseed-app .mbseed-plates li[data-state="done"] { color: var(--mb-ink); }
|
|
.mbseed-app .mbseed-plates li[data-state="done"]::before { background: var(--mb-teal); border-color: var(--mb-teal); }
|
|
.mbseed-app .mbseed-plates li[data-state="active"] { background: var(--mb-ink); color: var(--mb-page); }
|
|
.mbseed-app .mbseed-plates li[data-state="active"]::before { background: var(--mb-obi); border-color: var(--mb-obi); animation: mbseed-blink 1s steps(2) infinite; }
|
|
.mbseed-app .mbseed-plates li[data-state="failed"] { background: var(--mb-obi); color: var(--mb-obi-ink); }
|
|
.mbseed-app .mbseed-progress { width: 100%; height: 3px; appearance: none; border: 0; background: var(--mb-track); }
|
|
.mbseed-app .mbseed-progress::-webkit-progress-bar { background: var(--mb-track); }
|
|
.mbseed-app .mbseed-progress::-webkit-progress-value { background: var(--mb-teal); }
|
|
.mbseed-app .mbseed-progress::-moz-progress-bar { background: var(--mb-teal); }
|
|
.mbseed-app .mbseed-stage { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
|
|
.mbseed-app .mbseed-notes-cap:has(+ .mbseed-warnings:empty) { display: none; }
|
|
.mbseed-app .mbseed-warnings { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 14rem; overflow: auto; }
|
|
.mbseed-app .mbseed-warnings li { font-size: 12px; color: var(--mb-ink-2); padding-left: 12px; position: relative; overflow-wrap: anywhere; }
|
|
.mbseed-app .mbseed-warnings li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--mb-kraft); }
|
|
|
|
/* ---------- history: a ruled list on the left desk (spec 002 §3.4) ---------- */
|
|
.mbseed-app .mbseed-recent { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
|
|
.mbseed-app .mbseed-recent-list {
|
|
list-style: none; margin: 0; padding: 0; display: grid; max-height: 24rem; overflow: auto;
|
|
scrollbar-width: thin; scrollbar-color: var(--mb-kraft) transparent;
|
|
}
|
|
.mbseed-app .mbseed-recent-list li { display: flex; margin-top: -1px; border: 1px solid var(--mb-line); }
|
|
.mbseed-app .mbseed-recent-open {
|
|
flex: 1; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center;
|
|
padding: 6px 8px; border: 0; background: transparent; color: var(--mb-ink-2); font: inherit; text-align: left; cursor: pointer;
|
|
transition: background-color 0.15s;
|
|
}
|
|
.mbseed-app .mbseed-recent-open:hover, .mbseed-app .mbseed-recent-open[aria-current="true"] { background: var(--mb-slip); }
|
|
.mbseed-app .mbseed-recent-list .mbseed-recent-thumb {
|
|
display: block; width: 30px; height: 40px; object-fit: contain; background: var(--mb-page);
|
|
outline: 1px solid var(--mb-frame); outline-offset: -1px;
|
|
}
|
|
.mbseed-app .mbseed-recent-text { display: grid; gap: 1px; min-width: 0; }
|
|
.mbseed-app .mbseed-recent-title { font-size: 13px; font-weight: 700; color: var(--mb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.mbseed-app .mbseed-recent-meta { font-size: 11.5px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.mbseed-app .mbseed-recent-marks { font-size: 11.5px; font-weight: 600; color: var(--mb-teal); }
|
|
.mbseed-app .mbseed-recent-remove {
|
|
flex: none; width: 28px; display: grid; place-items: center; padding: 0;
|
|
border: 0; border-left: 1px solid var(--mb-line); background: transparent; color: var(--mb-ink-2); cursor: pointer;
|
|
transition: background-color 0.15s, color 0.15s;
|
|
}
|
|
.mbseed-app .mbseed-recent-remove:hover { background: var(--mb-ink); color: var(--mb-page); }
|
|
/* The list scrolls, so an outside ring would be clipped: draw it inside the row. */
|
|
.mbseed-app .mbseed-recent-open:focus-visible, .mbseed-app .mbseed-recent-remove:focus-visible { outline-offset: -3px; }
|
|
.mbseed-app .mbseed-recent-status { font-size: 12.5px; }
|
|
.mbseed-app .mbseed-recent-status:not(.is-error) { color: var(--mb-ink-2); }
|
|
.mbseed-app .mbseed-recent-status:empty { display: none; }
|
|
.mbseed-app .mbseed-recent > .is-quiet { justify-self: start; width: auto; margin-left: -5.5px; font-size: 12.5px; color: var(--mb-ink-2); }
|
|
|
|
/* ---------- empty state ---------- */
|
|
.mbseed-app .mbseed-empty { max-width: 46rem; }
|
|
.mbseed-app .mbseed-empty h2 { font-size: clamp(22px, 3cqi, 30px); font-weight: 800; letter-spacing: -0.02em; margin: 24px 0 10px; text-wrap: balance; }
|
|
.mbseed-app .mbseed-empty p { color: var(--mb-ink-2); max-width: 62ch; margin: 0 0 10px; font-size: 14px; }
|
|
.mbseed-app .mbseed-empty strong { color: var(--mb-ink); }
|
|
/* Recently searched: the same books on the same kraft rail, smaller, each opening its history entry. */
|
|
.mbseed-app .mbseed-recent-shelf-wrap { display: grid; gap: 14px; margin-top: 34px; }
|
|
.mbseed-app .mbseed-recent-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); align-items: end; column-gap: 0; row-gap: 30px; }
|
|
.mbseed-app .mbseed-recent-book {
|
|
display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 0 9px;
|
|
border: 0; border-bottom: 10px solid var(--mb-kraft); box-shadow: 0 2px 0 var(--mb-rail);
|
|
background: transparent; color: var(--mb-ink); font: inherit; text-align: left; cursor: pointer;
|
|
}
|
|
.mbseed-app .mbseed-recent-jacket { display: block; }
|
|
.mbseed-app .mbseed-recent-book .mbseed-recent-thumb {
|
|
display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; object-position: bottom;
|
|
outline: 1px solid var(--mb-frame); outline-offset: -1px; box-shadow: 0 8px 14px -8px var(--mb-shadow);
|
|
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.mbseed-app .mbseed-recent-book .mbseed-recent-thumb.is-blank { height: 120px; background: var(--mb-panel); box-shadow: none; }
|
|
.mbseed-app .mbseed-recent-book:hover .mbseed-recent-thumb { transform: translateY(-4px); }
|
|
.mbseed-app .mbseed-recent-band {
|
|
position: relative; margin-top: -12px; display: grid; gap: 1px; padding: 5px 7px 6px;
|
|
background: var(--mb-slip); border: 1px solid var(--mb-line); border-top: 3px solid var(--mb-ink);
|
|
}
|
|
.mbseed-app .mbseed-recent-band .mbseed-recent-title { font-size: 12px; }
|
|
.mbseed-app .mbseed-recent-band .mbseed-recent-meta { color: var(--mb-ink-2); white-space: normal; text-overflow: clip; }
|
|
|
|
/* ---------- review head ---------- */
|
|
.mbseed-app .mbseed-review-head {
|
|
display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap;
|
|
border-bottom: 1px solid var(--mb-line); padding-bottom: 10px;
|
|
}
|
|
.mbseed-app .mbseed-title { font-size: clamp(24px, 3.2cqi, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; overflow-wrap: anywhere; }
|
|
.mbseed-app .mbseed-source { margin: 0; color: var(--mb-ink-2); font-size: 14px; }
|
|
.mbseed-app .mbseed-views { margin-left: auto; display: flex; border: 1.5px solid var(--mb-ink); }
|
|
.mbseed-app .mbseed-view { border: 0; background: transparent; color: var(--mb-ink); padding: 4px 12px; font: 700 12.5px var(--mb-sans); cursor: pointer; }
|
|
.mbseed-app .mbseed-view[aria-pressed="true"] { background: var(--mb-ink); color: var(--mb-page); }
|
|
.mbseed-app .mbseed-found { margin: 8px 0 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 13px; color: var(--mb-ink-2); }
|
|
.mbseed-app .mbseed-found .is-quiet { width: auto; color: var(--mb-ink); }
|
|
.mbseed-app .mbseed-notice {
|
|
margin: 12px 0 0; padding: 8px 12px; font-size: 13px;
|
|
background: color-mix(in srgb, var(--mb-obi) 12%, var(--mb-page)); border-top: 2px solid var(--mb-obi);
|
|
}
|
|
.mbseed-app .mbseed-default { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 18px; align-items: baseline; margin-top: 10px; }
|
|
.mbseed-app .mbseed-default .mbseed-check { font-weight: 700; }
|
|
.mbseed-app .mbseed-count { margin: 0; color: var(--mb-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
@container (max-width: 700px) { .mbseed-app .mbseed-default { grid-template-columns: 1fr; } }
|
|
|
|
/* ---------- the shelf ---------- */
|
|
.mbseed-app .mbseed-shelf {
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense;
|
|
align-items: end; column-gap: 0; row-gap: 32px; margin-top: 18px;
|
|
}
|
|
.mbseed-app .mbseed-book { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
|
|
.mbseed-app .mbseed-shelf .mbseed-book {
|
|
padding: 0 10px; border-bottom: 10px solid var(--mb-kraft); box-shadow: 0 2px 0 var(--mb-rail);
|
|
}
|
|
.mbseed-app .mbseed-shelf .mbseed-book.is-wide { grid-column: span 2; }
|
|
@container (max-width: 420px) { .mbseed-app .mbseed-shelf .mbseed-book.is-wide { grid-column: span 1; } }
|
|
|
|
.mbseed-app .mbseed-jacket { position: relative; display: block; cursor: pointer; }
|
|
.mbseed-app .mbseed-jacket img {
|
|
display: block; width: 100%; height: auto; max-height: 250px; object-fit: contain; object-position: bottom;
|
|
outline: 1px solid var(--mb-frame); outline-offset: -1px;
|
|
box-shadow: 0 8px 14px -8px var(--mb-shadow);
|
|
transition: filter 0.25s, opacity 0.25s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.mbseed-app .mbseed-tick {
|
|
position: absolute; top: 0; left: 0; margin: 0; width: 22px; height: 22px; cursor: pointer;
|
|
appearance: none; -webkit-appearance: none; background: var(--mb-slip); border: 1.5px solid var(--mb-ink);
|
|
display: grid; place-items: center;
|
|
}
|
|
.mbseed-app .mbseed-tick::after { content: ""; width: 10px; height: 10px; background: var(--mb-ink); transform: scale(0); transition: transform 0.15s; }
|
|
.mbseed-app .mbseed-tick:checked::after { transform: scale(1); }
|
|
|
|
.mbseed-app .mbseed-obi {
|
|
position: relative; margin-top: -14px; display: grid; gap: 4px; padding: 6px 8px 8px;
|
|
background: var(--mb-slip); border: 1px solid var(--mb-line); border-top: 3px solid var(--mb-ink);
|
|
font-size: 11.5px; transition: opacity 0.25s;
|
|
}
|
|
.mbseed-app .mbseed-obi p { margin: 0; }
|
|
.mbseed-app .mbseed-obi-role { font: 800 10.5px var(--mb-sans); letter-spacing: 0.12em; text-transform: uppercase; }
|
|
.mbseed-app .mbseed-obi-facts { color: var(--mb-ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
|
|
.mbseed-app .mbseed-seen { position: relative; height: 5px; background: var(--mb-track); }
|
|
.mbseed-app .mbseed-seen i { position: absolute; top: 0; bottom: 0; background: var(--mb-ink); }
|
|
.mbseed-app .mbseed-obi-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; }
|
|
.mbseed-app .mbseed-obi-fields select { width: 100%; min-width: 0; text-overflow: ellipsis; }
|
|
.mbseed-app .mbseed-obi-seen-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
|
.mbseed-app .mbseed-obi-seen-row .mbseed-seen { flex: 1; min-width: 0; }
|
|
/* Per-cover fields are printed on the band: underline and chevron, boxed only on hover or focus. */
|
|
.mbseed-app .mbseed-obi select.is-small {
|
|
border: 1px solid transparent; border-bottom: 1px solid currentColor; background-color: transparent; color: inherit;
|
|
padding: 1px 14px 1px 0; font-weight: 600; background-position: right 1px center;
|
|
}
|
|
.mbseed-app .mbseed-obi select.is-small:hover, .mbseed-app .mbseed-obi select.is-small:focus-visible {
|
|
border-color: var(--mb-frame); border-bottom-color: currentColor; background-color: var(--mb-page); color: var(--mb-ink); padding-left: 4px;
|
|
}
|
|
.mbseed-app .mbseed-note {
|
|
width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px dotted var(--mb-ink-2);
|
|
background: transparent; color: inherit; font: 11.5px var(--mb-sans); text-overflow: ellipsis;
|
|
}
|
|
.mbseed-app .mbseed-note:focus { outline: none; border-bottom: 1.5px solid currentColor; }
|
|
.mbseed-app .mbseed-obi-hosted { color: var(--mb-teal); font-weight: 700; font-size: 10.5px; flex: none; }
|
|
.mbseed-app .mbseed-obi-error { color: var(--mb-obi-text); font-weight: 600; overflow-wrap: anywhere; }
|
|
|
|
.mbseed-app .mbseed-book.is-main .mbseed-obi { background: var(--mb-obi); color: var(--mb-obi-ink); border-color: var(--mb-obi); border-top-color: var(--mb-obi-deep); }
|
|
.mbseed-app .mbseed-book.is-main .mbseed-obi-facts { color: var(--mb-obi-ink); }
|
|
.mbseed-app .mbseed-book.is-main select.is-small { background-image: none; }
|
|
.mbseed-app .mbseed-book.is-main .mbseed-seen { background: color-mix(in srgb, var(--mb-obi-ink) 30%, transparent); }
|
|
.mbseed-app .mbseed-book.is-main .mbseed-seen i { background: var(--mb-obi-ink); }
|
|
.mbseed-app .mbseed-book.is-main .mbseed-obi-hosted { color: var(--mb-obi-ink); }
|
|
.mbseed-app .mbseed-book.is-main .mbseed-obi-error { color: var(--mb-obi-ink); }
|
|
/* The page-wide highlight is red too: reverse the band's colours so a selection shows. */
|
|
.mbseed-app .mbseed-book.is-main ::selection { background: var(--mb-obi-ink); color: var(--mb-obi-deep); }
|
|
.mbseed-app .mbseed-book.is-off .mbseed-jacket img { filter: grayscale(1) contrast(0.85); opacity: 0.5; transform: translateY(8px); }
|
|
.mbseed-app .mbseed-book.is-off .mbseed-obi-role { color: var(--mb-ink-2); }
|
|
|
|
/* The one authored motion: a new run's covers are shelved, left to right. */
|
|
.mbseed-app .is-fresh .mbseed-book { animation: mbseed-shelve 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(min(var(--i), 24) * 28ms); }
|
|
@keyframes mbseed-shelve { from { transform: translateY(14px); opacity: 0.35; } }
|
|
@keyframes mbseed-blink { 50% { opacity: 0.3; } }
|
|
|
|
/* ---------- the timeline: a centre rail of years, covers alternating either side ---------- */
|
|
.mbseed-app .mbseed-timeline { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
|
|
.mbseed-app .mbseed-timeline::before {
|
|
content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 5px; transform: translateX(-50%);
|
|
border-left: 1px solid var(--mb-ink); border-right: 1px solid var(--mb-ink);
|
|
}
|
|
.mbseed-app .mbseed-year { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: start; padding-bottom: 28px; }
|
|
.mbseed-app .mbseed-year-side { display: grid; gap: 22px; }
|
|
.mbseed-app .mbseed-year-side.is-right { padding-top: 46px; }
|
|
.mbseed-app .mbseed-year-key {
|
|
position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center; padding: 3px 0;
|
|
background: var(--mb-page); color: var(--mb-obi-text); font: 800 13px var(--mb-sans); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
|
|
}
|
|
.mbseed-app .mbseed-year-side.is-left { grid-column: 1; grid-row: 1; }
|
|
.mbseed-app .mbseed-year-side.is-right { grid-column: 3; grid-row: 1; }
|
|
.mbseed-app .mbseed-timeline .mbseed-book { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: end; }
|
|
.mbseed-app .mbseed-timeline .mbseed-book.is-wide { grid-template-columns: minmax(0, 1fr); }
|
|
.mbseed-app .mbseed-timeline .mbseed-jacket img { max-height: 170px; object-position: bottom left; }
|
|
.mbseed-app .mbseed-timeline .mbseed-obi { margin-top: 0; }
|
|
.mbseed-app .mbseed-timeline .mbseed-book.is-off .mbseed-jacket img { transform: none; }
|
|
@container (max-width: 760px) {
|
|
.mbseed-app .mbseed-timeline::before { left: 28px; }
|
|
.mbseed-app .mbseed-year { grid-template-columns: 56px minmax(0, 1fr); }
|
|
.mbseed-app .mbseed-year-key { grid-column: 1; }
|
|
.mbseed-app .mbseed-year-side.is-left, .mbseed-app .mbseed-year-side.is-right { grid-column: 2; grid-row: auto; padding-top: 0; }
|
|
.mbseed-app .mbseed-year-side.is-right { margin-top: 22px; }
|
|
}
|
|
|
|
/* ---------- already on MangaBaka ---------- */
|
|
.mbseed-app .mbseed-present { margin-top: 36px; border-top: 1px solid var(--mb-line); padding-top: 10px; }
|
|
.mbseed-app .mbseed-present summary { cursor: pointer; font-weight: 700; }
|
|
.mbseed-app .mbseed-present-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
|
|
.mbseed-app .mbseed-present-list li { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--mb-ink-2); }
|
|
.mbseed-app .mbseed-present-list img { width: 48px; height: 48px; object-fit: contain; outline: 1px solid var(--mb-frame); outline-offset: -1px; }
|
|
|
|
/* ---------- right panel: rehost, paste, file ---------- */
|
|
.mbseed-app .mbseed-block { display: grid; gap: 8px; }
|
|
.mbseed-app .mbseed-hosts { margin: 0; padding: 0; border: 0; display: grid; }
|
|
.mbseed-app .mbseed-hosts label {
|
|
display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 6px 8px; margin-top: -1px;
|
|
border: 1px solid var(--mb-line); font-size: 13px; cursor: pointer; color: var(--mb-ink-2);
|
|
}
|
|
.mbseed-app .mbseed-hosts label:has(input:checked) { background: var(--mb-slip); color: var(--mb-ink); font-weight: 600; }
|
|
.mbseed-app .mbseed-hosts label:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
|
|
.mbseed-app .mbseed-hosts label > span { grid-column: 2; }
|
|
.mbseed-app .mbseed-hosts small { grid-column: 2; font-weight: 400; font-size: 11.5px; color: var(--mb-ink-2); }
|
|
.mbseed-app .mbseed-hosts small.is-warn { display: none; }
|
|
.mbseed-app .mbseed-hosts label:has(input:checked) small.is-warn { display: block; color: var(--mb-ink); }
|
|
.mbseed-app textarea {
|
|
width: 100%; resize: vertical; padding: 8px; border: 1px solid var(--mb-line); background: var(--mb-slip); color: var(--mb-ink);
|
|
font: 11.5px/1.45 var(--mb-mono);
|
|
}
|
|
.mbseed-app .mbseed-link { font-size: 13px; }
|
|
.mbseed-app .mbseed-final { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--mb-line); }
|
|
.mbseed-app .mbseed-final .is-stamp { margin-top: 10px; }
|
|
.mbseed-app .mbseed-diff { margin: 0; padding: 0; list-style: none; font-size: 12px; display: grid; gap: 2px; max-height: 12rem; overflow: auto; }
|
|
.mbseed-app .mbseed-diff li { overflow-wrap: anywhere; }
|
|
.mbseed-app .mbseed-diff .is-added { color: var(--mb-teal); }
|
|
.mbseed-app .mbseed-diff .is-removed { color: var(--mb-obi-text); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mbseed-app *, .mbseed-app *::before, .mbseed-app *::after { animation: none !important; transition: none !important; }
|
|
}
|
|
|
|
/* ---------- userscript panel chrome ---------- */
|
|
.mbseed-panel { background: var(--mb-page); color: var(--mb-ink); font: 14px/1.5 var(--mb-sans); border: 1px solid var(--mb-frame); box-shadow: 0 18px 40px -18px var(--mb-shadow); min-height: 100%; }
|
|
.mbseed-panel *, .mbseed-panel *::before, .mbseed-panel *::after { box-sizing: border-box; }
|
|
.mbseed-panel .mbseed-panel-bar {
|
|
position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
|
|
padding: 10px 16px; background: var(--mb-panel); border-bottom: 3px solid var(--mb-ink);
|
|
font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
|
|
}
|
|
.mbseed-panel .mbseed-panel-close {
|
|
display: grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
|
|
border: 1.5px solid var(--mb-ink); background: transparent; color: var(--mb-ink);
|
|
}
|
|
.mbseed-panel .mbseed-panel-close:hover { background: var(--mb-ink); color: var(--mb-page); }
|
|
.mbseed-panel .mbseed-settings-panel { padding: 10px 16px; border-bottom: 1px solid var(--mb-line); background: var(--mb-panel); font-size: 13px; }
|
|
.mbseed-panel .mbseed-settings-panel summary { cursor: pointer; font-weight: 700; }
|
|
.mbseed-panel .mbseed-settings-panel label { display: grid; gap: 3px; margin-top: 8px; color: var(--mb-ink-2); }
|
|
.mbseed-panel .mbseed-settings-panel input {
|
|
padding: 5px 8px; border: 1px solid var(--mb-line); background: var(--mb-slip); color: var(--mb-ink); font: 13px var(--mb-mono);
|
|
}
|
|
.mbseed-panel .mbseed-settings-panel small { display: block; margin-top: 4px; color: var(--mb-ink-2); }
|
|
.mbseed-panel :focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }
|