Commit 2c35bc3f authored by Raine Makelainen's avatar Raine Makelainen Committed by Dmitry Rozhkov

[videocontrols] Polish look and feel of video controls. Fixes JB#30463

Add higher resolution icons (icon background size 42px) to get rid of
blurring, adjust controlBar background, and remove left and right margins
from the controlBar.

Three main components buttonsBar, scrubberStack, and durationBox are
aligned vertically and are using the same margins.

Using longer formats for margins to increase readability even thou
it is more verbose format.
parent fa53f1cd
overrides/images/error.png

433 Bytes | W: | H:

overrides/images/error.png

1.51 KB | W: | H:

overrides/images/error.png
overrides/images/error.png
overrides/images/error.png
overrides/images/error.png
  • 2-up
  • Swipe
  • Onion skin
overrides/images/exitfullscreen-hdpi.png

3.33 KB | W: | H:

overrides/images/exitfullscreen-hdpi.png

629 Bytes | W: | H:

overrides/images/exitfullscreen-hdpi.png
overrides/images/exitfullscreen-hdpi.png
overrides/images/exitfullscreen-hdpi.png
overrides/images/exitfullscreen-hdpi.png
  • 2-up
  • Swipe
  • Onion skin
overrides/images/fullscreen-hdpi.png

3.3 KB | W: | H:

overrides/images/fullscreen-hdpi.png

573 Bytes | W: | H:

overrides/images/fullscreen-hdpi.png
overrides/images/fullscreen-hdpi.png
overrides/images/fullscreen-hdpi.png
overrides/images/fullscreen-hdpi.png
  • 2-up
  • Swipe
  • Onion skin
overrides/images/mute-hdpi.png

2.78 KB | W: | H:

overrides/images/mute-hdpi.png

1.39 KB | W: | H:

overrides/images/mute-hdpi.png
overrides/images/mute-hdpi.png
overrides/images/mute-hdpi.png
overrides/images/mute-hdpi.png
  • 2-up
  • Swipe
  • Onion skin
overrides/images/pause-hdpi.png

1.33 KB | W: | H:

overrides/images/pause-hdpi.png

308 Bytes | W: | H:

overrides/images/pause-hdpi.png
overrides/images/pause-hdpi.png
overrides/images/pause-hdpi.png
overrides/images/pause-hdpi.png
  • 2-up
  • Swipe
  • Onion skin
overrides/images/play-hdpi.png

2.32 KB | W: | H:

overrides/images/play-hdpi.png

809 Bytes | W: | H:

overrides/images/play-hdpi.png
overrides/images/play-hdpi.png
overrides/images/play-hdpi.png
overrides/images/play-hdpi.png
  • 2-up
  • Swipe
  • Onion skin
overrides/images/scrubber-hdpi.png

3.87 KB | W: | H:

overrides/images/scrubber-hdpi.png

1.27 KB | W: | H:

overrides/images/scrubber-hdpi.png
overrides/images/scrubber-hdpi.png
overrides/images/scrubber-hdpi.png
overrides/images/scrubber-hdpi.png
  • 2-up
  • Swipe
  • Onion skin
overrides/images/unmute-hdpi.png

956 Bytes | W: | H:

overrides/images/unmute-hdpi.png

993 Bytes | W: | H:

overrides/images/unmute-hdpi.png
overrides/images/unmute-hdpi.png
overrides/images/unmute-hdpi.png
overrides/images/unmute-hdpi.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -8,7 +8,7 @@
.controlsOverlay {
-moz-box-pack: center;
-moz-box-align: end;
padding: 20px;
padding: 0px;
-moz-box-flex: 1;
-moz-box-orient: horizontal;
}
......@@ -17,8 +17,7 @@
-moz-box-flex: 1;
font-size: 16pt;
padding: 0px 0px 10px 0px;
background-color: rgba(50,50,50,0.8);
border-radius: 8px;
background-color: rgba(0,0,0,0.6);
width: 100%;
}
......@@ -27,25 +26,38 @@
-moz-box-flex: 0;
}
.buttonsBar {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 20px;
}
.fullscreenButton,
.playButton,
.muteButton {
-moz-appearance: none;
min-height: 72px;
min-width: 72px;
max-height: 72px;
max-width: 72px;
border: none !important;
}
.fullscreenButton {
background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
background-size: 42px;
}
.fullscreenButton[fullscreened="true"] {
background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
background-size: 42px;
}
.playButton {
background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
background-size: 42px;
}
/*
......@@ -60,14 +72,17 @@
.playButton[paused="true"] {
background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
background-size: 42px;
}
.muteButton {
background: url("chrome://browser/skin/images/mute-hdpi.png") no-repeat center;
background-size: 42px;
}
.muteButton[muted="true"] {
background: url("chrome://browser/skin/images/unmute-hdpi.png") no-repeat center;
background-size: 42px;
}
/* bars */
......@@ -75,8 +90,13 @@
width: 100%;
min-height: 32px;
max-height: 32px;
padding: 0px 8px;
margin: 0px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
/* Push scrubber stack content toward center, buttons have 15px paddings internally (72px button and 42px icon centered) */
margin-left: 40px;
margin-right: 40px;
}
.bufferBar,
......@@ -91,11 +111,11 @@
padding: 0px;
margin: 0px;
background-color: transparent;
border-radius: 3px;
border-radius: 0px;
}
.bufferBar {
border: 1px solid #5e6166;
border: 1px solid #444444;
}
.bufferBar,
......@@ -105,23 +125,23 @@
}
.bufferBar .progress-bar {
background-color: #5e6166;
background-color: #444444;
}
.progressBar .progress-bar {
background-color: white;
background-color: #dadada;
}
.scrubber {
margin-left: -16px;
margin-right: -16px;
margin-left: -1px;
margin-right: -1px;
}
.scrubber .scale-thumb {
display: -moz-box;
margin: 0px !important;
padding: 0px !important;
background: url("chrome://browser/skin/images/scrubber-hdpi.png") no-repeat;
background: url("chrome://browser/skin/images/scrubber-hdpi.png") no-repeat center;
background-size: 32px 32px;
height: 32px;
width: 32px;
......@@ -133,8 +153,12 @@
-moz-box-align: center;
color: white;
font-weight: bold;
padding: 0px 8px;
margin-top: -6px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
/* Push duration box toward center, buttons have 15px paddings internally (72px button and 42px icon centered) */
margin-right: 40px;
margin-left: 40px;
}
.positionLabel {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment