mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-29 00:31:09 +00:00
516ef3a1cb
Putting the dropdown content in the details elemenet have been inconsistent. Transition are not working correctly and different browsers are not handling it well. Furthermore, the previous implementation does not allow an always visible state of dropdown content. Fixes: #882
161 lines
3 KiB
Plaintext
161 lines
3 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 );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Invisible checkbox covering the menu button.
|
|
*/
|
|
.citizen-menu-checkbox {
|
|
// Has to be visible to be focusable
|
|
&-checkbox {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 0;
|
|
height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
opacity: 0;
|
|
|
|
// HACK: Fake focus styles
|
|
&:focus {
|
|
& + .citizen-header__button,
|
|
& + .citizen-menu-checkbox-button {
|
|
outline: 2px solid var( --color-progressive );
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-button {
|
|
cursor: pointer;
|
|
|
|
// Icons have to use span inside label elements
|
|
> span:not( .citizen-ui-icon ) {
|
|
.sr-only;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|