| @@ -1,5 +1,128 @@ | ||
| 1 | -a.helper {text-decoration: none;} | |
| 1 | +#editors, #contact-form-editor {position: relative;} | |
| 2 | +#optional-editors { | |
| 3 | + display: inline-block; | |
| 4 | + position: absolute; | |
| 5 | + margin-top: 8px; | |
| 6 | + z-index:2; | |
| 7 | +} | |
| 8 | +*[dir="rtl"] #optional-editors {left: 0} | |
| 9 | +.codemirror-theme label:hover { | |
| 10 | + font-weight: bold; | |
| 11 | +} | |
| 12 | +.codemirror-theme label { | |
| 13 | + z-index: 10; | |
| 14 | + position: relative; | |
| 15 | +} | |
| 16 | +#contact-form-editor .loading-screen{position:absolute;z-index: 100; padding: 100px 5px 850px 5px; width: calc(100% - 10px); background-color: white; text-align: center} | |
| 17 | +#contact-form-editor .loading-screen h2{font-size: 20px} | |
| 18 | +#contact-form-editor .loading-screen .spinner{visibility: visible; float:none} | |
| 19 | +#contact-form-editor .loading-screen .js-error p {text-align: left;font-size: 15px} | |
| 20 | +#contact-form-editor .loading-screen .error {color: #b90101} | |
| 21 | +#optional-editors a.button {font-weight: bold;} | |
| 22 | +#js-tags > li.show-events:not(#last-item) { | |
| 23 | + display: inline-block; | |
| 24 | + vertical-align: top; | |
| 25 | + border: solid 2px #007cba; | |
| 26 | + background: white; | |
| 27 | + padding: 5px 8px; | |
| 28 | + border-radius: 3px; | |
| 29 | +} | |
| 30 | +#last-item { | |
| 31 | + display: inline-block; | |
| 32 | + margin-top: 5px; | |
| 33 | + margin-left: 3px; | |
| 34 | +} | |
| 35 | +#js-tags > li:hover > span { | |
| 36 | + transform: rotate(90deg); | |
| 37 | + display: inline-block; | |
| 38 | +} | |
| 39 | +#js-tags > li > span { | |
| 40 | + font-weight:bold; | |
| 41 | + transition: 0.2s ease-out; | |
| 42 | + padding: 0 5px; | |
| 43 | +} | |
| 44 | +#js-tags > li > ul {display: none;} | |
| 45 | +#js-tags > li > ul>li {margin:0;} | |
| 46 | +#js-tags > li:hover > ul { | |
| 47 | + display: block; | |
| 48 | + position: absolute; | |
| 49 | + background: white; | |
| 50 | + padding: 5px 8px; | |
| 51 | + border: solid 1px; | |
| 52 | + border-radius: 3px; | |
| 53 | + z-index: 100; | |
| 54 | +} | |
| 55 | +#js-tags > li:hover > ul > li:hover{position: relative} | |
| 56 | +#js-tags > li:hover > ul > li:hover > span > span{ | |
| 57 | + display:block; | |
| 58 | + position: absolute; | |
| 59 | + background: white; | |
| 60 | + padding: 5px 8px; | |
| 61 | + border: solid 1px; | |
| 62 | + border-radius: 3px; | |
| 63 | + z-index: 20; | |
| 64 | + width: 225px; | |
| 65 | + left: 4px; | |
| 66 | + top: -3px; | |
| 67 | + font-style: italic; | |
| 68 | +} | |
| 69 | + | |
| 70 | +/* @since 4.4 .cf7sg-slider-section .cf7sg-collapsible .collapsible-row-label, | |
| 71 | +.cf7sg-accordion-rows .cf7sg-collapsible .collapsible-row-label, */ | |
| 72 | +.columns.cf7sg-slider-section, .columns.cf7sg-accordion-rows {box-shadow: 0 0 6px #6a0080;} | |
| 73 | +.columns:not(.full) + .row-controls .grid-controls .make-grid{display:inline-block;} | |
| 74 | +.columns.full > .container:not(.cf7sg-collapsible) > .row:not(.cf7-sg-table) > .columns:not(.full) + .row-controls .grid-controls .make-grid, | |
| 75 | +.button.make-grid.display-none, | |
| 76 | +.display-none, #js-tags > li.display-none:not(.show-events) {display: none;} | |
| 77 | +.enable-grouping.grid-column > .grid-controls .grouping-option { | |
| 78 | + display: inline-block; | |
| 79 | +} | |
| 80 | +.codemirror-theme { | |
| 81 | + position: absolute; | |
| 82 | + top: -26px; | |
| 83 | + padding: 2px 0 2px 5px; | |
| 84 | + background: #eae9e9; | |
| 85 | + width: calc( 100% - 313px); | |
| 86 | +} | |
| 87 | +.codemirror-theme span.file { | |
| 88 | + margin-left: 10px; | |
| 89 | + vertical-align: middle; | |
| 90 | + background: #f7ecb1; | |
| 91 | + padding: 4px 8px; | |
| 92 | + color: black; | |
| 93 | + max-width: calc( 100% - 216px ); | |
| 94 | + display: inline-block; | |
| 95 | + overflow-x: hidden; | |
| 96 | + height: 20px; | |
| 97 | +} | |
| 98 | +#cf7-codemirror,#cf7-js-codemirror,#cf7-css-codemirror {position: relative;} | |
| 99 | +label.accordion-label:hover + span.popup{display: inline; | |
| 100 | +position: absolute; | |
| 101 | +background: white; | |
| 102 | +margin-left: 6px; | |
| 103 | +width: 200px; | |
| 104 | +border: solid 1px gray; | |
| 105 | +border-radius: 3px; | |
| 106 | +padding: 1px 5px;} | |
| 107 | +#grid-form .js-help + .cf7sg-helper-list{margin-top:39px;} | |
| 108 | +span.js-icon.column-control{ | |
| 109 | + background-image: url('./image/js-sprite.png'); | |
| 110 | +width: 13px; | |
| 111 | +display: inline-block; | |
| 112 | +height: 10px; | |
| 113 | +background-size: 200%; | |
| 114 | +margin-top: 4px;} | |
| 115 | +.js-icon.column-control:hover {background-position-x: 13px;} | |
| 116 | +span.php-icon.column-control{ | |
| 117 | + background-image: url('./image/php-sprite.png'); | |
| 118 | +width: 26px; | |
| 119 | +display: inline-block; | |
| 120 | +height: 13px; | |
| 121 | +background-size: 200%; | |
| 122 | +margin-top: 2px;} | |
| 123 | +.php-icon.column-control:hover {background-position-x: 26px;} | |
| 124 | +a.helper {text-decoration: none;cursor: pointer;} | |
| 2 | 125 | a.helper + span.helper { |
| 3 | 126 | display: none; |
| 4 | 127 | position: absolute; |
| 5 | 128 | background: white; |
| @@ -19,24 +142,34 @@ | ||
| 19 | 142 | #full-screen-cf7 { |
| 20 | 143 | position: absolute; |
| 21 | 144 | top: -39px; |
| 22 | 145 | left: 160px; |
| 146 | + z-index: 100; | |
| 23 | 147 | } |
| 24 | 148 | #full-screen-cf7.full-screen { |
| 25 | - position: absolute; | |
| 26 | - top: auto; | |
| 27 | - left: auto; | |
| 28 | - right: 0; | |
| 29 | - bottom: -58px; | |
| 149 | + position: absolute; | |
| 150 | + top: auto; | |
| 151 | + left: auto; | |
| 152 | + right: 0; | |
| 153 | + bottom: -58px; | |
| 30 | 154 | } |
| 155 | +*[dir="rtl"] #full-screen-cf7.full-screen { | |
| 156 | + right: auto; | |
| 157 | + left: 0; | |
| 158 | +} | |
| 31 | 159 | #cf7sg-editor.full-screen { |
| 32 | - top: 5px; | |
| 33 | - z-index: 10; | |
| 34 | - position: fixed; | |
| 35 | - overflow: auto; | |
| 36 | - height: 100%; | |
| 37 | - margin-left: -15px; | |
| 38 | - } | |
| 160 | + top: 5px; | |
| 161 | + z-index: 10; | |
| 162 | + position: fixed; | |
| 163 | + overflow: auto; | |
| 164 | + height: 100%; | |
| 165 | + margin-left: -15px; | |
| 166 | + right:0; | |
| 167 | + width: calc( 100% - 170px); | |
| 168 | +} | |
| 169 | +.folded #cf7sg-editor.full-screen{ | |
| 170 | + width: calc( 100% - 46px); | |
| 171 | +} | |
| 39 | 172 | #form-editor-tabs ul.ui-tabs-nav { |
| 40 | 173 | border-bottom: 1px solid #ddd; |
| 41 | 174 | padding: 7px 0px 0 3px; |
| 42 | 175 | margin: 0; |
| @@ -41,8 +174,10 @@ | ||
| 41 | 174 | padding: 7px 0px 0 3px; |
| 42 | 175 | margin: 0; |
| 43 | 176 | min-width: 100%; |
| 44 | 177 | text-align: right; |
| 178 | + z-index: 1; | |
| 179 | + position: relative; | |
| 45 | 180 | } |
| 46 | 181 | #form-editor-tabs ul li.ui-state-disabled:first-child { |
| 47 | 182 | display: none; |
| 48 | 183 | } |
| @@ -54,9 +189,9 @@ | ||
| 54 | 189 | margin: 0 0px -1px; |
| 55 | 190 | border-top-left-radius: 3px; |
| 56 | 191 | } |
| 57 | 192 | #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active { |
| 58 | - background: transparent; | |
| 193 | + background: #f5f5f5; | |
| 59 | 194 | border-bottom: none; |
| 60 | 195 | } |
| 61 | 196 | .tagsdiv .tagchecklist > span { |
| 62 | 197 | display: block; |
| @@ -89,9 +224,9 @@ | ||
| 89 | 224 | } |
| 90 | 225 | /* |
| 91 | 226 | grid layout |
| 92 | 227 | */ |
| 93 | -#html-script, #grid-col, #grid-helper, | |
| 228 | +#html-script, #grid-col, #grid-helper,#grid-js-helper, | |
| 94 | 229 | #grid-form .grid-controls, |
| 95 | 230 | #grid-form .row-controls .dashicons-no-alt, |
| 96 | 231 | #grid-form .grid-column > .dashicons-no-alt, |
| 97 | 232 | #grid-row, #grid-collapsible, #grid-tabs, .cf7-sg-hidden, |
| @@ -100,12 +235,26 @@ | ||
| 100 | 235 | #grid-form .cf7sg-external-form-content, |
| 101 | 236 | #grid-form .table-row-button { |
| 102 | 237 | display: none; |
| 103 | 238 | } |
| 239 | +/* footer table special styling */ | |
| 104 | 240 | #grid-form .row.cf7-sg-table .row-controls label.table-row-button { |
| 105 | 241 | display: block; |
| 106 | 242 | text-align: center; |
| 107 | 243 | } |
| 244 | +#grid-form .cf7-sg-table-footer .row { | |
| 245 | + min-height: 66px; | |
| 246 | +} | |
| 247 | +.cf7-sg-table-footer .cf7-field-label.cf7-field-inner, | |
| 248 | +.cf7-sg-table-footer .cf7-field-type.cf7-field-inner, | |
| 249 | +.cf7-sg-table-footer .dashicons-move.row-control, | |
| 250 | +.cf7-sg-table-footer .button.make-grid.column-control, | |
| 251 | +.cf7-sg-table-footer .button.external-form { | |
| 252 | + display: none; | |
| 253 | +} | |
| 254 | +.cf7-sg-table-footer .cf7-field-tip.cf7-field-inner { | |
| 255 | + height: 42px; | |
| 256 | +} | |
| 108 | 257 | #grid-form .form-select { |
| 109 | 258 | display: block; |
| 110 | 259 | margin: 0 auto; |
| 111 | 260 | } |
| @@ -134,13 +283,15 @@ | ||
| 134 | 283 | #grid-form .container, |
| 135 | 284 | #grid-form .table-row-button input { |
| 136 | 285 | max-width: 100%; |
| 137 | 286 | } |
| 138 | -#cf7-codemirror .CodeMirror { | |
| 287 | +#cf7-codemirror .CodeMirror, | |
| 288 | +#cf7-js-codemirror .CodeMirror, | |
| 289 | +#cf7-css-codemirror .CodeMirror { | |
| 139 | 290 | height: calc( 100vh - 180px); |
| 140 | 291 | } |
| 141 | 292 | #grid-form .row.cf7-sg-table { |
| 142 | - box-shadow: 0px 0px 4px #0093ff; | |
| 293 | + box-shadow: 0px 0px 4px #920a03; | |
| 143 | 294 | } |
| 144 | 295 | #grid-form .grid-column { |
| 145 | 296 | background-color: #ddd; |
| 146 | 297 | } |
| @@ -195,12 +346,13 @@ | ||
| 195 | 346 | margin-top: 22px; |
| 196 | 347 | padding: 2px 5px 8px 5px; |
| 197 | 348 | background: white; |
| 198 | 349 | } |
| 199 | -#grid-form .dashicons-controls-repeat { | |
| 350 | +#grid-form .php-icon { | |
| 200 | 351 | position: relative; |
| 201 | 352 | } |
| 202 | -#grid-form .dashicons-controls-repeat + div.helper-popup { | |
| 353 | +#grid-form .php-icon + div.helper-popup, | |
| 354 | +#grid-form .js-icon + div.helper-popup { | |
| 203 | 355 | position: absolute; |
| 204 | 356 | z-index: 9; |
| 205 | 357 | background: #d8d8d8; |
| 206 | 358 | border: solid 1px #787878; |
| @@ -298,14 +450,18 @@ | ||
| 298 | 450 | #grid-form > .container:first-child >.row:first-child > .row-controls .dashicons-trash, |
| 299 | 451 | #grid-form > .cf7sg-external-form:first-child > .form-controls .dashicons-trash { |
| 300 | 452 | visibility:hidden; |
| 301 | 453 | } |
| 302 | -.CodeMirror-wrap .cm-shortcode { | |
| 303 | - color: blue; | |
| 304 | -} | |
| 305 | -.CodeMirror-wrap.cm-s-paraiso-light span.cm-string { | |
| 306 | - color: #fea218; | |
| 307 | -} | |
| 454 | + | |
| 455 | +.CodeMirror-wrap.cm-s-material-ocean .cm-shortcode {color: #4496ff;} | |
| 456 | +.CodeMirror-wrap.cm-s-paraiso-light .cm-shortcode {color: blue;} | |
| 457 | +.CodeMirror-wrap.cm-s-paraiso-light span.cm-string {color: #937c01;} | |
| 458 | +.CodeMirror-wrap.cm-s-paraiso-light span.cm-tag {color: #b70b0b;} | |
| 459 | +.CodeMirror-wrap.cm-s-material-ocean .cm-cf7sg-attr {color: #d300ff;} | |
| 460 | +.CodeMirror-wrap.cm-s-material-ocean .cm-cf7sg-attr + .cm-string {color: #00f900;} | |
| 461 | +.CodeMirror-wrap.cm-s-paraiso-light .cm-cf7sg-attr {color: #228f85;} | |
| 462 | +.CodeMirror-wrap.cm-s-paraiso-light .cm-cf7sg-attr + .cm-string {color: #f124ee;} | |
| 463 | + | |
| 308 | 464 | .disable-button{ |
| 309 | 465 | text-decoration: none; |
| 310 | 466 | padding: 0 10px 1px; |
| 311 | 467 | color: #9b9b9b; |
| @@ -339,13 +495,21 @@ | ||
| 339 | 495 | width: 100%; |
| 340 | 496 | text-align: center; |
| 341 | 497 | margin-top: 5px; |
| 342 | 498 | } |
| 499 | +#form-editor-tabs > ul li.ui-tabs-active > a { | |
| 500 | + color:inherit; | |
| 501 | + background-color: inherit; | |
| 502 | +} | |
| 343 | 503 | #form-editor-tabs > ul li > a { |
| 344 | - padding: 3px 8px; | |
| 345 | - display: block; | |
| 346 | - color: inherit; | |
| 347 | - text-decoration: none; | |
| 504 | + padding: 1px 8px; | |
| 505 | + display: block; | |
| 506 | + text-decoration: none; | |
| 507 | + min-width: 75px; | |
| 508 | + text-align: center; | |
| 509 | + background-color: #818a99; | |
| 510 | + color: white; | |
| 511 | + min-height: 25px; | |
| 348 | 512 | } |
| 349 | 513 | div#form-editor-tabs > ul.ui-tabs-nav li { |
| 350 | 514 | padding: 0; |
| 351 | 515 | } |
| @@ -445,9 +609,9 @@ | ||
| 445 | 609 | #grid-form .cf7-field-type.dynamic-select .content::after { |
| 446 | 610 | content: '\25BC'; |
| 447 | 611 | position: absolute; |
| 448 | 612 | right: 13px; |
| 449 | - font-size: 2em; | |
| 613 | + font-size: 1.1em; | |
| 450 | 614 | line-height: 1px; |
| 451 | 615 | top: 12px; |
| 452 | 616 | } |
| 453 | 617 | #grid-form .cf7-field-type.radio .content::after { |
| @@ -488,4 +652,5 @@ | ||
| 488 | 652 | } |
| 489 | 653 | [data-search="li.cf7sg-tag-all,li.cf7sg-tag-dynamic_select,li.cf7sg-tag-dynamic_select-filter"] + .helper-popup { |
| 490 | 654 | min-width: 300px; |
| 491 | 655 | } |
| 656 | +body.disable-scroll{overflow:hidden;} | |
