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

#mw-drawer {
	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-color: var( --background-color-dp-16 );
	border-radius: 0 @border-radius-large @border-radius-large 0;
	transform: translate3d( -110%, 0, 0 ); // shadow bleeding with 100%
	transform-origin: 0 0;
	transition: @transition-transform;
	will-change: transform; // help with performance
	.boxshadow(3);

	&-checkbox {
		&: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 ) translate3d( -2px, 6px, 0 );
					}

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

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

	&-button {
		width: var( --width-button-corner );
		height: var( --height-header );

		&-icon {
			display: flex;
			overflow: hidden;
			width: var( --size-icon );
			height: var( --size-icon );
			flex-direction: column;
			margin: ~'calc( ( var( --height-header ) - var( --size-icon ) ) / 2 ) var( --padding-page )';
			place-content: center;

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

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

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

				.mw-drawer-button-icon {
					&-div {
						background-color: var( --background-color-icon--hover );
					}
				}
			}
		}

		&:active {
			~ #mw-drawer-button-icon {
				.mw-drawer-button-icon {
					&-div {
						background-color: var( --background-color-icon--active );
					}
				}
			}
		}
	}

	&-logo {
		padding: var( --height-header ) var( --padding-page ) 10px var( --padding-page );
		border-bottom: 1px solid var( --border-color-base );
	}

	&-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( --color-base--subtle );
			font-size: inherit;
			font-weight: normal;
			letter-spacing: 0.75px;
		}
	}

	&-main,
	&-user {
		font-size: @ui-menu-text;

		a {
			.menu-item-link;
			align-items: center;
			justify-content: space-between;
			padding: @padding-menu-item-big;

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

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

				&:after {
					opacity: var( --opacity-icon-base--hover );
				}
			}

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

				&:after {
					opacity: var( --opacity-icon-base--active );
				}
			}
		}
	}
}

.mw-drawer {
	&-button {
		&-icon {
			&-div {
				z-index: 5;
				display: block;
				width: @icon-size;
				height: 2px;
				margin: 1.5px 0;
				background-color: var( --background-color-icon );
				border-radius: @border-radius-large;
				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( --border-color-base );

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

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

		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 {
		&-main,
		&-user {
			a {
				&:after {
					filter: invert( 1 );
				}
			}
		}
	}
}