code.vuplus.com Git - vuplus_webkit/blob - 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     bottom: 50px !important;
  33     left: 50% !important;
  34     margin-left: -220px !important;
  35     padding: 12px 0 0 10px !important;
  36     width: 430px !important;
  37     height: 48px !important;
  38
  39     background-image: -webkit-gradient(
  40         linear,
  41         left top,
  42         left bottom,
  43         color-stop(0, rgba(30, 30, 30, .97)),
  44         color-stop(0.333, rgba(45, 45, 45, .97)),
  45         color-stop(0.35,  rgba(25, 25, 25, .97)),
  46         color-stop(0.366, rgba(25, 25, 25, .97)),
  47         color-stop(0.366, rgba(12, 12, 12, .97)),
  48         color-stop(1, rgba(19, 19, 19, .97))
  49     ) !important;
  50
  51     -webkit-box-shadow:
  52         inset 0 -1px 1px rgba(0, 0, 0, 0.5),
  53         inset 0  1px 0 0px   rgba(255, 255, 255, 0.15),
  54         inset 0 -1px 0 0px   rgba(202, 202, 202, 0.09),
  55         0  0   0 1px rgba(0, 0, 0, 0.5);
  56     -webkit-border-radius: 8px !important;
  57
  58     -webkit-transition: opacity 0.3s linear !important;
  59 }
  60
  61 video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
  62     opacity: 0 ! important;
  63     -webkit-transition: opacity 0 ! important;
  64 }
  65
  66 video:-webkit-full-screen::-webkit-media-controls-mute-button {
  67     display: none;
  68 }
  69
  70 video:-webkit-full-screen::-webkit-media-controls-volume-slider-container {
  71     display: none;
  72 }
  73
  74 video:-webkit-full-screen::-webkit-media-controls-volume-slider {
  75     display: none;
  76 }
  77
  78 video:-webkit-full-screen::-webkit-media-controls-volume-slider-mute-button {
  79     display: none;
  80 }
  81
  82 video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-min-button {
  83     -webkit-appearance: media-mute-button;
  84     display: block;
  85     position: absolute;
  86     left: 11px;
  87     top: 15px;
  88     width: 14px;
  89     height: 12px;
  90 }
  91
  92 video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-slider {
  93     -webkit-appearance: media-slider;
  94     display: block;
  95     position: absolute;
  96     left: 28px;
  97     top: 15px;
  98     height: 12px;
  99     width: 50px;
 100 }
 101
 102 video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-max-button {
 103     -webkit-appearance: media-mute-button;
 104     display: block;
 105     position: absolute;
 106     left: 84px;
 107     top: 15px;
 108     width: 14px;
 109     height: 12px;
 110 }
 111
 112 video:-webkit-full-screen::-webkit-media-controls-play-button {
 113     position: absolute;
 114     width: 22px;
 115     height: 23px;
 116     left: 209px;
 117     top: 9px;
 118 }
 119
 120 video:-webkit-full-screen::-webkit-media-controls-rewind-button {
 121     position: absolute;
 122     left: 162px;
 123     top: 13px;
 124     width: 18px;
 125     height: 18px;
 126 }
 127
 128 video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
 129     position: absolute;
 130     display: -webkit-box;
 131     width: 23px;
 132     height: 16px;
 133     left: 162px;
 134     top: 13px;
 135 }
 136
 137 video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
 138     position: absolute;
 139     display: -webkit-box;
 140     width: 29px;
 141     height: 16px;
 142     left: 262px;
 143     top: 13px;
 144 }
 145
 146 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
 147     position: absolute;
 148     display: -webkit-box;
 149     width: 23px;
 150     height: 16px;
 151     left: 262px;
 152     top: 13px;
 153 }
 154
 155 video:-webkit-full-screen::-webkit-media-controls-timeline-container {
 156     height: auto;
 157     width: 420px;
 158     position: absolute;
 159     bottom: 9px;
 160     left: 8px;
 161     right: 8px;
 162 }
 163
 164 video:-webkit-full-screen::-webkit-media-controls-status-display {
 165     width: 420px;
 166     position: absolute;
 167     bottom: 9px;
 168     left: 8px;
 169     right: 8px;
 170 }