1bc60dfff4e1841043100c1319030e5cfae2b0fa
[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 -webkit-filter: grayscale(100%);
478 filter: grayscale(100%);
479 }
480 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list {
481 position: absolute;
482 top: 0;
483 right: -100px;
484 width: 100px;
485 height: 100%;
486 padding: 1em 1em 1em 35px;
487 font-size: 0.8em;
488 transition: right 0.3s;
489 background-color: #ddd;
490 }
491 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before,
492 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after {
493 z-index: 1;
494 display: block;
495 content: '';
496 position: absolute;
497 bottom: 0;
498 right: 0;
499 left: 0;
500 }
501 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before {
502 height: 1em;
503 background: #ddd;
504 }
505 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after {
506 bottom: 1em;
507 height: 1em;
508 background: linear-gradient(to bottom, rgba(221, 221, 221, 0) 0%, #ddd 100%);
509 }
510 #t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .validator-label {
511 overflow: hidden;
512 text-overflow: ellipsis;
513 white-space: nowrap;
514 color: #5a5a5a;
515 }
516 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected {
517 position: relative;
518 padding-top: 35px;
519 height: 97px;
520 border: none;
521 }
522 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-form-element-body {
523 border: 1px solid #0078e6;
524 }
525 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-icon-container {
526 background-color: #0078e6;
527 }
528 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content span,
529 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content div {
530 color: #5a5a5a;
531 }
532 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list {
533 right: 0;
534 transition: right 0.2s;
535 background-color: #ebf3fb;
536 }
537 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:before {
538 background-color: #ebf3fb;
539 }
540 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:after {
541 background: linear-gradient(to bottom, rgba(235, 243, 251, 0) 0%, #ebf3fb 100%);
542 }
543 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-info .t3-form-icon {
544 margin-right: 75px;
545 -webkit-filter: none;
546 filter: none;
547 }
548 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container {
549 position: absolute;
550 top: 0;
551 right: 0;
552 width: 100%;
553 height: 35px;
554 border: 1px solid #0078e6;
555 background-color: #0078e6;
556 padding-right: 0.7em;
557 padding-top: 0.4em;
558 }
559 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before,
560 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after {
561 position: absolute;
562 top: 0;
563 display: block;
564 width: 1px;
565 height: 100%;
566 content: ' ';
567 background-color: #0078e6;
568 }
569 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before {
570 left: -1px;
571 }
572 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after {
573 right: -1px;
574 }
575 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .dropdown-menu {
576 min-width: initial;
577 padding-left: 0;
578 padding-right: 0;
579 background-color: #005db3;
580 }
581 #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 {
582 background-color: #006bcd;
583 }
584 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .caret {
585 color: #0078e6;
586 }
587 #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 {
588 margin-right: 0.5em;
589 }
590 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar {
591 float: right;
592 }
593 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn {
594 background-color: #fff;
595 border-color: #fff;
596 }
597 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn:hover,
598 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn.active {
599 background-color: #ebf3fb;
600 }
601 #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 {
602 fill: #0078e6;
603 }
604 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label {
605 display: inline-block;
606 top: 1em;
607 left: 5em;
608 bottom: auto;
609 font-size: 0.9em;
610 color: #fff;
611 }
612 #t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label span {
613 color: #fff;
614 }
615 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected {
616 border-color: #0078e6;
617 }
618 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading {
619 background-color: #0078e6;
620 border-color: #0078e6;
621 color: #fff;
622 }
623 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .btn {
624 background-color: #fff;
625 border-color: #fff;
626 }
627 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .btn:hover,
628 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .btn.active {
629 background-color: #ebf3fb;
630 }
631 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected > .panel-heading .icon svg path {
632 fill: #0078e6;
633 }
634 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="text"],
635 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="date"],
636 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="password"],
637 #t3-form-stage-container.t3-form-stage-viewmode-preview textarea,
638 #t3-form-stage-container.t3-form-stage-viewmode-preview select {
639 color: #000;
640 background-color: #e5e5e5;
641 }
642 #t3-form-stage-container.t3-form-stage-viewmode-preview ::-webkit-input-placeholder {
643 color: #737373;
644 font-style: italic;
645 }
646 #t3-form-stage-container.t3-form-stage-viewmode-preview ::-moz-placeholder {
647 color: #737373;
648 font-style: italic;
649 }
650 #t3-form-stage-container.t3-form-stage-viewmode-preview :-ms-input-placeholder {
651 color: #737373;
652 font-style: italic;
653 }
654 #t3-form-stage-container.t3-form-stage-viewmode-preview ::placeholder {
655 color: #737373;
656 font-style: italic;
657 }
658 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type="date"] {
659 display: block;
660 width: 100%;
661 height: 32px;
662 padding: 0.6em;
663 font-size: 12px;
664 line-height: 1.5;
665 background-image: none;
666 border: 1px solid #c3c3c3;
667 border-radius: 2px;
668 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
669 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
670 }
671 #t3-form-stage-container.t3-form-stage-viewmode-preview select[multiple="multiple"] {
672 height: auto;
673 min-height: 32px;
674 }
675 #t3-form-stage-container.t3-form-stage-viewmode-preview textarea {
676 min-height: 100px;
677 }
678 #t3-form-stage-container.t3-form-stage-viewmode-preview legend.t3-form-form-element-selected {
679 border-color: #c3c3c3;
680 }
681 #t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group span,
682 #t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group button {
683 display: inline-block;
684 margin-right: 1em;
685 }
686 #t3-form-stage-container.t3-form-stage-viewmode-preview .preview-table-first-col {
687 width: 30%;
688 }
689 #t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-preview {
690 position: relative;
691 display: inline-block;
692 width: 100%;
693 }
694 #t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-new-element-container {
695 display: none;
696 }
697 #t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-toplevel > form > .tooltip {
698 top: 100px !important;
699 }
700 #t3-form-stage-container #t3-form-stage {
701 margin-bottom: 0;
702 padding-top: 0.5em;
703 }
704 #t3-form-stage-container #t3-form-stage > ol,
705 #t3-form-stage-container #t3-form-stage > ol > li > ol {
706 padding-left: 0;
707 padding-right: 0;
708 }
709 #t3-form-stage-container #t3-form-stage .t3-form-element-toplevel > .t3-form-form-element-selected {
710 height: auto;
711 padding-top: 0;
712 }
713 #t3-form-stage-container #t3-form-stage .t3-form-element-toplevel > .t3-form-form-element-selected .btn-toolbar-container {
714 display: none;
715 }
716 .meta-label {
717 z-index: 2;
718 position: absolute;
719 bottom: 1em;
720 left: 5.5em;
721 display: none;
722 color: #0078e6;
723 line-height: 1.6;
724 font-size: 0.8em;
725 }
726 .ui-sortable-handle:hover > .meta-label {
727 display: inline-block;
728 }
729 .ui-sortable-placeholder,
730 .t3-form-element-composit.ui-sortable-placeholder {
731 background-color: #fff !important;
732 border: none !important;
733 outline: 1px dashed #c4dbab !important;
734 outline-offset: -2px !important;
735 visibility: visible !important;
736 }
737 .t3-form-icon {
738 margin-right: 1em;
739 }
740 .t3-form-validation-child-has-error {
741 color: #c83c3c;
742 }
743 #t3-form-navigation-component .t3-form-validation-errors,
744 #t3-form-stage-container .t3-form-validation-errors {
745 position: relative;
746 color: #c83c3c;
747 }
748 #t3-form-navigation-component .t3-form-validation-errors:before,
749 #t3-form-stage-container .t3-form-validation-errors:before {
750 z-index: 1;
751 position: absolute;
752 display: inline-block;
753 width: 15px;
754 height: 15px;
755 font-family: FontAwesome;
756 vertical-align: middle;
757 border-radius: 50%;
758 font-size: 1em;
759 line-height: 1.4;
760 text-align: center;
761 background: none;
762 }
763 #t3-form-navigation-component .t3-form-validation-errors:hover:before,
764 #t3-form-navigation-component .t3-form-validation-errors.t3-form-form-element-selected:before {
765 left: 2.4em;
766 }
767 #t3-form-navigation-component .t3-form-validation-errors:before {
768 margin-top: 0.2em;
769 color: #fff;
770 font-size: 10px;
771 font-weight: 800;
772 content: "\f12a";
773 background-color: #c83c3c;
774 }
775 .t3-form-validation-errors#t3-form-navigation-component-tree-root:before {
776 left: -2em !important;
777 margin-top: 0.1em;
778 }
779 #t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle {
780 border-color: #c83c3c;
781 }
782 #t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle:before {
783 left: 4.5em;
784 margin-top: 1.9em;
785 content: "\f071";
786 }
787 #t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle .element-label {
788 padding-left: 1.5em;
789 }
790 #t3-form-inspector-panels .t3-form-collection-element .t3-form-validation-errors {
791 display: inline-block;
792 color: #fff;
793 font-size: 0.8em;
794 font-weight: 700;
795 background-color: #c83c3c;
796 margin-top: 0.5em;
797 padding: 0.1em 0.5em;
798 border-radius: 2px;
799 }
800 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element {
801 border-color: #c83c3c;
802 }
803 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4 {
804 border-color: #c83c3c;
805 background-color: #c83c3c;
806 color: #fff;
807 }
808 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4 path {
809 fill: #fff;
810 }
811 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button {
812 background: #fff;
813 border-color: transparent;
814 }
815 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button path {
816 fill: #c83c3c;
817 }
818 #t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button:hover {
819 background: #eab3b3;
820 }
821 .form-editor-loading-spinner {
822 width: 150px;
823 margin: 5em auto 0;
824 text-align: center;
825 }
826 .ui-sortable-handle {
827 cursor: pointer;
828 }
829 .module[data-module-name="web_FormFormbuilder_FormEditor"] {
830 overflow: hidden;
831 }
832 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-body,
833 .module[data-module-name="web_FormFormbuilder_FormEditor"] div[data-identifier="moduleWrapper"] {
834 height: 100%;
835 }
836 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-body {
837 padding-bottom: 0.5em;
838 }
839 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left button,
840 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left button:focus,
841 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left button:active {
842 outline: 0;
843 outline-color: initial;
844 outline-style: initial;
845 outline-width: 0px;
846 }
847 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left .btn-group,
848 .module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left .t3-form-element-form-settings-button {
849 margin-left: 25px;
850 }
851 .t3-form-element-new-page-button {
852 position: absolute;
853 left: 0.5em;
854 }