lapo.it
1:root {
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}
22html, body {
23 background-color: var(--page-bg-color);
24 color: var(--main-text-color);
25 font-family: Arial, Helvetica, sans-serif;
26 text-align: justify;
27 font-size: 10pt;
28 margin: 0px;
29}
30header {
31 display: flex;
32 flex: nowrap;
33}
34header > .title {
35 flex: auto;
36}
37header > .menu {
38 display: flex;
39 align-items: center;
40 padding-right: 10px;
41}
42input,
43textarea {
44 background-color: var(--input-bg-color);
45 color: var(--main-text-color);
46 border: 1px solid var(--input-border-color);
47}
48input[type="button"] {
49 background-color: var(--button-bg-color);
50 color: var(--main-text-color);
51 border: 1px solid var(--button-border-color);
52}
53input[type="button"]:hover {
54 background-color: var(--button-bghover-color);
55}
56::file-selector-button,
57::-webkit-file-upload-button {
58 background-color: var(--button-bg-color);
59 color: var(--main-text-color);
60 border: 0px;
61 border-right: 1px solid var(--button-border-color);
62}
63::-webkit-file-upload-button:hover {
64 background-color: var(--button-bghover-color);
65}
66::file-selector-button:hover {
67 background-color: var(--button-bghover-color);
68}
69select {
70 background-color: var(--input-bg-color);
71 color: var(--main-text-color);
72 border: 1px solid var(--input-border-color);
73
74}
75a {
76 color: var(--link-color);
77}
78header {
79 background-color: var(--header-bg-color);
80 padding: 8px;
81 padding-left: 16px;
82}
83#main-page {
84 background-color: var(--main-bg-color);
85 border: 0px;
86 padding: 15px;
87}
88#main-page > div {
89 position: relative;
90 padding-bottom: 1em;
91}
92#help {
93 margin: 0px;
94 padding: 4px;
95 padding-left: 20px;
96}
97.tt {
98 font-family: monospace;
99}
100.license {
101 position: relative;
102}
103.license .hidden {
104 visibility: hidden;
105 position: absolute;
106 top: 0px;
107 background-color: #D0D0D0; /*minimal support for IE11*/
108 background-color: var(--license-bg-color);
109 border: solid 1px var(--license-border-color);
110 padding: 2px;
111 margin-left: 15%;
112 margin-right: 15%;
113}
114.license:hover .hidden {
115 /*display: block;*/
116 visibility: visible;
117}
118.node {
119 position: relative;
120}
121.sub {
122 padding-left: 1.5em;
123 border-left: solid 1px var(--sub-border-color);
124}
125.head {
126 height: 1em;
127 white-space: nowrap;
128}
129.head:hover::before {
130 position: absolute;
131 content: '-';
132 color: red;
133 border: solid 1px red;
134 border-radius: 20px;
135 background-color: black;
136 /*TODO: use vars instead of hex*/
137}
138.node:hover > .head, .node.hover > .head {
139 color: var(--link-color);
140 font-weight: bold;
141}
142.node:hover > .head:hover, .node.hover > .head.hover {
143 color: var(--link-hover-color);
144}
145.node.collapsed {
146 font-style: italic;
147}
148.node.collapsed > .sub {
149 display: none;
150}
151.node.collapsed.hover > .sub {
152 display: block;
153}
154.name {
155 margin-right: 1em;
156 color: var(--preview-border-color);
157}
158.name.id {
159 color: var(--main-text-color);
160}
161.value {
162 display: none;
163 position: absolute;
164 z-index: 2;
165 top: 1.2em;
166 left: 0;
167 background-color: #efefef; /*minimal support for IE11*/
168 background-color: var(--button-bg-color);
169 border: solid 1px var(--button-border-color);
170 padding: 2px;
171}
172.head:hover + .value, .head.hover + .value {
173 display: block;
174}
175.preview {
176 margin-left: 1em;
177 color: var(--preview-border-color);
178 font-weight: normal;
179}
180.preview > .oid {
181 margin-left: 1em;
182 color: var(--preview-bg-color);
183 font-weight: normal;
184}
185.spaces {
186 font-size: 0px;
187}
188#tree {
189 font-family: monospace;
190}
191#tree > p {
192 font-family: Arial, Helvetica, sans-serif;
193}
194#dump {
195 position: absolute;
196 right: 0px;
197 z-index: 1;
198 background-color: var(--dump-bg-color);
199 border: solid 1px var(--dump-border-color);
200 font-family: monospace;
201 white-space: pre;
202 padding: 5px;
203}
204#dump .tag { color: blue; }
205#dump .dlen { color: darkcyan; }
206#dump .ulen { color: darkgreen; }
207#dump .intro { color: blue; }
208#dump .outro { color: darkgreen; }
209#dump .skip { color: #666666; background-color: #C0C0C0; }
210#dump .hexCurrent { background-color: #808080; }
211#dump .hexCurrent .hex { background-color: #A0A0A0; }
212#dump .hexCurrent .dlen { color: #004040; }
213#file { display: none; }
214#area { width: 100%; }