1+ /* AAE Loop Builder - Editor Styles */
2+ .template-preview-container {
3+ margin-top : 10px ;
4+ padding : 15px ;
5+ background : # f7f7f7 ;
6+ border : 1px solid # ddd ;
7+ border-radius : 3px ;
8+ }
9+
10+ .template-preview h4 {
11+ margin : 0 0 10px 0 ;
12+ color : # 333 ;
13+ font-size : 14px ;
14+ }
15+
16+ .widget-preview {
17+ padding : 8px ;
18+ margin : 5px 0 ;
19+ background : # fff ;
20+ border : 1px solid # e0e0e0 ;
21+ border-radius : 2px ;
22+ font-size : 12px ;
23+ color : # 666 ;
24+ }
25+
26+ .loading {
27+ text-align : center;
28+ color : # 666 ;
29+ font-style : italic;
30+ }
31+
32+ .error {
33+ color : # d63638 ;
34+ text-align : center;
35+ font-style : italic;
36+ }
37+
38+ .empty-template {
39+ text-align : center;
40+ color : # 999 ;
41+ font-style : italic;
42+ padding : 10px ;
43+ }
44+
45+ /* Active Document Mode - Compact Bar Inside Editor Container */
46+ .aae-template-mode-bar {
47+ position : relative;
48+ width : 100% ;
49+ height : 32px ;
50+ background : linear-gradient (135deg , # 2271b1 0% , # 0c5d8f 100% );
51+ color : # ffffff ;
52+ display : flex;
53+ align-items : center;
54+ justify-content : center;
55+ padding : 0 12px ;
56+ z-index : 1 ;
57+ font-size : 11px ;
58+ line-height : 1 ;
59+ flex-shrink : 0 ;
60+ }
61+
62+ .aae-template-mode-content {
63+ display : flex;
64+ align-items : center;
65+ justify-content : center;
66+ gap : 10px ;
67+ font-weight : 500 ;
68+ }
69+
70+ .aae-template-mode-content i {
71+ font-size : 13px ;
72+ }
73+
74+ .aae-template-mode-text {
75+ margin-right : 4px ;
76+ }
77+
78+ .aae-template-mode-bar button {
79+ display : inline-flex;
80+ align-items : center;
81+ gap : 4px ;
82+ padding : 4px 10px ;
83+ border : none;
84+ border-radius : 2px ;
85+ font-size : 10px ;
86+ font-weight : 500 ;
87+ cursor : pointer;
88+ transition : all 0.2s ease;
89+ height : 22px ;
90+ line-height : 1 ;
91+ }
92+
93+ .aae-template-back-btn {
94+ background : # d63638 ;
95+ color : # ffffff ;
96+ border : 1px solid rgba (0 , 0 , 0 , 0.1 );
97+ }
98+
99+ .aae-template-back-btn : hover {
100+ background : # b32d2e ;
101+ }
102+
103+ .aae-template-mode-bar button i {
104+ font-size : 11px ;
105+ }
106+
107+ /* Make sure preview container accommodates the bar */
108+ .aae-template-editing-mode # elementor-preview {
109+ display : flex;
110+ flex-direction : column;
111+ }
112+
113+ .aae-template-editing-mode # elementor-preview-responsive-wrapper {
114+ flex : 1 ;
115+ }
116+
117+ /* Template editing indicators in preview */
118+ .elementor-editor-active .e-loop-item {
119+ border : 2px dashed # 007cba ;
120+ position : relative;
121+ }
122+
123+ .elementor-editor-active .e-loop-item ::before {
124+ content : "Template Item" ;
125+ position : absolute;
126+ top : -20px ;
127+ left : 0 ;
128+ /* background: #007cba; */
129+ color : white;
130+ padding : 2px 8px ;
131+ font-size : 10px ;
132+ border-radius : 3px 3px 0 0 ;
133+ z-index : 100 ;
134+ }
135+
136+ /* Template action buttons */
137+ .aae-template-actions {
138+ display : flex;
139+ gap : 8px ;
140+ margin-top : 10px ;
141+ }
142+
143+ .aae-template-actions button {
144+ flex : 1 ;
145+ display : inline-flex;
146+ align-items : center;
147+ justify-content : center;
148+ gap : 5px ;
149+ padding : 8px 12px ;
150+ font-size : 12px ;
151+ border-radius : 3px ;
152+ transition : all 0.3s ease;
153+ }
154+
155+ .aae-create-template {
156+ background : # 2271b1 !important ;
157+ color : white !important ;
158+ }
159+
160+ .aae-create-template : hover {
161+ background : # 135e96 !important ;
162+ }
163+
164+ .aae-edit-template {
165+ background : # 007cba !important ;
166+ color : white !important ;
167+ }
168+
169+ .aae-edit-template : hover {
170+ background : # 005a87 !important ;
171+ }
172+
173+ /* Template Query Control Actions */
174+ .elementor-control-template-query-actions {
175+ display : flex;
176+ gap : 8px ;
177+ margin-top : 10px ;
178+ flex-wrap : wrap;
179+ }
180+
181+ .elementor-control-template-query-actions button {
182+ flex : 1 ;
183+ min-width : 120px ;
184+ display : inline-flex;
185+ align-items : center;
186+ justify-content : center;
187+ gap : 6px ;
188+ padding : 10px 14px ;
189+ font-size : 12px ;
190+ font-weight : 500 ;
191+ border-radius : 3px ;
192+ transition : background 0.4s ease;
193+ border : none;
194+ cursor : pointer;
195+ background : linear-gradient (225deg , # F12529 10.04% , # FFA030 90.11% );
196+ color : # fff ;
197+ }
198+
199+ .elementor-control-template-query-actions button : hover {
200+ background : linear-gradient (225deg , # FFA030 10.04% , # F12529 90.11% );
201+ }
202+
203+ .elementor-control-template-query-actions button : active {
204+ transform : translateY (0 );
205+ }
206+
207+ .elementor-control-template-query-actions button [data-action = edit ] {
208+ background : linear-gradient (225deg , # F12529 10.04% , # FFA030 90.11% );
209+ color : # fff ;
210+ }
211+
212+ .elementor-control-template-query-actions button [data-action = edit ]: hover {
213+ background : linear-gradient (225deg , # FFA030 10.04% , # F12529 90.11% );
214+ }
215+
216+ .elementor-control-template-query-actions button i {
217+ font-size : 13px ;
218+ }
219+
220+ .elementor-control-template-query-actions button : disabled {
221+ opacity : 0.6 ;
222+ cursor : not-allowed;
223+ pointer-events : none;
224+ }
225+
226+ /* Placeholder/Empty State Styling */
227+ .elementor-control-template_query .select2-container--default .select2-selection--single {
228+ min-height : 38px ;
229+ border : 1px solid # d5d5d5 ;
230+ border-radius : 3px ;
231+ }
232+
233+ .elementor-control-template_query .select2-container--default .select2-selection--single .select2-selection__rendered {
234+ line-height : 36px ;
235+ color : # 666 ;
236+ }
237+
238+ .elementor-control-template_query .select2-container--default .select2-selection--single .select2-selection__placeholder {
239+ color : # 999 ;
240+ font-style : italic;
241+ }
242+
243+ /* Empty state message when no template selected */
244+ .elementor-control-template_query-empty-state {
245+ margin-top : 10px ;
246+ padding : 20px 15px ;
247+ background : linear-gradient (135deg , # f8f9fa 0% , # e9ecef 100% );
248+ border : 2px dashed # d0d5dd ;
249+ border-radius : 6px ;
250+ text-align : center;
251+ }
252+
253+ .elementor-control-template_query-empty-state i {
254+ font-size : 32px ;
255+ color : # 93c5fd ;
256+ margin-bottom : 10px ;
257+ display : block;
258+ }
259+
260+ .elementor-control-template_query-empty-state h4 {
261+ margin : 0 0 8px 0 ;
262+ font-size : 14px ;
263+ font-weight : 600 ;
264+ color : # 333 ;
265+ }
266+
267+ .elementor-control-template_query-empty-state p {
268+ margin : 0 ;
269+ font-size : 12px ;
270+ color : # 666 ;
271+ line-height : 1.5 ;
272+ }
273+
274+ .elementor-editor-preview .custom-loop-container .elementor-add-section {
275+ display : block !important ;
276+ }
277+
278+ .custom-loop-container # elementor-add-new-section {
279+ display : block !important ;
280+ }
0 commit comments