diff options
Diffstat (limited to 'client/src/app/videos/+video-edit/shared/video-edit.component.scss')
-rw-r--r-- | client/src/app/videos/+video-edit/shared/video-edit.component.scss | 148 |
1 files changed, 111 insertions, 37 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 9ee0c520c..d363499ce 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss | |||
@@ -1,48 +1,126 @@ | |||
1 | .btn-file { | 1 | .video-edit { |
2 | position: relative; | 2 | height: 100%; |
3 | overflow: hidden; | 3 | |
4 | display: block; | 4 | .form-group { |
5 | margin-bottom: 25px; | ||
6 | } | ||
7 | |||
8 | input { | ||
9 | @include peertube-input-text(100%); | ||
10 | display: block; | ||
11 | |||
12 | &[type=checkbox] { | ||
13 | outline: 0; | ||
14 | } | ||
15 | } | ||
16 | |||
17 | select { | ||
18 | @include peertube-select(100%); | ||
19 | } | ||
20 | |||
21 | input, select { | ||
22 | font-size: 15px | ||
23 | } | ||
24 | |||
25 | .form-group-checkbox { | ||
26 | display: flex; | ||
27 | align-items: center; | ||
28 | |||
29 | label { | ||
30 | font-weight: $font-regular; | ||
31 | margin: 0; | ||
32 | } | ||
33 | |||
34 | input { | ||
35 | width: 10px; | ||
36 | margin-right: 10px; | ||
37 | } | ||
38 | } | ||
5 | } | 39 | } |
6 | 40 | ||
7 | .btn-file input[type=file] { | 41 | .submit-container { |
8 | position: absolute; | ||
9 | top: 0; | ||
10 | right: 0; | ||
11 | min-width: 100%; | ||
12 | min-height: 100%; | ||
13 | font-size: 100px; | ||
14 | text-align: right; | 42 | text-align: right; |
15 | filter: alpha(opacity=0); | 43 | position: relative; |
16 | opacity: 0; | 44 | bottom: $button-height; |
17 | outline: none; | ||
18 | background: white; | ||
19 | cursor: inherit; | ||
20 | display: block; | ||
21 | } | ||
22 | 45 | ||
23 | .form-group { | 46 | .message-submit { |
24 | margin-bottom: 10px; | 47 | display: inline-block; |
25 | } | 48 | margin-right: 25px; |
49 | |||
50 | color: #585858; | ||
51 | font-size: 15px; | ||
52 | } | ||
53 | |||
54 | .submit-button { | ||
55 | @include peertube-button; | ||
56 | @include orange-button; | ||
57 | |||
58 | display: inline-block; | ||
26 | 59 | ||
27 | div.tags { | 60 | input { |
28 | height: 40px; | 61 | cursor: inherit; |
29 | font-size: 20px; | 62 | background-color: inherit; |
30 | margin-top: 20px; | 63 | border: none; |
64 | padding: 0; | ||
65 | outline: 0; | ||
66 | } | ||
31 | 67 | ||
32 | .tag { | 68 | .icon.icon-validate { |
33 | margin-right: 10px; | 69 | @include icon(20px); |
34 | 70 | ||
35 | .remove { | 71 | cursor: inherit; |
36 | cursor: pointer; | 72 | position: relative; |
73 | top: -1px; | ||
74 | margin-right: 4px; | ||
75 | background-image: url('../../../../assets/images/global/validate.svg'); | ||
37 | } | 76 | } |
38 | } | 77 | } |
39 | } | 78 | } |
40 | 79 | ||
41 | div.file-to-upload { | 80 | /deep/ { |
42 | height: 40px; | 81 | .ng2-tag-input { |
82 | border: none !important; | ||
83 | } | ||
43 | 84 | ||
44 | .glyphicon-remove { | 85 | .ng2-tags-container { |
45 | cursor: pointer; | 86 | display: flex; |
87 | align-items: center; | ||
88 | border: 1px solid #C6C6C6; | ||
89 | border-radius: 3px; | ||
90 | padding: 5px !important; | ||
91 | } | ||
92 | |||
93 | tag { | ||
94 | background-color: #E5E5E5 !important; | ||
95 | border-radius: 3px !important; | ||
96 | font-size: 15px !important; | ||
97 | color: #000 !important; | ||
98 | height: 30px !important; | ||
99 | line-height: 30px !important; | ||
100 | margin: 0 5px 0 0 !important; | ||
101 | cursor: default !important; | ||
102 | padding: 0 8px 0 10px !important; | ||
103 | |||
104 | div { | ||
105 | height: 100% !important; | ||
106 | } | ||
107 | } | ||
108 | |||
109 | delete-icon { | ||
110 | cursor: pointer !important; | ||
111 | height: auto !important; | ||
112 | vertical-align: middle !important; | ||
113 | padding-left: 6px !important; | ||
114 | |||
115 | svg { | ||
116 | height: auto !important; | ||
117 | vertical-align: middle !important; | ||
118 | fill: #585858 !important; | ||
119 | } | ||
120 | |||
121 | &:hover { | ||
122 | transform: none !important; | ||
123 | } | ||
46 | } | 124 | } |
47 | } | 125 | } |
48 | 126 | ||
@@ -50,7 +128,3 @@ div.file-to-upload { | |||
50 | font-size: 0.8em; | 128 | font-size: 0.8em; |
51 | font-style: italic; | 129 | font-style: italic; |
52 | } | 130 | } |
53 | |||
54 | .label-tags { | ||
55 | margin-bottom: 0; | ||
56 | } | ||