f1b90a0ce711ca47364ec90d4fb2773b7d0909e2
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / Css / form.css
1 @charset "UTF-8";
2 /*!
3 * This file is part of the TYPO3 CMS project.
4 *
5 * It is free software; you can redistribute it and/or modify it under
6 * the terms of the GNU General Public License, either version 2
7 * of the License, or any later version.
8 *
9 * For the full copyright and license information, please read the
10 * LICENSE.txt file that was distributed with this source code.
11 *
12 * The TYPO3 project - inspiring people to share!
13 */
14 .t3-form-x-component {
15 position: absolute;
16 top: 0;
17 height: 100%;
18 line-height: normal;
19 background: #f5f5f5;
20 }
21 .t3-form-x-component a {
22 text-decoration: none;
23 }
24 .t3-form-x-component ol,
25 .t3-form-x-component ul:not(.dropdown-menu) {
26 list-style: none;
27 padding: 0;
28 }
29 .t3-form-x-component .ui-sortable-placeholder {
30 outline-offset: -1px !important;
31 }
32 .t3-form-x-component-inner-wrapper {
33 padding: 1.5em;
34 }
35 #t3-form-navigation-component {
36 overflow: hidden;
37 left: 0;
38 }
39 #t3-form-structure-panel {
40 overflow: auto;
41 padding-top: 65px;
42 height: 100%;
43 }
44 #t3-form-structure-panel .icon {
45 z-index: 1;
46 }
47 #t3-form-structure-panel #t3-form-navigation-component-tree-root-container,
48 #t3-form-structure-panel .tree li > div {
49 border: 1px solid transparent;
50 cursor: pointer;
51 }
52 #t3-form-structure-panel .tree .svg-wrapper svg {
53 overflow: visible;
54 position: relative;
55 top: -0.8em;
56 left: 0.6em;
57 }
58 #t3-form-structure-panel .tree .svg-wrapper path {
59 fill: none;
60 shape-rendering: crispEdges;
61 stroke: #dddddd;
62 stroke-width: 1;
63 }
64 #t3-form-structure-panel .tree li {
65 white-space: nowrap;
66 }
67 #t3-form-structure-panel .tree li .icon-actions-pagetree-collapse {
68 margin-right: 0.3em;
69 }
70 #t3-form-structure-panel .tree li .icon-actions-pagetree-collapse img {
71 transform: rotate(90deg);
72 transition: transform 0.2s;
73 }
74 #t3-form-structure-panel .tree li.mjs-nestedSortable-collapsed > ol {
75 display: none;
76 }
77 #t3-form-structure-panel .tree li.mjs-nestedSortable-collapsed .icon-actions-pagetree-collapse img {
78 transform: rotate(0deg);
79 transition: transform 0.2s;
80 }
81 #t3-form-structure-panel .tree li small {
82 padding-left: 0.5em;
83 font-size: 80%;
84 }
85 #t3-form-structure-panel .tree .t3-form-icon {
86 margin-right: 0.5em;
87 margin-left: 0.5em;
88 }
89 #t3-form-structure-panel .tree .t3-form-element-has-children > div .t3-form-icon {
90 margin-left: 0.1em;
91 }
92 #t3-form-structure-panel .tree .sortable-hover {
93 outline: 1px solid #aaaaaa;
94 }
95 #t3-form-structure-panel .tree li > div:hover,
96 #t3-form-structure-panel .t3-form-form-element-selected,
97 #t3-form-structure-panel #t3-form-navigation-component-tree-root-container:hover,
98 #t3-form-structure-panel .t3-form-root-element-selected {
99 background-color: #f2f2f2;
100 border-color: #dcdcdc;
101 border-radius: 2px;
102 margin-left: -2em;
103 padding-left: 2em;
104 margin-right: -1.3em;
105 }
106 #t3-form-structure-panel .tree li > .t3-form-form-element-selected,
107 #t3-form-structure-panel .tree li > .t3-form-form-element-selected:hover,
108 #t3-form-structure-panel #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected,
109 #t3-form-structure-panel #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected:hover {
110 background-color: #fff;
111 border-color: #dcdcdc;
112 }
113 #t3-form-structure-panel .t3-form-x-component-inner-wrapper {
114 padding-top: 2.5em;
115 }
116 .form-group.t3-form-collection-element-remove-button,
117 .t3-form-inspector-finishers-editor-removeButton,
118 .form-group.t3-form-inspector-validators-editor-removeButton {
119 margin: 0 !important;
120 font-size: 0;
121 }
122 #t3-form-inspector-panels-container {
123 overflow: hidden;
124 right: 0;
125 padding-top: 65px;
126 }
127 #t3-form-inspector-panels {
128 overflow: auto;
129 height: 100%;
130 }
131 #t3-form-inspector {
132 padding: 1em 0.5em;
133 }
134 #t3-form-inspector h2,
135 #t3-form-inspector h3,
136 #t3-form-inspector h4 {
137 margin: 0;
138 padding: 0.1em 0.2em 0.2em 0.5em;
139 border-top: 1px solid #c3c3c3;
140 clear: both;
141 font: inherit;
142 font-weight: bold;
143 }
144 #t3-form-inspector h2 {
145 padding-bottom: 1em;
146 border: none;
147 border-bottom: 1px solid #c3c3c3;
148 }
149 #t3-form-inspector > h2:first-child {
150 border-top: none;
151 }
152 #t3-form-inspector h3 {
153 color: #000;
154 padding-top: 0.3em;
155 border: none;
156 }
157 #t3-form-inspector h4 {
158 padding: 0.8em 3em 0.8em 2.5em;
159 font-weight: 500;
160 background-color: #ddd;
161 }
162 #t3-form-inspector h4 span[data-template-property="label"] {
163 vertical-align: top;
164 }
165 #t3-form-inspector .icon-size-small {
166 line-height: 1.5;
167 }
168 #t3-form-inspector .input-group-btn {
169 position: static;
170 }
171 #t3-form-inspector .t3-form-remove-element-button {
172 position: absolute;
173 top: 90px;
174 right: 2.5em;
175 }
176 #t3-form-inspector .t3-form-control-group,
177 #t3-form-inspector .t3-form-add-collection-element {
178 margin: 1.5em 0.5em;
179 clear: both;
180 }
181 #t3-form-inspector .t3-form-inspector-editor-requiredValidator label {
182 cursor: pointer;
183 }
184 #t3-form-inspector .t3-form-dropdown-buttons.open {
185 position: static;
186 }
187 #t3-form-inspector .t3-form-dropdown-buttons.open .dropdown-menu {
188 width: 100%;
189 }
190 #t3-form-inspector .t3-form-dropdown-buttons.open .dropdown-menu a {
191 overflow: hidden;
192 text-overflow: ellipsis;
193 }
194 .t3-form-add-collection-element {
195 padding-bottom: 1em;
196 }
197 .t3-form-collection-container {
198 margin-top: -1em;
199 padding: 0.6em;
200 }
201 .t3-form-collection-container .ui-sortable-handle {
202 cursor: auto;
203 }
204 .t3-form-collection-container h4 {
205 cursor: move;
206 }
207 .t3-form-collection-container .icon-actions-view-table-expand {
208 position: absolute;
209 left: 0.5em;
210 }
211 .t3-form-collection-container a.collapsed .icon-actions-view-table-expand svg {
212 transform: rotate(0deg);
213 transition: transform 0.2s;
214 }
215 .t3-form-collection-container a:not(.collapsed) .icon-actions-view-table-expand svg {
216 transform: rotate(90deg);
217 transition: transform 0.2s;
218 }
219 .t3-form-collection-element {
220 position: relative;
221 margin-bottom: 0.5em;
222 border: 1px solid #c3c3c3;
223 border-top: none;
224 background: #f5f5f5;
225 }
226 .t3-form-collection-element .t3-form-collection-element-remove-button {
227 position: absolute;
228 right: 0.5em;
229 top: 0.6em;
230 }
231 .property-grid .form-control {
232 min-width: initial;
233 min-width: auto;
234 font-size: 0.9em;
235 }
236 .property-grid .table th {
237 font-size: 0.9em;
238 }
239 .property-grid .table > tbody > tr {
240 cursor: pointer;
241 background-color: #fafafa;
242 }
243 .property-grid .table > tbody > tr:last-child {
244 cursor: auto;
245 }
246 .property-grid .table > tbody > tr > td {
247 padding: 0.6em 0.3em;
248 text-align: center;
249 }
250 .property-grid .table > tbody > tr > td:first-child {
251 width: 35px;
252 }
253 .property-grid .table > tbody > tr > td:nth-child(2),
254 .property-grid .table > tbody > tr > td:nth-child(3) {
255 width: 75px;
256 }
257 .property-grid .table > tbody > tr > td:nth-child(4) {
258 width: 65px;
259 }
260 .property-grid .table > tbody > tr > td:nth-child(5) {
261 width: 35px;
262 }
263 .property-grid .table .btn {
264 background-color: #eee;
265 border-color: #bbb;
266 }
267 .property-grid .sort-row-field {
268 cursor: move;
269 }
270 .property-grid .ui-sortable-helper td {
271 border: none;
272 }
273 .property-grid .ui-sortable-placeholder {
274 height: 45px;
275 border-left: 1px solid #c3c3c3 !important;
276 border-right: 1px solid #c3c3c3 !important;
277 outline-offset: -5px !important;
278 }
279 #t3-form-stage-inner-container {
280 display: inline-block;
281 width: 90%;
282 text-align: left;
283 }
284 @media (min-width: 1300px) {
285 #t3-form-stage-inner-container {
286 width: 600px;
287 }
288 }
289 #t3-form-stage-container {
290 overflow: auto;
291 position: relative;
292 height: 100%;
293 text-align: left;
294 }
295 @media (min-width: 1300px) {
296 #t3-form-stage-container {
297 text-align: center;
298 }
299 }
300 #t3-form-stage-container ol,
301 #t3-form-stage-container ul {
302 list-style: none;
303 }
304 #t3-form-stage-container .form-section {
305 border: none;
306 }
307 #t3-form-stage-container .panel-heading button {
308 outline: none;
309 }
310 #t3-form-stage-container .panel-heading .paginiation-label {
311 margin-right: 1em;
312 }
313 #t3-form-stage-container .t3-form-new-element-container {
314 height: 62px;
315 border: 1px dashed #ddd;
316 text-align: center;
317 padding-top: 31px;
318 }
319 #t3-form-stage-container .t3-form-new-element-container .btn {
320 transform: translateY(-50%);
321 }
322 #t3-form-stage-container.t3-form-stage-viewmode-abstract ol,
323 #t3-form-stage-container.t3-form-stage-viewmode-abstract ul {
324 padding-left: 40px;
325 padding-right: 1em;
326 }
327 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-page-title {
328 margin: 0 0 0.5em;
329 }
330 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage-inner-container {
331 overflow: hidden;
332 }
333 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit:not(.t3-form-element-toplevel) {
334 margin-bottom: 1em;
335 padding-bottom: 1px;
336 outline: 1px solid #dddddd;
337 outline-offset: -1px;
338 }
339 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit .sortable-hover {
340 outline-color: #777777;
341 }
342 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit .t3-form-form-composit-element-selected {
343 outline-color: #0078e6;
344 }
345 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover > .ui-sortable-handle,
346 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover {
347 border-color: #777777;
348 }
349 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover > .ui-sortable-handle .t3-form-icon-container,
350 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-icon-container {
351 background-color: #777777;
352 }
353 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover > .ui-sortable-handle .t3-form-icon-container path,
354 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-icon-container path {
355 fill: #fff;
356 }
357 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable fieldset {
358 position: relative;
359 min-height: 130px;
360 padding-top: 5em;
361 }
362 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable fieldset legend {
363 position: absolute;
364 top: 1em;
365 display: inline-block;
366 width: 95%;
367 }
368 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle {
369 overflow: hidden;
370 position: relative;
371 height: 62px;
372 margin-bottom: 1em;
373 border: 1px solid #ddd;
374 background-color: #fff;
375 }
376 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-validator-list {
377 right: 0;
378 transition: right 0.2s;
379 }
380 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-element-info .element-content span,
381 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-element-info .element-content div {
382 color: #5a5a5a;
383 }
384 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-validator-info .t3-form-icon {
385 margin-right: 75px;
386 transition: margin 0.2s;
387 }
388 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:has (.ui-sortable-handle:hover) {
389 border-color: transparent;
390 }
391 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle span {
392 color: #5a5a5a;
393 }
394 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-state-disabled {
395 cursor: auto;
396 }
397 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-state-disabled:hover {
398 background: none;
399 }
400 #t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-placeholder {
401 margin-bottom: 1em;
402 }
403 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-icon-container {
404 float: left;
405 width: 40px;
406 height: 100%;
407 padding: 1em;
408 cursor: move;
409 background-color: #ddd;
410 }
411 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-icon-container .t3-form-icon {
412 height: 100%;
413 }
414 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-form-element-body {
415 height: 100%;
416 }
417 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info {
418 position: relative;
419 float: left;
420 width: 55%;
421 height: 100%;
422 padding-left: 1em;
423 }
424 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:before,
425 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:after {
426 z-index: 1;
427 display: block;
428 content: '';
429 position: absolute;
430 bottom: 0;
431 right: 0;
432 left: 0;
433 }
434 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:before {
435 height: 0.8em;
436 background: #fff;
437 }
438 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:after {
439 bottom: 0.8em;
440 height: 1em;
441 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
442 }
443 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-label-container {
444 float: left;
445 position: relative;
446 width: 45%;
447 height: 100%;
448 }
449 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-label-container .element-label {
450 overflow: hidden;
451 position: absolute;
452 top: 50%;
453 width: 100%;
454 text-overflow: ellipsis;
455 transform: translateY(-50%);
456 }
457 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content {
458 padding-top: 1em;
459 white-space: nowrap;
460 font-size: 0.8em;
461 }
462 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content span,
463 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content div {
464 color: #ddd;
465 }
466 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info {
467 position: relative;
468 overflow: hidden;
469 float: right;
470 height: 100%;
471 }
472 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-icon {
473 height: 100%;
474 z-index: 1;
475 margin-left: 1em;
476 transition: margin 0.3s;
477 filter: grayscale(100%);
478 }
479 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list {
480 position: absolute;
481 top: 0;
482 right: -100px;
483 width: 100px;
484 height: 100%;
485 padding: 1em 1em 1em 35px;
486 font-size: 0.8em;
487 transition: right 0.3s;
488 background-color: #ddd;
489 }
490 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before,
491 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after {
492 z-index: 1;
493 display: block;
494 content: '';
495 position: absolute;
496 bottom: 0;
497 right: 0;
498 left: 0;
499 }
500 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before {
501 height: 1em;
502 background: #ddd;
503 }
504 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after {
505 bottom: 1em;
506 height: 1em;
507 background: linear-gradient(to bottom, rgba(221, 221, 221, 0) 0%, #ddd 100%);
508 }
509 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .validator-label {
510 overflow: hidden;
511 text-overflow: ellipsis;
512 white-space: nowrap;
513 color: #5a5a5a;
514 }
515 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected {
516 position: relative;
517 padding-top: 35px;
518 height: 97px;
519 border: none;
520 }
521 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-form-element-body {
522 border: 1px solid #0078e6;
523 }
524 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-icon-container {
525 background-color: #0078e6;
526 }
527 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content span,
528 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content div {
529 color: #5a5a5a;
530 }
531 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list {
532 right: 0;
533 transition: right 0.2s;
534 background-color: #ebf3fb;
535 }
536 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:before {
537 background-color: #ebf3fb;
538 }
539 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:after {
540 background: linear-gradient(to bottom, rgba(235, 243, 251, 0) 0%, #ebf3fb 100%);
541 }
542 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-info .t3-form-icon {
543 margin-right: 75px;
544 filter: none;
545 }
546 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container {
547 position: absolute;
548 top: 0;
549 right: 0;
550 width: 100%;
551 height: 35px;
552 border: 1px solid #0078e6;
553 background-color: #0078e6;
554 padding-right: 0.7em;
555 padding-top: 0.4em;
556 }
557 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before,
558 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after {
559 position: absolute;
560 top: 0;
561 display: block;
562 width: 1px;
563 height: 100%;
564 content: ' ';
565 background-color: #0078e6;
566 }
567 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before {
568 left: -1px;
569 }
570 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after {
571 right: -1px;
572 }
573 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .dropdown-menu {
574 min-width: initial;
575 padding-left: 0;
576 padding-right: 0;
577 background-color: #005db3;
578 }
579 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .dropdown-menu > li a:hover {
580 background-color: #006bcd;
581 }
582 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .caret {
583 color: #0078e6;
584 }
585 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .t3-form-dropdown-buttons .icon {
586 margin-right: 0.5em;
587 }
588 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar {
589 float: right;
590 }
591 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn {
592 background-color: #fff;
593 border-color: #fff;
594 }
595 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn:hover,
596 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn.active {
597 background-color: #ebf3fb;
598 }
599 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .icon svg path {
600 fill: #0078e6;
601 }
602 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label {
603 display: inline-block;
604 top: 1em;
605 left: 5em;
606 bottom: auto;
607 font-size: 0.9em;
608 color: #fff;
609 }
610 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label span {
611 color: #fff;
612 }
613 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected {
614 border-color: #0078e6;
615 }
616 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading {
617 background-color: #0078e6;
618 border-color: #0078e6;
619 color: #fff;
620 }
621 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .btn {
622 background-color: #fff;
623 border-color: #fff;
624 }
625 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .btn:hover,
626 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .btn.active {
627 background-color: #ebf3fb;
628 }
629 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .icon svg path {
630 fill: #0078e6;
631 }
632 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="text"],
633 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="date"],
634 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="password"],
635 #t3-form-stage-container.t3-form-stage-viewmode-preview textarea,
636 #t3-form-stage-container.t3-form-stage-viewmode-preview select {
637 color: #000;
638 background-color: #e5e5e5;
639 }
640 #t3-form-stage-container.t3-form-stage-viewmode-preview ::-webkit-input-placeholder {
641 color: #737373;
642 font-style: italic;
643 }
644 #t3-form-stage-container.t3-form-stage-viewmode-preview ::-moz-placeholder {
645 color: #737373;
646 font-style: italic;
647 }
648 #t3-form-stage-container.t3-form-stage-viewmode-preview :-ms-input-placeholder {
649 color: #737373;
650 font-style: italic;
651 }
652 #t3-form-stage-container.t3-form-stage-viewmode-preview ::placeholder {
653 color: #737373;
654 font-style: italic;
655 }
656 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="date"] {
657 display: block;
658 width: 100%;
659 height: 32px;
660 padding: 0.6em;
661 font-size: 12px;
662 line-height: 1.5;
663 background-image: none;
664 border: 1px solid #c3c3c3;
665 border-radius: 2px;
666 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
667 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
668 }
669 #t3-form-stage-container.t3-form-stage-viewmode-preview select[multiple="multiple"] {
670 height: auto;
671 min-height: 32px;
672 }
673 #t3-form-stage-container.t3-form-stage-viewmode-preview textarea {
674 min-height: 100px;
675 }
676 #t3-form-stage-container.t3-form-stage-viewmode-preview legend.t3-form-form-element-selected {
677 border-color: #c3c3c3;
678 }
679 #t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group span,
680 #t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group button {
681 display: inline-block;
682 margin-right: 1em;
683 }
684 #t3-form-stage-container.t3-form-stage-viewmode-preview .preview-table-first-col {
685 width: 30%;
686 }
687 #t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-preview {
688 position: relative;
689 display: inline-block;
690 width: 100%;
691 }
692 #t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-new-element-container {
693 display: none;
694 }
695 #t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-toplevel > form > .tooltip {
696 top: 100px !important;
697 }
698 #t3-form-stage-container #t3-form-stage {
699 margin-bottom: 0;
700 padding-top: 0.5em;
701 }
702 #t3-form-stage-container #t3-form-stage > ol,
703 #t3-form-stage-container #t3-form-stage > ol > li > ol {
704 padding-left: 0;
705 padding-right: 0;
706 }
707 #t3-form-stage-container #t3-form-stage .t3-form-element-toplevel > .t3-form-form-element-selected {
708 height: auto;
709 padding-top: 0;
710 }
711 #t3-form-stage-container #t3-form-stage .t3-form-element-toplevel > .t3-form-form-element-selected .btn-toolbar-container {
712 display: none;
713 }
714 .meta-label {
715 z-index: 2;
716 position: absolute;
717 bottom: 1em;
718 left: 5.5em;
719 display: none;
720 color: #0078e6;
721 line-height: 1.6;
722 font-size: 0.8em;
723 }
724 .ui-sortable-handle:hover > .meta-label {
725 display: inline-block;
726 }
727 .ui-sortable-placeholder,
728 .t3-form-element-composit.ui-sortable-placeholder {
729 background-color: #fff !important;
730 border: none !important;
731 outline: 1px dashed #c4dbab !important;
732 outline-offset: -2px !important;
733 visibility: visible !important;
734 }
735 .t3-form-icon {
736 margin-right: 1em;
737 }
738 .t3-form-validation-child-has-error {
739 color: #c83c3c;
740 }
741 #t3-form-navigation-component .t3-form-validation-errors,
742 #t3-form-stage-container .t3-form-validation-errors {
743 position: relative;
744 color: #c83c3c;
745 }
746 #t3-form-navigation-component .t3-form-validation-errors:before,
747 #t3-form-stage-container .t3-form-validation-errors:before {
748 z-index: 1;
749 position: absolute;
750 display: inline-block;
751 width: 15px;
752 height: 15px;
753 font-family: FontAwesome;
754 vertical-align: middle;
755 border-radius: 50%;
756 font-size: 1em;
757 line-height: 1.4;
758 text-align: center;
759 background: none;
760 }
761 #t3-form-navigation-component .t3-form-validation-errors:hover:before,
762 #t3-form-navigation-component .t3-form-validation-errors.t3-form-form-element-selected:before {
763 left: 2.4em;
764 }
765 #t3-form-navigation-component .t3-form-validation-errors:before {
766 margin-top: 0.2em;
767 color: #fff;
768 font-size: 10px;
769 font-weight: 800;
770 content: "\f12a";
771 background-color: #c83c3c;
772 }
773 .t3-form-validation-errors#t3-form-navigation-component-tree-root:before {
774 left: -2em !important;
775 margin-top: 0.1em;
776 }
777 #t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle {
778 border-color: #c83c3c;
779 }
780 #t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle:before {
781 left: 4.5em;
782 margin-top: 1.9em;
783 content: "\f071";
784 }
785 #t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle .element-label {
786 padding-left: 1.5em;
787 }
788 #t3-form-inspector-panels .t3-form-collection-element .t3-form-validation-errors {
789 display: inline-block;
790 color: #fff;
791 font-size: 0.8em;
792 font-weight: 700;
793 background-color: #c83c3c;
794 margin-top: 0.5em;
795 padding: 0.1em 0.5em;
796 border-radius: 2px;
797 }
798 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element {
799 border-color: #c83c3c;
800 }
801 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4 {
802 border-color: #c83c3c;
803 background-color: #c83c3c;
804 color: #fff;
805 }
806 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4 path {
807 fill: #fff;
808 }
809 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button {
810 background: #fff;
811 border-color: transparent;
812 }
813 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button path {
814 fill: #c83c3c;
815 }
816 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button:hover {
817 background: #eab3b3;
818 }
819 .form-editor-loading-spinner {
820 width: 150px;
821 margin: 5em auto 0;
822 text-align: center;
823 }
824 .ui-sortable-handle {
825 cursor: pointer;
826 }
827 .module[data-module-name="web_FormFormbuilder_FormEditor"] {
828 overflow: hidden;
829 }
830 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-body,
831 .module[data-module-name="web_FormFormbuilder_FormEditor"] div[data-identifier="moduleWrapper"] {
832 height: 100%;
833 }
834 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-body {
835 padding-bottom: 0.5em;
836 }
837 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left button,
838 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left button:focus,
839 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left button:active {
840 outline: 0;
841 outline-color: initial;
842 outline-style: initial;
843 outline-width: 0px;
844 }
845 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left .btn-group,
846 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left .t3-form-element-form-settings-button {
847 margin-left: 25px;
848 }
849 .t3-form-element-new-page-button {
850 position: absolute;
851 left: 0.5em;
852 }