| 提交 | 用户 | 时间 | ||
| 1ac2bc | 1 | /*! |
| 懒 | 2 | Video.js Default Styles (http://videojs.com) |
| 3 | Version 4.3.0 | |
| 4 | Create your own skin at http://designer.videojs.com | |
| 5 | */ | |
| 6 | /* SKIN | |
| 7 | ================================================================================ | |
| 8 | The main class name for all skin-specific styles. To make your own skin, | |
| 9 | replace all occurances of 'vjs-default-skin' with a new name. Then add your new | |
| 10 | skin name to your video tag instead of the default skin. | |
| 11 | e.g. <video class="video-js my-skin-name"> | |
| 12 | */ | |
| 13 | .vjs-default-skin { | |
| 14 | color: #cccccc; | |
| 15 | } | |
| 16 | /* Custom Icon Font | |
| 17 | -------------------------------------------------------------------------------- | |
| 18 | The control icons are from a custom font. Each icon corresponds to a character | |
| 19 | (e.g. "\e001"). Font icons allow for easy scaling and coloring of icons. | |
| 20 | */ | |
| 21 | @font-face { | |
| 22 | font-family: 'VideoJS'; | |
| 23 | src: url('font/vjs.eot'); | |
| 24 | src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype'); | |
| 25 | font-weight: normal; | |
| 26 | font-style: normal; | |
| 27 | } | |
| 28 | /* Base UI Component Classes | |
| 29 | -------------------------------------------------------------------------------- | |
| 30 | */ | |
| 31 | /* Slider - used for Volume bar and Seek bar */ | |
| 32 | .vjs-default-skin .vjs-slider { | |
| 33 | /* Replace browser focus hightlight with handle highlight */ | |
| 34 | outline: 0; | |
| 35 | position: relative; | |
| 36 | cursor: pointer; | |
| 37 | padding: 0; | |
| 38 | /* background-color-with-alpha */ | |
| 39 | background-color: #333333; | |
| 40 | background-color: rgba(51, 51, 51, 0.9); | |
| 41 | } | |
| 42 | .vjs-default-skin .vjs-slider:focus { | |
| 43 | /* box-shadow */ | |
| 44 | -webkit-box-shadow: 0 0 2em #ffffff; | |
| 45 | -moz-box-shadow: 0 0 2em #ffffff; | |
| 46 | box-shadow: 0 0 2em #ffffff; | |
| 47 | } | |
| 48 | .vjs-default-skin .vjs-slider-handle { | |
| 49 | position: absolute; | |
| 50 | /* Needed for IE6 */ | |
| 51 | left: 0; | |
| 52 | top: 0; | |
| 53 | } | |
| 54 | .vjs-default-skin .vjs-slider-handle:before { | |
| 55 | content: "\e009"; | |
| 56 | font-family: VideoJS; | |
| 57 | font-size: 1em; | |
| 58 | line-height: 1; | |
| 59 | text-align: center; | |
| 60 | text-shadow: 0em 0em 1em #fff; | |
| 61 | position: absolute; | |
| 62 | top: 0; | |
| 63 | left: 0; | |
| 64 | /* Rotate the square icon to make a diamond */ | |
| 65 | /* transform */ | |
| 66 | -webkit-transform: rotate(-45deg); | |
| 67 | -moz-transform: rotate(-45deg); | |
| 68 | -ms-transform: rotate(-45deg); | |
| 69 | -o-transform: rotate(-45deg); | |
| 70 | transform: rotate(-45deg); | |
| 71 | } | |
| 72 | /* Control Bar | |
| 73 | -------------------------------------------------------------------------------- | |
| 74 | The default control bar that is a container for most of the controls. | |
| 75 | */ | |
| 76 | .vjs-default-skin .vjs-control-bar { | |
| 77 | /* Start hidden */ | |
| 78 | display: none; | |
| 79 | position: absolute; | |
| 80 | /* Place control bar at the bottom of the player box/video. | |
| 81 | If you want more margin below the control bar, add more height. */ | |
| 82 | bottom: 0; | |
| 83 | /* Use left/right to stretch to 100% width of player div */ | |
| 84 | left: 0; | |
| 85 | right: 0; | |
| 86 | /* Height includes any margin you want above or below control items */ | |
| 87 | height: 3.0em; | |
| 88 | /* background-color-with-alpha */ | |
| 89 | background-color: #07141e; | |
| 90 | background-color: rgba(7, 20, 30, 0.7); | |
| 91 | } | |
| 92 | /* Show the control bar only once the video has started playing */ | |
| 93 | .vjs-default-skin.vjs-has-started .vjs-control-bar { | |
| 94 | display: block; | |
| 95 | /* Visibility needed to make sure things hide in older browsers too. */ | |
| 96 | ||
| 97 | visibility: visible; | |
| 98 | opacity: 1; | |
| 99 | /* transition */ | |
| 100 | -webkit-transition: visibility 0.1s, opacity 0.1s; | |
| 101 | -moz-transition: visibility 0.1s, opacity 0.1s; | |
| 102 | -o-transition: visibility 0.1s, opacity 0.1s; | |
| 103 | transition: visibility 0.1s, opacity 0.1s; | |
| 104 | } | |
| 105 | /* Hide the control bar when the video is playing and the user is inactive */ | |
| 106 | .vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { | |
| 107 | display: block; | |
| 108 | visibility: hidden; | |
| 109 | opacity: 0; | |
| 110 | /* transition */ | |
| 111 | -webkit-transition: visibility 1s, opacity 1s; | |
| 112 | -moz-transition: visibility 1s, opacity 1s; | |
| 113 | -o-transition: visibility 1s, opacity 1s; | |
| 114 | transition: visibility 1s, opacity 1s; | |
| 115 | } | |
| 116 | .vjs-default-skin.vjs-controls-disabled .vjs-control-bar { | |
| 117 | display: none; | |
| 118 | } | |
| 119 | .vjs-default-skin.vjs-using-native-controls .vjs-control-bar { | |
| 120 | display: none; | |
| 121 | } | |
| 122 | /* IE8 is flakey with fonts, and you have to change the actual content to force | |
| 123 | fonts to show/hide properly. | |
| 124 | - "\9" IE8 hack didn't work for this | |
| 125 | - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9 | |
| 126 | */ | |
| 127 | @media \0screen { | |
| 128 | .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before { | |
| 129 | content: ""; | |
| 130 | } | |
| 131 | } | |
| 132 | /* General styles for individual controls. */ | |
| 133 | .vjs-default-skin .vjs-control { | |
| 134 | outline: none; | |
| 135 | position: relative; | |
| 136 | float: left; | |
| 137 | text-align: center; | |
| 138 | margin: 0; | |
| 139 | padding: 0; | |
| 140 | height: 3.0em; | |
| 141 | width: 4em; | |
| 142 | } | |
| 143 | /* FontAwsome button icons */ | |
| 144 | .vjs-default-skin .vjs-control:before { | |
| 145 | font-family: VideoJS; | |
| 146 | font-size: 1.5em; | |
| 147 | line-height: 2; | |
| 148 | position: absolute; | |
| 149 | top: 0; | |
| 150 | left: 0; | |
| 151 | width: 100%; | |
| 152 | height: 100%; | |
| 153 | text-align: center; | |
| 154 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | |
| 155 | } | |
| 156 | /* Replacement for focus outline */ | |
| 157 | .vjs-default-skin .vjs-control:focus:before, | |
| 158 | .vjs-default-skin .vjs-control:hover:before { | |
| 159 | text-shadow: 0em 0em 1em #ffffff; | |
| 160 | } | |
| 161 | .vjs-default-skin .vjs-control:focus { | |
| 162 | /* outline: 0; */ | |
| 163 | /* keyboard-only users cannot see the focus on several of the UI elements when | |
| 164 | this is set to 0 */ | |
| 165 | ||
| 166 | } | |
| 167 | /* Hide control text visually, but have it available for screenreaders */ | |
| 168 | .vjs-default-skin .vjs-control-text { | |
| 169 | /* hide-visually */ | |
| 170 | border: 0; | |
| 171 | clip: rect(0 0 0 0); | |
| 172 | height: 1px; | |
| 173 | margin: -1px; | |
| 174 | overflow: hidden; | |
| 175 | padding: 0; | |
| 176 | position: absolute; | |
| 177 | width: 1px; | |
| 178 | } | |
| 179 | /* Play/Pause | |
| 180 | -------------------------------------------------------------------------------- | |
| 181 | */ | |
| 182 | .vjs-default-skin .vjs-play-control { | |
| 183 | width: 5em; | |
| 184 | cursor: pointer; | |
| 185 | } | |
| 186 | .vjs-default-skin .vjs-play-control:before { | |
| 187 | content: "\e001"; | |
| 188 | } | |
| 189 | .vjs-default-skin.vjs-playing .vjs-play-control:before { | |
| 190 | content: "\e002"; | |
| 191 | } | |
| 192 | /* Volume/Mute | |
| 193 | -------------------------------------------------------------------------------- */ | |
| 194 | .vjs-default-skin .vjs-mute-control, | |
| 195 | .vjs-default-skin .vjs-volume-menu-button { | |
| 196 | cursor: pointer; | |
| 197 | float: right; | |
| 198 | } | |
| 199 | .vjs-default-skin .vjs-mute-control:before, | |
| 200 | .vjs-default-skin .vjs-volume-menu-button:before { | |
| 201 | content: "\e006"; | |
| 202 | } | |
| 203 | .vjs-default-skin .vjs-mute-control.vjs-vol-0:before, | |
| 204 | .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before { | |
| 205 | content: "\e003"; | |
| 206 | } | |
| 207 | .vjs-default-skin .vjs-mute-control.vjs-vol-1:before, | |
| 208 | .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before { | |
| 209 | content: "\e004"; | |
| 210 | } | |
| 211 | .vjs-default-skin .vjs-mute-control.vjs-vol-2:before, | |
| 212 | .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before { | |
| 213 | content: "\e005"; | |
| 214 | } | |
| 215 | .vjs-default-skin .vjs-volume-control { | |
| 216 | width: 5em; | |
| 217 | float: right; | |
| 218 | } | |
| 219 | .vjs-default-skin .vjs-volume-bar { | |
| 220 | width: 5em; | |
| 221 | height: 0.6em; | |
| 222 | margin: 1.1em auto 0; | |
| 223 | } | |
| 224 | .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content { | |
| 225 | height: 2.9em; | |
| 226 | } | |
| 227 | .vjs-default-skin .vjs-volume-level { | |
| 228 | position: absolute; | |
| 229 | top: 0; | |
| 230 | left: 0; | |
| 231 | height: 0.5em; | |
| 232 | background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat; | |
| 233 | } | |
| 234 | .vjs-default-skin .vjs-volume-bar .vjs-volume-handle { | |
| 235 | width: 0.5em; | |
| 236 | height: 0.5em; | |
| 237 | } | |
| 238 | .vjs-default-skin .vjs-volume-handle:before { | |
| 239 | font-size: 0.9em; | |
| 240 | top: -0.2em; | |
| 241 | left: -0.2em; | |
| 242 | width: 1em; | |
| 243 | height: 1em; | |
| 244 | } | |
| 245 | .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content { | |
| 246 | width: 6em; | |
| 247 | left: -4em; | |
| 248 | } | |
| 249 | /* Progress | |
| 250 | -------------------------------------------------------------------------------- | |
| 251 | */ | |
| 252 | .vjs-default-skin .vjs-progress-control { | |
| 253 | position: absolute; | |
| 254 | left: 0; | |
| 255 | right: 0; | |
| 256 | width: auto; | |
| 257 | font-size: 0.3em; | |
| 258 | height: 1em; | |
| 259 | /* Set above the rest of the controls. */ | |
| 260 | top: -1em; | |
| 261 | /* Shrink the bar slower than it grows. */ | |
| 262 | /* transition */ | |
| 263 | -webkit-transition: all 0.4s; | |
| 264 | -moz-transition: all 0.4s; | |
| 265 | -o-transition: all 0.4s; | |
| 266 | transition: all 0.4s; | |
| 267 | } | |
| 268 | /* On hover, make the progress bar grow to something that's more clickable. | |
| 269 | This simply changes the overall font for the progress bar, and this | |
| 270 | updates both the em-based widths and heights, as wells as the icon font */ | |
| 271 | .vjs-default-skin:hover .vjs-progress-control { | |
| 272 | font-size: .9em; | |
| 273 | /* Even though we're not changing the top/height, we need to include them in | |
| 274 | the transition so they're handled correctly. */ | |
| 275 | ||
| 276 | /* transition */ | |
| 277 | -webkit-transition: all 0.2s; | |
| 278 | -moz-transition: all 0.2s; | |
| 279 | -o-transition: all 0.2s; | |
| 280 | transition: all 0.2s; | |
| 281 | } | |
| 282 | /* Box containing play and load progresses. Also acts as seek scrubber. */ | |
| 283 | .vjs-default-skin .vjs-progress-holder { | |
| 284 | height: 100%; | |
| 285 | } | |
| 286 | /* Progress Bars */ | |
| 287 | .vjs-default-skin .vjs-progress-holder .vjs-play-progress, | |
| 288 | .vjs-default-skin .vjs-progress-holder .vjs-load-progress { | |
| 289 | position: absolute; | |
| 290 | display: block; | |
| 291 | height: 100%; | |
| 292 | margin: 0; | |
| 293 | padding: 0; | |
| 294 | /* Needed for IE6 */ | |
| 295 | left: 0; | |
| 296 | top: 0; | |
| 297 | } | |
| 298 | .vjs-default-skin .vjs-play-progress { | |
| 299 | /* | |
| 300 | Using a data URI to create the white diagonal lines with a transparent | |
| 301 | background. Surprisingly works in IE8. | |
| 302 | Created using http://www.patternify.com | |
| 303 | Changing the first color value will change the bar color. | |
| 304 | Also using a paralax effect to make the lines move backwards. | |
| 305 | The -50% left position makes that happen. | |
| 306 | */ | |
| 307 | ||
| 308 | background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat; | |
| 309 | } | |
| 310 | .vjs-default-skin .vjs-load-progress { | |
| 311 | background: #646464 /* IE8- Fallback */; | |
| 312 | background: rgba(255, 255, 255, 0.4); | |
| 313 | } | |
| 314 | .vjs-default-skin .vjs-seek-handle { | |
| 315 | width: 1.5em; | |
| 316 | height: 100%; | |
| 317 | } | |
| 318 | .vjs-default-skin .vjs-seek-handle:before { | |
| 319 | padding-top: 0.1em /* Minor adjustment */; | |
| 320 | } | |
| 321 | /* Time Display | |
| 322 | -------------------------------------------------------------------------------- | |
| 323 | */ | |
| 324 | .vjs-default-skin .vjs-time-controls { | |
| 325 | font-size: 1em; | |
| 326 | /* Align vertically by making the line height the same as the control bar */ | |
| 327 | line-height: 3em; | |
| 328 | } | |
| 329 | .vjs-default-skin .vjs-current-time { | |
| 330 | float: left; | |
| 331 | } | |
| 332 | .vjs-default-skin .vjs-duration { | |
| 333 | float: left; | |
| 334 | } | |
| 335 | /* Remaining time is in the HTML, but not included in default design */ | |
| 336 | .vjs-default-skin .vjs-remaining-time { | |
| 337 | display: none; | |
| 338 | float: left; | |
| 339 | } | |
| 340 | .vjs-time-divider { | |
| 341 | float: left; | |
| 342 | line-height: 3em; | |
| 343 | } | |
| 344 | /* Fullscreen | |
| 345 | -------------------------------------------------------------------------------- | |
| 346 | */ | |
| 347 | .vjs-default-skin .vjs-fullscreen-control { | |
| 348 | width: 3.8em; | |
| 349 | cursor: pointer; | |
| 350 | float: right; | |
| 351 | } | |
| 352 | .vjs-default-skin .vjs-fullscreen-control:before { | |
| 353 | content: "\e000"; | |
| 354 | } | |
| 355 | /* Switch to the exit icon when the player is in fullscreen */ | |
| 356 | .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before { | |
| 357 | content: "\e00b"; | |
| 358 | } | |
| 359 | /* Big Play Button (play button at start) | |
| 360 | -------------------------------------------------------------------------------- | |
| 361 | Positioning of the play button in the center or other corners can be done more | |
| 362 | easily in the skin designer. http://designer.videojs.com/ | |
| 363 | */ | |
| 364 | .vjs-default-skin .vjs-big-play-button { | |
| 365 | left: 0.5em; | |
| 366 | top: 0.5em; | |
| 367 | font-size: 3em; | |
| 368 | display: block; | |
| 369 | z-index: 2; | |
| 370 | position: absolute; | |
| 371 | width: 4em; | |
| 372 | height: 2.6em; | |
| 373 | text-align: center; | |
| 374 | vertical-align: middle; | |
| 375 | cursor: pointer; | |
| 376 | opacity: 1; | |
| 377 | /* Need a slightly gray bg so it can be seen on black backgrounds */ | |
| 378 | /* background-color-with-alpha */ | |
| 379 | background-color: #07141e; | |
| 380 | background-color: rgba(7, 20, 30, 0.7); | |
| 381 | border: 0.1em solid #3b4249; | |
| 382 | /* border-radius */ | |
| 383 | -webkit-border-radius: 0.8em; | |
| 384 | -moz-border-radius: 0.8em; | |
| 385 | border-radius: 0.8em; | |
| 386 | /* box-shadow */ | |
| 387 | -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25); | |
| 388 | -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25); | |
| 389 | box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25); | |
| 390 | /* transition */ | |
| 391 | -webkit-transition: all 0.4s; | |
| 392 | -moz-transition: all 0.4s; | |
| 393 | -o-transition: all 0.4s; | |
| 394 | transition: all 0.4s; | |
| 395 | } | |
| 396 | /* Optionally center */ | |
| 397 | .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button { | |
| 398 | /* Center it horizontally */ | |
| 399 | left: 50%; | |
| 400 | margin-left: -2.1em; | |
| 401 | /* Center it vertically */ | |
| 402 | top: 50%; | |
| 403 | margin-top: -1.4000000000000001em; | |
| 404 | } | |
| 405 | /* Hide if controls are disabled */ | |
| 406 | .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button { | |
| 407 | display: none; | |
| 408 | } | |
| 409 | /* Hide when video starts playing */ | |
| 410 | .vjs-default-skin.vjs-has-started .vjs-big-play-button { | |
| 411 | display: none; | |
| 412 | } | |
| 413 | /* Hide on mobile devices. Remove when we stop using native controls | |
| 414 | by default on mobile */ | |
| 415 | .vjs-default-skin.vjs-using-native-controls .vjs-big-play-button { | |
| 416 | display: none; | |
| 417 | } | |
| 418 | .vjs-default-skin:hover .vjs-big-play-button, | |
| 419 | .vjs-default-skin .vjs-big-play-button:focus { | |
| 420 | outline: 0; | |
| 421 | border-color: #fff; | |
| 422 | /* IE8 needs a non-glow hover state */ | |
| 423 | background-color: #505050; | |
| 424 | background-color: rgba(50, 50, 50, 0.75); | |
| 425 | /* box-shadow */ | |
| 426 | -webkit-box-shadow: 0 0 3em #ffffff; | |
| 427 | -moz-box-shadow: 0 0 3em #ffffff; | |
| 428 | box-shadow: 0 0 3em #ffffff; | |
| 429 | /* transition */ | |
| 430 | -webkit-transition: all 0s; | |
| 431 | -moz-transition: all 0s; | |
| 432 | -o-transition: all 0s; | |
| 433 | transition: all 0s; | |
| 434 | } | |
| 435 | .vjs-default-skin .vjs-big-play-button:before { | |
| 436 | content: "\e001"; | |
| 437 | font-family: VideoJS; | |
| 438 | /* In order to center the play icon vertically we need to set the line height | |
| 439 | to the same as the button height */ | |
| 440 | ||
| 441 | line-height: 2.6em; | |
| 442 | text-shadow: 0.05em 0.05em 0.1em #000; | |
| 443 | text-align: center /* Needed for IE8 */; | |
| 444 | position: absolute; | |
| 445 | left: 0; | |
| 446 | width: 100%; | |
| 447 | height: 100%; | |
| 448 | } | |
| 449 | /* Loading Spinner | |
| 450 | -------------------------------------------------------------------------------- | |
| 451 | */ | |
| 452 | .vjs-loading-spinner { | |
| 453 | display: none; | |
| 454 | position: absolute; | |
| 455 | top: 50%; | |
| 456 | left: 50%; | |
| 457 | font-size: 4em; | |
| 458 | line-height: 1; | |
| 459 | width: 1em; | |
| 460 | height: 1em; | |
| 461 | margin-left: -0.5em; | |
| 462 | margin-top: -0.5em; | |
| 463 | opacity: 0.75; | |
| 464 | /* animation */ | |
| 465 | -webkit-animation: spin 1.5s infinite linear; | |
| 466 | -moz-animation: spin 1.5s infinite linear; | |
| 467 | -o-animation: spin 1.5s infinite linear; | |
| 468 | animation: spin 1.5s infinite linear; | |
| 469 | } | |
| 470 | .vjs-default-skin .vjs-loading-spinner:before { | |
| 471 | content: "\e01e"; | |
| 472 | font-family: VideoJS; | |
| 473 | position: absolute; | |
| 474 | top: 0; | |
| 475 | left: 0; | |
| 476 | width: 1em; | |
| 477 | height: 1em; | |
| 478 | text-align: center; | |
| 479 | text-shadow: 0em 0em 0.1em #000; | |
| 480 | } | |
| 481 | @-moz-keyframes spin { | |
| 482 | 0% { | |
| 483 | -moz-transform: rotate(0deg); | |
| 484 | } | |
| 485 | 100% { | |
| 486 | -moz-transform: rotate(359deg); | |
| 487 | } | |
| 488 | } | |
| 489 | @-webkit-keyframes spin { | |
| 490 | 0% { | |
| 491 | -webkit-transform: rotate(0deg); | |
| 492 | } | |
| 493 | 100% { | |
| 494 | -webkit-transform: rotate(359deg); | |
| 495 | } | |
| 496 | } | |
| 497 | @-o-keyframes spin { | |
| 498 | 0% { | |
| 499 | -o-transform: rotate(0deg); | |
| 500 | } | |
| 501 | 100% { | |
| 502 | -o-transform: rotate(359deg); | |
| 503 | } | |
| 504 | } | |
| 505 | @keyframes spin { | |
| 506 | 0% { | |
| 507 | transform: rotate(0deg); | |
| 508 | } | |
| 509 | 100% { | |
| 510 | transform: rotate(359deg); | |
| 511 | } | |
| 512 | } | |
| 513 | /* Menu Buttons (Captions/Subtitles/etc.) | |
| 514 | -------------------------------------------------------------------------------- | |
| 515 | */ | |
| 516 | .vjs-default-skin .vjs-menu-button { | |
| 517 | float: right; | |
| 518 | cursor: pointer; | |
| 519 | } | |
| 520 | .vjs-default-skin .vjs-menu { | |
| 521 | display: none; | |
| 522 | position: absolute; | |
| 523 | bottom: 0; | |
| 524 | left: 0em; | |
| 525 | /* (Width of vjs-menu - width of button) / 2 */ | |
| 526 | ||
| 527 | width: 0em; | |
| 528 | height: 0em; | |
| 529 | margin-bottom: 3em; | |
| 530 | border-left: 2em solid transparent; | |
| 531 | border-right: 2em solid transparent; | |
| 532 | border-top: 1.55em solid #000000; | |
| 533 | /* Same width top as ul bottom */ | |
| 534 | ||
| 535 | border-top-color: rgba(7, 40, 50, 0.5); | |
| 536 | /* Same as ul background */ | |
| 537 | ||
| 538 | } | |
| 539 | /* Button Pop-up Menu */ | |
| 540 | .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content { | |
| 541 | display: block; | |
| 542 | padding: 0; | |
| 543 | margin: 0; | |
| 544 | position: absolute; | |
| 545 | width: 10em; | |
| 546 | bottom: 1.5em; | |
| 547 | /* Same bottom as vjs-menu border-top */ | |
| 548 | ||
| 549 | max-height: 15em; | |
| 550 | overflow: auto; | |
| 551 | left: -5em; | |
| 552 | /* Width of menu - width of button / 2 */ | |
| 553 | ||
| 554 | /* background-color-with-alpha */ | |
| 555 | background-color: #07141e; | |
| 556 | background-color: rgba(7, 20, 30, 0.7); | |
| 557 | /* box-shadow */ | |
| 558 | -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); | |
| 559 | -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); | |
| 560 | box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); | |
| 561 | } | |
| 562 | .vjs-default-skin .vjs-menu-button:hover .vjs-menu { | |
| 563 | display: block; | |
| 564 | } | |
| 565 | .vjs-default-skin .vjs-menu-button ul li { | |
| 566 | list-style: none; | |
| 567 | margin: 0; | |
| 568 | padding: 0.3em 0 0.3em 0; | |
| 569 | line-height: 1.4em; | |
| 570 | font-size: 1.2em; | |
| 571 | text-align: center; | |
| 572 | text-transform: lowercase; | |
| 573 | } | |
| 574 | .vjs-default-skin .vjs-menu-button ul li.vjs-selected { | |
| 575 | background-color: #000; | |
| 576 | } | |
| 577 | .vjs-default-skin .vjs-menu-button ul li:focus, | |
| 578 | .vjs-default-skin .vjs-menu-button ul li:hover, | |
| 579 | .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus, | |
| 580 | .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { | |
| 581 | outline: 0; | |
| 582 | color: #111; | |
| 583 | /* background-color-with-alpha */ | |
| 584 | background-color: #ffffff; | |
| 585 | background-color: rgba(255, 255, 255, 0.75); | |
| 586 | /* box-shadow */ | |
| 587 | -webkit-box-shadow: 0 0 1em #ffffff; | |
| 588 | -moz-box-shadow: 0 0 1em #ffffff; | |
| 589 | box-shadow: 0 0 1em #ffffff; | |
| 590 | } | |
| 591 | .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title { | |
| 592 | text-align: center; | |
| 593 | text-transform: uppercase; | |
| 594 | font-size: 1em; | |
| 595 | line-height: 2em; | |
| 596 | padding: 0; | |
| 597 | margin: 0 0 0.3em 0; | |
| 598 | font-weight: bold; | |
| 599 | cursor: default; | |
| 600 | } | |
| 601 | /* Subtitles Button */ | |
| 602 | .vjs-default-skin .vjs-subtitles-button:before { | |
| 603 | content: "\e00c"; | |
| 604 | } | |
| 605 | /* Captions Button */ | |
| 606 | .vjs-default-skin .vjs-captions-button:before { | |
| 607 | content: "\e008"; | |
| 608 | } | |
| 609 | /* Replacement for focus outline */ | |
| 610 | .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before, | |
| 611 | .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before { | |
| 612 | /* box-shadow */ | |
| 613 | -webkit-box-shadow: 0 0 1em #ffffff; | |
| 614 | -moz-box-shadow: 0 0 1em #ffffff; | |
| 615 | box-shadow: 0 0 1em #ffffff; | |
| 616 | } | |
| 617 | /* | |
| 618 | REQUIRED STYLES (be careful overriding) | |
| 619 | ================================================================================ | |
| 620 | When loading the player, the video tag is replaced with a DIV, | |
| 621 | that will hold the video tag or object tag for other playback methods. | |
| 622 | The div contains the video playback element (Flash or HTML5) and controls, | |
| 623 | and sets the width and height of the video. | |
| 624 | ||
| 625 | ** If you want to add some kind of border/padding (e.g. a frame), or special | |
| 626 | positioning, use another containing element. Otherwise you risk messing up | |
| 627 | control positioning and full window mode. ** | |
| 628 | */ | |
| 629 | .video-js { | |
| 630 | background-color: #000; | |
| 631 | position: relative; | |
| 632 | padding: 0; | |
| 633 | /* Start with 10px for base font size so other dimensions can be em based and | |
| 634 | easily calculable. */ | |
| 635 | ||
| 636 | font-size: 10px; | |
| 637 | /* Allow poster to be vertially aligned. */ | |
| 638 | ||
| 639 | vertical-align: middle; | |
| 640 | /* display: table-cell; */ | |
| 641 | /*This works in Safari but not Firefox.*/ | |
| 642 | ||
| 643 | /* Provide some basic defaults for fonts */ | |
| 644 | ||
| 645 | font-weight: normal; | |
| 646 | font-style: normal; | |
| 647 | /* Avoiding helvetica: issue #376 */ | |
| 648 | ||
| 649 | font-family: Arial, sans-serif; | |
| 650 | /* Turn off user selection (text highlighting) by default. | |
| 651 | The majority of player components will not be text blocks. | |
| 652 | Text areas will need to turn user selection back on. */ | |
| 653 | ||
| 654 | /* user-select */ | |
| 655 | -webkit-user-select: none; | |
| 656 | -moz-user-select: none; | |
| 657 | -ms-user-select: none; | |
| 658 | user-select: none; | |
| 659 | } | |
| 660 | /* Playback technology elements expand to the width/height of the containing div | |
| 661 | <video> or <object> */ | |
| 662 | .video-js .vjs-tech { | |
| 663 | position: absolute; | |
| 664 | top: 0; | |
| 665 | left: 0; | |
| 666 | width: 100%; | |
| 667 | height: 100%; | |
| 668 | } | |
| 669 | /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when | |
| 670 | checking fullScreenEnabled. */ | |
| 671 | .video-js:-moz-full-screen { | |
| 672 | position: absolute; | |
| 673 | } | |
| 674 | /* Fullscreen Styles */ | |
| 675 | body.vjs-full-window { | |
| 676 | padding: 0; | |
| 677 | margin: 0; | |
| 678 | height: 100%; | |
| 679 | /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */ | |
| 680 | overflow-y: auto; | |
| 681 | } | |
| 682 | .video-js.vjs-fullscreen { | |
| 683 | position: fixed; | |
| 684 | overflow: hidden; | |
| 685 | z-index: 1000; | |
| 686 | left: 0; | |
| 687 | top: 0; | |
| 688 | bottom: 0; | |
| 689 | right: 0; | |
| 690 | width: 100% !important; | |
| 691 | height: 100% !important; | |
| 692 | /* IE6 full-window (underscore hack) */ | |
| 693 | _position: absolute; | |
| 694 | } | |
| 695 | .video-js:-webkit-full-screen { | |
| 696 | width: 100% !important; | |
| 697 | height: 100% !important; | |
| 698 | } | |
| 699 | .video-js.vjs-fullscreen.vjs-user-inactive { | |
| 700 | cursor: none; | |
| 701 | } | |
| 702 | /* Poster Styles */ | |
| 703 | .vjs-poster { | |
| 704 | background-repeat: no-repeat; | |
| 705 | background-position: 50% 50%; | |
| 706 | background-size: contain; | |
| 707 | cursor: pointer; | |
| 708 | height: 100%; | |
| 709 | margin: 0; | |
| 710 | padding: 0; | |
| 711 | position: relative; | |
| 712 | width: 100%; | |
| 713 | } | |
| 714 | .vjs-poster img { | |
| 715 | display: block; | |
| 716 | margin: 0 auto; | |
| 717 | max-height: 100%; | |
| 718 | padding: 0; | |
| 719 | width: 100%; | |
| 720 | } | |
| 721 | /* Hide the poster when native controls are used otherwise it covers them */ | |
| 722 | .video-js.vjs-using-native-controls .vjs-poster { | |
| 723 | display: none; | |
| 724 | } | |
| 725 | /* Text Track Styles */ | |
| 726 | /* Overall track holder for both captions and subtitles */ | |
| 727 | .video-js .vjs-text-track-display { | |
| 728 | text-align: center; | |
| 729 | position: absolute; | |
| 730 | bottom: 4em; | |
| 731 | /* Leave padding on left and right */ | |
| 732 | left: 1em; | |
| 733 | right: 1em; | |
| 734 | } | |
| 735 | /* Individual tracks */ | |
| 736 | .video-js .vjs-text-track { | |
| 737 | display: none; | |
| 738 | font-size: 1.4em; | |
| 739 | text-align: center; | |
| 740 | margin-bottom: 0.1em; | |
| 741 | /* Transparent black background, or fallback to all black (oldIE) */ | |
| 742 | /* background-color-with-alpha */ | |
| 743 | background-color: #000000; | |
| 744 | background-color: rgba(0, 0, 0, 0.5); | |
| 745 | } | |
| 746 | .video-js .vjs-subtitles { | |
| 747 | color: #ffffff /* Subtitles are white */; | |
| 748 | } | |
| 749 | .video-js .vjs-captions { | |
| 750 | color: #ffcc66 /* Captions are yellow */; | |
| 751 | } | |
| 752 | .vjs-tt-cue { | |
| 753 | display: block; | |
| 754 | } | |
| 755 | /* Hide disabled or unsupported controls */ | |
| 756 | .vjs-default-skin .vjs-hidden { | |
| 757 | display: none; | |
| 758 | } | |
| 759 | .vjs-lock-showing { | |
| 760 | display: block !important; | |
| 761 | opacity: 1; | |
| 762 | visibility: visible; | |
| 763 | } | |
| 764 | /* ----------------------------------------------------------------------------- | |
| 765 | The original source of this file lives at | |
| 766 | https://github.com/videojs/video.js/blob/master/src/css/video-js.less */ | |
