| <!-- Copyright 2020 the V8 project authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. --> |
| <head> |
| <link href="./index.css" rel="stylesheet"> |
| </head> |
| <style> |
| |
| #transitionView { |
| overflow-x: scroll; |
| white-space: nowrap; |
| min-height: 50px; |
| max-height: 200px; |
| padding: 50px 0 0 0; |
| margin-top: -25px; |
| width: 100%; |
| } |
| .map { |
| width: 20px; |
| height: 20px; |
| display: inline-block; |
| border-radius: 50%; |
| background-color: var(--map-background-color); |
| border: 4px solid var(--surface-color); |
| font-size: 10px; |
| text-align: center; |
| line-height: 18px; |
| color: var(--on-surface-color); |
| vertical-align: top; |
| margin-top: -13px; |
| /* raise z-index */ |
| position: relative; |
| z-index: 2; |
| cursor: pointer; |
| } |
| |
| .map.selected { |
| border-color: var(--map-background-color); |
| } |
| |
| .transitions { |
| display: inline-block; |
| margin-left: -15px; |
| } |
| |
| .transition { |
| min-height: 55px; |
| margin: 0 0 -2px 2px; |
| } |
| |
| /* gray out deprecated transitions */ |
| .deprecated > .transitionEdge, |
| .deprecated > .map { |
| opacity: 0.5; |
| } |
| |
| .deprecated > .transition { |
| border-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| /* Show a border for all but the first transition */ |
| .transition:nth-of-type(2), |
| .transition:nth-last-of-type(n+2) { |
| border-left: 2px solid; |
| margin-left: 0px; |
| } |
| |
| /* special case for 2 transitions */ |
| .transition:nth-last-of-type(1) { |
| border-left: none; |
| } |
| |
| /* topmost transitions are not related */ |
| #transitionView > .transition { |
| border-left: none; |
| } |
| |
| /* topmost transition edge needs initial offset to be aligned */ |
| #transitionView > .transition > .transitionEdge { |
| margin-left: 13px; |
| } |
| |
| .transitionEdge { |
| height: 2px; |
| width: 80px; |
| display: inline-block; |
| margin: 0 0 2px 0; |
| background-color: var(--map-background-color); |
| vertical-align: top; |
| padding-left: 15px; |
| } |
| |
| .transitionLabel { |
| color: var(--on-surface-color); |
| transform: rotate(-15deg); |
| transform-origin: top left; |
| margin-top: -10px; |
| font-size: 10px; |
| white-space: normal; |
| word-break: break-all; |
| background-color: var(--surface-color); |
| } |
| |
| .showSubtransitions { |
| width: 0; |
| height: 0; |
| border-left: 6px solid transparent; |
| border-right: 6px solid transparent; |
| border-top: 10px solid var(--map-background-color); |
| cursor: zoom-in; |
| margin: 4px 0 0 4px; |
| } |
| |
| .showSubtransitions.opened { |
| border-top: none; |
| border-bottom: 10px solid var(--map-background-color); |
| cursor: zoom-out; |
| } |
| |
| #tooltip { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| background-color: var(--red); |
| pointer-events: none; |
| z-index: 100; |
| display: none; |
| } |
| |
| #title { |
| padding-bottom: 20px; |
| } |
| </style> |
| <div id="container"> |
| <div class="panel"> |
| <div id="title"><h4>Transitions</h4></div> |
| <section id="transitionView"></section> |
| <div id="tooltip"> |
| <div id="tooltipContents"></div> |
| </div> |
| </div> |
| </div> |
