ultrawidify/src/ui/res/styles/player-menu.css

@import "tailwindcss";
@import "tailwindcss/utilities";

.uw-menu-root {
  @apply h-full w-full font-mono text-stone-200 text-[16px] flex flex-row bg-transparent;

  pointer-events: none;
  transition: opacity 120ms ease;

  &:not(.uw-visible) {
    pointer-events: none;
    opacity: 0;
  }
  &.uw-hidden {
    pointer-events: none;
    opacity: 0;
  }
  &.uw-visible {
    /* pointer-events: auto; */
    opacity: 1;
  }

  &.uw-menu-left {
    @apply justify-start;
  }
  &.uw-menu-right {
    @apply justify-end;
  }

  &.uw-menu-left, &.uw-menu-right {
    &.uw-menu-top {
      @apply items-start;
    }
    &.uw-menu-ycenter {
      @apply items-center;
    }
    &.uw-menu-bottom {
      @apply items-end;
    }
  }

  &.uw-menu-center {
    @apply flex-col items-center;

    &.uw-menu-top {
      @apply justify-start;
    }
    &.uw-menu-bottom {
      @apply justify-end;
    }
  }

  * {
    @apply font-mono text-stone-200 text-[1em];
  }
}

.uw-trigger, .uw-menu-item, .uw-menu-trigger {
  pointer-events: auto;
}

.uw-submenu {
  @apply absolute flex-col gap-0;

  opacity: 0;
  display: none;
  pointer-events: none;

  /* we'll also animate a bit */
  transition: opacity 120ms ease, width 120ms ease;

  &.uw-menu-left {
    @apply left-full;
  }
  &.uw-menu-right {
    @apply right-full;
  }

  &.uw-menu-left, &.uw-menu-right {
    &.uw-menu-top {
      @apply top-0;
    }
    &.uw-menu-ycenter {
      top: 50%;
      transform: translateY(-50%);
    }
    &.uw-menu-bottom {
      @apply bottom-0;
    }
  }

  &.uw-menu-center {
    @apply left-1/2 -translate-x-1/2 flex-row;

    &.uw-menu-top {
      @apply bottom-0;
    }
    &.uw-menu-bottom {
      @apply top-0;
    }
  }

  * {
    @apply font-mono text-stone-200 text-[1em];
  }
}

.uw-menu-item, .uw-menu-trigger {

  &:hover > .uw-submenu,
  &:focus-within > .uw-submenu {
    display: flex;
    z-index: 200;

    opacity: 1 !important;
    pointer-events: auto;
  }
}


.uw-trigger {
  @apply p-4 relative block
    bg-stone-950/75 backdrop-blur-[1em] backdrop-brightness-75 backdrop-saturate-50
    text-nowrap
  ;

  &:hover {
    @apply text-primary-200 bg-stone-800/75;
  }
}