Guten-bubble - Version 0.8.1

Version Description

First release.

Release Info

Developer	niatn1012
Plugin	Guten-bubble
Version	0.8.1
Comparing to
See all releases

Version 0.8.1

Files changed (28) hide show

css/admin-gutenbubble.css +67 -0
css/admin-gutenbubble.min.css +3 -0
css/admin-gutenbubble.scss +68 -0
css/gutenbubble.css +744 -0
css/gutenbubble.min.css +3 -0
css/gutenbubble.scss +409 -0
guten-bubble.php +112 -0
img/01-rose.png +0 -0
img/02-orange.png +0 -0
img/03-lemon.png +0 -0
img/04-lime.png +0 -0
img/05-viridian.png +0 -0
img/06-sky.png +0 -0
img/07-imperial.png +0 -0
img/08-lavendar.png +0 -0
img/09-monotone.png +0 -0
img/10-espresso.png +0 -0
js/block_guten-bubble.js +487 -0
js/block_guten-bubble.min.js +9 -0
languages/guten-bubble-admin-ja.mo +0 -0
languages/guten-bubble-admin-ja.po +332 -0
languages/guten-bubble-ja-block-guten-bubble.json +1 -0
languages/guten-bubble-ja.mo +0 -0
languages/guten-bubble-ja.po +314 -0
options-page.php +176 -0
readme.txt +53 -0
screenshot-1.png +0 -0
screenshot-2.png +0 -0

css/admin-gutenbubble.css ADDED Viewed

	@@ -0,0 +1,67 @@


1	+ /*!
2	+ Guten-Bubble style sheet
3	+ */
4	+ .cngb-remarks, .cngb-remarks-warning {
5	+ border-left: 5px solid #adf;
6	+ margin: 5px;
7	+ padding: 5px;
8	+ background-color: white;
9	+ }
10	+
11	+ .cngb-remarks h3, .cngb-remarks-warning h3 {
12	+ padding-left: 5px;
13	+ }
14	+
15	+ .cngb-remarks ul, .cngb-remarks-warning ul {
16	+ padding-left: 25px;
17	+ }
18	+
19	+ .cngb-remarks li, .cngb-remarks-warning li {
20	+ list-style: initial;
21	+ }
22	+
23	+ .cngb-remarks-warning {
24	+ border-left: 5px solid #fda;
25	+ }
26	+
27	+ .cngb-thumbnail {
28	+ display: inline-block;
29	+ margin: 5px;
30	+ text-align: center;
31	+ vertical-align: top;
32	+ width: 120px;
33	+ }
34	+
35	+ .cngb-thumbnail-view {
36	+ border: 1px solid #ccc;
37	+ padding: 5px;
38	+ height: 800px;
39	+ overflow: auto visible;
40	+ }
41	+
42	+ .cngb-thumbnail-head-d {
43	+ margin: 0;
44	+ padding: 10px;
45	+ background-color: #fed;
46	+ }
47	+
48	+ .cngb-thumbnail-head-i {
49	+ margin: 0;
50	+ padding: 10px;
51	+ background-color: #def;
52	+ }
53	+
54	+ .cngb-thumbnail-list {
55	+ margin: 5px;
56	+ margin-bottom: 20px;
57	+ list-style: none;
58	+ }
59	+
60	+ .cngb-thumbnail img {
61	+ width: 120px;
62	+ height: 120px;
63	+ }
64	+
65	+ .cngb-thumbnail span {
66	+ overflow-wrap: break-word;
67	+ }

css/admin-gutenbubble.min.css ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ /*!
2	+ Guten-Bubble style sheet
3	+ */.cngb-remarks,.cngb-remarks-warning{border-left:5px solid #adf;margin:5px;padding:5px;background-color:white}.cngb-remarks h3,.cngb-remarks-warning h3{padding-left:5px}.cngb-remarks ul,.cngb-remarks-warning ul{padding-left:25px}.cngb-remarks li,.cngb-remarks-warning li{list-style:initial}.cngb-remarks-warning{border-left:5px solid #fda}.cngb-thumbnail{display:inline-block;margin:5px;text-align:center;vertical-align:top;width:120px}.cngb-thumbnail-view{border:1px solid #ccc;padding:5px;height:800px;overflow:auto visible}.cngb-thumbnail-head-d{margin:0;padding:10px;background-color:#fed}.cngb-thumbnail-head-i{margin:0;padding:10px;background-color:#def}.cngb-thumbnail-list{margin:5px;margin-bottom:20px;list-style:none}.cngb-thumbnail img{width:120px;height:120px}.cngb-thumbnail span{overflow-wrap:break-word}

css/admin-gutenbubble.scss ADDED Viewed

	@@ -0,0 +1,68 @@


1	+ /*!
2	+ Guten-Bubble style sheet
3	+ */
4	+ @charset "UTF-8";
5	+
6	+ .cngb {
7	+ &-remarks {
8	+ border-left: 5px solid #adf;
9	+ margin: 5px;
10	+ padding: 5px;
11	+ background-color: white;
12	+ h3 {
13	+ padding-left: 5px;
14	+ }
15	+ ul {
16	+ padding-left: 25px;
17	+ }
18	+ li {
19	+ list-style: initial;
20	+ }
21	+
22	+ &-warning {
23	+ @extend .cngb-remarks;
24	+ border-left: 5px solid #fda;
25	+ }
26	+ }
27	+
28	+ &-thumbnail {
29	+ &-view {
30	+ border: 1px solid #ccc;
31	+ padding: 5px;
32	+ height: 800px;
33	+ overflow: auto visible;
34	+ }
35	+ &-head {
36	+ &-d {
37	+ margin: 0;
38	+ padding: 10px;
39	+ background-color: #fed;
40	+ }
41	+ &-i {
42	+ margin: 0;
43	+ padding: 10px;
44	+ background-color: #def;
45	+ }
46	+ }
47	+ &-list {
48	+ margin: 5px;
49	+ margin-bottom: 20px;
50	+ list-style: none;
51	+ }
52	+
53	+ display: inline-block;
54	+ margin: 5px;
55	+ text-align: center;
56	+ vertical-align: top;
57	+ width: 120px;
58	+
59	+ img {
60	+ width: 120px;
61	+ height: 120px;
62	+ }
63	+
64	+ span {
65	+ overflow-wrap: break-word;
66	+ }
67	+ }
68	+ }

css/gutenbubble.css ADDED Viewed

	@@ -0,0 +1,744 @@


1	+ /*!
2	+ Guten-Bubble style sheet
3	+ */
4	+ .cn-gutenbubble {
5	+ overflow: hidden;
6	+ padding: 10px 20px;
7	+ margin: 0;
8	+ line-height: 1.5;
9	+ color: #333333;
10	+ display: block;
11	+ clear: both;
12	+ content: "";
13	+ }
14	+
15	+ @media screen and (min-width: 721px) {
16	+ .cn-gutenbubble .chara-left, .cn-gutenbubble .chara-right {
17	+ width: 110px;
18	+ }
19	+ }
20	+
21	+ @media screen and (max-width: 720px) {
22	+ .cn-gutenbubble .chara-left, .cn-gutenbubble .chara-right {
23	+ width: 70px;
24	+ }
25	+ }
26	+
27	+ .cn-gutenbubble .chara-left {
28	+ float: left;
29	+ }
30	+
31	+ @media screen and (min-width: 721px) {
32	+ .cn-gutenbubble .chara-left {
33	+ margin-right: -110px;
34	+ }
35	+ }
36	+
37	+ @media screen and (max-width: 720px) {
38	+ .cn-gutenbubble .chara-left {
39	+ margin-right: -70px;
40	+ }
41	+ }
42	+
43	+ .cn-gutenbubble .chara-right {
44	+ float: right;
45	+ }
46	+
47	+ @media screen and (min-width: 721px) {
48	+ .cn-gutenbubble .chara-right {
49	+ margin-left: -110px;
50	+ }
51	+ }
52	+
53	+ @media screen and (max-width: 720px) {
54	+ .cn-gutenbubble .chara-right {
55	+ margin-left: -70px;
56	+ }
57	+ }
58	+
59	+ .cn-gutenbubble .chara-icon {
60	+ text-align: center;
61	+ }
62	+
63	+ @media screen and (min-width: 721px) {
64	+ .cn-gutenbubble .chara-icon {
65	+ height: 100px;
66	+ }
67	+ }
68	+
69	+ @media screen and (max-width: 720px) {
70	+ .cn-gutenbubble .chara-icon {
71	+ height: 60px;
72	+ }
73	+ }
74	+
75	+ @media screen and (min-width: 721px) {
76	+ .cn-gutenbubble .chara-icon > img {
77	+ height: 100px;
78	+ width: 100px;
79	+ }
80	+ }
81	+
82	+ @media screen and (max-width: 720px) {
83	+ .cn-gutenbubble .chara-icon > img {
84	+ height: 60px;
85	+ width: 60px;
86	+ }
87	+ }
88	+
89	+ .cn-gutenbubble .chara-name {
90	+ overflow: hidden;
91	+ text-align: center;
92	+ font-size: 12px;
93	+ }
94	+
95	+ .cn-gutenbubble .bubble-left, .cn-gutenbubble .bubble-right {
96	+ position: relative;
97	+ padding-top: 14px;
98	+ }
99	+
100	+ .cn-gutenbubble .bubble-left {
101	+ float: left;
102	+ }
103	+
104	+ @media screen and (min-width: 721px) {
105	+ .cn-gutenbubble .bubble-left {
106	+ margin-left: 140px;
107	+ margin-right: 120px;
108	+ }
109	+ }
110	+
111	+ @media screen and (max-width: 720px) {
112	+ .cn-gutenbubble .bubble-left {
113	+ margin-left: 100px;
114	+ }
115	+ }
116	+
117	+ .cn-gutenbubble .bubble-right {
118	+ float: right;
119	+ }
120	+
121	+ @media screen and (min-width: 721px) {
122	+ .cn-gutenbubble .bubble-right {
123	+ margin-right: 140px;
124	+ margin-left: 120px;
125	+ }
126	+ }
127	+
128	+ @media screen and (max-width: 720px) {
129	+ .cn-gutenbubble .bubble-right {
130	+ margin-right: 100px;
131	+ }
132	+ }
133	+
134	+ .cn-gutenbubble .tail-speak-left::before, .cn-gutenbubble .tail-speak-left::after, .cn-gutenbubble .tail-speak-right::before, .cn-gutenbubble .tail-speak-right::after {
135	+ position: absolute;
136	+ top: 23px;
137	+ z-index: 1;
138	+ height: 0;
139	+ width: 0;
140	+ border-top-width: 6px;
141	+ border-bottom-width: 6px;
142	+ border-color: transparent #CCCCCC;
143	+ content: "";
144	+ }
145	+
146	+ .cn-gutenbubble .tail-speak-left::before {
147	+ border-right-width: 24px;
148	+ border-style: solid solid solid none;
149	+ left: -24px;
150	+ }
151	+
152	+ .cn-gutenbubble .tail-speak-left::after {
153	+ border-right-width: 24px;
154	+ border-style: solid solid solid none;
155	+ left: -22px;
156	+ z-index: 3;
157	+ border-color: transparent #FFFFFF;
158	+ }
159	+
160	+ .cn-gutenbubble .tail-speak-right::before {
161	+ border-left-width: 24px;
162	+ border-style: solid none solid solid;
163	+ right: -24px;
164	+ }
165	+
166	+ .cn-gutenbubble .tail-speak-right::after {
167	+ border-left-width: 24px;
168	+ border-style: solid none solid solid;
169	+ right: -22px;
170	+ z-index: 3;
171	+ border-color: transparent #FFFFFF;
172	+ }
173	+
174	+ .cn-gutenbubble .tail-think-left::before, .cn-gutenbubble .tail-think-left::after, .cn-gutenbubble .tail-think-right::before, .cn-gutenbubble .tail-think-right::after {
175	+ position: absolute;
176	+ background-color: #FFFFFF;
177	+ border-style: solid;
178	+ border-width: 1px;
179	+ border-color: #CCCCCC;
180	+ content: "";
181	+ }
182	+
183	+ .cn-gutenbubble .tail-think-left::before {
184	+ top: 24px;
185	+ left: -17px;
186	+ height: 12px;
187	+ width: 12px;
188	+ border-radius: 10px;
189	+ }
190	+
191	+ .cn-gutenbubble .tail-think-left::after {
192	+ top: 20px;
193	+ left: -28px;
194	+ height: 8px;
195	+ width: 8px;
196	+ border-radius: 5px;
197	+ }
198	+
199	+ .cn-gutenbubble .tail-think-right::before {
200	+ top: 24px;
201	+ right: -17px;
202	+ height: 12px;
203	+ width: 12px;
204	+ border-radius: 10px;
205	+ }
206	+
207	+ .cn-gutenbubble .tail-think-right::after {
208	+ top: 20px;
209	+ right: -28px;
210	+ height: 8px;
211	+ width: 8px;
212	+ border-radius: 5px;
213	+ }
214	+
215	+ .cn-gutenbubble .content {
216	+ position: relative;
217	+ padding: 5px 10px;
218	+ z-index: 2;
219	+ background-color: #FFFFFF;
220	+ border-style: solid;
221	+ border-width: 1px;
222	+ border-color: #EEEEEE;
223	+ color: #333333;
224	+ }
225	+
226	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-success::after {
227	+ border-color: transparent #dff0d8 !important;
228	+ }
229	+
230	+ .cn-gutenbubble div[class="tail-think"].theme-color-success::before, .cn-gutenbubble div[class="tail-think"].theme-color-success::after {
231	+ background-color: #dff0d8 !important;
232	+ border-color: #d6e9c6 !important;
233	+ }
234	+
235	+ .cn-gutenbubble .content.theme-color-success {
236	+ background-color: #dff0d8 !important;
237	+ border-color: #d6e9c6 !important;
238	+ color: #3c763d !important;
239	+ }
240	+
241	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-info::after {
242	+ border-color: transparent #d9edf7 !important;
243	+ }
244	+
245	+ .cn-gutenbubble div[class="tail-think"].theme-color-info::before, .cn-gutenbubble div[class="tail-think"].theme-color-info::after {
246	+ background-color: #d9edf7 !important;
247	+ border-color: #bce8f1 !important;
248	+ }
249	+
250	+ .cn-gutenbubble .content.theme-color-info {
251	+ background-color: #d9edf7 !important;
252	+ border-color: #bce8f1 !important;
253	+ color: #31708f !important;
254	+ }
255	+
256	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-warning::after {
257	+ border-color: transparent #fcf8e3 !important;
258	+ }
259	+
260	+ .cn-gutenbubble div[class="tail-think"].theme-color-warning::before, .cn-gutenbubble div[class="tail-think"].theme-color-warning::after {
261	+ background-color: #fcf8e3 !important;
262	+ border-color: #f5e79e !important;
263	+ }
264	+
265	+ .cn-gutenbubble .content.theme-color-warning {
266	+ background-color: #fcf8e3 !important;
267	+ border-color: #f5e79e !important;
268	+ color: #8a6d3b !important;
269	+ }
270	+
271	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-danger::after {
272	+ border-color: transparent #f2dede !important;
273	+ }
274	+
275	+ .cn-gutenbubble div[class="tail-think"].theme-color-danger::before, .cn-gutenbubble div[class="tail-think"].theme-color-danger::after {
276	+ background-color: #f2dede !important;
277	+ border-color: #ebccd1 !important;
278	+ }
279	+
280	+ .cn-gutenbubble .content.theme-color-danger {
281	+ background-color: #f2dede !important;
282	+ border-color: #ebccd1 !important;
283	+ color: #a94442 !important;
284	+ }
285	+
286	+ .cn-gutenbubble div[class="tail-speak"].theme-color-rose::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-rose-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-rose-fill::before {
287	+ border-color: transparent #F9007C !important;
288	+ }
289	+
290	+ .cn-gutenbubble div[class="tail-speak"].theme-color-rose::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-rose-fill::after {
291	+ border-color: transparent #FFEDF6 !important;
292	+ }
293	+
294	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-rose-fill::after {
295	+ border-color: transparent #F9007C !important;
296	+ }
297	+
298	+ .cn-gutenbubble div[class="tail-think"].theme-color-rose::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-rose-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-rose::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-rose-fill::after {
299	+ background-color: #FFEDF6 !important;
300	+ border-color: #F9007C !important;
301	+ }
302	+
303	+ .cn-gutenbubble div[class="tail-think"].theme-color-rose-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-rose-fill::after {
304	+ background-color: #F9007C !important;
305	+ border-color: #F9007C !important;
306	+ }
307	+
308	+ .cn-gutenbubble .content.theme-color-rose, .cn-gutenbubble .content.theme-color-rose-fill {
309	+ background-color: #FFEDF6 !important;
310	+ border-color: #F9007C !important;
311	+ }
312	+
313	+ .cn-gutenbubble .content.theme-color-rose-fill {
314	+ background-color: #F9007C !important;
315	+ color: white !important;
316	+ }
317	+
318	+ .cn-gutenbubble div[class="tail-speak"].theme-color-orange::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-orange-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-orange-fill::before {
319	+ border-color: transparent #F98511 !important;
320	+ }
321	+
322	+ .cn-gutenbubble div[class="tail-speak"].theme-color-orange::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-orange-fill::after {
323	+ border-color: transparent #FDEAD7 !important;
324	+ }
325	+
326	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-orange-fill::after {
327	+ border-color: transparent #F98511 !important;
328	+ }
329	+
330	+ .cn-gutenbubble div[class="tail-think"].theme-color-orange::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-orange-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-orange::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-orange-fill::after {
331	+ background-color: #FDEAD7 !important;
332	+ border-color: #F98511 !important;
333	+ }
334	+
335	+ .cn-gutenbubble div[class="tail-think"].theme-color-orange-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-orange-fill::after {
336	+ background-color: #F98511 !important;
337	+ border-color: #F98511 !important;
338	+ }
339	+
340	+ .cn-gutenbubble .content.theme-color-orange, .cn-gutenbubble .content.theme-color-orange-fill {
341	+ background-color: #FDEAD7 !important;
342	+ border-color: #F98511 !important;
343	+ }
344	+
345	+ .cn-gutenbubble .content.theme-color-orange-fill {
346	+ background-color: #F98511 !important;
347	+ color: white !important;
348	+ }
349	+
350	+ .cn-gutenbubble div[class="tail-speak"].theme-color-lemon::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-lemon-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-lemon-fill::before {
351	+ border-color: transparent #FFE900 !important;
352	+ }
353	+
354	+ .cn-gutenbubble div[class="tail-speak"].theme-color-lemon::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-lemon-fill::after {
355	+ border-color: transparent #FFFACD !important;
356	+ }
357	+
358	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-lemon-fill::after {
359	+ border-color: transparent #FFE900 !important;
360	+ }
361	+
362	+ .cn-gutenbubble div[class="tail-think"].theme-color-lemon::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-lemon-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-lemon::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-lemon-fill::after {
363	+ background-color: #FFFACD !important;
364	+ border-color: #FFE900 !important;
365	+ }
366	+
367	+ .cn-gutenbubble div[class="tail-think"].theme-color-lemon-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-lemon-fill::after {
368	+ background-color: #FFE900 !important;
369	+ border-color: #FFE900 !important;
370	+ }
371	+
372	+ .cn-gutenbubble .content.theme-color-lemon, .cn-gutenbubble .content.theme-color-lemon-fill {
373	+ background-color: #FFFACD !important;
374	+ border-color: #FFE900 !important;
375	+ }
376	+
377	+ .cn-gutenbubble .content.theme-color-lemon-fill {
378	+ background-color: #FFE900 !important;
379	+ }
380	+
381	+ .cn-gutenbubble div[class="tail-speak"].theme-color-lime::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-lime-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-lime-fill::before {
382	+ border-color: transparent #00FF00 !important;
383	+ }
384	+
385	+ .cn-gutenbubble div[class="tail-speak"].theme-color-lime::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-lime-fill::after {
386	+ border-color: transparent #E5FFE5 !important;
387	+ }
388	+
389	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-lime-fill::after {
390	+ border-color: transparent #00FF00 !important;
391	+ }
392	+
393	+ .cn-gutenbubble div[class="tail-think"].theme-color-lime::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-lime-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-lime::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-lime-fill::after {
394	+ background-color: #E5FFE5 !important;
395	+ border-color: #00FF00 !important;
396	+ }
397	+
398	+ .cn-gutenbubble div[class="tail-think"].theme-color-lime-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-lime-fill::after {
399	+ background-color: #00FF00 !important;
400	+ border-color: #00FF00 !important;
401	+ }
402	+
403	+ .cn-gutenbubble .content.theme-color-lime, .cn-gutenbubble .content.theme-color-lime-fill {
404	+ background-color: #E5FFE5 !important;
405	+ border-color: #00FF00 !important;
406	+ }
407	+
408	+ .cn-gutenbubble .content.theme-color-lime-fill {
409	+ background-color: #00FF00 !important;
410	+ }
411	+
412	+ .cn-gutenbubble div[class="tail-speak"].theme-color-viridian::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-viridian-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-viridian-fill::before {
413	+ border-color: transparent #05FFC8 !important;
414	+ }
415	+
416	+ .cn-gutenbubble div[class="tail-speak"].theme-color-viridian::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-viridian-fill::after {
417	+ border-color: transparent #D1FFF5 !important;
418	+ }
419	+
420	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-viridian-fill::after {
421	+ border-color: transparent #05FFC8 !important;
422	+ }
423	+
424	+ .cn-gutenbubble div[class="tail-think"].theme-color-viridian::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-viridian-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-viridian::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-viridian-fill::after {
425	+ background-color: #D1FFF5 !important;
426	+ border-color: #05FFC8 !important;
427	+ }
428	+
429	+ .cn-gutenbubble div[class="tail-think"].theme-color-viridian-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-viridian-fill::after {
430	+ background-color: #05FFC8 !important;
431	+ border-color: #05FFC8 !important;
432	+ }
433	+
434	+ .cn-gutenbubble .content.theme-color-viridian, .cn-gutenbubble .content.theme-color-viridian-fill {
435	+ background-color: #D1FFF5 !important;
436	+ border-color: #05FFC8 !important;
437	+ }
438	+
439	+ .cn-gutenbubble .content.theme-color-viridian-fill {
440	+ background-color: #05FFC8 !important;
441	+ }
442	+
443	+ .cn-gutenbubble div[class="tail-speak"].theme-color-sky::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-sky-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-sky-fill::before {
444	+ border-color: transparent #00BFFF !important;
445	+ }
446	+
447	+ .cn-gutenbubble div[class="tail-speak"].theme-color-sky::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-sky-fill::after {
448	+ border-color: transparent #D8F5FF !important;
449	+ }
450	+
451	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-sky-fill::after {
452	+ border-color: transparent #00BFFF !important;
453	+ }
454	+
455	+ .cn-gutenbubble div[class="tail-think"].theme-color-sky::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-sky-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-sky::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-sky-fill::after {
456	+ background-color: #D8F5FF !important;
457	+ border-color: #00BFFF !important;
458	+ }
459	+
460	+ .cn-gutenbubble div[class="tail-think"].theme-color-sky-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-sky-fill::after {
461	+ background-color: #00BFFF !important;
462	+ border-color: #00BFFF !important;
463	+ }
464	+
465	+ .cn-gutenbubble .content.theme-color-sky, .cn-gutenbubble .content.theme-color-sky-fill {
466	+ background-color: #D8F5FF !important;
467	+ border-color: #00BFFF !important;
468	+ }
469	+
470	+ .cn-gutenbubble .content.theme-color-sky-fill {
471	+ background-color: #00BFFF !important;
472	+ color: white !important;
473	+ }
474	+
475	+ .cn-gutenbubble div[class="tail-speak"].theme-color-imperial::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-imperial-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-imperial-fill::before {
476	+ border-color: transparent #2464FF !important;
477	+ }
478	+
479	+ .cn-gutenbubble div[class="tail-speak"].theme-color-imperial::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-imperial-fill::after {
480	+ border-color: transparent #D8E4FF !important;
481	+ }
482	+
483	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-imperial-fill::after {
484	+ border-color: transparent #2464FF !important;
485	+ }
486	+
487	+ .cn-gutenbubble div[class="tail-think"].theme-color-imperial::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-imperial-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-imperial::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-imperial-fill::after {
488	+ background-color: #D8E4FF !important;
489	+ border-color: #2464FF !important;
490	+ }
491	+
492	+ .cn-gutenbubble div[class="tail-think"].theme-color-imperial-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-imperial-fill::after {
493	+ background-color: #2464FF !important;
494	+ border-color: #2464FF !important;
495	+ }
496	+
497	+ .cn-gutenbubble .content.theme-color-imperial, .cn-gutenbubble .content.theme-color-imperial-fill {
498	+ background-color: #D8E4FF !important;
499	+ border-color: #2464FF !important;
500	+ }
501	+
502	+ .cn-gutenbubble .content.theme-color-imperial-fill {
503	+ background-color: #2464FF !important;
504	+ color: white !important;
505	+ }
506	+
507	+ .cn-gutenbubble div[class="tail-speak"].theme-color-lavendar::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-lavendar-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-lavendar-fill::before {
508	+ border-color: transparent #9F80FC !important;
509	+ }
510	+
511	+ .cn-gutenbubble div[class="tail-speak"].theme-color-lavendar::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-lavendar-fill::after {
512	+ border-color: transparent #DFD6F9 !important;
513	+ }
514	+
515	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-lavendar-fill::after {
516	+ border-color: transparent #9F80FC !important;
517	+ }
518	+
519	+ .cn-gutenbubble div[class="tail-think"].theme-color-lavendar::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-lavendar-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-lavendar::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-lavendar-fill::after {
520	+ background-color: #DFD6F9 !important;
521	+ border-color: #9F80FC !important;
522	+ }
523	+
524	+ .cn-gutenbubble div[class="tail-think"].theme-color-lavendar-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-lavendar-fill::after {
525	+ background-color: #9F80FC !important;
526	+ border-color: #9F80FC !important;
527	+ }
528	+
529	+ .cn-gutenbubble .content.theme-color-lavendar, .cn-gutenbubble .content.theme-color-lavendar-fill {
530	+ background-color: #DFD6F9 !important;
531	+ border-color: #9F80FC !important;
532	+ }
533	+
534	+ .cn-gutenbubble .content.theme-color-lavendar-fill {
535	+ background-color: #9F80FC !important;
536	+ color: white !important;
537	+ }
538	+
539	+ .cn-gutenbubble div[class="tail-speak"].theme-color-monotone::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-monotone-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-monotone-fill::before {
540	+ border-color: transparent #777 !important;
541	+ }
542	+
543	+ .cn-gutenbubble div[class="tail-speak"].theme-color-monotone::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-monotone-fill::after {
544	+ border-color: transparent #EEE !important;
545	+ }
546	+
547	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-monotone-fill::after {
548	+ border-color: transparent #777 !important;
549	+ }
550	+
551	+ .cn-gutenbubble div[class="tail-think"].theme-color-monotone::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-monotone-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-monotone::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-monotone-fill::after {
552	+ background-color: #EEE !important;
553	+ border-color: #777 !important;
554	+ }
555	+
556	+ .cn-gutenbubble div[class="tail-think"].theme-color-monotone-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-monotone-fill::after {
557	+ background-color: #777 !important;
558	+ border-color: #777 !important;
559	+ }
560	+
561	+ .cn-gutenbubble .content.theme-color-monotone, .cn-gutenbubble .content.theme-color-monotone-fill {
562	+ background-color: #EEE !important;
563	+ border-color: #777 !important;
564	+ }
565	+
566	+ .cn-gutenbubble .content.theme-color-monotone-fill {
567	+ background-color: #777 !important;
568	+ color: white !important;
569	+ }
570	+
571	+ .cn-gutenbubble div[class="tail-speak"].theme-color-espresso::before, .cn-gutenbubble div[class="tail-speak"].content.theme-color-espresso-fill::before, .cn-gutenbubble div[class*="tail-speak"].theme-color-espresso-fill::before {
572	+ border-color: transparent #673202 !important;
573	+ }
574	+
575	+ .cn-gutenbubble div[class="tail-speak"].theme-color-espresso::after, .cn-gutenbubble div[class="tail-speak"].content.theme-color-espresso-fill::after {
576	+ border-color: transparent #FCE5AF !important;
577	+ }
578	+
579	+ .cn-gutenbubble div[class*="tail-speak"].theme-color-espresso-fill::after {
580	+ border-color: transparent #673202 !important;
581	+ }
582	+
583	+ .cn-gutenbubble div[class="tail-think"].theme-color-espresso::before, .cn-gutenbubble div[class="tail-think"].content.theme-color-espresso-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-espresso::after, .cn-gutenbubble div[class="tail-think"].content.theme-color-espresso-fill::after {
584	+ background-color: #FCE5AF !important;
585	+ border-color: #673202 !important;
586	+ }
587	+
588	+ .cn-gutenbubble div[class="tail-think"].theme-color-espresso-fill::before, .cn-gutenbubble div[class="tail-think"].theme-color-espresso-fill::after {
589	+ background-color: #673202 !important;
590	+ border-color: #673202 !important;
591	+ }
592	+
593	+ .cn-gutenbubble .content.theme-color-espresso, .cn-gutenbubble .content.theme-color-espresso-fill {
594	+ background-color: #FCE5AF !important;
595	+ border-color: #673202 !important;
596	+ }
597	+
598	+ .cn-gutenbubble .content.theme-color-espresso-fill {
599	+ background-color: #673202 !important;
600	+ color: white !important;
601	+ }
602	+
603	+ .cn-gutenbubble .chara-icon > .shadow,
604	+ .cn-gutenbubble .content.shadow {
605	+ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
606	+ }
607	+
608	+ .cn-gutenbubble div[class="tail-think"].shadow::before, .cn-gutenbubble div[class="tail-think"].shadow::after {
609	+ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
610	+ }
611	+
612	+ .cn-gutenbubble .chara-icon > .corner-r1 {
613	+ border-radius: 4%;
614	+ }
615	+
616	+ .cn-gutenbubble .content.corner-r1 {
617	+ border-radius: 2px;
618	+ }
619	+
620	+ .cn-gutenbubble .chara-icon > .corner-r2 {
621	+ border-radius: 8%;
622	+ }
623	+
624	+ .cn-gutenbubble .content.corner-r2 {
625	+ border-radius: 4px;
626	+ }
627	+
628	+ .cn-gutenbubble .chara-icon > .corner-r3 {
629	+ border-radius: 12%;
630	+ }
631	+
632	+ .cn-gutenbubble .content.corner-r3 {
633	+ border-radius: 6px;
634	+ }
635	+
636	+ .cn-gutenbubble .chara-icon > .corner-r4 {
637	+ border-radius: 16%;
638	+ }
639	+
640	+ .cn-gutenbubble .content.corner-r4 {
641	+ border-radius: 8px;
642	+ }
643	+
644	+ .cn-gutenbubble .chara-icon > .corner-r5 {
645	+ border-radius: 20%;
646	+ }
647	+
648	+ .cn-gutenbubble .content.corner-r5 {
649	+ border-radius: 10px;
650	+ }
651	+
652	+ .cn-gutenbubble .chara-icon > .corner-round {
653	+ border-radius: 50%;
654	+ }
655	+
656	+ .cn-gutenbubble .chara-icon > .nega {
657	+ filter: invert(100%);
658	+ }
659	+
660	+ .cn-gutenbubble .chara-icon > .spin {
661	+ animation: spin 1.5s linear infinite;
662	+ }
663	+
664	+ @keyframes spin {
665	+ 0% {
666	+ transform: rotate(0deg);
667	+ }
668	+ 100% {
669	+ transform: rotate(360deg);
670	+ }
671	+ }
672	+
673	+ .cn-gutenbubble .chara-icon > .spin-rev {
674	+ animation: spin-rev 1.5s linear infinite;
675	+ }
676	+
677	+ @keyframes spin-rev {
678	+ 0% {
679	+ transform: rotate(0deg);
680	+ }
681	+ 100% {
682	+ transform: rotate(-360deg);
683	+ }
684	+ }
685	+
686	+ .cn-gutenbubble .chara-icon > .pendulum {
687	+ animation: pendulum 1.5s linear infinite;
688	+ }
689	+
690	+ @keyframes pendulum {
691	+ 0% {
692	+ transform: rotate(0deg);
693	+ }
694	+ 25% {
695	+ transform: rotate(60deg);
696	+ }
697	+ 50% {
698	+ transform: rotate(0deg);
699	+ }
700	+ 75% {
701	+ transform: rotate(-60deg);
702	+ }
703	+ 100% {
704	+ transform: rotate(0deg);
705	+ }
706	+ }
707	+
708	+ .cn-gutenbubble .chara-icon > .snake {
709	+ animation: snake 0.1s linear infinite;
710	+ }
711	+
712	+ @keyframes snake {
713	+ 0% {
714	+ transform: translate(0px, 0px) rotateZ(0deg);
715	+ }
716	+ 25% {
717	+ transform: translate(2px, 2px) rotateZ(1deg);
718	+ }
719	+ 50% {
720	+ transform: translate(0px, 2px) rotateZ(0deg);
721	+ }
722	+ 75% {
723	+ transform: translate(2px, 0px) rotateZ(-1deg);
724	+ }
725	+ 100% {
726	+ transform: translate(0px, 0px) rotateZ(0deg);
727	+ }
728	+ }
729	+
730	+ .cn-gutenbubble .chara-icon > .bound {
731	+ animation: bound 0.5s ease infinite;
732	+ }
733	+
734	+ @keyframes bound {
735	+ 0% {
736	+ transform: translateY(0px);
737	+ }
738	+ 50% {
739	+ transform: translateY(-15px);
740	+ }
741	+ 100% {
742	+ transform: translateY(0px);
743	+ }
744	+ }

css/gutenbubble.min.css ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ /*!
2	+ Guten-Bubble style sheet
3	+ /.cn-gutenbubble{overflow:hidden;padding:10px 20px;margin:0;line-height:1.5;color:#333333;display:block;clear:both;content:""}@media screen and (min-width: 721px){.cn-gutenbubble .chara-left,.cn-gutenbubble .chara-right{width:110px}}@media screen and (max-width: 720px){.cn-gutenbubble .chara-left,.cn-gutenbubble .chara-right{width:70px}}.cn-gutenbubble .chara-left{float:left}@media screen and (min-width: 721px){.cn-gutenbubble .chara-left{margin-right:-110px}}@media screen and (max-width: 720px){.cn-gutenbubble .chara-left{margin-right:-70px}}.cn-gutenbubble .chara-right{float:right}@media screen and (min-width: 721px){.cn-gutenbubble .chara-right{margin-left:-110px}}@media screen and (max-width: 720px){.cn-gutenbubble .chara-right{margin-left:-70px}}.cn-gutenbubble .chara-icon{text-align:center}@media screen and (min-width: 721px){.cn-gutenbubble .chara-icon{height:100px}}@media screen and (max-width: 720px){.cn-gutenbubble .chara-icon{height:60px}}@media screen and (min-width: 721px){.cn-gutenbubble .chara-icon>img{height:100px;width:100px}}@media screen and (max-width: 720px){.cn-gutenbubble .chara-icon>img{height:60px;width:60px}}.cn-gutenbubble .chara-name{overflow:hidden;text-align:center;font-size:12px}.cn-gutenbubble .bubble-left,.cn-gutenbubble .bubble-right{position:relative;padding-top:14px}.cn-gutenbubble .bubble-left{float:left}@media screen and (min-width: 721px){.cn-gutenbubble .bubble-left{margin-left:140px;margin-right:120px}}@media screen and (max-width: 720px){.cn-gutenbubble .bubble-left{margin-left:100px}}.cn-gutenbubble .bubble-right{float:right}@media screen and (min-width: 721px){.cn-gutenbubble .bubble-right{margin-right:140px;margin-left:120px}}@media screen and (max-width: 720px){.cn-gutenbubble .bubble-right{margin-right:100px}}.cn-gutenbubble .tail-speak-left::before,.cn-gutenbubble .tail-speak-left::after,.cn-gutenbubble .tail-speak-right::before,.cn-gutenbubble .tail-speak-right::after{position:absolute;top:23px;z-index:1;height:0;width:0;border-top-width:6px;border-bottom-width:6px;border-color:transparent #CCCCCC;content:""}.cn-gutenbubble .tail-speak-left::before{border-right-width:24px;border-style:solid solid solid none;left:-24px}.cn-gutenbubble .tail-speak-left::after{border-right-width:24px;border-style:solid solid solid none;left:-22px;z-index:3;border-color:transparent #FFFFFF}.cn-gutenbubble .tail-speak-right::before{border-left-width:24px;border-style:solid none solid solid;right:-24px}.cn-gutenbubble .tail-speak-right::after{border-left-width:24px;border-style:solid none solid solid;right:-22px;z-index:3;border-color:transparent #FFFFFF}.cn-gutenbubble .tail-think-left::before,.cn-gutenbubble .tail-think-left::after,.cn-gutenbubble .tail-think-right::before,.cn-gutenbubble .tail-think-right::after{position:absolute;background-color:#FFFFFF;border-style:solid;border-width:1px;border-color:#CCCCCC;content:""}.cn-gutenbubble .tail-think-left::before{top:24px;left:-17px;height:12px;width:12px;border-radius:10px}.cn-gutenbubble .tail-think-left::after{top:20px;left:-28px;height:8px;width:8px;border-radius:5px}.cn-gutenbubble .tail-think-right::before{top:24px;right:-17px;height:12px;width:12px;border-radius:10px}.cn-gutenbubble .tail-think-right::after{top:20px;right:-28px;height:8px;width:8px;border-radius:5px}.cn-gutenbubble .content{position:relative;padding:5px 10px;z-index:2;background-color:#FFFFFF;border-style:solid;border-width:1px;border-color:#EEEEEE;color:#333333}.cn-gutenbubble div[class="tail-speak"].theme-color-success::after{border-color:transparent #dff0d8 !important}.cn-gutenbubble div[class="tail-think"].theme-color-success::before,.cn-gutenbubble div[class="tail-think"].theme-color-success::after{background-color:#dff0d8 !important;border-color:#d6e9c6 !important}.cn-gutenbubble .content.theme-color-success{background-color:#dff0d8 !important;border-color:#d6e9c6 !important;color:#3c763d !important}.cn-gutenbubble div[class="tail-speak"].theme-color-info::after{border-color:transparent #d9edf7 !important}.cn-gutenbubble div[class="tail-think"].theme-color-info::before,.cn-gutenbubble div[class="tail-think"].theme-color-info::after{background-color:#d9edf7 !important;border-color:#bce8f1 !important}.cn-gutenbubble .content.theme-color-info{background-color:#d9edf7 !important;border-color:#bce8f1 !important;color:#31708f !important}.cn-gutenbubble div[class="tail-speak"].theme-color-warning::after{border-color:transparent #fcf8e3 !important}.cn-gutenbubble div[class="tail-think"].theme-color-warning::before,.cn-gutenbubble div[class="tail-think"].theme-color-warning::after{background-color:#fcf8e3 !important;border-color:#f5e79e !important}.cn-gutenbubble .content.theme-color-warning{background-color:#fcf8e3 !important;border-color:#f5e79e !important;color:#8a6d3b !important}.cn-gutenbubble div[class="tail-speak"].theme-color-danger::after{border-color:transparent #f2dede !important}.cn-gutenbubble div[class="tail-think"].theme-color-danger::before,.cn-gutenbubble div[class="tail-think"].theme-color-danger::after{background-color:#f2dede !important;border-color:#ebccd1 !important}.cn-gutenbubble .content.theme-color-danger{background-color:#f2dede !important;border-color:#ebccd1 !important;color:#a94442 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-rose::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-rose-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-rose-fill::before{border-color:transparent #F9007C !important}.cn-gutenbubble div[class="tail-speak"].theme-color-rose::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-rose-fill::after{border-color:transparent #FFEDF6 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-rose-fill::after{border-color:transparent #F9007C !important}.cn-gutenbubble div[class="tail-think"].theme-color-rose::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-rose-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-rose::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-rose-fill::after{background-color:#FFEDF6 !important;border-color:#F9007C !important}.cn-gutenbubble div[class="tail-think"].theme-color-rose-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-rose-fill::after{background-color:#F9007C !important;border-color:#F9007C !important}.cn-gutenbubble .content.theme-color-rose,.cn-gutenbubble .content.theme-color-rose-fill{background-color:#FFEDF6 !important;border-color:#F9007C !important}.cn-gutenbubble .content.theme-color-rose-fill{background-color:#F9007C !important;color:#fff !important}.cn-gutenbubble div[class="tail-speak"].theme-color-orange::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-orange-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-orange-fill::before{border-color:transparent #F98511 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-orange::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-orange-fill::after{border-color:transparent #FDEAD7 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-orange-fill::after{border-color:transparent #F98511 !important}.cn-gutenbubble div[class="tail-think"].theme-color-orange::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-orange-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-orange::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-orange-fill::after{background-color:#FDEAD7 !important;border-color:#F98511 !important}.cn-gutenbubble div[class="tail-think"].theme-color-orange-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-orange-fill::after{background-color:#F98511 !important;border-color:#F98511 !important}.cn-gutenbubble .content.theme-color-orange,.cn-gutenbubble .content.theme-color-orange-fill{background-color:#FDEAD7 !important;border-color:#F98511 !important}.cn-gutenbubble .content.theme-color-orange-fill{background-color:#F98511 !important;color:#fff !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lemon::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-lemon-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-lemon-fill::before{border-color:transparent #FFE900 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lemon::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-lemon-fill::after{border-color:transparent #fffacd !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lemon-fill::after{border-color:transparent #FFE900 !important}.cn-gutenbubble div[class="tail-think"].theme-color-lemon::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-lemon-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-lemon::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-lemon-fill::after{background-color:#fffacd !important;border-color:#FFE900 !important}.cn-gutenbubble div[class="tail-think"].theme-color-lemon-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-lemon-fill::after{background-color:#FFE900 !important;border-color:#FFE900 !important}.cn-gutenbubble .content.theme-color-lemon,.cn-gutenbubble .content.theme-color-lemon-fill{background-color:#fffacd !important;border-color:#FFE900 !important}.cn-gutenbubble .content.theme-color-lemon-fill{background-color:#FFE900 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lime::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-lime-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-lime-fill::before{border-color:transparent lime !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lime::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-lime-fill::after{border-color:transparent #E5FFE5 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lime-fill::after{border-color:transparent lime !important}.cn-gutenbubble div[class="tail-think"].theme-color-lime::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-lime-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-lime::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-lime-fill::after{background-color:#E5FFE5 !important;border-color:lime !important}.cn-gutenbubble div[class="tail-think"].theme-color-lime-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-lime-fill::after{background-color:lime !important;border-color:lime !important}.cn-gutenbubble .content.theme-color-lime,.cn-gutenbubble .content.theme-color-lime-fill{background-color:#E5FFE5 !important;border-color:lime !important}.cn-gutenbubble .content.theme-color-lime-fill{background-color:lime !important}.cn-gutenbubble div[class="tail-speak"].theme-color-viridian::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-viridian-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-viridian-fill::before{border-color:transparent #05FFC8 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-viridian::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-viridian-fill::after{border-color:transparent #D1FFF5 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-viridian-fill::after{border-color:transparent #05FFC8 !important}.cn-gutenbubble div[class="tail-think"].theme-color-viridian::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-viridian-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-viridian::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-viridian-fill::after{background-color:#D1FFF5 !important;border-color:#05FFC8 !important}.cn-gutenbubble div[class="tail-think"].theme-color-viridian-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-viridian-fill::after{background-color:#05FFC8 !important;border-color:#05FFC8 !important}.cn-gutenbubble .content.theme-color-viridian,.cn-gutenbubble .content.theme-color-viridian-fill{background-color:#D1FFF5 !important;border-color:#05FFC8 !important}.cn-gutenbubble .content.theme-color-viridian-fill{background-color:#05FFC8 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-sky::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-sky-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-sky-fill::before{border-color:transparent #00bfff !important}.cn-gutenbubble div[class="tail-speak"].theme-color-sky::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-sky-fill::after{border-color:transparent #D8F5FF !important}.cn-gutenbubble div[class="tail-speak"].theme-color-sky-fill::after{border-color:transparent #00bfff !important}.cn-gutenbubble div[class="tail-think"].theme-color-sky::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-sky-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-sky::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-sky-fill::after{background-color:#D8F5FF !important;border-color:#00bfff !important}.cn-gutenbubble div[class="tail-think"].theme-color-sky-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-sky-fill::after{background-color:#00bfff !important;border-color:#00bfff !important}.cn-gutenbubble .content.theme-color-sky,.cn-gutenbubble .content.theme-color-sky-fill{background-color:#D8F5FF !important;border-color:#00bfff !important}.cn-gutenbubble .content.theme-color-sky-fill{background-color:#00bfff !important;color:#fff !important}.cn-gutenbubble div[class="tail-speak"].theme-color-imperial::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-imperial-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-imperial-fill::before{border-color:transparent #2464FF !important}.cn-gutenbubble div[class="tail-speak"].theme-color-imperial::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-imperial-fill::after{border-color:transparent #D8E4FF !important}.cn-gutenbubble div[class="tail-speak"].theme-color-imperial-fill::after{border-color:transparent #2464FF !important}.cn-gutenbubble div[class="tail-think"].theme-color-imperial::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-imperial-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-imperial::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-imperial-fill::after{background-color:#D8E4FF !important;border-color:#2464FF !important}.cn-gutenbubble div[class="tail-think"].theme-color-imperial-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-imperial-fill::after{background-color:#2464FF !important;border-color:#2464FF !important}.cn-gutenbubble .content.theme-color-imperial,.cn-gutenbubble .content.theme-color-imperial-fill{background-color:#D8E4FF !important;border-color:#2464FF !important}.cn-gutenbubble .content.theme-color-imperial-fill{background-color:#2464FF !important;color:#fff !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lavendar::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-lavendar-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-lavendar-fill::before{border-color:transparent #9F80FC !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lavendar::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-lavendar-fill::after{border-color:transparent #DFD6F9 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-lavendar-fill::after{border-color:transparent #9F80FC !important}.cn-gutenbubble div[class="tail-think"].theme-color-lavendar::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-lavendar-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-lavendar::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-lavendar-fill::after{background-color:#DFD6F9 !important;border-color:#9F80FC !important}.cn-gutenbubble div[class="tail-think"].theme-color-lavendar-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-lavendar-fill::after{background-color:#9F80FC !important;border-color:#9F80FC !important}.cn-gutenbubble .content.theme-color-lavendar,.cn-gutenbubble .content.theme-color-lavendar-fill{background-color:#DFD6F9 !important;border-color:#9F80FC !important}.cn-gutenbubble .content.theme-color-lavendar-fill{background-color:#9F80FC !important;color:#fff !important}.cn-gutenbubble div[class="tail-speak"].theme-color-monotone::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-monotone-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-monotone-fill::before{border-color:transparent #777 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-monotone::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-monotone-fill::after{border-color:transparent #EEE !important}.cn-gutenbubble div[class="tail-speak"].theme-color-monotone-fill::after{border-color:transparent #777 !important}.cn-gutenbubble div[class="tail-think"].theme-color-monotone::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-monotone-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-monotone::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-monotone-fill::after{background-color:#EEE !important;border-color:#777 !important}.cn-gutenbubble div[class="tail-think"].theme-color-monotone-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-monotone-fill::after{background-color:#777 !important;border-color:#777 !important}.cn-gutenbubble .content.theme-color-monotone,.cn-gutenbubble .content.theme-color-monotone-fill{background-color:#EEE !important;border-color:#777 !important}.cn-gutenbubble .content.theme-color-monotone-fill{background-color:#777 !important;color:#fff !important}.cn-gutenbubble div[class="tail-speak"].theme-color-espresso::before,.cn-gutenbubble div[class="tail-speak"].content.theme-color-espresso-fill::before,.cn-gutenbubble div[class="tail-speak"].theme-color-espresso-fill::before{border-color:transparent #673202 !important}.cn-gutenbubble div[class="tail-speak"].theme-color-espresso::after,.cn-gutenbubble div[class="tail-speak"].content.theme-color-espresso-fill::after{border-color:transparent #FCE5AF !important}.cn-gutenbubble div[class="tail-speak"].theme-color-espresso-fill::after{border-color:transparent #673202 !important}.cn-gutenbubble div[class="tail-think"].theme-color-espresso::before,.cn-gutenbubble div[class="tail-think"].content.theme-color-espresso-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-espresso::after,.cn-gutenbubble div[class="tail-think"].content.theme-color-espresso-fill::after{background-color:#FCE5AF !important;border-color:#673202 !important}.cn-gutenbubble div[class="tail-think"].theme-color-espresso-fill::before,.cn-gutenbubble div[class="tail-think"].theme-color-espresso-fill::after{background-color:#673202 !important;border-color:#673202 !important}.cn-gutenbubble .content.theme-color-espresso,.cn-gutenbubble .content.theme-color-espresso-fill{background-color:#FCE5AF !important;border-color:#673202 !important}.cn-gutenbubble .content.theme-color-espresso-fill{background-color:#673202 !important;color:#fff !important}.cn-gutenbubble .chara-icon>.shadow,.cn-gutenbubble .content.shadow{box-shadow:0px 2px 5px rgba(0,0,0,0.26)}.cn-gutenbubble div[class="tail-think"].shadow::before,.cn-gutenbubble div[class*="tail-think"].shadow::after{box-shadow:0px 2px 5px rgba(0,0,0,0.26)}.cn-gutenbubble .chara-icon>.corner-r1{border-radius:4%}.cn-gutenbubble .content.corner-r1{border-radius:2px}.cn-gutenbubble .chara-icon>.corner-r2{border-radius:8%}.cn-gutenbubble .content.corner-r2{border-radius:4px}.cn-gutenbubble .chara-icon>.corner-r3{border-radius:12%}.cn-gutenbubble .content.corner-r3{border-radius:6px}.cn-gutenbubble .chara-icon>.corner-r4{border-radius:16%}.cn-gutenbubble .content.corner-r4{border-radius:8px}.cn-gutenbubble .chara-icon>.corner-r5{border-radius:20%}.cn-gutenbubble .content.corner-r5{border-radius:10px}.cn-gutenbubble .chara-icon>.corner-round{border-radius:50%}.cn-gutenbubble .chara-icon>.nega{filter:invert(100%)}.cn-gutenbubble .chara-icon>.spin{animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.cn-gutenbubble .chara-icon>.spin-rev{animation:spin-rev 1.5s linear infinite}@keyframes spin-rev{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}.cn-gutenbubble .chara-icon>.pendulum{animation:pendulum 1.5s linear infinite}@keyframes pendulum{0%{transform:rotate(0deg)}25%{transform:rotate(60deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-60deg)}100%{transform:rotate(0deg)}}.cn-gutenbubble .chara-icon>.snake{animation:snake 0.1s linear infinite}@keyframes snake{0%{transform:translate(0px, 0px) rotateZ(0deg)}25%{transform:translate(2px, 2px) rotateZ(1deg)}50%{transform:translate(0px, 2px) rotateZ(0deg)}75%{transform:translate(2px, 0px) rotateZ(-1deg)}100%{transform:translate(0px, 0px) rotateZ(0deg)}}.cn-gutenbubble .chara-icon>.bound{animation:bound 0.5s ease infinite}@keyframes bound{0%{transform:translateY(0px)}50%{transform:translateY(-15px)}100%{transform:translateY(0px)}}

css/gutenbubble.scss ADDED Viewed

	@@ -0,0 +1,409 @@


1	+ /*!
2	+ Guten-Bubble style sheet
3	+ */
4	+ @charset "UTF-8";
5	+
6	+ @mixin large-content {
7	+ @media screen and ( min-width: 721px ) {
8	+ @content;
9	+ }
10	+ }
11	+ @mixin small-content {
12	+ @media screen and ( max-width: 720px ) {
13	+ @content;
14	+ }
15	+ }
16	+
17	+ // Base
18	+ .cn-gutenbubble {
19	+ overflow: hidden;
20	+ padding: 10px 20px;
21	+ margin: 0;
22	+ line-height: 1.5;
23	+ color: #333333;
24	+ display: block;
25	+ clear: both;
26	+ content: "";
27	+
28	+ // Chara Location
29	+ %base-chara {
30	+ @include large-content {
31	+ width: 110px;
32	+ }
33	+ @include small-content {
34	+ width: 70px;
35	+ }
36	+ }
37	+ .chara {
38	+ &-left {
39	+ @extend %base-chara;
40	+ float: left;
41	+ @include large-content {
42	+ margin-right: -110px;
43	+ }
44	+ @include small-content {
45	+ margin-right: -70px;
46	+ }
47	+ }
48	+ &-right {
49	+ @extend %base-chara;
50	+ float: right;
51	+ @include large-content {
52	+ margin-left: -110px;
53	+ }
54	+ @include small-content {
55	+ margin-left: -70px;
56	+ }
57	+ }
58	+ }
59	+
60	+ // Speaker Icon
61	+ .chara-icon {
62	+ text-align: center;
63	+ @include large-content {
64	+ height: 100px;
65	+ }
66	+ @include small-content {
67	+ height: 60px;
68	+ }
69	+
70	+ > img {
71	+ @include large-content {
72	+ height: 100px;
73	+ width: 100px;
74	+ }
75	+ @include small-content {
76	+ height: 60px;
77	+ width: 60px;
78	+ }
79	+ }
80	+ }
81	+
82	+ // Chara Name
83	+ .chara-name {
84	+ overflow: hidden;
85	+ text-align: center;
86	+ font-size: 12px;
87	+ }
88	+
89	+ // Bubble unit
90	+ %base-bubble {
91	+ position: relative;
92	+ padding-top: 14px;
93	+ }
94	+ .bubble {
95	+ &-left {
96	+ @extend %base-bubble;
97	+ float: left;
98	+ @include large-content {
99	+ margin-left: 140px;
100	+ margin-right: 120px;
101	+ }
102	+ @include small-content {
103	+ margin-left: 100px;
104	+ }
105	+ }
106	+ &-right {
107	+ @extend %base-bubble;
108	+ float: right;
109	+ @include large-content {
110	+ margin-right: 140px;
111	+ margin-left: 120px;
112	+ }
113	+ @include small-content {
114	+ margin-right: 100px;
115	+ }
116	+ }
117	+ }
118	+
119	+ // Speak Tail
120	+ %base-tail-speak {
121	+ position: absolute;
122	+ top: 23px;
123	+ z-index: 1;
124	+ height: 0;
125	+ width: 0;
126	+ border-top-width: 6px;
127	+ border-bottom-width: 6px;
128	+ border-color: transparent #CCCCCC;
129	+ content: "";
130	+ }
131	+ .tail-speak {
132	+ @mixin left {
133	+ border-right-width: 24px;
134	+ border-style: solid solid solid none;
135	+ }
136	+ @mixin right {
137	+ border-left-width: 24px;
138	+ border-style: solid none solid solid;
139	+ }
140	+ &-left {
141	+ &::before {
142	+ @extend %base-tail-speak;
143	+ @include left;
144	+ left: -24px;
145	+ }
146	+ &::after {
147	+ @extend %base-tail-speak;
148	+ @include left;
149	+ left: -22px;
150	+ z-index: 3;
151	+ border-color: transparent #FFFFFF;
152	+ }
153	+ }
154	+ &-right {
155	+ &::before {
156	+ @extend %base-tail-speak;
157	+ @include right;
158	+ right: -24px;
159	+ }
160	+ &::after {
161	+ @extend %base-tail-speak;
162	+ @include right;
163	+ right: -22px;
164	+ z-index: 3;
165	+ border-color: transparent #FFFFFF;
166	+ }
167	+ }
168	+ }
169	+
170	+ // Think Tail
171	+ %base-tail-think {
172	+ position: absolute;
173	+ background-color: #FFFFFF;
174	+ border-style: solid;
175	+ border-width: 1px;
176	+ border-color: #CCCCCC;
177	+ content: "";
178	+ }
179	+ .tail-think {
180	+ @mixin big( $align: left ) {
181	+ top: 24px;
182	+ #{$align}: -17px;
183	+ height: 12px;
184	+ width: 12px;
185	+ border-radius: 10px;
186	+ }
187	+ @mixin small( $align: left ) {
188	+ top: 20px;
189	+ #{$align}: -28px;
190	+ height: 8px;
191	+ width: 8px;
192	+ border-radius: 5px;
193	+ }
194	+ &-left {
195	+ &::before {
196	+ @extend %base-tail-think;
197	+ @include big( left );
198	+ }
199	+ &::after {
200	+ @extend %base-tail-think;
201	+ @include small( left );
202	+ }
203	+ }
204	+ &-right {
205	+ &::before {
206	+ @extend %base-tail-think;
207	+ @include big( right );
208	+ }
209	+ &::after {
210	+ @extend %base-tail-think;
211	+ @include small( right );
212	+ }
213	+ }
214	+ }
215	+
216	+ // Content
217	+ .content {
218	+ position: relative;
219	+ padding: 5px 10px;
220	+ z-index: 2;
221	+ background-color: #FFFFFF;
222	+ border-style: solid;
223	+ border-width: 1px;
224	+ border-color: #EEEEEE;
225	+ color: #333333;
226	+ }
227	+
228	+ // Theme Color
229	+ // Bootstrap style
230	+ @mixin theme-color-bootstrap( $name, $color-light, $color-vivid, $color-text ) {
231	+ div[class*="tail-speak"].theme-color-#{$name}::after {
232	+ border-color: transparent $color-light !important;
233	+ }
234	+ div[class*="tail-think"].theme-color-#{$name} {
235	+ &::before, &::after {
236	+ background-color: $color-light !important;
237	+ border-color: $color-vivid !important;
238	+ }
239	+ }
240	+ .content.theme-color-#{$name} {
241	+ background-color: $color-light !important;
242	+ border-color: $color-vivid !important;
243	+ color: $color-text !important;
244	+ }
245	+ }
246	+ // Success
247	+ @include theme-color-bootstrap( 'success', #dff0d8, #d6e9c6, #3c763d );
248	+ // Info
249	+ @include theme-color-bootstrap( 'info', #d9edf7, #bce8f1, #31708f );
250	+ // Warning
251	+ @include theme-color-bootstrap( 'warning', #fcf8e3, #f5e79e, #8a6d3b );
252	+ // Danger
253	+ @include theme-color-bootstrap( 'danger', #f2dede, #ebccd1, #a94442 );
254	+
255	+ // Basic Color
256	+ @mixin theme-color-base( $name, $color-light, $color-vivid, $color-text-in-fill: inherit ) {
257	+ div[class*="tail-speak"].theme-color-#{$name} {
258	+ &::before, &-fill::before {
259	+ border-color: transparent $color-vivid !important;
260	+ }
261	+ &::after {
262	+ border-color: transparent $color-light !important;
263	+ }
264	+ &-fill::after {
265	+ border-color: transparent $color-vivid !important;
266	+ }
267	+ }
268	+ div[class*="tail-think"].theme-color-#{$name} {
269	+ &::before, &::after {
270	+ background-color: $color-light !important;
271	+ border-color: $color-vivid !important;
272	+ }
273	+ &-fill {
274	+ &::before, &::after {
275	+ background-color: $color-vivid !important;
276	+ border-color: $color-vivid !important;
277	+ }
278	+ }
279	+ }
280	+ .content.theme-color-#{$name} {
281	+ background-color: $color-light !important;
282	+ border-color: $color-vivid !important;
283	+
284	+ &-fill {
285	+ @extend .theme-color-#{$name};
286	+ background-color: $color-vivid !important;
287	+ @if $color-text-in-fill != inherit {
288	+ color: $color-text-in-fill !important;
289	+ }
290	+ }
291	+ }
292	+ }
293	+ // Rose
294	+ @include theme-color-base( 'rose', #FFEDF6, #F9007C, white );
295	+ // Orange
296	+ @include theme-color-base( 'orange', #FDEAD7, #F98511, white );
297	+ // Lemon
298	+ @include theme-color-base( 'lemon', #FFFACD, #FFE900 );
299	+ // Lime
300	+ @include theme-color-base( 'lime', #E5FFE5, #00FF00 );
301	+ // Viridian
302	+ @include theme-color-base( 'viridian', #D1FFF5, #05FFC8 );
303	+ // Sky
304	+ @include theme-color-base( 'sky', #D8F5FF, #00BFFF, white );
305	+ // Imperial Blue
306	+ @include theme-color-base( 'imperial', #D8E4FF, #2464FF, white );
307	+ // Lavendar
308	+ @include theme-color-base( 'lavendar', #DFD6F9, #9F80FC, white );
309	+ // Monotone
310	+ @include theme-color-base( 'monotone', #EEE, #777, white );
311	+ // Espresso
312	+ @include theme-color-base( 'espresso', #FCE5AF, #673202, white );
313	+
314	+ // Effects
315	+ // Drop Shadow
316	+ .chara-icon > .shadow,
317	+ .content.shadow {
318	+ box-shadow: 0px 2px 5px rgba( 0, 0, 0, 0.26 );
319	+ }
320	+ div[class*="tail-think"].shadow {
321	+ &::before, &::after {
322	+ box-shadow: 0px 2px 5px rgba( 0, 0, 0, 0.26 );
323	+ }
324	+ }
325	+
326	+ // Corner Radius
327	+ @for $level from 1 through 5 {
328	+ .chara-icon > .corner-r#{$level} {
329	+ border-radius: #{$level * 4}#{'%'};
330	+ }
331	+ .content.corner-r#{$level} {
332	+ border-radius: #{$level * 2}px;
333	+ }
334	+ }
335	+ .chara-icon > .corner-round {
336	+ border-radius: 50#{'%'};
337	+ }
338	+
339	+ // Negative
340	+ .chara-icon > .nega {
341	+ filter: invert( 100% );
342	+ }
343	+
344	+ // Animations
345	+ // Spin Animation
346	+ @mixin spin-animation( $duration, $reverse: false ) {
347	+ $suffix: '';
348	+ $end-rotate: 360deg;
349	+ @if $reverse {
350	+ $suffix: -rev;
351	+ $end-rotate: -360deg;
352	+ }
353	+ animation: spin#{$suffix} $duration linear infinite;
354	+ @keyframes spin#{$suffix} {
355	+ 0% { transform: rotate( 0deg ); }
356	+ 100% { transform: rotate( $end-rotate ); }
357	+ }
358	+ }
359	+ .chara-icon > .spin {
360	+ @include spin-animation( 1.5s );
361	+
362	+ &-rev {
363	+ @include spin-animation( 1.5s, true );
364	+ }
365	+ }
366	+
367	+ // Pendulum
368	+ @mixin pendulum-animation {
369	+ animation: pendulum 1.5s linear infinite;
370	+ @keyframes pendulum {
371	+ 0% { transform: rotate( 0deg ); }
372	+ 25% { transform: rotate( 60deg ); }
373	+ 50% { transform: rotate( 0deg ); }
374	+ 75% { transform: rotate( -60deg ); }
375	+ 100% { transform: rotate( 0deg ); }
376	+ }
377	+ }
378	+ .chara-icon > .pendulum {
379	+ @include pendulum-animation;
380	+ }
381	+
382	+ // Snake
383	+ @mixin snake-animation {
384	+ animation: snake 0.1s linear infinite;
385	+ @keyframes snake {
386	+ 0% { transform: translate( 0px, 0px) rotateZ( 0deg ) }
387	+ 25% { transform: translate( 2px, 2px ) rotateZ( 1deg ) }
388	+ 50% { transform: translate( 0px, 2px ) rotateZ( 0deg ) }
389	+ 75% { transform: translate( 2px, 0px ) rotateZ( -1deg ) }
390	+ 100% { transform: translate( 0px, 0px ) rotateZ( 0deg ) }
391	+ }
392	+ }
393	+ .chara-icon > .snake {
394	+ @include snake-animation;
395	+ }
396	+
397	+ // Bound
398	+ @mixin bound-animation {
399	+ animation: bound 0.5s ease infinite;
400	+ @keyframes bound {
401	+ 0% { transform: translateY( 0px ) }
402	+ 50% { transform: translateY( -15px ) }
403	+ 100% { transform: translateY( 0px ) }
404	+ }
405	+ }
406	+ .chara-icon > .bound {
407	+ @include bound-animation;
408	+ }
409	+ }

guten-bubble.php ADDED Viewed

	@@ -0,0 +1,112 @@


1	+ <?php
2	+ /*
3	+ Plugin Name: Guten-Bubble
4	+ Plugin URI: https://github.com/Nia-TN1012/guten-bubble/
5	+ Description: Displays a speech bubble like a chat conversation.
6	+ Version: 0.8.1
7	+ Author: Chronoir.net
8	+ Author URI: https://chronoir.net/
9	+ License: GPLv2 or later
10	+ License URI: https://www.gnu.org/licenses/gpl-2.0.html
11	+ Text Domain: guten-bubble
12	+ Domain Path: /languages
13	+
14	+ Copyright 2019 Chronoir.net (email: nia1012-tmnk@outlook.jp)
15	+
16	+ This program is free software; you can redistribute it and/or modify
17	+ it under the terms of the GNU General Public License as published by
18	+ the Free Software Foundation; either version 2 of the License, or
19	+ (at your option) any later version.
20	+
21	+ This program is distributed in the hope that it will be useful,
22	+ but WITHOUT ANY WARRANTY; without even the implied warranty of
23	+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
24	+ GNU General Public License for more details.
25	+
26	+ You should have received a copy of the GNU General Public License
27	+ along with this program; if not, write to the Free Software
28	+ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
29	+ */
30	+
31	+ defined( 'ABSPATH' ) \|\| exit;
32	+
33	+ require_once( __DIR__.'/options-page.php' );
34	+
35	+ class GutenBubble {
36	+
37	+ public $options_page;
38	+
39	+ public function __construct() {
40	+ register_activation_hook( __FILE__, [$this, 'activation'] );
41	+
42	+ add_action( 'enqueue_block_editor_assets', [$this, 'add_cunstom_block_to_block_editor'] );
43	+
44	+ add_action( 'init', [$this, 'GutenBubble::add_css_style'] );
45	+
46	+ add_action( 'admin_menu', [$this, 'add_menu_page'] );
47	+
48	+ add_filter( 'plugin_action_links_'.plugin_basename( __FILE__ ), [$this, 'add_action_links'] );
49	+ }
50	+
51	+ /** Invoke when this plugin activates. */
52	+ public function activation() {
53	+ // Copy default character icon files.
54	+ $plugin_dir = plugin_dir_path( __FILE__ ).'img';
55	+ $upload_dir = trailingslashit( wp_upload_dir()['basedir'] ).'guten-bubble/img/default';
56	+ wp_mkdir_p( $upload_dir );
57	+ $default_imgs = [
58	+ '01-rose.png',
59	+ '02-orange.png',
60	+ '03-lemon.png',
61	+ '04-lime.png',
62	+ '05-viridian.png',
63	+ '06-sky.png',
64	+ '07-imperial.png',
65	+ '08-lavendar.png',
66	+ '09-monotone.png',
67	+ '10-espresso.png'
68	+ ];
69	+ foreach( $default_imgs as $default_img ) {
70	+ if( !file_exists( $upload_dir.'/'.$default_img ) ) {
71	+ copy( $plugin_dir.'/'.$default_img, $upload_dir.'/'.$default_img );
72	+ }
73	+ }
74	+ }
75	+
76	+ /** Invoke when enqueue block edtior assets. */
77	+ public function add_cunstom_block_to_block_editor() {
78	+ if( !function_exists( 'register_block_type' ) ) {
79	+ return;
80	+ }
81	+
82	+ wp_enqueue_script( 'block-guten-bubble', plugins_url( 'js/block_guten-bubble.min.js', __FILE__ ), ['wp-blocks', 'wp-editor', 'wp-i18n', 'wp-element', 'wp-components'], "", true );
83	+
84	+ if( function_exists( 'wp_set_script_translations' ) ) {
85	+ wp_set_script_translations( 'block-guten-bubble', 'guten-bubble', plugin_dir_path( __FILE__ ).'languages' );
86	+ }
87	+ }
88	+
89	+ /** Add Guten-bubble's CSS style */
90	+ public function add_css_style() {
91	+ wp_enqueue_style( 'block-guten-bubble', plugins_url( 'css/gutenbubble.min.css', __FILE__ ) );
92	+ }
93	+
94	+ /** Add settings page */
95	+ public function add_menu_page() {
96	+ wp_enqueue_style( 'admin-guten-bubble', plugins_url( 'css/admin-gutenbubble.min.css', __FILE__ ) );
97	+ load_plugin_textdomain( "guten-bubble-admin", false, basename( dirname( __FILE__ ) ).'/languages' );
98	+ wp_enqueue_media();
99	+ $options_page = new GutenBubbleOptionsPage();
100	+ add_submenu_page( 'options-general.php', 'Guten-bubble', 'Guten-bubble', 'manage_options', 'guten-bubble-options', [&$options_page, 'index'] );
101	+ }
102	+
103	+ public function add_action_links( $links ) {
104	+ load_plugin_textdomain( "guten-bubble-admin", false, basename( dirname( __FILE__ ) ).'/languages' );
105	+ $links[] = '<a href="'.esc_url( get_admin_url( null, 'options-general.php?page=guten-bubble-options' ) ).'">'.__( "Settings", "guten-bubble-admin" ).'</a>';
106	+ return $links;
107	+ }
108	+ }
109	+
110	+ new GutenBubble();
111	+
112	+ ?>

img/01-rose.png ADDED Viewed

Binary file

img/02-orange.png ADDED Viewed

Binary file

img/03-lemon.png ADDED Viewed

Binary file

img/04-lime.png ADDED Viewed

Binary file

img/05-viridian.png ADDED Viewed

Binary file

img/06-sky.png ADDED Viewed

Binary file

img/07-imperial.png ADDED Viewed

Binary file

img/08-lavendar.png ADDED Viewed

Binary file

img/09-monotone.png ADDED Viewed

Binary file

img/10-espresso.png ADDED Viewed

Binary file

js/block_guten-bubble.js ADDED Viewed

	@@ -0,0 +1,487 @@


1	+ ( function( blocks, editor, i18n, element, components ) {
2	+ var el = element.createElement;
3	+ var __ = i18n.__;
4	+ var RichText = editor.RichText;
5	+ var InspectorControls = editor.InspectorControls;
6	+ var PanelBody = components.PanelBody;
7	+ var TextControl = components.TextControl;
8	+ var ToggleControl = components.ToggleControl;
9	+ var FontSizePicker = components.FontSizePicker;
10	+
11	+ // Outputs HTML code of speech bubble display.
12	+ var renderGutenBubble = function(
13	+ elContent,
14	+ charaIcon,
15	+ charaAlign,
16	+ charaName,
17	+ themeColor,
18	+ tailType,
19	+ contentFontSize,
20	+ effectShadow,
21	+ effectNega,
22	+ effectCharaRadius,
23	+ effectBubbleRadius,
24	+ animation ) {
25	+ var dataAttributes = {
26	+ className: 'cn-gutenbubble',
27	+ 'data-theme-color': themeColor,
28	+ 'data-chara-align': charaAlign,
29	+ 'data-tail': tailType,
30	+ 'data-animation': animation,
31	+ };
32	+ var charaIconClass = '';
33	+ var tailClass = 'bubble-' + charaAlign + ' tail-' + tailType + '-' + charaAlign;
34	+ var contentClass = 'content';
35	+ if( themeColor !== 'default' ) {
36	+ tailClass += ' theme-color-' + themeColor;
37	+ contentClass += ' theme-color-' + themeColor;
38	+ }
39	+ if( effectShadow ) {
40	+ charaIconClass += ' shadow';
41	+ tailClass += ' shadow';
42	+ contentClass += ' shadow';
43	+ }
44	+ if( effectNega ) {
45	+ charaIconClass += ' nega';
46	+ }
47	+ if( effectCharaRadius !== 'square' ) {
48	+ charaIconClass += ' ' + effectCharaRadius;
49	+ }
50	+ if( effectBubbleRadius !== 'square' ) {
51	+ contentClass += ' ' + effectBubbleRadius;
52	+ }
53	+ if( animation !== 'none' ) {
54	+ charaIconClass += ' ' + animation;
55	+ tailClass += ' ' + animation;
56	+ contentClass += ' ' + animation;
57	+ }
58	+ var contentAttributes = {
59	+ className: contentClass
60	+ };
61	+ if( contentFontSize !== undefined && contentFontSize > 0 ) {
62	+ contentAttributes['style'] = { fontSize: contentFontSize + 'px' };
63	+ }
64	+
65	+ return el( 'div', dataAttributes,
66	+ el( 'div', { className: 'chara-' + charaAlign },
67	+ el( 'div', { className: 'chara-icon' },
68	+ el( 'img',
69	+ {
70	+ className: charaIconClass,
71	+ src: '/wp-content/uploads/guten-bubble/img/' + charaIcon,
72	+ alt: charaIcon,
73	+ },
74	+ )
75	+ ),
76	+ el( 'div', { className: 'chara-name' }, charaName )
77	+ ),
78	+ el( 'div', { className: tailClass },
79	+ el( 'div', contentAttributes, elContent )
80	+ )
81	+ );
82	+ };
83	+
84	+ // Block registration
85	+ blocks.registerBlockType( 'chronoir-net/guten-bubble', {
86	+ title: 'Guten-Bubble',
87	+ icon: 'admin-comments',
88	+ category: 'widgets',
89	+ description: __( 'Displays a speech bubble like a chat conversation.', 'guten-bubble' ),
90	+ keywords: [ __( 'speech', 'guten-bubble' ), __( 'bubble', 'guten-bubble' ), __( 'chara', 'guten-bubble' ) ],
91	+ attributes: {
92	+ chara_icon_preset: {
93	+ type: 'string',
94	+ default: 'custom',
95	+ },
96	+ chara_icon_custom: {
97	+ type: 'string',
98	+ source: 'attribute',
99	+ attribute: 'alt',
100	+ selector: 'img',
101	+ default: '01-rose.png',
102	+ },
103	+ chara_name: {
104	+ type: 'array',
105	+ source: 'children',
106	+ selector: '.chara-name',
107	+ },
108	+ content: {
109	+ type: 'array',
110	+ source: 'children',
111	+ selector: '.content',
112	+ },
113	+ theme_color: {
114	+ type: 'string',
115	+ source: 'attribute',
116	+ attribute: 'data-theme-color',
117	+ selector: 'div',
118	+ default: 'default',
119	+ },
120	+ chara_align: {
121	+ type: 'string',
122	+ source: 'attribute',
123	+ attribute: 'data-chara-align',
124	+ selector: 'div',
125	+ default: 'left',
126	+ },
127	+ tail_type: {
128	+ type: 'string',
129	+ source: 'attribute',
130	+ attribute: 'data-tail',
131	+ selector: 'div',
132	+ default: 'speak',
133	+ },
134	+ content_fontsize: {
135	+ type: 'number',
136	+ default: undefined,
137	+ },
138	+ effect_shadow: {
139	+ type: 'bool',
140	+ default: true,
141	+ },
142	+ effect_nega: {
143	+ type: 'bool',
144	+ default: false,
145	+ },
146	+ effect_chara_radius: {
147	+ type: 'string',
148	+ default: 'square',
149	+ },
150	+ effect_bubble_radius: {
151	+ type: 'string',
152	+ default: 'square',
153	+ },
154	+ animation: {
155	+ type: 'string',
156	+ source: 'attribute',
157	+ attribute: 'data-animation',
158	+ selector: 'div',
159	+ default: 'none',
160	+ }
161	+ },
162	+ edit: function( props ) {
163	+ var charaIconPreset = props.attributes.chara_icon_preset,
164	+ charaIconCustom = props.attributes.chara_icon_custom,
165	+ charaName = props.attributes.chara_name,
166	+ contentText = props.attributes.content,
167	+ themeColor = props.attributes.theme_color,
168	+ charaAlign = props.attributes.chara_align,
169	+ tailType = props.attributes.tail_type,
170	+ contentFontSize = props.attributes.content_fontsize,
171	+ effectShadow = props.attributes.effect_shadow,
172	+ effectNega = props.attributes.effect_nega,
173	+ effectCharaRadius = props.attributes.effect_chara_radius,
174	+ effectBubbleRadius = props.attributes.effect_bubble_radius,
175	+ animation = props.attributes.animation;
176	+
177	+ // --- For Editor Block ---
178	+ // Content
179	+ var elContent = el( RichText, {
180	+ tagName: 'p',
181	+ placeholder: __( 'Enter serif here ...', 'guten-bubble' ),
182	+ value: contentText,
183	+ keepPlaceholderOnFocus: true,
184	+ style: { fontSize: contentFontSize + 'px' },
185	+ onChange: function( value ) {
186	+ props.setAttributes( { content: value } );
187	+ }
188	+ });
189	+
190	+ // --- For Inspecter Block ---
191	+ // Chara Settings
192	+ // Chara Icon Preset
193	+ var elCharaIconPreset = el( 'div', {},
194	+ el( 'label', { style: { display: 'block' } }, __( 'Character icon (preset)', 'guten-bubble' ) ),
195	+ el( 'select', { value: charaIconPreset, onChange: function( event ) {
196	+ var selected = event.target.querySelector( 'option:checked' );
197	+ props.setAttributes( { chara_icon_preset: selected.value } );
198	+ event.preventDefault();
199	+ } },
200	+ el( 'option', { value: 'custom' }, __( 'Custom', 'guten-bubble' ) ),
201	+ el( 'option', { value: 'default/01-rose.png' }, __( 'Rose', 'guten-bubble' ) ),
202	+ el( 'option', { value: 'default/02-orange.png' }, __( 'Orange', 'guten-bubble' ) ),
203	+ el( 'option', { value: 'default/03-lemon.png' }, __( 'Lemon', 'guten-bubble' ) ),
204	+ el( 'option', { value: 'default/04-lime.png' }, __( 'Lime', 'guten-bubble' ) ),
205	+ el( 'option', { value: 'default/05-viridian.png' }, __( 'Viridian', 'guten-bubble' ) ),
206	+ el( 'option', { value: 'default/06-sky.png' }, __( 'Sky Blue', 'guten-bubble' ) ),
207	+ el( 'option', { value: 'default/07-imperial.png' }, __( 'Imperial Blue', 'guten-bubble' ) ),
208	+ el( 'option', { value: 'default/08-lavendar.png' }, __( 'Lavendar', 'guten-bubble' ) ),
209	+ el( 'option', { value: 'default/09-monotone.png' }, __( 'Monotone', 'guten-bubble' ) ),
210	+ el( 'option', { value: 'default/10-espresso.png' }, __( 'Espresso', 'guten-bubble' ) ),
211	+ ),
212	+ );
213	+ // Chara Icon Custom
214	+ var elCharaIconCustom = el( 'div', {},
215	+ el( 'label', { style: { display: 'block' } }, __( 'Character icon (custom)', 'guten-bubble' ) ),
216	+ el( 'small', { style: { display: 'block' } }, __( 'Enabled only when "Custom" is selected for the "Character icon (preset)".', 'guten-bubble' ) ),
217	+ el( 'small', { style: { display: 'block' } }, __( 'Specifies a image file in the \'/wp-content/uploads/guten-bubble/img/\' folder.', 'guten-bubble' ) ),
218	+ el( TextControl, {
219	+ placeholder: __( 'Character icon file name', 'guten-bubble' ),
220	+ value: charaIconCustom,
221	+ onChange: function( value ) {
222	+ props.setAttributes( { chara_icon_custom: value } );
223	+ }
224	+ })
225	+ );
226	+ // Chara Icon Alignment
227	+ var elCharaAlign = el( 'div', {},
228	+ el( 'label', { style: { display: 'block' } }, __( 'Character icon alignment', 'guten-bubble' ) ),
229	+ el( 'select', { value: charaAlign, onChange: function( event ) {
230	+ var selected = event.target.querySelector( 'option:checked' );
231	+ props.setAttributes( { chara_align: selected.value } );
232	+ event.preventDefault();
233	+ } },
234	+ el( 'option', { value: 'left' }, __( 'Left', 'guten-bubble' ) ),
235	+ el( 'option', { value: 'right' }, __( 'Right', 'guten-bubble' ) ),
236	+ )
237	+ );
238	+ // Chara Name
239	+ var elCharaName = el( 'div', {},
240	+ el( 'label', { style: { display: 'block' } }, __( 'Character name', 'guten-bubble' ) ),
241	+ el( TextControl, {
242	+ placeholder: __( 'Character name', 'guten-bubble' ),
243	+ value: charaName,
244	+ onChange: function( value ) {
245	+ props.setAttributes( { chara_name: value } );
246	+ }
247	+ })
248	+ );
249	+ var charaIcon = charaIconPreset !== 'custom' ? charaIconPreset : charaIconCustom;
250	+
251	+ // Content Settings
252	+ var elThemeColor = el( 'div', {},
253	+ el( 'label', { style: { display: 'block' } }, __( 'Theme color', 'guten-bubble' ) ),
254	+ el( 'select', { value: themeColor, onChange: function( event ) {
255	+ var selected = event.target.querySelector( 'option:checked' );
256	+ props.setAttributes( { theme_color: selected.value } );
257	+ event.preventDefault();
258	+ } },
259	+ el( 'option', { value: 'default' }, __( 'Default', 'guten-bubble' ) ),
260	+ el( 'option', { value: 'rose' }, __( 'Rose', 'guten-bubble' ) ),
261	+ el( 'option', { value: 'rose-fill' }, __( 'Rose (fill-color)', 'guten-bubble' ) ),
262	+ el( 'option', { value: 'orange' }, __( 'Orange', 'guten-bubble' ) ),
263	+ el( 'option', { value: 'orange-fill' }, __( 'Orange (fill-color)', 'guten-bubble' ) ),
264	+ el( 'option', { value: 'lemon' }, __( 'Lemon', 'guten-bubble' ) ),
265	+ el( 'option', { value: 'lemon-fill' }, __( 'Lemon (fill-color)', 'guten-bubble' ) ),
266	+ el( 'option', { value: 'lime' }, __( 'Lime', 'guten-bubble' ) ),
267	+ el( 'option', { value: 'lime-fill' }, __( 'Lime (fill-color)', 'guten-bubble' ) ),
268	+ el( 'option', { value: 'viridian' }, __( 'Viridian', 'guten-bubble' ) ),
269	+ el( 'option', { value: 'viridian-fill' }, __( 'Viridian (fill-color)', 'guten-bubble' ) ),
270	+ el( 'option', { value: 'sky' }, __( 'Sky Blue', 'guten-bubble' ) ),
271	+ el( 'option', { value: 'sky-fill' }, __( 'Sky Blue (fill-color)', 'guten-bubble' ) ),
272	+ el( 'option', { value: 'imperial' }, __( 'Imperial Blue', 'guten-bubble' ) ),
273	+ el( 'option', { value: 'imperial-fill' }, __( 'Imperial Blue (fill-color)', 'guten-bubble' ) ),
274	+ el( 'option', { value: 'lavendar' }, __( 'Lavendar', 'guten-bubble' ) ),
275	+ el( 'option', { value: 'lavendar-fill' }, __( 'Lavendar (fill-color)', 'guten-bubble' ) ),
276	+ el( 'option', { value: 'monotone' }, __( 'Monotone', 'guten-bubble' ) ),
277	+ el( 'option', { value: 'monotone-fill' }, __( 'Monotone (fill-color)', 'guten-bubble' ) ),
278	+ el( 'option', { value: 'espresso' }, __( 'Espresso', 'guten-bubble' ) ),
279	+ el( 'option', { value: 'espresso-fill' }, __( 'Espresso (fill-color)', 'guten-bubble' ) ),
280	+ el( 'option', { value: 'success' }, __( 'Bootstrap like (Success)', 'guten-bubble' ) ),
281	+ el( 'option', { value: 'info' }, __( 'Bootstrap like (Info)', 'guten-bubble' ) ),
282	+ el( 'option', { value: 'warning' }, __( 'Bootstrap like (Warning)', 'guten-bubble' ) ),
283	+ el( 'option', { value: 'danger' }, __( 'Bootstrap like (Danger)', 'guten-bubble' ) ),
284	+ )
285	+ );
286	+ // Bubble Tail Type
287	+ var elTailType = el( 'div', {},
288	+ el( 'label', { style: { display: 'block' } }, __( 'Speech bubble tail type', 'guten-bubble' ) ),
289	+ el( 'select', { value: tailType, onChange: function( event ) {
290	+ var selected = event.target.querySelector( 'option:checked' );
291	+ props.setAttributes( { tail_type: selected.value } );
292	+ event.preventDefault();
293	+ } },
294	+ el( 'option', { value: 'speak' }, __( 'Speaking', 'guten-bubble' ) ),
295	+ el( 'option', { value: 'think' }, __( 'Thinking', 'guten-bubble' ) ),
296	+ )
297	+ );
298	+ // Content Font Size
299	+ var elContentFontSize = el( 'div', {},
300	+ el( 'label', { style: { display: 'block' } }, __( 'Speech bubble text font size', 'guten-bubble' ) ),
301	+ el( FontSizePicker, {
302	+ value: contentFontSize,
303	+ fallbackFontSize: 12,
304	+ fontSizes: [
305	+ // 0.625rem
306	+ {
307	+ name: __( 'Extra Small', 'guten-bubble' ),
308	+ slug: 'xsmall',
309	+ size: 10,
310	+ },
311	+ // 0.75rem
312	+ {
313	+ name: __( 'Small', 'guten-bubble' ),
314	+ slug: 'small',
315	+ size: 12,
316	+ },
317	+ // 1rem
318	+ {
319	+ name: __( 'Middle', 'guten-bubble' ),
320	+ slug: 'middle',
321	+ size: 16,
322	+ },
323	+ // 1.5rem
324	+ {
325	+ name: __( 'Large', 'guten-bubble' ),
326	+ slug: 'large',
327	+ size: 24,
328	+ },
329	+ // 2rem
330	+ {
331	+ name: __( 'Extra Large', 'guten-bubble' ),
332	+ slug: 'xlarge',
333	+ size: 32,
334	+ }
335	+ ],
336	+ onChange: function( value ) {
337	+ console.log( value );
338	+ props.setAttributes( { content_fontsize: value } );
339	+ }
340	+ })
341	+ );
342	+
343	+ // Effect Settings
344	+ // Drop Shadow
345	+ var elEffectShadow = el( ToggleControl, {
346	+ label: __( 'Drop shadow', 'guten-bubble' ),
347	+ checked: effectShadow,
348	+ onChange: function( value ) {
349	+ props.setAttributes( { effect_shadow: value } );
350	+ }
351	+ });
352	+ // Icon Negate
353	+ var elEffectNega = el( ToggleControl, {
354	+ label: __( 'Icon negation', 'guten-bubble' ),
355	+ checked: effectNega,
356	+ onChange: function( value ) {
357	+ props.setAttributes( { effect_nega: value } );
358	+ }
359	+ });
360	+ // Chara Icon Corner Raduis
361	+ var elEffectCharaRadius = el( 'div', {},
362	+ el( 'label', { style: { display: 'block' } }, __( 'Character icon corner radius', 'guten-bubble' ) ),
363	+ el( 'select', { value: effectCharaRadius, onChange: function( event ) {
364	+ var selected = event.target.querySelector( 'option:checked' );
365	+ props.setAttributes( { effect_chara_radius: selected.value } );
366	+ event.preventDefault();
367	+ } },
368	+ el( 'option', { value: 'square' }, __( 'Square', 'guten-bubble' ) ),
369	+ el( 'option', { value: 'corner-r1' }, __( 'Corner radius Lv.1', 'guten-bubble' ) ),
370	+ el( 'option', { value: 'corner-r2' }, __( 'Corner radius Lv.2', 'guten-bubble' ) ),
371	+ el( 'option', { value: 'corner-r3' }, __( 'Corner radius Lv.3', 'guten-bubble' ) ),
372	+ el( 'option', { value: 'corner-r4' }, __( 'Corner radius Lv.4', 'guten-bubble' ) ),
373	+ el( 'option', { value: 'corner-r5' }, __( 'Corner radius Lv.5', 'guten-bubble' ) ),
374	+ el( 'option', { value: 'corner-round' }, __( 'Rounded', 'guten-bubble' ) ),
375	+ )
376	+ );
377	+ // Bubble Corner Raduis
378	+ var elEffectBubbleRadius = el( 'div', {},
379	+ el( 'label', { style: { display: 'block' } }, __( 'Speech bubble corner radius', 'guten-bubble' ) ),
380	+ el( 'select', { value: effectBubbleRadius, onChange: function( event ) {
381	+ var selected = event.target.querySelector( 'option:checked' );
382	+ props.setAttributes( { effect_bubble_radius: selected.value } );
383	+ event.preventDefault();
384	+ } },
385	+ el( 'option', { value: 'square' }, __( 'Square', 'guten-bubble' ) ),
386	+ el( 'option', { value: 'corner-r1' }, __( 'Corner radius Lv.1', 'guten-bubble' ) ),
387	+ el( 'option', { value: 'corner-r2' }, __( 'Corner radius Lv.2', 'guten-bubble' ) ),
388	+ el( 'option', { value: 'corner-r3' }, __( 'Corner radius Lv.3', 'guten-bubble' ) ),
389	+ el( 'option', { value: 'corner-r4' }, __( 'Corner radius Lv.4', 'guten-bubble' ) ),
390	+ el( 'option', { value: 'corner-r5' }, __( 'Corner radius Lv.5', 'guten-bubble' ) ),
391	+ )
392	+ );
393	+
394	+ // Animation Settings
395	+ var elAnimation = el( 'select', { value: animation, onChange: function( event ) {
396	+ var selected = event.target.querySelector( 'option:checked' );
397	+ props.setAttributes( { animation: selected.value } );
398	+ event.preventDefault();
399	+ } },
400	+ el( 'option', { value: 'none' }, __( 'None', 'guten-bubble' ) ),
401	+ el( 'option', { value: 'spin' }, __( 'Spin', 'guten-bubble' ) ),
402	+ el( 'option', { value: 'spin-rev' }, __( 'Spin (Reverse)', 'guten-bubble' ) ),
403	+ el( 'option', { value: 'pendulum' }, __( 'Pendulum', 'guten-bubble' ) ),
404	+ el( 'option', { value: 'snake' }, __( 'Snake', 'guten-bubble' ) ),
405	+ el( 'option', { value: 'bound' }, __( 'Bound', 'guten-bubble' ) ),
406	+ );
407	+
408	+ return [
409	+ renderGutenBubble(
410	+ elContent,
411	+ charaIcon,
412	+ charaAlign,
413	+ charaName,
414	+ themeColor,
415	+ tailType,
416	+ contentFontSize,
417	+ effectShadow,
418	+ effectNega,
419	+ effectCharaRadius,
420	+ effectBubbleRadius,
421	+ animation
422	+ ),
423	+ el( InspectorControls, { className: props.className },
424	+ el( PanelBody, { title: __( 'Character icon settings', 'guten-bubble' ) },
425	+ elCharaIconPreset,
426	+ elCharaIconCustom,
427	+ elCharaAlign,
428	+ elCharaName,
429	+ ),
430	+ el( PanelBody, { title: __( 'Speech bubble settings', 'guten-bubble' ) },
431	+ elThemeColor,
432	+ elTailType,
433	+ elContentFontSize,
434	+ ),
435	+ el( PanelBody, { title: __( 'Effect settings', 'guten-bubble' ) },
436	+ elEffectShadow,
437	+ elEffectNega,
438	+ elEffectCharaRadius,
439	+ elEffectBubbleRadius,
440	+ ),
441	+ el( PanelBody, { title: __( 'Animation', 'guten-bubble' ) },
442	+ elAnimation,
443	+ ),
444	+ )
445	+ ];
446	+ },
447	+ save: function( props ) {
448	+ var contentText = props.attributes.content,
449	+ charaIcon = props.attributes.chara_icon_preset,
450	+ charaName = props.attributes.chara_name,
451	+ themeColor = props.attributes.theme_color,
452	+ charaAlign = props.attributes.chara_align,
453	+ tailType = props.attributes.tail_type,
454	+ contentFontSize = props.attributes.content_fontsize,
455	+ effectShadow = props.attributes.effect_shadow,
456	+ effectNega = props.attributes.effect_nega,
457	+ effectCharaRadius = props.attributes.effect_chara_radius,
458	+ effectBubbleRadius = props.attributes.effect_bubble_radius,
459	+ animation = props.attributes.animation;
460	+
461	+ if( charaIcon === 'custom' ) {
462	+ charaIcon = props.attributes.chara_icon_custom;
463	+ }
464	+
465	+ return renderGutenBubble(
466	+ contentText,
467	+ charaIcon,
468	+ charaAlign,
469	+ charaName,
470	+ themeColor,
471	+ tailType,
472	+ contentFontSize,
473	+ effectShadow,
474	+ effectNega,
475	+ effectCharaRadius,
476	+ effectBubbleRadius,
477	+ animation
478	+ );
479	+ },
480	+ } );
481	+ }(
482	+ window.wp.blocks,
483	+ window.wp.editor,
484	+ window.wp.i18n,
485	+ window.wp.element,
486	+ window.wp.components,
487	+ ) );

js/block_guten-bubble.min.js ADDED Viewed

	@@ -0,0 +1,9 @@


1	+ (function(blocks,editor,i18n,element,components){var el=element.createElement;var __=i18n.__;var RichText=editor.RichText;var InspectorControls=editor.InspectorControls;var PanelBody=components.PanelBody;var TextControl=components.TextControl;var ToggleControl=components.ToggleControl;var FontSizePicker=components.FontSizePicker;var renderGutenBubble=function(elContent,charaIcon,charaAlign,charaName,themeColor,tailType,contentFontSize,effectShadow,effectNega,effectCharaRadius,effectBubbleRadius,animation){var dataAttributes={className:'cn-gutenbubble','data-theme-color':themeColor,'data-chara-align':charaAlign,'data-tail':tailType,'data-animation':animation,};var charaIconClass='';var tailClass='bubble-'+charaAlign+' tail-'+tailType+'-'+charaAlign;var contentClass='content';if(themeColor!=='default'){tailClass+=' theme-color-'+themeColor;contentClass+=' theme-color-'+themeColor}
2	+ if(effectShadow){charaIconClass+=' shadow';tailClass+=' shadow';contentClass+=' shadow'}
3	+ if(effectNega){charaIconClass+=' nega'}
4	+ if(effectCharaRadius!=='square'){charaIconClass+=' '+effectCharaRadius}
5	+ if(effectBubbleRadius!=='square'){contentClass+=' '+effectBubbleRadius}
6	+ if(animation!=='none'){charaIconClass+=' '+animation;tailClass+=' '+animation;contentClass+=' '+animation}
7	+ var contentAttributes={className:contentClass};if(contentFontSize!==undefined&&contentFontSize>0){contentAttributes.style={fontSize:contentFontSize+'px'}}
8	+ return el('div',dataAttributes,el('div',{className:'chara-'+charaAlign},el('div',{className:'chara-icon'},el('img',{className:charaIconClass,src:'/wp-content/uploads/guten-bubble/img/'+charaIcon,alt:charaIcon,},)),el('div',{className:'chara-name'},charaName)),el('div',{className:tailClass},el('div',contentAttributes,elContent)))};blocks.registerBlockType('chronoir-net/guten-bubble',{title:'Guten-Bubble',icon:'admin-comments',category:'widgets',description:__('Displays a speech bubble like a chat conversation.','guten-bubble'),keywords:[__('speech','guten-bubble'),__('bubble','guten-bubble'),__('chara','guten-bubble')],attributes:{chara_icon_preset:{type:'string',default:'custom',},chara_icon_custom:{type:'string',source:'attribute',attribute:'alt',selector:'img',default:'01-rose.png',},chara_name:{type:'array',source:'children',selector:'.chara-name',},content:{type:'array',source:'children',selector:'.content',},theme_color:{type:'string',source:'attribute',attribute:'data-theme-color',selector:'div',default:'default',},chara_align:{type:'string',source:'attribute',attribute:'data-chara-align',selector:'div',default:'left',},tail_type:{type:'string',source:'attribute',attribute:'data-tail',selector:'div',default:'speak',},content_fontsize:{type:'number',default:undefined,},effect_shadow:{type:'bool',default:!0,},effect_nega:{type:'bool',default:!1,},effect_chara_radius:{type:'string',default:'square',},effect_bubble_radius:{type:'string',default:'square',},animation:{type:'string',source:'attribute',attribute:'data-animation',selector:'div',default:'none',}},edit:function(props){var charaIconPreset=props.attributes.chara_icon_preset,charaIconCustom=props.attributes.chara_icon_custom,charaName=props.attributes.chara_name,contentText=props.attributes.content,themeColor=props.attributes.theme_color,charaAlign=props.attributes.chara_align,tailType=props.attributes.tail_type,contentFontSize=props.attributes.content_fontsize,effectShadow=props.attributes.effect_shadow,effectNega=props.attributes.effect_nega,effectCharaRadius=props.attributes.effect_chara_radius,effectBubbleRadius=props.attributes.effect_bubble_radius,animation=props.attributes.animation;var elContent=el(RichText,{tagName:'p',placeholder:__('Enter serif here ...','guten-bubble'),value:contentText,keepPlaceholderOnFocus:!0,style:{fontSize:contentFontSize+'px'},onChange:function(value){props.setAttributes({content:value})}});var elCharaIconPreset=el('div',{},el('label',{style:{display:'block'}},__('Character icon (preset)','guten-bubble')),el('select',{value:charaIconPreset,onChange:function(event){var selected=event.target.querySelector('option:checked');props.setAttributes({chara_icon_preset:selected.value});event.preventDefault()}},el('option',{value:'custom'},__('Custom','guten-bubble')),el('option',{value:'default/01-rose.png'},__('Rose','guten-bubble')),el('option',{value:'default/02-orange.png'},__('Orange','guten-bubble')),el('option',{value:'default/03-lemon.png'},__('Lemon','guten-bubble')),el('option',{value:'default/04-lime.png'},__('Lime','guten-bubble')),el('option',{value:'default/05-viridian.png'},__('Viridian','guten-bubble')),el('option',{value:'default/06-sky.png'},__('Sky Blue','guten-bubble')),el('option',{value:'default/07-imperial.png'},__('Imperial Blue','guten-bubble')),el('option',{value:'default/08-lavendar.png'},__('Lavendar','guten-bubble')),el('option',{value:'default/09-monotone.png'},__('Monotone','guten-bubble')),el('option',{value:'default/10-espresso.png'},__('Espresso','guten-bubble')),),);var elCharaIconCustom=el('div',{},el('label',{style:{display:'block'}},__('Character icon (custom)','guten-bubble')),el('small',{style:{display:'block'}},__('Enabled only when "Custom" is selected for the "Character icon (preset)".','guten-bubble')),el('small',{style:{display:'block'}},__('Specifies a image file in the \'/wp-content/uploads/guten-bubble/img/\' folder.','guten-bubble')),el(TextControl,{placeholder:__('Character icon file name','guten-bubble'),value:charaIconCustom,onChange:function(value){props.setAttributes({chara_icon_custom:value})}}));var elCharaAlign=el('div',{},el('label',{style:{display:'block'}},__('Character icon alignment','guten-bubble')),el('select',{value:charaAlign,onChange:function(event){var selected=event.target.querySelector('option:checked');props.setAttributes({chara_align:selected.value});event.preventDefault()}},el('option',{value:'left'},__('Left','guten-bubble')),el('option',{value:'right'},__('Right','guten-bubble')),));var elCharaName=el('div',{},el('label',{style:{display:'block'}},__('Character name','guten-bubble')),el(TextControl,{placeholder:__('Character name','guten-bubble'),value:charaName,onChange:function(value){props.setAttributes({chara_name:value})}}));var charaIcon=charaIconPreset!=='custom'?charaIconPreset:charaIconCustom;var elThemeColor=el('div',{},el('label',{style:{display:'block'}},__('Theme color','guten-bubble')),el('select',{value:themeColor,onChange:function(event){var selected=event.target.querySelector('option:checked');props.setAttributes({theme_color:selected.value});event.preventDefault()}},el('option',{value:'default'},__('Default','guten-bubble')),el('option',{value:'rose'},__('Rose','guten-bubble')),el('option',{value:'rose-fill'},__('Rose (fill-color)','guten-bubble')),el('option',{value:'orange'},__('Orange','guten-bubble')),el('option',{value:'orange-fill'},__('Orange (fill-color)','guten-bubble')),el('option',{value:'lemon'},__('Lemon','guten-bubble')),el('option',{value:'lemon-fill'},__('Lemon (fill-color)','guten-bubble')),el('option',{value:'lime'},__('Lime','guten-bubble')),el('option',{value:'lime-fill'},__('Lime (fill-color)','guten-bubble')),el('option',{value:'viridian'},__('Viridian','guten-bubble')),el('option',{value:'viridian-fill'},__('Viridian (fill-color)','guten-bubble')),el('option',{value:'sky'},__('Sky Blue','guten-bubble')),el('option',{value:'sky-fill'},__('Sky Blue (fill-color)','guten-bubble')),el('option',{value:'imperial'},__('Imperial Blue','guten-bubble')),el('option',{value:'imperial-fill'},__('Imperial Blue (fill-color)','guten-bubble')),el('option',{value:'lavendar'},__('Lavendar','guten-bubble')),el('option',{value:'lavendar-fill'},__('Lavendar (fill-color)','guten-bubble')),el('option',{value:'monotone'},__('Monotone','guten-bubble')),el('option',{value:'monotone-fill'},__('Monotone (fill-color)','guten-bubble')),el('option',{value:'espresso'},__('Espresso','guten-bubble')),el('option',{value:'espresso-fill'},__('Espresso (fill-color)','guten-bubble')),el('option',{value:'success'},__('Bootstrap like (Success)','guten-bubble')),el('option',{value:'info'},__('Bootstrap like (Info)','guten-bubble')),el('option',{value:'warning'},__('Bootstrap like (Warning)','guten-bubble')),el('option',{value:'danger'},__('Bootstrap like (Danger)','guten-bubble')),));var elTailType=el('div',{},el('label',{style:{display:'block'}},__('Speech bubble tail type','guten-bubble')),el('select',{value:tailType,onChange:function(event){var selected=event.target.querySelector('option:checked');props.setAttributes({tail_type:selected.value});event.preventDefault()}},el('option',{value:'speak'},__('Speaking','guten-bubble')),el('option',{value:'think'},__('Thinking','guten-bubble')),));var elContentFontSize=el('div',{},el('label',{style:{display:'block'}},__('Speech bubble text font size','guten-bubble')),el(FontSizePicker,{value:contentFontSize,fallbackFontSize:12,fontSizes:[{name:__('Extra Small','guten-bubble'),slug:'xsmall',size:10,},{name:__('Small','guten-bubble'),slug:'small',size:12,},{name:__('Middle','guten-bubble'),slug:'middle',size:16,},{name:__('Large','guten-bubble'),slug:'large',size:24,},{name:__('Extra Large','guten-bubble'),slug:'xlarge',size:32,}],onChange:function(value){console.log(value);props.setAttributes({content_fontsize:value})}}));var elEffectShadow=el(ToggleControl,{label:__('Drop shadow','guten-bubble'),checked:effectShadow,onChange:function(value){props.setAttributes({effect_shadow:value})}});var elEffectNega=el(ToggleControl,{label:__('Icon negation','guten-bubble'),checked:effectNega,onChange:function(value){props.setAttributes({effect_nega:value})}});var elEffectCharaRadius=el('div',{},el('label',{style:{display:'block'}},__('Character icon corner radius','guten-bubble')),el('select',{value:effectCharaRadius,onChange:function(event){var selected=event.target.querySelector('option:checked');props.setAttributes({effect_chara_radius:selected.value});event.preventDefault()}},el('option',{value:'square'},__('Square','guten-bubble')),el('option',{value:'corner-r1'},__('Corner radius Lv.1','guten-bubble')),el('option',{value:'corner-r2'},__('Corner radius Lv.2','guten-bubble')),el('option',{value:'corner-r3'},__('Corner radius Lv.3','guten-bubble')),el('option',{value:'corner-r4'},__('Corner radius Lv.4','guten-bubble')),el('option',{value:'corner-r5'},__('Corner radius Lv.5','guten-bubble')),el('option',{value:'corner-round'},__('Rounded','guten-bubble')),));var elEffectBubbleRadius=el('div',{},el('label',{style:{display:'block'}},__('Speech bubble corner radius','guten-bubble')),el('select',{value:effectBubbleRadius,onChange:function(event){var selected=event.target.querySelector('option:checked');props.setAttributes({effect_bubble_radius:selected.value});event.preventDefault()}},el('option',{value:'square'},__('Square','guten-bubble')),el('option',{value:'corner-r1'},__('Corner radius Lv.1','guten-bubble')),el('option',{value:'corner-r2'},__('Corner radius Lv.2','guten-bubble')),el('option',{value:'corner-r3'},__('Corner radius Lv.3','guten-bubble')),el('option',{value:'corner-r4'},__('Corner radius Lv.4','guten-bubble')),el('option',{value:'corner-r5'},__('Corner radius Lv.5','guten-bubble')),));var elAnimation=el('select',{value:animation,onChange:function(event){var selected=event.target.querySelector('option:checked');props.setAttributes({animation:selected.value});event.preventDefault()}},el('option',{value:'none'},__('None','guten-bubble')),el('option',{value:'spin'},__('Spin','guten-bubble')),el('option',{value:'spin-rev'},__('Spin (Reverse)','guten-bubble')),el('option',{value:'pendulum'},__('Pendulum','guten-bubble')),el('option',{value:'snake'},__('Snake','guten-bubble')),el('option',{value:'bound'},__('Bound','guten-bubble')),);return[renderGutenBubble(elContent,charaIcon,charaAlign,charaName,themeColor,tailType,contentFontSize,effectShadow,effectNega,effectCharaRadius,effectBubbleRadius,animation),el(InspectorControls,{className:props.className},el(PanelBody,{title:__('Character icon settings','guten-bubble')},elCharaIconPreset,elCharaIconCustom,elCharaAlign,elCharaName,),el(PanelBody,{title:__('Speech bubble settings','guten-bubble')},elThemeColor,elTailType,elContentFontSize,),el(PanelBody,{title:__('Effect settings','guten-bubble')},elEffectShadow,elEffectNega,elEffectCharaRadius,elEffectBubbleRadius,),el(PanelBody,{title:__('Animation','guten-bubble')},elAnimation,),)]},save:function(props){var contentText=props.attributes.content,charaIcon=props.attributes.chara_icon_preset,charaName=props.attributes.chara_name,themeColor=props.attributes.theme_color,charaAlign=props.attributes.chara_align,tailType=props.attributes.tail_type,contentFontSize=props.attributes.content_fontsize,effectShadow=props.attributes.effect_shadow,effectNega=props.attributes.effect_nega,effectCharaRadius=props.attributes.effect_chara_radius,effectBubbleRadius=props.attributes.effect_bubble_radius,animation=props.attributes.animation;if(charaIcon==='custom'){charaIcon=props.attributes.chara_icon_custom}
9	+ return renderGutenBubble(contentText,charaIcon,charaAlign,charaName,themeColor,tailType,contentFontSize,effectShadow,effectNega,effectCharaRadius,effectBubbleRadius,animation)},})}(window.wp.blocks,window.wp.editor,window.wp.i18n,window.wp.element,window.wp.components,))

languages/guten-bubble-admin-ja.mo ADDED Viewed

Binary file

languages/guten-bubble-admin-ja.po ADDED Viewed

	@@ -0,0 +1,332 @@


1	+ # Copyright (C) 2013 WordPress
2	+ # This file is distributed under the same license as the WordPress package.
3	+ msgid ""
4	+ msgstr ""
5	+ "Project-Id-Version: Guten-Bubble\n"
6	+ "Report-Msgid-Bugs-To: http://wppolyglots.wordpress.com\n"
7	+ "POT-Creation-Date: 2019-01-29 13:51+0900\n"
8	+ "PO-Revision-Date: 2019-01-29 13:51+0900\n"
9	+ "Last-Translator: Nia Tomonaka <nia1012@outlook.jp>\n"
10	+ "Language-Team: Nia Tomonaka <nia1012-tmnk@outlook.jp>\n"
11	+ "Language: ja_JP\n"
12	+ "MIME-Version: 1.0\n"
13	+ "Content-Type: text/plain; charset=UTF-8\n"
14	+ "Content-Transfer-Encoding: 8bit\n"
15	+ "X-Generator: Poedit 2.2.1\n"
16	+ "X-Poedit-KeywordsList: __\n"
17	+ "X-Poedit-Basepath: ..\n"
18	+ "X-Poedit-SearchPath-0: guten-bubble.php\n"
19	+ "X-Poedit-SearchPath-1: options-page.php\n"
20	+
21	+ #: guten-bubble.php:105
22	+ msgid "Settings"
23	+ msgstr "設定"
24	+
25	+ #: options-page.php:27
26	+ msgid "Guten-bubble settings"
27	+ msgstr "Guten-Bubbleの設定"
28	+
29	+ #: options-page.php:31
30	+ msgid ""
31	+ "NOTICE: To use the Guten-bubble plugin, required WordPress 5.0 or later."
32	+ msgstr ""
33	+ "重要: Guten-bubbleプラグインを利用するには、WordPress 5.0以降が必要です。"
34	+
35	+ #: options-page.php:36
36	+ msgid "Import character icon image from media library"
37	+ msgstr "メディアライブラリからキャラアイコン画像をインポート"
38	+
39	+ #: options-page.php:50
40	+ msgid "Select character icon image"
41	+ msgstr "キャラアイコンを選択"
42	+
43	+ #: options-page.php:54
44	+ msgid "Choose Image"
45	+ msgstr "画像を選択"
46	+
47	+ #: options-page.php:55
48	+ msgid "Select from media library"
49	+ msgstr "メディアライブラリから選択"
50	+
51	+ #: options-page.php:66
52	+ msgid "Import"
53	+ msgstr "インポート"
54	+
55	+ #: options-page.php:70
56	+ msgid "Remarks"
57	+ msgstr "備考"
58	+
59	+ #: options-page.php:72
60	+ msgid ""
61	+ "Select the image in the WordPress media library and import it into the image "
62	+ "folder of Guten-bubble."
63	+ msgstr ""
64	+ "WordPressのメディアライブラリから画像を選択し、Guten-bubbleの画像フォルダにイ"
65	+ "ンポートします。"
66	+
67	+ #: options-page.php:73
68	+ msgid "The recommended image size is 120px x 120px or more."
69	+ msgstr "画像のサイズは120px × 120px以上を推奨します。"
70	+
71	+ #: options-page.php:74
72	+ msgid ""
73	+ "Imported icon images are not deleted even if they are deleted from the media "
74	+ "library."
75	+ msgstr ""
76	+ "メディアファイルからアイコン画像を削除しても、インポート済みのものは削除され"
77	+ "ず残ります。"
78	+
79	+ #: options-page.php:78
80	+ msgid "Attention"
81	+ msgstr "注意"
82	+
83	+ #: options-page.php:80
84	+ msgid ""
85	+ "If there is an image file of the same name in the import destination, it "
86	+ "will be overwritten."
87	+ msgstr ""
88	+ "インポート済みのものと同じファイル名の画像をインポートした場合、上書きされま"
89	+ "す。"
90	+
91	+ #: options-page.php:94
92	+ msgid "Default character icon list"
93	+ msgstr "デフォルトのキャラアイコン一覧"
94	+
95	+ #: options-page.php:103
96	+ msgid "Imported character icon list"
97	+ msgstr "インポート済みのキャラアイコンの一覧"
98	+
99	+ #: options-page.php:154
100	+ #, php-format
101	+ msgid "ERROR: The selected image URL is invalid. ('%s')"
102	+ msgstr "エラー: 選択された画像のURLが無効です。(‘%s’)"
103	+
104	+ #: options-page.php:160
105	+ #, php-format
106	+ msgid "ERROR: '%s' does not exist or the file path is invalid."
107	+ msgstr "エラー: ‘%s’ が存在しないか、ファイルパスが無効です。"
108	+
109	+ #: options-page.php:166
110	+ #, php-format
111	+ msgid "ERROR: Failed to import '%s'."
112	+ msgstr "エラー: ‘%s’ のインポートに失敗しました。"
113	+
114	+ #: options-page.php:171
115	+ #, php-format
116	+ msgid "Info: '%s' is imported."
117	+ msgstr "情報: ‘%s’ をインポートしました。"
118	+
119	+ #~ msgid "ERROR: Invalid url ('%s') is specified."
120	+ #~ msgstr "エラー: 無効なURL（‘%s’）が指定されています。"
121	+
122	+ #~ msgid "Displays a speech bubble like a chat conversation."
123	+ #~ msgstr "チャットの会話のような吹き出しを表示します。"
124	+
125	+ #~ msgid "speech"
126	+ #~ msgstr "会話"
127	+
128	+ #~ msgid "bubble"
129	+ #~ msgstr "吹き出し"
130	+
131	+ #~ msgid "chara"
132	+ #~ msgstr "キャラ"
133	+
134	+ #~ msgid "Enter serif here ..."
135	+ #~ msgstr "ここにセリフを入力 …"
136	+
137	+ #~ msgid "Character icon (preset)"
138	+ #~ msgstr "キャラアイコン (プリセット)"
139	+
140	+ #~ msgid "Custom"
141	+ #~ msgstr "カスタム"
142	+
143	+ #~ msgid "Rose"
144	+ #~ msgstr "ローズ"
145	+
146	+ #~ msgid "Orange"
147	+ #~ msgstr "オレンジ"
148	+
149	+ #~ msgid "Lemon"
150	+ #~ msgstr "レモン"
151	+
152	+ #~ msgid "Lime"
153	+ #~ msgstr "ライム"
154	+
155	+ #~ msgid "Viridian"
156	+ #~ msgstr "ビリジアン"
157	+
158	+ #~ msgid "Sky Blue"
159	+ #~ msgstr "スカイブルー"
160	+
161	+ #~ msgid "Imperial Blue"
162	+ #~ msgstr "インペリアルブルー"
163	+
164	+ #~ msgid "Lavendar"
165	+ #~ msgstr "ラベンダー"
166	+
167	+ #~ msgid "Monotone"
168	+ #~ msgstr "モノトーン"
169	+
170	+ #~ msgid "Espresso"
171	+ #~ msgstr "エスプレッソ"
172	+
173	+ #~ msgid "Character icon (custom)"
174	+ #~ msgstr "キャラアイコン (カスタム)"
175	+
176	+ #~ msgid ""
177	+ #~ "Enabled only when \"Custom\" is selected for the \"Character icon "
178	+ #~ "(preset)\"."
179	+ #~ msgstr ""
180	+ #~ "「キャラアイコン (プリセット)」で「カスタム」が選択されている場合にのみ有"
181	+ #~ "効になります。"
182	+
183	+ #~ msgid ""
184	+ #~ "Specifies a image file in the '/wp-content/upload/guten-bubble/img/' "
185	+ #~ "folder."
186	+ #~ msgstr ""
187	+ #~ "'/wp-content/upload/guten-bubble/img/' フォルダ内の画像ファイルを指定しま"
188	+ #~ "す。"
189	+
190	+ #~ msgid "Left"
191	+ #~ msgstr "左寄せ"
192	+
193	+ #~ msgid "Right"
194	+ #~ msgstr "右寄せ"
195	+
196	+ #~ msgid "Character name"
197	+ #~ msgstr "キャラの名前"
198	+
199	+ #~ msgid "Theme color"
200	+ #~ msgstr "テーマカラー"
201	+
202	+ #~ msgid "Default"
203	+ #~ msgstr "デフォルト"
204	+
205	+ #~ msgid "Rose (fill-color)"
206	+ #~ msgstr "ローズ（塗りつぶし）"
207	+
208	+ #~ msgid "Orange (fill-color)"
209	+ #~ msgstr "オレンジ（塗りつぶし）"
210	+
211	+ #~ msgid "Lemon (fill-color)"
212	+ #~ msgstr "レモン（塗りつぶし）"
213	+
214	+ #~ msgid "Lime (fill-color)"
215	+ #~ msgstr "ライム（塗りつぶし）"
216	+
217	+ #~ msgid "Viridian (fill-color)"
218	+ #~ msgstr "ビリジアン（塗りつぶし）"
219	+
220	+ #~ msgid "Sky Blue (fill-color)"
221	+ #~ msgstr "スカイブルー（塗りつぶし）"
222	+
223	+ #~ msgid "Imperial Blue (fill-color)"
224	+ #~ msgstr "インペリアルブルー（塗りつぶし）"
225	+
226	+ #~ msgid "Lavendar (fill-color)"
227	+ #~ msgstr "ラベンダー（塗りつぶし）"
228	+
229	+ #~ msgid "Monotone (fill-color)"
230	+ #~ msgstr "モノトーン（塗りつぶし）"
231	+
232	+ #~ msgid "Espresso (fill-color)"
233	+ #~ msgstr "エスプレッソ（塗りつぶし）"
234	+
235	+ #~ msgid "Bootstrap like (Success)"
236	+ #~ msgstr "Bootstrap風（Success）"
237	+
238	+ #~ msgid "Bootstrap like (Info)"
239	+ #~ msgstr "Bootstrap風（Info）"
240	+
241	+ #~ msgid "Bootstrap like (Warning)"
242	+ #~ msgstr "Bootstrap風（Warning）"
243	+
244	+ #~ msgid "Bootstrap like (Danger)"
245	+ #~ msgstr "Bootstrap風（Danger）"
246	+
247	+ #~ msgid "Speech bubble tail type"
248	+ #~ msgstr "吹き出しのしっぽのタイプ"
249	+
250	+ #~ msgid "Speaking"
251	+ #~ msgstr "Speaking"
252	+
253	+ #~ msgid "Thinking"
254	+ #~ msgstr "Thinking"
255	+
256	+ #~ msgid "Speech bubble text font size"
257	+ #~ msgstr "吹き出しテキストのフォントサイズ"
258	+
259	+ #~ msgid "Extra Small"
260	+ #~ msgstr "特小"
261	+
262	+ #~ msgid "Small"
263	+ #~ msgstr "小"
264	+
265	+ #~ msgid "Middle"
266	+ #~ msgstr "中"
267	+
268	+ #~ msgid "Large"
269	+ #~ msgstr "大"
270	+
271	+ #~ msgid "Extra Large"
272	+ #~ msgstr "特大"
273	+
274	+ #~ msgid "Drop shadow"
275	+ #~ msgstr "影を付ける"
276	+
277	+ #~ msgid "Icon negation"
278	+ #~ msgstr "アイコンのネガ化"
279	+
280	+ #~ msgid "Character icon corner radius"
281	+ #~ msgstr "キャラアイコンの角丸設定"
282	+
283	+ #~ msgid "Square"
284	+ #~ msgstr "四角"
285	+
286	+ #~ msgid "Corner radius Lv.1"
287	+ #~ msgstr "角丸（Lv.1）"
288	+
289	+ #~ msgid "Corner radius Lv.2"
290	+ #~ msgstr "角丸（Lv.2）"
291	+
292	+ #~ msgid "Corner radius Lv.3"
293	+ #~ msgstr "角丸（Lv.3）"
294	+
295	+ #~ msgid "Corner radius Lv.4"
296	+ #~ msgstr "角丸（Lv.4）"
297	+
298	+ #~ msgid "Corner radius Lv.5"
299	+ #~ msgstr "角丸（Lv.5）"
300	+
301	+ #~ msgid "Rounded"
302	+ #~ msgstr "丸型"
303	+
304	+ #~ msgid "Speech bubble corner radius"
305	+ #~ msgstr "吹き出しの角丸設定"
306	+
307	+ #~ msgid "None"
308	+ #~ msgstr "なし"
309	+
310	+ #~ msgid "Spin"
311	+ #~ msgstr "回転"
312	+
313	+ #~ msgid "Spin (Reverse)"
314	+ #~ msgstr "回転（逆方向）"
315	+
316	+ #~ msgid "Pendulum"
317	+ #~ msgstr "振り子"
318	+
319	+ #~ msgid "Snake"
320	+ #~ msgstr "振動"
321	+
322	+ #~ msgid "Bound"
323	+ #~ msgstr "バウンド"
324	+
325	+ #~ msgid "Character icon settings"
326	+ #~ msgstr "キャラアイコンの設定"
327	+
328	+ #~ msgid "Regular"
329	+ #~ msgstr "中"
330	+
331	+ #~ msgid "Content settings"
332	+ #~ msgstr "Content settings"

languages/guten-bubble-ja-block-guten-bubble.json ADDED Viewed

	@@ -0,0 +1 @@

+ {"domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"ja_JP"},"Displays a speech bubble like a chat conversation.":["チャットの会話のような吹き出しを表示します。"],"speech":["会話"],"bubble":["吹き出し"],"chara":["キャラ"],"Enter serif here ...":["ここにセリフを入力 …"],"Character icon (preset)":["キャラアイコン (プリセット)"],"Custom":["カスタム"],"Rose":["ローズ"],"Orange":["オレンジ"],"Lemon":["レモン"],"Lime":["ライム"],"Viridian":["ビリジアン"],"Sky Blue":["スカイブルー"],"Imperial Blue":["インペリアルブルー"],"Lavendar":["ラベンダー"],"Monotone":["モノトーン"],"Espresso":["エスプレッソ"],"Character icon (custom)":["キャラアイコン (カスタム)"],"Enabled only when \"Custom\" is selected for the \"Character icon (preset)\".":["「キャラアイコン (プリセット)」で「カスタム」が選択されている場合にのみ有効になります。"],"Specifies a image file in the '/wp-content/uploads/guten-bubble/img/' folder.":["'/wp-content/uploads/guten-bubble/img/' フォルダ内の画像ファイルを指定します。"],"Character icon file name":["キャラアイコンのファイル名"],"Character icon alignment":["キャラアイコンの配置"],"Left":["左寄せ"],"Right":["右寄せ"],"Character name":["キャラの名前"],"Theme color":["テーマカラー"],"Default":["デフォルト"],"Rose (fill-color)":["ローズ（塗りつぶし）"],"Orange (fill-color)":["オレンジ（塗りつぶし）"],"Lemon (fill-color)":["レモン（塗りつぶし）"],"Lime (fill-color)":["ライム（塗りつぶし）"],"Viridian (fill-color)":["ビリジアン（塗りつぶし）"],"Sky Blue (fill-color)":["スカイブルー（塗りつぶし）"],"Imperial Blue (fill-color)":["インペリアルブルー（塗りつぶし）"],"Lavendar (fill-color)":["ラベンダー（塗りつぶし）"],"Monotone (fill-color)":["モノトーン（塗りつぶし）"],"Espresso (fill-color)":["エスプレッソ（塗りつぶし）"],"Bootstrap like (Success)":["Bootstrap風（Success）"],"Bootstrap like (Info)":["Bootstrap風（Info）"],"Bootstrap like (Warning)":["Bootstrap風（Warning）"],"Bootstrap like (Danger)":["Bootstrap風（Danger）"],"Speech bubble tail type":["吹き出しのしっぽのタイプ"],"Speaking":["Speaking"],"Thinking":["Thinking"],"Speech bubble text font size":["吹き出しテキストのフォントサイズ"],"Extra Small":["特小"],"Small":["小"],"Middle":["中"],"Large":["大"],"Extra Large":["特大"],"Drop shadow":["影を付ける"],"Icon negation":["アイコンのネガ化"],"Character icon corner radius":["キャラアイコンの角丸設定"],"Square":["四角"],"Corner radius Lv.1":["角丸（Lv.1）"],"Corner radius Lv.2":["角丸（Lv.2）"],"Corner radius Lv.3":["角丸（Lv.3）"],"Corner radius Lv.4":["角丸（Lv.4）"],"Corner radius Lv.5":["角丸（Lv.5）"],"Rounded":["丸型"],"Speech bubble corner radius":["吹き出しの角丸設定"],"None":["なし"],"Spin":["回転"],"Spin (Reverse)":["回転（逆方向）"],"Pendulum":["振り子"],"Snake":["振動"],"Bound":["バウンド"],"Character icon settings":["キャラアイコンの設定"],"Speech bubble settings":["吹き出しの設定"],"Effect settings":["エフェクトの設定"],"Animation":["アニメーション"]}}}

languages/guten-bubble-ja.mo ADDED Viewed

Binary file

languages/guten-bubble-ja.po ADDED Viewed

	@@ -0,0 +1,314 @@


1	+ # Copyright (C) 2013 WordPress
2	+ # This file is distributed under the same license as the WordPress package.
3	+ msgid ""
4	+ msgstr ""
5	+ "Project-Id-Version: Guten-Bubble\n"
6	+ "Report-Msgid-Bugs-To: http://wppolyglots.wordpress.com\n"
7	+ "POT-Creation-Date: 2019-01-29 14:10+0900\n"
8	+ "PO-Revision-Date: 2019-01-29 14:10+0900\n"
9	+ "Last-Translator: Nia Tomonaka <nia1012@outlook.jp>\n"
10	+ "Language-Team: Nia Tomonaka <nia1012-tmnk@outlook.jp>\n"
11	+ "Language: ja_JP\n"
12	+ "MIME-Version: 1.0\n"
13	+ "Content-Type: text/plain; charset=UTF-8\n"
14	+ "Content-Transfer-Encoding: 8bit\n"
15	+ "X-Generator: Poedit 2.2.1\n"
16	+ "X-Poedit-KeywordsList: __\n"
17	+ "X-Poedit-Basepath: ../js\n"
18	+ "X-Poedit-SearchPath-0: block_guten-bubble.js\n"
19	+
20	+ #: block_guten-bubble.js:89
21	+ msgid "Displays a speech bubble like a chat conversation."
22	+ msgstr "チャットの会話のような吹き出しを表示します。"
23	+
24	+ #: block_guten-bubble.js:90
25	+ msgid "speech"
26	+ msgstr "会話"
27	+
28	+ #: block_guten-bubble.js:90
29	+ msgid "bubble"
30	+ msgstr "吹き出し"
31	+
32	+ #: block_guten-bubble.js:90
33	+ msgid "chara"
34	+ msgstr "キャラ"
35	+
36	+ #: block_guten-bubble.js:181
37	+ msgid "Enter serif here ..."
38	+ msgstr "ここにセリフを入力 …"
39	+
40	+ #: block_guten-bubble.js:194
41	+ msgid "Character icon (preset)"
42	+ msgstr "キャラアイコン (プリセット)"
43	+
44	+ #: block_guten-bubble.js:200
45	+ msgid "Custom"
46	+ msgstr "カスタム"
47	+
48	+ #: block_guten-bubble.js:201 block_guten-bubble.js:260
49	+ msgid "Rose"
50	+ msgstr "ローズ"
51	+
52	+ #: block_guten-bubble.js:202 block_guten-bubble.js:262
53	+ msgid "Orange"
54	+ msgstr "オレンジ"
55	+
56	+ #: block_guten-bubble.js:203 block_guten-bubble.js:264
57	+ msgid "Lemon"
58	+ msgstr "レモン"
59	+
60	+ #: block_guten-bubble.js:204 block_guten-bubble.js:266
61	+ msgid "Lime"
62	+ msgstr "ライム"
63	+
64	+ #: block_guten-bubble.js:205 block_guten-bubble.js:268
65	+ msgid "Viridian"
66	+ msgstr "ビリジアン"
67	+
68	+ #: block_guten-bubble.js:206 block_guten-bubble.js:270
69	+ msgid "Sky Blue"
70	+ msgstr "スカイブルー"
71	+
72	+ #: block_guten-bubble.js:207 block_guten-bubble.js:272
73	+ msgid "Imperial Blue"
74	+ msgstr "インペリアルブルー"
75	+
76	+ #: block_guten-bubble.js:208 block_guten-bubble.js:274
77	+ msgid "Lavendar"
78	+ msgstr "ラベンダー"
79	+
80	+ #: block_guten-bubble.js:209 block_guten-bubble.js:276
81	+ msgid "Monotone"
82	+ msgstr "モノトーン"
83	+
84	+ #: block_guten-bubble.js:210 block_guten-bubble.js:278
85	+ msgid "Espresso"
86	+ msgstr "エスプレッソ"
87	+
88	+ #: block_guten-bubble.js:215
89	+ msgid "Character icon (custom)"
90	+ msgstr "キャラアイコン (カスタム)"
91	+
92	+ #: block_guten-bubble.js:216
93	+ msgid ""
94	+ "Enabled only when \"Custom\" is selected for the \"Character icon (preset)\"."
95	+ msgstr ""
96	+ "「キャラアイコン (プリセット)」で「カスタム」が選択されている場合にのみ有効に"
97	+ "なります。"
98	+
99	+ #: block_guten-bubble.js:217
100	+ msgid ""
101	+ "Specifies a image file in the '/wp-content/uploads/guten-bubble/img/' folder."
102	+ msgstr ""
103	+ "'/wp-content/uploads/guten-bubble/img/' フォルダ内の画像ファイルを指定しま"
104	+ "す。"
105	+
106	+ #: block_guten-bubble.js:219
107	+ msgid "Character icon file name"
108	+ msgstr "キャラアイコンのファイル名"
109	+
110	+ #: block_guten-bubble.js:228
111	+ msgid "Character icon alignment"
112	+ msgstr "キャラアイコンの配置"
113	+
114	+ #: block_guten-bubble.js:234
115	+ msgid "Left"
116	+ msgstr "左寄せ"
117	+
118	+ #: block_guten-bubble.js:235
119	+ msgid "Right"
120	+ msgstr "右寄せ"
121	+
122	+ #: block_guten-bubble.js:240 block_guten-bubble.js:242
123	+ msgid "Character name"
124	+ msgstr "キャラの名前"
125	+
126	+ #: block_guten-bubble.js:253
127	+ msgid "Theme color"
128	+ msgstr "テーマカラー"
129	+
130	+ #: block_guten-bubble.js:259
131	+ msgid "Default"
132	+ msgstr "デフォルト"
133	+
134	+ #: block_guten-bubble.js:261
135	+ msgid "Rose (fill-color)"
136	+ msgstr "ローズ（塗りつぶし）"
137	+
138	+ #: block_guten-bubble.js:263
139	+ msgid "Orange (fill-color)"
140	+ msgstr "オレンジ（塗りつぶし）"
141	+
142	+ #: block_guten-bubble.js:265
143	+ msgid "Lemon (fill-color)"
144	+ msgstr "レモン（塗りつぶし）"
145	+
146	+ #: block_guten-bubble.js:267
147	+ msgid "Lime (fill-color)"
148	+ msgstr "ライム（塗りつぶし）"
149	+
150	+ #: block_guten-bubble.js:269
151	+ msgid "Viridian (fill-color)"
152	+ msgstr "ビリジアン（塗りつぶし）"
153	+
154	+ #: block_guten-bubble.js:271
155	+ msgid "Sky Blue (fill-color)"
156	+ msgstr "スカイブルー（塗りつぶし）"
157	+
158	+ #: block_guten-bubble.js:273
159	+ msgid "Imperial Blue (fill-color)"
160	+ msgstr "インペリアルブルー（塗りつぶし）"
161	+
162	+ #: block_guten-bubble.js:275
163	+ msgid "Lavendar (fill-color)"
164	+ msgstr "ラベンダー（塗りつぶし）"
165	+
166	+ #: block_guten-bubble.js:277
167	+ msgid "Monotone (fill-color)"
168	+ msgstr "モノトーン（塗りつぶし）"
169	+
170	+ #: block_guten-bubble.js:279
171	+ msgid "Espresso (fill-color)"
172	+ msgstr "エスプレッソ（塗りつぶし）"
173	+
174	+ #: block_guten-bubble.js:280
175	+ msgid "Bootstrap like (Success)"
176	+ msgstr "Bootstrap風（Success）"
177	+
178	+ #: block_guten-bubble.js:281
179	+ msgid "Bootstrap like (Info)"
180	+ msgstr "Bootstrap風（Info）"
181	+
182	+ #: block_guten-bubble.js:282
183	+ msgid "Bootstrap like (Warning)"
184	+ msgstr "Bootstrap風（Warning）"
185	+
186	+ #: block_guten-bubble.js:283
187	+ msgid "Bootstrap like (Danger)"
188	+ msgstr "Bootstrap風（Danger）"
189	+
190	+ #: block_guten-bubble.js:288
191	+ msgid "Speech bubble tail type"
192	+ msgstr "吹き出しのしっぽのタイプ"
193	+
194	+ #: block_guten-bubble.js:294
195	+ msgid "Speaking"
196	+ msgstr "Speaking"
197	+
198	+ #: block_guten-bubble.js:295
199	+ msgid "Thinking"
200	+ msgstr "Thinking"
201	+
202	+ #: block_guten-bubble.js:300
203	+ msgid "Speech bubble text font size"
204	+ msgstr "吹き出しテキストのフォントサイズ"
205	+
206	+ #: block_guten-bubble.js:307
207	+ msgid "Extra Small"
208	+ msgstr "特小"
209	+
210	+ #: block_guten-bubble.js:313
211	+ msgid "Small"
212	+ msgstr "小"
213	+
214	+ #: block_guten-bubble.js:319
215	+ msgid "Middle"
216	+ msgstr "中"
217	+
218	+ #: block_guten-bubble.js:325
219	+ msgid "Large"
220	+ msgstr "大"
221	+
222	+ #: block_guten-bubble.js:331
223	+ msgid "Extra Large"
224	+ msgstr "特大"
225	+
226	+ #: block_guten-bubble.js:346
227	+ msgid "Drop shadow"
228	+ msgstr "影を付ける"
229	+
230	+ #: block_guten-bubble.js:354
231	+ msgid "Icon negation"
232	+ msgstr "アイコンのネガ化"
233	+
234	+ #: block_guten-bubble.js:362
235	+ msgid "Character icon corner radius"
236	+ msgstr "キャラアイコンの角丸設定"
237	+
238	+ #: block_guten-bubble.js:368 block_guten-bubble.js:385
239	+ msgid "Square"
240	+ msgstr "四角"
241	+
242	+ #: block_guten-bubble.js:369 block_guten-bubble.js:386
243	+ msgid "Corner radius Lv.1"
244	+ msgstr "角丸（Lv.1）"
245	+
246	+ #: block_guten-bubble.js:370 block_guten-bubble.js:387
247	+ msgid "Corner radius Lv.2"
248	+ msgstr "角丸（Lv.2）"
249	+
250	+ #: block_guten-bubble.js:371 block_guten-bubble.js:388
251	+ msgid "Corner radius Lv.3"
252	+ msgstr "角丸（Lv.3）"
253	+
254	+ #: block_guten-bubble.js:372 block_guten-bubble.js:389
255	+ msgid "Corner radius Lv.4"
256	+ msgstr "角丸（Lv.4）"
257	+
258	+ #: block_guten-bubble.js:373 block_guten-bubble.js:390
259	+ msgid "Corner radius Lv.5"
260	+ msgstr "角丸（Lv.5）"
261	+
262	+ #: block_guten-bubble.js:374
263	+ msgid "Rounded"
264	+ msgstr "丸型"
265	+
266	+ #: block_guten-bubble.js:379
267	+ msgid "Speech bubble corner radius"
268	+ msgstr "吹き出しの角丸設定"
269	+
270	+ #: block_guten-bubble.js:400
271	+ msgid "None"
272	+ msgstr "なし"
273	+
274	+ #: block_guten-bubble.js:401
275	+ msgid "Spin"
276	+ msgstr "回転"
277	+
278	+ #: block_guten-bubble.js:402
279	+ msgid "Spin (Reverse)"
280	+ msgstr "回転（逆方向）"
281	+
282	+ #: block_guten-bubble.js:403
283	+ msgid "Pendulum"
284	+ msgstr "振り子"
285	+
286	+ #: block_guten-bubble.js:404
287	+ msgid "Snake"
288	+ msgstr "振動"
289	+
290	+ #: block_guten-bubble.js:405
291	+ msgid "Bound"
292	+ msgstr "バウンド"
293	+
294	+ #: block_guten-bubble.js:424
295	+ msgid "Character icon settings"
296	+ msgstr "キャラアイコンの設定"
297	+
298	+ #: block_guten-bubble.js:430
299	+ msgid "Speech bubble settings"
300	+ msgstr "吹き出しの設定"
301	+
302	+ #: block_guten-bubble.js:435
303	+ msgid "Effect settings"
304	+ msgstr "エフェクトの設定"
305	+
306	+ #: block_guten-bubble.js:441
307	+ msgid "Animation"
308	+ msgstr "アニメーション"
309	+
310	+ #~ msgid "Regular"
311	+ #~ msgstr "中"
312	+
313	+ #~ msgid "Content settings"
314	+ #~ msgstr "Content settings"

options-page.php ADDED Viewed

	@@ -0,0 +1,176 @@


1	+ <?php
2	+
3	+ defined( 'ABSPATH' ) \|\| exit;
4	+
5	+ class GutenBubbleOptionsPage {
6	+
7	+ public static $default_images = [
8	+ '01-rose.png',
9	+ '02-orange.png',
10	+ '03-lemon.png',
11	+ '04-lime.png',
12	+ '05-viridian.png',
13	+ '06-sky.png',
14	+ '07-imperial.png',
15	+ '08-lavendar.png',
16	+ '09-monotone.png',
17	+ '10-espresso.png'
18	+ ];
19	+
20	+ public function index() {
21	+
22	+ if( isset( $_POST['selected-icon-url'] ) ) {
23	+ $result = $this->import_chara_icon_file( $_POST['selected-icon-url'] );
24	+ }
25	+ ?>
26	+ <div class="wrap">
27	+ <h1><?= __( "Guten-bubble settings", "guten-bubble-admin" ) ?></h1>
28	+
29	+ <?php if( !function_exists( 'register_block_type' ) ): ?>
30	+ <div class="notice notice-warning">
31	+ <p><b><?= __( "NOTICE: To use the Guten-bubble plugin, required WordPress 5.0 or later.", "guten-bubble-admin" ) ?></b></p>
32	+ </div>
33	+ <?php endif ?>
34	+
35	+ <div id="cngb-nedia-upload">
36	+ <h2><?= __( "Import character icon image from media library", "guten-bubble-admin" ) ?></h2>
37	+ <?php if( isset( $result ) ): ?>
38	+ <div class="notice notice-<?= @$result['success'] ? 'success' : 'error' ?> is-dismissible">
39	+ <p><?= esc_html( @$result['message'] ) ?></p>
40	+ <button type="button" class="notice-dismiss">
41	+ <span class="screen-reader-text">Dismiss this notice.</span>
42	+ </button>
43	+ </div>
44	+ <?php endif ?>
45	+ <form method="post" id="cngb-chara-icon-upload">
46	+ <table class="form-table">
47	+ <tbody>
48	+ <tr>
49	+ <th>
50	+ <?= __( "Select character icon image", "guten-bubble-admin" ) ?>
51	+ </th>
52	+ <td>
53	+ <button id="media-upload" type="button" class="button button-default"
54	+ data-title="<?= __( "Choose Image", "guten-bubble-admin" ) ?>">
55	+ <?= __( "Select from media library", "guten-bubble-admin" ) ?>
56	+ </button>
57	+ <input id="selected-icon-url" name="selected-icon-url" type="hidden" value=""/>
58	+ </td>
59	+ </tr>
60	+ <tr>
61	+ <td id="selected-icon"></td>
62	+ <td id="selected-icon-name"></td>
63	+ </tr>
64	+ </tbody>
65	+ </table>
66	+ <button id="chara-icon-upload" type="submit" class="button button-primary"><?= __( "Import", "guten-bubble-admin" ) ?></button>
67	+ </form>
68	+ <br/>
69	+ <div class="cngb-remarks">
70	+ <h3><?= __( "Remarks", "guten-bubble-admin" ) ?></h3>
71	+ <ul>
72	+ <li><?= __( "Select the image in the WordPress media library and import it into the image folder of Guten-bubble.", "guten-bubble-admin" ) ?></li>
73	+ <li><?= __( "The recommended image size is 120px x 120px or more.", "guten-bubble-admin" ) ?></li>
74	+ <li><?= __( "Imported icon images are not deleted even if they are deleted from the media library.", "guten-bubble-admin" ) ?></li>
75	+ </ul>
76	+ </div>
77	+ <div class="cngb-remarks-warning">
78	+ <h3><?= __( "Attention", "guten-bubble-admin" ) ?></h3>
79	+ <ul>
80	+ <li><?= __( "If there is an image file of the same name in the import destination, it will be overwritten.", "guten-bubble-admin" ) ?></li>
81	+ </ul>
82	+ </div>
83	+ <br/>
84	+
85	+ <div class="cngb-thumbnail-view">
86	+ <?php
87	+ $upload_dir = trailingslashit( wp_upload_dir()['basedir'] ).'guten-bubble/img';
88	+ $upload_url = trailingslashit( wp_upload_dir()['baseurl'] ).'guten-bubble/img';
89	+ $icon_images = [];
90	+ foreach( glob( "{$upload_dir}/{.jpg,.jpeg,.jpe,.gif,.png,.bmp,.tif,.tiff,*.ico}", GLOB_BRACE ) as $image ) {
91	+ $icon_images[] = basename( $image );
92	+ }
93	+ ?>
94	+ <h3 class="cngb-thumbnail-head-d"><?= __( "Default character icon list", "guten-bubble-admin" ) ?></h3>
95	+ <ul class="cngb-thumbnail-list">
96	+ <?php foreach( static::$default_images as $icon_image ): ?>
97	+ <li class="cngb-thumbnail">
98	+ <img src="<?= "{$upload_url}/default/{$icon_image}" ?>" alt="<?= $icon_image ?>" /><br/>
99	+ <span><?= $icon_image ?></span>
100	+ </li>
101	+ <?php endforeach ?>
102	+ </ul>
103	+ <h3 class="cngb-thumbnail-head-i"><?= __( "Imported character icon list", "guten-bubble-admin" ) ?></h3>
104	+ <ul class="cngb-thumbnail-list">
105	+ <?php foreach( $icon_images as $icon_image ): ?>
106	+ <li class="cngb-thumbnail">
107	+ <img src="<?= "{$upload_url}/{$icon_image}" ?>" alt="<?= $icon_image ?>" /><br/>
108	+ <span><?= $icon_image ?></span>
109	+ </li>
110	+ <?php endforeach ?>
111	+ </ul>
112	+ </div>
113	+ </div>
114	+ </div>
115	+ <script type="text/javascript">
116	+ jQuery( document ).ready( function () {
117	+ var custom_uploader = wp.media({
118	+ title: jQuery( '#media-upload' ).attr( 'data-title' ),
119	+ library: {type: 'image'},
120	+ button: {text: jQuery( '#media-upload' ).attr( 'data-title' )},
121	+ multiple: false
122	+ });
123	+
124	+ jQuery( '#media-upload' ).on( 'click', function( e ) {
125	+ e.preventDefault();
126	+ custom_uploader.open();
127	+ });
128	+
129	+ custom_uploader.on( 'select', function () {
130	+ var images = custom_uploader.state().get( 'selection' );
131	+
132	+ images.each( function( file ) {
133	+ var media = file.toJSON();
134	+ var img = jQuery( '<img>' ).attr( 'src', media.url ).attr( 'alt', media.filename ).attr( 'width', '120px' ).attr( 'height', '120px' );
135	+ jQuery( '#selected-icon' ).html( img );
136	+ var name = jQuery('<p>').html( media.filename );
137	+ jQuery( '#selected-icon-name' ).html( name );
138	+ jQuery( '#selected-icon-url' ).val( media.url );
139	+ });
140	+ });
141	+
142	+ });
143	+ </script>
144	+ <?php }
145	+
146	+ private function import_chara_icon_file( $icon_url ) {
147	+ $upload_url = trailingslashit( wp_upload_dir()['baseurl'] );
148	+ $upload_dir = trailingslashit( wp_upload_dir()['basedir'] );
149	+ $icon_path = str_replace( $upload_url, $upload_dir, $icon_url );
150	+ // To prevent directory traversal, if "../" is mixed in the URL, it returns an error.
151	+ if( strpos( $icon_url, "../" ) !== false \|\| strpos( $icon_url, $upload_url ) !== 0 ) {
152	+ return [
153	+ 'success' => false,
154	+ 'message' => sprintf( __( "ERROR: The selected image URL is invalid. ('%s')", "guten-bubble-admin" ), $icon_url )
155	+ ];
156	+ }
157	+ if( !file_exists( $icon_path ) ) {
158	+ return [
159	+ 'success' => false,
160	+ 'message' => sprintf( __( "ERROR: '%s' does not exist or the file path is invalid.", "guten-bubble-admin" ), basename( $icon_path ) )
161	+ ];
162	+ }
163	+ if( !copy( $icon_path, $upload_dir."guten-bubble/img/".basename( $icon_path ) ) ) {
164	+ return [
165	+ 'success' => false,
166	+ 'message' => sprintf( __( "ERROR: Failed to import '%s'.", "guten-bubble-admin" ), basename( $icon_path ) )
167	+ ];
168	+ }
169	+ return [
170	+ 'success' => true,
171	+ 'message' => sprintf( __( "Info: '%s' is imported.", "guten-bubble-admin" ), basename( $icon_path ) )
172	+ ];
173	+ }
174	+ }
175	+
176	+ ?>

readme.txt ADDED Viewed

	@@ -0,0 +1,53 @@


1	+ === Guten-bubble ===
2	+ Contributors: niatn1012
3	+ Donate link:
4	+ Tags: speech, bubble, balloon
5	+ Requires at least: 5.0.0
6	+ Tested up to: 5.0.3
7	+ Stable tag: 0.8.1
8	+ Requires PHP: 5.6
9	+ License: GPLv2 or later
10	+ License URI: https://www.gnu.org/licenses/gpl-2.0.html
11	+
12	+ Displays a speech bubble like a chat conversation.
13	+
14	+ == Description ==
15	+
16	+ Guten-bubble can create a speech bubble display like a chat conversation.
17	+
18	+ # Features
19	+ * It's easy to create speech bubble using Guten-bubble block for WordPress 5.0's Gutenberg editor.
20	+ * Pick from 24 color themes for speech bubble.
21	+ * You can use it as an icon image by importing image files from WordPress's media library. Let's make interesting articles by using icon image on hand!
22	+
23	+ # How to use in block editor
24	+
25	+ 1. Add a Guten-bubble block where you want to add a speech bubble.
26	+ 2. Enter serif in the balloon in the block ( the part where 'Enter serif here ...' placeholder is displayed ), select character icon and set the balloon in the inspector.
27	+
28	+ == Installation ==
29	+
30	+ 1. Upload the plugin files to the `/wp-content/plugins/guten-bubble` directory, or install the plugin through the WordPress plugins menu.
31	+ 2. Activate the plugin through the WordPress plugins menu.
32	+
33	+ == Frequently Asked Questions ==
34	+
35	+ = To use the icon image on hand =
36	+
37	+ Open Guten-bubble settings page in the setting menu of the admin page.
38	+ Press the 'Select from media library' button to select the icon image you want to use from the media library (if you have not uploaded it yet, upload it here) and press the 'Import' button to import.
39	+ ( Or upload the icon image files to the `/wp-content/uploads/guten-bubble/img` directory ( that is created on plugin install ) using FTP software etc. )
40	+
41	+ In the Inspector of "Guten-bubble" block, select "custom" from the "Character icon (preset)" drop-down box
42	+ and enter the file name of the icon image ( relative path from `/wp-content/uploads/guten-bubble/img` directory ) in the "Character icon (custom)" input box,
43	+ that Icon image can be used.
44	+
45	+ == Screenshots ==
46	+
47	+ 1. Guten-bubble block
48	+ 2. Settings page
49	+
50	+ == Changelog ==
51	+
52	+ = 0.8.1 =
53	+ * First release.

screenshot-1.png ADDED Viewed

Binary file

screenshot-2.png ADDED Viewed

Binary file