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