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