Update Able Player scripts and styles to 4.8 beta.

Author: joedolson

src/build/ableplayer.dist.js

@@ -204,7 +204,7 @@
 
 /* Screen reader hidden text classes */
 .able-transcript .able-hidden,
-.able-clipped, .able-screenreader-alert, .able-offscreen {
+.able-screenreader-alert, .able-offscreen {
 	border: 0;
 	clip-path: inset(50%);
 	height: 1px;
@@ -263,6 +263,7 @@
 	position: absolute;
 	color: var(--able-control-color);
 	background-color: var(--able-big-play-background);
+	background: var(--able-big-play-background);
 	border: none;
 	outline: none;
 	left: 0;
@@ -273,11 +274,26 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: 5px;
 	width: 100%;
 	height: 100%;
 }
 
+.able-audio-wrapper {
+	display: flex;
+	gap: 4px;
+	align-items: center;
+	padding: 4px;
+	background: var(--able-control-background);
+}
+
+.able-audio-wrapper img {
+	max-width: 120px;
+}
+
+.able-audio-wrapper .able-audio {
+	flex: 1;
+}
+
 .able-wrapper .able button.able-big-play-button:hover,
 .able-wrapper .able button.able-big-play-button:focus {
 	opacity: 100;
@@ -483,7 +499,7 @@ div.able-captions-wrapper {
 }
 
 div.able-captions-wrapper:not(.able-captions-overlay) {
-	padding: 0 0 8px;
+	padding: 0;
 }
 
 div.able-captions {
@@ -506,6 +522,9 @@ div.able-vidcap-container div.able-captions-overlay {
 div.able-vidcap-container div.able-captions-below {
 	position: relative;
 	min-height: 4rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 div.able-audcap-container.captions-off {
@@ -555,12 +574,18 @@ div.able-modal-dialog {
 	color: var(--able-modal-color);
 	background-color: var(--able-modal-background);
 	border: var(--able-modal-border);
-	width: 50rem;
+	width: fit-content;
 	max-width: 95%;
 	padding: 1rem;
 	box-sizing: border-box;
 }
 
+@media screen and ( width < 800px ) {
+	div.able-modal-dialog {
+		min-width: 95%;
+	}
+}
+
 body.able-modal-active {
 	overflow: hidden;
 }
@@ -592,9 +617,14 @@ div.able-modal-overlay {
 	margin-top: 1rem;
 }
 
+.able-modkey-item.hidden {
+	display: none;
+}
+
 .able-modal-header {
 	display: flex;
 	justify-content: space-between;
+	gap: 8px;
 }
 
 .able-modal-dialog .modalCloseButton {
@@ -731,6 +761,40 @@ span.able-modkey {
 	gap: 12px;
 }
 
+.able-window-toolbar button {
+	order: 1;
+}
+
+.able-window-toolbar .autoscroll-transcript {
+	order: 3;
+	width: fit-content;
+	text-wrap: nowrap;
+}
+
+.able-window-toolbar .transcript-language-select-wrapper {
+	order: 4;
+}
+
+.able-window-toolbar .able-drag-handle {
+	order: 2;
+	width: 100%;
+	height: 100%;
+}
+
+.able-window-toolbar .able-drag-handle svg {
+	height: 12px;
+	width: auto;
+	margin: 0 auto;
+}
+
+.able-window-toolbar .able-drag-handle path {
+	fill: var(--able-medium-light-gray);
+}
+
+.able-draggable:hover .able-drag-handle path {
+	fill: var(--able-very-light-gray);
+}
+
 .able-window-toolbar > div {
 	display: flex;
 }
@@ -746,7 +810,7 @@ span.able-modkey {
 	width: 1rem;
 }
 
-.able-draggable:hover {
+.able-draggable .able-drag-handle:hover {
 	cursor: move;
 }
 
@@ -780,8 +844,8 @@ span.able-modkey {
 
 .able-resizable {
 	position: absolute;
-	width: 20px;
-	height: 20px;
+	width: 24px;
+	height: 24px;
 	bottom: 0;
 	right: 0;
 	padding: 1px;
@@ -801,9 +865,48 @@ span.able-modkey {
 	border: 1px solid var(--able-sign-border);
 }
 
+.fade-out {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0s 2s, opacity 2s linear;
+}
+
+.fade-in {
+	visibility: visible;
+	opacity: 1;
+	transition: opacity 1s linear;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .able-sign-window video {
 	width: 100%;
-	margin-bottom: 1rem;
+	display: block;
+}
+
+.able-sign-window .able-resizable {
+	background: #00000033;
+	background: linear-gradient(to bottom right, transparent 0%, transparent 51%, #fff3 51%, #fff3 100%);
+	border-top-left-radius: 20px;
+}
+
+.able-sign-window:hover .able-resizable {
+	background: var(--able-very-light-gray);
+	background: linear-gradient(to bottom right, transparent 0%, transparent 51%, #fffe 51%, #fffe 100%);
+
+}
+
+.able-sign-window.able-fixed video {
+	margin: 0;
+	display: block;
 }
 
 .able-sign-window:focus {
@@ -839,6 +942,7 @@ div.able-chapters-div button {
 	font-size: 1rem;
 	text-align: start;
 	padding: 8px;
+	box-sizing: border-box;
 }
 
 div.able-chapters-div li.able-current-chapter button {
@@ -870,7 +974,7 @@ div.able-wrapper.fullscreen {
 	padding: 4px 8px;
 	border: 1px solid var(--able-tooltip-border);
 	color: var(--able-tooltip-color) !important;
-	background-color: var(--able-tooltip-background) !important;
+	background-color: var(--able-tooltip-background);
 	border-radius: 3px;
 	display: block;
 	font-size: .875rem;
@@ -1031,6 +1135,10 @@ ul.able-popup li.able-focus,
 	color: var(--able-control-label-color);
 }
 
+.able-window-toolbar .autoscroll-transcript label {
+	margin-right: 0;
+}
+
 div.able-modal-dialog input,
 div.able-modal-dialog button,
 .able-window-toolbar .able-button-handler-preferences,
@@ -1299,12 +1407,12 @@ div#able-vts-icon-credit {
 div#able-vts-alert {
 	display: none;
 	position: fixed;
-	top: 5px;
-	left: 5px;
+	top: 16px;
+	left: 16px;
 	border: 2px solid #666;
-	background-color: #ffc;
+	background-color: var(--able-alert-background);
+	color: var(--able-black);
 	padding: 1rem;
-	font-weight: bold;
 	z-index: 9400;
 }