lapo.it
1html[data-theme="light"] {
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}
33html[data-theme="dark"] {
34 --main-bg-color: #0d1116;
35 --main-text-color: #f8f8f2;
36 --headline-text-color: #8be9fd;
37 --button-border-color: #505050;
38 --button-bg-color: #303030;
39 --button-bghover-color: #404040;
40 --input-border-color: #505050;
41 --input-bg-color: #0c0e11;
42 --link-color: #58a6ff;
43 --link-hover-color: #9b9bea;
44 --header-bg-color: #161b22;
45 --page-bg-color: #000000;
46 --license-bg-color: #4b4a4a;
47 --license-border-color: black;
48 --sub-border-color: #383838;
49 --preview-bg-color: #989797;
50 --preview-border-color: #b5b3b3;
51 --dump-bg-color: #0c0e11;
52 --dump-border-color: #505050;
53 --dump-tag: #58a6ff;
54 --dump-dlen: darkcyan;
55 --dump-ulen: #00b6b6;
56 --dump-intro: #58a6ff;
57 --dump-outro: #00b6b6;
58 --dump-skip: #707070;
59 --dump-skip-bg: #222222;
60 --dump-hex-current: #727272;
61 --dump-hex-current-hex: #474747;
62 --dump-hex-current-dlen: #00b6b6;
63 --hover-bg-color: #505050;
64}
65html, body {
66 background-color: var(--page-bg-color);
67 color: var(--main-text-color);
68 font-family: Arial, Helvetica, sans-serif;
69 text-align: justify;
70 font-size: 10pt;
71 margin: 0px;
72}
73header {
74 display: flex;
75 flex: nowrap;
76}
77header > .title {
78 flex: auto;
79}
80header > .menu {
81 display: flex;
82 align-items: center;
83 padding-right: 10px;
84}
85input,
86textarea {
87 background-color: var(--input-bg-color);
88 color: var(--main-text-color);
89 border: 1px solid var(--input-border-color);
90}
91input[type="button"] {
92 background-color: var(--button-bg-color);
93 color: var(--main-text-color);
94 border: 1px solid var(--button-border-color);
95}
96input[type="button"]:hover {
97 background-color: var(--button-bghover-color);
98}
99::file-selector-button,
100::-webkit-file-upload-button {
101 background-color: var(--button-bg-color);
102 color: var(--main-text-color);
103 border: 0px;
104 border-right: 1px solid var(--button-border-color);
105}
106::-webkit-file-upload-button:hover {
107 background-color: var(--button-bghover-color);
108}
109::file-selector-button:hover {
110 background-color: var(--button-bghover-color);
111}
112select {
113 background-color: var(--input-bg-color);
114 color: var(--main-text-color);
115 border: 1px solid var(--input-border-color);
116
117}
118a {
119 color: var(--link-color);
120}
121header {
122 background-color: var(--header-bg-color);
123 padding: 8px;
124 padding-left: 16px;
125}
126#main-page {
127 background-color: var(--main-bg-color);
128 border: 0px;
129 padding: 15px;
130}
131#main-page > div {
132 position: relative;
133 padding-bottom: 1em;
134}
135#help {
136 margin: 0px;
137 padding: 4px;
138 padding-left: 20px;
139}
140.tt {
141 font-family: monospace;
142}
143.license {
144 position: relative;
145}
146.license .hidden {
147 visibility: hidden;
148 position: absolute;
149 top: 0px;
150 background-color: #D0D0D0; /*minimal support for IE11*/
151 background-color: var(--license-bg-color);
152 border: solid 1px var(--license-border-color);
153 padding: 2px;
154 margin-left: 15%;
155 margin-right: 15%;
156}
157.license:hover .hidden {
158 /*display: block;*/
159 visibility: visible;
160}
161.node {
162 position: relative;
163}
164.sub {
165 padding-left: 1.5em;
166 border-left: solid 1px var(--sub-border-color);
167}
168.head {
169 height: 1em;
170 white-space: nowrap;
171}
172.node:hover > .head, .node.hover > .head {
173 color: var(--link-color);
174 background-color: var(--hover-bg-color);
175}
176.node:hover > .head:hover, .node.hover > .head.hover {
177 color: var(--link-hover-color);
178}
179.node.collapsed {
180 font-style: italic;
181}
182.node.collapsed > .sub {
183 display: none;
184}
185.node.collapsed.hover > .sub {
186 display: block;
187}
188.name {
189 margin-right: 1em;
190 color: var(--preview-border-color);
191}
192.name.id {
193 color: var(--main-text-color);
194}
195.value {
196 display: none;
197 position: absolute;
198 z-index: 2;
199 top: 1.2em;
200 left: 0;
201 background-color: #efefef; /*minimal support for IE11*/
202 background-color: var(--button-bg-color);
203 border: solid 1px var(--button-border-color);
204 padding: 2px;
205}
206.head:hover + .value, .head.hover + .value {
207 display: block;
208}
209.preview {
210 margin-left: 1em;
211 color: var(--preview-border-color);
212 font-weight: normal;
213}
214.preview > .oid {
215 margin-left: 1em;
216 color: var(--preview-bg-color);
217 font-weight: normal;
218}
219.spaces {
220 font-size: 0px;
221}
222#tree {
223 font-family: monospace;
224}
225#tree > p {
226 font-family: Arial, Helvetica, sans-serif;
227}
228#dump {
229 position: absolute;
230 right: 0px;
231 z-index: 1;
232 background-color: var(--dump-bg-color);
233 border: solid 1px var(--dump-border-color);
234 font-family: monospace;
235 white-space: pre;
236 padding: 5px;
237}
238#dump .tag { color: var(--dump-tag); }
239#dump .dlen { color: var(--dump-dlen); }
240#dump .ulen { color: var(--dump-ulen); }
241#dump .intro { color: var(--dump-intro); }
242#dump .outro { color: var(--dump-outro); }
243#dump .skip { color: var(--dump-skip); background-color: var(--dump-skip-bg); }
244#dump .hexCurrent { background-color: var(--dump-hex-current); }
245#dump .hexCurrent .hex { background-color: var(--dump-hex-current-hex); }
246#dump .hexCurrent .dlen { color: var(--dump-hex-current-dlen); }
247#file { display: none; }
248#area { width: 100%; }
249#contextmenu {
250 position: absolute;
251 visibility: hidden;
252 top: 0;
253 left: 0;
254 padding: 2px;
255 background-color: var(--button-bg-color);
256 border: 1px solid var(--button-bg-color);
257 z-index: 2;
258}
259#contextmenu > button {
260 display: block;
261 width: 120px;
262 background-color: var(--button-bg-color);
263 color: var(--main-text-color);
264 border: 1px solid var(--button-border-color);
265 text-align: left;
266}
267#contextmenu > button:hover {
268 background-color: var(--button-bghover-color);
269}