Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(522)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: Source/core/css/mediaControls.css

Issue 18181010: Simplify media controls CSS (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Minimize mediaControlsChromiumAndroid.css Created 7 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « Source/core/core_derived_sources.gyp ('k') | Source/core/css/mediaControlsChromium.css » ('j') | Source/core/css/mediaControlsChromiumAndroid.css » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/core/css/mediaControls.css
diff --git a/Source/core/css/mediaControls.css b/Source/core/css/mediaControls.css
index 872f5958ba85d89797e89a3b98a2dc75c8969571..dbcf2263a8a1db51e8da91d5de4944be79a6edc4 100644
--- a/Source/core/css/mediaControls.css
+++ b/Source/core/css/mediaControls.css
@@ -1,5 +1,6 @@
/*
- * Copyright (C) 2009, 2010, 2011 Apple Inc. All rights reserved.
+ * Copyright (C) 2009 Apple Inc. All rights reserved.
+ * Copyright (C) 2009 Google Inc.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
@@ -19,43 +20,66 @@
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
* OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-/* media controls */
+/* Chromium default media controls */
body:-webkit-full-page-media {
- background-color: rgb(38, 38, 38);
+ background-color: rgb(0, 0, 0);
}
audio {
- width: 200px;
- height: 16px;
+ width: 300px;
+ height: 30px;
}
::-webkit-media-controls {
width: inherit;
height: inherit;
position: relative;
- display: -webkit-flex;
direction: ltr;
- -webkit-align-items: flex-start;
- -webkit-justify-content: flex-end;
+ display: -webkit-flex;
-webkit-flex-direction: column;
+ -webkit-justify-content: flex-end;
+ -webkit-align-items: center;
+}
+
+audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
+ width: 100%;
+ max-width: 800px;
+ height: 30px;
+ -webkit-flex-shrink: 0;
+ bottom: 0;
+ text-indent: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+video::-webkit-media-controls-enclosure {
+ padding: 0px 5px 5px 5px;
+ height: 35px;
+ -webkit-flex-shrink: 0;
}
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
- display: -webkit-flex;
- -webkit-flex-direction: row;
- -webkit-align-items: center;
-webkit-user-select: none;
position: relative;
- bottom: 0;
width: 100%;
z-index: 0;
overflow: hidden;
- height: 16px;
text-align: right;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ /* We use flex-start here to ensure that the play button is visible even
+ * if we are too small to show all controls.
+ */
+ -webkit-justify-content: flex-start;
+ bottom: auto;
+ height: 30px;
+ background-color: rgba(20, 20, 20, 0.8);
+ border-radius: 5px;
}
video:-webkit-full-page-media {
@@ -67,18 +91,29 @@ video:-webkit-full-page-media {
left: 0;
}
+audio:-webkit-full-page-media, video:-webkit-full-page-media {
+ max-height: 100%;
+ max-width: 100%;
+}
+
+audio:-webkit-full-page-media::-webkit-media-controls-panel,
video:-webkit-full-page-media::-webkit-media-controls-panel {
bottom: 0px;
}
audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
- -webkit-appearance: media-mute-button;
- display: -webkit-flex;
- width: 16px;
- height: 16px;
background-color: initial;
- border: initial;
color: inherit;
+ -webkit-appearance: media-mute-button;
qinmin 2013/07/02 03:15:14 this normally appears as the first line in the css
philipj_slow 2013/07/02 08:16:22 Yeah, the editing process I followed resulted in t
+ display: -webkit-flex;
+ -webkit-flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 35px;
+ height: 30px;
+ line-height: 30px;
+ margin: 0 6px 0 0;
+ padding: 0;
}
audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button {
@@ -86,13 +121,19 @@ audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls
}
audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
- -webkit-appearance: media-play-button;
- display: -webkit-flex;
- width: 16px;
- height: 16px;
background-color: initial;
- border: initial;
color: inherit;
+ -webkit-appearance: media-play-button;
+ display: -webkit-flex;
+ -webkit-flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ margin-left: 9px;
+ margin-right: 9px;
+ padding: 0;
}
audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
@@ -107,32 +148,88 @@ audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
min-width: 0;
}
-audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
- display: none;
-}
-
+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 {
- display: none;
+ -webkit-appearance: media-current-time-display;
+ -webkit-user-select: none;
+ -webkit-flex: none;
+ display: -webkit-flex;
+ border: none;
+ cursor: default;
+
+ height: 30px;
+ margin: 0 9px 0 0;
+ padding: 0;
+
+ line-height: 30px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ font-weight: bold;
+ font-style: normal;
+ color: white;
+
+ letter-spacing: normal;
+ word-spacing: normal;
+ text-transform: none;
+ text-indent: 0;
+ text-shadow: none;
+ text-decoration: none;
}
audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
- -webkit-appearance: media-slider;
- display: -webkit-flex;
- -webkit-flex: 1 1;
- height: 16px;
- padding: 0px 2px;
- background-color: initial;
border: initial;
color: inherit;
- margin: initial;
- min-width: 0;
+ -webkit-appearance: media-slider;
+ display: -webkit-flex;
+ -webkit-flex: 1 1 auto;
+ height: 8px;
+ margin: 0 15px 0 0;
+ padding: 0;
+ background-color: transparent;
+ min-width: 25px;
}
audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
- background-color: initial;
border: initial;
color: inherit;
- margin: initial;
+ -webkit-appearance: media-volume-slider;
+ display: -webkit-flex;
+ /* The 1.9 value was empirically chosen to match old-flexbox behaviour
+ * and be aesthetically pleasing.
+ */
+ -webkit-flex: 1 1.9 auto;
+ height: 8px;
+ max-width: 70px;
+ margin: 0 15px 0 0;
+ padding: 0;
+ background-color: transparent;
+ min-width: 15px;
+}
+
+/* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
+ https://code.google.com/p/chromium/issues/detail?id=112508
+ https://bugs.webkit.org/show_bug.cgi?id=62218
+*/
+input[type="range"]::-webkit-media-slider-container {
+ display: -webkit-flex;
+ -webkit-align-items: center;
+ -webkit-flex-direction: row; /* This property is updated by C++ code. */
+ box-sizing: border-box;
+ height: 100%;
+ width: 100%;
+ border: 1px solid rgba(230, 230, 230, 0.35);
+ border-radius: 4px;
+ background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
+}
+
+/* The negative right margin causes the track to overflow its container. */
+input[type="range"]::-webkit-media-slider-container > div {
+ margin-right: -14px;
+}
+
+input[type="range"]::-webkit-media-slider-thumb {
+ margin-left: -7px;
+ margin-right: -7px;
}
audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
@@ -156,13 +253,19 @@ audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls
}
audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
- -webkit-appearance: media-enter-fullscreen-button;
- display: -webkit-flex;
- width: 16px;
- height: 16px;
background-color: initial;
- border: initial;
color: inherit;
+ -webkit-appearance: media-enter-fullscreen-button;
+ display: -webkit-flex;
+ -webkit-flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ margin-left: -5px;
+ margin-right: 9px;
+ padding: 0;
}
audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
@@ -180,13 +283,19 @@ audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co
}
audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
- -webkit-appearance: media-toggle-closed-captions-button;
- display: -webkit-flex;
- width: 16px;
- height: 16px;
background-color: initial;
- border: initial;
color: inherit;
+ -webkit-appearance: media-toggle-closed-captions-button;
+ display: -webkit-flex;
+ -webkit-flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ margin-left: -5px;
+ margin-right: 9px;
+ padding: 0;
}
audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
« no previous file with comments | « Source/core/core_derived_sources.gyp ('k') | Source/core/css/mediaControlsChromium.css » ('j') | Source/core/css/mediaControlsChromiumAndroid.css » ('J')

Powered by Google App Engine
This is Rietveld 408576698