1/*===-- HTMLLogger.css ----------------------------------------------------===
2*
3* Part of the LLVM Project, under the Apache License v2.0 with LLVM Exceptions.
4* See https://llvm.org/LICENSE.txt for license information.
5* SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
6*
7*===----------------------------------------------------------------------===*/
8html { font-family: sans-serif; }
9body { margin: 0; display: flex; justify-content: left; }
10body > * { box-sizing: border-box; }
11body > section {
12  border: 1px solid black;
13  min-width: 20em;
14  overflow: auto;
15  max-height: 100vh;
16}
17section header {
18  background-color: #008;
19  color: white;
20  font-weight: bold;
21  font-size: large;
22}
23section h2 {
24  font-size: medium;
25  margin-bottom: 0.5em;
26  padding-top: 0.5em;
27  border-top: 1px solid #aaa;
28}
29#timeline {
30  min-width: 0;
31}
32#timeline .entry.hover {
33  background-color: #aaa;
34}
35#timeline .entry.iter-select {
36  background-color: #aac;
37}
38
39#bb-elements {
40  font-family: monospace;
41  font-size: x-small;
42  border-collapse: collapse;
43}
44#bb-elements td:nth-child(1) {
45  text-align: right;
46  width: 4em;
47  border-right: 1px solid #008;
48  padding: 0.3em 0.5em;
49
50  font-weight: bold;
51  color: #888;
52};
53#bb-elements tr.hover {
54  background-color: #abc;
55}
56#bb-elements tr.elt-select {
57  background-color: #acf;
58}
59#iterations {
60  display: flex;
61}
62#iterations .chooser {
63  flex-grow: 1;
64  text-align: center;
65}
66#iterations .chooser:not(.iter-select).hover {
67  background-color: #aaa;
68}
69#iterations .iter-select {
70  font-weight: bold;
71  background-color: #ccc;
72}
73#iterations .chooser:not(.iter-select) {
74  text-decoration: underline;
75  color: blue;
76}
77
78code.filename {
79  font-weight: bold;
80  color: black;
81  background-color: #ccc;
82  display: block;
83  text-align: center;
84}
85code.line {
86  display: block;
87  white-space: pre;
88}
89code.line:before { /* line numbers */
90  content: attr(data-line);
91  display: inline-block;
92  width: 2em;
93  text-align: right;
94  padding-right: 2px;
95  background-color: #ccc;
96  border-right: 1px solid #888;
97  margin-right: 8px;
98}
99code.line:has(.bb-select):before {
100  border-right: 4px solid black;
101  margin-right: 5px;
102}
103.c.hover, .bb.hover {
104  filter: saturate(200%) brightness(90%);
105}
106.c.elt-select {
107  box-shadow: inset 0 -4px 2px -2px #a00;
108}
109.bb.bb-select polygon {
110  stroke-width: 4px;
111  filter: brightness(70%) saturate(150%);
112}
113.bb { user-select: none; }
114.bb polygon { fill: white; }
115#cfg {
116  position: relative;
117  margin-left: 0.5em;
118}
119
120.value {
121  border: 1px solid #888;
122  font-size: x-small;
123  flex-grow: 1;
124}
125.value summary {
126  background-color: #ace;
127  display: flex;
128  justify-content: space-between;
129}
130.value .address {
131  font-size: xx-small;
132  font-family: monospace;
133  color: #888;
134}
135.value .property {
136  display: flex;
137  margin-top: 0.5em;
138}
139.value .property .key {
140  font-weight: bold;
141  min-width: 5em;
142}
143