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

//
// Citizen - Bottombar Styles
// https://starcitizen.tools
//

#mw-bottombar {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  transform: translate(0px, @header-height + @margin-side);
  transition: @transition-transform;

  &-buttons {
    display: flex;
    margin: @margin-side;
    padding: 0 @margin-side / 2;
    background-color: #7289da; // Discord color
    border-radius: 100%;
    .boxshadow(4);
    transition: @transition-transform-quick, @transition-box-shadow-quick;

    .citizen-ui-icon {
      > a {
        width: @icon-box-size + @icon-padding;
        height: @header-height;
        display: flex;
        align-items: center;
        justify-content: center;
        text-indent: -1000px; // Hide text

        &:after {
          display: block;
          .resource-loader-menu-icon;
          transition: @transition-opacity;
          opacity: 1;
        }

        &:hover {
          &:after {
            opacity: 0.7;
          }
        }
      }
    }
  }
}

// Movable navigation bar
.nav-up ~ #mw-bottombar {
  transform: none;
}

@media only screen and (max-width: @screen0) {
  #mw-bottombar {
    display: none;
  }
}