Fix lint

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-edit / shared / video-edit.component.scss

diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 3082a4f72bfdbfb37788b62db9e2b26ed6612680..1c6f7f5abc763a37cfda59d33ec51bfdbae95392 100644 (file)
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -1,31 +1,10 @@
-// Bootstrap grid utilities require functions, variables and mixins
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/bootstrap/scss/grid';
-
-@import 'variables';
-@import 'mixins';
-
-label,
-my-dynamic-form-field ::ng-deep label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-select-container {
   @include peertube-select-container(auto);
 }
 
-.title-page a {
-  color: pvar(--mainForegroundColor);
-
-  &:hover {
-    text-decoration: none;
-    opacity: .8;
-  }
-}
-
 my-peertube-checkbox {
   display: block;
   margin-bottom: 1rem;
@@ -39,110 +18,75 @@ my-peertube-checkbox {
   height: 100%;
   min-height: 300px;
 
-  .form-group {
-    margin-bottom: 25px;
-  }
-
   input {
     @include peertube-input-text(100%);
     display: block;
   }
+}
 
-  .label-tags + span {
-    font-size: 15px;
-  }
-
-  .advanced-settings .form-group {
-    margin-bottom: 20px;
-  }
+.captions-header {
+  text-align: end;
+  margin-bottom: 1rem;
 }
 
-.captions {
+.caption-entry {
+  display: flex;
+  height: 40px;
+  align-items: center;
+
+  a.caption-entry-label {
+    @include disable-default-a-behaviour;
 
-  .captions-header {
-    text-align: right;
-    margin-bottom: 1rem;
+    color: #000;
 
-    .create-caption {
-      @include create-button;
+    &:hover {
+      opacity: 0.8;
     }
   }
 
-  .caption-entry {
-    display: flex;
-    height: 40px;
-    align-items: center;
-
-    a.caption-entry-label {
-      @include disable-default-a-behaviour;
+  .caption-entry-label {
+    @include margin-right(20px);
 
-      flex-grow: 1;
-      color: #000;
+    font-weight: bold;
+    min-width: 100px;
+  }
 
-      &:hover {
-        opacity: 0.8;
-      }
-    }
+  .caption-entry-state {
+    @include margin-right(15px);
 
-    .caption-entry-label {
-      font-size: 15px;
-      font-weight: bold;
+    min-width: 250px;
 
-      margin-right: 20px;
-      width: 150px;
+    &.caption-entry-state-create {
+      color: #39CC0B;
     }
 
-    .caption-entry-state {
-      width: 200px;
-
-      &.caption-entry-state-create {
-        color: #39CC0B;
-      }
-
-      &.caption-entry-state-delete {
-        color: #FF0000;
-      }
+    &.caption-entry-state-delete {
+      color: #FF0000;
     }
+  }
 
-    .caption-entry-delete {
-      @include peertube-button;
-      @include grey-button;
-    }
+  .caption-entry-edit {
+    @include peertube-button;
   }
 
-  .no-caption {
-    text-align: center;
-    font-size: 15px;
+  .caption-entry-delete {
+    @include peertube-button;
+    @include grey-button;
   }
 }
 
+.no-caption {
+  text-align: center;
+}
+
 .submit-container {
-  text-align: right;
+  text-align: end;
 
   .message-submit {
-    display: inline-block;
-    margin-right: 25px;
-
-    color: pvar(--greyForegroundColor);
-    font-size: 15px;
-  }
-
-  .submit-button {
-    @include peertube-button;
-    @include orange-button;
-    @include button-with-icon(20px, 1px);
+    @include margin-right(25px);
 
     display: inline-block;
-
-    input {
-      cursor: inherit;
-      background-color: inherit;
-      border: none;
-      padding: 0;
-      outline: 0;
-      color: inherit;
-      font-weight: $font-semibold;
-    }
+    color: pvar(--greyForegroundColor);
   }
 }
 
@@ -150,47 +94,26 @@ p-calendar {
   display: block;
 
   ::ng-deep {
-    input,
-    .ui-calendar {
+    .p-calendar {
       width: 100%;
     }
 
-    input {
+    .p-inputtext {
       @include peertube-input-text(100%);
       color: #000;
     }
   }
 }
 
-// columns for the video
-.col-video-edit {
-  @include make-col-ready();
-
-  @include media-breakpoint-up(md) {
-    @include make-col(7);
-
-    & + .col-video-edit {
-      @include make-col(5);
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    @include make-col(8);
+.form-columns {
+  display: grid;
 
-    & + .col-video-edit {
-      @include make-col(4);
-    }
-  }
+  grid-template-columns: 66% 1fr;
+  grid-gap: 30px;
 }
 
-:host-context(.expanded) {
-  .col-video-edit {
-    @include media-breakpoint-up(md) {
-      @include make-col(8);
-
-      & + .col-video-edit {
-        @include make-col(4);
-      }
-    }
+@include on-small-main-col {
+  .form-columns {
+    grid-template-columns: 1fr;
   }
 }