563 lines
11 KiB
CSS
563 lines
11 KiB
CSS
body {
|
|
min-width: 1180px;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tabs button {
|
|
align-items: center;
|
|
border-bottom: 2px solid transparent;
|
|
color: #64748b;
|
|
display: inline-flex;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
gap: 8px;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.tabs button.active {
|
|
border-bottom-color: #1d4ed8;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.panel {
|
|
display: none;
|
|
}
|
|
|
|
.panel.active {
|
|
display: block;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.metric-card {
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
text-align: left;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.metric-card:hover {
|
|
border-color: #93c5fd;
|
|
}
|
|
|
|
.badge {
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.badge-red { background: #fef2f2; color: #b91c1c; }
|
|
.badge-amber { background: #fffbeb; color: #b45309; }
|
|
.badge-green { background: #ecfdf5; color: #047857; }
|
|
.badge-blue { background: #eff6ff; color: #1d4ed8; }
|
|
.badge-slate { background: #f1f5f9; color: #475569; }
|
|
|
|
.btn {
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
display: inline-flex;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
min-height: 38px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
[data-lucide] {
|
|
height: 16px;
|
|
stroke-width: 2;
|
|
width: 16px;
|
|
}
|
|
|
|
.btn-primary { background: #1d4ed8; color: white; }
|
|
.btn-primary:hover { background: #1e40af; }
|
|
.btn-ghost { background: white; border: 1px solid #e2e8f0; color: #334155; }
|
|
.btn-ghost:hover { background: #f8fafc; }
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
min-height: 38px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 96px;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 12px 14px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
th {
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
td {
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
.btn-sm {
|
|
min-height: 30px;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.drawer {
|
|
background: rgba(15, 23, 42, 0.28);
|
|
display: none;
|
|
inset: 0;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
z-index: 50;
|
|
}
|
|
|
|
.drawer.open {
|
|
display: flex;
|
|
}
|
|
|
|
.drawer-panel {
|
|
background: white;
|
|
box-shadow: -18px 0 45px rgba(15, 23, 42, 0.14);
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
width: 720px;
|
|
}
|
|
|
|
.file-link {
|
|
color: #1d4ed8;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.drawer-section-title {
|
|
color: #334155;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.drawer-fields {
|
|
display: grid;
|
|
gap: 1px;
|
|
}
|
|
|
|
.drawer-field {
|
|
align-items: start;
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: 148px minmax(0, 1fr);
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.drawer-field-label {
|
|
align-items: center;
|
|
color: #64748b;
|
|
display: flex;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
gap: 8px;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.drawer-field-label [data-lucide] {
|
|
color: #94a3b8;
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
.drawer-field-control {
|
|
min-width: 0;
|
|
}
|
|
|
|
.drawer-value {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 5px;
|
|
color: #0f172a;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
min-height: 30px;
|
|
padding: 4px 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.drawer-value:hover {
|
|
background: #f8fafc;
|
|
border-color: #e2e8f0;
|
|
}
|
|
|
|
.drawer-value:focus {
|
|
background: white;
|
|
border-color: #60a5fa;
|
|
outline: none;
|
|
}
|
|
|
|
.drawer-textarea {
|
|
line-height: 1.45;
|
|
min-height: 54px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.activity-item {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 7px;
|
|
display: flex;
|
|
font-size: 13px;
|
|
gap: 9px;
|
|
padding: 9px;
|
|
}
|
|
|
|
.activity-icon {
|
|
align-items: center;
|
|
background: #dbeafe;
|
|
border-radius: 999px;
|
|
color: #1d4ed8;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
height: 24px;
|
|
justify-content: center;
|
|
width: 24px;
|
|
}
|
|
|
|
.activity-icon [data-lucide] {
|
|
height: 13px;
|
|
width: 13px;
|
|
}
|
|
|
|
.inline-form input,
|
|
.inline-form select {
|
|
height: 40px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
background: white;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.inline-form input:focus,
|
|
.inline-form select:focus {
|
|
border-color: #3b82f6;
|
|
outline: none;
|
|
}
|
|
|
|
.clickable-row {
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.clickable-row:hover {
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
.save-status {
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.save-status[data-tone="success"] {
|
|
color: #059669;
|
|
}
|
|
|
|
.save-status[data-tone="danger"] {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.comment-box {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: white;
|
|
}
|
|
|
|
.comment-box:focus-within {
|
|
border-color: #93c5fd;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
|
|
}
|
|
|
|
/* Squire editor */
|
|
.squire-toolbar {
|
|
align-items: center;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
gap: 2px;
|
|
padding: 5px 6px;
|
|
}
|
|
|
|
.squire-btn {
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #475569;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
height: 28px;
|
|
justify-content: center;
|
|
transition: background 0.15s;
|
|
width: 28px;
|
|
}
|
|
|
|
.squire-btn:hover {
|
|
background: #e2e8f0;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.squire-btn [data-lucide] {
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
.squire-sep {
|
|
background: #e2e8f0;
|
|
display: inline-block;
|
|
height: 18px;
|
|
margin: 0 2px;
|
|
width: 1px;
|
|
}
|
|
|
|
.squire-editor {
|
|
border: 0;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
min-height: 80px;
|
|
padding: 10px 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.squire-editor p {
|
|
margin: 0;
|
|
min-height: 1em;
|
|
}
|
|
|
|
.squire-editor ul,
|
|
.squire-editor ol {
|
|
list-style: revert;
|
|
padding-left: 24px;
|
|
margin: 4px 0;
|
|
}
|
|
.squire-editor ul {
|
|
list-style-type: disc;
|
|
}
|
|
.squire-editor ol {
|
|
list-style-type: decimal;
|
|
}
|
|
.squire-editor li {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.squire-editor blockquote {
|
|
border-left: 3px solid #e2e8f0;
|
|
color: #64748b;
|
|
margin: 4px 0;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.comment-toolbar {
|
|
align-items: center;
|
|
background: #f8fafc;
|
|
border-top: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 7px 8px;
|
|
}
|
|
|
|
.comment-hint {
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.toolbar-icon {
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
padding: 3px;
|
|
transition: background 0.15s;
|
|
}
|
|
.toolbar-icon:hover {
|
|
background: #e2e8f0;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.btn:disabled,
|
|
.btn:disabled:hover {
|
|
background: #e2e8f0;
|
|
border-color: #e2e8f0;
|
|
color: #94a3b8;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.activity-delete {
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
color: #94a3b8;
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
height: 26px;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: background 0.15s, color 0.15s, opacity 0.15s;
|
|
width: 26px;
|
|
}
|
|
|
|
.activity-item:hover .activity-delete {
|
|
opacity: 1;
|
|
}
|
|
|
|
.activity-delete:hover {
|
|
background: #fee2e2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.activity-delete [data-lucide] {
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
/* Trix content in activity items */
|
|
.activity-item .rich-content {
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
.activity-item .rich-content div {
|
|
font-size: 13px;
|
|
}
|
|
.activity-item .rich-content strong {
|
|
font-weight: 600;
|
|
}
|
|
.activity-item .rich-content a {
|
|
color: #1d4ed8;
|
|
text-decoration: underline;
|
|
}
|
|
.activity-item .rich-content ul,
|
|
.activity-item .rich-content ol {
|
|
padding-left: 24px;
|
|
list-style: revert;
|
|
}
|
|
.activity-item .rich-content ul {
|
|
list-style-type: disc;
|
|
}
|
|
.activity-item .rich-content ol {
|
|
list-style-type: decimal;
|
|
}
|
|
.activity-item .rich-content ul,
|
|
.activity-item .rich-content ol,
|
|
.activity-item .rich-content li {
|
|
margin: 2px 0;
|
|
}
|
|
.activity-item .rich-content blockquote {
|
|
border-left: 3px solid #e2e8f0;
|
|
padding-left: 10px;
|
|
color: #64748b;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* Task Modal — Plane style */
|
|
.task-modal { display: none; }
|
|
.task-modal.active { display: block; }
|
|
.task-overlay {
|
|
position: fixed; inset: 0; background: rgba(15,23,42,0.35); z-index: 200;
|
|
display: flex; align-items: flex-start; justify-content: center;
|
|
padding-top: 48px; overflow-y: auto;
|
|
}
|
|
.task-panel {
|
|
background: #fff; border-radius: 12px; width: 1000px; max-width: 96vw;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.12); margin-bottom: 48px;
|
|
}
|
|
.task-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.task-title { color: #1e293b; font-size: 15px; font-weight: 600; }
|
|
.task-close {
|
|
color: #94a3b8; background: none; border: none; cursor: pointer;
|
|
padding: 4px; border-radius: 6px; display: flex;
|
|
}
|
|
.task-close:hover { color: #475569; background: #f1f5f9; }
|
|
.task-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
|
|
.task-group {
|
|
background: #fff; border-radius: 8px;
|
|
border: 1px solid #e2e8f0; overflow: hidden;
|
|
}
|
|
.task-group-hd {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 10px 16px; background: #f8fafc;
|
|
}
|
|
.task-group-icon { color: #64748b; display: flex; }
|
|
.task-group-label { color: #334155; font-size: 13px; font-weight: 600; }
|
|
.task-group-n {
|
|
background: #e2e8f0; color: #64748b; font-size: 11px;
|
|
padding: 1px 7px; border-radius: 10px;
|
|
}
|
|
.task-group-list { display: flex; flex-direction: column; }
|
|
.task-row {
|
|
display: flex; align-items: center; gap: 16px;
|
|
padding: 10px 16px; border-top: 1px solid #f1f5f9;
|
|
cursor: pointer;
|
|
}
|
|
.task-row:hover { background: #f8fafc; }
|
|
.task-dot { display: flex; color: #cbd5e1; flex-shrink: 0; }
|
|
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
.task-name { color: #1e293b; font-size: 13px; }
|
|
.task-desc { color: #94a3b8; font-size: 12px; word-wrap: break-word; overflow-wrap: break-word; }
|
|
.task-blocker { color: #dc2626; font-size: 12px; word-wrap: break-word; overflow-wrap: break-word; }
|
|
.task-col { color: #64748b; font-size: 12px; white-space: nowrap; width: 100px; text-align: right; }
|
|
.task-col-badge { color: #64748b; font-size: 12px; white-space: nowrap; width: 90px; text-align: right; }
|
|
.task-none { color: #94a3b8; font-size: 13px; padding: 12px 14px; text-align: center; border-top: 1px solid #f1f5f9; }
|
|
.task-form {
|
|
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
|
|
padding: 14px; margin-bottom: 16px;
|
|
}
|
|
.task-field { display: flex; flex-direction: column; gap: 4px; }
|
|
.task-field span { color: #64748b; font-size: 12px; }
|
|
.task-field input, .task-field select, .task-field textarea {
|
|
background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
|
|
color: #1e293b; font-size: 13px; padding: 6px 10px; outline: none;
|
|
}
|
|
.task-field input:focus, .task-field select:focus, .task-field textarea:focus { border-color: #2563eb; }
|
|
.col-span-2 { grid-column: span 2; }
|
|
.task-group-add {
|
|
display: block; width: 100%; padding: 10px; text-align: center;
|
|
color: #6b6d75; font-size: 13px; background: none; border: none;
|
|
border-top: 1px solid #24272d; cursor: pointer;
|
|
}
|
|
.task-group-add:hover { color: #e4e5e7; background: #24272d; }
|