Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (182035 => 182036)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-03-26 23:23:57 UTC (rev 182036)
@@ -78,7 +78,7 @@
line-height: 25px;
-webkit-user-select: none;
-webkit-user-drag: element;
- background-color: rgba(0,0,0,0.8);
+ background-color: transparent;
display: -webkit-flex;
-webkit-flex-direction: row;
@@ -91,6 +91,30 @@
transition: opacity 0.25s linear;
}
+video::-webkit-media-controls-panel-tint,
+audio::-webkit-media-controls-panel-tint {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ min-height: 25px;
+ height: 25px;
+ background-color: rgb(41, 41, 41);
+ mix-blend-mode: lighten;
+}
+
+video::-webkit-media-controls-panel-background,
+audio::-webkit-media-controls-panel-background {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ min-height: 25px;
+ height: 25px;
+ background-color: rgba(30, 30, 30, 0.45);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
video::-webkit-media-controls-panel {
cursor: none;
}
@@ -173,7 +197,7 @@
-webkit-transform: rotate(-90deg) translateY(-31.5px) translateX(51.5px);
- background-color: rgba(0,0,0,0.8);
+ background-color: transparent;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
@@ -188,13 +212,41 @@
}
+video::-webkit-media-controls-volume-slider-container-background,
+audio::-webkit-media-controls-volume-slider-container-background {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 23px;
+ border-bottom-right-radius: 4px;
+ border-top-right-radius: 4px;
+ background-color: rgba(30, 30, 30, 0.45);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+video::-webkit-media-controls-volume-slider-container-tint,
+audio::-webkit-media-controls-volume-slider-container-tint {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 23px;
+ border-bottom-right-radius: 4px;
+ border-top-right-radius: 4px;
+ background-color: rgb(41, 41, 41);
+ mix-blend-mode: lighten;
+}
+
/* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
video::-webkit-media-controls-panel .mute-box:hover .volume-box,
video::-webkit-media-controls-panel .volume-box:hover,
video::-webkit-media-controls-panel .volume-box:active,
+video::-webkit-media-controls-volume-slider-container-background,
+video::-webkit-media-controls-volume-slider-container-tint,
audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
audio::-webkit-media-controls-panel .volume-box:hover,
-audio::-webkit-media-controls-panel .volume-box:active {
+audio::-webkit-media-controls-panel .volume-box:active
+audio::-webkit-media-controls-volume-slider-container-background,
+audio::-webkit-media-controls-volume-slider-container-tint {
opacity: 1;
/* resize to usable amount (rather than display:none) for AX and FKA */
width: 76px;
@@ -244,7 +296,7 @@
audio::-webkit-media-controls-toggle-closed-captions-button {
width: 16px;
margin-right: 16px;
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.68)"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.68)" fill="none"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
outline: 0;
}
@@ -312,7 +364,7 @@
video::-webkit-media-controls-closed-captions-container li:focus,
audio::-webkit-media-controls-closed-captions-container li:focus {
outline: 0;
- background-color: rgba(140, 140, 140, .5);
+ background-color: rgba(140, 140, 140, 0.5);
}
video::-webkit-media-controls-closed-captions-container li:hover,
@@ -340,14 +392,14 @@
video::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-fullscreen-button {
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
margin-right: 7px;
width: 14px;
}
video::-webkit-media-controls-fullscreen-button.exit,
audio::-webkit-media-controls-fullscreen-button.exit {
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25" fill="none"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
margin-right: 11px;
margin-top: 6px;
}
@@ -529,18 +581,44 @@
video:-webkit-full-screen::-webkit-media-controls-panel {
-webkit-align-items: flex-start !important;
-webkit-justify-content: flex-end !important;
-
- width: 440px !important;
- height: 64px !important;
+ -webkit-clip-path: inset(20px round 6px);
+
+ width: 480px !important;
+ height: 104px !important;
margin: 0 auto 32px auto !important;
- padding-top: 10px !important;
+ padding: 20px;
+ padding-top: 30px !important;
- background-color: rgba(0,0,0,0.8);
+ background-color: transparent;
border-radius: 6px !important;
transition: opacity 0.3s linear !important;
}
+video:-webkit-full-screen::-webkit-media-controls-panel-tint,
+audio:-webkit-full-screen::-webkit-media-controls-panel-tint {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 480px !important;
+ height: 104px !important;
+ border-radius: 6px !important;
+ background-color: rgb(41, 41, 41);
+ mix-blend-mode: lighten;
+}
+
+video:-webkit-full-screen::-webkit-media-controls-panel-background,
+audio:-webkit-full-screen::-webkit-media-controls-panel-background {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 480px !important;
+ height: 104px !important;
+ border-radius: 6px !important;
+ background-color: rgba(30, 30, 30, 0.45);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
opacity: 0 ! important;
transition: opacity 0 ! important;
@@ -549,8 +627,8 @@
video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
-webkit-transform: none;
opacity: 1;
- left: 12px;
- top: 15px;
+ left: 32px;
+ top: 35px;
width: 96px;
height: 17px;
display: -webkit-flex;
@@ -590,8 +668,8 @@
width: 21px;
height: 23px;
- left: 210px;
- top: 12px;
+ left: 230px;
+ top: 32px;
margin: 0;
padding: 0;
}
@@ -607,8 +685,8 @@
width: 24px;
height: 15px;
- left: 156px;
- top: 16px;
+ left: 176px;
+ top: 36px;
}
video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
@@ -627,16 +705,16 @@
width: 24px;
height: 15px;
- left: 255px;
- top: 16px;
+ left: 275px;
+ top: 36px;
}
video:-webkit-full-screen::-webkit-media-controls-timeline-container {
height: auto;
width: 440px;
position: absolute;
- bottom: 8px;
- left: 0px;
+ bottom: 28px;
+ left: 20px;
}
video:-webkit-full-screen::-webkit-media-controls-current-time-display {
@@ -650,10 +728,10 @@
video:-webkit-full-screen::-webkit-media-controls-status-display {
width: 440px;
position: absolute;
- bottom: 7px;
+ bottom: 27px;
text-align: center;
padding: 0;
- left: 0;
+ left: 20;
}
video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (182035 => 182036)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-03-26 23:23:57 UTC (rev 182036)
@@ -312,7 +312,18 @@
this.listenFor(panel, 'click', this.handlePanelClick);
this.listenFor(panel, 'dblclick', this.handlePanelClick);
this.listenFor(panel, 'dragstart', this.handlePanelDragStart);
+
+ var panelTint = this.controls.panelTint = document.createElement('div');
+ panelTint.setAttribute('pseudo', '-webkit-media-controls-panel-tint');
+ this.listenFor(panelTint, 'mousedown', this.handlePanelMouseDown);
+ this.listenFor(panelTint, 'transitionend', this.handlePanelTransitionEnd);
+ this.listenFor(panelTint, 'click', this.handlePanelClick);
+ this.listenFor(panelTint, 'dblclick', this.handlePanelClick);
+ this.listenFor(panelTint, 'dragstart', this.handlePanelDragStart);
+ var panelBackground = this.controls.panelBackground = document.createElement('div');
+ panelBackground.setAttribute('pseudo', '-webkit-media-controls-panel-background');
+
var rewindButton = this.controls.rewindButton = document.createElement('button');
rewindButton.setAttribute('pseudo', '-webkit-media-controls-rewind-button');
rewindButton.setAttribute('aria-label', this.UIString('Rewind ##sec## Seconds', '##sec##', this.RewindAmount));
@@ -399,6 +410,12 @@
var volumeBox = this.controls.volumeBox = document.createElement('div');
volumeBox.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container');
volumeBox.classList.add(this.ClassNames.volumeBox);
+
+ var volumeBoxBackground = this.controls.volumeBoxBackground = document.createElement('div');
+ volumeBoxBackground.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container-background');
+
+ var volumeBoxTint = this.controls.volumeBoxTint = document.createElement('div');
+ volumeBoxTint.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container-tint');
var volume = this.controls.volume = document.createElement('input');
volume.setAttribute('pseudo', '-webkit-media-controls-volume-slider');
@@ -488,6 +505,8 @@
configureInlineControls: function()
{
+ this.controls.panel.appendChild(this.controls.panelBackground);
+ this.controls.panel.appendChild(this.controls.panelTint);
this.controls.panel.appendChild(this.controls.playButton);
if (!this.isLive)
this.controls.panel.appendChild(this.controls.rewindButton);
@@ -503,6 +522,8 @@
}
this.controls.panel.appendChild(this.controls.muteBox);
this.controls.muteBox.appendChild(this.controls.volumeBox);
+ this.controls.volumeBox.appendChild(this.controls.volumeBoxBackground);
+ this.controls.volumeBox.appendChild(this.controls.volumeBoxTint);
this.controls.volumeBox.appendChild(this.controls.volume);
this.controls.muteBox.appendChild(this.controls.muteButton);
this.controls.panel.appendChild(this.controls.wirelessTargetPicker);
@@ -517,6 +538,8 @@
configureFullScreenControls: function()
{
+ this.controls.panel.appendChild(this.controls.panelBackground);
+ this.controls.panel.appendChild(this.controls.panelTint);
this.controls.panel.appendChild(this.controls.volumeBox);
this.controls.volumeBox.appendChild(this.controls.minButton);
this.controls.volumeBox.appendChild(this.controls.volume);
@@ -734,7 +757,7 @@
handlePanelMouseDown: function(event)
{
- if (event.target != this.controls.panel && event.target != this.controls.inlinePlaybackPlaceholder)
+ if (event.target != this.controls.panelTint && event.target != this.controls.inlinePlaybackPlaceholder)
return;
if (!this.isFullScreen())
@@ -1106,7 +1129,7 @@
this.addRoundedRect(ctx, scrubberPosition + 1, 8, width - scrubberPosition - borderSize , trackHeight, trackHeight / 2.0);
ctx.closePath();
ctx.clip("evenodd");
- ctx.fillStyle = "rgb(50, 50, 50)";
+ ctx.fillStyle = "rgba(140, 140, 140, 0.68)";
ctx.fillRect(0, 0, width, height);
ctx.restore();
@@ -1167,7 +1190,7 @@
this.addRoundedRect(ctx, 1, 4, width - borderSize, trackHeight, trackHeight / 2.0);
ctx.closePath();
ctx.clip("evenodd");
- ctx.fillStyle = "rgb(50, 50, 50)";
+ ctx.fillStyle = "rgba(140, 140, 140, 0.68)";
ctx.fillRect(0, 0, width, height);
ctx.restore();
@@ -1225,12 +1248,16 @@
this.controls.panel.classList.add(this.ClassNames.paused);
if (this.controls.panelBackground)
this.controls.panelBackground.classList.add(this.ClassNames.paused);
+ if (this.controls.panelTint)
+ this.controls.panelTint.classList.add(this.ClassNames.paused);
this.controls.playButton.classList.add(this.ClassNames.paused);
this.controls.playButton.setAttribute('aria-label', this.UIString('Play'));
} else {
this.controls.panel.classList.remove(this.ClassNames.paused);
if (this.controls.panelBackground)
this.controls.panelBackground.classList.remove(this.ClassNames.paused);
+ if (this.controls.panelTint)
+ this.controls.panelTint.classList.add(this.ClassNames.paused);
this.controls.playButton.classList.remove(this.ClassNames.paused);
this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
this.resetHideControlsTimer();