diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-10-09 14:28:44 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-10-09 14:28:44 +0200 |
commit | a685e25ca05f08ad1b3f7fbaccc8744727bd8d27 (patch) | |
tree | e50fbc2f260a0017113c4668c3c0f3d2fd76ab87 /client/src/app/videos/video-watch/video-watch.component.scss | |
parent | 2ed6a0aedc2d2f6b1ac2fd9a1ac137772831f713 (diff) | |
download | PeerTube-a685e25ca05f08ad1b3f7fbaccc8744727bd8d27.tar.gz PeerTube-a685e25ca05f08ad1b3f7fbaccc8744727bd8d27.tar.zst PeerTube-a685e25ca05f08ad1b3f7fbaccc8744727bd8d27.zip |
Try to optimize frontend
Diffstat (limited to 'client/src/app/videos/video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/videos/video-watch/video-watch.component.scss | 245 |
1 files changed, 0 insertions, 245 deletions
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss deleted file mode 100644 index 69661747c..000000000 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ /dev/null | |||
@@ -1,245 +0,0 @@ | |||
1 | #video-container { | ||
2 | width: 100%; | ||
3 | height: 100%; | ||
4 | } | ||
5 | |||
6 | #video-not-found { | ||
7 | height: 300px; | ||
8 | line-height: 300px; | ||
9 | margin-top: 50px; | ||
10 | text-align: center; | ||
11 | font-weight: bold; | ||
12 | } | ||
13 | |||
14 | .embed-responsive { | ||
15 | height: 500px; | ||
16 | |||
17 | @media screen and (max-width: 600px) { | ||
18 | height: 300px; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | #torrent-info { | ||
23 | font-size: 10px; | ||
24 | margin-top: 10px; | ||
25 | text-align: center; | ||
26 | |||
27 | div { | ||
28 | min-width: 60px; | ||
29 | } | ||
30 | } | ||
31 | |||
32 | #video-info { | ||
33 | .video-name-views { | ||
34 | font-weight: bold; | ||
35 | font-size: 18px; | ||
36 | height: $video-watch-title-height; | ||
37 | line-height: $video-watch-title-height; | ||
38 | |||
39 | .video-name { | ||
40 | padding-left: $video-watch-info-padding-left; | ||
41 | } | ||
42 | |||
43 | .video-views { | ||
44 | text-align: right; | ||
45 | // Keep a symmetry with the video name | ||
46 | padding-right: $video-watch-info-padding-left | ||
47 | } | ||
48 | |||
49 | } | ||
50 | |||
51 | .video-small-blocks { | ||
52 | height: $video-watch-info-height; | ||
53 | color: $video-watch-info-color; | ||
54 | border-color: $video-watch-border-color; | ||
55 | border-width: 1px 0px; | ||
56 | border-style: solid; | ||
57 | |||
58 | .video-small-block { | ||
59 | height: $video-watch-info-height; | ||
60 | display: flex; | ||
61 | flex-direction: column; | ||
62 | justify-content: center; | ||
63 | text-align: center; | ||
64 | |||
65 | a { | ||
66 | cursor: pointer; | ||
67 | transition: color 0.3s; | ||
68 | white-space: nowrap; | ||
69 | overflow: hidden; | ||
70 | text-overflow: ellipsis; | ||
71 | |||
72 | &, &:hover { | ||
73 | color: inherit; | ||
74 | text-decoration:none; | ||
75 | } | ||
76 | |||
77 | &:hover { | ||
78 | color: #000 !important; | ||
79 | } | ||
80 | |||
81 | &:hover > .glyphicon { | ||
82 | opacity: 1 !important; | ||
83 | } | ||
84 | } | ||
85 | |||
86 | .option .glyphicon { | ||
87 | font-size: 22px; | ||
88 | color: inherit; | ||
89 | opacity: 0.15; | ||
90 | margin-bottom: 10px; | ||
91 | transition: opacity 0.3s; | ||
92 | } | ||
93 | |||
94 | .video-small-block-text { | ||
95 | font-size: 15px; | ||
96 | font-weight: bold; | ||
97 | } | ||
98 | } | ||
99 | |||
100 | .video-small-block:not(:last-child) { | ||
101 | border-width: 0 1px 0 0; | ||
102 | border-color: $video-watch-border-color; | ||
103 | border-style: solid; | ||
104 | } | ||
105 | |||
106 | .video-small-block-author, .video-small-block-more { | ||
107 | a.option { | ||
108 | display: block; | ||
109 | |||
110 | .glyphicon { | ||
111 | display: block; | ||
112 | } | ||
113 | } | ||
114 | } | ||
115 | |||
116 | .video-small-block-share, .video-small-block-more { | ||
117 | a.option { | ||
118 | display: block; | ||
119 | |||
120 | .glyphicon { | ||
121 | display: block; | ||
122 | } | ||
123 | } | ||
124 | } | ||
125 | |||
126 | .video-small-block-more .video-small-block-dropdown { | ||
127 | position: relative; | ||
128 | |||
129 | .dropdown-item .glyphicon { | ||
130 | margin-right: 5px; | ||
131 | } | ||
132 | } | ||
133 | |||
134 | .video-small-block-rating { | ||
135 | |||
136 | .video-small-block-like { | ||
137 | margin-bottom: 10px; | ||
138 | } | ||
139 | |||
140 | .video-small-block-text { | ||
141 | vertical-align: top; | ||
142 | } | ||
143 | |||
144 | .glyphicon { | ||
145 | font-size: 18px; | ||
146 | margin: 0 10px 0 0; | ||
147 | opacity: 0.3; | ||
148 | } | ||
149 | |||
150 | .interactive { | ||
151 | cursor: pointer; | ||
152 | transition: opacity, color 0.3s; | ||
153 | |||
154 | &.activated, &:hover { | ||
155 | opacity: 1; | ||
156 | color: #000; | ||
157 | } | ||
158 | } | ||
159 | } | ||
160 | } | ||
161 | |||
162 | .video-details { | ||
163 | margin-top: 30px; | ||
164 | |||
165 | .video-details-date-description { | ||
166 | padding-left: $video-watch-info-padding-left; | ||
167 | |||
168 | .video-details-date { | ||
169 | font-weight: bold; | ||
170 | margin-bottom: 30px; | ||
171 | } | ||
172 | } | ||
173 | |||
174 | .video-details-attributes { | ||
175 | font-weight: bold; | ||
176 | font-size: 12px; | ||
177 | |||
178 | .video-details-attribute-label { | ||
179 | color: $video-watch-info-color; | ||
180 | display: inline-block; | ||
181 | width: 60px; | ||
182 | margin-right: 5px; | ||
183 | } | ||
184 | } | ||
185 | |||
186 | .video-details-tags { | ||
187 | display: inline-block; | ||
188 | |||
189 | a { | ||
190 | display: inline-block; | ||
191 | margin-right: 3px; | ||
192 | font-size: 11px; | ||
193 | } | ||
194 | } | ||
195 | } | ||
196 | |||
197 | @media screen and (max-width: 400px) { | ||
198 | .video-name-views { | ||
199 | font-size: 16px !important; | ||
200 | } | ||
201 | } | ||
202 | |||
203 | @media screen and (max-width: 800px) { | ||
204 | .video-name-views { | ||
205 | .video-name { | ||
206 | padding-left: 5px; | ||
207 | padding-right: 0px; | ||
208 | } | ||
209 | |||
210 | .video-views { | ||
211 | padding-left: 0px; | ||
212 | padding-right: 5px; | ||
213 | } | ||
214 | } | ||
215 | |||
216 | .video-small-blocks { | ||
217 | a, .video-small-block-text { | ||
218 | font-size: 13px !important; | ||
219 | } | ||
220 | |||
221 | .glyphicon { | ||
222 | font-size: 18px !important; | ||
223 | } | ||
224 | |||
225 | .video-small-block-author { | ||
226 | padding-left: 10px; | ||
227 | } | ||
228 | } | ||
229 | |||
230 | .video-details { | ||
231 | .video-details-date-description { | ||
232 | padding-left: 10px; | ||
233 | font-size: 13px !important; | ||
234 | } | ||
235 | |||
236 | .video-details-attributes { | ||
237 | font-size: 11px !important; | ||
238 | |||
239 | .video-details-attribute-label { | ||
240 | width: 50px; | ||
241 | } | ||
242 | } | ||
243 | } | ||
244 | } | ||
245 | } | ||