isso/isso/css/isso.scss

@import "bourbon/bourbon";
@import "neat/neat";

$avatar-bg-color: #F0F0F0;

@mixin isso-shadow {
  border: 1px solid $avatar-bg-color;
  border-radius: 2px;
  box-shadow: 0px 0px 2px #888;
}

@mixin reset {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.isso-popup {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  padding: 6px 8px;
  margin-left: 20px;
  border: 1px solid rgb(242, 122, 122);
  border-radius: 2px;
  background-color: rgb(242, 222, 222);
  z-index: 9002;
}

#isso-thread {

  @include reset;

  > h4 {
    color: #555;
    font-weight: bold;
    font-family: "Helvetica", Arial, sans-serif;
  }
}

.parent-highlight {
  background-color: #EFEFEF;
}

.isso-comment {
  @include outer-container;

  margin: 0.95em 0px;

  > div.avatar {
    @include span-columns(1 of 11);

    > svg {
      @include isso-shadow;
      max-height: 48px;
    }
  }

  > div.text-wrapper {
    @include span-columns(10 of 11);

    > .isso-comment-header, > .isso-comment-footer {
      font-size: 0.95em;
    }

    > .isso-comment-header {
      font-family: "Helvetica", Arial, sans-serif;
      font-size: 0.85em;

      .spacer {
        padding-left: 6px;
        padding-right: 6px;
      }

      .spacer, a.permalink, .note, a.parent {
        color: gray !important;
        font-weight: normal;

        text-shadow: none !important;

        &:hover {
          color: #606060 !important;
        }
      }

      .note { float: right }

      .author {
        font-weight: bold;
        color: #555;
      }
    }

    > div.text {

      p {
        margin-top: 0.2em;

        &:last-child {
          margin-bottom: 0.2em;
        }
      }
    }

    > div.textarea-wrapper textarea {
      @include fill-parent;
      @include isso-shadow;
      font: inherit;
    }

    > .isso-comment-footer {

      font-family: "Helvetica", Arial, sans-serif;
      font-size: 0.80em;

      color: gray !important;

      a {
        font-weight: bold;
        text-decoration: none;
        &:hover {
          color: #111111 !important;
          text-shadow: #aaaaaa 0px 0px 1px !important;
        }
      }

      a.reply, a.edit, a.cancel, a.delete {
        padding-left: 1em;
      }

      .votes {
        color: gray;
      }

      .upvote svg, .downvote svg {
        position: relative;
        top: 0.2em;
      }
    }
  }

  .postbox {
    margin-top: 0.8em;
  }
}

.postbox {
  @include outer-container;

  > .avatar {
    @include span-columns(1 of 11);

    > svg {
      @include isso-shadow;
      max-height: 48px;
    }
  }

  > .form-wrapper {
    @include span-columns(10 of 11);

    textarea {
      @include fill-parent;
      @include isso-shadow;
      @include placeholder {
        color: #AAA;
      }

      min-height: 48px;
      font: inherit;
    }

    > .textarea-wrapper {
      margin-bottom: 0.2em;
    }

    > .auth-section {
      @include outer-container;

      .input-wrapper {
        @include span-columns(2 of 5);

        margin-top: 0.1em;

        input {
          @include fill-parent;
          @include isso-shadow;
          @include pad(0.2em);
          @include placeholder {
            color: #AAA;
          }

          font: inherit;
        }
      }

      .post-action {
        @include span-columns(1 of 5);
        margin-top: 0.1em;

        > input {
          @include fill-parent;
          padding: 0.4em 1em;

          border-radius: 2px;
          border: #CCC solid 1px;

          background-color: #DDD;
          cursor: pointer;

          &:hover {
            background-color: #CCC;
          }

          &:active {
            background-color: #BBB;
          }
        }
      }
    }
  }
}