mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Sections.less

68 lines
1.3 KiB
Plaintext

// Hide indicator when client is noscript
// FIXME: On rare occasion, indicator can appear without the .citizen-sections-enabled class, not sure why
.citizen-section-indicator,
.client-nojs.citizen-sections-enabled .citizen-section-indicator {
display: none;
}
.citizen-section-heading,
.mw-editsection {
--size-icon: 1.125rem;
}
.citizen-section {
&-heading {
display: flex;
align-items: center;
.mw-headline {
flex-grow: 1;
}
:is( .mw-headline, h1, h2, h3, h4, h5, h6 ) {
transition: var( --transition-hover );
transition-property: opacity;
@media ( hover: pointer ) {
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&:active {
opacity: var( --opacity-icon-base--selected );
}
}
}
&:has( + .citizen-section[ hidden ] ) {
.citizen-section-indicator {
transform: rotate3d( 1, 0, 0, 180deg );
}
:is( .mw-headline, h1, h2, h3, h4, h5, h6 ) {
color: var( --color-subtle );
}
}
}
}
.citizen-sections-enabled {
.citizen-section {
&-heading {
cursor: pointer;
user-select: none;
}
&-indicator {
display: block;
order: -2;
width: var( --size-icon );
height: var( --size-icon );
margin-right: var( --space-sm );
cursor: pointer;
transition: var( --transition-hover );
transition-property: transform;
}
}
}