← All changes | src/editor/editor.css +56 -5 1.7.0 → 1.13.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,27 @@
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	36	direction: ltr !important;
37	37	}
38	38	.code-block-pro-editor.cbp-has-line-numbers pre {
39	39	counter-reset: step;
40	40	counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
	41	+ padding-right: 0;
41	42	}
	43	+.code-block-pro-editor pre .line {
	44	+ @apply relative inline-block w-full;
	45	+}
	46	+.code-block-pro-editor:not(.padding-disabled) pre .line:empty {
	47	+ @apply block;
	48	+}
	49	+.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre .line:empty {
	50	+ @apply block;
	51	+}
42	52	.code-block-pro-editor.cbp-has-line-numbers pre .line:not(.cbp-line-number-disabled)::before {
43		- @apply inline-block text-right opacity-30;
	53	+ @apply inline-block text-right opacity-50 absolute;
44	54	margin-right: 12px;
45	55	content: counter(step);
46	56	color: var(--cbp-line-number-color, #999);
47	57	width: var(--cbp-line-number-width, auto);
		@@ -46,21 +56,62 @@
46	56	color: var(--cbp-line-number-color, #999);
47	57	width: var(--cbp-line-number-width, auto);
48	58	user-select: none;
49	59	counter-increment: step;
50		- position: absolute;
51		- left: 18px;
	60	+ left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
52	61	}
	62	+
	63	+.code-block-pro-editor.padding-disabled:not(.cbp-has-line-numbers) pre {
	64	+ @apply p-0;
	65	+}
	66	+.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre {
	67	+ @apply py-0;
	68	+}
53	69	/* Will make sure the line numbers are full width before calculating */
	70	+.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced,
	71	+.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-disabled {
	72	+ @apply inline;
	73	+}
54	74	.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced::before {
55	75	width: auto !important;
56	76	position: initial;
57	77	}
	78	+.code-block-pro-editor .cbp-footer-link {
	79	+ @apply pointer-events-none no-underline;
	80	+}
58	81
	82	+/* Just to make it look similar to the front end */
	83	+.code-block-pro-editor pre .line.cbp-line-highlight::after {
	84	+ content: '';
	85	+ background: var(--cbp-line-highlight-color, rgb(14 165 233/.2));
	86	+ @apply absolute top-0 h-full;
	87	+ left: -100% !important;
	88	+ width: 1000%!important;
	89	+ min-height: var(--cbp-line-height) !important;
	90	+}
	91	+
59	92	.code-block-pro-editor code {
60	93	font-family: inherit !important;
61	94	@apply m-0 p-0 text-inherit bg-transparent;
62	95	}
	96	+
	97	+.cbp-input-error {
	98	+ --tw-ring-color: rgb(239 68 68);
	99	+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	100	+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	101	+ border-color: rgb(239 68 68) !important;
	102	+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 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	+.cbp-theme-preview {
	110	+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* no !important */
	111	+ direction: ltr;
	112	+}
	113	+
63	114	@font-face {
64	115	font-family: 'Code-Pro-Fira-Code';
65	116	src: url('../fonts/Code-Pro-Fira-Code.woff2') format('woff2');
66	117	}