Paul Trowbridge
10441a4761
Replaces the small inline form with a centred modal dialog. When both dates are selected, a live chip list shows every month covered (up to 36 months) so it is immediately clear what periods will be loaded. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
398 lines
12 KiB
CSS
398 lines
12 KiB
CSS
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 13px;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: #f0f2f5;
|
|
color: #333;
|
|
}
|
|
|
|
/* ============================================================
|
|
LAYOUT
|
|
============================================================ */
|
|
#app { display: flex; height: 100vh; }
|
|
#content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
|
|
|
|
/* ============================================================
|
|
SIDEBAR
|
|
============================================================ */
|
|
#sidebar {
|
|
width: 200px;
|
|
flex-shrink: 0;
|
|
background: #2c3e50;
|
|
color: #ecf0f1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.sidebar-brand {
|
|
padding: 16px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
border-bottom: 1px solid #3d5166;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.nav-links { list-style: none; padding: 6px 0; }
|
|
.nav-links li {
|
|
padding: 10px 16px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: #bdc3c7;
|
|
transition: background 0.1s;
|
|
}
|
|
.nav-links li:hover { background: #3d5166; color: #ecf0f1; }
|
|
.nav-links li.active { background: #1a252f; color: #ecf0f1; border-left: 3px solid #3498db; padding-left: 13px; }
|
|
|
|
.sidebar-context { flex: 1; padding: 12px 16px; border-top: 1px solid #3d5166; }
|
|
.ctx-item { margin-bottom: 10px; }
|
|
.ctx-item.hidden { display: none; }
|
|
.ctx-label { display: block; font-size: 10px; color: #7f8c8d; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
|
|
.ctx-item span:not(.ctx-label) { font-size: 12px; word-break: break-word; }
|
|
.status-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; margin-left: 4px; vertical-align: middle; }
|
|
.status-badge.open { background: #27ae60; }
|
|
.status-badge.closed { background: #c0392b; }
|
|
|
|
.sidebar-user { padding: 12px 16px; border-top: 1px solid #3d5166; }
|
|
.sidebar-user label { display: block; font-size: 10px; color: #7f8c8d; text-transform: uppercase; margin-bottom: 4px; }
|
|
.sidebar-user input {
|
|
width: 100%;
|
|
background: #3d5166;
|
|
border: 1px solid #4a6278;
|
|
color: #ecf0f1;
|
|
padding: 5px 8px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
}
|
|
.sidebar-user input::placeholder { color: #7f8c8d; }
|
|
|
|
/* ============================================================
|
|
STATUS BAR
|
|
============================================================ */
|
|
#status-bar { padding: 7px 16px; font-size: 12px; flex-shrink: 0; }
|
|
#status-bar.hidden { display: none; }
|
|
.status-info { background: #d6eaf8; color: #1a5276; border-bottom: 1px solid #aed6f1; }
|
|
.status-success { background: #d5f5e3; color: #1e8449; border-bottom: 1px solid #a9dfbf; }
|
|
.status-error { background: #fadbd8; color: #922b21; border-bottom: 1px solid #f1948a; }
|
|
|
|
/* ============================================================
|
|
VIEWS
|
|
============================================================ */
|
|
.view { flex: 1; overflow: hidden; padding: 12px; display: none; flex-direction: column; gap: 8px; }
|
|
.view.active { display: flex; }
|
|
.view.hidden { display: none !important; }
|
|
|
|
/* ============================================================
|
|
SOURCES VIEW — two-column
|
|
============================================================ */
|
|
.two-col-layout { display: flex; gap: 10px; flex: 1; overflow: hidden; }
|
|
.panel {
|
|
flex: 1;
|
|
background: white;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.08);
|
|
min-width: 0;
|
|
}
|
|
.panel-header {
|
|
padding: 9px 12px;
|
|
border-bottom: 1px solid #e8ecf0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #f8fafc;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
.header-actions { display: flex; gap: 6px; align-items: center; }
|
|
.grid-fill { flex: 1; min-height: 0; }
|
|
|
|
/* ============================================================
|
|
VERSIONS VIEW
|
|
============================================================ */
|
|
.view-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
#versions-source-label { font-weight: 600; font-size: 13px; flex: 1; }
|
|
#versions-grid { flex: 1; min-height: 200px; }
|
|
|
|
.version-actions {
|
|
background: white;
|
|
border-radius: 5px;
|
|
padding: 10px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.08);
|
|
flex-wrap: wrap;
|
|
}
|
|
.version-actions.hidden { display: none; }
|
|
#version-actions-label { font-size: 12px; font-weight: 600; flex: 1; min-width: 120px; }
|
|
|
|
.inline-form {
|
|
background: white;
|
|
border-radius: 5px;
|
|
padding: 14px 16px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.08);
|
|
flex-shrink: 0;
|
|
}
|
|
.inline-form h3 { font-size: 13px; margin-bottom: 10px; font-weight: 600; }
|
|
.inline-form.hidden { display: none; }
|
|
|
|
.form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
|
|
.form-row label, .inline-form label {
|
|
font-size: 11px;
|
|
color: #555;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.form-row input[type=text],
|
|
.form-row input[type=date],
|
|
.form-row input[type=number],
|
|
.inline-form input[type=text],
|
|
.inline-form input[type=date],
|
|
.inline-form input[type=number] {
|
|
border: 1px solid #dce1e7;
|
|
padding: 5px 8px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
min-width: 140px;
|
|
color: #333;
|
|
}
|
|
.form-actions { display: flex; gap: 8px; }
|
|
|
|
/* ============================================================
|
|
FORECAST VIEW
|
|
============================================================ */
|
|
.forecast-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
#forecast-label { font-weight: 600; font-size: 13px; flex: 1; }
|
|
|
|
.forecast-layout { display: flex; gap: 10px; flex: 1; overflow: hidden; min-height: 0; }
|
|
|
|
#pivot-panel {
|
|
flex: 1;
|
|
background: white;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.08);
|
|
min-width: 0;
|
|
}
|
|
#pivot-grid { width: 100%; height: 100%; }
|
|
|
|
#operation-panel {
|
|
width: 270px;
|
|
flex-shrink: 0;
|
|
background: white;
|
|
border-radius: 5px;
|
|
padding: 14px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.08);
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.op-section { display: flex; flex-direction: column; gap: 6px; }
|
|
.op-title { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #7f8c8d; letter-spacing: 0.05em; }
|
|
.op-hint { font-size: 11px; color: #aaa; }
|
|
|
|
#slice-display { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; }
|
|
.slice-tag {
|
|
background: #eaf4fb;
|
|
color: #1a6fa8;
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
cursor: default;
|
|
}
|
|
|
|
.op-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 10px; }
|
|
.op-tab {
|
|
background: none;
|
|
border: none;
|
|
padding: 6px 14px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
}
|
|
.op-tab.active { color: #2980b9; border-bottom-color: #2980b9; font-weight: 600; }
|
|
.op-tab:hover:not(.active) { color: #333; }
|
|
|
|
.op-form { display: flex; flex-direction: column; gap: 8px; }
|
|
.op-form.hidden { display: none; }
|
|
.op-form label { font-size: 11px; color: #555; display: flex; flex-direction: column; gap: 3px; }
|
|
.op-form input[type=text],
|
|
.op-form input[type=number] {
|
|
border: 1px solid #dce1e7;
|
|
padding: 5px 8px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
}
|
|
.label-inline { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 12px !important; }
|
|
#op-forms-area { display: flex; flex-direction: column; gap: 0; }
|
|
#op-forms-area.hidden { display: none; }
|
|
|
|
.recode-field, .clone-field { margin-bottom: 8px; }
|
|
.recode-field label, .clone-field label { font-size: 11px; color: #555; display: block; margin-bottom: 2px; }
|
|
.field-hint { font-size: 10px; color: #aaa; }
|
|
|
|
/* ============================================================
|
|
LOG VIEW
|
|
============================================================ */
|
|
#log-grid { flex: 1; min-height: 0; }
|
|
|
|
/* ============================================================
|
|
BUTTONS
|
|
============================================================ */
|
|
.btn {
|
|
padding: 5px 12px;
|
|
border: 1px solid #dce1e7;
|
|
background: white;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
color: #333;
|
|
}
|
|
.btn:hover { background: #f0f2f5; }
|
|
.btn:active { background: #e8ecf0; }
|
|
.btn-primary { background: #2980b9; color: white; border-color: #2574a9; }
|
|
.btn-primary:hover { background: #2574a9; }
|
|
.btn-danger { background: #e74c3c; color: white; border-color: #d44332; }
|
|
.btn-danger:hover { background: #d44332; }
|
|
.btn-sm { padding: 2px 8px; font-size: 11px; }
|
|
.btn.hidden { display: none; }
|
|
.btn-icon { background: none; border: none; font-size: 20px; cursor: pointer; color: #666; line-height: 1; padding: 0 4px; }
|
|
.btn-icon:hover { color: #333; }
|
|
|
|
/* ============================================================
|
|
MODAL
|
|
============================================================ */
|
|
.modal-overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0,0,0,.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
.modal-overlay.hidden { display: none; }
|
|
.modal {
|
|
background: white;
|
|
border-radius: 6px;
|
|
width: 720px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,.2);
|
|
}
|
|
.modal-header {
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
#modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; font-size: 12px; }
|
|
.modal-footer { padding: 10px 18px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 8px; }
|
|
|
|
/* ============================================================
|
|
LOAD BASELINE / REFERENCE MODAL
|
|
============================================================ */
|
|
.load-data-modal { width: 480px; max-height: 80vh; }
|
|
|
|
#load-data-body {
|
|
padding: 20px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.load-form-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.load-form-fields label {
|
|
font-size: 11px;
|
|
color: #555;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.load-form-fields input[type=date],
|
|
.load-form-fields input[type=text] {
|
|
border: 1px solid #dce1e7;
|
|
padding: 7px 10px;
|
|
border-radius: 3px;
|
|
font-size: 13px;
|
|
color: #333;
|
|
width: 100%;
|
|
}
|
|
|
|
.load-form-fields input[type=date]:focus,
|
|
.load-form-fields input[type=text]:focus {
|
|
outline: none;
|
|
border-color: #2980b9;
|
|
box-shadow: 0 0 0 2px rgba(41,128,185,.15);
|
|
}
|
|
|
|
.load-date-preview { display: flex; flex-direction: column; gap: 8px; }
|
|
.load-date-preview.hidden { display: none; }
|
|
|
|
.load-preview-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #7f8c8d;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.date-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.date-chip {
|
|
background: #eaf4fb;
|
|
color: #1a6fa8;
|
|
border: 1px solid #c5dff0;
|
|
padding: 3px 9px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.date-chip-summary {
|
|
font-size: 12px;
|
|
color: #555;
|
|
font-style: italic;
|
|
}
|
|
|
|
.preview-section h4 { font-size: 12px; margin-bottom: 6px; color: #555; }
|
|
.preview-section + .preview-section { margin-top: 16px; }
|
|
.preview-table { border-collapse: collapse; width: 100%; font-size: 11px; }
|
|
.preview-table th, .preview-table td { border: 1px solid #e0e0e0; padding: 4px 8px; text-align: left; }
|
|
.preview-table th { background: #f5f7f9; font-weight: 600; }
|
|
.preview-table tr:hover td { background: #fafbfc; }
|