Mercurial > nebulaweb3

comparison default/assets/scss/components/_media.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }