ui/file_manager/video_player/css/arrow_box.css

   1 /* Copyright 2014 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 #video-player .arrow-box {
   6   align-items: center;
   7   display: flex;
   8   height: 100%;
   9   justify-content: center;
  10   pointer-events: none;
  11   position: absolute;
  12   width: 100%;
  13   z-index: 100;
  14 }
  15
  16 #video-player .arrow-box .arrow-spacer {
  17   flex-grow: 1;
  18 }
  19
  20 #video-player[tools] .arrow-box .arrow {
  21   pointer-events: auto;
  22 }
  23
  24 /* The arrow icons are in nested divs so that their opacity can be manipulated
  25  * independently from their parent (which can be dimmed when the crop frame
  26  * overlaps it) */
  27 #video-player .arrow div {
  28   background-position: center center;
  29   background-repeat: no-repeat;
  30   height: 193px;
  31   opacity: 0;
  32   width: 105px;
  33 }
  34
  35 #video-player[multiple] .arrow-box .arrow div {
  36   opacity: 0.25;
  37 }
  38
  39 #video-player[multiple] .arrow-box .arrow div:hover {
  40   opacity: 1;
  41 }
  42
  43 #video-player:not([first-video]) .arrow.left div {
  44   cursor: pointer;
  45   background-image: -webkit-image-set(
  46       url(../images/100/arrow_left.png) 1x,
  47       url(../images/200/arrow_left.png) 2x);
  48 }
  49
  50 #video-player:not([last-video]) .arrow.right div {
  51   cursor: pointer;
  52   background-image: -webkit-image-set(
  53       url(../images/100/arrow_right.png) 1x,
  54       url(../images/200/arrow_right.png) 2x);
  55 }