frontend/src/styles/components/namespaces.scss

$lists-per-row: 5;

.namespaces-list {
  .button.new-namespace {
    float: right;
    margin-left: 1rem;

    @media screen and (max-width: $mobile) {
      float: none;
      width: 100%;
      margin-bottom: 1rem;
    }
  }

  .show-archived-check {
    margin-bottom: 1rem;
  }

  &.loader-container.is-loading {
    min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
  }

  .namespace {
    &:not(:last-child) {
      margin-bottom: 1rem;
    }

    h1 {
      display: flex;
      align-items: center;
    }

    .is-archived {
      font-size: 0.75rem;
      border: 1px solid $grey-500;
      color: $grey !important;
      padding: 2px 4px;
      border-radius: 3px;
      font-family: $vikunja-font;
      background: rgba($white, 0.75);
      margin-left: .5rem;
    }

    .lists {
      display: flex;
      flex-flow: row wrap;

      .list {
        cursor: pointer;
        width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
        height: 150px;
        background: $white;
        margin: 0 1rem 1rem 0;
        padding: 1rem;
        border-radius: $radius;
        box-shadow: $shadow-sm;
        transition: box-shadow $transition;

        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &:hover {
          box-shadow: $shadow-md;
        }

        &:active,
        &:focus,
        &:focus:not(:active) {
          box-shadow: $shadow-xs !important;
        }

        @media screen and (min-width: $widescreen) {
          &:nth-child(#{$lists-per-row}n) {
            margin-right: 0;
          }
        }

        @media screen and (max-width: $widescreen) and (min-width: $tablet) {
          $lists-per-row: 3;
          & {
            width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
          }

          &:nth-child(#{$lists-per-row}n) {
            margin-right: 0;
          }
        }

        @media screen and (max-width: $tablet) {
          $lists-per-row: 2;
          & {
            width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
          }

          &:nth-child(#{$lists-per-row}n) {
            margin-right: 0;
          }
        }

        @media screen and (max-width: $mobile) {
          $lists-per-row: 1;
          & {
            width: 100%;
            margin-right: 0;
          }
        }

        .is-archived-container {
          width: 100%;
          text-align: right;

          .is-archived {
            font-size: .75rem;
            float: left;
          }
        }

        .title {
          align-self: flex-end;
          font-family: $vikunja-font;
          font-weight: 400;
          font-size: 1.5rem;
          color: $text;
          width: 100%;
          margin-bottom: 0;
          max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
          overflow: hidden;
          text-overflow: ellipsis;

          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        &.has-light-text .title {
          color: $light;
        }

        &.has-background {
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;

          .title {
            text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
            color: $white;
          }
        }

        .favorite {
          transition: opacity $transition, color $transition;
          opacity: 0;

          &:hover {
            color: $orange;
          }

          &.is-archived {
            display: none;
          }

          &.is-favorite {
            display: inline-block;
            opacity: 1;
            color: $orange;
          }
        }

        &:hover .favorite {
          opacity: 1;
        }
      }
    }
  }
}