← All changes | admin/css/metasync-html-editor.css +121 -81 2.6.3 → trunk View file →

		@@ -207,34 +207,113 @@
207	207	cursor: not-allowed;
208	208	}
209	209
210	210	/* Editor Container */
	211	+.metasync-editor-workspace {
	212	+ display: flex;
	213	+ align-items: stretch;
	214	+ height: calc(100vh - 112px);
	215	+}
	216	+
211	217	.metasync-editor-container {
212	218	background: #1e1e1e;
213		- height: calc(100vh - 112px);
	219	+ flex: 1 1 auto;
	220	+ min-width: 0;
214	221	position: relative;
215	222	}
216	223
217		-/* Force GrapesJS to show panels layout */
218		-#metasync-gjs-editor .gjs-cv-canvas {
219		- width: calc(100% - 320px) !important;
220		- float: left;
	224	+/* Sidebar holding the editor's own manager panels. */
	225	+.metasync-editor-sidebar {
	226	+ flex: 0 0 320px;
	227	+ width: 320px;
	228	+ display: flex;
	229	+ flex-direction: column;
	230	+ background: #23282d;
	231	+ border-left: 1px solid #1a1e23;
	232	+ overflow-y: auto;
221	233	}
222	234
223		-#metasync-gjs-editor .gjs-pn-views-container,
224		-#metasync-gjs-editor .gjs-pn-views {
225		- position: absolute !important;
226		- top: 0 !important;
227		- right: 0 !important;
228		- width: 320px !important;
229		- height: 100% !important;
230		- background: #23282d !important;
231		- border-left: 1px solid #1a1e23 !important;
232		- overflow-y: auto !important;
233		- display: block !important;
234		- z-index: 10 !important;
	235	+.metasync-editor-panel {
	236	+ flex: 1 1 auto;
	237	+ min-height: 0;
235	238	}
236	239
	240	+.metasync-editor-panel[hidden] {
	241	+ display: none;
	242	+}
	243	+
	244	+/* Selected-element indicator */
	245	+.metasync-selected-element {
	246	+ padding: 16px;
	247	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	248	+ color: #ffffff;
	249	+ font-size: 13px;
	250	+ font-weight: 600;
	251	+ border-bottom: 1px solid #1a1e23;
	252	+}
	253	+
	254	+.metasync-selected-element[hidden] {
	255	+ display: none;
	256	+}
	257	+
	258	+.metasync-selected-element-label {
	259	+ font-size: 11px;
	260	+ opacity: 0.8;
	261	+ margin-bottom: 4px;
	262	+ text-transform: uppercase;
	263	+ letter-spacing: 0.5px;
	264	+}
	265	+
	266	+/* Panel switcher */
	267	+.metasync-editor-panel-switcher {
	268	+ display: flex;
	269	+ flex-direction: row;
	270	+ background: #2c3338;
	271	+ border-bottom: 1px solid #1a1e23;
	272	+}
	273	+
	274	+.metasync-panel-switch {
	275	+ flex: 1;
	276	+ display: flex;
	277	+ flex-direction: column;
	278	+ align-items: center;
	279	+ justify-content: center;
	280	+ gap: 4px;
	281	+ padding: 12px 8px;
	282	+ color: #a7aaad;
	283	+ background: transparent;
	284	+ border: none;
	285	+ border-right: 1px solid #1a1e23;
	286	+ cursor: pointer;
	287	+ font-size: 11px;
	288	+}
	289	+
	290	+.metasync-panel-switch:last-child {
	291	+ border-right: none;
	292	+}
	293	+
	294	+.metasync-panel-switch:hover {
	295	+ color: #ffffff;
	296	+ background: rgba(255, 255, 255, 0.06);
	297	+}
	298	+
	299	+.metasync-panel-switch.is-active {
	300	+ color: #ffffff;
	301	+ background: rgba(255, 255, 255, 0.12);
	302	+ box-shadow: inset 0 -2px 0 #2271b1;
	303	+}
	304	+
	305	+.metasync-panel-switch .dashicons {
	306	+ font-size: 18px;
	307	+ width: 18px;
	308	+ height: 18px;
	309	+}
	310	+
	311	+/* The canvas fills the space left of the sidebar. */
	312	+#metasync-gjs-editor .gjs-cv-canvas {
	313	+ width: 100%;
	314	+}
	315	+
237	316	/* GrapesJS Customization */
238	317	.gjs-pn-panel {
239	318	background: #23282d;
240	319	border-right: 1px solid #1a1e23;
		@@ -378,71 +457,12 @@
378	457	animation: spin 0.8s linear infinite;
379	458	}
380	459
381	460	/* Enhanced Sidebar Panels */
382		-.gjs-pn-views {
383		- background: #23282d;
384		- border-left: 1px solid #1a1e23;
385		- width: 300px !important;
386		-}
387	461
388		-/* Panel Switcher Buttons */
389		-#panel-switcher,
390		-.gjs-pn-panel#panel-switcher {
391		- display: flex !important;
392		- flex-direction: row !important;
393		- background: #2c3338 !important;
394		- border-bottom: 1px solid #1a1e23 !important;
395		- padding: 0 !important;
396		- width: 100% !important;
397		- order: -1 !important;
398		-}
399		-
400		-#panel-switcher .gjs-pn-btn {
401		- flex: 1;
402		- display: flex;
403		- flex-direction: column;
404		- align-items: center;
405		- justify-content: center;
406		- gap: 4px;
407		- padding: 12px 8px;
408		- color: #a7aaad;
409		- background: transparent;
410		- border: none;
411		- border-right: 1px solid #1a1e23;
412		- cursor: pointer;
413		- transition: all 0.2s;
414		-}
415		-
416		-#panel-switcher .gjs-pn-btn:last-child {
417		- border-right: none;
418		-}
419		-
420		-#panel-switcher .gjs-pn-btn i {
421		- font-size: 18px;
422		-}
423		-
424		-#panel-switcher .gjs-pn-btn .gjs-pn-label {
425		- font-size: 11px;
426		- font-weight: 600;
427		- text-transform: uppercase;
428		- letter-spacing: 0.5px;
429		-}
430		-
431		-#panel-switcher .gjs-pn-btn:hover {
432		- color: #ffffff;
433		- background: rgba(255, 255, 255, 0.05);
434		-}
435		-
436		-#panel-switcher .gjs-pn-btn.gjs-pn-active {
437		- color: #ffffff;
438		- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
439		- box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.2);
440		-}
441		-
442	462	/* Style Manager Enhancements */
443	463	.gjs-sm-sectors,
444		-.gjs-pn-views .gjs-sm-sectors {
	464	+.metasync-editor-sidebar .gjs-sm-sectors {
445	465	background: #23282d;
446	466	padding: 0;
447	467	display: block !important;
448	468	visibility: visible !important;
		@@ -573,9 +593,9 @@
573	593	}
574	594
575	595	/* Trait Manager (Settings Panel) */
576	596	.gjs-trt-traits,
577		-.gjs-pn-views .gjs-trt-traits {
	597	+.metasync-editor-sidebar .gjs-trt-traits {
578	598	background: #23282d;
579	599	padding: 16px;
580	600	display: block !important;
581	601	visibility: visible !important;
		@@ -625,10 +645,10 @@
625	645
626	646	/* Layer Manager */
627	647	.gjs-layer-manager,
628	648	.gjs-layers,
629		-.gjs-pn-views .gjs-layer-manager,
630		-.gjs-pn-views .gjs-layers {
	649	+.metasync-editor-sidebar .gjs-layer-manager,
	650	+.metasync-editor-sidebar .gjs-layers {
631	651	background: #23282d;
632	652	padding: 8px;
633	653	display: block !important;
634	654	visibility: visible !important;
		@@ -660,9 +680,9 @@
660	680	}
661	681
662	682	/* Block Manager */
663	683	.gjs-blocks-c,
664		-.gjs-pn-views .gjs-blocks-c {
	684	+.metasync-editor-sidebar .gjs-blocks-c {
665	685	background: #23282d !important;
666	686	padding: 16px !important;
667	687	display: grid !important;
668	688	grid-template-columns: repeat(2, 1fr) !important;
		@@ -762,5 +782,25 @@
762	782	border-radius: 4px;
763	783	padding: 6px 10px;
764	784	font-size: 11px;
765	785	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	786	+}
	787	+
	788	+/* Transient action notice (upload/save failures, expired session).
	789	+ Pinned below the editor header; the script toggles the hidden attr. */
	790	+.metasync-editor-notice {
	791	+ position: fixed;
	792	+ top: 80px;
	793	+ left: 50%;
	794	+ transform: translateX(-50%);
	795	+ z-index: 100001;
	796	+ max-width: 520px;
	797	+ padding: 10px 18px;
	798	+ background: #2c3338;
	799	+ border: 1px solid #d63638;
	800	+ border-left-width: 4px;
	801	+ border-radius: 4px;
	802	+ color: #ffffff;
	803	+ font-size: 13px;
	804	+ line-height: 1.5;
	805	+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
766	806	}