logseq/src/main/frontend/components/icon.css

.cp__emoji-icon-picker {
  @apply w-[380px] max-h-[396px] relative;
  @apply pt-14 pb-16;

  > .hd {
    @apply absolute w-full pt-3 pb-1 px-3 top-0 left-0;
  }

  > .bd {
    @apply pb-28 max-h-96 px-2 py-2;
    @apply overflow-y-scroll;
  }

  > .ft {
    @apply absolute w-full py-3 px-3 bg-gray-02 bottom-0 left-0;
    @apply flex items-center border-t h-[50px] overflow-hidden;

    .tab-item {
      @apply opacity-50 hover:opacity-100;

      &.active {
        @apply opacity-100;
      }
    }
  }

  .search-input {
    @apply relative;

    .ls-icon-search {
      @apply absolute left-2.5 top-[9px] opacity-50;
    }

    > .x {
      @apply flex items-center h-full px-2 opacity-50;
      @apply absolute right-0 top-0 hover:opacity-80;
    }

    .form-input {
      @apply leading-none pl-8 outline-none border-none bg-gray-03;
      @apply focus:!shadow-accent-06 focus:bg-gray-02;
    }

    &:focus-within {
      .ls-icon-search {
        @apply opacity-75;
      }
    }
  }

  .pane-block {
    > .its {
      @apply flex gap-1 py-1 mb-1 flex-wrap;

      > button {
        @apply flex items-center justify-center rounded-full hover:bg-gray-03 active:opacity-70;

        @apply focus:outline-accent-09;
      }
    }
  }

  .icons .ui__icon {
    vertical-align: middle;
  }

  .hover-preview {
    @apply flex flex-1 items-center justify-between leading-none;

    > strong {
      @apply opacity-60 text-base whitespace-nowrap font-normal
      overflow-ellipsis overflow-hidden mr-2;
    }
  }
}

.dropdown-wrapper .cp__emoji-icon-picker {
  @apply -m-4;
}

.ui__dropdown-menu-content .cp__emoji-icon-picker {
  @apply -m-1;
}

.ls-icon {
  &-Backlog {
    @apply text-gray-05;
  }

  &-Todo {
    @apply text-gray-11;
  }

  &-InProgress50 {
    @apply text-yellow-rx-08;
  }

  &-InReview {
    @apply text-blue-rx-09;
  }

  &-Done {
    @apply text-green-rx-08;
  }

  &-Cancelled {
    @apply text-red-rx-08;
  }
}