|
|
|
|
236
|
padding: 0.5rem 0.5rem 0.5rem 2.1em;
|
236
|
padding: 0.5rem 0.5rem 0.5rem 2.1em;
|
237
|
margin: 0;
|
237
|
margin: 0;
|
238
|
width: 100%;
|
238
|
width: 100%;
|
|
|
239
|
+ height: 100%;
|
239
|
|
240
|
|
240
|
border: 1px solid #dcdcdc;
|
241
|
border: 1px solid #dcdcdc;
|
241
|
border-radius: calc(var(--border-radius) / 3);
|
242
|
border-radius: calc(var(--border-radius) / 3);
|
|
|
|
|
249
|
border-color: salmon !important;
|
250
|
border-color: salmon !important;
|
250
|
}
|
251
|
}
|
251
|
#custom-amount-wrapper {
|
252
|
#custom-amount-wrapper {
|
252
|
- flex-basis: 14.9rem; /* line break */
|
|
|
|
|
253
|
+ /*flex-basis: 14.9rem;*/ /* line break */
|
|
|
254
|
+ flex-basis: 9rem; /* same line */
|
253
|
visibility: hidden;
|
255
|
visibility: hidden;
|
254
|
max-height: 0;
|
256
|
max-height: 0;
|
255
|
transform: scaleY(0);
|
257
|
transform: scaleY(0);
|
|
|
|
|
260
|
font-size: 0.85em;
|
262
|
font-size: 0.85em;
|
261
|
position: absolute;
|
263
|
position: absolute;
|
262
|
left: 0.83em;
|
264
|
left: 0.83em;
|
263
|
- top: 0.33em;
|
|
|
|
|
265
|
+ /*top: 0.33em;*/
|
|
|
266
|
+ top: 0.37em;
|
264
|
}
|
267
|
}
|
265
|
-#custom-tier:checked ~ #custom-amount-wrapper {
|
|
|
|
|
268
|
+/*#custom-tier:checked ~*/ #custom-amount-wrapper {
|
266
|
visibility: visible;
|
269
|
visibility: visible;
|
267
|
max-height: 64px;
|
270
|
max-height: 64px;
|
268
|
transform: scaleY(1);
|
271
|
transform: scaleY(1);
|
|
|
|
|
634
|
<span>
|
637
|
<span>
|
635
|
<div id="amounts" class="euro">
|
638
|
<div id="amounts" class="euro">
|
636
|
<input type="radio" id="custom-tier" name="tier" value="custom" data-goatcounter-click onchange="this.checked && document.getElementById('custom-amount').focus()">
|
639
|
<input type="radio" id="custom-tier" name="tier" value="custom" data-goatcounter-click onchange="this.checked && document.getElementById('custom-amount').focus()">
|
|
|
640
|
+ <!--
|
637
|
<label for="custom-tier"><span class="dollar-sign"></span>X</label>
|
641
|
<label for="custom-tier"><span class="dollar-sign"></span>X</label>
|
638
|
<input type="radio" id="first-tier" name="tier" value="first" data-goatcounter-click>
|
642
|
<input type="radio" id="first-tier" name="tier" value="first" data-goatcounter-click>
|
639
|
<label for="first-tier"><span class="dollar-sign"></span>29</label>
|
643
|
<label for="first-tier"><span class="dollar-sign"></span>29</label>
|
|
|
644
|
+ -->
|
640
|
<input type="radio" id="second-tier" name="tier" value="second" checked data-goatcounter-click>
|
645
|
<input type="radio" id="second-tier" name="tier" value="second" checked data-goatcounter-click>
|
641
|
<label for="second-tier"><span class="dollar-sign"></span>49</label>
|
646
|
<label for="second-tier"><span class="dollar-sign"></span>49</label>
|
642
|
<input type="radio" id="third-tier" name="tier" value="third" data-goatcounter-click>
|
647
|
<input type="radio" id="third-tier" name="tier" value="third" data-goatcounter-click>
|
643
|
<label for="third-tier"><span class="dollar-sign"></span>99</label>
|
648
|
<label for="third-tier"><span class="dollar-sign"></span>99</label>
|
|
|
649
|
+ <!--
|
644
|
<input type="radio" id="fourth-tier" name="tier" value="fourth" data-goatcounter-click>
|
650
|
<input type="radio" id="fourth-tier" name="tier" value="fourth" data-goatcounter-click>
|
645
|
<label for="fourth-tier"><span class="dollar-sign"></span>199</label>
|
651
|
<label for="fourth-tier"><span class="dollar-sign"></span>199</label>
|
|
|
652
|
+ -->
|
646
|
<label for="custom-amount" id="custom-amount-wrapper">
|
653
|
<label for="custom-amount" id="custom-amount-wrapper">
|
647
|
<span class="dollar-sign"></span>
|
654
|
<span class="dollar-sign"></span>
|
648
|
- <input type="number" id="custom-amount" name="custom-amount" value="" placeholder="Enter the amount" min="0" max="999999" step="1">
|
|
|
|
|
655
|
+ <input type="number" id="custom-amount" name="custom-amount" value="" placeholder="Enter the amount" min="0" max="999999" step="1" oninput="document.getElementById('custom-tier').click()">
|
649
|
</label>
|
656
|
</label>
|
650
|
</div>
|
657
|
</div>
|
651
|
<div id="currencies">
|
658
|
<div id="currencies">
|