Update client according to new model paths

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

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 78140e0e9cde6674b7a44bf15738af794b5b0737..892520e408afba4ebcbb2f984939e411e4dfb767 100644 (file)
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -1,99 +1,58 @@
 @import '_variables';
 @import '_mixins';
 
-.upload-video-container {
-  border-radius: 3px;
-  background-color: #F7F7F7;
-  border: 3px solid #EAEAEA;
-  width: 100%;
-  height: 440px;
-  text-align: center;
-  margin-top: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+$border-width: 3px;
+$border-type: solid;
+$border-color: #EAEAEA;
 
-  .upload-video {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .icon.icon-upload {
-      @include icon(90px);
-      margin-bottom: 25px;
-      cursor: default;
+$background-color:  #F7F7F7;
 
-      background-image: url('../../../assets/images/video/upload.svg');
-    }
+/deep/ .root-tabset.video-add-tabset {
+  &.hide-nav .nav {
+    display: none !important;
+  }
 
-    .button-file {
-      position: relative;
-      overflow: hidden;
-      display: inline-block;
-      margin-bottom: 70px;
+  & > .nav {
 
-      @include peertube-button;
-      @include orange-button;
+    border-bottom: $border-width $border-type $border-color;
+    margin: 0 !important;
 
-      input[type=file] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        min-width: 100%;
-        min-height: 100%;
-        font-size: 100px;
-        text-align: right;
-        filter: alpha(opacity=0);
-        opacity: 0;
-        outline: none;
-        background: white;
-        cursor: inherit;
-        display: block;
-      }
+    & > li {
+      margin-bottom: -$border-width;
     }
 
-    select {
-      @include peertube-select(auto);
+    a.nav-link {
+      @include disable-default-a-behaviour;
 
-      display: inline-block;
-      font-size: 15px
-    }
-  }
-}
+      color: #000;
+      height: 40px !important;
+      padding: 0 30px !important;
+      font-size: 15px;
 
-p-progressBar {
-  /deep/ .ui-progressbar {
-    margin-top: 25px !important;
-    margin-bottom: 40px !important;
-    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;
+      &.active {
+        border: $border-width $border-type $border-color;
+        border-bottom: none;
+        background-color: $background-color !important;
 
-    .ui-progressbar-value {
-      background-color: #0BCC29 !important;
-    }
-
-    .ui-progressbar-label {
-      text-align: left;
-      padding-left: 18px;
-      margin-top: 0 !important;
-    }
-  }
-
-  &.processing {
-    /deep/ .ui-progressbar-label {
-      // Same color as background to hide "100%"
-      color: rgba(11, 204, 41, 0.16) !important;
-
-      &::before {
-        content: 'Processing...';
-        color: #fff;
+        span {
+          border-bottom: 2px solid #F1680D;
+          font-weight: $font-bold;
+        }
       }
     }
   }
-}
 
+  .upload-video-container {
+    border: $border-width $border-type $border-color;
+    border-top: none;
 
+    background-color: $background-color;
+    border-radius: 3px;
+    width: 100%;
+    min-height: 440px;
+    padding-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
\ No newline at end of file