[FEATURE] EXT:form - Add element selector for text editors
[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 {
958       margin-left: 25px;
959     }
960   }
961 }
962
963 .t3-form-element-new-page-button {
964   position: absolute;
965   left: 0.5em;
966 }