aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/player/mobile.scss111
1 files changed, 100 insertions, 11 deletions
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index d72dc41df..2688860a6 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -31,22 +31,89 @@
31 display: block; 31 display: block;
32 } 32 }
33 33
34 .main-button { 34 .main-button,
35 .rewind-button,
36 .forward-button {
37 width: fit-content;
38 height: fit-content;
39 position: relative;
40 top: calc(50% - 10px);
41 transform: translateY(-50%);
42 }
43
44 .main-button,
45 .rewind-button .icon,
46 .forward-button .icon {
35 font-family: VideoJS; 47 font-family: VideoJS;
36 font-weight: normal; 48 font-weight: normal;
37 font-style: normal; 49 font-style: normal;
50 }
51
52 .main-button {
38 font-size: 5em; 53 font-size: 5em;
39 width: fit-content;
40 margin: auto; 54 margin: auto;
41 position: relative; 55 }
42 top: calc(50% - 10px); 56
43 transform: translateY(-50%); 57 .rewind-button,
58 .forward-button {
59 margin: 0 10px;
60 position: absolute;
61 text-align: center;
62
63 .icon {
64 opacity: 0;
65 animation: fadeInAndOut 1s linear infinite;
66
67 &::before {
68 font-size: 20px;
69 content: '\f101';
70 display: inline-block;
71 width: 16px;
72 }
73 }
74 }
75
76 .forward-button {
77 right: 5px;
78
79 .icon {
80 &::before {
81 margin-left: -2px;
82 }
83
84 &:nth-child(2) {
85 animation-delay: 0.25s;
86 }
87
88 &:nth-child(3) {
89 animation-delay: 0.5s;
90 }
91 }
92 }
93
94 .rewind-button {
95 left: 5px;
96
97 .icon {
98 &::before {
99 margin-right: -2px;
100 transform: scaleX(-1);
101 }
102
103 &:nth-child(1) {
104 animation-delay: 0.5s;
105 }
106
107 &:nth-child(2) {
108 animation-delay: 0.25s;
109 }
110 }
44 } 111 }
45} 112}
46 113
47.vjs-paused { 114.vjs-paused {
48 .main-button { 115 .main-button {
49 &:before { 116 &::before {
50 content: '\f101'; 117 content: '\f101';
51 } 118 }
52 } 119 }
@@ -54,7 +121,7 @@
54 121
55.vjs-playing { 122.vjs-playing {
56 .main-button { 123 .main-button {
57 &:before { 124 &::before {
58 content: '\f103'; 125 content: '\f103';
59 } 126 }
60 } 127 }
@@ -62,7 +129,7 @@
62 129
63.vjs-ended { 130.vjs-ended {
64 .main-button { 131 .main-button {
65 &:before { 132 &::before {
66 content: '\f116'; 133 content: '\f116';
67 } 134 }
68 } 135 }
@@ -77,11 +144,33 @@
77 } 144 }
78 } 145 }
79 146
80 &.vjs-seeking, 147 &.vjs-scrubbing {
81 &.vjs-scrubbing,
82 &.vjs-waiting {
83 .vjs-mobile-buttons-overlay { 148 .vjs-mobile-buttons-overlay {
84 display: none; 149 display: none;
85 } 150 }
86 } 151 }
152
153 &.vjs-seeking,
154 &.vjs-waiting,
155 &.vjs-fast-seeking {
156 .main-button {
157 display: none;
158 }
159 }
160}
161
162@keyframes fadeInAndOut {
163 0%,
164 20% {
165 opacity: 0;
166 }
167
168 60%,
169 70% {
170 opacity: 1;
171 }
172
173 100% {
174 opacity: 0;
175 }
87} 176}