mediawiki-skins-Citizen/resources/skins.citizen.styles/Header.less
2022-05-13 00:30:46 -04:00

209 lines
3.8 KiB
Plaintext

.citizen-header {
--size-button--header: ~'calc( var( --height-header ) - 1rem )';
--size-icon--header: 1.25rem;
--margin-header: 0.5rem;
--padding-header: ~'calc( var( --padding-page ) / 2 )';
--size-dialog-min--header: 16rem;
position: fixed;
z-index: 4;
top: 0;
right: 0;
left: 0;
display: flex;
height: var( --height-header );
justify-content: space-between;
padding: 0 var( --padding-header );
&:before {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: ~'calc( var( --height-header ) / -2 )';
left: 0;
background: var( --color-surface-0 );
content: '';
-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
mask-image: linear-gradient( 180deg, #000, transparent );
pointer-events: none;
}
&__item {
display: flex;
align-items: center;
}
&__button {
display: grid;
width: var( --size-button--header );
height: var( --size-button--header );
border-radius: var( --border-radius--small );
place-items: center;
// Used in checkbox hack
&Checkbox {
position: absolute;
display: block;
width: inherit;
height: inherit;
}
// Pure CSS icons
&Icon {
overflow: hidden; // Sometimes CSS animation can clip
width: var( --size-icon--header );
height: var( --size-icon--header );
}
// Background image icons
&--icon:after {
width: var( --size-icon--header );
height: var( --size-icon--header );
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
}
&Icon,
&--icon:after {
opacity: var( --opacity-icon-base );
transition: @transition-transform, @transition-opacity;
}
&:hover {
background-color: var( --background-color-quiet--hover );
.citizen-header__buttonIcon,
&.citizen-header__button--icon:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
background-color: var( --background-color-quiet--active );
.citizen-header__buttonIcon,
&.citizen-header__button--icon:after {
opacity: var( --opacity-icon-base--active );
}
}
}
&__inner {
display: flex;
min-width: 0;
flex-grow: 1;
justify-content: space-between;
.mw-checkbox-hack-checkbox:checked {
~ .citizen-header__button {
background-color: var( --background-color-primary--active );
}
}
}
&__start,
&__end {
display: flex;
}
&__start {
min-width: 0;
align-items: center;
}
&__title {
display: flex;
min-width: 0;
height: var( --size-button--header );
align-items: center;
padding: 0 0.5rem;
border-radius: var( --border-radius--small );
color: var( --color-base--emphasized );
font-weight: 500;
white-space: nowrap;
> div {
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
}
&:active {
background-color: var( --background-color-quiet--active );
color: var( --color-base--emphasized );
}
&--page {
display: none;
}
}
// Reset
ul {
margin: 0;
list-style: none;
}
}
.citizen-title--hidden {
.citizen-header {
&__title {
&--site {
display: none;
}
&--page {
display: grid;
}
}
}
}
.skin-citizen-dark {
.citizen-header__button {
&Icon,
&--icon:after {
filter: invert( 1 );
}
}
}
// User icon bar
#p-personal-extra {
ul {
display: flex;
height: var( --height-header );
align-items: center;
}
}
// 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: none;
.citizen-header__buttonIcon,
&.citizen-header__button--icon:after {
opacity: var( --opacity-icon-base );
}
}
}
&__title {
&:hover {
background-color: none;
color: var( --color-base );
}
}
}
}