Misago/misago/emberapp/app/styles/_misago/notifications.less

//
// Notifications
// --------------------------------------------------


// Notifications dropdowned list
//
//==
.user-notifications-nav {
  .dropdown-menu {
    width: 320px;

    .dropdown-title {
      margin-bottom: 0px;
    }

    ul {
      margin: 0px;
      max-height: @line-height-computed * 8.75;

      li {
        border-bottom: 1px solid @dropdown-divider-bg;
        padding: @padding-base-vertical @padding-base-horizontal;

        &.new {
          .state-icon {
            color: @state-active;
          }
        }

        .state-icon {
          float: left;
          width: @font-size-base * 1.5;

          color: @state-default;
        }

        a {
          display: block;
          margin: 0px;
          padding: 0px;

          color: @text-color;

          &:hover {
            background: none;

            text-decoration: none;
          }

          &:active {
            background: none;

            color: @state-clicked;
          }
        }

        footer {
          padding-left: @font-size-base * 1.5;

          font-size: @font-size-small;

          a {
            display: inline;
            margin-right: @line-height-computed / 4;
          }
        }

        &.empty {
          border-bottom: none;
          padding: @padding-large-vertical @padding-base-horizontal;
          padding-bottom: @line-height-computed;

          text-align: center;

          .fa {
            display: block;

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


// Full notifications list
//
//==
.notifications-list {
  li {
    border-bottom: 1px solid @hr-border;
    overflow: auto;
    padding: (@line-height-computed / 2) 0px;

    &.new {
      .state-icon {
        color: @state-active;
      }
    }

    &:last-child {
      border-bottom: none;
    }

    .state-icon {
      float: left;
      margin-top: 2px;
      margin-right: @line-height-computed / 2;

      color: @state-default;
      font-size: @font-size-large;
    }

    .message {
      float: left;
      margin-top: 2px;

      font-size: @font-size-large;

      &:link, &:active, &:visited {
        color: @text-color;
      }

      &:hover {
        background: none;

        text-decoration: none;
      }

      &:active {
        background: none;

        color: @state-clicked;
      }
    }

    footer {
      margin-top: 5px;
      float: right;

      a {
        margin-right: @line-height-computed / 3;
      }
    }

    .read-form {
      float: right;
      margin-left: @line-height-computed;
    }
  }
}