/*! Contains fonts from Font Awesome (Copyright (C) 2016 by Dave Gandy), Entypo (Copyright (C) 2012 by Daniel Bruce) */ @font-face { font-family: 'tegaki'; src: url('data:application/octet-stream;base64,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') format('woff'); font-weight: normal; font-style: normal; } .tegaki-icon:before { font-family: 'tegaki'; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; } .tegaki-cancel:before { content: '\e800'; } /* '' */ .tegaki-plus:before { content: '\e801'; } /* '' */ .tegaki-minus:before { content: '\e802'; } /* '' */ .tegaki-pen:before { content: '\e803'; } /* '' */ .tegaki-down-open:before { content: '\e804'; } /* '' */ .tegaki-up-open:before { content: '\e805'; } /* '' */ .tegaki-level-down:before { content: '\e806'; } /* '' */ .tegaki-pencil:before { content: '\e807'; } /* '' */ .tegaki-play:before { content: '\e808'; } /* '' */ .tegaki-bucket:before { content: '\e809'; } /* '' */ .tegaki-pause:before { content: '\e80a'; } /* '' */ .tegaki-blur:before { content: '\e80b'; } /* '' */ .tegaki-to-start:before { content: '\e80c'; } /* '' */ .tegaki-watercolor:before { content: '\e80d'; } /* '' */ .tegaki-tone:before { content: '\e80e'; } /* '' */ .tegaki-airbrush:before { content: '\e80f'; } /* '' */ .tegaki-fast-fw:before { content: '\e810'; } /* '' */ .tegaki-fast-bw:before { content: '\e811'; } /* '' */ .tegaki-left-open:before { content: '\e812'; } /* '' */ .tegaki-right-open:before { content: '\e813'; } /* '' */ .tegaki-eraser:before { content: '\f12d'; } /* '' */ .tegaki-pipette:before { content: '\f1fb'; } /* '' */ .tegaki-disabled, .tegaki-disabled::after, .tegaki-disabled::before { opacity: 0.45; } .tegaki-hidden { display: none !important; } .tegaki-invis { visibility: hidden !important; width: 0 !important; height: 0 !important; } .tegaki-replay-mode #tegaki-tools-cnt, .tegaki-replay-mode #tegaki-toolmode-bar, .tegaki-replay-mode .tegaki-ctrlgrp, .tegaki-replay-mode .tegaki-layers-cell, .tegaki-replay-mode #tegaki-layers-ctrl { pointer-events: none; } .tegaki-replay-mode #tegaki-ctrlgrp-zoom, .tegaki-replay-mode #tegaki-ctrlgrp-layers { pointer-events: auto; } #tegaki { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #a3b1bf; color: #222; font-family: arial, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; z-index: 9999; display: grid; grid-template-columns: 40px 1fr 160px; grid-template-rows: 24px 1fr 18px; grid-gap: 2px; } #tegaki input { color: inherit; } #tegaki > div { background-color: #8d99a6; } #tegaki-menu-cnt { grid-area: 1 / 1 / 2 / 4; white-space: nowrap; overflow: hidden; display: flex; } #tegaki-tools-cnt { grid-area: 2 / 1 / 4 / 2; padding: 4px; } #tegaki-canvas-cnt { grid-area: 2 / 2 / 3 / 3; overflow: auto; display: flex; } #tegaki-ctrl-cnt { grid-area: 2 / 3 / 4 / 4; padding: 6px; overflow: hidden auto; } #tegaki-status-cnt { grid-area: 3 / 2 / 4 / 3; line-height: 18px; display: flex; } #tegaki-status-cnt > div { padding: 0 4px; } #tegaki-status-replay { color: #a61930; } #tegaki-status-output { font-size: 11px; font-weight: bold; } #tegaki-status-version { color: #adbdcc; font-size: 11px; margin-left: auto; } #tegaki-menu-bar { font-size: 12px; padding-left: 4px; padding-right: 18px; border-right: 2px solid #a3b1bf; } .tegaki-replay-mode #tegaki-menu-bar { padding-right: 4px; } .tegaki-menu-lbl { margin: 0 2px; vertical-align: middle; } #tegaki-replay-controls { padding-right: 10px; padding-left: 10px; border-right: 2px solid #a3b1bf; font-size: 11px; } #tegaki-replay-timeline { display: inline-block; width: 100px; height: 24px; margin: 0 4px; border-left: 1px solid #a3b1bf; border-right: 1px solid #a3b1bf; /*background-color: rgba(0, 0, 0, 0.25);*/ } #tegaki-replay-timeline-fill { display: inline-block; width: 36px; height: 100%; background-color: #a3b1bf; } #tegaki-replay-controls > span { vertical-align: middle; } #tegaki-replay-controls .tegaki-ui-cb-w { margin-right: 4px; } #tegaki-replay-speed-lbl { width: 28px; display: inline-block; text-align: center; } #tegaki-replay-speed-lbl::before { content: '×'; } #tegaki-replay-now-lbl, #tegaki-replay-end-lbl { display: inline-block; max-width: 50px; min-width: 30px; overflow: hidden; text-align: center; margin: 0 4px; } #tegaki-toolmode-bar { font-size: 11px; margin-left: 4px; line-height: 24px; } .tegaki-toolmode-lbl { margin-right: 6px; } .tegaki-toolmode-lbl::after { content: ':'; } .tegaki-toolmode-grp { border-left: 1px solid #a3b1bf; padding: 0 18px; } #tegaki canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } .tegaki-tool-active { color: #f2f3f4; } .tegaki-tool-btn { width: 32px; height: 32px; display: block; margin: auto; } .tegaki-tool-btn:hover { background-color: rgba(0, 0, 0, 0.15); } .tegaki-tool-btn:before { font-size: 20px; width: 32px; height: 32px; line-height: 32px; } .tegaki-mb-btn { cursor: default; text-decoration: none; display: inline-block; padding: 0 6px; word-spacing: -1px; position: relative; line-height: 24px; height: 24px; } .tegaki-mb-btn:hover:not(.tegaki-disabled), .tegaki-ui-btn:hover:not(.tegaki-disabled) { background-color: rgba(0, 0, 0, 0.10); } .tegaki-sw-btn { display: inline; padding: 2px 6px; margin: 0 2px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(255, 255, 255, 0.15); } .tegaki-sw-btn:hover:not(.tegaki-sw-btn-a) { background-color: rgba(0, 0, 0, 0.05); } .tegaki-sw-btn-a { background-color: rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15), 1px 1px 0 rgba(255, 255, 255, 0.15); } #tegaki-toolmode-bar .tegaki-mb-btn-a { color: inherit; background-color: rgba(0, 0, 0, 0.10); } #tegaki-toolmode-bar .tegaki-mb-btn.tegaki-mb-btn-a:hover { color: inherit; } #tegaki-debug { position: absolute; left: 0; top: 0; } #tegaki-debug canvas { width: 75px; height: 75px; display: block; border: 1px solid black; } .tegaki-backdrop { overflow: hidden; } .tegaki-hidden { display: none !important; } .tegaki-strike { text-decoration: line-through; } #tegaki-layers { position: relative; font-size: 0; box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25); contain: content; } #tegaki-layers canvas { width: 100%; height: 100%; } #tegaki-layers:empty { display: none; } #tegaki-layers-wrap { margin: auto; padding: 50px; pointer-events: none; } #tegaki-layers canvas { position: absolute; left: 0; top: 0; } #tegaki-finish-btn { font-weight: bold; } #tegaki-cursor-layer { position: absolute; mix-blend-mode: difference; touch-action: none; } /* generic ui */ .tegaki-alpha-bg, .tegaki-alpha-bg-xs { background-color: #fefefe; background-image: linear-gradient(45deg, #cacaca 25%, transparent 25%, transparent 75%, #cacaca 75%, #cacaca), linear-gradient(45deg, #cacaca 25%, transparent 25%, transparent 75%, #cacaca 75%, #cacaca); } .tegaki-alpha-bg { background-size: 16px 16px; background-position: 0 0, 8px 8px; } .tegaki-alpha-bg-xs { background-size: 6px 6px; background-position: 0 0, 3px 3px; } .tegaki-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .tegaki-ui-cb { display: inline-block; vertical-align: middle; width: 10px; height: 10px; border: 1px solid #222; cursor: default; margin-right: 4px; } .tegaki-ui-cb::after, .tegaki-ui-cb-a::after { display: block; content: ' '; width: 6px; height: 6px; margin-top: 2px; margin-left: 2px; } .tegaki-ui-cb-a::after { background-color: #222; } .tegaki-ui-cb-w:hover .tegaki-ui-cb::after, .tegaki-ui-cb:hover::after { background-color: #555; } .tegaki-ui-ellipsis::after { content: '...'; letter-spacing: -1px; } .tegaki-ui-borderless { border: none; } .tegaki-ui-btn { display: inline-block; } .tegaki-ui-btn:before { height: 24px; width: 24px; line-height: 24px; font-size: 14px; } .tegaki-stealth-input { border: 0; margin: 0; padding: 0; background: none; } .tegaki-stealth-input:hover:not(.tegaki-disabled) { background-color: rgba(0, 0, 0, 0.1); } .tegaki-range-lbl, .tegaki-range-lbl-xs { display: inline-block; text-align: center; vertical-align: top; } .tegaki-range-lbl { width: 28px; font-size: 12px; margin-left: 4px; } .tegaki-range-lbl-xs { width: 20px; font-size: 10px; } .tegaki-label-xs { font-size: 10px; vertical-align: top; } .tegaki-lbl-c::after { content: ':'; } .tegaki-lbl-p::after { content: '%'; margin-left: 1px; } .tegaki-drag-lbl:not(.tegaki-disabled) { cursor: ew-resize; } .tegaki-disabled .tegaki-drag-lbl { cursor: auto; } /* control groups */ .tegaki-ctrlgrp { margin-bottom: 10px; } .tegaki-ctrlgrp:last-child { margin-bottom: 0; } .tegaki-ctrlgrp-title { font-size: 12px; font-weight: bold; margin-bottom: 6px; background-color: #a3b1bf; padding: 1px 4px; } .tegaki-ctrlrow { font-size: 11px; } .tegaki-ctrlrow:not(:last-child) { margin-bottom: 6px; } .tegaki-ctrl-range { width: calc(100% - 34px); padding: 0; margin: 0; height: 14px; } /* zoom ctrl group */ #tegaki-zoom-lbl { display: inline-block; font-size: 12px; float: right; height: 24px; line-height: 24px; } /* color ctrl group */ #tegaki-color-ctrl { display: flex; } #tegaki-palette-switcher { align-self: center; margin-left: auto; } .tegaki-color-grid { display: grid; grid-gap: 4px; margin-top: 6px; } .tegaki-color-grid-20 { grid-template-columns: repeat(auto-fill, 20px); grid-auto-rows: 20px; } .tegaki-color-grid-15 { grid-template-columns: repeat(auto-fill, 15px); grid-auto-rows: 15px; } .tegaki-color-btn { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); } #tegaki-color, #tegaki-colorpicker { padding: 0; border: 0; display: block; width: 28px; height: 28px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } /* layers ctrl group */ #tegaki-ctrlgrp-layers { position: relative; } #tegaki-layers-opts { height: 18px; display: flex; } #tegaki-layer-alpha-cell { margin-left: auto; } #tegaki-layers-ctrl { margin-top: 4px; } #tegaki-layers-grid { height: 84px; min-height: 84px; overflow: auto; background-color: #8d99a6; display: flex; flex-direction: column; border: 1px solid #a3b1bf; resize: vertical; } .tegaki-layers-cell { box-sizing: border-box; box-shadow: 0 1px 0 0px #a3b1bf; padding: 0; height: 28px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; } .tegaki-layers-cell-s, .tegaki-layers-cell-a { background-color: #a3b1bf7f; } .tegaki-layers-cell-a { font-weight: bold; } .tegaki-layers-cell-v { margin: 0 6px 0 4px; } .tegaki-layers-cell-v .tegaki-ui-cb { vertical-align: unset; margin: 0; } .tegaki-layers-cell-p { margin-right: 6px; } .tegaki-layers-cell-p canvas { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); vertical-align: middle; } .tegaki-layers-cell-s .tegaki-layers-cell-p canvas { box-shadow: 0 0 0 1px rgba(0, 0, 0, 1.0); } .tegaki-layers-cell-n { font-size: 11px; margin-right: 1px; min-width: 20px; } .tegaki-layers-cell-d { box-shadow: inset 0 -2px 0 0 #000; z-index: 2; } #tegaki-layers-grid.tegaki-layers-cell-d { box-shadow: 0 -2px 0 0px #000; } #tegaki-layers-cell-dx { position: absolute; background: transparent; width: 100%; height: 32px; margin-top: -32px; }