From 8276147dfae54c72f0f0f152a451f21a1bc36846 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Tue, 12 Aug 2025 14:49:01 -0500 Subject: [PATCH 01/26] Both slower and faster SVG should have same viewBox --- scripts/initialize.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/initialize.js b/scripts/initialize.js index 17ea1404..c583c707 100644 --- a/scripts/initialize.js +++ b/scripts/initialize.js @@ -173,7 +173,7 @@ break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; svg[2] = 'icon-slower'; svg[3] = this.slowerButtonImg; From 5ce793824d561ad9872d1a008302591e5804d044 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Tue, 12 Aug 2025 15:32:10 -0500 Subject: [PATCH 02/26] Typos --- changelog.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/changelog.md b/changelog.md index 0b96cbc5..1256fd84 100644 --- a/changelog.md +++ b/changelog.md @@ -7,7 +7,7 @@ - New default theme with modernized layout and variables for colors. - This summarizes a large number of individually small changes to the layour of AblePlayer elements. - Removed many instances of positioning imposed from JS so that more positioning is controllable from CSS. -- Significant improvements to responsive desgin and behaviors. +- Significant improvements to responsive design and behaviors. ### Features @@ -56,7 +56,7 @@ - Simplify if/else statements. Use ternary or swithc where appropriate or collapse arguments. - Reformat if/else statements to remove line breaks before `else`. - Remove `$ableColumnLeft` - unused and unidentified variable. -- Remove unneeed -moz and -mix prefixed fullscreen properties. +- Remove unneeded -moz and -mix prefixed fullscreen properties. - Only create a single alertBox container and move in DOM as needed instead of managing three separate containers. - Add new prototype to set the text for buttons. - Add new prototype to set icons for buttons. From 14f73aeb563ac18b282f5c0011fc136cf47c9904 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Wed, 13 Aug 2025 22:54:24 -0500 Subject: [PATCH 03/26] Bug fix: Didn't handle case where player was Youtube and Sign was local. --- scripts/sign.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/scripts/sign.js b/scripts/sign.js index b10d1637..b440ebbf 100644 --- a/scripts/sign.js +++ b/scripts/sign.js @@ -1,6 +1,5 @@ (function ($) { AblePlayer.prototype.initSignLanguage = function() { - // Sign language is only currently supported in HTML5 player and YouTube. var hasLocalSrc = ( this.$media.data('sign-src') !== undefined && this.$media.data('sign-src') !== "" ); var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); @@ -9,15 +8,15 @@ if ( hasRemoteSrc ) { this.signYoutubeId = this.youTubeSignId; } - this.injectSignPlayerCode(); - return; } - if (this.player === 'html5') { + if (this.player === 'html5' || this.player === 'youtube' ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources this.signYoutubeId = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); - this.signFile = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = ( signVideo ) ? signVideo : signSrc; if (this.signFile || this.signYoutubeId) { if (this.isIOS()) { // iOS does not allow multiple videos to play simultaneously From 44157753363655daa59289510dc503eaf75104e0 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Thu, 14 Aug 2025 10:14:06 -0500 Subject: [PATCH 04/26] Improve logic for identifying appropriate sign src. YouTube source can either be on a `source` element or on the `video` element, because the cases of "local with remote sign" requires `source` but `youtube with remote sign` only requires `video`. --- scripts/sign.js | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/scripts/sign.js b/scripts/sign.js index b440ebbf..0cac4362 100644 --- a/scripts/sign.js +++ b/scripts/sign.js @@ -1,27 +1,28 @@ (function ($) { AblePlayer.prototype.initSignLanguage = function() { + this.hasSignLanguage = false; // Sign language is only currently supported in HTML5 player and YouTube. var hasLocalSrc = ( this.$media.data('sign-src') !== undefined && this.$media.data('sign-src') !== "" ); + // YouTube src can either be on a `source` element or on the `video` element. var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); - if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc ) ) { - this.hasSignLanguage = true; - if ( hasRemoteSrc ) { - this.signYoutubeId = this.youTubeSignId; - } - } - if (this.player === 'html5' || this.player === 'youtube' ) { + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc || hasRemoteSource ) && ( this.player === 'html5' || this.player === 'youtube' ) ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources - this.signYoutubeId = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); - this.signFile = ( signVideo ) ? signVideo : signSrc; - if (this.signFile || this.signYoutubeId) { + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile || this.signYoutubeId ) { if (this.isIOS()) { // iOS does not allow multiple videos to play simultaneously // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { console.log('Sign language has been disabled due to iOS restrictions'); } @@ -32,11 +33,7 @@ this.hasSignLanguage = true; this.injectSignPlayerCode(); } - } else { - this.hasSignLanguage = false; } - } else { - this.hasSignLanguage = false; } }; From 324462937d1c605f520d8a1620ab6f2a6f68e665 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Sun, 31 Aug 2025 13:30:03 -0500 Subject: [PATCH 05/26] Adjust min-height of captions/description container Fixes #674 Also switches all 'em' units to 'rem' units for consistency. --- build/ableplayer.min.css | 2 +- styles/ableplayer.css | 46 ++++++++++++++++++++-------------------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/build/ableplayer.min.css b/build/ableplayer.min.css index 7fe37083..84396050 100644 --- a/build/ableplayer.min.css +++ b/build/ableplayer.min.css @@ -1 +1 @@ -.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:#fff;--able-control-background:#000;--able-control-color:#fff;--able-alert-button-color:#000;--able-seekbar-border:#a8a8a8;--able-seekbar-background:#000;--able-seekbar-loaded:#666;--able-seekbar-played:#dadada;--able-seekbar-head:#fdfdfd;--able-control-label-color:#fff;--able-controller-background:#464646;--able-separator-color:#a8a8a8;--able-volume-background:#000;--able-volume-outline:#666;--able-statusbar-color:#dadada;--able-statusbar-background:#000;--able-default-caption-color:#fff;--able-default-caption-background:#000;--able-default-description-color:#ff6;--able-default-description-background:#262626;--able-description-border:#666;--able-now-playing-color:#fff;--able-now-playing-background:#000;--able-modal-color:#000;--able-modal-background:#fdfdfd;--able-modal-overlay:#00000077;--able-modal-border:3px solid #ccc;--able-drag-outline:#f90;--able-sign-background:#fff;--able-sign-border:#000;--able-resizable-color:#666;--able-chapter-background:transparent;--able-chapter-color:#000;--able-current-chapter-background:#000;--able-current-chapter-color:#fff;--able-focus-outline:#ffbb37;--able-hover-outline:#8ab839;--able-tooltip-border:#262626;--able-tooltip-color:#333;--able-tooltip-background:#eee;--able-alert-background:#ffc;--able-menu-border:#262626;--able-menu-background:#000;--able-menu-outline:#666;--able-menu-color:#fff;--able-menu-focus-background:#eee;--able-menu-focus-color:#000;--able-transcript-background:#fff;--able-cue-audio-description-background:#fee;--able-cue-audio-description-color:#262626;--able-cue-highlighted-background:#000;--able-cue-highlighted-color:#fff;--able-cue-interacting-background:#ffc;--able-cue-interacting-color:#000;--able-playlist-item-background:#eee;--able-playlist-item-color:#000;--able-playlist-item-button-color:#000;--able-search-results-button-background:#fff;--able-search-results-button-color:#000;--able-playlist-current-background:#fff;--able-playlist-current-border:#230330;--able-playlist-current-outline:#340449;--able-playlist-current-active-color:#000;--able-playlist-current-active-background:#fff;--able-search-term-background:#ffc;--able-search-term-color:#000}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-wrapper,.able-wrapper *{box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-clipped,.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:transparent;border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;border-radius:5px;width:100%;height:100%}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0 0 8px}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1em;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:3.2em}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:3.2em;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5em .5em 1em;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:50rem;max-width:95%;padding:1rem;box-sizing:border-box}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modal-dialog .modalCloseButton{position:absolute;top:5px;right:5px;margin:0}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1em}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1em!important}.able-prefDescFormat>div{margin-left:1.5em}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10em}div.able-prefDescPause{margin-top:1em}.able-prefs-form div.able-captions-sample{padding:.5em;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5em;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5em;font-size:1.1em}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1em}.able-resize-form h1{font-size:1.15em}.able-resize-form div div{margin:1em 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.able-sign-window video{width:100%;margin-bottom:1rem}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1em 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25em .1em;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1em;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1em;font-weight:700;z-index:9400}button#able-vts-save{font-size:1em;padding:6px 12px;border-radius:4px;margin-bottom:1em;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5em}} \ No newline at end of file +.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:#fff;--able-control-background:#000;--able-control-color:#fff;--able-alert-button-color:#000;--able-seekbar-border:#a8a8a8;--able-seekbar-background:#000;--able-seekbar-loaded:#666;--able-seekbar-played:#dadada;--able-seekbar-head:#fdfdfd;--able-control-label-color:#fff;--able-controller-background:#464646;--able-separator-color:#a8a8a8;--able-volume-background:#000;--able-volume-outline:#666;--able-statusbar-color:#dadada;--able-statusbar-background:#000;--able-default-caption-color:#fff;--able-default-caption-background:#000;--able-default-description-color:#ff6;--able-default-description-background:#262626;--able-description-border:#666;--able-now-playing-color:#fff;--able-now-playing-background:#000;--able-modal-color:#000;--able-modal-background:#fdfdfd;--able-modal-overlay:#00000077;--able-modal-border:3px solid #ccc;--able-drag-outline:#f90;--able-sign-background:#fff;--able-sign-border:#000;--able-resizable-color:#666;--able-chapter-background:transparent;--able-chapter-color:#000;--able-current-chapter-background:#000;--able-current-chapter-color:#fff;--able-focus-outline:#ffbb37;--able-hover-outline:#8ab839;--able-tooltip-border:#262626;--able-tooltip-color:#333;--able-tooltip-background:#eee;--able-alert-background:#ffc;--able-menu-border:#262626;--able-menu-background:#000;--able-menu-outline:#666;--able-menu-color:#fff;--able-menu-focus-background:#eee;--able-menu-focus-color:#000;--able-transcript-background:#fff;--able-cue-audio-description-background:#fee;--able-cue-audio-description-color:#262626;--able-cue-highlighted-background:#000;--able-cue-highlighted-color:#fff;--able-cue-interacting-background:#ffc;--able-cue-interacting-color:#000;--able-playlist-item-background:#eee;--able-playlist-item-color:#000;--able-playlist-item-button-color:#000;--able-search-results-button-background:#fff;--able-search-results-button-color:#000;--able-playlist-current-background:#fff;--able-playlist-current-border:#230330;--able-playlist-current-outline:#340449;--able-playlist-current-active-color:#000;--able-playlist-current-active-background:#fff;--able-search-term-background:#ffc;--able-search-term-color:#000}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-wrapper,.able-wrapper *{box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-clipped,.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:transparent;border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;border-radius:5px;width:100%;height:100%}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0 0 8px}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1rem;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:4rem}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:4rem;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5rem .5rem 1rem;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:50rem;max-width:95%;padding:1rem;box-sizing:border-box}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modal-dialog .modalCloseButton{position:absolute;top:5px;right:5px;margin:0}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1rem}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1rem!important}.able-prefDescFormat>div{margin-left:1.5rem}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10rem}div.able-prefDescPause{margin-top:1rem}.able-prefs-form div.able-captions-sample{padding:.5rem;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5rem;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5rem;font-size:1.1rem}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1rem}.able-resize-form h1{font-size:1.15rem}.able-resize-form div div{margin:1rem 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.able-sign-window video{width:100%;margin-bottom:1rem}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1rem 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25rem .1rem;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1rem;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1rem;font-weight:700;z-index:9400}button#able-vts-save{font-size:1rem;padding:6px 12px;border-radius:4px;margin-bottom:1rem;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5rem}} \ No newline at end of file diff --git a/styles/ableplayer.css b/styles/ableplayer.css index bfd5100f..2cb616b4 100644 --- a/styles/ableplayer.css +++ b/styles/ableplayer.css @@ -469,7 +469,7 @@ div.able-captions { line-height: 1.4; /* settings that are overridden by user prefs */ background-color: var(--able-default-caption-background); - font-size: 1em; + font-size: 1rem; color: var(--able-default-caption-color); opacity: 0.75; } @@ -482,7 +482,7 @@ div.able-vidcap-container div.able-captions-overlay { div.able-vidcap-container div.able-captions-below { position: relative; - min-height: 3.2em; + min-height: 4rem; } div.able-audcap-container.captions-off { @@ -493,7 +493,7 @@ div.able-descriptions { position: relative; color: var(--able-default-description-color); /* yellow, to differentiate it from captions */ background-color: var(--able-default-description-background); - min-height: 3.2em; + min-height: 4rem; border-top: 1px solid var(--able-description-border); margin: 0; padding: 12px; @@ -505,7 +505,7 @@ div.able-now-playing { text-align: center; font-weight: bold; font-size: 1rem; - padding: 0.5em 0.5em 1em; + padding: 0.5rem 0.5rem 1rem; color: var(--able-now-playing-color); background: var(--able-now-playing-background); } @@ -590,17 +590,17 @@ div.able-modal-dialog h1 { .able-prefs-form h2 { font-weight: bold; - font-size: 1.1em; + font-size: 1.1rem; } .able-desc-pref-prompt { font-weight: bold; font-style: italic; - margin-left: 1em !important; + margin-left: 1rem !important; } .able-prefDescFormat > div { - margin-left: 1.5em; + margin-left: 1.5rem; } .able-prefs-descriptions > div, @@ -623,20 +623,20 @@ div.able-modal-dialog h1 { .able-prefs-descriptions select, .able-prefs-captions select { - width: 10em; + width: 10rem; } div.able-prefDescPause { - margin-top: 1em; + margin-top: 1rem; } .able-prefs-form div.able-captions-sample { - padding: 0.5em; + padding: 0.5rem; text-align: center; } .able-prefs-form div.able-desc-sample { - padding: 0.5em; + padding: 0.5rem; text-align: center; color: #fff; background-color: #000; @@ -644,8 +644,8 @@ div.able-prefDescPause { .able-prefs-form h2 { margin-top: 0; - margin-bottom: 0.5em; - font-size: 1.1em; + margin-bottom: 0.5rem; + font-size: 1.1rem; } .able-prefs-form ul { @@ -667,16 +667,16 @@ span.able-modkey-shift { span.able-modkey { font-weight: bold; color: #000; - font-size: 1.1em; + font-size: 1.1rem; } /* Resize Window Dialog */ .able-resize-form h1 { - font-size: 1.15em; + font-size: 1.15rem; } .able-resize-form div div { - margin: 1em 0; + margin: 1rem 0; } .able-resize-form label { @@ -946,7 +946,7 @@ ul.able-popup li.able-focus, } .able-transcript div { - margin: 1em 0; + margin: 1rem 0; } .able-transcript-heading { @@ -981,7 +981,7 @@ ul.able-popup li.able-focus, .able-highlight span:active { background-color: var(--able-cue-highlighted-background) !important; color: var(--able-cue-highlighted-color) !important; - padding: 0.25em 0.10em; + padding: 0.25rem 0.10rem; border: none; outline: none; } @@ -1178,7 +1178,7 @@ button.able-search-results-time { /* Video Transcript Sorter (VTS) */ #able-vts-instructions { - padding: 1em; + padding: 1rem; border: 1px solid #999; width: 100%; margin: 0 auto 1.5rem; @@ -1276,16 +1276,16 @@ div#able-vts-alert { left: 5px; border: 2px solid #666; background-color: #ffc; - padding: 1em; + padding: 1rem; font-weight: bold; z-index: 9400; } button#able-vts-save { - font-size: 1em; + font-size: 1rem; padding: 6px 12px; border-radius: 4px; - margin-bottom: 1em; + margin-bottom: 1rem; font-weight: bold; } @@ -1320,6 +1320,6 @@ button#able-vts-save:focus { width: 100% !important; } div.able-captions-wrapper:not(.able-captions-overlay) { - min-height: 5em; + min-height: 5rem; } } \ No newline at end of file From 8c3d183c7603ac53f3d91219a6dacb42df6a651c Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Sun, 31 Aug 2025 14:37:44 -0500 Subject: [PATCH 06/26] Give big play button a partially transparent background. The old shadow provided player boundaries if the poster image matched the background. This is an alternate way that's less invasive. --- build/ableplayer.min.css | 2 +- styles/ableplayer.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/build/ableplayer.min.css b/build/ableplayer.min.css index 84396050..03152b33 100644 --- a/build/ableplayer.min.css +++ b/build/ableplayer.min.css @@ -1 +1 @@ -.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:#fff;--able-control-background:#000;--able-control-color:#fff;--able-alert-button-color:#000;--able-seekbar-border:#a8a8a8;--able-seekbar-background:#000;--able-seekbar-loaded:#666;--able-seekbar-played:#dadada;--able-seekbar-head:#fdfdfd;--able-control-label-color:#fff;--able-controller-background:#464646;--able-separator-color:#a8a8a8;--able-volume-background:#000;--able-volume-outline:#666;--able-statusbar-color:#dadada;--able-statusbar-background:#000;--able-default-caption-color:#fff;--able-default-caption-background:#000;--able-default-description-color:#ff6;--able-default-description-background:#262626;--able-description-border:#666;--able-now-playing-color:#fff;--able-now-playing-background:#000;--able-modal-color:#000;--able-modal-background:#fdfdfd;--able-modal-overlay:#00000077;--able-modal-border:3px solid #ccc;--able-drag-outline:#f90;--able-sign-background:#fff;--able-sign-border:#000;--able-resizable-color:#666;--able-chapter-background:transparent;--able-chapter-color:#000;--able-current-chapter-background:#000;--able-current-chapter-color:#fff;--able-focus-outline:#ffbb37;--able-hover-outline:#8ab839;--able-tooltip-border:#262626;--able-tooltip-color:#333;--able-tooltip-background:#eee;--able-alert-background:#ffc;--able-menu-border:#262626;--able-menu-background:#000;--able-menu-outline:#666;--able-menu-color:#fff;--able-menu-focus-background:#eee;--able-menu-focus-color:#000;--able-transcript-background:#fff;--able-cue-audio-description-background:#fee;--able-cue-audio-description-color:#262626;--able-cue-highlighted-background:#000;--able-cue-highlighted-color:#fff;--able-cue-interacting-background:#ffc;--able-cue-interacting-color:#000;--able-playlist-item-background:#eee;--able-playlist-item-color:#000;--able-playlist-item-button-color:#000;--able-search-results-button-background:#fff;--able-search-results-button-color:#000;--able-playlist-current-background:#fff;--able-playlist-current-border:#230330;--able-playlist-current-outline:#340449;--able-playlist-current-active-color:#000;--able-playlist-current-active-background:#fff;--able-search-term-background:#ffc;--able-search-term-color:#000}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-wrapper,.able-wrapper *{box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-clipped,.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:transparent;border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;border-radius:5px;width:100%;height:100%}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0 0 8px}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1rem;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:4rem}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:4rem;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5rem .5rem 1rem;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:50rem;max-width:95%;padding:1rem;box-sizing:border-box}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modal-dialog .modalCloseButton{position:absolute;top:5px;right:5px;margin:0}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1rem}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1rem!important}.able-prefDescFormat>div{margin-left:1.5rem}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10rem}div.able-prefDescPause{margin-top:1rem}.able-prefs-form div.able-captions-sample{padding:.5rem;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5rem;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5rem;font-size:1.1rem}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1rem}.able-resize-form h1{font-size:1.15rem}.able-resize-form div div{margin:1rem 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.able-sign-window video{width:100%;margin-bottom:1rem}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1rem 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25rem .1rem;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1rem;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1rem;font-weight:700;z-index:9400}button#able-vts-save{font-size:1rem;padding:6px 12px;border-radius:4px;margin-bottom:1rem;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5rem}} \ No newline at end of file +.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:#fff;--able-control-background:#000;--able-control-color:#fff;--able-big-play-background:#00000077;--able-alert-button-color:#000;--able-seekbar-border:#a8a8a8;--able-seekbar-background:#000;--able-seekbar-loaded:#666;--able-seekbar-played:#dadada;--able-seekbar-head:#fdfdfd;--able-control-label-color:#fff;--able-controller-background:#464646;--able-separator-color:#a8a8a8;--able-volume-background:#000;--able-volume-outline:#666;--able-statusbar-color:#dadada;--able-statusbar-background:#000;--able-default-caption-color:#fff;--able-default-caption-background:#000;--able-default-description-color:#ff6;--able-default-description-background:#262626;--able-description-border:#666;--able-now-playing-color:#fff;--able-now-playing-background:#000;--able-modal-color:#000;--able-modal-background:#fdfdfd;--able-modal-overlay:#00000077;--able-modal-border:3px solid #ccc;--able-drag-outline:#f90;--able-sign-background:#fff;--able-sign-border:#000;--able-resizable-color:#666;--able-chapter-background:transparent;--able-chapter-color:#000;--able-current-chapter-background:#000;--able-current-chapter-color:#fff;--able-focus-outline:#ffbb37;--able-hover-outline:#8ab839;--able-tooltip-border:#262626;--able-tooltip-color:#333;--able-tooltip-background:#eee;--able-alert-background:#ffc;--able-menu-border:#262626;--able-menu-background:#000;--able-menu-outline:#666;--able-menu-color:#fff;--able-menu-focus-background:#eee;--able-menu-focus-color:#000;--able-transcript-background:#fff;--able-cue-audio-description-background:#fee;--able-cue-audio-description-color:#262626;--able-cue-highlighted-background:#000;--able-cue-highlighted-color:#fff;--able-cue-interacting-background:#ffc;--able-cue-interacting-color:#000;--able-playlist-item-background:#eee;--able-playlist-item-color:#000;--able-playlist-item-button-color:#000;--able-search-results-button-background:#fff;--able-search-results-button-color:#000;--able-playlist-current-background:#fff;--able-playlist-current-border:#230330;--able-playlist-current-outline:#340449;--able-playlist-current-active-color:#000;--able-playlist-current-active-background:#fff;--able-search-term-background:#ffc;--able-search-term-color:#000}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-wrapper,.able-wrapper *{box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-clipped,.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:var(--able-big-play-background);border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;border-radius:5px;width:100%;height:100%}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0 0 8px}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1rem;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:4rem}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:4rem;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5rem .5rem 1rem;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:50rem;max-width:95%;padding:1rem;box-sizing:border-box}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modal-dialog .modalCloseButton{position:absolute;top:5px;right:5px;margin:0}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1rem}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1rem!important}.able-prefDescFormat>div{margin-left:1.5rem}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10rem}div.able-prefDescPause{margin-top:1rem}.able-prefs-form div.able-captions-sample{padding:.5rem;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5rem;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5rem;font-size:1.1rem}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1rem}.able-resize-form h1{font-size:1.15rem}.able-resize-form div div{margin:1rem 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.able-sign-window video{width:100%;margin-bottom:1rem}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1rem 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25rem .1rem;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1rem;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1rem;font-weight:700;z-index:9400}button#able-vts-save{font-size:1rem;padding:6px 12px;border-radius:4px;margin-bottom:1rem;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5rem}} \ No newline at end of file diff --git a/styles/ableplayer.css b/styles/ableplayer.css index 2cb616b4..4d529f8c 100644 --- a/styles/ableplayer.css +++ b/styles/ableplayer.css @@ -42,6 +42,7 @@ --able-color: #fff; --able-control-background: #000; --able-control-color: #fff; + --able-big-play-background: #00000077; --able-alert-button-color: #000; --able-seekbar-border: #a8a8a8; --able-seekbar-background: #000; @@ -239,7 +240,7 @@ .able-wrapper .able button.able-big-play-button { position: absolute; color: var(--able-control-color); - background-color: transparent; + background-color: var(--able-big-play-background); border: none; outline: none; left: 0; From 4746d2eb7bee46f9a0c0d479e944995dddbd0627 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Sun, 31 Aug 2025 14:57:59 -0500 Subject: [PATCH 07/26] Move colors to inherited variables. --- build/ableplayer.min.css | 2 +- styles/ableplayer.css | 152 ++++++++++++++++++++++----------------- 2 files changed, 87 insertions(+), 67 deletions(-) diff --git a/build/ableplayer.min.css b/build/ableplayer.min.css index 03152b33..dcd89701 100644 --- a/build/ableplayer.min.css +++ b/build/ableplayer.min.css @@ -1 +1 @@ -.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:#fff;--able-control-background:#000;--able-control-color:#fff;--able-big-play-background:#00000077;--able-alert-button-color:#000;--able-seekbar-border:#a8a8a8;--able-seekbar-background:#000;--able-seekbar-loaded:#666;--able-seekbar-played:#dadada;--able-seekbar-head:#fdfdfd;--able-control-label-color:#fff;--able-controller-background:#464646;--able-separator-color:#a8a8a8;--able-volume-background:#000;--able-volume-outline:#666;--able-statusbar-color:#dadada;--able-statusbar-background:#000;--able-default-caption-color:#fff;--able-default-caption-background:#000;--able-default-description-color:#ff6;--able-default-description-background:#262626;--able-description-border:#666;--able-now-playing-color:#fff;--able-now-playing-background:#000;--able-modal-color:#000;--able-modal-background:#fdfdfd;--able-modal-overlay:#00000077;--able-modal-border:3px solid #ccc;--able-drag-outline:#f90;--able-sign-background:#fff;--able-sign-border:#000;--able-resizable-color:#666;--able-chapter-background:transparent;--able-chapter-color:#000;--able-current-chapter-background:#000;--able-current-chapter-color:#fff;--able-focus-outline:#ffbb37;--able-hover-outline:#8ab839;--able-tooltip-border:#262626;--able-tooltip-color:#333;--able-tooltip-background:#eee;--able-alert-background:#ffc;--able-menu-border:#262626;--able-menu-background:#000;--able-menu-outline:#666;--able-menu-color:#fff;--able-menu-focus-background:#eee;--able-menu-focus-color:#000;--able-transcript-background:#fff;--able-cue-audio-description-background:#fee;--able-cue-audio-description-color:#262626;--able-cue-highlighted-background:#000;--able-cue-highlighted-color:#fff;--able-cue-interacting-background:#ffc;--able-cue-interacting-color:#000;--able-playlist-item-background:#eee;--able-playlist-item-color:#000;--able-playlist-item-button-color:#000;--able-search-results-button-background:#fff;--able-search-results-button-color:#000;--able-playlist-current-background:#fff;--able-playlist-current-border:#230330;--able-playlist-current-outline:#340449;--able-playlist-current-active-color:#000;--able-playlist-current-active-background:#fff;--able-search-term-background:#ffc;--able-search-term-color:#000}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-wrapper,.able-wrapper *{box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-clipped,.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:var(--able-big-play-background);border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;border-radius:5px;width:100%;height:100%}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0 0 8px}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1rem;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:4rem}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:4rem;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5rem .5rem 1rem;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:50rem;max-width:95%;padding:1rem;box-sizing:border-box}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modal-dialog .modalCloseButton{position:absolute;top:5px;right:5px;margin:0}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1rem}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1rem!important}.able-prefDescFormat>div{margin-left:1.5rem}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10rem}div.able-prefDescPause{margin-top:1rem}.able-prefs-form div.able-captions-sample{padding:.5rem;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5rem;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5rem;font-size:1.1rem}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1rem}.able-resize-form h1{font-size:1.15rem}.able-resize-form div div{margin:1rem 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.able-sign-window video{width:100%;margin-bottom:1rem}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1rem 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25rem .1rem;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1rem;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1rem;font-weight:700;z-index:9400}button#able-vts-save{font-size:1rem;padding:6px 12px;border-radius:4px;margin-bottom:1rem;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5rem}} \ No newline at end of file +:root{--able-white:#fff;--able-black:#000;--able-transparent-gray:#00000077;--able-medium-light-gray:#a8a8a8;--able-light-gray:#dadada;--able-very-light-gray:#eee;--able-off-white:#fdfdfd;--able-dark-gray:#262626;--able-medium-dark-gray:#333;--able-medium-dark-gray2:#464646;--able-medium-gray:#666;--able-bright-yellow:#ff6;--able-light-yellow:#ffc;--able-bright-orange:#f90;--able-light-orange:#ffbb37;--able-bright-green:#8ab839;--able-light-pink:#fee}.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:var(--able-white);--able-control-background:var(--able-black);--able-control-color:var(--able-white);--able-big-play-background:var(--able-transparent-gray);--able-alert-button-color:var(--able-black);--able-seekbar-border:var(--able-medium-light-gray);--able-seekbar-background:var(--able-black);--able-seekbar-loaded:var(--able-medium-gray);--able-seekbar-played:var(--able-light-gray);--able-seekbar-head:var(--able-off-white);--able-control-label-color:var(--able-white);--able-controller-background:var(--able-medium-dark-gray2);--able-separator-color:var(--able-medium-light-gray);--able-volume-background:var(--able-black);--able-volume-outline:var(--able-medium-gray);--able-statusbar-color:var(--able-light-gray);--able-statusbar-background:var(--able-black);--able-default-caption-color:var(--able-white);--able-default-caption-background:var(--able-black);--able-default-description-color:var(--able-bright-yellow);--able-default-description-background:var(--able-dark-gray);--able-description-border:var(--able-medium-gray);--able-now-playing-color:var(--able-white);--able-now-playing-background:var(--able-black);--able-modal-color:var(--able-black);--able-modal-background:var(--able-off-white);--able-modal-overlay:var(--able-transparent-gray);--able-modal-border:3px solid var(--able-light-gray);--able-drag-outline:var(--able-bright-orange);--able-sign-background:var(--able-white);--able-sign-border:var(--able-black);--able-resizable-color:var(--able-medium-gray);--able-chapter-background:transparent;--able-chapter-color:var(--able-black);--able-current-chapter-background:var(--able-black);--able-current-chapter-color:var(--able-white);--able-focus-outline:var(--able-light-orange);--able-hover-outline:var(--able-bright-green);--able-tooltip-border:var(--able-dark-gray);--able-tooltip-color:var(--able-medium-dark-gray);--able-tooltip-background:var(--able-very-light-gray);--able-alert-background:var(--able-light-yellow);--able-menu-border:var(--able-dark-gray);--able-menu-background:var(--able-black);--able-menu-outline:var(--able-medium-gray);--able-menu-color:var(--able-white);--able-menu-focus-background:var(--able-very-light-gray);--able-menu-focus-color:var(--able-black);--able-transcript-background:var(--able-white);--able-cue-audio-description-background:var(--able-light-pink);--able-cue-audio-description-color:var(--able-dark-gray);--able-cue-highlighted-background:var(--able-black);--able-cue-highlighted-color:var(--able-white);--able-cue-interacting-background:var(--able-light-yellow);--able-cue-interacting-color:var(--able-black);--able-playlist-item-background:var(--able-off-white);--able-playlist-item-color:var(--able-black);--able-playlist-item-button-color:var(--able-black);--able-search-results-button-background:var(--able-white);--able-search-results-button-color:var(--able-black);--able-playlist-current-background:var(--able-white);--able-playlist-current-border:var(--able-dark-gray);--able-playlist-current-outline:var(--able-medium-dark-gray);--able-playlist-current-active-color:var(--able-black);--able-playlist-current-active-background:var(--able-white);--able-search-term-background:var(--able-light-yellow);--able-search-term-color:var(--able-black)}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-wrapper,.able-wrapper *{box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-clipped,.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:var(--able-big-play-background);border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;border-radius:5px;width:100%;height:100%}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0 0 8px}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1rem;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:4rem}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:4rem;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5rem .5rem 1rem;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:50rem;max-width:95%;padding:1rem;box-sizing:border-box}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modal-dialog .modalCloseButton{position:absolute;top:5px;right:5px;margin:0}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1rem}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1rem!important}.able-prefDescFormat>div{margin-left:1.5rem}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10rem}div.able-prefDescPause{margin-top:1rem}.able-prefs-form div.able-captions-sample{padding:.5rem;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5rem;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5rem;font-size:1.1rem}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1rem}.able-resize-form h1{font-size:1.15rem}.able-resize-form div div{margin:1rem 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.able-sign-window video{width:100%;margin-bottom:1rem}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1rem 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25rem .1rem;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1rem;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1rem;font-weight:700;z-index:9400}button#able-vts-save{font-size:1rem;padding:6px 12px;border-radius:4px;margin-bottom:1rem;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5rem}} \ No newline at end of file diff --git a/styles/ableplayer.css b/styles/ableplayer.css index 4d529f8c..a1274a01 100644 --- a/styles/ableplayer.css +++ b/styles/ableplayer.css @@ -31,6 +31,26 @@ * .able = 5000 **/ +:root { + --able-white: #fff; + --able-black: #000; + --able-transparent-gray: #00000077; + --able-medium-light-gray: #a8a8a8; + --able-light-gray: #dadada; + --able-very-light-gray: #eee; + --able-off-white: #fdfdfd; + --able-dark-gray: #262626; + --able-medium-dark-gray: #333; + --able-medium-dark-gray2: #464646; + --able-medium-gray: #666; + --able-bright-yellow: #ff6; + --able-light-yellow: #ffc; + --able-bright-orange: #f90; + --able-light-orange: #ffbb37; + --able-bright-green: #8ab839; + --able-light-pink: #fee; +} + .able-modal-overlay, .able-playlist, .able-search-results, @@ -39,73 +59,73 @@ .able-transcript-area, .able-wrapper { --able-base-control-size: 24px; - --able-color: #fff; - --able-control-background: #000; - --able-control-color: #fff; - --able-big-play-background: #00000077; - --able-alert-button-color: #000; - --able-seekbar-border: #a8a8a8; - --able-seekbar-background: #000; - --able-seekbar-loaded: #666; - --able-seekbar-played: #dadada; - --able-seekbar-head: #fdfdfd; - --able-control-label-color: #fff; - --able-controller-background: #464646; - --able-separator-color: #a8a8a8; - --able-volume-background: #000; - --able-volume-outline: #666; - --able-statusbar-color: #dadada; - --able-statusbar-background: #000; - --able-default-caption-color: #fff; - --able-default-caption-background: #000; - --able-default-description-color: #ff6; - --able-default-description-background: #262626; - --able-description-border: #666; - --able-now-playing-color: #fff; - --able-now-playing-background: #000; - --able-modal-color: #000; - --able-modal-background: #fdfdfd; - --able-modal-overlay: #00000077; - --able-modal-border: 3px solid #ccc; - --able-drag-outline: #f90; - --able-sign-background: #fff; - --able-sign-border: #000; - --able-resizable-color: #666; + --able-color: var(--able-white); + --able-control-background: var(--able-black); + --able-control-color: var(--able-white); + --able-big-play-background: var(--able-transparent-gray); + --able-alert-button-color: var(--able-black); + --able-seekbar-border: var(--able-medium-light-gray); + --able-seekbar-background: var(--able-black); + --able-seekbar-loaded: var(--able-medium-gray); + --able-seekbar-played: var(--able-light-gray); + --able-seekbar-head: var(--able-off-white); + --able-control-label-color: var(--able-white); + --able-controller-background: var(--able-medium-dark-gray2); + --able-separator-color: var(--able-medium-light-gray); + --able-volume-background: var(--able-black); + --able-volume-outline: var(--able-medium-gray); + --able-statusbar-color: var(--able-light-gray); + --able-statusbar-background: var(--able-black); + --able-default-caption-color: var(--able-white); + --able-default-caption-background: var(--able-black); + --able-default-description-color: var(--able-bright-yellow); + --able-default-description-background: var(--able-dark-gray); + --able-description-border: var(--able-medium-gray); + --able-now-playing-color: var(--able-white); + --able-now-playing-background: var(--able-black); + --able-modal-color: var(--able-black); + --able-modal-background: var(--able-off-white); + --able-modal-overlay: var(--able-transparent-gray); + --able-modal-border: 3px solid var(--able-light-gray); + --able-drag-outline: var(--able-bright-orange); + --able-sign-background: var(--able-white); + --able-sign-border: var(--able-black); + --able-resizable-color: var(--able-medium-gray); --able-chapter-background: transparent; - --able-chapter-color: #000; - --able-current-chapter-background: #000; - --able-current-chapter-color: #fff; - --able-focus-outline: #ffbb37; - --able-hover-outline: #8ab839; - --able-tooltip-border: #262626; - --able-tooltip-color: #333; - --able-tooltip-background: #eee; - --able-alert-background: #ffc; - --able-menu-border: #262626; - --able-menu-background: #000; - --able-menu-outline: #666; - --able-menu-color: #fff; - --able-menu-focus-background: #eee; - --able-menu-focus-color: #000; - --able-transcript-background: #fff; - --able-cue-audio-description-background: #fee; - --able-cue-audio-description-color: #262626; - --able-cue-highlighted-background: #000; - --able-cue-highlighted-color: #fff; - --able-cue-interacting-background: #ffc; - --able-cue-interacting-color: #000; - --able-playlist-item-background: #eee; - --able-playlist-item-color: #000; - --able-playlist-item-button-color: #000; - --able-search-results-button-background: #fff; - --able-search-results-button-color: #000; - --able-playlist-current-background: #fff; - --able-playlist-current-border: #230330; - --able-playlist-current-outline: #340449; - --able-playlist-current-active-color: #000; - --able-playlist-current-active-background: #fff; - --able-search-term-background: #ffc; - --able-search-term-color: #000; + --able-chapter-color: var(--able-black); + --able-current-chapter-background: var(--able-black); + --able-current-chapter-color: var(--able-white); + --able-focus-outline: var(--able-light-orange); + --able-hover-outline: var(--able-bright-green); + --able-tooltip-border: var(--able-dark-gray); + --able-tooltip-color: var(--able-medium-dark-gray); + --able-tooltip-background: var(--able-very-light-gray); + --able-alert-background: var(--able-light-yellow); + --able-menu-border: var(--able-dark-gray); + --able-menu-background: var(--able-black); + --able-menu-outline: var(--able-medium-gray); + --able-menu-color: var(--able-white); + --able-menu-focus-background: var(--able-very-light-gray); + --able-menu-focus-color: var(--able-black); + --able-transcript-background: var(--able-white); + --able-cue-audio-description-background: var(--able-light-pink); + --able-cue-audio-description-color: var(--able-dark-gray); + --able-cue-highlighted-background: var(--able-black); + --able-cue-highlighted-color: var(--able-white); + --able-cue-interacting-background: var(--able-light-yellow); + --able-cue-interacting-color: var(--able-black); + --able-playlist-item-background: var(--able-off-white); + --able-playlist-item-color: var(--able-black); + --able-playlist-item-button-color: var(--able-black); + --able-search-results-button-background: var(--able-white); + --able-search-results-button-color: var(--able-black); + --able-playlist-current-background: var(--able-white); + --able-playlist-current-border: var(--able-dark-gray); + --able-playlist-current-outline: var(--able-medium-dark-gray); + --able-playlist-current-active-color: var(--able-black); + --able-playlist-current-active-background: var(--able-white); + --able-search-term-background: var(--able-light-yellow); + --able-search-term-color: var(--able-black); } .able-black-controls { From 089783f9e09cfe232f78fcb000ae69059d12d895 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Sun, 31 Aug 2025 15:01:36 -0500 Subject: [PATCH 08/26] Missing wrapper on playlist 1 demo --- demos/playlist1-audio.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demos/playlist1-audio.html b/demos/playlist1-audio.html index 717e16f3..5848e05e 100644 --- a/demos/playlist1-audio.html +++ b/demos/playlist1-audio.html @@ -31,6 +31,7 @@

Audio player with a playlist

+
From ba705596cd5aafc184a4cecb72eabf84fa068e72 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Sun, 31 Aug 2025 15:25:28 -0500 Subject: [PATCH 09/26] Update URLs, URL indices, move urls for contributing to contribution. --- README.md | 38 ++++++++++---------------------------- contributing.md | 7 ++++++- demos/index.html | 4 ++-- package.json | 2 +- 4 files changed, 19 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 1fa5608b..aaa47dce 100644 --- a/README.md +++ b/README.md @@ -360,10 +360,7 @@ Setting this to "off" is useful if all videos have plenty of audio space for des ### Sign language -Sign language translation is supported in a separate video player, synchronized with the main player. Tips for filming a sign language interpreter are available from [Signing Books for the Deaf][]: - -* [Filming the Signer][] -* [Editing the Signer][] +Sign language translation is supported in a separate video player, synchronized with the main player. Some tips for filming a sign language interpreter are available from [Signing Books for the Deaf][]. #### Loading from local source @@ -573,7 +570,6 @@ If you don’t have access to your server’s .htaccess file, you should be able If your site is running on a Windows server, consult the documentation from Microsoft. For example: - [Configuring MIME Types in IIS 7][] -- [How to add MIME Types with IIS7 Web.config][] ## Keyboard Shortcuts @@ -610,7 +606,7 @@ One of *Able Player’s* accessibility features is that the player is highly cus - Highlight transcript as video plays - Keyboard-enable transcript -## Acknowledgments +## Acknowledgements - Able Player development is supported in part by the [AccessComputing][] project at the University of Washington, with financial support from the National Science Foundation (grants #CNS-0540615, CNS-0837508, and CNS-1042260). - Additional support has been provided by the [Committee on Institutional Cooperation][] (CIC). @@ -618,33 +614,19 @@ One of *Able Player’s* accessibility features is that the player is highly cus - Sample video tracks are provided courtesy of [The DO-IT Center][] at the University of Washington. Additional videos are available on the [DO-IT Video][] website, which uses Able Player. - Sample audio tracks feature songs by Terrill Thompson, Able Player's creator and original lead developer. Check out [Terrill's music site] for more listening, and to support his work. - [AccessComputing]: http://washington.edu/accesscomputing - [Committee on Institutional Cooperation]: https://www.cic.net/home - [Configuring MIME Types in IIS 7]: http://technet.microsoft.com/en-us/library/17bda1f4-8a0d-440f-986a-5aaa9d40b74c.aspx - [Editing the Signer]: http://www.sign-lang.uni-hamburg.de/signingbooks/sbrc/grid/d71/guide13.htm - [develop]: https://github.com/ableplayer/ableplayer/tree/develop - [examples]: http://ableplayer.github.io/ableplayer/demos/ - [Filming the Signer]: http://www.sign-lang.uni-hamburg.de/signingbooks/sbrc/grid/d71/guide12.htm - [Flavors, by Flow Theory]: http://www.terrillthompson.com/music/2012/01/flow-theory-flavors/ - [DO-IT Video]: http://washington.edu/doit/video - [Google Developer Console]: https://console.developers.google.com/ - [Google's Getting Started page]: https://developers.google.com/api-client-library/javascript/start/start-js#Getkeysforyourapplication - [Grunt]: http://gruntjs.com/ - [How to add MIME Types with IIS7 Web.config]: http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx + [AccessComputing]: https://www.washington.edu/accesscomputing/ + [Committee on Institutional Cooperation]: https://btaa.org/about/news-and-publications/news/2016/06/30/the-committee-on-institutional-cooperation-is-now-the-big-ten-academic-alliance + [Configuring MIME Types in IIS 7]: https://learn.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2008-R2-and-2008/cc753281(v=ws.10) + [examples]: https://ableplayer.github.io/ableplayer/demos/ + [DO-IT Video]: https://doit.uw.edu/videos/ [Icons8]: https://icons8.com - [issues]: https://github.com/ableplayer/ableplayer/issues - [jQuery]: http://jquery.com/ - [jquery.cookie]: https://github.com/carhartl/jquery-cookie + [jQuery]: https://jquery.com/ [js-cookie]: https://github.com/js-cookie/js-cookie - [JW Player]: http://www.jwplayer.com/ - [Modernizr]: http://modernizr.com/ - [npm]: https://www.npmjs.com/ - [Signing Books for the Deaf]: http://www.sign-lang.uni-hamburg.de/signingbooks/ + [Signing Books for the Deaf]: https://pragmaprojects.eu/signingbooks/index.php/the-project/summary [Terrill's music site]: https://terrillthompson.com/music - [The DO-IT Center]: http://washington.edu/doit + [The DO-IT Center]: https://doit.uw.edu/ [Video Demo #7]: demos/video7.html [WebVTT validator]: https://quuz.org/webvtt/ - [WebAIM’s 2017 Screen Reader User Survey]: https://webaim.org/projects/screenreadersurvey7/#browsers [WebVTT]: https://w3c.github.io/webvtt/ [Web Speech API]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API [YouTube's Terms of Service]: https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames diff --git a/contributing.md b/contributing.md index 5ff22fda..22c41728 100644 --- a/contributing.md +++ b/contributing.md @@ -55,4 +55,9 @@ Files created by the build process are put into the */build* directory: ## Code of Conduct -All contributors to Able Player are expected to follow our [published Code of Conduct](https://github.com/ableplayer/ableplayer/blob/main/code-of-conduct.md). \ No newline at end of file +All contributors to Able Player are expected to follow our [published Code of Conduct](https://github.com/ableplayer/ableplayer/blob/main/code-of-conduct.md). + + [Grunt]: https://gruntjs.com/ + [issues]: https://github.com/ableplayer/ableplayer/issues + [npm]: https://www.npmjs.com/ + [develop]: https://github.com/ableplayer/ableplayer/tree/develop \ No newline at end of file diff --git a/demos/index.html b/demos/index.html index 74ddb0ab..017a231e 100644 --- a/demos/index.html +++ b/demos/index.html @@ -135,7 +135,7 @@

Credits

Check out Terrill's music site for more listening, and to support his work.
  • The short animated film used in a few demos is - The Deadline + The Deadline from the Morevna Project, and is licensed under the terms of Creative Commons Attribution 4.0 license. You are free to share (copy and redistribute) and adapt (remix, transform) @@ -144,7 +144,7 @@

    Credits

  • All other video examples feature clips from videos produced by The DO-IT Center at the University of Washington. Additional videos are available on the - DO-IT Video website, + DO-IT Video website, which uses Able Player.
    • diff --git a/package.json b/package.json index f5a36331..c9fbfafb 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "ableplayer", "version": "4.7.0-beta1", "description": "Accessible HTML5 media player", - "homepage": "http://ableplayer.github.io/ableplayer", + "homepage": "https://ableplayer.github.io/ableplayer", "bugs": "https://github.com/ableplayer/ableplayer/issues", "license": "MIT", "repository": { From 2194da2eefa1a3995aa6d1597b1ef17d1ffee351 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Tue, 2 Sep 2025 15:18:41 -0500 Subject: [PATCH 10/26] Add issue and PR templates. --- .github/ISSUE_TEMPLATE/bug_report.md | 42 +++++++++++++++++++++++ .github/ISSUE_TEMPLATE/docs_existing.md | 26 ++++++++++++++ .github/ISSUE_TEMPLATE/docs_new.md | 26 ++++++++++++++ .github/ISSUE_TEMPLATE/feature_request.md | 20 +++++++++++ .github/PULL_REQUEST_TEMPLATE.md | 26 ++++++++++++++ 5 files changed, 140 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/docs_existing.md create mode 100644 .github/ISSUE_TEMPLATE/docs_new.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..71299c96 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,42 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**Version tested** +Which version of AblePlayer are you reporting against? + - Main (the current release) + - Develop (the next release) + - A specific branch other than main or develop. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/docs_existing.md b/.github/ISSUE_TEMPLATE/docs_existing.md new file mode 100644 index 00000000..f8f9f08b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/docs_existing.md @@ -0,0 +1,26 @@ +--- +name: Documentation (Existing) +about: Edits to existing documentation needed +title: '' +labels: '' +assignees: '' + +--- + +**URL** +page URL + +**Title** +Title of the existing documentation + +**What Needs Editing?** +Describe the steps using: +1. +2. +3. + +**Screenshots** +If applicable, add screenshots for the above steps + +**Additional context** +Add any other context. diff --git a/.github/ISSUE_TEMPLATE/docs_new.md b/.github/ISSUE_TEMPLATE/docs_new.md new file mode 100644 index 00000000..e0b5fce6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/docs_new.md @@ -0,0 +1,26 @@ +--- +name: Documentation (New) +about: New documentation needed +title: '' +labels: '' +assignees: '' + +--- + +**Title** +Suggested title of the new documentation + +**Description** +Describe what the new page is about + +**Instruction Steps** +Describe the steps using: +1. +2. +3. + +**Screenshots** +If applicable, add screenshots for the above steps + +**Additional context** +Add any other context. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 00000000..bbcbbe7d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..628cfc07 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,26 @@ + + +## Description + + + +## How Has This Been Tested? + + + + +## Screenshots (jpeg or gifs if applicable): + +## Types of changes + + + + + +## Checklist: +- [ ] My code is tested. +- [ ] My code has proper inline documentation. From c99ac0824b58ecf4d3f29a23e79a335f72d3798d Mon Sep 17 00:00:00 2001 From: Jeane Marty Date: Thu, 4 Sep 2025 13:40:19 -0700 Subject: [PATCH 11/26] fix for regex in the postprocessCTag function --- scripts/validate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/validate.js b/scripts/validate.js index 333da339..418f749e 100644 --- a/scripts/validate.js +++ b/scripts/validate.js @@ -106,7 +106,7 @@ var postProcessing = { return vttContent.replace( //g, function (_, classNames) { - var classes = classNames.replace(/\./g, " "); + var classes = classNames.replace(/ /g, "."); return ""; } ); From 03915e2cfea144b2f0089a904cd0874f74e243f5 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 5 Sep 2025 10:22:16 -0500 Subject: [PATCH 12/26] Remove some unused variables. --- scripts/buildplayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/buildplayer.js b/scripts/buildplayer.js index 98b064f1..d4bdff27 100644 --- a/scripts/buildplayer.js +++ b/scripts/buildplayer.js @@ -80,7 +80,7 @@ AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; + var thisObj; thisObj = this; From acdbb7c811148a0f083296d2296f84389e1a6d4e Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 5 Sep 2025 10:27:15 -0500 Subject: [PATCH 13/26] Add headings for individual demos --- demos/external5.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demos/external5.html b/demos/external5.html index deafcf89..b988d8a8 100644 --- a/demos/external5.html +++ b/demos/external5.html @@ -69,11 +69,12 @@

    Player hidden by default, exposed dynamically

    +

    Audio Player

    - +

    Video Player