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
-
-
+
- This has been generated by BananaSplit version {{ version }}, git
- revision {{ gitRevision }}
+ Please go to bs.parity.io to download
+ the reconstruction webapp, if you don't have one already. This has been
+ generated by BananaSplit version {{ version }}, git revision
+ {{ gitRevision }}
@@ -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;
}