Source/WebCore/css/mediaControlsChromiumAndroid.css

   1 /*
   2  * Copyright (C) 2012 Google Inc.
   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 /* Media controls for Chromium on Android*/
  26
  27 body:-webkit-full-page-media {
  28     background-color: rgb(0, 0, 0);
  29 }
  30
  31 audio {
  32     width: 300px;
  33     height: 35px;
  34 }
  35
  36 audio:-webkit-full-page-media, video:-webkit-full-page-media {
  37     max-height: 100%;
  38     max-width: 100%;
  39 }
  40
  41 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  42     display: -webkit-box;
  43     -webkit-box-orient: horizontal;
  44     -webkit-box-align: center;
  45     -webkit-box-pack: center;
  46     bottom: auto;
  47     height: 35px;
  48     background-color: rgba(20, 20, 20, 0.8);
  49 }
  50
  51 audio:-webkit-full-page-media::-webkit-media-controls-panel,
  52 video:-webkit-full-page-media::-webkit-media-controls-panel {
  53     bottom: 0px;
  54 }
  55
  56 ::-webkit-media-controls {
  57     display: -webkit-box;
  58     -webkit-box-orient: vertical;
  59     -webkit-box-pack: end;
  60     -webkit-box-align: center;
  61 }
  62
  63 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
  64     width: 100%;
  65     max-width: 800px;
  66     height: 35px;
  67     bottom: 0;
  68     text-indent: 0;
  69     padding: 0;
  70     box-sizing: border-box;
  71 }
  72
  73 video::-webkit-media-controls-enclosure {
  74     padding: 0px 5px 5px 5px;
  75     height: 35px;
  76 }
  77
  78 audio::-webkit-media-controls-overlay-enclosure {
  79     display: none;
  80 }
  81
  82 video::-webkit-media-controls-overlay-enclosure {
  83     display: -webkit-box;
  84     -webkit-box-orient: horizontal;
  85     -webkit-box-pack:center;
  86     -webkit-box-align:center;
  87     -webkit-box-flex:1;
  88     width: 100%;
  89     max-width: 800px;
  90     text-indent: 0;
  91     box-sizing: border-box;
  92 }
  93
  94 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
  95     display: none;
  96 }
  97
  98 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
  99     -webkit-appearance: media-play-button;
 100     display: inline;
 101     border: none;
 102     box-sizing: border-box;
 103     width: 35px;
 104     height: 35px;
 105     line-height: 35px;
 106     margin-left: 9px;
 107     margin-right: 9px;
 108     padding: 0;
 109 }
 110
 111 video::-webkit-media-controls-overlay-play-button {
 112     -webkit-appearance: media-overlay-play-button;
 113     -webkit-box-align: center;
 114     display: -webkit-box;
 115     border: none;
 116     box-sizing: border-box;
 117     background-color: transparent;
 118     width: 80px;
 119     height: 80px;
 120     padding: 0;
 121 }
 122
 123 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
 124 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
 125     -webkit-appearance: media-current-time-display;
 126     -webkit-user-select: none;
 127     display: block;
 128     border: none;
 129     cursor: default;
 130
 131     height: 35px;
 132     margin: 0 9px 0 0;
 133     padding: 0;
 134
 135     line-height: 35px;
 136     font-family: Arial, Helvetica, sans-serif;
 137     font-size: 18px;
 138     font-weight: bold;
 139     color: white;
 140
 141     letter-spacing: normal;
 142     word-spacing: normal;
 143     text-transform: none;
 144     text-indent: 0;
 145     text-shadow: none;
 146     text-decoration: none;
 147 }
 148
 149 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
 150     -webkit-appearance: media-slider;
 151     display: -webkit-box;
 152     -webkit-box-flex: 1;
 153     height: 8px;
 154     margin: 0 15px 0 0;
 155     padding: 0;
 156     background-color: transparent;
 157     min-width: 25px;
 158 }
 159
 160
 161 video::-webkit-media-controls-fullscreen-button {
 162     -webkit-appearance: media-enter-fullscreen-button;
 163     display: inline;
 164     border: none;
 165     box-sizing: border-box;
 166     width: 35px;
 167     height: 35px;
 168     line-height: 35px;
 169     margin-left: -5px;
 170     margin-right: 9px;
 171     padding: 0;
 172 }
 173
 174 input[type="range"]::-webkit-media-slider-container {
 175     display: -webkit-box;
 176     -webkit-box-align: center;
 177     -webkit-box-orient: horizontal;
 178     -webkit-box-sizing: border-box;
 179     height: 100%;
 180     width: 100%;
 181     border: 1px solid rgba(230, 230, 230, 0.35);
 182     border-radius: 4px;
 183     background-color: transparent;
 184 }
 185
 186 input[type="range"]::-webkit-media-slider-thumb {
 187     display: block;
 188     -webkit-appearance: sliderthumb-horizontal;
 189     -webkit-box-sizing: border-box;
 190     position: relative;
 191     bottom: 1px;
 192     margin-left: -7px;
 193     margin-right: -7px;
 194 }
 195
 196 audio::-webkit-media-controls-fullscreen-button {
 197     display: none;
 198 }
 199
 200 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 201     display: none;
 202 }