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