Index: ui/file_manager/video_player/css/arrow_box.css |
diff --git a/ui/file_manager/video_player/css/arrow_box.css b/ui/file_manager/video_player/css/arrow_box.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..00beaacc8a62fc0c2a0ae5f11050a4da87936e0b |
--- /dev/null |
+++ b/ui/file_manager/video_player/css/arrow_box.css |
@@ -0,0 +1,62 @@ |
+/* 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:not([tools]) .arrow-box .arrow { |
+ opacity: 0; |
mtomasz
2014/06/06 03:41:43
Why not (1) visibility: hidden, or (2) display: no
yoshiki
2014/06/06 08:02:22
I've just found 'tools'-related feature is control
|
+ pointer-events: none; |
+} |
+ |
+#video-player .arrow-box .arrow-spacer { |
+ flex-grow: 1; |
+ pointer-events: none; |
+} |
+ |
+#video-player[tools] .arrow-box .arrow { |
+ opacity: 1; |
+ 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: 105px; |
+} |
+ |
+#video-player[multiple][tools] .arrow-box .arrow div { |
+ opacity: 0.25; |
+} |
+ |
+#video-player[multiple][tools] .arrow-box .arrow div:hover { |
+ opacity: 1; |
+} |
+ |
+#video-player:not([first-video]) .arrow.left div { |
+ cursor: pointer; |
+ background-image: -webkit-image-set( |
+ url(../images/100/arrow_left.png) 1x, |
+ url(../images/200/arrow_left.png) 2x); |
+} |
+ |
+#video-player:not([last-video]) .arrow.right div { |
+ cursor: pointer; |
+ background-image: -webkit-image-set( |
+ url(../images/100/arrow_right.png) 1x, |
+ url(../images/200/arrow_right.png) 2x); |
+} |