mediawiki-skins-Citizen/resources/skins.citizen.styles/Drawer.less

#mw-drawer {
	&-button {
		&-icon {
			display: flex;
			overflow: hidden;
			width: @icon-size;
			height: @icon-size;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: (@header-height - @icon-size) / 2 @icon-padding (@header-height - @icon-size) / 2 (@icon-margin * 2 + @margin-side * 2) / 2;

			&-1 {
				transform-origin: 0 0;
			}

			&-2 {
				transform-origin: 0 100%;
			}
		}

		&:checked {
			// Transform all the slices of the button into a crossmark
			~ #mw-drawer-button-icon {
				#mw-drawer-button-icon {
					&-1 {
						opacity: 0;
						/* @noflip */
						transform: rotate( 0deg ) scale( 0.2, 0.2 );
					}
					// Reflect line
					&-2 {
						/* @noflip */
						transform: rotate( -45deg ) translate( -2px, 6px );
					}

					// Hide line
					&-3 {
						/* @noflip */
						transform: rotate( 45deg ) translate( -5px, -7px );
					}
				}

				.mw-drawer-button-icon {
					&-div {
						opacity: @opacity-icon;
					}
				}
			}

			// Show drawer
			~ #mw-drawer-menu {
				transform: none;
				will-change: unset;
			}
		}

		&:hover {
			~ #mw-drawer-button-icon {
				#mw-drawer-button-icon {
					&-1 {
						transform: translate( -50%, 0 );
					}
				}

				.mw-drawer-button-icon {
					&-div {
						opacity: @opacity-icon-active;
					}
				}
			}
		}
	}

	&-menu {
		position: fixed;
		z-index: 4;
		top: 0;
		display: flex;
		width: @drawer-width;
		max-width: 100vw; // in case if someone has super small screen
		height: 100%;
		flex-direction: column;
		background: var( --drawer-mw-drawer-menu-background-color );
		border-radius: 0 @border-radius-large @border-radius-large 0;
		transform: translate( -110%, 0 ); // shadow bleeding with 100%
		transform-origin: 0 0;
		transition: @transition-transform;
		will-change: transform; // help with performance
		.boxshadow(3);

		&-logo {
			display: flex;
			flex-direction: column;
			padding: @header-height @margin-side @margin-side / 2 @margin-side;
			border-bottom: 1px solid var( --drawer-mw-drawer-menu-logo-border-color );

			.mw-wiki-logo {
				display: block;
				width: 120px;
				height: 120px;
				margin-bottom: @margin-side / 2;
				background-position: left center;
				background-repeat: no-repeat;
				background-size: contain;
			}

			.mw-wiki-title {
				height: 0;
				color: var( --drawer-mw-drawer-menu-logo-mw-wiki-title-color );
				opacity: 0;
			}
		}

		&-main {
			overflow: auto;
			flex-grow: 1;
			padding: @margin-side / 2 0;
			overscroll-behavior: contain;

			h3 {
				padding: @margin-side / 2 @margin-side;
				margin: @margin-side / 2 0 0 0;
				color: var( --drawer-mw-drawer-menu-main-h3-color );
				font-size: @ui-menu-header;
				font-weight: normal;
				letter-spacing: 1px;
			}
		}

		&-main,
		&-user {
			a {
				.menu-item-link;
				align-items: center;
				justify-content: space-between;
				padding: @padding-menu-item-big;
				font-size: @ui-menu-text-big;

				&:after {
					.resource-loader-list-icon;
					display: block;
					margin-left: @icon-padding;
					background-size: contain;
					opacity: 0.4;
					transition: @transition-opacity-quick;
				}

				&:hover {
					.menu-item-link-hover;

					&:after {
						opacity: 0.6;
					}
				}

				&:active {
					.menu-item-link-active;
				}

				&:focus {
					.menu-item-link-focus;
				}
			}
		}
	}
}

.mw-drawer {
	&-button {
		&-icon {
			&-div {
				z-index: 5;
				display: block;
				width: @icon-size;
				height: 2px;
				margin: 1.5px 0;
				background: var( --drawer-mw-drawer-button-icon-div-background-color );
				border-radius: @border-radius-large;
				opacity: @opacity-icon;
				transform-origin: 4px 0;
				transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;
			}
		}
	}
}

#p-personal {
	padding-top: @margin-side / 2;
	border-top: 1px solid var( --drawer-p-personal-border-color );

	#pt-userpage {
		margin-bottom: @margin-side / 2;

		a {
			flex-direction: row-reverse;
			justify-content: flex-end;

			&:after {
				width: @icon-box-size;
				height: @icon-box-size;
				margin: 0;
				margin-right: @margin-side;
			}
		}

		span {
			order: 2;
			padding-left: @margin-side;
		}
	}

	#pt-login {
		a {
			.button-blue;

			&:hover,
			&:active,
			&:focus {
				.button-blue-active;
			}
		}
	}

	#pt-logout {
		a {
			.button-red;

			&:hover,
			&:active,
			&:focus {
				.button-red-active;
			}
		}
	}

	// Rounded edge for the last button
	#pt-login,
	#pt-logout {
		a {
			border-radius: 0 0 @border-radius-large 0;
		}
	}
}

.skin-citizen-dark {
	#mw-drawer {
		&-menu {
			&-main,
			&-user {
				a {
					&:after {
						filter: invert( 1 );
					}
				}
			}
		}

		&-button {
			&:hover {
				~ #mw-drawer-button-icon {
					.mw-drawer-button-icon {
						&-div {
							opacity: 0.6;
						}
					}
				}
			}
		}
	}

	.mw-drawer {
		&-button {
			&-icon {
				&-div {
					opacity: 0.4;
				}
			}
		}
	}
}

// Only show title when screen height is less than 800px
@media ( max-height: 800px ) {
	#mw-drawer-menu-logo {
		.mw-wiki-logo {
			height: 0;
			margin: 0;
		}

		.mw-wiki-title {
			height: auto;
			margin-top: 20px;
			opacity: 1;
		}
	}
}