diff --git a/src/components/ShardQrCode.vue b/src/components/ShardQrCode.vue index fd9cb0d..270c7c5 100644 --- a/src/components/ShardQrCode.vue +++ b/src/components/ShardQrCode.vue @@ -6,12 +6,12 @@ You need {{ requiredShards - 1 }} more QR {{ pluralizeCode }} like this to reconstruct the secret -

- Please go to https://bs.parity.io to - download the reconstruction webapp, if you don't have one already -

- + @@ -72,28 +74,67 @@ export default { .qr-tile { page-break-after: always; } + + canvas { + height: min(80vw, 80vh); + width: min(80vw, 80vh) !important; + } + + @page { + margin: 0; + padding: 0; + } } +/* +@media print and (min-width: 20cm) { + .qr-tile { + text-align: left !important; + } + + .print-only { + padding: 0 10% 0 50% !important; + } + + .qr-code { + position: absolute; + left: 0; + top: 0; + padding: 5% !important; + } + + canvas { + height: min(75vw, 75vh) !important; + width: min(75vw, 75vh) !important; + } +} */ .qr-tile { + position: relative; font-family: "Avenir Next Condensed", "Avenir", Helvetica, Arial, sans-serif; - margin: 0.1cm; - padding: 0.5cm; - border: dotted 1px rgba(0, 0, 0, 0.25); + margin: 0 auto; + padding: 0; text-align: center; + display: flex; + flex-direction: column; + align-items: center; + width: 100vw; + height: 100vh; } h1 { font-weight: 600; - font-size: 2em; + font-size: 1.5em; } canvas { margin: 0 auto; + display: block; } h3, h4 { font-weight: 400; + margin: 0.25em 0 0 0; } .recovery-field { @@ -109,7 +150,8 @@ h4 { } .version { - font-style: italic; + font-weight: 500; + font-size: 75%; color: darkgray; } diff --git a/src/views/Share.vue b/src/views/Share.vue index 5d2768b..63cd7aa 100644 --- a/src/views/Share.vue +++ b/src/views/Share.vue @@ -147,6 +147,11 @@ textarea:disabled { color: #99928f; } +input[type="number"] { + width: 48px; + text-align: center; +} + textarea { min-height: 80px; }