11cb0ef41Sopenharmony_ci<!-- Copyright 2020 the V8 project authors. All rights reserved. 21cb0ef41Sopenharmony_ciUse of this source code is governed by a BSD-style license that can be 31cb0ef41Sopenharmony_cifound in the LICENSE file. --> 41cb0ef41Sopenharmony_ci 51cb0ef41Sopenharmony_ci<head> 61cb0ef41Sopenharmony_ci <link href="./index.css" rel="stylesheet"> 71cb0ef41Sopenharmony_ci</head> 81cb0ef41Sopenharmony_ci<style> 91cb0ef41Sopenharmony_ci #transitionView { 101cb0ef41Sopenharmony_ci overflow-x: scroll; 111cb0ef41Sopenharmony_ci white-space: nowrap; 121cb0ef41Sopenharmony_ci min-height: 50px; 131cb0ef41Sopenharmony_ci max-height: 200px; 141cb0ef41Sopenharmony_ci padding: 50px 0 0 0; 151cb0ef41Sopenharmony_ci margin-top: -25px; 161cb0ef41Sopenharmony_ci width: 100%; 171cb0ef41Sopenharmony_ci } 181cb0ef41Sopenharmony_ci 191cb0ef41Sopenharmony_ci #transitionView::-webkit-scrollbar { 201cb0ef41Sopenharmony_ci width: 0; 211cb0ef41Sopenharmony_ci background-color: transparent; 221cb0ef41Sopenharmony_ci } 231cb0ef41Sopenharmony_ci 241cb0ef41Sopenharmony_ci .map { 251cb0ef41Sopenharmony_ci width: 20px; 261cb0ef41Sopenharmony_ci height: 20px; 271cb0ef41Sopenharmony_ci display: inline-block; 281cb0ef41Sopenharmony_ci border-radius: 50%; 291cb0ef41Sopenharmony_ci background-color: var(--map-background-color); 301cb0ef41Sopenharmony_ci border: 4px solid var(--surface-color); 311cb0ef41Sopenharmony_ci font-size: 10px; 321cb0ef41Sopenharmony_ci text-align: center; 331cb0ef41Sopenharmony_ci line-height: 18px; 341cb0ef41Sopenharmony_ci color: var(--on-surface-color); 351cb0ef41Sopenharmony_ci vertical-align: top; 361cb0ef41Sopenharmony_ci margin-top: -13px; 371cb0ef41Sopenharmony_ci /* raise z-index */ 381cb0ef41Sopenharmony_ci position: relative; 391cb0ef41Sopenharmony_ci z-index: 2; 401cb0ef41Sopenharmony_ci cursor: pointer; 411cb0ef41Sopenharmony_ci } 421cb0ef41Sopenharmony_ci 431cb0ef41Sopenharmony_ci .map.selected { 441cb0ef41Sopenharmony_ci border-color: var(--on-surface-color); 451cb0ef41Sopenharmony_ci } 461cb0ef41Sopenharmony_ci 471cb0ef41Sopenharmony_ci .transitions { 481cb0ef41Sopenharmony_ci display: inline-block; 491cb0ef41Sopenharmony_ci margin-left: -15px; 501cb0ef41Sopenharmony_ci } 511cb0ef41Sopenharmony_ci 521cb0ef41Sopenharmony_ci .transition { 531cb0ef41Sopenharmony_ci min-height: 55px; 541cb0ef41Sopenharmony_ci margin: 0 0 -2px 2px; 551cb0ef41Sopenharmony_ci } 561cb0ef41Sopenharmony_ci 571cb0ef41Sopenharmony_ci /* gray out deprecated transitions */ 581cb0ef41Sopenharmony_ci .deprecated>.transitionEdge, 591cb0ef41Sopenharmony_ci .deprecated>.map { 601cb0ef41Sopenharmony_ci opacity: 0.5; 611cb0ef41Sopenharmony_ci } 621cb0ef41Sopenharmony_ci 631cb0ef41Sopenharmony_ci .deprecated>.transition { 641cb0ef41Sopenharmony_ci border-color: rgba(0, 0, 0, 0.5); 651cb0ef41Sopenharmony_ci } 661cb0ef41Sopenharmony_ci 671cb0ef41Sopenharmony_ci /* Show a border for all but the first transition */ 681cb0ef41Sopenharmony_ci .transition:nth-of-type(2), 691cb0ef41Sopenharmony_ci .transition:nth-last-of-type(n+2) { 701cb0ef41Sopenharmony_ci border-left: 2px solid; 711cb0ef41Sopenharmony_ci margin-left: 0px; 721cb0ef41Sopenharmony_ci } 731cb0ef41Sopenharmony_ci 741cb0ef41Sopenharmony_ci /* special case for 2 transitions */ 751cb0ef41Sopenharmony_ci .transition:nth-last-of-type(1) { 761cb0ef41Sopenharmony_ci border-left: none; 771cb0ef41Sopenharmony_ci } 781cb0ef41Sopenharmony_ci 791cb0ef41Sopenharmony_ci /* topmost transitions are not related */ 801cb0ef41Sopenharmony_ci #transitionView>.transition { 811cb0ef41Sopenharmony_ci border-left: none; 821cb0ef41Sopenharmony_ci } 831cb0ef41Sopenharmony_ci 841cb0ef41Sopenharmony_ci /* topmost transition edge needs initial offset to be aligned */ 851cb0ef41Sopenharmony_ci #transitionView>.transition>.transitionEdge { 861cb0ef41Sopenharmony_ci margin-left: 13px; 871cb0ef41Sopenharmony_ci } 881cb0ef41Sopenharmony_ci 891cb0ef41Sopenharmony_ci .transitionEdge { 901cb0ef41Sopenharmony_ci height: 2px; 911cb0ef41Sopenharmony_ci width: 80px; 921cb0ef41Sopenharmony_ci display: inline-block; 931cb0ef41Sopenharmony_ci margin: 0 0 2px 0; 941cb0ef41Sopenharmony_ci background-color: var(--map-background-color); 951cb0ef41Sopenharmony_ci vertical-align: top; 961cb0ef41Sopenharmony_ci padding-left: 15px; 971cb0ef41Sopenharmony_ci } 981cb0ef41Sopenharmony_ci 991cb0ef41Sopenharmony_ci .transitionLabel { 1001cb0ef41Sopenharmony_ci color: var(--on-surface-color); 1011cb0ef41Sopenharmony_ci transform: rotate(-15deg); 1021cb0ef41Sopenharmony_ci transform-origin: top left; 1031cb0ef41Sopenharmony_ci margin-top: -10px; 1041cb0ef41Sopenharmony_ci font-size: 10px; 1051cb0ef41Sopenharmony_ci white-space: normal; 1061cb0ef41Sopenharmony_ci word-break: break-all; 1071cb0ef41Sopenharmony_ci background-color: var(--surface-color); 1081cb0ef41Sopenharmony_ci } 1091cb0ef41Sopenharmony_ci 1101cb0ef41Sopenharmony_ci .showSubtransitions { 1111cb0ef41Sopenharmony_ci width: 0; 1121cb0ef41Sopenharmony_ci height: 0; 1131cb0ef41Sopenharmony_ci border-left: 6px solid transparent; 1141cb0ef41Sopenharmony_ci border-right: 6px solid transparent; 1151cb0ef41Sopenharmony_ci border-top: 10px solid var(--map-background-color); 1161cb0ef41Sopenharmony_ci cursor: zoom-in; 1171cb0ef41Sopenharmony_ci margin: 4px 0 0 4px; 1181cb0ef41Sopenharmony_ci } 1191cb0ef41Sopenharmony_ci 1201cb0ef41Sopenharmony_ci .showSubtransitions.opened { 1211cb0ef41Sopenharmony_ci border-top: none; 1221cb0ef41Sopenharmony_ci border-bottom: 10px solid var(--map-background-color); 1231cb0ef41Sopenharmony_ci cursor: zoom-out; 1241cb0ef41Sopenharmony_ci } 1251cb0ef41Sopenharmony_ci 1261cb0ef41Sopenharmony_ci #tooltip { 1271cb0ef41Sopenharmony_ci position: absolute; 1281cb0ef41Sopenharmony_ci width: 10px; 1291cb0ef41Sopenharmony_ci height: 10px; 1301cb0ef41Sopenharmony_ci background-color: var(--red); 1311cb0ef41Sopenharmony_ci pointer-events: none; 1321cb0ef41Sopenharmony_ci z-index: 100; 1331cb0ef41Sopenharmony_ci display: none; 1341cb0ef41Sopenharmony_ci } 1351cb0ef41Sopenharmony_ci 1361cb0ef41Sopenharmony_ci #title { 1371cb0ef41Sopenharmony_ci padding-bottom: 10px; 1381cb0ef41Sopenharmony_ci } 1391cb0ef41Sopenharmony_ci</style> 1401cb0ef41Sopenharmony_ci<section id="transitionView"></section> 141