2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
오윤석
a23d914b 1 parent fa21b90b

테스트를 위한 example 페이지 (using tui)

Inline Side-by-side
Showing 5 changed files with 1373 additions and 0 deletions
1 +var blackTheme = {
2 + 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
3 + 'common.bisize.width': '251px',
4 + 'common.bisize.height': '21px',
5 + 'common.backgroundImage': 'none',
6 + 'common.backgroundColor': '#1e1e1e',
7 + 'common.border': '0px',
8 +
9 + // header
10 + 'header.backgroundImage': 'none',
11 + 'header.backgroundColor': 'transparent',
12 + 'header.border': '0px',
13 +
14 + // load button
15 + 'loadButton.backgroundColor': '#fff',
16 + 'loadButton.border': '1px solid #ddd',
17 + 'loadButton.color': '#222',
18 + 'loadButton.fontFamily': "'Noto Sans', sans-serif",
19 + 'loadButton.fontSize': '12px',
20 +
21 + // download button
22 + 'downloadButton.backgroundColor': '#fdba3b',
23 + 'downloadButton.border': '1px solid #fdba3b',
24 + 'downloadButton.color': '#fff',
25 + 'downloadButton.fontFamily': "'Noto Sans', sans-serif",
26 + 'downloadButton.fontSize': '12px',
27 +
28 + // main icons
29 + 'menu.normalIcon.color': '#8a8a8a',
30 + 'menu.activeIcon.color': '#555555',
31 + 'menu.disabledIcon.color': '#434343',
32 + 'menu.hoverIcon.color': '#e9e9e9',
33 + 'menu.iconSize.width': '24px',
34 + 'menu.iconSize.height': '24px',
35 +
36 + // submenu icons
37 + 'submenu.normalIcon.color': '#8a8a8a',
38 + 'submenu.activeIcon.color': '#e9e9e9',
39 + 'submenu.iconSize.width': '32px',
40 + 'submenu.iconSize.height': '32px',
41 +
42 + // submenu primary color
43 + 'submenu.backgroundColor': '#1e1e1e',
44 + 'submenu.partition.color': '#3c3c3c',
45 +
46 + // submenu labels
47 + 'submenu.normalLabel.color': '#8a8a8a',
48 + 'submenu.normalLabel.fontWeight': 'lighter',
49 + 'submenu.activeLabel.color': '#fff',
50 + 'submenu.activeLabel.fontWeight': 'lighter',
51 +
52 + // checkbox style
53 + 'checkbox.border': '0px',
54 + 'checkbox.backgroundColor': '#fff',
55 +
56 + // range style
57 + 'range.pointer.color': '#fff',
58 + 'range.bar.color': '#666',
59 + 'range.subbar.color': '#d1d1d1',
60 +
61 + 'range.disabledPointer.color': '#414141',
62 + 'range.disabledBar.color': '#282828',
63 + 'range.disabledSubbar.color': '#414141',
64 +
65 + 'range.value.color': '#fff',
66 + 'range.value.fontWeight': 'lighter',
67 + 'range.value.fontSize': '11px',
68 + 'range.value.border': '1px solid #353535',
69 + 'range.value.backgroundColor': '#151515',
70 + 'range.title.color': '#fff',
71 + 'range.title.fontWeight': 'lighter',
72 +
73 + // colorpicker style
74 + 'colorpicker.button.border': '1px solid #1e1e1e',
75 + 'colorpicker.title.color': '#fff',
76 +};
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="UTF-8" />
5 + <title>TUI Example</title>
6 + <link
7 + type="text/css"
8 + href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
9 + rel="stylesheet"
10 + />
11 + <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
12 + <style>
13 + @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
14 + html,
15 + body {
16 + height: 100%;
17 + margin: 0;
18 + }
19 + </style>
20 + </head>
21 + <body>
22 + <div id="tui-image-editor-container"></div>
23 + <script
24 + type="text/javascript"
25 + src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
26 + ></script>
27 + <script
28 + type="text/javascript"
29 + src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
30 + ></script>
31 + <script
32 + type="text/javascript"
33 + src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
34 + ></script>
35 + <script
36 + type="text/javascript"
37 + src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
38 + ></script>
39 + <script type="text/javascript" src="./tui-image-editor.js"></script>
40 + <script type="text/javascript" src="./black-theme.js"></script>
41 + <script type="text/javascript" src="../../dist/gif-generator.js"></script>
42 + <script type="text/javascript" src="./gif.js"></script>
43 + <script>
44 + // Image editor
45 + var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
46 + includeUI: {
47 + loadImage: {
48 + path: "./sampleImage2.png",
49 + name: "SampleImage",
50 + },
51 + theme: blackTheme, // or whiteTheme
52 + initMenu: "filter",
53 + menuBarPosition: "bottom",
54 + },
55 + cssMaxWidth: 700,
56 + cssMaxHeight: 500,
57 + usageStatistics: false,
58 + });
59 + window.onresize = function () {
60 + imageEditor.ui.resizeEditor();
61 + };
62 +
63 + let gifGenerator;
64 + setTimeout(function () {
65 + gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
66 + }, 1000);
67 + </script>
68 + </body>
69 +</html>
1 +/*!
2 + * tui-image-editor.js
3 + * @version 3.14.1
4 + * @author NHN. FE Development Lab <dl_javascript@nhn.com>
5 + * @license MIT
6 + */
7 +body > textarea {
8 + position: fixed !important;
9 +}
10 +.tui-image-editor-container {
11 + margin: 0;
12 + padding: 0;
13 + box-sizing: border-box;
14 + min-height: 300px;
15 + height: 100%;
16 + position: relative;
17 + background-color: #282828;
18 + overflow: hidden;
19 + letter-spacing: 0.3px;
20 +}
21 +.tui-image-editor-container div,
22 +.tui-image-editor-container ul,
23 +.tui-image-editor-container label,
24 +.tui-image-editor-container input,
25 +.tui-image-editor-container li {
26 + box-sizing: border-box;
27 + margin: 0;
28 + padding: 0;
29 + -ms-user-select: none;
30 + -moz-user-select: -moz-none;
31 + -khtml-user-select: none;
32 + -webkit-user-select: none;
33 + user-select: none;
34 +}
35 +.tui-image-editor-container .tui-image-editor-header {
36 +/* BUTTON AND LOGO */
37 + min-width: 533px;
38 + position: absolute;
39 + background-color: #151515;
40 + top: 0;
41 + width: 100%;
42 +}
43 +.tui-image-editor-container .tui-image-editor-header-buttons,
44 +.tui-image-editor-container .tui-image-editor-controls-buttons {
45 + float: right;
46 + margin: 8px;
47 +}
48 +.tui-image-editor-container .tui-image-editor-header-logo,
49 +.tui-image-editor-container .tui-image-editor-controls-logo {
50 + float: left;
51 + width: 30%;
52 + padding: 17px;
53 +}
54 +.tui-image-editor-container .tui-image-editor-controls-logo,
55 +.tui-image-editor-container .tui-image-editor-controls-buttons {
56 + width: 270px;
57 + height: 100%;
58 + display: none;
59 +}
60 +.tui-image-editor-container .tui-image-editor-header-buttons button,
61 +.tui-image-editor-container .tui-image-editor-header-buttons div,
62 +.tui-image-editor-container .tui-image-editor-controls-buttons button,
63 +.tui-image-editor-container .tui-image-editor-controls-buttons div {
64 + display: inline-block;
65 + position: relative;
66 + width: 120px;
67 + height: 40px;
68 + padding: 0;
69 + line-height: 40px;
70 + outline: none;
71 + border-radius: 20px;
72 + border: 1px solid #ddd;
73 + font-family: 'Noto Sans', sans-serif;
74 + font-size: 12px;
75 + font-weight: bold;
76 + cursor: pointer;
77 + vertical-align: middle;
78 + letter-spacing: 0.3px;
79 + text-align: center;
80 +}
81 +.tui-image-editor-container .tui-image-editor-download-btn {
82 + background-color: #fdba3b;
83 + border-color: #fdba3b;
84 + color: #fff;
85 +}
86 +.tui-image-editor-container .tui-image-editor-load-btn {
87 + position: absolute;
88 + left: 0;
89 + right: 0;
90 + display: inline-block;
91 + top: 0;
92 + bottom: 0;
93 + width: 100%;
94 + cursor: pointer;
95 + opacity: 0;
96 +}
97 +.tui-image-editor-container .tui-image-editor-main-container {
98 + position: absolute;
99 + width: 100%;
100 + top: 0;
101 + bottom: 64px;
102 +}
103 +.tui-image-editor-container .tui-image-editor-main {
104 + position: absolute;
105 + text-align: center;
106 + top: 64px;
107 + bottom: 0;
108 + right: 0;
109 + left: 0;
110 +}
111 +.tui-image-editor-container .tui-image-editor-wrap {
112 + position: absolute;
113 + bottom: 0;
114 + width: 100%;
115 + overflow: auto;
116 +}
117 +.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap {
118 + display: table;
119 + width: 100%;
120 + height: 100%;
121 +}
122 +.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap {
123 + display: table-cell;
124 + vertical-align: middle;
125 +}
126 +.tui-image-editor-container .tui-image-editor {
127 + position: relative;
128 + display: inline-block;
129 +}
130 +.tui-image-editor-container .tui-image-editor-menu,
131 +.tui-image-editor-container .tui-image-editor-help-menu {
132 + width: auto;
133 + list-style: none;
134 + padding: 0;
135 + margin: 0 auto;
136 + display: table-cell;
137 + text-align: center;
138 + vertical-align: middle;
139 + white-space: nowrap;
140 +}
141 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,
142 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item {
143 + position: relative;
144 + display: inline-block;
145 + border-radius: 2px;
146 + padding: 7px 8px 3px 8px;
147 + cursor: pointer;
148 + margin: 0 4px;
149 +}
150 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before,
151 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before {
152 + content: '';
153 + position: absolute;
154 + display: inline-block;
155 + margin: 0 auto 0;
156 + width: 0;
157 + height: 0;
158 + border-right: 7px solid transparent;
159 + border-top: 7px solid #2f2f2f;
160 + border-left: 7px solid transparent;
161 + left: 13px;
162 + top: -2px;
163 +}
164 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,
165 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after {
166 + content: attr(tooltip-content);
167 + position: absolute;
168 + display: inline-block;
169 + background-color: #2f2f2f;
170 + color: #fff;
171 + padding: 5px 8px;
172 + font-size: 11px;
173 + font-weight: lighter;
174 + border-radius: 3px;
175 + max-height: 23px;
176 + top: -25px;
177 + left: 0;
178 + min-width: 24px;
179 +}
180 +.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active,
181 +.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active {
182 + background-color: #fff;
183 + transition: all 0.3s ease;
184 +}
185 +.tui-image-editor-container .tui-image-editor-wrap {
186 + position: absolute;
187 +}
188 +.tui-image-editor-container .tui-image-editor-grid-visual {
189 + display: none;
190 + position: absolute;
191 + width: 100%;
192 + height: 100%;
193 + border: 1px solid rgba(255,255,255,0.7);
194 +}
195 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,
196 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor {
197 + transition: none;
198 +}
199 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,
200 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual {
201 + display: block;
202 +}
203 +.tui-image-editor-container .tui-image-editor-grid-visual table {
204 + width: 100%;
205 + height: 100%;
206 + border-collapse: collapse;
207 +}
208 +.tui-image-editor-container .tui-image-editor-grid-visual table td {
209 + border: 1px solid rgba(255,255,255,0.3);
210 +}
211 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before {
212 + content: '';
213 + position: absolute;
214 + box-sizing: border-box;
215 + width: 10px;
216 + height: 10px;
217 + border: 0;
218 + box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
219 + border-radius: 100%;
220 + background-color: #fff;
221 +}
222 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before {
223 + top: -5px;
224 + left: -5px;
225 +}
226 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before {
227 + top: -5px;
228 + right: -5px;
229 +}
230 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before {
231 + bottom: -5px;
232 + left: -5px;
233 +}
234 +.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before {
235 + bottom: -5px;
236 + right: -5px;
237 +}
238 +.tui-image-editor-container .tui-image-editor-submenu {
239 + display: none;
240 + position: absolute;
241 + bottom: 0;
242 + width: 100%;
243 + height: 150px;
244 + white-space: nowrap;
245 + z-index: 2;
246 +}
247 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active {
248 + display: block;
249 +}
250 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {
251 + display: inline-block;
252 + vertical-align: top;
253 +}
254 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {
255 + display: block;
256 + margin-top: 0;
257 +}
258 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {
259 + position: relative;
260 + cursor: pointer;
261 + display: inline-block;
262 + font-weight: normal;
263 + font-size: 11px;
264 + margin: 0 9px 0 9px;
265 +}
266 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset {
267 + margin: 0 9px 20px 5px;
268 +}
269 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span {
270 + display: inline-block;
271 + cursor: pointer;
272 + padding-top: 5px;
273 + font-family: "Noto Sans", sans-serif;
274 + font-size: 11px;
275 +}
276 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,
277 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label {
278 + vertical-align: 7px;
279 +}
280 +.tui-image-editor-container .tui-image-editor-submenu > div {
281 + display: none;
282 + vertical-align: bottom;
283 +}
284 +.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style {
285 + opacity: 0.95;
286 + z-index: -1;
287 + position: absolute;
288 + top: 0;
289 + bottom: 0;
290 + left: 0;
291 + right: 0;
292 + display: block;
293 +}
294 +.tui-image-editor-container .tui-image-editor-partition > div {
295 + width: 1px;
296 + height: 52px;
297 + border-left: 1px solid #3c3c3c;
298 + margin: 0 8px 0 8px;
299 +}
300 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div {
301 + height: 108px;
302 + margin: 0 29px 0 0px;
303 +}
304 +.tui-image-editor-container .tui-image-editor-submenu-align {
305 + text-align: left;
306 + margin-right: 30px;
307 +}
308 +.tui-image-editor-container .tui-image-editor-submenu-align label > span {
309 + width: 55px;
310 + white-space: nowrap;
311 +}
312 +.tui-image-editor-container .tui-image-editor-submenu-align:first-child {
313 + margin-right: 0;
314 +}
315 +.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span {
316 + width: 70px;
317 +}
318 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,
319 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,
320 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,
321 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,
322 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,
323 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,
324 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,
325 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,
326 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter,
327 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom {
328 + display: table-cell;
329 +}
330 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,
331 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,
332 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,
333 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,
334 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,
335 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,
336 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,
337 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,
338 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,
339 +.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu {
340 + display: table;
341 +}
342 +.tui-image-editor-container .tui-image-editor-help-menu {
343 + list-style: none;
344 + padding: 0;
345 + margin: 0 auto;
346 + text-align: center;
347 + vertical-align: middle;
348 + border-radius: 20px;
349 + background-color: rgba(255,255,255,0.06);
350 + z-index: 2;
351 + position: absolute;
352 +}
353 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history {
354 + display: none;
355 + background-color: #fff;
356 + color: #444;
357 + position: absolute;
358 + width: 196px;
359 + height: 276px;
360 + padding: 4px 2px;
361 + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);
362 + cursor: auto;
363 + transform: translateX(calc(-50% + 12px));
364 +}
365 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list {
366 + height: 268px;
367 + padding: 0;
368 + overflow: hidden scroll;
369 + list-style: none;
370 +}
371 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item {
372 + height: 24px;
373 + font-size: 11px;
374 + line-height: 24px;
375 +}
376 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item {
377 + position: relative;
378 + height: 24px;
379 + cursor: pointer;
380 +}
381 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg {
382 + width: 24px;
383 + height: 24px;
384 +}
385 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span {
386 + display: inline-block;
387 + width: 128px;
388 + height: 24px;
389 + text-align: left;
390 +}
391 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon {
392 + display: inline-block;
393 + width: 24px;
394 + height: 24px;
395 + position: absolute;
396 + top: 6px;
397 + left: 6px;
398 +}
399 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox {
400 + display: none;
401 + width: 24px;
402 + height: 24px;
403 + position: absolute;
404 + top: 5px;
405 + right: -6px;
406 +}
407 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item {
408 + background-color: rgba(119,119,119,0.12);
409 +}
410 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox {
411 + display: inline-block;
412 +}
413 +.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item {
414 + color: #333;
415 + opacity: 0.3;
416 +}
417 +.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history {
418 + display: block;
419 +}
420 +.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before {
421 + content: '';
422 + position: absolute;
423 + display: inline-block;
424 + margin: 0 auto;
425 + width: 0;
426 + height: 0;
427 +}
428 +.tui-image-editor-container .filter-color-item {
429 + display: inline-block;
430 +}
431 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {
432 + display: block;
433 +}
434 +.tui-image-editor-container .tui-image-editor-checkbox-wrap {
435 + display: inline-block !important;
436 + text-align: left;
437 +}
438 +.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width {
439 + width: 187px;
440 + white-space: normal;
441 +}
442 +.tui-image-editor-container .tui-image-editor-checkbox {
443 + display: inline-block;
444 + margin: 1px 0 1px 0;
445 +}
446 +.tui-image-editor-container .tui-image-editor-checkbox input {
447 + width: 14px;
448 + height: 14px;
449 + opacity: 0;
450 +}
451 +.tui-image-editor-container .tui-image-editor-checkbox > label > span {
452 + color: #fff;
453 + height: 14px;
454 + position: relative;
455 +}
456 +.tui-image-editor-container .tui-image-editor-checkbox input + label:before,
457 +.tui-image-editor-container .tui-image-editor-checkbox > label > span:before {
458 + content: '';
459 + position: absolute;
460 + width: 14px;
461 + height: 14px;
462 + background-color: #fff;
463 + top: 6px;
464 + left: -19px;
465 + display: inline-block;
466 + margin: 0;
467 + text-align: center;
468 + font-size: 11px;
469 + border: 0;
470 + border-radius: 2px;
471 + padding-top: 1px;
472 + box-sizing: border-box;
473 +}
474 +.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before {
475 + background-size: cover;
476 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==");
477 +}
478 +.tui-image-editor-container .tui-image-editor-selectlist-wrap {
479 + position: relative;
480 +}
481 +.tui-image-editor-container .tui-image-editor-selectlist-wrap select {
482 + width: 100%;
483 + height: 28px;
484 + margin-top: 4px;
485 + border: 0;
486 + outline: 0;
487 + border-radius: 0;
488 + border: 1px solid #cbdbdb;
489 + background-color: #fff;
490 + -webkit-appearance: none;
491 + -moz-appearance: none;
492 + appearance: none;
493 + padding: 0 7px 0 10px;
494 +}
495 +.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist {
496 + display: none;
497 + position: relative;
498 + top: -1px;
499 + border: 1px solid #ccc;
500 + background-color: #fff;
501 + border-top: 0px;
502 + padding: 4px 0;
503 +}
504 +.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li {
505 + display: block;
506 + text-align: left;
507 + padding: 7px 10px;
508 + font-family: 'Noto Sans', sans-serif;
509 +}
510 +.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover {
511 + background-color: rgba(81,92,230,0.05);
512 +}
513 +.tui-image-editor-container .tui-image-editor-selectlist-wrap:before {
514 + content: '';
515 + position: absolute;
516 + display: inline-block;
517 + width: 14px;
518 + height: 14px;
519 + right: 5px;
520 + top: 10px;
521 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=");
522 + background-size: cover;
523 +}
524 +.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand {
525 + display: none;
526 +}
527 +.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,
528 +.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,
529 +.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled {
530 + backbround-color: #f00;
531 +}
532 +.tui-image-editor-container .tui-image-editor-range {
533 + position: relative;
534 + top: 5px;
535 + width: 166px;
536 + height: 17px;
537 + display: inline-block;
538 +}
539 +.tui-image-editor-container .tui-image-editor-virtual-range-bar {
540 + top: 7px;
541 + position: absolute;
542 + width: 100%;
543 + height: 2px;
544 + background-color: #666;
545 +}
546 +.tui-image-editor-container .tui-image-editor-virtual-range-subbar {
547 + position: absolute;
548 + height: 100%;
549 + left: 0;
550 + right: 0;
551 + background-color: #d1d1d1;
552 +}
553 +.tui-image-editor-container .tui-image-editor-virtual-range-pointer {
554 + position: absolute;
555 + cursor: pointer;
556 + top: -5px;
557 + left: 0;
558 + width: 12px;
559 + height: 12px;
560 + background-color: #fff;
561 + border-radius: 100%;
562 +}
563 +.tui-image-editor-container .tui-image-editor-range-wrap {
564 + display: inline-block;
565 + margin-left: 4px;
566 +}
567 +.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range {
568 + width: 100px;
569 +}
570 +.tui-image-editor-container .color-picker-control .tui-image-editor-range {
571 + width: 108px;
572 + margin-left: 10px;
573 +}
574 +.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer {
575 + background-color: #333;
576 +}
577 +.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar {
578 + background-color: #ccc;
579 +}
580 +.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar {
581 + background-color: #606060;
582 +}
583 +.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short {
584 + margin-top: -2px;
585 + margin-left: 19px;
586 +}
587 +.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {
588 + color: #8e8e8e;
589 + font-weight: normal;
590 +}
591 +.tui-image-editor-container .tui-image-editor-range-wrap label {
592 + vertical-align: baseline;
593 + font-size: 11px;
594 + margin-right: 7px;
595 + color: #fff;
596 +}
597 +.tui-image-editor-container .tui-image-editor-range-value {
598 + cursor: default;
599 + width: 40px;
600 + height: 24px;
601 + outline: none;
602 + border-radius: 2px;
603 + box-shadow: none;
604 + border: 1px solid #d5d5d5;
605 + text-align: center;
606 + background-color: #1c1c1c;
607 + color: #fff;
608 + font-weight: lighter;
609 + vertical-align: baseline;
610 + font-family: 'Noto Sans', sans-serif;
611 + margin-top: 21px;
612 + margin-left: 4px;
613 +}
614 +.tui-image-editor-container .tui-image-editor-controls {
615 + position: absolute;
616 + background-color: #151515;
617 + width: 100%;
618 + height: 64px;
619 + display: table;
620 + bottom: 0;
621 + z-index: 2;
622 +}
623 +.tui-image-editor-container .tui-image-editor-icpartition {
624 + display: inline-block;
625 + background-color: #444;
626 + width: 1px;
627 + height: 24px;
628 +}
629 +.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {
630 + left: 28px;
631 + top: 11px;
632 + border-right: 7px solid #2f2f2f;
633 + border-top: 7px solid transparent;
634 + border-bottom: 7px solid transparent;
635 +}
636 +.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {
637 + top: 7px;
638 + left: 42px;
639 + white-space: nowrap;
640 +}
641 +.tui-image-editor-container.left .tui-image-editor-submenu {
642 + left: 0;
643 + height: 100%;
644 + width: 248px;
645 +}
646 +.tui-image-editor-container.left .tui-image-editor-main-container {
647 + left: 64px;
648 + width: calc(100% - 64px);
649 + height: 100%;
650 +}
651 +.tui-image-editor-container.left .tui-image-editor-controls {
652 + width: 64px;
653 + height: 100%;
654 + display: table;
655 +}
656 +.tui-image-editor-container.left .tui-image-editor-menu,
657 +.tui-image-editor-container.right .tui-image-editor-menu {
658 + white-space: inherit;
659 +}
660 +.tui-image-editor-container.left .tui-image-editor-submenu,
661 +.tui-image-editor-container.right .tui-image-editor-submenu {
662 + white-space: normal;
663 +}
664 +.tui-image-editor-container.left .tui-image-editor-submenu > div,
665 +.tui-image-editor-container.right .tui-image-editor-submenu > div {
666 + vertical-align: middle;
667 +}
668 +.tui-image-editor-container.left .tui-image-editor-controls li,
669 +.tui-image-editor-container.right .tui-image-editor-controls li {
670 + display: inline-block;
671 + margin: 4px auto;
672 +}
673 +.tui-image-editor-container.left .tui-image-editor-icpartition,
674 +.tui-image-editor-container.right .tui-image-editor-icpartition {
675 + position: relative;
676 + top: -7px;
677 + width: 24px;
678 + height: 1px;
679 +}
680 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,
681 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition {
682 + display: block;
683 + width: 75%;
684 + margin: auto;
685 +}
686 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,
687 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {
688 + border-left: 0;
689 + height: 10px;
690 + border-bottom: 1px solid #3c3c3c;
691 + width: 100%;
692 + margin: 0;
693 +}
694 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,
695 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align {
696 + margin-right: 0;
697 +}
698 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,
699 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li {
700 + margin-top: 15px;
701 +}
702 +.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,
703 +.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li {
704 + margin-top: 0;
705 +}
706 +.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,
707 +.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width {
708 + width: 182px;
709 + white-space: normal;
710 +}
711 +.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,
712 +.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range {
713 + display: block;
714 + text-align: left;
715 + width: 75%;
716 + margin: auto;
717 +}
718 +.tui-image-editor-container.left .tui-image-editor-range,
719 +.tui-image-editor-container.right .tui-image-editor-range {
720 + width: 136px;
721 +}
722 +.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {
723 + left: -3px;
724 + top: 11px;
725 + border-left: 7px solid #2f2f2f;
726 + border-top: 7px solid transparent;
727 + border-bottom: 7px solid transparent;
728 +}
729 +.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {
730 + top: 7px;
731 + left: unset;
732 + right: 43px;
733 + white-space: nowrap;
734 +}
735 +.tui-image-editor-container.right .tui-image-editor-submenu {
736 + right: 0;
737 + height: 100%;
738 + width: 248px;
739 +}
740 +.tui-image-editor-container.right .tui-image-editor-main-container {
741 + right: 64px;
742 + width: calc(100% - 64px);
743 + height: 100%;
744 +}
745 +.tui-image-editor-container.right .tui-image-editor-controls {
746 + right: 0;
747 + width: 64px;
748 + height: 100%;
749 + display: table;
750 +}
751 +.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,
752 +.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right {
753 + display: none;
754 +}
755 +.tui-image-editor-container.bottom .tui-image-editor-submenu > div {
756 + padding-bottom: 24px;
757 +}
758 +.tui-image-editor-container.top .color-picker-control .triangle {
759 + top: -8px;
760 + border-right: 7px solid transparent;
761 + border-top: 0px;
762 + border-left: 7px solid transparent;
763 + border-bottom: 8px solid #fff;
764 +}
765 +.tui-image-editor-container.top .tui-image-editor-size-wrap {
766 + height: 100%;
767 +}
768 +.tui-image-editor-container.top .tui-image-editor-main-container {
769 + bottom: 0;
770 +}
771 +.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {
772 + left: 13px;
773 + border-top: 0;
774 + border-bottom: 7px solid #2f2f2f;
775 + top: 33px;
776 +}
777 +.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {
778 + top: 38px;
779 +}
780 +.tui-image-editor-container.top .tui-image-editor-submenu {
781 + top: 0;
782 + bottom: auto;
783 +}
784 +.tui-image-editor-container.top .tui-image-editor-submenu > div {
785 + padding-top: 24px;
786 + vertical-align: top;
787 +}
788 +.tui-image-editor-container.top .tui-image-editor-controls-logo {
789 + display: table-cell;
790 +}
791 +.tui-image-editor-container.top .tui-image-editor-controls-buttons {
792 + display: table-cell;
793 +}
794 +.tui-image-editor-container.top .tui-image-editor-main {
795 + top: 64px;
796 + height: calc(100% - 64px);
797 +}
798 +.tui-image-editor-container.top .tui-image-editor-controls {
799 + top: 0;
800 + bottom: inherit;
801 +}
802 +.tui-image-editor-container .tui-image-editor-help-menu.top {
803 + white-space: nowrap;
804 + width: 506px;
805 + height: 40px;
806 + top: 8px;
807 + left: 50%;
808 + transform: translateX(-50%);
809 +}
810 +.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history {
811 + top: 45px;
812 +}
813 +.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before {
814 + border-right: 8px solid transparent;
815 + border-left: 8px solid transparent;
816 + border-bottom: 8px solid #fff;
817 + left: 90px;
818 + top: -8px;
819 +}
820 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before {
821 + left: 13px;
822 + top: 35px;
823 + border: none;
824 + border-bottom: 7px solid #2f2f2f;
825 + border-left: 7px solid transparent;
826 + border-right: 7px solid transparent;
827 +}
828 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after {
829 + top: 41px;
830 + left: -4px;
831 + white-space: nowrap;
832 +}
833 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before,
834 +.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after {
835 + content: none;
836 +}
837 +.tui-image-editor-container .tui-image-editor-help-menu.bottom {
838 + white-space: nowrap;
839 + width: 506px;
840 + height: 40px;
841 + bottom: 8px;
842 + left: 50%;
843 + transform: translateX(-50%);
844 +}
845 +.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history {
846 + bottom: 45px;
847 +}
848 +.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before {
849 + border-right: 8px solid transparent;
850 + border-left: 8px solid transparent;
851 + border-top: 8px solid #fff;
852 + left: 90px;
853 + bottom: -8px;
854 +}
855 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before {
856 + left: 13px;
857 + top: auto;
858 + bottom: 36px;
859 + border: none;
860 + border-top: 7px solid #2f2f2f;
861 + border-left: 7px solid transparent;
862 + border-right: 7px solid transparent;
863 +}
864 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after {
865 + top: auto;
866 + left: -4px;
867 + bottom: 41px;
868 + white-space: nowrap;
869 +}
870 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before,
871 +.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after {
872 + content: none;
873 +}
874 +.tui-image-editor-container .tui-image-editor-help-menu.left {
875 + white-space: inherit;
876 + width: 40px;
877 + height: 506px;
878 + left: 8px;
879 + top: 50%;
880 + transform: translateY(-50%);
881 +}
882 +.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history {
883 + left: 140px;
884 + top: -4px;
885 +}
886 +.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before {
887 + border-top: 8px solid transparent;
888 + border-bottom: 8px solid transparent;
889 + border-right: 8px solid #fff;
890 + left: -8px;
891 + top: 14px;
892 +}
893 +.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item {
894 + margin: 4px auto;
895 + padding: 6px 8px;
896 +}
897 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before {
898 + left: 27px;
899 + top: 11px;
900 + border: none;
901 + border-right: 7px solid #2f2f2f;
902 + border-top: 7px solid transparent;
903 + border-bottom: 7px solid transparent;
904 +}
905 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after {
906 + top: 7px;
907 + left: 40px;
908 + white-space: nowrap;
909 +}
910 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before,
911 +.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after {
912 + content: none;
913 +}
914 +.tui-image-editor-container .tui-image-editor-help-menu.right {
915 + white-space: inherit;
916 + width: 40px;
917 + height: 506px;
918 + right: 8px;
919 + top: 50%;
920 + transform: translateY(-50%);
921 +}
922 +.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history {
923 + right: -30px;
924 + top: -4px;
925 +}
926 +.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before {
927 + border-top: 8px solid transparent;
928 + border-bottom: 8px solid transparent;
929 + border-left: 8px solid #fff;
930 + right: -8px;
931 + top: 14px;
932 +}
933 +.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item {
934 + margin: 4px auto;
935 + padding: 6px 8px;
936 +}
937 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before {
938 + left: -6px;
939 + top: 11px;
940 + border: none;
941 + border-left: 7px solid #2f2f2f;
942 + border-top: 7px solid transparent;
943 + border-bottom: 7px solid transparent;
944 +}
945 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after {
946 + top: 7px;
947 + left: auto;
948 + right: 39px;
949 + white-space: nowrap;
950 +}
951 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before,
952 +.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after {
953 + content: none;
954 +}
955 +.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button {
956 + min-width: 42px;
957 +}
958 +.tui-image-editor-container .svg_ic-menu,
959 +.tui-image-editor-container .svg_ic-helpmenu {
960 + width: 24px;
961 + height: 24px;
962 +}
963 +.tui-image-editor-container .svg_ic-submenu {
964 + width: 32px;
965 + height: 32px;
966 +}
967 +.tui-image-editor-container .svg_img-bi {
968 + width: 257px;
969 + height: 26px;
970 +}
971 +.tui-image-editor-container .tui-image-editor-help-menu svg > use,
972 +.tui-image-editor-container .tui-image-editor-controls svg > use {
973 + display: none;
974 +}
975 +.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover,
976 +.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,
977 +.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover,
978 +.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover {
979 + display: block;
980 +}
981 +.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover,
982 +.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover {
983 + display: none;
984 +}
985 +.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover,
986 +.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover,
987 +.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover,
988 +.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover {
989 + display: block;
990 +}
991 +.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal,
992 +.tui-image-editor-container .tui-image-editor-controls svg > use.normal {
993 + display: block;
994 +}
995 +.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active,
996 +.tui-image-editor-container .tui-image-editor-controls .active svg > use.active {
997 + display: block;
998 +}
999 +.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled,
1000 +.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled {
1001 + display: block;
1002 +}
1003 +.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal,
1004 +.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,
1005 +.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal,
1006 +.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal {
1007 + display: none;
1008 +}
1009 +.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled,
1010 +.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,
1011 +.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal,
1012 +.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal {
1013 + display: block;
1014 +}
1015 +.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled,
1016 +.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled {
1017 + display: none;
1018 +}
1019 +.tui-image-editor-container .tui-image-editor-controls:hover {
1020 + z-index: 3;
1021 +}
1022 +.tui-image-editor-container div.tui-colorpicker-clearfix {
1023 + width: 159px;
1024 + height: 28px;
1025 + border: 1px solid #d5d5d5;
1026 + border-radius: 2px;
1027 + background-color: #f5f5f5;
1028 + margin-top: 6px;
1029 + padding: 4px 7px 4px 7px;
1030 +}
1031 +.tui-image-editor-container .tui-colorpicker-palette-hex {
1032 + width: 114px;
1033 + background-color: #f5f5f5;
1034 + border: 0;
1035 + font-size: 11px;
1036 + margin-top: 2px;
1037 + font-family: 'Noto Sans', sans-serif;
1038 +}
1039 +.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,
1040 +.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {
1041 + border: 1px solid #ccc;
1042 +}
1043 +.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {
1044 + background-size: cover;
1045 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC");
1046 +}
1047 +.tui-image-editor-container .tui-colorpicker-palette-preview {
1048 + border-radius: 100%;
1049 + float: left;
1050 + width: 17px;
1051 + height: 17px;
1052 + border: 0;
1053 +}
1054 +.tui-image-editor-container .color-picker-control {
1055 + position: absolute;
1056 + display: none;
1057 + z-index: 99;
1058 + width: 192px;
1059 + background-color: #fff;
1060 + box-shadow: 0 3px 22px 6px rgba(0,0,0,0.15);
1061 + padding: 16px;
1062 + border-radius: 2px;
1063 +}
1064 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider {
1065 + display: none;
1066 +}
1067 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {
1068 + border: 0;
1069 + border-radius: 100%;
1070 + margin: 2px;
1071 + background-size: cover;
1072 + font-size: 1px;
1073 +}
1074 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff'] {
1075 + border: 1px solid #ccc;
1076 +}
1077 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=''] {
1078 + border: 1px solid #ccc;
1079 +}
1080 +.tui-image-editor-container .color-picker-control .triangle {
1081 + width: 0;
1082 + height: 0;
1083 + border-right: 7px solid transparent;
1084 + border-top: 8px solid #fff;
1085 + border-left: 7px solid transparent;
1086 + position: absolute;
1087 + bottom: -8px;
1088 + left: 84px;
1089 +}
1090 +.tui-image-editor-container .color-picker-control .tui-colorpicker-container,
1091 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,
1092 +.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container {
1093 + width: 100%;
1094 + height: auto;
1095 +}
1096 +.tui-image-editor-container .filter-color-item .color-picker-control label {
1097 + font-color: #333;
1098 + font-weight: normal;
1099 + margin-right: 7pxleft;
1100 +}
1101 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {
1102 + margin-top: 0;
1103 +}
1104 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before,
1105 +.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before {
1106 + left: -16px;
1107 +}
1108 +.tui-image-editor-container .color-picker {
1109 + width: 100%;
1110 + height: auto;
1111 +}
1112 +.tui-image-editor-container .color-picker-value {
1113 + width: 32px;
1114 + height: 32px;
1115 + border: 0px;
1116 + border-radius: 100%;
1117 + margin: auto;
1118 + margin-bottom: 1px;
1119 +}
1120 +.tui-image-editor-container .color-picker-value.transparent {
1121 + border: 1px solid #cbcbcb;
1122 + background-size: cover;
1123 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC");
1124 +}
1125 +.tui-image-editor-container .color-picker-value + label {
1126 + color: #fff;
1127 +}
1128 +.tui-image-editor-container .tui-image-editor-submenu svg > use {
1129 + display: none;
1130 +}
1131 +.tui-image-editor-container .tui-image-editor-submenu svg > use.normal {
1132 + display: block;
1133 +}
1134 +.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] svg > use.active,
1135 +.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] svg > use.active,
1136 +.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] svg > use.active,
1137 +.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] svg > use.active,
1138 +.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] svg > use.active,
1139 +.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] svg > use.active,
1140 +.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] svg > use.active,
1141 +.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] svg > use.active,
1142 +.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] svg > use.active {
1143 + display: block;
1144 +}
1145 +.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,
1146 +.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal {
1147 + display: none;
1148 +}
1149 +.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,
1150 +.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active {
1151 + display: block;
1152 +}
1153 +.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,
1154 +.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,
1155 +.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal {
1156 + display: none;
1157 +}
1158 +.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,
1159 +.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,
1160 +.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active {
1161 + display: block;
1162 +}
1163 +.tie-mask-apply.apply.active .tui-image-editor-button.apply label {
1164 + color: #fff;
1165 +}
1166 +.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active {
1167 + display: block;
1168 +}
1169 +.tie-crop-button .tui-image-editor-button.apply,
1170 +.tie-crop-preset-button .tui-image-editor-button.apply {
1171 + margin-right: 24px;
1172 +}
1173 +.tie-crop-button .tui-image-editor-button.preset.active svg > use.active,
1174 +.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active {
1175 + display: block;
1176 +}
1177 +.tie-crop-button .tui-image-editor-button.apply.active svg > use.active,
1178 +.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active {
1179 + display: block;
1180 +}
1181 +.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,
1182 +.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,
1183 +.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal {
1184 + display: none;
1185 +}
1186 +.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,
1187 +.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,
1188 +.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active {
1189 + display: block;
1190 +}
1191 +.tie-text-effect-button .tui-image-editor-button.active svg > use.active {
1192 + display: block;
1193 +}
1194 +.tie-text-align-button.left .tui-image-editor-button.left svg > use.active,
1195 +.tie-text-align-button.center .tui-image-editor-button.center svg > use.active,
1196 +.tie-text-align-button.right .tui-image-editor-button.right svg > use.active {
1197 + display: block;
1198 +}
1199 +.tie-mask-image-file,
1200 +.tie-icon-image-file {
1201 + opacity: 0;
1202 + position: absolute;
1203 + width: 100%;
1204 + height: 100%;
1205 + border: 1px solid #008000;
1206 + cursor: inherit;
1207 + left: 0;
1208 + top: 0;
1209 +}
1210 +.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,
1211 +.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal,
1212 +.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal {
1213 + display: none;
1214 +}
1215 +.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,
1216 +.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active,
1217 +.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active {
1218 + display: block;
1219 +}
1220 +.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {
1221 + text-align: right;
1222 +}
1223 +.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo {
1224 + display: none;
1225 +}
1226 +/*# sourceMappingURL=src/css/index.css.map */
1227 +
1228 +/*# sourceMappingURL=tui-image-editor.css.map*/
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.