[Qt] HTML5 video - sound volume bar out of widget

https://bugs.webkit.org/show_bug.cgi?id=108213

Reviewed by Jocelyn Turcotte.

Since we use Safari shadow DOM for media controls, follow
the overall layout of Safari media control CSS.

* css/mediaControlsQt.css:
(audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel):
(audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
(audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button):
(audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container):
(audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display):
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
(audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline):
(audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
(audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
(audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button):
(audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button):
(audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button):
(audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button):
(audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button):

Change-Id: I36ce4fba8348fae46441ba04f7a9d9d189a9ea93
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@145214 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Reviewed-by: Jocelyn Turcotte <jocelyn.turcotte@digia.com>

1 files changed, 31 insertions, 130 deletions

diff --git a/Source/WebCore/css/mediaControlsQt.css b/Source/WebCore/css/mediaControlsQt.css
index 64e0ec524..5cfa3c7b7 100644
--- a/Source/WebCore/css/mediaControlsQt.css
+++ b/Source/WebCore/css/mediaControlsQt.css
@@ -1,8 +1,9 @@
 /*
  * QtWebKit specific overrides for HTML5 media elements.
  *
- * Copyright (C) 2009 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009, 2011 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Nokia Corporation and/or its subsidiary(-ies)
+ * Copyright (C) 2013 Digia Plc. and/or its subsidiary(-ies)
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -32,63 +33,27 @@ audio {
     width: 400px;
 }
 
-audio::-webkit-media-controls-panel {
-    display: -webkit-box;
-    -webkit-box-orient: horizontal;
-    -webkit-box-align: end;
-    -webkit-user-select: none;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    z-index: 0;
+audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     overflow: visible;
-    height: 100%;
-    text-align: right;
-}
-
-video::-webkit-media-controls-panel {
-    display: -webkit-box;
-    -webkit-box-orient: horizontal;
-    -webkit-box-align: end;
-    -webkit-user-select: none;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    z-index: 0;
-    overflow: hidden;
-    height: 100%;
-    text-align: right;
-}
-
-video:-webkit-full-page-media::-webkit-media-controls-panel {
-    bottom: 0px;
-}
-
-audio::-webkit-media-controls-mute-button {
-    width: 12px;
-    height: 12px;
-    padding: 6px;
-    margin: 5px 5px 5px 3px;
-    border: none !important;
+    height: 34px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-video::-webkit-media-controls-mute-button {
+audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
     width: 12px;
     height: 12px;
     padding: 6px;
-    margin: 5px 5px 5px 3px;
+    margin-left: 6px;
+    margin-right: 3px;
     border: none !important;
-}
 
-audio::-webkit-media-controls-play-button {
-    width: 9px;
-    height: 12px;
-    padding: 6px 12px 6px 11px;
-    margin: 5px 3px 5px 5px;
-    border: none !important;
+    position: relative;
+    z-index: 1;
 }
 
-video::-webkit-media-controls-play-button {
+audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
     width: 9px;
     height: 12px;
     padding: 6px 12px 6px 11px;
@@ -96,15 +61,11 @@ video::-webkit-media-controls-play-button {
     border: none !important;
 }
 
-audio::-webkit-media-controls-timeline-container {
+audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
     height: 34px;
 }
 
-video::-webkit-media-controls-timeline-container {
-    height: 34px;
-}
-
-audio::-webkit-media-controls-current-time-display {
+audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
     -webkit-appearance: media-current-time-display;
     -webkit-user-select: none;
     display: inline-block;
@@ -116,99 +77,51 @@ audio::-webkit-media-controls-current-time-display {
     cursor: default;
 
     text-align: center;
-    font-size: 10px;
     font-family: Verdana;
-    font-weight: bold;
-    color: white;
-}
-
-video::-webkit-media-controls-current-time-display {
-    -webkit-appearance: media-current-time-display;
-    -webkit-user-select: none;
-    display: inline-block;
-    height: 12px;
-    padding: 6px;
-    margin: 5px 3px;
-
-    overflow: hidden;
-    cursor: default;
-
-    text-align: center;
     font-size: 10px;
-    font-family: Verdana;
     font-weight: bold;
     color: white;
 }
 
-audio::-webkit-media-controls-time-remaining-display {
-    display: none;
-}
-
-video::-webkit-media-controls-time-remaining-display {
+audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
     display: none;
 }
 
-audio::-webkit-media-controls-timeline {
-    height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
-    padding: 6px 8px;
-    margin: 5px 3px;
-}
-
-video::-webkit-media-controls-timeline {
+audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
+    display: -webkit-box;
+    -webkit-box-flex: 1 1;
     height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
     padding: 6px 8px;
-    margin: 5px 3px;
 }
 
-audio::-webkit-media-controls-volume-slider-container {
+audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
     -webkit-appearance: media-volume-slider-container;
     position: absolute;
-    height: 103px;
-    width: 24px;
-}
+    bottom: 29px;
+    z-index: 2;
 
-video::-webkit-media-controls-volume-slider-container {
-    -webkit-appearance: media-volume-slider-container;
-    position: absolute;
-    height: 103px;
     width: 24px;
+    height: 103px;
 }
 
-audio::-webkit-media-controls-volume-slider {
+audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
     -webkit-appearance: media-volume-slider;
     display: inline;
     position: absolute;
 
-    width: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
-    padding: 6px;
-    height: 88px;
-    margin: 0 0 3px 0;
-}
-
-video::-webkit-media-controls-volume-slider {
-    -webkit-appearance: media-volume-slider;
-    display: inline;
-    position: absolute;
+    top: 0px;
+    left: 6px;
 
     width: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
     padding: 6px;
     height: 88px;
-    margin: 0 0 3px 0;
 }
 
-audio::-webkit-media-controls-seek-back-button {
+audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
     display: none;
 }
 
-video::-webkit-media-controls-seek-back-button {
-    display: none;
-}
-
-audio::-webkit-media-controls-seek-forward-button {
-    display: none;
-}
-
-video::-webkit-media-controls-seek-forward-button {
+audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
     display: none;
 }
 
@@ -226,27 +139,15 @@ video::-webkit-media-controls-fullscreen-button {
     border: none !important;
 }
 
-audio::-webkit-media-controls-rewind-button {
-    display: none;
-}
-
-video::-webkit-media-controls-rewind-button {
-    display: none;
-}
-
-audio::-webkit-media-controls-return-to-realtime-button {
-    display: none;
-}
-
-video::-webkit-media-controls-return-to-realtime-button {
+audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
     display: none;
 }
 
-audio::-webkit-media-controls-toggle-closed-captions-button {
+audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
     display: none;
 }
 
-video::-webkit-media-controls-toggle-closed-captions-button {
+audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
     display: none;
 }