| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| body { |
| -webkit-user-select: none; |
| background: black; |
| font-family: Noto Sans UI,Droid Sans Fallback,sans-serif; |
| font-size: 84%; |
| margin: 0; |
| overflow: hidden; |
| } |
| |
| #video-player { |
| height: 100%; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #thumbnail { |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: contain; |
| height: 100%; |
| position: absolute; |
| width: 100%; |
| } |
| |
| #video-container { |
| height: 100%; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #video-player[loading] #video-container { |
| display: none; |
| } |
| |
| #spinner-container { |
| display: none; |
| height: 100%; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #video-player[loading] #spinner-container { |
| display: block; |
| } |
| |
| #spinner-container > .spinner { |
| background: 100% url(../../file_manager/foreground/images/common/spinner.svg); |
| height: 32px; |
| left: 50%; |
| margin-left: -16px; |
| margin-top: -16px; |
| position: absolute; |
| top: 50%; |
| width: 32px; |
| } |
| |
| video { |
| height: 100%; |
| left: 0; |
| pointer-events: none; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #video-player:not([casting]) > #cast-container { |
| display: none; |
| } |
| |
| #cast-container { |
| height: 100%; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #cast-container > #cast-info { |
| background-image: -webkit-image-set( |
| url('../images/100/cast_big.png') 1x, |
| url('../images/200/cast_big.png') 2x); |
| background-position: 0 0; |
| background-repeat: no-repeat; |
| bottom: 70px; |
| height: 38px; |
| left: 40px; |
| opacity: 0.8; |
| padding: 5px 56px; |
| position: absolute; |
| z-index: 10; |
| } |
| |
| #cast-container > #cast-info > .first-line { |
| color: #fff; |
| font-size: 12px; |
| font-weight: bold; |
| line-height: 14px; |
| text-transform: uppercase; |
| } |
| |
| #cast-container > #cast-info > .second-line { |
| color: #fff; |
| font-size: 22px; |
| font-weight: bold; |
| line-height: 24px; |
| } |
| |
| #controls-wrapper { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: center; |
| bottom: 0; |
| display: -webkit-box; |
| left: 0; |
| position: absolute; |
| right: 0; |
| } |
| |
| #controls { |
| -webkit-box-flex: 1; |
| display: -webkit-box; |
| } |
| |
| #video-player:not([tools]):not([casting]) .tool { |
| opacity: 0; |
| } |
| |
| #video-player:not([tools]):not([casting]) { |
| cursor: none; |
| } |
| |
| /* Hides controls when disabled mode */ |
| #video-player[disabled] > #controls-wrapper .tool { |
| display: none; |
| } |
| |
| .tool { |
| transition: opacity 180ms linear; |
| } |
| |
| #error-wrapper { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: center; |
| display: -webkit-box; |
| height: 100%; |
| left: 0; |
| pointer-events: none; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #error { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: center; |
| background-color: rgba(24, 24, 24, 1); |
| background-image: -webkit-image-set( |
| url('../images/100/error.png') 1x, |
| url('../images/200/error.png') 2x); |
| background-position: 25px center; |
| background-repeat: no-repeat; |
| color: white; |
| display: -webkit-box; |
| height: 54px; |
| padding-left: 70px; |
| padding-right: 35px; |
| } |
| |
| #error:not([visible]) { |
| display: none; |
| } |