Home | History | Annotate | Download | only in css 
      1 /*
      2  * WebKitGTK+ specific overrides for HTML5 media elements.
      3  *
      4  * Copyright (C) 2009 Zan Dobersek <zandobersek (at) gmail.com>
      5  *
      6  * This library is free software; you can redistribute it and/or
      7  * modify it under the terms of the GNU Library General Public
      8  * License as published by the Free Software Foundation; either
      9  * version 2 of the License, or (at your option) any later version.
     10  *
     11  * This library is distributed in the hope that it will be useful,
     12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
     13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
     14  * Library General Public License for more details.
     15  *
     16  * You should have received a copy of the GNU Library General Public License
     17  * along with this library; see the file COPYING.LIB.  If not, write to
     18  * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
     19  * Boston, MA 02110-1301, USA.
     20  *
     21  */
     22 
     23 audio {
     24     height: 20px;
     25     width: 300px;
     26 }
     27 
     28 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     29     display: -webkit-box;
     30     -webkit-box-orient: horizontal;
     31     -webkit-box-align: end;
     32     -webkit-user-select: none;
     33     position: absolute;
     34     bottom: 0;
     35     width: 100%;
     36     z-index: 0;
     37     overflow: hidden;
     38     text-align: right;
     39     height: 100%;
     40 }
     41 
     42 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
     43     width: 20px;
     44     height: 20px;
     45 }
     46 
     47 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
     48     width: 20px;
     49     height: 20px;
     50 }
     51 
     52 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
     53     height: 20px;
     54     border-left: 1px solid rgba(255, 255, 255, 0.2);
     55     border-right: 1px solid rgba(255, 255, 255, 0.2);
     56 }
     57 
     58 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     59     height: 20px;
     60 }
     61 
     62 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
     63     -webkit-appearance: media-current-time-display;
     64     -webkit-user-select: none;
     65     display: inline-block;
     66     height: 20px;
     67 
     68     padding: 5px;
     69 
     70     text-align: center;
     71     font-size: 10px;
     72 }
     73 
     74 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
     75     width: 20px;
     76     height: 20px;
     77 }
     78 
     79 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
     80     width: 20px;
     81     height: 20px;
     82 }
     83 
     84 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
     85     width: 20px;
     86     height: 20px;
     87 }
     88 
     89 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
     90     -webkit-appearance: media-volume-slider-container;
     91     position: absolute;
     92     height: 100px;
     93     width: 20px;
     94 }
     95 
     96 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
     97     -webkit-appearance: media-volume-slider;
     98     display: inline;
     99     position: absolute;
    100     width: 14px;
    101     height: 95px;
    102 
    103     left: 3px;
    104     top: 5px;
    105 }