frontend.css (3514B)
1 /** 2 * Frontend Styles for Taler Turnstile Paywall 3 */ 4 5 /* Paywall Container */ 6 .taler-turnstile-paywall { 7 margin: 2em 0; 8 padding: 2em; 9 background: #f9f9f9; 10 border: 1px solid #ddd; 11 border-radius: 8px; 12 } 13 14 .taler-turnstile-excerpt { 15 margin-bottom: 2em; 16 font-size: 1.1em; 17 line-height: 1.6; 18 } 19 20 /* Payment Container */ 21 .taler-payment-container { 22 background: #fff; 23 padding: 2em; 24 border-radius: 8px; 25 box-shadow: 0 2px 8px rgba(0,0,0,0.1); 26 text-align: center; 27 } 28 29 .taler-payment-container h3 { 30 margin-top: 0; 31 color: #333; 32 font-size: 1.8em; 33 } 34 35 .taler-payment-container > p { 36 color: #666; 37 margin-bottom: 2em; 38 } 39 40 /* Payment Methods Layout */ 41 .taler-payment-methods { 42 display: flex; 43 gap: 3em; 44 justify-content: center; 45 align-items: flex-start; 46 margin: 2em 0; 47 flex-wrap: wrap; 48 } 49 50 .taler-qr-section, 51 .taler-button-section { 52 flex: 1; 53 min-width: 250px; 54 max-width: 350px; 55 } 56 57 .taler-qr-section h4, 58 .taler-button-section h4 { 59 margin-top: 0; 60 margin-bottom: 1em; 61 color: #555; 62 font-size: 1.2em; 63 } 64 65 /* QR Code Container */ 66 .taler-turnstile-qr-code-container { 67 display: inline-block; 68 padding: 1em; 69 background: #fff; 70 border: 2px solid #e0e0e0; 71 border-radius: 8px; 72 margin-bottom: 1em; 73 } 74 75 .taler-turnstile-qr-code-container img { 76 display: block; 77 max-width: 100%; 78 height: auto; 79 } 80 81 /* Payment Button */ 82 .taler-pay-button { 83 display: inline-block; 84 padding: 1em 2em; 85 font-size: 1.1em; 86 font-weight: 600; 87 text-decoration: none; 88 background: #0073aa; 89 color: #fff !important; 90 border-radius: 5px; 91 transition: background 0.3s ease; 92 border: none; 93 cursor: pointer; 94 } 95 96 .taler-pay-button:hover { 97 background: #005177; 98 color: #fff !important; 99 } 100 101 .taler-pay-button:focus { 102 outline: 2px solid #0073aa; 103 outline-offset: 2px; 104 } 105 106 /* Payment Info */ 107 .taler-payment-info { 108 margin-top: 2em; 109 padding-top: 1em; 110 border-top: 1px solid #e0e0e0; 111 } 112 113 .taler-order-id { 114 color: #999; 115 font-size: 0.9em; 116 margin: 0; 117 } 118 119 /* Description Text */ 120 .taler-qr-section .description, 121 .taler-button-section .description { 122 font-size: 0.9em; 123 color: #666; 124 font-style: italic; 125 margin-top: 0.5em; 126 } 127 128 /* Error Message */ 129 .taler-turnstile-error { 130 background: #fff3cd; 131 border: 1px solid #ffc107; 132 border-radius: 5px; 133 padding: 1.5em; 134 margin: 2em 0; 135 } 136 137 .taler-turnstile-error p { 138 margin: 0.5em 0; 139 color: #856404; 140 } 141 142 .taler-turnstile-error strong { 143 color: #856404; 144 } 145 146 /* Responsive Design */ 147 @media (max-width: 768px) { 148 .taler-payment-methods { 149 flex-direction: column; 150 align-items: center; 151 } 152 153 .taler-qr-section, 154 .taler-button-section { 155 max-width: 100%; 156 } 157 158 .taler-turnstile-paywall { 159 padding: 1.5em; 160 } 161 162 .taler-payment-container { 163 padding: 1.5em; 164 } 165 } 166 167 /* Loading State (optional enhancement) */ 168 .taler-payment-container.checking-payment { 169 position: relative; 170 } 171 172 .taler-payment-container.checking-payment::after { 173 content: ''; 174 position: absolute; 175 top: 0; 176 left: 0; 177 right: 0; 178 bottom: 0; 179 background: rgba(255, 255, 255, 0.8); 180 display: flex; 181 align-items: center; 182 justify-content: center; 183 } 184 185 /* Accessibility */ 186 .taler-pay-button:focus-visible { 187 outline: 3px solid #0073aa; 188 outline-offset: 3px; 189 } 190 191 /* Print Styles */ 192 @media print { 193 .taler-payment-container { 194 display: none; 195 } 196 }