wiki/src/donate.css

   1 /* Remove white margin on page */
   2
   3 #pagebody {
   4   margin-left: -2em;
   5 }
   6
   7 #content {
   8   padding: 0;
   9 }
  10
  11 .row {
  12   margin-left: 0;
  13   margin-right: -2em;
  14   padding-left: 35px;
  15 }
  16
  17 /* Left part */
  18
  19 #feature {
  20   margin-bottom: 2em;
  21 }
  22
  23 #feature img {
  24   display: block;
  25   margin: auto;
  26   width: 400px;
  27   height: auto;
  28 }
  29
  30 @media (max-width: 550px) {
  31 #feature img {
  32   width: 100%;
  33 }
  34 }
  35
  36 #feature h2 {
  37   margin: 1em 0;
  38 }
  39
  40 #feature h3 {
  41   font-size: 20px;
  42   font-style: italic;
  43   margin-bottom: 1em;
  44   text-transform: none;
  45   letter-spacing: 0;
  46 }
  47
  48 #feature p, #feature ul {
  49   font-size: 16px;
  50   line-height: 1.5em;
  51   margin-right: 3.5em;
  52 }
  53
  54 /* Hide version with JavaScript by default */
  55
  56 #paypal-with-js {
  57   display: none;
  58 }
  59
  60 /* JavaScript version */
  61
  62 #currency .col-md-12 {
  63   margin-bottom: 1em;
  64   padding: 0;
  65   border: solid 3px white;
  66 }
  67
  68 #donate-paypal-button {
  69   width: 100%;
  70   border: solid 3px white;
  71 }
  72
  73 .btn-primary {
  74   background-color: #53b351 !important;
  75   border-color: #53b351 !important;
  76   color: black;
  77 }
  78
  79 .btn-primary.active, .btn-primary.active:hover {
  80   background-color: #276426 !important;
  81   border-color: #276426 !important;
  82   color: white;
  83 }
  84
  85 .amounts .btn-primary.active:hover {
  86   border-color: white !important;
  87 }
  88
  89 .btn-primary:hover {
  90   background-color: #428f40 !important;
  91   border-color: #428f40 !important;
  92   color: black;
  93 }
  94
  95 #currency, #dollar-amounts, #euro-amounts, #frequency-buttons,
  96 #frequency-explanation, #donate-paypal-button, .tax-deductible {
  97   display: inline-block;
  98 }
  99
 100 #frequency-buttons, #frequency-explanation, #require-paypal, #paypal-with-js .tax-deductible, #newsletter {
 101   padding: 0 4px;
 102 }
 103
 104 #frequency-buttons {
 105   margin-top: 0.5em;
 106   padding-bottom: 0.2em;
 107   border-bottom: 2px solid transparent;
 108   width: 100%;
 109   text-align: center;
 110 }
 111
 112 #frequency-buttons input {
 113   position: relative;
 114   margin-right: 6px;
 115 }
 116
 117 .shake {
 118   animation: shake 1s;
 119   display: inline-block;
 120   border-color: #ef1f31 !important;
 121 }
 122
 123 @keyframes shake {
 124   10% { transform: translateX(-1px); }
 125   20% { transform: translateX(2px); }
 126   30% { transform: translateX(-4px); }
 127   40% { transform: translateX(4px); }
 128   50% { transform: translateX(-4px); }
 129   60% { transform: translateX(4px); }
 130   70% { transform: translateX(-4px); }
 131   80% { transform: translateX(2px); }
 132   90% { transform: translateX(-1px); }
 133 }
 134
 135 .tax-deductible {
 136   font-size: 11px;
 137   color: #555;
 138 }
 139
 140 .amounts .btn {
 141   padding-top: 19px;
 142   height: 65px;
 143   border: solid 3px white !important;
 144 }
 145
 146 .amounts .other {
 147   padding: 13px 4px;
 148 }
 149
 150 .amounts .other .input-group-addon {
 151   padding: 2px;
 152 }
 153
 154 .amounts .other .form-control {
 155   padding: 4px;
 156 }
 157
 158 /* Newsletter */
 159
 160 #newsletter {
 161   margin-top: 1.5em;
 162   min-height: 3em;
 163 }
 164
 165 #newsletter label {
 166   margin-bottom: 0;
 167 }
 168
 169 #email {
 170   display: none;
 171   font-size: 11px;
 172   color: #555;
 173   margin-bottom: 0;
 174 }
 175
 176 p.email {
 177   font-size: 11px;
 178   color: #555;
 179 }
 180
 181 /* Version without JavaScript */
 182
 183 #paypal-without-js h2 {
 184   font-size: 24px;
 185   margin-top: 0;
 186 }
 187
 188 #paypal-without-js h3 {
 189   font-size: 14px;
 190   margin-top: 5px;
 191 }
 192
 193 #paypal-without-js form {
 194   margin-bottom: 1em;
 195 }
 196
 197 #paypal-without-js form label {
 198   font-size: 12px;
 199 }
 200
 201 /* Other ways */
 202
 203 h4 {
 204   color: #56347c;
 205 }
 206
 207 p+h4, div+h4 {
 208   margin-top: 3em;
 209 }
 210
 211 @media (max-width: 986px) {
 212 h4 {
 213   margin-top: 3em;
 214 }
 215 }
 216
 217 h5 {
 218   font-weight: bold;
 219 }
 220
 221 #other-ways-1, #other-ways-2, #other-ways-3, #income {
 222   margin-top: 2em;
 223   background: #f5f5f5;
 224   box-sizing: border-box;
 225   padding-bottom: 1.5em;
 226 }
 227
 228 #other-ways-1 {
 229   margin-right: -15px;
 230   margin-left: -25px;
 231   padding-left: 25px;
 232 }
 233
 234 #other-ways-1 h3 {
 235   margin-top: 1em;
 236   padding-top: 25px;
 237 }
 238
 239 #other-ways-2, #other-ways-3 {
 240   margin-top: 0;
 241   padding-top: 20px;
 242 }
 243
 244 #cryptos {
 245   overflow-wrap: break-word;
 246   padding-right: 2em;
 247 }
 248
 249 /* Indent bank account details for wire transfers */
 250
 251 .indent {
 252   margin-left: 2em;
 253 }
 254
 255 /* Hide euros until we solve #11868 */
 256
 257 #currency, #dollars-without-js h2, #euros-without-js {
 258   display: none;
 259 }
 260
 261 /* Other sections */
 262
 263 h3 {
 264   margin: 1.5em 0;
 265 }
 266
 267 @media (max-width: 986px) {
 268 #users .image img {
 269   max-width: 100%;
 270   height: auto;
 271 }
 272 }