mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 23:05:47 +00:00
5b0bb4c209
Core mixins are very conservative in comparsion and mixins are changed from time to time. It is more maintainable to maintain our own sr-only styles.
254 lines
5 KiB
Plaintext
254 lines
5 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;
|
|
}
|
|
}
|
|
|
|
&__dropdown {
|
|
&Button {
|
|
cursor: pointer;
|
|
|
|
// Icons have to use span inside label elements
|
|
> span:not( .citizen-ui-icon ) {
|
|
.sr-only;
|
|
}
|
|
|
|
&: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 );
|
|
}
|
|
}
|
|
|
|
// Reset hover styles if it is a touch device
|
|
// This is dumb but hover:hover overrides active states
|
|
@media ( hover: none ) {
|
|
&:hover {
|
|
background-color: transparent;
|
|
|
|
.citizen-ui-icon::before {
|
|
opacity: var( --opacity-icon-base );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Remove Safari summary marker
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[ open ] {
|
|
> .citizen-menu__card {
|
|
transition: var( --transition-menu );
|
|
transition-property: transform;
|
|
transform: none;
|
|
|
|
> * {
|
|
opacity: 1;
|
|
transition: var( --transition-menu );
|
|
transition-property: opacity;
|
|
}
|
|
}
|
|
|
|
> .citizen-menu__dropdownButton {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
// Dismiss affordnance overlay
|
|
&::before {
|
|
z-index: -1;
|
|
content: '';
|
|
background: var( --background-color-backdrop-light );
|
|
backdrop-filter: blur( 2px );
|
|
opacity: 0;
|
|
}
|
|
|
|
&[ open ]::before {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0; // Needed for menu to work in Safari
|
|
opacity: 1;
|
|
transition: var( --transition-menu );
|
|
transition-property: opacity;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
/* HACK: Disable page from scolling when a dropdown menu is opened */
|
|
body:has( .citizen-menu__dropdown[ open ] ) {
|
|
overflow: hidden;
|
|
}
|
|
}
|