ui/file_manager/video_player/css/arrow_box.css

/* Copyright 2014 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. */

#video-player .arrow-box {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 100;
}

#video-player .arrow-box .arrow-spacer {
  flex-grow: 1;
}

#video-player[tools]:not([first-video]) .arrow.left,
#video-player[tools]:not([last-video]) .arrow.right {
  pointer-events: auto;
}

/* The arrow icons are in nested divs so that their opacity can be manipulated
 * independently from their parent (which can be dimmed when the crop frame
 * overlaps it) */
#video-player .arrow div {
  background-position: center center;
  background-repeat: no-repeat;
  height: 193px;
  opacity: 0;
  width: 80px;
}

#video-player[multiple] .arrow-box .arrow div {
  opacity: 0.25;
}

#video-player[multiple] .arrow-box .arrow div:hover {
  opacity: 1;
}

#video-player:not([first-video]) .arrow.left div {
  background-image: -webkit-image-set(
      url(../images/100/arrow_left.png) 1x,
      url(../images/200/arrow_left.png) 2x);
  cursor: pointer;
}

#video-player:not([last-video]) .arrow.right div {
  background-image: -webkit-image-set(
      url(../images/100/arrow_right.png) 1x,
      url(../images/200/arrow_right.png) 2x);
  cursor: pointer;
}