diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-11 10:02:17 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-11 10:02:17 +0100 |
commit | 20206dfb0bfe1537912ae0a5b99f2fa40c881d33 (patch) | |
tree | 1b51dca6bce2d0dc1c2c667dd13af1ddc50baca1 /client/src/sass | |
parent | 9b7d1c723d7c11572d91d606954997e413f56a1f (diff) | |
download | PeerTube-20206dfb0bfe1537912ae0a5b99f2fa40c881d33.tar.gz PeerTube-20206dfb0bfe1537912ae0a5b99f2fa40c881d33.tar.zst PeerTube-20206dfb0bfe1537912ae0a5b99f2fa40c881d33.zip |
Fix loading spinner in player
Diffstat (limited to 'client/src/sass')
-rw-r--r-- | client/src/sass/application.scss | 58 | ||||
-rw-r--r-- | client/src/sass/video-js-custom.scss | 14 |
2 files changed, 30 insertions, 42 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 6352dd4fb..9a93411e9 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss | |||
@@ -107,35 +107,6 @@ label { | |||
107 | font-weight: bold; | 107 | font-weight: bold; |
108 | } | 108 | } |
109 | 109 | ||
110 | // On small screen, menu is absolute | ||
111 | @media screen and (max-width: 800px) { | ||
112 | .title-menu-left { | ||
113 | width: 150px !important; | ||
114 | position: absolute !important; | ||
115 | z-index: 10000; | ||
116 | } | ||
117 | |||
118 | .main-col { | ||
119 | margin-left: 0; | ||
120 | |||
121 | &, &.expanded { | ||
122 | .margin-content { | ||
123 | margin-left: 10px; | ||
124 | margin-right: 10px; | ||
125 | } | ||
126 | |||
127 | .sub-menu { | ||
128 | padding-left: 10px; | ||
129 | margin-bottom: 10px; | ||
130 | } | ||
131 | |||
132 | input[type=text], input[type=password] { | ||
133 | width: 100% !important; | ||
134 | } | ||
135 | } | ||
136 | } | ||
137 | } | ||
138 | |||
139 | // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d | 110 | // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d |
140 | .glyphicon-refresh-animate { | 111 | .glyphicon-refresh-animate { |
141 | -animation: spin .7s infinite linear; | 112 | -animation: spin .7s infinite linear; |
@@ -330,3 +301,32 @@ p-datatable { | |||
330 | @include peertube-button-link; | 301 | @include peertube-button-link; |
331 | @include grey-button; | 302 | @include grey-button; |
332 | } | 303 | } |
304 | |||
305 | // On small screen, menu is absolute | ||
306 | @media screen and (max-width: 800px) { | ||
307 | .title-menu-left { | ||
308 | width: 150px !important; | ||
309 | position: absolute !important; | ||
310 | z-index: 10000; | ||
311 | } | ||
312 | |||
313 | .main-col { | ||
314 | margin-left: 0; | ||
315 | |||
316 | &, &.expanded { | ||
317 | .margin-content { | ||
318 | margin-left: 10px; | ||
319 | margin-right: 10px; | ||
320 | } | ||
321 | |||
322 | .sub-menu { | ||
323 | padding-left: 10px; | ||
324 | margin-bottom: 10px; | ||
325 | } | ||
326 | |||
327 | input[type=text], input[type=password] { | ||
328 | width: 100% !important; | ||
329 | } | ||
330 | } | ||
331 | } | ||
332 | } | ||
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index 2fcfc6203..fe9495e77 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss | |||
@@ -28,10 +28,6 @@ $control-bar-height: 34px; | |||
28 | $big-play-width: 3em; | 28 | $big-play-width: 3em; |
29 | $big-play-height: 1.5em; | 29 | $big-play-height: 1.5em; |
30 | 30 | ||
31 | line-height: $big-play-height; | ||
32 | height: $big-play-height; | ||
33 | width: $big-play-width; | ||
34 | |||
35 | border: 0; | 31 | border: 0; |
36 | border-radius: 0.3em; | 32 | border-radius: 0.3em; |
37 | 33 | ||
@@ -39,10 +35,7 @@ $control-bar-height: 34px; | |||
39 | top: 50%; | 35 | top: 50%; |
40 | margin-left: -($big-play-width / 2); | 36 | margin-left: -($big-play-width / 2); |
41 | margin-top: -($big-play-height / 2); | 37 | margin-top: -($big-play-height / 2); |
42 | } | 38 | background-color: transparent !important; |
43 | |||
44 | &:hover .vjs-big-play-button { | ||
45 | background-color: transparent; | ||
46 | } | 39 | } |
47 | 40 | ||
48 | .vjs-control-bar, | 41 | .vjs-control-bar, |
@@ -321,13 +314,8 @@ $control-bar-height: 34px; | |||
321 | 314 | ||
322 | // Thanks: https://projects.lukehaas.me/css-loaders/ | 315 | // Thanks: https://projects.lukehaas.me/css-loaders/ |
323 | .vjs-loading-spinner { | 316 | .vjs-loading-spinner { |
324 | margin: 0 !important; | ||
325 | //position: absolute; | ||
326 | // 15px is the nav bar height | ||
327 | top: calc(50% - 15px); | ||
328 | left: 50%; | 317 | left: 50%; |
329 | font-size: 10px; | 318 | font-size: 10px; |
330 | position: relative; | ||
331 | text-indent: -9999em; | 319 | text-indent: -9999em; |
332 | border: 0.7em solid rgba(255, 255, 255, 0.2); | 320 | border: 0.7em solid rgba(255, 255, 255, 0.2); |
333 | border-left-color: #ffffff; | 321 | border-left-color: #ffffff; |