1  /*! Contains fonts from Font Awesome (Copyright (C) 2016 by Dave Gandy), Entypo (Copyright (C) 2012 by Daniel Bruce) */
  2  @font-face {
  3    font-family: 'tegaki';
  4    src: url('data:application/octet-stream;base64,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') format('woff');
  5    font-weight: normal;
  6    font-style: normal;
  7  }
  8  
  9  .tegaki-icon:before {
 10    font-family: 'tegaki';
 11    font-style: normal;
 12    font-weight: normal;
 13    speak: none;
 14    display: inline-block;
 15    text-align: center;
 16    font-variant: normal;
 17    text-transform: none;
 18    line-height: 1em;
 19  }
 20  
 21  .tegaki-cancel:before { content: '\e800'; } /* '' */
 22  .tegaki-plus:before { content: '\e801'; } /* '' */
 23  .tegaki-minus:before { content: '\e802'; } /* '' */
 24  .tegaki-pen:before { content: '\e803'; } /* '' */
 25  .tegaki-down-open:before { content: '\e804'; } /* '' */
 26  .tegaki-up-open:before { content: '\e805'; } /* '' */
 27  .tegaki-level-down:before { content: '\e806'; } /* '' */
 28  .tegaki-pencil:before { content: '\e807'; } /* '' */
 29  .tegaki-play:before { content: '\e808'; } /* '' */
 30  .tegaki-bucket:before { content: '\e809'; } /* '' */
 31  .tegaki-pause:before { content: '\e80a'; } /* '' */
 32  .tegaki-blur:before { content: '\e80b'; } /* '' */
 33  .tegaki-to-start:before { content: '\e80c'; } /* '' */
 34  .tegaki-watercolor:before { content: '\e80d'; } /* '' */
 35  .tegaki-tone:before { content: '\e80e'; } /* '' */
 36  .tegaki-airbrush:before { content: '\e80f'; } /* '' */
 37  .tegaki-fast-fw:before { content: '\e810'; } /* '' */
 38  .tegaki-fast-bw:before { content: '\e811'; } /* '' */
 39  .tegaki-left-open:before { content: '\e812'; } /* '' */
 40  .tegaki-right-open:before { content: '\e813'; } /* '' */
 41  .tegaki-eraser:before { content: '\f12d'; } /* '' */
 42  .tegaki-pipette:before { content: '\f1fb'; } /* '' */
 43  
 44  .tegaki-disabled,
 45  .tegaki-disabled::after,
 46  .tegaki-disabled::before {
 47    opacity: 0.45;
 48  }
 49  
 50  .tegaki-hidden {
 51    display: none !important;
 52  }
 53  
 54  .tegaki-invis {
 55    visibility: hidden !important;
 56    width: 0 !important;
 57    height: 0 !important;
 58  }
 59  
 60  .tegaki-replay-mode #tegaki-tools-cnt,
 61  .tegaki-replay-mode #tegaki-toolmode-bar,
 62  .tegaki-replay-mode .tegaki-ctrlgrp,
 63  .tegaki-replay-mode .tegaki-layers-cell,
 64  .tegaki-replay-mode #tegaki-layers-ctrl {
 65    pointer-events: none;
 66  }
 67  
 68  .tegaki-replay-mode #tegaki-ctrlgrp-zoom,
 69  .tegaki-replay-mode #tegaki-ctrlgrp-layers {
 70    pointer-events: auto;
 71  }
 72  
 73  #tegaki {
 74    position: fixed;
 75    width: 100%;
 76    height: 100%;
 77    top: 0;
 78    left: 0;
 79    background-color: #a3b1bf;
 80    color: #222;
 81    font-family: arial, sans-serif;
 82    -moz-user-select: none;
 83    -webkit-user-select: none;
 84    -ms-user-select: none;
 85    user-select: none;
 86    z-index: 9999;
 87    display: grid;
 88    grid-template-columns: 40px 1fr 160px;
 89    grid-template-rows: 24px 1fr 18px;
 90    grid-gap: 2px;
 91  }
 92  
 93  #tegaki input {
 94    color: inherit;
 95  }
 96  
 97  #tegaki > div {
 98    background-color: #8d99a6;
 99  }
100  
101  #tegaki-menu-cnt {
102    grid-area: 1 / 1 / 2 / 4;
103    white-space: nowrap;
104    overflow: hidden;
105    display: flex;
106  }
107  
108  #tegaki-tools-cnt {
109    grid-area: 2 / 1 / 4 / 2;
110    padding: 4px;
111  }
112  
113  #tegaki-canvas-cnt {
114    grid-area: 2 / 2 / 3 / 3;
115    overflow: auto;
116    display: flex;
117  }
118  
119  #tegaki-ctrl-cnt {
120    grid-area: 2 / 3 / 4 / 4;
121    padding: 6px;
122    overflow: hidden auto;
123  }
124  
125  #tegaki-status-cnt {
126    grid-area: 3 / 2 / 4 / 3;
127    line-height: 18px;
128    display: flex;
129  }
130  
131  #tegaki-status-cnt > div {
132    padding: 0 4px;
133  }
134  
135  #tegaki-status-replay {
136    color: #a61930;
137  }
138  
139  #tegaki-status-output {
140    font-size: 11px;
141    font-weight: bold;
142  }
143  
144  #tegaki-status-version {
145    color: #adbdcc;
146    font-size: 11px;
147    margin-left: auto;
148  }
149  
150  #tegaki-menu-bar {
151    font-size: 12px;
152    padding-left: 4px;
153    padding-right: 18px;
154    border-right: 2px solid #a3b1bf;
155  }
156  
157  .tegaki-replay-mode #tegaki-menu-bar {
158    padding-right: 4px;
159  }
160  
161  .tegaki-menu-lbl {
162    margin: 0 2px;
163    vertical-align: middle;
164  }
165  
166  #tegaki-replay-controls {
167    padding-right: 10px;
168    padding-left: 10px;
169    border-right: 2px solid #a3b1bf;
170    font-size: 11px;
171  }
172  
173  #tegaki-replay-timeline {
174    display: inline-block;
175    width: 100px;
176    height: 24px;
177    margin: 0 4px;
178    border-left: 1px solid #a3b1bf;
179    border-right: 1px solid #a3b1bf;
180    /*background-color: rgba(0, 0, 0, 0.25);*/
181  }
182  
183  #tegaki-replay-timeline-fill {
184    display: inline-block;
185    width: 36px;
186    height: 100%;
187    background-color: #a3b1bf;
188  }
189  
190  #tegaki-replay-controls > span {
191    vertical-align: middle;
192  }
193  
194  #tegaki-replay-controls .tegaki-ui-cb-w {
195    margin-right: 4px;
196  }
197  
198  #tegaki-replay-speed-lbl {
199    width: 28px;
200    display: inline-block;
201    text-align: center;
202  }
203  
204  #tegaki-replay-speed-lbl::before {
205    content: '×';
206  }
207  
208  #tegaki-replay-now-lbl,
209  #tegaki-replay-end-lbl {
210    display: inline-block;
211    max-width: 50px;
212    min-width: 30px;
213    overflow: hidden;
214    text-align: center;
215    margin: 0 4px;
216  }
217  
218  #tegaki-toolmode-bar {
219    font-size: 11px;
220    margin-left: 4px;
221    line-height: 24px;
222  }
223  
224  .tegaki-toolmode-lbl {
225    margin-right: 6px;
226  }
227  
228  .tegaki-toolmode-lbl::after {
229    content: ':';
230  }
231  
232  .tegaki-toolmode-grp {
233    border-left: 1px solid #a3b1bf;
234    padding: 0 18px;
235  }
236  
237  #tegaki canvas {
238    image-rendering: optimizeSpeed;
239    image-rendering: -moz-crisp-edges;
240    image-rendering: -webkit-optimize-contrast;
241    image-rendering: pixelated;
242    -ms-interpolation-mode: nearest-neighbor;
243  }
244  
245  .tegaki-tool-active {
246    color: #f2f3f4;
247  }
248  
249  .tegaki-tool-btn {
250    width: 32px;
251    height: 32px;
252    display: block;
253    margin: auto;
254  }
255  
256  .tegaki-tool-btn:hover {
257    background-color: rgba(0, 0, 0, 0.15);
258  }
259  
260  .tegaki-tool-btn:before {
261    font-size: 20px;
262    width: 32px;
263    height: 32px;
264    line-height: 32px;
265  }
266  
267  .tegaki-mb-btn {
268    cursor: default;
269    text-decoration: none;
270    display: inline-block;
271    padding: 0 6px;
272    word-spacing: -1px;
273    position: relative;
274    line-height: 24px;
275    height: 24px;
276  }
277  
278  .tegaki-mb-btn:hover:not(.tegaki-disabled),
279  .tegaki-ui-btn:hover:not(.tegaki-disabled) {
280    background-color: rgba(0, 0, 0, 0.10);
281  }
282  
283  .tegaki-sw-btn {
284    display: inline;
285    padding: 2px 6px;
286    margin: 0 2px;
287    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(255, 255, 255, 0.15);
288  }
289  
290  .tegaki-sw-btn:hover:not(.tegaki-sw-btn-a) {
291    background-color: rgba(0, 0, 0, 0.05);
292  }
293  
294  .tegaki-sw-btn-a {
295    background-color: rgba(0, 0, 0, 0.1);
296    box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15), 1px 1px 0 rgba(255, 255, 255, 0.15);
297  }
298  
299  #tegaki-toolmode-bar .tegaki-mb-btn-a {
300    color: inherit;
301    background-color: rgba(0, 0, 0, 0.10);
302  }
303  
304  #tegaki-toolmode-bar .tegaki-mb-btn.tegaki-mb-btn-a:hover {
305    color: inherit;
306  }
307  
308  #tegaki-debug {
309    position: absolute;
310    left: 0;
311    top: 0;
312  }
313  
314  #tegaki-debug canvas {
315    width: 75px;
316    height: 75px;
317    display: block;
318    border: 1px solid black;
319  }
320  
321  .tegaki-backdrop {
322    overflow: hidden;
323  }
324  
325  .tegaki-hidden {
326    display: none !important;
327  }
328  
329  .tegaki-strike {
330    text-decoration: line-through;
331  }
332  
333  #tegaki-layers {
334    position: relative;
335    font-size: 0;
336    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25);
337    contain: content;
338  }
339  
340  #tegaki-layers canvas {
341    width: 100%;
342    height: 100%;
343  }
344  
345  #tegaki-layers:empty {
346    display: none;
347  }
348  
349  #tegaki-layers-wrap {
350    margin: auto;
351    padding: 50px;
352    pointer-events: none;
353  }
354  
355  #tegaki-layers canvas {
356    position: absolute;
357    left: 0;
358    top: 0;
359  }
360  
361  #tegaki-finish-btn {
362    font-weight: bold;
363  }
364  
365  #tegaki-cursor-layer {
366    position: absolute;
367    mix-blend-mode: difference;
368    touch-action: none;
369  }
370  
371  /* generic ui */
372  .tegaki-alpha-bg,
373  .tegaki-alpha-bg-xs {
374    background-color: #fefefe;
375    background-image:
376      linear-gradient(45deg, #cacaca 25%, transparent 25%, transparent 75%, #cacaca 75%, #cacaca),
377      linear-gradient(45deg, #cacaca 25%, transparent 25%, transparent 75%, #cacaca 75%, #cacaca);
378  }
379  
380  .tegaki-alpha-bg {
381    background-size: 16px 16px;
382    background-position: 0 0, 8px 8px;
383  }
384  
385  .tegaki-alpha-bg-xs {
386    background-size: 6px 6px;
387    background-position: 0 0, 3px 3px;
388  }
389  
390  .tegaki-ellipsis {
391    text-overflow: ellipsis;
392    white-space: nowrap;
393    overflow: hidden;
394  }
395  
396  .tegaki-ui-cb {
397    display: inline-block;
398    vertical-align: middle;
399    width: 10px;
400    height: 10px;
401    border: 1px solid #222;
402    cursor: default;
403    margin-right: 4px;
404  }
405  
406  .tegaki-ui-cb::after,
407  .tegaki-ui-cb-a::after {
408    display: block;
409    content: ' ';
410    width: 6px;
411    height: 6px;
412    margin-top: 2px;
413    margin-left: 2px;
414  }
415  
416  .tegaki-ui-cb-a::after {
417    background-color: #222;
418  }
419  
420  .tegaki-ui-cb-w:hover .tegaki-ui-cb::after,
421  .tegaki-ui-cb:hover::after {
422    background-color: #555;
423  }
424  
425  .tegaki-ui-ellipsis::after {
426    content: '...';
427    letter-spacing: -1px;
428  }
429  
430  .tegaki-ui-borderless {
431    border: none;
432  }
433  
434  .tegaki-ui-btn {
435    display: inline-block;
436  }
437  
438  .tegaki-ui-btn:before {
439    height: 24px;
440    width: 24px;
441    line-height: 24px;
442    font-size: 14px;
443  }
444  
445  .tegaki-stealth-input {
446    border: 0;
447    margin: 0;
448    padding: 0;
449    background: none;
450  }
451  
452  .tegaki-stealth-input:hover:not(.tegaki-disabled) {
453    background-color: rgba(0, 0, 0, 0.1);
454  }
455  
456  .tegaki-range-lbl,
457  .tegaki-range-lbl-xs {
458    display: inline-block;
459    text-align: center;
460    vertical-align: top;
461  }
462  
463  .tegaki-range-lbl {
464    width: 28px;
465    font-size: 12px;
466    margin-left: 4px;
467  }
468  
469  .tegaki-range-lbl-xs {
470    width: 20px;
471    font-size: 10px;
472  }
473  
474  .tegaki-label-xs {
475    font-size: 10px;
476    vertical-align: top;
477  }
478  
479  .tegaki-lbl-c::after {
480    content: ':';
481  }
482  
483  .tegaki-lbl-p::after {
484    content: '%';
485    margin-left: 1px;
486  }
487  
488  .tegaki-drag-lbl:not(.tegaki-disabled) {
489    cursor: ew-resize;
490  }
491  
492  .tegaki-disabled .tegaki-drag-lbl {
493    cursor: auto;
494  }
495  
496  /* control groups */
497  .tegaki-ctrlgrp {
498    margin-bottom: 10px;
499  }
500  
501  .tegaki-ctrlgrp:last-child {
502    margin-bottom: 0;
503  }
504  
505  .tegaki-ctrlgrp-title {
506    font-size: 12px;
507    font-weight: bold;
508    margin-bottom: 6px;
509    background-color: #a3b1bf;
510    padding: 1px 4px;
511  }
512  
513  .tegaki-ctrlrow {
514    font-size: 11px;
515  }
516  
517  .tegaki-ctrlrow:not(:last-child) {
518    margin-bottom: 6px;
519  }
520  
521  .tegaki-ctrl-range {
522    width: calc(100% - 34px);
523    padding: 0;
524    margin: 0;
525    height: 14px;
526  }
527  
528  /* zoom ctrl group */
529  #tegaki-zoom-lbl {
530    display: inline-block;
531    font-size: 12px;
532    float: right;
533    height: 24px;
534    line-height: 24px;
535  }
536  
537  /* color ctrl group */
538  #tegaki-color-ctrl {
539    display: flex;
540  }
541  
542  #tegaki-palette-switcher {
543    align-self: center;
544    margin-left: auto;
545  }
546  
547  .tegaki-color-grid {
548    display: grid;
549    grid-gap: 4px;
550    margin-top: 6px;
551  }
552  
553  .tegaki-color-grid-20 {
554    grid-template-columns: repeat(auto-fill, 20px);
555    grid-auto-rows: 20px;
556  }
557  
558  .tegaki-color-grid-15 {
559    grid-template-columns: repeat(auto-fill, 15px);
560    grid-auto-rows: 15px;
561  }
562  
563  .tegaki-color-btn {
564    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
565  }
566  
567  #tegaki-color,
568  #tegaki-colorpicker {
569    padding: 0;
570    border: 0;
571    display: block;
572    width: 28px;
573    height: 28px;
574    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
575  }
576  
577  /* layers ctrl group */
578  #tegaki-ctrlgrp-layers {
579    position: relative;
580  }
581  
582  #tegaki-layers-opts {
583    height: 18px;
584    display: flex;
585  }
586  
587  #tegaki-layer-alpha-cell {
588    margin-left: auto;
589  }
590  
591  #tegaki-layers-ctrl {
592    margin-top: 4px;
593  }
594  
595  #tegaki-layers-grid {
596    height: 84px;
597    min-height: 84px;
598    overflow: auto;
599    background-color: #8d99a6;
600    display: flex;
601    flex-direction: column;
602    border: 1px solid #a3b1bf;
603    resize: vertical;
604  }
605  
606  .tegaki-layers-cell {
607    box-sizing: border-box;
608    box-shadow: 0 1px 0 0px #a3b1bf;
609    padding: 0;
610    height: 28px;
611    flex-shrink: 0;
612    overflow: hidden;
613    display: flex;
614    align-items: center;
615  }
616  
617  .tegaki-layers-cell-s,
618  .tegaki-layers-cell-a {
619    background-color: #a3b1bf7f;
620  }
621  
622  .tegaki-layers-cell-a {
623    font-weight: bold;
624  }
625  
626  .tegaki-layers-cell-v {
627    margin: 0 6px 0 4px;
628  }
629  
630  .tegaki-layers-cell-v .tegaki-ui-cb {
631    vertical-align: unset;
632    margin: 0;
633  }
634  
635  .tegaki-layers-cell-p {
636    margin-right: 6px;
637  }
638  
639  .tegaki-layers-cell-p canvas {
640    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
641    vertical-align: middle;
642  }
643  
644  .tegaki-layers-cell-s .tegaki-layers-cell-p canvas {
645    box-shadow: 0 0 0 1px rgba(0, 0, 0, 1.0);
646  }
647  
648  .tegaki-layers-cell-n {
649    font-size: 11px;
650    margin-right: 1px;
651    min-width: 20px;
652  }
653  
654  .tegaki-layers-cell-d {
655    box-shadow: inset 0 -2px 0 0 #000;
656    z-index: 2;
657  }
658  
659  #tegaki-layers-grid.tegaki-layers-cell-d {
660    box-shadow: 0 -2px 0 0px #000;
661  }
662  
663  #tegaki-layers-cell-dx {
664    position: absolute;
665    background: transparent;
666    width: 100%;
667    height: 32px;
668    margin-top: -32px;
669  }
670