| @@ -3,8 +3,53 @@ | ||
| 3 | 3 | * Common styles for all blocks in editor |
| 4 | 4 | */ |
| 5 | 5 | |
| 6 | 6 | /* ======================================== |
| 7 | + Color Panel: Make PanelColorSettings | |
| 8 | + collapsible (ToolsPanel → PanelBody style) | |
| 9 | + ======================================== */ | |
| 10 | + | |
| 11 | +/* The ToolsPanel header becomes our toggle trigger */ | |
| 12 | +.block-editor-panel-color-gradient-settings { | |
| 13 | + border-top: 1px solid #e0e0e0; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.block-editor-panel-color-gradient-settings .components-tools-panel-header { | |
| 17 | + cursor: pointer; | |
| 18 | + user-select: none; | |
| 19 | + position: relative; | |
| 20 | + padding-right: 36px; | |
| 21 | +} | |
| 22 | + | |
| 23 | +/* Chevron indicator */ | |
| 24 | +.block-editor-panel-color-gradient-settings .components-tools-panel-header::after { | |
| 25 | + content: ''; | |
| 26 | + position: absolute; | |
| 27 | + right: 16px; | |
| 28 | + top: 50%; | |
| 29 | + width: 6px; | |
| 30 | + height: 6px; | |
| 31 | + border-right: 2px solid #1e1e1e; | |
| 32 | + border-bottom: 2px solid #1e1e1e; | |
| 33 | + transform: translateY(-50%) rotate(45deg); | |
| 34 | + transition: transform .2s ease; | |
| 35 | +} | |
| 36 | + | |
| 37 | +/* Collapsed state */ | |
| 38 | +.block-editor-panel-color-gradient-settings.bkbg-panel-collapsed .components-tools-panel-header::after { | |
| 39 | + transform: translateY(-50%) rotate(-45deg); | |
| 40 | +} | |
| 41 | + | |
| 42 | +.block-editor-panel-color-gradient-settings.bkbg-panel-collapsed > *:not(.components-tools-panel-header) { | |
| 43 | + display: none !important; | |
| 44 | +} | |
| 45 | + | |
| 46 | +/* Hide the native ⋮ dropdown menu — we keep reset via our chevron */ | |
| 47 | +.block-editor-panel-color-gradient-settings .components-tools-panel-header .components-dropdown-menu { | |
| 48 | + display: none; | |
| 49 | +} | |
| 50 | + | |
| 51 | +/* ======================================== | |
| 7 | 52 | Block Inserter: BKB Badge on Icons |
| 8 | 53 | ======================================== */ |
| 9 | 54 | |
| 10 | 55 | /* Target Blockenberg blocks in block inserter */ |
| @@ -1436,4 +1481,288 @@ | ||
| 1436 | 1481 | font-size: 12px; |
| 1437 | 1482 | color: #757575; |
| 1438 | 1483 | min-width: 30px; |
| 1439 | 1484 | } |
| 1485 | + | |
| 1486 | +/* ======================================== | |
| 1487 | + Typography Control (Elementor-style) | |
| 1488 | + ======================================== */ | |
| 1489 | + | |
| 1490 | +/* Label row: "Title [✏]" */ | |
| 1491 | +.bkbg-typo-control { | |
| 1492 | + margin-bottom: 4px; | |
| 1493 | +} | |
| 1494 | + | |
| 1495 | +.bkbg-typo-label-row { | |
| 1496 | + display: flex; | |
| 1497 | + align-items: center; | |
| 1498 | + justify-content: space-between; | |
| 1499 | + padding: 6px 0; | |
| 1500 | + border-bottom: 1px solid #f0f0f0; | |
| 1501 | + min-height: 36px; | |
| 1502 | +} | |
| 1503 | + | |
| 1504 | +.bkbg-typo-label { | |
| 1505 | + font-size: 13px; | |
| 1506 | + font-weight: 500; | |
| 1507 | + color: #4f5b66; | |
| 1508 | + flex: 1; | |
| 1509 | +} | |
| 1510 | + | |
| 1511 | +.bkbg-typo-label.has-value { | |
| 1512 | + color: #1e1e1e; | |
| 1513 | +} | |
| 1514 | + | |
| 1515 | +.bkbg-typo-edit-btn { | |
| 1516 | + display: flex !important; | |
| 1517 | + align-items: center !important; | |
| 1518 | + justify-content: center !important; | |
| 1519 | + width: 30px !important; | |
| 1520 | + height: 30px !important; | |
| 1521 | + min-width: 30px !important; | |
| 1522 | + padding: 0 !important; | |
| 1523 | + border: 1px solid #e0e0e0 !important; | |
| 1524 | + border-radius: 4px !important; | |
| 1525 | + background: #f8f9fa !important; | |
| 1526 | + color: #757575 !important; | |
| 1527 | + transition: all 0.15s ease !important; | |
| 1528 | + flex-shrink: 0; | |
| 1529 | +} | |
| 1530 | + | |
| 1531 | +.bkbg-typo-edit-btn:hover, | |
| 1532 | +.bkbg-typo-edit-btn.has-value { | |
| 1533 | + border-color: #8668ff !important; | |
| 1534 | + color: #8668ff !important; | |
| 1535 | + background: #f4f0ff !important; | |
| 1536 | +} | |
| 1537 | + | |
| 1538 | +/* Typography popover panel */ | |
| 1539 | +.bkbg-typo-popover .components-popover__content { | |
| 1540 | + padding: 0 !important; | |
| 1541 | + min-width: 280px !important; | |
| 1542 | + max-width: 310px !important; | |
| 1543 | + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important; | |
| 1544 | + border-radius: 8px !important; | |
| 1545 | + overflow-x: hidden !important; | |
| 1546 | + overflow-y: scroll !important; | |
| 1547 | + border: 1px solid #e0e0e0 !important; | |
| 1548 | +} | |
| 1549 | + | |
| 1550 | +/* macOS-style scrollbar — always visible, light grey */ | |
| 1551 | +.bkbg-typo-popover .components-popover__content::-webkit-scrollbar { | |
| 1552 | + width: 6px; | |
| 1553 | +} | |
| 1554 | +.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-track { | |
| 1555 | + background: transparent; | |
| 1556 | + border-radius: 0 8px 8px 0; | |
| 1557 | +} | |
| 1558 | +.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-thumb { | |
| 1559 | + background: #d0d0d0; | |
| 1560 | + border-radius: 3px; | |
| 1561 | + transition: background 0.2s; | |
| 1562 | +} | |
| 1563 | +.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-thumb:hover { | |
| 1564 | + background: #b8b8b8; | |
| 1565 | +} | |
| 1566 | +.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-button { | |
| 1567 | + display: none; | |
| 1568 | +} | |
| 1569 | + | |
| 1570 | +.bkbg-typo-panel { | |
| 1571 | + background: #fff; | |
| 1572 | + border-radius: 8px; | |
| 1573 | + overflow: hidden; | |
| 1574 | +} | |
| 1575 | + | |
| 1576 | +/* Panel header */ | |
| 1577 | +.bkbg-typo-panel-header { | |
| 1578 | + display: flex; | |
| 1579 | + align-items: center; | |
| 1580 | + justify-content: space-between; | |
| 1581 | + padding: 12px 14px 10px; | |
| 1582 | + background: #fafafa; | |
| 1583 | + border-bottom: 1px solid #ebebeb; | |
| 1584 | +} | |
| 1585 | + | |
| 1586 | +.bkbg-typo-panel-title { | |
| 1587 | + font-size: 12px; | |
| 1588 | + font-weight: 700; | |
| 1589 | + text-transform: uppercase; | |
| 1590 | + letter-spacing: 0.6px; | |
| 1591 | + color: #4f5b66; | |
| 1592 | +} | |
| 1593 | + | |
| 1594 | +.bkbg-typo-panel-actions { | |
| 1595 | + display: flex; | |
| 1596 | + align-items: center; | |
| 1597 | + gap: 4px; | |
| 1598 | +} | |
| 1599 | + | |
| 1600 | +.bkbg-typo-header-btn { | |
| 1601 | + display: flex !important; | |
| 1602 | + align-items: center !important; | |
| 1603 | + justify-content: center !important; | |
| 1604 | + width: 24px !important; | |
| 1605 | + height: 24px !important; | |
| 1606 | + min-width: 24px !important; | |
| 1607 | + padding: 0 !important; | |
| 1608 | + border-radius: 4px !important; | |
| 1609 | + color: #757575 !important; | |
| 1610 | + background: transparent !important; | |
| 1611 | + border: none !important; | |
| 1612 | +} | |
| 1613 | + | |
| 1614 | +.bkbg-typo-header-btn:hover { | |
| 1615 | + background: #f0f0f0 !important; | |
| 1616 | + color: #1e1e1e !important; | |
| 1617 | +} | |
| 1618 | + | |
| 1619 | +/* Individual field row */ | |
| 1620 | +.bkbg-typo-field { | |
| 1621 | + padding: 8px 14px; | |
| 1622 | + border-bottom: 1px solid #f5f5f5; | |
| 1623 | +} | |
| 1624 | + | |
| 1625 | +.bkbg-typo-field:last-child { | |
| 1626 | + border-bottom: none; | |
| 1627 | +} | |
| 1628 | + | |
| 1629 | +.bkbg-typo-field-label { | |
| 1630 | + display: block; | |
| 1631 | + font-size: 11px; | |
| 1632 | + font-weight: 600; | |
| 1633 | + text-transform: uppercase; | |
| 1634 | + letter-spacing: 0.4px; | |
| 1635 | + color: #888; | |
| 1636 | + margin-bottom: 6px; | |
| 1637 | +} | |
| 1638 | + | |
| 1639 | +.bkbg-typo-field .components-select-control__input, | |
| 1640 | +.bkbg-typo-field .components-base-control, | |
| 1641 | +.bkbg-typo-field .components-input-control { | |
| 1642 | + margin-bottom: 0 !important; | |
| 1643 | +} | |
| 1644 | + | |
| 1645 | +/* Responsive field (has device + unit selectors) */ | |
| 1646 | +.bkbg-typo-responsive-field { | |
| 1647 | + padding-bottom: 12px; | |
| 1648 | +} | |
| 1649 | + | |
| 1650 | +.bkbg-typo-field-header { | |
| 1651 | + display: flex; | |
| 1652 | + align-items: center; | |
| 1653 | + justify-content: space-between; | |
| 1654 | + margin-bottom: 8px; | |
| 1655 | +} | |
| 1656 | + | |
| 1657 | +.bkbg-typo-field-header-right { | |
| 1658 | + display: flex; | |
| 1659 | + align-items: center; | |
| 1660 | + gap: 4px; | |
| 1661 | +} | |
| 1662 | + | |
| 1663 | +/* Slider + number input row */ | |
| 1664 | +.bkbg-typo-slider-row { | |
| 1665 | + display: flex; | |
| 1666 | + align-items: center; | |
| 1667 | + gap: 8px; | |
| 1668 | +} | |
| 1669 | + | |
| 1670 | +.bkbg-typo-range { | |
| 1671 | + flex: 1; | |
| 1672 | + -webkit-appearance: none; | |
| 1673 | + appearance: none; | |
| 1674 | + height: 4px; | |
| 1675 | + background: #e0e0e0; | |
| 1676 | + border-radius: 2px; | |
| 1677 | + outline: none; | |
| 1678 | + cursor: pointer; | |
| 1679 | +} | |
| 1680 | + | |
| 1681 | +.bkbg-typo-range::-webkit-slider-thumb { | |
| 1682 | + -webkit-appearance: none; | |
| 1683 | + appearance: none; | |
| 1684 | + width: 14px; | |
| 1685 | + height: 14px; | |
| 1686 | + border-radius: 50%; | |
| 1687 | + background: #8668ff; | |
| 1688 | + cursor: pointer; | |
| 1689 | + box-shadow: 0 1px 4px rgba(134, 104, 255, 0.4); | |
| 1690 | +} | |
| 1691 | + | |
| 1692 | +.bkbg-typo-range::-moz-range-thumb { | |
| 1693 | + width: 14px; | |
| 1694 | + height: 14px; | |
| 1695 | + border-radius: 50%; | |
| 1696 | + background: #8668ff; | |
| 1697 | + cursor: pointer; | |
| 1698 | + border: none; | |
| 1699 | +} | |
| 1700 | + | |
| 1701 | +.bkbg-typo-number { | |
| 1702 | + width: 52px !important; | |
| 1703 | + min-width: 52px !important; | |
| 1704 | + padding: 4px 6px !important; | |
| 1705 | + border: 1px solid #e0e0e0 !important; | |
| 1706 | + border-radius: 4px !important; | |
| 1707 | + font-size: 12px !important; | |
| 1708 | + text-align: center !important; | |
| 1709 | + color: #1e1e1e !important; | |
| 1710 | + background: #fff !important; | |
| 1711 | + transition: border-color 0.15s ease !important; | |
| 1712 | +} | |
| 1713 | + | |
| 1714 | +.bkbg-typo-number:focus { | |
| 1715 | + border-color: #8668ff !important; | |
| 1716 | + outline: none !important; | |
| 1717 | + box-shadow: 0 0 0 1px rgba(134, 104, 255, 0.25) !important; | |
| 1718 | +} | |
| 1719 | + | |
| 1720 | +/* Scope unit/device popovers inside typo popover */ | |
| 1721 | +.bkbg-typo-popover .bkbg-unit-btn { | |
| 1722 | + font-size: 11px !important; | |
| 1723 | +} | |
| 1724 | + | |
| 1725 | +/* Custom HTML is used as full-width page sections. Theme content-size otherwise boxes and centers it. | |
| 1726 | + Do not use 100vw here: it includes the scrollbar and padding, so sections overflow the canvas. */ | |
| 1727 | +.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] { | |
| 1728 | + max-width: none !important; | |
| 1729 | + width: 100%; | |
| 1730 | + box-sizing: border-box; | |
| 1731 | + overflow-x: clip; | |
| 1732 | +} | |
| 1733 | + | |
| 1734 | +.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-editor-block-list__block[data-type="core/html"] { | |
| 1735 | + margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important; | |
| 1736 | + margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important; | |
| 1737 | + width: auto !important; | |
| 1738 | + max-width: none !important; | |
| 1739 | +} | |
| 1740 | + | |
| 1741 | +.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] > :where(section, div, header, footer, article, main, aside), | |
| 1742 | +.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] .block-editor-inner-content > :where(section, div, header, footer, article, main, aside) { | |
| 1743 | + box-sizing: border-box !important; | |
| 1744 | + width: 100% !important; | |
| 1745 | + max-width: 100% !important; | |
| 1746 | + margin-left: 0 !important; | |
| 1747 | + margin-right: 0 !important; | |
| 1748 | + left: auto !important; | |
| 1749 | + transform: none !important; | |
| 1750 | +} | |
| 1751 | + | |
| 1752 | +.editor-styles-wrapper.bkbg-ai-html-picking [data-type="core/html"] { | |
| 1753 | + cursor: crosshair; | |
| 1754 | +} | |
| 1755 | + | |
| 1756 | +.editor-styles-wrapper [data-bkbg-html-target] { | |
| 1757 | + outline: 2px solid #8668ff; | |
| 1758 | + outline-offset: 3px; | |
| 1759 | + position: relative; | |
| 1760 | +} | |
| 1761 | + | |
| 1762 | +.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] img, | |
| 1763 | +.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] video, | |
| 1764 | +.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] iframe { | |
| 1765 | + max-width: 100%; | |
| 1766 | + height: auto; | |
| 1767 | +} | |
| 1768 | + | |
