.printable {} .printable .print-area { display: var(--flex-display); flex-direction: var(--flex-col); } .printable .print-wrapper { display: var(--flex-display); flex-direction: var(--flex-col); flex-wrap: var(--flex-nowrap); gap: var(--gap); transform: scale(0); } .printable .print-page { position: var(--position-relative); display: var(--flex-display); flex-direction: var(--flex-col); box-sizing: border-box; box-shadow: 0.3rem 0.6rem 1.8rem #d5d5d5; } .printable .print-page[data-wativate-zoomed="true"] { cursor: zoom-in; } .printable .print-page[data-wativate-zoomed="true"]:hover::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 2; } .printable .print-page[data-wativate-paper-size="a4"] { width: 210mm; height: 297mm; } .printable .print-page[data-wativate-paper-size="letter"] { width: 216mm; height: 279mm; } .printable#printable-wrapper-zoomed {} .printable#printable-wrapper-zoomed>.preview-background { content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #d9dce0; z-index: 9999; } .printable#printable-wrapper-zoomed>.preview-area { position: relative; z-index: 10000; display: var(--flex-display); flex-direction: var(--flex-col); align-items: var(--items-center); } .printable#printable-wrapper-zoomed>.preview-area>.preview-wrapper { display: var(--flex-display); flex-direction: var(--flex-col); flex-wrap: var(--flex-nowrap); gap: var(--gap); transform: scale(1); } .printable#printable-wrapper-zoomed>.preview-area>.preview-wrapper .print-page { background-color: #fff; box-shadow: 0 0 1rem #a3a6a9; } .printable#printable-wrapper-zoomed>.print-btn { position: fixed; right: 1rem; top: 1rem; z-index: 10001; display: var(--flex-display); flex-direction: var(--flex-row); width: 10rem; color: #fff; background-color: #fafafa; box-shadow: 0 0.1rem 0.36rem #bdbdbd; border-radius: 0.36rem; cursor: pointer; } .printable#printable-wrapper-zoomed>.print-btn>div { display: var(--flex-display); flex-direction: var(--flex-row); flex: var(--flex-1-2); height: 3rem; align-items: center; justify-content: center; gap: var(--gap-0\.6); font-size: var(--font-size-small); } .printable#printable-wrapper-zoomed>.print-btn .zoom.zoom-in { color: #0066ff; border: #0066ff 0.1rem solid; border-radius: 0.36rem 0 0 0.36rem; } .printable#printable-wrapper-zoomed>.print-btn .zoom.zoom-in .icon-reset-zoom.reset { width: 1rem; height: 1rem; border: #a5c7f9 0.1rem solid; border-radius: 0.1rem; } .printable#printable-wrapper-zoomed>.print-btn .zoom.zoom-in .icon-reset-zoom.reset::before { width: 0.25rem; height: 0.25rem; border-left: 0.1rem solid #a5c7f9; border-top: 0.1rem solid #a5c7f9; margin: 0.08rem; } .printable#printable-wrapper-zoomed>.print-btn .zoom.zoom-in .icon-reset-zoom.reset::after { width: 0.25rem; height: 0.25rem; border-right: 0.1rem solid #a5c7f9; border-bottom: 0.1rem solid #a5c7f9; margin: 0.08rem; } .printable#printable-wrapper-zoomed>.print-btn .print { background-color: #0066ff; border-radius: 0 0.36rem 0.36rem 0; } .printable#printable-wrapper-zoomed>.print-btn .print .icon-print i:nth-child(1) { background-color: #999; } .printable#printable-wrapper-zoomed>.print-btn .print .icon-print i:nth-child(2) { background-color: #fff; } .printable#printable-wrapper-zoomed>.print-btn .print .icon-print i:nth-child(2):before { border-top: 0.1rem solid #000; border-bottom: 0.1rem solid #000; background-color: #000; } .printable#printable-wrapper-print { position: absolute; left: 0; top: 0; visibility: hidden; display: none; } @media print { @page { margin: 0; padding: 0; } body *:not(#printable-wrapper-print):not(#printable-wrapper-print *) { display: none; } .printable#printable-wrapper-print { visibility: visible; display: var(--flex-display); } .printable#printable-wrapper-print>.preview-area { display: var(--flex-display); flex-direction: var(--flex-col); } .printable#printable-wrapper-print>.preview-area>.preview-wrapper { display: var(--flex-display); flex-direction: var(--flex-col); flex-wrap: var(--flex-nowrap); gap: initial; transform: scale(1); } .printable#printable-wrapper-print>.preview-area>.preview-wrapper>.print-page { margin: 0; box-shadow: none; } }