← All changes | src/editor/editor.css +81 -2 1.4.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;
		@@ -23,16 +23,95 @@
23	23	/* Add more styles here specific to the editor only */
24	24	.code-block-pro-editor .npm__react-simple-code-editor__textarea {
25	25	@apply shadow-none;
26	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	+}
27	33	.code-block-pro-editor textarea,
28	34	.code-block-pro-editor pre {
29		- @apply m-0 text-left;
	35	+ @apply m-0 text-left focus:outline-none;
30	36	direction: ltr !important;
31	37	}
	38	+.code-block-pro-editor.cbp-has-line-numbers pre {
	39	+ counter-reset: step;
	40	+ counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
	41	+ padding-right: 0;
	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	+}
	52	+.code-block-pro-editor.cbp-has-line-numbers pre .line:not(.cbp-line-number-disabled)::before {
	53	+ @apply inline-block text-right opacity-50 absolute;
	54	+ margin-right: 12px;
	55	+ content: counter(step);
	56	+ color: var(--cbp-line-number-color, #999);
	57	+ width: var(--cbp-line-number-width, auto);
	58	+ user-select: none;
	59	+ counter-increment: step;
	60	+ left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
	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	+}
	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	+}
	74	+.code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced::before {
	75	+ width: auto !important;
	76	+ position: initial;
	77	+}
	78	+.code-block-pro-editor .cbp-footer-link {
	79	+ @apply pointer-events-none no-underline;
	80	+}
	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	+
32	92	.code-block-pro-editor code {
	93	+ font-family: inherit !important;
33	94	@apply m-0 p-0 text-inherit bg-transparent;
34	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	+
35	114	@font-face {
36	115	font-family: 'Code-Pro-Fira-Code';
37	116	src: url('../fonts/Code-Pro-Fira-Code.woff2') format('woff2');
38	117	}