diff --git a/static/css/connect.css b/static/css/connect.css index bb1b5395..27ea020b 100644 --- a/static/css/connect.css +++ b/static/css/connect.css @@ -29,9 +29,37 @@ /* prevent overlap: hide connect string until revealed; click surface on box */ .qrcode-box #connectString { display: none; } .qrcode-box.revealed #connectString { display: block; } -.qrcode-box #qrcode { pointer-events: none; } .qrcode-box { cursor: pointer; } +/* QR viewport and veil overlay */ +.qrcode-viewport { + position: relative; + width: 100%; + height: 175px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} +.qrcode-viewport #qrcode { + position: absolute; + width: 157px; + height: 157px; +} +.qrcode-viewport .qr-veil { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(7px); + -webkit-backdrop-filter: blur(7px); + background: rgba(0,0,0,0.25); + color: #c434e0; + font-size: 12px; +} +.qrcode-box.revealed .qr-veil { display: none; } + .qrcode-box-clicked::before { content: ""; position: absolute; diff --git a/static/index.html b/static/index.html index bdbe8e08..0d8b9a3e 100644 --- a/static/index.html +++ b/static/index.html @@ -191,13 +191,16 @@