Refactor torrent-or-magnet divider in video import

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

diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index cf1725ef9ee22a37affb1311a8a8f9984bfee8b2..a4f87b0b845eaa098f9d8f7a4bb4962518e3c366 100644 (file)
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -1,46 +1,18 @@
 @import 'variables';
 @import 'mixins';
 
-.peertube-select-container {
-  @include peertube-select-container(190px);
-}
-
-.alert.alert-danger {
-  text-align: center;
-
-  & > div {
-    font-weight: $font-semibold;
-  }
-}
-
-.upload-video {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
+.first-step-block {
   .form-group-channel {
     margin-bottom: 20px;
     margin-top: 35px;
   }
 
-  .icon.icon-upload {
-    @include icon(90px);
-    margin-bottom: 25px;
-    cursor: default;
-
-    background-image: url('../../../../assets/images/video/upload.svg');
-  }
-
-  .button-file {
-    @include peertube-button-file(auto);
-
-    min-width: 190px;
+  .audio-image-info {
+    margin-bottom: 10px;
   }
 
-  .button-file-extension {
-    display: block;
-    font-size: 12px;
-    margin-top: 5px;
+  .audio-preview {
+    margin: 30px 0;
   }
 }
 
@@ -49,37 +21,21 @@
   margin-top: 25px;
   margin-bottom: 40px;
 
-  p-progressBar {
+  .progress {
+    @include 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;
-      }
-
-      .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;
-        }
+    height: 30px;
+    font-size: 15px;
+    background-color: rgba(11, 204, 41, 0.16);
+
+    .progress-bar {
+      background-color: $green;
+      line-height: 30px;
+      text-align: left;
+      font-weight: $font-bold;
+
+      span {
+        margin-left: 18px;
       }
     }
   }