Source/WebCore/css/fullscreenQuickTime.css

   1 /*
   2  * Copyright (C) 2011 Apple Inc.  All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  * 1. Redistributions of source code must retain the above copyright
   8  *    notice, this list of conditions and the following disclaimer.
   9  * 2. Redistributions in binary form must reproduce the above copyright
  10  *    notice, this list of conditions and the following disclaimer in the
  11  *    documentation and/or other materials provided with the distribution.
  12  *
  13  * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
  14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  19  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  20  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  21  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  22  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  23  */
  24
  25 /* alternate media controls - Extend fullscreen.css */
  26
  27 video:-webkit-full-screen::-webkit-media-controls-panel {
  28     -webkit-box-align: start !important;
  29     -webkit-box-pack: end !important;
  30     -webkit-appearance: none !important;
  31
  32     padding: 12px 0 0 10px !important;
  33     width: 430px !important;
  34     height: 48px !important;
  35     margin: 0 auto 50px auto !important;
  36
  37     background-image: -webkit-gradient(
  38         linear,
  39         left top,
  40         left bottom,
  41         color-stop(0, rgba(30, 30, 30, .97)),
  42         color-stop(0.333, rgba(45, 45, 45, .97)),
  43         color-stop(0.35,  rgba(25, 25, 25, .97)),
  44         color-stop(0.366, rgba(25, 25, 25, .97)),
  45         color-stop(0.366, rgba(12, 12, 12, .97)),
  46         color-stop(1, rgba(19, 19, 19, .97))
  47     ) !important;
  48
  49     -webkit-box-shadow:
  50         inset 0 -1px 1px rgba(0, 0, 0, 0.5),
  51         inset 0  1px 0 0px   rgba(255, 255, 255, 0.15),
  52         inset 0 -1px 0 0px   rgba(202, 202, 202, 0.09),
  53         0  0   0 1px rgba(0, 0, 0, 0.5);
  54     -webkit-border-radius: 8px !important;
  55
  56     -webkit-transition: opacity 0.3s linear !important;
  57 }
  58
  59 video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
  60     opacity: 0 ! important;
  61     -webkit-transition: opacity 0 ! important;
  62 }
  63
  64 video:-webkit-full-screen::-webkit-media-controls-mute-button {
  65     display: none;
  66 }
  67
  68 video:-webkit-full-screen::-webkit-media-controls-volume-slider-container {
  69     display: none;
  70 }
  71
  72 video:-webkit-full-screen::-webkit-media-controls-volume-slider {
  73     display: none;
  74 }
  75
  76 video:-webkit-full-screen::-webkit-media-controls-volume-slider-mute-button {
  77     display: none;
  78 }
  79
  80 video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-min-button {
  81     -webkit-appearance: media-mute-button;
  82     display: block;
  83     position: absolute;
  84     left: 11px;
  85     top: 15px;
  86     width: 17px;
  87     height: 14px;
  88 }
  89
  90 video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-slider {
  91     -webkit-appearance: media-fullscreen-volume-slider;
  92     display: block;
  93     position: absolute;
  94     left: 28px;
  95     top: 14px;
  96     height: 11px;
  97     width: 50px;
  98 }
  99
 100 video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-max-button {
 101     -webkit-appearance: media-mute-button;
 102     display: block;
 103     position: absolute;
 104     left: 84px;
 105     top: 15px;
 106     width: 17px;
 107     height: 14px;
 108 }
 109
 110 video:-webkit-full-screen::-webkit-media-controls-play-button {
 111     position: absolute;
 112     width: 22px;
 113     height: 23px;
 114     left: 209px;
 115     top: 9px;
 116 }
 117
 118 video:-webkit-full-screen::-webkit-media-controls-rewind-button {
 119     position: absolute;
 120     left: 162px;
 121     top: 13px;
 122     width: 18px;
 123     height: 18px;
 124 }
 125
 126 video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
 127     position: absolute;
 128     display: -webkit-box;
 129     width: 23px;
 130     height: 16px;
 131     left: 162px;
 132     top: 13px;
 133 }
 134
 135 video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
 136     position: absolute;
 137     display: -webkit-box;
 138     width: 29px;
 139     height: 16px;
 140     left: 262px;
 141     top: 13px;
 142 }
 143
 144 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
 145     position: absolute;
 146     display: -webkit-box;
 147     width: 23px;
 148     height: 16px;
 149     left: 262px;
 150     top: 13px;
 151 }
 152
 153 video:-webkit-full-screen::-webkit-media-controls-timeline-container {
 154     height: auto;
 155     width: 420px;
 156     position: absolute;
 157     bottom: 9px;
 158     left: 8px;
 159     right: 8px;
 160 }
 161
 162 video:-webkit-full-screen::-webkit-media-controls-status-display {
 163     width: 420px;
 164     position: absolute;
 165     bottom: 9px;
 166     left: 8px;
 167     right: 8px;
 168 }