mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-01 09:26:53 +00:00
fdc6eaee20
This is similiar to how it is handled in Vector. We are forcing the Echo button to render in the same way as it was initially. This took me so many hours sigh.
187 lines
3.8 KiB
Plaintext
187 lines
3.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-base );
|
|
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;
|
|
}
|
|
|
|
&__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-base );
|
|
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
|
|
.citizen-echo-notification-badge {
|
|
.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;
|
|
}
|
|
|
|
.citizen-scroll--down .citizen-header {
|
|
transform: translateY( 100% );
|
|
}
|
|
}
|