mirror of
https://github.com/lnbits/lnbits-legend.git
synced 2025-03-11 01:36:11 +01:00
make QR img bigger, adjust css
This commit is contained in:
parent
ebaad7fe49
commit
371dacf8b2
2 changed files with 10 additions and 6 deletions
|
@ -368,7 +368,7 @@ Vue.component('lnbits-qrcode', {
|
||||||
template: `
|
template: `
|
||||||
<div class="qrcode__wrapper">
|
<div class="qrcode__wrapper">
|
||||||
<qrcode :value="value"
|
<qrcode :value="value"
|
||||||
:options="{errorCorrectionLevel: 'Q'}" class="rounded-borders"></qrcode>
|
:options="{errorCorrectionLevel: 'Q', width: 800}" class="rounded-borders"></qrcode>
|
||||||
<img class="qrcode__image" :src="logo" alt="..." />
|
<img class="qrcode__image" :src="logo" alt="..." />
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
|
|
@ -214,20 +214,24 @@ video {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.qrcode__wrapper > canvas {
|
// qrcode
|
||||||
|
.qrcode__wrapper canvas {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 100%;
|
width: 100% !important; // important to override qrcode inline width
|
||||||
min-height: 100%;
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qrcode__image {
|
.qrcode__image {
|
||||||
width: 15%;
|
width: 15%;
|
||||||
height: 15%;
|
height: 15%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
padding: 0.3rem;
|
padding: 0.2rem;
|
||||||
|
border-radius: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue