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
code-block-pro / src / front / style.css

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

248 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: 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 }
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;
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
140 pre
141 .line.cbp-line-highlight::after {
142 @apply left-0 w-full;
143 }
144 .wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled
145 pre
146 .line:not(.cbp-no-blur) {
147 filter: blur(1px);
148 @apply opacity-40 transition-all duration-200 pointer-events-none;
149 }
150 .wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled.cbp-unblur-on-hover:hover
151 pre
152 .line:not(.cbp-no-blur) {
153 @apply blur-none opacity-100 pointer-events-auto;
154 }
155 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre * {
156 font-family: inherit;
157 }
158 .cbp-see-more-simple-btn-hover {
159 @apply transition-none;
160 }
161 .cbp-see-more-simple-btn-hover:hover {
162 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
163 }
164 .code-block-pro-copy-button {
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;
168 }
169 .code-block-pro-copy-button:not([data-has-text-button]) {
170 background: none;
171 @apply bg-transparent;
172 }
173 .wp-block-kevinbatdorf-code-block-pro.padding-disabled
174 .code-block-pro-copy-button {
175 padding: 0;
176 }
177 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
178 @apply opacity-50;
179 }
180 /* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
181 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
182 @apply opacity-90;
183 }
184 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button[data-has-text-button],
185 .code-block-pro-copy-button[data-has-text-button] {
186 @apply opacity-100;
187 }
188 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button[data-has-text-button]:hover {
189 @apply opacity-80;
190 }
191 .code-block-pro-copy-button[data-has-text-button] {
192 margin-top: 0.7rem;
193 @apply block rounded-xl mr-3 py-0.5 px-1.5;
194 }
195 .code-block-pro-copy-button[data-inside-header-type^="headlights"],
196 .code-block-pro-copy-button[data-inside-header-type="headlightsMuted"] {
197 margin-top: 0.85rem;
198 }
199 .code-block-pro-copy-button[data-inside-header-type="headlightsMutedAlt"] {
200 margin-top: 0.65rem;
201 }
202 .code-block-pro-copy-button[data-inside-header-type="simpleString"] {
203 margin-top: 0.645rem;
204 }
205 .code-block-pro-copy-button[data-inside-header-type="pillString"] {
206 @apply mt-4;
207 }
208 .code-block-pro-copy-button[data-inside-header-type="pillString"] .cbp-btn-text {
209 @apply relative top-px;
210 }
211 .cbp-btn-text {
212 @apply text-xs;
213 }
214
215 .code-block-pro-copy-button {
216 .without-check {
217 @apply block;
218 }
219 .with-check {
220 @apply hidden;
221 }
222 }
223 .code-block-pro-copy-button.cbp-copying {
224 @apply opacity-100;
225 .without-check {
226 @apply hidden;
227 }
228 .with-check {
229 @apply block;
230 }
231 }
232 .cbp-footer-link {
233 @apply hover:underline;
234 }
235 @media print {
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 }
247 }
248