PluginProbe
Code Block Pro – Beautiful Syntax Highlighting / 1.22.0
Code Block Pro – Beautiful Syntax Highlighting v1.22.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.22.0, at src/front/style.css

195 lines 5.5 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 }
110 }
111 }
112 /* [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
113 .line,
114 .line:hover,
115 .line.cbp-no-blur:hover,
116 .line.cbp-line-highlight {
117 .cbp-line-highlighter {
118 @apply -top-0.5;
119 }
120 }
121 } */
122 /* [data-code-block-pro-font-family='Code-Pro-Fira-Code'].cbp-highlight-hover {
123 .line,
124 .line:hover,
125 .line.cbp-no-blur:hover,
126 .line.cbp-line-highlight {
127 .cbp-line-highlighter {
128 top: -1.5px !important;
129 }
130 }
131 } */
132 .wp-block-kevinbatdorf-code-block-pro:not(
133 .code-block-pro-editor
134 ).padding-disabled
135 pre
136 .line.cbp-line-highlight::after {
137 @apply left-0 w-full;
138 }
139 .wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled
140 pre
141 .line:not(.cbp-no-blur) {
142 filter: blur(1px);
143 @apply opacity-40 transition-all duration-200 pointer-events-none;
144 }
145 .wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled.cbp-unblur-on-hover:hover
146 pre
147 .line:not(.cbp-no-blur) {
148 @apply blur-none opacity-100 pointer-events-auto;
149 }
150 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre * {
151 font-family: inherit;
152 }
153 .cbp-see-more-simple-btn-hover {
154 @apply transition-none;
155 }
156 .cbp-see-more-simple-btn-hover:hover {
157 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
158 }
159 .code-block-pro-copy-button {
160 border: 0;
161 background: none;
162 padding: 6px;
163 @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;
164 }
165 .wp-block-kevinbatdorf-code-block-pro.padding-disabled
166 .code-block-pro-copy-button {
167 padding: 0;
168 }
169 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
170 @apply opacity-50;
171 }
172 /* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
173 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
174 @apply opacity-90;
175 }
176 .code-block-pro-copy-button {
177 .without-check {
178 @apply block;
179 }
180 .with-check {
181 @apply hidden;
182 }
183 }
184 .code-block-pro-copy-button.cbp-copying {
185 .without-check {
186 @apply hidden;
187 }
188 .with-check {
189 @apply block;
190 }
191 }
192 .cbp-footer-link {
193 @apply hover:underline;
194 }
195