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;
 }
}