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.
587 lines
13 KiB
SCSS
587 lines
13 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/.
|
|
*/
|
|
|
|
.dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 16px;
|
|
font-weight: 500;
|
|
color: #1a252c;
|
|
}
|
|
|
|
.dialog-content-container {
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Certificate Outer Container */
|
|
.certificate-container {
|
|
background-color: #faf8f5;
|
|
padding: 20px;
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
color: #2c2520;
|
|
box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
|
|
border-radius: 8px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Classic Ornate Border System */
|
|
.certificate-border-outer {
|
|
border: 5px double #c5a059; /* Gold double border */
|
|
padding: 8px;
|
|
background-color: #fdfcf7; /* Textured light cream */
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.certificate-border-inner {
|
|
border: 1px solid #dcd1bd;
|
|
padding: 30px;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Watermark */
|
|
.certificate-watermark {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
opacity: 0.03;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
|
|
.watermark-icon {
|
|
font-size: 280px;
|
|
width: 280px;
|
|
height: 280px;
|
|
color: #c5a059;
|
|
}
|
|
}
|
|
|
|
.certificate-header,
|
|
.cert-meta-row,
|
|
.cert-body-section,
|
|
.certificate-details-table,
|
|
.cert-footer {
|
|
position: relative;
|
|
z-index: 2; /* Ensure content is above watermark */
|
|
}
|
|
|
|
/* Header styling */
|
|
.certificate-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
border-bottom: 2px solid #f2edd5;
|
|
padding-bottom: 20px;
|
|
|
|
.bank-name {
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
color: #0b3c5d; /* Dark Premium Blue */
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.bank-sub {
|
|
font-size: 13px;
|
|
color: #7b6f63;
|
|
font-style: italic;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cert-title {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #c5a059; /* Classic Gold */
|
|
letter-spacing: 4px;
|
|
margin-bottom: 5px;
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.cert-subtitle {
|
|
font-size: 11px;
|
|
color: #7b6f63;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
/* Meta Data Grid (Top of cert) */
|
|
.cert-meta-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 30px;
|
|
border-bottom: 1px solid #f2edd5;
|
|
padding-bottom: 15px;
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.meta-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
color: #928374;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.meta-value {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: #322f2b;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Main Body text */
|
|
.cert-body-section {
|
|
margin-bottom: 35px;
|
|
|
|
.cert-main-text {
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
text-align: center;
|
|
color: #4a453f;
|
|
margin-bottom: 25px;
|
|
|
|
.highlight-text {
|
|
color: #1a202c;
|
|
font-weight: 600;
|
|
border-bottom: 1px dotted #c5a059;
|
|
padding-bottom: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Issued To Details Block */
|
|
.issued-to-details {
|
|
border: 1px solid #f0e6d2;
|
|
background-color: #fbfaf5;
|
|
padding: 15px 20px;
|
|
border-radius: 4px;
|
|
margin: 20px auto;
|
|
max-width: 90%;
|
|
text-align: left;
|
|
|
|
.issued-to-title {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #c5a059;
|
|
letter-spacing: 1.5px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.client-name-details {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #0b3c5d;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.client-ids {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.client-address {
|
|
font-size: 12px;
|
|
color: #7b6f63;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
/* Certificate Data Table */
|
|
|
|
/* The details grid and the allotment schedule read as one block, so the gap that used to sit under
|
|
the details table now sits under whichever table comes last. */
|
|
.certificate-details-table:not(:last-of-type) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.certificate-details-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 40px;
|
|
|
|
td {
|
|
padding: 10px 12px;
|
|
border: 1px solid #ede8db;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.lbl-col {
|
|
background-color: #f7f5ee;
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
font-weight: bold;
|
|
color: #7b6f63;
|
|
width: 25%;
|
|
}
|
|
|
|
// Every figure a member actually needs to read at a glance — share counts, amounts, dates, the
|
|
// resolution number — sits in this column. Georgia's numerals kept blurring into each other at
|
|
// this size, so values get a plain sans-serif with tabular figures instead; the label column
|
|
// keeps the certificate's own serif since it's static text, never a number to misread.
|
|
.val-col {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-variant-numeric: tabular-nums;
|
|
color: #322f2b;
|
|
width: 25%;
|
|
}
|
|
|
|
.highlight-row {
|
|
background-color: #f5f2e9;
|
|
border-top: 2px solid #c5a059;
|
|
}
|
|
|
|
.lbl-col-highlight {
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
font-weight: bold;
|
|
color: #0b3c5d;
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
text-align: right;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.val-col-highlight {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #b8860b; /* Dark Goldenrod */
|
|
}
|
|
}
|
|
|
|
/* The allotment schedule — one row per block of shares allotted, in the same paper-and-ink palette
|
|
as the details grid so it reads as part of the certificate rather than a report pasted into it. */
|
|
.allotment-table {
|
|
position: relative;
|
|
z-index: 2; /* Above the watermark, like the other certificate content. */
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 40px;
|
|
|
|
th {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ede8db;
|
|
background-color: #f7f5ee;
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: #7b6f63;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
}
|
|
|
|
// Same reasoning as .val-col above: every cell here is a figure someone has to check against the
|
|
// register, so it reads in a plain sans-serif with tabular numerals rather than the certificate's
|
|
// decorative serif.
|
|
td {
|
|
padding: 9px 12px;
|
|
border: 1px solid #ede8db;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 13px;
|
|
color: #322f2b;
|
|
}
|
|
|
|
.allotment-meeting {
|
|
color: #7b6f63;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ta-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.ta-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* Certificate Footer Seal / Signatures */
|
|
.cert-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
|
|
.seal-container {
|
|
width: 25%;
|
|
|
|
.seal-ring {
|
|
width: 90px;
|
|
height: 90px;
|
|
border: 2px dashed #b8860b;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
transform: rotate(-15deg);
|
|
|
|
.seal-text {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #b8860b;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.closing-text {
|
|
width: 45%;
|
|
font-size: 12px;
|
|
color: #7b6f63;
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
}
|
|
|
|
.signatures-container {
|
|
width: 30%;
|
|
text-align: center;
|
|
|
|
.signature-block {
|
|
display: inline-block;
|
|
width: 80%;
|
|
|
|
.signature-line {
|
|
border-bottom: 1px solid #7b6f63;
|
|
margin-bottom: 8px;
|
|
height: 40px; /* Space for signature */
|
|
}
|
|
|
|
.signatory-title {
|
|
font-size: 12px;
|
|
color: #7b6f63;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Print CSS */
|
|
@media print {
|
|
::ng-deep html,
|
|
::ng-deep body {
|
|
height: auto !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Hide non-overlay contents during print. Deliberately NOT `::ng-deep` here: under Angular's
|
|
emulated encapsulation a bare `body` selector never carries this component's scoping
|
|
attribute, so a scoped rule can never match the real <body> and is safely inert — whereas
|
|
`::ng-deep` emits it fully unscoped into the GLOBAL stylesheet for the rest of the session
|
|
(Angular never removes a component's injected styles when it's destroyed), silently hiding
|
|
every other page's print output app-wide the moment this dialog is opened once. The app
|
|
shell (nav, toolbar, sidebar) is already hidden for every print via the global rules in
|
|
main.scss, so this dialog doesn't need its own global override to get the same effect. */
|
|
body > :not(.cdk-overlay-container) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* The dialog's own scroll region clips anything past 80vh -- printing only captures what a
|
|
scrollable/max-height box shows on screen, so both constraints must be lifted. */
|
|
.dialog-content-container {
|
|
max-height: none !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* CDK's overlay wrapper/backdrop/pane are all position: fixed. Unset them so the full certificate prints statically. */
|
|
::ng-deep .cdk-overlay-backdrop {
|
|
display: none !important;
|
|
}
|
|
|
|
::ng-deep .cdk-overlay-container,
|
|
::ng-deep .cdk-global-overlay-wrapper,
|
|
::ng-deep .cdk-overlay-pane,
|
|
::ng-deep .mat-mdc-dialog-container,
|
|
::ng-deep .mdc-dialog__container,
|
|
::ng-deep .mdc-dialog__surface {
|
|
position: static !important;
|
|
display: block !important;
|
|
max-height: none !important;
|
|
max-width: none !important;
|
|
height: auto !important;
|
|
width: auto !important;
|
|
overflow: visible !important;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Make certificate fill page */
|
|
#share-certificate-print {
|
|
position: static !important;
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background-color: #fff !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.certificate-border-outer {
|
|
border-width: 8px !important;
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
::ng-deep .mat-mdc-dialog-container {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Compact every spacing/font value so the whole certificate fits a single printed page */
|
|
.certificate-container {
|
|
padding: 6px !important;
|
|
}
|
|
|
|
.certificate-border-inner {
|
|
padding: 14px !important;
|
|
}
|
|
|
|
.certificate-header {
|
|
margin-bottom: 10px !important;
|
|
padding-bottom: 10px !important;
|
|
|
|
.bank-name {
|
|
font-size: 19px !important;
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
.bank-sub {
|
|
font-size: 10px !important;
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
.cert-title {
|
|
font-size: 19px !important;
|
|
letter-spacing: 2px !important;
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
.cert-subtitle {
|
|
font-size: 9px !important;
|
|
}
|
|
}
|
|
|
|
.cert-meta-row {
|
|
margin-bottom: 10px !important;
|
|
padding-bottom: 8px !important;
|
|
|
|
.meta-label {
|
|
font-size: 9px !important;
|
|
margin-bottom: 1px !important;
|
|
}
|
|
|
|
.meta-value {
|
|
font-size: 12px !important;
|
|
}
|
|
}
|
|
|
|
.cert-body-section {
|
|
margin-bottom: 10px !important;
|
|
|
|
.cert-main-text {
|
|
font-size: 11px !important;
|
|
line-height: 1.4 !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
}
|
|
|
|
.issued-to-details {
|
|
padding: 8px 14px !important;
|
|
margin: 8px auto !important;
|
|
|
|
.client-name-details {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.client-ids,
|
|
.client-address {
|
|
font-size: 10px !important;
|
|
}
|
|
}
|
|
|
|
.certificate-details-table {
|
|
margin-bottom: 12px !important;
|
|
|
|
td {
|
|
padding: 5px 10px !important;
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.lbl-col-highlight {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.val-col-highlight {
|
|
font-size: 13px !important;
|
|
}
|
|
}
|
|
|
|
.allotment-table {
|
|
margin-bottom: 12px !important;
|
|
|
|
th {
|
|
padding: 4px 8px !important;
|
|
font-size: 8px !important;
|
|
}
|
|
|
|
td {
|
|
padding: 4px 8px !important;
|
|
font-size: 9px !important;
|
|
}
|
|
}
|
|
|
|
.cert-footer {
|
|
margin-top: 8px !important;
|
|
|
|
.seal-ring {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
}
|
|
|
|
.seal-text {
|
|
font-size: 8px !important;
|
|
}
|
|
|
|
.closing-text {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.signature-line {
|
|
height: 22px !important;
|
|
}
|
|
|
|
.signatory-title {
|
|
font-size: 10px !important;
|
|
}
|
|
}
|
|
}
|