mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Header.less

177 lines
3.7 KiB
Plaintext
Raw Normal View History

.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-fixed;
display: flex;
flex-direction: var( --header-direction );
gap: var( --space-xxs );
padding: var( --space-xs );
background-color: var( --color-surface-0 );
border-top: var( --border-width-base ) solid var( --border-color-base );
transition: var( --transition-menu );
transition-property: transform;
&__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: var( --border-width-base ) solid var( --border-color-base );
img {
margin: auto;
}
}
&__inner {
display: flex;
flex-grow: 1;
flex-direction: var( --header-direction );
gap: var( --space-xxs );
justify-content: space-between;
min-width: 0;
overflow-x: auto;
}
&__start,
&__end {
display: flex;
flex-shrink: 0; // let _inner handle the overflow
flex-direction: var( --header-direction );
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;
}
}
}
2021-05-04 17:27:47 +00:00
// 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: var( --border-width-base ) solid var( --border-color-base );
&__logo {
padding: 0 0 var( --space-xs ) 0;
margin: var( --space-xxs ) 0;
border-right: 0;
border-bottom: var( --border-width-base ) solid var( --border-color-base );
}
2021-05-04 17:27:47 +00:00
}
}