memos/web/src/less/usage-heat-map.less

@import "./mixin.less";

@stat-day-L1-bg: #9be9a8;
@stat-day-L2-bg: #40c463;
@stat-day-L3-bg: #30a14e;
@stat-day-L4-bg: #216e39;

.usage-heat-map-wrapper {
  @apply flex flex-row justify-start items-center w-full h-32 flex-wrap pr-6 pb-3 shrink-0;

  > .day-tip-text-container {
    @apply w-6 h-full grid grid-rows-7;

    > .tip-text {
      @apply pr-1 w-full h-full text-right font-mono text-gray-400;
      font-size: 10px;
    }
  }

  > .usage-heat-map {
    @apply h-full grid grid-rows-7;
    width: 200px;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: column;

    > .stat-wrapper {
      > .stat-container {
        @apply block rounded-sm;
        width: 14px;
        height: 14px;
        background-color: @bg-lightgray;

        &.null {
          @apply bg-transparent;
        }

        &.stat-day-L1-bg {
          background-color: @stat-day-L1-bg !important;
        }

        &.stat-day-L2-bg {
          background-color: @stat-day-L2-bg !important;
        }

        &.stat-day-L3-bg {
          background-color: @stat-day-L3-bg !important;
        }

        &.stat-day-L4-bg {
          background-color: @stat-day-L4-bg !important;
        }

        &.today {
          border: 1px solid black;
        }
      }
    }
  }
}

.usage-detail-container {
  @apply fixed left-0 top-0 ml-2 -mt-9 p-2 z-100 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;
  background-color: rgba(0, 0, 0, 0.8);

  > .date-text {
    @apply text-gray-300;
  }

  &::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: calc(50% - 5px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(0, 0, 0, 0.8);
  }
}