Refactor legacy CSS shims to Tailwind primitives

css/tailwind.source.css

@@ -172,28 +172,12 @@
     @apply cursor-not-allowed opacity-45;
   }
 
-  #profileModal .profile-switcher {
-    @apply card flex flex-col gap-lg;
-  }
-
-  #profileModal .profile-switcher__badge {
-    @apply badge;
-  }
-
-  #profileModal .profile-card {
-    @apply card flex items-center gap-4 p-4 text-text;
-  }
-
-  #profileModal .profile-switcher__add {
-    @apply card flex items-center gap-4 p-4 text-left;
-  }
-
-  #profileModal .profile-card__action {
-    @apply btn-ghost;
+  .modal-container {
+    @apply bv-modal;
   }
 
   .modal-content {
-    @apply bv-modal__panel;
+    @apply bv-modal__panel flex h-full flex-col;
   }
 
   .video-modal__container {
@@ -213,7 +197,7 @@
   }
 
   .video-modal__nav {
-    @apply sticky top-0 z-[60] border-b border-border border-opacity-40 bg-bg;
+    @apply sticky top-0 z-[60] border-b border-border border-opacity-40 bg-surface;
   }
 
   .modal-nav {
@@ -229,7 +213,7 @@
   }
 
   .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-bg;
+    @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 {
@@ -245,11 +229,213 @@
   }
 
   .video-modal__info {
-    @apply flex-none border-t border-border border-opacity-20 bg-bg;
+    @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 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:bg-info/10 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:flex-[0_0_16rem] sm:min-w-[14rem];
+  }
+
+  .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:bg-surface-alt hover:text-white hover:border-border focus-visible:bg-surface-alt focus-visible:text-white focus-visible:border-border;
+  }
+
+  .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;
+  }
+
 }