holderdeord/hdo-site

@hdoPrimaryColor: #019ea2;
@hdoSecondaryColor: #e03d25;

.issue-list,
.vote-list {
  list-style: none;
  margin: 0;
  li {
    margin-bottom: 5px;
    font-size: 0.9em;
    a {
      &:hover {
        text-decoration: none;
        .issue-list-text {
          text-decoration: underline;
        }
      }
      color: inherit;
      .issue-against,
      .issue-for_and_against,
      .issue-for {
        background-color: #eaeaea;
        margin-right: 3px;
        box-shadow: 3px 0 0 1px #eaeaea, -3px 0 0 1px #eaeaea;
        border-radius: 2px;
      }
      time {
        color: #999;
        text-transform: lowercase;
      }
    }
  }
}

.top-issues-caption {
  margin-bottom: 0;
  padding-left: 10px;
}

section.top-issues,
h2.top-issues-caption {
  margin-top: 0;
}

.top-issues {
  article {
    word-break: break-word;
    padding: 0 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid transparent;
    &:hover {
      text-decoration: none;
      background-color: #f6f6f6;
      border-color: #eee;
      .read-more {
        text-decoration: underline;
      }
    }
    &:active {
      background-color: #eee;
    }
    img {
      margin-top: 10px;
      border-radius: 2px;
    }
    > a {
      color: inherit;
      text-decoration: none;
    }
    p {
      color: #555;
    }
    h4 {
      font-weight: inherit;
      color: #000;
      margin-bottom: 0.25em;
    }
    .read-more {
      color: @hdoPrimaryColor;
    }
    &:hover .read-more {
      text-decoration: underline;
      color: darken(@hdoPrimaryColor, 5%);
    }
  }
}

.avatar {
  border-radius: 50%;
  background: #fff 50% 0% no-repeat;
  box-shadow: 0 0 5px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05), 0 0 0 10px rgba(0,0,0,0.025);
  height: auto;
}
a:hover .avatar {
  box-shadow: 0 0 5px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05), 0 0 0 10px rgba(0,0,0,0.05);
}


.leaderboard-title {
  margin-bottom: 0;
  img {
    height: 48px;
    width: 48px;
    margin: 0 5px 0 10px;
  }
}

.leaderboard {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  &.issues a {
    img {
      opacity: 0.5;
    }
    &:hover img {
      opacity: 1;
    }
  }
  &.kept a {
    background-color: desaturate(lighten(@hdoPrimaryColor, 64), 30);
  }
  &.broken a, &.partially_kept  a{
    color: @hdoSecondaryColor;
    background-color: lighten(saturate(@hdoSecondaryColor, 40), 47);
  }
  a {
    display: block;
    border-radius: 2px;
    position: relative;
    background-color: #fff;
    margin-bottom: 3px;
    padding: 0.5em 10px 0.5em 70px;
    &:hover {
      text-decoration: none;
      color: #000 !important;
      box-shadow: 0 0 0 50px rgba(0,0,0,0.03) inset, 0 0 0 1px rgba(0,0,0,0.03) inset;
      .muted {
        color: #333;
      }
    }
    &:active {
      box-shadow: 0 0 0 50px rgba(0,0,0,0.08) inset, 0 0 0 1px rgba(0,0,0,0.03) inset;
    }
    img {
      position: absolute;
      left: 10px;
      top: 50%;
      margin-top: -24px;
      width: 48px;
      height: 48px;
    }
    .title {
      font-size: 1.1em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .muted {
      font-size: 0.85em;
      margin-top: -0.5em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

section {
  margin-top: 40px;
  h2, h3, h4 {
    margin-bottom: 0;
  }
  h4 {
    font-weight: normal;
  }
}

.intro {
  margin: 0 0 1.5em 0;
}

.read-more {
  color: @hdoPrimaryColor;
}

iframe#twitter-widget-0.twitter-share-button.twitter-tweet-button.twitter-count-horizontal {
  margin-bottom: -7px;
}

.expandable:after {
  content: '▶';
  padding: 0 5px;
}

.expanded:after {
  content: '▼';
  padding: 0 5px;
}