Misago/frontend/style/misago/event.less

//
// Posts List Event
// --------------------------------------------------


// Event style
.posts-list .event {
  margin-bottom: @line-height-computed;

  color: @text-muted;

  .media {
    margin-top: @line-height-computed / 4;
  }
}


// Event label
.posts-list .event-label {
  margin-left: @event-icon-size + 10px;

  .label-unread {
    background-color: @brand-success;

    color: #fff;
  }
}

// Event icon
.posts-list .event .media-left {
  .material-icon {
    height: @event-icon-size;
    width: @event-icon-size;

    font-size: @event-icon-size;
    line-height: @event-icon-size;

    text-align: center;
  }
}


// Event first and second rows
.posts-list .event .event-message {
  margin-bottom: @line-height-computed / 4;

  font-size: @font-size-large;
}

.posts-list .event .event-info {
  margin: 0px;

  font-size: @font-size-small;

  li {
    margin-right: @padding-base-horizontal;

    &:last-child {
      margin-right: 0px;
    }
  }
}


// Event controls
.posts-list .event .event-controls {
  .btn-link {
    border: 0px;
    margin: 0px;
    margin-right: @padding-base-horizontal;
    padding: 0px;

    font-size: @font-size-small;

    &:last-child {
      margin-right: 0px;
    }
  }
}


// Mobile tweaks
@media screen and (max-width: @screen-xs-max) {
  .posts-list .event .post-avatar {
    width: @event-icon-size;
  }

  .posts-list .event .event-info {
    margin-top: @line-height-computed / 4;
  }

  .posts-list .event .event-controls {
    clear: both;
    margin-top: @line-height-computed / 4;

    .btn-link {
      margin-right: @line-height-computed;

      font-size: @font-size-base;

      &:last-child {
        margin-right: 0px;
      }
    }
  }
}