| OLD | NEW |
|---|
| (Empty) |
| 1 /* | |
| 2 * Copyright (C) 2009 Apple Inc. All rights reserved. | |
| 3 * Copyright (C) 2009 Google Inc. | |
| 4 * | |
| 5 * Redistribution and use in source and binary forms, with or without | |
| 6 * modification, are permitted provided that the following conditions | |
| 7 * are met: | |
| 8 * 1. Redistributions of source code must retain the above copyright | |
| 9 * notice, this list of conditions and the following disclaimer. | |
| 10 * 2. Redistributions in binary form must reproduce the above copyright | |
| 11 * notice, this list of conditions and the following disclaimer in the | |
| 12 * documentation and/or other materials provided with the distribution. | |
| 13 * | |
| 14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | |
| 15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | |
| 16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | |
| 17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | |
| 18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | |
| 19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | |
| 20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | |
| 21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
| 22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
| 23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
| 24 */ | |
| 25 | |
| 26 /* Chromium default media controls */ | |
| 27 | |
| 28 body:-webkit-full-page-media { | |
| 29 background-color: rgb(0, 0, 0); | |
| 30 } | |
| 31 | |
| 32 audio { | |
| 33 width: 300px; | |
| 34 height: 30px; | |
| 35 } | |
| 36 | |
| 37 audio:-webkit-full-page-media, video:-webkit-full-page-media { | |
| 38 max-height: 100%; | |
| 39 max-width: 100%; | |
| 40 } | |
| 41 | |
| 42 audio:-webkit-full-page-media::-webkit-media-controls-panel, | |
| 43 video:-webkit-full-page-media::-webkit-media-controls-panel { | |
| 44 bottom: 0px; | |
| 45 } | |
| 46 | |
| 47 ::-webkit-media-controls { | |
| 48 display: -webkit-flex; | |
| 49 -webkit-flex-direction: column; | |
| 50 -webkit-justify-content: flex-end; | |
| 51 -webkit-align-items: center; | |
| 52 } | |
| 53 | |
| 54 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ | |
| 55 width: 100%; | |
| 56 max-width: 800px; | |
| 57 height: 30px; | |
| 58 -webkit-flex-shrink: 0; | |
| 59 bottom: 0; | |
| 60 text-indent: 0; | |
| 61 padding: 0; | |
| 62 box-sizing: border-box; | |
| 63 } | |
| 64 | |
| 65 video::-webkit-media-controls-enclosure { | |
| 66 padding: 0px 5px 5px 5px; | |
| 67 height: 35px; | |
| 68 -webkit-flex-shrink: 0; | |
| 69 } | |
| 70 | |
| 71 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
| 72 display: -webkit-flex; | |
| 73 -webkit-flex-direction: row; | |
| 74 -webkit-align-items: center; | |
| 75 /* We use flex-start here to ensure that the play button is visible even | |
| 76 * if we are too small to show all controls. | |
| 77 */ | |
| 78 -webkit-justify-content: flex-start; | |
| 79 bottom: auto; | |
| 80 height: 30px; | |
| 81 background-color: rgba(20, 20, 20, 0.8); | |
| 82 border-radius: 5px; | |
| 83 } | |
| 84 | |
| 85 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | |
| 86 -webkit-appearance: media-mute-button; | |
| 87 display: -webkit-flex; | |
| 88 -webkit-flex: none; | |
| 89 border: none; | |
| 90 box-sizing: border-box; | |
| 91 width: 35px; | |
| 92 height: 30px; | |
| 93 line-height: 30px; | |
| 94 margin: 0 6px 0 0; | |
| 95 padding: 0; | |
| 96 } | |
| 97 | |
| 98 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | |
| 99 -webkit-appearance: media-play-button; | |
| 100 display: -webkit-flex; | |
| 101 -webkit-flex: none; | |
| 102 border: none; | |
| 103 box-sizing: border-box; | |
| 104 width: 30px; | |
| 105 height: 30px; | |
| 106 line-height: 30px; | |
| 107 margin-left: 9px; | |
| 108 margin-right: 9px; | |
| 109 padding: 0; | |
| 110 } | |
| 111 | |
| 112 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display, | |
| 113 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | |
| 114 -webkit-appearance: media-current-time-display; | |
| 115 -webkit-user-select: none; | |
| 116 -webkit-flex: none; | |
| 117 display: -webkit-flex; | |
| 118 border: none; | |
| 119 cursor: default; | |
| 120 | |
| 121 height: 30px; | |
| 122 margin: 0 9px 0 0; | |
| 123 padding: 0; | |
| 124 | |
| 125 line-height: 30px; | |
| 126 font-family: Arial, Helvetica, sans-serif; | |
| 127 font-size: 13px; | |
| 128 font-weight: bold; | |
| 129 font-style: normal; | |
| 130 color: white; | |
| 131 | |
| 132 letter-spacing: normal; | |
| 133 word-spacing: normal; | |
| 134 text-transform: none; | |
| 135 text-indent: 0; | |
| 136 text-shadow: none; | |
| 137 text-decoration: none; | |
| 138 } | |
| 139 | |
| 140 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | |
| 141 -webkit-appearance: media-slider; | |
| 142 display: -webkit-flex; | |
| 143 -webkit-flex: 1 1 auto; | |
| 144 height: 8px; | |
| 145 margin: 0 15px 0 0; | |
| 146 padding: 0; | |
| 147 background-color: transparent; | |
| 148 min-width: 25px; | |
| 149 } | |
| 150 | |
| 151 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | |
| 152 -webkit-appearance: media-volume-slider; | |
| 153 display: -webkit-flex; | |
| 154 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | |
| 155 * and be aesthetically pleasing. | |
| 156 */ | |
| 157 -webkit-flex: 1 1.9 auto; | |
| 158 height: 8px; | |
| 159 max-width: 70px; | |
| 160 margin: 0 15px 0 0; | |
| 161 padding: 0; | |
| 162 background-color: transparent; | |
| 163 min-width: 15px; | |
| 164 } | |
| 165 | |
| 166 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. | |
| 167 https://code.google.com/p/chromium/issues/detail?id=112508 | |
| 168 https://bugs.webkit.org/show_bug.cgi?id=62218 | |
| 169 */ | |
| 170 input[type="range"]::-webkit-media-slider-container { | |
| 171 display: -webkit-flex; | |
| 172 -webkit-align-items: center; | |
| 173 -webkit-flex-direction: row; /* This property is updated by C++ code. */ | |
| 174 box-sizing: border-box; | |
| 175 height: 100%; | |
| 176 width: 100%; | |
| 177 border: 1px solid rgba(230, 230, 230, 0.35); | |
| 178 border-radius: 4px; | |
| 179 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ | |
| 180 } | |
| 181 | |
| 182 /* The negative right margin causes the track to overflow its container. */ | |
| 183 input[type="range"]::-webkit-media-slider-container > div { | |
| 184 margin-right: -14px; | |
| 185 } | |
| 186 | |
| 187 input[type="range"]::-webkit-media-slider-thumb { | |
| 188 margin-left: -7px; | |
| 189 margin-right: -7px; | |
| 190 } | |
| 191 | |
| 192 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
a-controls-toggle-closed-captions-button { | |
| 193 -webkit-appearance: media-toggle-closed-captions-button; | |
| 194 display: -webkit-flex; | |
| 195 -webkit-flex: none; | |
| 196 border: none; | |
| 197 box-sizing: border-box; | |
| 198 width: 30px; | |
| 199 height: 30px; | |
| 200 line-height: 30px; | |
| 201 margin-left: -5px; | |
| 202 margin-right: 9px; | |
| 203 padding: 0; | |
| 204 } | |
| 205 | |
| 206 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | |
| 207 -webkit-appearance: media-enter-fullscreen-button; | |
| 208 display: -webkit-flex; | |
| 209 -webkit-flex: none; | |
| 210 border: none; | |
| 211 box-sizing: border-box; | |
| 212 width: 30px; | |
| 213 height: 30px; | |
| 214 line-height: 30px; | |
| 215 margin-left: -5px; | |
| 216 margin-right: 9px; | |
| 217 padding: 0; | |
| 218 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 18181010:
Simplify media controls CSS (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master