← All changes | src/editor/editor.css +105 -13 1.8.0 → 1.25.0 View file →

		@@ -14,9 +14,9 @@
14	14	.code-block-pro-editor *,
15	15	.code-block-pro-editor *:after,
16	16	.code-block-pro-editor *:before {
17	17	box-sizing: border-box;
18		- border: 0 solid #e5e7eb;
	18	+ /* border: 0 solid #e5e7eb; */
19	19	}
20	20	@tailwind base;
21	21	@tailwind components;
22	22	@tailwind utilities;
		@@ -31,17 +31,32 @@
31	31	line-height: inherit !important;
32	32	}
33	33	.code-block-pro-editor textarea,
34	34	.code-block-pro-editor pre {
35		- @apply m-0 text-left;
	35	+ @apply m-0 text-left focus:outline-none;
	36	+ min-height: 36px;
36	37	direction: ltr !important;
37	38	}
38	39	.code-block-pro-editor.cbp-has-line-numbers pre {
39	40	counter-reset: step;
40	41	counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
	42	+ padding-right: 0;
41	43	}
42		-.code-block-pro-editor.cbp-has-line-numbers pre .line:not(.cbp-line-number-disabled)::before {
43		- @apply inline-block text-right opacity-50;
	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;
44	59	margin-right: 12px;
45	60	content: counter(step);
46	61	color: var(--cbp-line-number-color, #999);
47	62	width: var(--cbp-line-number-width, auto);
		@@ -46,29 +61,62 @@
46	61	color: var(--cbp-line-number-color, #999);
47	62	width: var(--cbp-line-number-width, auto);
48	63	user-select: none;
49	64	counter-increment: step;
50		- position: absolute;
51		- left: 18px;
	65	+ left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
52	66	}
53	67
54		-.code-block-pro-editor.cbp-has-line-numbers.padding-disabled pre .line:not(.cbp-line-number-disabled)::before {
55		- @apply static;
	68	+.code-block-pro-editor.padding-disabled:not(.cbp-has-line-numbers) pre {
	69	+ @apply p-0;
56	70	}
57		-
58		-/* Will make sure the line numbers are full width before calculating */
59		-.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced::before {
60		- width: auto !important;
61		- position: initial;
	71	+.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre {
	72	+ @apply py-0;
62	73	}
63	74	.code-block-pro-editor .cbp-footer-link {
64	75	@apply pointer-events-none no-underline;
65	76	}
66	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	+
67	88	.code-block-pro-editor code {
68	89	font-family: inherit !important;
69	90	@apply m-0 p-0 text-inherit bg-transparent;
70	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	+}
71	119	@font-face {
72	120	font-family: 'Code-Pro-Fira-Code';
73	121	src: url('../fonts/Code-Pro-Fira-Code.woff2') format('woff2');
74	122	}
		@@ -74,5 +122,49 @@
74	122	}
75	123	@font-face {
76	124	font-family: 'Code-Pro-JetBrains-Mono';
77	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-Fantasque-Sans-Mono';
	137	+ src: url('../fonts/Code-Pro-Fantasque-Sans-Mono.woff2') format('woff2');
	138	+}
	139	+@font-face {
	140	+ font-family: 'Code-Pro-Cozette';
	141	+ src: url('../fonts/Code-Pro-Cozette.woff2') format('woff2');
	142	+}
	143	+@font-face {
	144	+ font-family: 'Code-Pro-Deja-Vu-Mono';
	145	+ src: url('../fonts/Code-Pro-Deja-Vu-Mono.ttf') format('truetype');
	146	+}
	147	+@font-face {
	148	+ font-family: 'Code-Pro-Monaspace-Argon';
	149	+ src: url('../fonts/Code-Pro-Monaspace-Argon.woff') format('woff');
	150	+}
	151	+@font-face {
	152	+ font-family: 'Code-Pro-Monaspace-Krypton';
	153	+ src: url('../fonts/Code-Pro-Monaspace-Krypton.woff') format('woff');
	154	+}
	155	+@font-face {
	156	+ font-family: 'Code-Pro-Monaspace-Neon';
	157	+ src: url('../fonts/Code-Pro-Monaspace-Neon.woff') format('woff');
	158	+}
	159	+@font-face {
	160	+ font-family: 'Code-Pro-Monaspace-Radon';
	161	+ src: url('../fonts/Code-Pro-Monaspace-Radon.woff') format('woff');
	162	+}
	163	+@font-face {
	164	+ font-family: 'Code-Pro-Monaspace-Xenon';
	165	+ src: url('../fonts/Code-Pro-Monaspace-Xenon.woff') format('woff');
	166	+}
	167	+@font-face {
	168	+ font-family: 'Code-Pro-Geist-Mono';
	169	+ src: url('../fonts/Code-Pro-Geist-Mono.woff2') format('woff2');
78	170	}