src/ui/file_manager/video_player/css/video_player.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,Droid Sans Fallback,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 /* Hides controls when disabled mode */
 143 #video-player[disabled] > #controls-wrapper .tool {
 144   display: none;
 145 }
 146
 147 .tool {
 148   transition: opacity 180ms linear;
 149 }
 150
 151 #error-wrapper {
 152   -webkit-box-align: center;
 153   -webkit-box-orient: horizontal;
 154   -webkit-box-pack: center;
 155   display: -webkit-box;
 156   height: 100%;
 157   left: 0;
 158   pointer-events: none;
 159   position: absolute;
 160   top: 0;
 161   width: 100%;
 162 }
 163
 164 #error {
 165   -webkit-box-align: center;
 166   -webkit-box-orient: horizontal;
 167   -webkit-box-pack: center;
 168   background-color: rgba(24, 24, 24, 1);
 169   background-image: -webkit-image-set(
 170       url('../images/100/error.png') 1x,
 171       url('../images/200/error.png') 2x);
 172   background-position: 25px center;
 173   background-repeat: no-repeat;
 174   color: white;
 175   display: -webkit-box;
 176   height: 54px;
 177   padding-left: 70px;
 178   padding-right: 35px;
 179 }
 180
 181 #error:not([visible]) {
 182   display: none;
 183 }