aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/video-js-custom.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-03 15:11:46 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 15:18:24 +0200
commit33d7855229f45d73a767566f1dbcb87709211ebf (patch)
tree103fa08e917fa64ba000bae7e2fd7255ba294a0e /client/src/sass/video-js-custom.scss
parentc6352f2c64f3c1ad54f8500f493587cdce3d33c9 (diff)
downloadPeerTube-33d7855229f45d73a767566f1dbcb87709211ebf.tar.gz
PeerTube-33d7855229f45d73a767566f1dbcb87709211ebf.tar.zst
PeerTube-33d7855229f45d73a767566f1dbcb87709211ebf.zip
Improve first play
Diffstat (limited to 'client/src/sass/video-js-custom.scss')
-rw-r--r--client/src/sass/video-js-custom.scss40
1 files changed, 32 insertions, 8 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 2c589553c..c533bd116 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -56,11 +56,11 @@ $setting-transition-easing: ease-out;
56 outline: 0; 56 outline: 0;
57 font-size: 6em; 57 font-size: 6em;
58 58
59 $big-play-width: 1.5em; 59 $big-play-width: 1.2em;
60 $big-play-height: 1em; 60 $big-play-height: 1.2em;
61 61
62 border: 0; 62 border: 0;
63 border-radius: 0.3em; 63 border-radius: 100%;
64 64
65 left: 50%; 65 left: 50%;
66 top: 50%; 66 top: 50%;
@@ -77,14 +77,14 @@ $setting-transition-easing: ease-out;
77 } 77 }
78 78
79 .vjs-icon-placeholder::before { 79 .vjs-icon-placeholder::before {
80 transition: text-shadow 0.3s; 80 transition: font-size 0.5s, opacity 0.5s;
81 } 81 }
82 82
83 &:hover { 83 &:hover {
84 opacity: 0.9; 84 opacity: 0.8;
85 85
86 .vjs-icon-placeholder::before { 86 .vjs-icon-placeholder::before {
87 text-shadow: 0 0 1px rgba(255, 255, 255, 0.8); 87 font-size: 110%;
88 } 88 }
89 } 89 }
90 } 90 }
@@ -92,8 +92,28 @@ $setting-transition-easing: ease-out;
92 &.vjs-has-started .vjs-big-play-button { 92 &.vjs-has-started .vjs-big-play-button {
93 display: block; 93 display: block;
94 visibility: hidden; 94 visibility: hidden;
95 opacity: 0; 95
96 transition: visibility 0.3s, opacity 0.3s; 96 &, &::before {
97 opacity: 0;
98 transition: visibility 0.1s, opacity 0.1s;
99 }
100 }
101
102 &.vjs-has-started video {
103 background-color: #000;
104 animation: fade-black-on-play 0.5s linear;
105
106 @keyframes fade-black-on-play {
107 0% {
108 opacity: 1;
109 }
110 50% {
111 opacity: 0;
112 }
113 100% {
114 opacity: 1;
115 }
116 }
97 } 117 }
98 118
99 .vjs-control-bar, 119 .vjs-control-bar,
@@ -651,6 +671,10 @@ $setting-transition-easing: ease-out;
651 671
652 .vjs-menu-item { 672 .vjs-menu-item {
653 673
674 &:hover {
675 background-color: rgba(255, 255, 255, 0.2);
676 }
677
654 &:first-child { 678 &:first-child {
655 margin-top: 5px; 679 margin-top: 5px;
656 } 680 }