@techie_doubts/editor-plugin-color-syntax 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +167 -0
- package/dist/td-editor-plugin-color-syntax.css +153 -0
- package/dist/td-editor-plugin-color-syntax.js +521 -0
- package/dist/toastui-editor-plugin-color-syntax.css +153 -0
- package/dist/toastui-editor-plugin-color-syntax.js +523 -0
- package/package.json +54 -0
- package/types/index.d.ts +7 -0
package/README.md
ADDED
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
# TOAST UI Editor : Color Syntax Plugin
|
|
2
|
+
|
|
3
|
+
> This is a plugin of [TOAST UI Editor](https://github.com/nhn/tui.editor/tree/master/apps/editor) to color editing text.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@techie_doubts/editor-plugin-color-syntax)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## 🚩 Table of Contents
|
|
10
|
+
|
|
11
|
+
- [Bundle File Structure](#-bundle-file-structure)
|
|
12
|
+
- [Usage npm](#-usage-npm)
|
|
13
|
+
- [Usage CDN](#-usage-cdn)
|
|
14
|
+
|
|
15
|
+
## 📁 Bundle File Structure
|
|
16
|
+
|
|
17
|
+
### Files Distributed on npm
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
- node_modules/
|
|
21
|
+
- @techie_doubts/
|
|
22
|
+
- editor-plugin-color-syntax/
|
|
23
|
+
- dist/
|
|
24
|
+
- td-editor-plugin-color-syntax.js
|
|
25
|
+
- td-editor-plugin-color-syntax.css
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Files Distributed on CDN
|
|
29
|
+
|
|
30
|
+
The bundle files include all dependencies of this plugin.
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
- uicdn.toast.com/
|
|
34
|
+
- editor-plugin-color-syntax/
|
|
35
|
+
- latest/
|
|
36
|
+
- td-editor-plugin-color-syntax.js
|
|
37
|
+
- td-editor-plugin-color-syntax.min.js
|
|
38
|
+
- td-editor-plugin-color-syntax.css
|
|
39
|
+
- td-editor-plugin-color-syntax.min.css
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## 📦 Usage npm
|
|
43
|
+
|
|
44
|
+
To use the plugin, [`@techie_doubts/tui.editor.2026`](https://github.com/nhn/tui.editor/tree/master/apps/editor) must be installed.
|
|
45
|
+
|
|
46
|
+
> Ref. [Getting Started](https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md)
|
|
47
|
+
|
|
48
|
+
### Install
|
|
49
|
+
|
|
50
|
+
```sh
|
|
51
|
+
$ npm install @techie_doubts/editor-plugin-color-syntax
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Import Plugin
|
|
55
|
+
|
|
56
|
+
Along with the plugin, the plugin's dependency style must be imported. The `color-syntax` plugin has [TOAST UI Color Picker](https://github.com/nhn/tui.color-picker) as a dependency, and you need to add a CSS file of TOAST UI Color Picker.
|
|
57
|
+
|
|
58
|
+
#### ES Modules
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
import '/tui.color-picker.2026/dist/tui-color-picker.css';
|
|
62
|
+
import '@techie_doubts/editor-plugin-color-syntax/dist/td-editor-plugin-color-syntax.css';
|
|
63
|
+
|
|
64
|
+
import colorSyntax from '@techie_doubts/editor-plugin-color-syntax';
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
#### CommonJS
|
|
68
|
+
|
|
69
|
+
```js
|
|
70
|
+
require('/tui.color-picker.2026/dist/tui-color-picker.css');
|
|
71
|
+
require('@techie_doubts/editor-plugin-color-syntax/dist/td-editor-plugin-color-syntax.css');
|
|
72
|
+
|
|
73
|
+
const colorSyntax = require('@techie_doubts/editor-plugin-color-syntax');
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Create Instance
|
|
77
|
+
|
|
78
|
+
#### Basic
|
|
79
|
+
|
|
80
|
+
```js
|
|
81
|
+
// ...
|
|
82
|
+
import '/tui.color-picker.2026/dist/tui-color-picker.css';
|
|
83
|
+
import '@techie_doubts/editor-plugin-color-syntax/dist/td-editor-plugin-color-syntax.css';
|
|
84
|
+
|
|
85
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
86
|
+
import colorSyntax from '@techie_doubts/editor-plugin-color-syntax';
|
|
87
|
+
|
|
88
|
+
const editor = new Editor({
|
|
89
|
+
// ...
|
|
90
|
+
plugins: [colorSyntax]
|
|
91
|
+
});
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## 🗂 Usage CDN
|
|
95
|
+
|
|
96
|
+
To use the plugin, the CDN files(CSS, Script) of `@techie_doubts/tui.editor.2026` must be included.
|
|
97
|
+
|
|
98
|
+
### Include Files
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
...
|
|
102
|
+
<head>
|
|
103
|
+
...
|
|
104
|
+
<link
|
|
105
|
+
rel="stylesheet"
|
|
106
|
+
href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css"
|
|
107
|
+
/>
|
|
108
|
+
<link
|
|
109
|
+
rel="stylesheet"
|
|
110
|
+
href="https://uicdn.toast.com/editor-plugin-color-syntax/latest/td-editor-plugin-color-syntax.min.css"
|
|
111
|
+
/>
|
|
112
|
+
...
|
|
113
|
+
</head>
|
|
114
|
+
<body>
|
|
115
|
+
...
|
|
116
|
+
<!-- Color Picker -->
|
|
117
|
+
<script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js"></script>
|
|
118
|
+
<!-- Editor -->
|
|
119
|
+
<script src="https://uicdn.toast.com/editor/latest/td-editor-all.min.js"></script>
|
|
120
|
+
<!-- Editor's Plugin -->
|
|
121
|
+
<script src="https://uicdn.toast.com/editor-plugin-color-syntax/latest/td-editor-plugin-color-syntax.min.js"></script>
|
|
122
|
+
...
|
|
123
|
+
</body>
|
|
124
|
+
...
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Create Instance
|
|
128
|
+
|
|
129
|
+
#### Basic
|
|
130
|
+
|
|
131
|
+
```js
|
|
132
|
+
const { Editor } = toastui;
|
|
133
|
+
const { colorSyntax } = Editor.plugin;
|
|
134
|
+
|
|
135
|
+
const editor = new Editor({
|
|
136
|
+
// ...
|
|
137
|
+
plugins: [colorSyntax]
|
|
138
|
+
});
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### [Optional] Use Plugin with Options
|
|
142
|
+
|
|
143
|
+
The `color-syntax` plugin can set options when used. Just add the plugin function and options related to the plugin to the array(`[pluginFn, pluginOptions]`) and push them to the `plugins` option of the editor.
|
|
144
|
+
|
|
145
|
+
The following options are available in the `color-syntax` plugin.
|
|
146
|
+
|
|
147
|
+
| Name | Type | Default Value | Description |
|
|
148
|
+
| ----------------- | ---------------- | ------------- | -------------------------------- |
|
|
149
|
+
| `preset` | `Array.<string>` | | Preset for color palette |
|
|
150
|
+
|
|
151
|
+
```js
|
|
152
|
+
// ...
|
|
153
|
+
import '/tui.color-picker.2026/dist/tui-color-picker.css';
|
|
154
|
+
import '@techie_doubts/editor-plugin-color-syntax/dist/td-editor-plugin-color-syntax.css';
|
|
155
|
+
|
|
156
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
157
|
+
import colorSyntax from '@techie_doubts/editor-plugin-color-syntax';
|
|
158
|
+
|
|
159
|
+
const colorSyntaxOptions = {
|
|
160
|
+
preset: ['#181818', '#292929', '#393939']
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
const editor = new Editor({
|
|
164
|
+
// ...
|
|
165
|
+
plugins: [[colorSyntax, colorSyntaxOptions]]
|
|
166
|
+
});
|
|
167
|
+
```
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* TOAST UI Editor : Color Syntax Plugin
|
|
3
|
+
* @version 3.1.0 | Sat Feb 21 2026
|
|
4
|
+
* @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
.toastui-editor-popup-color {
|
|
9
|
+
padding: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.toastui-editor-popup-color .tui-colorpicker-container,
|
|
13
|
+
.toastui-editor-popup-color .tui-colorpicker-palette-container {
|
|
14
|
+
width: 147px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.toastui-editor-popup-color .tui-colorpicker-container ul {
|
|
18
|
+
width: 152px;
|
|
19
|
+
margin-bottom: 10px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.toastui-editor-popup-color .tui-colorpicker-container li {
|
|
23
|
+
padding: 0 3px 3px 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
|
|
27
|
+
border: solid 1px rgba(0, 0, 0, 0.1);
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
width: 16px;
|
|
31
|
+
height: 16px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.toastui-editor-popup-color .tui-popup-body {
|
|
35
|
+
padding: 10px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-toggle-slider {
|
|
39
|
+
display: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider {
|
|
43
|
+
border-radius: 3px;
|
|
44
|
+
border: solid 1px rgba(0, 0, 0, 0.05);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
.toastui-editor-popup-color .tui-colorpicker-palette-hex {
|
|
49
|
+
float: right;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
|
|
53
|
+
font-family: inherit;
|
|
54
|
+
font-size: 13px;
|
|
55
|
+
height: 24px;
|
|
56
|
+
width: 65px;
|
|
57
|
+
padding: 3px 25px 3px 10px;
|
|
58
|
+
border: 1px solid #e1e3e9;
|
|
59
|
+
border-radius: 2px;
|
|
60
|
+
float: left;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.toastui-editor-popup-color button {
|
|
64
|
+
height: 32px;
|
|
65
|
+
width: 40px;
|
|
66
|
+
color: #555;
|
|
67
|
+
background: #f7f9fc;
|
|
68
|
+
border: 1px solid #e1e3e9;
|
|
69
|
+
top: 68px;
|
|
70
|
+
position: absolute;
|
|
71
|
+
right: 15px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.toastui-editor-popup-color button:hover {
|
|
75
|
+
border-color: #cbcfdb;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.toastui-editor-popup-color .tui-colorpicker-container div.tui-colorpicker-clearfix {
|
|
79
|
+
display: inline-block;
|
|
80
|
+
margin: 5px 0;
|
|
81
|
+
width: 102px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-preview {
|
|
85
|
+
margin-top: 8px;
|
|
86
|
+
margin-left: -22px;
|
|
87
|
+
width: 16px;
|
|
88
|
+
height: 16px;
|
|
89
|
+
border-radius: 50%;
|
|
90
|
+
border: solid 1px rgba(0, 0, 0, 0.1);
|
|
91
|
+
box-sizing: border-box;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-slider-right {
|
|
95
|
+
width: 19px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
|
|
99
|
+
border: solid 1px rgba(0, 0, 0, 0.05);
|
|
100
|
+
border-radius: 3px;
|
|
101
|
+
overflow: auto;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-huebar-handle {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.toastui-editor-toolbar-icons.color {
|
|
109
|
+
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxMTYiIHZpZXdCb3g9IjAgMCAyNCAxMTYiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjAwIC0xOTIpIHRyYW5zbGF0ZSg2MDAgMTkyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjNTU1IiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiM1NTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZBMjgyOCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjRUVFIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiNFRUUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZGNDg0OCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDI2KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjMDBBOUZGIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiMwMEE5RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZBMjgyOCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDc4KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjNjdDQ0ZGIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiM2N0NDRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZGNDg0OCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9Ii4yIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNiAuNWMxLjUxOSAwIDIuODk0LjYxNiAzLjg5IDEuNjEuOTk0Ljk5NiAxLjYxIDIuMzcxIDEuNjEgMy44OSAwIDEuNTE5LS42MTYgMi44OTQtMS42MSAzLjg5LS45OTYuOTk0LTIuMzcxIDEuNjEtMy44OSAxLjYxLTEuNTE5IDAtMi44OTQtLjYxNi0zLjg5LTEuNjFDMS4xMTcgOC44OTMuNSA3LjUxOC41IDZjMC0xLjUxOS42MTYtMi44OTQgMS42MS0zLjg5QzMuMTA3IDEuMTE3IDQuNDgyLjUgNiAuNXpNNiAzYy0uODI4IDAtMS41NzguMzM2LTIuMTIxLjg3OUMzLjMzNiA0LjQyMiAzIDUuMTcyIDMgNmMwIC44MjguMzM2IDEuNTc4Ljg3OSAyLjEyMUM0LjQyMiA4LjY2NCA1LjE3MiA5IDYgOWMuODI4IDAgMS41NzgtLjMzNiAyLjEyMS0uODc5QzguNjY0IDcuNTc4IDkgNi44MjggOSA2YzAtLjgyOC0uMzM2LTEuNTc4LS44NzktMi4xMjFDNy41NzggMy4zMzYgNi44MjggMyA2IDN6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjAwIC0xOTIpIHRyYW5zbGF0ZSg2MDAgMTkyKSB0cmFuc2xhdGUoMCAxMDQpIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=);
|
|
110
|
+
background-size: 23px 112px;
|
|
111
|
+
background-position: 3px 3px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.toastui-editor-dark .toastui-editor-toolbar-icons.color {
|
|
115
|
+
background-position-y: -47px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.toastui-editor-dark .toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
|
|
119
|
+
border-color: #303238;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.toastui-editor-dark .toastui-editor-popup-color button {
|
|
123
|
+
color: #eee;
|
|
124
|
+
border-color: #303238;
|
|
125
|
+
background-color: #232428;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.toastui-editor-dark .toastui-editor-popup-color button:hover {
|
|
129
|
+
border-color: #494c56;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
|
|
133
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider,
|
|
137
|
+
.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
|
|
138
|
+
border-color: rgba(255, 255, 255, 0.05);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.toastui-editor-toolbar-icons.bgcolor {
|
|
142
|
+
background: none;
|
|
143
|
+
font-size: 11px;
|
|
144
|
+
font-weight: bold;
|
|
145
|
+
line-height: 30px;
|
|
146
|
+
text-indent: 0;
|
|
147
|
+
color: #555;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.toastui-editor-dark .toastui-editor-toolbar-icons.bgcolor {
|
|
151
|
+
color: #eee;
|
|
152
|
+
}
|
|
153
|
+
|