Template:Support Page/sandbox: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Line 171:
.sp-page blockquote {
font-style: italic;
}
 
/* Language Header */
.sp-languages {
height: 56px;
overflow: hidden;
position: relative;
}
 
.sp-languages.-expanded {
height: auto;
}
 
.sp-languages-icon {
position: absolute;
top: 10px;
left: 16px;
}
 
.sp-dir-rtl .sp-languages-icon {
left: auto;
right: 16px;
}
 
.sp-languages-expand {
position: absolute;
top: 11px;
right: 16px;
cursor: pointer;
transition: all 100ms;
}
 
.sp-dir-rtl .sp-languages-expand {
right: auto;
left: 16px;
transform: rotate(180deg);
}
 
.sp-languages-expand:hover g {
fill: #222;
}
 
.sp-languages.-expanded .sp-languages-expand {
transform: rotate(90deg);
}
 
.sp-languages ul {
margin: 0 56px 0 56px;
list-style: none;
}
 
.sp-languages ul .sp-language-divider:last-of-type {
display: none;
}
 
.sp-languages ul li {
display: inline-block;
padding: 12px;
margin-top: 0;
margin-bottom: 0;
white-space: nowrap;
text-transform: capitalize;
}
 
/* .sp-languages ul li:after {
content: "·";
padding: 0 .2em 0 .4em;
} */
.sp-dir-rtl .sp-languages ul li:after {
padding: 0 0.4em 0 0.2em;
}
 
.sp-languages ul li:last-of-type:after {
display: none;
}
 
.sp-languages a,
.sp-languages a:visited {
color: #54595d;
font-size: 14px;
font-weight: 600;
border-bottom: 4px solid transparent;
padding: 12px 0;
}
 
.sp-languages ul li:hover a,
.sp-languages ul li:focus a,
.sp-languages ul li a:hover,
.sp-languages ul li a:focus,
.sp-languages a.selflink {
text-decoration: none;
border-color: #3a25ff;
color: #3a25ff;
}
 
Line 380 ⟶ 287:
color: #3a25ff;
border-color: currentColor;
}
 
/* Language switcher */
.language-switcher {
position: relative;
}
 
.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%;
}
 
@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: 500;
line-height: 175%;
list-style: none;
margin: 0;
margin-bottom: 1.1875rem;
}
 
@media (min-width: 768px) {
.language-switcher__content ul li {
margin-bottom: .875rem;
}
}