mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Menu.less
alistair3149 00b2495c1a
feat(core): use px for border-radius
- Move border radius calculation to CSS variable instead of LESS
- Rename CSS variable according to Codex, soft-deprecating the existing border radius
2024-07-05 13:24:31 -04:00

125 lines
2.4 KiB
Plaintext

.citizen-menu {
font-size: var( --font-size-small );
&__card {
--transform-origin-offset-start: var( --space-xs );
--transform-origin-offset-end: ~'calc( 100% - var( --space-xs ) )';
margin: var( --space-xs );
overflow: auto;
overscroll-behavior: contain;
user-select: none;
background-color: var( --color-surface-1 );
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
box-shadow: var( --box-shadow-dialog );
transform: scale( 0 );
contain: content;
> * {
opacity: 0;
}
}
&__heading {
display: block;
padding: var( --space-xs ) var( --space-md );
margin: 0;
font-size: var( --font-size-x-small );
font-weight: var( --font-weight-normal );
color: var( --color-subtle );
letter-spacing: 0.05em;
}
&__content-list {
margin: 0;
list-style: none;
}
.mw-list-item {
line-height: var( --line-height-xs );
a {
display: flex;
gap: var( --space-sm );
align-items: center;
padding: var( --space-xs ) var( --space-md );
font-weight: var( --font-weight-medium );
color: var( --color-emphasized );
transition: var( --transition-hover );
transition-property: opacity;
&:hover {
background-color: var( --background-color-button-quiet--hover );
.citizen-ui-icon::before {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
background-color: var( --background-color-button-quiet--active );
.citizen-ui-icon::before {
opacity: var( --opacity-icon-base--selected );
}
}
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
// FIXME: This should not be here
.citizen-ui-icon {
display: block;
width: var( --size-icon );
height: var( --size-icon );
contain: strict;
&::before {
display: block;
width: 100%;
height: 100%;
content: '';
filter: var( --filter-invert );
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: var( --opacity-icon-base );
}
}
.mw-portlet {
// Hide selected item
.selected {
.sr-only;
}
// Hide empty menu
&-empty {
display: none !important;
}
a::after {
filter: var( --filter-invert );
}
}
// HACK: Restore view button on revision page (#845)
// There are no good way to target revision page
.action-view {
&:has( .diff ),
&:has( .mw-revision ) {
#ca-view {
position: relative !important;
width: auto;
height: auto;
margin: 0;
clip: unset;
}
}
}