@ebl-vue/editor-render 2.31.64 → 2.31.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,86 @@
1
+ .ce-popover-indent-item {
2
+ cursor: default !important;
3
+ display: flex;
4
+ align-items: center;
5
+ padding: 3px;
6
+ }
7
+
8
+ .ce-popover-indent-item[version^="2.26"] {
9
+ gap: 10px;
10
+ }
11
+
12
+ .ce-popover-indent-item:hover {
13
+ background-color: transparent !important;
14
+ }
15
+
16
+ .ce-popover-indent-item .ce-popover-item__icon {
17
+ width: 26px;
18
+ height: 26px;
19
+ cursor: pointer;
20
+ will-change: background-color, color;
21
+ transition: 0.3s background-color, 0.3s color;
22
+ padding-block: 0px;
23
+ padding-inline: 0px;
24
+ border-width: 0px;
25
+ color: var(--color-text-primary, black);
26
+ background-color: #fff;
27
+ border-radius: 5px;
28
+ -webkit-border-radius: 5px;
29
+ -moz-border-radius: 5px;
30
+ -ms-border-radius: 5px;
31
+ -o-border-radius: 5px;
32
+ -webkit-transition: 0.3s background-color, 0.3s color;
33
+ -moz-transition: 0.3s background-color, 0.3s color;
34
+ -ms-transition: 0.3s background-color, 0.3s color;
35
+ -o-transition: 0.3s background-color, 0.3s color;
36
+ }
37
+
38
+ .ce-popover-indent-item .ce-popover-item--disabled {
39
+ color: var(--color-text-secondary, #707684);
40
+ opacity: 0.3;
41
+ cursor: default;
42
+ }
43
+
44
+ .ce-popover-indent-item .ce-popover-item__icon:focus {
45
+ outline: none;
46
+ }
47
+
48
+ .ce-popover-indent-item:is([version^="2.26"], [version^="2.27"], [version^="2.28"], [version^="2.29"]):hover .ce-popover-item__icon {
49
+ box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
50
+ -webkit-box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
51
+ }
52
+
53
+ .ce-popover-indent-item:is([version^="2.26"], [version^="2.27"], [version^="2.28"], [version^="2.29"]) .ce-popover-item__icon {
54
+ box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
55
+ -webkit-box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
56
+ }
57
+
58
+ .ce-popover-indent-item:is([version^="2.26"], [version^="2.27"], [version^="2.28"], [version^="2.29"]) .ce-popover-item__icon:hover {
59
+ background-color: var(--color-background-item-hover, #eff2f5);
60
+ }
61
+
62
+ [data-block-indent-wrapper] {
63
+ /* will-change: padding-left, padding-right;
64
+ transition: padding-left .4s, padding-right .4s;
65
+ -webkit-transition: padding-left .4s, padding-right .4s;
66
+ -moz-transition: padding-left .4s, padding-right .4s;
67
+ -ms-transition: padding-left .4s, padding-right .4s;
68
+ -o-transition: padding-left .4s, padding-right .4s; */
69
+ }
70
+
71
+ .ce-highlight-indent {
72
+ display: inline-block;
73
+ height: 1.6em;
74
+ top: 50%;
75
+ position: absolute;
76
+ transform: translate(0px, -50%);
77
+ -webkit-transform: translate(0px, -50%);
78
+ -moz-transform: translate(0px, -50%);
79
+ -ms-transform: translate(0px, -50%);
80
+ -o-transform: translate(0px, -50%);
81
+ }
82
+
83
+
84
+ .ce-popover-indent-item[version^="2.3"] .ce-popover-item__title {
85
+ margin-left: 4px;
86
+ }
@@ -0,0 +1,131 @@
1
+ @import './alert.css';
2
+ @import './block-alignment.css';
3
+ @import './code.css';
4
+ @import './delimiter.css';
5
+ @import './header.css';
6
+ @import './image.css';
7
+ @import './indent.css';
8
+ @import './list.css';
9
+ @import './outline.css';
10
+ @import './paragraph.css';
11
+ @import './quote.css';
12
+ @import './table.css';
13
+ @import './color.css';
14
+
15
+
16
+ @import './inline-tool.css';
17
+
18
+ .ebl-er-doc{
19
+ font-family: var(--font-family);
20
+ font-size: 16px;
21
+ font-weight: 400;
22
+
23
+ box-sizing: border-box;
24
+ }
25
+ .ebl-er-header{
26
+ height: var(--ebl-er-header-height);
27
+ box-sizing: border-box;
28
+ position:sticky;
29
+ top: 0;
30
+ z-index: 10;
31
+ }
32
+ .ebl-er-footer{
33
+ height: var(--ebl-er-footer-height);
34
+ box-sizing: border-box;
35
+ }
36
+ .ebl-er-container{
37
+ display: flex;
38
+ flex-direction: row;
39
+ min-height: calc(100vh - var(--ebl-er-header-height));
40
+ }
41
+ .ebl-er-doc-menu{
42
+ width: var(--ebl-er-doc-menu-width);
43
+ box-sizing: border-box;
44
+ flex-shrink:0;
45
+ height: calc(100vh - var(--ebl-er-header-height));
46
+ position:sticky;
47
+ position:sticky;
48
+ top: var(--ebl-er-header-height);
49
+ }
50
+ .ebl-er-doc-menu-content{
51
+ box-sizing: border-box;
52
+
53
+
54
+
55
+ }
56
+ .ebl-er-doc-content{
57
+ box-sizing:border-box;
58
+ display:flex;
59
+ flex-direction: row;
60
+ max-width: calc(100% - var(--ebl-er-doc-menu-width));
61
+ flex-grow: 1;
62
+ }
63
+ .ebl-er-doc-content-container{
64
+ box-sizing: border-box;
65
+ flex: 1;
66
+ padding: 0 50px 50px 50px;
67
+ width: 100%;
68
+ overflow-x: hidden;
69
+ white-space: normal;
70
+ word-wrap: break-word;
71
+
72
+ }
73
+ .ebl-er-doc-content-inner-wrap{
74
+ margin: 0 auto;
75
+ }
76
+ .ebl-er-doc-content-inner{
77
+
78
+ }
79
+ .ebl-er-doc-content-inner .ce-block {
80
+ width: 100%;
81
+ }
82
+ .ebl-er-doc-outline{
83
+
84
+ width: 280px;
85
+ box-sizing: border-box;
86
+ height: calc(100vh - var(--ebl-er-header-height));
87
+ position:sticky;
88
+ top: var(--ebl-er-header-height);
89
+ overflow: auto;
90
+ padding: 12px;
91
+ }
92
+ .ebl-er-doc-pre-next{
93
+ display: flex;
94
+ justify-content: space-between;
95
+ align-items: center;
96
+ padding:33px 0;
97
+ }
98
+
99
+ @media(max-width:960px){
100
+ .ebl-er-doc-outline{
101
+ display: none;
102
+ }
103
+ }
104
+
105
+
106
+
107
+
108
+ /* 滚动条整体部分 */
109
+ .ebl-er-doc ::-webkit-scrollbar {
110
+ width: 6px; /* 滚动条的宽度 */
111
+ height: 6px; /* 滚动条的高度 */
112
+ }
113
+
114
+ /* 滚动条轨道 */
115
+ .ebl-er-doc ::-webkit-scrollbar-track {
116
+ background: #f1f1f1; /* 轨道颜色 */
117
+ border-radius: 1px; /* 轨道圆角 */
118
+ }
119
+
120
+ /* 滚动条滑块 */
121
+ .ebl-er-doc ::-webkit-scrollbar-thumb {
122
+ background: #C0C0C0; /* 滑块颜色 */
123
+ border-radius: 10px; /* 滑块圆角 */
124
+ border: 1px solid #fff; /* 滑块边框 */
125
+ }
126
+
127
+ /* 滑块悬停时 */
128
+ .ebl-er-doc ::-webkit-scrollbar-thumb:hover {
129
+ background: #555; /* 滑块悬停时的颜色 */
130
+ }
131
+
@@ -0,0 +1,134 @@
1
+ .cel-inline-bold {
2
+ font-weight: bold;
3
+ }
4
+ .cel-inline-strikethrough{
5
+ text-decoration: line-through;
6
+ }
7
+ .cel-inline-italic {
8
+ font-style: italic;
9
+ }
10
+ .cel-inline-code{
11
+ margin-left:2px;
12
+ margin-right: 2px;
13
+ padding-top: 1px;
14
+ padding-bottom: 1px;
15
+ background-color: #f5f6f7;
16
+ border: 1px solid #dee0e3;
17
+ border-color: #dee0e3;
18
+ border-width: 1px 0;
19
+ border-radius: 4px;
20
+ padding-left:4px;
21
+ padding-right: 5px;
22
+ }
23
+ .cel-inline-underline {
24
+ text-decoration: underline;
25
+ }
26
+ .cel-inline-underline.cel-inline-strikethrough{
27
+ text-decoration: underline line-through;
28
+ }
29
+ .cel-inline-mark{
30
+ background-color: yellow;
31
+ padding: 2px 2px;
32
+ }
33
+
34
+ .cel-inline-link {}
35
+ .cel-inline-link.cel-inline-strikethrough{
36
+ text-decoration: line-through underline;
37
+ }
38
+
39
+ .cel-inline-link-input-wrap {
40
+ display: flex;
41
+ flex-direction: row;
42
+ gap: 5px;
43
+ }
44
+
45
+ .cel-inline-link-input {
46
+ flex: 1;
47
+ background: #F8F8F8;
48
+ border: 1px solid rgba(226, 226, 229, 0.20);
49
+ border-radius: 6px;
50
+ padding: 4px 8px;
51
+ font-size: 14px;
52
+ line-height: 22px;
53
+
54
+
55
+ outline: none;
56
+ margin: 0;
57
+ width: 100%;
58
+ box-sizing: border-box;
59
+
60
+ font-weight: 500;
61
+
62
+ font-family: inherit;
63
+ }
64
+
65
+ .cel-inline-link-input-btn {
66
+ width: 50px;
67
+ border-radius: 5px;
68
+ background-color: #161C27;
69
+ color: white;
70
+ border: none;
71
+ cursor: pointer;
72
+ }
73
+
74
+ .cel-inline-link-input-btn.disabled {
75
+ opacity: 0.4;
76
+ cursor: not-allowed;
77
+ }
78
+
79
+
80
+ .cel-fake-background{
81
+ background-color: #a8d6ff;
82
+ }
83
+
84
+ .cel-inline-color{
85
+
86
+ }
87
+
88
+
89
+ .editorjs__color-selector__input{
90
+ width: 1px;
91
+ height: 1px;
92
+ opacity: 0;
93
+ }
94
+ .editorjs__color-selector__container-item-none{
95
+ background-color: transparent;
96
+ border: 1px solid #e6e6e6;
97
+ position: relative;
98
+ }
99
+
100
+ .editorjs__color-selector__container-item-none::before {
101
+ content: '';
102
+ position: absolute;
103
+ top: 50%; /* 垂直居中 */
104
+ left: 50%; /* 水平居中 */
105
+ width: 1px; /* 斜线的宽度 */
106
+ height: 35px; /* 斜线的长度 */
107
+ background-color: #e6e6e6; /* 斜线的颜色 */
108
+ transform: translate(-50%, -50%) rotate(45deg); /* 居中并旋转45度 */
109
+ }
110
+
111
+ .cel-inline-gray-text{
112
+ color: #646a73;
113
+ }
114
+ .cel-inline-pink-text{
115
+ color: #d83931;
116
+ }
117
+ .cel-inline-orange-text{
118
+ color: #de7802;
119
+ }
120
+ .cel-inline-yellow-text{
121
+ color: #dc9b04;
122
+ }
123
+
124
+ .cel-inline-green-text{
125
+ color: #2ea121;
126
+ }
127
+
128
+ .cel-inline-blue-text{
129
+ color: #245bdb;
130
+ }
131
+ .cel-inline-purple-text
132
+ {
133
+ color: #6425d0;
134
+ }
@@ -0,0 +1,222 @@
1
+ .cdx-list {
2
+ margin: 0;
3
+ padding: 0;
4
+ outline: none;
5
+ display: grid;
6
+ counter-reset: item;
7
+ gap: var(--spacing-s);
8
+ padding: var(--spacing-xs);
9
+ --spacing-s: 8px;
10
+ --spacing-xs: 6px;
11
+ --list-counter-type: numeric;
12
+ --radius-border: 5px;
13
+ --checkbox-background: #fff;
14
+ --color-border: #C9C9C9;
15
+ --color-bg-checked: #369FFF;
16
+ --line-height: 1.45em;
17
+ --color-bg-checked-hover: #0059AB;
18
+ --color-tick: #fff;
19
+ --size-checkbox: 1.2em;
20
+ }
21
+
22
+ .cdx-list ol {
23
+ padding-inline-start: 0;
24
+ }
25
+
26
+ .cdx-list__item {
27
+ line-height: var(--line-height);
28
+ display: grid;
29
+ grid-template-columns: auto 1fr;
30
+ grid-template-rows: auto auto;
31
+ grid-template-areas:
32
+ "checkbox content"
33
+ ". child";
34
+ }
35
+
36
+ .cdx-list__item-children {
37
+ display: grid;
38
+ grid-area: child;
39
+ gap: var(--spacing-s);
40
+ padding-top: var(--spacing-s);
41
+ }
42
+
43
+ .cdx-list__item [contenteditable] {
44
+ outline: none;
45
+ }
46
+
47
+ .cdx-list__item-content {
48
+ word-break: break-word;
49
+ white-space: pre-wrap;
50
+ grid-area: content;
51
+ padding-left: var(--spacing-s);
52
+ }
53
+
54
+ .cdx-list__item::before {
55
+ counter-increment: item;
56
+
57
+ white-space: nowrap;
58
+ }
59
+
60
+ .cdx-list-ordered .cdx-list__item::before {
61
+ content: counters(item, ".", var(--list-counter-type)) ".";
62
+ }
63
+
64
+ .cdx-list-ordered {
65
+ counter-reset: item;
66
+ }
67
+
68
+ .cdx-list-unordered {
69
+ padding-inline-start: 0;
70
+ }
71
+
72
+ .cdx-list-unordered .cdx-list__item::before {
73
+ content: "•";
74
+ }
75
+
76
+ .cdx-list-checklist .cdx-list__item::before {
77
+ content: "";
78
+ }
79
+
80
+ .cdx-list__settings .cdx-settings-button {
81
+ width: 50%;
82
+ }
83
+
84
+ .cdx-list__checkbox {
85
+ padding-top: calc((var(--line-height) - var(--size-checkbox)) / 2);
86
+ grid-area: checkbox;
87
+ width: var(--size-checkbox);
88
+ height: var(--size-checkbox);
89
+ display: flex;
90
+ cursor: pointer;
91
+ }
92
+
93
+ .cdx-list__checkbox svg {
94
+ opacity: 0;
95
+ height: var(--size-checkbox);
96
+ width: var(--size-checkbox);
97
+ left: -1px;
98
+ top: -1px;
99
+ position: absolute;
100
+ }
101
+
102
+ @media (hover: hover) {
103
+ .cdx-list__checkbox:not(.cdx-list__checkbox--no-hover):hover .cdx-list__checkbox-check svg {
104
+ opacity: 1;
105
+ }
106
+ }
107
+
108
+ .cdx-list__checkbox--checked {
109
+ line-height: var(--line-height);
110
+ }
111
+
112
+ @media (hover: hover) {
113
+ .cdx-list__checkbox--checked:not(.cdx-list__checkbox--checked--no-hover):hover .cdx-checklist__checkbox-check {
114
+ background: var(--color-bg-checked-hover);
115
+ border-color: var(--color-bg-checked-hover);
116
+ }
117
+ }
118
+
119
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check {
120
+ background: var(--color-bg-checked);
121
+ border-color: var(--color-bg-checked);
122
+ }
123
+
124
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check svg {
125
+ opacity: 1;
126
+ }
127
+
128
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check svg path {
129
+ stroke: var(--color-tick);
130
+ }
131
+
132
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check::before {
133
+ opacity: 0;
134
+ visibility: visible;
135
+ transform: scale(2.5);
136
+ }
137
+
138
+ .cdx-list__checkbox-check {
139
+ cursor: pointer;
140
+ display: inline-block;
141
+ position: relative;
142
+ margin: 0 auto;
143
+ width: var(--size-checkbox);
144
+ height: var(--size-checkbox);
145
+ box-sizing: border-box;
146
+ border-radius: var(--radius-border);
147
+ border: 1px solid var(--color-border);
148
+ background: var(--checkbox-background);
149
+ }
150
+
151
+ .cdx-list__checkbox-check::before {
152
+ content: '';
153
+ position: absolute;
154
+ top: 0;
155
+ right: 0;
156
+ bottom: 0;
157
+ left: 0;
158
+ border-radius: 100%;
159
+ background-color: var(--color-bg-checked);
160
+ visibility: hidden;
161
+ pointer-events: none;
162
+ transform: scale(1);
163
+ transition: transform 400ms ease-out, opacity 400ms;
164
+ }
165
+
166
+ .cdx-list__checkbox-check--disabled {
167
+ pointer-events: none;
168
+ }
169
+
170
+ .cdx-list-start-with-field {
171
+ display: flex;
172
+ flex-direction: row;
173
+
174
+ overflow: hidden;
175
+ align-items: center
176
+ }
177
+
178
+ .cdx-list-start-with-field--invalid {
179
+ background: #FFECED;
180
+ border: 1px solid #E13F3F;
181
+ }
182
+
183
+ .cdx-list-start-with-field:hover {
184
+ background-color: #f8f8f8;
185
+ }
186
+
187
+ .cdx-list-start-with-field--invalid .cdx-list-start-with-field__input {
188
+ color: #E13F3F;
189
+ }
190
+
191
+ .cdx-list-start-with-field__startlabel {
192
+ width: 70px;
193
+ font-size: 14px;
194
+ }
195
+
196
+ .cdx-list-start-with-field__input-wrapper {
197
+ flex: 1;
198
+ overflow: hidden;
199
+ }
200
+
201
+ .cdx-list-start-with-field__input {
202
+ font-size: 14px;
203
+ outline: none;
204
+ font-weight: 500;
205
+ font-family: inherit;
206
+ border: 0;
207
+ background: transparent;
208
+ margin: 0;
209
+ padding: 0;
210
+ line-height: 22px;
211
+ flex: 1;
212
+ border: 1px solid rgba(226, 226, 229, 1);
213
+ border-radius: 6px;
214
+ padding: 0 10px;
215
+ width: 50px;
216
+ text-align: center;
217
+ }
218
+
219
+ .cdx-list-start-with-field__input::placeholder {
220
+ color: var(--grayText);
221
+ font-weight: 500;
222
+ }
@@ -0,0 +1,27 @@
1
+ .ebl-er-doc-outline-item{
2
+ padding-left:24px;
3
+ padding-right: 24px;
4
+ padding-top:7px;
5
+ padding-bottom: 7px;
6
+ cursor: pointer;
7
+
8
+ white-space: normal;
9
+ word-wrap: break-word;
10
+ }
11
+ .ebl-er-doc-outline-item:hover{
12
+ background-color: #F6F6F6;
13
+ }
14
+ .ebl-er-doc-outline-item.selected{
15
+ background-color: #EBEBEB;
16
+ }
17
+
18
+ .ebl-outline .level_1{
19
+ padding-left: 24px;
20
+ }
21
+
22
+ .ebl-outline .level_2{
23
+ padding-left: 42px;
24
+ }
25
+ .ebl-outline .level_3{
26
+ padding-left: 60px;
27
+ }
@@ -0,0 +1,23 @@
1
+ .ce-paragraph {
2
+ line-height: 2!important;
3
+ outline: none;
4
+ }
5
+
6
+ /**
7
+ * Normally paragraph placeholder is shown only for the focused block (thanks to "data-placeholder-active").
8
+ *
9
+ * But there is a special case when the paragraph is the only block in the empty editor.
10
+ * When editor autofocus=false, there will be no focus. We need to show the placeholder anyway.
11
+ */
12
+ .ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty::before,
13
+ .ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty="true"]::before {
14
+ content: attr(data-placeholder-active);
15
+ }
16
+
17
+ .ce-paragraph p:first-of-type{
18
+ margin-top: 0;
19
+ }
20
+
21
+ .ce-paragraph p:last-of-type{
22
+ margin-bottom: 0;
23
+ }
@@ -0,0 +1,26 @@
1
+
2
+ .cdx-quote {
3
+ overflow: hidden;
4
+ overflow-wrap: break-word;
5
+ margin: 0;
6
+ box-sizing: border-box;
7
+ word-wrap: break-word;
8
+ word-break: break-all;
9
+ }
10
+ .cdx-quote blockquote{
11
+ margin: 0;
12
+ }
13
+
14
+
15
+
16
+
17
+ .cdx-block-quote{
18
+ border: solid #acacac;
19
+ border-width: 0 0 0 3px;
20
+ box-shadow: none;
21
+ color: #666;
22
+ line-height: 1.6em;
23
+ padding: 1px 0 0 12px;
24
+
25
+ }
26
+