/* === Template:Styles/Default.css === */
*,
*
:
before
,
*
:
after
{
-moz-
box-sizing
:
border-box
;
-webkit-
box-sizing
:
border-box
;
box-sizing
:
border-box
;
}
/* visually hidden - screenreader only */
.
sr-only
{
border
:
0
!important
;
clip
:
rect
(
1
px
,
1
px
,
1
px
,
1
px
)
!important
;
-webkit-
clip-path
:
inset
(
50
%
)
!important
;
clip-path
:
inset
(
50
%
)
!important
;
height
:
1
px
!important
;
margin
:
-1
px
!important
;
overflow
:
hidden
!important
;
padding
:
0
!important
;
position
:
absolute
!important
;
width
:
1
px
!important
;
white-space
:
nowrap
!important
;
}
/* Hide these until the required JavaScript fiddling has been done */
#
actual-form
,
.
consider-amounts
{
display
:
none
;
}
#
actual-form-loading
{
text-align
:
center
;
line-height
:
1.2
;
}
.
error-nojs
{
max-width
:
300
px
;
color
:
#d73333
;
}
/* Hide default MediaWiki stuff we don't want */
#
mw-page-base
,
#
mw-head-base
,
#
mw-panel
.
portal
,
#
mw-head
,
#
catlinks
,
#
firstHeading
,
#
contentSub
,
#
contentSub2
,
#
siteSub
,
#
jump-to-nav
,
.
uls-tipsy
{
display
:
none
;
}
.
mw-jump-link
{
display
:
none
!important
;
}
/* Re-add gradient background */
body
{
background-image
:
linear-gradient
(
to
bottom
,
#fff
40
px
,
#f6f6f6
80
px
);
background-position
:
top
;
background-repeat
:
repeat-x
;
background-color
:
#f6f6f6
;
}
#
content
{
background-color
:
transparent
;
background-image
:
none
;
border
:
0
;
padding-top
:
32
px
;
}
/* Link colors for visibility */
.
mw-parser-output
a
,
.
mw-parser-output
a
.
external
,
.
mw-parser-output
a
.
extiw
{
color
:
#36c
;
}
.
mw-parser-output
a
:
visited
,
.
mw-parser-output
a
.
external
:
visited
,
.
mw-parser-output
a
.
extiw
:
visited
{
color
:
#6f4db3
;
}
.
lp-error
{
color
:
#d73333
;
font-weight
:
500
;
font-size
:
14
px
;
}
/* Prevent site logos from showing through modals (e.g. for monthly convert) */
.
vector-body
{
position
:
inherit
;
}
body
.
modal-open
{
overflow
:
hidden
;
position
:
fixed
;
}
/* --- Overall layout of the landing page --- */
#
main-wrapper
{
width
:
100
%
;
display
:
flex
;
flex-wrap
:
wrap
;
justify-content
:
center
;
gap
:
24
px
;
}
body
.
rtl
#
main-wrapper
{
direction
:
rtl
;
}
#
form-wrapper
{
width
:
380
px
;
background-color
:
#fff
;
border
:
1
px
solid
#a2a9b1
;
border-radius
:
2
px
;
padding
:
24
px
;
color
:
#222
;
}
#
appeal-wrapper
{
flex
:
1
0
0
;
}
/* --- Appeal --- */
#
appeal
{
font-size
:
16
px
;
}
#
appeal
.
mw-heading2
,
#
appeal-head
{
font-size
:
21
px
;
padding-bottom
:
10
px
;
border-bottom
:
1
px
solid
#a2a9b1
;
margin-bottom
:
21
px
;
}
.
quote-wrapper
{
padding
:
140
px
0
;
}
/* --- Hide non-monthly capable payment methods on monthly forms --- */
.
form-monthly
.
not-monthly-capable
{
display
:
none
;
}
/* --- Form --- */
#
donate-form-wrapper
fieldset
{
width
:
100
%
;
border
:
0
;
margin
:
0
0
8
px
0
;
padding
:
0
;
}
.
frequency-options
ul
,
.
amount-options
ul
{
display
:
grid
;
margin
:
0
;
padding
:
0
;
list-style
:
none
;
gap
:
8
px
;
margin-bottom
:
8
px
;
}
.
frequency-options
ul
{
grid-template-columns
:
1
fr
1
fr
;
}
.
amount-options
ul
{
grid-template-columns
:
1
fr
1
fr
1
fr
1
fr
;
}
.
frequency-options
ul
li
,
.
amount-options
ul
li
{
padding
:
0
;
}
/* --- Subheaders --- */
#
radiobuttons-table-header
,
#
paymenttype-table-header
{
display
:
block
;
margin-bottom
:
6
px
;
text-align
:
center
;
font-weight
:
bold
;
}
/* --- Commmon button styles --- */
.
frequency-options
input
[
type
=
"radio"
],
.
amount-options
input
[
type
=
"radio"
]
{
position
:
absolute
;
width
:
1
px
;
height
:
1
px
;
margin
:
-1
px
;
padding
:
0
;
overflow
:
hidden
;
border
:
0
;
clip
:
rect
(
0
0
0
0
);
}
.
frb-btn
,
.
payment-method-button
{
display
:
flex
;
justify-content
:
center
;
align-content
:
center
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
50
px
;
padding
:
0
4
px
;
border-radius
:
2
px
;
font-family
:
inherit
;
font-weight
:
500
;
cursor
:
pointer
;
transition
:
background-color
100
ms
,
color
100
ms
,
border-color
100
ms
,
box-shadow
100
ms
;
background-color
:
#f8f9fa
;
color
:
#222
;
border
:
1
px
solid
#a2a9b1
;
}
.
frb-btn
:
hover
{
background-color
:
#fff
;
color
:
#444
;
border-color
:
#a2a9b1
;
}
.
frb-btn
:
active
{
background-color
:
#c8ccd1
;
color
:
#000
;
border-color
:
#72777d
;
box-shadow
:
none
;
}
input
[
type
=
"radio"
]
:
checked
+
.
frb-btn
{
background-color
:
#2a4b8d
;
color
:
#fff
;
border-color
:
#2a4b8d
;
}
.
frb-btn
:
focus
,
.
payment-method-button
:
focus
{
outline
:
0
;
border-color
:
#36c
;
box-shadow
:
inset
0
0
0
1
px
#36c
;
}
input
[
type
=
"radio"
]
:
focus
+
.
frb-btn
,
input
[
type
=
"radio"
]
:
checked
+
.
frb-btn
:
focus
{
box-shadow
:
inset
0
0
0
1
px
#36c
,
inset
0
0
0
2
px
#fff
;
}
.
payment-method-button
{
color
:
#36c
;
}
.
payment-method-button
:
hover
{
background-color
:
#fff
;
border-color
:
#447ff5
;
}
.
payment-method-button
:
active
{
background-color
:
#eff3fa
;
color
:
#2a4b8d
;
border-color
:
#2a4b8d
;
box-shadow
:
none
;
}
/* --- Donation Amounts --- */
.
amount-options
.
frb-btn
{
height
:
60
px
;
font-size
:
15
px
;
line-height
:
1.2
;
text-align
:
center
;
}
/* Smaller font size for countries with v long amounts */
.
country-CO
.
amount-options
.
frb-btn
,
.
country-CR
.
amount-options
.
frb-btn
,
.
country-KR
.
amount-options
.
frb-btn
,
.
country-PY
.
amount-options
.
frb-btn
,
.
country-VN
.
amount-options
.
frb-btn
{
font-size
:
13
px
;
}
.
input_amount_other
.
frb-btn
span
{
display
:
block
;
font-size
:
12
px
;
line-height
:
1
;
margin-bottom
:
2
px
;
white-space
:
normal
;
text-align
:
center
;
}
.
input_amount_other
input
{
display
:
block
;
width
:
100
%
;
border
:
1
px
solid
#a2a9b1
;
color
:
#222
;
padding
:
2
px
;
border-radius
:
2
px
;
direction
:
ltr
;
text-align
:
center
;
font-family
:
inherit
;
font-size
:
16
px
;
/* must be >=16px or mobile Safari zooms in when selected */
-webkit-
appearance
:
none
;
-moz-
appearance
:
none
;
appearance
:
none
;
margin
:
0
4
px
;
}
/* --- Opt-in and PTF input styles --- */
.
lp-radio-wrapper
,
.
lp-checkbox-wrapper
{
display
:
table
;
}
.
lp-radio
,
.
lp-checkbox
{
display
:
table-cell
;
vertical-align
:
top
;
margin
:
7
px
8
px
8
px
2
px
;
cursor
:
pointer
;
}
body
.
rtl
.
lp-radio
,
body
.
rtl
.
lp-checkbox
{
margin
:
7
px
2
px
8
px
8
px
;
}
.
lp-radio-label
,
.
lp-checkbox-label
{
display
:
table-cell
;
vertical-align
:
top
;
padding
:
4
px
0
;
white-space
:
normal
;
font-size
:
14
px
;
line-height
:
18
px
;
font-weight
:
normal
;
cursor
:
pointer
;
}
.
lp-radio-label
:
hover
,
.
lp-radio
:
focus
+
.
lp-radio-label
,
.
lp-radio
:
hover
+
.
lp-radio-label
,
.
lp-checkbox-label
:
hover
,
.
lp-checkbox
:
focus
+
.
lp-checkbox-label
,
.
lp-checkbox
:
hover
+
.
lp-checkbox-label
{
color
:
#36c
;
text-decoration
:
none
;
}
/* --- Opt-in --- */
.
optin-options
legend
{
padding
:
0
;
font-size
:
inherit
;
font-weight
:
bold
;
}
.
optin-options
ul
{
list-style
:
none
;
margin
:
0
;
}
.
optin-options
li
{
display
:
table
;
}
.
optin-smallprint
{
clear
:
both
;
font-size
:
12
px
;
line-height
:
14
px
;
margin-top
:
8
px
;
}
.
optin-no-prompt
{
display
:
none
;
margin
:
0
;
padding
:
6
px
;
border
:
2
px
solid
#900
;
border-radius
:
2
px
;
font-size
:
14
px
;
line-height
:
18
px
;
font-weight
:
normal
;
}
.
optin-no-prompt
.
is-positive
{
border-color
:
#14866d
;
font-weight
:
bold
;
}
.
optin-no-prompt__yes
{
display
:
none
;
}
.
optin-no-prompt__no
{
display
:
block
;
}
.
optin-no-prompt
.
is-positive
.
optin-no-prompt__yes
{
display
:
block
;
}
.
optin-no-prompt
.
is-positive
.
optin-no-prompt__no
{
display
:
none
;
}
/* --- PTF --- */
.
ptf
{
display
:
none
;
}
/* --- Payment method buttons --- */
.
payment-method-div
{
padding
:
4
px
0
;
}
/* Hide extra empty <p> tags between buttons */
.
payment-method-div
~
p
{
display
:
none
;
}
.
payment-method-button
{
margin
:
0
;
width
:
100
%
;
font-size
:
16
px
;
-webkit-
appearance
:
none
;
-moz-
appearance
:
none
;
appearance
:
none
;
overflow
:
hidden
;
}
/* --- Infobox ("Where your donation goes") --- */
#
infobox-wrapper
{
font-size
:
13
px
;
line-height
:
1.4
;
color
:
#54595d
;
font-weight
:
normal
;
margin-top
:
8
px
}
#
infobox-wrapper
.
mw-heading2
{
font-size
:
16
px
;
font-weight
:
bold
;
color
:
inherit
;
border
:
0
;
margin-bottom
:
8
px
;
}
/* --- Privacy and links --- */
#
donate-footer
{
width
:
100
%
;
text-align
:
center
;
line-height
:
1.4
;
padding
:
24
px
15
%
8
px
;
}
#
donate-footer
>
div
{
margin-bottom
:
16
px
;
}
.
donate-smallprint
,
#
donor-policy-block
{
font-size
:
12
px
;
}
.
form-info-links
,
.
form-info-links
ul
{
list-style
:
none
;
margin
:
0
;
text-align
:
center
;
}
.
form-info-links
li
{
display
:
inline-block
;
}
.
form-info-links
a
.
external
{
padding
:
14
px
!important
;
}
/* --- Footer --- */
.
mw-footer
{
display
:
none
;
}
.
payment-method-button
svg
{
margin
:
0
4
px
;
}
/* Credit card logos.
* Classes are added by https://donate.wikimedia.org/wiki/MediaWiki:DonationForm.js ---
*/
.
paymentmethod-cc
svg
{
display
:
none
;
height
:
26
px
;
border
:
1
px
solid
#c8ccd1
;
border-radius
:
4
px
;
}
.
cctypes-vmad
,
.
cctypes-vmaj
,
.
cctypes-vmj
,
.
cctypes-vma
,
.
cctypes-vm
,
.
cctypes-CBvma
,
.
cctypes-vmar
{
font-size
:
0
;
/* Remove spacing between icons */
}
.
cctypes-vmad
.
cc-logo-visa
,
.
cctypes-vmad
.
cc-logo-mastercard
,
.
cctypes-vmad
.
cc-logo-amex
,
.
cctypes-vmad
.
cc-logo-discover
,
.
cctypes-vmaj
.
cc-logo-visa
,
.
cctypes-vmaj
.
cc-logo-mastercard
,
.
cctypes-vmaj
.
cc-logo-amex
,
.
cctypes-vmaj
.
cc-logo-jcb
,
.
cctypes-vmj
.
cc-logo-visa
,
.
cctypes-vmj
.
cc-logo-mastercard
,
.
cctypes-vmj
.
cc-logo-jcb
,
.
cctypes-vma
.
cc-logo-visa
,
.
cctypes-vma
.
cc-logo-mastercard
,
.
cctypes-vma
.
cc-logo-amex
,
.
cctypes-vm
.
cc-logo-visa
,
.
cctypes-vm
.
cc-logo-mastercard
,
.
cctypes-CBvma
.
cc-logo-CB
,
.
cctypes-CBvma
.
cc-logo-visa
,
.
cctypes-CBvma
.
cc-logo-mastercard
,
.
cctypes-CBvma
.
cc-logo-amex
,
.
cctypes-vmar
.
cc-logo-visa
,
.
cctypes-vmar
.
cc-logo-mastercard
,
.
cctypes-vmar
.
cc-logo-amex
,
.
cctypes-vmar
.
cc-logo-rupay
{
display
:
inline-block
!important
;
}
.
paymentmethod-cc
.
cc-logo-rupay
{
border
:
0
;
}
/* Logos - WP on top, WMF horizontal below */
#
p-logo
a
{
/* Need explicit height for backgrounds for IE */
background
:
top
30
%
center
/
160
px
24
px
url
(
https://donate.wikimedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg
),
top
70
%
center
/
160
px
37
px
url
(
https://upload.wikimedia.org/wikipedia/donate/6/60/Wmf_logo_horiz_K.svg
);
background-repeat
:
no-repeat
;
margin-left
:
8
px
;
}
/* Mobile styles */
@
media
(
max-width
:
981px
)
{
/* Text & Logo layout */
#
content
{
margin
:
0
;
padding
:
140
px
24
px
24
px
24
px
;
}
#
mw-panel
,
#
p-logo
,
#
p-logo
a
{
width
:
100
%
!important
;
height
:
140
px
;
margin
:
0
;
}
#
p-logo
a
{
margin-left
:
0
;
}
/* Hide appeal */
#
appeal-wrapper
{
display
:
none
;
}
#
form-wrapper
{
padding
:
16
px
;
}
/* Smallprint and links */
#
donate-footer
{
margin
:
24
px
0
0
0
;
padding
:
0
;
}
/* Footer */
div
#
footer
{
margin
:
0
;
}
}
@
media
(
max-width
:
721px
)
{
/* Stack appeal and form */
#
appeal-wrapper
{
flex-basis
:
100
%
;
padding
:
0
;
}
}
@
media
(
max-width
:
501px
)
{
/* Appeal same width as form */
#
appeal-wrapper
{
max-width
:
380
px
;
padding
:
0
;
}
#
content
{
padding
:
140
px
8
px
8
px
8
px
;
}
}
#
country-confirm
{
text-align
:
center
;
margin-top
:
-12
px
;
padding
:
4
px
0
;
border-bottom
:
1
px
solid
#a2a9b1
;
margin-bottom
:
8
px
;
font-size
:
90
%
;
}
@
media
(
min-width
:
980px
)
{
#
country-confirm
{
margin-top
:
-18
px
;
}
}
/* === end of Template:Styles/Default.css === */