Pony.fm/resources/assets/styles/layout.less

/**
 * Pony.fm - A community for pony fan music.
 * Copyright (C) 2015 Peter Deltchev
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

@import 'base/bootstrap/bootstrap';
@import 'mixins';
@import 'variables';

html body {
  height: 100%;
  background: #fff;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  padding: 0px !important;
  overflow: hidden;
}

header {
  .user-details {
    float: right;
    margin-right: 20px;
    margin-top: 9px;
    position: absolute;
    top: 0;
    right: 0;

    .avatar {
      display: block;
      float: right;
      cursor: pointer;
      text-decoration: none;
      border-radius: 22px;
      box-shadow: 0 0 0 transparent;
      transition: box-shadow 0.3s @swift-ease-out;

      &:hover {
        .light-material-shadow(1);
      }
      &:focus {
        .light-material-shadow(2);
      }
    }

    .dropdown-menu {
      transform-origin: top right;
      left: auto !important;
      right: 0px;
    }

    img {
      height: 44px;
      width: 44px;
      border-radius: 22px;
    }
  }
}

.now-playing {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid #bcbcbc;
  position: fixed;
  width: ~"calc(100% - 180px)";
  right: 0;
  bottom: 0;
  z-index: 1010;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  transform: translateY(70px);
  transition: transform 0.5s @swift-ease-out;
  &.playing {
    transform: translateY(0);
  }
}

.sidebar {
  > a {
    display: block;
    float: left;
    width: (@pfm-sidebar-size);
    height: 64px;
    line-height: 42px;
    color: #fff;
    font-size: 24pt;
    font-weight: lighter;
    position: relative;
    z-index: 600;
    font-family: 'Josefin Sans', sans-serif;
    position: relative;

    &:hover {
      background: rgba(0,0,0,0.3);
      color: #fff;
      text-decoration: none;
    }

    img.logo {
      padding-left: 6px;
      width: 100%;
      max-width: 94%;
      padding-top: 13px;
    }
  }

  background: #515151;
  width: @pfm-sidebar-size;
  height: 100%;
  list-style: none;
  padding: 0px;
  margin: 0px;
  font-size: 10pt;
  position: absolute;
  bottom: 0;
  left: 0;
  .material-shadow(3);

  li {
    margin: 0px;
    padding: 0px;
    line-height: normal;

    &.selected {
      background: #fff;

      > a, > a:hover {
        cursor: default;
        color: #000;
      }
    }

    &.x-attribution {
      position: absolute;
      bottom: 0;
      max-width: 100%;
      margin: 0;
      padding: 0;
      text-align: right;

      img {
        width: 100%;
      }

      a {
        padding: 10px;
      }

      span {
        font-size: 90%;
        text-transform: lowercase;
        margin: 7px 0;
        display: block;
      }
    }

    h3 {
      padding: 10px 25px;
      padding-right: 10px;
      margin: 0px;
      font-size: 10pt;
      color: #eee;
      background: darken(#515151, 5%);
      line-height: normal;

      a {
        display: block;
        float: right;
        width: 20px;
        text-align: center;
        color: #fff;
        margin-top: -3px;

        &:hover {
          text-decoration: none;
          color: #000;
        }
      }
    }

    .dropdown-menu a {
      color: #000;
    }

    &:hover > a.dropdown-toggle {
      display: block;
    }

    > a.dropdown-toggle {
      float: right;
      padding: 10px 0px;
      display: none;
    }

    > a {
      display: block;
      padding: 12px 0 12px 22px;
      overflow: hidden;
      color: fadeout(#fff, 20%);
      font-size: 14px;

      &:hover {
        color: #fff;
      }

      > i {
        display: block;
        float: right;
        width: 20px;
        text-align: center;
        margin-right: 10px;
      }

      &:hover {
        text-decoration: none;
      }
    }
  }

  li.none {
    span {
      display: block;
      padding: 5px 25px;
      color: #555;
      font-style: italic;
    }
  }
}

.site-content {
    overflow: hidden;
    margin-left: @pfm-sidebar-size;
    background: #fff;
    height: 100%;
    z-index: 100;
}

.site-body {
    margin-top: @pfm-top-bar-size;
}

.file-over-notice {
    display: none;
}

.chart-container {
    width: 50%;
}

.chart-btn-container {
    margin-bottom: 10px;
}

.top-bar {
    display: block;
    position: absolute;
    z-index: 599;
    background: @pfm-logo-purple;
    height: @pfm-top-bar-size;
    width: 100%;
    top: 0;
    transition: background 0.5s @swift-ease-in-out;
    .material-shadow(1);

    .burger-wrapper {
        top:20px;
        left: 20px;
        position: absolute;
        display: none;
    }

    .logo {
        display: none;
    }
}

.burger {
    width: 25px;
    height: 20px;
    top: 20px;
    left: 20px;
}

.bun-top,.meat,.bun-bottom {
    position: absolute;
    display: block;
    border-radius: 4px;
    background: white;
    width: 25px;
    height: 2px;
}

.bun-top {
    top: 0;
}

.meat {
    top: 9px;
}

.bun-bottom {
    bottom: 0;
}

.playlist-form .modal-footer {
    margin-top: 20px;
}

.modal-content {
  .material-shadow(3);
  border: 0;
  border-radius: 4px;
}

.modal-header {
  border-bottom: 0;
  padding: 15px 20px;
  h4 {
    margin-bottom: 0;
    font-weight: 700;
  }
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 0;
}