PluginProbe
Code Block Pro – Beautiful Syntax Highlighting / 1.25.0
Code Block Pro – Beautiful Syntax Highlighting v1.25.0
1.27.1 1.27.2 1.27.3 1.27.4 1.27.5 1.27.6 1.27.7 1.28.0 1.3.0 1.4.0 1.5.0 1.5.1 1.5.2 1.6.0 1.7.0 1.8.0 1.9.0 1.9.1 1.9.2 1.9.3 trunk 1.1.0 1.10.0 1.11.0 1.11.1 All 63 releases
← All changes | src/editor/editor.css +92 -101 trunk1.25.0 View file →
@@ -1,22 +1,22 @@
1 1 .code-block-pro-editor {
2 - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
3 - --tw-ring-offset-width: 0px;
4 - --tw-ring-offset-color: transparent;
5 - --tw-ring-color: var(--wp-admin-theme-color);
6 - --tw-translate-x: 0;
7 - --tw-translate-y: 0;
8 - --tw-rotate: 0;
9 - --tw-skew-x: 0;
10 - --tw-skew-y: 0;
11 - --tw-scale-x: 1;
12 - --tw-scale-y: 1;
2 + --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
3 + --tw-ring-offset-width: 0px;
4 + --tw-ring-offset-color: transparent;
5 + --tw-ring-color: var(--wp-admin-theme-color);
6 + --tw-translate-x: 0;
7 + --tw-translate-y: 0;
8 + --tw-rotate: 0;
9 + --tw-skew-x: 0;
10 + --tw-skew-y: 0;
11 + --tw-scale-x: 1;
12 + --tw-scale-y: 1;
13 13 }
14 14 .code-block-pro-editor *,
15 15 .code-block-pro-editor *:after,
16 16 .code-block-pro-editor *:before {
17 - box-sizing: border-box;
18 - /* border: 0 solid #e5e7eb; */
17 + box-sizing: border-box;
18 + /* border: 0 solid #e5e7eb; */
19 19 }
20 20 @tailwind base;
21 21 @tailwind components;
22 22 @tailwind utilities;
@@ -21,159 +21,150 @@
21 21 @tailwind components;
22 22 @tailwind utilities;
23 23 /* Add more styles here specific to the editor only */
24 24 .code-block-pro-editor .npm__react-simple-code-editor__textarea {
25 - @apply shadow-none;
25 + @apply shadow-none;
26 26 }
27 27 .code-block-pro-editor pre,
28 28 .code-block-pro-editor pre * {
29 - font-family: inherit !important;
30 - font-size: inherit !important;
31 - line-height: inherit !important;
29 + font-family: inherit !important;
30 + font-size: inherit !important;
31 + line-height: inherit !important;
32 32 }
33 33 .code-block-pro-editor textarea,
34 34 .code-block-pro-editor pre {
35 - @apply m-0 text-left focus:outline-none;
36 - min-height: 36px;
37 - direction: ltr !important;
35 + @apply m-0 text-left focus:outline-none;
36 + min-height: 36px;
37 + direction: ltr !important;
38 38 }
39 39 .code-block-pro-editor.cbp-has-line-numbers pre {
40 - counter-reset: step;
41 - counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
42 - padding-right: 0;
40 + counter-reset: step;
41 + counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
42 + padding-right: 0;
43 43 }
44 44 .code-block-pro-editor pre .line {
45 - @apply relative inline-block w-full;
45 + @apply relative inline-block w-full;
46 46 }
47 47 .code-block-pro-editor pre {
48 - .line:empty {
49 - @apply block;
50 - }
51 - .line span:empty {
52 - @apply inline-block;
53 - }
48 + .line:empty {
49 + @apply block;
50 + }
51 + .line span:empty {
52 + @apply inline-block;
53 + }
54 54 }
55 55 .code-block-pro-editor.cbp-has-line-numbers
56 - pre
57 - .line:not(.cbp-line-number-disabled)::before {
58 - @apply inline-block text-right opacity-50 absolute;
59 - margin-right: 12px;
60 - content: counter(step);
61 - color: var(--cbp-line-number-color, #999);
62 - width: var(--cbp-line-number-width, auto);
63 - user-select: none;
64 - counter-increment: step;
65 - left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
56 + pre
57 + .line:not(.cbp-line-number-disabled)::before {
58 + @apply inline-block text-right opacity-50 absolute;
59 + margin-right: 12px;
60 + content: counter(step);
61 + color: var(--cbp-line-number-color, #999);
62 + width: var(--cbp-line-number-width, auto);
63 + user-select: none;
64 + counter-increment: step;
65 + left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
66 66 }
67 67
68 68 .code-block-pro-editor.padding-disabled:not(.cbp-has-line-numbers) pre {
69 - @apply p-0;
69 + @apply p-0;
70 70 }
71 71 .code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre {
72 - @apply py-0;
72 + @apply py-0;
73 73 }
74 74 .code-block-pro-editor .cbp-footer-link {
75 - @apply pointer-events-none no-underline;
75 + @apply pointer-events-none no-underline;
76 76 }
77 77
78 78 /* Just to make it look similar to the front end */
79 79 .code-block-pro-editor pre .line.cbp-line-highlight::after {
80 - content: "";
81 - background: var(--cbp-line-highlight-color, rgb(14 165 233 / 0.2));
82 - @apply absolute top-0 h-full;
83 - left: -100% !important;
84 - width: 1000% !important;
85 - min-height: var(--cbp-line-height) !important;
80 + content: '';
81 + background: var(--cbp-line-highlight-color, rgb(14 165 233/0.2));
82 + @apply absolute top-0 h-full;
83 + left: -100% !important;
84 + width: 1000% !important;
85 + min-height: var(--cbp-line-height) !important;
86 86 }
87 87
88 88 .code-block-pro-editor code {
89 - font-family: inherit !important;
90 - @apply m-0 p-0 text-inherit bg-transparent;
89 + font-family: inherit !important;
90 + @apply m-0 p-0 text-inherit bg-transparent;
91 91 }
92 92
93 93 .cbp-input-error {
94 - --tw-ring-color: rgb(239 68 68);
95 - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
96 - var(--tw-ring-offset-width) var(--tw-ring-offset-color);
97 - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
98 - calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
99 - border-color: rgb(239 68 68) !important;
100 - box-shadow:
101 - var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
102 - var(--tw-shadow, 0 0 #0000) !important;
94 + --tw-ring-color: rgb(239 68 68);
95 + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
96 + var(--tw-ring-offset-width) var(--tw-ring-offset-color);
97 + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
98 + calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
99 + border-color: rgb(239 68 68) !important;
100 + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
101 + var(--tw-shadow, 0 0 #0000) !important;
103 102 }
104 103
105 104 .code-block-pro-editor .code-block-pro-copy-button {
106 - display: block !important;
107 - @apply pointer-events-none;
105 + display: block !important;
106 + @apply pointer-events-none;
108 107 }
109 108 .code-block-pro-editor .sidebar-copy-button svg {
110 - @apply block;
109 + @apply block;
111 110 }
112 111 .code-block-pro-editor .sidebar-copy-button .with-check {
113 - @apply hidden;
112 + @apply hidden;
114 113 }
115 114 .cbp-theme-preview {
116 - font-family:
117 - ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* no !important */
118 - direction: ltr;
115 + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
116 + monospace; /* no !important */
117 + direction: ltr;
119 118 }
120 119 @font-face {
121 - font-family: "Code-Pro-Fira-Code";
122 - src: url("../fonts/Code-Pro-Fira-Code.woff2") format("woff2");
120 + font-family: 'Code-Pro-Fira-Code';
121 + src: url('../fonts/Code-Pro-Fira-Code.woff2') format('woff2');
123 122 }
124 123 @font-face {
125 - font-family: "Code-Pro-JetBrains-Mono";
126 - src: url("../fonts/Code-Pro-JetBrains-Mono.woff2") format("woff2");
124 + font-family: 'Code-Pro-JetBrains-Mono';
125 + src: url('../fonts/Code-Pro-JetBrains-Mono.woff2') format('woff2');
127 126 }
128 127 @font-face {
129 - font-family: "Code-Pro-JetBrains-Mono-NL";
130 - src: url("../fonts/Code-Pro-JetBrains-Mono-NL.ttf") format("truetype");
128 + font-family: 'Code-Pro-JetBrains-Mono-NL';
129 + src: url('../fonts/Code-Pro-JetBrains-Mono-NL.ttf') format('truetype');
131 130 }
132 131 @font-face {
133 - font-family: "Code-Pro-Comic-Mono";
134 - src: url("../fonts/Code-Pro-Comic-Mono.ttf") format("truetype");
132 + font-family: 'Code-Pro-Comic-Mono';
133 + src: url('../fonts/Code-Pro-Comic-Mono.ttf') format('truetype');
135 134 }
136 135 @font-face {
137 - font-family: "Code-Pro-Roboto-Mono";
138 - src: url("../fonts/Code-Pro-Roboto-Mono.ttf") format("truetype");
136 + font-family: 'Code-Pro-Fantasque-Sans-Mono';
137 + src: url('../fonts/Code-Pro-Fantasque-Sans-Mono.woff2') format('woff2');
139 138 }
140 139 @font-face {
141 - font-family: "Code-Pro-Fantasque-Sans-Mono";
142 - src: url("../fonts/Code-Pro-Fantasque-Sans-Mono.woff2") format("woff2");
140 + font-family: 'Code-Pro-Cozette';
141 + src: url('../fonts/Code-Pro-Cozette.woff2') format('woff2');
143 142 }
144 143 @font-face {
145 - font-family: "Code-Pro-Cozette";
146 - src: url("../fonts/Code-Pro-Cozette.woff2") format("woff2");
144 + font-family: 'Code-Pro-Deja-Vu-Mono';
145 + src: url('../fonts/Code-Pro-Deja-Vu-Mono.ttf') format('truetype');
147 146 }
148 147 @font-face {
149 - font-family: "Code-Pro-Deja-Vu-Mono";
150 - src: url("../fonts/Code-Pro-Deja-Vu-Mono.ttf") format("truetype");
148 + font-family: 'Code-Pro-Monaspace-Argon';
149 + src: url('../fonts/Code-Pro-Monaspace-Argon.woff') format('woff');
151 150 }
152 151 @font-face {
153 - font-family: "Code-Pro-Monaspace-Argon";
154 - src: url("../fonts/Code-Pro-Monaspace-Argon.woff") format("woff");
152 + font-family: 'Code-Pro-Monaspace-Krypton';
153 + src: url('../fonts/Code-Pro-Monaspace-Krypton.woff') format('woff');
155 154 }
156 155 @font-face {
157 - font-family: "Code-Pro-Monaspace-Krypton";
158 - src: url("../fonts/Code-Pro-Monaspace-Krypton.woff") format("woff");
156 + font-family: 'Code-Pro-Monaspace-Neon';
157 + src: url('../fonts/Code-Pro-Monaspace-Neon.woff') format('woff');
159 158 }
160 159 @font-face {
161 - font-family: "Code-Pro-Monaspace-Neon";
162 - src: url("../fonts/Code-Pro-Monaspace-Neon.woff") format("woff");
160 + font-family: 'Code-Pro-Monaspace-Radon';
161 + src: url('../fonts/Code-Pro-Monaspace-Radon.woff') format('woff');
163 162 }
164 163 @font-face {
165 - font-family: "Code-Pro-Monaspace-Radon";
166 - src: url("../fonts/Code-Pro-Monaspace-Radon.woff") format("woff");
164 + font-family: 'Code-Pro-Monaspace-Xenon';
165 + src: url('../fonts/Code-Pro-Monaspace-Xenon.woff') format('woff');
167 166 }
168 167 @font-face {
169 - font-family: "Code-Pro-Monaspace-Xenon";
170 - src: url("../fonts/Code-Pro-Monaspace-Xenon.woff") format("woff");
171 -}
172 -@font-face {
173 - font-family: "Code-Pro-Geist-Mono";
174 - src: url("../fonts/Code-Pro-Geist-Mono.woff2") format("woff2");
175 -}
176 -@font-face {
177 - font-family: "Code-Pro-Hack";
178 - src: url("../fonts/Code-Pro-Hack.woff2") format("woff2");
168 + font-family: 'Code-Pro-Geist-Mono';
169 + src: url('../fonts/Code-Pro-Geist-Mono.woff2') format('woff2');
179 170 }