Source/WebCore/css/mediaControlsQuickTime.css - chromium/blink - Git at Google

 /*
  * 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;
 }

 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;
 }

 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;
     cursor: default;
 }

 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;
     -webkit-user-select: none;
 }

 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;
 }

 video::-webkit-media-controls-closed-captions-track-list ul {
     list-style-type: none;
     margin: 0 0 8px 0;
     padding: 0;
 }

 video::-webkit-media-controls-closed-captions-track-list li {
     color: white;
     background-image: none;
     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;
 }

 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);
 }

 video::-webkit-media-controls-closed-captions-track-list li.selected {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="white" d="M9.079,130.709l24.282-24.567l48.849,48.992L228.47,8.873l24.424,24.282L82.209,203.84L9.079,130.709z"/></svg>');
     background-repeat: no-repeat;
     background-position: 0.5em 0.5em;
     background-size: 1.1em 1.1em;
 }

 video::-webkit-media-controls-closed-captions-track-list li.selected:hover {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="white" d="M9.079,130.709l24.282-24.567l48.849,48.992L228.47,8.873l24.424,24.282L82.209,203.84L9.079,130.709z"/></svg>'), -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: 1.1em 1.1em, 100% 100%;
 }
	/*
	* 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;
	}

	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;
	}

	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;
	cursor: default;
	}

	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;
	-webkit-user-select: none;
	}

	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;
	}

	video::-webkit-media-controls-closed-captions-track-list ul {
	list-style-type: none;
	margin: 0 0 8px 0;
	padding: 0;
	}

	video::-webkit-media-controls-closed-captions-track-list li {
	color: white;
	background-image: none;
	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;
	}

	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);
	}

	video::-webkit-media-controls-closed-captions-track-list li.selected {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="white" d="M9.079,130.709l24.282-24.567l48.849,48.992L228.47,8.873l24.424,24.282L82.209,203.84L9.079,130.709z"/></svg>');
	background-repeat: no-repeat;
	background-position: 0.5em 0.5em;
	background-size: 1.1em 1.1em;
	}

	video::-webkit-media-controls-closed-captions-track-list li.selected:hover {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="white" d="M9.079,130.709l24.282-24.567l48.849,48.992L228.47,8.873l24.424,24.282L82.209,203.84L9.079,130.709z"/></svg>'), -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: 1.1em 1.1em, 100% 100%;
	}