Template:FrDS Styles: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
RLopez-WMF (talk | contribs) Created page with "<html> <style> →core.css: * { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; color: #202122; } strong{ font-family: inherit; } h1, .text--xlarge{ font-size: 32px; font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; font-weight: 600; line-height: 40px; } h2, .text-large{ font-size: 24px; font-weight: 600; line-he..." |
RLopez-WMF (talk | contribs) No edit summary |
||
(51 intermediate revisions by 2 users not shown) | |||
Line 7: | Line 7: | ||
color: #202122; |
color: #202122; |
||
} |
} |
||
/* fix video player controls */ |
|||
.video-js * { |
|||
color: inherit; |
|||
} |
|||
strong{ |
strong{ |
||
font-family: inherit; |
font-family: inherit; |
||
} |
|||
h1,h2,h3,h4,h5,h6,p,ul,ol{ |
|||
border: none; |
|||
margin: 0 !important; |
|||
} |
} |
||
h1, |
h1, |
||
.text--xlarge{ |
.text--xlarge{ |
||
font-size: 32px; |
font-size: 32px !important; |
||
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; |
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif !important; |
||
font-weight: 600; |
font-weight: 600 !important; |
||
line-height: 40px; |
line-height: 40px !important; |
||
padding:0 !important; |
|||
} |
} |
||
h2, |
h2, |
||
.text-large{ |
.text-large{ |
||
font-size: 24px; |
font-size: 24px !important; |
||
font-weight: 600; |
font-weight: 600 !important; |
||
line-height: 32px; |
line-height: 32px !important; |
||
padding:0 !important; |
|||
} |
} |
||
h2 > span{ |
h2 > span{ |
||
font-weight: 400; |
font-weight: 400 !important; |
||
} |
} |
||
h3, |
h3, |
||
.text--medium{ |
.text--medium{ |
||
font-size: 20px; |
font-size: 20px !important; |
||
font-weight: 600; |
font-weight: 600 !important; |
||
line-height: 28px; |
line-height: 28px !important; |
||
padding:0 !important; |
|||
} |
} |
||
h4 { |
h4 { |
||
font-weight: 600; |
font-weight: 600 !important; |
||
padding:0 !important; |
|||
} |
} |
||
h4, |
h4, |
||
Line 40: | Line 54: | ||
ol, |
ol, |
||
.text--default{ |
.text--default{ |
||
font-size: 16px; |
font-size: 16px !important; |
||
line-height: 24px; |
line-height: 24px !important; |
||
} |
} |
||
p > strong{ |
p > strong{ |
||
font-weight: 600; |
font-weight: 600 !important; |
||
} |
} |
||
ul,ol{ |
ul,ol{ |
||
Line 50: | Line 64: | ||
} |
} |
||
.text--small{ |
.text--small{ |
||
font-size: 14px; |
font-size: 14px !important; |
||
line-height: 22px; |
line-height: 22px !important; |
||
} |
} |
||
a { |
a { |
||
font-size: inherit; |
font-size: inherit !important; |
||
text-decoration: underline; |
text-decoration: underline; |
||
color: inherit !important; |
|||
} |
} |
||
th { |
th { |
||
font-size: 12px; |
font-size: 12px !important; |
||
line-height: 20px; |
line-height: 20px !important; |
||
font-weight: 600; |
font-weight: 600 !important; |
||
} |
} |
||
td { |
td { |
||
font-size: 16px; |
font-size: 16px !important; |
||
line-height: 24px; |
line-height: 24px !important; |
||
} |
} |
||
@media only screen and (min-width:960px) { |
@media only screen and (min-width:960px) { |
||
h1, |
h1, |
||
.text--xlarge{ |
.text--xlarge{ |
||
font-size: 40px; |
font-size: 40px !important; |
||
line-height: 48px; |
line-height: 48px !important; |
||
} |
} |
||
h2, |
h2, |
||
.text--large{ |
.text--large{ |
||
font-size: 32px; |
font-size: 32px !important; |
||
line-height: 40px; |
line-height: 40px !important; |
||
} |
|||
.text--medium-large { |
|||
font-size: 28px !important; |
|||
line-height: 36px !important; |
|||
} |
} |
||
h3, |
h3, |
||
.text--medium{ |
.text--medium{ |
||
font-size: 24px; |
font-size: 24px !important; |
||
line-height: 32px; |
line-height: 32px !important; |
||
} |
} |
||
h4, |
h4, |
||
Line 87: | Line 107: | ||
ol, |
ol, |
||
.text--default{ |
.text--default{ |
||
font-size: 20px; |
font-size: 20px !important; |
||
line-height: 28px; |
line-height: 28px !important; |
||
} |
} |
||
.text--small{ |
.text--small{ |
||
font-size: 16px; |
font-size: 16px !important; |
||
line-height: 24px; |
line-height: 24px !important; |
||
} |
} |
||
th { |
th { |
||
font-size: 16px; |
font-size: 16px !important; |
||
line-height: 24px; |
line-height: 24px !important; |
||
font-weight: 600; |
font-weight: 600 !important; |
||
} |
} |
||
td { |
td { |
||
font-size: 20px; |
font-size: 20px !important; |
||
line-height: 28px; |
line-height: 28px !important; |
||
} |
} |
||
} |
} |
||
Line 122: | Line 142: | ||
.button.outline{ |
.button.outline{ |
||
border: 1px solid #202122; |
border: 1px solid #202122; |
||
color: #202122; |
|||
background-color: transparent; |
|||
} |
} |
||
.button img{ |
.button img{ |
||
Line 128: | Line 150: | ||
.link{ |
.link{ |
||
font-weight: 600; |
font-weight: 600; |
||
color: inherit !important; |
|||
} |
} |
||
.link--bolder { |
.link--bolder { |
||
Line 141: | Line 164: | ||
.links-list { |
.links-list { |
||
padding: 0; |
padding: 0 !important; |
||
list-style: none; |
list-style: none !important; |
||
display: flex; |
display: flex; |
||
flex-direction: column; |
flex-direction: column; |
||
Line 151: | Line 174: | ||
/* Backgrounds */ |
/* Backgrounds */ |
||
.bg--white{ |
.bg--white{ |
||
background-color: #FFFFFF; |
background-color: #FFFFFF !important; |
||
} |
} |
||
.bg--green{ |
.bg--green{ |
||
background-color: #308557; |
background-color: #308557 !important; |
||
} |
} |
||
.bg--golden{ |
.bg--golden{ |
||
background-color: #AC8600; |
background-color: #AC8600 !important; |
||
} |
} |
||
.bg--golden-light{ |
.bg--golden-light{ |
||
background-color: #FFFDF8; |
background-color: #FFFDF8 !important; |
||
} |
} |
||
.bg--golden-muted{ |
.bg--golden-muted{ |
||
Line 170: | Line 193: | ||
/* Colors */ |
/* Colors */ |
||
.color--green{ |
.color--green{ |
||
color: #308557; |
color: #308557 !important; |
||
} |
} |
||
.color--golden{ |
.color--golden{ |
||
color: #AC8600; |
color: #AC8600 !important; |
||
} |
} |
||
.color--purple{ |
.color--purple{ |
||
color: #2C245B; |
color: #2C245B !important; |
||
} |
} |
||
.color--violet{ |
.color--violet{ |
||
color: #5748B5; |
color: #5748B5 !important; |
||
} |
} |
||
/* Borders */ |
/* Borders */ |
||
.border--green{ |
.border--green{ |
||
border-color: #308557; |
border-color: #308557 !important; |
||
} |
} |
||
/* layout.css */ |
/* layout.css */ |
||
.header { |
.header { |
||
display: flex; |
display: flex; |
||
Line 206: | Line 228: | ||
gap: 40px; |
gap: 40px; |
||
padding: 40px 20px; |
padding: 40px 20px; |
||
} |
|||
.block--full-width{ |
|||
padding: 0; |
|||
} |
|||
.block--bleed-y{ |
|||
padding-left:0; |
|||
padding-right: 0; |
|||
} |
} |
||
.block__wrapper { |
.block__wrapper { |
||
Line 217: | Line 246: | ||
.block__wrapper--gap-small { |
.block__wrapper--gap-small { |
||
gap: 20px; |
gap: 20px; |
||
} |
|||
.block__wrapper--gap-tiny { |
|||
gap: 10px; |
|||
} |
} |
||
.block__wrapper--bleed-y { |
.block__wrapper--bleed-y { |
||
Line 272: | Line 304: | ||
.block__wrapper--has-columns { |
.block__wrapper--has-columns { |
||
flex-direction: row; |
flex-direction: row; |
||
align-items:center; |
|||
} |
|||
.block--full-width{ |
|||
padding: 40px 20px; |
|||
} |
} |
||
} |
} |
||
Line 280: | Line 316: | ||
flex-direction: column; |
flex-direction: column; |
||
gap: 16px; |
gap: 16px; |
||
list-style: none; |
list-style: none !important; |
||
padding: 0; |
padding: 0 !important; |
||
} |
|||
.navigation--secondary a{ |
|||
color:inherit !Important; |
|||
} |
} |
||
@media only screen and (min-width:960px){ |
@media only screen and (min-width:960px){ |
||
Line 304: | Line 343: | ||
align-self: stretch; |
align-self: stretch; |
||
} |
} |
||
.hero__column-media > pre{ |
|||
padding: 0; |
|||
border-radius: 20px; |
|||
font-size: 0; |
|||
} |
|||
.hero__column-media > pre > span{ |
|||
display: block; |
|||
} |
|||
.mw-tmh-label{ |
|||
font-size: 12px !important; |
|||
color: #FFFFFF; |
|||
background-color: rgba(0,0,0,0.8); |
|||
} |
|||
.mw-tmh-label span{ |
|||
color: #FFFFFF; |
|||
} |
|||
@media only screen and (min-width:960px) { |
@media only screen and (min-width:960px) { |
||
.hero__wrapper{ |
.hero__wrapper{ |
||
Line 359: | Line 416: | ||
.cards-grid__card:hover{ |
.cards-grid__card:hover{ |
||
background-color: #F9F7FF; |
background-color: #F9F7FF; |
||
text-decoration:none !important; |
|||
} |
} |
||
.cards-grid__card:focus{ |
|||
text-decoration:none !important; |
|||
} |
|||
.cards-grid__card-image{ |
.cards-grid__card-image{ |
||
width: 100px; |
width: 100px; |
||
Line 394: | Line 456: | ||
gap: 16px; |
gap: 16px; |
||
list-style: none; |
list-style: none; |
||
padding-left: 42px; |
padding-left: 42px !important; |
||
} |
} |
||
.todo li { |
.todo li { |
||
Line 425: | Line 487: | ||
gap: 16px; |
gap: 16px; |
||
list-style: none; |
list-style: none; |
||
padding-left: 42px; |
padding-left: 42px !important; |
||
counter-reset: item; |
counter-reset: item; |
||
} |
} |
||
Line 437: | Line 499: | ||
left: -42px; |
left: -42px; |
||
top: 0; |
top: 0; |
||
width: |
width: 28px; |
||
height: 24px; |
height: 24px; |
||
border: 1px solid #CAA10B; |
border: 1px solid #CAA10B; |
||
Line 444: | Line 506: | ||
align-items: center; |
align-items: center; |
||
justify-content: space-around; |
justify-content: space-around; |
||
font-size: |
font-size: 20px; |
||
line-height: |
line-height: 20px; |
||
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; |
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; |
||
padding-bottom:4px; |
|||
} |
|||
.bg--purple-light .steps li::before{ |
|||
border: 1px solid #D5D1EC !important; |
|||
background-color: #FFFFFF; |
|||
} |
} |
||
Line 526: | Line 593: | ||
flex-direction: column; |
flex-direction: column; |
||
gap: 8px; |
gap: 8px; |
||
} |
|||
/* blocks/card-large.css */ |
|||
.card-large{ |
|||
display: flex; |
|||
padding: 0; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 16px; |
|||
align-self: stretch; |
|||
border-radius: 16px; |
|||
border: 1px solid #FBEEBF; |
|||
background-color: #FFFDF8; |
|||
} |
|||
.block--full-width .card-large{ |
|||
border-radius: 0; |
|||
} |
|||
.card-large.bg--purple-light{ |
|||
border: 1px solid #D5D1EC !important; |
|||
background-color: #F9F7FF !important; |
|||
} |
|||
.card-large .top{ |
|||
padding: 40px 20px 20px 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card-large .top ol{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card-large .bottom{ |
|||
padding: 20px 20px 40px 20px; |
|||
background-color: #FDF6DF; |
|||
} |
|||
.card-large .single{ |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
@media only screen and (min-width:960px) { |
|||
.card-large .top{ |
|||
padding: 80px 80px 40px 80px; |
|||
} |
|||
.card-large .bottom{ |
|||
padding: 40px 80px 80px 80px; |
|||
} |
|||
.card-large .single { |
|||
padding: 60px; |
|||
} |
|||
.block--full-width .card-large{ |
|||
border-radius: 16px; |
|||
} |
|||
} |
|||
/* blocks/card-testimonial.css */ |
|||
.cards, |
|||
.card-donor-love{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card{ |
|||
display: flex; |
|||
padding: 20px; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 16px; |
|||
align-self: stretch; |
|||
border-radius: 16px; |
|||
border: 2px solid #FBEEBF; |
|||
} |
|||
.card .author{ |
|||
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; |
|||
} |
|||
.card-donor-love .card{ |
|||
border: 1px solid #FBEEBF; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card-donor-love .card::before{ |
|||
content: ''; |
|||
width: 32px; |
|||
height: 32px; |
|||
background-image: url('https://upload.wikimedia.org/wikipedia/donate/a/a2/Icon-quote-yellow.png'); |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
background-position: top center; |
|||
flex: none; |
|||
} |
|||
.card-donor-love .card .author{ |
|||
padding-top: 16px; |
|||
display: block; |
|||
} |
|||
@media only screen and (min-width:960px) { |
|||
.cards{ |
|||
flex-direction: row; |
|||
align-items: flex-start; |
|||
align-self: stretch; |
|||
} |
|||
.cards p{ |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
} |
|||
.card-donor-love .card{ |
|||
flex-direction: row; |
|||
gap: 30px; |
|||
} |
|||
} |
|||
/* block/cta.css */ |
|||
.cta { |
|||
text-align: center; |
|||
} |
|||
@media only screen and (min-width:960px) { |
|||
.cta{ |
|||
padding: 80px 20px 0 20px; |
|||
} |
|||
.cta .image img{ |
|||
max-width: 960px; |
|||
} |
|||
} |
|||
/* block/card-video.css */ |
|||
.card-video-wrapper{ |
|||
flex: none; |
|||
} |
|||
.card-video { |
|||
display: flex; |
|||
max-width: 332px; |
|||
padding: 20px; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 16px; |
|||
border-radius: 16px; |
|||
border: 1px solid #CCCCCC; |
|||
background: #F7F8F0; |
|||
} |
|||
.card-video pre{ |
|||
padding:0 !important; |
|||
background-color:transparent !important; |
|||
border: none !important; |
|||
line-height:normal !important; |
|||
display:flex !important; |
|||
flex-direction:column; |
|||
gap:16px; |
|||
align-items:flex-start; |
|||
overflow-x:clip; |
|||
} |
|||
.card-video pre > span{ |
|||
display: block !important; |
|||
} |
|||
.card-video img { |
|||
max-width: 100%; |
|||
} |
|||
.card-video .caption { |
|||
color: #202122; |
|||
font-size: 16px; |
|||
font-weight: 590; |
|||
line-height: 24px; |
|||
text-decoration: none; |
|||
display:block; |
|||
} |
|||
/* Buttons */ |
|||
.sp-btn { |
|||
border-radius: 2px; |
|||
font-weight: 700; |
|||
padding: 0.4rem 0.8rem; |
|||
font-size: 15px; |
|||
height: 34px; |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
border: 1px solid; |
|||
border-color: #a2a9b1; |
|||
background: #f8f9fa; |
|||
color: #202122; |
|||
cursor: pointer; |
|||
gap: 6px; |
|||
} |
|||
.sp-btn:focus { |
|||
color: #3a25ff; |
|||
border-color: currentColor; |
|||
} |
|||
.language-switcher__button:hover { |
|||
color: #3a25ff; |
|||
border-color: currentColor; |
|||
} |
|||
.btn-label-a11y { |
|||
display: block; |
|||
font-size: 0; |
|||
height: 1px; |
|||
overflow: hidden; |
|||
} |
|||
.dropdown-backdrop { |
|||
display: block; |
|||
position: fixed; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #000; |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
transition: .3s opacity; |
|||
z-index: 2; |
|||
} |
|||
body[data-dropdown-open=true] .dropdown-backdrop { |
|||
opacity: .6; |
|||
pointer-events: auto; |
|||
} |
|||
.language-switcher { |
|||
text-align: left; |
|||
position: relative; |
|||
} |
|||
.language-switcher__icon { |
|||
height: 1.25rem; |
|||
width: 1.25rem; |
|||
} |
|||
.language-switcher__expand { |
|||
height: 0.875rem; |
|||
width: 0.875rem; |
|||
} |
|||
.language-switcher__label { |
|||
text-transform: uppercase; |
|||
} |
|||
.language-switcher__content { |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
flex-direction: column; |
|||
padding: 1.875rem 0.75rem; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 62px; |
|||
width: 100%; |
|||
overflow: auto; |
|||
max-height: 80vh; |
|||
} |
|||
@media (min-width: 768px) { |
|||
.language-switcher__content { |
|||
border: 1px solid #3a25ff; |
|||
max-width: 100vw; |
|||
padding: 0.75rem; |
|||
position: absolute; |
|||
right: 0; |
|||
top: calc(100% - 1px); |
|||
width: 200px; |
|||
} |
|||
} |
|||
@media (min-width: 1060px) { |
|||
.language-switcher__content { |
|||
left: 0; |
|||
right: unset; |
|||
} |
|||
} |
|||
.language-switcher__content ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.language-switcher__content ul li { |
|||
font-size: .875rem; |
|||
font-weight: 700; |
|||
line-height: 175%; |
|||
list-style: none; |
|||
margin: 0; |
|||
margin-bottom: 1.1875rem; |
|||
} |
|||
@media (min-width: 768px) { |
|||
.language-switcher__content ul li { |
|||
margin-bottom: .875rem; |
|||
} |
|||
} |
|||
.language-switcher__content a { |
|||
color: #000; |
|||
display: block; |
|||
padding-left: 0.5rem; |
|||
padding-right: 0.5rem; |
|||
padding-top: 0.25rem; |
|||
transition: background-color 0.3s; |
|||
} |
|||
.language-switcher__content a:hover { |
|||
background-color: #eeeaff; |
|||
text-decoration: none; |
|||
} |
|||
.language-switcher__content a.selflink { |
|||
color: #3a25ff; |
|||
} |
|||
.language-switcher .language-name { |
|||
display: inline-block; |
|||
} |
|||
.language-switcher .language-name::first-letter { |
|||
text-transform: uppercase; |
|||
} |
|||
.language-switcher .language-name::after { |
|||
border-bottom: 3px solid transparent; |
|||
content: ""; |
|||
display: block; |
|||
} |
|||
.language-switcher a.selflink .language-name::after { |
|||
border-color: #3a25ff; |
|||
} |
|||
.scroll-shadow { |
|||
box-shadow: inset 0 -25px 50px -35px rgba(0, 0, 0, 1); |
|||
} |
|||
/* wiki-block/toggle.css */ |
|||
.mw-collapsible-toggle { |
|||
border-radius: 8px; |
|||
border: 1px solid #CCCCCC; |
|||
background: #F7F8F0; |
|||
display: flex; |
|||
padding: 20px; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 24px; |
|||
} |
|||
.mw-collapsible-toggle::after{ |
|||
content:" "; |
|||
width: 24px; |
|||
height: 24px; |
|||
background-image: url("https://upload.wikimedia.org/wikipedia/donate/e/e9/Keyboard_arrow_down.png"); |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: cover; |
|||
} |
|||
.mw-collapsible-toggle.mw-collapsible-toggle-expanded::after{ |
|||
transform: rotate(180deg); |
|||
} |
|||
.mw-collapsible-content{ |
|||
border: 1px solid #CCCCCC; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
flex-direction:column; |
|||
border-radius: 8px; |
|||
} |
|||
.mw-collapsible-content > div { |
|||
display: flex; |
|||
padding: 20px; |
|||
align-items: flex-start; |
|||
gap: 8px; |
|||
align-self: stretch; |
|||
flex-direction:column; |
|||
border-bottom: 1px solid #CCCCCC; |
|||
} |
|||
.mw-collapsible-content > div:last-of-type { |
|||
border-bottom: none !important; |
|||
} |
|||
@media only screen and (min-width:960px) { |
|||
.mw-collapsible-toggle, |
|||
.mw-collapsible-content > div { |
|||
padding: 20px 30px; |
|||
} |
|||
} |
} |
||
</style> |
</style> |
Latest revision as of 03:06, 15 October 2024