lapo.it
1html {
2 --main-bg-color: #C0C0C0;
3 --main-text-color: #000000;
4 --id-text-color: #7d5900;
5 --headline-text-color: #8be9fd;
6 --button-border-color: #767676;
7 --button-bg-color: #efefef;
8 --button-bghover-color: #e5e5e5;
9 --input-border-color: #767676;
10 --input-bg-color: #ffffff;
11 --link-color: darkblue;
12 --link-hover-color: blue;
13 --header-bg-color: #999999;
14 --page-bg-color: #6e6e6e;
15 --license-bg-color: #D0D0D0;
16 --license-border-color: white;
17 --sub-border-color: #E0E0E0;
18 --preview-bg-color: #808080;
19 --preview-border-color: #505050;
20 --dump-bg-color: #C0C0C0;
21 --dump-border-color: #E0E0E0;
22 --dump-tag: blue;
23 --dump-dlen: darkcyan;
24 --dump-ulen: darkgreen;
25 --dump-intro: blue;
26 --dump-outro: darkgreen;
27 --dump-skip: #666666;
28 --dump-skip-bg: #C0C0C0;
29 --dump-hex-current: #808080;
30 --dump-hex-current-hex: #A0A0A0;
31 --dump-hex-current-dlen: #004040;
32 --hover-bg-color: #E0E0E0;
33 --tree-zoom-fix: -1px;
34 --tree-line: #999;
35}
36html[data-theme="dark"] {
37 --main-bg-color: #0d1116;
38 --main-text-color: #f8f8f2;
39 --id-text-color: #9d7c2d;
40 --headline-text-color: #8be9fd;
41 --button-border-color: #505050;
42 --button-bg-color: #303030;
43 --button-bghover-color: #404040;
44 --input-border-color: #505050;
45 --input-bg-color: #0c0e11;
46 --link-color: #58a6ff;
47 --link-hover-color: #9b9bea;
48 --header-bg-color: #161b22;
49 --page-bg-color: #000000;
50 --license-bg-color: #4b4a4a;
51 --license-border-color: black;
52 --sub-border-color: #383838;
53 --preview-bg-color: #989797;
54 --preview-border-color: #b5b3b3;
55 --dump-bg-color: #0c0e11;
56 --dump-border-color: #505050;
57 --dump-tag: #58a6ff;
58 --dump-dlen: darkcyan;
59 --dump-ulen: #00b6b6;
60 --dump-intro: #58a6ff;
61 --dump-outro: #00b6b6;
62 --dump-skip: #707070;
63 --dump-skip-bg: #222222;
64 --dump-hex-current: #727272;
65 --dump-hex-current-hex: #474747;
66 --dump-hex-current-dlen: #00b6b6;
67 --hover-bg-color: #505050;
68 --tree-line: #333;
69}
70html, body {
71 background-color: var(--page-bg-color);
72 color: var(--main-text-color);
73 font-family: Arial, Helvetica, sans-serif;
74 text-align: justify;
75 font-size: 10pt;
76 margin: 0px;
77}
78header {
79 display: flex;
80 flex: nowrap;
81}
82header > .title {
83 flex: auto;
84}
85header > .menu {
86 display: flex;
87 align-items: center;
88 padding-right: 10px;
89}
90input,
91textarea {
92 background-color: var(--input-bg-color);
93 color: var(--main-text-color);
94 border: 1px solid var(--input-border-color);
95}
96input[type="button"] {
97 background-color: var(--button-bg-color);
98 color: var(--main-text-color);
99 border: 1px solid var(--button-border-color);
100}
101input[type="button"]:hover {
102 background-color: var(--button-bghover-color);
103}
104::file-selector-button,
105::-webkit-file-upload-button {
106 background-color: var(--button-bg-color);
107 color: var(--main-text-color);
108 border: 0px;
109 border-right: 1px solid var(--button-border-color);
110}
111::-webkit-file-upload-button:hover {
112 background-color: var(--button-bghover-color);
113}
114::file-selector-button:hover {
115 background-color: var(--button-bghover-color);
116}
117select {
118 background-color: var(--input-bg-color);
119 color: var(--main-text-color);
120 border: 1px solid var(--input-border-color);
121
122}
123a {
124 color: var(--link-color);
125}
126header {
127 background-color: var(--header-bg-color);
128 padding: 8px;
129 padding-left: 16px;
130}
131#main-page {
132 background-color: var(--main-bg-color);
133 border: 0px;
134 padding: 5px;
135}
136#main-page > div {
137 position: relative;
138 padding-bottom: 1em;
139}
140#help {
141 margin: 0px;
142 padding: 4px;
143 padding-left: 20px;
144}
145.tt {
146 font-family: monospace;
147}
148.license {
149 position: relative;
150}
151.license .hidden {
152 visibility: hidden;
153 position: absolute;
154 top: 0px;
155 background-color: #D0D0D0; /*minimal support for IE11*/
156 background-color: var(--license-bg-color);
157 border: solid 1px var(--license-border-color);
158 padding: 2px;
159 margin-left: 15%;
160 margin-right: 15%;
161}
162.license:hover .hidden {
163 /*display: block;*/
164 visibility: visible;
165}
166.head {
167 height: 1em;
168 white-space: nowrap;
169}
170.node:hover > .head, .node.hover > .head {
171 color: var(--link-color);
172 background-color: var(--hover-bg-color);
173}
174.node:hover > .head:hover, .node.hover > .head.hover {
175 color: var(--link-hover-color);
176}
177.node.collapsed {
178 font-style: italic;
179}
180.node.collapsed > .sub {
181 display: none;
182}
183.node.collapsed.hover > .sub {
184 display: block;
185}
186.name {
187 margin-right: 1em;
188 color: var(--preview-border-color);
189}
190.name.id {
191 color: var(--id-text-color);
192}
193.value {
194 display: none;
195 position: absolute;
196 z-index: 2;
197 top: 1.2em;
198 left: 30px;
199 background-color: #efefef; /*minimal support for IE11*/
200 background-color: var(--button-bg-color);
201 border: solid 1px var(--button-border-color);
202 padding: 2px;
203}
204.head:hover + .value, .head.hover + .value {
205 display: block;
206}
207.preview {
208 margin-left: 1em;
209 color: var(--preview-border-color);
210 font-weight: normal;
211}
212.preview > .oid {
213 margin-left: 1em;
214 color: var(--preview-bg-color);
215 font-weight: normal;
216}
217.spaces {
218 font-size: 0px;
219}
220#tree {
221 font-family: monospace;
222}
223#tree > p {
224 font-family: Arial, Helvetica, sans-serif;
225}
226#dump {
227 position: absolute;
228 right: 0px;
229 z-index: 1;
230 background-color: var(--dump-bg-color);
231 border: solid 1px var(--dump-border-color);
232 font-family: monospace;
233 white-space: pre;
234 padding: 5px;
235}
236#dump .tag { color: var(--dump-tag); }
237#dump .dlen { color: var(--dump-dlen); }
238#dump .ulen { color: var(--dump-ulen); }
239#dump .intro { color: var(--dump-intro); }
240#dump .outro { color: var(--dump-outro); }
241#dump .skip { color: var(--dump-skip); background-color: var(--dump-skip-bg); }
242#dump .hexCurrent { background-color: var(--dump-hex-current); }
243#dump .hexCurrent .hex { background-color: var(--dump-hex-current-hex); }
244#dump .hexCurrent .dlen { color: var(--dump-hex-current-dlen); }
245#file { display: none; }
246#area { width: 100%; }
247#contextmenu {
248 position: absolute;
249 visibility: hidden;
250 top: 0;
251 left: 0;
252 padding: 2px;
253 background-color: var(--button-bg-color);
254 border: 1px solid var(--button-bg-color);
255 z-index: 2;
256}
257#contextmenu > button {
258 display: block;
259 width: 120px;
260 background-color: var(--button-bg-color);
261 color: var(--main-text-color);
262 border: 1px solid var(--button-border-color);
263 text-align: left;
264}
265#contextmenu > button:hover {
266 background-color: var(--button-bghover-color);
267}
268
269.treecollapse {
270 --spacing: 1.5rem;
271 --radius: 7px;
272 padding-inline-start: 0px;
273}
274.treecollapse li{
275 display: block;
276 position: relative;
277 padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
278}
279.treecollapse ul{
280 padding-left: 0;
281 margin-left: calc(var(--radius) - var(--spacing));
282}
283.treecollapse ul li{
284 border-left: 1px solid var(--tree-line);
285}
286.treecollapse ul li:last-child{
287 border-color: transparent;
288}
289.treecollapse ul li::before{
290 content: '';
291 display: block;
292 position: absolute;
293 top: calc(var(--spacing) / -1.6);
294 left: var(--tree-zoom-fix);
295 width: calc(var(--spacing) + 2px);
296 height: calc(var(--spacing) + 1px);
297 border: solid var(--tree-line);
298 border-width: 0 0 1px 1px;
299}
300.treecollapse summary{
301 display : block;
302 cursor : pointer;
303}
304.treecollapse summary::marker,
305.treecollapse summary::-webkit-details-marker{
306 display : none;
307}
308.treecollapse summary:focus{
309 outline : none;
310}
311.treecollapse summary:focus-visible{
312 outline : 1px dotted #000;
313}
314.treecollapse summary::before{
315 content: '';
316 display: block;
317 position: absolute;
318 top: calc(var(--spacing) / 2 - var(--radius));
319 left: calc(var(--spacing) - var(--radius) - 1px);
320 width: calc(2 * var(--radius));
321 height: calc(2 * var(--radius));
322}
323.treecollapse summary::before{
324 z-index: 1;
325 top: 1px;
326 background: url('tree-icon-light.svg');
327}
328html[data-theme="dark"] .treecollapse summary::before{
329 background: url('tree-icon-dark.svg');
330}
331.treecollapse details[open] > summary::before{
332 background-position : calc(-2 * var(--radius)) 0;
333}
334
335/*
336Zoom fix to have straight lines in treeview
337Zoom level and dpi resolution:
338- 175%: 336dpi
339- 150%: 288dpi
340- 110%: 212dpi
341- 100%: 192dpi
342- 90%: 173dpi
343- 80%: 154dpi
344*/
345@media (resolution <= 154dpi) {
346 :root{
347 --tree-zoom-fix: -0.6px;
348 }
349}
350@media (155dpi <= resolution < 192dpi) {
351 :root{
352 --tree-zoom-fix: -0.7px;
353 }
354}
355@media (192dpi <= resolution < 336dpi) {
356 :root{
357 --tree-zoom-fix: -1px;
358 }
359}
360@media (336dpi <= resolution) {
361 :root{
362 --tree-zoom-fix: -0.9px;
363 }
364}