X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-edit%2Fvideo-add.component.scss;h=1316e09e4f7f1c1a93a00183cbed4dfbfce42414;hb=6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12;hp=de7dec65d37f732d2408125facf961986a07a717;hpb=8c40b7dc28fcbfee63573ea666ea1a389f6a2d82;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index de7dec65d..1316e09e4 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -1,92 +1,89 @@
 @import '_variables';
 @import '_mixins';
 
-.upload-video-container {
-  border-radius: 3px;
-  background-color: #F7F7F7;
-  border: 3px solid #EAEAEA;
-  width: 100%;
-  height: 440px;
-  margin-top: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+$border-width: 3px;
+$border-type: solid;
+$border-color: #EAEAEA;
+$nav-link-height: 40px;
 
-  .peertube-select-container {
-    @include peertube-select-container(190px);
-  }
+.margin-content {
+  padding-top: 50px;
+}
 
-  .upload-video {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.alert {
+  font-size: 15px;
+}
 
-    .form-group-channel {
-      margin-bottom: 20px;
-    }
+::ng-deep .video-add-nav {
+  border-bottom: $border-width $border-type $border-color;
+  margin: 50px 0 0 0 !important;
 
-    .icon.icon-upload {
-      @include icon(90px);
-      margin-bottom: 25px;
-      cursor: default;
+  &.hide-nav {
+    display: none !important;
+  }
 
-      background-image: url('../../../assets/images/video/upload.svg');
-    }
+  a.nav-link {
+    @include disable-default-a-behaviour;
 
-    .button-file {
-      @include peertube-button-file(auto);
+    margin-bottom: -$border-width;
+    height: $nav-link-height !important;
+    padding: 0 30px !important;
+    font-size: 15px;
 
-      min-width: 190px;
-      margin-bottom: 45px;
+    &.active {
+      border: $border-width $border-type $border-color;
+      border-bottom: none;
+      background-color: var(--submenuColor) !important;
+
+      span {
+        border-bottom: 2px solid var(--mainColor);
+        font-weight: $font-bold;
+      }
     }
   }
 }
 
-.upload-progress-cancel {
-  display: flex;
-  margin-top: 25px;
-  margin-bottom: 40px;
-
-  p-progressBar {
-    flex-grow: 1;
-
-    /deep/ .ui-progressbar {
-      font-size: 15px !important;
-      color: #fff !important;
-      height: 30px !important;
-      line-height: 30px !important;
-      border-radius: 3px !important;
-      background-color: rgba(11, 204, 41, 0.16) !important;
-
-      .ui-progressbar-value {
-        background-color: #0BCC29 !important;
-      }
+::ng-deep .upload-video-container {
+  border: $border-width $border-type $border-color;
+  border-top: transparent;
 
-      .ui-progressbar-label {
-        text-align: left;
-        padding-left: 18px;
-        margin-top: 0 !important;
-      }
-    }
+  background-color: var(--submenuColor);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  width: 100%;
+  min-height: 440px;
+  padding-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    &.processing {
-      /deep/ .ui-progressbar-label {
-        // Same color as background to hide "100%"
-        color: rgba(11, 204, 41, 0.16) !important;
+  &.dragover {
+    border: 3px dashed var(--mainColor);
+  }
+}
 
-        &::before {
-          content: 'Processing...';
-          color: #fff;
-        }
-      }
+@mixin nav-scroll {
+  ::ng-deep .video-add-nav {
+    height: #{$nav-link-height + $border-width * 2};
+    overflow-x: auto;
+    white-space: nowrap;
+    flex-wrap: unset;
+
+    /* Hide active tab style to not have a moving tab effect */
+    a.nav-link.active {
+      border: none;
+      background-color: var(--mainBackgroundColor) !important;
     }
   }
+}
 
-  input {
-    @include peertube-button;
-    @include grey-button;
+/* Make .video-add-nav tabs scrollable on small devices */
+@media screen and (max-width: $small-view) {
+  @include nav-scroll();
+}
 
-    margin-left: 10px;
+@media screen and (max-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include nav-scroll();
   }
 }
-