diff options
Diffstat (limited to 'client/src/app/videos/+video-edit/video-add.component.scss')
-rw-r--r-- | client/src/app/videos/+video-edit/video-add.component.scss | 117 |
1 files changed, 35 insertions, 82 deletions
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 c0b5f3d07..a811b9cf0 100644 --- a/client/src/app/videos/+video-edit/video-add.component.scss +++ b/client/src/app/videos/+video-edit/video-add.component.scss | |||
@@ -1,101 +1,54 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | .upload-video-container { | 4 | $border-width: 3px; |
5 | border-radius: 3px; | 5 | $border-type: solid; |
6 | background-color: #F7F7F7; | 6 | $border-color: #EAEAEA; |
7 | border: 3px solid #EAEAEA; | ||
8 | width: 100%; | ||
9 | height: 440px; | ||
10 | margin-top: 40px; | ||
11 | display: flex; | ||
12 | justify-content: center; | ||
13 | align-items: center; | ||
14 | 7 | ||
15 | .peertube-select-container { | 8 | $background-color: #F7F7F7; |
16 | @include peertube-select-container(190px); | ||
17 | } | ||
18 | |||
19 | .upload-video { | ||
20 | display: flex; | ||
21 | flex-direction: column; | ||
22 | align-items: center; | ||
23 | |||
24 | .form-group-channel { | ||
25 | margin-bottom: 20px; | ||
26 | } | ||
27 | |||
28 | .icon.icon-upload { | ||
29 | @include icon(90px); | ||
30 | margin-bottom: 25px; | ||
31 | cursor: default; | ||
32 | |||
33 | background-image: url('../../../assets/images/video/upload.svg'); | ||
34 | } | ||
35 | |||
36 | .button-file { | ||
37 | @include peertube-button-file(auto); | ||
38 | |||
39 | min-width: 190px; | ||
40 | } | ||
41 | 9 | ||
42 | .button-file-extension { | 10 | /deep/ tabset.root-tabset.video-add-tabset { |
43 | display: block; | 11 | &.hide-nav .nav { |
44 | font-size: 12px; | 12 | display: none !important; |
45 | margin-top: 5px; | ||
46 | } | ||
47 | } | ||
48 | |||
49 | .form-group-channel { | ||
50 | margin-top: 35px; | ||
51 | } | 13 | } |
52 | } | ||
53 | 14 | ||
54 | .upload-progress-cancel { | 15 | & > .nav { |
55 | display: flex; | ||
56 | margin-top: 25px; | ||
57 | margin-bottom: 40px; | ||
58 | 16 | ||
59 | p-progressBar { | 17 | border-bottom: $border-width $border-type $border-color; |
60 | flex-grow: 1; | 18 | margin: 0 !important; |
61 | |||
62 | /deep/ .ui-progressbar { | ||
63 | font-size: 15px !important; | ||
64 | color: #fff !important; | ||
65 | height: 30px !important; | ||
66 | line-height: 30px !important; | ||
67 | border-radius: 3px !important; | ||
68 | background-color: rgba(11, 204, 41, 0.16) !important; | ||
69 | |||
70 | .ui-progressbar-value { | ||
71 | background-color: #0BCC29 !important; | ||
72 | } | ||
73 | 19 | ||
74 | .ui-progressbar-label { | 20 | & > li { |
75 | text-align: left; | 21 | margin-bottom: -$border-width; |
76 | padding-left: 18px; | ||
77 | margin-top: 0 !important; | ||
78 | } | ||
79 | } | 22 | } |
80 | 23 | ||
81 | &.processing { | 24 | .nav-link { |
82 | /deep/ .ui-progressbar-label { | 25 | height: 40px !important; |
83 | // Same color as background to hide "100%" | 26 | padding: 0 30px !important; |
84 | color: rgba(11, 204, 41, 0.16) !important; | 27 | font-size: 15px; |
28 | |||
29 | &.active { | ||
30 | border: $border-width $border-type $border-color; | ||
31 | border-bottom: none; | ||
32 | background-color: $background-color !important; | ||
85 | 33 | ||
86 | &::before { | 34 | span { |
87 | content: 'Processing...'; | 35 | border-bottom: 2px solid #F1680D; |
88 | color: #fff; | 36 | font-weight: $font-bold; |
89 | } | 37 | } |
90 | } | 38 | } |
91 | } | 39 | } |
92 | } | 40 | } |
93 | 41 | ||
94 | input { | 42 | .upload-video-container { |
95 | @include peertube-button; | 43 | border: $border-width $border-type $border-color; |
96 | @include grey-button; | 44 | border-top: none; |
97 | 45 | ||
98 | margin-left: 10px; | 46 | background-color: $background-color; |
47 | border-radius: 3px; | ||
48 | width: 100%; | ||
49 | height: 440px; | ||
50 | display: flex; | ||
51 | justify-content: center; | ||
52 | align-items: center; | ||
99 | } | 53 | } |
100 | } | 54 | } \ No newline at end of file |
101 | |||