ultrawidify/src/main.css

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

@import '@ui/res/styles/theme.css';
@import '@ui/res/styles/forms.css';
@import '@ui/res/styles/fonts.css';
@import '@ui/res/styles/buttons.css';

@import '@ui/res/styles/player-menu.css';


:host {
  @apply bg-stone-950 text-stone-300;
  font-size: 16px;
}
html, body {
  @apply bg-stone-950 text-stone-300;
  font-size: 16px;
}

@media (max-width: 999px) {
  :host {
    font-size: 12px;
  }
  html, body {
    font-size: 12px;
  }
  .mdi svg {
    transform: scale(0.75)
  }
}

@layer base {
  body {
    @apply font-sans text-stone-300;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-mono;
  }

  h2 {
    @apply text-[1.75em];
  }

  h3 {
    @apply text-primary-300 text-[1.25em] mt-4 border-b-1 border-b-stone-700;
  }

  a {
    @apply text-primary-400 cursor-pointer;

    &:hover {
      @apply text-primary-300;
    }
  }

  p {
    @apply mt-1 mb-2;
  }

  p, li {
    @apply leading-tight;
  }

  ul {
    @apply bg-stone-900/50 px-4 py-2 mt-1 mb-2;

    li {
      @apply ml-4 list-disc marker:text-primary-400 mt-1 mb-2;
    }
  }

  small, strike {
    @apply opacity-50;
  }

}

/* Site support levels */
.uw-site-support {
  @apply inline-flex flex-row items-center gap-1 rounded-[0.5rem] relative;


  .tooltip {
    padding: 1rem;
    display: none;
    position: absolute;
    bottom: 0;
    transform: translateY(110%);
    width: 42em;

    background-color: rgba(0,0,0,0.90);
    color: #ccc;
    z-index: 99999 !important;

    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
  &:hover {

    &.no-tooltip {
      .tooltip {
        display: none !important;
      }
    }

    .tooltip {
      display: block;
    }
  }
}

.uw-site-support-level {
  &.uw-official {
    @apply text-primary-400;
  }
  &.uw-community {
    @apply text-indigo-600;
  }
  &.uw-officially-disabled {
    @apply text-red-600;
  }
  &.no-support {
    @apply text-slate-600;
  }
  &.uw-user-added {
    @apply text-cyan-700;
  }
}
/* END site support levels */