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 |
||
| Line 538: | Line 538: | ||
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 13:28, 5 June 2024