@statusfy/core/client/assets/css/styles.css

Core of Statusfy

/* Custom Styles */
@import '@statusfy/common/lib/style/base';

main {
  min-height: calc(100vh - 14rem);
}

.btn {
  @apply inline-block rounded font-medium border py-2 px-4 shadow;

  color: var(--grey-darkest);
  background-color: var(--white);
  border-color: var(--grey-light);

  &:hover {
    @apply shadow-md;
    color: var(--black);
    border-color: var(--grey);
  }
}


.badge {
  @apply rounded-full text-sm font-semibold px-3 py-1;
}

.popover {
  @apply absolute rounded px-4 py-3 shadow m-1 max-w-xs text-center text-sm;

  color: var(--white);
  background-color: var(--grey-darkest);
}

.timeline-container,
.scheduled-container {
  @apply mt-6;

  > h2 {
    @apply text-2xl mb-4 font-medium;
  }
}

/* timeline */
.timeline {
  @apply list-reset m-0 p-0;
}

.timeline-incident {
  @apply border-l-2 ml-2 relative pt-0 pb-6 pl-6;

  border-color: var(--grey-light);

  &:last-child {
    border-color: var(--transparent);
  }

  &::before {
    @apply w-6 h-6 border-2 absolute rounded-full z-10;

    background-color: var(--white);
    border-color: var(--grey-light);
    content: ' ';
    left: -13px;
    top: 0;

  }

  &::before {
    border-color: var(--grey-darker);

    .under-maintenance& {
      border-color: var(--grey-darker);
    }

    .degraded-performance& {
      border-color: var(--purple);
    }

    .partial-outage& {
      border-color: var(--orange);
    }

    .major-outage& {
      border-color: var(--red);
    }

    .operational& {
      border-color: var(--grey-light);
    }
  }
}

.timeline-incident-title {
  @apply text-xl font-medium mb-4;
}

.timeline-incident-body {
  @apply pb-2;

  .message {
    color: var(--grey-darker);
  }
}

/* Incidents */
.incident {
  background-color: var(--white);
  border-color: var(--grey-light);

  @apply leading-normal p-4 pt-6 shadow rounded my-4 border;

  .incident-header {
    @apply flex flex-col justify-between;

    @screen sm {
      @apply flex-row;
    }

    &.level-0 {
      .incident-title {
        @apply block;
      }
    }
  }

  .incident-title {
    @apply flex items-start justify-between flex-row-reverse mb-4;

    @screen sm {
      @apply items-center flex-row;
    }

    &.level-0 {
      @apply text-center;
    }

    .badge {
      @apply block text-center;

      color: var(--white);

      @screen sm {
        @apply mr-2;
      }
    }

    a {
      color: var(--black);

      * {
        @apply text-lg block;
      }
    }
  }

  .incident-subtitle {
    @apply flex flex-col items-center justify-between;

    @screen sm {
      @apply flex-row;
    }

    time {
      @apply font-medium;
    }

    .status {
      @apply my-2;

      @screen sm {
        @apply mb-0;
      }
    }
  }

  .incident-systems {
    @apply mb-2 text-center;

    .badge {
      @apply inline-block ml-2 mb-2;

      color: var(--grey-darker);
      background-color: var(--grey-lighter);
    }
  }

  &.under-maintenance {
    &.unresolved {
      .incident-title {
        .badge {
          background-color: var(--grey-darker);
        }

        a {
          color: var(--grey-darker);
        }
      }
    }

    .incident-subtitle .status {
      color: var(--grey-darker);
    }
  }

  &.degraded-performance {
    &.unresolved {
      .incident-title {
        .badge {
          background-color: var(--purple);
        }

        a {
          color: var(--purple);
        }
      }
    }

    .incident-subtitle .status {
      color: var(--purple);
    }
  }

  &.partial-outage {
    &.unresolved {
      .incident-title {
        .badge {
          background-color: var(--orange);
        }

        a {
          color: var(--orange);
        }
      }
    }

    .incident-subtitle .status {
      color: var(--orange);
    }
  }

  &.major-outage {
    &.unresolved {
      .incident-title {
        .badge {
          background-color: var(--red);
        }

        a {
          color: var(--red);
        }
      }
    }

    .incident-subtitle .status {
      color: var(--red);
    }
  }

  &.resolved {
    .incident-title {
      .badge {
        background-color: var(--green);
      }
    }
  }

  &.scheduled {
    .incident-title {
      display: block;
      text-align: center;
    }
  }
}

.incident-body {
  > p,
  > div {
    @apply my-4;
  }

  .markdown {
    @apply mb-0
  }

  a {
    color: var(--blue);

    &.external {
      svg {
        color: var(--grey-dark);
      }
    }
  }

  .update-block {
    @apply flex flex-col-reverse border-b mb-0 py-2;

    &:first-child {
      @apply pt-0;

      .update-block-content {
        @apply mt-0
      }
    }

    &:last-child {
      @apply border-b-0 mb-0 pb-0;

      .update-block-date {
        @apply mb-0
      }
    }
  }

  .update-block-date {
    @apply my-2 text-sm;
    color: var(--grey-dark);
  }

  .update-block-content {
    @apply flex-initial my-2;
  }

  .update-block-title {
    @apply font-semibold mb-2 text-lg;
  }
}

/* Systems */
.systems-container {
  @apply py-2 px-2 shadow rounded my-4 border;

  background-color: var(--white);
  border-color: var(--grey-light);
}

.system {
  @apply p-4 m-2 rounded;
  background-color: var(--grey-lighter);

  .system-title {
    color: var(--grey-darker);
  }

  .system-title-info {
    @apply cursor-pointer;
    color: var(--grey-dark)
  }

  .system-status {
    @apply text-right;
    color: var(--grey-darker);
  }

  &.under-maintenance {
    .system-status {
      color: var(--grey-darker);
    }
  }

  &.degraded-performance {
    .system-status {
      color: var(--purple);
    }
  }

  &.partial-outage {
    .system-status {
      color: var(--orange);
    }
  }

  &.major-outage {
    .system-status {
      color: var(--red);
    }
  }

  &.operational {
    .system-status {
      color: var(--green);
    }
  }
}

/* Systems */
.global-status {
  @apply content-center py-4 px-2 shadow rounded my-4 text-2xl;
  background-color: var(--grey-lighter);
  color: var(--white);

  .global-status-icon {
    @apply ml-2;
  }

  &.under-maintenance {
    background-color: var(--grey-darker);
  }

  &.degraded-performance {
    background-color: var(--purple);
  }

  &.partial-outage {
    background-color: var(--orange);
  }

  &.major-outage {
    background-color: var(--red);
  }

  &.operational {
    background-color: var(--green);
  }
}


/* Footer */
.footer {
  a {
    color: var(--grey-darker);

    &:hover {
      color: var(--black) !important;
    }
  }

  .footer-links {
    @apply flex flex-col items-center justify-between py-4;
    color: var(--grey-dark);

    > div {
      @apply my-2;

      > a:not(:last-child) {
        @apply mr-4;
      }
    }

    @screen sm {
      @apply flex-row;
    }
  }

  .footer-language-swticher {
    @apply text-center mb-6 mt-4;

    @screen sm {
      @apply mt-2;
    }

    a {
      @apply mx-2;

      &.active {
        @apply font-medium;
        color: var(--black);
      }
    }
  }
}

/* Header */
.header {
  @apply pt-4 my-2 flex flex-col items-center content-center flex-no-wrap;

  @screen lg {
    @apply flex-row items-stretch;
  }

  .logo-container {
    @apply flex-none;
  }

  .logo {
    @apply h-10;
  }

  .title {
    @apply font-normal mx-4 my-2 text-xl flex-none;
  }

  .subscribe-container {
    @apply flex-1 text-right my-2;

    @screen lg {
      @apply my-0;
    }

    .modal-container {
      background-color: rgba(0, 0, 0, 0.5);

      @apply fixed z-50 pin overflow-auto flex;
    }

    .modal-body {
      background-color: var(--white);

      /* @apply fixed shadow-inner max-w-md pin-b pin-x align-top m-auto justify-end p-8 w-full flex flex-col; */
      @apply fixed shadow-inner max-w-md pin-b pin-x align-top m-auto justify-end w-full flex flex-col rounded-t;

      @screen md {
        @apply justify-center rounded h-auto shadow relative rounded;
      }

      .tabs-header {
        @apply flex flex-col flex-no-wrap items-stretch content-center justify-between pt-2;

        @screen md {
          @apply flex-row;
        }

        > span {
          color: var(--grey-dark);

          @apply flex-1 text-center font-medium py-3 cursor-pointer;

          &:hover {
            color: var(--grey-darkest);
          }

          &.active {
            color: var(--black);
            @apply flex-1 text-center font-bold;

            @screen md {
              border-bottom-color: var(--black);
              @apply border-b-2 font-semibold;
            }
          }
        }
      }

      .tabs-container {
        @apply flex flex-col items-center py-6;

        > div {
          @apply flex flex-col items-center py-6 text-center;

          p {
            @apply my-4;
          }
        }
      }
    }

    .modal-title {
      @apply my-4 px-4;

      h1 {
        @apply text-left  font-medium text-2xl mb-4;

        @screen md {
          @apply text-center;
        }
      }

      p {
        color: var(--grey-darkest);
        @apply text-center;
      }

      .icon {
        @apply absolute pin-t pin-r pt-4 px-4;

        .svg-icon {
          color: var(--grey-dark);
          @apply cursor-pointer;
        }
      }
    }
  }
}