|
0
|
1 // main: ../style.scss
|
|
|
2
|
|
|
3 /* Media Elements
|
|
|
4 ========================*/
|
|
|
5 .mejs__container {
|
|
|
6 max-width: 100%;
|
|
|
7 width: 100% !important;
|
|
|
8 font-family: $font-family-base;
|
|
|
9 &.mejs__video {
|
|
|
10 background: none;
|
|
|
11 }
|
|
|
12 }
|
|
|
13
|
|
|
14 .mejs__overlay {
|
|
|
15 width: 100% !important;
|
|
|
16 }
|
|
|
17
|
|
|
18 .mejs__mediaelement * {
|
|
|
19 width: 100% !important;
|
|
|
20 max-width: 100%;
|
|
|
21 }
|
|
|
22
|
|
|
23 .mejs__overlay-button {
|
|
|
24 background: none;
|
|
|
25 color: #fff;
|
|
|
26 @include size(rem(60));
|
|
|
27 &:before {
|
|
|
28 content: '\e99e';
|
|
|
29 font-family: 'feather';
|
|
|
30 font-size: rem(60);
|
|
|
31 line-height: rem(60);
|
|
|
32 }
|
|
|
33 }
|
|
|
34
|
|
|
35 .video {
|
|
|
36 max-width: 100%;
|
|
|
37 }
|
|
|
38
|
|
|
39 .no-control-onstart.mejs__video--playing {
|
|
|
40 .mejs__controls {
|
|
|
41 display: block;
|
|
|
42 }
|
|
|
43 }
|
|
|
44
|
|
|
45 .no-controls-onstart:not(.mejs__video--playing) {
|
|
|
46 .mejs__controls {
|
|
|
47 display: none;
|
|
|
48 }
|
|
|
49 }
|
|
|
50
|
|
|
51 .mejs__container.style-2 {
|
|
|
52 .mejs__controls {
|
|
|
53 background: $headings-color;
|
|
|
54 }
|
|
|
55 .mejs__time-rail {
|
|
|
56 @include position(absolute, -7px 0 null);
|
|
|
57 width: 100% !important;
|
|
|
58 height: 3px;
|
|
|
59 margin: 0;
|
|
|
60 padding: 0;
|
|
|
61 }
|
|
|
62 .mejs__time-buffering, .mejs__time-current, .mejs__time-float, .mejs__time-float-corner, .mejs__time-float-current, .mejs__time-hovered, .mejs__time-loaded, .mejs__time-marker, .mejs__time-total {
|
|
|
63 height: 3px;
|
|
|
64 }
|
|
|
65 .mejs__time-total { background: #fff }
|
|
|
66 .mejs__time-loaded { background: rgba($color-scheme, .4) }
|
|
|
67 .mejs__time-current { background: $color-scheme }
|
|
|
68 .mejs__time-hovered { background: darken($color-scheme, 10%) }
|
|
|
69 .mejs__time-float,
|
|
|
70 .mejs__time-handle {
|
|
|
71 display: none !important;
|
|
|
72 }
|
|
|
73 .mejs__volume-button,
|
|
|
74 .mejs__playpause-button,
|
|
|
75 .mejs__fullscreen-button {
|
|
|
76 > button {
|
|
|
77 background: none;
|
|
|
78 &::before {
|
|
|
79 font-family: 'Material Icons';
|
|
|
80 vertical-align: middle;
|
|
|
81 text-rendering: optimizeLegibility;
|
|
|
82 font-feature-settings: 'liga';
|
|
|
83 font-size: rem(24);
|
|
|
84 @include size(1em);
|
|
|
85 color: #fff;
|
|
|
86 }
|
|
|
87 }
|
|
|
88 }
|
|
|
89 .mejs__fullscreen-button {
|
|
|
90 float: right;
|
|
|
91 > button::before {
|
|
|
92 content: 'fullscreen';
|
|
|
93 }
|
|
|
94 &.mejs__unfullscreen > button::before {
|
|
|
95 content: 'fullscreen_exit';
|
|
|
96 }
|
|
|
97 }
|
|
|
98 .mejs__playpause-button {
|
|
|
99 &.mejs__play > button::before {
|
|
|
100 content: 'play_arrow';
|
|
|
101 }
|
|
|
102 &.mejs__pause > button::before {
|
|
|
103 content: 'pause';
|
|
|
104 }
|
|
|
105 }
|
|
|
106 .mejs__volume-button {
|
|
|
107 padding-left: 0;
|
|
|
108 padding-right: 0;
|
|
|
109 > button::before {
|
|
|
110 content: 'volume_up';
|
|
|
111 }
|
|
|
112 &.mejs__unmute > button::before {
|
|
|
113 content: 'volume_off';
|
|
|
114 }
|
|
|
115 }
|
|
|
116 .mejs__overlay-button:before {
|
|
|
117 font-family: 'Material Icons';
|
|
|
118 content: 'play_arrow';
|
|
|
119 }
|
|
|
120 .mejs__duration-container {
|
|
|
121 opacity: 0.5;
|
|
|
122 &:before {
|
|
|
123 content: '\002f ';
|
|
|
124 margin-right: .5em;
|
|
|
125 }
|
|
|
126 }
|
|
|
127 }
|
