1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
onion/sass/ascribe_media_player.scss

110 lines
2.3 KiB
SCSS
Raw Normal View History

2015-06-04 16:15:59 +02:00
.ascribe-media-player {
margin-bottom: 1em;
2015-07-28 17:34:15 +02:00
video,
2015-06-04 16:15:59 +02:00
img {
2015-07-28 17:34:15 +02:00
display: block;
2015-08-31 19:04:44 +02:00
height: auto;
2015-07-28 17:34:15 +02:00
margin: 0 auto;
2015-08-31 19:04:44 +02:00
max-height: 640px;
max-width: 100%;
width: auto;
2015-06-04 16:15:59 +02:00
}
2015-06-04 17:37:46 +02:00
.media-other {
color: #cccccc;
2015-08-31 19:04:44 +02:00
font-size: 500%;
2015-06-04 17:37:46 +02:00
}
2015-07-02 17:10:32 +02:00
2015-07-02 18:27:09 +02:00
.audiojs {
background-image: none;
2015-08-31 19:04:44 +02:00
margin: 50px auto;
* {
box-sizing: content-box;
}
2015-07-02 18:27:09 +02:00
2015-08-31 19:04:44 +02:00
.loaded {
background-color: $ascribe-color-green;
background-image: none;
}
2015-07-02 18:27:09 +02:00
2015-08-31 19:04:44 +02:00
.progress {
background-color: rgba(255, 255, 255, .8);
background-image: none;
}
2015-07-02 18:27:09 +02:00
}
2015-07-02 17:10:32 +02:00
.video-js,
.vjs-poster {
background-color: transparent;
}
.video-js .vjs-tech {
position: relative;
}
.vjs-fullscreen {
2015-08-31 19:04:44 +02:00
padding-top: 0;
2015-07-02 17:10:32 +02:00
2015-08-31 19:04:44 +02:00
video {
max-height: 100%;
}
2015-07-29 16:04:33 +02:00
}
2015-08-31 19:04:44 +02:00
2015-07-02 17:10:32 +02:00
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level {
background: $ascribe-color-green;
2015-07-02 17:10:32 +02:00
}
.vjs-default-skin .vjs-big-play-button {
2015-08-31 19:04:44 +02:00
background-color: rgba(0, 0, 0, .8);
border: 0;
2015-07-02 17:10:32 +02:00
-moz-border-radius: 6px;
2015-08-31 19:04:44 +02:00
-o-border-radius: 6px;
2015-07-02 17:10:32 +02:00
-webkit-border-radius: 6px;
2015-08-31 19:04:44 +02:00
border-radius: 6px;
2015-07-02 17:10:32 +02:00
-moz-box-shadow: none;
2015-08-31 19:04:44 +02:00
-o-box-shadow: none;
2015-07-02 17:10:32 +02:00
-webkit-box-shadow: none;
2015-08-31 19:04:44 +02:00
box-shadow: none;
2015-07-02 17:10:32 +02:00
height: 60px;
left: 50%;
margin: -30px -50px;
2015-08-31 19:04:44 +02:00
top: 50%;
width: 100px;
2015-07-02 17:10:32 +02:00
}
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
2015-08-31 19:04:44 +02:00
background-color: rgba(0, 0, 0, .9);
2015-07-02 17:10:32 +02:00
border-color: #fff;
-moz-box-shadow: none;
2015-08-31 19:04:44 +02:00
-o-box-shadow: none;
2015-07-02 17:10:32 +02:00
-webkit-box-shadow: none;
2015-08-31 19:04:44 +02:00
box-shadow: none;
2015-07-02 17:10:32 +02:00
-moz-transition: all 0s;
2015-08-31 19:04:44 +02:00
-o-transition: all 0s;
2015-07-02 17:10:32 +02:00
-webkit-transition: all 0s;
2015-08-31 19:04:44 +02:00
transition: all 0s;
2015-07-02 17:10:32 +02:00
}
.vjs-default-skin .vjs-big-play-button:before {
line-height: 60px;
}
.vjs-default-skin .vjs-slider-handle:before,
.vjs-default-skin .vjs-big-play-button:before {
text-shadow: none;
}
.vjs-default-skin .vjs-volume-bar {
height: .5em;
}
.vjs-default-skin .vjs-control-bar {
2015-08-31 19:04:44 +02:00
background-color: rgba(0, 0, 0, .7);
2015-07-02 17:10:32 +02:00
}
2015-06-04 16:15:59 +02:00
}