video-switcher/video-switcher.css at master · morrow/video-switcher · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
* {
  margin:0;
  padding:0;
}

body {
  font-family:arial;
}

h1 {
  text-align:center;
  margin:1em;
}

/* video switcher wrap */
#video-switcher-wrap {
  overflow:hidden;
  position:relative;
  margin:0 auto;
  border:1px solid black;
}

#video-switcher-wrap video {
  position:absolute;
  zoom:0.5;
}

#video-switcher-wrap[data-playing="true"] video {
  zoom:1;
}

/* camera controls */
#video-switcher-wrap #camera-controls {
  margin:0;
  padding:0;
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

#video-switcher-wrap #camera-controls canvas {
  background:transparent;
  cursor:pointer;
  border:2px solid #999;
}

#video-switcher-wrap #camera-controls canvas:hover {
  border-color:white;
}

#video-switcher-wrap[data-selected-camera="0"] #camera-controls canvas[data-camera-index="0"],
#video-switcher-wrap[data-selected-camera="1"] #camera-controls canvas[data-camera-index="1"],
#video-switcher-wrap[data-selected-camera="2"] #camera-controls canvas[data-camera-index="2"],
#video-switcher-wrap[data-selected-camera="3"] #camera-controls canvas[data-camera-index="3"] {
  border-color:#09c;
}

#video-switcher-wrap[data-playing="true"] #camera-controls {
  transition:all 0.2s linear;
  opacity:0;
}

#video-switcher-wrap[data-playing="true"]:hover #camera-controls {
  opacity:1;
}

/* video controls */
#video-switcher-wrap #video-controls {
  display:flex;
  position:absolute;
  list-style:none;
  color:white;
}

#video-switcher-wrap[data-playing="true"]:hover #video-controls {
  opacity:1;
}

#video-switcher-wrap[data-playing="true"] #video-controls {
}

#video-switcher-wrap[data-playing="true"] #video-controls {
  opacity:0;
}

#video-switcher-wrap #video-controls li {
  cursor:pointer;
}
#video-switcher-wrap #video-controls li[data-video-action="play"] {
  transition:all 0.1s linear;
  color:#eee;
  font-size:5em;
  text-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
}

#video-switcher-wrap #video-controls li[data-video-action="play"]:hover {
  color:white;
  text-shadow:0px 0px 15px rgba(0, 0, 0, 0.9);
}