| @@ -57,8 +57,9 @@ | ||
| 57 | 57 | margin-top: 0; } |
| 58 | 58 | .hf-field-builder input[type="text"] { |
| 59 | 59 | width: 100%; } |
| 60 | 60 | .hf-field-builder .available-fields button { |
| 61 | + margin-bottom: 4px; | |
| 61 | 62 | margin-right: 4px; } |
| 62 | 63 | .hf-field-builder .field-config *:last-child { |
| 63 | 64 | margin-bottom: 0; } |
| 64 | 65 | |
| @@ -90,8 +91,23 @@ | ||
| 90 | 91 | border-bottom: 1px dotted #e1e1e1; } |
| 91 | 92 | .hf-column-menu:hover .submenu { |
| 92 | 93 | display: block; } |
| 93 | 94 | |
| 95 | +#hf-form-preview { | |
| 96 | + border: 1px solid #ddd; | |
| 97 | + height: 520px; | |
| 98 | + /* codemirror + padding */ | |
| 99 | + width: 100%; | |
| 100 | + border-left-width: 0; } | |
| 101 | + | |
| 102 | +@media (max-width: 1217px) { | |
| 103 | + #hf-form-preview { | |
| 104 | + border-left-width: 1px; } } | |
| 105 | + | |
| 106 | +.hf-tiny-margin { | |
| 107 | + margin-top: 10px; | |
| 108 | + margin-bottom: 10px; } | |
| 109 | + | |
| 94 | 110 | .hf-small-margin { |
| 95 | 111 | margin-top: 20px; |
| 96 | 112 | margin-bottom: 20px; } |
| 97 | 113 | |
| @@ -130,12 +146,47 @@ | ||
| 130 | 146 | font-weight: normal; |
| 131 | 147 | font-size: 90%; |
| 132 | 148 | color: #999; } |
| 133 | 149 | |
| 150 | +.hf-row { | |
| 151 | + display: flex; | |
| 152 | + flex-wrap: wrap; } | |
| 153 | + | |
| 154 | +.hf-col { | |
| 155 | + flex-basis: 0; | |
| 156 | + flex-grow: 1; } | |
| 157 | + | |
| 158 | +.hf-col-1 { | |
| 159 | + max-width: 16.66667%; } | |
| 160 | + | |
| 161 | +.hf-col-2 { | |
| 162 | + max-width: 33.33333%; } | |
| 163 | + | |
| 164 | +.hf-col-3 { | |
| 165 | + max-width: 50%; } | |
| 166 | + | |
| 167 | +.hf-col-4 { | |
| 168 | + max-width: 66.66667%; } | |
| 169 | + | |
| 170 | +.hf-sidebar { | |
| 171 | + border-left: 1px dashed #ddd; | |
| 172 | + margin-left: 24px; | |
| 173 | + padding-left: 24px; } | |
| 174 | + | |
| 175 | +@media (max-width: 640px) { | |
| 176 | + .hf-row { | |
| 177 | + display: block; } | |
| 178 | + .hf-col { | |
| 179 | + max-width: 100%; } | |
| 180 | + .hf-sidebar { | |
| 181 | + border: 0; | |
| 182 | + margin-top: 24px; | |
| 183 | + margin-left: 0; | |
| 184 | + padding-left: 0; } } | |
| 185 | + | |
| 134 | 186 | /* BASICS */ |
| 135 | 187 | /* Codemirror */ |
| 136 | 188 | .CodeMirror { |
| 137 | - /* Set height, width, borders, and global font properties here */ | |
| 138 | 189 | font-family: monospace; |
| 139 | 190 | color: black; |
| 140 | 191 | border: 1px solid #ddd; |
| 141 | 192 | padding: 10px; |
| @@ -536,4 +587,76 @@ | ||
| 536 | 587 | |
| 537 | 588 | /* Help users use markselection to safely style text background */ |
| 538 | 589 | span.CodeMirror-selectedtext { |
| 539 | 590 | background: none; } |
| 591 | + | |
| 592 | +.tlite { | |
| 593 | + background: #111; | |
| 594 | + color: white; | |
| 595 | + font-family: sans-serif; | |
| 596 | + font-size: 0.8rem; | |
| 597 | + font-weight: normal; | |
| 598 | + text-decoration: none; | |
| 599 | + text-align: left; | |
| 600 | + padding: 0.6em 0.75rem; | |
| 601 | + border-radius: 4px; | |
| 602 | + position: absolute; | |
| 603 | + opacity: 0; | |
| 604 | + visibility: hidden; | |
| 605 | + transition: opacity 0.4s; | |
| 606 | + white-space: nowrap; | |
| 607 | + box-shadow: 0 0.5rem 1rem -0.5rem black; | |
| 608 | + z-index: 1000; | |
| 609 | + -webkit-backface-visibility: hidden; } | |
| 610 | + | |
| 611 | +.tlite-table td, | |
| 612 | +.tlite-table th { | |
| 613 | + position: relative; } | |
| 614 | + | |
| 615 | +.tlite-visible { | |
| 616 | + visibility: visible; | |
| 617 | + opacity: 0.9; } | |
| 618 | + | |
| 619 | +.tlite::before { | |
| 620 | + content: ' '; | |
| 621 | + display: block; | |
| 622 | + background: inherit; | |
| 623 | + width: 10px; | |
| 624 | + height: 10px; | |
| 625 | + position: absolute; | |
| 626 | + transform: rotate(45deg); } | |
| 627 | + | |
| 628 | +.tlite-n::before { | |
| 629 | + top: -3px; | |
| 630 | + left: 50%; | |
| 631 | + margin-left: -5px; } | |
| 632 | + | |
| 633 | +.tlite-nw::before { | |
| 634 | + top: -3px; | |
| 635 | + left: 10px; } | |
| 636 | + | |
| 637 | +.tlite-ne::before { | |
| 638 | + top: -3px; | |
| 639 | + right: 10px; } | |
| 640 | + | |
| 641 | +.tlite-s::before { | |
| 642 | + bottom: -3px; | |
| 643 | + left: 50%; | |
| 644 | + margin-left: -5px; } | |
| 645 | + | |
| 646 | +.tlite-se::before { | |
| 647 | + bottom: -3px; | |
| 648 | + right: 10px; } | |
| 649 | + | |
| 650 | +.tlite-sw::before { | |
| 651 | + bottom: -3px; | |
| 652 | + left: 10px; } | |
| 653 | + | |
| 654 | +.tlite-w::before { | |
| 655 | + left: -3px; | |
| 656 | + top: 50%; | |
| 657 | + margin-top: -5px; } | |
| 658 | + | |
| 659 | +.tlite-e::before { | |
| 660 | + right: -3px; | |
| 661 | + top: 50%; | |
| 662 | + margin-top: -5px; } | |
