From: Robert Kaiser Date: Fri, 24 Mar 2017 17:37:19 +0000 (+0100) Subject: first part of syncing both themes with toolkit windows theme changes in Mozilla 53... X-Git-Tag: LCARStrek-2.50~5 X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=0282321df83ade4f66b3f44bbee1a2519485571a;hp=beb441cb5d339db72d4bc94a6a34ca8e38a54286 first part of syncing both themes with toolkit windows theme changes in Mozilla 53 cycle --- diff --git a/EarlyBlue/global/aboutNetworking.css b/EarlyBlue/global/aboutNetworking.css index bbc375a5..ef9d9e15 100644 --- a/EarlyBlue/global/aboutNetworking.css +++ b/EarlyBlue/global/aboutNetworking.css @@ -15,7 +15,7 @@ body { } #sectionTitle { - float: left; + float: inline-start; } #refreshDiv { @@ -86,6 +86,11 @@ body { background-size: 1.6em; } +.title:dir(rtl)::before { + left: auto; + right: -2.3em; +} + .warningBackground button { margin-top: 1em; margin-left: 0; diff --git a/EarlyBlue/global/aboutReaderContent.css b/EarlyBlue/global/aboutReaderContent.css index 633391d3..f69c17bf 100644 --- a/EarlyBlue/global/aboutReaderContent.css +++ b/EarlyBlue/global/aboutReaderContent.css @@ -55,6 +55,7 @@ figure, .wp-caption { margin: 0 0 10px 0 !important; + padding: 0 !important; } } diff --git a/EarlyBlue/global/aboutReaderControls.css b/EarlyBlue/global/aboutReaderControls.css index 1a602d84..c3baba62 100644 --- a/EarlyBlue/global/aboutReaderControls.css +++ b/EarlyBlue/global/aboutReaderControls.css @@ -63,11 +63,16 @@ .header > .credits { font-size: 0.9em; line-height: 1.48em; - margin: 0 0 30px 0; + margin: 0 0 10px 0; padding: 0; font-style: italic; } +.header > .meta-data { + font-size: 0.65em; + margin: 0 0 15px 0; +} + /*======= Controls toolbar =======*/ .toolbar { @@ -134,7 +139,7 @@ border-radius: 4px; border: 1px solid #b5b5b5; border-bottom-width: 0; - box-shadow: 0 1px 12px #666; + box-shadow: 0 1px 3px #c1c1c1; } .keep-open .dropdown-popup { @@ -153,7 +158,7 @@ position: absolute; top: 30px; /* offset arrow from top of popup */ left: -16px; - width: 24px; + width: 16px; height: 24px; background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); display: block; @@ -293,7 +298,7 @@ .content-width-minus-button, .content-width-plus-button, .line-height-minus-button, -.line-height-plus-button { +.line-height-plus-button { background-color: transparent; border: 0; background-size: 18px 18px; @@ -335,14 +340,6 @@ background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); } -#pocket-button { - background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark"); -} - -#pocket-button:hover:active { - background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added"); -} - .content-width-minus-button { background-size: 42px 16px; background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); diff --git a/EarlyBlue/global/datetimeinputpickers.css b/EarlyBlue/global/datetimeinputpickers.css index fc48fe93..0298e34c 100644 --- a/EarlyBlue/global/datetimeinputpickers.css +++ b/EarlyBlue/global/datetimeinputpickers.css @@ -92,6 +92,7 @@ button { align-items: center; top: 0; left: 3rem; + right: 3rem; width: 17.1rem; height: var(--date-picker-item-height); z-index: 10; @@ -101,7 +102,10 @@ button.month-year { font-size: 1.3rem; border: var(--border); border-radius: 0.3rem; - padding: 0.2rem 2.6rem 0.2rem 1.2rem; + padding-top: 0.2rem; + padding-bottom: 0.2rem; + padding-inline-start: 1.2rem; + padding-inline-end: 2.6rem; } button.month-year:hover { diff --git a/EarlyBlue/global/findBar.css b/EarlyBlue/global/findBar.css index d70f5953..e1a0e95c 100644 --- a/EarlyBlue/global/findBar.css +++ b/EarlyBlue/global/findBar.css @@ -62,11 +62,19 @@ findbar[position="top"][hidden] { } .findbar-find-previous { - list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-previous); + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous); } .findbar-find-next { - list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next); + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next); +} + +.findbar-find-previous[disabled] { + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled); +} + +.findbar-find-next[disabled] { + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled); } .findbar-find-previous, diff --git a/EarlyBlue/global/icons/find-arrows.svg b/EarlyBlue/global/icons/find-arrows.svg index 8e25a2c7..07aceeda 100644 --- a/EarlyBlue/global/icons/find-arrows.svg +++ b/EarlyBlue/global/icons/find-arrows.svg @@ -2,15 +2,26 @@ - + - - + + + + + + + + diff --git a/LCARStrek/browser/filters.svg b/EarlyBlue/global/icons/menubutton-dropmarker.svg similarity index 61% rename from LCARStrek/browser/filters.svg rename to EarlyBlue/global/icons/menubutton-dropmarker.svg index 8fccb13c..76af113a 100644 --- a/LCARStrek/browser/filters.svg +++ b/EarlyBlue/global/icons/menubutton-dropmarker.svg @@ -2,8 +2,7 @@ - - - - + + diff --git a/EarlyBlue/global/icons/spinner-arrows.svg b/EarlyBlue/global/icons/spinner-arrows.svg new file mode 100644 index 00000000..a8ba72d6 --- /dev/null +++ b/EarlyBlue/global/icons/spinner-arrows.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/EarlyBlue/global/media/TopLevelVideoDocument.css b/EarlyBlue/global/media/TopLevelVideoDocument.css index 0d5dabdd..625761b3 100644 --- a/EarlyBlue/global/media/TopLevelVideoDocument.css +++ b/EarlyBlue/global/media/TopLevelVideoDocument.css @@ -7,5 +7,5 @@ body { } video { - box-shadow: 0 0 15px #000; + box-shadow: 0 0 5px rgba(0,0,0,0.6); } diff --git a/EarlyBlue/global/media/closeCaptionButton.png b/EarlyBlue/global/media/closeCaptionButton.png deleted file mode 100644 index 16f9b30c..00000000 Binary files a/EarlyBlue/global/media/closeCaptionButton.png and /dev/null differ diff --git a/EarlyBlue/global/media/closeCaptionButton@2x.png b/EarlyBlue/global/media/closeCaptionButton@2x.png deleted file mode 100644 index 18c0fed5..00000000 Binary files a/EarlyBlue/global/media/closeCaptionButton@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/closedCaptionButton.svg b/EarlyBlue/global/media/closedCaptionButton.svg new file mode 100644 index 00000000..0c550719 --- /dev/null +++ b/EarlyBlue/global/media/closedCaptionButton.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/media/fullscreenButton.png b/EarlyBlue/global/media/fullscreenButton.png deleted file mode 100644 index 3ca939da..00000000 Binary files a/EarlyBlue/global/media/fullscreenButton.png and /dev/null differ diff --git a/EarlyBlue/global/media/fullscreenButton.svg b/EarlyBlue/global/media/fullscreenButton.svg new file mode 100644 index 00000000..0bf3ec2f --- /dev/null +++ b/EarlyBlue/global/media/fullscreenButton.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/media/fullscreenButton@2x.png b/EarlyBlue/global/media/fullscreenButton@2x.png deleted file mode 100644 index c0592b95..00000000 Binary files a/EarlyBlue/global/media/fullscreenButton@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/muteButton.png b/EarlyBlue/global/media/muteButton.png deleted file mode 100644 index 3ad97273..00000000 Binary files a/EarlyBlue/global/media/muteButton.png and /dev/null differ diff --git a/EarlyBlue/global/media/muteButton.svg b/EarlyBlue/global/media/muteButton.svg new file mode 100644 index 00000000..779957cd --- /dev/null +++ b/EarlyBlue/global/media/muteButton.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/media/muteButton@2x.png b/EarlyBlue/global/media/muteButton@2x.png deleted file mode 100644 index c0cac75d..00000000 Binary files a/EarlyBlue/global/media/muteButton@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/noAudio.png b/EarlyBlue/global/media/noAudio.png deleted file mode 100644 index 0221c035..00000000 Binary files a/EarlyBlue/global/media/noAudio.png and /dev/null differ diff --git a/EarlyBlue/global/media/noAudio@2x.png b/EarlyBlue/global/media/noAudio@2x.png deleted file mode 100644 index 51528eee..00000000 Binary files a/EarlyBlue/global/media/noAudio@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/pauseButton.png b/EarlyBlue/global/media/pauseButton.png deleted file mode 100644 index c7162207..00000000 Binary files a/EarlyBlue/global/media/pauseButton.png and /dev/null differ diff --git a/EarlyBlue/global/media/pauseButton.svg b/EarlyBlue/global/media/pauseButton.svg new file mode 100644 index 00000000..8d56b969 --- /dev/null +++ b/EarlyBlue/global/media/pauseButton.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/media/pauseButton@2x.png b/EarlyBlue/global/media/pauseButton@2x.png deleted file mode 100644 index df6de086..00000000 Binary files a/EarlyBlue/global/media/pauseButton@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/playButton.png b/EarlyBlue/global/media/playButton.png deleted file mode 100644 index d6f8d345..00000000 Binary files a/EarlyBlue/global/media/playButton.png and /dev/null differ diff --git a/EarlyBlue/global/media/playButton.svg b/EarlyBlue/global/media/playButton.svg new file mode 100644 index 00000000..dc20c619 --- /dev/null +++ b/EarlyBlue/global/media/playButton.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/media/playButton@2x.png b/EarlyBlue/global/media/playButton@2x.png deleted file mode 100644 index 3516c454..00000000 Binary files a/EarlyBlue/global/media/playButton@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/scrubberThumb.png b/EarlyBlue/global/media/scrubberThumb.png deleted file mode 100644 index 703063a5..00000000 Binary files a/EarlyBlue/global/media/scrubberThumb.png and /dev/null differ diff --git a/EarlyBlue/global/media/scrubberThumb@2x.png b/EarlyBlue/global/media/scrubberThumb@2x.png deleted file mode 100644 index 942fc45b..00000000 Binary files a/EarlyBlue/global/media/scrubberThumb@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/scrubberThumbWide.png b/EarlyBlue/global/media/scrubberThumbWide.png deleted file mode 100644 index 0153d6c8..00000000 Binary files a/EarlyBlue/global/media/scrubberThumbWide.png and /dev/null differ diff --git a/EarlyBlue/global/media/scrubberThumbWide@2x.png b/EarlyBlue/global/media/scrubberThumbWide@2x.png deleted file mode 100644 index cb1f596f..00000000 Binary files a/EarlyBlue/global/media/scrubberThumbWide@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/unmuteButton.png b/EarlyBlue/global/media/unmuteButton.png deleted file mode 100644 index d4d4c0bf..00000000 Binary files a/EarlyBlue/global/media/unmuteButton.png and /dev/null differ diff --git a/EarlyBlue/global/media/unmuteButton@2x.png b/EarlyBlue/global/media/unmuteButton@2x.png deleted file mode 100644 index f77149d9..00000000 Binary files a/EarlyBlue/global/media/unmuteButton@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/videocontrols.css b/EarlyBlue/global/media/videocontrols.css index 7aa1df64..c73d9f66 100644 --- a/EarlyBlue/global/media/videocontrols.css +++ b/EarlyBlue/global/media/videocontrols.css @@ -2,315 +2,431 @@ * 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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace html url("http://www.w3.org/1999/xhtml"); +@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(80,80,80); +} + +.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 { - height: 28px; - background-color: rgba(102,102,153,0.75); + 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; background-color: transparent; background-repeat: no-repeat; background-position: center; - margin: 0; - padding: 0; - min-height: 28px; - min-width: 28px; - border: none; + background-origin: content-box; + background-clip: content-box; } .playButton { - background-image: url("chrome://global/skin/media/pauseButton.png"); - margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ - position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ + background-image: url(chrome://global/skin/media/pauseButton.svg#pause); +} +.playButton:hover { + background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover); +} +.playButton:hover:active { + background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active); } - .playButton[paused] { - background-image: url("chrome://global/skin/media/playButton.png"); + 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"); - min-width: 33px; + background-image: url(chrome://global/skin/media/muteButton.svg#unmute); +} +.muteButton:hover { + 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/unmuteButton.png"); + background-image: url(chrome://global/skin/media/muteButton.svg#mute); } - -.muteButton[noAudio] { - background-image: url("chrome://global/skin/media/noAudio.png"); +.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/closeCaptionButton.png"); - background-position: 4px; + 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] { - opacity: 1; + background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc); } - -.closedCaptionButton[hidden] { - display: none; +.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: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); + 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: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); + 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); } -.volumeControl { - width: 32px; - opacity: 0; +.controlBarSpacer { + flex-grow: 1; } -.volumeBackground, -.volumeForeground { - background-repeat: no-repeat; - background-position: center; - width: 32px; +.volumeControl::-moz-range-thumb, +.scrubber::-moz-range-thumb { + height: 13px; + width: 13px; + border: none; + border-radius: 50%; + background-color: #ffffff; + filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65)); } -.volumeBackground { - background-image: url("chrome://global/skin/media/volume-empty.png"); +.volumeControl::-moz-focus-outer, +.scrubber::-moz-focus-outer { + border: 0; } -.volumeForeground { - background-image: url("chrome://global/skin/media/volume-full.png"); - background-clip: content-box; +.progressBackgroundBar { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } -.textTrackList { - display: -moz-box; - -moz-appearance: none; - -moz-box-pack: end; - -moz-box-align: end; - padding: 0; +.progressStack { + position: relative; + width: 100%; + height: 5px; } -.textTrackList[hidden] { - display: none; +.scrubberStack { + min-width: 48px; + flex-basis: 48px; + flex-grow: 2; + flex-shrink: 0; + margin: 0 9px; } -.textTrackList > html|*.textTrackItem { - -moz-appearance: none; - -moz-box-align: start; - text-align: start; - overflow: hidden; - margin: 0; - padding: 2px 10px; - -moz-margin-end: 10px; - border: none; - color: rgba(255,255,255,.5); - background-color: rgba(35,31,32,.74); - white-space: nowrap; +.volumeStack { + max-width: 60px; + min-width: 48px; + flex-grow: 1; + flex-shrink: 0; + margin-right: 6px; + margin-left: 4px; } -.textTrackList > html|*.textTrackItem[on] { - color: white; - background-color: black; +.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; } -.textTrackList > html|*.textTrackItem:hover { - background-color: rgba(0,0,0,.55); +.bufferBar, +.volumeBackground { + background-color: rgba(0,0,0,0.7); } -.controlBar[fullscreen-unavailable] { - /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ - padding-inline-end: 8px; +.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; } -.volumeControl .scale-thumb { - min-width: 0; - opacity: 0; +.scrubber:hover::-moz-range-thumb, +.volumeControl:hover::-moz-range-thumb { + background-color: #48a0f7; } -.durationBox { - -moz-box-pack: center; +.scrubber:active::-moz-range-thumb, +.volumeControl:active::-moz-range-thumb { + background-color: #2d89e6; } -.durationLabel { - margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ - padding-left: 8px; /* don't bump into the scrubber bar */ - padding-top: 0px; /* center vertically with scrubber bar */ - color: rgba(204,208,221,0.75); - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; +.scrubber::-moz-range-track, +.scrubber::-moz-range-progress { + background-color: transparent; } -.positionLabel { - display: none; +.volumeControl::-moz-range-progress, +.volumeControl::-moz-range-track { + height: 5px; + border-radius: 2.5px; } -.backgroundBar { - /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ - /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ - margin: 10px 22px; - background-color: rgba(0,0,0,0.75); +.volumeControl::-moz-range-progress { + background-color: #ffffff; } -.bufferBar, -.progressBar { - /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ - /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ - margin: 10px 22px; - border: none; - background-color: transparent; - min-width: 0; - min-height: 0; +.volumeControl::-moz-range-track { + background-color: rgba(0,0,0,0.7); } -/* .progress-bar is an element inside the implementation. */ -.bufferBar .progress-bar { - /* - * Note that this is drawn on top of the .backgroundBar. So although this - * has the same background-color specified, the semitransparent - * compositing gives it a different visual appearance. - */ - background-color: rgba(204,208,221,0.75); - -moz-appearance: none; + +.bufferBar::-moz-progress-bar { + background-color: rgba(255,255,255,0.3); + border-radius: 2.5px; } -.progressBar .progress-bar { - background-color: #336699; - -moz-appearance: none; +.progressBar::-moz-progress-bar { + background-color: #00b6f0; } -/* .scale-slider is an element inside the implementation. */ -.scrubber .scale-slider, -.volumeControl .scale-slider { - /* Hide the default horizontal bar. */ - background: none; - margin: 0; +.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; } -.scrubber .scale-slider { - /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ - margin-top: -10px; - margin-bottom: 10px; +.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: #ffffff; + background-color: transparent; } -/* .scale-thumb is an element inside the implementation. */ -.scrubber .scale-thumb, -.volumeControl .scale-thumb { - /* Override the default thumb appearance with a custom image. */ - background: transparent; - border: none !important; +.textTrackList > .textTrackItem:hover { + background-color: #444444; } -.timeThumb { - background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center; - min-width: 45px; - min-height: 28px; - -moz-box-pack: center; +.textTrackList > .textTrackItem[on] { + color: #48a0f7; } -.timeThumb[showhours="true"] { - background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); +.positionLabel, +.durationLabel { + display: none; } -/* -.timeThumb:hover, .timeThumb:active { - background-image: url("chrome://global/skin/media/scrubberThumb-hover.png"); +.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: #ffffff; } -*/ -.timeLabel { - color: rgba(0,0,0,0.75); - font-size: 10px; - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - text-shadow: rgba(102,102,153, 0.3) 0 1px; - padding-top: 5px; +%ifdef XP_MACOSX +.positionDurationBox { + font-size-adjust: unset; + font-family: "Helvetica Neue", "Helvetica", sans-serif; } +%endif -.statusOverlay { - -moz-box-align: center; - -moz-box-pack: center; - background-color: rgba(0,0,0,0.55); +.duration { + display: inline-block; + white-space: pre; + color: #929292; } .statusIcon { - margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ - width: 32px; - height: 32px; + width: 36px; + height: 36px; + margin-bottom: 20px; } .statusIcon[type="throbber"] { - background: url("chrome://communicator/skin/brand/throbber-anim.gif") no-repeat center; + 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; + background: url(chrome://global/skin/media/stalled.png) no-repeat center; } -*/ + .statusIcon[type="error"] { - background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; + min-width: 70px; + min-height: 60px; + background: url(chrome://global/skin/media/error.png) no-repeat center; + background-size: contain; } /* Overlay Play button */ .clickToPlay { - width: 64px; - height: 64px; - -moz-box-pack: center; - -moz-box-align: center; - opacity: 0.7; - background-image: url("chrome://global/skin/media/videoClickToPlayButton.svg"); + 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: center; - background-size: 64px 64px; - background-color: hsla(0,0%,10%,.5); + background-position: 54% 50%; + background-size: 40% 40%; + background-color: #1a1a1a; + opacity: 0.8; + position: relative; + top: 20px; } + +.controlsSpacerStack:hover > .clickToPlay, .clickToPlay:hover { - opacity: 1; + opacity: 0.55; } -/* Statistics formatting */ -html|*.statsDiv { - position: relative; +.controlsSpacerStack:hover > .clickToPlay[fadeout] { + opacity: 0; } -html|td { - height: 1em; - max-height: 1em; - padding: 0 2px; -} -html|table { - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; - color: white; - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; - min-width: 100%; - background: rgba(68,68,68,.7); - table-layout: fixed; - border-collapse: collapse; - position: absolute; + +.controlBar[fullscreen-unavailable] .fullscreenButton { + display: none; } /* CSS Transitions */ .clickToPlay { - transition-property: opacity, background-size; + transition-property: transform, opacity; transition-duration: 400ms, 400ms; } + +.controlsSpacer[fadeout] { + opacity: 0; +} + .clickToPlay[fadeout] { - background-size: auto, 192px 192px; + transform: scale(3); opacity: 0; } + .clickToPlay[fadeout][immediate] { transition-property: opacity, background-size; transition-duration: 0s, 0s; @@ -326,10 +442,6 @@ html|table { transition-property: opacity, margin-top; transition-duration: 200ms, 200ms; } -.volumeStack[fadeout] { - opacity: 0; - margin-top: 0; -} .statusOverlay:not([immediate]) { transition-property: opacity; transition-duration: 300ms; @@ -341,66 +453,40 @@ html|table { /* Error description formatting */ .errorLabel { - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; - color: #CCD0DD; - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; padding: 0 10px; text-align: center; + font: message-box; + font-size: 14px; + color: #ffffff; } -@media (min-resolution: 2dppx) { - .playButton { - background-image: url(chrome://global/skin/media/pauseButton@2x.png); - background-size: 28px 28px; - } - .playButton[paused] { - background-image: url(chrome://global/skin/media/playButton@2x.png); - background-size: 28px 28px; - } - .volumeBackground { - background-image: url(chrome://global/skin/media/volume-empty@2x.png); - background-size: 32px 16px; - } - .volumeForeground { - background-image: url(chrome://global/skin/media/volume-full@2x.png); - background-size: 32px 16px; - } - .muteButton { - background-image: url(chrome://global/skin/media/muteButton@2x.png); - background-size: 33px 28px; - } - .muteButton[muted] { - background-image: url(chrome://global/skin/media/unmuteButton@2x.png); - background-size: 33px 28px; - } - .muteButton[noAudio] { - background-image: url(chrome://global/skin/media/noAudio@2x.png); - background-size: 33px 28px; - } - .closedCaptionButton { - background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png); - background-position: 4px; - background-size: 28px 28px; - } - .fullscreenButton { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0); - background-size: 16px 16px; - } - .fullscreenButton[fullscreened] { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32); - background-size: 16px 16px; - } - .timeThumb { - background-image: url(chrome://global/skin/media/scrubberThumb@2x.png); - background-size: 33px 28px; +.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; +} + +/* For high contrast theme in Windows */ +%ifdef XP_WIN +.controlsSpacer, +.clickToPlay { + background-color: transparent; +} + +@media (-moz-windows-default-theme) { + .controlsSpacer { + background-color: rgba(255,255,255,.4); } - .timeThumb[showhours="true"] { - background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png); - background-size: 45px 28px; + + .clickToPlay { + background-color: #1a1a1a; } } +%endif diff --git a/EarlyBlue/global/media/volume-empty.png b/EarlyBlue/global/media/volume-empty.png deleted file mode 100644 index ba3a0294..00000000 Binary files a/EarlyBlue/global/media/volume-empty.png and /dev/null differ diff --git a/EarlyBlue/global/media/volume-empty@2x.png b/EarlyBlue/global/media/volume-empty@2x.png deleted file mode 100644 index f5e10299..00000000 Binary files a/EarlyBlue/global/media/volume-empty@2x.png and /dev/null differ diff --git a/EarlyBlue/global/media/volume-full.png b/EarlyBlue/global/media/volume-full.png deleted file mode 100644 index 146e46c4..00000000 Binary files a/EarlyBlue/global/media/volume-full.png and /dev/null differ diff --git a/EarlyBlue/global/media/volume-full@2x.png b/EarlyBlue/global/media/volume-full@2x.png deleted file mode 100644 index 40180795..00000000 Binary files a/EarlyBlue/global/media/volume-full@2x.png and /dev/null differ diff --git a/EarlyBlue/global/menu.css b/EarlyBlue/global/menu.css index 310951ec..168f14be 100644 --- a/EarlyBlue/global/menu.css +++ b/EarlyBlue/global/menu.css @@ -12,8 +12,7 @@ menu, menuitem, -menucaption, -.splitmenu-menuitem { +menucaption { -moz-box-align: center; max-width: 42em; color: #000000; @@ -26,18 +25,15 @@ menuitem[default="true"] { } menu[_moz-menuactive="true"], -menuitem[_moz-menuactive="true"], -.splitmenu-menuitem[_moz-menuactive="true"] { +menuitem[_moz-menuactive="true"] { background-color: #336699; color: #FFFFFF; } menu[disabled="true"], menuitem[disabled="true"], -.splitmenu-menuitem[disabled="true"], menu[_moz-menuactive="true"][disabled="true"], -menuitem[_moz-menuactive="true"][disabled="true"], -.splitmenu-menuitem[_moz-menuactive="true"][disabled="true"] { +menuitem[_moz-menuactive="true"][disabled="true"] { color: #999999; } diff --git a/EarlyBlue/global/notification.css b/EarlyBlue/global/notification.css index 929ad723..881dcf27 100644 --- a/EarlyBlue/global/notification.css +++ b/EarlyBlue/global/notification.css @@ -54,10 +54,25 @@ notification[type="critical"] { margin-inline-start: 5px; } -/* Popup notification */ +/* === BEGIN popupnotification.inc.css === */ + +.popup-notification-body-container { + padding: var(--arrowpanel-padding); +} + +.popup-notification-icon { + width: 32px; + height: 32px; + margin-inline-end: var(--arrowpanel-padding); +} .popup-notification-body { - max-width: 25em; + width: 25em; +} + +.popup-notification-closebutton { + margin-inline-end: -8px; + margin-top: -8px; } .popup-notification-origin:not([value]), @@ -74,18 +89,119 @@ notification[type="critical"] { } .popup-notification-button-container { - margin-top: 17px; + background-color: var(--arrowpanel-dimmed); + display: flex; } -.popup-notification-closebutton { - margin-inline-end: -5px; - margin-top: -5px; +.popup-notification-button-container > toolbarseparator { + -moz-appearance: none; + border: 0; + border-left: 1px solid var(--panel-separator-color); + margin: 7px 0 7px; + min-width: 0; } -.popup-notification-closeitem { - list-style-image: url("chrome://global/skin/icons/close-button.gif"); +.popup-notification-button-container:hover > toolbarseparator { + margin: 0; +} + +.popup-notification-button { + flex: 1; + -moz-appearance: none; + background-color: transparent; + color: inherit; + margin: 0; + padding: 0; + min-width: 0; + min-height: 41px; + border: none; +/* border-top: 1px solid var(--panel-separator-color);*/ +} + +.popup-notification-button:hover:not([disabled]) { +/* background-color: var(--arrowpanel-dimmed);*/ +} + +.popup-notification-button:hover:active:not([disabled]) { +/* background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;*/ +} + +.popup-notification-button[disabled] { +/* background-color: var(--arrowpanel-dimmed-further); + color: graytext;*/ +} + +.popup-notification-button[default] { + flex: 0 50%; +} + +.popup-notification-button[default]:not([disabled]) { +/* background-color: #0996f8; + color: white;*/ +} + +.popup-notification-button[default]:hover:not([disabled]) { +/* background-color: #0675d3;*/ +} + +.popup-notification-button[default]:hover:active:not([disabled]) { +/* background-color: #0568ba;*/ +} + +.popup-notification-button[anonid="secondarybutton"][hidden="true"] ~ .popup-notification-button[default] { + flex: 1; +} + +.popup-notification-button > .button-box { + padding: 0; + margin: 0; + /* prevent double border on windows when focused */ + border: none; +} + +.popup-notification-dropmarker { + flex: none; + padding: 0 15px; +} + +.popup-notification-dropmarker > .button-box > hbox { + display: none; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + /* This is to override the linux !important */ + -moz-appearance: none !important; + display: -moz-box; + padding: 0; + margin: 0; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon { + width: 16px; + height: 16px; + list-style-image: url(chrome://global/skin/icons/menubutton-dropmarker.svg); + filter: url(chrome://global/skin/filters.svg#fill); + fill: currentColor; +} + +/* === END popupnotification.inc.css === */ + +.popup-notification-button:-moz-focusring { + outline: 1px -moz-dialogtext dotted; + outline-offset: -1px; +} + +/* Override default icon size which is too small for this dropdown */ +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + width: 16px; + height: 16px; } -.popup-notification-menubutton > .button-menubutton-button[disabled] { - opacity: 0.5; +@media (-moz-windows-default-theme) { + /* Swap the default and secondary action, because Windows + * platform conventions put the default action on the left. */ + .popup-notification-button[default] { + order: -1; + } } diff --git a/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg b/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg index 837392ff..9c663119 100644 --- a/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg +++ b/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/EarlyBlue/global/timepicker.css b/EarlyBlue/global/timepicker.css deleted file mode 100644 index 683ae123..00000000 --- a/EarlyBlue/global/timepicker.css +++ /dev/null @@ -1,153 +0,0 @@ -/* 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/. */ - -:root { - --font-size-default: 1.1rem; - --spinner-width: 3rem; - --spinner-margin-top-bottom: 0.4rem; - --spinner-item-height: 2.4rem; - --spinner-item-margin-bottom: 0.1rem; - --spinner-button-height: 1.2rem; - --colon-width: 2rem; - --day-period-spacing-width: 1rem; - - --border: 0.1rem solid #9999CC; - --border-radius: 0.3rem; - - --font-color: #000000; - --fill-color: #CCD0DD; - - --selected-font-color: #FFFFFF; - --selected-fill-color: #336699; - - --button-font-color: #666699; - --button-font-color-hover: #6666CC; - --button-font-color-active: #9999CC; - - --disabled-opacity: 0.2; -} - -html { - font-size: 10px; -} - -body { - margin: 0; - color: var(--font-color); - font-size: var(--font-size-default); -} - -#time-picker { - display: flex; - flex-direction: row; - justify-content: space-around; -} - -.spinner-container { - font-family: sans-serif; - display: flex; - flex-direction: column; - width: var(--spinner-width); -} - -.spinner-container > button { - -moz-appearance: none; - border: none; - background: none; - background-color: var(--button-font-color); - height: var(--spinner-button-height); -} - -.spinner-container > button:hover { - background-color: var(--button-font-color-hover); -} - -.spinner-container > button.active { - background-color: var(--button-font-color-active); -} - -.spinner-container > button.up { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%; -} - -.spinner-container > button.down { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%; -} - -.spinner-container.hide-buttons > button { - visibility: hidden; -} - -.spinner-container > .spinner { - position: relative; - width: 100%; - margin: var(--spinner-margin-top-bottom) 0; - cursor: default; - overflow-y: scroll; - scroll-snap-type: mandatory; - scroll-snap-points-y: repeat(100%); -} - -.spinner-container > .spinner > div { - box-sizing: border-box; - position: relative; - text-align: center; - padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; - margin-bottom: var(--spinner-item-margin-bottom); - height: var(--spinner-item-height); - -moz-user-select: none; - scroll-snap-coordinate: 0 0; -} - -.spinner-container > .spinner > div:hover::before { - background: var(--fill-color); - border: var(--border); - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.spinner-container > .spinner:not(.scrolling) > div.selection { - color: var(--selected-font-color); -} - -.spinner-container > .spinner > div.selection::before { - background: var(--selected-fill-color); - border: none; - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.spinner-container > .spinner > div.disabled::before, -.spinner-container > .spinner.scrolling > div.selection::before, -.spinner-container > .spinner.scrolling > div:hover::before { - display: none; -} - -.spinner-container > .spinner > div.disabled { - opacity: var(--disabled-opacity); -} - -.colon { - display: flex; - justify-content: center; - align-items: center; - width: var(--colon-width); - margin-bottom: 0.3rem; -} - -.spacer { - width: var(--day-period-spacing-width); -} diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index b7aa6fb8..dd5f7df8 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -968,7 +968,7 @@ toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, # #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - filter: url(chrome://browser/skin/filters.svg#fill); + filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } @@ -1124,7 +1124,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - filter: url(chrome://browser/skin/filters.svg#fill); + filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } @@ -2943,7 +2943,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- .tab-icon-sound[muted], .tab-icon-sound[blocked] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); - filter: url(chrome://browser/skin/filters.svg#fill); + filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } @@ -3124,7 +3124,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- .alltabs-endimage[muted], .alltabs-endimage[blocked] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); - filter: url(chrome://browser/skin/filters.svg#fill); + filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } @@ -5478,7 +5478,7 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { width: 16px; height: 16px; margin: 7px; - filter: url(chrome://browser/skin/filters.svg#fill); + filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css index 5d9e8485..1fb69e1e 100644 --- a/LCARStrek/browser/downloads/downloads.css +++ b/LCARStrek/browser/downloads/downloads.css @@ -118,7 +118,7 @@ richlistitem[type="download"]:hover > toolbarseparator, width: 16px; height: 16px; /* list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg"); - filter: url("chrome://browser/skin/filters.svg#fill"); + filter: url("chrome://global/skin/filters.svg#fill"); fill: currentColor;*/ } @@ -272,7 +272,7 @@ richlistitem[type="download"][verdict] > toolbarseparator { width: 16px; height: 16px; margin: 1px; - filter: url("chrome://browser/skin/filters.svg#fill"); + filter: url("chrome://global/skin/filters.svg#fill"); fill: currentColor; } diff --git a/LCARStrek/browser/searchbar.css b/LCARStrek/browser/searchbar.css index 290ffdbd..8fdb6dab 100644 --- a/LCARStrek/browser/searchbar.css +++ b/LCARStrek/browser/searchbar.css @@ -289,7 +289,7 @@ .search-setting-button-compact > .button-box > .button-icon { list-style-image: url("chrome://browser/skin/gear.svg"); - filter: url(chrome://browser/skin/filters.svg#fill); + filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } diff --git a/LCARStrek/global/aboutNetworking.css b/LCARStrek/global/aboutNetworking.css index ad893d79..5f73e3a9 100644 --- a/LCARStrek/global/aboutNetworking.css +++ b/LCARStrek/global/aboutNetworking.css @@ -15,7 +15,7 @@ body { } #sectionTitle { - float: left; + float: inline-start; } #refreshDiv { @@ -87,6 +87,11 @@ body { background-size: 1.6em; } +.title:dir(rtl)::before { + left: auto; + right: -2.3em; +} + .warningBackground button { margin-top: 1em; margin-left: 0; diff --git a/LCARStrek/global/aboutReaderContent.css b/LCARStrek/global/aboutReaderContent.css index 633391d3..f69c17bf 100644 --- a/LCARStrek/global/aboutReaderContent.css +++ b/LCARStrek/global/aboutReaderContent.css @@ -55,6 +55,7 @@ figure, .wp-caption { margin: 0 0 10px 0 !important; + padding: 0 !important; } } diff --git a/LCARStrek/global/aboutReaderControls.css b/LCARStrek/global/aboutReaderControls.css index f70b0a06..c3baba62 100644 --- a/LCARStrek/global/aboutReaderControls.css +++ b/LCARStrek/global/aboutReaderControls.css @@ -63,11 +63,16 @@ .header > .credits { font-size: 0.9em; line-height: 1.48em; - margin: 0 0 30px 0; + margin: 0 0 10px 0; padding: 0; font-style: italic; } +.header > .meta-data { + font-size: 0.65em; + margin: 0 0 15px 0; +} + /*======= Controls toolbar =======*/ .toolbar { @@ -134,7 +139,7 @@ border-radius: 4px; border: 1px solid #b5b5b5; border-bottom-width: 0; - box-shadow: 0 1px 12px #666; + box-shadow: 0 1px 3px #c1c1c1; } .keep-open .dropdown-popup { @@ -153,7 +158,7 @@ position: absolute; top: 30px; /* offset arrow from top of popup */ left: -16px; - width: 24px; + width: 16px; height: 24px; background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); display: block; diff --git a/LCARStrek/global/datetimeinputpickers.css b/LCARStrek/global/datetimeinputpickers.css index 1cc6b0bf..12d5225c 100644 --- a/LCARStrek/global/datetimeinputpickers.css +++ b/LCARStrek/global/datetimeinputpickers.css @@ -92,6 +92,7 @@ button { align-items: center; top: 0; left: 3rem; + right: 3rem; width: 17.1rem; height: var(--date-picker-item-height); z-index: 10; @@ -101,7 +102,10 @@ button.month-year { font-size: 1.3rem; border: var(--border); border-radius: 0.3rem; - padding: 0.2rem 2.6rem 0.2rem 1.2rem; + padding-top: 0.2rem; + padding-bottom: 0.2rem; + padding-inline-start: 1.2rem; + padding-inline-end: 2.6rem; } button.month-year:hover { diff --git a/LCARStrek/global/findBar.css b/LCARStrek/global/findBar.css index bc7e111b..c0e60d1f 100644 --- a/LCARStrek/global/findBar.css +++ b/LCARStrek/global/findBar.css @@ -66,11 +66,19 @@ findbar[position="top"][hidden] { } .findbar-find-previous { - list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-previous); + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous); } .findbar-find-next { - list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next); + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next); +} + +.findbar-find-previous[disabled] { + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled); +} + +.findbar-find-next[disabled] { + list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled); } .findbar-find-previous, diff --git a/LCARStrek/global/icons/find-arrows.svg b/LCARStrek/global/icons/find-arrows.svg index ad68220d..2465a02c 100644 --- a/LCARStrek/global/icons/find-arrows.svg +++ b/LCARStrek/global/icons/find-arrows.svg @@ -2,15 +2,26 @@ - + - - + + + + + + + + diff --git a/LCARStrek/global/icons/menubutton-dropmarker.svg b/LCARStrek/global/icons/menubutton-dropmarker.svg new file mode 100644 index 00000000..76af113a --- /dev/null +++ b/LCARStrek/global/icons/menubutton-dropmarker.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/LCARStrek/global/icons/spinner-arrows.svg b/LCARStrek/global/icons/spinner-arrows.svg new file mode 100644 index 00000000..a8ba72d6 --- /dev/null +++ b/LCARStrek/global/icons/spinner-arrows.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/LCARStrek/global/media/TopLevelVideoDocument.css b/LCARStrek/global/media/TopLevelVideoDocument.css index 979e4da9..c83a402e 100644 --- a/LCARStrek/global/media/TopLevelVideoDocument.css +++ b/LCARStrek/global/media/TopLevelVideoDocument.css @@ -7,5 +7,5 @@ body { } video { - box-shadow: 0 0 15px #000000; + box-shadow: 0 0 5px rgba(0,0,0,0.6); } diff --git a/LCARStrek/global/media/closeCaptionButton-hover.png b/LCARStrek/global/media/closeCaptionButton-hover.png deleted file mode 100644 index e90e5f2e..00000000 Binary files a/LCARStrek/global/media/closeCaptionButton-hover.png and /dev/null differ diff --git a/LCARStrek/global/media/closeCaptionButton-hover@2x.png b/LCARStrek/global/media/closeCaptionButton-hover@2x.png deleted file mode 100644 index f0b9a251..00000000 Binary files a/LCARStrek/global/media/closeCaptionButton-hover@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/closeCaptionButton.png b/LCARStrek/global/media/closeCaptionButton.png deleted file mode 100644 index 0f9d0900..00000000 Binary files a/LCARStrek/global/media/closeCaptionButton.png and /dev/null differ diff --git a/LCARStrek/global/media/closeCaptionButton@2x.png b/LCARStrek/global/media/closeCaptionButton@2x.png deleted file mode 100644 index e010cd0e..00000000 Binary files a/LCARStrek/global/media/closeCaptionButton@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/fullscreenButton-hover.png b/LCARStrek/global/media/fullscreenButton-hover.png deleted file mode 100644 index c0d688df..00000000 Binary files a/LCARStrek/global/media/fullscreenButton-hover.png and /dev/null differ diff --git a/LCARStrek/global/media/fullscreenButton-hover@2x.png b/LCARStrek/global/media/fullscreenButton-hover@2x.png deleted file mode 100644 index 2426efd1..00000000 Binary files a/LCARStrek/global/media/fullscreenButton-hover@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/fullscreenButton.png b/LCARStrek/global/media/fullscreenButton.png deleted file mode 100644 index f6dd9d1c..00000000 Binary files a/LCARStrek/global/media/fullscreenButton.png and /dev/null differ diff --git a/LCARStrek/global/media/fullscreenButton@2x.png b/LCARStrek/global/media/fullscreenButton@2x.png deleted file mode 100644 index 5a3650ca..00000000 Binary files a/LCARStrek/global/media/fullscreenButton@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/muteButton-hover.png b/LCARStrek/global/media/muteButton-hover.png deleted file mode 100644 index ce416183..00000000 Binary files a/LCARStrek/global/media/muteButton-hover.png and /dev/null differ diff --git a/LCARStrek/global/media/muteButton-hover@2x.png b/LCARStrek/global/media/muteButton-hover@2x.png deleted file mode 100644 index 646addb5..00000000 Binary files a/LCARStrek/global/media/muteButton-hover@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/muteButton.png b/LCARStrek/global/media/muteButton.png deleted file mode 100644 index ffbdceae..00000000 Binary files a/LCARStrek/global/media/muteButton.png and /dev/null differ diff --git a/LCARStrek/global/media/muteButton@2x.png b/LCARStrek/global/media/muteButton@2x.png deleted file mode 100644 index 7def2f28..00000000 Binary files a/LCARStrek/global/media/muteButton@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/noAudio.png b/LCARStrek/global/media/noAudio.png deleted file mode 100644 index acce4bea..00000000 Binary files a/LCARStrek/global/media/noAudio.png and /dev/null differ diff --git a/LCARStrek/global/media/noAudio@2x.png b/LCARStrek/global/media/noAudio@2x.png deleted file mode 100644 index 112e311c..00000000 Binary files a/LCARStrek/global/media/noAudio@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/pauseButton-hover.png b/LCARStrek/global/media/pauseButton-hover.png deleted file mode 100644 index bc894e22..00000000 Binary files a/LCARStrek/global/media/pauseButton-hover.png and /dev/null differ diff --git a/LCARStrek/global/media/pauseButton-hover@2x.png b/LCARStrek/global/media/pauseButton-hover@2x.png deleted file mode 100644 index 0f6100d5..00000000 Binary files a/LCARStrek/global/media/pauseButton-hover@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/pauseButton.png b/LCARStrek/global/media/pauseButton.png deleted file mode 100644 index 8f2d6fee..00000000 Binary files a/LCARStrek/global/media/pauseButton.png and /dev/null differ diff --git a/LCARStrek/global/media/pauseButton@2x.png b/LCARStrek/global/media/pauseButton@2x.png deleted file mode 100644 index b9b64a4c..00000000 Binary files a/LCARStrek/global/media/pauseButton@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/playButton-hover.png b/LCARStrek/global/media/playButton-hover.png deleted file mode 100644 index f31d4efd..00000000 Binary files a/LCARStrek/global/media/playButton-hover.png and /dev/null differ diff --git a/LCARStrek/global/media/playButton-hover@2x.png b/LCARStrek/global/media/playButton-hover@2x.png deleted file mode 100644 index 49a8b8a2..00000000 Binary files a/LCARStrek/global/media/playButton-hover@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/playButton.png b/LCARStrek/global/media/playButton.png deleted file mode 100644 index 2197f165..00000000 Binary files a/LCARStrek/global/media/playButton.png and /dev/null differ diff --git a/LCARStrek/global/media/playButton@2x.png b/LCARStrek/global/media/playButton@2x.png deleted file mode 100644 index eba62bf6..00000000 Binary files a/LCARStrek/global/media/playButton@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/scrubberThumb.png b/LCARStrek/global/media/scrubberThumb.png deleted file mode 100644 index 698823e5..00000000 Binary files a/LCARStrek/global/media/scrubberThumb.png and /dev/null differ diff --git a/LCARStrek/global/media/scrubberThumb@2x.png b/LCARStrek/global/media/scrubberThumb@2x.png deleted file mode 100644 index f34851ac..00000000 Binary files a/LCARStrek/global/media/scrubberThumb@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/scrubberThumbWide.png b/LCARStrek/global/media/scrubberThumbWide.png deleted file mode 100644 index a76ec78f..00000000 Binary files a/LCARStrek/global/media/scrubberThumbWide.png and /dev/null differ diff --git a/LCARStrek/global/media/scrubberThumbWide@2x.png b/LCARStrek/global/media/scrubberThumbWide@2x.png deleted file mode 100644 index 6f09dc08..00000000 Binary files a/LCARStrek/global/media/scrubberThumbWide@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/unmuteButton-hover.png b/LCARStrek/global/media/unmuteButton-hover.png deleted file mode 100644 index 5038e27f..00000000 Binary files a/LCARStrek/global/media/unmuteButton-hover.png and /dev/null differ diff --git a/LCARStrek/global/media/unmuteButton-hover@2x.png b/LCARStrek/global/media/unmuteButton-hover@2x.png deleted file mode 100644 index 7761ef51..00000000 Binary files a/LCARStrek/global/media/unmuteButton-hover@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/unmuteButton.png b/LCARStrek/global/media/unmuteButton.png deleted file mode 100644 index d5bb7859..00000000 Binary files a/LCARStrek/global/media/unmuteButton.png and /dev/null differ diff --git a/LCARStrek/global/media/unmuteButton@2x.png b/LCARStrek/global/media/unmuteButton@2x.png deleted file mode 100644 index f05cf61f..00000000 Binary files a/LCARStrek/global/media/unmuteButton@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/videocontrols.css b/LCARStrek/global/media/videocontrols.css index 8841713c..5177a6f3 100644 --- a/LCARStrek/global/media/videocontrols.css +++ b/LCARStrek/global/media/videocontrols.css @@ -2,515 +2,33 @@ * 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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");*/ @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace html url("http://www.w3.org/1999/xhtml"); - -hbox.controlBar { - height: 28px; - background-color: rgba(156,156,255,0.75); -} - -xul|button.playButton, -xul|button.muteButton, -xul|button.closedCaptionButton, -xul|button.fullscreenButton { - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - margin: 0; - padding: 0; - min-height: 28px; - min-width: 28px; - border: none; -} - -xul|button.playButton:hover, -xul|button.muteButton:not([noAudio]):hover, -xul|button.closedCaptionButton:hover, -xul|button.fullscreenButton:hover { - background-color: rgba(255,207,0,0.75); -} - -xul|button.playButton:hover:active, -xul|button.muteButton:not([noAudio]):hover:active, -xul|button.closedCaptionButton:hover:active, -xul|button.fullscreenButton:hover:active { - background-color: rgba(255,159,0,0.75); -} - -xul|button.playButton { - background-image: url("chrome://global/skin/media/pauseButton.png"); - margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ - position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ -} - -xul|button.playButton:hover { - background-image: url("chrome://global/skin/media/pauseButton-hover.png"); -} - -xul|button.playButton[paused] { - background-image: url("chrome://global/skin/media/playButton.png"); -} - -xul|button.playButton[paused]:hover { - background-image: url("chrome://global/skin/media/playButton-hover.png"); -} - -xul|button.muteButton { - background-image: url("chrome://global/skin/media/muteButton.png"); - min-width: 33px; -} - -xul|button.muteButton:hover { - background-image: url("chrome://global/skin/media/muteButton-hover.png"); -} - -xul|button.muteButton[muted] { - background-image: url("chrome://global/skin/media/unmuteButton.png"); -} - -xul|button.muteButton[muted]:hover { - background-image: url("chrome://global/skin/media/unmuteButton-hover.png"); -} - -xul|button.muteButton[noAudio] { - background-image: url("chrome://global/skin/media/noAudio.png"); -} - -xul|button.muteButton[noAudio] + .volumeStack { - display: none; -} - -xul|button.closedCaptionButton { - background-image: url("chrome://global/skin/media/closeCaptionButton.png"); - background-position: 4px; -} - -xul|button.closedCaptionButton:hover { - background-image: url("chrome://global/skin/media/closeCaptionButton-hover.png"); -} - -xul|button.closedCaptionButton[enabled] { - opacity: 1; -} - -xul|button.closedCaptionButton[hidden] { - display: none; -} - -xul|button.fullscreenButton { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); -} - -xul|button.fullscreenButton:hover { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 16, 16, 0); -} - -xul|button.fullscreenButton[fullscreened] { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); -} - -xul|button.fullscreenButton[fullscreened]:hover { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 32, 16, 16); -} - -xul|*.volumeControl { - width: 32px; - opacity: 0; -} - -xul|*.volumeBackground, -xul|*.volumeForeground { - background-repeat: no-repeat; - background-position: center; - width: 32px; -} - -xul|*.volumeBackground { - background-image: url("chrome://global/skin/media/volume-empty.png"); -} - -xul|*.volumeForeground { - background-image: url("chrome://global/skin/media/volume-full.png"); - background-clip: content-box; -} - -xul|*.textTrackList { - display: -moz-box; - -moz-appearance: none; - -moz-box-pack: end; - -moz-box-align: end; - padding: 0; -} - -xul|*.textTrackList[hidden] { - display: none; -} - -xul|*.textTrackList > html|*.textTrackItem { - -moz-appearance: none; - -moz-box-align: start; - text-align: start; - overflow: hidden; - margin: 0; - padding: 2px 10px; - -moz-margin-end: 10px; - border: none; - color: rgba(255,255,255,.5); - background-color: rgba(35,31,32,.74); - white-space: nowrap; -} - -xul|*.textTrackList > html|*.textTrackItem[on] { - color: white; - background-color: black; -} - -xul|*.textTrackList > html|*.textTrackItem:hover { - background-color: rgba(0,0,0,.55); -} - -xul|*.controlBar[fullscreen-unavailable] { - /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ - padding-inline-end: 8px; -} - -xul|*.volumeControl .scale-thumb { - min-width: 0; - opacity: 0; -} - -xul|*.durationBox { - -moz-box-pack: center; -} - -xul|*.durationLabel { - margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ - padding-left: 8px; /* don't bump into the scrubber bar */ - padding-top: 0px; /* center vertically with scrubber bar */ - color: rgba(0,0,0,0.75); - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; -} - -xul|*.positionLabel { - display: none; -} - -xul|*.backgroundBar { - /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ - /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ - margin: 10px 22px; - background-color: rgba(0,0,0,0.75); - border-radius: 2.5px; -} - -xul|*.bufferBar, -xul|*.progressBar { - /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ - /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ - margin: 10px 22px; - border: none; - background-color: transparent; - min-width: 0; - min-height: 0; -} - -/* .progress-bar is an element inside the implementation. */ -xul|*.bufferBar .progress-bar { - /* - * Note that this is drawn on top of the .backgroundBar. So although this - * has the same background-color specified, the semitransparent - * compositing gives it a different visual appearance. - */ - background-color: rgba(255,159,0,0.75); - border-radius: 2.5px; - -moz-appearance: none; -} - -xul|*.progressBar .progress-bar { - background-color: #008484; - border-radius: 2.5px; - -moz-appearance: none; -} - -/* .scale-slider is an element inside the implementation. */ -xul|*.scrubber .scale-slider, -xul|*.volumeControl .scale-slider { - /* Hide the default horizontal bar. */ - background: none; - margin: 0; -} - -xul|*.scrubber .scale-slider { - /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ - margin-top: -10px; - margin-bottom: 10px; -} - -/* .scale-thumb is an element inside the implementation. */ -xul|*.scrubber .scale-thumb, -xul|*.volumeControl .scale-thumb { - /* Override the default thumb appearance with a custom image. */ - background: transparent; - border: none !important; -} - -xul|*.timeThumb { - background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center; - min-width: 45px; - min-height: 28px; - -moz-box-pack: center; -} - -xul|*.timeThumb[showhours="true"] { - background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); -} - -/* -.timeThumb:hover, .timeThumb:active { - background-image: url("chrome://global/skin/media/scrubberThumb-hover.png"); -} -*/ - -xul|*.timeLabel { - color: rgba(0,0,0,0.75); - font-size: 10px; - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - text-shadow: rgba(255,259,0, 0.3) 0 1px; - padding-top: 5px; -} - -xul|*.statusOverlay { - -moz-box-align: center; - -moz-box-pack: center; - background-color: rgba(0,0,0,0.55); -} - -xul|*.statusIcon { - margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ - width: 36px; - height: 36px; -} - -xul|*.statusIcon[type="throbber"] { - background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; -} -/* -.statusIcon[type="throbber"][stalled] { - background: url("chrome://global/skin/media/stalled.png") no-repeat center; -} -*/ -xul|*.statusIcon[type="error"] { - background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; -} - -/* Overlay Play button */ -.clickToPlay { - width: 64px; - height: 64px; - -moz-box-pack: center; - -moz-box-align: center; - opacity: 0.7; - background-image: url("chrome://global/skin/media/videoClickToPlayButton.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: 64px 64px; - background-color: hsla(0,0%,10%,.5); -} -.clickToPlay:hover { - opacity: 1; -} - -/* Statistics formatting */ -html|*.statsDiv { - position: relative; -} -html|td { - height: 1em; - max-height: 1em; - padding: 0 2px; -} -html|table { - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; - color: white; - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; - min-width: 100%; - background: rgba(68,68,111,.7); - table-layout: fixed; - border-collapse: collapse; - position: absolute; -} - -/* CSS Transitions */ -.clickToPlay { - transition-property: opacity, background-size; - transition-duration: 400ms, 400ms; -} -.clickToPlay[fadeout] { - background-size: auto, 192px 192px; - 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; -} -.volumeStack[fadeout] { - opacity: 0; - margin-top: 0; -} -.statusOverlay:not([immediate]) { - transition-property: opacity; - transition-duration: 300ms; - transition-delay: 750ms; -} -.statusOverlay[fadeout] { - opacity: 0; -} - -/* Error description formatting */ -.errorLabel { - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; - color: #E7ADE7; - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; - padding: 0 10px; - text-align: center; -} - -@media (min-resolution: 2dppx) { - .playButton { - background-image: url(chrome://global/skin/media/pauseButton@2x.png); - background-size: 28px 28px; - } - .playButton:hover { - background-image: url(chrome://global/skin/media/pauseButton-hover@2x.png); - background-size: 28px 28px; - } - .playButton[paused] { - background-image: url(chrome://global/skin/media/playButton@2x.png); - background-size: 28px 28px; - } - .playButton[paused]:hover { - background-image: url(chrome://global/skin/media/playButton-hover@2x.png); - background-size: 28px 28px; - } - .volumeBackground { - background-image: url(chrome://global/skin/media/volume-empty@2x.png); - background-size: 32px 16px; - } - .volumeForeground:hover { - background-image: url(chrome://global/skin/media/volume-full-hover@2x.png); - background-size: 32px 16px; - } - .muteButton { - background-image: url(chrome://global/skin/media/muteButton@2x.png); - background-size: 33px 28px; - } - .muteButton:hover { - background-image: url(chrome://global/skin/media/muteButton-hover@2x.png); - background-size: 33px 28px; - } - .muteButton[muted] { - background-image: url(chrome://global/skin/media/unmuteButton@2x.png); - background-size: 33px 28px; - } - .muteButton[muted]:hover { - background-image: url(chrome://global/skin/media/unmuteButton-hover@2x.png); - background-size: 33px 28px; - } - .muteButton[noAudio] { - background-image: url(chrome://global/skin/media/noAudio@2x.png); - background-size: 33px 28px; - } - .closedCaptionButton { - background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png); - background-position: 4px; - background-size: 28px 28px; - } - .closedCaptionButton:hover { - background-image: url(chrome://global/skin/media/closeCaptionButton-hover@2x.png); - background-position: 4px; - background-size: 28px 28px; - } - .fullscreenButton { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0); - background-size: 16px 16px; - } - .fullscreenButton:hover { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 32, 32, 0); - background-size: 16px 16px; - } - .fullscreenButton[fullscreened] { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32); - background-size: 16px 16px; - } - .fullscreenButton[fullscreened]:hover { - background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 64, 32, 32); - background-size: 16px 16px; - } - .timeThumb { - background-image: url(chrome://global/skin/media/scrubberThumb@2x.png); - background-size: 33px 28px; - } - .timeThumb[showhours="true"] { - background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png); - background-size: 45px 28px; - } -} - - -/***** New HTML-based controls *****/ - -/*@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace url("http://www.w3.org/1999/xhtml");*/ +@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; --->CRASHES XUL-based versions! */ - -moz-box-pack: end; + display: inline-block; } -div.controlsContainer [hidden="true"], -div.controlBar[hidden] { +.controlsContainer [hidden="true"], +.controlBar[hidden] { display: none; } -div.controlBar[size="hidden"] { +.controlBar[size="hidden"] { display: none; } -div.controlsContainer, -div.progressContainer { +.controlsContainer, +.progressContainer { position: relative; height: 100%; } -div.stackItem { +.stackItem { position: absolute; left: 0; bottom: 0; @@ -518,7 +36,7 @@ div.stackItem { height: 100%; } -div.statusOverlay { +.statusOverlay { display: flex; flex-direction: column; justify-content: center; @@ -526,14 +44,14 @@ div.statusOverlay { background-color: rgb(160,144,144); } -div.controlsOverlay { +.controlsOverlay { display: flex; flex-direction: column; justify-content: center; position: relative; } -div.controlsSpacerStack { +.controlsSpacerStack { display: flex; flex-direction: column; flex-grow: 1; @@ -541,30 +59,29 @@ div.controlsSpacerStack { align-items: center; } -div.controlsSpacer { +.controlsSpacer { background-color: rgba(0,0,0,.4); } -div.controlBar { +.controlBar { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; height: 40px; - padding: 0 3px; + padding: 0 9px; background-color: rgba(156,156,255,0.75); } - -html|button.playButton, -html|button.muteButton, -html|button.closedCaptionButton, -html|button.fullscreenButton { +.playButton, +.muteButton, +.closedCaptionButton, +.fullscreenButton { height: 100%; min-height: 30px; min-width: 30px; - padding: 0; + padding: 6px; border: 0; margin: 0; background-color: transparent; @@ -574,110 +91,110 @@ html|button.fullscreenButton { background-clip: content-box; } -html|button.playButton:hover, -html|button.muteButton:not([noAudio]):hover, -html|button.closedCaptionButton:hover, -html|button.fullscreenButton:hover { +.playButton:hover, +.muteButton:not([noAudio]):hover, +.closedCaptionButton:hover, +.fullscreenButton:hover { background-color: rgba(255,207,0,0.75); } -html|button.playButton:hover:active, -html|button.muteButton:not([noAudio]):hover:active, -html|button.closedCaptionButton:hover:active, -html|button.fullscreenButton:hover:active { +.playButton:hover:active, +.muteButton:not([noAudio]):hover:active, +.closedCaptionButton:hover:active, +.fullscreenButton:hover:active { background-color: rgba(255,159,0,0.75); } -html|button.playButton { +.playButton { background-image: url(chrome://global/skin/media/pauseButton.svg#pause); } .playButton:hover { -html|butto background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover); + background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover); } -html|button.playButton:hover:active { +.playButton:hover:active { background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active); } -html|button.playButton[paused] { +.playButton[paused] { background-image: url(chrome://global/skin/media/playButton.svg#play); } -html|button.playButton[paused]:hover { +.playButton[paused]:hover { background-image: url(chrome://global/skin/media/playButton.svg#play-hover); } -html|button.playButton[paused]:hover:active { +.playButton[paused]:hover:active { background-image: url(chrome://global/skin/media/playButton.svg#play-active); } -html|button.muteButton { +.muteButton { background-image: url(chrome://global/skin/media/muteButton.svg#unmute); } -html|button.muteButton:hover { +.muteButton:hover { background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover); } -html|button.muteButton:hover:active { +.muteButton:hover:active { background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active); } -html|button.muteButton[muted] { +.muteButton[muted] { background-image: url(chrome://global/skin/media/muteButton.svg#mute); } -html|button.muteButton[muted]:hover { +.muteButton[muted]:hover { background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover); } -html|button.muteButton[muted]:hover:active { +.muteButton[muted]:hover:active { background-image: url(chrome://global/skin/media/muteButton.svg#mute-active); } -html|button.muteButton[noAudio], -html|button.muteButton[noAudio]:hover, -html|button.muteButton[noAudio]:hover:active { +.muteButton[noAudio], +.muteButton[noAudio]:hover, +.muteButton[noAudio]:hover:active { background-image: url(chrome://global/skin/media/muteButton.svg#noaudio); } -html|button.muteButton[noAudio] + .volumeStack { +.muteButton[noAudio] + .volumeStack { display: none; } -html|button.closedCaptionButton { +.closedCaptionButton { background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off); } -html|button.closedCaptionButton:hover { +.closedCaptionButton:hover { background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover); } -html|button.closedCaptionButton:hover:active { +.closedCaptionButton:hover:active { background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active); } -html|button.closedCaptionButton[enabled] { +.closedCaptionButton[enabled] { background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc); } -html|button.closedCaptionButton[enabled]:hover { +.closedCaptionButton[enabled]:hover { background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover); } -html|button.closedCaptionButton[enabled]:hover:active { +.closedCaptionButton[enabled]:hover:active { background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active); } -html|button.fullscreenButton { +.fullscreenButton { background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen); } -html|button.fullscreenButton:hover { +.fullscreenButton:hover { background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover); } -html|button.fullscreenButton:hover:active { +.fullscreenButton:hover:active { background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active); } -html|button.fullscreenButton[fullscreened] { +.fullscreenButton[fullscreened] { background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen); } -html|button.fullscreenButton[fullscreened]:hover { +.fullscreenButton[fullscreened]:hover { background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover); } -html|button.fullscreenButton[fullscreened]:hover:active { +.fullscreenButton[fullscreened]:hover:active { background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active); } -div.controlBarSpacer { +.controlBarSpacer { flex-grow: 1; } -input.volumeControl::-moz-range-thumb, -input.scrubber::-moz-range-thumb { +.volumeControl::-moz-range-thumb, +.scrubber::-moz-range-thumb { height: 13px; width: 13px; border: none; @@ -685,25 +202,25 @@ input.scrubber::-moz-range-thumb { background-color: #000000; } -input.volumeControl::-moz-focus-outer, -input.scrubber::-moz-focus-outer { +.volumeControl::-moz-focus-outer, +.scrubber::-moz-focus-outer { border: 0; } -div.progressBackgroundBar { +.progressBackgroundBar { display: flex; flex-direction: column; justify-content: center; align-items: center; } -div.progressStack { +.progressStack { position: relative; width: 100%; height: 5px; } -div.scrubberStack { +.scrubberStack { min-width: 48px; flex-basis: 48px; flex-grow: 2; @@ -711,7 +228,7 @@ div.scrubberStack { margin: 0 9px; } -div.volumeStack { +.volumeStack { max-width: 60px; min-width: 48px; flex-grow: 1; @@ -720,11 +237,11 @@ div.volumeStack { margin-left: 4px; } -progress.bufferBar, -progress.progressBar, -input.scrubber, +.bufferBar, +.progressBar, +.scrubber, .volumeBackground, -input.volumeControl { +.volumeControl { bottom: 0; left: 0; position: absolute; @@ -738,13 +255,13 @@ input.volumeControl { background-color: transparent; } -progress.bufferBar, +.bufferBar, .volumeBackground { background-color: rgba(160,144,144,0.7); } -progress.bufferBar::-moz-progress-bar, -progress.progressBar::-moz-progress-bar, +.bufferBar::-moz-progress-bar, +.progressBar::-moz-progress-bar, .volumeBackground::-moz-meter-bar { height: 100%; padding: 0; @@ -754,42 +271,42 @@ progress.progressBar::-moz-progress-bar, background: none; } -input.scrubber:hover::-moz-range-thumb, -input.volumeControl:hover::-moz-range-thumb { +.scrubber:hover::-moz-range-thumb, +.volumeControl:hover::-moz-range-thumb { background-color: #FFCF00; } -input.scrubber:active::-moz-range-thumb, -input.volumeControl:active::-moz-range-thumb { +.scrubber:active::-moz-range-thumb, +.volumeControl:active::-moz-range-thumb { background-color: #FF9F00; } -input.scrubber::-moz-range-track, -input.scrubber::-moz-range-progress { +.scrubber::-moz-range-track, +.scrubber::-moz-range-progress { background-color: transparent; } -input.volumeControl::-moz-range-progress, -input.volumeControl::-moz-range-track { +.volumeControl::-moz-range-progress, +.volumeControl::-moz-range-track { height: 5px; border-radius: 2.5px; } -input.volumeControl::-moz-range-progress { +.volumeControl::-moz-range-progress { background-color: #008484; } -input.volumeControl::-moz-range-track { +.volumeControl::-moz-range-track { background-color: rgba(0,0,0,0.7); } -progress.bufferBar::-moz-progress-bar { +.bufferBar::-moz-progress-bar { background-color: rgba(160,144,144,0.3); border-radius: 2.5px; } -progress.progressBar::-moz-progress-bar { +.progressBar::-moz-progress-bar { background-color: #008484; } @@ -818,7 +335,7 @@ progress.progressBar::-moz-progress-bar { overflow: hidden; text-align: left; text-overflow: ellipsis; - color: #FFCF00; + color: #FF9F00; background-color: transparent; } @@ -830,12 +347,12 @@ progress.progressBar::-moz-progress-bar { color: #008484; } -span.positionLabel, -span.durationLabel { +.positionLabel, +.durationLabel { display: none; } -span.positionDurationBox { +.positionDurationBox { min-width: 9ch; text-align: center; padding-inline-start: 1px; @@ -843,15 +360,15 @@ span.positionDurationBox { white-space: nowrap; font: message-box; font-size: 13px; - font-size-adjust: 0.6; + font-size-adjust: 0.55; color: #000000; } -span.positionDurationBox[positionOnly] { +.positionDurationBox[positionOnly] { min-width: 4ch; } -span.duration { +.duration { display: inline-block; white-space: pre; color: #8050B0; @@ -864,17 +381,17 @@ span.duration { } .statusIcon[type="throbber"] { - background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; + 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; + 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/icons/alert-error.gif") no-repeat center; + background: url(chrome://global/skin/media/error.png) no-repeat center; background-size: contain; } @@ -949,7 +466,7 @@ span.duration { .errorLabel { padding: 0 10px; text-align: center; - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font: message-box; font-size: 14px; color: #E7ADE7; } diff --git a/LCARStrek/global/media/volume-empty.png b/LCARStrek/global/media/volume-empty.png deleted file mode 100644 index 694805a7..00000000 Binary files a/LCARStrek/global/media/volume-empty.png and /dev/null differ diff --git a/LCARStrek/global/media/volume-empty@2x.png b/LCARStrek/global/media/volume-empty@2x.png deleted file mode 100644 index 410a056f..00000000 Binary files a/LCARStrek/global/media/volume-empty@2x.png and /dev/null differ diff --git a/LCARStrek/global/media/volume-full.png b/LCARStrek/global/media/volume-full.png deleted file mode 100644 index 4dc88dde..00000000 Binary files a/LCARStrek/global/media/volume-full.png and /dev/null differ diff --git a/LCARStrek/global/media/volume-full@2x.png b/LCARStrek/global/media/volume-full@2x.png deleted file mode 100644 index 473530e9..00000000 Binary files a/LCARStrek/global/media/volume-full@2x.png and /dev/null differ diff --git a/LCARStrek/global/menu.css b/LCARStrek/global/menu.css index aa39f261..935b284c 100644 --- a/LCARStrek/global/menu.css +++ b/LCARStrek/global/menu.css @@ -12,8 +12,7 @@ menu, menuitem, -menucaption, -.splitmenu-menuitem { +menucaption { -moz-box-align: center; max-width: 42em; background-color: #000000; @@ -27,18 +26,15 @@ menuitem[default="true"] { } menu[_moz-menuactive="true"], -menuitem[_moz-menuactive="true"], -.splitmenu-menuitem[_moz-menuactive="true"] { +menuitem[_moz-menuactive="true"] { background-color: #FFCF00; color: #000000; } menu[disabled="true"], menuitem[disabled="true"], -.splitmenu-menuitem[disabled="true"], menu[_moz-menuactive="true"][disabled="true"], -menuitem[_moz-menuactive="true"][disabled="true"], -.splitmenu-menuitem[_moz-menuactive="true"][disabled="true"] { +menuitem[_moz-menuactive="true"][disabled="true"] { color: #8050B0; } diff --git a/LCARStrek/global/notification.css b/LCARStrek/global/notification.css index 938d3cdd..010ff3c4 100644 --- a/LCARStrek/global/notification.css +++ b/LCARStrek/global/notification.css @@ -61,10 +61,26 @@ notification[type="critical"] { margin-inline-start: 2px; } -/* Popup notification */ + +/* === BEGIN popupnotification.inc.css === */ + +.popup-notification-body-container { + padding: var(--arrowpanel-padding); +} + +.popup-notification-icon { + width: 32px; + height: 32px; + margin-inline-end: var(--arrowpanel-padding); +} .popup-notification-body { - max-width: 25em; + width: 25em; +} + +.popup-notification-closebutton { + margin-inline-end: -8px; + margin-top: -8px; } .popup-notification-origin:not([value]), @@ -81,18 +97,119 @@ notification[type="critical"] { } .popup-notification-button-container { - margin-top: 17px; + background-color: var(--arrowpanel-dimmed); + display: flex; } -.popup-notification-closebutton { - margin-inline-end: -5px; - margin-top: -5px; +.popup-notification-button-container > toolbarseparator { + -moz-appearance: none; + border: 0; + border-left: 1px solid var(--panel-separator-color); + margin: 7px 0 7px; + min-width: 0; } -.popup-notification-closeitem { - list-style-image: url("chrome://global/skin/icons/close-button.gif"); +.popup-notification-button-container:hover > toolbarseparator { + margin: 0; +} + +.popup-notification-button { + flex: 1; + -moz-appearance: none; + background-color: transparent; + color: inherit; + margin: 0; + padding: 0; + min-width: 0; + min-height: 41px; + border: none; +/* border-top: 1px solid var(--panel-separator-color);*/ +} + +.popup-notification-button:hover:not([disabled]) { +/* background-color: var(--arrowpanel-dimmed);*/ +} + +.popup-notification-button:hover:active:not([disabled]) { +/* background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;*/ +} + +.popup-notification-button[disabled] { +/* background-color: var(--arrowpanel-dimmed-further); + color: graytext;*/ +} + +.popup-notification-button[default] { + flex: 0 50%; +} + +.popup-notification-button[default]:not([disabled]) { +/* background-color: #0996f8; + color: white;*/ +} + +.popup-notification-button[default]:hover:not([disabled]) { +/* background-color: #0675d3;*/ +} + +.popup-notification-button[default]:hover:active:not([disabled]) { +/* background-color: #0568ba;*/ +} + +.popup-notification-button[anonid="secondarybutton"][hidden="true"] ~ .popup-notification-button[default] { + flex: 1; +} + +.popup-notification-button > .button-box { + padding: 0; + margin: 0; + /* prevent double border on windows when focused */ + border: none; +} + +.popup-notification-dropmarker { + flex: none; + padding: 0 15px; +} + +.popup-notification-dropmarker > .button-box > hbox { + display: none; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + /* This is to override the linux !important */ + -moz-appearance: none !important; + display: -moz-box; + padding: 0; + margin: 0; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon { + width: 16px; + height: 16px; + list-style-image: url(chrome://global/skin/icons/menubutton-dropmarker.svg); + filter: url(chrome://global/skin/filters.svg#fill); + fill: currentColor; +} + +/* === END popupnotification.inc.css === */ + +.popup-notification-button:-moz-focusring { + outline: 1px -moz-dialogtext dotted; + outline-offset: -1px; +} + +/* Override default icon size which is too small for this dropdown */ +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + width: 16px; + height: 16px; } -.popup-notification-menubutton > .button-menubutton-button[disabled] { - opacity: 0.5; +@media (-moz-windows-default-theme) { + /* Swap the default and secondary action, because Windows + * platform conventions put the default action on the left. */ + .popup-notification-button[default] { + order: -1; + } } diff --git a/LCARStrek/global/reader/RM-Type-Controls-Arrow.svg b/LCARStrek/global/reader/RM-Type-Controls-Arrow.svg index 837392ff..9c663119 100644 --- a/LCARStrek/global/reader/RM-Type-Controls-Arrow.svg +++ b/LCARStrek/global/reader/RM-Type-Controls-Arrow.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/LCARStrek/global/timepicker.css b/LCARStrek/global/timepicker.css deleted file mode 100644 index 37fd3f85..00000000 --- a/LCARStrek/global/timepicker.css +++ /dev/null @@ -1,153 +0,0 @@ -/* 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/. */ - -:root { - --font-size-default: 1.1rem; - --spinner-width: 3rem; - --spinner-margin-top-bottom: 0.4rem; - --spinner-item-height: 2.4rem; - --spinner-item-margin-bottom: 0.1rem; - --spinner-button-height: 1.2rem; - --colon-width: 2rem; - --day-period-spacing-width: 1rem; - - --border: 0.1rem solid #9C9CFF; - --border-radius: 0.3rem; - - --font-color: #FF9F00; - --fill-color: #000000; - - --selected-font-color: #000000; - --selected-fill-color: #008484; - - --button-font-color: #FF9F00; - --button-font-color-hover: #FFCF00; - --button-font-color-active: #FF9F00; - - --disabled-opacity: 0.2; -} - -html { - font-size: 10px; -} - -body { - margin: 0; - color: var(--font-color); - font-size: var(--font-size-default); -} - -#time-picker { - display: flex; - flex-direction: row; - justify-content: space-around; -} - -.spinner-container { - font-family: sans-serif; - display: flex; - flex-direction: column; - width: var(--spinner-width); -} - -.spinner-container > button { - -moz-appearance: none; - border: none; - background: none; - background-color: var(--button-font-color); - height: var(--spinner-button-height); -} - -.spinner-container > button:hover { - background-color: var(--button-font-color-hover); -} - -.spinner-container > button.active { - background-color: var(--button-font-color-active); -} - -.spinner-container > button.up { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%; -} - -.spinner-container > button.down { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%; -} - -.spinner-container.hide-buttons > button { - visibility: hidden; -} - -.spinner-container > .spinner { - position: relative; - width: 100%; - margin: var(--spinner-margin-top-bottom) 0; - cursor: default; - overflow-y: scroll; - scroll-snap-type: mandatory; - scroll-snap-points-y: repeat(100%); -} - -.spinner-container > .spinner > div { - box-sizing: border-box; - position: relative; - text-align: center; - padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; - margin-bottom: var(--spinner-item-margin-bottom); - height: var(--spinner-item-height); - -moz-user-select: none; - scroll-snap-coordinate: 0 0; -} - -.spinner-container > .spinner > div:hover::before { - background: var(--fill-color); - border: var(--border); - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.spinner-container > .spinner:not(.scrolling) > div.selection { - color: var(--selected-font-color); -} - -.spinner-container > .spinner > div.selection::before { - background: var(--selected-fill-color); - border: none; - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.spinner-container > .spinner > div.disabled::before, -.spinner-container > .spinner.scrolling > div.selection::before, -.spinner-container > .spinner.scrolling > div:hover::before { - display: none; -} - -.spinner-container > .spinner > div.disabled { - opacity: var(--disabled-opacity); -} - -.colon { - display: flex; - justify-content: center; - align-items: center; - width: var(--colon-width); - margin-bottom: 0.3rem; -} - -.spacer { - width: var(--day-period-spacing-width); -}