mediawiki-skins-Citizen/resources/components/navigation.less

/*
 * Citizen - Navigation Styles
 * https://starcitizen.tools
*/

/*
 * Header
*/

.mw-header-container {
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100vw;
  height: @header-height;
  display: flex;
  justify-content: space-between;
  font-family: @fonts-secondary;
  transition: @transition-transform;

  ul {
    list-style: none;
  }

  ul, li {
    margin: 0;
    display: block;
  }

  // Hide header when scroll
  &.nav-up {
    transform: translate(0px, -@header-height);
  }

  .mw-header-icons {
    display: inherit;
  }

  .mw-header-end {
    width: @icon-box-size + @margin-side + @icon-padding;
    height: @header-height;
    user-select: none;

    // Input button hack
    > input {
      width: inherit;
      height: inherit;
      position: absolute;
      z-index: 8;
      margin: 0;
      display: block;
      opacity: 0;
      cursor: pointer;
      -webkit-touch-callout: none;
    }
  }
}
/*
 * Hamburger menu
 * Modified from https://codepen.io/erikterwan/pen/EVzeRP and https://codepen.io/oxla/pen/zgvqmM
 */
#mw-header-menu {

  .mw-wiki-title {
    letter-spacing: 2px;
  }

  input {
    &:checked {

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

      // Transform all the slices of hamburger into a crossmark
      ~ #mw-header-menu-toggle > span {
        opacity: @opacity-icon;
        transform: rotate(45deg) translate(-5px, -7px);

        // Reflect line
        &:nth-last-child(2) {
          transform: rotate(-45deg) translate(-2px, 6px);
        }

        // Hide line
        &:nth-last-child(3) {
          opacity: 0;
          transform: rotate(0deg) scale(0.2, 0.2);
        }
      }
    }
    // Hover state
    &:hover ~ #mw-header-menu-toggle > span {
      opacity: @opacity-icon-active;

      &:first-child {
        transform: translate(-50%,0);
      }
    }
  }

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

    span {
      z-index: 5;
      margin: 1.5px 0;
      width: @icon-size;
      height: 2px;
      display: block;
      background: @base-0;
      opacity: @opacity-icon;
      transform-origin: 4px 0px;
      transition: @transition-transform,
                  @transition-background-quick,
                  @transition-opacity;

      &:first-child {
        transform-origin: 0% 0%;
      }
      &:nth-last-child(2) {
        transform-origin: 0% 100%;
      }
    }
  }

  &-drawer {
    position: fixed;
    z-index: 4;
    top: 0;
    padding-top: @header-height;
    width: @drawer-width;
    max-width: 100vw; // In case if someone has super small screen
    height: 100vh;
    .boxshadow(3);
    background: @menu-background;
    transform-origin: 0% 0%;
    transform: translate(-110%, 0); // Shadow bleeding with 100%
    transition: @transition-transform;
    will-change: transform; // Help with performance

    &-container {
      height: ~"calc(100vh - @{header-height})";
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: @transition-height;

      .mw-wiki-title {
          padding: @margin-side;
      }

      #p-nt-container {
        overflow: auto;
        flex-grow: 1;
      }

      #p-navigation-label {
        .mixin-screen-reader-text;
      }

      #mw-user-links {

        #p-personal {
          margin-top: @margin-side / 2;
          padding-top: @margin-side / 2;
          border-top: 1px solid @base-80;

          h3 {
            .mixin-screen-reader-text;
          }

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

            a {
              justify-content: unset;

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

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

      h3 {
        margin: @margin-side / 2 0 0 0;
        padding: @margin-side / 2 @margin-side;
        color: @color-item-header;
        font-size: @ui-menu-header;
        font-weight: normal;
        letter-spacing: 1px;
      }

      span {
        display: block;
      }

      a {
        .menu-item-link;
        align-items: center;
        justify-content: space-between;
        padding: @padding-menu-item-big;
        font-size: @ui-menu-text-big;
        font-family: @fonts;

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

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

          &:after {
            opacity: 0.6;
          }
        }

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

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

// Sidebar site title
#mw-sidebar-sitename {
  position: fixed;
  visibility: visible;
  top: @sidebar-sitename-height + @header-height + @margin-side;
  left: @margin-side;
  font-size: 11px;
  letter-spacing: 4px;
  transform: translateY(0) rotate(-90deg);
  transform-origin: top left;
  transition: @transition-transform, @transition-opacity;
}

// Nav up stuff
.nav-up {
   ~ #mw-sidebar-sitename {
    transform: translateY(-54px) rotate(-90deg);
  }

  #mw-header-menu-drawer-container {
    height: 100vh;
  }
}

// Bypass calculation
@mw-sidebar-sitename-max-width: @margin-side * 5 + @page-width;

@media only screen and (max-width: @mw-sidebar-sitename-max-width) {
  #mw-sidebar-sitename {
    z-index: -1; // remove link
    opacity: 0; // hide visual
  }
}

@media only screen and (max-width: @screen2) {
  .mw-header-container {
    background: @base-100;

    &.nav-down {
      border-bottom: 1px solid @base-80;
      .boxshadow(2);
    }
    &.nav-up {
      box-shadow: none;
    }
  }
}

/*
 * User icon bar
 */
#p-personal-extra {
  ul {
    height: 56px;
    display: flex;
    align-items: center;
  }
}

/*
 * Hide stuff
 */
#feedlinks,
#pt-anontalk,
#pt-anoncontribs {
  display: none;
}

// RTL tweaks
.rtl {
  #mw-sidebar-sitename {
    left: unset;
    right: @margin-side;
    transform: translateY(0) rotate(90deg);
    transform-origin: top right;
  }

  .nav-up ~ #mw-sidebar-sitename {
    transform: translateY(-54px) rotate(90deg);
  }

  #mw-header-menu-drawer {
    transform: translate(100%, 0);
  }
}