CertificatePrint.css: Difference between revisions

Revision as of 16:35, 31 July 2020

#cert-data {
    string-set: certname attr(data-name),
                certversion attr(data-version);
    /* Can't be `display: none;`, as it breaks string-set */
    visibility: hidden;
    position: absolute;
    bottom: 0px;
}

.checklist li::marker {
    content: "□\00A0";
    padding-right: 1em;
}

@media not print {
    .print-only {
        display: none;
    }
}

@media print {
    #firstHeading,
    #siteSub,
    .printfooter,
    .no-print {
        display: none;
    }
    
    .qrlite-result img {
        width: 1.5in;
    }

    /* Add link target as text, except mailto links */
    a:not([href^="mailto:"])::after {
        content: " [" attr(href) "]";
        color: initial;
        text-decoration: none;
    }

    @page {
        size: letter portrait;
        margin: 1in;

        @top-left {
            content: "Certification: " string(certname);
            font-size: 1.2em;
            color: #444;
            vertical-align: bottom;
            padding-bottom: 0.2em;
        }

        @bottom-left {
            content: string(certversion);
            color: #444;
        }

        @bottom-right-corner {
            content: counter(page);
        }
    }
}