aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-15 10:46:26 +0200
committerChocobozzz <me@florianbigard.com>2018-04-15 10:55:33 +0200
commit864e782bc2306f7154a185361ebf94e6e86472e8 (patch)
tree008049ed5043759a0702938b2ce7314087e7a316 /client/src/sass
parent37ddeba57f4c2aa85475fd3ef4498bb2802e1c7c (diff)
downloadPeerTube-864e782bc2306f7154a185361ebf94e6e86472e8.tar.gz
PeerTube-864e782bc2306f7154a185361ebf94e6e86472e8.tar.zst
PeerTube-864e782bc2306f7154a185361ebf94e6e86472e8.zip
Improve big play button animation
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/video-js-custom.scss61
1 files changed, 35 insertions, 26 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 768b7895f..cae7ab431 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,6 +1,13 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4@mixin big-play-button-triangle-size($triangle-size) {
5 width: $triangle-size;
6 height: $triangle-size;
7 top: calc(50% - #{$triangle-size / 2});
8 left: calc(53% - #{($triangle-size / 2)});
9}
10
4$primary-foreground-color: #fff; 11$primary-foreground-color: #fff;
5$primary-foreground-opacity: 0.9; 12$primary-foreground-opacity: 0.9;
6$primary-foreground-opacity-hover: 1; 13$primary-foreground-opacity-hover: 1;
@@ -59,7 +66,7 @@ $setting-transition-easing: ease-out;
59 $big-play-width: 1.2em; 66 $big-play-width: 1.2em;
60 $big-play-height: 1.2em; 67 $big-play-height: 1.2em;
61 68
62 border: 0; 69 border: 6px solid #fff;
63 border-radius: 100%; 70 border-radius: 100%;
64 71
65 left: 50%; 72 left: 50%;
@@ -69,7 +76,7 @@ $setting-transition-easing: ease-out;
69 line-height: $big-play-height; 76 line-height: $big-play-height;
70 margin-left: -($big-play-width / 2); 77 margin-left: -($big-play-width / 2);
71 margin-top: -($big-play-height / 2); 78 margin-top: -($big-play-height / 2);
72 transition: opacity 0.5s; 79 transition: 0.4s opacity;
73 80
74 &::-moz-focus-inner { 81 &::-moz-focus-inner {
75 border: 0; 82 border: 0;
@@ -77,41 +84,33 @@ $setting-transition-easing: ease-out;
77 } 84 }
78 85
79 .vjs-icon-placeholder::before { 86 .vjs-icon-placeholder::before {
80 transition: font-size 0.2s, opacity 0.2s; 87 @include big-play-button-triangle-size(45px);
88
89 content: '';
90 background-image: url('../assets/player/images/big-play-button.svg');
81 } 91 }
82 92
83 &:hover { 93 &:hover {
84 opacity: 0.8; 94 opacity: 0.8;
85
86 .vjs-icon-placeholder::before {
87 font-size: 110%;
88 }
89 } 95 }
90 } 96 }
91 97
92 &.vjs-has-started .vjs-big-play-button { 98 // Small effect when we click on the play button
93 display: block; 99 &.vjs-has-big-play-button-clicked {
94 visibility: hidden;
95
96 &, &::before {
97 opacity: 0;
98 transition: visibility 0.1s, opacity 0.1s;
99 }
100 }
101 100
102 &.vjs-has-started video { 101 .vjs-big-play-button, .vjs-poster {
103 background-color: #000; 102 display: block;
104 animation: fade-black-on-play 0.5s linear; 103 visibility: hidden;
105 104
106 @keyframes fade-black-on-play { 105 &.vjs-big-play-button, &.vjs-big-play-button::before {
107 0% {
108 opacity: 1;
109 }
110 50% {
111 opacity: 0; 106 opacity: 0;
107 transition: visibility 0.2s, opacity 0.2s;
112 } 108 }
113 100% { 109
114 opacity: 1; 110 &.vjs-poster, &.vjs-poster::before {
111 opacity: 0;
112 transition: visibility 0.3s, opacity 0.3s;
113 transition-delay: 0.05s;
115 } 114 }
116 } 115 }
117 } 116 }
@@ -446,6 +445,11 @@ $setting-transition-easing: ease-out;
446 445
447 .vjs-big-play-button { 446 .vjs-big-play-button {
448 font-size: 4.5em; 447 font-size: 4.5em;
448 border-width: 4.5px;
449
450 .vjs-icon-placeholder::before {
451 @include big-play-button-triangle-size(27px);
452 }
449 } 453 }
450 454
451 .vjs-playback-rate { 455 .vjs-playback-rate {
@@ -468,6 +472,11 @@ $setting-transition-easing: ease-out;
468 472
469 .vjs-big-play-button { 473 .vjs-big-play-button {
470 font-size: 3em; 474 font-size: 3em;
475 border-width: 3px;
476
477 .vjs-icon-placeholder::before {
478 @include big-play-button-triangle-size(20px);
479 }
471 } 480 }
472 481
473 .vjs-volume-control { 482 .vjs-volume-control {