Lectora 21 Custom Audio Player skin difficulty

kaz
kaz Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 3 ☆ Roadie ☆
Hello!

We have used this custom CSS in the past with no issues. Had to modify it slightly for Lectora 18. And now things are pretty funky in 18 or 21. Not sure where the disconnect is.

The main issue I am having now is controlling the background of the closed captioning. CHanges to that section have no affect.

Can anyone give me some direction on what to look for to fix this?

This is what we have been using:

/* Hides Overlay Button on pause/end */
.mejs__overlay-button {
display: none;
}


/* Changes width of control bar */
div[id^="audio"] .mejs__container .mejs__controls {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
bottom: 0;
left: 0;
background: url(MediaPlayer/control-default.png) 0 0;
height: 24px;
width: 575px;
}

/* Hides background of display */
.mejs__container {
background: none;
}

/* Sets vertical position of captions */
div[id^="audio"] .mejs__captions-position-hover {
bottom: 70px;

}

/* Changes alignment of caption text in player */
.mejs__captions-layer {
position: absolute;
bottom: 0;
left: 0;
text-align:center;
line-height: 18px;
font-size: 14px;
color: #fff;
visibility: visible;

}

/* Adjusts width and position of captions-need to hide background to extend width to 500 */
.mejs__captions-position {
position: absolute;
width: 500px;
bottom: 15px;
left: 0;
}

/* Changes color for captions text background - may control initial visibility */

div[id^="audio"] .mejs__captions-text {
padding: 3px 5px;
background: #000;
white-space: pre-wrap;
visibility: visible;
width: 550px;
}

div[id^="video"] .mejs__captions-text {
padding: 3px 5px;
background: #000;
white-space: pre-wrap;
visibility: visible;
width: 550px;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector {
position: absolute;
bottom: 26px;
right: -51px;
width: 85px;
height: 100px;
background: #000;
border: solid 1px;
padding: 10px 10px 0 10px;
overflow: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
z-index: 99;
}

.mejs__controls .mejs__volume-button .mejs__volume-slider {
/*display: none;*/
height: 115px;
width: 25px;
background: #000;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
top: -115px;
left: 50%;
z-index: 1;
position: absolute;
margin: 0;
}

Comments

  • kaz
    kaz Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 3 ☆ Roadie ☆
    In the meantime, we are unchecking the background box in the closed caption properties so the black background box does not display. This is usable for now.