Template:FrDS Styles: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
RLopez-WMF (talk | contribs)
No edit summary
RLopez-WMF (talk | contribs)
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 64: Line 64:
font-size: inherit !important;
font-size: inherit !important;
text-decoration: underline;
text-decoration: underline;
color: inherit !important;
}
}
th {
th {
Line 136: Line 137:
.link{
.link{
font-weight: 600;
font-weight: 600;
color: inherit !important;
}
}
.link--bolder {
.link--bolder {
Line 159: 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 178: 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 280: Line 282:
.block__wrapper--has-columns {
.block__wrapper--has-columns {
flex-direction: row;
flex-direction: row;
align-items:center;
}
}
}
}
Line 290: 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 312: 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 367: 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 402: Line 431:
gap: 16px;
gap: 16px;
list-style: none;
list-style: none;
padding-left: 42px;
padding-left: 42px !important;
}
}
.todo li {
.todo li {
Line 433: 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 534: 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>

Latest revision as of 14:38, 5 June 2024