← All changes | src/editor/editor.css +22 -79 1.27.4 → 1.13.0 View file →

		@@ -32,9 +32,8 @@
32	32	}
33	33	.code-block-pro-editor textarea,
34	34	.code-block-pro-editor pre {
35	35	@apply m-0 text-left focus:outline-none;
36		- min-height: 36px;
37	36	direction: ltr !important;
38	37	}
39	38	.code-block-pro-editor.cbp-has-line-numbers pre {
40	39	counter-reset: step;
		@@ -43,19 +42,15 @@
43	42	}
44	43	.code-block-pro-editor pre .line {
45	44	@apply relative inline-block w-full;
46	45	}
47		-.code-block-pro-editor pre {
48		- .line:empty {
49		- @apply block;
50		- }
51		- .line span:empty {
52		- @apply inline-block;
53		- }
	46	+.code-block-pro-editor:not(.padding-disabled) pre .line:empty {
	47	+ @apply block;
54	48	}
55		-.code-block-pro-editor.cbp-has-line-numbers
56		- pre
57		- .line:not(.cbp-line-number-disabled)::before {
	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 {
58	53	@apply inline-block text-right opacity-50 absolute;
59	54	margin-right: 12px;
60	55	content: counter(step);
61	56	color: var(--cbp-line-number-color, #999);
		@@ -70,8 +65,17 @@
70	65	}
71	66	.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre {
72	67	@apply py-0;
73	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	+}
74	78	.code-block-pro-editor .cbp-footer-link {
75	79	@apply pointer-events-none no-underline;
76	80	}
77	81
		@@ -77,12 +81,12 @@
77	81
78	82	/* Just to make it look similar to the front end */
79	83	.code-block-pro-editor pre .line.cbp-line-highlight::after {
80	84	content: '';
81		- background: var(--cbp-line-highlight-color, rgb(14 165 233/0.2));
	85	+ background: var(--cbp-line-highlight-color, rgb(14 165 233/.2));
82	86	@apply absolute top-0 h-full;
83	87	left: -100% !important;
84		- width: 1000% !important;
	88	+ width: 1000%!important;
85	89	min-height: var(--cbp-line-height) !important;
86	90	}
87	91
88	92	.code-block-pro-editor code {
		@@ -91,15 +95,12 @@
91	95	}
92	96
93	97	.cbp-input-error {
94	98	--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	+ --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);
99	101	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	+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)!important;
102	103	}
103	104
104	105	.code-block-pro-editor .code-block-pro-copy-button {
105	106	display: block !important;
		@@ -104,19 +105,13 @@
104	105	.code-block-pro-editor .code-block-pro-copy-button {
105	106	display: block !important;
106	107	@apply pointer-events-none;
107	108	}
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	109	.cbp-theme-preview {
115		- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
116		- monospace; /* no !important */
	110	+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* no !important */
117	111	direction: ltr;
118	112	}
	113	+
119	114	@font-face {
120	115	font-family: 'Code-Pro-Fira-Code';
121	116	src: url('../fonts/Code-Pro-Fira-Code.woff2') format('woff2');
122	117	}
		@@ -122,57 +117,5 @@
122	117	}
123	118	@font-face {
124	119	font-family: 'Code-Pro-JetBrains-Mono';
125	120	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	121	}