code-block-pro / src / editor / editor.css

editor.css in Code Block Pro – Beautiful Syntax Highlighting 1.26.1, at src/editor/editor.css

179 lines 5.3 KB

Raw Download Zip

1	.code-block-pro-editor {
2	--tw-ring-inset: var(--tw-empty, /!/ /!/);
3	--tw-ring-offset-width: 0px;
4	--tw-ring-offset-color: transparent;
5	--tw-ring-color: var(--wp-admin-theme-color);
6	--tw-translate-x: 0;
7	--tw-translate-y: 0;
8	--tw-rotate: 0;
9	--tw-skew-x: 0;
10	--tw-skew-y: 0;
11	--tw-scale-x: 1;
12	--tw-scale-y: 1;
13	}
14	.code-block-pro-editor *,
15	.code-block-pro-editor *:after,
16	.code-block-pro-editor *:before {
17	box-sizing: border-box;
18	/* border: 0 solid #e5e7eb; */
19	}
20	@tailwind base;
21	@tailwind components;
22	@tailwind utilities;
23	/* Add more styles here specific to the editor only */
24	.code-block-pro-editor .npm__react-simple-code-editor__textarea {
25	@apply shadow-none;
26	}
27	.code-block-pro-editor pre,
28	.code-block-pro-editor pre * {
29	font-family: inherit !important;
30	font-size: inherit !important;
31	line-height: inherit !important;
32	}
33	.code-block-pro-editor textarea,
34	.code-block-pro-editor pre {
35	@apply m-0 text-left focus:outline-none;
36	min-height: 36px;
37	direction: ltr !important;
38	}
39	.code-block-pro-editor.cbp-has-line-numbers pre {
40	counter-reset: step;
41	counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
42	padding-right: 0;
43	}
44	.code-block-pro-editor pre .line {
45	@apply relative inline-block w-full;
46	}
47	.code-block-pro-editor pre {
48	.line:empty {
49	@apply block;
50	}
51	.line span:empty {
52	@apply inline-block;
53	}
54	}
55	.code-block-pro-editor.cbp-has-line-numbers
56	pre
57	.line:not(.cbp-line-number-disabled)::before {
58	@apply inline-block text-right opacity-50 absolute;
59	margin-right: 12px;
60	content: counter(step);
61	color: var(--cbp-line-number-color, #999);
62	width: var(--cbp-line-number-width, auto);
63	user-select: none;
64	counter-increment: step;
65	left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
66	}
67
68	.code-block-pro-editor.padding-disabled:not(.cbp-has-line-numbers) pre {
69	@apply p-0;
70	}
71	.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre {
72	@apply py-0;
73	}
74	.code-block-pro-editor .cbp-footer-link {
75	@apply pointer-events-none no-underline;
76	}
77
78	/* Just to make it look similar to the front end */
79	.code-block-pro-editor pre .line.cbp-line-highlight::after {
80	content: '';
81	background: var(--cbp-line-highlight-color, rgb(14 165 233/0.2));
82	@apply absolute top-0 h-full;
83	left: -100% !important;
84	width: 1000% !important;
85	min-height: var(--cbp-line-height) !important;
86	}
87
88	.code-block-pro-editor code {
89	font-family: inherit !important;
90	@apply m-0 p-0 text-inherit bg-transparent;
91	}
92
93	.cbp-input-error {
94	--tw-ring-color: rgb(239 68 68);
95	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
96	var(--tw-ring-offset-width) var(--tw-ring-offset-color);
97	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
98	calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
99	border-color: rgb(239 68 68) !important;
100	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
101	var(--tw-shadow, 0 0 #0000) !important;
102	}
103
104	.code-block-pro-editor .code-block-pro-copy-button {
105	display: block !important;
106	@apply pointer-events-none;
107	}
108	.code-block-pro-editor .sidebar-copy-button svg {
109	@apply block;
110	}
111	.code-block-pro-editor .sidebar-copy-button .with-check {
112	@apply hidden;
113	}
114	.cbp-theme-preview {
115	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
116	monospace; /* no !important */
117	direction: ltr;
118	}
119	@font-face {
120	font-family: 'Code-Pro-Fira-Code';
121	src: url('../fonts/Code-Pro-Fira-Code.woff2') format('woff2');
122	}
123	@font-face {
124	font-family: 'Code-Pro-JetBrains-Mono';
125	src: url('../fonts/Code-Pro-JetBrains-Mono.woff2') format('woff2');
126	}
127	@font-face {
128	font-family: 'Code-Pro-JetBrains-Mono-NL';
129	src: url('../fonts/Code-Pro-JetBrains-Mono-NL.ttf') format('truetype');
130	}
131	@font-face {
132	font-family: 'Code-Pro-Comic-Mono';
133	src: url('../fonts/Code-Pro-Comic-Mono.ttf') format('truetype');
134	}
135	@font-face {
136	font-family: 'Code-Pro-Roboto-Mono';
137	src: url('../fonts/Code-Pro-Roboto-Mono.ttf') format('truetype');
138	}
139	@font-face {
140	font-family: 'Code-Pro-Fantasque-Sans-Mono';
141	src: url('../fonts/Code-Pro-Fantasque-Sans-Mono.woff2') format('woff2');
142	}
143	@font-face {
144	font-family: 'Code-Pro-Cozette';
145	src: url('../fonts/Code-Pro-Cozette.woff2') format('woff2');
146	}
147	@font-face {
148	font-family: 'Code-Pro-Deja-Vu-Mono';
149	src: url('../fonts/Code-Pro-Deja-Vu-Mono.ttf') format('truetype');
150	}
151	@font-face {
152	font-family: 'Code-Pro-Monaspace-Argon';
153	src: url('../fonts/Code-Pro-Monaspace-Argon.woff') format('woff');
154	}
155	@font-face {
156	font-family: 'Code-Pro-Monaspace-Krypton';
157	src: url('../fonts/Code-Pro-Monaspace-Krypton.woff') format('woff');
158	}
159	@font-face {
160	font-family: 'Code-Pro-Monaspace-Neon';
161	src: url('../fonts/Code-Pro-Monaspace-Neon.woff') format('woff');
162	}
163	@font-face {
164	font-family: 'Code-Pro-Monaspace-Radon';
165	src: url('../fonts/Code-Pro-Monaspace-Radon.woff') format('woff');
166	}
167	@font-face {
168	font-family: 'Code-Pro-Monaspace-Xenon';
169	src: url('../fonts/Code-Pro-Monaspace-Xenon.woff') format('woff');
170	}
171	@font-face {
172	font-family: 'Code-Pro-Geist-Mono';
173	src: url('../fonts/Code-Pro-Geist-Mono.woff2') format('woff2');
174	}
175	@font-face {
176	font-family: 'Code-Pro-Hack';
177	src: url('../fonts/Code-Pro-Hack.woff2') format('woff2');
178	}
179