bitvid/css/tailwind.source.css

@import "./tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .focus-ring {
    @apply outline-none focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:transition-shadow focus-visible:duration-fast focus-visible:ease-out;
  }

  .btn {
    @apply focus-ring inline-flex items-center justify-center gap-2 rounded-lg border border-transparent bg-primary px-4 py-2 text-sm font-semibold uppercase tracking-wide text-white shadow-md transition duration-base ease-in-out;
  }

  .btn:hover {
    @apply bg-info-strong shadow-lg;
  }

  .btn:focus-visible {
    @apply bg-info-pressed;
  }

  .btn:disabled {
    @apply pointer-events-none cursor-not-allowed opacity-60 shadow-none;
  }

  .btn-ghost {
    @apply btn border border-border border-opacity-60 bg-transparent text-white shadow-none;
  }

  .btn-ghost:hover {
    @apply bg-panel-hover text-text;
  }

  .btn-ghost:focus-visible {
    @apply bg-panel-hover;
  }

  .btn-ghost:disabled {
    @apply pointer-events-none opacity-50 shadow-none;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded-full bg-panel px-3 py-1 text-xs font-semibold uppercase tracking-wide text-muted-strong;
  }

  .badge[data-variant="critical"] {
    @apply bg-critical bg-opacity-20 text-critical-strong;
  }

  .badge[data-variant="info"] {
    @apply bg-info bg-opacity-20 text-info-strong;
  }

  .badge[data-variant="neutral"] {
    @apply bg-border bg-opacity-40 text-muted-strong;
  }

  .card {
    @apply focus-ring relative rounded-lg border border-transparent bg-card text-text shadow-md transition duration-base ease-in-out;
  }

  .card:hover {
    @apply shadow-lg;
  }

  .card:focus-visible {
    @apply border-info border-opacity-40 shadow-lg;
  }

  .card[data-state="critical"] {
    @apply border border-critical border-opacity-40 bg-card-critical;
  }

  .card[data-state="private"] {
    @apply bg-card-private shadow-lg;
  }

  .card[data-state="disabled"] {
    @apply opacity-60 shadow-none;
  }

  .input {
    @apply focus-ring block w-full rounded-md border border-border-subtle bg-surface-alt px-3 py-2 text-sm text-text shadow-sm transition duration-base ease-in-out placeholder:text-muted;
  }

  .input:hover {
    @apply border-border;
  }

  .input:focus-visible {
    @apply border-info-strong;
  }

  .input:disabled {
    @apply cursor-not-allowed bg-surface text-muted opacity-60;
  }

  .bv-modal {
    @apply fixed inset-0 z-[var(--z-modal-root)] flex items-center justify-center p-4 sm:p-6;
  }

  .bv-modal__panel {
    @apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-3xl rounded-xl border border-border border-opacity-40 bg-surface px-6 py-8 text-left text-white shadow-modal transition duration-base ease-out;
  }

  .bv-modal__panel:focus-visible {
    @apply border-info border-opacity-50;
  }

  .bv-modal-backdrop {
    @apply absolute inset-0 z-[var(--z-modal-overlay)] bg-overlay bg-opacity-80 backdrop-blur;
  }

  .grid-stack {
    @apply grid gap-lg;
  }

  .grid-stack[data-variant="cards"] {
    @apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-3;
  }

  .grid-stack[data-orientation="vertical"] {
    @apply flex flex-col gap-md;
  }

  /* Legacy compatibility shims */
  .video-card {
    @apply card overflow-visible;
  }

  .video-card.video-card--owner-private {
    @apply bg-card-private;
  }

  .video-card.video-card--nsfw-owner {
    @apply border border-critical border-opacity-40 bg-black;
  }

  .video-card.video-card--nsfw-owner:hover {
    @apply border-opacity-60 shadow-lg;
  }

  .video-card img.video-card__thumbnail--blurred {
    @apply transition duration-base ease-in-out;
    filter: blur(18px);
    transform: scale(1.05);
  }

  .video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
    @apply border border-critical border-opacity-40 bg-card-critical;
  }

  .video-visibility-toggle {
    @apply inline-flex items-center gap-1 rounded-full border border-border bg-panel px-1 py-1;
  }

  .video-visibility-toggle__option {
    @apply inline-flex items-center justify-center rounded-full border border-transparent bg-panel px-3 py-2 text-xs font-semibold uppercase text-muted transition duration-base ease-in-out;
  }

  .video-visibility-toggle__option:not(.is-disabled):hover {
    @apply bg-panel-hover text-text;
  }

  .video-visibility-toggle__option[data-active="true"] {
    @apply border border-info border-opacity-60 text-text shadow-lg;
  }

  .video-visibility-toggle__option.is-disabled {
    @apply cursor-not-allowed opacity-45;
  }

  .modal-container {
    @apply bv-modal;
  }

  .modal-content {
    @apply bv-modal__panel flex h-full flex-col;
  }

  .video-modal__container {
    @apply flex h-full min-h-screen w-full flex-1 flex-col;
  }

  .player-modal__container {
    @apply video-modal__container;
  }

  .video-modal__panel {
    @apply bv-modal__panel relative flex w-full flex-1 flex-col overflow-visible bg-surface shadow-none;
  }

  .player-modal__content {
    @apply video-modal__panel;
  }

  .video-modal__nav {
    @apply sticky top-0 z-[60] border-b border-border border-opacity-40 bg-surface;
  }

  .modal-nav {
    @apply video-modal__nav;
  }

  .video-modal__actions {
    @apply ml-auto flex flex-nowrap items-center justify-end gap-2;
  }

  .modal-actions {
    @apply video-modal__actions;
  }

  .video-modal__video {
    @apply sticky top-0 z-[51] flex w-full flex-shrink-0 items-center justify-center border-b border-border border-opacity-20 bg-surface;
  }

  .player-modal__video {
    @apply video-modal__video;
  }

  .video-modal__media {
    @apply block aspect-video w-full rounded-xl bg-black object-contain shadow-2xl;
  }

  .player-modal__video video {
    @apply video-modal__media;
  }

  .video-modal__info {
    @apply flex-none border-t border-border border-opacity-20 bg-surface;
  }

  .player-modal__info {
    @apply video-modal__info;
  }

  .profile-pane {
    @apply flex flex-col gap-lg;
  }

  .profile-pane.hidden {
    display: none;
  }

  .profile-switcher {
    @apply card flex flex-col gap-lg;
  }

  .profile-switcher__badge {
    @apply badge self-start;
  }

  .profile-switcher__header {
    @apply flex flex-col gap-sm sm:flex-row sm:items-center sm:justify-between;
  }

  .profile-switcher__intro {
    @apply flex flex-col gap-2xs;
  }

  .profile-switcher__title {
    @apply text-base font-semibold text-text;
  }

  .profile-switcher__subtitle {
    @apply text-sm text-muted;
  }

  .profile-switcher__list {
    @apply flex flex-col gap-md;
  }

  .profile-switcher__helper {
    @apply text-xs text-muted;
  }

  .profile-card {
    @apply card relative flex cursor-pointer flex-col gap-md p-4 text-text transition duration-base ease-out hover:shadow-lg focus-visible:border-info focus-visible:border-opacity-60 focus-visible:shadow-lg sm:flex-row sm:items-center;
  }

  .profile-card--active {
    @apply border-info border-opacity-60 shadow-lg;
  }

  .profile-card__avatar {
    @apply flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-full border border-border border-opacity-30 bg-surface;
  }

  .profile-card__avatar img {
    @apply h-full w-full rounded-full object-cover;
  }

  .profile-card--active .profile-card__avatar {
    @apply border-info border-opacity-70 ring-2 ring-info ring-opacity-20;
  }

  .profile-card__meta {
    @apply flex min-w-0 flex-1 flex-col gap-sm;
  }

  .profile-card__topline {
    @apply flex w-full flex-wrap items-center gap-sm sm:justify-between;
  }

  .profile-card__label {
    @apply text-xs font-semibold uppercase tracking-wide text-info;
  }

  .profile-card__name {
    @apply truncate text-sm font-semibold text-text;
  }

  .profile-card__npub {
    @apply break-all font-mono text-xs text-muted;
  }

  .profile-card__action,
  .profile-nav-button {
    @apply btn-ghost ml-auto flex-shrink-0 px-3 py-1 text-xs;
  }

  .profile-switcher__add {
    @apply card hover:bg-info/10 flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-info hover:border-opacity-60 hover:text-white focus-visible:border-info focus-visible:border-opacity-60;
  }

  .profile-switcher__addAvatar {
    @apply flex h-12 w-12 flex-none items-center justify-center rounded-full border border-dashed border-current bg-surface;
  }

  .profile-switcher__addAvatar svg {
    @apply h-5 w-5;
  }

  .profile-switcher__addCopy {
    @apply flex flex-col gap-1 text-left;
  }

  .profile-switcher__addTitle {
    @apply text-sm font-semibold text-inherit;
  }

  .profile-switcher__addHint {
    @apply text-xs text-muted;
  }

  .watch-history-grid {
    @apply flex w-full flex-col gap-5 py-6 sm:gap-6;
  }

  .watch-history-grid.watch-history-grid--modal {
    @apply gap-5 py-0 sm:gap-6;
  }

  .watch-history-card {
    @apply card flex flex-wrap items-stretch gap-5 p-4 transition duration-base ease-out hover:-translate-y-0.5 hover:shadow-lg sm:gap-6 sm:p-5;
  }

  .watch-history-card--private {
    @apply border-info border-opacity-60;
  }

  .watch-history-card__primary {
    @apply flex min-w-0 flex-1 flex-wrap items-stretch gap-4 sm:flex-nowrap;
  }

  .watch-history-card__thumbnail {
    @apply block flex-none text-white no-underline sm:w-56;
  }

  .watch-history-card__thumbnailInner {
    @apply aspect-video w-full overflow-hidden rounded-lg bg-surface;
  }

  .watch-history-card__thumbnailInner img {
    @apply h-full w-full object-cover;
  }

  .watch-history-card__details {
    @apply flex min-w-0 flex-1 flex-col justify-center gap-sm;
  }

  .watch-history-card__title {
    @apply cursor-pointer text-lg font-semibold leading-snug text-white transition duration-base ease-out;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .watch-history-card__title:hover,
  .watch-history-card__title:focus {
    @apply text-info;
  }

  .watch-history-card__created {
    @apply text-sm text-muted;
  }

  .watch-history-card__meta {
    @apply flex min-w-0 flex-col justify-between gap-4 sm:min-w-[14rem] sm:flex-[0_0_16rem];
  }

  .watch-history-card__watched {
    @apply text-sm text-border-subtle;
  }

  .watch-history-card__creator {
    @apply flex items-center gap-3;
  }

  .watch-history-card__creatorAvatar {
    @apply flex h-10 w-10 items-center justify-center rounded-full bg-panel transition duration-base ease-out hover:ring-2 hover:ring-info hover:ring-opacity-50 focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-50;
  }

  .watch-history-card__creatorAvatar img {
    @apply h-full w-full rounded-full object-cover;
  }

  .watch-history-card__creatorName {
    @apply cursor-pointer bg-transparent p-0 text-left text-base font-medium text-muted transition duration-base ease-out hover:text-info focus-visible:text-info;
  }

  .watch-history-card__actions {
    @apply flex flex-wrap items-center gap-3;
  }

  .watch-history-card__action {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-panel px-4 py-2 text-sm font-medium text-muted transition duration-base ease-out hover:border-border hover:bg-surface-alt hover:text-white focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-white;
  }

  .watch-history-card__action--primary {
    @apply bg-info-strong text-white hover:bg-info-pressed focus-visible:bg-info-pressed;
  }

  .watch-history-card__action--danger {
    @apply bg-critical text-white hover:bg-critical-strong focus-visible:bg-critical-strong;
  }
}