Pre-Alpha to Alpha Ready
This commit is contained in:
John OReilly
158
pre-alpha/SVS-MSP-Calculator-print.css
Normal file
158
pre-alpha/SVS-MSP-Calculator-print.css
Normal file
@@ -0,0 +1,158 @@
|
||||
/* SVS MSP Calculator - Print */
|
||||
/* Extracted during Phase 5 to keep the HTML shell stable while splitting the monolithic stylesheet. */
|
||||
/* ═══════════════════════════════════════════════════════
|
||||
PRINT / PDF EXPORT (Export A)
|
||||
window.print() triggers this via Print / Save PDF button.
|
||||
Goals:
|
||||
- Clean, branded quote document
|
||||
- Hide all interactive controls
|
||||
- Force all sections expanded (body shown)
|
||||
- No background colours that waste ink (except header)
|
||||
- Page-break control so summary never splits
|
||||
═══════════════════════════════════════════════════════ */
|
||||
@media print {
|
||||
/* ── Force light background on body ── */
|
||||
body { background: var(--print-paper) !important; color: var(--print-ink) !important; font-size: 13px; }
|
||||
|
||||
/* ── Hide interactive & mobile-only elements ── */
|
||||
.mobile-quote-pill,
|
||||
.mobile-quote-panel,
|
||||
.step-btn,
|
||||
.collapsible-header,
|
||||
.sec-chevron,
|
||||
.section-toggle,
|
||||
.tier-seg-wrap,
|
||||
.pill-toggle,
|
||||
.addon-row input[type=checkbox],
|
||||
.savings-input-row,
|
||||
.export-wrap,
|
||||
.nudge-banner,
|
||||
.pitch-wrap,
|
||||
.quote-settings-bar,
|
||||
.section-header.section-toggle { pointer-events: none; }
|
||||
|
||||
.mobile-quote-pill { display: none !important; }
|
||||
.mobile-quote-panel { display: none !important; }
|
||||
.export-wrap { display: none !important; }
|
||||
.nudge-banner { display: none !important; }
|
||||
.theme-toggle-btn { display: none !important; }
|
||||
.pitch-wrap { display: none !important; }
|
||||
.step-btn { display: none !important; }
|
||||
.collapsible-header { display: none !important; }
|
||||
.sec-chevron { display: none !important; }
|
||||
.sec-summary-badge { display: none !important; }
|
||||
.group-label { display: none !important; }
|
||||
#sec-02::after, #sec-03::after, #sec-01::after { display: none !important; }
|
||||
.group-divider { display: none !important; }
|
||||
.sec-controls-row { display: none !important; }
|
||||
.quote-settings-bar { display: none !important; }
|
||||
.section-badge { display: none !important; }
|
||||
#savingsPrompt { display: none !important; }
|
||||
.quote-notes-wrap { display: none !important; }
|
||||
.client-rep-row { display: none !important; }
|
||||
.sidebar-focus-toggle { display: none !important; }
|
||||
.sidebar-focus-print-btn { display: none !important; }
|
||||
.sidebar-utility { display: none !important; }
|
||||
.qs-switch { display: none !important; }
|
||||
.confirm-modal { display: none !important; }
|
||||
|
||||
/* ── Show ALL section bodies (force expand) ── */
|
||||
.section-body { display: block !important; }
|
||||
.collapsible-body { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
|
||||
|
||||
/* ── Reset layout to single column ── */
|
||||
.outer {
|
||||
display: block !important;
|
||||
padding: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.main-col, .side-col { width: 100% !important; position: static !important; }
|
||||
|
||||
/* ── Top bar: keep accent, reduce height ── */
|
||||
.top-bar {
|
||||
position: static !important;
|
||||
padding: 10px 20px !important;
|
||||
border-bottom: 2px solid var(--print-accent) !important;
|
||||
background: var(--print-paper) !important;
|
||||
}
|
||||
.top-bar-inner { padding: 0 !important; }
|
||||
.top-bar-right { color: var(--print-muted) !important; }
|
||||
|
||||
/* ── Section cards: clean borders, no dark bg ── */
|
||||
.section {
|
||||
background: var(--print-paper) !important;
|
||||
border: 1px solid var(--print-border) !important;
|
||||
box-shadow: none !important;
|
||||
margin-left: 0 !important;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
padding: 16px 20px !important;
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
.section-num { color: var(--print-section-num) !important; }
|
||||
.section-title { font-size: 16px !important; }
|
||||
|
||||
/* ── Sidebar: show inline after sections, styled for print ── */
|
||||
.sidebar {
|
||||
background: var(--print-paper) !important;
|
||||
border: 2px solid var(--print-accent) !important;
|
||||
border-radius: 6px !important;
|
||||
margin: 16px 0 !important;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
.sidebar-header { background: var(--print-accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.sidebar-mrr { font-size: 36px !important; color: var(--print-ink) !important; }
|
||||
.sidebar-line { color: var(--print-sidebar-line) !important; border-bottom-color: var(--print-border-strong) !important; }
|
||||
.sidebar-line .val { color: var(--print-ink) !important; }
|
||||
|
||||
/* ── VS comparison: clean for print ── */
|
||||
.vs-save-green td { background: var(--print-save-green) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.vs-save-amber td { background: var(--print-save-amber) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.vs-save-amber { background: var(--print-save-amber-panel) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
|
||||
/* ── Feature cards: minimal ── */
|
||||
.feature-card { background: var(--print-feature) !important; border-color: var(--print-border-strong) !important; }
|
||||
.feature-card-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
|
||||
|
||||
/* ── Addon rows ── */
|
||||
.addon-row { border-color: var(--print-border-strong) !important; }
|
||||
.addon-row.selected { background: var(--print-addon-selected) !important; border-color: var(--print-accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
|
||||
/* ── Callout boxes ── */
|
||||
.callout-green { background: var(--print-callout-green) !important; border-color: var(--print-callout-green-border) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.callout-red { background: var(--print-callout-red) !important; border-color: var(--print-callout-red-border) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
|
||||
/* ── Progress bar ── */
|
||||
.progress-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
|
||||
/* ── Print footer ── */
|
||||
.pitch-footer { display: none !important; }
|
||||
|
||||
/* ── Page break: force summary sidebar to start fresh ── */
|
||||
.side-col { page-break-before: always; break-before: always; }
|
||||
|
||||
/* ── Input fields: show values as static text ── */
|
||||
.num-input, .qs-fee-input {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
.client-input {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* ── Print footer note ── */
|
||||
body::after {
|
||||
content: 'Prepared by Silicon Valley Services (SVS) MSP · Ottawa, Ontario · This quote is valid for 30 days from date of issue. Questions? Contact your SVS account representative.';
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--print-footer-note);
|
||||
border-top: 1px solid var(--print-border-strong);
|
||||
padding-top: 10px;
|
||||
margin-top: 20px;
|
||||
font-family: 'DM Mono', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user