PluginProbe
Code Block Pro – Beautiful Syntax Highlighting / 1.28.0
Code Block Pro – Beautiful Syntax Highlighting v1.28.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
code-block-pro / src / front / style.css

style.css in Code Block Pro – Beautiful Syntax Highlighting 1.28.0, at src/front/style.css

260 lines 7.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*! purgecss start ignore */
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 }
11 }
12 .wp-block-kevinbatdorf-code-block-pro {
13 pre,
14 pre * {
15 font-size: inherit;
16 line-height: inherit;
17 }
18 }
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;
26 }
27 .wp-block-kevinbatdorf-code-block-pro.padding-disabled:not(
28 .code-block-pro-editor
29 )
30 pre {
31 @apply p-0;
32 }
33 .wp-block-kevinbatdorf-code-block-pro.padding-bottom-disabled pre {
34 @apply pb-0;
35 }
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;
42 }
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%);
49 }
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));
57 }
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);
65 }
66
67 .wp-block-kevinbatdorf-code-block-pro pre code .line {
68 @apply relative;
69 }
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;
76 }
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;
89 }
90 .wp-block-kevinbatdorf-code-block-pro.cbp-highlight-hover .line {
91 min-height: var(--cbp-block-height, 100%);
92 }
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']& {
105 @apply -top-0.5;
106 }
107 [data-code-block-pro-font-family='Code-Pro-Fira-Code']& {
108 top: -1.5px !important;
109 }
110 [data-code-block-pro-font-family='Code-Pro-Cozette']&,
111 [data-code-block-pro-font-family='Code-Pro-Deja-Vu-Mono.ttf']& {
112 top: -1px !important;
113 }
114 }
115 }
116 }
117 /* [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
118 .line,
119 .line:hover,
120 .line.cbp-no-blur:hover,
121 .line.cbp-line-highlight {
122 .cbp-line-highlighter {
123 @apply -top-0.5;
124 }
125 }
126 } */
127 /* [data-code-block-pro-font-family='Code-Pro-Fira-Code'].cbp-highlight-hover {
128 .line,
129 .line:hover,
130 .line.cbp-no-blur:hover,
131 .line.cbp-line-highlight {
132 .cbp-line-highlighter {
133 top: -1.5px !important;
134 }
135 }
136 } */
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;
142 }
143 .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;
148 }
149 .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;
153 }
154 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre * {
155 font-family: inherit;
156 }
157 .cbp-see-more-simple-btn-hover {
158 @apply transition-none;
159 }
160 .cbp-see-more-simple-btn-hover:hover {
161 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
162 }
163 .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;
167 }
168
169 .code-block-pro-copy-button:not([data-has-text-button]) {
170 background: none;
171 @apply bg-transparent;
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 .wp-block-kevinbatdorf-code-block-pro.padding-disabled
183 .code-block-pro-copy-button {
184 padding: 0;
185 }
186 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
187 @apply opacity-50;
188 }
189 /* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
190 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
191 @apply opacity-90;
192 }
193 .wp-block-kevinbatdorf-code-block-pro:hover
194 .code-block-pro-copy-button[data-has-text-button],
195 .code-block-pro-copy-button[data-has-text-button] {
196 @apply opacity-100;
197 }
198 .wp-block-kevinbatdorf-code-block-pro
199 .code-block-pro-copy-button[data-has-text-button]:hover {
200 @apply opacity-80;
201 }
202 .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;
205 }
206 .code-block-pro-copy-button[data-inside-header-type^="headlights"],
207 .code-block-pro-copy-button[data-inside-header-type="headlightsMuted"] {
208 margin-top: 0.85rem;
209 }
210 .code-block-pro-copy-button[data-inside-header-type="headlightsMutedAlt"] {
211 margin-top: 0.65rem;
212 }
213 .code-block-pro-copy-button[data-inside-header-type="simpleString"] {
214 margin-top: 0.645rem;
215 }
216 .code-block-pro-copy-button[data-inside-header-type="pillString"] {
217 @apply mt-4;
218 }
219 .code-block-pro-copy-button[data-inside-header-type="pillString"]
220 .cbp-btn-text {
221 @apply relative top-px;
222 }
223 .cbp-btn-text {
224 @apply text-xs;
225 }
226
227 .code-block-pro-copy-button {
228 .without-check {
229 @apply block;
230 }
231 .with-check {
232 @apply hidden;
233 }
234 }
235 .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 }
243 }
244 .cbp-footer-link {
245 @apply hover:underline;
246 }
247 @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 }
259 }
260