|
- /*
- Player Skin Designer for Video.js
- http://videojs.com
-
- To customize the player skin edit
- the CSS below. Click "details"
- below to add comments or questions.
- This file uses some SCSS. Learn more
- at http://sass-lang.com/guide)
-
- This designer can be linked to at:
- https://codepen.io/heff/pen/EarCt/left/?editors=010
- */
-
-
- // The following are SCSS variables to automate some of the values.
- // But don't feel limited by them. Change/replace whatever you want.
-
- // The color of icons, text, and the big play button border.
- // Try changing to #0f0
- @primary-foreground-color: #fff; // #fff default
-
- // The default color of control backgrounds is mostly black but with a little
- // bit of blue so it can still be seen on all-black video frames, which are common.
- // Try changing to #900
- @primary-background-color: @blue; // #2B333F default
- @red-primary-background-color: red(@primary-background-color);
- @green-primary-background-color: green(@primary-background-color);
- @blue-primary-background-color: blue(@primary-background-color);
-
- // Try changing to true
- @center-big-play-button: true; // true default
-
- /* We're using SCSS vars here because the values are used in multiple places.
- Now that font size is set, the following em values will be a multiple of the
- new font size. If the font-size is 3em (30px), then setting any of
- the following values to 3em would equal 30px. 3 * font-size. */
- @big-play-width: 3em;
- /* 1.5em = 45px default */
- @big-play-height: 1.5em;
-
- .video-js {
- /* The base font size controls the size of everything, not just text.
- All dimensions use em-based sizes so that the scale along with the font size.
- Try increasing it to 15px and see what happens. */
- font-size: 10px;
- width: 100%;
-
- /* The main font color changes the ICON COLORS as well as the text */
- color: @primary-foreground-color;
- }
-
- /* The "Big Play Button" is the play button that shows before the video plays.
- To center it set the align values to center and middle. The typical location
- of the button is the center, but there is trend towards moving it to a corner
- where it gets out of the way of valuable content in the poster image.*/
- .vjs-default-skin .vjs-big-play-button {
- /* The font size is what makes the big play button...big.
- All width/height values use ems, which are a multiple of the font size.
- If the .video-js font-size is 10px, then 3em equals 30px.*/
- font-size: 3em;
-
- line-height: @big-play-height;
- height: @big-play-height;
- width: @big-play-width;
-
- /* 0.06666em = 2px default */
- border: 0.06666em solid @primary-foreground-color;
- /* 0.3em = 9px default */
- border-radius: 0.3em;
- }
- .vjs-default-skin .vjs-big-play-button when (@center-big-play-button = true) {
- /* Align center */
- left: 50%;
- top: 50%;
- margin-left: -(@big-play-width / 2);
- margin-top: -(@big-play-height / 2);
- }
- .vjs-default-skin .vjs-big-play-button when not (@center-big-play-button = true) {
- /* Align top left. 0.5em = 15px default */
- left: 0.5em;
- top: 0.5em;
- }
-
-
- /* The default color of control backgrounds is mostly black but with a little
- bit of blue so it can still be seen on all-black video frames, which are common. */
- .video-js .vjs-control-bar,
- .video-js .vjs-big-play-button,
- .video-js .vjs-menu-button .vjs-menu-content {
- /* IE8 - has no alpha support */
- background-color: @primary-background-color;
- /* Opacity: 1.0 = 100%, 0.0 = 0% */
- background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7);
- }
-
- // Make a slightly lighter version of the main background
- // for the slider background.
- @slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%);
- @red-slider-bg-color: red(@slider-bg-color);
- @green-slider-bg-color: green(@slider-bg-color);
- @blue-slider-bg-color: blue(@slider-bg-color);
-
- /* Slider - used for Volume bar and Progress bar */
- .video-js .vjs-slider {
- background-color: @slider-bg-color;
- background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
- }
-
- /* The slider bar color is used for the progress bar and the volume bar
- (the first two can be removed after a fix that's coming) */
- .video-js .vjs-volume-level,
- .video-js .vjs-play-progress,
- .video-js .vjs-slider-bar {
- background: @primary-foreground-color;
- }
-
- /* The main progress bar also has a bar that shows how much has been loaded. */
- .video-js .vjs-load-progress {
- /* For IE8 we'll lighten the color */
- background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%);
- /* Otherwise we'll rely on stacked opacities */
- background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
- }
-
- /* The load progress bar also has internal divs that represent
- smaller disconnected loaded time ranges */
- .video-js .vjs-load-progress div {
- /* For IE8 we'll lighten the color */
- background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%);
- /* Otherwise we'll rely on stacked opacities */
- background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75);
- }
-
-
- :not(.vjs-has-started) .vjs-control-bar {
- display: flex;
- }
-
- .vjs-audio .vjs-big-play-button {
- display: none;
- }
-
- .vjs-audio.audio-player-dimensions {
- height: 30px;
- }
|