Template:FrDS Styles: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
RLopez-WMF (talk | contribs) No edit summary |
RLopez-WMF (talk | contribs) No edit summary |
||
(16 intermediate revisions by the same user not shown) | |||
Line 10: | Line 10: | ||
font-family: inherit; |
font-family: inherit; |
||
} |
} |
||
h1,h2,h3,h4,h5,h6{ |
h1,h2,h3,h4,h5,h6,p,ul,ol{ |
||
border: none; |
border: none; |
||
margin: 0 !important; |
margin: 0 !important; |
||
Line 16: | Line 16: | ||
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 44: | Line 48: | ||
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 54: | Line 58: | ||
} |
} |
||
.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; |
||
} |
} |
||
h3, |
h3, |
||
.text--medium{ |
.text--medium{ |
||
font-size: 24px; |
font-size: 24px !important; |
||
line-height: 32px; |
line-height: 32px !important; |
||
} |
} |
||
h4, |
h4, |
||
Line 91: | Line 96: | ||
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 132: | Line 137: | ||
.link{ |
.link{ |
||
font-weight: 600; |
font-weight: 600; |
||
color: inherit !important; |
|||
} |
} |
||
.link--bolder { |
.link--bolder { |
||
Line 145: | Line 151: | ||
.links-list { |
.links-list { |
||
padding: 0; |
padding: 0 !important; |
||
list-style: none; |
list-style: none; |
||
display: flex; |
display: flex; |
||
Line 155: | Line 161: | ||
/* 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 174: | Line 180: | ||
/* 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; |
||
} |
} |
||
Line 276: | Line 282: | ||
.block__wrapper--has-columns { |
.block__wrapper--has-columns { |
||
flex-direction: row; |
flex-direction: row; |
||
align-items:center; |
|||
} |
} |
||
} |
} |
||
Line 286: | Line 293: | ||
list-style: none; |
list-style: none; |
||
padding: 0; |
padding: 0; |
||
} |
|||
.navigation--secondary a{ |
|||
color:inherit !Important; |
|||
} |
} |
||
@media only screen and (min-width:960px){ |
@media only screen and (min-width:960px){ |
||
Line 308: | Line 318: | ||
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 363: | Line 391: | ||
.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 398: | Line 431: | ||
gap: 16px; |
gap: 16px; |
||
list-style: none; |
list-style: none; |
||
padding-left: 42px; |
padding-left: 42px !important; |
||
} |
} |
||
.todo li { |
.todo li { |
||
Line 429: | Line 462: | ||
gap: 16px; |
gap: 16px; |
||
list-style: none; |
list-style: none; |
||
padding-left: 42px; |
padding-left: 42px !important; |
||
counter-reset: item; |
counter-reset: item; |
||
} |
} |
||
Line 530: | Line 563: | ||
flex-direction: column; |
flex-direction: column; |
||
gap: 8px; |
gap: 8px; |
||
} |
|||
/* 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); |
|||
} |
} |
||
</style> |
</style> |
Revision as of 14:38, 5 June 2024