ponkotsu-md-editor 0.2.9 → 0.2.10
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/markdown_editor.css +117 -55
- data/lib/ponkotsu/md/editor/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: dcc561002630017f4aa81811a9abb0952bd29c5953c7d766decc9e8aa7a7406a
|
|
4
|
+
data.tar.gz: 5fcab26a3e147ba729417227b7a1e5de2714c576c77a45fa65d8bd46541d91ff
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 320b913faceebf0ec4c80ab1b41f4dcce9a91d0a8e6a3b907387f228c70047d6b143c6500fc802c71a2816d2fc628b68a3b2c553e4f6af00258ea99af371d620
|
|
7
|
+
data.tar.gz: 9d24b6d557bcfd6565be811f70673f86888db7a2095949e37feb8acb42f7bda736d5b1341ece9a2b2ff118f1ac984c17cd1e43ebb6c5e20b2a9022df32abef61
|
|
@@ -1,10 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
--accent-color: #007bff;
|
|
3
|
-
--accent-color-hover: #0056b3;
|
|
4
|
-
--accent-pink: #e83e8c;
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
1
|
+
:root {
|
|
2
|
+
--accent-color: #007bff;
|
|
3
|
+
--accent-color-hover: #0056b3;
|
|
4
|
+
--accent-pink: #e83e8c;
|
|
5
|
+
--background: #fff;
|
|
6
|
+
--background-dark: #222;
|
|
7
|
+
--background-alt: #f8f9fa;
|
|
8
|
+
--background-code: #f5f5f5;
|
|
9
|
+
--preview-bg: #f8f9fa;
|
|
10
|
+
--border: #ced4da;
|
|
11
|
+
--border-light: #ced4da;
|
|
12
|
+
--border-info: #b6e2f7;
|
|
13
|
+
--border-table: #dee2e6;
|
|
14
|
+
--text-primary: #212529;
|
|
15
|
+
--text-invert: #fff;
|
|
16
|
+
--text-secondary: #495057;
|
|
17
|
+
--text-muted: #6c757d;
|
|
18
|
+
--text-placeholder: #999;
|
|
19
|
+
--text-info: #222;
|
|
20
|
+
--text-blockquote: #495057;
|
|
21
|
+
--info-bg: #e9f7fd;
|
|
22
|
+
--table-row-alt: #f2f2f2;
|
|
23
|
+
--code-bg: #e9ecef;
|
|
24
|
+
--code-text: #d63384;
|
|
25
|
+
}
|
|
26
|
+
[data-theme="dark"] {
|
|
27
|
+
--accent-color: #66b3ff;
|
|
28
|
+
--accent-color-hover: #3399ff;
|
|
29
|
+
--accent-pink: #ff7eb9;
|
|
30
|
+
--background: #181a1b;
|
|
31
|
+
--background-dark: #222;
|
|
32
|
+
--background-alt: #2a2a2a;
|
|
33
|
+
--background-code: #2d3748;
|
|
34
|
+
--preview-bg: #363636;
|
|
35
|
+
--border: #444;
|
|
36
|
+
--border-light: #444;
|
|
37
|
+
--border-info: #3a4a5a;
|
|
38
|
+
--border-table: #666;
|
|
39
|
+
--text-primary: #f1f3f4;
|
|
40
|
+
--text-invert: #181a1b;
|
|
41
|
+
--text-secondary: #adb5bd;
|
|
42
|
+
--text-muted: #6c757d;
|
|
43
|
+
--text-placeholder: #888;
|
|
44
|
+
--text-info: #f1f3f4;
|
|
45
|
+
--text-blockquote: #adb5bd;
|
|
46
|
+
--info-bg: #223344;
|
|
47
|
+
--table-row-alt: #23272b;
|
|
48
|
+
--code-bg: #495057;
|
|
49
|
+
--code-text: #ffb3d1;
|
|
8
50
|
}
|
|
9
51
|
|
|
10
52
|
.editor-container {
|
|
@@ -13,20 +55,18 @@
|
|
|
13
55
|
|
|
14
56
|
#editor_content {
|
|
15
57
|
position: relative;
|
|
16
|
-
|
|
17
|
-
overflow: hidden; /* はみ出し防止 */
|
|
58
|
+
overflow: hidden;
|
|
18
59
|
height: calc(24 * 20px);
|
|
19
60
|
}
|
|
20
61
|
|
|
21
62
|
#editor_content_placeholder {
|
|
22
63
|
position: absolute;
|
|
23
|
-
top: -17px;
|
|
24
|
-
left: 13px;
|
|
25
|
-
color:
|
|
64
|
+
top: -17px;
|
|
65
|
+
left: 13px;
|
|
66
|
+
color: var(--text-placeholder);
|
|
26
67
|
pointer-events: none;
|
|
27
68
|
z-index: 1;
|
|
28
|
-
white-space: pre-line;
|
|
29
|
-
/* デフォルトで表示 */
|
|
69
|
+
white-space: pre-line;
|
|
30
70
|
display: block;
|
|
31
71
|
max-height: calc(24 * 20px);
|
|
32
72
|
overflow: hidden;
|
|
@@ -44,12 +84,12 @@
|
|
|
44
84
|
|
|
45
85
|
.ponkotsu-md-editor-form-text {
|
|
46
86
|
font-size: 0.875em;
|
|
47
|
-
color:
|
|
87
|
+
color: var(--text-muted);
|
|
48
88
|
margin-top: 0.25rem;
|
|
49
89
|
}
|
|
50
90
|
|
|
51
91
|
.ponkotsu-md-editor-medium-contrast-text {
|
|
52
|
-
color:
|
|
92
|
+
color: var(--text-secondary);
|
|
53
93
|
}
|
|
54
94
|
|
|
55
95
|
.ponkotsu-md-editor-text-decoration-none {
|
|
@@ -63,17 +103,17 @@
|
|
|
63
103
|
padding: 0.5em 0.75em;
|
|
64
104
|
font-size: 1em;
|
|
65
105
|
line-height: 1.5;
|
|
66
|
-
color:
|
|
67
|
-
background-color:
|
|
106
|
+
color: var(--text-primary);
|
|
107
|
+
background-color: var(--background);
|
|
68
108
|
background-clip: padding-box;
|
|
69
|
-
border: 1px solid
|
|
109
|
+
border: 1px solid var(--border-light);
|
|
70
110
|
border-radius: 0.375rem;
|
|
71
111
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
72
112
|
box-sizing: border-box;
|
|
73
113
|
}
|
|
74
114
|
.ponkotsu-md-editor-form-control:focus {
|
|
75
115
|
outline: none;
|
|
76
|
-
border-color: var(--accent-color
|
|
116
|
+
border-color: var(--accent-color);
|
|
77
117
|
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
|
78
118
|
}
|
|
79
119
|
|
|
@@ -86,8 +126,8 @@
|
|
|
86
126
|
}
|
|
87
127
|
|
|
88
128
|
.ponkotsu-md-editor-popover-modal {
|
|
89
|
-
background:
|
|
90
|
-
color:
|
|
129
|
+
background: var(--background-dark);
|
|
130
|
+
color: var(--text-invert);
|
|
91
131
|
border-radius: 8px;
|
|
92
132
|
box-shadow: 0 0 20px #000a;
|
|
93
133
|
max-width: 900px;
|
|
@@ -98,7 +138,7 @@
|
|
|
98
138
|
align-items: center;
|
|
99
139
|
justify-content: space-between;
|
|
100
140
|
padding: 1rem;
|
|
101
|
-
border-bottom: 1px solid
|
|
141
|
+
border-bottom: 1px solid var(--border);
|
|
102
142
|
}
|
|
103
143
|
.ponkotsu-md-editor-popover-title {
|
|
104
144
|
font-size: 1.25rem;
|
|
@@ -108,7 +148,7 @@
|
|
|
108
148
|
background: none;
|
|
109
149
|
border: none;
|
|
110
150
|
font-size: 1.5rem;
|
|
111
|
-
color:
|
|
151
|
+
color: var(--text-invert);
|
|
112
152
|
cursor: pointer;
|
|
113
153
|
}
|
|
114
154
|
.ponkotsu-md-editor-popover-body {
|
|
@@ -118,7 +158,7 @@
|
|
|
118
158
|
}
|
|
119
159
|
.ponkotsu-md-editor-nav {
|
|
120
160
|
display: flex;
|
|
121
|
-
border-bottom: 1px solid
|
|
161
|
+
border-bottom: 1px solid var(--border);
|
|
122
162
|
margin-bottom: 1rem;
|
|
123
163
|
list-style: none;
|
|
124
164
|
padding-left: 0;
|
|
@@ -126,7 +166,7 @@
|
|
|
126
166
|
.ponkotsu-md-editor-nav-tabs .ponkotsu-md-editor-nav-link {
|
|
127
167
|
border: none;
|
|
128
168
|
background: none;
|
|
129
|
-
color:
|
|
169
|
+
color: var(--text-invert);
|
|
130
170
|
padding: 0.5rem 1rem;
|
|
131
171
|
cursor: pointer;
|
|
132
172
|
border-radius: 0.375rem 0.375rem 0 0;
|
|
@@ -134,7 +174,7 @@
|
|
|
134
174
|
}
|
|
135
175
|
.ponkotsu-md-editor-nav-link.active {
|
|
136
176
|
background: #333;
|
|
137
|
-
color: var(--accent-color
|
|
177
|
+
color: var(--accent-color);
|
|
138
178
|
font-weight: bold;
|
|
139
179
|
}
|
|
140
180
|
.ponkotsu-md-editor-nav-fill {
|
|
@@ -161,19 +201,19 @@
|
|
|
161
201
|
width: 100%;
|
|
162
202
|
border-collapse: collapse;
|
|
163
203
|
margin-bottom: 1rem;
|
|
164
|
-
color:
|
|
165
|
-
background:
|
|
204
|
+
color: var(--text-invert);
|
|
205
|
+
background: var(--background-dark);
|
|
166
206
|
}
|
|
167
207
|
.ponkotsu-md-editor-table th,
|
|
168
208
|
.ponkotsu-md-editor-table td {
|
|
169
|
-
border: 1px solid
|
|
209
|
+
border: 1px solid var(--border);
|
|
170
210
|
padding: 0.5rem;
|
|
171
211
|
}
|
|
172
212
|
.ponkotsu-md-editor-table-dark {
|
|
173
|
-
background:
|
|
213
|
+
background: var(--background-dark);
|
|
174
214
|
}
|
|
175
215
|
.ponkotsu-md-editor-table-striped tbody tr:nth-child(odd) {
|
|
176
|
-
background:
|
|
216
|
+
background: var(--table-row-alt);
|
|
177
217
|
}
|
|
178
218
|
.ponkotsu-md-editor-table-sm th,
|
|
179
219
|
.ponkotsu-md-editor-table-sm td {
|
|
@@ -182,27 +222,27 @@
|
|
|
182
222
|
}
|
|
183
223
|
.ponkotsu-md-editor-table-bordered th,
|
|
184
224
|
.ponkotsu-md-editor-table-bordered td {
|
|
185
|
-
border: 1px solid
|
|
225
|
+
border: 1px solid var(--border-table);
|
|
186
226
|
}
|
|
187
227
|
.ponkotsu-md-editor-alert {
|
|
188
228
|
padding: 1rem;
|
|
189
229
|
border-radius: 0.375rem;
|
|
190
230
|
margin-top: 1.5rem;
|
|
191
231
|
margin-bottom: 1rem;
|
|
192
|
-
background:
|
|
193
|
-
color:
|
|
194
|
-
border: 1px solid
|
|
232
|
+
background: var(--info-bg);
|
|
233
|
+
color: var(--text-info);
|
|
234
|
+
border: 1px solid var(--border-info);
|
|
195
235
|
}
|
|
196
236
|
.ponkotsu-md-editor-alert-info {
|
|
197
|
-
background:
|
|
198
|
-
color:
|
|
199
|
-
border-color:
|
|
237
|
+
background: var(--info-bg);
|
|
238
|
+
color: var(--text-info);
|
|
239
|
+
border-color: var(--border-info);
|
|
200
240
|
}
|
|
201
241
|
.ponkotsu-md-editor-mt-4 {
|
|
202
242
|
margin-top: 1.5rem;
|
|
203
243
|
}
|
|
204
244
|
.ponkotsu-md-editor-high-contrast-text {
|
|
205
|
-
color:
|
|
245
|
+
color: var(--text-invert);
|
|
206
246
|
font-weight: bold;
|
|
207
247
|
}
|
|
208
248
|
|
|
@@ -211,9 +251,9 @@
|
|
|
211
251
|
min-height: 500px;
|
|
212
252
|
padding: 1rem;
|
|
213
253
|
background-color: var(--preview-bg);
|
|
214
|
-
border: 1px solid var(--border
|
|
254
|
+
border: 1px solid var(--border);
|
|
215
255
|
border-radius: 0.375rem;
|
|
216
|
-
color: var(--text-
|
|
256
|
+
color: var(--text-invert);
|
|
217
257
|
word-break: break-word;
|
|
218
258
|
overflow-x: auto;
|
|
219
259
|
}
|
|
@@ -236,12 +276,12 @@
|
|
|
236
276
|
.ponkotsu-md-editor-btn {
|
|
237
277
|
display: inline-block;
|
|
238
278
|
font-weight: 400;
|
|
239
|
-
color:
|
|
279
|
+
color: var(--text-primary);
|
|
240
280
|
text-align: center;
|
|
241
281
|
vertical-align: middle;
|
|
242
282
|
user-select: none;
|
|
243
|
-
background-color:
|
|
244
|
-
border: 1px solid
|
|
283
|
+
background-color: var(--background);
|
|
284
|
+
border: 1px solid var(--border-light);
|
|
245
285
|
padding: 0.375rem 0.75rem;
|
|
246
286
|
font-size: 1em;
|
|
247
287
|
line-height: 1.5;
|
|
@@ -254,25 +294,25 @@
|
|
|
254
294
|
margin-right: 0;
|
|
255
295
|
}
|
|
256
296
|
.ponkotsu-md-editor-btn-outline {
|
|
257
|
-
background-color:
|
|
258
|
-
color:
|
|
259
|
-
border: 1px solid
|
|
297
|
+
background-color: var(--background);
|
|
298
|
+
color: var(--text-primary);
|
|
299
|
+
border: 1px solid var(--border-light);
|
|
260
300
|
}
|
|
261
301
|
.ponkotsu-md-editor-btn-outline:hover,
|
|
262
302
|
.ponkotsu-md-editor-btn-outline:focus {
|
|
263
303
|
background-color: #f0f0f0;
|
|
264
|
-
border-color: var(--accent-color
|
|
265
|
-
color: var(--accent-color
|
|
304
|
+
border-color: var(--accent-color);
|
|
305
|
+
color: var(--accent-color);
|
|
266
306
|
}
|
|
267
307
|
.ponkotsu-md-editor-btn-outline-primary {
|
|
268
|
-
background-color:
|
|
269
|
-
color: var(--accent-color
|
|
270
|
-
border: 1px solid var(--accent-color
|
|
308
|
+
background-color: var(--background);
|
|
309
|
+
color: var(--accent-color);
|
|
310
|
+
border: 1px solid var(--accent-color);
|
|
271
311
|
}
|
|
272
312
|
.ponkotsu-md-editor-btn-outline-primary:hover,
|
|
273
313
|
.ponkotsu-md-editor-btn-outline-primary:focus {
|
|
274
|
-
background-color: var(--accent-color
|
|
275
|
-
color:
|
|
314
|
+
background-color: var(--accent-color);
|
|
315
|
+
color: var(--text-invert);
|
|
276
316
|
}
|
|
277
317
|
.ponkotsu-md-editor-mb-2 {
|
|
278
318
|
margin-bottom: 0.5rem;
|
|
@@ -280,3 +320,25 @@
|
|
|
280
320
|
.ponkotsu-md-editor-ms-2 {
|
|
281
321
|
margin-left: 0.5rem;
|
|
282
322
|
}
|
|
323
|
+
|
|
324
|
+
/* インラインコード・ブロック・引用などの色も変数化 */
|
|
325
|
+
code {
|
|
326
|
+
background: var(--code-bg);
|
|
327
|
+
color: var(--code-text);
|
|
328
|
+
padding: 2px 6px;
|
|
329
|
+
border-radius: 4px;
|
|
330
|
+
}
|
|
331
|
+
pre {
|
|
332
|
+
background: var(--background-code);
|
|
333
|
+
color: var(--text-invert);
|
|
334
|
+
padding: 0.75rem;
|
|
335
|
+
border-radius: 4px;
|
|
336
|
+
margin: 0;
|
|
337
|
+
font-size: 0.95em;
|
|
338
|
+
}
|
|
339
|
+
blockquote {
|
|
340
|
+
border-left: 4px solid var(--accent-color);
|
|
341
|
+
padding-left: 1rem;
|
|
342
|
+
margin: 0;
|
|
343
|
+
color: var(--text-blockquote);
|
|
344
|
+
}
|