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