X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fmedia%2Fvideocontrols.css;h=c70c3e6f1743eab615432bf5558d63fe381e2b6b;hp=678ded512064af618d2a82f28b8d98fbe55f1c72;hb=a9f6369d5cebd3c329b993d57e73bcf30fffd2cd;hpb=1880ed931e3f5308af14a7dbdf6f687ed03b9359

diff --git a/LCARStrek/global/media/videocontrols.css b/LCARStrek/global/media/videocontrols.css
index 678ded51..c70c3e6f 100644
--- a/LCARStrek/global/media/videocontrols.css
+++ b/LCARStrek/global/media/videocontrols.css
@@ -1,51 +1,480 @@
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace url("http://www.w3.org/1999/xhtml");
+
+video > xul|videocontrols,
+audio > xul|videocontrols {
+  writing-mode: horizontal-tb;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+
+.controlsContainer [hidden="true"],
+.controlBar[hidden] {
+  display: none;
+}
+
+.controlBar[size="hidden"] {
+  display: 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(160,144,144);
+}
+
+.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(0,0,0,.4);
+}
 
 .controlBar {
-  height: 24px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: 40px;
+  padding: 0 9px;
   background-color: rgba(156,156,255,0.75);
 }
 
-.playButton, .muteButton {
-  /* Remove the usual button appearance and styling */
-  margin: 0px;
-  padding: 0px;
-  border: none;
-  min-height: 24px;
-  min-width: 24px;
+.playButton,
+.muteButton,
+.closedCaptionButton,
+.fullscreenButton {
+  height: 100%;
+  min-height: 30px;
+  min-width: 30px;
+  padding: 6px;
+  border: 0;
+  margin: 0;
   background-color: transparent;
   background-repeat: no-repeat;
-  background-position: center center;
+  background-position: center;
+  background-origin: content-box;
+  background-clip: content-box;
 }
-.playButton:hover, .muteButton:hover {
+
+.playButton:hover,
+.muteButton:not([noAudio]):hover,
+.closedCaptionButton:hover,
+.fullscreenButton:hover {
   background-color: rgba(255,207,0,0.75);
 }
-.playButton:focus > .button-box,
-.muteButton:focus > .button-box {
-  border: 1px dotted rgba(0,0,0,0.75);
+
+.playButton:hover:active,
+.muteButton:not([noAudio]):hover:active,
+.closedCaptionButton:hover:active,
+.fullscreenButton:hover:active {
+  background-color: rgba(255,159,0,0.75);
 }
 
 .playButton {
-  background-image: url("chrome://global/skin/media/pauseButton.png");
+  background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
 }
 .playButton:hover {
-  background-image: url("chrome://global/skin/media/pauseButton-hover.png");
+  background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
 }
-.playButton[paused="true"] {
-  background-image: url("chrome://global/skin/media/playButton.png");
+.playButton:hover:active {
+  background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
 }
-.playButton[paused="true"]:hover {
-  background-image: url("chrome://global/skin/media/playButton-hover.png");
+.playButton[paused] {
+  background-image: url(chrome://global/skin/media/playButton.svg#play);
+}
+.playButton[paused]:hover {
+  background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
+}
+.playButton[paused]:hover:active {
+  background-image: url(chrome://global/skin/media/playButton.svg#play-active);
 }
 
 .muteButton {
-  background-image: url("chrome://global/skin/media/muteButton.png");
+  background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
 }
 .muteButton:hover {
-  background-image: url("chrome://global/skin/media/muteButton-hover.png");
+  background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
+}
+.muteButton:hover:active {
+  background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
+}
+.muteButton[muted] {
+  background-image: url(chrome://global/skin/media/muteButton.svg#mute);
+}
+.muteButton[muted]:hover {
+  background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
+}
+.muteButton[muted]:hover:active {
+  background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
+}
+.muteButton[noAudio],
+.muteButton[noAudio]:hover,
+.muteButton[noAudio]:hover:active {
+  background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
+}
+.muteButton[noAudio] + .volumeStack {
+  display: none;
+}
+
+.closedCaptionButton {
+  background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
+}
+.closedCaptionButton:hover {
+  background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
+}
+.closedCaptionButton:hover:active {
+  background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
+}
+.closedCaptionButton[enabled] {
+  background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
+}
+.closedCaptionButton[enabled]:hover {
+  background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
+}
+.closedCaptionButton[enabled]:hover:active {
+  background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
+}
+
+.fullscreenButton {
+  background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
+}
+.fullscreenButton:hover {
+  background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
+}
+.fullscreenButton:hover:active {
+  background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
+}
+.fullscreenButton[fullscreened] {
+  background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
+}
+.fullscreenButton[fullscreened]:hover {
+  background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
+}
+.fullscreenButton[fullscreened]:hover:active {
+  background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
+}
+
+.controlBarSpacer {
+  flex-grow: 1;
+}
+
+.volumeControl::-moz-range-thumb,
+.scrubber::-moz-range-thumb {
+  height: 13px;
+  width: 13px;
+  border: none;
+  border-radius: 50%;
+  background-color: #000000;
+}
+
+.volumeControl::-moz-focus-outer,
+.scrubber::-moz-focus-outer {
+  border: 0;
+}
+
+.progressBackgroundBar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.progressStack {
+  position: relative;
+  width: 100%;
+  height: 5px;
+}
+
+.scrubberStack {
+  min-width: 48px;
+  flex-basis: 48px;
+  flex-grow: 2;
+  flex-shrink: 0;
+  margin: 0 9px;
+}
+
+.volumeStack {
+  max-width: 60px;
+  min-width: 48px;
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin-right: 6px;
+  margin-left: 4px;
+}
+
+.bufferBar,
+.progressBar,
+.scrubber,
+.volumeBackground,
+.volumeControl {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 2.5px;
+  margin: 0;
+  background: none;
+  background-color: transparent;
+}
+
+.bufferBar,
+.volumeBackground {
+  background-color: rgba(160,144,144,0.7);
+}
+
+.bufferBar::-moz-progress-bar,
+.progressBar::-moz-progress-bar,
+.volumeBackground::-moz-meter-bar {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 2.5px;
+  background: none;
+}
+
+.scrubber:hover::-moz-range-thumb,
+.volumeControl:hover::-moz-range-thumb {
+  background-color: #FFCF00;
+}
+
+.scrubber:active::-moz-range-thumb,
+.volumeControl:active::-moz-range-thumb {
+  background-color: #FF9F00;
+}
+
+.scrubber::-moz-range-track,
+.scrubber::-moz-range-progress {
+  background-color: transparent;
+}
+
+.volumeControl::-moz-range-progress,
+.volumeControl::-moz-range-track {
+  height: 5px;
+  border-radius: 2.5px;
+}
+
+.volumeControl::-moz-range-progress {
+  background-color: #008484;
+}
+
+.volumeControl::-moz-range-track {
+  background-color: rgba(0,0,0,0.7);
+}
+
+
+.bufferBar::-moz-progress-bar {
+  background-color: rgba(160,144,144,0.3);
+  border-radius: 2.5px;
+}
+
+.progressBar::-moz-progress-bar {
+  background-color: #008484;
 }
-.muteButton[muted="true"] {
-  background-image: url("chrome://global/skin/media/unmuteButton.png");
+
+.textTrackList {
+  position: absolute;
+  right: 5px;
+  bottom: 45px;
+  max-width: 80%;
+  border: 1px solid #000000;
+  border-radius: 2.5px;
+  padding: 5px 0;
+  vertical-align: middle;
+  font-size: 12px;
+  background-color: #000000;
+  opacity: 0.7;
+}
+
+.textTrackList > .textTrackItem {
+  display: block;
+  width: 100%;
+  height: 30px;
+  padding: 2px 10px;
+  border: none;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  color: #FF9F00;
+  background-color: transparent;
+}
+
+.textTrackList > .textTrackItem:hover {
+  background-color: #FFCF00;
+}
+
+.textTrackList > .textTrackItem[on] {
+  color: #008484;
+}
+
+.positionLabel,
+.durationLabel {
+  display: none;
+}
+
+.positionDurationBox {
+  text-align: center;
+  padding-inline-start: 1px;
+  padding-inline-end: 9px;
+  white-space: nowrap;
+  font: message-box;
+  font-size: 13px;
+  font-size-adjust: 0.55;
+  color: #000000;
+}
+
+.duration {
+  display: inline-block;
+  white-space: pre;
+  color: #8050B0;
+}
+
+.statusIcon {
+  width: 36px;
+  height: 36px;
+  margin-bottom: 20px;
 }
-.muteButton[muted="true"]:hover {
-  background-image: url("chrome://global/skin/media/unmuteButton-hover.png");
+
+.statusIcon[type="throbber"] {
+  background: url(chrome://global/skin/media/throbber.png) no-repeat center;
+}
+
+.statusIcon[type="throbber"][stalled] {
+  background: url(chrome://global/skin/media/stalled.png) no-repeat center;
+}
+
+.statusIcon[type="error"] {
+  min-width: 70px;
+  min-height: 60px;
+  background: url(chrome://global/skin/media/error.png) no-repeat center;
+  background-size: contain;
+}
+
+/* Overlay Play button */
+.clickToPlay {
+  min-width: 48px;
+  min-height: 48px;
+  border-radius: 50%;
+  background-image: url(chrome://global/skin/media/playButton.svg#play);
+  background-repeat: no-repeat;
+  background-position: 54% 50%;
+  background-size: 40% 40%;
+  background-color: #000000;
+  opacity: 0.8;
+  position: relative;
+  top: 20px;
+}
+
+.controlsSpacerStack:hover > .clickToPlay,
+.clickToPlay:hover {
+  opacity: 0.55;
+}
+
+.controlsSpacerStack:hover > .clickToPlay[fadeout] {
+  opacity: 0;
+}
+
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
+/* CSS Transitions */
+.clickToPlay {
+  transition-property: transform, opacity;
+  transition-duration: 400ms, 400ms;
+}
+
+.controlsSpacer[fadeout] {
+  opacity: 0;
+}
+
+.clickToPlay[fadeout] {
+  transform: scale(3);
+  opacity: 0;
+}
+
+.clickToPlay[fadeout][immediate] {
+  transition-property: opacity, background-size;
+  transition-duration: 0s, 0s;
+}
+.controlBar:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: 200ms;
+}
+.controlBar[fadeout] {
+  opacity: 0;
+}
+.volumeStack:not([immediate]) {
+  transition-property: opacity, margin-top;
+  transition-duration: 200ms, 200ms;
+}
+.statusOverlay:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-delay: 750ms;
+}
+.statusOverlay[fadeout] {
+  opacity: 0;
+}
+
+/* Error description formatting */
+.errorLabel {
+  padding: 0 10px;
+  text-align: center;
+  font: message-box;
+  font-size: 14px;
+  color: #E7ADE7;
+}
+
+.errorLabel {
+  display: none;
+}
+
+[error="errorAborted"]         > [anonid="errorAborted"],
+[error="errorNetwork"]         > [anonid="errorNetwork"],
+[error="errorDecode"]          > [anonid="errorDecode"],
+[error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
+[error="errorNoSource"]        > [anonid="errorNoSource"],
+[error="errorGeneric"]         > [anonid="errorGeneric"] {
+  display: inline;
 }