/* | |
* Copyright (C) 2009 Apple Inc. All rights reserved. | |
* | |
* Redistribution and use in source and binary forms, with or without | |
* modification, are permitted provided that the following conditions | |
* are met: | |
* 1. Redistributions of source code must retain the above copyright | |
* notice, this list of conditions and the following disclaimer. | |
* 2. Redistributions in binary form must reproduce the above copyright | |
* notice, this list of conditions and the following disclaimer in the | |
* documentation and/or other materials provided with the distribution. | |
* | |
* THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | |
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | |
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | |
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | |
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | |
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | |
* 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. | |
*/ | |
/* alternate media controls - Extend mediaControls.css */ | |
audio { | |
width: 200px; | |
height: 25px; | |
} | |
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
/* In mediaControls.css */ | |
-webkit-appearance: media-controls-background; | |
height: 25px; | |
} | |
video:-webkit-full-page-media::-webkit-media-controls-panel { | |
bottom: -25px; | |
} | |
audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { | |
-webkit-box-ordinal-group: 2; /* Before the fullscreen button */ | |
width: 15px; | |
height: 14px; | |
margin-left: 2px; | |
margin-right: 8px; | |
} | |
audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { | |
width: 16px; | |
height: 16px; | |
margin-left: 6px; | |
margin-right: 1px; | |
} | |
audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { | |
-webkit-appearance: none; | |
-webkit-box-orient: horizontal; | |
-webkit-box-align: center; | |
-webkit-box-pack: center; | |
-webkit-box-flex: 1; | |
text-align: right; | |
height: auto; | |
} | |
audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { | |
-webkit-user-select: none; | |
display: -webkit-box; | |
-webkit-box-flex: 0; | |
-webkit-box-pack: center; | |
-webkit-box-align: center; | |
cursor: default; | |
font: -webkit-small-control; | |
font-size: 9px; | |
overflow: hidden; | |
width: 45px; | |
color: white; | |
text-shadow: black 0px 1px 1px; | |
letter-spacing: normal; | |
word-spacing: normal; | |
line-height: normal; | |
text-transform: none; | |
text-indent: 0; | |
text-decoration: none; | |
} | |
audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { | |
-webkit-user-select: none; | |
display: -webkit-box; | |
-webkit-box-flex: 0; | |
-webkit-box-pack: center; | |
-webkit-box-align: center; | |
cursor: default; | |
font: -webkit-small-control; | |
font-size: 9px; | |
overflow: hidden; | |
width: 45px; | |
color: white; | |
text-shadow: black 0px 1px 1px; | |
letter-spacing: normal; | |
word-spacing: normal; | |
line-height: normal; | |
text-transform: none; | |
text-indent: 0; | |
text-decoration: none; | |
} | |
audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | |
display: -webkit-box; | |
-webkit-box-flex: 1; | |
height: 13px; | |
padding: 0px; | |
margin: 0px; | |
margin-top: 2px; | |
} | |
audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { | |
display: none; | |
width: 0px; | |
} | |
audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { | |
display: none; | |
width: 0px; | |
} | |
audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { | |
width: 16px; | |
height: 16px; | |
margin-left: 7px; | |
margin-right: 7px; | |
-webkit-box-ordinal-group: 4; /* At the very end */ | |
} | |
audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { | |
display: -webkit-box; | |
-webkit-appearance: media-rewind-button; | |
width: 18px; | |
height: 18px; | |
margin-bottom: 1px; | |
margin-left: 6px; | |
margin-right: 2px; | |
} | |
audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { | |
display: none; | |
-webkit-appearance: media-return-to-realtime-button; | |
width: 16px; | |
height: 11px; | |
margin-left: 6px; | |
margin-right: 2px; | |
} | |
audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display { | |
-webkit-user-select: none; | |
cursor: default; | |
display: -webkit-box; | |
-webkit-box-flex: 1; | |
font: -webkit-small-control; | |
color: white; | |
font-size: 10px; | |
line-height: 13px; | |
overflow: hidden; | |
text-shadow: black 0px 1px 1px; | |
margin-left: 10px; | |
margin-right: 10px; | |
letter-spacing: normal; | |
word-spacing: normal; | |
line-height: normal; | |
text-transform: none; | |
text-indent: 0; | |
text-decoration: none; | |
} | |
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-box; | |
width: 16px; | |
height: 16px; | |
margin-left: 7px; | |
margin-right: 7px; | |
-webkit-box-ordinal-group: 3; /* between mute and fullscreen */ | |
} |