339 lines
18 KiB
CSS
339 lines
18 KiB
CSS
:root {
|
|
--bg: #0b0f14;
|
|
--panel: #121822;
|
|
--panel-2: #0f1520;
|
|
--text: #e6edf3;
|
|
--muted: #9aa7b3;
|
|
--primary: #4da3ff;
|
|
--accent: #7ee787;
|
|
--danger: #ff6b6b;
|
|
--border: #223041;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
|
background: linear-gradient(180deg, var(--bg), #0d1420 50%, var(--bg));
|
|
color: var(--text);
|
|
}
|
|
|
|
.app-header, .app-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: rgba(18,24,34,0.8);
|
|
backdrop-filter: blur(6px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.app-footer { border-top: 1px solid var(--border); border-bottom: none; justify-content: center; }
|
|
.brand { display: flex; gap: 10px; align-items: center; }
|
|
.logo-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #001225; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
|
|
.app-header h1 { margin: 0; font-size: 18px; }
|
|
|
|
.container {
|
|
max-width: none;
|
|
margin: 20px auto;
|
|
padding: 0 16px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.panel {
|
|
background: linear-gradient(180deg, var(--panel), var(--panel-2));
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
h2, h3 { margin: 8px 0 12px; }
|
|
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
|
|
input, textarea, select {
|
|
width: 100%;
|
|
background: #0b111a;
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
margin-top: 6px;
|
|
}
|
|
input[type="date"] { padding: 8px 10px; }
|
|
|
|
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.grid.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
|
|
.mt { margin-top: 12px; }
|
|
|
|
.btn { border-radius: 8px; border: 1px solid var(--border); padding: 8px 12px; cursor: pointer; color: var(--text); background: #0f1520; }
|
|
.btn:hover { filter: brightness(1.05); }
|
|
.btn-primary { background: var(--primary); color: #001225; border-color: #2b6bbf; font-weight: 700; }
|
|
.btn-secondary { background: #0f1520; }
|
|
.btn-outline { background: transparent; border-style: dashed; }
|
|
.btn-danger { background: #201014; border-color: #4a1e27; color: #ffd7d7; }
|
|
|
|
.actions { display: flex; gap: 8px; }
|
|
|
|
.table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
|
|
.table-head, .table-row {
|
|
display: grid; grid-template-columns: 40px 2fr 80px 120px 120px 120px; gap: 8px; align-items: center;
|
|
}
|
|
.table-row { align-items: start; }
|
|
.table-head { background: #0d1420; padding: 10px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--border); }
|
|
.table-body { display: grid; gap: 8px; padding: 10px; }
|
|
.table-row { background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
|
|
.table-row input { margin: 0; }
|
|
.table-row textarea.desc { margin: 0; min-height: 64px; resize: vertical; }
|
|
/* Drag & drop affordances */
|
|
.table-row.dragging { opacity: 0.6; }
|
|
.table-row.placeholder { border: 2px dashed var(--border); background: rgba(34, 48, 65, 0.35); min-height: 48px; }
|
|
.drag-ghost { box-shadow: 0 8px 24px rgba(0,0,0,0.45); border: 1px solid var(--border); background: #0b111a; opacity: 0.9; padding: 8px; border-radius: 8px; }
|
|
|
|
/* Actions cell */
|
|
.row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
|
|
.drag-handle {
|
|
width: 28px; height: 28px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: #0f1520;
|
|
color: var(--muted);
|
|
cursor: grab;
|
|
}
|
|
.drag-handle:active { cursor: grabbing; }
|
|
.drag-handle:focus { outline: none; }
|
|
.row-actions input[type="checkbox"] { transform: translateY(1px); }
|
|
|
|
/* Group rows in editor */
|
|
.table-row.group .group-title,
|
|
.table-row.group .group-desc { grid-column: 2 / span 4; }
|
|
.table-row.group .group-title { font-weight: 600; background: #0b111a; border: 1px dashed var(--border); border-radius: 6px; padding: 8px 10px; }
|
|
.table-row.group .group-desc { background: #0b111a; border: 1px dashed var(--border); border-radius: 6px; padding: 6px 10px; color: var(--muted); }
|
|
.table-row.group .row-actions { grid-column: 6; grid-row: 1 / span 2; align-self: start; }
|
|
|
|
.items-body .items-row.group-title { display: grid; grid-template-columns: 1fr; background: #0d1420; font-weight: 700; padding: 8px 10px; color: var(--text); border-left: 3px solid var(--accent); text-align: left; }
|
|
.items-body .items-row.group-title div { justify-content: flex-start; }
|
|
.items-body .items-row.group-description { display: grid; grid-template-columns: 1fr; padding: 8px 10px; color: var(--muted); background: transparent; }
|
|
.items-body .items-row.group-description div { justify-content: flex-start; }
|
|
.items-body .items-row.group-subtotal { display: grid; grid-template-columns: 1fr auto; padding: 8px 10px; border-top: 1px dashed var(--border); }
|
|
.row-total { text-align: right; padding-right: 6px; color: var(--text); }
|
|
|
|
/* Preview styles */
|
|
.quote-header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 12px; margin-bottom: 12px; }
|
|
.company { display: flex; gap: 12px; align-items: flex-start; }
|
|
.logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: #0b111a; }
|
|
.company-name { font-weight: 700; font-size: 18px; }
|
|
.company-address, .company-contact, .company-legal { color: var(--muted); font-size: 13px; }
|
|
.company-contact.stack { display: grid; gap: 4px; }
|
|
|
|
.quote-title { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
|
|
.quote-meta { text-align: right; display: grid; gap: 4px; justify-items: end; }
|
|
|
|
.client-block { background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
|
|
.client-name { font-weight: 600; }
|
|
.client-address, .client-contact { color: var(--muted); font-size: 13px; }
|
|
.client-contact.stack { display: grid; gap: 4px; }
|
|
|
|
.items { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
|
|
.items-head, .items-row { display: grid; grid-template-columns: 2fr 80px 120px 120px; gap: 8px; }
|
|
.items-head { background: #0d1420; color: var(--muted); padding: 10px; font-size: 13px; border-bottom: 1px solid var(--border); }
|
|
.items-body .items-row { padding: 10px; border-bottom: 1px dashed var(--border); }
|
|
.items-body .items-row:last-child { border-bottom: none; }
|
|
.items-row div { display: flex; align-items: center; min-width: 0; }
|
|
.items-row div:last-child { justify-content: flex-end; }
|
|
|
|
/* Ensure long description wraps and doesn't overflow horizontally */
|
|
.items-row div:first-child {
|
|
white-space: pre-wrap; /* preserve newlines, allow wrapping */
|
|
overflow-wrap: anywhere; /* break long words/URLs if needed */
|
|
word-break: break-word; /* extra safety for legacy engines */
|
|
}
|
|
|
|
/* Prevent grid inputs from forcing overflow in the editor table */
|
|
.table-row input { min-width: 0; }
|
|
|
|
.totals { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #0b111a; max-width: 420px; margin-left: auto; }
|
|
.totals .row { display: flex; justify-content: space-between; padding: 6px 0; }
|
|
.totals .grand { font-size: 18px; font-weight: 800; color: var(--accent); border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; }
|
|
|
|
.notes { margin-top: 12px; color: var(--muted); }
|
|
|
|
/* Icon rows */
|
|
.icon-text { display: inline-flex; align-items: center; gap: 8px; }
|
|
.icon-text.right { justify-content: flex-end; }
|
|
.ico { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; filter: grayscale(0.3); opacity: 0.9; }
|
|
|
|
/* Print pagination scaffolding */
|
|
.print-pages { display: none; }
|
|
.print-page { margin-top: 12px; }
|
|
.page-footer { color: var(--muted); font-size: 12px; text-align: right; margin-top: 8px; }
|
|
|
|
@media (max-width: 980px) {
|
|
.container { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
@page { margin: 12mm; }
|
|
/* Neutral, pro palette for print */
|
|
:root {
|
|
--bg: #ffffff;
|
|
--panel: #ffffff;
|
|
--panel-2: #ffffff;
|
|
--text: #000000;
|
|
--muted: #333333;
|
|
--primary: #000000;
|
|
--accent: #000000;
|
|
--danger: #000000;
|
|
--border: #222222;
|
|
}
|
|
|
|
body { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.app-header, .form-panel, .app-footer, #resetBtn, #addItemBtn { display: none !important; }
|
|
.container { margin: 0; padding: 0; max-width: none; }
|
|
.preview-panel { border: none !important; background: #fff !important; }
|
|
.panel, .client-block, .items, .totals { box-shadow: none !important; background: #fff !important; border-color: #222 !important; }
|
|
.company-address, .company-contact, .company-legal, .client-address, .client-contact { color: #000 !important; }
|
|
.quote-title { color: #000 !important; }
|
|
|
|
/* Basculer vers une table par page */
|
|
.items.original { display: none !important; }
|
|
.print-pages { display: block !important; }
|
|
.print-page { margin-top: 0 !important; page-break-after: always; break-after: page; }
|
|
.print-page:last-child { page-break-after: auto; break-after: auto; }
|
|
.items-body .items-row { break-inside: avoid-page; page-break-inside: avoid; }
|
|
/* Hide original totals/notes; they are re-inserted into last printed page */
|
|
.preview-panel > .totals, .preview-panel > .notes { display: none !important; }
|
|
.totals, .notes { break-inside: avoid-page; page-break-inside: avoid; }
|
|
|
|
/* Table look */
|
|
.items { border-color: #222 !important; }
|
|
.items-head { background: #f2f2f2 !important; color: #000 !important; border-bottom: 1px solid #222 !important; }
|
|
.items-body .items-row { border-bottom: 1px solid #e0e0e0; }
|
|
.items-body .items-row:last-child { border-bottom: none; }
|
|
.row-total { color: #000 !important; }
|
|
|
|
/* Group blocks: left accent in black and left-aligned titles */
|
|
.items-body .items-row.group-title { background: #fff !important; border-left: 3px solid #000 !important; color: #000 !important; }
|
|
.items-body .items-row.group-description { color: #000 !important; }
|
|
.items-body .items-row.group-subtotal { border-top: 1px solid #222 !important; font-weight: 600; }
|
|
.page-footer { color: #000 !important; }
|
|
}
|
|
|
|
/* ===== Templates d'impression ===== */
|
|
/* Pro Minimal: lignes fines, pas de cadres, look très sobre */
|
|
body[data-template="pro-minimal"] .preview-panel .items,
|
|
body[data-template="pro-minimal"] .print-page .items { border: none; }
|
|
body[data-template="pro-minimal"] .preview-panel .items-head,
|
|
body[data-template="pro-minimal"] .print-page .items-head { background: transparent; color: var(--text); border-bottom: 2px solid var(--border); }
|
|
body[data-template="pro-minimal"] .preview-panel .items-body .items-row,
|
|
body[data-template="pro-minimal"] .print-page .items-body .items-row { border-bottom: 1px solid var(--border); background: transparent; }
|
|
body[data-template="pro-minimal"] .preview-panel .client-block { background: transparent; border-style: solid; }
|
|
body[data-template="pro-minimal"] .preview-panel .totals { background: transparent; }
|
|
@media print {
|
|
body[data-template="pro-minimal"] .items { border: none !important; }
|
|
body[data-template="pro-minimal"] .items-head { background: transparent !important; color: #000 !important; border-bottom: 2px solid #000 !important; }
|
|
body[data-template="pro-minimal"] .items-body .items-row { background: transparent !important; border-bottom: 1px solid #e0e0e0 !important; }
|
|
body[data-template="pro-minimal"] .client-block, body[data-template="pro-minimal"] .totals { background: transparent !important; }
|
|
}
|
|
|
|
/* Pro Bordures: cadres nets et totaux accentués */
|
|
body[data-template="pro-borders"] .preview-panel .client-block,
|
|
body[data-template="pro-borders"] .preview-panel .items,
|
|
body[data-template="pro-borders"] .preview-panel .totals,
|
|
body[data-template="pro-borders"] .print-page .items,
|
|
body[data-template="pro-borders"] .print-page .totals { border-width: 2px; border-style: solid; border-color: var(--border); background: #0b111a; }
|
|
body[data-template="pro-borders"] .preview-panel .items-head,
|
|
body[data-template="pro-borders"] .print-page .items-head { background: #0d1420; border-bottom: 2px solid var(--border); }
|
|
body[data-template="pro-borders"] .items-body .items-row { border-bottom: 1px solid var(--border); }
|
|
body[data-template="pro-borders"] .items-body .items-row:last-child { border-bottom: none; }
|
|
body[data-template="pro-borders"] .items-body .items-row.group-title { border-left: 4px solid var(--accent); background: #0d1420; }
|
|
body[data-template="pro-borders"] .items-body .items-row.group-subtotal { background: #0f1520; border-top: 2px solid var(--border); font-weight: 700; }
|
|
@media print {
|
|
body[data-template="pro-borders"] .client-block,
|
|
body[data-template="pro-borders"] .items,
|
|
body[data-template="pro-borders"] .totals { border-color: #000 !important; background: #fff !important; }
|
|
body[data-template="pro-borders"] .items-head { background: #f2f2f2 !important; border-bottom-color: #000 !important; }
|
|
body[data-template="pro-borders"] .items-body .items-row { border-bottom: 1px solid #e0e0e0 !important; }
|
|
body[data-template="pro-borders"] .items-body .items-row.group-title { border-left: 4px solid #000 !important; background: #fff !important; }
|
|
body[data-template="pro-borders"] .items-body .items-row.group-subtotal { background: #fff !important; border-top: 2px solid #000 !important; }
|
|
}
|
|
|
|
/* Bandeau Latéral: bande verticale d'accent à gauche */
|
|
body[data-template="sidebar-accent"] .preview-panel,
|
|
body[data-template="sidebar-accent"] .print-page { position: relative; padding-left: 14px; }
|
|
body[data-template="sidebar-accent"] .preview-panel::before,
|
|
body[data-template="sidebar-accent"] .print-page::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); opacity: 0.9;
|
|
}
|
|
body[data-template="sidebar-accent"] .items-body .items-row.group-title { border-left: 0; background: transparent; font-weight: 800; }
|
|
@media print {
|
|
body[data-template="sidebar-accent"] .print-page::before { background: #000 !important; }
|
|
}
|
|
|
|
/* Minimal Centré: entête centré, table légère */
|
|
body[data-template="centered-minimal"] .quote-header { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
|
|
body[data-template="centered-minimal"] .quote-meta { text-align: center; justify-items: center; }
|
|
body[data-template="centered-minimal"] .icon-text.right { justify-content: center; }
|
|
body[data-template="centered-minimal"] .ico { display: none; }
|
|
body[data-template="centered-minimal"] .preview-panel .items,
|
|
body[data-template="centered-minimal"] .print-page .items { border: none; }
|
|
body[data-template="centered-minimal"] .preview-panel .items-head,
|
|
body[data-template="centered-minimal"] .print-page .items-head { background: transparent; border-bottom: 2px solid var(--border); }
|
|
body[data-template="centered-minimal"] .items-body .items-row { background: transparent; border-bottom: 1px dashed var(--border); }
|
|
@media print {
|
|
body[data-template="centered-minimal"] .items-head { border-bottom-color: #000 !important; }
|
|
body[data-template="centered-minimal"] .items-body .items-row { border-bottom: 1px solid #e0e0e0 !important; }
|
|
}
|
|
/* Pro Bandes: alternance de bandes sur les lignes */
|
|
body[data-template="pro-striped"] .preview-panel .items-body .items-row:nth-child(even),
|
|
body[data-template="pro-striped"] .print-page .items-body .items-row:nth-child(even) { background: rgba(255,255,255,0.035); }
|
|
@media print {
|
|
body[data-template="pro-striped"] .items-body .items-row:nth-child(even) { background: #f7f7f7 !important; }
|
|
}
|
|
|
|
/* Compact: paddings et tailles réduites pour tenir plus */
|
|
body[data-template="compact"] .preview-panel .items-head,
|
|
body[data-template="compact"] .preview-panel .items-body .items-row,
|
|
body[data-template="compact"] .print-page .items-head,
|
|
body[data-template="compact"] .print-page .items-body .items-row { padding: 6px 8px; }
|
|
body[data-template="compact"] .preview-panel,
|
|
body[data-template="compact"] .print-page { font-size: 13px; }
|
|
@media print {
|
|
body[data-template="compact"] .items-head,
|
|
body[data-template="compact"] .items-body .items-row { padding: 6px 8px !important; }
|
|
}
|
|
|
|
/* Autocomplete */
|
|
.ac-list {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
background: #0b111a;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,0.35);
|
|
max-height: 220px;
|
|
overflow: auto;
|
|
display: none;
|
|
}
|
|
.ac-item { padding: 8px 10px; cursor: pointer; font-size: 14px; }
|
|
.ac-item + .ac-item { border-top: 1px dashed var(--border); }
|
|
.ac-item:hover, .ac-item.active { background: #0d1420; }
|
|
|
|
/* Modal (bibliothèque de devis) */
|
|
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; }
|
|
.modal[aria-hidden="false"] { display: flex; }
|
|
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
|
|
.modal-content { position: relative; width: min(760px, 96vw); max-height: 86vh; overflow: auto; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.45); }
|
|
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
|
|
.modal-body { padding: 6px; }
|
|
.library-list { display: grid; gap: 8px; }
|
|
.library-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
|
|
.library-item .meta { color: var(--muted); font-size: 12px; }
|
|
.library-item .title { font-weight: 600; }
|
|
.library-item .btn { padding: 6px 10px; }
|