nitesh
d18bd9cf37
Root cause of blank/clipped print output across the app: the document root (html/body) is globally locked to one viewport height with overflow hidden, and Angular Material's drawer/tab-body containers each add their own on-screen scroll clip on top of that. main.scss now frees the full chain for print (document root, CDK drawer/sidenav containers, mat-tab-body, and the account-view's mat-tab-nav-bar which was rendering as a stray grey scrollable strip since it isn't covered by the mat-tab-group header rule already hidden). Also fixed both certificate print dialogs (share-certificate-dialog, deposit-certificate-dialog) reusing a `::ng-deep body > :not(.cdk-overlay- container)` rule to hide the shell during their own print: under Angular's style encapsulation this style is emitted fully unscoped into the global stylesheet and is never removed once the component has loaded once in a session, silently blanking every other page's print output for the rest of the session. Dropped `::ng-deep` from that one selector so it goes back to being properly scoped (and therefore inert, matching the other two dialogs that never had this bug) — the app shell is already hidden for every print via the global main.scss rules, so no dialog needs its own global override.
634 lines
12 KiB
SCSS
634 lines
12 KiB
SCSS
/**
|
|
* Copyright since 2025 Mifos Initiative
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
:host {
|
|
--cpd-blue: #1d4ed8;
|
|
--cpd-blue-d: #1e40af;
|
|
--cpd-blue-l: #eff6ff;
|
|
--cpd-blue-tint: #dbeafe;
|
|
--cpd-amber: #d97706;
|
|
--cpd-amber-l: #fef3c7;
|
|
--cpd-amber-tint: #fde68a;
|
|
--cpd-red: #b91c1c;
|
|
--cpd-red-l: #fee2e2;
|
|
--cpd-red-tint: #fecaca;
|
|
--cpd-green: #15803d;
|
|
--cpd-green-l: #dcfce7;
|
|
--cpd-purple: #6d28d9;
|
|
--cpd-g50: #f8fafc;
|
|
--cpd-g100: #f1f5f9;
|
|
--cpd-g200: #e2e8f0;
|
|
--cpd-g300: #cbd5e1;
|
|
--cpd-g500: #64748b;
|
|
--cpd-g700: #334155;
|
|
--cpd-g900: #0f172a;
|
|
|
|
display: block;
|
|
}
|
|
|
|
.cpd-root {
|
|
background: var(--cpd-g100);
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ───────── Toolbar (hidden on print) ───────── */
|
|
.cpd-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 12px 16px;
|
|
background: #fff;
|
|
border-bottom: 1px solid var(--cpd-g200);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cpd-toolbar-l {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.cpd-toolbar-ic {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: var(--cpd-blue-d);
|
|
color: #fff;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.cpd-toolbar-t {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: var(--cpd-g900);
|
|
}
|
|
|
|
.cpd-toolbar-s {
|
|
font-size: 11.5px;
|
|
color: var(--cpd-g500);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.cpd-toolbar-r {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cpd-tb-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--cpd-g200);
|
|
background: #fff;
|
|
color: var(--cpd-g700);
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
|
|
fa-icon {
|
|
font-size: 12px;
|
|
color: var(--cpd-blue);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--cpd-blue-l);
|
|
border-color: var(--cpd-blue-tint);
|
|
color: var(--cpd-blue-d);
|
|
}
|
|
|
|
&.cpd-tb-x {
|
|
width: 34px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
background: var(--cpd-red-l);
|
|
color: var(--cpd-red);
|
|
border-color: var(--cpd-red-tint);
|
|
|
|
fa-icon {
|
|
color: var(--cpd-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ───────── Certificate page (A4 feel) ───────── */
|
|
.cpd-page {
|
|
background: #fff;
|
|
border: 1px solid var(--cpd-g200);
|
|
padding: 38px 48px 24px;
|
|
margin: 18px auto;
|
|
width: min(720px, 94%);
|
|
border-top: 6px solid var(--cpd-blue-d);
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
color: var(--cpd-g900);
|
|
line-height: 1.6;
|
|
overflow: auto;
|
|
position: relative;
|
|
|
|
&.cpd-page--share,
|
|
&.cpd-page--amber {
|
|
border-top-color: var(--cpd-amber);
|
|
}
|
|
|
|
&.cpd-page--teal {
|
|
border-top-color: #0d9488;
|
|
}
|
|
|
|
&.cpd-page--red {
|
|
border-top-color: var(--cpd-red);
|
|
}
|
|
|
|
&.cpd-page--green {
|
|
border-top-color: var(--cpd-green);
|
|
}
|
|
|
|
/* Subtle decorative border inside the page edge to give the cert a "framed" feel. */
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 18px;
|
|
border: 1px solid var(--cpd-g200);
|
|
pointer-events: none;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&.cpd-page--share::before,
|
|
&.cpd-page--amber::before {
|
|
border-color: var(--cpd-amber-tint);
|
|
}
|
|
|
|
&.cpd-page--teal::before {
|
|
border-color: #99f6e4;
|
|
}
|
|
|
|
&.cpd-page--red::before {
|
|
border-color: var(--cpd-red-tint);
|
|
}
|
|
|
|
&.cpd-page--green::before {
|
|
border-color: #bbf7d0;
|
|
}
|
|
}
|
|
|
|
/* ───────── Letterhead ───────── */
|
|
.cpd-letterhead {
|
|
text-align: center;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 14px;
|
|
border-bottom: 1px solid var(--cpd-g200);
|
|
}
|
|
|
|
.cpd-bank-name {
|
|
font-size: 19px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
color: var(--cpd-blue-d);
|
|
|
|
.cpd-page--share &,
|
|
.cpd-page--amber & {
|
|
color: var(--cpd-amber);
|
|
}
|
|
|
|
.cpd-page--teal & {
|
|
color: #0d9488;
|
|
}
|
|
|
|
.cpd-page--red & {
|
|
color: var(--cpd-red);
|
|
}
|
|
|
|
.cpd-page--green & {
|
|
color: var(--cpd-green);
|
|
}
|
|
}
|
|
|
|
.cpd-bank-sub {
|
|
font-size: 11.5px;
|
|
color: var(--cpd-g500);
|
|
margin-top: 2px;
|
|
font-family:
|
|
ui-sans-serif,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
}
|
|
|
|
/* ───────── Title strip ───────── */
|
|
.cpd-title-strip {
|
|
text-align: center;
|
|
margin: 6px 0 14px;
|
|
font-family:
|
|
ui-sans-serif,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
}
|
|
|
|
.cpd-title-l {
|
|
display: inline-block;
|
|
padding: 5px 18px;
|
|
border-radius: 999px;
|
|
font-size: 11.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
background: var(--cpd-blue-l);
|
|
color: var(--cpd-blue-d);
|
|
border: 1px solid var(--cpd-blue-tint);
|
|
|
|
.cpd-page--share &,
|
|
.cpd-page--amber & {
|
|
background: var(--cpd-amber-l);
|
|
color: var(--cpd-amber);
|
|
border-color: var(--cpd-amber-tint);
|
|
}
|
|
|
|
.cpd-page--teal & {
|
|
background: #ccfbf1;
|
|
color: #0d9488;
|
|
border-color: #99f6e4;
|
|
}
|
|
|
|
.cpd-page--red & {
|
|
background: var(--cpd-red-l);
|
|
color: var(--cpd-red);
|
|
border-color: var(--cpd-red-tint);
|
|
}
|
|
|
|
.cpd-page--green & {
|
|
background: var(--cpd-green-l);
|
|
color: var(--cpd-green);
|
|
border-color: #bbf7d0;
|
|
}
|
|
}
|
|
|
|
.cpd-stage-pill--teal {
|
|
background: #ccfbf1;
|
|
color: #0d9488;
|
|
}
|
|
|
|
.cpd-stage-pill--red {
|
|
background: var(--cpd-red-l);
|
|
color: var(--cpd-red);
|
|
}
|
|
|
|
.cpd-stage-pill--green {
|
|
background: var(--cpd-green-l);
|
|
color: var(--cpd-green);
|
|
}
|
|
|
|
/* ───────── Meta row ───────── */
|
|
.cpd-meta-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
font-family:
|
|
ui-sans-serif,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
font-size: 12px;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px dashed var(--cpd-g200);
|
|
|
|
> div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
}
|
|
|
|
.cpd-meta-l {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--cpd-g500);
|
|
}
|
|
|
|
.cpd-meta-v {
|
|
font-size: 12.5px;
|
|
color: var(--cpd-g900);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cpd-stage-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
font-size: 10.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
background: var(--cpd-blue-l);
|
|
color: var(--cpd-blue-d);
|
|
|
|
&--amber {
|
|
background: var(--cpd-amber-l);
|
|
color: var(--cpd-amber);
|
|
}
|
|
}
|
|
|
|
/* ───────── Addressee + body ───────── */
|
|
.cpd-block {
|
|
display: flex;
|
|
gap: 8px;
|
|
font-family:
|
|
ui-sans-serif,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
font-size: 13px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.cpd-block-l {
|
|
font-weight: 700;
|
|
color: var(--cpd-g700);
|
|
width: 70px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cpd-block-v {
|
|
flex: 1;
|
|
color: var(--cpd-g900);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.cpd-para {
|
|
margin: 12px 0;
|
|
font-size: 13px;
|
|
text-align: justify;
|
|
color: var(--cpd-g900);
|
|
|
|
&--centered {
|
|
text-align: center;
|
|
font-size: 13.5px;
|
|
padding: 6px 12px;
|
|
background: var(--cpd-amber-l);
|
|
border-left: 4px solid var(--cpd-amber);
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
}
|
|
|
|
.cpd-amount {
|
|
color: var(--cpd-blue-d);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ───────── Summary table ───────── */
|
|
.cpd-summary {
|
|
width: 100%;
|
|
margin: 14px 0;
|
|
border-collapse: collapse;
|
|
font-family:
|
|
ui-sans-serif,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
font-size: 12px;
|
|
|
|
td {
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--cpd-g200);
|
|
vertical-align: top;
|
|
color: var(--cpd-g900);
|
|
}
|
|
|
|
td:nth-child(odd) {
|
|
background: var(--cpd-g50);
|
|
color: var(--cpd-g500);
|
|
font-weight: 700;
|
|
font-size: 10.5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
width: 22%;
|
|
}
|
|
|
|
.mono {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.cpd-summary-total td {
|
|
background: var(--cpd-blue-l);
|
|
color: var(--cpd-blue-d);
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
|
|
&:last-child {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
|
|
.cpd-page--share & .cpd-summary-total td {
|
|
background: var(--cpd-amber-l);
|
|
color: var(--cpd-amber);
|
|
}
|
|
}
|
|
|
|
/* ───────── Sign-off + bank seal ───────── */
|
|
.cpd-signoff {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
gap: 24px;
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.cpd-sign-block {
|
|
font-family:
|
|
ui-sans-serif,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
}
|
|
|
|
.cpd-sig-line {
|
|
width: 220px;
|
|
border-top: 1px solid var(--cpd-g500);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.cpd-sig-l {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--cpd-g900);
|
|
}
|
|
|
|
.cpd-sig-sub {
|
|
font-size: 11px;
|
|
color: var(--cpd-g500);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* Decorative round "common seal" for the share certificate (also looks good on
|
|
the interest certificate). Pure CSS, prints fine. */
|
|
.cpd-seal-ring {
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--cpd-amber);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
background: #fff;
|
|
|
|
.cpd-page--interest & {
|
|
border-color: var(--cpd-blue);
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 5px;
|
|
border-radius: 50%;
|
|
border: 1px dashed var(--cpd-amber);
|
|
|
|
.cpd-page--interest & {
|
|
border-color: var(--cpd-blue);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cpd-seal-inner {
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cpd-seal-bank {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.18em;
|
|
color: var(--cpd-amber);
|
|
|
|
.cpd-page--interest & {
|
|
color: var(--cpd-blue);
|
|
}
|
|
}
|
|
|
|
.cpd-seal-line {
|
|
width: 36px;
|
|
border-top: 1px solid currentcolor;
|
|
margin: 3px auto;
|
|
color: var(--cpd-amber);
|
|
|
|
.cpd-page--interest & {
|
|
color: var(--cpd-blue);
|
|
}
|
|
}
|
|
|
|
.cpd-seal-sub {
|
|
font-size: 7.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
color: var(--cpd-g500);
|
|
}
|
|
|
|
/* ───────── Footer ───────── */
|
|
.cpd-footer {
|
|
margin-top: 24px;
|
|
padding-top: 10px;
|
|
border-top: 1px dashed var(--cpd-g200);
|
|
font-family:
|
|
ui-sans-serif,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
font-size: 10.5px;
|
|
color: var(--cpd-g500);
|
|
text-align: center;
|
|
}
|
|
|
|
.mono {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* ───────── Print — only the page, no toolbar / dialog chrome ─────────
|
|
The document-level clip (`html, body { overflow: hidden }`) is lifted globally in main.scss's
|
|
print block; what remains here is this dialog's own clip — it opens with `maxHeight: '92vh'`,
|
|
which Angular Material carries onto the overlay pane / .mat-mdc-dialog-container as an inline
|
|
max-height plus overflow:auto. Freeing those lets the whole certificate flow onto the page in
|
|
normal static order (a fixed/absolute hack would pin it to the first page instead). */
|
|
@media print {
|
|
body > :not(.cdk-overlay-container) {
|
|
display: none !important;
|
|
}
|
|
|
|
:host {
|
|
background: #fff;
|
|
}
|
|
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.cdk-overlay-container,
|
|
.cdk-global-overlay-wrapper,
|
|
.cdk-overlay-pane,
|
|
.mat-mdc-dialog-container,
|
|
.mdc-dialog__surface {
|
|
position: static !important;
|
|
overflow: visible !important;
|
|
max-height: none !important;
|
|
height: auto !important;
|
|
max-width: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.cpd-root {
|
|
position: static;
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
background: #fff;
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.cpd-page {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 24px 32px;
|
|
width: 100%;
|
|
box-shadow: none;
|
|
border-top: 4px solid var(--cpd-blue-d);
|
|
overflow: visible;
|
|
|
|
&.cpd-page--share {
|
|
border-top-color: var(--cpd-amber);
|
|
}
|
|
}
|
|
}
|