Commit d5f0926f authored by martinforell's avatar martinforell
Browse files

Initial commit

parents
@import "svg_path";
@import "helper_variables";
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#volume-slider {
display: none;
}
#kit-logo {
display: none;
}
}
@media only screen and (max-width: 600px) {
.modal-header h3 {
margin: 0.8rem 0 !important;
}
.modal-footer img {
height: 3.2rem !important;
}
#disclaimer {
font-size: 1rem !important;
}
#share-embed-btn-container, #share-url-container button {
display: none !important;
}
#share-embed {
width: 100% !important;
}
#embed-container p, #link-container p {
font-size: 1.2rem;
}
#volume-slider {
display: none;
}
#placeholder #start-video {
margin: 0 auto;
width: 6.4rem;
height: 6.4rem;
border-radius: 0 0.8rem 0 0.8rem;
}
#placeholder span#start-video-icon {
background: url($ic_play_outline) no-repeat top left;
background-size: contain;
cursor: pointer;
display: inline-block;
height: 6.4rem;
width: 6.4rem;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
}
@media only screen and (max-width: 800px) {
#container-navigation {
top: 0;
}
#container:hover #container-navigation {
top: -$container_controls_height_mobile;
}
#container #container-controls {
height: $container_controls_height_mobile;
}
#container #video-controls {
height: $video_controls_height_mobile;
}
#container-controls span {
cursor: pointer;
display: inline-block;
height: $video_controls_height_mobile;
width: $video_controls_height_mobile;
}
#container-controls #zml-logo span {
width: 3rem;
}
#container-controls #kit-logo {
display: none;
}
;
.modal-content {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 800px !important;
border-radius: 0 !important;
}
#share-menu #share-url-btn span, #share-menu #share-embed-btn span {
height: 2.4rem !important;
width: 2.4rem !important;
}
#share-menu button {
width: 5.2rem !important;
height: 3.2rem !important;
}
#share-menu .btn-text {
display: none;
}
#monitor button {
height: $monitor_height_width_mobile;
width: $monitor_height_width_mobile;
cursor: pointer;
}
#video-stream-icon {
width: $monitor_container_mobile;
}
}
@import "helper_variables";
#container #placeholder {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
z-index: 4;
}
#container #placeholder img {
height: 100%;
width: 100%;
}
#container #placeholder .placeholder-container {
height: 100%;
width: 100%;
z-index: 4;
background-color: rgba(0, 0, 0, 0.16);
position: absolute;
}
#placeholder #start-video {
margin: 0 auto;
width: $ph_icon_wh;
height: $ph_icon_wh;
cursor: pointer;
}
#placeholder span#start-video-icon {
background: url($ic_play_outline) no-repeat top left;
background-size: contain;
cursor: pointer;
display: inline-block;
height: $ph_icon_wh;
width: $ph_icon_wh;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
#placeholder #start-video-icon {
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
-ms-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}
#placeholder #start-video:hover #start-video-icon {
transform: scale(0.9);
-webkit-transform: scale(0.9, 0.9);
-moz-transform: scale(0.9, 0.9);
-o-transform: scale(0.9, 0.9);
--ms-transform: scale(0.9, 0.9);
}
@import "colors";
@import "svg_path";
#container-segment {
position: relative;
z-index: 5;
}
#video-stream {
height: 100%;
cursor: none;
pointer-events: none;
}
#video-stream #video-stream-icon {
background: url($video_stream_1) no-repeat center;
background-size: contain;
width: 12rem;
//transition: background .2s ease-in-out;
//-webkit-transition: background .2s ease-in-out;
//-moz-transition: background .2s ease-in-out;
//-o-transition: background .2s ease-in-out;
//-ms-transition: background .2s ease-in-out;
}
@import "svg_path";
@import "colors";
/* The Modal (background) */
.modal {display: none;
position: absolute;
z-index: 20;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
color: black;
}
/* Modal Content */
.modal-content {
max-width: 600px;
position: relative;
background-color: #fefefe;
margin: 2.4rem auto 0 auto;
padding: 0;
width: 80%;
box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
overflow: auto;
-webkit-border-radius: 0.8rem;
-moz-border-radius: 0.8rem;
border-radius: 0.8rem;
}
/* The Close Button */
.close {
color: black;
float: right;
font-size: 2.8rem;
font-weight: bold;
}
.close:hover,
.close:focus {
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 0.2rem 1.6rem;
}
.modal-body {
padding: 0.2rem 1.6rem;
}
.modal-footer {
padding:0 1.6rem 0.8rem 1.6rem;
justify-content: flex-end
}
#share-url-container {
padding: 0.4rem 1.6rem;
border: 0.1rem solid #000;
border-radius: 0.4rem;
}
#share-url-container input {
width: 80%;
border: none;
height: 3.2rem;
}
#share-url-container button {
width: 20%;
font-weight: bold;
text-transform: uppercase;
padding: 0.4rem 0.8rem;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
border-radius: 0.4rem;
cursor: pointer;
}
#share-url-container button:hover {
background: $blue_light_3;
}
#share-menu #share-url-btn span, #share-menu #share-embed-btn span {
cursor: pointer;
display: inline-block;
height: 3.2rem;
width: 3.2rem;
}
#share-menu #share-url-btn span#link-icon {
background: url($ic_link) no-repeat center;
background-size: contain;
}
#share-menu span#embed-icon {
background: url($ic_embed) no-repeat center;
background-size: contain;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -30rem;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -30rem;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#share-menu button {
width: 6.4rem;
height: 4rem;
border-radius: 0.4rem;
}
#share-menu .active {
background: $blue_light_4;
}
#share-menu .btn-text {
width: 100%;
text-align: center;
padding: 0;
margin: 0.4rem 0 0 0;
font-size: 1.2rem;
font-weight: bold;
}
#share-embed-container {
border: 0.1rem solid;
border-radius: 0.4rem;
padding: 0.4rem;
}
#share-embed-container textarea {
width: 85%;
border: none;
resize: none;
}
#share-embed-container #share-embed-btn-container {
width: 15%;
display: flex;
justify-content: center;
flex-direction: column;
}
#share-embed-container button {
width: 100%;
height: 4rem;
border-radius: 0.4rem;
margin: 0 auto;
font-weight: bold;
text-transform: uppercase;
padding: 0.4rem 0.8rem;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
cursor: pointer;
}
#share-embed-container button:hover {
background: $blue_light_3;
}
.modal-header h3 {
margin: 1.2rem 0;
}
//
//#embed-button {
// padding: 0.8rem 1.6rem;
// cursor: pointer;
// font-size: 1.6rem;
// color: $blue;
// -webkit-transition: all .3s ease;
// -moz-transition: all .3s ease;
// -o-transition: all .3s ease;
// -ms-transition: all .3s ease;
// border-radius: 0.4rem;
// text-transform: uppercase;
//}
//
//#embed-button:hover {
// background: $blue_light_3;
//}
#disclaimer {
font-size: 1.2rem;
padding: 0.8rem;
}
#zml-logo-color {
background: url($zml_logo_color) no-repeat center;
background-size: contain;
}
\ No newline at end of file
@import "colors";
// SLIDER
//slider
.video-slider__slider {
margin: 0;
width: 100%;
height: 100%;
outline: none;
border: none;
opacity: 0;
position: absolute;
pointer-events: none;
}
.video-slider {
flex: auto;
flex-grow: 1;
flex-shrink: 1;
position: relative;
z-index: 8;
}
.video-slider:hover .video-slider__slider {
opacity: 1;
}
.video-slider__player {
height: 0.6rem;
}
#volume-slider.slider {
background: $gray-light;
border-radius: 0.5rem;
}
//Slider design
.slider {
-webkit-appearance: none;
height: 0.6rem;
outline: none;
transition: opacity .2s;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
background: transparent;
}
.slider::-webkit-slider-thumb {
width: 1.6rem;
height: 1.6rem;
border: 0.2rem solid transparent;
background-color: $blue;
border-radius: 50%;
opacity: 1;
position: relative;
box-shadow: 0 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.17);
pointer-events: auto;
}
.slider::-moz-range-thumb {
width: 1.6rem;
height: 1.6rem;
border: 0.2rem solid transparent;
background-color: $blue;
border-radius: 50%;
opacity: 1;
position: relative;
pointer-events: auto;
box-shadow: 0 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.17);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: $blue;
cursor: pointer;
box-shadow: 0 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.17);
pointer-events: auto;
}
.slider::-moz-range-thumb {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: $blue;
cursor: pointer;
box-shadow: 0 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.17);
pointer-events: auto;
}
.video-slider__progress {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
position: absolute;
width: 100%;
display: block;
height: 100%;
outline: none;
border: none;
cursor: pointer;
}
.video-slider__buffer {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: $gray-light;
position: absolute;
width: 100%;
display: block;
height: 100%;
outline: none;
border: none;
}
.video-slider .video-slider__progress[value]::-webkit-progress-bar {
background-color: transparent;
}
.video-slider .video-slider__progress[value]::-webkit-progress-value {
background-color: $blue;
}
.video-slider .video-slider__progress::-moz-progress-bar {
background-color: $blue;
}
.video-slider .video-slider__buffer[value]::-webkit-progress-bar {
background-color: $gray-light;
}
.video-slider .video-slider__buffer[value]::-webkit-progress-value {
background-color: $blue_dark3;
opacity: 0.7;
}
.video-slider .video-slider__buffer::-moz-progress-bar {
background-color: $blue_dark3;
opacity: 0.7;
}
#time-change {
opacity: 0;
width: 4.8rem;
height: 1.2rem;
line-height: 1.2rem;
font-size: 1rem !important;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
text-align: center;
padding: 0.5rem 0;
position: absolute;
z-index: 1;
bottom: 1.2rem;
pointer-events: none;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
}
#time-change::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.5rem;
border-width: 0.5rem;
border-style: solid;
border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;