Pony.fm/resources/assets/styles/body.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 'variables';
@import 'base/bootstrap/bootstrap';

a {
  color: #C2889C;

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

.loading {
  md-menu-content {
    display: none;
  }
}

.site-content{
  .box-sizing(border-box);
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;

  > ui-view {
    margin-bottom: 20px;
  }

  h1, h2 {
    margin: 1px 1px 5px;
    font-size: 15pt;
    color: #C2889C;
    line-height: normal;
    overflow: hidden;
    font-weight: normal;
  }

  h2 {
    font-size: 14pt;
  }
}

.static-page {
  max-width: 800px;
  margin: 0 auto;

  p {
    margin-bottom: 1.25em;
  }

  ul, ol {
    li {
      margin: 0.75em;
    }
  }

  h1, h2 {
    font-weight: bold;
  }

  h2 {
    margin: 1.5em 0 0.5em;
    font-size: 13pt;
    color: #C2889C;
    line-height: normal;
    overflow: hidden;
  }
}

.welcome {
  padding: 5px;
  margin-bottom: 10px;
  background: lighten(@pfm-purple, 30%);
}

.revealable {
  font-size: 10pt;
  color: #222;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;

  h2 {
  }

  .reveal {
    #gradient>.vertical(rgba(255,255,255,0), rgba(255,255,255,1));
    .box-sizing(border-box);
    position: absolute;
    top: 0;
    left: -1px;
    width: 100%;
    height: 100%;
    z-index: 10;
    border: 2px solid #fff;
    cursor: pointer;

    &:hover {
      border: 2px solid @brand-primary;
    }

    a {
      .box-sizing(border-box);
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #eee;
      padding: 3px;
      z-index: 500;
      text-decoration: none;
      font-size: 10pt;
    }
  }
}

.details-columns {
  .flex-50 {
    margin: 0 10px;
  }

  .left {
    margin-right: 310px;
    margin-left: 5px;
  }

  .right {
    float: right;
    width: 290px;
    height: 100%;
    padding-right: 10px;

    img.cover {
      .img-thumbnail();
      padding: 2px;
    }

    .stats {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 9pt;
      color: #555;

      li {
        padding: 5px 0;
        margin: 0;
        border-bottom: 1px solid #ddd;

        strong {
          color: #111;
        }
      }
    }
  }
}

.comments {
  h4 {
    text-overflow: initial !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }

  form {
    margin: 0 0 10px;

    .form-row {
      margin: 0;
    }

    input[type=text] {
      margin: 0;
      padding: 5px;
      width: 100%;
    }
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

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

      img {
        .img-thumbnail();
        float: left;
        padding: 1px;
        height: 32px;
        width: 32px;
      }

      .meta {
        font-size: 8pt;
        padding: 5px 0;
      }

      .content {
        margin-left: 42px;
      }
    }
  }
}