Styles cleanup, might break stuff

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/styles/components/audio-player.scss

@@ -1,43 +0,0 @@
-.audio-player {
-  @apply [direction:ltr] relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
-
-  &.editable {
-    @apply rounded-none h-full;
-  }
-
-  .video-player__seek {
-    @apply before:top-0;
-  }
-
-  .video-player__volume,
-  .video-player__seek {
-    @apply before:bg-white/10;
-  }
-
-  .video-player__seek__buffer {
-    @apply bg-white/20;
-  }
-
-  .video-player__buttons button {
-    @apply text-current opacity-[75];
-
-    &:active,
-    &:hover,
-    &:focus {
-      @apply text-current opacity-100;
-    }
-  }
-
-  .video-player__seek__buffer,
-  .video-player__seek__progress {
-    @apply top-0;
-  }
-
-  .video-player__seek__handle {
-    @apply -top-1;
-  }
-
-  .video-player__controls {
-    @apply pt-2.5 bg-transparent;
-  }
-}

src/styles/components/icon.scss

@@ -6,7 +6,3 @@
     @apply h-full w-full transition duration-200;
   }
 }
-
-.icon-button > div {
-  @apply flex items-center justify-center;
-}

src/styles/components/media-gallery.scss

@@ -28,10 +28,6 @@
 
   &__preview {
     @apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
-
-    &--hidden {
-      @apply hidden;
-    }
   }
 
   &__gifv {

src/styles/components/modal.scss

@@ -1,19 +1,15 @@
 .media-modal {
   .audio-player.detailed,
   .extended-video-player {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @apply flex items-center justify-center;
   }
 
   .audio-player {
-    max-width: 800px;
-    max-height: 600px;
+    @apply max-w-[800px] max-h-[600px];
   }
 
   .extended-video-player {
-    width: 100%;
-    height: 100%;
+    @apply w-full h-full;
 
     video {
       @apply max-w-full max-h-[80%];
@@ -21,12 +17,3 @@
   }
 }
 
-.actions-modal ul li {
-  a,
-  button {
-    .svg-icon svg {
-      @apply stroke-[1.5];
-    }
-  }
-}
-

src/styles/components/search.scss

@@ -1,23 +0,0 @@
-.search__icon {
-  @apply focus:outline-0 #{!important};
-
-  &::-moz-focus-inner {
-    @apply border-0 outline-0 #{!important};
-  }
-
-  .svg-icon {
-    @apply right-4 rtl:left-4 rtl:right-auto text-gray-400 cursor-default inline-block absolute top-1/2 -translate-y-1/2 z-[2] w-4.5 h-4.5 opacity-0 pointer-events-none text-lg;
-
-    &.active {
-      @apply pointer-events-auto opacity-100;
-    }
-
-    &--search.active {
-      @apply pointer-events-none;
-    }
-
-    &--backspace {
-      @apply cursor-pointer w-[22px] h-[22px];
-    }
-  }
-}

src/styles/components/video-player.scss

@@ -20,7 +20,7 @@
     flex: 0 1 auto;
 
     .player-button {
-      @apply inline-block outline-0 bg-transparent text-base border-0 text-white/75;
+      @apply inline-block outline-0 bg-transparent text-base border-0 text-white/75 active:text-white hover:text-white focus:text-white;
       flex: 0 0 auto;
       padding: 5px 6px;
 
@@ -37,27 +37,14 @@
   }
 
   &__volume {
-    @apply inline-flex cursor-pointer h-6 relative overflow-hidden;
+    @apply inline-flex cursor-pointer h-6 relative overflow-hidden before:content-[''] before:w-12 before:bg-white/35 before:rounded before:absolute before:h-1 before:left-0 before:top-1/2;
     flex: 0 0 auto;
 
     .no-reduce-motion & {
       transition: all 100ms linear;
     }
 
-    &.active {
-      @apply overflow-visible w-12 mr-4;
-    }
-
     &::before {
-      content: '';
-      width: 50px;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      left: 0;
-      top: 50%;
       transform: translate(0, -50%);
     }
 
@@ -75,43 +62,16 @@
         transition: opacity 100ms linear;
       }
     }
-
-    &.active &__handle {
-      @apply opacity-100;
-    }
   }
 
   &__link {
-    @apply py-0.5 px-2.5;
-
     a {
       @apply no-underline text-sm font-medium text-white hover:underline active:underline focus:underline;
     }
   }
 
   &__seek {
-    cursor: pointer;
-    height: 24px;
-    position: relative;
-
-    &::before {
-      content: '';
-      width: 100%;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      top: 14px;
-    }
-
-    &__progress {
-      @apply block absolute h-1 rounded top-3.5 bg-accent-500;
-    }
-
-    &__buffer {
-      @apply block absolute h-1 rounded top-3.5 bg-white/20;
-    }
+    @apply cursor-pointer h-6 relative before:content-[''] before:w-full before:bg-white/35 before:rounded before:block before:absolute before:h-1 before:top-3.5;
 
     &__handle {
       @apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 top-2.5 -ml-1.5;
@@ -120,16 +80,6 @@
       .no-reduce-motion & {
         transition: opacity 0.1s ease;
       }
-
-      &.active {
-        @apply opacity-100;
-      }
-    }
-
-    &:hover {
-      .video-player__seek__handle {
-        @apply opacity-100;
-      }
     }
   }
 }