| @@ -67,8 +67,15 @@ | ||
| 67 | 67 | @media (max-width: 767px) { |
| 68 | 68 | .bkbg-row--stack-mobile .bkbg-row__inner { |
| 69 | 69 | flex-direction: column; |
| 70 | 70 | } |
| 71 | + | |
| 72 | + .bkbg-row--stack-mobile .bkbg-row__inner > .block-editor-inner-blocks > .block-editor-block-list__layout { | |
| 73 | + display: flex !important; | |
| 74 | + flex-direction: column !important; | |
| 75 | + flex-wrap: nowrap !important; | |
| 76 | + width: 100% !important; | |
| 77 | + } | |
| 71 | 78 | |
| 72 | 79 | .bkbg-row--stack-mobile .bkbg-column { |
| 73 | 80 | flex-basis: 100% !important; |
| 74 | 81 | max-width: 100% !important; |
| @@ -227,8 +234,19 @@ | ||
| 227 | 234 | width: 5px; |
| 228 | 235 | background: #2563eb; |
| 229 | 236 | } |
| 230 | 237 | |
| 238 | +/* Hide resize lines/handles in mobile editor preview */ | |
| 239 | +@media (max-width: 767px) { | |
| 240 | + .editor-styles-wrapper .bkbg-row__handles-overlay, | |
| 241 | + .editor-styles-wrapper .bkbg-row__handle-wrapper, | |
| 242 | + .editor-styles-wrapper .bkbg-row__resize-handle, | |
| 243 | + .editor-styles-wrapper .bkbg-row__resize-handle-line, | |
| 244 | + .editor-styles-wrapper .bkbg-row__resize-indicator { | |
| 245 | + display: none !important; | |
| 246 | + } | |
| 247 | +} | |
| 248 | + | |
| 231 | 249 | /* Resize percentage indicator - only show during drag */ |
| 232 | 250 | .bkbg-row__resize-indicator { |
| 233 | 251 | position: absolute; |
| 234 | 252 | top: 50%; |
| @@ -304,8 +322,15 @@ | ||
| 304 | 322 | flex-basis: 100% !important; |
| 305 | 323 | max-width: 100% !important; |
| 306 | 324 | } |
| 307 | 325 | |
| 326 | +.editor-styles-wrapper .bkbg-row--mode-mobile.bkbg-row--stack-mobile > .bkbg-row__inner > .block-editor-inner-blocks > .block-editor-block-list__layout { | |
| 327 | + display: flex !important; | |
| 328 | + flex-direction: column !important; | |
| 329 | + flex-wrap: nowrap !important; | |
| 330 | + width: 100% !important; | |
| 331 | +} | |
| 332 | + | |
| 308 | 333 | .editor-styles-wrapper .bkbg-row--mode-mobile:not(.bkbg-row--stack-mobile) .bkbg-column { |
| 309 | 334 | flex-basis: var(--bkbg-col-mobile, 100%) !important; |
| 310 | 335 | max-width: var(--bkbg-col-mobile, 100%) !important; |
| 311 | 336 | } |
| @@ -344,10 +369,19 @@ | ||
| 344 | 369 | /* Ensure columns respect their widths in editor */ |
| 345 | 370 | .editor-styles-wrapper .bkbg-row .block-editor-block-list__layout > .wp-block[data-type="blockenberg/column"] { |
| 346 | 371 | flex-shrink: 0; |
| 347 | 372 | flex-grow: 0; |
| 373 | + align-self: stretch; | |
| 374 | + display: flex; | |
| 348 | 375 | } |
| 349 | 376 | |
| 377 | +.editor-styles-wrapper .bkbg-row .block-editor-block-list__layout > .wp-block[data-type="blockenberg/column"] > .bkbg-column { | |
| 378 | + display: flex; | |
| 379 | + flex-direction: column; | |
| 380 | + flex: 1; | |
| 381 | + min-height: 100%; | |
| 382 | +} | |
| 383 | + | |
| 350 | 384 | /* ======================================== |
| 351 | 385 | Layout Selector (Initial Setup) |
| 352 | 386 | ======================================== */ |
| 353 | 387 | |
| @@ -415,133 +449,240 @@ | ||
| 415 | 449 | } |
| 416 | 450 | } |
| 417 | 451 | |
| 418 | 452 | /* ======================================== |
| 419 | - Row Actions (Right Side Panel) | |
| 453 | + Floating Structure Popup | |
| 420 | 454 | ======================================== */ |
| 421 | 455 | |
| 422 | -.bkbg-row__row-gear { | |
| 456 | +/* Trigger button - floating in top-right corner */ | |
| 457 | +.bkbg-row__structure-trigger { | |
| 423 | 458 | position: absolute; |
| 424 | - top: 0; | |
| 425 | - bottom: 0; | |
| 426 | - left: -1px; | |
| 427 | - transform: translateX(-100%); | |
| 428 | - width: 26px; | |
| 429 | - display: flex; | |
| 430 | - flex-direction: column; | |
| 431 | - align-items: center; | |
| 432 | - justify-content: center; | |
| 433 | - padding: 3px 2px; | |
| 434 | - background: rgba(59, 130, 246, 0.04); | |
| 435 | - border-right: 1px dashed rgba(59, 130, 246, 0.35); | |
| 436 | - border-radius: 0; | |
| 459 | + top: 4px; | |
| 460 | + right: 4px; | |
| 461 | + z-index: 200; | |
| 437 | 462 | opacity: 0; |
| 438 | 463 | visibility: hidden; |
| 439 | 464 | pointer-events: none; |
| 440 | 465 | transition: opacity 0.15s ease, visibility 0.15s ease; |
| 441 | - z-index: 200; | |
| 442 | 466 | } |
| 443 | 467 | |
| 444 | -.editor-styles-wrapper .bkbg-row:hover .bkbg-row__row-gear, | |
| 445 | -.editor-styles-wrapper .bkbg-row.is-selected .bkbg-row__row-gear, | |
| 446 | -.bkbg-row__row-gear:hover { | |
| 468 | +.editor-styles-wrapper .bkbg-row:hover .bkbg-row__structure-trigger, | |
| 469 | +.editor-styles-wrapper .bkbg-row.is-selected .bkbg-row__structure-trigger, | |
| 470 | +.bkbg-row__structure-trigger:focus-within { | |
| 447 | 471 | opacity: 1; |
| 448 | 472 | visibility: visible; |
| 449 | 473 | pointer-events: auto; |
| 450 | 474 | } |
| 451 | 475 | |
| 452 | -.bkbg-row__row-actions { | |
| 453 | - position: absolute; | |
| 454 | - top: 0; | |
| 455 | - bottom: 0; | |
| 456 | - right: -1px; | |
| 457 | - transform: translateX(100%); | |
| 458 | - width: 26px; | |
| 476 | +.bkbg-row__structure-btn { | |
| 477 | + display: flex !important; | |
| 478 | + align-items: center !important; | |
| 479 | + justify-content: center !important; | |
| 480 | + width: 28px !important; | |
| 481 | + height: 28px !important; | |
| 482 | + min-width: 28px !important; | |
| 483 | + padding: 0 !important; | |
| 484 | + background: #fff !important; | |
| 485 | + border: 1px solid rgba(59, 130, 246, 0.4) !important; | |
| 486 | + border-radius: 6px !important; | |
| 487 | + color: #3b82f6 !important; | |
| 488 | + cursor: pointer !important; | |
| 489 | + transition: all 0.15s ease !important; | |
| 490 | + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; | |
| 491 | +} | |
| 492 | + | |
| 493 | +.bkbg-row__structure-btn:hover { | |
| 494 | + background: #f0f7ff !important; | |
| 495 | + border-color: #3b82f6 !important; | |
| 496 | + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important; | |
| 497 | +} | |
| 498 | + | |
| 499 | +.bkbg-row__structure-btn svg { | |
| 500 | + width: 18px !important; | |
| 501 | + height: 18px !important; | |
| 502 | + fill: currentColor !important; | |
| 503 | +} | |
| 504 | + | |
| 505 | +/* Popover content */ | |
| 506 | +.bkbg-row__structure-popover { | |
| 507 | + width: 280px !important; | |
| 508 | +} | |
| 509 | + | |
| 510 | +.bkbg-row__structure-popover .components-popover__content { | |
| 511 | + padding: 0 !important; | |
| 512 | +} | |
| 513 | + | |
| 514 | +.bkbg-row__structure-content { | |
| 515 | + padding: 12px; | |
| 516 | +} | |
| 517 | + | |
| 518 | +.bkbg-row__structure-header { | |
| 459 | 519 | display: flex; |
| 460 | - flex-direction: column; | |
| 461 | 520 | align-items: center; |
| 462 | 521 | justify-content: space-between; |
| 463 | - padding: 3px 2px; | |
| 464 | - background: rgba(59, 130, 246, 0.04); | |
| 465 | - border-left: 1px dashed rgba(59, 130, 246, 0.35); | |
| 466 | - border-radius: 0; | |
| 467 | - opacity: 0; | |
| 468 | - visibility: hidden; | |
| 469 | - pointer-events: none; | |
| 470 | - transition: opacity 0.15s ease, visibility 0.15s ease; | |
| 471 | - z-index: 200; | |
| 522 | + margin-bottom: 12px; | |
| 523 | + padding-bottom: 8px; | |
| 524 | + border-bottom: 1px solid #e5e7eb; | |
| 472 | 525 | } |
| 473 | 526 | |
| 474 | -.editor-styles-wrapper .bkbg-row:hover .bkbg-row__row-actions, | |
| 475 | -.editor-styles-wrapper .bkbg-row.is-selected .bkbg-row__row-actions, | |
| 476 | -.bkbg-row__row-actions:hover { | |
| 477 | - opacity: 1; | |
| 478 | - visibility: visible; | |
| 479 | - pointer-events: auto; | |
| 527 | +.bkbg-row__structure-title { | |
| 528 | + font-size: 13px; | |
| 529 | + font-weight: 600; | |
| 530 | + color: #1f2937; | |
| 480 | 531 | } |
| 481 | 532 | |
| 482 | -/* Row action button */ | |
| 483 | -.bkbg-row__row-action-btn { | |
| 533 | +.bkbg-row__structure-close { | |
| 534 | + width: 24px !important; | |
| 535 | + height: 24px !important; | |
| 536 | + min-width: 24px !important; | |
| 537 | + padding: 0 !important; | |
| 538 | + background: transparent !important; | |
| 539 | + border: none !important; | |
| 540 | + color: #6b7280 !important; | |
| 541 | +} | |
| 542 | + | |
| 543 | +.bkbg-row__structure-close:hover { | |
| 544 | + color: #1f2937 !important; | |
| 545 | +} | |
| 546 | + | |
| 547 | +/* Visual column bars */ | |
| 548 | +.bkbg-row__structure-columns { | |
| 549 | + display: flex; | |
| 550 | + gap: 2px; | |
| 551 | + height: 32px; | |
| 552 | + background: #f3f4f6; | |
| 553 | + border-radius: 4px; | |
| 554 | + overflow: hidden; | |
| 555 | + margin-bottom: 12px; | |
| 556 | +} | |
| 557 | + | |
| 558 | +.bkbg-row__structure-col { | |
| 559 | + display: flex; | |
| 560 | + align-items: center; | |
| 561 | + justify-content: center; | |
| 562 | + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| 563 | + border-radius: 3px; | |
| 564 | + min-width: 24px; | |
| 565 | + transition: all 0.2s ease; | |
| 566 | +} | |
| 567 | + | |
| 568 | +.bkbg-row__structure-col:hover { | |
| 569 | + filter: brightness(1.1); | |
| 570 | +} | |
| 571 | + | |
| 572 | +.bkbg-row__structure-col-label { | |
| 573 | + font-size: 10px; | |
| 574 | + font-weight: 600; | |
| 575 | + color: #fff; | |
| 576 | + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| 577 | +} | |
| 578 | + | |
| 579 | +/* Action buttons */ | |
| 580 | +.bkbg-row__structure-actions, | |
| 581 | +.bkbg-row__structure-row-actions { | |
| 582 | + display: flex; | |
| 583 | + gap: 8px; | |
| 584 | + margin-bottom: 8px; | |
| 585 | +} | |
| 586 | + | |
| 587 | +.bkbg-row__structure-row-actions { | |
| 588 | + margin-bottom: 0; | |
| 589 | + padding-top: 8px; | |
| 590 | + border-top: 1px solid #e5e7eb; | |
| 591 | +} | |
| 592 | + | |
| 593 | +.bkbg-row__structure-action { | |
| 594 | + flex: 1; | |
| 484 | 595 | display: flex !important; |
| 485 | 596 | align-items: center !important; |
| 486 | 597 | justify-content: center !important; |
| 487 | - width: 22px !important; | |
| 488 | - height: 22px !important; | |
| 489 | - min-width: 22px !important; | |
| 490 | - padding: 0 !important; | |
| 491 | - background: transparent !important; | |
| 598 | + gap: 6px !important; | |
| 599 | + height: 32px !important; | |
| 600 | + padding: 0 12px !important; | |
| 601 | + font-size: 12px !important; | |
| 602 | + font-weight: 500 !important; | |
| 603 | + background: #3b82f6 !important; | |
| 492 | 604 | border: none !important; |
| 493 | - border-radius: 4px !important; | |
| 494 | - color: rgba(59, 130, 246, 0.85) !important; | |
| 605 | + border-radius: 6px !important; | |
| 606 | + color: #fff !important; | |
| 495 | 607 | cursor: pointer !important; |
| 496 | - transition: all 0.1s ease !important; | |
| 497 | - opacity: 0.75; | |
| 608 | + transition: all 0.15s ease !important; | |
| 498 | 609 | } |
| 499 | 610 | |
| 500 | -.bkbg-row__row-action-btn:hover:not(:disabled) { | |
| 501 | - background: rgba(59, 130, 246, 0.10) !important; | |
| 502 | - color: #2563eb !important; | |
| 503 | - opacity: 1; | |
| 611 | +.bkbg-row__structure-action:hover:not(:disabled) { | |
| 612 | + background: #2563eb !important; | |
| 504 | 613 | } |
| 505 | 614 | |
| 506 | -.bkbg-row__row-action-btn:disabled { | |
| 507 | - opacity: 0.2 !important; | |
| 615 | +.bkbg-row__structure-action:disabled { | |
| 616 | + opacity: 0.4 !important; | |
| 508 | 617 | cursor: not-allowed !important; |
| 509 | 618 | } |
| 510 | 619 | |
| 511 | -.bkbg-row__row-action-btn svg { | |
| 512 | - width: 16px !important; | |
| 513 | - height: 16px !important; | |
| 620 | +.bkbg-row__structure-action svg { | |
| 621 | + width: 14px !important; | |
| 622 | + height: 14px !important; | |
| 514 | 623 | fill: currentColor !important; |
| 515 | 624 | } |
| 516 | 625 | |
| 517 | -/* Make dashicon plus look thinner/smaller */ | |
| 518 | -.bkbg-row__row-action-btn .dashicon, | |
| 519 | -.bkbg-row__row-action-btn .dashicons { | |
| 520 | - font-size: 14px; | |
| 521 | - width: 14px; | |
| 522 | - height: 14px; | |
| 626 | +.bkbg-row__structure-action--secondary { | |
| 627 | + background: #f3f4f6 !important; | |
| 628 | + color: #374151 !important; | |
| 523 | 629 | } |
| 524 | 630 | |
| 525 | -/* Add column button - center, highlighted */ | |
| 526 | -.bkbg-row__row-action-btn--add-col { | |
| 527 | - background: rgba(59, 130, 246, 0.12) !important; | |
| 528 | - border: 1px dashed rgba(59, 130, 246, 0.55) !important; | |
| 529 | - color: #2563eb !important; | |
| 530 | - border-radius: 999px !important; | |
| 531 | - opacity: 1; | |
| 631 | +.bkbg-row__structure-action--secondary:hover:not(:disabled) { | |
| 632 | + background: #e5e7eb !important; | |
| 532 | 633 | } |
| 533 | 634 | |
| 534 | -.bkbg-row__row-action-btn--add-col:hover:not(:disabled) { | |
| 535 | - background: rgba(59, 130, 246, 0.18) !important; | |
| 536 | - border-color: #3b82f6 !important; | |
| 537 | - transform: scale(1.1); | |
| 635 | +/* Hide during resize */ | |
| 636 | +.bkbg-row--is-resizing .bkbg-row__structure-trigger { | |
| 637 | + display: none !important; | |
| 538 | 638 | } |
| 539 | 639 | |
| 540 | -/* Hide row actions during resize */ | |
| 541 | -.bkbg-row--is-resizing .bkbg-row__row-actions { | |
| 542 | - display: none !important; | |
| 640 | +/* Inspector: spacing controls */ | |
| 641 | +.block-editor-page .bkbg-spacing-control, | |
| 642 | +.interface-interface-skeleton__editor .bkbg-spacing-control { | |
| 643 | + margin-top: 12px; | |
| 644 | + padding-top: 10px; | |
| 645 | + border-top: 1px solid #e2e8f0; | |
| 543 | 646 | } |
| 544 | 647 | |
| 545 | -.bkbg-row--is-resizing .bkbg-row__row-gear { | |
| 546 | - display: none !important; | |
| 648 | +.block-editor-page .bkbg-spacing-control__title, | |
| 649 | +.interface-interface-skeleton__editor .bkbg-spacing-control__title { | |
| 650 | + font-size: 13px; | |
| 651 | + font-weight: 600; | |
| 652 | + color: #1f2937; | |
| 653 | + margin-bottom: 10px; | |
| 654 | +} | |
| 655 | + | |
| 656 | +.block-editor-page .bkbg-spacing-control__grid, | |
| 657 | +.interface-interface-skeleton__editor .bkbg-spacing-control__grid { | |
| 658 | + display: grid; | |
| 659 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 660 | + gap: 10px 12px; | |
| 661 | +} | |
| 662 | + | |
| 663 | +.block-editor-page .bkbg-spacing-control__item, | |
| 664 | +.interface-interface-skeleton__editor .bkbg-spacing-control__item { | |
| 665 | + min-width: 0; | |
| 666 | +} | |
| 667 | + | |
| 668 | +.block-editor-page .bkbg-spacing-control__label, | |
| 669 | +.interface-interface-skeleton__editor .bkbg-spacing-control__label { | |
| 670 | + display: block; | |
| 671 | + font-size: 12px; | |
| 672 | + font-weight: 500; | |
| 673 | + color: #374151; | |
| 674 | + margin-bottom: 4px; | |
| 675 | +} | |
| 676 | + | |
| 677 | +.block-editor-page .bkbg-spacing-control__row, | |
| 678 | +.interface-interface-skeleton__editor .bkbg-spacing-control__row { | |
| 679 | + display: grid; | |
| 680 | + grid-template-columns: minmax(0, 1fr) 78px; | |
| 681 | + gap: 6px; | |
| 682 | + align-items: center; | |
| 683 | +} | |
| 684 | + | |
| 685 | +.block-editor-page .bkbg-spacing-control__custom-unit, | |
| 686 | +.interface-interface-skeleton__editor .bkbg-spacing-control__custom-unit { | |
| 687 | + margin-top: 6px; | |
| 547 | 688 | } |
