1 | @font-face {
|
2 | font-family: "SuttonSignWritingLine";
|
3 | src:
|
4 | local('SuttonSignWritingLine'),
|
5 | url('https://unpkg.com/@sutton-signwriting/font-ttf@1.0.0/font/SuttonSignWritingLine.ttf') format('truetype');
|
6 | }
|
7 | @font-face {
|
8 | font-family: "SuttonSignWritingFill";
|
9 | src:
|
10 | local('SuttonSignWritingFill'),
|
11 | url('https://unpkg.com/@sutton-signwriting/font-ttf@1.0.0/font/SuttonSignWritingFill.ttf') format('truetype');
|
12 | }
|
13 | @font-face {
|
14 | font-family: "SuttonSignWritingOneD";
|
15 | src:
|
16 | local('SuttonSignWritingOneD'),
|
17 | url('https://unpkg.com/@sutton-signwriting/font-ttf@1.0.0/font/SuttonSignWritingOneD.ttf') format('truetype');
|
18 | }
|
19 | svg {
|
20 | overflow: visible;
|
21 | }
|
22 |
|
23 | *, *:before, *:after {
|
24 | -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
25 | }
|
26 |
|
27 | body {
|
28 | touch-action: pan-y;
|
29 | }
|
30 |
|
31 | body, body:before, body:after {
|
32 | margin:0;
|
33 | }
|
34 | html,body {
|
35 | overflow: auto;
|
36 | height: 100%;
|
37 | margin: 0;
|
38 | -webkit-overflow-scrolling: touch;
|
39 | }
|
40 |
|
41 | div.clickable:hover{
|
42 | background: #c7c7c7;
|
43 | }
|
44 | div.btn, div.cmd, div.cmdrow, div.cmdfull, div.cmdlong, div.cmdslim, div.cmdhalf {
|
45 | position: relative;
|
46 | float: left;
|
47 | text-align: center;
|
48 | background: #e7e7e7;
|
49 | border: 1px solid black;
|
50 | -webkit-appearance: none;
|
51 | -webkit-border-radius: 0;
|
52 | -webkit-touch-callout: none;
|
53 | -webkit-user-select: none;
|
54 | -khtml-user-select: none;
|
55 | -moz-user-select: none;
|
56 | -ms-user-select: none;
|
57 | user-select: none;
|
58 | cursor: default;
|
59 | }
|
60 |
|
61 | div.info{
|
62 | background: darkgray;
|
63 | }
|
64 |
|
65 | div.sort{
|
66 | width: 100%;
|
67 | height: 5%;
|
68 | border: 1px solid black;
|
69 | }
|
70 |
|
71 | div.btn {
|
72 | width: 25%;
|
73 | height: 9%;
|
74 | }
|
75 |
|
76 | div.smaller {
|
77 | height: 6%;
|
78 | }
|
79 | div.checked {
|
80 | background-color:gray;
|
81 | border:1px solid black;
|
82 | }
|
83 | div.checked:hover {
|
84 | color:white;
|
85 | }
|
86 | div.unchecked {
|
87 | border:1px solid black;
|
88 | color:gray;
|
89 | }
|
90 | div.unchecked:hover {
|
91 | color:black;
|
92 | }
|
93 |
|
94 | div.disabled{
|
95 | border: 1px solid black;
|
96 | color: #e7e7e7;
|
97 | }
|
98 | div.cmd {
|
99 | width: 25%;
|
100 | height: 20%;
|
101 | }
|
102 | div.cmdrow {
|
103 | width: 100%;
|
104 | height: 10%;
|
105 | }
|
106 | div.cmdfull {
|
107 | width: 100%;
|
108 | height: 20%;
|
109 | }
|
110 | div.cmdlong {
|
111 | width: 75%;
|
112 | height: 10%;
|
113 | }
|
114 | div.cmdslim{
|
115 | width: 25%;
|
116 | height: 10%;
|
117 | }
|
118 | div.cmdhalf{
|
119 | width: 50%;
|
120 | height: 10%;
|
121 | }
|
122 |
|
123 | div.btn p, div.cmd p, div.cmdslim p, div.cmdhalf p, div.cmdrow p, div.cmdfull p, div.cmdlong p {
|
124 | position: relative;
|
125 | margin:auto;
|
126 | top: 50%;
|
127 | -webkit-transform: translateY(-50%);
|
128 | -ms-transform: translateY(-50%);
|
129 | transform: translateY(-50%);
|
130 | cursor: default;
|
131 | font-size:2vmin;
|
132 | }
|
133 |
|
134 | div.btn svg, div.cmd svg, div.cmdslim svg, div.cmdhalf svg, div.cmdrow svg, div.cmdfull svg, div.cmdlong svg, div.sort svg {
|
135 | display: block;
|
136 | margin: 2.5% auto;
|
137 | height: 90%;
|
138 | max-width: 90%;
|
139 | max-height: 90%;
|
140 | cursor: default;
|
141 | }
|
142 | div.sort svg g text.sym-line {
|
143 | fill: gray !important;
|
144 | }
|
145 |
|
146 | div.disabled {
|
147 | color: gray;
|
148 | }
|
149 | div.disabled svg g text.sym-line{
|
150 | fill: gray !important;
|
151 | }
|
152 | div.cmd.unselected:hover svg g text.sym-line{
|
153 | fill: black !important;
|
154 | }
|
155 | div.cmd.selected {
|
156 | background: #b1b1b1;
|
157 | border: 1px solid black;
|
158 | border-top-left-radius: 25%;
|
159 | border-top-right-radius: 25%;
|
160 | }
|
161 | div.cmd.unselected {
|
162 | background: #ffffff;
|
163 | border: 1px dashed black;
|
164 | border-top-left-radius: 25%;
|
165 | border-top-right-radius: 25%;
|
166 | color: gray;
|
167 | }
|
168 | div.cmd.unselected:hover {
|
169 | border: 1px solid gray;
|
170 | color: black;
|
171 | }
|
172 | div.cmd.unselected svg g text.sym-line{
|
173 | fill: gray !important;
|
174 | }
|
175 | div.cmd.unselected:hover svg g text.sym-line{
|
176 | fill: black !important;
|
177 | }
|
178 |
|
179 | #palette {
|
180 | position:fixed;
|
181 | margin-left: 60%;
|
182 | top:0;
|
183 | width:40%;
|
184 | height: 100%;
|
185 | z-index:1;
|
186 | }
|
187 | div.row {
|
188 | float: right;
|
189 | width: 100%;
|
190 | height: 9%;
|
191 | }
|
192 | div.row.smaller {
|
193 | height: 8.7%;
|
194 | }
|
195 | div.row div {
|
196 | position: relative;
|
197 | float: left;
|
198 | width: 16.6%;
|
199 | height: 100%;
|
200 | border: 1px solid black;
|
201 | }
|
202 |
|
203 | div.row div svg, div.cmdrow svg, div.cmdfull svg, div.cmdlong svg {
|
204 | position: absolute;
|
205 | display: block;
|
206 | top:2.5%;
|
207 | bottom: 2.5%;
|
208 | left: 2.5%;
|
209 | right: 2.5%;
|
210 | margin: auto;
|
211 | max-width: 95%;
|
212 | max-height: 95%;
|
213 | cursor: default;
|
214 | }
|
215 |
|
216 | #palette div.row div.topleft {
|
217 | float: left;
|
218 | width: 16.6%;
|
219 | height: 100%;
|
220 | border:0px;
|
221 | overflow: visible;
|
222 | }
|
223 | #palette div.row div.topleft svg {
|
224 | display: block;
|
225 | float: left;
|
226 | top:initial;
|
227 | bottom: initial;
|
228 | left: initial;
|
229 | right: initial;
|
230 | margin: initial;
|
231 | max-width: initial;
|
232 | max-height: initial;
|
233 | top:0;
|
234 | left:0;
|
235 | }
|
236 |
|
237 | #signmaker {
|
238 | position:fixed;
|
239 | margin-left: 0%;
|
240 | top:0%;
|
241 | width:60%;
|
242 | height: 100%;
|
243 | }
|
244 |
|
245 | #sequence {
|
246 | float: right;
|
247 | width: 10%;
|
248 | height: 100%;
|
249 | border: 1px solid black;
|
250 | }
|
251 | #signbox {
|
252 | float: left;
|
253 | width: 90%;
|
254 | height: 50%;
|
255 | overflow:hidden;
|
256 | }
|
257 | #signbox div.mid{
|
258 | position: relative;
|
259 | height: 100%;
|
260 | width: 100%;
|
261 | }
|
262 | #signbox div.mid img, #signbox div.mid svg{
|
263 | position:absolute;
|
264 | top: 0;
|
265 | bottom: 0;
|
266 | left: 0;
|
267 | right: 0;
|
268 | margin:auto;
|
269 | }
|
270 | #signbox div{
|
271 | position: absolute;
|
272 | cursor: default;
|
273 | -webkit-touch-callout: none;
|
274 | -webkit-user-select: none;
|
275 | -khtml-user-select: none;
|
276 | -moz-user-select: none;
|
277 | -ms-user-select: none;
|
278 | user-select: none;
|
279 | }
|
280 | #signbox div svg {
|
281 | display: block;
|
282 | top:0;
|
283 | left:0;
|
284 | }
|
285 | #signbox div.selected svg g text.sym-line {
|
286 | fill: blue !important;
|
287 | }
|
288 | #command {
|
289 | float:left;
|
290 | width: 90%;
|
291 | height: 50%;
|
292 | }
|
293 | div.cmdrow input, div.cmdlong input, div.cmdhalf input, div.cmdfull input, #size, #pad, #line, #fill, #back, select, input.terms{
|
294 | margin-top: 0.5%;
|
295 | margin-bottom: 0;
|
296 | margin-left: 0;
|
297 | margin-right: 0;
|
298 | height: 90%;
|
299 | width: 90%;
|
300 | padding:0;
|
301 | font-size:2.5vh;
|
302 | line-height:2.5vh;
|
303 | vertical-align: top;
|
304 | }
|
305 |
|
306 | div.cmdfull input{
|
307 | height: 90%;
|
308 | width: 90%;
|
309 | padding:0;
|
310 | font-size:5vh;
|
311 | line-height:5vh;
|
312 | vertical-align: top;
|
313 | }
|
314 |
|
315 | div.cmdrow p.fsw, div.cmdrow p.swu, div.cmdfull p.swu{
|
316 | float: left;
|
317 | margin-left: 2%;
|
318 | }
|
319 | #fsw, #swu, #styling{
|
320 | float: right;
|
321 | margin-right: 4%;
|
322 | font-size:1.5vh;
|
323 | width: 75%;
|
324 | }
|
325 | #swu {
|
326 | font-family: SuttonSignWritingOneD;
|
327 | }
|
328 | .ssw-one-d {
|
329 | font-family: SuttonSignWritingOneD;
|
330 | }
|
331 | div.cmdrow #swu {
|
332 | font-size:1.5vh;
|
333 | }
|
334 | div.cmdfull #swu {
|
335 | font-size:3vh;
|
336 | }
|
337 | #signtext {
|
338 | margin-left: 30%;
|
339 | width: 40%;
|
340 | background: blue;
|
341 | margin: auto;
|
342 | }
|
343 |
|
344 | textarea {
|
345 | width: 100%;
|
346 | height: 60%;
|
347 | resize: none;
|
348 | }
|
349 |
|
350 | input.warning, select.warning, textarea.warning {
|
351 | border: 1px solid #f0ad4e;
|
352 | }
|
353 | input.danger, select.danger, textarea.danger {
|
354 | border: 1px solid #d9534f;
|
355 | }
|
356 |
|
357 | body.inverse {
|
358 | background: black;
|
359 | }
|
360 |
|
361 | body.inverse div.btn {
|
362 | background: black;
|
363 | color: white;
|
364 | border: 1px solid white;
|
365 | }
|
366 |
|
367 | body.inverse div.cmd, body.inverse div.cmdrow, body.inverse div.cmdfull, body.inverse div.cmdlong, body.inverse div.cmdslim, body.inverse div.cmdhalf, body.inverse div.cmd.selected, body.inverse #dictionary, body.inverse #sequence {
|
368 | border: 1px solid white;
|
369 | background: black;
|
370 | }
|
371 | body.inverse div.cmd.unselected {
|
372 | background: black;
|
373 | border: 1px dashed white;
|
374 | color: gray;
|
375 | }
|
376 | body.inverse div.cmd p, body.inverse div.cmdslim p , body.inverse div.cmdhalf p, body.inverse div.cmdrow p, body.inverse div.cmdfull p, body.inverse div.cmdlong p, body.inverse div.pageinfo {
|
377 | color: white;
|
378 | }
|
379 | body.inverse div.disabled p, body.inverse div.cmd.unselected p {
|
380 | color: gray;
|
381 | }
|
382 | body.inverse div.cmd.unselected:hover {
|
383 | border: 1px solid gray;
|
384 | }
|
385 | body.inverse div.cmd.unselected:hover p {
|
386 | color: white;
|
387 | }
|
388 | body.inverse div.disabled svg g text.sym-line, body.inverse div.cmd.unselected svg g text.sym-line{
|
389 | fill: gray !important;
|
390 | }
|
391 | body.inverse div.btn svg g text.sym-line, body.inverse div.cmd.unselected:hover svg g text.sym-line, body.inverse div.cmd svg g text.sym-line, body.inverse div.cmdslim svg g text.sym-line, body.inverse div.cmdhalf svg g text.sym-line, body.inverse div.cmdrow svg g text.sym-line, body.inverse div.cmdfull svg g text.sym-line, body.inverse div.cmdlong svg g text.sym-line, body.inverse #header p svg g text.sym-line, body.inverse div.row div svg g text.sym-line, body.inverse #signbox div svg g text.sym-line {
|
392 | fill: white !important;
|
393 | }
|
394 | body.inverse div.btn svg g text.sym-fill, body.inverse div.cmd svg g text.sym-fill, body.inverse div.cmdslim svg g text.sym-fill, body.inverse div.cmdhalf svg g text.sym-fill, body.inverse div.cmdrow svg g text.sym-fill, body.inverse div.cmdfull svg g text.sym-fill, body.inverse div.cmdlong svg g text.sym-fill, body.inverse #header p svg g text.sym-fill, body.inverse div.row div svg g text.sym-fill, body.inverse div.sort svg g text.sym-fill, body.inverse #signbox div svg g text.sym-fill {
|
395 | fill: black !important;
|
396 | }
|
397 | body.inverse #signbox div.selected svg g text.sym-line{
|
398 | fill: yellow !important;
|
399 | }
|
400 |
|
401 | body.inverse #header p, body.inverse select, body.inverse input, body.inverse div.btn p, body.inverse #search {
|
402 | background:black;
|
403 | color:white;
|
404 | }
|
405 | body.inverse div.checked, body.inverse div.checked p {
|
406 | background-color:darkgray;
|
407 | }
|
408 | body.inverse div.row div, body.inverse div.sort {
|
409 | border: 1px solid white;
|
410 | }
|
411 |
|
412 | body.inverse #dictionary div.button{
|
413 | background: black;
|
414 | border: 1px solid white;
|
415 | color: white;
|
416 | }
|
417 | body.inverse #dictionary div.button.disabled{
|
418 | color: black;
|
419 | }
|
420 |
|
421 | body.inverse #header, body.inverse #palette, body.inverse #command, body.inverse #signtext, body.inverse #signbox, body.inverse #signmaker{
|
422 | background: black;
|
423 | }
|
424 |
|
425 | body.colorful #dictionary, body.colorful div.cmd.selected.dictionary {
|
426 | background: darkseagreen;
|
427 | }
|
428 |
|
429 | body.colorful #sequence, body.colorful #signbox, body.colorful div.cmd.selected.edit {
|
430 | background: #ffffcc;
|
431 | }
|
432 |
|
433 | body.colorful #command {
|
434 | background: sandybrown;
|
435 | }
|
436 |
|
437 | body.colorful #palette, body.colorful div.cmd.selected.search {
|
438 | background: lightblue;
|
439 | }
|
440 |
|
441 | body.waiting * {
|
442 | cursor: progress !important;
|
443 | }
|
444 |
|
445 | svg g text {
|
446 | -webkit-touch-callout: none;
|
447 | -webkit-user-select: none;
|
448 | -khtml-user-select: none;
|
449 | -moz-user-select: none;
|
450 | -ms-user-select: none;
|
451 | user-select: none;
|
452 | }
|