|
|
| Line 42: |
Line 42: |
|
|
|
|
|
/* OOUI focus styles are applied to buttons */ |
|
/* OOUI focus styles are applied to buttons */ |
|
.sp-page .sp-donate-btn:focus, |
|
.sp-page .sp-btn:focus { |
| ⚫ |
.sp-page . wtg-bitcoin-btn:focus { |
|
|
outline: 0; |
|
outline: 0; |
|
} |
|
} |
| Line 328: |
Line 327: |
|
} |
|
} |
|
|
|
|
|
|
/* A standard blue button (used e.g. for bitcoin on Ways to Give) */ |
| ⚫ |
|
|
|
.sp-page .wtg-bitcoin-btn { |
|
.sp-page .sp-btn { |
|
font-size: 16px; |
|
font-size: 1rem; |
|
padding: 13px 18px 11px !important; |
|
padding: 13px 18px 11px !important; |
|
color: #fff !important; |
|
color: #fff !important; |
|
border-style: solid; |
|
border: 0; |
| ⚫ |
|
|
|
border-radius: 2px; |
|
border-radius: 2px; |
|
transition: all 300ms ease; |
|
transition: all 300ms ease; |
|
font-weight: bold; |
|
font-weight: bold; |
|
line-height: 1.25; /*20px @16px*/ |
|
line-height: 1.25; /*20px @16px*/ |
|
⚫ |
|
|
⚫ |
|
|
⚫ |
|
|
⚫ |
|
|
⚫ |
|
|
⚫ |
|
|
⚫ |
.sp-page .sp-btn: active { |
|
|
box-shadow: none; |
|
|
background: #2a4b8d; |
|
⚫ |
|
|
⚫ |
|
|
⚫ |
|
|
⚫ |
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; |
|
} |
|
} |
|
|
|
|
|
|
/* Donate Now button */ |
| ⚫ |
.sp-page .sp-donate-btn { |
|
|
⚫ |
.sp-page .sp-donate -now-btn { |
|
background-color: #f51a71; |
|
background-color: #f51a71; |
|
text-transform: uppercase; |
|
text-transform: uppercase; |
|
letter-spacing: 0.03125rem; /*0.5px*/ |
|
letter-spacing: 0.03125rem; /*0.5px*/ |
|
} |
|
} |
|
⚫ |
.sp-page .sp-donate -now-btn :hover, |
|
|
|
|
.sp-page .wtg-bitcoin-btn { |
|
.sp-page .sp-donate-now-btn:active { |
| ⚫ |
|
|
| ⚫ |
|
|
|
|
|
| ⚫ |
.sp-page .sp -donate-btn:hover , |
|
|
.sp-page .sp-donate-btn:focus, |
|
|
.sp-page .wtg-bitcoin-btn:hover, |
|
|
.sp-page .wtg-bitcoin-btn:focus { |
|
| ⚫ |
|
|
| ⚫ |
|
|
|
|
|
|
.sp-page .sp-donate-btn:hover, |
|
| ⚫ |
.sp-page .sp -donate-btn: focus { |
|
|
background-color: #b71da0; |
|
background-color: #b71da0; |
| ⚫ |
|
|
|
|
|
|
.sp-page .sp-donate-btn:focus { |
|
|
border-color: #f51a71; |
|
|
box-shadow: inset 0 0 0 1px #f51a71, inset 0 0 0 2px #fff; |
|
|
} |
|
|
|
|
|
.sp-page .wtg-bitcoin-btn:hover |
|
|
.sp-page .wtg-bitcoin-btn:focus { |
|
| ⚫ |
background -color: #447ff5; |
|
|
} |
|
|
|
|
|
.sp-page .wtg-bitcoin-btn:focus { |
|
|
border-color: #36c; |
|
| ⚫ |
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; |
|
|
} |
|
} |
|
|
|
|
| Line 558: |
Line 543: |
|
</div> |
|
</div> |
|
<div class="sp-nav-container"> |
|
<div class="sp-nav-container"> |
|
<a class="sp-donate-btn" href="https://donate.wikimedia.org/"></html>{{MediaWiki:donate_interface-donate-now/{{Pagelang}}}}<html></a> |
|
<a class="sp-btn sp-donate-now-btn" href="https://donate.wikimedia.org/"></html>{{MediaWiki:donate_interface-donate-now/{{Pagelang}}}}<html></a> |
|
<!-- |
|
<!-- |
|
<nav class="sp-main-nav"> |
|
<nav class="sp-main-nav"> |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu gravida augue, id blandit tellus. Internal link, ultricies lectus eu, facilisis libero. In in blandit purus, eget fermentum lectus. Nunc risus orci, porta nec tristique vitae, ornare et ipsum. Proin rhoncus vestibulum elementum. Maecenas leo sem, fermentum et odio ac, efficitur ullamcorper ipsum. External link. External interwiki link.
Heading
Nulla est risus, vehicula sit amet lectus convallis, tristique lobortis nisl. Nulla vel hendrerit orci, in vehicula justo. Integer condimentum elit bibendum, ultricies metus ut, sagittis odio. Nunc sagittis lacus in tellus placerat, nec viverra erat aliquet. Proin vitae ipsum vestibulum augue pulvinar commodo et nec eros.
- Lorem ipsum
- Dolor sit amet
- Coffee
Sed nisi risus, ultrices ac nisl vel, elementum viverra quam. In hac habitasse platea dictumst. Praesent eu porttitor massa donate@wikimedia.org.
Another heading
In blandit quis ipsum id euismod. Curabitur ut nisi sit amet orci hendrerit finibus ac nec purus. Etiam dignissim felis vel diam elementum vulputate. Pellentesque varius odio ut neque vulputate, id laoreet eros feugiat. Integer commodo interdum tortor eu varius. Nam felis odio, rutrum in neque eu, faucibus vehicula odio. Vivamus non tortor fringilla, congue urna et, fermentum nulla. Suspendisse potenti. Praesent quis nulla libero. In condimentum nulla varius pellentesque consequat. Aenean fringilla facilisis ligula, nec malesuada lacus euismod in.
Yet another heading
Quisque mattis luctus pulvinar. Quisque vel felis sed leo finibus convallis. Nam non felis venenatis, faucibus quam id, ultrices dolor. Etiam posuere tortor ac euismod faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae dignissim nulla, at porttitor nibh. Ut quis molestie arcu.