feat: 实现剧本创作与拆解前端工作台
This commit is contained in:
GouJ
+978
@@ -0,0 +1,978 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* 工作台主题：纸白内容、炭灰导航、克制的朱砂色操作。 */
|
||||
@theme {
|
||||
--color-ink: #292c28;
|
||||
--color-muted: #797c74;
|
||||
--color-faint: #acafa6;
|
||||
--color-line: #e6e7e0;
|
||||
--color-accent: #b45435;
|
||||
--color-danger: #b14236;
|
||||
--color-success: #4d7654;
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f6f7f3;
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
button,
|
||||
a,
|
||||
summary {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
button:not(:disabled),
|
||||
summary,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
outline-offset: 1px;
|
||||
}
|
||||
::selection {
|
||||
background: #ead7c8;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 216px minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 29px 16px 21px;
|
||||
background: #242722;
|
||||
color: #d2d5cb;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 43px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 33px;
|
||||
height: 36px;
|
||||
border: 1px solid #737265;
|
||||
border-radius: 5px;
|
||||
color: #e9dbc5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.brand strong {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
display: block;
|
||||
color: #f2f2e8;
|
||||
}
|
||||
.brand small {
|
||||
display: block;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.11em;
|
||||
color: #8e9386;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.sidebar-section-label {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 12px;
|
||||
color: #7e8577;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.side-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 11px 12px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
color: #a9b0a0;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background 0.15s,
|
||||
color 0.15s;
|
||||
}
|
||||
.side-link:hover {
|
||||
background: #2e332b;
|
||||
color: #edf0e6;
|
||||
}
|
||||
.side-link.selected {
|
||||
color: #f3f0e4;
|
||||
background: #393e32;
|
||||
}
|
||||
.side-link.selected svg {
|
||||
color: #c0c9aa;
|
||||
}
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.sidebar-divider {
|
||||
height: 1px;
|
||||
background: #393d34;
|
||||
margin: 13px 9px;
|
||||
}
|
||||
.sidebar-collapsed {
|
||||
grid-template-columns: 76px minmax(0, 1fr);
|
||||
}
|
||||
.sidebar-collapsed .sidebar-label {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-collapsed .sidebar {
|
||||
padding-inline: 12px;
|
||||
}
|
||||
.sidebar-collapsed .brand {
|
||||
padding: 0 9px;
|
||||
}
|
||||
.sidebar-collapsed .side-link {
|
||||
justify-content: center;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
.app-main {
|
||||
min-width: 0;
|
||||
}
|
||||
.topbar {
|
||||
height: 66px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-inline: 40px;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
background: #fbfcf8;
|
||||
}
|
||||
.topbar-note {
|
||||
font-size: 11px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.page-container {
|
||||
max-width: 1540px;
|
||||
margin-inline: auto;
|
||||
padding: 37px 40px 56px;
|
||||
}
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
margin: 9px 0 0;
|
||||
font-size: 27px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.11em;
|
||||
color: var(--color-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
.page-description {
|
||||
margin-top: 9px;
|
||||
color: var(--color-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 9px 14px;
|
||||
min-height: 36px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
.button-primary {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.button-primary:hover:not(:disabled) {
|
||||
background: #9e472c;
|
||||
}
|
||||
.button-secondary {
|
||||
background: #fff;
|
||||
border-color: #dcded5;
|
||||
color: #4b5146;
|
||||
}
|
||||
.button-secondary:hover:not(:disabled) {
|
||||
background: #f0f2ea;
|
||||
border-color: #c7cbbf;
|
||||
}
|
||||
.icon-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.icon-button:hover:not(:disabled) {
|
||||
background: #eeefe9;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.text-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--color-muted);
|
||||
padding: 6px 0;
|
||||
}
|
||||
.text-button:hover:not(:disabled) {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 7px;
|
||||
}
|
||||
.workspace-note {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
align-items: center;
|
||||
padding: 17px 20px;
|
||||
background: #edefe5;
|
||||
border: 1px solid #e2e5d7;
|
||||
border-radius: 5px;
|
||||
color: #656e53;
|
||||
font-size: 12px;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.filter-button {
|
||||
padding: 7px 11px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.filter-button:hover {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.filter-button.active {
|
||||
color: var(--color-ink);
|
||||
background: #e9ece2;
|
||||
}
|
||||
.search-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 5px;
|
||||
padding: 7px 10px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.search-field input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 11px;
|
||||
width: 145px;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.search-field:focus-within {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.project-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
.project-table th {
|
||||
padding: 13px 20px;
|
||||
background: #fafbf7;
|
||||
color: var(--color-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.project-table td {
|
||||
padding: 21px 20px;
|
||||
border-bottom: 1px solid #eeefe9;
|
||||
}
|
||||
.project-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.project-table tbody tr:hover {
|
||||
background: #fcfcf9;
|
||||
}
|
||||
.project-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
min-width: 220px;
|
||||
}
|
||||
.project-monogram {
|
||||
width: 39px;
|
||||
height: 45px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #eeeee5;
|
||||
border: 1px solid #e3e2d6;
|
||||
border-radius: 3px 5px 5px 3px;
|
||||
box-shadow: inset 3px 0 #dddfcf;
|
||||
flex-shrink: 0;
|
||||
font-family: 'Songti SC', serif;
|
||||
font-size: 17px;
|
||||
color: #6c715c;
|
||||
}
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.status-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.status-badge[data-status='completed'] {
|
||||
color: #557b50;
|
||||
}
|
||||
.status-badge[data-status='generating'],
|
||||
.status-badge[data-status='running'] {
|
||||
color: #aa8137;
|
||||
}
|
||||
.status-badge[data-status='failed'] {
|
||||
color: #b25040;
|
||||
}
|
||||
.status-badge[data-status='need_review'] {
|
||||
color: #977536;
|
||||
}
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
padding: 52px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
background: #1b201c70;
|
||||
}
|
||||
.dialog-content {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 51;
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
max-height: 90dvh;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 9px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 24px 90px #141c2329;
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-line);
|
||||
}
|
||||
.field-label {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #4b5047;
|
||||
}
|
||||
.input {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
color: var(--color-ink);
|
||||
border: 1px solid #d9ddd2;
|
||||
border-radius: 5px;
|
||||
padding: 9px 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.input::placeholder {
|
||||
color: #a3a79b;
|
||||
}
|
||||
.input:disabled {
|
||||
background: #f5f6f2;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.alert {
|
||||
padding: 12px 15px;
|
||||
border: 1px solid #dfdfca;
|
||||
border-radius: 5px;
|
||||
background: #f4f4e9;
|
||||
color: #6c6b45;
|
||||
font-size: 12px;
|
||||
line-height: 1.8;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.alert-error {
|
||||
border-color: #ebd4cd;
|
||||
background: #fcf4f0;
|
||||
color: #9f4a38;
|
||||
}
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.back-link:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.workflow-nav {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
border-bottom: 1px solid #dfe2d8;
|
||||
}
|
||||
.workflow-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 0 2px 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
color: var(--color-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.workflow-nav a.router-link-active {
|
||||
color: #454f37;
|
||||
border-color: #5d7050;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-code {
|
||||
font:
|
||||
10px ui-monospace,
|
||||
monospace;
|
||||
opacity: 0.6;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.stage-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.stage-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: #969c8d;
|
||||
font-size: 11px;
|
||||
}
|
||||
.stage-item.done {
|
||||
color: #607550;
|
||||
}
|
||||
.stage-arrow {
|
||||
margin-left: 12px;
|
||||
color: #c1c6b8;
|
||||
}
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
background: #e7eade;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #7d9167;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.tabs-list {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
background: #eceedf;
|
||||
border-radius: 5px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tab-trigger {
|
||||
padding: 7px 12px;
|
||||
font-size: 11px;
|
||||
border-radius: 3px;
|
||||
color: #7f8574;
|
||||
}
|
||||
.tab-trigger[data-state='active'] {
|
||||
background: #fff;
|
||||
color: #343c2a;
|
||||
box-shadow: 0 1px 3px #384e2110;
|
||||
}
|
||||
.tab-trigger span {
|
||||
margin-left: 6px;
|
||||
opacity: 0.65;
|
||||
font-size: 10px;
|
||||
}
|
||||
.content-with-history {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 207px;
|
||||
min-height: 480px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.history-panel {
|
||||
padding: 23px 21px;
|
||||
background: #fafbf7;
|
||||
border-left: 1px solid var(--color-line);
|
||||
}
|
||||
.timeline {
|
||||
margin: 0;
|
||||
padding: 0 0 0 9px;
|
||||
list-style: none;
|
||||
}
|
||||
.timeline li {
|
||||
position: relative;
|
||||
padding: 0 0 23px 17px;
|
||||
border-left: 1px solid #dfe3d7;
|
||||
}
|
||||
.timeline li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -3.5px;
|
||||
top: 5px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #c5ccbc;
|
||||
}
|
||||
.timeline li:last-child {
|
||||
border-left-color: transparent;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.timeline .timeline-latest::before {
|
||||
background: #8a9b6f;
|
||||
box-shadow: 0 0 0 3px #e9edde;
|
||||
}
|
||||
.script-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 166px minmax(0, 1fr);
|
||||
height: 100%;
|
||||
}
|
||||
.episode-list {
|
||||
border-right: 1px solid var(--color-line);
|
||||
padding: 0 7px 20px;
|
||||
background: #fdfefa;
|
||||
max-height: 850px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.episode-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 11px 9px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.episode-link:hover {
|
||||
background: #f2f4ec;
|
||||
}
|
||||
.episode-link.active {
|
||||
color: #666b43;
|
||||
background: #eeeee0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.episode-number {
|
||||
font:
|
||||
10px ui-monospace,
|
||||
monospace;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.script-page {
|
||||
padding: 34px 34px 50px;
|
||||
min-width: 0;
|
||||
}
|
||||
.script-summary {
|
||||
font-size: 12px;
|
||||
color: var(--color-muted);
|
||||
line-height: 1.9;
|
||||
padding: 17px 0 22px;
|
||||
margin-bottom: 23px;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
}
|
||||
.script-body {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 14px;
|
||||
line-height: 2.15;
|
||||
color: #474b42;
|
||||
}
|
||||
.script-notes {
|
||||
margin-top: 36px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-line);
|
||||
font-size: 12px;
|
||||
}
|
||||
.script-notes dt {
|
||||
color: #7f8267;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.script-notes dd {
|
||||
color: var(--color-muted);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 70px minmax(0, 1fr);
|
||||
gap: 15px;
|
||||
font-size: 12px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
.detail-grid dt {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.detail-grid dd {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.json-view {
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
padding: 16px;
|
||||
background: #f6f7f1;
|
||||
border-radius: 4px;
|
||||
font:
|
||||
11px/1.9 ui-monospace,
|
||||
monospace;
|
||||
}
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 7px;
|
||||
border-radius: 3px;
|
||||
background: #f1f3eb;
|
||||
color: #7b826d;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.breakdown-config {
|
||||
display: grid;
|
||||
grid-template-columns: 145px minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 28px;
|
||||
}
|
||||
.checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #c7cebb;
|
||||
border-radius: 3px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: white;
|
||||
}
|
||||
.checkbox[data-state='checked'] {
|
||||
background: #788761;
|
||||
border-color: #788761;
|
||||
color: white;
|
||||
}
|
||||
.group-preview {
|
||||
margin-top: 24px;
|
||||
border-top: 1px solid var(--color-line);
|
||||
padding-top: 20px;
|
||||
}
|
||||
.group-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid #e4e7db;
|
||||
background: #fafbf6;
|
||||
border-radius: 4px;
|
||||
padding: 8px 11px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.recovery-strip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 17px;
|
||||
border: 1px dashed #d8dccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.subject-ref {
|
||||
display: inline-flex;
|
||||
background: #f0f2e8;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
color: #727d58;
|
||||
font-size: 10px;
|
||||
}
|
||||
.subject-details summary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #7f846f;
|
||||
font-size: 11px;
|
||||
list-style: none;
|
||||
}
|
||||
.subject-details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.subject-details[open] summary svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.beat-section {
|
||||
margin-top: 25px;
|
||||
padding-top: 23px;
|
||||
border-top: 1px solid var(--color-line);
|
||||
}
|
||||
.beat-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.beat-number {
|
||||
color: #889174;
|
||||
font:
|
||||
11px ui-monospace,
|
||||
monospace;
|
||||
}
|
||||
.shot-row {
|
||||
display: flex;
|
||||
gap: 17px;
|
||||
padding: 17px;
|
||||
border: 1px solid #e7e9df;
|
||||
border-radius: 5px;
|
||||
background: #fdfefb;
|
||||
}
|
||||
.shot-label {
|
||||
flex-shrink: 0;
|
||||
width: 47px;
|
||||
font-size: 10px;
|
||||
color: #8a907d;
|
||||
}
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: -80px;
|
||||
left: 15px;
|
||||
padding: 10px 15px;
|
||||
background: white;
|
||||
border: 1px solid var(--color-accent);
|
||||
}
|
||||
.skip-link:focus {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 中等宽度保留正文空间，执行记录下移，移动端导航收为图标。 */
|
||||
@media (max-width: 1200px) {
|
||||
.page-container {
|
||||
padding-inline: 26px;
|
||||
}
|
||||
.topbar {
|
||||
padding-inline: 26px;
|
||||
}
|
||||
.content-with-history {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.history-panel {
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--color-line);
|
||||
}
|
||||
.timeline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
.breakdown-config {
|
||||
grid-template-columns: 120px minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.breakdown-config > button {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 62px minmax(0, 1fr);
|
||||
}
|
||||
.sidebar {
|
||||
padding: 23px 7px 15px;
|
||||
}
|
||||
.sidebar-label {
|
||||
display: none;
|
||||
}
|
||||
.brand {
|
||||
padding: 0 7px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.side-link {
|
||||
justify-content: center;
|
||||
padding: 11px 10px;
|
||||
}
|
||||
.sidebar-collapsed {
|
||||
grid-template-columns: 62px minmax(0, 1fr);
|
||||
}
|
||||
.sidebar-collapsed .sidebar {
|
||||
padding-inline: 7px;
|
||||
}
|
||||
.sidebar-collapsed .brand {
|
||||
padding-inline: 7px;
|
||||
}
|
||||
.page-container {
|
||||
padding: 25px 18px 40px;
|
||||
}
|
||||
.topbar {
|
||||
height: 56px;
|
||||
padding-inline: 18px;
|
||||
}
|
||||
.topbar-note {
|
||||
display: none;
|
||||
}
|
||||
.page-heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
font-size: 23px;
|
||||
}
|
||||
.nav-code {
|
||||
display: none;
|
||||
}
|
||||
.workflow-nav {
|
||||
gap: 24px;
|
||||
}
|
||||
.workspace-note {
|
||||
padding: 14px;
|
||||
font-size: 10px;
|
||||
gap: 9px;
|
||||
}
|
||||
.workspace-note span.mx-3 {
|
||||
margin-inline: 6px;
|
||||
}
|
||||
.script-workspace {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.episode-list {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
padding: 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
.episode-list > p {
|
||||
display: none;
|
||||
}
|
||||
.episode-link {
|
||||
width: auto;
|
||||
max-width: 170px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.script-page {
|
||||
padding: 25px 20px 35px;
|
||||
}
|
||||
.timeline {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.breakdown-config {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.dialog-content {
|
||||
padding: 22px;
|
||||
}
|
||||
.stage-strip {
|
||||
gap: 9px;
|
||||
}
|
||||
.stage-arrow {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.tab-trigger {
|
||||
padding: 7px 8px;
|
||||
}
|
||||
.project-table td,
|
||||
.project-table th {
|
||||
padding-inline: 14px;
|
||||
}
|
||||
.shot-row {
|
||||
gap: 12px;
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user