pinakes-ui: update styles for media widgets

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: Ia380cb749d3aafc15ffc242e43eefa106a6a6964

crates/pinakes-ui/assets/styles/_base.scss

@@ -144,6 +144,14 @@ ul {
   margin-bottom: $space-6;
 }
 
+.mt-16 {
+  margin-top: $space-8;
+}
+
+.mt-8 {
+  margin-top: $space-6;
+}
+
 // Animations
 @keyframes fade-in {
   from {

crates/pinakes-ui/assets/styles/_components.scss

@@ -82,6 +82,10 @@
     font-size: $font-size-xl;
     font-weight: $font-weight-semibold;
   }
+
+  &-body {
+    padding-top: $space-4;
+  }
 }
 
 // Tables
@@ -201,6 +205,117 @@ select {
   }
 }
 
+// Badges
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: $space-1 $space-4;
+  border-radius: $radius-full;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-semibold;
+  letter-spacing: $letter-spacing-uppercase;
+  text-transform: uppercase;
+
+  &-neutral {
+    background: $overlay-medium;
+    color: $text-1;
+  }
+
+  &-success {
+    background: $success-bg;
+    color: $success;
+  }
+
+  &-warning {
+    background: $warning-bg;
+    color: $warning;
+  }
+
+  &-danger {
+    background: $error-bg;
+    color: $error-text;
+  }
+}
+
+// Tabs
+
+.tab-bar {
+  @include flex(row, flex-start, center, $space-2);
+  border-bottom: 1px solid $border;
+  margin-bottom: $space-6;
+}
+
+.tab-btn {
+  @include button-ghost;
+  padding: $space-3 $space-4;
+  font-size: $font-size-lg;
+  color: $text-1;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: color $transition-base, border-color $transition-base;
+
+  &:hover {
+    color: $text-0;
+  }
+
+  &.active {
+    color: $accent-text;
+    border-bottom-color: $accent;
+  }
+}
+
+// Input variants
+
+.input-sm {
+  @include input-base;
+  padding: 3px $space-4;
+  font-size: $font-size-md;
+}
+
+.input-suffix {
+  @include flex(row, flex-start, stretch);
+
+  input {
+    border-radius: $radius-sm 0 0 $radius-sm;
+    border-right: none;
+    flex: 1;
+  }
+
+  .btn {
+    border-radius: 0 $radius-sm $radius-sm 0;
+  }
+}
+
+// Validation
+
+.field-error {
+  color: $error-text;
+  font-size: $font-size-base;
+  margin-top: $space-1;
+}
+
+// Comments / social
+
+.comments-list {
+  @include flex(column, flex-start, stretch, $space-4);
+}
+
+.comment-item {
+  padding: $space-4;
+  background: $bg-1;
+  border-radius: $radius;
+  border: 1px solid $border-subtle;
+}
+
+.comment-text {
+  font-size: $font-size-lg;
+  color: $text-0;
+  line-height: $line-height-relaxed;
+  margin-top: $space-2;
+}
+
 // Checkbox
 
 input[type='checkbox'] {
@@ -591,6 +706,15 @@ input[type='checkbox'] {
   }
 }
 
+.player-native-video {
+  width: 100%;
+  display: block;
+}
+
+.player-native-audio {
+  display: none;
+}
+
 .player-artwork {
   img {
     max-width: 200px;