code.vuplus.com Git - vuplus_webkit/blob - Source/WebCore/css/mediaControlsChromium.css

   1 /*
   2  * Copyright (C) 2009 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Google Inc.
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  * 1. Redistributions of source code must retain the above copyright
   9  *    notice, this list of conditions and the following disclaimer.
  10  * 2. Redistributions in binary form must reproduce the above copyright
  11  *    notice, this list of conditions and the following disclaimer in the
  12  *    documentation and/or other materials provided with the distribution.
  13  *
  14  * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
  15  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  16  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  17  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  18  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  19  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  24  */
  25
  26 /* Chromium default media controls */
  27
  28 audio {
  29     width: 300px;
  30     height: 32px;
  31 }
  32
  33 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  34     -webkit-user-select: none;
  35     position: absolute;
  36     overflow: visible;
  37     bottom: 0;
  38     width: 100%;
  39     height: 32px;
  40     z-index: 0;
  41     background-color: rgba(0, 0, 0, 0.6);
  42 }
  43
  44 video:-webkit-full-page-media::-webkit-media-controls-panel {
  45     bottom: 0px;
  46 }
  47
  48 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
  49     -webkit-appearance: media-mute-button;
  50     position: absolute;
  51     top: auto;
  52     bottom: 0;
  53     right: 0;
  54     left: auto;
  55
  56     width: 34px;
  57     height: 32px;
  58 }
  59
  60 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
  61     -webkit-appearance: media-play-button;
  62
  63     position: absolute;
  64     top: auto;
  65     bottom: 7px;
  66     left: 7px;
  67     right: 6px;
  68
  69     width: 18px;
  70     height: 19px;
  71 }
  72
  73 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
  74     -webkit-appearance: media-timeline-container;
  75     -webkit-user-select: none;
  76     -webkit-box-orient: horizontal;
  77     -webkit-box-align: center;
  78     -webkit-box-pack: center;
  79     -webkit-box-flex: 1;
  80
  81     position: absolute;
  82     top: auto;
  83     bottom: 0;
  84     left: 30px;
  85     right: 34px;
  86
  87     width: auto;
  88     height: 32px;
  89
  90     border-left: 1px solid rgba(255, 255, 255, 0.2);
  91     border-right: 1px solid rgba(255, 255, 255, 0.2);
  92 }
  93
  94 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
  95     -webkit-appearance: media-current-time-display;
  96     -webkit-user-select: none;
  97     display: -webkit-box;
  98     -webkit-box-flex: 0;
  99     -webkit-box-pack: center;
 100     -webkit-box-align: center;
 101
 102     overflow: hidden;
 103     cursor: default;
 104
 105     line-height: 21px;
 106     height: 20px;
 107     width: 58px;
 108
 109     text-align: center;
 110     font-family: Arial;
 111     font-size: 16px;
 112     font-weight: bold;
 113     color: white;
 114
 115     letter-spacing: normal;
 116     word-spacing: normal;
 117     text-transform: none;
 118     text-indent: 0;
 119     text-shadow: none;
 120     text-decoration: none;
 121 }
 122
 123 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
 124     -webkit-appearance: media-slider;
 125     display: -webkit-box;
 126     box-sizing: border-box;
 127     -webkit-box-flex: 1;
 128
 129     padding: 0px;
 130     margin: 0px 6px;
 131     height: 18px;
 132
 133     border-color: rgba(255, 255, 255, 0.2);
 134     border-style: solid;
 135     border-width: 1px;
 136     border-radius: 2px;
 137     background-color: rgba(255, 255, 255, 0.08);
 138     color: rgb(50, 140, 223);
 139 }
 140
 141 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
 142     -webkit-appearance: media-volume-slider-container;
 143     position: absolute;
 144
 145     width: 34px;
 146     height: 100px;
 147
 148     background-color: rgba(0, 0, 0, 0.6);
 149 }
 150
 151 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 152     -webkit-appearance: media-volume-slider;
 153     display: inline;
 154     position: absolute;
 155
 156     top: 10px;
 157     left: 12px;
 158
 159     width: 10px;
 160     height: 80px;
 161 }