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<head> 51cb0ef41Sopenharmony_ci <link href="./index.css" rel="stylesheet"> 61cb0ef41Sopenharmony_ci</head> 71cb0ef41Sopenharmony_ci<style> 81cb0ef41Sopenharmony_ci :host { 91cb0ef41Sopenharmony_ci position: absolute; 101cb0ef41Sopenharmony_ci z-index: 100; 111cb0ef41Sopenharmony_ci will-change: transform; 121cb0ef41Sopenharmony_ci } 131cb0ef41Sopenharmony_ci 141cb0ef41Sopenharmony_ci #body { 151cb0ef41Sopenharmony_ci display: none; 161cb0ef41Sopenharmony_ci position: absolute; 171cb0ef41Sopenharmony_ci --tip-offset: 10px; 181cb0ef41Sopenharmony_ci --tip-width: 10px; 191cb0ef41Sopenharmony_ci --tip-height: 40px; 201cb0ef41Sopenharmony_ci } 211cb0ef41Sopenharmony_ci 221cb0ef41Sopenharmony_ci #content { 231cb0ef41Sopenharmony_ci background-color: rgba(var(--surface-color-rgb), 0.8); 241cb0ef41Sopenharmony_ci border: 3px var(--primary-color) solid; 251cb0ef41Sopenharmony_ci border-radius: 10px; 261cb0ef41Sopenharmony_ci padding: 10px; 271cb0ef41Sopenharmony_ci width: auto; 281cb0ef41Sopenharmony_ci min-width: 100px; 291cb0ef41Sopenharmony_ci max-width: 400px; 301cb0ef41Sopenharmony_ci min-height: 100px; 311cb0ef41Sopenharmony_ci max-height: 400px; 321cb0ef41Sopenharmony_ci box-shadow: 0px 0px 10px rgba(0,0,0,0.5); 331cb0ef41Sopenharmony_ci } 341cb0ef41Sopenharmony_ci 351cb0ef41Sopenharmony_ci #content > h3 { 361cb0ef41Sopenharmony_ci margin-top: 0; 371cb0ef41Sopenharmony_ci } 381cb0ef41Sopenharmony_ci 391cb0ef41Sopenharmony_ci .textContent { 401cb0ef41Sopenharmony_ci font-family: var(--code-font); 411cb0ef41Sopenharmony_ci white-space: pre; 421cb0ef41Sopenharmony_ci overflow-wrap: anywhere; 431cb0ef41Sopenharmony_ci overflow-x: hidden; 441cb0ef41Sopenharmony_ci max-width: 500px; 451cb0ef41Sopenharmony_ci } 461cb0ef41Sopenharmony_ci 471cb0ef41Sopenharmony_ci #body.top { 481cb0ef41Sopenharmony_ci bottom: var(--tip-height); 491cb0ef41Sopenharmony_ci } 501cb0ef41Sopenharmony_ci #body.bottom { 511cb0ef41Sopenharmony_ci top: var(--tip-height); 521cb0ef41Sopenharmony_ci } 531cb0ef41Sopenharmony_ci #body.left { 541cb0ef41Sopenharmony_ci right: calc(var(--tip-offset) * -1 - var(--tip-width)); 551cb0ef41Sopenharmony_ci } 561cb0ef41Sopenharmony_ci #body.right { 571cb0ef41Sopenharmony_ci left: calc(var(--tip-offset) * -1 - var(--tip-width)); 581cb0ef41Sopenharmony_ci } 591cb0ef41Sopenharmony_ci 601cb0ef41Sopenharmony_ci .tip, .tipThin { 611cb0ef41Sopenharmony_ci width: 0; 621cb0ef41Sopenharmony_ci height: 0; 631cb0ef41Sopenharmony_ci border-style: solid; 641cb0ef41Sopenharmony_ci position: absolute; 651cb0ef41Sopenharmony_ci border-color: var(--primary-color) transparent transparent transparent; 661cb0ef41Sopenharmony_ci pointer-events: none; 671cb0ef41Sopenharmony_ci } 681cb0ef41Sopenharmony_ci .tip { 691cb0ef41Sopenharmony_ci border-width: var(--tip-width) var(--tip-width) 0 var(--tip-width); 701cb0ef41Sopenharmony_ci } 711cb0ef41Sopenharmony_ci .tipThin { 721cb0ef41Sopenharmony_ci border-width: var(--tip-height) 4px 2px 4px; 731cb0ef41Sopenharmony_ci bottom: -30px; 741cb0ef41Sopenharmony_ci left: -4px; 751cb0ef41Sopenharmony_ci } 761cb0ef41Sopenharmony_ci /* Tip positioning modifiers */ 771cb0ef41Sopenharmony_ci .top > .tip { 781cb0ef41Sopenharmony_ci bottom: calc(var(--tip-width) * -1); 791cb0ef41Sopenharmony_ci } 801cb0ef41Sopenharmony_ci .top > .tipThin { 811cb0ef41Sopenharmony_ci bottom: calc(var(--tip-height) * -1); 821cb0ef41Sopenharmony_ci } 831cb0ef41Sopenharmony_ci .bottom > .tip { 841cb0ef41Sopenharmony_ci top: calc(var(--tip-width) * -1); 851cb0ef41Sopenharmony_ci transform: scaleY(-1); 861cb0ef41Sopenharmony_ci } 871cb0ef41Sopenharmony_ci .bottom > .tipThin { 881cb0ef41Sopenharmony_ci top: calc(var(--tip-height) * -1); 891cb0ef41Sopenharmony_ci transform: scaleY(-1); 901cb0ef41Sopenharmony_ci } 911cb0ef41Sopenharmony_ci .left > .tip { 921cb0ef41Sopenharmony_ci right: var(--tip-offset); 931cb0ef41Sopenharmony_ci } 941cb0ef41Sopenharmony_ci .left > .tipThin { 951cb0ef41Sopenharmony_ci right: var(--tip-offset); 961cb0ef41Sopenharmony_ci } 971cb0ef41Sopenharmony_ci .right > .tip { 981cb0ef41Sopenharmony_ci left: var(--tip-offset); 991cb0ef41Sopenharmony_ci } 1001cb0ef41Sopenharmony_ci .right > .tipThin { 1011cb0ef41Sopenharmony_ci left: var(--tip-offset); 1021cb0ef41Sopenharmony_ci } 1031cb0ef41Sopenharmony_ci</style> 1041cb0ef41Sopenharmony_ci 1051cb0ef41Sopenharmony_ci<div id="body"> 1061cb0ef41Sopenharmony_ci <div id="content"> 1071cb0ef41Sopenharmony_ci <property-link-table id="properties"></property-link-table> 1081cb0ef41Sopenharmony_ci </div> 1091cb0ef41Sopenharmony_ci <div class="tip"> 1101cb0ef41Sopenharmony_ci <div class="tipThin"></div> 1111cb0ef41Sopenharmony_ci </div> 1121cb0ef41Sopenharmony_ci</div> 113