PluginProbe
Code Block Pro – Beautiful Syntax Highlighting / 1.26.7
Code Block Pro – Beautiful Syntax Highlighting v1.26.7
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/front/style.css +141 -153 trunk1.26.7 View file →
@@ -1,119 +1,119 @@
1 1 /*! purgecss start ignore */
2 2 .wp-block-kevinbatdorf-code-block-pro {
3 - font-family:
4 - ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* no !important */
5 - direction: ltr;
6 - -webkit-text-size-adjust: 100%;
7 - @apply relative box-border;
8 - * {
9 - @apply box-border;
10 - }
3 + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
4 + monospace; /* no !important */
5 + direction: ltr;
6 + -webkit-text-size-adjust: 100%;
7 + @apply relative box-border;
8 + * {
9 + @apply box-border;
10 + }
11 11 }
12 12 .wp-block-kevinbatdorf-code-block-pro {
13 - pre,
14 - pre * {
15 - font-size: inherit;
16 - line-height: inherit;
17 - }
13 + pre,
14 + pre * {
15 + font-size: inherit;
16 + line-height: inherit;
17 + }
18 18 }
19 19 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre {
20 - border: 0;
21 - overflow-wrap: normal;
22 - padding: 16px;
23 - padding-right: 0;
24 - font-family: inherit;
25 - @apply overflow-auto text-inherit text-left m-0 whitespace-pre bg-none border-none border-0 rounded-none shadow-none outline-none focus-visible:outline-inherit;
20 + border: 0;
21 + overflow-wrap: normal;
22 + padding: 16px;
23 + padding-right: 0;
24 + font-family: inherit;
25 + @apply overflow-auto text-inherit text-left m-0 whitespace-pre bg-none border-none border-0 rounded-none shadow-none;
26 26 }
27 27 .wp-block-kevinbatdorf-code-block-pro.padding-disabled:not(
28 - .code-block-pro-editor
29 - )
30 - pre {
31 - @apply p-0;
28 + .code-block-pro-editor
29 + )
30 + pre {
31 + @apply p-0;
32 32 }
33 33 .wp-block-kevinbatdorf-code-block-pro.padding-bottom-disabled pre {
34 - @apply pb-0;
34 + @apply pb-0;
35 35 }
36 36 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
37 - border: 0;
38 - background: none;
39 - overflow-wrap: normal;
40 - font-family: inherit;
41 - @apply block w-full m-0 p-0 bg-transparent text-inherit text-left whitespace-pre border-none border-0 rounded-none shadow-none;
37 + border: 0;
38 + background: none;
39 + overflow-wrap: normal;
40 + font-family: inherit;
41 + @apply block w-full m-0 p-0 bg-transparent text-inherit text-left whitespace-pre border-none border-0 rounded-none shadow-none;
42 42 }
43 43 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor)
44 - pre
45 - code
46 - .line {
47 - @apply inline-block align-top;
48 - min-width: var(--cbp-block-width, 100%);
44 + pre
45 + code
46 + .line {
47 + @apply inline-block align-top;
48 + min-width: var(--cbp-block-width, 100%);
49 49 }
50 50 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
51 - .code-block-pro-editor
52 - )
53 - pre
54 - code
55 - .line {
56 - padding-left: calc(12px + var(--cbp-line-number-width, auto));
51 + .code-block-pro-editor
52 + )
53 + pre
54 + code
55 + .line {
56 + padding-left: calc(12px + var(--cbp-line-number-width, auto));
57 57 }
58 58 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
59 - .code-block-pro-editor
60 - )
61 - pre
62 - code {
63 - counter-reset: step;
64 - counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
59 + .code-block-pro-editor
60 + )
61 + pre
62 + code {
63 + counter-reset: step;
64 + counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
65 65 }
66 66
67 67 .wp-block-kevinbatdorf-code-block-pro pre code .line {
68 - @apply relative;
68 + @apply relative;
69 69 }
70 70 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor)
71 - pre
72 - code
73 - .line::before {
74 - content: "";
75 - @apply inline-block;
71 + pre
72 + code
73 + .line::before {
74 + content: '';
75 + @apply inline-block;
76 76 }
77 77 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
78 - .code-block-pro-editor
79 - )
80 - pre
81 - code
82 - .line:not(.cbp-line-number-disabled)::before {
83 - @apply absolute left-0 text-right opacity-50 transition-opacity duration-500;
84 - content: counter(step);
85 - color: var(--cbp-line-number-color, #999);
86 - width: var(--cbp-line-number-width, auto);
87 - user-select: none;
88 - counter-increment: step;
78 + .code-block-pro-editor
79 + )
80 + pre
81 + code
82 + .line:not(.cbp-line-number-disabled)::before {
83 + @apply absolute left-0 text-right opacity-50 transition-opacity duration-500;
84 + content: counter(step);
85 + color: var(--cbp-line-number-color, #999);
86 + width: var(--cbp-line-number-width, auto);
87 + user-select: none;
88 + counter-increment: step;
89 89 }
90 90 .wp-block-kevinbatdorf-code-block-pro.cbp-highlight-hover .line {
91 - min-height: var(--cbp-block-height, 100%);
91 + min-height: var(--cbp-block-height, 100%);
92 92 }
93 93 .wp-block-kevinbatdorf-code-block-pro {
94 - &.cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover))
95 - .line:hover,
96 - .line.cbp-no-blur:hover,
97 - .line.cbp-line-highlight {
98 - .cbp-line-highlighter {
99 - @apply w-full pointer-events-none absolute top-0;
100 - background: var(--cbp-line-highlight-color, rgb(14 165 233 / 0.2));
101 - min-height: var(--cbp-block-height, 100%);
102 - min-width: calc(var(--cbp-block-width, 100%) + 16px);
103 - left: -16px;
104 - [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf']& {
94 + &.cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover))
95 + .line:hover,
96 + .line.cbp-no-blur:hover,
97 + .line.cbp-line-highlight {
98 + .cbp-line-highlighter {
99 + @apply w-full pointer-events-none absolute top-0;
100 + background: var(--cbp-line-highlight-color, rgb(14 165 233/0.2));
101 + min-height: var(--cbp-block-height, 100%);
102 + min-width: calc(var(--cbp-block-width, 100%) + 16px);
103 + left: -16px;
104 + [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf']& {
105 105 @apply -top-0.5;
106 106 }
107 - [data-code-block-pro-font-family='Code-Pro-Fira-Code']& {
107 + [data-code-block-pro-font-family='Code-Pro-Fira-Code']& {
108 108 top: -1.5px !important;
109 109 }
110 - [data-code-block-pro-font-family='Code-Pro-Cozette']&,
110 + [data-code-block-pro-font-family='Code-Pro-Cozette']&,
111 111 [data-code-block-pro-font-family='Code-Pro-Deja-Vu-Mono.ttf']& {
112 112 top: -1px !important;
113 113 }
114 - }
115 - }
114 + }
115 + }
116 116 }
117 117 /* [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
118 118 .line,
119 119 .line:hover,
@@ -134,126 +134,114 @@
134 134 }
135 135 }
136 136 } */
137 137 .wp-block-kevinbatdorf-code-block-pro:not(
138 - .code-block-pro-editor
139 - ).padding-disabled pre
140 - .line.cbp-line-highlight::after {
141 - @apply left-0 w-full;
138 + .code-block-pro-editor
139 + ).padding-disabled
140 + pre
141 + .line.cbp-line-highlight::after {
142 + @apply left-0 w-full;
142 143 }
143 144 .wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled
144 - pre
145 - .line:not(.cbp-no-blur) {
146 - filter: blur(1.35px);
147 - @apply opacity-80 transition-all duration-200 pointer-events-none;
145 + pre
146 + .line:not(.cbp-no-blur) {
147 + filter: blur(1px);
148 + @apply opacity-40 transition-all duration-200 pointer-events-none;
148 149 }
149 150 .wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled.cbp-unblur-on-hover:hover
150 - pre
151 - .line:not(.cbp-no-blur) {
152 - @apply blur-none opacity-100 pointer-events-auto;
151 + pre
152 + .line:not(.cbp-no-blur) {
153 + @apply blur-none opacity-100 pointer-events-auto;
153 154 }
154 155 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre * {
155 - font-family: inherit;
156 + font-family: inherit;
156 157 }
157 158 .cbp-see-more-simple-btn-hover {
158 - @apply transition-none;
159 + @apply transition-none;
159 160 }
160 161 .cbp-see-more-simple-btn-hover:hover {
161 - box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
162 + box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
162 163 }
163 164 .code-block-pro-copy-button {
164 - border: 0;
165 - padding: 6px;
166 - @apply absolute top-0 right-0 left-auto border-none border-0 cursor-pointer opacity-10 focus:opacity-40 transition-opacity duration-200 ease-in-out leading-none z-10 outline-none focus-visible:outline-inherit;
165 + border: 0;
166 + padding: 6px;
167 + @apply absolute top-0 right-0 left-auto border-none border-0 cursor-pointer opacity-10 focus:opacity-40 transition-opacity duration-200 ease-in-out leading-none z-10;
167 168 }
168 -
169 169 .code-block-pro-copy-button:not([data-has-text-button]) {
170 - background: none;
171 - @apply bg-transparent;
170 + background: none;
171 + @apply bg-transparent;
172 172 }
173 -/* Keep this selector aggressively specific */
174 -body .wp-block-kevinbatdorf-code-block-pro:not(#x)
175 - .code-block-pro-copy-button-pre,
176 -body
177 - .wp-block-kevinbatdorf-code-block-pro:not(#x)
178 - .code-block-pro-copy-button-textarea {
179 - clip: rect(0, 0, 0, 0);
180 - @apply absolute top-0 left-0 w-px h-px opacity-0 pointer-events-none -m-1 overflow-hidden resize-none border-0 shadow-none bg-transparent text-transparent whitespace-nowrap;
181 -}
182 173 .wp-block-kevinbatdorf-code-block-pro.padding-disabled
183 - .code-block-pro-copy-button {
184 - padding: 0;
174 + .code-block-pro-copy-button {
175 + padding: 0;
185 176 }
186 177 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
187 - @apply opacity-50;
178 + @apply opacity-50;
188 179 }
189 180 /* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
190 181 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
191 - @apply opacity-90;
182 + @apply opacity-90;
192 183 }
193 -.wp-block-kevinbatdorf-code-block-pro:hover
194 - .code-block-pro-copy-button[data-has-text-button],
184 +.wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button[data-has-text-button],
195 185 .code-block-pro-copy-button[data-has-text-button] {
196 - @apply opacity-100;
186 + @apply opacity-100;
197 187 }
198 -.wp-block-kevinbatdorf-code-block-pro
199 - .code-block-pro-copy-button[data-has-text-button]:hover {
200 - @apply opacity-80;
188 +.wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button[data-has-text-button]:hover {
189 + @apply opacity-80;
201 190 }
202 191 .code-block-pro-copy-button[data-has-text-button] {
203 - margin-top: 0.7rem;
204 - @apply block rounded-xl mr-3 py-0.5 px-1.5;
192 + margin-top: 0.7rem;
193 + @apply block rounded-xl mr-3 py-0.5 px-1.5;
205 194 }
206 195 .code-block-pro-copy-button[data-inside-header-type^="headlights"],
207 196 .code-block-pro-copy-button[data-inside-header-type="headlightsMuted"] {
208 - margin-top: 0.85rem;
197 + margin-top: 0.85rem;
209 198 }
210 199 .code-block-pro-copy-button[data-inside-header-type="headlightsMutedAlt"] {
211 - margin-top: 0.65rem;
200 + margin-top: 0.65rem;
212 201 }
213 202 .code-block-pro-copy-button[data-inside-header-type="simpleString"] {
214 - margin-top: 0.645rem;
203 + margin-top: 0.645rem;
215 204 }
216 205 .code-block-pro-copy-button[data-inside-header-type="pillString"] {
217 - @apply mt-4;
206 + @apply mt-4;
218 207 }
219 -.code-block-pro-copy-button[data-inside-header-type="pillString"]
220 - .cbp-btn-text {
221 - @apply relative top-px;
208 +.code-block-pro-copy-button[data-inside-header-type="pillString"] .cbp-btn-text {
209 + @apply relative top-px;
222 210 }
223 211 .cbp-btn-text {
224 - @apply text-xs;
212 + @apply text-xs;
225 213 }
226 214
227 215 .code-block-pro-copy-button {
228 - .without-check {
229 - @apply block;
230 - }
231 - .with-check {
232 - @apply hidden;
233 - }
216 + .without-check {
217 + @apply block;
218 + }
219 + .with-check {
220 + @apply hidden;
221 + }
234 222 }
235 223 .code-block-pro-copy-button.cbp-copying {
236 - @apply opacity-100;
237 - .without-check {
238 - @apply hidden;
239 - }
240 - .with-check {
241 - @apply block;
242 - }
224 + @apply opacity-100;
225 + .without-check {
226 + @apply hidden;
227 + }
228 + .with-check {
229 + @apply block;
230 + }
243 231 }
244 232 .cbp-footer-link {
245 - @apply hover:underline;
233 + @apply hover:underline;
246 234 }
247 235 @media print {
248 - .wp-block-kevinbatdorf-code-block-pro pre {
249 - max-height: none !important;
250 - }
251 - .wp-block-kevinbatdorf-code-block-pro:not(#x) .line::before {
252 - background-color: transparent !important;
253 - color: inherit !important;
254 - }
255 - .wp-block-kevinbatdorf-code-block-pro:not(#x) > span,
256 - .wp-block-kevinbatdorf-code-block-pro:not(#x) .cbp-line-highlighter {
257 - display: none !important;
258 - }
236 + .wp-block-kevinbatdorf-code-block-pro pre {
237 + max-height: none !important;
238 + }
239 + .wp-block-kevinbatdorf-code-block-pro:not(#x) .line::before {
240 + background-color: transparent !important;
241 + color: inherit !important;
242 + }
243 + .wp-block-kevinbatdorf-code-block-pro:not(#x) > span,
244 + .wp-block-kevinbatdorf-code-block-pro:not(#x) .cbp-line-highlighter {
245 + display: none !important;
246 + }
259 247 }