| /* |
| * Copyright (C) 2009, 2010, 2011 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; |
| overflow: visible; |
| height: 25px; |
| } |
| |
| video:-webkit-full-page-media::-webkit-media-controls-panel { |
| bottom: 0px; |
| } |
| |
| audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { |
| -webkit-box-ordinal-group: 2; /* Before the fullscreen button */ |
| |
| width: 14px; |
| height: 12px; |
| margin-left: 2px; |
| margin-right: 9px; |
| border: none !important; |
| |
| position: relative; |
| z-index: 1; |
| } |
| |
| audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { |
| width: 16px; |
| height: 16px; |
| margin-left: 6px; |
| margin-right: 1px; |
| border: none !important; |
| } |
| |
| 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; |
| border: none !important; |
| } |
| |
| audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { |
| display: none; |
| width: 0px; |
| border: none !important; |
| } |
| |
| 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 */ |
| border: none !important; |
| } |
| |
| 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; |
| border: none !important; |
| } |
| |
| 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; |
| border: none !important; |
| } |
| |
| 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-volume-slider-container, video::-webkit-media-controls-volume-slider-container { |
| -webkit-appearance: media-volume-slider-container; |
| position: absolute; |
| |
| bottom: 0px; |
| z-index: 2; |
| |
| width: 22px; |
| height: 114px; |
| } |
| |
| audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { |
| -webkit-appearance: media-volume-slider; |
| display: inline; |
| position: absolute; |
| |
| top: 7px; |
| left: 6px; |
| |
| width: 10px; |
| height: 80px; |
| } |
| |
| audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { |
| -webkit-appearance: media-volume-slider-mute-button; |
| display: inline; |
| |
| position: absolute; |
| |
| bottom: 7px; |
| left: 0px; |
| |
| width: 14px; |
| height: 12px; |
| |
| margin-left: 2px; |
| margin-right: 9px; |
| |
| border: none !important; |
| } |
| |
| 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 */ |
| border: none !important; |
| } |
| |
| audio::-webkit-media-controls-closed-captions-container, video::-webkit-media-controls-closed-captions-container { |
| -webkit-appearance: media-closed-captions-container; |
| position: absolute; |
| display: block; |
| bottom: 29px; |
| margin-left: -155px; |
| z-index: 2; |
| width: 200px; |
| height: 250px; |
| background-color: rgba(0, 0, 0, 0.85); |
| border: 1px solid rgb(66, 66, 66); |
| border-radius: 8px; |
| } |
| |
| audio::-webkit-media-controls-closed-captions-track-list, video::-webkit-media-controls-closed-captions-track-list { |
| -webkit-appearance: media-closed-captions-track-list; |
| position: absolute; |
| display: block; |
| top: 5px; |
| left: 5px; |
| width: 190px; |
| height: 240px; |
| overflow-x: hidden; |
| overflow-y: scroll; |
| text-align: left; |
| font-family: "Helvetica Bold", "Helvetica"; |
| font-weight: bold; |
| font-size: 9pt; |
| } |
| |
| audio::-webkit-media-controls-closed-captions-track-list h3, |
| video::-webkit-media-controls-closed-captions-track-list h3 { |
| margin: 0; |
| color: #bbb; |
| text-shadow: 0 1px 0 black; |
| padding-left: 4px; |
| padding-top: 4px; |
| padding-bottom: 4px; |
| border-bottom: 1px solid #555; |
| font-size: 9pt; |
| } |
| |
| audio::-webkit-media-controls-closed-captions-track-list ul, |
| video::-webkit-media-controls-closed-captions-track-list ul { |
| list-style-type: none; |
| margin: 0 0 8px 0; |
| padding: 0; |
| } |
| |
| audio::-webkit-media-controls-closed-captions-track-list li, |
| video::-webkit-media-controls-closed-captions-track-list li { |
| color: white; |
| text-shadow: 0 1px 0 black; |
| margin: 0; |
| padding-left: 24px; |
| padding-right: 10px; |
| padding-top: 0.35em; |
| padding-bottom: 0.3em; |
| width: 190px; |
| height: 2.0em; |
| border-bottom: 1px solid #555; |
| box-sizing: border-box; |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| -webkit-text-overflow: ellipsis; |
| } |
| |
| audio::-webkit-media-controls-closed-captions-track-list li:hover, |
| video::-webkit-media-controls-closed-captions-track-list li:hover { |
| background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79, 112, 245)), color-stop(1, rgb(28, 66, 245))); |
| border-bottom: 1px solid rgb(28, 66, 245); |
| } |
| |
| audio::-webkit-media-controls-closed-captions-track-list li.selected, |
| video::-webkit-media-controls-closed-captions-track-list li.selected { |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA9CAYAAADmgpoeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTBEQkI5QzgyMTc4MTFFMkJERDdBRjI3NEQwNzZERjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTBEQkI5QzkyMTc4MTFFMkJERDdBRjI3NEQwNzZERjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMERCQjlDNjIxNzgxMUUyQkREN0FGMjc0RDA3NkRGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMERCQjlDNzIxNzgxMUUyQkREN0FGMjc0RDA3NkRGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqpWz0UAAAHPSURBVHja7JqBbYQwDEXdDRghI7BBGSEjZARGyAaMwAg3AtcJMkJug4xAUymqTggVO1yJbZ0lCyGd0D3Z/Pw4fICAWNfV5IvN+Zmzz2k2P7mX61fOx9M9X6Ccy0qLOWfHGcqt9Ji4V6oGyr2hGkD1GqG6nFEVVAGbNEIN6qAKWKCsU1KgRgLUIgXqRzASEiqydhQbME+oVi8FyhCqNYKUKGZVz3v1VC1MpLJlUVetUWO1AkgKgnUaJEFh161ZWrW8OsEoYJhqeWlQDlmtThpY1FitQWu1bhqVELsgi1NCr65aBNEYrmibefNnQrFBpuJ5tum2pFgdjOOeKMqFFA33n1CUQWXAwJXnHko8B1dAgkNOn/wVLzkVbnnBrNBcpWBUOH9i7bpxHontjsWQm0nLeSaxO8hEiFFsubCGmpZEnnH5lmCU8fNvSyLbsK0vJB7vLMhK8xiAEsXEN3MalXDUby3aOI1Kc5xeAMZve1L5mYKMo6CTLRmBa5xsSd4HDMQzY1kzjYqWFHMoTm1JB1KCuHCLG4QGdvuuC72kBYlx4OYTSI2D7c0MkuOPtc2C9NgRkgQaYkdIJtASm5F2rwnMsHfyJ+V/0gjWcWjDbwEGAN9/NX8H7V/FAAAAAElFTkSuQmCC'); |
| background-repeat: no-repeat; |
| background-position: 0.5em 0.5em; |
| background-size: 1em 1em; |
| } |
| |
| audio::-webkit-media-controls-closed-captions-track-list li.selected:hover, |
| video::-webkit-media-controls-closed-captions-track-list li.selected:hover { |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA9CAYAAADmgpoeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTBEQkI5QzgyMTc4MTFFMkJERDdBRjI3NEQwNzZERjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTBEQkI5QzkyMTc4MTFFMkJERDdBRjI3NEQwNzZERjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMERCQjlDNjIxNzgxMUUyQkREN0FGMjc0RDA3NkRGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMERCQjlDNzIxNzgxMUUyQkREN0FGMjc0RDA3NkRGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqpWz0UAAAHPSURBVHja7JqBbYQwDEXdDRghI7BBGSEjZARGyAaMwAg3AtcJMkJug4xAUymqTggVO1yJbZ0lCyGd0D3Z/Pw4fICAWNfV5IvN+Zmzz2k2P7mX61fOx9M9X6Ccy0qLOWfHGcqt9Ji4V6oGyr2hGkD1GqG6nFEVVAGbNEIN6qAKWKCsU1KgRgLUIgXqRzASEiqydhQbME+oVi8FyhCqNYKUKGZVz3v1VC1MpLJlUVetUWO1AkgKgnUaJEFh161ZWrW8OsEoYJhqeWlQDlmtThpY1FitQWu1bhqVELsgi1NCr65aBNEYrmibefNnQrFBpuJ5tum2pFgdjOOeKMqFFA33n1CUQWXAwJXnHko8B1dAgkNOn/wVLzkVbnnBrNBcpWBUOH9i7bpxHontjsWQm0nLeSaxO8hEiFFsubCGmpZEnnH5lmCU8fNvSyLbsK0vJB7vLMhK8xiAEsXEN3MalXDUby3aOI1Kc5xeAMZve1L5mYKMo6CTLRmBa5xsSd4HDMQzY1kzjYqWFHMoTm1JB1KCuHCLG4QGdvuuC72kBYlx4OYTSI2D7c0MkuOPtc2C9NgRkgQaYkdIJtASm5F2rwnMsHfyJ+V/0gjWcWjDbwEGAN9/NX8H7V/FAAAAAElFTkSuQmCC'), -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79, 112, 245)), color-stop(1, rgb(28, 66, 245))); |
| background-repeat: no-repeat, repeat; |
| background-position: 0.5em 0.5em, top left; |
| background-size: 1em 1em, 100% 100%; |
| } |