mirror of
https://github.com/h5p/h5p-interactive-video.git
synced 2026-07-22 05:19:06 +08:00
477a560aa7
When the user clicks outside the interaction a warning comes up telling him that "You need to answer all the questions correctly before continuing." Relates to: #HFP-179, #HFP-55
1656 lines
46 KiB
CSS
1656 lines
46 KiB
CSS
/* Only used for slider in slide-handler, should be included into H5Picons */
|
|
@font-face {
|
|
font-family: H5PInteractiveVideo;
|
|
src: url('../fonts/H5PInteractiveVideo.eot');
|
|
src: url('../fonts/H5PInteractiveVideo.eot?#iefix') format('embedded-opentype'),
|
|
url('../fonts/H5PInteractiveVideo.woff') format('woff'),
|
|
url('../fonts/H5PInteractiveVideo.ttf') format('truetype'),
|
|
url('../fonts/H5PInteractiveVideo.svg#H5PInteractiveVideo') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
/* H5P specific icons generated by IcoMoon. */
|
|
@font-face {
|
|
font-family: 'H5Picons';
|
|
src:url('../fonts/h5p.eot?v34b5s');
|
|
src:url('../fonts/h5p.eot?#iefixv34b5s') format('embedded-opentype'),
|
|
url('../fonts/h5p.ttf?v34b5s') format('truetype'),
|
|
url('../fonts/h5p.woff?v34b5s') format('woff'),
|
|
url('../fonts/h5p.svg?v34b5s#h5p') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.h5p-interactive-video {
|
|
position: relative;
|
|
background: #000 !important;
|
|
overflow: hidden;
|
|
line-height: 1.25em;
|
|
font-size: 16px;
|
|
}
|
|
.h5p-interactive-video > div {
|
|
z-index: 1;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-video-wrapper.h5p-disable-opt-out {
|
|
z-index: auto;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-video-wrapper.h5p-disable-opt-out .h5p-interaction {
|
|
z-index: 1;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-question {
|
|
color: #000;
|
|
}
|
|
|
|
/* IV has it's own controller for fullscreen. Can not
|
|
use display:none, since IV is triggering a click on
|
|
the disable fullscreen button in semi fullscreen mode */
|
|
.h5p-interactive-video .h5p-content-controls {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top:0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-video-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.h5p-interactive-video .h5p-video {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
color: #fff;
|
|
}
|
|
.h5p-interactive-video .h5p-video::-internal-media-controls-overlay-cast-button {
|
|
display: none; /* No chromecast support */
|
|
}
|
|
.h5p-interactive-video object {
|
|
display: block;
|
|
}
|
|
.h5p-interactive-video .h5p-overlay {
|
|
color: #2c2c2c;
|
|
}
|
|
.h5p-interactive-video .h5p-overlay.h5p-visible {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-ie-transparent-background {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUODw0yPG414gAAAA1JREFUCNdj+P//PwMACPwC/lyfz9oAAAAASUVORK5CYII=);
|
|
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUODw0yPG414gAAAA1JREFUCNdj+P//PwMACPwC/lyfz9oAAAAASUVORK5CYII=', sizingMethod='scale');
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction {
|
|
position: absolute;
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
z-index: 2;
|
|
outline: none;
|
|
}
|
|
|
|
/* Touch area bigger than actual button */
|
|
.h5p-interactive-video .h5p-interaction .h5p-touch-area {
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-label, .h5p-interactive-video .h5p-interaction-button {
|
|
-webkit-transition: -webkit-transform 0.2s;
|
|
-moz-transition: -moz-transform 0.2s;
|
|
transition: transform 0.2s;
|
|
}
|
|
.h5p-interactive-video .h5p-interaction-label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0.875em;
|
|
height: 100%;
|
|
line-height: 1.75em;
|
|
padding: 0 0.875em 0 1.375em;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
border-top-right-radius: 1em;
|
|
border-bottom-right-radius: 1em;
|
|
color: #fff;
|
|
z-index: 1;
|
|
width: auto;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
vertical-align: text-bottom;
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000);
|
|
}
|
|
/* Text in labels should have smaller margins: */
|
|
.h5p-interactive-video .h5p-interaction-label .h5p-interaction-label-text {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 0.7em;
|
|
margin: 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-label .h5p-interaction-label-text > p {
|
|
font-size: 1em;
|
|
margin: 0;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-label.h5p-left-label {
|
|
left: auto;
|
|
right: 0.875em;
|
|
padding: 0 1.375em 0 0.875em;
|
|
border-top-left-radius: 1em;
|
|
border-bottom-left-radius: 1em;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-button {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 2;
|
|
display: block;
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
border-radius: 50%;
|
|
line-height: 1.75em;
|
|
color: #fff;
|
|
-webkit-box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
-moz-box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
text-align: center;
|
|
border: 0;
|
|
-webkit-transition: background 0.3s, box-shadow 0.3s;
|
|
-moz-transition: background 0.3s, box-shadow 0.3s;
|
|
-ms-transition: background 0.3s, box-shadow 0.3s;
|
|
-o-transition: background 0.3s, box-shadow 0.3s;
|
|
transition: background 0.3s, box-shadow 0.3s;
|
|
}
|
|
.h5p-interactive-video .h5p-interaction:focus .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-interaction:hover .h5p-interaction-button {
|
|
-webkit-box-shadow: 0 0.3em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
-moz-box-shadow: 0 0.3em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0 0.3em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
.h5p-interactive-video .h5p-hidden > .h5p-interaction-button {
|
|
-webkit-transform: rotate(90deg) scale(0,0);
|
|
-moz-transform: rotate(90deg) scale(0,0);
|
|
-ms-transform: rotate(90deg) scale(0,0);
|
|
-o-transform: rotate(90deg) scale(0,0);
|
|
transform: rotate(90deg) scale(0,0);
|
|
}
|
|
.h5p-interactive-video .h5p-hidden > .h5p-interaction-label {
|
|
-webkit-transform: scale(0,0) translateX(-100%);
|
|
-moz-transform: scale(0,0) translateX(-100%);
|
|
-ms-transform: scale(0,0) translateX(-100%);
|
|
transform: scale(0,0) translateX(-100%);
|
|
}
|
|
|
|
/* Purple interactions; default */
|
|
.h5p-interactive-video div > .h5p-interaction-button {
|
|
background: #981d99;
|
|
}
|
|
|
|
.h5p-interactive-video div:hover > .h5p-interaction-button,
|
|
.h5p-interactive-video div:focus > .h5p-interaction-button {
|
|
background: #661366;
|
|
}
|
|
|
|
.h5p-interactive-video div:active > .h5p-interaction-button {
|
|
background: #4c0e4c;
|
|
box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.h5p-interactive-video div > .h5p-interaction-button:before {
|
|
font-family: 'H5Picons';
|
|
content: "\e609";
|
|
}
|
|
|
|
/* Green interaction; gotoquestion */
|
|
.h5p-interactive-video .h5p-gotoquestion-interaction > .h5p-interaction-button {
|
|
background: #018d82;
|
|
}
|
|
.h5p-interactive-video .h5p-gotoquestion-interaction:hover > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-gotoquestion-interaction:focus > .h5p-interaction-button {
|
|
background: #02766c;
|
|
}
|
|
.h5p-interactive-video .h5p-gotoquestion-interaction:active > .h5p-interaction-button {
|
|
background: #025f57;
|
|
}
|
|
|
|
/* Blue interactions; text, images, etc. */
|
|
.h5p-interactive-video .h5p-text-interaction > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-table-interaction > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-link-interaction > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-image-interaction > .h5p-interaction-button {
|
|
background: #1d5cff;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-text-interaction:hover > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-table-interaction:hover > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-link-interaction:hover > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-image-interaction:hover > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-text-interaction:focus > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-table-interaction:focus > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-link-interaction:focus > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-image-interaction:focus > .h5p-interaction-button {
|
|
background: #003fdf;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-text-interaction:active > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-table-interaction:active > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-link-interaction:active > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-image-interaction:active > .h5p-interaction-button {
|
|
background: #163c9b;
|
|
box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-text-interaction > .h5p-interaction-button:before,
|
|
.h5p-interactive-video .h5p-table-interaction > .h5p-interaction-button:before,
|
|
.h5p-interactive-video .h5p-link-interaction > .h5p-interaction-button:before,
|
|
.h5p-interactive-video .h5p-image-interaction > .h5p-interaction-button:before {
|
|
font-family: 'H5PFontAwesome4';
|
|
content: "\f055";
|
|
}
|
|
|
|
/* Timecode links are green */
|
|
.h5p-interactive-video .h5p-goto-timecode > .h5p-interaction-button {
|
|
background: #018d82;
|
|
}
|
|
.h5p-interactive-video .h5p-goto-timecode:hover > .h5p-interaction-button,
|
|
.h5p-interactive-video .h5p-goto-timecode:focus > .h5p-interaction-button {
|
|
background: #007b71;
|
|
}
|
|
.h5p-interactive-video .h5p-goto-timecode:active > .h5p-interaction-button {
|
|
background: #055e57;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog-interaction {
|
|
font-size: 0.875em; /* 14px */
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-interaction.h5p-blanks .h5p-blanks-footer {
|
|
min-height: 5em;
|
|
}
|
|
/* Link interaction specific style */
|
|
.h5p-interactive-video .h5p-link-interaction .h5p-link a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-link-interaction {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.2);
|
|
border-radius: 1em;
|
|
height: auto;
|
|
width: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-link-interaction:hover,
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-link-interaction:focus {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-link-interaction:active {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction .h5p-interaction-inner.h5p-link:after {
|
|
font-family: "H5PFontAwesome4";
|
|
content: '\f08e';
|
|
color: #fff;
|
|
margin-left: 0.7em;
|
|
font-size: 0.75em;
|
|
}
|
|
/* Do not show anchor icon for IV hotspot */
|
|
.h5p-interactive-video .h5p-interaction .h5p-interaction-inner.h5p-link.h5p-ivhotspot:after {
|
|
content: none;
|
|
}
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-link-interaction .h5p-interaction-inner.h5p-link {
|
|
margin: 0 0.8em;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster {
|
|
z-index: 1;
|
|
background: #fff;
|
|
box-shadow: 0 0 0.625em 0 rgba(0, 0, 0, 0.25);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Use drop-shadow in case of transparent images */
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-transparent-interaction.h5p-image-interaction:not(.goto-clickable-visualize):not(.h5p-box-shadow-disabled) .h5p-image img {
|
|
filter: drop-shadow(0 0 0.325em rgba(0, 0, 0, 0.25));
|
|
}
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-transparent-interaction.h5p-image-interaction:not(.goto-clickable-visualize) {
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-box-shadow-disabled {
|
|
box-shadow: none;
|
|
}
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-transparent-interaction.h5p-box-shadow-disabled .h5p-image img {
|
|
filter: none;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-ivhotspot-interaction {
|
|
box-shadow: none;
|
|
background: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-ivhotspot-interaction .h5p-interaction-outer,
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.h5p-transparent-interaction.h5p-image-interaction .h5p-interaction-outer {
|
|
overflow: visible;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster .h5p-interaction-outer {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-inner,
|
|
.h5p-interactive-video .h5p-interaction-inner.h5p-image {
|
|
width: 100%;
|
|
height: auto;
|
|
font-size: 0.875em;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-inner.h5p-ivhotspot {
|
|
height: 100%;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-inner.h5p-text {
|
|
width: auto;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-inner.h5p-questionnaire-wrapper,
|
|
.h5p-interactive-video .h5p-interaction-inner.h5p-single-choice-set,
|
|
.h5p-interactive-video .h5p-interaction-inner.h5p-image {
|
|
height: 100%;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog .h5p-image img {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interaction-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-controls {
|
|
font-size: 16px;
|
|
height: 36px;
|
|
background: #2c2c2c;
|
|
}
|
|
.h5p-interactive-video .h5p-control {
|
|
display: block;
|
|
height: 36px;
|
|
color: #fefefe;
|
|
outline: 0;
|
|
transition: box-shadow 0.1s ease-out 0.3s;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-control:hover {
|
|
text-decoration: none;
|
|
}
|
|
.h5p-interactive-video .h5p-controls-left {
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
.h5p-interactive-video .h5p-controls-left .h5p-control {
|
|
float: left;
|
|
}
|
|
.h5p-interactive-video .h5p-controls-left .h5p-control:first-child {
|
|
margin: 0 4px 0 8px;
|
|
}
|
|
.h5p-interactive-video .h5p-controls-right {
|
|
float: right;
|
|
overflow: hidden;
|
|
}
|
|
.h5p-interactive-video .h5p-controls-right .h5p-control {
|
|
float: right;
|
|
}
|
|
.h5p-interactive-video .h5p-controls-right .h5p-control:first-child {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-control {
|
|
width: 36px;
|
|
margin-right: 6px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-control.h5p-disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-control.h5p-time,
|
|
.h5p-interactive-video .h5p-control.h5p-slider.disabled .ui-slider-handle,
|
|
.h5p-interactive-video .h5p-control.h5p-slider.disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-control:before {
|
|
position: absolute;
|
|
font-family: 'H5PFontAwesome4';
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
font-size: 22px;
|
|
text-transform: none;
|
|
line-height: 37px;
|
|
width: 36px;
|
|
color: #fbfbfb;
|
|
text-align: center;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button {
|
|
display: inline-block;
|
|
padding-top: 4em;
|
|
margin: 0 1em;
|
|
position: relative;
|
|
vertical-align: bottom;
|
|
outline: none;
|
|
-webkit-transition: visibility 0s linear 0.1s;
|
|
}
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button.h5p-hide {
|
|
visibility: hidden;
|
|
-webkit-transition-delay: 0s;
|
|
}
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button:before {
|
|
font-size: 4em;
|
|
line-height: 1em;
|
|
position: absolute;
|
|
font-family: 'H5PFontAwesome4';
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.h5p-interactive-video .h5p-control.h5p-active:before,
|
|
.h5p-interactive-video .h5p-control:active:before,
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button:active {
|
|
color: #bababa
|
|
}
|
|
.h5p-interactive-video .h5p-control:hover:before,
|
|
.h5p-interactive-video .h5p-control:focus:before,
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button:hover,
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button:focus {
|
|
color: #dbd7d1;
|
|
}
|
|
.h5p-interactive-video .h5p-control.h5p-disabled:before,
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button.h5p-disabled {
|
|
color: #606060;
|
|
}
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button.h5p-disabled {
|
|
color: #747474;
|
|
}
|
|
.h5p-interactive-video .h5p-play:before {
|
|
content: "\f04c";
|
|
}
|
|
.h5p-interactive-video .h5p-pause:before {
|
|
content: "\f04b";
|
|
}
|
|
.h5p-interactive-video .h5p-rewind10:before {
|
|
content: "\f1da"; /* fa-history */
|
|
}
|
|
.h5p-interactive-video .h5p-control.h5p-bookmarks:before,
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-bookmarks:before {
|
|
content: "\f02e";
|
|
}
|
|
.h5p-interactive-video .h5p-control.h5p-quality:before,
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-quality:before {
|
|
content: "\f013";
|
|
}
|
|
.h5p-interactive-video .h5p-control.h5p-playbackRate:before,
|
|
.h5p-interactive-video .h5p-minimal-overlay .h5p-playbackRate:before {
|
|
content: "\f0e4"; /* fa-tachometer */
|
|
}
|
|
.h5p-interactive-video .h5p-fullscreen:before {
|
|
content: "\f065";
|
|
}
|
|
.h5p-interactive-video .h5p-exit:before {
|
|
content: "\f066";
|
|
}
|
|
.h5p-interactive-video .h5p-mute:before {
|
|
content: "\f028";
|
|
}
|
|
.h5p-interactive-video .h5p-muted:before {
|
|
content: "\f026";
|
|
}
|
|
.h5p-interactive-video .h5p-more:before {
|
|
content: "\f142";
|
|
}
|
|
|
|
.h5p-interactive-video.h5p-minimal .h5p-control.h5p-bookmarks,
|
|
.h5p-interactive-video.h5p-minimal .h5p-time,
|
|
.h5p-interactive-video.h5p-minimal .h5p-control.h5p-quality,
|
|
.h5p-interactive-video.h5p-minimal .h5p-control.h5p-playbackRate,
|
|
.h5p-interactive-video .h5p-more,
|
|
.h5p-interactive-video .h5p-simple-time {
|
|
display: none;
|
|
}
|
|
.h5p-interactive-video.h5p-minimal .h5p-simple-time,
|
|
.h5p-interactive-video.h5p-minimal .h5p-more,
|
|
.h5p-interactive-video.h5p-minimal .h5p-simple-time {
|
|
display: block;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-minimal-overlay {
|
|
position: absolute;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
bottom: 36px;
|
|
border-bottom: 1px solid #8e8e8e;
|
|
text-align: center;
|
|
color: #fefefe;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: visibility 0s linear 0.1s, opacity 0.1s linear;
|
|
}
|
|
.h5p-interactive-video.h5p-minimal .h5p-minimal-overlay.h5p-show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-minimal-wrap {
|
|
top: 50%;
|
|
position: absolute;
|
|
width: 100%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-chooser {
|
|
font-size: 17px;
|
|
position: absolute;
|
|
z-index: 10;
|
|
max-width: 300px;
|
|
line-height: 21px;
|
|
background: #2c2c2c;
|
|
background: rgba(44,44,44,0.8);
|
|
color: #fbfbfb;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
bottom: 72px;
|
|
-webkit-transition: visibility 0s linear 0.1s, opacity 0.1s linear, bottom 0.1s linear;
|
|
-moz-transition: visibility 0s linear 0.1s, opacity 0.1s linear, bottom 0.1s linear;
|
|
transition: visibility 0s linear 0.1s, opacity 0.1s linear, bottom 0.1s linear;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.h5p-interactive-video.h5p-fullscreen .h5p-chooser,
|
|
.h5p-interactive-video.h5p-semi-fullscreen .h5p-chooser {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.h5p-interactive-video:not(.h5p-minimal) .h5p-chooser.h5p-bookmarks {
|
|
z-index: 1;
|
|
width: 200px;
|
|
left: -34px;
|
|
bottom: 36px;
|
|
overflow-y: hidden;
|
|
opacity: 0;
|
|
transform: scaleX(0.2) translate(0, 36px);
|
|
-webkit-transition: transform 0.3s, opacity 0.3s, max-height 0.3s, left 0.3s;
|
|
-moz-transition: transform 0.3s, opacity 0.3s, max-height 0.3s, left 0.3s;
|
|
transition: transform 0.3s, opacity 0.3s, max-height 0.3s, left 0.3s;
|
|
}
|
|
|
|
.h5p-interactive-video:not(.h5p-minimal) .h5p-chooser.h5p-bookmarks.h5p-rewind-displacement {
|
|
left: 8px;
|
|
}
|
|
|
|
.h5p-interactive-video:not(.h5p-minimal) .h5p-chooser.h5p-bookmarks:not(.h5p-show) {
|
|
pointer-events: none;
|
|
}
|
|
.h5p-interactive-video:not(.h5p-minimal) .h5p-chooser.h5p-bookmarks.h5p-show.h5p-transitioning {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.h5p-interactive-video:not(.h5p-minimal) .h5p-chooser.h5p-bookmarks.h5p-show {
|
|
overflow-y: auto;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser.h5p-bookmarks.h5p-transitioning {
|
|
visibility: visible;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser.h5p-quality {
|
|
right: 12px;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser.h5p-playbackRate {
|
|
right: 12px;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser.h5p-show {
|
|
bottom: 36px;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
-webkit-transition-delay: 0s;
|
|
-moz-transition-delay: 0s;
|
|
transition-delay: 0s;
|
|
}
|
|
.h5p-interactive-video:not(.h5p-minimal) .h5p-chooser.h5p-bookmarks.h5p-show {
|
|
width: 200px;
|
|
left: -10px;
|
|
overflow-y: auto;
|
|
opacity: 1;
|
|
transform: scaleX(1) translate(10px, 0);
|
|
}
|
|
.h5p-interactive-video .h5p-chooser.h5p-bookmarks.h5p-show * {
|
|
visibility: visible;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser > h3 {
|
|
margin: 0 0 8px 0;
|
|
padding: 8px 24px 8px 12px;
|
|
font-size: 19px;
|
|
font-weight: normal;
|
|
border-bottom: 1px solid #fbfbfb;
|
|
color: #fbfbfb;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser > ol {
|
|
list-style: none;
|
|
padding: 0 12px 8px;
|
|
margin: 0;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser > ol > li {
|
|
padding-left: 22px;
|
|
margin: 2px 0;
|
|
color: #fbfbfb;
|
|
outline: none;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser > ol > li:hover {
|
|
cursor: pointer;
|
|
color: #dbd7d1;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser > ol > li:before {
|
|
left: 12px;
|
|
position: absolute;
|
|
font-family: 'H5PFontAwesome4';
|
|
content: "\f10c";
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser > ol > li.h5p-selected:before {
|
|
content: "\f058";
|
|
}
|
|
.h5p-interactive-video .h5p-chooser.h5p-bookmarks > ol > li:before {
|
|
content: "\f02e";
|
|
}
|
|
.h5p-interactive-video .h5p-chooser-close-button {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: .1em;
|
|
right: .1em;
|
|
width: 1em;
|
|
height: 1em;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
.h5p-interactive-video.h5p-minimal .h5p-chooser-close-button {
|
|
top: .3em;
|
|
right: .3em;
|
|
font-size: 130%;
|
|
}
|
|
.h5p-interactive-video .h5p-chooser-close-button:after {
|
|
font-family: 'H5PFontAwesome4';
|
|
content: "\f00d";
|
|
}
|
|
.h5p-interactive-video .h5p-chooser-close-button:hover {
|
|
color: #dbd7d1;
|
|
}
|
|
|
|
.h5p-interactive-video.h5p-minimal .h5p-chooser {
|
|
z-index: 11;
|
|
background-color: transparent;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
max-width: none;
|
|
}
|
|
.h5p-interactive-video.h5p-minimal .h5p-chooser > h3 {
|
|
border-bottom-color: #8e8e8e;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-time,
|
|
.h5p-interactive-video .h5p-simple-time {
|
|
width: auto;
|
|
height: auto;
|
|
font-size: 0.875em;
|
|
color: #808080;
|
|
padding: 0 8px;
|
|
line-height: 36px;
|
|
}
|
|
.h5p-interactive-video .h5p-time > .h5p-current,
|
|
.h5p-interactive-video .h5p-simple-time > .h5p-current {
|
|
color: #fff;
|
|
display: inline;
|
|
}
|
|
.h5p-interactive-video .h5p-slider {
|
|
width: auto;
|
|
padding: 14px 8px 12px;
|
|
margin: 0;
|
|
height: 10px;
|
|
cursor: default;
|
|
}
|
|
.h5p-interactive-video .h5p-slider .ui-slider {
|
|
background: #0b0d0c;
|
|
border: 0;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
border-radius: 0;
|
|
-ms-touch-action: manipulation;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-slider.disabled .ui-slider {
|
|
background: #000;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-slider .ui-slider-range {
|
|
color: #e2e2e2;
|
|
height: 9px;
|
|
border-radius: 0;
|
|
}
|
|
.h5p-interactive-video .h5p-slider.disabled .ui-slider-range {
|
|
background: #7a7a7a;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-slider.disalbed .ui-slider.ui-state-disabled {
|
|
opacity: 1;
|
|
filter: none;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-slider .ui-slider-handle {
|
|
cursor: pointer;
|
|
top: -4px;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: -8px;
|
|
text-shadow: 0 0 2px #666;
|
|
outline: none;
|
|
text-decoration: none;
|
|
border: 0;
|
|
background: #fbfbfb;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-slider.disabled .ui-slider-handle {
|
|
background: none;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-slider:not(.disabled) .ui-slider-handle:before {
|
|
font-family: H5PInteractiveVideo;
|
|
content: "\e001";
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
position: absolute;
|
|
margin: -5px 0 0 -5px;
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
color: #fbfbfb;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.h5p-interactive-video .h5p-slider:not(.disabled) .ui-slider-handle:hover:before {
|
|
color: #dbd7d1;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-buffered {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 8px;
|
|
width: 0;
|
|
background: #4d4d4d;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-interactions-container, .h5p-interactive-video .h5p-bookmarks-container {
|
|
position: relative;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction {
|
|
position: absolute;
|
|
top: -10px;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #981d99;
|
|
transform: translateX(-50%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction.disabled {
|
|
background: #772278;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled):hover {
|
|
background: #b83db9;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-image-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-text-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-link-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-table-interaction {
|
|
background: #1d5cff;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction.disabled.h5p-image-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.disabled.h5p-text-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.disabled.h5p-link-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.disabled.h5p-table-interaction {
|
|
background: #224ebf;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled).h5p-image-interaction:hover,
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled).h5p-text-interaction:hover,
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled).h5p-link-interaction:hover,
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled).h5p-table-interaction:hover {
|
|
background: #3d7cff;
|
|
}
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-gotoquestion-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-ivhotspot-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-goto-timecode {
|
|
background: #018d82;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-gotoquestion-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-ivhotspot-interaction,
|
|
.h5p-interactive-video .h5p-seekbar-interaction.h5p-goto-timecode {
|
|
background: #0e7068;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled).h5p-gotoquestion-interaction:hover,
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled).h5p-ivhotspot-interaction:hover,
|
|
.h5p-interactive-video .h5p-seekbar-interaction:not(.disabled).h5p-goto-timecode:hover {
|
|
background: #21ada2;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-bookmark {
|
|
position: absolute;
|
|
top: -13px;
|
|
width: 2px;
|
|
height: 36px;
|
|
background: #8e8e8e;
|
|
color: #fefefe;
|
|
-webkit-transition: background-color 0.2s;
|
|
-moz-transition: background-color 0.2s;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-bookmark.h5p-show {
|
|
background: #aeaeae;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-prevent-skipping-message,
|
|
.h5p-interactive-video .h5p-bookmark-label {
|
|
position: absolute;
|
|
bottom: 46px;
|
|
left: -16px;
|
|
padding: 0 10px;
|
|
background: #2c2c2c;
|
|
background: rgba(44, 44, 44, 0.8);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
max-width: 300px;
|
|
-webkit-transition: visibility 0s 0.2s, opacity 0.2s;
|
|
-moz-transition: visibility 0s 0.2s, opacity 0.2s;
|
|
transition: visibility 0s 0.2s, opacity 0.2s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-prevent-skipping-message {
|
|
bottom: 25px;
|
|
transform: translateX(-1.1em);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-prevent-skipping-message-text {
|
|
max-width: 17.5em;
|
|
line-height: 30px;
|
|
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.h5p-interactive-video.h5p-minimal .h5p-prevent-skipping-message-text {
|
|
max-width: 9.5em;
|
|
}
|
|
|
|
.h5p-interactive-video.h5p-fullscreen .h5p-prevent-skipping-message,
|
|
.h5p-interactive-video.h5p-semi-fullscreen .h5p-prevent-skipping-message,
|
|
.h5p-interactive-video.h5p-fullscreen .h5p-bookmark-label,
|
|
.h5p-interactive-video.h5p-semi-fullscreen .h5p-bookmark-label {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-prevent-skipping-message.h5p-show,
|
|
.h5p-interactive-video .h5p-show .h5p-bookmark-label {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
-webkit-transition: opacity 0.2s;
|
|
-moz-transition: opacity 0.2s;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-prevent-skipping-message:after,
|
|
.h5p-interactive-video .h5p-bookmark-label:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 8px;
|
|
border: 9px solid transparent;
|
|
border-top-width: 10px;
|
|
border-top-color: #2c2c2c;
|
|
border-top-color: rgba(44, 44, 44, 0.8);
|
|
border-bottom: 0;
|
|
top: 100%;
|
|
}
|
|
|
|
.h5p-interactive-video.h5p-fullscreen .h5p-prevent-skipping-message:after,
|
|
.h5p-interactive-video.h5p-semi-fullscreen .h5p-prevent-skipping-message:after,
|
|
.h5p-interactive-video.h5p-fullscreen .h5p-bookmark-label:after,
|
|
.h5p-interactive-video.h5p-semi-fullscreen .h5p-bookmark-label:after {
|
|
border-top-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.h5p-interactive-video .h5p-bookmark-text {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
line-height: 30px;
|
|
}
|
|
.h5p-interactive-video .h5p-bookmark-text:before {
|
|
font-family: H5PFontAwesome4;
|
|
content: "\f02e";
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog-wrapper,
|
|
.h5p-interactive-video .h5p-warning-mask {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 51;
|
|
background: rgba(44, 44, 44, 0.5);
|
|
-webkit-transition: background-color 0.2s;
|
|
-moz-transition: background-color 0.2s;
|
|
transition: background-color 0.2s;
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-warning-mask {
|
|
background: rgba(4, 4, 4, 0.77);
|
|
z-index: 53;
|
|
-webkit-transform-style: preserve-3d;
|
|
-moz-transform-style: preserve-3d;
|
|
transform-style: preserve-3d; /* Used to center child vertically */
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-warning-mask .h5p-warning-mask-wrapper {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: perspective(1px) translateY(-50%);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-warning-mask-wrapper .h5p-warning-mask-content {
|
|
max-width: 17em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 1.6em;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-warning-mask-wrapper .h5p-joubelui-button {
|
|
margin-top: 1.3em;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.h5p-button-back:before {
|
|
content: "\f060";
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog-wrapper.h5p-hidden {
|
|
background: rgba(0,0,0,0);
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-wrapper.h5p-hidden .h5p-dialog {
|
|
-webkit-transform: translateY(100%);
|
|
-moz-transform: translateY(100%);
|
|
-ms-transform: translateY(100%);
|
|
-o-transform: translateY(100%);
|
|
transform: translateY(100%);
|
|
}
|
|
.h5p-interactive-video .h5p-dialog {
|
|
position: absolute;
|
|
width: auto;
|
|
min-width: 6.25em;
|
|
min-height: 4.6875em;
|
|
margin: 1.25em;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 0.625em 0 rgba(0, 0, 0, 0.25);
|
|
-webkit-transition: -webkit-transform 0.2s;
|
|
-moz-transition: -moz-transform 0.2s;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog:not(.h5p-big) {
|
|
max-width: calc(100% - 2.5em);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog.h5p-medium {
|
|
min-width: 20em;
|
|
top: 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog-title {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: calc(100% - 1em);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog-titlebar {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
padding: 0.5em 1em 0.5em 0.5em;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #eee;
|
|
font-size: 0.875em;
|
|
color: #757575;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog.h5p-big {
|
|
width: auto;
|
|
height: auto;
|
|
max-height: none;
|
|
left: 1.25em;
|
|
right: 1.25em;
|
|
top: 1.25em;
|
|
bottom: 1.25em;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-close {
|
|
position: absolute;
|
|
top: 0.25em;
|
|
right: 0.5em;
|
|
cursor: pointer;
|
|
padding: 0.25em 0.5em;
|
|
outline: none;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-close:before {
|
|
font-family: 'H5PFontAwesome4';
|
|
content: "\f057";
|
|
color: #757575;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-close:hover:before,
|
|
.h5p-interactive-video .h5p-dialog-close:focus:before {
|
|
color: #555555;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-close:active:before {
|
|
color: #454545;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-inner {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.h5p-interactive-video .h5p-big > .h5p-dialog-inner {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.h5p-interaction .h5p-interaction-outer::-webkit-scrollbar,
|
|
.h5p-interactive-video .h5p-dialog-inner::-webkit-scrollbar {
|
|
width: 0.5em;
|
|
background: #fff;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.h5p-interaction .h5p-interaction-outer::-webkit-scrollbar-thumb,
|
|
.h5p-interactive-video .h5p-dialog-inner::-webkit-scrollbar-thumb {
|
|
background: #ddd;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.h5p-interaction .h5p-interaction-outer::-webkit-scrollbar-thumb:hover,
|
|
.h5p-interactive-video .h5p-dialog-inner::-webkit-scrollbar-thumb:hover {
|
|
background: #aaa;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.h5p-interaction .h5p-interaction-outer::-webkit-scrollbar-thumb:active,
|
|
.h5p-interactive-video .h5p-poster.h5p-interaction .h5p-interaction-outer::-webkit-scrollbar-thumb:focus,
|
|
.h5p-interactive-video .h5p-dialog-inner::-webkit-scrollbar-thumb:active,
|
|
.h5p-interactive-video .h5p-dialog-inner::-webkit-scrollbar-thumb:focus {
|
|
background: #888;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog-hide {
|
|
color: #191919;
|
|
font-size: 1.3em;
|
|
padding: 0.3em;
|
|
line-height: 0.75em;
|
|
position: absolute;
|
|
right: 0.1em;
|
|
top: 0.1em;
|
|
height: 1em;
|
|
z-index: 52;
|
|
text-shadow: 0 0 0.5em #ffffff;
|
|
font-family: 'H5PFontAwesome4';
|
|
text-decoration: none;
|
|
-webkit-transition: -webkit-transform 0.2s;
|
|
-moz-transition: -moz-transform 0.2s;
|
|
transition: transform 0.2s;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog-hide:hover {
|
|
text-decoration: none;
|
|
-webkit-transform: scale(1.1,1.1);
|
|
-moz-transform: scale(1.1,1.1);
|
|
-ms-transform: scale(1.1,1.1);
|
|
-o-transform: scale(1.1,1.1);
|
|
transform: scale(1.1,1.1);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-question .h5p-joubelui-button {
|
|
float: left;
|
|
}
|
|
.h5p-interactive-video .h5p-question .h5p-joubelui-button:first-child {
|
|
margin: 0 0.5em 1em 0;
|
|
}
|
|
.h5p-interactive-video .h5p-question .h5p-joubelui-button:last-child {
|
|
margin: 0 0 1em 0.5em;
|
|
}
|
|
.h5p-interactive-video .h5p-question .h5p-joubelui-button:first-child:last-child {
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog-interaction.h5p-image {
|
|
display: block;
|
|
height: auto;
|
|
}
|
|
.h5p-interactive-video .h5p-text p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.h5p-interactive-video .h5p-text p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-table {
|
|
font-size: 0.875em;
|
|
border-collapse: collapse;
|
|
}
|
|
.h5p-interactive-video .h5p-table th {
|
|
border-bottom: 2px solid #191919;
|
|
}
|
|
.h5p-interactive-video .h5p-table td {
|
|
border-bottom: 1px solid #595959;
|
|
}
|
|
.h5p-interactive-video .h5p-table tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-nil-interaction > .h5p-interaction-button {
|
|
display: none;
|
|
}
|
|
.h5p-interactive-video .h5p-nil-interaction > .h5p-interaction-label {
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0.2em 0.5em;
|
|
line-height: 1.5;
|
|
height: auto;
|
|
min-width: 1.5em;
|
|
cursor: default;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dragquestion .h5p-button {
|
|
right: auto;
|
|
left: 1.225em;
|
|
}
|
|
|
|
/* Splash start screen */
|
|
.h5p-interactive-video .h5p-splash {
|
|
width: 40%;
|
|
margin: auto;
|
|
text-align: center;
|
|
background: #000;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
-webkit-transition: background 0.2s ease-in;
|
|
transition: background 0.2s ease-in;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash-outer {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash-play-icon {
|
|
font-size: 5em;
|
|
padding: 0.5em 0;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-description .h5p-splash-play-icon,
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-description.no-title .h5p-splash-play-icon {
|
|
padding: 0.5em 0;
|
|
font-size: 4em;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-title .h5p-splash-play-icon {
|
|
padding: 0.75em 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash-play-icon:before {
|
|
font-family: "H5PFontAwesome4";
|
|
content: "\f04b";
|
|
display: block;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash .h5p-splash-title {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-size: 1.5em;
|
|
line-height: 1.25em;
|
|
padding: 0 0.5em 1.25em 0.5em;
|
|
margin-top: -1em;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash .h5p-splash-description {
|
|
font-family: 'Open Sans', sans-serif;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
font-size: 0.75em;
|
|
line-height: 1.25;
|
|
padding: 1.25em;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash > p {
|
|
margin: 0.5em 0 1em;
|
|
color: #fff;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper {
|
|
position: absolute;
|
|
display: table;
|
|
top: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transform: translateY(-50%);
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Hover and focus effects */
|
|
.h5p-interactive-video .h5p-splash:focus,
|
|
.h5p-interactive-video .h5p-splash:hover {
|
|
background: rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash:focus {
|
|
outline: 1px solid lightskyblue;
|
|
}
|
|
|
|
/* No description */
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-description .h5p-splash .h5p-splash-description,
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-description.mobile .h5p-splash .h5p-splash-description {
|
|
display: none;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-description .h5p-splash {
|
|
padding: 1.5em 0;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-description.no-title .h5p-splash {
|
|
width: 25%;
|
|
padding: 1em 0;
|
|
}
|
|
|
|
/* No title */
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-title.mobile .h5p-splash .h5p-splash-title,
|
|
.h5p-interactive-video .h5p-splash-wrapper.no-title .h5p-splash .h5p-splash-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Minimum font sizes */
|
|
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash .h5p-splash-title.minimum-font-size {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash .h5p-splash-description.minimum-font-size {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Mobile splash start screen */
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile.no-description.no-title .h5p-splash,
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile.no-description .h5p-splash,
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
display: flex;
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile {
|
|
display: block;
|
|
top: 0;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash-outer {
|
|
display: block;
|
|
vertical-align: auto;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash-main {
|
|
flex: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash-main-outer {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash-main-inner {
|
|
position: relative;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash .h5p-splash-title {
|
|
padding: 0.5em 2.5em;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash .h5p-splash-description {
|
|
padding: 1em 1.5em;
|
|
}
|
|
|
|
/* mobile footer */
|
|
.h5p-interactive-video .h5p-splash-wrapper.mobile .h5p-splash-footer {
|
|
flex: none;
|
|
}
|
|
|
|
/* Youtube specific splash start screen options */
|
|
.h5p-interactive-video .h5p-video.h5p-youtube .h5p-splash-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-video.h5p-youtube .h5p-splash-wrapper .h5p-splash,
|
|
.h5p-interactive-video .h5p-video.h5p-youtube .h5p-splash-wrapper:hover .h5p-splash {
|
|
background: #000;
|
|
}
|
|
|
|
/* Adaptivity */
|
|
.h5p-interactive-video .h5p-question .h5p-question-iv-adaptivity-correct,
|
|
.h5p-interactive-video .h5p-question .h5p-question-iv-adaptivity-wrong {
|
|
float: right;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-question .h5p-question-iv-adaptivity-correct:before,
|
|
.h5p-interactive-video .h5p-question .h5p-question-iv-adaptivity-wrong:before {
|
|
content: "\f051";
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-question .h5p-question-iv-continue {
|
|
float: right;
|
|
}
|
|
.h5p-interactive-video .h5p-question-iv-continue:before {
|
|
content: "\f04b";
|
|
}
|
|
|
|
/* mobile view */
|
|
.h5p-interactive-video.mobile .h5p-dialog.h5p-big,
|
|
.h5p-interactive-video.mobile .h5p-dialog {
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.h5p-no-frame .h5p-interactive-video.mobile .h5p-dialog.h5p-big,
|
|
.h5p-no-frame .h5p-interactive-video.mobile .h5p-dialog {
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.h5p-interactive-video.mobile .h5p-dialog.h5p-big > .h5p-dialog-inner,
|
|
.h5p-interactive-video.mobile .h5p-dialog > .h5p-dialog-inner {
|
|
height: inherit;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Center images in big dialog */
|
|
.h5p-interactive-video .h5p-dialog.h5p-big[data-lib="H5P.Image"] .h5p-dialog-inner {
|
|
position: relative;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog.h5p-big[data-lib="H5P.Image"] .h5p-image {
|
|
position: absolute;
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%);
|
|
-moz-transform: translateX(-50%);
|
|
-ms-transform: translateX(-50%);
|
|
-o-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.h5p-interaction.h5p-poster.h5p-questionnaire-interaction .h5p-interaction-outer {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog.h5p-big[data-lib="H5P.Questionnaire"] .h5p-questionnaire-wrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog[data-lib="H5P.Questionnaire"] .h5p-dialog-titlebar {
|
|
background-color: #2269a9;
|
|
border-bottom: 1px solid #2269a9;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog[data-lib="H5P.Questionnaire"] .h5p-dialog-close:before {
|
|
color: #FFF;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-confirmation-dialog-background {
|
|
z-index: 101;
|
|
}
|
|
.h5p-interactive-video .goto-clickable {
|
|
cursor: pointer;
|
|
}
|
|
.h5p-interactive-video .goto-clickable.h5p-text {
|
|
cursor: pointer;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 1em;
|
|
min-height: 100%;
|
|
text-decoration: none;
|
|
color: #313131;
|
|
}
|
|
.h5p-interactive-video .h5p-interaction.h5p-poster.goto-clickable-visualize .h5p-interaction-outer {
|
|
position: static;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner {
|
|
border: solid 2px #1d5cff;
|
|
transition: border 0.3s, box-shadow 0.3s;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner {
|
|
border-color: #018d82;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner {
|
|
box-sizing: border-box;
|
|
min-height: calc(2.5em - 1px);
|
|
height: auto;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:hover {
|
|
border-color: #003fdf;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize {
|
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-box-shadow-disabled {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize:hover {
|
|
border-color: #003fdf;
|
|
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode:hover,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner:hover {
|
|
border-color: #00796f;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize .goto-clickable:before,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:before {
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-top: 1.5em solid #1d5cff;
|
|
border-right: 1.5em solid transparent;
|
|
opacity: 0.8;
|
|
content: '';
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
transition: border-top-color 0.3s;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode .goto-clickable:before,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner:before {
|
|
border-top-color: #08a497;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize .goto-clickable:hover:before,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:hover:before {
|
|
border-top-color: #003fdf;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode .goto-clickable:hover:before,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner:hover:before {
|
|
border-top-color: #027e74;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize .goto-clickable:focus:before,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:focus:before,
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode .goto-clickable:focus:before,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner:focus:before {
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:before {
|
|
top: initial;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize .goto-clickable:after,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:after {
|
|
position: absolute;
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 0.25em;
|
|
left: 0.25em;
|
|
font-family: 'H5PFontAwesome4';
|
|
font-size: 0.7em;
|
|
content: "\f08e";
|
|
color: #fff;
|
|
line-height: 1;
|
|
text-align: center;
|
|
vertical-align: baseline;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
transition: color 0.3s;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode .goto-clickable:after,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner:after {
|
|
content: "\f064";
|
|
transform: rotate(24deg) translateX(-2px);
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize .goto-clickable:focus:after,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:focus:after {
|
|
color: #1d5cff;
|
|
}
|
|
.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode .goto-clickable:focus:after,
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner:focus:after {
|
|
color: #018d82;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog.goto-clickable-visualize .h5p-dialog-inner:after {
|
|
top: 3.5em;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog.h5p-big.goto-clickable-visualize[data-lib="H5P.Image"] .h5p-dialog-inner:after {
|
|
top: 0.25em;
|
|
}
|
|
.h5p-interactive-video .h5p-dialog.h5p-big[data-lib="H5P.Image"] .h5p-image.goto-clickable {
|
|
width: 100%;
|
|
}
|
|
.h5p-interactive-video .h5p-interaction-continue-button {
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
color: #FFF;
|
|
background-color: #252525;
|
|
border-radius: 0.5em;
|
|
padding: 0.6em 2em;
|
|
font-weight: 600;
|
|
font-size: 0.85em;
|
|
width: auto;
|
|
display: block;
|
|
align-self: center;
|
|
letter-spacing: 3px;
|
|
margin: 1em auto;
|
|
}
|
|
.h5p-interactive-video .h5p-interaction-continue-button:after {
|
|
font-family: "H5PFontAwesome4";
|
|
content: '\f144';
|
|
margin-left: 1.2em;
|
|
}
|
