Home | History | Annotate | Download | only in css 
      1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
      2  * Use of this source code is governed by a BSD-style license that can be
      3  * found in the LICENSE file. */
      4 
      5 body {
      6   -webkit-user-select: none;
      7   background: black;
      8   font-family: Noto Sans UI,sans-serif;
      9   font-size: 84%;
     10   margin: 0;
     11   overflow: hidden;
     12 }
     13 
     14 #video-player {
     15   height: 100%;
     16   left: 0;
     17   position: absolute;
     18   top: 0;
     19   width: 100%;
     20 }
     21 
     22 #thumbnail {
     23   background-position: center;
     24   background-repeat: no-repeat;
     25   background-size: contain;
     26   height: 100%;
     27   position: absolute;
     28   width: 100%;
     29 }
     30 
     31 #video-container {
     32   height: 100%;
     33   left: 0;
     34   position: absolute;
     35   top: 0;
     36   width: 100%;
     37 }
     38 
     39 #video-player[loading] #video-container {
     40   display: none;
     41 }
     42 
     43 #spinner-container {
     44   display: none;
     45   height: 100%;
     46   left: 0;
     47   position: absolute;
     48   top: 0;
     49   width: 100%;
     50 }
     51 
     52 #video-player[loading] #spinner-container {
     53   display: block;
     54 }
     55 
     56 #spinner-container > .spinner {
     57   background: 100% url(../../file_manager/foreground/images/common/spinner.svg);
     58   height: 32px;
     59   left: 50%;
     60   margin-left: -16px;
     61   margin-top: -16px;
     62   position: absolute;
     63   top: 50%;
     64   width: 32px;
     65 }
     66 
     67 video {
     68   height: 100%;
     69   left: 0;
     70   pointer-events: none;
     71   position: absolute;
     72   top: 0;
     73   width: 100%;
     74 }
     75 
     76 #video-player:not([casting]) > #cast-container {
     77   display: none;
     78 }
     79 
     80 #cast-container {
     81   height: 100%;
     82   left: 0;
     83   position: absolute;
     84   top: 0;
     85   width: 100%;
     86 }
     87 
     88 #cast-container > #cast-info {
     89   background-image: -webkit-image-set(
     90       url('../images/100/cast_big.png') 1x,
     91       url('../images/200/cast_big.png') 2x);
     92   background-position: 0 0;
     93   background-repeat: no-repeat;
     94   bottom: 70px;
     95   height: 38px;
     96   left: 40px;
     97   opacity: 0.8;
     98   padding: 5px 56px;
     99   position: absolute;
    100   z-index: 10;
    101 }
    102 
    103 #cast-container > #cast-info > .first-line {
    104   color: #fff;
    105   font-size: 12px;
    106   font-weight: bold;
    107   line-height: 14px;
    108   text-transform: uppercase;
    109 }
    110 
    111 #cast-container > #cast-info > .second-line {
    112   color: #fff;
    113   font-size: 22px;
    114   font-weight: bold;
    115   line-height: 24px;
    116 }
    117 
    118 #controls-wrapper {
    119   -webkit-box-align: center;
    120   -webkit-box-orient: horizontal;
    121   -webkit-box-pack: center;
    122   bottom: 0;
    123   display: -webkit-box;
    124   left: 0;
    125   position: absolute;
    126   right: 0;
    127 }
    128 
    129 #controls {
    130   -webkit-box-flex: 1;
    131   display: -webkit-box;
    132 }
    133 
    134 #video-player:not([tools]):not([casting]) .tool {
    135   opacity: 0;
    136 }
    137 
    138 #video-player:not([tools]):not([casting]) {
    139   cursor: none;
    140 }
    141 
    142 .tool {
    143   transition: opacity 180ms linear;
    144 }
    145 
    146 #error-wrapper {
    147   -webkit-box-align: center;
    148   -webkit-box-orient: horizontal;
    149   -webkit-box-pack: center;
    150   display: -webkit-box;
    151   height: 100%;
    152   left: 0;
    153   pointer-events: none;
    154   position: absolute;
    155   top: 0;
    156   width: 100%;
    157 }
    158 
    159 #error {
    160   -webkit-box-align: center;
    161   -webkit-box-orient: horizontal;
    162   -webkit-box-pack: center;
    163   background-color: rgba(24, 24, 24, 1);
    164   background-image: -webkit-image-set(
    165       url('../images/100/error.png') 1x,
    166       url('../images/200/error.png') 2x);
    167   background-position: 25px center;
    168   background-repeat: no-repeat;
    169   color: white;
    170   display: -webkit-box;
    171   height: 54px;
    172   padding-left: 70px;
    173   padding-right: 35px;
    174 }
    175 
    176 #error:not([visible]) {
    177   display: none;
    178 }
    179