mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-29 16:45:28 +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
236 lines
4.8 KiB
Plaintext
236 lines
4.8 KiB
Plaintext
.citizen-header {
|
|
--header-icon-size: ~'calc( var( --header-button-size ) / 2 )';
|
|
--header-button-size: ~'calc( var( --header-size ) - var( --space-xs ) * 2 )';
|
|
--header-direction: row;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: @z-index-site-header;
|
|
display: flex;
|
|
flex-direction: var( --header-direction );
|
|
gap: var( --space-xxs );
|
|
padding: var( --space-xs );
|
|
background-color: var( --color-surface-0 );
|
|
border-top: 1px solid var( --border-color-base );
|
|
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: var( --header-button-size );
|
|
height: var( --header-button-size );
|
|
border-radius: var( --border-radius--small );
|
|
contain: strict;
|
|
|
|
// Used in checkbox hack
|
|
&Checkbox {
|
|
position: absolute;
|
|
display: block;
|
|
width: inherit;
|
|
height: inherit;
|
|
contain: strict;
|
|
}
|
|
|
|
// Pure CSS icons
|
|
&Icon {
|
|
width: var( --header-icon-size );
|
|
height: var( --header-icon-size );
|
|
overflow: hidden; // Sometimes CSS animation can clip
|
|
filter: var( --filter-invert );
|
|
contain: strict;
|
|
}
|
|
|
|
&Icon,
|
|
.citizen-ui-icon {
|
|
margin: auto;
|
|
}
|
|
|
|
&Icon,
|
|
.citizen-ui-icon::before {
|
|
opacity: var( --opacity-icon-base );
|
|
transition: var( --transition-hover );
|
|
transition-property: transform, opacity;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
|
|
.citizen-ui-icon::before,
|
|
.citizen-header__buttonIcon {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
|
|
.citizen-ui-icon::before,
|
|
.citizen-header__buttonIcon {
|
|
opacity: var( --opacity-icon-base--selected );
|
|
}
|
|
}
|
|
|
|
// Disable default padding when menu item is used as header button
|
|
.citizen-menu .mw-list-item & {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&__logo {
|
|
padding: 0 var( --space-xs ) 0 0;
|
|
margin: 0 var( --space-xxs );
|
|
border-right: 1px solid var( --border-color-base );
|
|
|
|
img {
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
&__inner {
|
|
display: flex;
|
|
flex-direction: var( --header-direction );
|
|
flex-grow: 1;
|
|
gap: var( --space-xxs );
|
|
justify-content: space-between;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
|
|
.citizen-menu-checkbox-checkbox:checked {
|
|
~ .citizen-header__button {
|
|
background-color: var( --background-color-progressive-subtle );
|
|
}
|
|
}
|
|
}
|
|
|
|
&__start,
|
|
&__end {
|
|
display: flex;
|
|
flex-direction: var( --header-direction );
|
|
flex-shrink: 0; // let _inner handle the overflow
|
|
gap: var( --space-xxs );
|
|
|
|
// Hide top-level menu header labels
|
|
> .citizen-menu > .citizen-menu__heading {
|
|
.sr-only;
|
|
}
|
|
}
|
|
|
|
&__start {
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.citizen-dropdown {
|
|
&-summary {
|
|
display: grid;
|
|
place-items: center;
|
|
width: var( --header-button-size );
|
|
height: var( --header-button-size );
|
|
border-radius: var( --border-radius--small );
|
|
contain: strict;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Notifications
|
|
#p-notifications {
|
|
ul {
|
|
display: flex;
|
|
flex-direction: var( --header-direction );
|
|
gap: var( --space-xxs );
|
|
align-items: center;
|
|
}
|
|
|
|
// Echo badge styles do not load before init in 1.39
|
|
.mw-echo-notification-badge-nojs {
|
|
.citizen-ui-icon + span {
|
|
.sr-only;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reset hover styles if it is a touch device
|
|
// This is dumb but hover:hover overrides active states
|
|
@media ( hover: none ) {
|
|
.citizen-header {
|
|
&__button {
|
|
&:hover {
|
|
background-color: transparent;
|
|
|
|
.citizen-header__buttonIcon {
|
|
opacity: var( --opacity-icon-base );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.citizen-header {
|
|
--header-direction: column;
|
|
top: 0;
|
|
right: unset;
|
|
left: 0;
|
|
border-top: 0;
|
|
border-right: 1px solid var( --border-color-base );
|
|
|
|
&__logo {
|
|
padding: 0 0 var( --space-xs ) 0;
|
|
margin: var( --space-xxs ) 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var( --border-color-base );
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide header when scroll down on smaller screen sizes */
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
.citizen-header {
|
|
transition: var( --transition-menu );
|
|
transition-property: transform;
|
|
|
|
/*
|
|
* Add overlay to menus as affordnance
|
|
* TODO: We should use JS to add the overlay instead of abusing CSS
|
|
* TODO: This does not work for TOC and Pref menu
|
|
*/
|
|
.citizen-menu-checkbox-checkbox {
|
|
~ .citizen-header__button {
|
|
&::before {
|
|
position: fixed;
|
|
inset: 0 0 0 0;
|
|
z-index: 1;
|
|
width: auto;
|
|
height: auto;
|
|
pointer-events: none;
|
|
content: '';
|
|
background-color: var( --background-color-backdrop-light );
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&[ aria-expanded='true' ] {
|
|
~ .citizen-header__button {
|
|
contain: initial;
|
|
|
|
&::before {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
transition: var( --transition-menu );
|
|
transition-property: opacity;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.citizen-scroll--down .citizen-header {
|
|
transform: translateY( 100% );
|
|
}
|
|
}
|