1<!-- Copyright 2020 the V8 project authors. All rights reserved.
2Use of this source code is governed by a BSD-style license that can be
3found in the LICENSE file. -->
4
5<head>
6  <link href="./index.css" rel="stylesheet">
7</head>
8<style>
9  #transitionView {
10    overflow-x: scroll;
11    white-space: nowrap;
12    min-height: 50px;
13    max-height: 200px;
14    padding: 50px 0 0 0;
15    margin-top: -25px;
16    width: 100%;
17  }
18
19  #transitionView::-webkit-scrollbar {
20    width: 0;
21    background-color: transparent;
22  }
23
24  .map {
25    width: 20px;
26    height: 20px;
27    display: inline-block;
28    border-radius: 50%;
29    background-color: var(--map-background-color);
30    border: 4px solid var(--surface-color);
31    font-size: 10px;
32    text-align: center;
33    line-height: 18px;
34    color: var(--on-surface-color);
35    vertical-align: top;
36    margin-top: -13px;
37    /* raise z-index */
38    position: relative;
39    z-index: 2;
40    cursor: pointer;
41  }
42
43  .map.selected {
44    border-color: var(--on-surface-color);
45  }
46
47  .transitions {
48    display: inline-block;
49    margin-left: -15px;
50  }
51
52  .transition {
53    min-height: 55px;
54    margin: 0 0 -2px 2px;
55  }
56
57  /* gray out deprecated transitions */
58  .deprecated>.transitionEdge,
59  .deprecated>.map {
60    opacity: 0.5;
61  }
62
63  .deprecated>.transition {
64    border-color: rgba(0, 0, 0, 0.5);
65  }
66
67  /* Show a border for all but the first transition */
68  .transition:nth-of-type(2),
69  .transition:nth-last-of-type(n+2) {
70    border-left: 2px solid;
71    margin-left: 0px;
72  }
73
74  /* special case for 2 transitions */
75  .transition:nth-last-of-type(1) {
76    border-left: none;
77  }
78
79  /* topmost transitions are not related */
80  #transitionView>.transition {
81    border-left: none;
82  }
83
84  /* topmost transition edge needs initial offset to be aligned */
85  #transitionView>.transition>.transitionEdge {
86    margin-left: 13px;
87  }
88
89  .transitionEdge {
90    height: 2px;
91    width: 80px;
92    display: inline-block;
93    margin: 0 0 2px 0;
94    background-color: var(--map-background-color);
95    vertical-align: top;
96    padding-left: 15px;
97  }
98
99  .transitionLabel {
100    color: var(--on-surface-color);
101    transform: rotate(-15deg);
102    transform-origin: top left;
103    margin-top: -10px;
104    font-size: 10px;
105    white-space: normal;
106    word-break: break-all;
107    background-color: var(--surface-color);
108  }
109
110  .showSubtransitions {
111    width: 0;
112    height: 0;
113    border-left: 6px solid transparent;
114    border-right: 6px solid transparent;
115    border-top: 10px solid var(--map-background-color);
116    cursor: zoom-in;
117    margin: 4px 0 0 4px;
118  }
119
120  .showSubtransitions.opened {
121    border-top: none;
122    border-bottom: 10px solid var(--map-background-color);
123    cursor: zoom-out;
124  }
125
126  #tooltip {
127    position: absolute;
128    width: 10px;
129    height: 10px;
130    background-color: var(--red);
131    pointer-events: none;
132    z-index: 100;
133    display: none;
134  }
135
136  #title {
137    padding-bottom: 10px;
138  }
139</style>
140<section id="transitionView"></section>
141