Jacek Pyziak
eacf500d18
- Introduced a new YouTube tech integration in `youtube.min.js` for enhanced video playback. - Created new admin template files for managing video settings, including `index.php` and `steasyvideo-pro.tpl`. - Updated hook templates (`device_mode.tpl`, `forquickview.tpl`, `header.tpl`, `miniature.tpl`, `miniature_tb.tpl`, and predefined templates) to include video functionality. - Implemented caching headers in several PHP files to improve performance. - Ensured all new templates include proper licensing information and copyright notices.
72 lines
2.6 KiB
CSS
72 lines
2.6 KiB
CSS
/*
|
|
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
|
|
*/
|
|
.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;
|
|
/* The main font color changes the ICON COLORS as well as the text */
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 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.*/
|
|
.video-js.vjs-big-play-centered .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;
|
|
/* 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. */
|
|
/* 1.5em = 45px default */
|
|
line-height: 1.9em;
|
|
height: 2em;
|
|
width: 2em;
|
|
/* 0.06666em = 2px default */
|
|
border: 3px solid #ffffff;
|
|
/* 0.3em = 9px default */
|
|
border-radius: 2em;
|
|
/* Align center */
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -1em;
|
|
margin-top: -1em;
|
|
background: rgba(0,0,0,0.35);
|
|
}
|
|
|
|
/* 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 {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Slider - used for Volume bar and Progress bar */
|
|
.video-js .vjs-slider, .video-js .vjs-load-progress {
|
|
background-color: rgba(115,133,159,0.5);
|
|
}
|
|
.video-js .vjs-load-progress div{ background-color: rgba(255,255,255,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: #2483d5;
|
|
}
|