6 files changed, 44 insertions, 28 deletions

diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index bc965331a..feb3a6de2 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -284,3 +284,9 @@ label + .form-group-description {
     border: 2px solid pvar(--mainColorLightest);
   }
 }
+
+// ---------------------------------------------------------------------------
+
+.chip {
+  @include chip;
+}
diff --git a/client/src/sass/include/_badges.scss b/client/src/sass/include/_badges.scss
index 4bc70d4a9..7efd2fb81 100644
--- a/client/src/sass/include/_badges.scss
+++ b/client/src/sass/include/_badges.scss
@@ -9,6 +9,10 @@
   font-weight: $font-semibold;
   line-height: 1.1;
 
+  &.badge-fs-normal {
+    font-size: 100%;
+  }
+
   &.badge-primary {
     color: pvar(--mainBackgroundColor);
     background-color: pvar(--mainColor);
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index e5a40af34..514261d01 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -15,7 +15,3 @@
   font-display: swap;
   src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2');
 }
-
-@mixin muted {
-  color: pvar(--greyForegroundColor) !important;
-}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b5ccb6598..8816437d9 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -36,6 +36,10 @@
   max-height: $font-size * $number-of-lines;
 }
 
+@mixin muted {
+  color: pvar(--greyForegroundColor) !important;
+}
+
 @mixin fade-text ($fade-after, $background-color) {
   position: relative;
   overflow: hidden;
@@ -791,51 +795,39 @@
 }
 
 @mixin chip {
-  --chip-radius: 5rem;
-  --chip-padding: .2rem .4rem;
-  $avatar-height: 1.2rem;
+  --avatar-size: 1.2rem;
 
-  align-items: center;
-  border-radius: var(--chip-radius);
   display: inline-flex;
-  font-size: 90%;
   color: pvar(--mainForegroundColor);
-  height: $avatar-height;
-  line-height: 1rem;
-  margin: .1rem;
+  height: var(--avatar-size);
   max-width: 320px;
   overflow: hidden;
-  padding: var(--chip-padding);
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
 
-  &.rectangular {
-    --chip-radius: .2rem;
-    --chip-padding: .2rem .3rem;
-  }
-
   my-actor-avatar {
-    @include margin-left(-.4rem);
     @include margin-right(.2rem);
+
+    border-radius: 5rem;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
   }
 
   &.two-lines {
-    $avatar-height: 2rem;
+    --avatar-size: 2rem;
 
-    height: $avatar-height;
+    font-size: 14px;
+    line-height: 1rem;
 
     my-actor-avatar {
       display: inline-block;
     }
 
-    div {
-      margin: 0 .1rem;
-
+    > div {
       display: flex;
       flex-direction: column;
-      height: $avatar-height;
       justify-content: center;
     }
   }
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 0082378e4..96b3adf66 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -153,8 +153,25 @@
   }
 
   .vjs-live-control {
-    line-height: $control-bar-height;
-    min-width: 4em;
+    padding: 5px 7px;
+    border-radius: 3px;
+    height: fit-content;
+    margin: auto 10px;
+    font-weight: bold;
+    max-width: fit-content;
+    opacity: 1 !important;
+    line-height: normal;
+    position: relative;
+    top: -1px;
+
+    &.synced-with-live-edge {
+      background: #d7281c;
+    }
+
+    &:not(.synced-with-live-edge) {
+      cursor: pointer;
+      background: #80807f;
+    }
   }
 
   .vjs-peertube {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 88f6efb6a..ee66a9db3 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -294,6 +294,7 @@ body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
 body .p-datepicker table {
   font-size: 14px;
   margin: 0.857em 0 0 0;
+  table-layout: fixed;
 }
 body .p-datepicker table th {
   padding: 0.5em;