Changeset 145214 in webkit
- Timestamp:
- Mar 8, 2013 6:23:01 AM (11 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r145210 r145214 1 2013-03-08 Allan Sandfeld Jensen <allan.jensen@digia.com> 2 3 [Qt] HTML5 video - sound volume bar out of widget 4 https://bugs.webkit.org/show_bug.cgi?id=108213 5 6 Reviewed by Jocelyn Turcotte. 7 8 Since we use Safari shadow DOM for media controls, follow 9 the overall layout of Safari media control CSS. 10 11 * css/mediaControlsQt.css: 12 (audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel): 13 (audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button): 14 (audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button): 15 (audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container): 16 (audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display): 17 (audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display): 18 (audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline): 19 (audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container): 20 (audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider): 21 (audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button): 22 (audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button): 23 (audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button): 24 (audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button): 25 (audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button): 26 1 27 2013-03-08 Allan Sandfeld Jensen <allan.jensen@digia.com> 2 28 -
trunk/Source/WebCore/css/mediaControlsQt.css
r142947 r145214 2 2 * QtWebKit specific overrides for HTML5 media elements. 3 3 * 4 * Copyright (C) 2009 Apple Inc. All rights reserved.4 * Copyright (C) 2009, 2011 Apple Inc. All rights reserved. 5 5 * Copyright (C) 2008 Nokia Corporation and/or its subsidiary(-ies) 6 * Copyright (C) 2013 Digia Plc. and/or its subsidiary(-ies) 6 7 * 7 8 * Redistribution and use in source and binary forms, with or without … … 33 34 } 34 35 35 audio::-webkit-media-controls-panel { 36 display: -webkit-flex; 37 -webkit-flex-direction: row; 38 -webkit-align-items: flex-end; 39 -webkit-user-select: none; 40 position: absolute; 41 bottom: 0; 42 width: 100%; 43 z-index: 0; 36 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 44 37 overflow: visible; 45 height: 100%; 46 text-align: right; 38 height: 34px; 39 max-width: 800px; 40 margin-left: auto; 41 margin-right: auto; 47 42 } 48 43 49 video::-webkit-media-controls-panel { 50 display: -webkit-flex; 51 -webkit-flex-direction: row; 52 -webkit-align-items: flex-end; 53 -webkit-user-select: none; 54 position: absolute; 55 bottom: 0; 56 width: 100%; 57 z-index: 0; 58 overflow: hidden; 59 height: 100%; 60 text-align: right; 61 } 62 63 video:-webkit-full-page-media::-webkit-media-controls-panel { 64 bottom: 0px; 65 } 66 67 audio::-webkit-media-controls-mute-button { 44 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 68 45 width: 12px; 69 46 height: 12px; 70 47 padding: 6px; 71 margin: 5px 5px 5px 3px; 48 margin-left: 6px; 49 margin-right: 3px; 50 border: none !important; 51 52 position: relative; 53 z-index: 1; 54 } 55 56 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 57 width: 9px; 58 height: 12px; 59 padding: 6px 12px 6px 11px; 60 margin-left: 5px; 61 margin-right: 3px; 72 62 border: none !important; 73 63 } 74 64 75 video::-webkit-media-controls-mute-button { 76 width: 12px; 77 height: 12px; 78 padding: 6px; 79 margin: 5px 5px 5px 3px; 80 border: none !important; 81 } 82 83 audio::-webkit-media-controls-play-button { 84 width: 9px; 85 height: 12px; 86 padding: 6px 12px 6px 11px; 87 margin: 5px 3px 5px 5px; 88 border: none !important; 89 } 90 91 video::-webkit-media-controls-play-button { 92 width: 9px; 93 height: 12px; 94 padding: 6px 12px 6px 11px; 95 margin: 5px 3px 5px 5px; 96 border: none !important; 97 } 98 99 audio::-webkit-media-controls-timeline-container { 65 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 100 66 height: 34px; 101 67 } 102 68 103 video::-webkit-media-controls-timeline-container { 104 height: 34px; 105 } 106 107 audio::-webkit-media-controls-current-time-display { 69 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 108 70 -webkit-appearance: media-current-time-display; 109 71 -webkit-user-select: none; … … 111 73 height: 12px; 112 74 padding: 6px; 113 margin: 5px 3px; 75 margin-left: 3px; 76 margin-right: 5px; 114 77 115 78 overflow: hidden; … … 117 80 118 81 text-align: center; 82 font: -webkit-small-control; 119 83 font-size: 10px; 120 font-family: Verdana;121 84 font-weight: bold; 122 85 color: white; 123 86 } 124 87 125 video::-webkit-media-controls-current-time-display { 126 -webkit-appearance: media-current-time-display; 127 -webkit-user-select: none; 128 display: inline-block; 129 height: 12px; 130 padding: 6px; 131 margin: 5px 3px; 132 133 overflow: hidden; 134 cursor: default; 135 136 text-align: center; 137 font-size: 10px; 138 font-family: Verdana; 139 font-weight: bold; 140 color: white; 141 } 142 143 audio::-webkit-media-controls-time-remaining-display { 88 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 144 89 display: none; 145 90 } 146 91 147 video::-webkit-media-controls-time-remaining-display { 148 display: none; 92 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 93 display: -webkit-flex; 94 -webkit-flex: 1 1; 95 height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */ 96 padding: 6px 8px; 149 97 } 150 98 151 audio::-webkit-media-controls-timeline { 152 height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */ 153 padding: 6px 8px; 154 margin: 5px 3px; 99 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 100 -webkit-appearance: media-volume-slider-container; 101 position: absolute; 102 bottom: 29px; 103 z-index: 2; 104 105 width: 24px; 106 height: 103px; 155 107 } 156 108 157 video::-webkit-media-controls-timeline { 158 height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */ 159 padding: 6px 8px; 160 margin: 5px 3px; 161 } 162 163 audio::-webkit-media-controls-volume-slider-container { 164 -webkit-appearance: media-volume-slider-container; 165 position: absolute; 166 height: 103px; 167 width: 24px; 168 } 169 170 video::-webkit-media-controls-volume-slider-container { 171 -webkit-appearance: media-volume-slider-container; 172 position: absolute; 173 height: 103px; 174 width: 24px; 175 } 176 177 audio::-webkit-media-controls-volume-slider { 109 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 178 110 -webkit-appearance: media-volume-slider; 179 111 display: inline; 180 112 position: absolute; 181 113 182 width: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */ 183 padding: 6px; 184 height: 88px; 185 margin: 0 0 3px 0; 186 } 187 188 video::-webkit-media-controls-volume-slider { 189 -webkit-appearance: media-volume-slider; 190 display: inline; 191 position: absolute; 114 top: 0px; 115 left: 6px; 192 116 193 117 width: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */ 194 118 padding: 6px; 195 119 height: 88px; 196 margin: 0 0 3px 0; 120 197 121 } 198 122 199 audio::-webkit-media-controls-seek-back-button {123 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 200 124 display: none; 201 125 } 202 126 203 video::-webkit-media-controls-seek-back-button { 204 display: none; 205 } 206 207 audio::-webkit-media-controls-seek-forward-button { 208 display: none; 209 } 210 211 video::-webkit-media-controls-seek-forward-button { 127 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 212 128 display: none; 213 129 } … … 227 143 } 228 144 229 audio::-webkit-media-controls-rewind-button {145 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 230 146 display: none; 231 147 } 232 148 233 video::-webkit-media-controls-rewind-button {149 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 234 150 display: none; 235 151 } 236 152 237 audio::-webkit-media-controls-return-to-realtime-button { 238 display: none; 239 } 240 241 video::-webkit-media-controls-return-to-realtime-button { 242 display: none; 243 } 244 245 audio::-webkit-media-controls-toggle-closed-captions-button { 246 display: none; 247 } 248 249 video::-webkit-media-controls-toggle-closed-captions-button { 153 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 250 154 display: none; 251 155 }
Note: See TracChangeset
for help on using the changeset viewer.