MediaWiki:CollapseGlobalNavButton.css

/**
 * CollapseGlobalNavButton.css - For UCX only
 * @author Thundercraft5 <https://dev.fandom.com/wiki/User:Thundercraft5>
 * @license CC-BY-SA 3.0
 */
/*** Variables ***/
@media only screen and (max-width: 1250px) {
	:root {
		--global-nav--nav-transform: translateX(-100%);
		--global-nav--notifs-transform: translateX(90%);
	}
}

@media only screen and (min-width: 1250px) {
 	:root {
		--global-nav--nav-transform: translateX(-100%);
		--global-nav--notifs-transform: translateX(100%);
	}
}

/*** Rules ***/
/* Arrow hover/click animation */
/* Fake arrow to reduce content shfit */
body.skin-fandomdesktop .global-navigation__bottom:not(.button-added)::before {
	width: 12px;
	height: 12px;
	margin-bottom: 8px;
	cursor: pointer;
	content: "";
	transform: rotate(90deg);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%2300d6d6' style='width: 12px; height: 12px;%0A'%3E%3Cpath d='M11.707 3.293a.999.999 0 0 0-1.414 0L6 7.586 1.707 3.293A.999.999 0 1 0 .293 4.707l5 5a.997.997 0 0 0 1.414 0l5-5a.999.999 0 0 0 0-1.414' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
}

body.skin-fandomdesktop .global-navigation__bottom.open .global-navigation__collapse:hover {
	transform: translateX(20%);
}

body.skin-fandomdesktop .global-navigation__bottom:not(.open) .global-navigation__collapse:hover {
	transform: translateX(-20%);
}

body.skin-fandomdesktop .global-navigation__collapse:hover {
	filter: contrast(175%) brightness(150%);
}

body.skin-fandomdesktop .global-navigation__collapse:active {
	filter: contrast(125%) brightness(75%);
}

body.skin-fandomdesktop .global-navigation__collapse {
	transition: filter, transform 0.2s ease;
}


/* Rotate icon */
body.skin-fandomdesktop .global-navigation__bottom:not(.open) .global-navigation__collapse .wds-icon.wds-icon-tiny {
	transform: rotate(90deg) !important;
}

body.skin-fandomdesktop .global-navigation__bottom.open .global-navigation__collapse .wds-icon.wds-icon-tiny {
	transform: rotate(-90deg) !important;
}

body.skin-fandomdesktop .global-navigation__collapse {
	cursor: pointer;
}

/* Global Nav, notifications, bottom toolbar, and main content collapse/uncollapse animations */
body.skin-fandomdesktop .global-navigation.collapsing {
	animation: nav-move 0.3s ease-in normal;
}

body.skin-fandomdesktop .global-navigation.uncollapsing {
	animation: nav-move 0.3s ease-in 0.3s reverse;
}

body.skin-fandomdesktop .global-navigation__bottom.uncollapsing {
	animation: notifs-move 0.3s ease-in 0.3s normal;
}

body.skin-fandomdesktop .global-navigation__bottom.collapsing {
	animation: notifs-move 0.3s ease-in reverse;
}

body.skin-fandomdesktop .global-navigation__bottom.open {
	background: var(--fandom-global-nav-background-color);
	padding: 4px;
	border-radius: 0 15px 15px 0;
	box-shadow: 0 0 8px 0.1px black; 
}

/* Main content animation */
body.skin-fandomdesktop .main-container.uncollapsing {
	animation: main-move 0.3s ease-out normal;
}

body.skin-fandomdesktop .main-container.collapsing {
	animation: main-move 0.3s ease-in 0.3s reverse;
}

body.skin-fandomdesktop .main-container.uncollapsed {
	margin-left: 0;
	width: 100%;
}

/* Local nav */
body.skin-fandomdesktop .fandom-sticky-header.uncollapsing {
	animation: localnav-move 0.3s ease-in normal;
}

body.skin-fandomdesktop .fandom-sticky-header.collapsing {
	animation: localnav-move 0.3s ease-in 0.3s reverse;
}

body.skin-fandomdesktop .fandom-sticky-header.uncollapsed {
	left: 0px;
}

body.skin-fandomdesktop .notifs-in { transform: var(--global-nav--notifs-transform) }
body.skin-fandomdesktop .nav-out { transform: var(--global-nav--nav-transform) }

/* Allow notifications to be visible when collapsed */
body.skin-fandomdesktop .global-navigation__bottom.open .notifications .wds-dropdown__content {
	border-radius: 3px !important;
	margin-bottom: 15px !important;
}

/* Responsiveness */
@media only screen and (max-width: 1250px) {
	.global-navigation__bottom.open .notifications .wds-dropdown__content {
		top: -350% !important;
		margin-left: 11% !important;
	}
}

@media only screen and (min-width: 1250px) {
	.global-navigation__bottom.open .notifications .wds-dropdown__content {
		top: -450% !important;
	}
}

/* Fix Search modal background when nav is collapsed */
body.global-navigation-collapsed .search-modal, 
body.global-navigation-collapsed .search-modal:before {
	left: 0 !important;
}

/* Prevent global navigation items from showing up on side of screen when collapsed */
body.global-navigation-collapsed .global-navigation.nav-out .global-navigation__top > nav {
	display: none !important;
}

/*** Animations ***/
/* Moving animations */
@keyframes notifs-move {
	from { transform: translateX(0%) }
	to { transform: var(--global-nav--notifs-transform)  }
}

@keyframes nav-move {
	from { transform: translateX(0%) }
	to { transform: var(--global-nav--nav-transform) }
}

@keyframes main-move {
	from { 
		margin-left: 66px;
		width: calc(100% - 66px);
	}
	to {
		margin-left: 0;
		width: 100%;
	}
}

@keyframes localnav-move {
	from {
		left: 66px;
	}
	to {
		left: 0px;
	}
}