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<head>
5  <link href="./index.css" rel="stylesheet">
6</head>
7<style>
8  :host {
9    position: absolute;
10    z-index: 100;
11    will-change: transform;
12  }
13
14  #body {
15    display: none;
16    position: absolute;
17    --tip-offset: 10px;
18    --tip-width: 10px;
19    --tip-height: 40px;
20  }
21
22  #content {
23    background-color: rgba(var(--surface-color-rgb), 0.8);
24    border: 3px var(--primary-color) solid;
25    border-radius: 10px;
26    padding: 10px;
27    width: auto;
28    min-width: 100px;
29    max-width: 400px;
30    min-height: 100px;
31    max-height: 400px;
32    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
33  }
34
35  #content > h3 {
36    margin-top: 0;
37  }
38
39  .textContent {
40    font-family: var(--code-font);
41    white-space: pre;
42    overflow-wrap: anywhere;
43    overflow-x: hidden;
44    max-width: 500px;
45  }
46
47  #body.top {
48    bottom: var(--tip-height);
49  }
50  #body.bottom {
51    top: var(--tip-height);
52  }
53  #body.left {
54    right: calc(var(--tip-offset) * -1 - var(--tip-width));
55  }
56  #body.right {
57    left: calc(var(--tip-offset) * -1 - var(--tip-width));
58  }
59
60  .tip, .tipThin {
61    width: 0;
62    height: 0;
63    border-style: solid;
64    position: absolute;
65    border-color:  var(--primary-color) transparent transparent transparent;
66    pointer-events: none;
67  }
68  .tip {
69    border-width: var(--tip-width) var(--tip-width) 0 var(--tip-width);
70  }
71  .tipThin {
72    border-width: var(--tip-height) 4px 2px 4px;
73    bottom: -30px;
74    left: -4px;
75  }
76  /* Tip positioning modifiers */
77  .top > .tip {
78    bottom: calc(var(--tip-width) * -1);
79  }
80  .top > .tipThin {
81    bottom: calc(var(--tip-height) * -1);
82  }
83  .bottom > .tip {
84    top: calc(var(--tip-width) * -1);
85    transform: scaleY(-1);
86  }
87  .bottom > .tipThin {
88    top: calc(var(--tip-height) * -1);
89    transform: scaleY(-1);
90  }
91  .left > .tip {
92    right: var(--tip-offset);
93  }
94  .left > .tipThin {
95    right: var(--tip-offset);
96  }
97  .right > .tip {
98    left: var(--tip-offset);
99  }
100  .right > .tipThin {
101    left: var(--tip-offset);
102  }
103</style>
104
105<div id="body">
106  <div id="content">
107    <property-link-table id="properties"></property-link-table>
108  </div>
109  <div class="tip">
110    <div class="tipThin"></div>
111  </div>
112</div>
113