-.playButton, .muteButton {
- /* Remove the usual button appearance and styling */
- margin: 0px;
- padding: 0px;
- border: none;
- min-height: 28px;
+.controlsContainer [hidden="true"],
+.controlBar[hidden] {
+ display: none;
+}
+
+.controlBar[size="hidden"] {
+ display: none;
+}
+
+.controlsSpacer[hideCursor] {
+ cursor: none;
+}
+
+.controlsContainer,
+.progressContainer {
+ position: relative;
+ height: 100%;
+}
+
+.stackItem {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.statusOverlay {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: rgb(80,80,80, .85);
+}
+
+.controlsOverlay {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+}
+
+.controlsSpacerStack {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ justify-content: center;
+ align-items: center;
+}
+
+.controlsSpacer {
+ background-color: rgba(255,255,255,.4);
+}
+
+.controlBar {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ height: 40px;
+ padding: 0 9px;
+ background-color: rgba(26,26,26,.8);
+}
+
+.playButton,
+.muteButton,
+.closedCaptionButton,
+.fullscreenButton {
+ height: 100%;
+ min-height: 30px;
+ min-width: 30px;
+ padding: 6px;
+ border: 0;
+ margin: 0;