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

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

199 lines 5.7 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 @apply relative box-border;
7 * {
8 @apply box-border;
9 }
10 }
11 .wp-block-kevinbatdorf-code-block-pro {
12 pre,
13 pre * {
14 font-size: inherit;
15 line-height: inherit;
16 }
17 }
18 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre {
19 border: 0;
20 overflow-wrap: normal;
21 padding: 16px;
22 padding-right: 0;
23 font-family: inherit;
24 @apply overflow-auto text-inherit text-left m-0 whitespace-pre bg-none border-none border-0 rounded-none shadow-none;
25 }
26 .wp-block-kevinbatdorf-code-block-pro.padding-disabled:not(
27 .code-block-pro-editor
28 )
29 pre {
30 @apply p-0;
31 }
32 .wp-block-kevinbatdorf-code-block-pro.padding-bottom-disabled pre {
33 @apply pb-0;
34 }
35 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
36 border: 0;
37 background: none;
38 overflow-wrap: normal;
39 font-family: inherit;
40 @apply block w-full m-0 p-0 bg-transparent text-inherit text-left whitespace-pre border-none border-0 rounded-none shadow-none;
41 }
42 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor)
43 pre
44 code
45 .line {
46 @apply inline-block align-top;
47 min-width: var(--cbp-block-width, 100%);
48 }
49 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
50 .code-block-pro-editor
51 )
52 pre
53 code
54 .line {
55 padding-left: calc(12px + var(--cbp-line-number-width, auto));
56 }
57 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
58 .code-block-pro-editor
59 )
60 pre
61 code {
62 counter-reset: step;
63 counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
64 }
65
66 .wp-block-kevinbatdorf-code-block-pro pre code .line {
67 @apply relative;
68 }
69 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor)
70 pre
71 code
72 .line::before {
73 content: '';
74 @apply inline-block;
75 }
76 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
77 .code-block-pro-editor
78 )
79 pre
80 code
81 .line:not(.cbp-line-number-disabled)::before {
82 @apply absolute left-0 text-right opacity-50 transition-opacity duration-500;
83 content: counter(step);
84 color: var(--cbp-line-number-color, #999);
85 width: var(--cbp-line-number-width, auto);
86 user-select: none;
87 counter-increment: step;
88 }
89 .wp-block-kevinbatdorf-code-block-pro.cbp-highlight-hover .line {
90 min-height: var(--cbp-block-height, 100%);
91 }
92 .wp-block-kevinbatdorf-code-block-pro {
93 &.cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover))
94 .line:hover,
95 .line.cbp-no-blur:hover,
96 .line.cbp-line-highlight {
97 .cbp-line-highlighter {
98 @apply w-full pointer-events-none absolute top-0;
99 background: var(--cbp-line-highlight-color, rgb(14 165 233/0.2));
100 min-height: var(--cbp-block-height, 100%);
101 min-width: calc(var(--cbp-block-width, 100%) + 16px);
102 left: -16px;
103 [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf']& {
104 @apply -top-0.5;
105 }
106 [data-code-block-pro-font-family='Code-Pro-Fira-Code']& {
107 top: -1.5px !important;
108 }
109 [data-code-block-pro-font-family='Code-Pro-Cozette']&,
110 [data-code-block-pro-font-family='Code-Pro-Deja-Vu-Mono.ttf']& {
111 top: -1px !important;
112 }
113 }
114 }
115 }
116 /* [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
117 .line,
118 .line:hover,
119 .line.cbp-no-blur:hover,
120 .line.cbp-line-highlight {
121 .cbp-line-highlighter {
122 @apply -top-0.5;
123 }
124 }
125 } */
126 /* [data-code-block-pro-font-family='Code-Pro-Fira-Code'].cbp-highlight-hover {
127 .line,
128 .line:hover,
129 .line.cbp-no-blur:hover,
130 .line.cbp-line-highlight {
131 .cbp-line-highlighter {
132 top: -1.5px !important;
133 }
134 }
135 } */
136 .wp-block-kevinbatdorf-code-block-pro:not(
137 .code-block-pro-editor
138 ).padding-disabled
139 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(1px);
147 @apply opacity-40 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 background: none;
166 padding: 6px;
167 @apply absolute top-0 right-0 left-auto bg-transparent border-none border-0 cursor-pointer opacity-10 focus:opacity-40 transition-opacity duration-200 ease-in-out leading-none z-10;
168 }
169 .wp-block-kevinbatdorf-code-block-pro.padding-disabled
170 .code-block-pro-copy-button {
171 padding: 0;
172 }
173 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
174 @apply opacity-50;
175 }
176 /* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
177 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
178 @apply opacity-90;
179 }
180 .code-block-pro-copy-button {
181 .without-check {
182 @apply block;
183 }
184 .with-check {
185 @apply hidden;
186 }
187 }
188 .code-block-pro-copy-button.cbp-copying {
189 .without-check {
190 @apply hidden;
191 }
192 .with-check {
193 @apply block;
194 }
195 }
196 .cbp-footer-link {
197 @apply hover:underline;
198 }
199