Merge branch 'release/4.0.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / sass / player / upnext.scss

diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index ecce22aa80a63674facc15cfc00c2e2cb5f077a1..2618d79d416ddd217cf05f6ead74628e6e089e66 100644 (file)
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -4,48 +4,48 @@ $browser-context: 16;
   @return #{$pixels/$context}em;
 }
 
-@mixin transition($string: $transition--default) {
-  transition: $string;
-}
-
 .video-js {
 
   .vjs-upnext-content {
+    transition: opacity 0.1s;
+
     font-size: 1.8em;
     pointer-events: auto;
     position: absolute;
     top: 0;
     bottom: 0;
-    background: rgba(0,0,0,0.6);
+    background: rgba(0, 0, 0, 0.6);
     width: 100%;
-
-    @include transition(opacity 0.1s);
   }
 
   .vjs-upnext-top {
+    margin: 0 auto;
     width: 100%;
     position: absolute;
-    margin-left: auto;
-    margin-right: auto;
     bottom: 50%;
     margin-bottom: 60px;
   }
 
   .vjs-upnext-bottom {
+    margin: 0 auto;
     width: 100%;
     position: absolute;
-    margin-left: auto;
-    margin-right: auto;
     top: 50%;
     margin-top: 52px;
   }
 
+  .vjs-upnext-suspended,
   .vjs-upnext-cancel {
     display: block;
     float: none;
     text-align: center;
   }
 
+  .vjs-upnext-suspended {
+    font-size: 50%;
+    margin-top: 1rem;
+  }
+
   .vjs-upnext-headtext {
     display: block;
     font-size: 14px;
@@ -71,7 +71,7 @@ $browser-context: 16;
     float: none;
     padding: 10px !important;
     font-size: 16px !important;
-    border: none;
+    border: 0;
   }
 
   .vjs-upnext-cancel-button,
@@ -80,7 +80,7 @@ $browser-context: 16;
   }
 
   .vjs-upnext-cancel-button:hover {
-    background-color: rgba(255,255,255,0.25);
+    background-color: rgba(255, 255, 255, 0.25);
     border-radius: 2px;
   }
 
@@ -89,13 +89,14 @@ $browser-context: 16;
   }
 
   .vjs-upnext-autoplay-icon {
+    transition: stroke-dasharray 0.1s cubic-bezier(0.4, 0, 1, 1);
+
     position: absolute;
     top: 50%;
     left: 50%;
     width: 98px;
     height: 98px;
     margin: -49px 0 0 -49px;
-    transition: stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1);
     cursor: pointer;
   }