1/* 2 * BlackBerry specific overrides for HTML5 media elements. 3 * 4 * Copyright (C) 2009 Apple Inc. All rights reserved. 5 * Copyright (C) 2010, 2011, 2012 Research In Motion Limited. All rights reserved. 6 * 7 * Redistribution and use in source and binary forms, with or without 8 * modification, are permitted provided that the following conditions 9 * are met: 10 * 1. Redistributions of source code must retain the above copyright 11 * notice, this list of conditions and the following disclaimer. 12 * 2. Redistributions in binary form must reproduce the above copyright 13 * notice, this list of conditions and the following disclaimer in the 14 * documentation and/or other materials provided with the distribution. 15 * 16 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY 17 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 18 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 19 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR 20 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 21 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 22 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 23 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 24 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 25 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 */ 27 28 /* BlackBerry default media controls. */ 29 30audio { 31 background-color: rgba(38, 38, 38, 0.8); 32 width: 300px; 33 height: 32px; 34} 35 36audio::-webkit-media-controls-embedded-panel, video::-webkit-media-controls-embedded-panel { 37 display: -webkit-flex; 38 -webkit-flex-direction: row; 39 -webkit-align-items: center; 40 position: absolute; 41 bottom: 0; 42 width: 100%; 43 height: auto; 44 background-color: rgba(38, 38, 38, 0.8); 45} 46 47audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 48 display: none; 49} 50 51video::-webkit-media-controls-button-group-container, audio::-webkit-media-controls-button-group-container { 52 display: none; 53} 54 55video::-webkit-media-controls-fullscreen-time-display-container, audio::-webkit-media-controls-fullscreen-time-display-container { 56 display: none; 57} 58 59video::-webkit-media-controls-time-display-container, audio::-webkit-media-controls-time-display-container { 60 -webkit-appearance: media-controls-background; 61 display: -webkit-flex; 62 -webkit-flex-direction: row; 63 -webkit-align-items: center; 64 -webkit-justify-content: space-between; 65 -webkit-flex: 1 1; 66} 67 68video::-webkit-media-controls-fullscreen-play-button, audio::-webkit-media-controls-fullscreen-play-button { 69 display: none; 70} 71 72video::-webkit-media-controls-play-button, audio::-webkit-media-controls-play-button { 73 -webkit-appearance: media-play-button; 74 display: -webkit-flex; 75} 76 77audio::-webkit-media-controls-fullscreen-timeline-container, video::-webkit-media-controls-fullscreen-timeline-container { 78 display: none; 79} 80 81video::-webkit-media-controls-timeline-container, audio::-webkit-media-controls-timeline-container { 82 -webkit-appearance: media-controls-background; 83 display: -webkit-flex; 84 -webkit-flex-direction: column; 85 -webkit-align-items: stretch; 86 -webkit-justify-content: center; 87 -webkit-flex: 1 1; 88 height: auto; 89 width: 100%; 90} 91 92audio::-webkit-media-controls-fullscreen-current-time-display, video::-webkit-media-controls-fullscreen-current-time-display { 93 display: none; 94} 95 96audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 97 -webkit-appearance: media-current-time-display; 98 display: -webkit-flex; 99 -webkit-flex-direction: row; 100 -webkit-align-items: center; 101 -webkit-justify-content: flex-end; 102 -webkit-flex: 0 0; 103 color: #fafafa; 104} 105 106video::-webkit-media-controls-fullscreen-time-remaining-display, audio::-webkit-media-controls-fullscreen-time-remaining-display { 107 display: none; 108} 109 110video::-webkit-media-controls-time-remaining-display, audio::-webkit-media-controls-time-remaining-display { 111 -webkit-appearance: media-time-remaining-display; 112 display: -webkit-flex; 113 -webkit-flex-direction: row; 114 -webkit-align-items: center; 115 -webkit-justify-content: flex-end; 116 -webkit-flex: 0 0; 117 color: rgb(125, 125, 125); 118} 119 120audio::-webkit-media-controls-fullscreen-timeline, video::-webkit-media-controls-fullscreen-timeline { 121 display: none; 122} 123 124audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 125 -webkit-appearance: media-slider; 126 display: -webkit-flex; 127 -webkit-flex: 1 1; 128 margin-bottom: 2px; 129} 130 131video::-webkit-media-controls-fullscreen-fullscreen-button, audio::-webkit-media-controls-fullscreen-fullscreen-button { 132 display: none; 133} 134 135video::-webkit-media-controls-fullscreen-button { 136 -webkit-appearance: media-enter-fullscreen-button; 137 display: -webkit-flex; 138} 139 140audio::-webkit-media-controls-fullscreen-button { 141 display: none; 142} 143 144audio::-webkit-media-controls-audio-mute-button { 145 -webkit-appearance: media-mute-button; 146 display: -webkit-flex; 147} 148 149video::-webkit-media-controls-audio-mute-button { 150 display: none; 151} 152 153audio::-webkit-media-controls-volume-slider-container { 154 -webkit-appearance: media-volume-slider-container; 155 display: -webkit-flex; 156 -webkit-flex-direction: column; 157 -webkit-align-items: center; 158 -webkit-justify-content: flex-end; 159 -webkit-flex: 1 1; 160 -webkit-user-select: none; 161 position: absolute; 162 left: 0px; 163 right: 0px; 164 background-color: rgba(38, 38, 38, 0.8); 165} 166 167video::-webkit-media-controls-volume-slider-container { 168 display: none; 169} 170 171audio::-webkit-media-controls-volume-slider { 172 -webkit-appearance: media-volume-slider; 173 display: -webkit-flex; 174 -webkit-flex: 1 1; 175 position: absolute; 176 left: 3%; 177 right: 3%; 178} 179 180video::-webkit-media-controls-volume-slider { 181 display: none; 182} 183 184video::-webkit-media-controls-fullscreen-button-divider, audio::-webkit-media-controls-fullscreen-button-divider { 185 display: none; 186} 187 188video::-webkit-media-controls-fullscreen-button-container, video::-webkit-media-controls-play-button-container, audio::-webkit-media-controls-fullscreen-button-container, audio::-webkit-media-controls-play-button-container { 189 display: none; 190} 191