fchat-rising/scss/_character_page.scss

.character-page-avatar {
  height: 100px;
  width: 100px;
}

// Inline images
.inline-image {
  max-width: 100%;
  height: auto;
}

.character-page {
  .character-name {
    font-size: $h3-font-size;
    font-weight: bold;
  }
  .character-title {
    font-size: $font-size-sm;
    font-style: italic;
  }
  .character-links-block {
    margin-top: 15px;
    a {
      cursor: pointer;
    }
  }
  .badges-block, .contact-block, .quick-info-block, .character-list-block {
    margin-top: 15px;
  }
}

.badges-block {
  .character-badge {
    background-color: $character-badge-bg;
    border: 1px solid $character-badge-border;
    border-radius: $border-radius;
    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));

    &.character-badge-subscription-lifetime {
      background-color: $character-badge-subscriber-bg;
      border: 2px dashed $character-badge-subscriber-border;
      font-weight: bold;
    }
  }
}

.infotags {
  > .infotag-group {
    .infotag-title {
      font-size: $h4-font-size;
    }
  }
}

.infotag {
  .infotag-label {
    font-weight: bold;
  }
  .infotag-value {
    @include force-word-wrapping;
  }
}

.contact-method {
  .contact-value {
    @include force-word-wrapping;
    margin-left: 5px;
  }
}

.quick-info-block {
  .quick-info-label {
    font-weight: bold;
  }
}

.character-kink {
  position: relative;
  .subkink-list {
    //@include well;
    margin-bottom: 0;
    padding: 5px 15px;
    cursor: default;
  }

  .subkink-list.closed {
    display: none;
  }

  &.subkink {
    cursor: pointer;
  }

  @mixin comparison-active {
    border: 1px solid $quick-compare-active-border;
  }

  &.comparison-favorite {
    @include comparison-active;
    background-color: $quick-compare-favorite-bg;
  }

  &.comparison-yes {
    @include comparison-active;
    background-color: $quick-compare-yes-bg;
  }

  &.comparison-maybe {
    @include comparison-active;
    background-color: $quick-compare-maybe-bg;
  }

  &.comparison-no {
    @include comparison-active;
    background-color: $quick-compare-no-bg;
  }

  &.highlighted {
    font-weight: bolder;
  }
}

#character-page-sidebar {
  height: 100%;
  .btn {
    padding: 2px 4px;
  }
}

@media (min-width: breakpoint-min(md)) {
  .profile-body {
    padding-left: 0;
  }
}

// Character Images
.character-images {
  .character-image {
    @extend .img-thumbnail;
    vertical-align: middle;
    border: none;
    display: inline-block;
    background: transparent;
    text-align: center;

  }
}

// Guestbook
.guestbook {
  .guestbook-pager {
    display: inline-block;
    width: 50%;
  }

  .guestbook-avatar {
    float: left;
  }

  .guestbook-contents {
    //@include well();
    &.deleted {
      //@include alert-warning();
    }
  }

  .guestbook-reply {
    &:before {
      content: "Reply ";
      font-weight: bold;
    }
    .reply-message {
      //@include well;
      //@include alert-info;
    }
  }
}

#character-friends {
  .character-friend {
    display: inline-block;
    margin: 5px;
  }
}

.image-preview {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    padding: 5px;
    background: white;
    z-index: 1100;
    max-height: 100%;
    max-width: 100%;
  }
}

.friend-item {
  display: flex;
  align-items: center;
  .date {
    margin-left: 10px;
    flex: 1;
  }
}