]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/videos/+video-edit/video-add.component.scss
Add poster for video watch
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-edit / video-add.component.scss
1 @import '_variables';
2 @import '_mixins';
3
4 .upload-video-container {
5 border-radius: 3px;
6 background-color: #F7F7F7;
7 border: 3px solid #EAEAEA;
8 width: 100%;
9 height: 440px;
10 text-align: center;
11 margin-top: 40px;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15
16 .upload-video {
17 display: flex;
18 flex-direction: column;
19 align-items: center;
20
21 .icon.icon-upload {
22 @include icon(90px);
23 margin-bottom: 25px;
24 cursor: default;
25
26 background-image: url('../../../assets/images/video/upload.svg');
27 }
28
29 .button-file {
30 position: relative;
31 overflow: hidden;
32 display: inline-block;
33 margin-bottom: 70px;
34
35 @include peertube-button;
36 @include orange-button;
37
38 input[type=file] {
39 position: absolute;
40 top: 0;
41 right: 0;
42 min-width: 100%;
43 min-height: 100%;
44 font-size: 100px;
45 text-align: right;
46 filter: alpha(opacity=0);
47 opacity: 0;
48 outline: none;
49 background: white;
50 cursor: inherit;
51 display: block;
52 }
53 }
54
55 select {
56 @include peertube-select(auto);
57
58 display: inline-block;
59 font-size: 15px
60 }
61 }
62 }
63
64 p-progressBar {
65 /deep/ .ui-progressbar {
66 margin-top: 25px !important;
67 margin-bottom: 40px !important;
68 font-size: 15px !important;
69 color: #fff !important;
70 height: 30px !important;
71 line-height: 30px !important;
72 border-radius: 3px !important;
73 background-color: rgba(11, 204, 41, 0.16) !important;
74
75 .ui-progressbar-value {
76 background-color: #0BCC29 !important;
77 }
78
79 .ui-progressbar-label {
80 text-align: left;
81 padding-left: 18px;
82 margin-top: 0 !important;
83 }
84 }
85
86 &.processing {
87 /deep/ .ui-progressbar-label {
88 // Same color as background to hide "100%"
89 color: rgba(11, 204, 41, 0.16) !important;
90
91 &::before {
92 content: 'Processing...';
93 color: #fff;
94 }
95 }
96 }
97 }
98
99