commit 60f37478fd7e234844013fde2d4d8c8a9fa536b8
parent 32b6556e4169c75afbd2d29d0f10c921d052fe5c
Author: Christian Grothoff <christian@grothoff.org>
Date: Wed, 20 May 2026 23:19:55 +0200
modernize QR code style
Diffstat:
1 file changed, 83 insertions(+), 10 deletions(-)
diff --git a/templates/taler-turnstile-payment-button.html.twig b/templates/taler-turnstile-payment-button.html.twig
@@ -12,7 +12,14 @@
<div class="taler-turnstile-payment-actions">
<div class="taler-turnstile-payment-qr">
- <div class="taler-turnstile-qr-code-container"></div>
+ <div class="taler-turnstile-qr-taler-frame">
+ <div class="taler-turnstile-qr-inner">
+ <div class="taler-turnstile-qr-code-container"></div>
+ </div>
+ <div class="taler-turnstile-qr-taler-logo" aria-hidden="true">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 95" fill="none" version="1.1"><g><g fill="none"><rect width="200" height="95" x="0" style="fill: rgb(255, 255, 255); fill-opacity: 1;" ry="47.5" rx="47.5" y="0"/><g><path d="M87.60791015625,8.12158203125C101.56881713867188,8.12158203125,113.69378662109375,16.55859375,119.81179809570312,28.943603515625L114.60223388671875,28.943603515625C108.9432373046875,19.34130859375,98.96926879882812,12.96484375,87.60791015625,12.96484375C69.97454833984375,12.96484375,55.679962158203125,28.32177734375,55.679962158203125,47.265380859375C55.679962158203125,56.53759765625,59.105865478515625,64.94921875,64.67062377929688,71.121826171875C63.468505859375,72.1279296875,62.188629150390625,73.031494140625,60.841827392578125,73.8203125C54.84014892578125,66.8427734375,51.1715087890625,57.515380859375,51.1715087890625,47.265380859375C51.1715087890625,25.64697265625,67.48464965820312,8.12158203125,87.60791015625,8.12158203125ZM119.71417236328125,65.7861328125C113.56512451171875,78.06298828125,101.49423217773438,86.409423828125,87.60791015625,86.409423828125C86.66519165039062,86.409423828125,85.73080444335938,86.370849609375,84.80609130859375,86.29541015625C87.53939819335938,84.894287109375,90.10183715820312,83.171875,92.45233154296875,81.17333984375C101.69497680664062,79.661865234375,109.63381958007812,73.891845703125,114.48382568359375,65.7861328125Z" style="fill-rule: evenodd; fill: rgb(0, 66, 179);"/><path d="M67.50363159179688,8.12158203125C68.44625854492188,8.12158203125,69.380615234375,8.16015625,70.305419921875,8.235595703125C67.57211303710938,9.63671875,65.00958251953125,11.35888671875,62.659088134765625,13.357666015625C47.324951171875,15.865234375,35.575653076171875,30.091064453125,35.575653076171875,47.265380859375C35.575653076171875,60.06689453125,42.10455322265625,71.228759765625,51.77911376953125,77.1220703125C50.351959228515625,77.362060546875,48.8892822265625,77.4873046875,47.399322509765625,77.4873046875C46.289306640625,77.4873046875,45.19500732421875,77.416015625,44.118560791015625,77.281494140625C36.14129638671875,70.10107421875,31.067230224609375,59.32080078125,31.067230224609375,47.265380859375C31.067230224609375,25.64697265625,47.38037109375,8.12158203125,67.50363159179688,8.12158203125ZM72.34814453125,81.17333984375C81.5909423828125,79.661865234375,89.52969360351562,73.8916015625,94.3797607421875,65.78564453125L99.61007690429688,65.78564453125C93.46109008789062,78.062744140625,81.39016723632812,86.409423828125,67.50363159179688,86.409423828125C66.56088256835938,86.409423828125,65.62661743164062,86.370849609375,64.70181274414062,86.29541015625C67.4349365234375,84.89404296875,69.99777221679688,83.172119140625,72.34814453125,81.17333984375ZM94.497802734375,28.943603515625C91.6864013671875,24.174072265625,87.81045532226562,20.2001953125,83.22808837890625,17.40869140625C84.65524291992188,17.1689453125,86.11785888671875,17.04345703125,87.60791015625,17.04345703125C88.71786499023438,17.04345703125,89.81222534179688,17.114990234375,90.888671875,17.249267578125C94.485107421875,20.486572265625,97.49151611328125,24.455810546875,99.70870971679688,28.943603515625Z" style="fill-rule: evenodd; fill: rgb(0, 66, 179);"/><path d="M47.399322509765625,8.12158203125C48.352447509765625,8.12158203125,49.296783447265625,8.161376953125,50.23150634765625,8.238525390625C47.5032958984375,9.637451171875,44.945098876953125,11.356689453125,42.59844970703125,13.35107421875C27.242950439453125,15.839111328125,15.47137451171875,30.074951171875,15.47137451171875,47.265380859375C15.47137451171875,66.208984375,29.766082763671875,81.56591796875,47.399322509765625,81.56591796875C58.68267822265625,81.56591796875,68.59854125976562,75.277587890625,74.27731323242188,65.78564453125L79.50582885742188,65.78564453125C73.35687255859375,78.062744140625,61.285888671875,86.409423828125,47.399322509765625,86.409423828125C27.276123046875,86.409423828125,10.963043212890625,68.884033203125,10.963043212890625,47.265380859375C10.963043212890625,25.64697265625,27.276123046875,8.12158203125,47.399322509765625,8.12158203125ZM74.39288330078125,28.943603515625C73.218017578125,26.950927734375,71.857666015625,25.096435546875,70.337158203125,23.40966796875C71.53936767578125,22.40380859375,72.81900024414062,21.49951171875,74.1656494140625,20.7109375C76.29071044921875,23.181640625,78.12283325195312,25.947021484375,79.60369873046875,28.943603515625Z" style="fill-rule: evenodd; fill: rgb(0, 66, 179);"/><path d="M78.18096923828125,37.995361328125L86.3848876953125,37.995361328125L86.3848876953125,33.469482421875L65.39480590820312,33.469482421875L65.39480590820312,37.995361328125L73.59881591796875,37.995361328125L73.59881591796875,61.259765625L78.18096923828125,61.259765625Z" style="fill: rgb(0, 66, 179);"/><path d="M92.96798706054688,54.550537109375L105.19992065429688,54.550537109375L107.82388305664062,61.259765625L112.62802124023438,61.259765625L101.24588012695312,33.27099609375L97.03329467773438,33.27099609375L85.651123046875,61.259765625L90.30743408203125,61.259765625ZM103.53701782226562,50.222900390625L94.63125610351562,50.222900390625L99.06564331054688,39.10693359375Z" style="fill: rgb(0, 66, 179);"/><path d="M120.87139892578125,33.469482421875L116.76959228515625,33.469482421875L116.76959228515625,61.259765625L135.17013549804688,61.259765625L135.17013549804688,56.853271484375C130.4039306640625,56.853271484375,125.63763427734375,56.853271484375,120.87139892578125,56.853271484375Z" style="fill: rgb(0, 66, 179);"/><path d="M159.07958984375,33.469482421875L139.93722534179688,33.469482421875L139.93722534179688,61.259765625L159.264404296875,61.259765625L159.264404296875,56.853271484375L144.445556640625,56.853271484375L144.445556640625,49.428955078125L157.41665649414062,49.428955078125L157.41665649414062,45.0224609375L144.445556640625,45.0224609375L144.445556640625,37.876220703125L159.07958984375,37.876220703125Z" style="fill: rgb(0, 66, 179);"/><path d="M181.21524047851562,42.541259765625C181.21524047851562,43.976806640625,180.73483276367188,45.121826171875,179.767822265625,45.968505859375C178.80709838867188,46.822265625,177.5074462890625,47.245361328125,175.87518310546875,47.245361328125L169.20486450195312,47.245361328125L169.20486450195312,37.876220703125L175.83828735351562,37.876220703125C177.54434204101562,37.876220703125,178.86849975585938,38.2666015625,179.80490112304688,39.053955078125C180.74722290039062,39.8349609375,181.21524047851562,40.999267578125,181.21524047851562,42.541259765625ZM186.64749145507812,61.259765625L179.6632080078125,50.739013671875C180.5745849609375,50.474365234375,181.40618896484375,50.09765625,182.15771484375,49.607666015625C182.908935546875,49.1181640625,183.55581665039062,48.5224609375,184.09768676757812,47.8212890625C184.63983154296875,47.11962890625,185.06466674804688,46.312744140625,185.37261962890625,45.399658203125C185.68048095703125,44.486572265625,185.83438110351562,43.447509765625,185.83438110351562,42.282958984375C185.83438110351562,40.93310546875,185.61279296875,39.709228515625,185.16928100585938,38.610595703125C184.72586059570312,37.512451171875,184.09158325195312,36.5859375,183.26632690429688,35.83154296875C182.44088745117188,35.077392578125,181.43087768554688,34.4951171875,180.236083984375,34.084716796875C179.04104614257812,33.67431640625,177.70452880859375,33.469482421875,176.22647094726562,33.469482421875L164.696533203125,33.469482421875L164.696533203125,61.259765625L169.20486450195312,61.259765625L169.20486450195312,51.572998046875L174.91445922851562,51.572998046875L181.28903198242188,61.259765625Z" style="fill: rgb(0, 66, 179);"/></g></g></g></svg>
+ </div>
+ </div>
<p class="taler-turnstile-qr-help">{{ 'Scan with your GNU Taler wallet'|t }}</p>
</div>
@@ -69,21 +76,87 @@
.taler-turnstile-payment-qr {
text-align: center;
- padding: 1rem;
- background: white;
- border-radius: 4px;
- border: 1px solid #ddd;
}
-.taler-turnstile-qr-code {
+.taler-turnstile-qr-taler-frame {
+ position: relative;
+ display: inline-block;
+ max-width: 260px;
+ padding: 10px;
+ border-radius: 20px;
+ background: conic-gradient(
+ from var(--taler-turnstile-angle),
+ #0042b3 0deg,
+ #f1f1f4 20deg,
+ #f1f1f4 150deg,
+ #f1f1f4 160deg,
+ #0042b3 180deg,
+ #f1f1f4 200deg,
+ #f1f1f4 330deg,
+ #f1f1f4 340deg,
+ #0042b3
+ )
+ padding-box;
+ animation: taler-turnstile-rotate 10s linear 0s infinite normal none running;
+}
+
+.taler-turnstile-qr-inner {
+ background: #ffffff;
+ border-radius: 14px;
+ padding: 10px;
+}
+
+.taler-turnstile-qr-code-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 5px;
+}
+
+.taler-turnstile-qr-code-container svg,
+.taler-turnstile-qr-code-container img,
+.taler-turnstile-qr-code-container canvas {
+ display: block;
+}
+
+.taler-turnstile-qr-taler-logo {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80px;
+ height: 40px;
+ background: transparent;
+ pointer-events: none;
+}
+
+.taler-turnstile-qr-taler-logo svg {
+ width: 100%;
+ height: 100%;
display: block;
- margin: 0 auto;
- max-width: 200px;
- height: auto;
+}
+
+@property --taler-turnstile-angle {
+ syntax: "<angle>";
+ initial-value: 0deg;
+ inherits: false;
+}
+
+@keyframes taler-turnstile-rotate {
+ to {
+ --taler-turnstile-angle: 360deg;
+ }
+}
+
+@supports not (background: conic-gradient(from 0deg, #000, #fff)) {
+ .taler-turnstile-qr-taler-frame {
+ background: #0042b3;
+ animation: none;
+ }
}
.taler-turnstile-qr-help {
- margin: 0.5rem 0 0 0;
+ margin: 0.75rem 0 0 0;
font-size: 0.9rem;
color: #666;
}
