mediawiki-skins-Citizen/resources/skins.citizen.styles/Header.less
2021-05-27 11:20:12 -04:00

74 lines
1.5 KiB
Plaintext

.mw-header {
--margin-header-item: @margin-header-item;
--margin-header-item--corner: ~'calc( var( --padding-page ) / 2 )';
--padding-header-icon: ~'calc( ( var( --height-header ) - var( --size-icon ) - var( --margin-header-item ) * 2 ) / 2 )';
--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';
--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';
position: fixed;
z-index: 10;
top: 0;
right: 0;
left: 0;
display: flex;
height: var( --height-header );
justify-content: space-between;
pointer-events: none;
& > * {
pointer-events: auto;
}
ul {
list-style: none;
}
ul,
li {
display: block;
margin: 0;
}
&:before {
position: absolute;
right: 0;
left: 0;
box-shadow: 0 0 ~'calc( var( --height-header ) - 15px )' var( --height-header ) var( --background-color-overlay );
content: '';
}
&-button {
width: var( --size-icon );
height: var( --size-icon );
padding: var( --padding-header-icon );
margin-top: var( --margin-header-item );
margin-bottom: var( --margin-header-item );
background-color: transparent;
border-radius: var( --border-radius--small );
cursor: pointer;
&:active {
// Override hover style
background-color: var( --background-color-quiet--active ) !important;
}
}
}
#mw-header-tools {
display: inherit;
}
// User icon bar
#p-personal-extra {
ul {
display: flex;
height: var( --height-header );
align-items: center;
}
}
@media ( hover: hover ) {
.mw-header-button:hover {
background-color: var( --background-color-quiet--hover );
}
}