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

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

180 lines 5.0 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:
101	var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
102	var(--tw-shadow, 0 0 #0000) !important;
103	}
104
105	.code-block-pro-editor .code-block-pro-copy-button {
106	display: block !important;
107	@apply pointer-events-none;
108	}
109	.code-block-pro-editor .sidebar-copy-button svg {
110	@apply block;
111	}
112	.code-block-pro-editor .sidebar-copy-button .with-check {
113	@apply hidden;
114	}
115	.cbp-theme-preview {
116	font-family:
117	ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* no !important */
118	direction: ltr;
119	}
120	@font-face {
121	font-family: "Code-Pro-Fira-Code";
122	src: url("../fonts/Code-Pro-Fira-Code.woff2") format("woff2");
123	}
124	@font-face {
125	font-family: "Code-Pro-JetBrains-Mono";
126	src: url("../fonts/Code-Pro-JetBrains-Mono.woff2") format("woff2");
127	}
128	@font-face {
129	font-family: "Code-Pro-JetBrains-Mono-NL";
130	src: url("../fonts/Code-Pro-JetBrains-Mono-NL.ttf") format("truetype");
131	}
132	@font-face {
133	font-family: "Code-Pro-Comic-Mono";
134	src: url("../fonts/Code-Pro-Comic-Mono.ttf") format("truetype");
135	}
136	@font-face {
137	font-family: "Code-Pro-Roboto-Mono";
138	src: url("../fonts/Code-Pro-Roboto-Mono.ttf") format("truetype");
139	}
140	@font-face {
141	font-family: "Code-Pro-Fantasque-Sans-Mono";
142	src: url("../fonts/Code-Pro-Fantasque-Sans-Mono.woff2") format("woff2");
143	}
144	@font-face {
145	font-family: "Code-Pro-Cozette";
146	src: url("../fonts/Code-Pro-Cozette.woff2") format("woff2");
147	}
148	@font-face {
149	font-family: "Code-Pro-Deja-Vu-Mono";
150	src: url("../fonts/Code-Pro-Deja-Vu-Mono.ttf") format("truetype");
151	}
152	@font-face {
153	font-family: "Code-Pro-Monaspace-Argon";
154	src: url("../fonts/Code-Pro-Monaspace-Argon.woff") format("woff");
155	}
156	@font-face {
157	font-family: "Code-Pro-Monaspace-Krypton";
158	src: url("../fonts/Code-Pro-Monaspace-Krypton.woff") format("woff");
159	}
160	@font-face {
161	font-family: "Code-Pro-Monaspace-Neon";
162	src: url("../fonts/Code-Pro-Monaspace-Neon.woff") format("woff");
163	}
164	@font-face {
165	font-family: "Code-Pro-Monaspace-Radon";
166	src: url("../fonts/Code-Pro-Monaspace-Radon.woff") format("woff");
167	}
168	@font-face {
169	font-family: "Code-Pro-Monaspace-Xenon";
170	src: url("../fonts/Code-Pro-Monaspace-Xenon.woff") format("woff");
171	}
172	@font-face {
173	font-family: "Code-Pro-Geist-Mono";
174	src: url("../fonts/Code-Pro-Geist-Mono.woff2") format("woff2");
175	}
176	@font-face {
177	font-family: "Code-Pro-Hack";
178	src: url("../fonts/Code-Pro-Hack.woff2") format("woff2");
179	}
180