7759 lines
178 KiB
CSS
7759 lines
178 KiB
CSS
/* TH1 Dashboard Styles - v3 Light Theme */
|
|
:root {
|
|
--bg-primary: #f4f6f9;
|
|
--bg-secondary: #ffffff;
|
|
--bg-card: #ffffff;
|
|
--bg-card-hover: #f8fafc;
|
|
--bg-sidebar: #ffffff;
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #475569;
|
|
--text-muted: #94a3b8;
|
|
--accent-blue: #3b82f6;
|
|
--accent-purple: #7c3aed;
|
|
--accent-green: #10b981;
|
|
--accent-orange: #f59e0b;
|
|
--accent-red: #ef4444;
|
|
--accent-yellow: #eab308;
|
|
--accent-cyan: #06b6d4;
|
|
--border-color: #e2e8f0;
|
|
--border-active: #3b82f6;
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
|
|
--sidebar-width: 260px;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Segoe UI', 'Microsoft YaHei', -apple-system, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Background decoration - subtle game art */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0; right: 0;
|
|
width: 60vw; height: 100vh;
|
|
background: url('../assets/bg/hero_wide.png') no-repeat top right / contain;
|
|
opacity: 0.035;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
bottom: 0; left: var(--sidebar-width);
|
|
width: 40vw; height: 50vh;
|
|
background: url('../assets/bg/hero_mid.png') no-repeat bottom left / contain;
|
|
opacity: 0.025;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ========== Header ========== */
|
|
.header {
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 10px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 200;
|
|
height: 52px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.header-left { display: flex; align-items: center; gap: 10px; }
|
|
.header-logo { height: 28px; object-fit: contain; }
|
|
.header-title { font-size: 16px; font-weight: 800; color: var(--accent-blue); letter-spacing: 1.5px; }
|
|
.header-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }
|
|
|
|
.header-right { display: flex; align-items: center; gap: 16px; }
|
|
.header-info { font-size: 11px; color: var(--text-muted); }
|
|
|
|
.header-quick-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-quick-action {
|
|
min-height: 32px;
|
|
padding: 6px 11px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-card-hover);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.header-quick-action:hover {
|
|
color: var(--accent-blue);
|
|
border-color: rgba(59, 130, 246, 0.35);
|
|
background: rgba(59, 130, 246, 0.06);
|
|
}
|
|
|
|
.header-quick-action:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.btn-refresh {
|
|
display: flex; align-items: center; gap: 6px;
|
|
padding: 6px 14px;
|
|
font-size: 12px; font-weight: 600; font-family: inherit;
|
|
color: var(--accent-green);
|
|
background: rgba(16, 185, 129, 0.06);
|
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-refresh:hover {
|
|
background: rgba(16, 185, 129, 0.12);
|
|
border-color: rgba(16, 185, 129, 0.4);
|
|
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
|
|
}
|
|
.btn-refresh:active { transform: scale(0.97); }
|
|
.btn-refresh.running { pointer-events: none; opacity: 0.6; }
|
|
.btn-refresh svg { flex-shrink: 0; }
|
|
|
|
/* ========== Layout ========== */
|
|
.layout {
|
|
display: flex;
|
|
margin-top: 52px;
|
|
min-height: calc(100vh - 52px);
|
|
}
|
|
|
|
/* ========== Sidebar ========== */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
background: var(--bg-sidebar);
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 12px;
|
|
position: fixed;
|
|
top: 52px;
|
|
left: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-content: start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.nav-section-label {
|
|
grid-column: 1 / -1;
|
|
padding: 12px 4px 2px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
letter-spacing: 1.2px;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sidebar-tab {
|
|
display: flex; align-items: center; gap: 10px;
|
|
width: 100%;
|
|
min-height: 38px;
|
|
padding: 8px 9px;
|
|
font-size: 12px; font-family: inherit;
|
|
color: var(--text-secondary);
|
|
background: none; border: none;
|
|
border-radius: 6px;
|
|
cursor: grab;
|
|
text-align: left;
|
|
transition: all 0.15s;
|
|
border: 1px solid transparent;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: clip;
|
|
}
|
|
.sidebar-tab:active { cursor: grabbing; }
|
|
.sidebar-tab:hover {
|
|
color: var(--text-primary);
|
|
background: rgba(79, 140, 255, 0.04);
|
|
}
|
|
.sidebar-tab.dragging {
|
|
opacity: 0.45;
|
|
}
|
|
.sidebar-tab.active {
|
|
color: var(--accent-blue);
|
|
background: rgba(79, 140, 255, 0.08);
|
|
border-color: rgba(59, 130, 246, 0.28);
|
|
}
|
|
.sidebar-tab svg { flex: 0 0 16px; opacity: 0.7; }
|
|
.sidebar-tab.active svg { opacity: 1; }
|
|
|
|
/* ========== Main Content ========== */
|
|
.main {
|
|
flex: 1;
|
|
margin-left: var(--sidebar-width);
|
|
padding: 24px;
|
|
max-width: calc(100vw - var(--sidebar-width));
|
|
position: relative;
|
|
}
|
|
|
|
.tab-panel { display: none; }
|
|
.tab-panel.active { display: block; }
|
|
|
|
/* ========== Module Card ========== */
|
|
.module-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.module-header {
|
|
padding: 14px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.module-title { font-size: 14px; font-weight: 700; }
|
|
|
|
.module-badge {
|
|
font-size: 10px; font-weight: 700;
|
|
color: var(--accent-cyan);
|
|
background: rgba(34, 211, 238, 0.08);
|
|
padding: 3px 10px;
|
|
border-radius: 4px;
|
|
letter-spacing: 0.8px;
|
|
}
|
|
|
|
.module-body { padding: 20px; }
|
|
|
|
/* ========== Timeline ========== */
|
|
.timeline-container {
|
|
position: relative;
|
|
padding: 10px 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.timeline-track {
|
|
position: relative;
|
|
min-width: 800px;
|
|
}
|
|
|
|
.timeline-line {
|
|
position: absolute;
|
|
height: 3px;
|
|
background: var(--border-color);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.timeline-progress {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
|
|
border-radius: 2px;
|
|
transition: width 0.8s ease;
|
|
}
|
|
|
|
.timeline-now {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 19px;
|
|
background: var(--accent-red);
|
|
z-index: 5;
|
|
}
|
|
|
|
.timeline-now::after {
|
|
content: '今天';
|
|
position: absolute;
|
|
top: -16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
color: var(--accent-red);
|
|
letter-spacing: 0.5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Node container */
|
|
.timeline-node {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Dot on the line */
|
|
.timeline-dot {
|
|
width: 16px; height: 16px;
|
|
border-radius: 50%;
|
|
border: 3px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
z-index: 3;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.timeline-dot.done {
|
|
border-color: var(--accent-green);
|
|
background: var(--accent-green);
|
|
box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
|
|
}
|
|
|
|
.timeline-dot.active {
|
|
border-color: var(--accent-blue);
|
|
background: var(--accent-blue);
|
|
box-shadow: 0 0 10px rgba(79, 140, 255, 0.5);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.timeline-dot.pending {
|
|
border-color: var(--text-muted);
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { box-shadow: 0 0 8px rgba(79, 140, 255, 0.4); }
|
|
50% { box-shadow: 0 0 20px rgba(79, 140, 255, 0.7); }
|
|
}
|
|
|
|
.timeline-label {
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.timeline-date {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.timeline-status {
|
|
font-size: 10px;
|
|
margin-top: 1px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.timeline-status.done { color: var(--accent-green); }
|
|
.timeline-status.active { color: var(--accent-blue); }
|
|
.timeline-status.pending { color: var(--text-muted); }
|
|
|
|
/* Highlighted milestone (EA Launch) */
|
|
.timeline-node-highlight {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
z-index: 10;
|
|
cursor: default;
|
|
}
|
|
.tl-hl-label {
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
color: var(--accent-red);
|
|
white-space: nowrap;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0 1px 8px rgba(239,68,68,0.15);
|
|
}
|
|
.tl-hl-date {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: var(--accent-red);
|
|
white-space: nowrap;
|
|
opacity: 0.8;
|
|
}
|
|
.tl-hl-countdown {
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
background: var(--accent-red);
|
|
display: inline-block;
|
|
padding: 2px 12px;
|
|
border-radius: 10px;
|
|
margin-top: 2px;
|
|
letter-spacing: 0.5px;
|
|
animation: tl-hl-pulse 2s ease-in-out infinite;
|
|
}
|
|
.tl-hl-countdown.tl-hl-today {
|
|
background: linear-gradient(135deg, var(--accent-red), var(--accent-orange));
|
|
letter-spacing: 2px;
|
|
}
|
|
@keyframes tl-hl-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
|
|
50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
|
|
}
|
|
.tl-hl-stem {
|
|
width: 2px;
|
|
background: linear-gradient(to bottom, var(--accent-red), var(--border-color));
|
|
margin: 4px auto 0;
|
|
}
|
|
.tl-hl-dot {
|
|
width: 22px; height: 22px;
|
|
border-radius: 50%;
|
|
background: var(--accent-red);
|
|
margin: 0 auto;
|
|
box-shadow: 0 0 0 4px rgba(239,68,68,0.2), 0 0 16px rgba(239,68,68,0.25);
|
|
animation: tl-hl-dot-pulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes tl-hl-dot-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 4px rgba(239,68,68,0.2), 0 0 16px rgba(239,68,68,0.25); }
|
|
50% { box-shadow: 0 0 0 8px rgba(239,68,68,0.1), 0 0 24px rgba(239,68,68,0.15); }
|
|
}
|
|
|
|
/* ========== Architecture Canvas ========== */
|
|
#arch-canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 620px;
|
|
cursor: grab;
|
|
}
|
|
|
|
#arch-canvas:active { cursor: grabbing; }
|
|
|
|
/* ========== Summary Grid ========== */
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.summary-card {
|
|
background: var(--bg-card);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.summary-card:hover { border-color: rgba(79, 140, 255, 0.3); }
|
|
.summary-card .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
|
|
.summary-card .value { font-size: 28px; font-weight: 700; }
|
|
.summary-card .value.blue { color: var(--accent-blue); }
|
|
.summary-card .value.purple { color: var(--accent-purple); }
|
|
.summary-card .value.green { color: var(--accent-green); }
|
|
.summary-card .value.orange { color: var(--accent-orange); }
|
|
.summary-card .value.red { color: var(--accent-red); }
|
|
.summary-card .value.yellow { color: var(--accent-yellow); }
|
|
|
|
/* ========== Placeholder Panels ========== */
|
|
.placeholder-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 400px;
|
|
text-align: center;
|
|
}
|
|
|
|
.placeholder-icon {
|
|
color: var(--text-muted);
|
|
opacity: 0.3;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.placeholder-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.placeholder-desc {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
max-width: 400px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ========== Loading Overlay ========== */
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.loading-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 40px 50px;
|
|
text-align: center;
|
|
min-width: 340px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px; height: 40px;
|
|
border: 3px solid var(--border-color);
|
|
border-top-color: var(--accent-blue);
|
|
border-radius: 50%;
|
|
margin: 0 auto 16px;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.loading-text {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.loading-progress {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: var(--border-color);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.loading-progress-bar {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
|
|
border-radius: 2px;
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.loading-detail {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ========== Toast ========== */
|
|
.toast {
|
|
position: fixed;
|
|
top: 64px;
|
|
right: 24px;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
z-index: 2000;
|
|
animation: toastIn 0.3s ease;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.toast.success {
|
|
background: rgba(52, 211, 153, 0.12);
|
|
border: 1px solid rgba(52, 211, 153, 0.3);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.toast.error {
|
|
background: rgba(239, 68, 68, 0.12);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.manual-corner-link {
|
|
position: fixed;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
z-index: 950;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 34px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.manual-corner-link:hover {
|
|
color: var(--accent-blue);
|
|
border-color: rgba(79,140,255,0.45);
|
|
}
|
|
|
|
@keyframes toastIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.loading-inline {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ========== Sub-tabs ========== */
|
|
.sub-tabs {
|
|
display: flex; gap: 2px; margin-bottom: 16px;
|
|
background: var(--bg-card); border-radius: 8px; padding: 3px;
|
|
border: 1px solid var(--border-color); overflow-x: auto;
|
|
}
|
|
.sub-tab {
|
|
padding: 8px 16px; font-size: 13px; font-family: inherit; font-weight: 600;
|
|
color: var(--text-muted); background: none; border: none; border-radius: 6px;
|
|
cursor: pointer; transition: all 0.15s; white-space: nowrap;
|
|
}
|
|
.sub-tab:hover { color: var(--text-secondary); background: rgba(59,130,246,0.05); }
|
|
.sub-tab.active { color: var(--accent-blue); background: rgba(59,130,246,0.1); }
|
|
.sub-panel { display: none; }
|
|
.sub-panel.active { display: block; }
|
|
|
|
/* ========== Card Grid ========== */
|
|
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
|
|
|
|
.data-card {
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
border-radius: 10px; overflow: hidden; transition: border-color 0.2s;
|
|
}
|
|
.data-card:hover { border-color: rgba(79,140,255,0.4); }
|
|
|
|
.data-card-header {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 14px 16px; border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.data-card-img {
|
|
width: 48px; height: 48px; border-radius: 6px; object-fit: cover;
|
|
background: var(--bg-primary); flex-shrink: 0;
|
|
}
|
|
.data-card-img.round { border-radius: 50%; }
|
|
.data-card-title { font-size: 15px; font-weight: 700; }
|
|
.data-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
|
|
|
.data-card-body { padding: 12px 16px; }
|
|
|
|
.data-card-stats {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 12px;
|
|
}
|
|
.data-card-stat { display: flex; justify-content: space-between; }
|
|
.stat-lbl { color: var(--text-muted); }
|
|
.stat-val { font-weight: 600; color: var(--text-primary); }
|
|
.stat-val.blue { color: var(--accent-blue); }
|
|
.stat-val.green { color: var(--accent-green); }
|
|
.stat-val.red { color: var(--accent-red); }
|
|
.stat-val.orange { color: var(--accent-orange); }
|
|
.stat-val.purple { color: var(--accent-purple); }
|
|
.stat-val.yellow { color: var(--accent-yellow); }
|
|
|
|
.data-card-tags { padding: 8px 16px 14px; display: flex; gap: 4px; flex-wrap: wrap; }
|
|
|
|
/* Stat bar inline */
|
|
.sbar { display: inline-block; width: 80px; height: 5px; background: rgba(0,0,0,0.06); border-radius: 3px; vertical-align: middle; margin-left: 6px; overflow: hidden; }
|
|
.sbar-fill { height: 100%; border-radius: 3px; }
|
|
.sbar-fill.hp { background: var(--accent-green); }
|
|
.sbar-fill.atk { background: var(--accent-red); }
|
|
.sbar-fill.def { background: var(--accent-blue); }
|
|
.sbar-fill.cost { background: var(--accent-yellow); }
|
|
|
|
/* Badge */
|
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.4; }
|
|
.badge-blue { background: rgba(79,140,255,0.15); color: var(--accent-blue); }
|
|
.badge-purple { background: rgba(139,92,246,0.15); color: var(--accent-purple); }
|
|
.badge-green { background: rgba(52,211,153,0.15); color: var(--accent-green); }
|
|
.badge-orange { background: rgba(251,146,60,0.15); color: var(--accent-orange); }
|
|
.badge-red { background: rgba(239,68,68,0.15); color: var(--accent-red); }
|
|
.badge-yellow { background: rgba(251,191,36,0.15); color: var(--accent-yellow); }
|
|
.badge-cyan { background: rgba(34,211,238,0.15); color: var(--accent-cyan); }
|
|
.badge-gray { background: rgba(107,114,128,0.15); color: var(--text-muted); }
|
|
|
|
/* Data table (compact) */
|
|
.dtable { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); margin-bottom: 16px; }
|
|
.dtable thead th {
|
|
padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--text-muted);
|
|
text-transform: uppercase; letter-spacing: 0.5px; text-align: left;
|
|
border-bottom: 1px solid var(--border-color); background: #f8fafc;
|
|
white-space: nowrap; position: sticky; top: 0;
|
|
}
|
|
.dtable tbody tr { border-bottom: 1px solid var(--border-color); transition: background 0.1s; }
|
|
.dtable tbody tr:hover { background: var(--bg-card-hover); }
|
|
.dtable tbody td { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
|
|
.dtable td.wrap { white-space: normal; max-width: 300px; line-height: 1.5; }
|
|
.dtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.dtable td .unit-img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; vertical-align: middle; margin-right: 6px; background: var(--bg-primary); }
|
|
|
|
.table-wrap { overflow-x: auto; border-radius: 10px; }
|
|
.table-count { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
|
|
|
|
/* Section title */
|
|
.section-title { font-size: 15px; font-weight: 700; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
|
|
.section-title:first-child { margin-top: 0; }
|
|
|
|
/* ========== Toolbar / Search / Filter ========== */
|
|
.toolbar {
|
|
display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
|
|
}
|
|
.search-input, .filter-select {
|
|
padding: 7px 12px; font-size: 13px; font-family: inherit;
|
|
background: var(--bg-card); color: var(--text-primary);
|
|
border: 1px solid var(--border-color); border-radius: 6px;
|
|
outline: none; transition: border-color 0.2s;
|
|
}
|
|
.search-input:focus, .filter-select:focus {
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.search-input { min-width: 200px; }
|
|
.filter-select { cursor: pointer; }
|
|
.filter-select option { background: var(--bg-card); color: var(--text-primary); }
|
|
|
|
/* ========== Mechanics Documents ========== */
|
|
.mechanics-layout {
|
|
display: grid;
|
|
grid-template-columns: 310px minmax(0, 1fr);
|
|
gap: 16px;
|
|
height: calc(100vh - 100px);
|
|
min-height: 620px;
|
|
}
|
|
|
|
.mechanics-sidebar,
|
|
.mechanics-reader {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mechanics-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mechanics-sidebar-head {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.mechanics-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.mechanics-subtitle {
|
|
margin-top: 3px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.mechanics-doc-list {
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mechanics-doc-btn {
|
|
width: 100%;
|
|
display: block;
|
|
text-align: left;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
padding: 11px 12px;
|
|
margin-bottom: 8px;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.mechanics-doc-btn:hover {
|
|
background: rgba(59,130,246,0.05);
|
|
}
|
|
|
|
.mechanics-doc-btn.active {
|
|
border-color: rgba(59,130,246,0.35);
|
|
background: rgba(59,130,246,0.09);
|
|
}
|
|
|
|
.mechanics-doc-btn.disabled {
|
|
opacity: .45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.mechanics-doc-name,
|
|
.mechanics-doc-summary,
|
|
.mechanics-doc-meta {
|
|
display: block;
|
|
}
|
|
|
|
.mechanics-doc-name {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.mechanics-doc-summary {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.mechanics-doc-meta {
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.mechanics-reader {
|
|
min-width: 0;
|
|
}
|
|
|
|
.mechanics-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
background: #f5f7fb;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.mechanics-layout {
|
|
grid-template-columns: 1fr;
|
|
height: auto;
|
|
}
|
|
.mechanics-sidebar {
|
|
max-height: 320px;
|
|
}
|
|
.mechanics-reader {
|
|
height: 720px;
|
|
}
|
|
}
|
|
|
|
/* ========== AI Logic Module ========== */
|
|
.ai-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ai-hero {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.ai-hero-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.ai-title {
|
|
font-size: 24px;
|
|
font-weight: 850;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.ai-summary {
|
|
max-width: 920px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.65;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ai-source {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.ai-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(120px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.ai-stat {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card-hover);
|
|
padding: 12px;
|
|
}
|
|
|
|
.ai-stat-value {
|
|
font-size: 24px;
|
|
font-weight: 850;
|
|
color: var(--accent-blue);
|
|
line-height: 1;
|
|
}
|
|
|
|
.ai-stat-label {
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ai-section-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.ai-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-card-head {
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
align-items: center;
|
|
}
|
|
|
|
.ai-card-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.ai-card-badge,
|
|
.ai-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 22px;
|
|
padding: 3px 8px;
|
|
border-radius: 5px;
|
|
background: rgba(59,130,246,0.09);
|
|
color: var(--accent-blue);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ai-card-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.ai-flow {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(130px, 1fr));
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.ai-flow-step {
|
|
position: relative;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
background: var(--bg-card-hover);
|
|
min-height: 128px;
|
|
}
|
|
|
|
.ai-flow-step::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 30px;
|
|
right: -8px;
|
|
width: 14px;
|
|
height: 1px;
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.ai-flow-step:last-child::after {
|
|
display: none;
|
|
}
|
|
|
|
.ai-flow-index {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--accent-blue);
|
|
color: white;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ai-flow-name {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.ai-flow-desc {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ai-module-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.ai-module {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
.ai-module-name {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.ai-module-text {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ai-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ai-list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
.ai-list-main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.ai-list-title {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.ai-list-desc {
|
|
margin-top: 3px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.ai-table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.ai-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 760px;
|
|
}
|
|
|
|
.ai-table th,
|
|
.ai-table td {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 9px 10px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ai-table th {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
.ai-code {
|
|
font-family: Consolas, 'Courier New', monospace;
|
|
color: var(--accent-green);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ai-node-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ai-node-toolbar .search-input {
|
|
flex: 1;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.ai-node-cats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.ai-node-cat {
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ai-node-cat.active {
|
|
color: var(--accent-blue);
|
|
border-color: rgba(59,130,246,0.35);
|
|
background: rgba(59,130,246,0.08);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.ai-stats,
|
|
.ai-module-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.ai-section-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.ai-hero-top {
|
|
flex-direction: column;
|
|
}
|
|
.ai-stats,
|
|
.ai-module-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ========== Story Module ========== */
|
|
.story-hero-card {
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
border-radius: 10px; overflow: hidden; transition: border-color 0.2s;
|
|
}
|
|
.story-hero-card:hover { border-color: rgba(79,140,255,0.4); }
|
|
|
|
.story-hero-header {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 16px; border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.story-hero-img {
|
|
width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
|
|
background: var(--bg-primary); flex-shrink: 0;
|
|
}
|
|
.story-hero-name { font-size: 16px; font-weight: 700; }
|
|
.story-hero-en { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.5px; }
|
|
|
|
.story-hero-body { padding: 14px 16px; }
|
|
.story-hero-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
|
|
.story-hero-diag {
|
|
font-size: 13px; font-style: italic; line-height: 1.6;
|
|
padding: 10px 14px; border-radius: 6px;
|
|
background: rgba(0,0,0,0.02); border-left: 3px solid var(--text-muted);
|
|
}
|
|
|
|
.wonder-card {
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
border-radius: 10px; padding: 16px; margin-bottom: 14px; transition: border-color 0.2s;
|
|
}
|
|
.wonder-card:hover { border-color: rgba(139,92,246,0.4); }
|
|
.wonder-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
|
|
.wonder-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
|
|
.wonder-diag-block {
|
|
padding: 10px 14px; margin-top: 8px; border-radius: 6px;
|
|
background: rgba(0,0,0,0.02); border-left: 3px solid var(--accent-purple);
|
|
}
|
|
.wonder-diag-line { font-size: 13px; color: var(--text-primary); line-height: 1.6; margin-bottom: 4px; }
|
|
.wonder-diag-giants { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
|
|
|
.comic-sheet {
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
border-radius: 10px; margin-bottom: 16px; overflow: hidden;
|
|
}
|
|
.comic-sheet-header {
|
|
padding: 12px 16px; font-size: 14px; font-weight: 700;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
cursor: pointer; user-select: none;
|
|
}
|
|
.comic-sheet-header:hover { background: rgba(79,140,255,0.04); }
|
|
.comic-sheet-body { padding: 12px 16px; }
|
|
.comic-diag {
|
|
display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.comic-diag:last-child { border-bottom: none; }
|
|
.comic-char { font-size: 12px; font-weight: 700; color: var(--accent-cyan); min-width: 60px; flex-shrink: 0; }
|
|
.comic-text { font-size: 13px; color: var(--text-primary); line-height: 1.6; }
|
|
|
|
.moment-card {
|
|
border-radius: 10px; overflow: hidden; margin-bottom: 14px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.moment-header {
|
|
padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.moment-title { font-size: 18px; font-weight: 800; }
|
|
.moment-body { padding: 14px 18px; }
|
|
.moment-pack {
|
|
display: inline-block; padding: 4px 10px; margin: 3px; border-radius: 4px;
|
|
font-size: 12px; font-weight: 600;
|
|
background: rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.chat-player-card {
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
border-radius: 10px; margin-bottom: 16px; overflow: hidden;
|
|
}
|
|
.chat-player-header {
|
|
padding: 14px 18px; border-bottom: 1px solid var(--border-color);
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.chat-player-avatar {
|
|
width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
|
|
background: var(--bg-primary); flex-shrink: 0;
|
|
}
|
|
.chat-player-name { font-size: 15px; font-weight: 700; }
|
|
.chat-player-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
|
.chat-player-body { padding: 14px 18px; }
|
|
.chat-section { margin-bottom: 12px; }
|
|
.chat-section-title {
|
|
font-size: 12px; font-weight: 700; color: var(--text-muted);
|
|
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
|
|
}
|
|
.chat-bubble {
|
|
display: inline-block; padding: 6px 12px; margin: 3px 0; border-radius: 10px;
|
|
font-size: 13px; line-height: 1.5;
|
|
background: rgba(79,140,255,0.08); color: var(--text-primary);
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* ========== Art Gallery Module ========== */
|
|
.art-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.art-gallery.large {
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
}
|
|
|
|
.art-thumb {
|
|
position: relative;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, transform 0.15s;
|
|
aspect-ratio: 1;
|
|
}
|
|
.art-thumb:hover {
|
|
border-color: var(--accent-blue);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
|
}
|
|
.art-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
display: block;
|
|
background: var(--bg-primary);
|
|
}
|
|
.art-thumb-label {
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
background: linear-gradient(transparent, rgba(0,0,0,0.75));
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.art-group-title {
|
|
grid-column: 1 / -1;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--text-secondary);
|
|
padding: 10px 0 4px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Art lightbox */
|
|
.art-lightbox {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.85);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 3000;
|
|
cursor: pointer;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.art-lightbox img {
|
|
max-width: 90vw;
|
|
max-height: 85vh;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
|
|
}
|
|
.art-lightbox-info {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 6px 16px;
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ========== Outsource Dashboard ========== */
|
|
|
|
/* Top dashboard */
|
|
.oc-dashboard {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.oc-dash-header {
|
|
display: flex; align-items: baseline; gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.oc-dash-title {
|
|
font-size: 15px; font-weight: 800; color: var(--text-primary);
|
|
}
|
|
.oc-dash-meta {
|
|
font-size: 12px; color: var(--text-muted);
|
|
}
|
|
|
|
/* Dashboard cards row */
|
|
.oc-dash-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.oc-dash-card {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 14px 16px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.oc-dash-card:hover {
|
|
border-color: rgba(79,140,255,0.35);
|
|
background: rgba(79,140,255,0.03);
|
|
}
|
|
.oc-dash-card.urgent {
|
|
border-color: rgba(251,191,36,0.35);
|
|
}
|
|
.oc-dash-card.overdue {
|
|
border-color: rgba(239,68,68,0.35);
|
|
}
|
|
.oc-dash-card.oc-done {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Sequence number in card */
|
|
.oc-dash-seq {
|
|
position: absolute;
|
|
top: 6px; right: 10px;
|
|
font-size: 22px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: rgba(79,140,255,0.15);
|
|
letter-spacing: -1px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Circular ring */
|
|
.oc-dash-ring {
|
|
flex-shrink: 0;
|
|
width: 48px; height: 48px;
|
|
position: relative;
|
|
}
|
|
.oc-dash-ring svg {
|
|
width: 100%; height: 100%;
|
|
}
|
|
.oc-ring-pct, .oc-ring-icon {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 11px; font-weight: 800;
|
|
color: var(--text-primary);
|
|
}
|
|
.oc-ring-icon {
|
|
font-size: 16px; color: #34d399;
|
|
}
|
|
|
|
/* Card info */
|
|
.oc-dash-card-info { flex: 1; min-width: 0; }
|
|
.oc-dash-vendor {
|
|
font-size: 13px; font-weight: 800; color: var(--text-primary);
|
|
margin-bottom: 1px;
|
|
}
|
|
.oc-dash-card-title {
|
|
font-size: 11px; color: var(--text-secondary);
|
|
margin-bottom: 3px;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.oc-dash-deadline {
|
|
font-size: 11px; font-weight: 600;
|
|
}
|
|
|
|
/* ========== Outsource Sub-Panel ========== */
|
|
|
|
/* Timeline */
|
|
.oc-timeline-section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.oc-timeline-title {
|
|
font-size: 14px; font-weight: 700; margin-bottom: 16px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.oc-timeline-track {
|
|
position: relative;
|
|
height: 140px;
|
|
}
|
|
.oc-tl-line {
|
|
position: absolute;
|
|
top: 60px; left: 2%; right: 2%;
|
|
height: 2px;
|
|
background: var(--border-color);
|
|
}
|
|
.oc-tl-now {
|
|
position: absolute;
|
|
top: 46px;
|
|
width: 2px; height: 28px;
|
|
background: var(--accent-red);
|
|
z-index: 5;
|
|
transform: translateX(-50%);
|
|
}
|
|
.oc-tl-now::after {
|
|
content: 'TODAY';
|
|
position: absolute;
|
|
top: -16px; left: 50%; transform: translateX(-50%);
|
|
font-size: 9px; font-weight: 800; color: var(--accent-red);
|
|
letter-spacing: 1px; white-space: nowrap;
|
|
}
|
|
.oc-tl-node {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
z-index: 3;
|
|
}
|
|
.oc-tl-dot {
|
|
width: 12px; height: 12px;
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
position: absolute;
|
|
left: 50%; transform: translateX(-50%);
|
|
}
|
|
.oc-tl-info {
|
|
white-space: nowrap;
|
|
}
|
|
.oc-tl-above .oc-tl-dot { top: auto; bottom: -6px; }
|
|
.oc-tl-above .oc-tl-info { position: relative; bottom: 10px; }
|
|
.oc-tl-above { top: 6px; }
|
|
.oc-tl-below .oc-tl-dot { top: -6px; }
|
|
.oc-tl-below .oc-tl-info { position: relative; top: 10px; }
|
|
.oc-tl-below { top: 66px; }
|
|
|
|
.oc-tl-seq {
|
|
font-size: 14px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
}
|
|
.oc-tl-name {
|
|
font-size: 10px; font-weight: 600; color: var(--text-primary);
|
|
}
|
|
.oc-tl-date {
|
|
font-size: 9px; color: var(--text-muted);
|
|
}
|
|
.oc-tl-month {
|
|
position: absolute;
|
|
top: 72px;
|
|
transform: translateX(-50%);
|
|
font-size: 10px; font-weight: 700;
|
|
color: var(--text-muted);
|
|
opacity: 0.6; white-space: nowrap;
|
|
}
|
|
|
|
/* List */
|
|
.oc-list-count {
|
|
font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
|
|
}
|
|
.oc-row {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s, box-shadow 0.3s;
|
|
}
|
|
.oc-row:hover { border-color: rgba(79,140,255,0.25); }
|
|
.oc-row.oc-expanded { border-color: rgba(79,140,255,0.4); }
|
|
.oc-row.oc-highlight {
|
|
box-shadow: 0 0 0 2px rgba(79,140,255,0.4);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.oc-row-main {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 12px 16px;
|
|
cursor: pointer; user-select: none;
|
|
transition: background 0.1s;
|
|
}
|
|
.oc-row-main:hover { background: rgba(79,140,255,0.03); }
|
|
|
|
.oc-row-seq {
|
|
flex-shrink: 0;
|
|
width: 52px; height: 52px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 17px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-blue);
|
|
background: rgba(79,140,255,0.06);
|
|
border: 2px solid rgba(79,140,255,0.2);
|
|
border-radius: 12px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.oc-row-cat {
|
|
flex-shrink: 0;
|
|
font-size: 11px; font-weight: 700;
|
|
padding: 4px 10px; border-radius: 4px;
|
|
min-width: 46px; text-align: center;
|
|
}
|
|
.oc-row-info { flex: 1; min-width: 0; }
|
|
.oc-row-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
|
|
.oc-row-deadline { font-size: 11px; color: var(--text-muted); }
|
|
.oc-row-status {
|
|
flex-shrink: 0; font-size: 11px; font-weight: 700;
|
|
min-width: 50px; text-align: center;
|
|
}
|
|
.oc-row-arrow {
|
|
flex-shrink: 0; font-size: 12px; color: var(--text-muted);
|
|
width: 16px; text-align: center;
|
|
}
|
|
|
|
/* Detail */
|
|
.oc-row-detail {
|
|
max-height: 0; overflow: hidden;
|
|
transition: max-height 0.35s ease;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
.oc-row.oc-expanded .oc-row-detail {
|
|
border-top-color: var(--border-color);
|
|
}
|
|
.oc-det-desc {
|
|
padding: 12px 16px;
|
|
font-size: 13px; color: var(--text-secondary); line-height: 1.7;
|
|
}
|
|
.oc-det-section {
|
|
padding: 10px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.oc-det-section-title {
|
|
font-size: 12px; font-weight: 700; color: var(--text-muted);
|
|
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
|
|
}
|
|
.oc-det-deliverables {
|
|
display: flex; flex-wrap: wrap; gap: 6px;
|
|
}
|
|
.oc-det-deliv {
|
|
display: inline-block; padding: 4px 10px; border-radius: 6px;
|
|
font-size: 12px;
|
|
background: rgba(139,92,246,0.08); color: var(--text-secondary);
|
|
border: 1px solid rgba(139,92,246,0.15);
|
|
}
|
|
|
|
/* ========== Sentiment Module ========== */
|
|
.sent-header-bar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.sent-header-left { display: flex; align-items: center; gap: 12px; }
|
|
.sent-header-title { font-size: 18px; font-weight: 700; }
|
|
.sent-header-count { font-size: 12px; color: var(--text-muted); }
|
|
|
|
.sent-btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit;
|
|
border: 1px solid var(--border-color); border-radius: 6px;
|
|
background: var(--bg-card); color: var(--text-secondary);
|
|
cursor: pointer; transition: all 0.15s;
|
|
}
|
|
.sent-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
|
|
.sent-btn-primary {
|
|
background: rgba(79,140,255,0.12); border-color: rgba(79,140,255,0.3);
|
|
color: var(--accent-blue);
|
|
}
|
|
.sent-btn-primary:hover {
|
|
background: rgba(79,140,255,0.2); border-color: rgba(79,140,255,0.5);
|
|
box-shadow: 0 0 12px rgba(79,140,255,0.15);
|
|
}
|
|
.sent-btn-danger {
|
|
background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25);
|
|
color: var(--accent-red);
|
|
}
|
|
.sent-btn-danger:hover {
|
|
background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4);
|
|
}
|
|
|
|
/* Sentiment list cards */
|
|
.sent-card {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
border-radius: 10px; padding: 16px 20px; margin-bottom: 10px;
|
|
cursor: pointer; transition: all 0.15s;
|
|
}
|
|
.sent-card:hover {
|
|
border-color: rgba(79,140,255,0.4);
|
|
background: var(--bg-card-hover);
|
|
transform: translateX(2px);
|
|
}
|
|
.sent-card-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
|
|
.sent-card-type { font-size: 24px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
|
|
.sent-card-info { flex: 1; min-width: 0; }
|
|
.sent-card-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
|
|
.sent-card-meta {
|
|
display: flex; gap: 12px; flex-wrap: wrap;
|
|
font-size: 12px; color: var(--text-muted);
|
|
}
|
|
.sent-source {
|
|
max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
color: var(--accent-cyan);
|
|
}
|
|
.sent-card-summary {
|
|
font-size: 13px; color: var(--text-secondary); margin-top: 6px;
|
|
line-height: 1.5;
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
}
|
|
.sent-card-right { flex-shrink: 0; margin-left: 16px; }
|
|
|
|
.sent-status {
|
|
display: inline-block; padding: 4px 10px; border-radius: 4px;
|
|
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
|
|
}
|
|
.sent-status.analyzed {
|
|
background: rgba(52,211,153,0.12); color: var(--accent-green);
|
|
}
|
|
.sent-status.pending {
|
|
background: rgba(251,191,36,0.12); color: var(--accent-yellow);
|
|
}
|
|
|
|
/* Sentiment detail overlay */
|
|
.sent-detail-overlay {
|
|
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.4);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 3000;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.sent-detail-modal, .sent-add-modal {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
width: 90vw; max-width: 700px; max-height: 85vh;
|
|
display: flex; flex-direction: column;
|
|
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
|
|
}
|
|
.sent-detail-header {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
padding: 20px 24px; border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.sent-detail-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
|
|
.sent-detail-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); }
|
|
.sent-detail-source { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
|
|
.sent-detail-source a { color: var(--accent-cyan); text-decoration: none; }
|
|
.sent-detail-source a:hover { text-decoration: underline; }
|
|
.sent-detail-close {
|
|
background: none; border: none; color: var(--text-muted); font-size: 24px;
|
|
cursor: pointer; padding: 0 4px; line-height: 1;
|
|
}
|
|
.sent-detail-close:hover { color: var(--text-primary); }
|
|
.sent-detail-body {
|
|
flex: 1; overflow-y: auto; padding: 20px 24px;
|
|
}
|
|
.sent-detail-footer {
|
|
padding: 14px 24px; border-top: 1px solid var(--border-color);
|
|
display: flex; gap: 8px; justify-content: flex-end;
|
|
}
|
|
|
|
.sent-detail-summary {
|
|
font-size: 14px; color: var(--text-secondary); line-height: 1.7;
|
|
padding: 12px 16px; border-radius: 8px;
|
|
background: rgba(79,140,255,0.06); border-left: 3px solid var(--accent-blue);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.sent-detail-section { margin-bottom: 16px; }
|
|
.sent-detail-section-title {
|
|
font-size: 13px; font-weight: 700; color: var(--text-muted);
|
|
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
|
|
}
|
|
|
|
.sent-content-block {
|
|
padding: 14px 16px; border-radius: 8px;
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
font-size: 13px; color: var(--text-primary); line-height: 1.7;
|
|
white-space: pre-wrap; max-height: 300px; overflow-y: auto;
|
|
}
|
|
|
|
.sent-file-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.sent-file-item {
|
|
display: inline-block; padding: 6px 12px; border-radius: 6px;
|
|
font-size: 12px; font-weight: 600;
|
|
background: rgba(139,92,246,0.1); color: var(--accent-purple);
|
|
border: 1px solid rgba(139,92,246,0.2);
|
|
text-decoration: none; transition: all 0.15s;
|
|
}
|
|
.sent-file-item:hover {
|
|
background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.4);
|
|
}
|
|
|
|
/* Analysis block */
|
|
.sent-analysis-block {
|
|
padding: 16px; border-radius: 8px;
|
|
background: var(--bg-card); border: 1px solid var(--border-color);
|
|
}
|
|
.sent-analysis-summary {
|
|
font-size: 14px; color: var(--text-primary); line-height: 1.7; margin-bottom: 10px;
|
|
}
|
|
.sent-analysis-section-title {
|
|
font-size: 12px; font-weight: 700; color: var(--text-muted);
|
|
margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.5px;
|
|
}
|
|
.sent-analysis-points {
|
|
padding-left: 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.8;
|
|
}
|
|
.sent-analysis-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.sent-analysis-text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
|
|
|
|
/* Add modal form */
|
|
.sent-add-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
|
|
.sent-form-group { margin-bottom: 16px; }
|
|
.sent-form-label {
|
|
display: block; font-size: 12px; font-weight: 700; color: var(--text-muted);
|
|
margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
|
|
}
|
|
.sent-form-input, .sent-form-textarea {
|
|
width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
|
|
background: var(--bg-card); color: var(--text-primary);
|
|
border: 1px solid var(--border-color); border-radius: 8px;
|
|
outline: none; transition: border-color 0.2s;
|
|
}
|
|
.sent-form-input:focus, .sent-form-textarea:focus {
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.sent-form-textarea { resize: vertical; min-height: 60px; line-height: 1.6; }
|
|
.sent-form-file {
|
|
display: block; width: 100%; padding: 10px;
|
|
font-size: 13px; font-family: inherit;
|
|
background: var(--bg-card); color: var(--text-secondary);
|
|
border: 1px dashed var(--border-color); border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.sent-form-file:hover { border-color: var(--accent-blue); }
|
|
.sent-form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
|
|
|
.sent-form-tabs {
|
|
display: flex; gap: 2px; background: var(--bg-card); border-radius: 6px;
|
|
padding: 3px; border: 1px solid var(--border-color);
|
|
}
|
|
.sent-form-tab {
|
|
flex: 1; padding: 7px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
|
|
color: var(--text-muted); background: none; border: none; border-radius: 4px;
|
|
cursor: pointer; transition: all 0.15s; text-align: center;
|
|
}
|
|
.sent-form-tab:hover { color: var(--text-secondary); }
|
|
.sent-form-tab.active { color: var(--accent-blue); background: rgba(79,140,255,0.12); }
|
|
|
|
.sent-source-panel { display: none; }
|
|
.sent-source-panel.active { display: block; }
|
|
|
|
/* Core player feedback inside sentiment module */
|
|
.corefb-header-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.corefb-header-left {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
.corefb-header-title {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
.corefb-header-count {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
.corefb-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.corefb-content {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.corefb-collection-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.corefb-collection-card,
|
|
.corefb-current-collection {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
}
|
|
.corefb-collection-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
.corefb-collection-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
margin-bottom: 6px;
|
|
}
|
|
.corefb-collection-desc {
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
.corefb-meta-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
.corefb-meta-row span {
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
.corefb-table-wrap {
|
|
overflow-x: auto;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
}
|
|
.corefb-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 900px;
|
|
font-size: 13px;
|
|
}
|
|
.corefb-table th,
|
|
.corefb-table td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
.corefb-table th {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
background: var(--bg-primary);
|
|
}
|
|
.corefb-table tr:last-child td { border-bottom: none; }
|
|
.corefb-desc-cell {
|
|
min-width: 300px;
|
|
max-width: 480px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.corefb-solution-cell {
|
|
min-width: 220px;
|
|
max-width: 360px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.corefb-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-width: 58px;
|
|
justify-content: center;
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
.corefb-status-待处理 {
|
|
color: var(--accent-orange);
|
|
background: rgba(245,158,11,0.12);
|
|
}
|
|
.corefb-status-已处理 {
|
|
color: var(--accent-green);
|
|
background: rgba(16,185,129,0.12);
|
|
}
|
|
.corefb-status-搁置 {
|
|
color: var(--text-muted);
|
|
background: var(--bg-primary);
|
|
}
|
|
.corefb-status-未完成 {
|
|
color: var(--accent-orange);
|
|
background: rgba(245,158,11,0.12);
|
|
}
|
|
.corefb-status-已完成 {
|
|
color: var(--accent-green);
|
|
background: rgba(16,185,129,0.12);
|
|
}
|
|
.corefb-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
.corefb-raw-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
.corefb-raw-links button {
|
|
border: 1px solid rgba(79,140,255,0.24);
|
|
border-radius: 999px;
|
|
padding: 3px 7px;
|
|
background: rgba(79,140,255,0.08);
|
|
color: var(--accent-blue);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.corefb-raw-links button:hover {
|
|
background: rgba(79,140,255,0.16);
|
|
border-color: rgba(79,140,255,0.42);
|
|
}
|
|
.corefb-raw-ref-modal {
|
|
width: min(980px, calc(100vw - 32px));
|
|
max-width: none;
|
|
}
|
|
.corefb-raw-ref-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.corefb-raw-ref-meta span {
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
background: var(--bg-card);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
.corefb-raw-ref-content {
|
|
padding: 14px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
}
|
|
.corefb-edit-modal {
|
|
width: min(1320px, calc(100vw - 48px));
|
|
max-width: none;
|
|
max-height: 90vh;
|
|
}
|
|
.corefb-edit-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 18px;
|
|
overflow-y: auto;
|
|
}
|
|
.corefb-edit-pane {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.corefb-edit-meta-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 180px;
|
|
gap: 12px;
|
|
padding: 0 24px 14px;
|
|
}
|
|
.corefb-edit-meta-row .sent-form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
.offrep-edit-meta-row {
|
|
grid-template-columns: 180px;
|
|
}
|
|
.corefb-edit-main-input {
|
|
min-height: min(48vh, 520px);
|
|
resize: vertical;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.corefb-edit-body {
|
|
grid-template-columns: 1fr;
|
|
overflow-y: auto;
|
|
}
|
|
.corefb-edit-meta-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Raw feedback sets inside sentiment module */
|
|
.rawfb-header-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.rawfb-header-left {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
.rawfb-header-title {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
.rawfb-header-count {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
.rawfb-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.rawfb-content,
|
|
.rawfb-set-list,
|
|
.rawfb-item-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.rawfb-set-card,
|
|
.rawfb-current-set,
|
|
.rawfb-item-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
}
|
|
.rawfb-set-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
.rawfb-set-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
margin-bottom: 6px;
|
|
}
|
|
.rawfb-set-desc {
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
.rawfb-meta-row,
|
|
.rawfb-item-meta,
|
|
.rawfb-tag-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
.rawfb-meta-row span,
|
|
.rawfb-item-meta span,
|
|
.rawfb-tag-row span {
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
.rawfb-item-content {
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
}
|
|
.rawfb-item-title {
|
|
color: var(--accent-blue);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
margin-bottom: 8px;
|
|
}
|
|
.rawfb-tag-row span {
|
|
color: var(--accent-blue);
|
|
background: rgba(79,140,255,0.1);
|
|
}
|
|
.rawfb-modal {
|
|
width: min(760px, calc(100vw - 32px));
|
|
}
|
|
.rawfb-item-modal {
|
|
width: min(920px, calc(100vw - 32px));
|
|
}
|
|
.rawfb-form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.rawfb-content-input {
|
|
min-height: 220px;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.rawfb-header-bar,
|
|
.rawfb-set-card {
|
|
grid-template-columns: 1fr;
|
|
align-items: stretch;
|
|
}
|
|
.rawfb-header-bar {
|
|
display: grid;
|
|
}
|
|
.rawfb-header-actions,
|
|
.rawfb-form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.rawfb-header-actions {
|
|
display: grid;
|
|
}
|
|
}
|
|
|
|
/* ========== Project Architecture Module ========== */
|
|
.proj-stats-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.proj-stat-item {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 14px 12px;
|
|
text-align: center;
|
|
transition: border-color 0.2s, transform 0.15s;
|
|
}
|
|
.proj-stat-item:hover { border-color: rgba(79,140,255,0.3); transform: translateY(-1px); }
|
|
.proj-stat-value { font-size: 24px; font-weight: 800; margin-bottom: 2px; }
|
|
.proj-stat-value.blue { color: var(--accent-blue); }
|
|
.proj-stat-value.green { color: var(--accent-green); }
|
|
.proj-stat-value.purple { color: var(--accent-purple); }
|
|
.proj-stat-value.red { color: var(--accent-red); }
|
|
.proj-stat-value.yellow { color: var(--accent-yellow); }
|
|
.proj-stat-value.orange { color: var(--accent-orange); }
|
|
.proj-stat-value.cyan { color: var(--accent-cyan); }
|
|
.proj-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
|
|
/* Section collapsible */
|
|
.proj-section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.proj-section-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 16px 20px;
|
|
cursor: pointer; user-select: none;
|
|
transition: background 0.15s;
|
|
}
|
|
.proj-section-header:hover { background: rgba(79,140,255,0.04); }
|
|
.proj-section-title { font-size: 15px; font-weight: 700; }
|
|
.proj-section-arrow { font-size: 12px; color: var(--text-muted); transition: transform 0.2s; }
|
|
.proj-section-body {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.35s ease, padding 0.35s ease;
|
|
padding: 0 20px;
|
|
}
|
|
.proj-section-body.proj-open {
|
|
max-height: 8000px;
|
|
padding: 0 20px 20px;
|
|
}
|
|
|
|
/* Architecture layers */
|
|
.proj-layers { display: flex; flex-direction: column; align-items: center; gap: 0; }
|
|
.proj-layer {
|
|
width: 100%; max-width: 700px;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
display: flex; align-items: center; gap: 16px;
|
|
transition: all 0.15s;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
}
|
|
.proj-layer:hover {
|
|
transform: scale(1.01);
|
|
}
|
|
.proj-layer-name {
|
|
font-size: 13px; font-weight: 700;
|
|
min-width: 70px; flex-shrink: 0;
|
|
}
|
|
.proj-layer-modules { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.proj-layer-tag {
|
|
display: inline-block; padding: 3px 10px; border-radius: 4px;
|
|
font-size: 12px; font-weight: 600;
|
|
background: rgba(0,0,0,0.03); color: var(--text-secondary);
|
|
}
|
|
.proj-layer-arrow {
|
|
text-align: center; font-size: 12px; color: var(--text-muted);
|
|
padding: 2px 0; opacity: 0.5;
|
|
}
|
|
|
|
/* Design patterns grid */
|
|
.proj-patterns-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
|
|
}
|
|
.proj-pattern-card {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 14px 16px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.proj-pattern-card:hover { border-color: rgba(79,140,255,0.3); }
|
|
.proj-pattern-name { font-size: 14px; font-weight: 700; color: var(--accent-cyan); margin-bottom: 4px; }
|
|
.proj-pattern-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }
|
|
.proj-pattern-usage { font-size: 11px; color: var(--text-muted); font-style: italic; }
|
|
|
|
/* Module cards grid */
|
|
.proj-modules-grid { display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
.proj-module-card {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.proj-module-card:hover { border-color: rgba(79,140,255,0.25); }
|
|
.proj-module-card.proj-expanded { border-color: rgba(79,140,255,0.4); }
|
|
|
|
.proj-module-header {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 14px 18px;
|
|
cursor: pointer; user-select: none;
|
|
transition: background 0.15s;
|
|
}
|
|
.proj-module-header:hover { background: rgba(79,140,255,0.04); }
|
|
.proj-module-icon { flex-shrink: 0; line-height: 1; }
|
|
.proj-module-info { flex: 1; min-width: 0; }
|
|
.proj-module-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
|
|
.proj-module-num {
|
|
display: inline-block; font-size: 11px; font-weight: 800;
|
|
color: var(--accent-blue); background: rgba(79,140,255,0.1);
|
|
padding: 1px 7px; border-radius: 4px; margin-right: 8px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.proj-module-tags { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
.proj-tag {
|
|
display: inline-block; padding: 2px 8px; border-radius: 3px;
|
|
font-size: 11px; font-weight: 600;
|
|
background: rgba(0,0,0,0.03); color: var(--text-muted);
|
|
}
|
|
.proj-module-arrow {
|
|
font-size: 12px; color: var(--text-muted);
|
|
flex-shrink: 0; transition: transform 0.2s;
|
|
}
|
|
.proj-module-summary {
|
|
padding: 0 18px 12px 52px;
|
|
font-size: 13px; color: var(--text-secondary); line-height: 1.6;
|
|
}
|
|
.proj-module-detail {
|
|
max-height: 0; overflow: hidden;
|
|
transition: max-height 0.35s ease;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
.proj-module-card.proj-expanded .proj-module-detail {
|
|
border-top-color: var(--border-color);
|
|
}
|
|
|
|
/* Detail blocks inside expanded module */
|
|
.proj-detail-block { padding: 12px 18px; }
|
|
.proj-detail-block + .proj-detail-block { border-top: 1px solid var(--border-color); }
|
|
.proj-detail-title {
|
|
font-size: 12px; font-weight: 700; color: var(--text-muted);
|
|
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
|
|
}
|
|
.proj-detail-items { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.proj-detail-item {
|
|
display: inline-block; padding: 4px 12px; border-radius: 6px;
|
|
font-size: 12px; font-weight: 500;
|
|
background: rgba(79,140,255,0.06); color: var(--text-primary);
|
|
border: 1px solid rgba(79,140,255,0.1);
|
|
line-height: 1.4;
|
|
}
|
|
.proj-file-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.proj-file-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 6px 12px; border-radius: 6px;
|
|
background: rgba(52,211,153,0.05);
|
|
border: 1px solid rgba(52,211,153,0.1);
|
|
font-size: 12px;
|
|
}
|
|
.proj-file-name { font-weight: 700; color: var(--accent-green); flex-shrink: 0; font-family: 'Consolas', 'Courier New', monospace; }
|
|
.proj-file-desc { color: var(--text-secondary); }
|
|
|
|
.proj-diagram {
|
|
padding: 14px 16px; border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
font-size: 12px; font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-cyan); line-height: 1.7;
|
|
overflow-x: auto; white-space: pre;
|
|
}
|
|
|
|
/* Directory tree */
|
|
.proj-dir-tree {
|
|
font-size: 13px; font-family: 'Consolas', 'Courier New', monospace;
|
|
}
|
|
.proj-dir-node {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 5px 8px; border-radius: 4px;
|
|
transition: background 0.1s;
|
|
}
|
|
.proj-dir-toggle { cursor: pointer; }
|
|
.proj-dir-toggle:hover { background: rgba(79,140,255,0.06); }
|
|
.proj-dir-arrow { font-size: 10px; color: var(--text-muted); width: 14px; text-align: center; flex-shrink: 0; }
|
|
.proj-dir-dot { width: 14px; text-align: center; flex-shrink: 0; }
|
|
.proj-dir-dot::after { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--border-color); vertical-align: middle; }
|
|
.proj-dir-path { color: var(--accent-blue); font-weight: 600; }
|
|
.proj-dir-desc { color: var(--text-muted); font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; font-size: 12px; }
|
|
.proj-dir-children { padding-left: 0; }
|
|
|
|
/* ========== Marketing Module ========== */
|
|
|
|
/* TODO section */
|
|
.mkt-todo-section {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.mkt-todo-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.mkt-todo-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
.mkt-todo-count {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
.mkt-todo-add {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.mkt-todo-input {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
.mkt-todo-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-blue);
|
|
box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
|
|
}
|
|
.mkt-todo-add-btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.mkt-todo-add-btn:hover { background: #2563eb; }
|
|
|
|
.mkt-todo-list { }
|
|
.mkt-todo-empty {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
padding: 12px;
|
|
}
|
|
.mkt-todo-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 4px;
|
|
border-bottom: 1px solid rgba(0,0,0,0.04);
|
|
transition: background 0.1s;
|
|
}
|
|
.mkt-todo-item:hover { background: rgba(0,0,0,0.015); }
|
|
.mkt-todo-item:last-child { border-bottom: none; }
|
|
|
|
/* Custom checkbox */
|
|
.mkt-todo-check {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
.mkt-todo-check input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0; height: 0;
|
|
}
|
|
.mkt-todo-checkmark {
|
|
width: 18px; height: 18px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 4px;
|
|
transition: all 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.mkt-todo-check input:checked + .mkt-todo-checkmark {
|
|
background: var(--accent-blue);
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.mkt-todo-check input:checked + .mkt-todo-checkmark::after {
|
|
content: '';
|
|
width: 5px; height: 9px;
|
|
border: solid #fff;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
margin-top: -1px;
|
|
}
|
|
.mkt-todo-check:hover .mkt-todo-checkmark {
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
.mkt-todo-text {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
}
|
|
.mkt-todo-item-done .mkt-todo-text {
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
}
|
|
.mkt-todo-del {
|
|
opacity: 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
line-height: 1;
|
|
transition: all 0.15s;
|
|
}
|
|
.mkt-todo-item:hover .mkt-todo-del { opacity: 1; }
|
|
.mkt-todo-del:hover { color: var(--accent-red); }
|
|
|
|
.mkt-todo-done-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 4px;
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.mkt-todo-done-divider:hover { color: var(--text-secondary); }
|
|
.mkt-todo-done-arrow { font-size: 10px; }
|
|
|
|
/* Header bar */
|
|
.mkt-header-bar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.mkt-header-left { display: flex; align-items: center; gap: 12px; }
|
|
.mkt-header-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
|
|
|
|
/* Sequence number badge */
|
|
.mkt-ev-seq {
|
|
flex-shrink: 0;
|
|
width: 44px; height: 44px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 15px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-blue);
|
|
background: rgba(79,140,255,0.08);
|
|
border: 2px solid rgba(79,140,255,0.25);
|
|
border-radius: 10px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Add-event modal */
|
|
.mkt-modal-overlay {
|
|
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.65);
|
|
z-index: 1000;
|
|
display: flex; align-items: center; justify-content: center;
|
|
animation: mktFadeIn 0.15s ease;
|
|
}
|
|
@keyframes mktFadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
.mkt-modal-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 14px;
|
|
width: 520px; max-width: 92vw; max-height: 85vh;
|
|
display: flex; flex-direction: column;
|
|
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
|
|
animation: mktSlideUp 0.2s ease;
|
|
}
|
|
@keyframes mktSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
|
.mkt-modal-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.mkt-modal-title { font-size: 16px; font-weight: 800; }
|
|
.mkt-modal-seq {
|
|
font-size: 18px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-blue);
|
|
background: rgba(79,140,255,0.1);
|
|
padding: 4px 12px; border-radius: 8px;
|
|
}
|
|
.mkt-modal-body {
|
|
padding: 16px 20px;
|
|
overflow-y: auto; flex: 1;
|
|
}
|
|
.mkt-modal-footer {
|
|
display: flex; gap: 8px; justify-content: flex-end;
|
|
padding: 12px 20px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Form elements */
|
|
.mkt-form-group { margin-bottom: 14px; }
|
|
.mkt-form-label {
|
|
display: block; font-size: 12px; font-weight: 700;
|
|
color: var(--text-muted); margin-bottom: 5px;
|
|
text-transform: uppercase; letter-spacing: 0.3px;
|
|
}
|
|
.mkt-form-input {
|
|
width: 100%; padding: 8px 12px;
|
|
font-size: 13px; font-family: inherit;
|
|
background: var(--bg-primary); color: var(--text-primary);
|
|
border: 1px solid var(--border-color); border-radius: 8px;
|
|
outline: none; transition: border-color 0.2s;
|
|
}
|
|
.mkt-form-input:focus { border-color: var(--accent-blue); }
|
|
.mkt-form-textarea { min-height: 72px; resize: vertical; line-height: 1.6; }
|
|
.mkt-form-row { display: flex; gap: 12px; }
|
|
.mkt-form-half { flex: 1; }
|
|
.mkt-form-checks {
|
|
display: flex; flex-wrap: wrap; gap: 10px;
|
|
}
|
|
.mkt-form-check {
|
|
display: flex; align-items: center; gap: 5px;
|
|
font-size: 13px; color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
.mkt-form-check input { accent-color: var(--accent-blue); }
|
|
|
|
/* Timeline section */
|
|
.mkt-timeline-section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.mkt-timeline-title {
|
|
font-size: 14px; font-weight: 700; margin-bottom: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.mkt-timeline-scroll {
|
|
overflow-x: auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
.mkt-timeline-track {
|
|
position: relative;
|
|
height: 130px;
|
|
min-width: 900px;
|
|
}
|
|
.mkt-tl-line {
|
|
position: absolute;
|
|
top: 44px; left: 20px; right: 20px;
|
|
height: 2px;
|
|
background: var(--border-color);
|
|
}
|
|
.mkt-tl-now {
|
|
position: absolute;
|
|
top: 30px;
|
|
width: 2px; height: 30px;
|
|
background: var(--accent-red);
|
|
z-index: 5;
|
|
}
|
|
.mkt-tl-now::after {
|
|
content: 'TODAY';
|
|
position: absolute;
|
|
top: -16px; left: 50%; transform: translateX(-50%);
|
|
font-size: 9px; font-weight: 800; color: var(--accent-red);
|
|
letter-spacing: 1px; white-space: nowrap;
|
|
}
|
|
.mkt-tl-node {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
z-index: 3;
|
|
transition: transform 0.15s;
|
|
}
|
|
.mkt-tl-node:hover { transform: translateX(-50%) scale(1.08); }
|
|
.mkt-tl-dot {
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
margin: 0 auto 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
.mkt-tl-node:hover .mkt-tl-dot {
|
|
width: 14px; height: 14px; margin-bottom: 2px;
|
|
}
|
|
.mkt-tl-label {
|
|
font-size: 10px; font-weight: 600;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
max-width: 80px;
|
|
overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.mkt-tl-date {
|
|
font-size: 9px; color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
.mkt-tl-month {
|
|
position: absolute;
|
|
top: 100px;
|
|
transform: translateX(-50%);
|
|
font-size: 10px; font-weight: 700;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.5px;
|
|
white-space: nowrap;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Stats row */
|
|
.mkt-stats-row {
|
|
display: flex; flex-wrap: wrap; gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.mkt-stat-chip {
|
|
display: flex; align-items: center; gap: 6px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 6px 12px;
|
|
}
|
|
.mkt-stat-num { font-size: 16px; font-weight: 800; }
|
|
.mkt-stat-lbl { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* Toolbar */
|
|
.mkt-toolbar { flex-wrap: wrap; }
|
|
|
|
/* List count */
|
|
.mkt-list-count {
|
|
font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
|
|
}
|
|
|
|
/* Event rows */
|
|
.mkt-event-row {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s, box-shadow 0.3s;
|
|
}
|
|
.mkt-event-row:hover { border-color: rgba(79,140,255,0.25); }
|
|
.mkt-event-row.mkt-expanded { border-color: rgba(79,140,255,0.4); }
|
|
.mkt-event-row.mkt-highlight {
|
|
box-shadow: 0 0 0 2px rgba(79,140,255,0.4);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.mkt-event-main {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 12px 16px;
|
|
cursor: pointer; user-select: none;
|
|
transition: background 0.1s;
|
|
}
|
|
.mkt-event-main:hover { background: rgba(79,140,255,0.03); }
|
|
|
|
.mkt-ev-cat {
|
|
flex-shrink: 0;
|
|
font-size: 11px; font-weight: 700;
|
|
padding: 4px 10px; border-radius: 4px;
|
|
min-width: 60px; text-align: center;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.mkt-ev-info { flex: 1; min-width: 0; }
|
|
.mkt-ev-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
|
|
.mkt-ev-date { font-size: 11px; color: var(--text-muted); }
|
|
.mkt-ev-platforms { display: flex; gap: 4px; flex-shrink: 0; }
|
|
.mkt-plat-badge {
|
|
display: inline-block; padding: 2px 8px; border-radius: 3px;
|
|
font-size: 10px; font-weight: 600;
|
|
background: rgba(0,0,0,0.03); color: var(--text-muted);
|
|
}
|
|
.mkt-ev-status {
|
|
flex-shrink: 0; font-size: 11px; font-weight: 700;
|
|
min-width: 50px; text-align: center;
|
|
}
|
|
.mkt-ev-note-ind {
|
|
flex-shrink: 0; width: 24px; text-align: center;
|
|
font-size: 14px; color: var(--text-muted); opacity: 0.4;
|
|
}
|
|
.mkt-ev-note-ind.has-note { opacity: 1; color: var(--accent-yellow); }
|
|
.mkt-ev-arrow {
|
|
flex-shrink: 0; font-size: 12px; color: var(--text-muted);
|
|
transition: transform 0.2s; width: 16px; text-align: center;
|
|
}
|
|
|
|
/* Expanded detail */
|
|
.mkt-event-detail {
|
|
max-height: 0; overflow: hidden;
|
|
transition: max-height 0.35s ease;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
.mkt-event-row.mkt-expanded .mkt-event-detail {
|
|
border-top-color: var(--border-color);
|
|
}
|
|
|
|
.mkt-det-tags {
|
|
display: flex; flex-wrap: wrap; gap: 6px;
|
|
padding: 12px 16px 0;
|
|
}
|
|
.mkt-det-tag {
|
|
display: inline-block; padding: 3px 10px; border-radius: 4px;
|
|
font-size: 11px; font-weight: 600;
|
|
background: rgba(139,92,246,0.1); color: var(--accent-purple);
|
|
}
|
|
.mkt-det-summary {
|
|
padding: 12px 16px;
|
|
font-size: 13px; color: var(--text-secondary); line-height: 1.7;
|
|
}
|
|
.mkt-det-section {
|
|
padding: 10px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.mkt-det-section-title {
|
|
font-size: 12px; font-weight: 700; color: var(--text-muted);
|
|
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.mkt-det-assets {
|
|
display: flex; flex-wrap: wrap; gap: 6px;
|
|
}
|
|
.mkt-det-asset {
|
|
display: inline-block; padding: 4px 10px; border-radius: 6px;
|
|
font-size: 12px;
|
|
background: rgba(34,211,238,0.06); color: var(--text-secondary);
|
|
border: 1px solid rgba(34,211,238,0.1);
|
|
}
|
|
.mkt-det-folder {
|
|
padding: 8px 16px;
|
|
font-size: 12px; color: var(--text-muted);
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Notes display/editor */
|
|
.mkt-det-note-display {
|
|
font-size: 13px; color: var(--text-primary); line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
min-height: 20px;
|
|
}
|
|
.mkt-note-empty { color: var(--text-muted); font-style: italic; }
|
|
.mkt-note-edit-btn {
|
|
font-size: 11px; font-weight: 600; font-family: inherit;
|
|
padding: 2px 10px; border-radius: 4px;
|
|
background: rgba(79,140,255,0.1); color: var(--accent-blue);
|
|
border: 1px solid rgba(79,140,255,0.2);
|
|
cursor: pointer; transition: all 0.15s;
|
|
}
|
|
.mkt-note-edit-btn:hover {
|
|
background: rgba(79,140,255,0.2); border-color: rgba(79,140,255,0.4);
|
|
}
|
|
.mkt-note-textarea {
|
|
width: 100%; min-height: 80px; padding: 10px 14px;
|
|
font-size: 13px; font-family: inherit; line-height: 1.6;
|
|
background: var(--bg-primary); color: var(--text-primary);
|
|
border: 1px solid var(--border-color); border-radius: 8px;
|
|
outline: none; resize: vertical;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.mkt-note-textarea:focus { border-color: var(--accent-blue); }
|
|
.mkt-note-actions {
|
|
display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;
|
|
}
|
|
|
|
/* ========== Dev Plan Module ========== */
|
|
|
|
/* Header */
|
|
.dev-header-bar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.dev-header-left { display: flex; align-items: baseline; gap: 14px; }
|
|
.dev-header-title { font-size: 20px; font-weight: 900; color: var(--text-primary); }
|
|
.dev-header-meta { font-size: 12px; color: var(--text-muted); }
|
|
|
|
.dev-cycle-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.dev-cycle-tab {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto auto;
|
|
align-items: center;
|
|
gap: 2px 10px;
|
|
min-height: 62px;
|
|
padding: 10px 14px;
|
|
text-align: left;
|
|
}
|
|
.dev-cycle-title {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
.dev-cycle-count {
|
|
grid-row: 1 / span 2;
|
|
grid-column: 2;
|
|
min-width: 34px;
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(59,130,246,0.1);
|
|
color: var(--accent-blue);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
}
|
|
.dev-cycle-tab.active .dev-cycle-count {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
}
|
|
.dev-cycle-meta {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
/* Progress bar */
|
|
.dev-progress-bar {
|
|
position: relative;
|
|
height: 22px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.dev-progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #34d399, #4f8cff);
|
|
border-radius: 6px;
|
|
transition: width 0.6s ease;
|
|
}
|
|
.dev-progress-label {
|
|
position: absolute;
|
|
top: 50%; left: 50%; transform: translate(-50%, -50%);
|
|
font-size: 11px; font-weight: 800;
|
|
color: var(--text-primary);
|
|
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
|
|
}
|
|
|
|
/* Timeline section */
|
|
.dev-timeline-section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.dev-timeline-label {
|
|
font-size: 14px; font-weight: 700; margin-bottom: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.dev-timeline-scroll {
|
|
overflow-x: auto; padding-bottom: 8px;
|
|
}
|
|
.dev-timeline-track {
|
|
position: relative; min-width: 900px;
|
|
}
|
|
|
|
/* Timeline elements */
|
|
.dev-tl-line {
|
|
position: absolute;
|
|
left: 20px; right: 20px;
|
|
height: 2px;
|
|
background: var(--border-color);
|
|
}
|
|
.dev-tl-now {
|
|
position: absolute;
|
|
width: 2px; height: 28px;
|
|
background: var(--accent-red);
|
|
z-index: 5;
|
|
}
|
|
.dev-tl-now::after {
|
|
content: 'TODAY';
|
|
position: absolute;
|
|
top: -16px; left: 50%; transform: translateX(-50%);
|
|
font-size: 9px; font-weight: 800; color: var(--accent-red);
|
|
letter-spacing: 1px; white-space: nowrap;
|
|
}
|
|
.dev-tl-node {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
z-index: 3;
|
|
transition: transform 0.15s;
|
|
}
|
|
.dev-tl-node:hover { transform: translateX(-50%) scale(1.06); }
|
|
.dev-tl-dot {
|
|
width: 12px; height: 12px;
|
|
border-radius: 50%;
|
|
margin: 0 auto 2px;
|
|
transition: all 0.2s;
|
|
}
|
|
.dev-tl-node:hover .dev-tl-dot { width: 16px; height: 16px; }
|
|
.dev-tl-seq {
|
|
font-size: 14px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
letter-spacing: -0.5px;
|
|
line-height: 1.3;
|
|
}
|
|
.dev-tl-name {
|
|
font-size: 10px; font-weight: 600;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
max-width: 100px;
|
|
overflow: hidden; text-overflow: ellipsis;
|
|
margin: 0 auto;
|
|
}
|
|
.dev-tl-date {
|
|
font-size: 9px; color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
.dev-tl-stem {
|
|
width: 1px;
|
|
background: var(--border-color);
|
|
margin: 0 auto;
|
|
}
|
|
.dev-tl-month {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
font-size: 10px; font-weight: 700;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.5px; white-space: nowrap;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Stats row */
|
|
.dev-stats-row {
|
|
display: flex; flex-wrap: wrap; gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.dev-stat-chip {
|
|
display: flex; align-items: center; gap: 6px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 6px 12px;
|
|
}
|
|
.dev-stat-num { font-size: 16px; font-weight: 800; }
|
|
.dev-stat-lbl { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* Toolbar */
|
|
.dev-toolbar { flex-wrap: wrap; }
|
|
|
|
/* List count */
|
|
.dev-list-count {
|
|
font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
|
|
}
|
|
|
|
/* Task rows */
|
|
.dev-task-row {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s, box-shadow 0.3s;
|
|
}
|
|
.dev-task-row:hover { border-color: rgba(79,140,255,0.25); }
|
|
.dev-task-row.dev-expanded { border-color: rgba(79,140,255,0.4); }
|
|
.dev-task-row.dev-highlight {
|
|
box-shadow: 0 0 0 2px rgba(79,140,255,0.4);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.dev-task-main {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 12px 16px;
|
|
cursor: pointer; user-select: none;
|
|
transition: background 0.1s;
|
|
}
|
|
.dev-task-main:hover { background: rgba(79,140,255,0.03); }
|
|
|
|
/* Sequence number - very prominent */
|
|
.dev-task-seq {
|
|
flex-shrink: 0;
|
|
width: 56px; height: 56px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 18px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-blue);
|
|
background: rgba(79,140,255,0.06);
|
|
border: 2px solid rgba(79,140,255,0.2);
|
|
border-radius: 12px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.dev-task-cat {
|
|
flex-shrink: 0;
|
|
font-size: 11px; font-weight: 700;
|
|
padding: 4px 10px; border-radius: 4px;
|
|
min-width: 50px; text-align: center;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.dev-task-info { flex: 1; min-width: 0; }
|
|
.dev-task-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
|
|
.dev-task-date { font-size: 11px; color: var(--text-muted); }
|
|
.dev-task-pri {
|
|
flex-shrink: 0; font-size: 11px; font-weight: 700;
|
|
min-width: 60px; text-align: center;
|
|
}
|
|
.dev-task-status {
|
|
flex-shrink: 0; font-size: 11px; font-weight: 700;
|
|
min-width: 50px; text-align: center;
|
|
}
|
|
.dev-task-arrow {
|
|
flex-shrink: 0; font-size: 12px; color: var(--text-muted);
|
|
transition: transform 0.2s; width: 16px; text-align: center;
|
|
}
|
|
|
|
/* Expanded detail */
|
|
.dev-task-detail {
|
|
max-height: 0; overflow: hidden;
|
|
transition: max-height 0.35s ease;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
.dev-task-row.dev-expanded .dev-task-detail {
|
|
border-top-color: var(--border-color);
|
|
}
|
|
|
|
.dev-det-tags {
|
|
display: flex; flex-wrap: wrap; gap: 6px;
|
|
padding: 12px 16px 0;
|
|
}
|
|
.dev-det-tag {
|
|
display: inline-block; padding: 3px 10px; border-radius: 4px;
|
|
font-size: 11px; font-weight: 600;
|
|
background: rgba(139,92,246,0.1); color: var(--accent-purple);
|
|
}
|
|
.dev-det-desc {
|
|
padding: 12px 16px;
|
|
font-size: 13px; color: var(--text-secondary); line-height: 1.7;
|
|
}
|
|
.dev-det-meta {
|
|
display: flex; flex-wrap: wrap; gap: 16px;
|
|
padding: 10px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.dev-det-meta-item {
|
|
font-size: 12px; color: var(--text-muted);
|
|
}
|
|
.dev-det-meta-item strong {
|
|
font-weight: 700; color: var(--text-primary);
|
|
}
|
|
|
|
/* Edit description button (in main task row) */
|
|
.dev-task-edit-btn {
|
|
flex-shrink: 0;
|
|
background: none; border: 1px solid transparent;
|
|
font-size: 14px; color: var(--text-muted);
|
|
cursor: pointer; padding: 2px 6px; border-radius: 4px;
|
|
transition: all 0.15s; line-height: 1;
|
|
}
|
|
.dev-task-edit-btn:hover {
|
|
color: var(--accent-blue);
|
|
background: rgba(59,130,246,0.08);
|
|
border-color: rgba(59,130,246,0.2);
|
|
}
|
|
|
|
/* Description editor */
|
|
.dev-desc-editor {
|
|
padding: 0 16px 12px;
|
|
}
|
|
.dev-desc-textarea {
|
|
width: 100%; min-height: 80px;
|
|
padding: 10px 12px; border: 1px solid var(--border-color);
|
|
border-radius: 8px; font-size: 13px; font-family: inherit;
|
|
background: var(--bg-primary); color: var(--text-primary);
|
|
resize: vertical; line-height: 1.7; box-sizing: border-box;
|
|
}
|
|
.dev-desc-textarea:focus {
|
|
outline: none; border-color: var(--accent-blue);
|
|
box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
|
|
}
|
|
.dev-desc-actions {
|
|
display: flex; gap: 8px; margin-top: 8px;
|
|
}
|
|
.dev-btn {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
padding: 5px 14px; border: 1px solid var(--border-color);
|
|
border-radius: 6px; background: var(--bg-secondary);
|
|
color: var(--text-primary); font-size: 12px; font-weight: 600;
|
|
cursor: pointer; transition: all 0.15s;
|
|
}
|
|
.dev-btn:hover { background: var(--bg-primary); }
|
|
.dev-btn-primary {
|
|
background: var(--accent-blue); color: #fff;
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.dev-btn-primary:hover { background: #2563eb; }
|
|
.dev-btn-sm { padding: 3px 10px; font-size: 11px; }
|
|
|
|
/* ---- Subtask Section ---- */
|
|
.dev-subtask-section {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.dev-subtask-header {
|
|
display: flex; align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
.dev-subtask-title {
|
|
font-size: 13px; font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Subtask add form */
|
|
.dev-subtask-add {
|
|
display: flex; gap: 8px; margin-bottom: 10px;
|
|
}
|
|
.dev-subtask-input {
|
|
flex: 1; padding: 6px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px; font-size: 12px;
|
|
background: var(--bg-primary); color: var(--text-primary);
|
|
}
|
|
.dev-subtask-input:focus {
|
|
outline: none; border-color: var(--accent-blue);
|
|
box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
|
|
}
|
|
|
|
/* Subtask list items */
|
|
.dev-subtask-list {
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
}
|
|
.dev-subtask-item {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, auto) minmax(180px, 1fr) 24px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 8px; border-radius: 6px;
|
|
transition: background 0.15s;
|
|
}
|
|
.dev-subtask-item:hover { background: rgba(0,0,0,0.02); }
|
|
|
|
.dev-subtask-stage-group {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.dev-subtask-stage {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-height: 24px;
|
|
padding: 2px 7px 2px 4px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 999px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.dev-subtask-stage:has(input:checked) {
|
|
border-color: rgba(59,130,246,0.28);
|
|
background: rgba(59,130,246,0.08);
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
/* Custom checkbox */
|
|
.dev-subtask-check {
|
|
position: relative; display: flex; align-items: center;
|
|
cursor: pointer; flex-shrink: 0;
|
|
}
|
|
.dev-subtask-stage input,
|
|
.dev-subtask-check input {
|
|
position: absolute; opacity: 0; width: 0; height: 0;
|
|
}
|
|
.dev-subtask-checkmark {
|
|
position: relative;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
width: 16px; height: 16px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 4px; background: var(--bg-secondary);
|
|
transition: all 0.15s;
|
|
}
|
|
.dev-subtask-check input:checked + .dev-subtask-checkmark,
|
|
.dev-subtask-stage input:checked + .dev-subtask-checkmark {
|
|
background: var(--accent-blue);
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.dev-subtask-check input:checked + .dev-subtask-checkmark::after,
|
|
.dev-subtask-stage input:checked + .dev-subtask-checkmark::after {
|
|
content: '';
|
|
position: absolute; left: 5px; top: 2px;
|
|
width: 4px; height: 8px;
|
|
border: solid #fff; border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Subtask text */
|
|
.dev-subtask-text {
|
|
flex: 1; font-size: 13px; color: var(--text-primary);
|
|
min-width: 0; overflow: hidden;
|
|
text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.dev-subtask-done .dev-subtask-text {
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Subtask delete button */
|
|
.dev-subtask-del {
|
|
flex-shrink: 0; background: none; border: none;
|
|
font-size: 16px; color: var(--text-muted);
|
|
cursor: pointer; padding: 0 4px; line-height: 1;
|
|
opacity: 0; transition: all 0.15s;
|
|
}
|
|
.dev-subtask-item:hover .dev-subtask-del { opacity: 1; }
|
|
.dev-subtask-del:hover { color: var(--accent-red); }
|
|
|
|
/* Subtask empty */
|
|
.dev-subtask-empty {
|
|
font-size: 12px; color: var(--text-muted);
|
|
padding: 4px 0; font-style: italic;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.dev-cycle-tabs {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.dev-task-main {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.dev-task-info {
|
|
flex-basis: calc(100% - 76px);
|
|
}
|
|
.dev-subtask-item {
|
|
grid-template-columns: 1fr 24px;
|
|
}
|
|
.dev-subtask-stage-group {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
/* ========== Version Info Module ========== */
|
|
|
|
/* Timeline section */
|
|
.ver-timeline-section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.ver-timeline-label {
|
|
font-size: 14px; font-weight: 700; margin-bottom: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.ver-timeline-scroll {
|
|
overflow-x: auto; padding-bottom: 8px;
|
|
}
|
|
.ver-timeline-track {
|
|
position: relative; min-width: 900px;
|
|
}
|
|
|
|
/* Timeline elements */
|
|
.ver-tl-line {
|
|
position: absolute;
|
|
left: 20px; right: 20px;
|
|
height: 2px;
|
|
background: var(--border-color);
|
|
}
|
|
.ver-tl-now {
|
|
position: absolute;
|
|
width: 2px; height: 28px;
|
|
background: var(--accent-red);
|
|
z-index: 5;
|
|
}
|
|
.ver-tl-now::after {
|
|
content: 'TODAY';
|
|
position: absolute;
|
|
top: -16px; left: 50%; transform: translateX(-50%);
|
|
font-size: 9px; font-weight: 800; color: var(--accent-red);
|
|
letter-spacing: 1px; white-space: nowrap;
|
|
}
|
|
.ver-tl-node {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
z-index: 3;
|
|
transition: transform 0.15s;
|
|
}
|
|
.ver-tl-node:hover { transform: translateX(-50%) scale(1.08); }
|
|
.ver-tl-dot {
|
|
border-radius: 50%;
|
|
margin: 0 auto 2px;
|
|
transition: all 0.2s;
|
|
}
|
|
.ver-tl-ver {
|
|
font-size: 12px; font-weight: 800;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
}
|
|
.ver-tl-date {
|
|
font-size: 9px; color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
.ver-tl-patch {
|
|
font-size: 9px; font-weight: 700;
|
|
color: var(--accent-green);
|
|
white-space: nowrap;
|
|
}
|
|
.ver-tl-stem {
|
|
width: 1px;
|
|
background: var(--border-color);
|
|
margin: 0 auto;
|
|
}
|
|
.ver-tl-month {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
font-size: 10px; font-weight: 700;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.5px; white-space: nowrap;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Current version announcement card */
|
|
.ver-current-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid rgba(59,130,246,0.3);
|
|
border-radius: 12px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 12px rgba(59,130,246,0.06);
|
|
}
|
|
.ver-current-header {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: rgba(59,130,246,0.03);
|
|
}
|
|
.ver-current-badge {
|
|
font-size: 22px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-blue);
|
|
background: rgba(59,130,246,0.08);
|
|
padding: 6px 16px;
|
|
border-radius: 10px;
|
|
border: 2px solid rgba(59,130,246,0.2);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.ver-current-meta {
|
|
flex: 1; display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.ver-current-title {
|
|
font-size: 16px; font-weight: 800; color: var(--text-primary);
|
|
}
|
|
.ver-current-date {
|
|
font-size: 12px; color: var(--text-muted);
|
|
}
|
|
.ver-current-tag {
|
|
font-size: 10px; font-weight: 800;
|
|
color: #fff;
|
|
background: var(--accent-blue);
|
|
padding: 3px 10px;
|
|
border-radius: 4px;
|
|
letter-spacing: 1px;
|
|
}
|
|
.ver-current-body {
|
|
padding: 16px 20px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Stats row */
|
|
.ver-stats-row {
|
|
display: flex; flex-wrap: wrap; gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.ver-stat-chip {
|
|
display: flex; align-items: center; gap: 6px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 6px 12px;
|
|
}
|
|
.ver-stat-num { font-size: 16px; font-weight: 800; }
|
|
.ver-stat-lbl { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* Version list */
|
|
.ver-list-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.ver-list-title {
|
|
font-size: 16px; font-weight: 800; color: var(--text-primary);
|
|
}
|
|
|
|
/* Version group */
|
|
.ver-group {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.ver-group:hover { border-color: rgba(79,140,255,0.2); }
|
|
.ver-group-header {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 12px 16px;
|
|
cursor: pointer; user-select: none;
|
|
transition: background 0.15s;
|
|
}
|
|
.ver-group-header:hover { background: rgba(79,140,255,0.03); }
|
|
.ver-group-badge {
|
|
font-size: 15px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-purple);
|
|
background: rgba(124,58,237,0.08);
|
|
padding: 4px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(124,58,237,0.18);
|
|
}
|
|
.ver-group-count {
|
|
font-size: 12px; color: var(--text-muted);
|
|
}
|
|
.ver-group-dates {
|
|
font-size: 11px; color: var(--text-muted);
|
|
flex: 1;
|
|
}
|
|
.ver-group-arrow {
|
|
font-size: 12px; color: var(--text-muted);
|
|
transition: transform 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
.ver-group-open > .ver-group-header .ver-group-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
.ver-group-body {
|
|
max-height: 0; overflow: hidden;
|
|
transition: max-height 0.4s ease;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
.ver-group-open > .ver-group-body {
|
|
max-height: 20000px;
|
|
border-top-color: var(--border-color);
|
|
}
|
|
|
|
/* Version row */
|
|
.ver-row {
|
|
border-top: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
.ver-row:first-child { border-top: none; }
|
|
.ver-row-current {
|
|
background: rgba(59,130,246,0.02);
|
|
}
|
|
.ver-row.ver-highlight {
|
|
box-shadow: inset 3px 0 0 var(--accent-blue);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.ver-row-main {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 10px 16px;
|
|
cursor: pointer; user-select: none;
|
|
transition: background 0.1s;
|
|
}
|
|
.ver-row-main:hover { background: rgba(79,140,255,0.03); }
|
|
|
|
.ver-row-ver {
|
|
flex-shrink: 0;
|
|
font-size: 14px; font-weight: 800;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-blue);
|
|
min-width: 80px;
|
|
}
|
|
.ver-row-cur-tag {
|
|
flex-shrink: 0;
|
|
font-size: 9px; font-weight: 800;
|
|
color: #fff;
|
|
background: var(--accent-blue);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.ver-row-date {
|
|
flex-shrink: 0;
|
|
font-size: 12px; color: var(--text-muted);
|
|
min-width: 80px;
|
|
}
|
|
.ver-row-summary {
|
|
flex: 1; min-width: 0;
|
|
font-size: 12px; color: var(--text-secondary);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.ver-row-arrow {
|
|
flex-shrink: 0; font-size: 12px; color: var(--text-muted);
|
|
transition: transform 0.2s; width: 16px; text-align: center;
|
|
}
|
|
|
|
/* Expanded detail */
|
|
.ver-row-detail {
|
|
max-height: 0; overflow: hidden;
|
|
transition: max-height 0.35s ease;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
.ver-row.ver-expanded .ver-row-detail {
|
|
border-top-color: var(--border-color);
|
|
}
|
|
|
|
/* Description formatting */
|
|
.ver-desc {
|
|
padding: 12px 16px;
|
|
font-size: 13px; color: var(--text-secondary); line-height: 1.8;
|
|
}
|
|
.ver-desc-empty {
|
|
padding: 12px 16px;
|
|
font-size: 13px; color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
.ver-desc-section {
|
|
margin-bottom: 12px;
|
|
}
|
|
.ver-desc-section-title {
|
|
font-size: 13px; font-weight: 800;
|
|
color: var(--text-primary);
|
|
padding: 6px 12px;
|
|
background: rgba(59,130,246,0.05);
|
|
border-left: 3px solid var(--accent-blue);
|
|
border-radius: 0 6px 6px 0;
|
|
margin-bottom: 6px;
|
|
}
|
|
.ver-desc-item {
|
|
padding: 2px 0 2px 4px;
|
|
font-size: 13px; color: var(--text-secondary); line-height: 1.7;
|
|
}
|
|
.ver-desc-num {
|
|
display: inline-block;
|
|
font-weight: 700; color: var(--text-muted);
|
|
min-width: 24px;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
}
|
|
.ver-desc-text {
|
|
padding: 2px 0;
|
|
font-size: 13px; color: var(--text-secondary); line-height: 1.7;
|
|
}
|
|
|
|
/* ========== Home Summary Modules ========== */
|
|
.home-summaries-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.home-mod {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.home-mod:hover {
|
|
border-color: rgba(79,140,255,0.3);
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.home-mod-header {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 14px 18px;
|
|
font-size: 15px; font-weight: 800;
|
|
color: var(--text-primary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-card-hover);
|
|
}
|
|
.home-mod-icon {
|
|
font-size: 16px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.home-mod-body {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.home-mod-empty {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
padding: 8px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.home-mod-note {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--border-color);
|
|
text-align: right;
|
|
}
|
|
|
|
/* Outsource items */
|
|
.home-oc-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid rgba(0,0,0,0.03);
|
|
}
|
|
.home-oc-item:last-of-type { border-bottom: none; }
|
|
.home-oc-seq {
|
|
flex-shrink: 0;
|
|
font-size: 13px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-purple);
|
|
background: rgba(139,92,246,0.08);
|
|
border: 1px solid rgba(139,92,246,0.18);
|
|
border-radius: 6px;
|
|
padding: 2px 8px;
|
|
min-width: 36px; text-align: center;
|
|
}
|
|
.home-oc-vendor {
|
|
flex-shrink: 0;
|
|
font-size: 12px; font-weight: 700;
|
|
color: var(--text-secondary);
|
|
min-width: 60px;
|
|
}
|
|
.home-oc-title {
|
|
flex: 1; min-width: 0;
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.home-oc-dl {
|
|
flex-shrink: 0;
|
|
font-size: 12px; font-weight: 700;
|
|
min-width: 50px; text-align: right;
|
|
}
|
|
|
|
/* Dev plan items */
|
|
.home-dev-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid rgba(0,0,0,0.03);
|
|
}
|
|
.home-dev-item:last-of-type { border-bottom: none; }
|
|
.home-dev-seq {
|
|
flex-shrink: 0;
|
|
font-size: 13px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-blue);
|
|
background: rgba(79,140,255,0.08);
|
|
border: 1px solid rgba(79,140,255,0.18);
|
|
border-radius: 6px;
|
|
padding: 2px 8px;
|
|
min-width: 42px; text-align: center;
|
|
}
|
|
.home-dev-pri {
|
|
flex-shrink: 0;
|
|
font-size: 11px; font-weight: 800;
|
|
min-width: 24px; text-align: center;
|
|
}
|
|
.home-dev-title {
|
|
flex: 1; min-width: 0;
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.home-dev-date {
|
|
flex-shrink: 0;
|
|
font-size: 11px; color: var(--text-muted);
|
|
min-width: 40px; text-align: right;
|
|
}
|
|
|
|
/* Marketing items */
|
|
.home-mkt-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid rgba(0,0,0,0.03);
|
|
}
|
|
.home-mkt-item:last-of-type { border-bottom: none; }
|
|
.home-mkt-seq {
|
|
flex-shrink: 0;
|
|
font-size: 13px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-orange);
|
|
background: rgba(245,158,11,0.08);
|
|
border: 1px solid rgba(245,158,11,0.18);
|
|
border-radius: 6px;
|
|
padding: 2px 8px;
|
|
min-width: 36px; text-align: center;
|
|
}
|
|
.home-mkt-title {
|
|
flex: 1; min-width: 0;
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.home-mkt-st {
|
|
flex-shrink: 0;
|
|
font-size: 11px; font-weight: 700;
|
|
min-width: 48px; text-align: right;
|
|
}
|
|
|
|
/* Bug tracker items */
|
|
.home-bug-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid rgba(0,0,0,0.03);
|
|
}
|
|
.home-bug-item:last-of-type { border-bottom: none; }
|
|
.home-bug-id {
|
|
flex-shrink: 0;
|
|
font-size: 13px; font-weight: 900;
|
|
font-family: 'Consolas', 'Courier New', monospace;
|
|
color: var(--accent-red);
|
|
background: rgba(239,68,68,0.08);
|
|
border: 1px solid rgba(239,68,68,0.18);
|
|
border-radius: 6px;
|
|
padding: 2px 8px;
|
|
min-width: 42px; text-align: center;
|
|
}
|
|
.home-bug-pri {
|
|
flex-shrink: 0;
|
|
font-size: 11px; font-weight: 800;
|
|
min-width: 24px; text-align: center;
|
|
}
|
|
.home-bug-title {
|
|
flex: 1; min-width: 0;
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
|
|
/* Sentiment items */
|
|
.home-sent-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid rgba(0,0,0,0.03);
|
|
}
|
|
.home-sent-item:last-of-type { border-bottom: none; }
|
|
.home-sent-title {
|
|
flex: 1; min-width: 0;
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.home-sent-st {
|
|
flex-shrink: 0;
|
|
font-size: 11px; font-weight: 700;
|
|
min-width: 48px; text-align: center;
|
|
}
|
|
.home-sent-date {
|
|
flex-shrink: 0;
|
|
font-size: 11px; color: var(--text-muted);
|
|
min-width: 60px; text-align: right;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.home-summaries-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ========== Scrollbar ========== */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
|
|
|
/* ========== Bug Tracker ========== */
|
|
|
|
.bug-header-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
padding: 0 2px;
|
|
}
|
|
.bug-header-left { display: flex; align-items: baseline; gap: 12px; }
|
|
.bug-header-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
|
|
.bug-header-count { font-size: 13px; color: var(--text-muted); }
|
|
|
|
.bug-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.bug-btn:hover { background: var(--bg-primary); }
|
|
.bug-btn-primary {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.bug-btn-primary:hover { background: #2563eb; }
|
|
.bug-btn-danger {
|
|
color: var(--accent-red);
|
|
border-color: var(--accent-red);
|
|
}
|
|
.bug-btn-danger:hover { background: #fef2f2; }
|
|
.bug-btn-sm {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
height: 24px;
|
|
line-height: 1;
|
|
}
|
|
.bug-btn-sm:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
/* ========== Local Codex Sessions ========== */
|
|
|
|
.codex-shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
|
|
gap: 16px;
|
|
min-height: calc(100vh - 104px);
|
|
}
|
|
|
|
.codex-left,
|
|
.codex-right {
|
|
min-width: 0;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.codex-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.codex-header,
|
|
.codex-detail-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.codex-title,
|
|
.codex-detail-title {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: var(--text-primary);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.codex-subtitle,
|
|
.codex-detail-meta {
|
|
margin-top: 3px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.codex-toolbar {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.codex-toolbar .search-input {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.codex-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.codex-session-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.codex-session-item {
|
|
display: grid;
|
|
gap: 5px;
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
color: var(--text-primary);
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
}
|
|
|
|
.codex-session-item:hover,
|
|
.codex-session-item.active {
|
|
border-color: var(--accent-blue);
|
|
background: rgba(59, 130, 246, 0.06);
|
|
}
|
|
|
|
.codex-session-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-session-title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codex-badge {
|
|
flex-shrink: 0;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
background: rgba(107, 114, 128, 0.12);
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codex-session-meta,
|
|
.codex-session-preview {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.codex-session-preview {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.codex-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.codex-runner {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.codex-prompt {
|
|
width: 100%;
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
outline: none;
|
|
}
|
|
|
|
.codex-prompt:focus {
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
.codex-audio-file {
|
|
display: none;
|
|
}
|
|
|
|
.codex-runner-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.codex-voice-btn.recording {
|
|
border-color: #dc2626;
|
|
background: #dc2626;
|
|
color: #fff;
|
|
}
|
|
|
|
.codex-voice-status {
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.codex-job-status {
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codex-job-output {
|
|
display: none;
|
|
max-height: 260px;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: #0f172a;
|
|
color: #e2e8f0;
|
|
font: 12px/1.55 Consolas, 'Courier New', monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-messages {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.codex-message {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.codex-message.user {
|
|
border-left: 3px solid var(--accent-green);
|
|
}
|
|
|
|
.codex-message.assistant {
|
|
border-left: 3px solid var(--accent-blue);
|
|
}
|
|
|
|
.codex-message-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 8px 10px;
|
|
color: var(--text-muted);
|
|
background: var(--bg-card-hover);
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codex-message pre {
|
|
margin: 0;
|
|
padding: 10px;
|
|
color: var(--text-primary);
|
|
font: 12px/1.6 Consolas, 'Microsoft YaHei', monospace;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Bug card list */
|
|
.bug-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 14px;
|
|
margin-bottom: 4px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.bug-card:hover {
|
|
border-color: var(--accent-blue);
|
|
box-shadow: 0 1px 4px rgba(37,99,235,0.08);
|
|
}
|
|
.bug-card-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.bug-card-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.bug-card-id {
|
|
font-family: 'SFMono-Regular', 'Consolas', monospace;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
min-width: 44px;
|
|
}
|
|
.bug-card-pri {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
min-width: 52px;
|
|
}
|
|
.bug-card-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.bug-card-module {
|
|
font-size: 11px;
|
|
padding: 1px 8px;
|
|
border-radius: 4px;
|
|
background: rgba(99,102,241,0.08);
|
|
color: #6366f1;
|
|
white-space: nowrap;
|
|
}
|
|
.bug-card-status {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 2px 10px;
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
.bug-card-date {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Bug detail modal */
|
|
.bug-detail-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.35);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
animation: bugFadeIn 0.15s;
|
|
}
|
|
@keyframes bugFadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
.bug-detail-modal, .bug-add-modal {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
width: 560px;
|
|
max-width: 92vw;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
|
|
}
|
|
.bug-detail-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 20px 24px 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.bug-detail-id {
|
|
font-family: 'SFMono-Regular', 'Consolas', monospace;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--accent-blue);
|
|
margin-bottom: 4px;
|
|
}
|
|
.bug-detail-title {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
.bug-detail-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
.bug-detail-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
line-height: 1;
|
|
}
|
|
.bug-detail-close:hover { color: var(--text-primary); }
|
|
|
|
.bug-detail-body {
|
|
padding: 16px 24px;
|
|
}
|
|
.bug-detail-desc {
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: var(--text-secondary);
|
|
white-space: pre-wrap;
|
|
}
|
|
.bug-detail-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 24px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.bug-detail-status-change {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.bug-detail-status-change select {
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Bug add form */
|
|
.bug-add-body {
|
|
padding: 16px 24px;
|
|
}
|
|
.bug-form-group {
|
|
margin-bottom: 14px;
|
|
}
|
|
.bug-form-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 5px;
|
|
}
|
|
.bug-form-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
box-sizing: border-box;
|
|
}
|
|
.bug-form-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-blue);
|
|
box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
|
|
}
|
|
.bug-form-select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
box-sizing: border-box;
|
|
}
|
|
.bug-form-textarea {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
.bug-form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent-blue);
|
|
box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
|
|
}
|
|
.bug-form-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ========== Game Balance Analysis ========== */
|
|
|
|
.gb-module { margin-bottom: 12px; }
|
|
|
|
/* Version selector */
|
|
.gb-version-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.gb-btn-sm {
|
|
padding: 3px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
}
|
|
.gb-btn-sm:hover { background: var(--bg-card-hover); border-color: var(--accent-blue); }
|
|
|
|
.gb-version-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.gb-version-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
background: var(--bg-secondary);
|
|
transition: border-color 0.15s;
|
|
}
|
|
.gb-version-item:hover { border-color: var(--accent-blue); }
|
|
.gb-version-item input[type="checkbox"] { margin: 0; }
|
|
.gb-version-name { font-weight: 600; color: var(--text-primary); }
|
|
.gb-version-count { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* Filters */
|
|
.gb-filter-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.gb-filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.gb-filter-check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.gb-filter-check input[type="checkbox"] { margin: 0; }
|
|
.gb-filter-select {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
background: var(--bg-secondary);
|
|
min-width: 160px;
|
|
}
|
|
.gb-filter-select:disabled { opacity: 0.5; }
|
|
.gb-filter-select:focus { outline: none; border-color: var(--accent-blue); }
|
|
.gb-filter-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
.gb-btn {
|
|
padding: 6px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
.gb-btn:hover { border-color: var(--accent-blue); }
|
|
.gb-btn-primary {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.gb-btn-primary:hover { background: #2563eb; }
|
|
|
|
/* Stats */
|
|
.gb-stats-empty {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
padding: 16px;
|
|
}
|
|
.gb-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.gb-stat-card {
|
|
text-align: center;
|
|
padding: 12px 8px;
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.gb-stat-value {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--accent-blue);
|
|
}
|
|
.gb-stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Data table */
|
|
#gb-data-table-wrap { overflow-x: auto; }
|
|
|
|
.gb-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
.gb-table thead th {
|
|
padding: 8px 10px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
.gb-table tbody td {
|
|
padding: 7px 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
.gb-row { cursor: pointer; transition: background 0.1s; }
|
|
.gb-row:hover { background: var(--bg-card-hover); }
|
|
|
|
.gb-table-sm { font-size: 12px; }
|
|
.gb-table-sm th, .gb-table-sm td { padding: 4px 8px; }
|
|
|
|
.gb-tag {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.gb-tag-version { background: #e0e7ff; color: #3730a3; }
|
|
.gb-tag-kill { background: #fecaca; color: #b91c1c; }
|
|
|
|
.gb-loading {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
padding: 24px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Pagination */
|
|
.gb-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 10px 12px;
|
|
border-top: 1px solid var(--border-color);
|
|
flex-wrap: wrap;
|
|
}
|
|
.gb-page-btn {
|
|
width: 32px;
|
|
height: 28px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.gb-page-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
|
|
.gb-page-btn.active {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.gb-page-btn:disabled { opacity: 0.4; cursor: default; }
|
|
.gb-page-dots { font-size: 12px; color: var(--text-muted); padding: 0 2px; }
|
|
.gb-page-info { margin-left: 8px; font-size: 12px; color: var(--text-muted); }
|
|
|
|
/* Detail modal */
|
|
.gb-modal-overlay {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.35);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
.gb-modal {
|
|
background: var(--bg-card);
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow);
|
|
width: 100%;
|
|
max-width: 900px;
|
|
max-height: 85vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.gb-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.gb-modal-title { font-size: 15px; font-weight: 700; }
|
|
.gb-modal-close {
|
|
width: 28px; height: 28px;
|
|
border: none; background: none;
|
|
font-size: 20px; cursor: pointer;
|
|
color: var(--text-muted);
|
|
border-radius: 4px;
|
|
}
|
|
.gb-modal-close:hover { background: var(--bg-primary); color: var(--text-primary); }
|
|
.gb-modal-body {
|
|
padding: 16px 18px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
.gb-modal-body h4 {
|
|
margin: 16px 0 8px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ========== Form Helper ========== */
|
|
.fh-module .module-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.fh-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.fh-toolbar .search-input {
|
|
min-width: 360px;
|
|
}
|
|
|
|
.fh-source {
|
|
margin: 4px 0 12px;
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.fh-table-wrap {
|
|
max-height: calc(100vh - 240px);
|
|
}
|
|
|
|
.fh-skill-table,
|
|
.fh-collection-table {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.fh-skill-table th:nth-child(1),
|
|
.fh-skill-table td:nth-child(1) {
|
|
width: 80px;
|
|
}
|
|
|
|
.fh-skill-table th:nth-child(2),
|
|
.fh-skill-table td:nth-child(2) {
|
|
width: 64px;
|
|
}
|
|
|
|
.fh-skill-table th:nth-child(3),
|
|
.fh-skill-table td:nth-child(3) {
|
|
width: 220px;
|
|
}
|
|
|
|
.fh-skill-table th:nth-child(5),
|
|
.fh-skill-table td:nth-child(5),
|
|
.fh-skill-table th:nth-child(6),
|
|
.fh-skill-table td:nth-child(6) {
|
|
width: 88px;
|
|
}
|
|
|
|
.fh-skill-table th:nth-child(7),
|
|
.fh-skill-table td:nth-child(7) {
|
|
width: 220px;
|
|
}
|
|
|
|
.fh-collection-table th:nth-child(1),
|
|
.fh-collection-table td:nth-child(1) {
|
|
width: 90px;
|
|
}
|
|
|
|
.fh-collection-table th:nth-child(2),
|
|
.fh-collection-table td:nth-child(2) {
|
|
width: 64px;
|
|
}
|
|
|
|
.fh-collection-table th:nth-child(3),
|
|
.fh-collection-table td:nth-child(3) {
|
|
width: 220px;
|
|
}
|
|
|
|
.fh-collection-table th:nth-child(5),
|
|
.fh-collection-table td:nth-child(5) {
|
|
width: 340px;
|
|
}
|
|
|
|
.fh-collection-table th:nth-child(6),
|
|
.fh-collection-table td:nth-child(6) {
|
|
width: 220px;
|
|
}
|
|
|
|
#fh-wiki-list-content .fh-collection-table th:nth-child(1),
|
|
#fh-wiki-list-content .fh-collection-table td:nth-child(1) {
|
|
width: 72px;
|
|
}
|
|
|
|
#fh-wiki-list-content .fh-collection-table th:nth-child(3),
|
|
#fh-wiki-list-content .fh-collection-table td:nth-child(3) {
|
|
width: 240px;
|
|
}
|
|
|
|
#fh-wiki-list-content .fh-collection-table th:nth-child(5),
|
|
#fh-wiki-list-content .fh-collection-table td:nth-child(5) {
|
|
width: 420px;
|
|
}
|
|
|
|
.fh-summary-cell {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.fh-line-input,
|
|
.fh-line-textarea,
|
|
.fh-field input,
|
|
.fh-field textarea,
|
|
.fh-field select {
|
|
width: 100%;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border-radius: 6px;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.fh-line-input,
|
|
.fh-field input,
|
|
.fh-field select {
|
|
height: 32px;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.fh-line-textarea {
|
|
min-height: 38px;
|
|
max-height: 180px;
|
|
padding: 7px 8px;
|
|
line-height: 1.45;
|
|
resize: vertical;
|
|
white-space: pre-wrap;
|
|
overflow: auto;
|
|
}
|
|
|
|
.fh-line-desc {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.fh-skill-table td,
|
|
.fh-collection-table td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.fh-readonly-name {
|
|
display: inline-block;
|
|
max-width: 260px;
|
|
color: var(--text-secondary);
|
|
font-family: Consolas, 'Courier New', monospace;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.fh-field textarea {
|
|
min-height: 62px;
|
|
padding: 7px 8px;
|
|
resize: vertical;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.fh-line-input:focus,
|
|
.fh-field input:focus,
|
|
.fh-field textarea:focus,
|
|
.fh-field select:focus {
|
|
border-color: var(--accent-blue);
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
|
|
}
|
|
|
|
.fh-action-cell {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fh-action-cell .gb-btn-sm {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.fh-empty {
|
|
padding: 18px;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.fh-modal {
|
|
max-width: 1040px;
|
|
}
|
|
|
|
.fh-modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 12px 18px;
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.fh-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.fh-detail-grid .fh-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.fh-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.fh-field span,
|
|
.fh-check span,
|
|
.fh-readonly-line span {
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fh-wide {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.fh-wide textarea {
|
|
min-height: 110px;
|
|
}
|
|
|
|
.fh-check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 32px;
|
|
padding: 6px 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.fh-check input {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.fh-section-title {
|
|
margin: 18px 0 10px;
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.fh-show-card {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 12px;
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
.fh-show-head {
|
|
margin-bottom: 10px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: var(--accent-purple);
|
|
}
|
|
|
|
.fh-readonly-line {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr;
|
|
align-items: start;
|
|
gap: 10px;
|
|
margin: 8px 0 2px;
|
|
}
|
|
|
|
.fh-readonly-line code {
|
|
display: block;
|
|
padding: 7px 8px;
|
|
overflow-x: auto;
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
}
|
|
.gb-detail-meta {
|
|
display: flex;
|
|
gap: 20px;
|
|
font-size: 13px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.gb-detail-stats {
|
|
display: flex;
|
|
gap: 16px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.gb-detail-table-wrap {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ── Hero Balance ── */
|
|
|
|
.gbh-metric-bar {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 16px;
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
border: 1px solid var(--border-color);
|
|
width: fit-content;
|
|
}
|
|
.gbh-metric-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding: 6px 16px;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
transition: all 0.15s;
|
|
}
|
|
.gbh-metric-radio:has(input:checked) {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
}
|
|
.gbh-metric-radio input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.gbh-tier-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.gbh-tier-row {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.gbh-tier-label {
|
|
width: 64px;
|
|
min-width: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
writing-mode: horizontal-tb;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.gbh-tier-heroes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
flex: 1;
|
|
}
|
|
|
|
.gbh-hero-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 72px;
|
|
cursor: default;
|
|
transition: transform 0.1s;
|
|
}
|
|
.gbh-hero-card:hover { transform: translateY(-2px); }
|
|
|
|
.gbh-hero-portrait {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 2px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.gbh-hero-portrait img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.gbh-hero-placeholder {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.gbh-hero-name {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-top: 3px;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
max-width: 72px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gbh-hero-value {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--accent-blue);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* Hero data compare table */
|
|
.gbhd-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.gbhd-table-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.gbhd-class-block {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
}
|
|
.gbhd-class-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: #f8fafc;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.gbhd-class-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 34px;
|
|
height: 24px;
|
|
padding: 0 10px;
|
|
border-radius: 4px;
|
|
background: var(--text-primary);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
.gbhd-table-wrap {
|
|
max-height: 72vh;
|
|
overflow: auto;
|
|
}
|
|
.gbhd-compare-table {
|
|
width: 100%;
|
|
min-width: 980px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
.gbhd-compare-table th,
|
|
.gbhd-compare-table td {
|
|
border-right: 1px solid #a7b0bc;
|
|
border-bottom: 1px solid #a7b0bc;
|
|
vertical-align: top;
|
|
}
|
|
.gbhd-compare-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background: #f6d35b;
|
|
color: #253041;
|
|
font-weight: 800;
|
|
}
|
|
.gbhd-hero-head {
|
|
height: 42px;
|
|
padding: 6px 8px;
|
|
text-align: center;
|
|
}
|
|
.gbhd-hero-head-main {
|
|
font-size: 14px;
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.gbhd-hero-head-sub {
|
|
margin-top: 2px;
|
|
color: rgba(37, 48, 65, 0.72);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.gbhd-level-head,
|
|
.gbhd-level-cell {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 3;
|
|
width: 48px;
|
|
min-width: 48px;
|
|
max-width: 48px;
|
|
text-align: center;
|
|
}
|
|
.gbhd-level-head {
|
|
background: #f6d35b;
|
|
}
|
|
.gbhd-level-cell {
|
|
background: #fff;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
vertical-align: middle;
|
|
}
|
|
.gbhd-metric-head,
|
|
.gbhd-metric-cell {
|
|
position: sticky;
|
|
left: 48px;
|
|
z-index: 3;
|
|
width: 54px;
|
|
min-width: 54px;
|
|
max-width: 54px;
|
|
text-align: center;
|
|
}
|
|
.gbhd-metric-head {
|
|
background: #f6d35b;
|
|
}
|
|
.gbhd-metric-cell {
|
|
background: #f8fafc;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
vertical-align: middle;
|
|
}
|
|
.gbhd-value-cell {
|
|
width: 176px;
|
|
min-height: 30px;
|
|
padding: 5px 7px;
|
|
color: var(--text-primary);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
.gbhd-level-band-alt td,
|
|
.gbhd-level-band-alt .gbhd-level-cell,
|
|
.gbhd-level-band-alt .gbhd-metric-cell {
|
|
background: #fdf3f9;
|
|
}
|
|
.gbhd-task-value {
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
text-align: left;
|
|
}
|
|
.gbhd-stat-value {
|
|
color: #1f2937;
|
|
font-family: Consolas, "SFMono-Regular", "Microsoft YaHei", monospace;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
.gbhd-skill-value {
|
|
text-align: left;
|
|
}
|
|
.gbhd-skill-line {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 3px;
|
|
}
|
|
.gbhd-skill-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 18px;
|
|
max-width: 100%;
|
|
padding: 1px 4px;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
background: #eef2f7;
|
|
color: #334155;
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
white-space: nowrap;
|
|
}
|
|
.gbhd-skill-chip.is-new {
|
|
border-color: rgba(16, 185, 129, 0.42);
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: #047857;
|
|
}
|
|
.gbhd-skill-chip.is-hidden {
|
|
opacity: 0.58;
|
|
}
|
|
.gbhd-empty,
|
|
.gbhd-missing {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Hero upgrade turn estimation */
|
|
.gbhu-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.gbhu-model-note {
|
|
margin-bottom: 12px;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: #f8fafc;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.gbhu-table-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.gbhu-table-wrap {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
.gbhu-table {
|
|
min-width: 1180px;
|
|
}
|
|
.gbhu-table th,
|
|
.gbhu-table td {
|
|
vertical-align: top;
|
|
}
|
|
.gbhu-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
.gbhu-force {
|
|
min-width: 120px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
.gbhu-class {
|
|
margin-top: 2px;
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
.gbhu-est-cell {
|
|
width: 27%;
|
|
min-width: 260px;
|
|
}
|
|
.gbhu-est-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.gbhu-turn {
|
|
color: #1f2937;
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
.gbhu-speed {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 20px;
|
|
padding: 1px 7px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
white-space: nowrap;
|
|
}
|
|
.gbhu-speed-fast {
|
|
background: rgba(16, 185, 129, 0.12);
|
|
color: #047857;
|
|
}
|
|
.gbhu-speed-normal {
|
|
background: rgba(59, 130, 246, 0.12);
|
|
color: #1d4ed8;
|
|
}
|
|
.gbhu-speed-slow {
|
|
background: rgba(245, 158, 11, 0.16);
|
|
color: #92400e;
|
|
}
|
|
.gbhu-speed-gated {
|
|
background: rgba(100, 116, 139, 0.14);
|
|
color: #475569;
|
|
}
|
|
.gbhu-task {
|
|
margin-bottom: 4px;
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
.gbhu-logic {
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Hero pricing model */
|
|
.gbhp-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.gbhp-model-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 260px;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.gbhp-source-info {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.gbhp-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.gbhp-table-wrap {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
.gbhp-table {
|
|
min-width: 980px;
|
|
}
|
|
.gbhp-table th,
|
|
.gbhp-table td {
|
|
vertical-align: middle;
|
|
}
|
|
.gbhp-hero-row {
|
|
cursor: pointer;
|
|
}
|
|
.gbhp-hero-row:hover {
|
|
background: var(--bg-primary);
|
|
}
|
|
.gbhp-hero-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 140px;
|
|
}
|
|
.gbhp-hero-name {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
.gbhp-hero-key {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
.gbhp-class-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 22px;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.gbhp-price-cell {
|
|
position: relative;
|
|
width: 100%;
|
|
min-width: 96px;
|
|
height: 44px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
}
|
|
.gbhp-price-cell:hover {
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.gbhp-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(59, 130, 246, 0.14);
|
|
pointer-events: none;
|
|
}
|
|
.gbhp-value {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
.gbhp-breakdown {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
.gbhp-empty-cell {
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
.gbhp-skill-summary {
|
|
max-width: 240px;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
.gbhp-modal {
|
|
max-width: 1120px;
|
|
}
|
|
.gbhp-detail-table-wrap {
|
|
max-height: 360px;
|
|
}
|
|
.gbhp-detail-table {
|
|
min-width: 980px;
|
|
}
|
|
.gbhp-skill-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.gbhp-skill-block {
|
|
display: grid;
|
|
grid-template-columns: 56px 1fr;
|
|
gap: 10px;
|
|
align-items: start;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.gbhp-skill-level {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: var(--text-secondary);
|
|
}
|
|
.gbhp-skill-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.gbhp-skill-chip,
|
|
.gbhp-skill-empty {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
.gbhp-skill-empty {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.gbhp-model-meta,
|
|
.gbhp-controls {
|
|
width: 100%;
|
|
}
|
|
.gbhp-controls .gb-filter-select {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
/* Placeholder for future modules */
|
|
.gb-placeholder {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
padding: 60px 20px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ========== Community Monitor ========== */
|
|
.cm-module .module-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.cm-topbar,
|
|
.cm-filter-bar,
|
|
.cm-work,
|
|
.cm-pager,
|
|
.cm-config {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cm-actions,
|
|
.cm-platforms {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cm-topbar {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cm-config {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cm-btn {
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cm-btn.primary {
|
|
border-color: var(--accent-blue);
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
}
|
|
|
|
.cm-btn:disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.cm-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.cm-metric {
|
|
padding: 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.cm-metric span {
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cm-metric strong {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 22px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.cm-runs-card {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
padding: 12px;
|
|
}
|
|
|
|
.cm-section-title {
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.cm-run-row {
|
|
display: grid;
|
|
grid-template-columns: 132px 84px 76px minmax(0, 1fr);
|
|
gap: 8px;
|
|
align-items: center;
|
|
min-height: 28px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.cm-run-status {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.cm-run-status.ok { color: var(--accent-green); }
|
|
.cm-run-status.warn { color: var(--accent-orange); }
|
|
.cm-run-status.bad { color: var(--accent-red); }
|
|
|
|
.cm-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.cm-item {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
padding: 14px;
|
|
}
|
|
|
|
.cm-item.urgent {
|
|
border-color: rgba(239,68,68,0.45);
|
|
box-shadow: inset 4px 0 0 rgba(239,68,68,0.85);
|
|
}
|
|
|
|
.cm-item-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.cm-item-title-block {
|
|
min-width: 0;
|
|
}
|
|
|
|
.cm-item h3 {
|
|
margin: 0 0 8px;
|
|
font-size: 15px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.cm-meta,
|
|
.cm-submeta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.cm-submeta {
|
|
margin-top: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cm-content,
|
|
.cm-reason,
|
|
.cm-reply {
|
|
margin: 10px 0 0;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.cm-reason {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.cm-reply {
|
|
padding: 10px 12px;
|
|
border-radius: 6px;
|
|
background: rgba(79,140,255,0.08);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.cm-link {
|
|
flex: 0 0 auto;
|
|
color: var(--accent-blue);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.cm-link.disabled {
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cm-work {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.cm-work select,
|
|
.cm-work input {
|
|
min-height: 32px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cm-work input {
|
|
min-width: 180px;
|
|
}
|
|
|
|
.cm-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-height: 32px;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cm-empty,
|
|
.cm-empty-small,
|
|
.cm-error {
|
|
padding: 22px;
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: 8px;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.cm-error {
|
|
color: var(--accent-red);
|
|
background: rgba(239,68,68,0.06);
|
|
}
|
|
|
|
.cm-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2200;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: rgba(15, 23, 42, 0.58);
|
|
}
|
|
|
|
.cm-modal-card {
|
|
width: min(760px, 96vw);
|
|
max-height: min(760px, 92vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.cm-modal-head,
|
|
.cm-modal-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.cm-modal-foot {
|
|
justify-content: flex-end;
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.cm-modal-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.cm-modal-close {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cm-modal-body {
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
}
|
|
|
|
.cm-form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.cm-textarea {
|
|
width: 100%;
|
|
min-height: 160px;
|
|
margin: 10px 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
font: inherit;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* ========== SNS Assistant ========== */
|
|
|
|
/* 子选项更大更好点击 */
|
|
#sns-sub-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
#sns-sub-tabs .sub-tab {
|
|
padding: 12px 24px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
min-width: 100px;
|
|
border-radius: 8px;
|
|
}
|
|
#sns-sub-tabs .sub-tab.active {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Header bar */
|
|
.sns-header-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
padding: 0 2px;
|
|
}
|
|
.sns-header-left { display: flex; align-items: baseline; gap: 12px; }
|
|
.sns-header-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
|
|
.sns-header-count { font-size: 13px; color: var(--text-muted); }
|
|
.sns-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sns-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 18px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.sns-btn:hover { background: var(--bg-primary); }
|
|
.sns-btn-primary {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.sns-btn-primary:hover { background: #2563eb; }
|
|
.sns-btn-large {
|
|
min-height: 44px;
|
|
padding: 11px 22px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Comment event row */
|
|
.sns-comment-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
margin-bottom: 8px;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.sns-comment-row:hover { border-color: rgba(79,140,255,0.25); }
|
|
|
|
/* Status badge */
|
|
.sns-status-badge {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.15s;
|
|
}
|
|
.sns-status-badge.sns-pending {
|
|
background: rgba(245,158,11,0.12);
|
|
color: var(--accent-orange);
|
|
border: 1px solid rgba(245,158,11,0.3);
|
|
}
|
|
.sns-status-badge.sns-processed {
|
|
background: rgba(16,185,129,0.12);
|
|
color: var(--accent-green);
|
|
border: 1px solid rgba(16,185,129,0.3);
|
|
}
|
|
.sns-status-badge:hover { opacity: 0.8; }
|
|
|
|
/* Title */
|
|
.sns-comment-title {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Delete button */
|
|
.sns-delete-btn {
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.sns-delete-btn:hover {
|
|
color: var(--accent-red);
|
|
background: rgba(239,68,68,0.08);
|
|
border-color: rgba(239,68,68,0.2);
|
|
}
|
|
|
|
.sns-row-meta {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.sns-comment-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
.sns-comment-subtitle {
|
|
margin-top: 5px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.sns-view-btn {
|
|
flex-shrink: 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.sns-view-btn:hover {
|
|
color: #fff;
|
|
background: var(--accent-blue);
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
/* Empty state */
|
|
.sns-empty {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
padding: 40px 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Discord paste dialog */
|
|
.sns-discord-modal-card {
|
|
width: 760px;
|
|
max-width: 94vw;
|
|
}
|
|
.sns-discord-help {
|
|
margin-bottom: 16px;
|
|
padding: 12px 14px;
|
|
border: 1px solid rgba(79,140,255,0.18);
|
|
border-radius: 8px;
|
|
background: rgba(79,140,255,0.08);
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
.sns-discord-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
.sns-discord-textarea {
|
|
min-height: 300px;
|
|
font-family: Consolas, "Courier New", monospace;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
.sns-discord-submit {
|
|
min-width: 160px;
|
|
min-height: 42px;
|
|
justify-content: center;
|
|
}
|
|
.sns-discord-detail-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px 16px;
|
|
margin-bottom: 14px;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
.sns-discord-raw {
|
|
margin: 0;
|
|
padding: 14px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: Consolas, "Courier New", monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 56vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.sns-header-bar {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.sns-header-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
.sns-discord-grid,
|
|
.sns-discord-detail-meta {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ========== Quick Replies (常用回复) ========== */
|
|
.qr-row {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
margin-bottom: 10px;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.qr-row:hover { border-color: rgba(79,140,255,0.25); }
|
|
|
|
.qr-row-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.qr-title {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.qr-row-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.qr-copy-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.qr-copy-btn:hover {
|
|
background: var(--accent-blue);
|
|
color: #fff;
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.qr-delete-btn {
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.qr-delete-btn:hover {
|
|
color: var(--accent-red);
|
|
background: rgba(239,68,68,0.08);
|
|
border-color: rgba(239,68,68,0.2);
|
|
}
|
|
.qr-content {
|
|
margin: 0;
|
|
padding: 10px 12px;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
color: var(--text-secondary);
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Modal */
|
|
.qr-modal {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.6);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
.qr-modal-card {
|
|
background: var(--bg-secondary, #fff);
|
|
border-radius: 14px;
|
|
width: 520px;
|
|
max-width: 92vw;
|
|
max-height: 86vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
|
|
}
|
|
.qr-modal-header {
|
|
padding: 18px 22px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.qr-modal-title {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
.qr-modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
line-height: 1;
|
|
}
|
|
.qr-modal-close:hover { background: var(--bg-primary); color: var(--text-primary); }
|
|
.qr-modal-body {
|
|
padding: 18px 22px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
.qr-field-label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 6px;
|
|
}
|
|
.qr-field-label + .qr-input,
|
|
.qr-field-label + .qr-textarea {
|
|
margin-bottom: 14px;
|
|
}
|
|
.qr-input,
|
|
.qr-textarea {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.qr-input:focus,
|
|
.qr-textarea:focus {
|
|
border-color: var(--accent-blue);
|
|
}
|
|
.qr-textarea {
|
|
min-height: 140px;
|
|
resize: vertical;
|
|
line-height: 1.55;
|
|
}
|
|
.qr-modal-footer {
|
|
padding: 14px 22px;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
background: var(--bg-primary);
|
|
border-radius: 0 0 14px 14px;
|
|
}
|
|
|
|
/* ========== Video Helper (视频助手) ========== */
|
|
.video-helper-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.video-helper-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
min-width: 0;
|
|
}
|
|
.video-helper-card:hover {
|
|
border-color: rgba(79,140,255,0.25);
|
|
}
|
|
.video-helper-card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.video-helper-title-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
}
|
|
.video-helper-platform {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: fit-content;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
background: rgba(79,140,255,0.1);
|
|
color: var(--accent-blue);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
.video-helper-title {
|
|
color: var(--text-primary);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
}
|
|
.video-helper-note {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
margin-bottom: 10px;
|
|
}
|
|
.video-helper-content {
|
|
margin: 0;
|
|
padding: 10px 12px;
|
|
min-height: 54px;
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* ========== Art Development ========== */
|
|
.artdev-module .module-body {
|
|
padding: 0;
|
|
}
|
|
.artdev-icon-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
.artdev-batch,
|
|
.artdev-round,
|
|
.artdev-object-row {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
}
|
|
.artdev-batch-head,
|
|
.artdev-round-head {
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 14px 16px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.artdev-batch-head:hover,
|
|
.artdev-round-head:hover {
|
|
background: rgba(79, 140, 255, 0.06);
|
|
}
|
|
.artdev-batch-title,
|
|
.artdev-round-title,
|
|
.artdev-object-title {
|
|
color: var(--text-primary);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
}
|
|
.artdev-batch-meta,
|
|
.artdev-round-meta,
|
|
.artdev-object-meta,
|
|
.artdev-batch-summary,
|
|
.artdev-round-summary,
|
|
.artdev-object-desc {
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.artdev-batch-stats,
|
|
.artdev-round-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
min-width: 280px;
|
|
}
|
|
.artdev-batch-stats span,
|
|
.artdev-round-stats span {
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(79, 140, 255, 0.1);
|
|
color: var(--accent-blue);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
.artdev-batch-body {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 0 16px 16px;
|
|
}
|
|
.artdev-batch.collapsed .artdev-batch-body,
|
|
.artdev-round.collapsed .artdev-round-body {
|
|
display: none;
|
|
}
|
|
.artdev-requirements {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
.artdev-round-list,
|
|
.artdev-object-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.artdev-round {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.artdev-round-body {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 0 12px 12px;
|
|
}
|
|
.artdev-object-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(220px, 280px);
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: var(--bg-primary);
|
|
}
|
|
.artdev-object-info {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 6px;
|
|
}
|
|
.artdev-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(120px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.artdev-option {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
}
|
|
.artdev-option.selected {
|
|
border-color: var(--accent-blue);
|
|
box-shadow: inset 0 0 0 1px var(--accent-blue);
|
|
}
|
|
.artdev-option-title {
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
min-height: 30px;
|
|
}
|
|
.artdev-image-box {
|
|
aspect-ratio: 1 / 1;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid rgba(148, 163, 184, 0.45);
|
|
border-radius: 6px;
|
|
background:
|
|
linear-gradient(45deg, rgba(255,255,255,0.055) 25%, transparent 25%),
|
|
linear-gradient(-45deg, rgba(255,255,255,0.055) 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.055) 75%),
|
|
linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.055) 75%),
|
|
#111827;
|
|
background-size: 20px 20px;
|
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0, 0 0;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
|
|
overflow: hidden;
|
|
}
|
|
.artdev-image-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
padding: 12px;
|
|
}
|
|
.artdev-missing {
|
|
color: rgba(226, 232, 240, 0.75);
|
|
font-size: 12px;
|
|
}
|
|
.artdev-option button,
|
|
.artdev-feedback button {
|
|
height: 30px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
}
|
|
.artdev-option button:hover,
|
|
.artdev-feedback button:hover {
|
|
border-color: var(--accent-blue);
|
|
color: var(--accent-blue);
|
|
}
|
|
.artdev-option details {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
.artdev-option details p {
|
|
max-height: 110px;
|
|
margin: 6px 0 0;
|
|
overflow: auto;
|
|
line-height: 1.45;
|
|
}
|
|
.artdev-feedback {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: 1fr auto;
|
|
gap: 8px;
|
|
}
|
|
.artdev-feedback textarea {
|
|
grid-column: 1 / -1;
|
|
min-height: 108px;
|
|
resize: vertical;
|
|
padding: 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.artdev-feedback span {
|
|
align-self: center;
|
|
color: var(--accent-green);
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.artdev-object-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.artdev-feedback {
|
|
grid-template-columns: 1fr 80px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.artdev-batch-head,
|
|
.artdev-round-head {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
.artdev-batch-stats,
|
|
.artdev-round-stats {
|
|
justify-content: flex-start;
|
|
min-width: 0;
|
|
}
|
|
.artdev-options {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ========== Responsive ========== */
|
|
/* ========== Email Processing ========== */
|
|
.ep-shell {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.ep-header,
|
|
.ep-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.ep-title {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
color: var(--text-primary);
|
|
}
|
|
.ep-subtitle {
|
|
margin-top: 2px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
.ep-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.ep-btn {
|
|
min-height: 32px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.ep-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
}
|
|
.ep-btn:hover:not(:disabled) {
|
|
border-color: var(--accent-blue);
|
|
color: var(--accent-blue);
|
|
}
|
|
.ep-btn-primary {
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: var(--accent-blue);
|
|
}
|
|
.ep-btn-done {
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: var(--accent-green);
|
|
}
|
|
.ep-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(100px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
.ep-stat {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
padding: 10px 12px;
|
|
}
|
|
.ep-stat span {
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
.ep-stat b {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 22px;
|
|
}
|
|
.ep-search {
|
|
min-width: 320px;
|
|
flex: 1;
|
|
}
|
|
.ep-page-info {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
min-width: 110px;
|
|
text-align: right;
|
|
}
|
|
.ep-table-wrap {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
overflow: auto;
|
|
max-height: calc(100vh - 245px);
|
|
}
|
|
.ep-table {
|
|
width: 100%;
|
|
min-width: 1180px;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
.ep-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
padding: 7px 8px;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
.ep-table td {
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 12px;
|
|
vertical-align: top;
|
|
}
|
|
.ep-row {
|
|
cursor: pointer;
|
|
}
|
|
.ep-row:hover {
|
|
background: var(--bg-card-hover);
|
|
}
|
|
.ep-id,
|
|
.ep-date,
|
|
.ep-body-len {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ep-sender,
|
|
.ep-subject,
|
|
.ep-summary {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.ep-subject {
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
.ep-summary {
|
|
margin-top: 2px;
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
}
|
|
.ep-status,
|
|
.ep-chip,
|
|
.ep-priority,
|
|
.ep-decision {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
.ep-status-unprocessed {
|
|
color: var(--accent-red);
|
|
background: rgba(239, 68, 68, 0.1);
|
|
}
|
|
.ep-status-snoozed {
|
|
color: var(--accent-orange);
|
|
background: rgba(245, 158, 11, 0.12);
|
|
}
|
|
.ep-status-processed {
|
|
color: var(--accent-green);
|
|
background: rgba(16, 185, 129, 0.12);
|
|
}
|
|
.ep-chip,
|
|
.ep-priority,
|
|
.ep-decision {
|
|
color: var(--text-secondary);
|
|
background: rgba(148, 163, 184, 0.12);
|
|
}
|
|
.ep-empty,
|
|
.ep-error {
|
|
padding: 28px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
.ep-error {
|
|
color: var(--accent-red);
|
|
}
|
|
.ep-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 3000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: rgba(15, 23, 42, 0.35);
|
|
}
|
|
.ep-modal {
|
|
width: min(1360px, calc(100vw - 40px));
|
|
max-height: calc(100vh - 40px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-card);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.ep-modal-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.ep-modal-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
}
|
|
.ep-modal-meta {
|
|
margin-top: 3px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
.ep-close {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
.ep-close:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
.ep-modal-body {
|
|
padding: 14px;
|
|
overflow: auto;
|
|
}
|
|
.ep-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
|
|
gap: 14px;
|
|
}
|
|
.ep-detail-mail,
|
|
.ep-detail-plan {
|
|
min-width: 0;
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 8px;
|
|
}
|
|
.ep-section-title {
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
.ep-chip-line {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.ep-mail-body {
|
|
max-height: 62vh;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
}
|
|
.ep-links {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.ep-links a {
|
|
padding: 3px 7px;
|
|
border-radius: 4px;
|
|
background: rgba(59, 130, 246, 0.08);
|
|
color: var(--accent-blue);
|
|
font-size: 11px;
|
|
text-decoration: none;
|
|
}
|
|
.ep-label {
|
|
margin-top: 4px;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.ep-full {
|
|
width: 100%;
|
|
}
|
|
.ep-textarea {
|
|
width: 100%;
|
|
min-height: 84px;
|
|
padding: 9px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
resize: vertical;
|
|
}
|
|
.ep-reply-edit {
|
|
min-height: 190px;
|
|
}
|
|
.ep-feedback-edit {
|
|
min-height: 96px;
|
|
}
|
|
.ep-modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin: 4px 0 8px;
|
|
}
|
|
.ep-history {
|
|
display: grid;
|
|
gap: 8px;
|
|
max-height: 260px;
|
|
overflow: auto;
|
|
}
|
|
.ep-history-item {
|
|
padding: 9px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
}
|
|
.ep-history-meta {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.ep-history-block {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-top: 6px;
|
|
}
|
|
.ep-history-block b {
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
}
|
|
.ep-history-block pre {
|
|
max-height: 110px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
color: var(--text-primary);
|
|
font-family: inherit;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
}
|
|
.ep-empty-inline {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.sidebar { display: none; }
|
|
.main { margin-left: 0; }
|
|
}
|
|
|
|
/* Mobile shell and broad responsive overrides. Desktop rules above remain unchanged. */
|
|
.mobile-nav-toggle,
|
|
.mobile-nav-backdrop {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
:root {
|
|
--sidebar-width: min(320px, 86vw);
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body::after {
|
|
left: 0;
|
|
}
|
|
|
|
.header {
|
|
height: 56px;
|
|
padding: 8px 14px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.header-left,
|
|
.header-right {
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-left {
|
|
gap: 8px;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.header-right {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-logo {
|
|
height: 24px;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-sub,
|
|
.header-info {
|
|
display: none;
|
|
}
|
|
|
|
.btn-refresh {
|
|
min-height: 40px;
|
|
padding: 8px 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header-quick-actions {
|
|
gap: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-quick-action {
|
|
min-height: 40px;
|
|
padding: 8px 9px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.layout {
|
|
display: block;
|
|
margin-top: 56px;
|
|
min-height: calc(100vh - 56px);
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-left: 0;
|
|
padding: 16px;
|
|
}
|
|
|
|
.mobile-nav-toggle {
|
|
display: inline-flex;
|
|
width: 40px;
|
|
height: 40px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mobile-nav-toggle span {
|
|
width: 18px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: currentColor;
|
|
transition: transform 0.18s, opacity 0.18s;
|
|
}
|
|
|
|
body.mobile-nav-open .mobile-nav-toggle span:nth-child(1) {
|
|
transform: translateY(6px) rotate(45deg);
|
|
}
|
|
|
|
body.mobile-nav-open .mobile-nav-toggle span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
body.mobile-nav-open .mobile-nav-toggle span:nth-child(3) {
|
|
transform: translateY(-6px) rotate(-45deg);
|
|
}
|
|
|
|
.mobile-nav-backdrop {
|
|
position: fixed;
|
|
inset: 56px 0 0;
|
|
z-index: 210;
|
|
background: rgba(15, 23, 42, 0.32);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
display: block;
|
|
}
|
|
|
|
body.mobile-nav-open .mobile-nav-backdrop {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.sidebar {
|
|
display: block;
|
|
top: 56px;
|
|
left: calc(-1 * var(--sidebar-width));
|
|
width: var(--sidebar-width);
|
|
max-width: 86vw;
|
|
padding: 12px;
|
|
transform: none;
|
|
transition: none;
|
|
z-index: 240;
|
|
box-shadow: 12px 0 32px rgba(15, 23, 42, 0.16);
|
|
overscroll-behavior: contain;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-content: start;
|
|
gap: 6px;
|
|
}
|
|
|
|
body.mobile-nav-open .sidebar,
|
|
.sidebar.is-open {
|
|
left: 0 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.sidebar-tab {
|
|
min-height: 42px;
|
|
padding: 9px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-section-label {
|
|
padding: 12px 4px 2px;
|
|
}
|
|
|
|
.module-card,
|
|
.oc-dashboard,
|
|
.oc-timeline-section,
|
|
.mkt-timeline-section,
|
|
.dev-timeline-section,
|
|
.ver-timeline-section,
|
|
.ver-current-card,
|
|
.ai-hero {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.module-card {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.module-header {
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.module-body {
|
|
padding: 14px;
|
|
}
|
|
|
|
.module-badge {
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.summary-grid,
|
|
.gb-stats-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
|
|
}
|
|
|
|
.home-summaries-grid,
|
|
.card-grid,
|
|
.oc-dash-cards,
|
|
.ai-section-grid,
|
|
.ai-module-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.summary-card {
|
|
padding: 14px;
|
|
}
|
|
|
|
.summary-card .value {
|
|
font-size: 24px;
|
|
}
|
|
|
|
#arch-canvas {
|
|
height: 380px;
|
|
}
|
|
|
|
.timeline-container,
|
|
.table-wrap,
|
|
#gb-data-table-wrap,
|
|
.gbhd-table-wrap,
|
|
.gbhp-table-wrap,
|
|
.gb-detail-table-wrap,
|
|
.gbhp-detail-table-wrap,
|
|
.fh-table-wrap,
|
|
.corefb-table-wrap,
|
|
.mkt-timeline-scroll,
|
|
.dev-timeline-scroll,
|
|
.ver-timeline-scroll {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.toolbar,
|
|
.fh-toolbar,
|
|
.gb-filter-grid,
|
|
.gb-filter-actions,
|
|
.gb-version-bar,
|
|
.gbhp-toolbar,
|
|
.gbhd-toolbar,
|
|
.bug-detail-status-change,
|
|
.bug-form-row,
|
|
.mkt-form-row {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.search-input,
|
|
.filter-select,
|
|
.gb-filter-select,
|
|
.fh-toolbar .search-input,
|
|
.mkt-form-half,
|
|
.gbhp-model-meta,
|
|
.gbhp-controls,
|
|
.gbhp-controls .gb-filter-select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sub-tabs,
|
|
#sns-sub-tabs {
|
|
gap: 4px;
|
|
padding: 4px;
|
|
margin-bottom: 14px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.sub-tabs::-webkit-scrollbar,
|
|
#sns-sub-tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.sub-tab,
|
|
#sns-sub-tabs .sub-tab {
|
|
min-height: 40px;
|
|
padding: 9px 14px;
|
|
}
|
|
|
|
.dtable,
|
|
.gb-table,
|
|
.ai-table,
|
|
.gbhp-table,
|
|
.gbhp-detail-table {
|
|
min-width: 720px;
|
|
}
|
|
|
|
.gbhd-compare-table {
|
|
min-width: 900px;
|
|
}
|
|
|
|
.fh-skill-table,
|
|
.fh-collection-table,
|
|
.corefb-table {
|
|
min-width: 820px;
|
|
}
|
|
|
|
.loading-card {
|
|
width: min(340px, calc(100vw - 32px));
|
|
min-width: 0;
|
|
padding: 28px 22px;
|
|
}
|
|
|
|
.toast {
|
|
top: 66px;
|
|
left: 16px;
|
|
right: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mechanics-layout {
|
|
min-height: 0;
|
|
gap: 12px;
|
|
}
|
|
|
|
.mechanics-sidebar {
|
|
max-height: 260px;
|
|
}
|
|
|
|
.mechanics-reader {
|
|
height: 70vh;
|
|
min-height: 480px;
|
|
}
|
|
|
|
.ai-hero-top,
|
|
.bug-header-bar,
|
|
.sent-header-bar,
|
|
.corefb-header-bar,
|
|
.rawfb-header-bar,
|
|
.sns-header-bar,
|
|
.mkt-header-bar,
|
|
.dev-header-bar,
|
|
.ver-list-header,
|
|
.oc-dash-header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ai-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ai-source {
|
|
white-space: normal;
|
|
}
|
|
|
|
.ai-stats {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.sent-card,
|
|
.sns-comment-row,
|
|
.bug-card {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sent-card-right,
|
|
.bug-card-right {
|
|
margin-left: 0;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bug-card-left {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.bug-card-title,
|
|
.sns-comment-title,
|
|
.qr-title,
|
|
.ver-row-summary,
|
|
.home-sent-title,
|
|
.home-task-title,
|
|
.home-bug-title,
|
|
.home-todo-title {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.corefb-collection-card,
|
|
.rawfb-set-card,
|
|
.rawfb-current-set,
|
|
.rawfb-item-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.corefb-header-actions,
|
|
.rawfb-header-actions,
|
|
.sns-header-actions,
|
|
.qr-row-actions,
|
|
.mkt-note-actions,
|
|
.dev-desc-actions,
|
|
.fh-modal-footer,
|
|
.qr-modal-footer,
|
|
.mkt-modal-footer,
|
|
.sent-detail-footer,
|
|
.bug-detail-footer {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.oc-row-main,
|
|
.mkt-event-main,
|
|
.dev-task-main,
|
|
.ver-group-header,
|
|
.ver-row-main {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.oc-row-info,
|
|
.mkt-ev-info,
|
|
.dev-task-info {
|
|
flex-basis: min(100%, 420px);
|
|
}
|
|
|
|
.mkt-ev-platforms,
|
|
.mkt-stats-row,
|
|
.dev-stats-row,
|
|
.ver-stats-row,
|
|
.gb-pagination {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.dev-cycle-tabs {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dev-subtask-add {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dev-subtask-item {
|
|
grid-template-columns: 1fr 28px;
|
|
}
|
|
|
|
.dev-subtask-stage-group {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.ver-current-header,
|
|
.ver-group-header,
|
|
.ver-row-main {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ver-current-badge,
|
|
.ver-row-ver {
|
|
min-width: auto;
|
|
}
|
|
|
|
.art-gallery,
|
|
.art-gallery.large {
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
}
|
|
|
|
.art-lightbox-info {
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
transform: none;
|
|
text-align: center;
|
|
white-space: normal;
|
|
}
|
|
|
|
.artdev-icon-list {
|
|
padding: 12px;
|
|
}
|
|
|
|
.gbh-metric-bar,
|
|
.gbh-metric-radio {
|
|
width: 100%;
|
|
}
|
|
|
|
.gbh-metric-bar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gbh-tier-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gbh-tier-label {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 34px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.gbh-tier-heroes {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.fh-readonly-line {
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
}
|
|
|
|
.fh-action-cell .gb-btn-sm {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.bug-detail-overlay,
|
|
.sent-detail-overlay,
|
|
.mkt-modal-overlay,
|
|
.gb-modal-overlay,
|
|
.qr-modal {
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.bug-detail-modal,
|
|
.bug-add-modal,
|
|
.sent-detail-modal,
|
|
.sent-add-modal,
|
|
.mkt-modal-card,
|
|
.gb-modal,
|
|
.qr-modal-card,
|
|
.sns-discord-modal-card {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
max-height: calc(100vh - 24px);
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.header {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.header-logo {
|
|
display: none;
|
|
}
|
|
|
|
.btn-refresh span {
|
|
display: none;
|
|
}
|
|
|
|
.btn-refresh {
|
|
width: 40px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.header-quick-actions {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.header-quick-action {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
max-width: 58px;
|
|
padding: 0 4px;
|
|
overflow: hidden;
|
|
text-overflow: clip;
|
|
}
|
|
|
|
.header-quick-action::before {
|
|
content: attr(data-short-label);
|
|
}
|
|
|
|
.header-quick-action {
|
|
font-size: 0;
|
|
}
|
|
|
|
.header-quick-action::before {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.main {
|
|
padding: 12px;
|
|
}
|
|
|
|
.module-header,
|
|
.module-body,
|
|
.bug-detail-header,
|
|
.bug-detail-body,
|
|
.bug-detail-footer,
|
|
.sent-detail-header,
|
|
.sent-detail-body,
|
|
.sent-detail-footer,
|
|
.mkt-modal-header,
|
|
.mkt-modal-body,
|
|
.mkt-modal-footer,
|
|
.qr-modal-header,
|
|
.qr-modal-body,
|
|
.qr-modal-footer,
|
|
.gb-modal-header,
|
|
.gb-modal-body {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.summary-grid,
|
|
.gb-stats-grid,
|
|
.ai-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.summary-card .value {
|
|
font-size: 22px;
|
|
}
|
|
|
|
#arch-canvas {
|
|
height: 300px;
|
|
}
|
|
|
|
.data-card-header,
|
|
.chat-player-header,
|
|
.qr-row-header,
|
|
.sns-comment-main,
|
|
.oc-dash-card {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.data-card-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.home-mod-row,
|
|
.home-bug-item,
|
|
.home-todo-item,
|
|
.home-sent-item {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.home-task-pri,
|
|
.home-task-status,
|
|
.home-bug-pri,
|
|
.home-bug-status,
|
|
.home-sent-st,
|
|
.home-sent-date {
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.chat-bubble {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.sent-card-left,
|
|
.bug-card-left {
|
|
gap: 8px;
|
|
}
|
|
|
|
.sent-detail-meta,
|
|
.bug-detail-meta,
|
|
.gb-detail-meta,
|
|
.gb-detail-stats {
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mkt-event-main,
|
|
.dev-task-main,
|
|
.oc-row-main,
|
|
.ver-row-main {
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.oc-row-seq,
|
|
.dev-task-seq {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mkt-ev-platforms,
|
|
.mkt-ev-status,
|
|
.dev-task-pri,
|
|
.dev-task-status,
|
|
.oc-row-status {
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.ver-current-header {
|
|
gap: 8px;
|
|
}
|
|
|
|
.ver-current-badge {
|
|
font-size: 18px;
|
|
padding: 5px 12px;
|
|
}
|
|
|
|
.art-gallery,
|
|
.art-gallery.large {
|
|
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
|
|
}
|
|
|
|
.artdev-batch-head,
|
|
.artdev-round-head,
|
|
.artdev-object-row {
|
|
padding: 10px;
|
|
}
|
|
|
|
.artdev-feedback {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.gb-page-info {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.fh-detail-grid,
|
|
.sns-discord-grid,
|
|
.sns-discord-detail-meta {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.codex-shell {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.codex-right {
|
|
order: 1;
|
|
}
|
|
|
|
.codex-left {
|
|
order: 2;
|
|
}
|
|
|
|
.codex-header,
|
|
.codex-detail-head,
|
|
.codex-runner-actions {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.codex-toolbar {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.codex-toolbar .search-input,
|
|
.codex-runner-actions .bug-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.codex-session-list {
|
|
max-height: min(46vh, 380px);
|
|
}
|
|
|
|
.codex-messages {
|
|
max-height: min(58vh, 520px);
|
|
}
|
|
}
|