| @@ -12,8 +12,13 @@ | ||
| 12 | 12 | padding-right: 0; |
| 13 | 13 | padding-bottom: 0; |
| 14 | 14 | } |
| 15 | 15 | |
| 16 | +#frm_style_sidebar .control-section:hover .accordion-section-title { | |
| 17 | + /* Normally an accordion has a white background but this doesn't look great with the padding on the accordion. */ | |
| 18 | + background-color: transparent !important; | |
| 19 | +} | |
| 20 | + | |
| 16 | 21 | #frm_style_sidebar .accordion-section-title::after { |
| 17 | 22 | right: 0; |
| 18 | 23 | color: var(--grey-400); |
| 19 | 24 | } |
| @@ -157,13 +162,12 @@ | ||
| 157 | 162 | cursor: pointer; |
| 158 | 163 | font-weight: 400; |
| 159 | 164 | |
| 160 | 165 | /* |
| 161 | - When a background image is set the children in the fieldset have a z-index of 1. | |
| 162 | - The Ranking Field contains elements with a higher z-index of 2. | |
| 163 | - Set to 3 so the floating buttons get priority when clicking if they overlap a form element. | |
| 166 | + When a background image is set the children in the fieldset have a z-index of 1.\ | |
| 167 | + Set to 2 so the floating buttons get priority when clicking if they overlap a form element. | |
| 164 | 168 | */ |
| 165 | - z-index: 3; | |
| 169 | + z-index: 2; | |
| 166 | 170 | } |
| 167 | 171 | |
| 168 | 172 | #frm_style_preview .frm_floating_style_button.frm_hidden { |
| 169 | 173 | display: none; |
| @@ -198,8 +202,86 @@ | ||
| 198 | 202 | .styling_settings .frm_image_preview_wrapper .frm_choose_image_box { |
| 199 | 203 | margin-left: 0; |
| 200 | 204 | } |
| 201 | 205 | |
| 206 | +/* Color picker CSS */ | |
| 207 | +#frm_style_sidebar .wp-picker-open + .wp-picker-input-wrap { | |
| 208 | + position: absolute; | |
| 209 | + margin-left: calc( ( 100% - 35px ) * -1 ); | |
| 210 | + margin-top: 1px; | |
| 211 | + width: calc( 100% - 36px ); | |
| 212 | +} | |
| 213 | + | |
| 214 | +#frm_style_sidebar .wp-picker-container input[type="text"].wp-color-picker { | |
| 215 | + border: none; | |
| 216 | + padding: 5px 8px; | |
| 217 | + font-family: inherit; | |
| 218 | + color: var(--grey-700); | |
| 219 | + font-size: var(--text-md); | |
| 220 | + width: 100%; | |
| 221 | + line-height: var(--leading); | |
| 222 | +} | |
| 223 | + | |
| 224 | +#frm_style_sidebar .wp-picker-input-wrap .wp-picker-clear { | |
| 225 | + display: none !important; | |
| 226 | +} | |
| 227 | + | |
| 228 | +#frm_style_sidebar .wp-picker-holder { | |
| 229 | + position: absolute; | |
| 230 | + z-index: 999; | |
| 231 | +} | |
| 232 | + | |
| 233 | +#frm_style_sidebar .wp-picker-input-wrap label { | |
| 234 | + margin-bottom: 0; | |
| 235 | +} | |
| 236 | + | |
| 237 | +#frm_style_sidebar .wp-picker-container .wp-color-result.button { | |
| 238 | + width: 100%; | |
| 239 | + overflow: hidden; | |
| 240 | + margin: 0 !important; | |
| 241 | + height: var(--h-md) !important; | |
| 242 | + padding: 0 0 0 var(--gap-lg) !important; | |
| 243 | + border-radius: var(--small-radius); | |
| 244 | + border-color: var(--grey-300); | |
| 245 | +} | |
| 246 | + | |
| 247 | +#frm_style_sidebar .wp-color-result-text { | |
| 248 | + line-height: var(--leading) !important; | |
| 249 | + font-size: var(--text-md); | |
| 250 | + background: #fff !important; | |
| 251 | + color: var(--grey-900); | |
| 252 | + padding: 5px 8px; | |
| 253 | + border-color: var(--grey-300); | |
| 254 | + text-align: left; | |
| 255 | +} | |
| 256 | + | |
| 257 | +#frm_style_sidebar .color-alpha { | |
| 258 | + width: var(--gap-lg) !important; | |
| 259 | +} | |
| 260 | + | |
| 261 | +.frm_grid_container .wp-picker-container { | |
| 262 | + width: 100%; | |
| 263 | + position: relative; | |
| 264 | +} | |
| 265 | + | |
| 266 | +.wp-picker-container button.wp-color-result { | |
| 267 | + border: 1px solid var(--grey-300) !important; | |
| 268 | +} | |
| 269 | + | |
| 270 | +.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker { | |
| 271 | + max-width: 100%; | |
| 272 | + position: relative; | |
| 273 | +} | |
| 274 | + | |
| 275 | +.frm_end .wp-picker-holder { | |
| 276 | + margin-left: -145px; | |
| 277 | +} | |
| 278 | + | |
| 279 | +.frm_end.frm6 .wp-picker-holder { | |
| 280 | + margin-left: -86px; | |
| 281 | +} | |
| 282 | +/* End of color picker CSS */ | |
| 283 | + | |
| 202 | 284 | .ui-datepicker-inline.ui-datepicker { |
| 203 | 285 | max-width: 19em; |
| 204 | 286 | } |
| 205 | 287 | |
| @@ -223,9 +305,18 @@ | ||
| 223 | 305 | /* The long "Reset to defaults" option name requires extra space. There's normally a 160px min-width. */ |
| 224 | 306 | min-width: 200px; |
| 225 | 307 | } |
| 226 | 308 | |
| 227 | -#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select:not(.flatpickr-monthDropdown-months) { | |
| 309 | +/* | |
| 310 | +Do not set this for frm_inside_container as it requires a custom line height value. | |
| 311 | +Target .frm_primary_label so we avoid other labels like star rating stars. | |
| 312 | +Time fields use a div instead of a label, so don't target by the primary label by tag type. | |
| 313 | +*/ | |
| 314 | +#frm_style_preview .frm_form_field:not(.frm_inside_container) > .frm_primary_label { | |
| 315 | + line-height: var(--line-height); | |
| 316 | +} | |
| 317 | + | |
| 318 | +#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select { | |
| 228 | 319 | /* Prevent back end styles from shrinking dropdowns. But leave datepicker dropdowns alone. */ |
| 229 | 320 | width: var(--auto-width); |
| 230 | 321 | max-width: 100%; |
| 231 | 322 | } |
| @@ -233,9 +324,9 @@ | ||
| 233 | 324 | #frm_style_preview select { |
| 234 | 325 | appearance: none; /* Hide the default icon */ |
| 235 | 326 | } |
| 236 | 327 | |
| 237 | -#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year):not(.frm-ranking-position) { | |
| 328 | +#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year) { | |
| 238 | 329 | /* |
| 239 | 330 | The styler preview doesn't use .wp-core-ui which results in a funny looking dropdown arrow. |
| 240 | 331 | Restore the WordPress background image defined in /wp-admin/css/forms.css for preview selects so they appear nicer and more consistent with other dropdowns. |
| 241 | 332 | The SVG is arrow-down-alt2 from Dashicons. |
| @@ -240,11 +331,9 @@ | ||
| 240 | 331 | Restore the WordPress background image defined in /wp-admin/css/forms.css for preview selects so they appear nicer and more consistent with other dropdowns. |
| 241 | 332 | The SVG is arrow-down-alt2 from Dashicons. |
| 242 | 333 | This needs to be important because of a background-image: none !important rule that gets applied in front end CSS. |
| 243 | 334 | */ |
| 244 | - background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') !important; | |
| 245 | - background-repeat: no-repeat !important; | |
| 246 | - background-position: right 5px top 55% !important; | |
| 335 | + background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55% !important; | |
| 247 | 336 | |
| 248 | 337 | padding-right: 24px; /* Add enough padding for the icon. */ |
| 249 | 338 | } |
| 250 | 339 | |
| @@ -263,9 +352,9 @@ | ||
| 263 | 352 | Avoid a conflict with the .frm_form_field > label:first-child rule in frm_admin.css |
| 264 | 353 | The label in the preview should use the label color setting. |
| 265 | 354 | */ |
| 266 | 355 | #frm_style_preview .frm_form_field > label:first-child { |
| 267 | - color: var(--label-color); | |
| 356 | + color: var(--label-color); | |
| 268 | 357 | font-size: var(--font-size); |
| 269 | 358 | } |
| 270 | 359 | |
| 271 | 360 | .frm-color-blocks { |
| @@ -294,8 +383,9 @@ | ||
| 294 | 383 | #frm_styling_form p > a svg { |
| 295 | 384 | position: relative; |
| 296 | 385 | bottom: 2px; |
| 297 | 386 | } |
| 387 | + | |
| 298 | 388 | .frm-style-card-separator { |
| 299 | 389 | background-color: var(--grey-300); |
| 300 | 390 | width: 2px; |
| 301 | 391 | height: 20px; |
| @@ -329,9 +419,8 @@ | ||
| 329 | 419 | .frm-input-style-example { |
| 330 | 420 | border-width: var(--field-border-width); |
| 331 | 421 | border-style: var(--field-border-style); |
| 332 | 422 | border-color: var(--border-color); |
| 333 | - border-radius: var(--border-radius); | |
| 334 | 423 | background-color: var(--bg-color); |
| 335 | 424 | max-width: 138px; |
| 336 | 425 | width: 100%; |
| 337 | 426 | height: 16px; |
| @@ -349,8 +438,9 @@ | ||
| 349 | 438 | } |
| 350 | 439 | |
| 351 | 440 | #frm_loading_style_placeholder, |
| 352 | 441 | #frm_style_preview.frm-loading-style-template .frm_forms, |
| 442 | +#frm_default_style_cards_wrapper .dropdown-item.frm-apply-style, | |
| 353 | 443 | .frm-currently-set-style-card .dropdown-item.frm-apply-style |
| 354 | 444 | { |
| 355 | 445 | display: none; |
| 356 | 446 | } |
| @@ -409,121 +499,8 @@ | ||
| 409 | 499 | pointer-events: none; |
| 410 | 500 | opacity: 0.5; |
| 411 | 501 | } |
| 412 | 502 | |
| 413 | -.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:before, | |
| 414 | -.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:after { | |
| 415 | - content: '' !important; | |
| 416 | -} | |
| 417 | -.formidable_page_formidable-styles .frm-right-panel .open .accordion-section-title > .frmsvg:last-child { | |
| 418 | - transform: rotate(180deg); | |
| 419 | -} | |
| 420 | -.formidable_page_formidable-styles .frm-right-panel .accordion-section-title > .frmsvg:last-child { | |
| 421 | - position: absolute; | |
| 422 | - top: 0; | |
| 423 | - bottom: 0; | |
| 424 | - right: 0; | |
| 425 | - margin: auto; | |
| 426 | - color: var(--grey); | |
| 427 | -} | |
| 428 | -.control-section:hover .accordion-section-title { | |
| 429 | - background: transparent !important; | |
| 430 | - border-bottom-color: transparent; | |
| 431 | -} | |
| 432 | -.frm-style-settings-hover { | |
| 433 | - width: 100%; | |
| 434 | - position: absolute; | |
| 435 | - top:0; | |
| 436 | - left: 0; | |
| 437 | - height: 58px; | |
| 438 | - background: white; | |
| 439 | - border-radius: var(--small-radius); | |
| 440 | - box-shadow: var(--button-shadow); | |
| 441 | - z-index: 0; | |
| 442 | - transition: 0.25s opacity ease, 0.3s transform cubic-bezier(0.165, 0.84, 0.44, 1); | |
| 443 | -} | |
| 444 | -.frm-style-settings-hover.frm-animating { | |
| 445 | - opacity: 0.45; | |
| 446 | -} | |
| 447 | -.frm-right-panel .accordion-section-content { | |
| 448 | - background: transparent; | |
| 449 | - padding: 0; | |
| 450 | - overflow: initial; | |
| 451 | -} | |
| 452 | - | |
| 453 | -.frm-right-panel .accordion-section-content > .inside { | |
| 454 | - padding: 15px; | |
| 455 | -} | |
| 456 | -.frm-quick-settings .frm_form_field .frm-style-item-heading, | |
| 457 | -.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading { | |
| 458 | - line-height: 36px; | |
| 459 | -} | |
| 460 | -.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading .frm_help { | |
| 461 | - display: inline-block; | |
| 462 | - line-height: 13px; | |
| 463 | -} | |
| 464 | - | |
| 465 | -.frm-right-panel .accordion-section-content .inside a { | |
| 466 | - font-size: inherit; | |
| 467 | -} | |
| 468 | -.frm-right-panel .control-section.open h3 { | |
| 469 | - border-bottom: none; | |
| 470 | -} | |
| 471 | - | |
| 472 | -.js .frm-right-panel .control-section .accordion-section-title:focus, | |
| 473 | -.js .frm-right-panel .control-section .accordion-section-title:hover { | |
| 474 | - color: var(--grey-900); | |
| 475 | -} | |
| 476 | -.js .frm-right-panel .control-section.open h3.accordion-section-title { | |
| 477 | - box-shadow: var(--button-shadow); | |
| 478 | - background: white !important; | |
| 479 | - border-radius: var(--small-radius); | |
| 480 | -} | |
| 481 | - | |
| 482 | -.js .frm-right-panel .control-section .accordion-section-title:hover:before { | |
| 483 | - color: var(--grey-700); | |
| 484 | -} | |
| 485 | -.frm-right-panel .accordion-section { | |
| 486 | - border: none; | |
| 487 | - position: relative; | |
| 488 | - padding-bottom: 2px; | |
| 489 | -} | |
| 490 | -.frm-right-panel .accordion-section-title > .frmsvg:first-child { | |
| 491 | - margin: 0 10px 0 0; | |
| 492 | - color: var(--grey); | |
| 493 | -} | |
| 494 | -.frm-right-panel .accordion-section-title:hover > .frmsvg:first-child { | |
| 495 | - color: var(--grey-900); | |
| 496 | -} | |
| 497 | -.frm-right-panel .accordion-section-title > .frmsvg:last-child { | |
| 498 | - margin-right: 15px !important; | |
| 499 | -} | |
| 500 | -.frm-right-panel .open .accordion-section-title > .frmsvg:last-child { | |
| 501 | - transform: rotate(180deg); | |
| 502 | -} | |
| 503 | -.frm-right-panel .open.accordion-section { | |
| 504 | - border-bottom: 1px solid var(--grey-300); | |
| 505 | -} | |
| 506 | -.frm-right-panel h3.accordion-section-title { | |
| 507 | - padding: 17px 15px !important; | |
| 508 | - background: transparent; | |
| 509 | - line-height: var(--leading); | |
| 510 | - color: var(--grey-500); | |
| 511 | - font-size: var(--text-md); | |
| 512 | - font-weight: 400; | |
| 513 | -} | |
| 514 | -.styling_settings .accordion-container { | |
| 515 | - position: relative; | |
| 516 | -} | |
| 517 | -.styling_settings .accordion-container .outer-border { | |
| 518 | - position: relative; | |
| 519 | - z-index: 1; | |
| 520 | -} | |
| 521 | -.styling_settings .accordion-section-title button { | |
| 522 | - border: none; | |
| 523 | - background: none; | |
| 524 | - float: right; | |
| 525 | -} | |
| 526 | 503 | @media only screen and (max-width: 782px) { |
| 527 | 504 | #frm_style_preview .with_frm_style .frm_radio input[type=radio], |
| 528 | 505 | #frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] { |
| 529 | 506 | width: 18px !important; |
