PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.86
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.86
51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 All 40 releases
← All changes | includes/admin/layouts/shared/admin-v3-styles.css +326 -15 51.1.78 → 51.1.86 View file →
@@ -70,8 +70,9 @@
70 70
71 71 /* ===== HEADER ===== */
72 72 .ka-admin-header {
73 73 display: flex;
74 + flex-wrap: wrap;
74 75 justify-content: space-between;
75 76 align-items: flex-start;
76 77 margin-bottom: 48px;
77 78 gap: 24px;
@@ -77,8 +78,15 @@
77 78 gap: 24px;
78 79 }
79 80
80 81 .ka-admin-header-left {
82 + /* Keep the title readable instead of letting the action group squeeze it;
83 + below this width the header wraps onto two rows. */
84 + flex: 1 1 420px;
85 + min-width: 0;
86 +}
87 +
88 +.ka-admin-header-left {
81 89 display: flex;
82 90 align-items: flex-start;
83 91 gap: 20px;
84 92 }
@@ -365,8 +373,38 @@
365 373 box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3) !important;
366 374 color: #f5f5f7 !important;
367 375 }
368 376
377 +/*
378 + * WordPress core colours the text inside a notice explicitly:
379 + *
380 + * .notice p, .notice-title, div.error p, div.updated p { color: #1e1e1e; }
381 + *
382 + * Colouring only the .notice container above leaves that untouched, because an
383 + * explicit rule always beats an inherited value - so the paragraph stayed dark
384 + * on the dark background and the message was unreadable.
385 + */
386 +body.ka-admin-v3.ka-v3-dark .notice p,
387 +body.ka-admin-v3.ka-v3-dark .notice li,
388 +body.ka-admin-v3.ka-v3-dark .notice .notice-title,
389 +body.ka-admin-v3.ka-v3-dark .updated p,
390 +body.ka-admin-v3.ka-v3-dark .error p,
391 +body.ka-admin-v3.ka-dark-theme .notice p,
392 +body.ka-admin-v3.ka-dark-theme .notice li,
393 +body.ka-admin-v3.ka-dark-theme .notice .notice-title,
394 +body.ka-admin-v3.ka-dark-theme .updated p,
395 +body.ka-admin-v3.ka-dark-theme .error p {
396 + color: #f5f5f7;
397 +}
398 +
399 +body.toplevel_page_king-addons.ka-v3-dark .notice p,
400 +body.toplevel_page_king-addons.ka-v3-dark .notice li,
401 +body.toplevel_page_king-addons.ka-v3-dark .notice .notice-title,
402 +body.toplevel_page_king-addons.ka-v3-dark .updated p,
403 +body.toplevel_page_king-addons.ka-v3-dark .error p {
404 + color: #f5f5f7 !important;
405 +}
406 +
369 407 body.ka-admin-v3 .notice p,
370 408 body.ka-admin-v3 .updated p,
371 409 body.ka-admin-v3 .error p,
372 410 .ka-admin-wrap .notice p,
@@ -699,31 +737,103 @@
699 737 color: #1d1d1f;
700 738 cursor: pointer;
701 739 }
702 740
741 +.ka-admin-wrap .ka-radio-item:has(> span) {
742 + align-items: flex-start;
743 +}
744 +
745 +body.ka-admin-v3 .ka-admin-wrap input[type="radio"],
703 746 .ka-radio-item input[type="radio"] {
704 - width: 20px;
705 - height: 20px;
706 - accent-color: #0071e3;
747 + appearance: none;
748 + -webkit-appearance: none;
749 + width: 18px;
750 + height: 18px;
751 + min-width: 18px;
752 + min-height: 18px;
753 + margin: 0;
754 + padding: 0 !important;
755 + flex: 0 0 auto;
756 + border: 2px solid #c7c7cc;
757 + border-radius: 50%;
758 + background-color: #fff;
759 + background-image: none;
760 + background-clip: padding-box;
761 + box-shadow: none;
762 + color: transparent;
763 + cursor: pointer;
764 + outline: none;
765 + line-height: 0;
766 + vertical-align: middle;
767 + transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
707 768 }
708 769
709 -/* WP Admin renders radio dots via ::before in some contexts; align it with our accent color */
770 +.ka-admin-wrap .ka-radio-item:has(> span) input[type="radio"] {
771 + margin-top: 3px;
772 +}
773 +
774 +body.ka-admin-v3 .ka-admin-wrap input[type="radio"]::before,
710 775 body.ka-admin-v3 .ka-admin-wrap input[type="radio"]:checked::before,
711 -body.ka-admin-v3 .ka-admin-wrap .ka-radio-item input[type="radio"]:checked::before {
712 - content: "";
713 - border-radius: 50%;
714 - width: 10px;
715 - height: 10px;
716 - margin: 4px;
717 - background-color: #0071e3;
718 - line-height: 1.14285714;
776 +.ka-radio-item input[type="radio"]::before,
777 +.ka-radio-item input[type="radio"]:checked::before {
778 + content: none !important;
779 + display: none !important;
719 780 }
720 781
721 -body.ka-admin-v3.ka-v3-dark .ka-admin-wrap input[type="radio"]:checked::before,
722 -body.ka-admin-v3.ka-v3-dark .ka-admin-wrap .ka-radio-item input[type="radio"]:checked::before {
723 - background-color: #0a84ff;
782 +body.ka-admin-v3 .ka-admin-wrap input[type="radio"]:hover:not(:checked):not(:disabled),
783 +.ka-radio-item input[type="radio"]:hover:not(:checked):not(:disabled) {
784 + border-color: #8e8e93;
724 785 }
725 786
787 +body.ka-admin-v3 .ka-admin-wrap input[type="radio"]:checked,
788 +.ka-radio-item input[type="radio"]:checked {
789 + border-color: #0071e3;
790 + background-color: #fff;
791 + background-image: radial-gradient(circle, #0071e3 0 4px, transparent 4.5px);
792 +}
793 +
794 +body.ka-admin-v3 .ka-admin-wrap input[type="radio"]:focus,
795 +.ka-radio-item input[type="radio"]:focus {
796 + border-color: #0071e3;
797 + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22);
798 + outline: none;
799 +}
800 +
801 +body.ka-admin-v3 .ka-admin-wrap input[type="radio"]:focus:not(:focus-visible),
802 +.ka-radio-item input[type="radio"]:focus:not(:focus-visible) {
803 + box-shadow: none;
804 +}
805 +
806 +body.ka-admin-v3 .ka-admin-wrap input[type="radio"]:disabled,
807 +.ka-radio-item input[type="radio"]:disabled {
808 + opacity: 0.45;
809 + cursor: not-allowed;
810 +}
811 +
812 +body.ka-admin-v3.ka-v3-dark .ka-admin-wrap input[type="radio"],
813 +body.ka-v3-dark .ka-radio-item input[type="radio"] {
814 + background-color: #1c1c1e;
815 + border-color: #636366;
816 +}
817 +
818 +body.ka-admin-v3.ka-v3-dark .ka-admin-wrap input[type="radio"]:hover:not(:checked):not(:disabled),
819 +body.ka-v3-dark .ka-radio-item input[type="radio"]:hover:not(:checked):not(:disabled) {
820 + border-color: #8e8e93;
821 +}
822 +
823 +body.ka-admin-v3.ka-v3-dark .ka-admin-wrap input[type="radio"]:checked,
824 +body.ka-v3-dark .ka-radio-item input[type="radio"]:checked {
825 + border-color: #0a84ff;
826 + background-color: #1c1c1e;
827 + background-image: radial-gradient(circle, #0a84ff 0 4px, transparent 4.5px);
828 +}
829 +
830 +body.ka-admin-v3.ka-v3-dark .ka-admin-wrap input[type="radio"]:focus,
831 +body.ka-v3-dark .ka-radio-item input[type="radio"]:focus {
832 + border-color: #0a84ff;
833 + box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.28);
834 +}
835 +
726 836 /* ===== COLOR PICKER ===== */
727 837 .ka-color-wrap {
728 838 display: flex;
729 839 align-items: center;
@@ -1320,8 +1430,20 @@
1320 1430 body.ka-v3-dark .ka-upgrade-card li {
1321 1431 color: #f5f5f7;
1322 1432 }
1323 1433
1434 +/*
1435 + * The card gets a dark background above, but WordPress core colours headings
1436 + * explicitly with `h2, h3 { color: #1d2327 }`, which beats inheritance - so the
1437 + * title stayed near-black on the dark card.
1438 + */
1439 +body.ka-v3-dark .ka-pro-notice h2,
1440 +body.ka-v3-dark .ka-pro-notice h3,
1441 +body.ka-v3-dark .ka-upgrade-card h2,
1442 +body.ka-v3-dark .ka-upgrade-card h3 {
1443 + color: #f5f5f7;
1444 +}
1445 +
1324 1446 body.ka-v3-dark .ka-empty {
1325 1447 color: #86868b;
1326 1448 }
1327 1449
@@ -1437,5 +1559,194 @@
1437 1559 }
1438 1560
1439 1561 .wp-picker-container input.wp-color-picker {
1440 1562 max-width: 100px !important;
1563 +}
1564 +
1565 +/* ==========================================================================
1566 + Shared form pieces for extension screens (page-shell.php)
1567 + ========================================================================== */
1568 +
1569 +.ka-admin-wrap .ka-check {
1570 + display: flex;
1571 + align-items: flex-start;
1572 + gap: 10px;
1573 + font-size: 15px;
1574 + color: #1d1d1f;
1575 + cursor: pointer;
1576 + line-height: 1.4;
1577 +}
1578 +
1579 +.ka-admin-wrap .ka-check input[type="checkbox"] {
1580 + width: 18px;
1581 + height: 18px;
1582 + margin: 1px 0 0;
1583 + accent-color: #0071e3;
1584 + flex: 0 0 auto;
1585 +}
1586 +
1587 +.ka-admin-wrap .ka-check-group {
1588 + display: flex;
1589 + flex-direction: column;
1590 + gap: 10px;
1591 +}
1592 +
1593 +/* A radio with a bold title and a line of explanation under it. */
1594 +
1595 +.ka-admin-wrap .ka-radio-item > span {
1596 + display: flex;
1597 + flex-direction: column;
1598 + gap: 2px;
1599 +}
1600 +
1601 +.ka-admin-wrap .ka-radio-item em {
1602 + font-style: normal;
1603 + font-size: 13px;
1604 + color: #6e6e73;
1605 +}
1606 +
1607 +.ka-admin-wrap .ka-inline-field {
1608 + display: flex;
1609 + align-items: center;
1610 + gap: 8px;
1611 + margin: 12px 0 0;
1612 +}
1613 +
1614 +.ka-admin-wrap .ka-inline-field label {
1615 + font-size: 13px;
1616 + color: #6e6e73;
1617 +}
1618 +
1619 +.ka-admin-wrap .ka-color-row {
1620 + display: flex;
1621 + flex-wrap: wrap;
1622 + gap: 18px;
1623 +}
1624 +
1625 +.ka-admin-wrap .ka-color-wrap {
1626 + display: inline-flex;
1627 + align-items: center;
1628 + gap: 8px;
1629 + font-size: 14px;
1630 + color: #1d1d1f;
1631 + cursor: pointer;
1632 +}
1633 +
1634 +.ka-admin-wrap .ka-color-wrap input[type="color"] {
1635 + width: 42px;
1636 + height: 30px;
1637 + padding: 2px;
1638 + border: 1px solid #d2d2d7;
1639 + border-radius: 8px;
1640 + background: #fff;
1641 + cursor: pointer;
1642 +}
1643 +
1644 +.ka-admin-wrap .ka-submit {
1645 + margin: 24px 0 0;
1646 +}
1647 +
1648 +/* Long single-line inputs should fill the field column rather than sit at
1649 + WordPress's default width. */
1650 +.ka-admin-wrap .ka-row-field > input[type="text"],
1651 +.ka-admin-wrap .ka-row-field > input[type="url"],
1652 +.ka-admin-wrap .ka-row-field > input[type="email"],
1653 +.ka-admin-wrap .ka-row-field > textarea {
1654 + width: 100%;
1655 + max-width: 520px;
1656 +}
1657 +
1658 +.ka-admin-wrap .ka-code-editor {
1659 + width: 100%;
1660 + min-height: 260px;
1661 + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1662 + font-size: 13px;
1663 + line-height: 1.55;
1664 + tab-size: 2;
1665 +}
1666 +
1667 +/* Dark theme */
1668 +body.ka-v3-dark .ka-admin-wrap .ka-check,
1669 +body.ka-v3-dark .ka-admin-wrap .ka-color-wrap,
1670 +body.ka-v3-dark .ka-admin-wrap .ka-radio-item {
1671 + color: #f5f5f7;
1672 +}
1673 +
1674 +body.ka-v3-dark .ka-admin-wrap .ka-radio-item em,
1675 +body.ka-v3-dark .ka-admin-wrap .ka-inline-field label {
1676 + color: #a1a1a6;
1677 +}
1678 +
1679 +body.ka-v3-dark .ka-admin-wrap .ka-color-wrap input[type="color"] {
1680 + border-color: #3a3a3c;
1681 + background: #1c1c1e;
1682 +}
1683 +
1684 +/* --- My Account endpoint cards ------------------------------------------ */
1685 +
1686 +.ka-admin-wrap .ka-endpoint-card .ka-card-header {
1687 + display: flex;
1688 + align-items: center;
1689 + gap: 10px;
1690 + flex-wrap: wrap;
1691 +}
1692 +
1693 +.ka-admin-wrap .ka-endpoint-slug {
1694 + font-size: 12px;
1695 + padding: 2px 8px;
1696 + border-radius: 6px;
1697 + background: #f5f5f7;
1698 + color: #6e6e73;
1699 +}
1700 +
1701 +.ka-admin-wrap .ka-endpoint-toggle {
1702 + margin-left: auto;
1703 + font-size: 14px;
1704 +}
1705 +
1706 +/* A hidden endpoint still needs to be readable and editable, so this is a
1707 + dimmed state rather than a greyed-out one. */
1708 +.ka-admin-wrap .ka-endpoint-card.is-off .ka-card-header h2,
1709 +.ka-admin-wrap .ka-endpoint-card.is-off .ka-endpoint-slug {
1710 + opacity: .55;
1711 +}
1712 +
1713 +.ka-admin-wrap .ka-check-group--inline {
1714 + flex-direction: row;
1715 + flex-wrap: wrap;
1716 + gap: 8px 20px;
1717 +}
1718 +
1719 +.ka-admin-wrap .ka-row--danger .ka-btn-secondary {
1720 + color: #c0392b;
1721 + border-color: #e6b8b2;
1722 +}
1723 +
1724 +.ka-admin-wrap .ka-row--danger .ka-btn-secondary:hover {
1725 + background: #fdf1ef;
1726 + border-color: #c0392b;
1727 +}
1728 +
1729 +body.ka-v3-dark .ka-admin-wrap .ka-endpoint-slug {
1730 + background: #2c2c2e;
1731 + color: #a1a1a6;
1732 +}
1733 +
1734 +body.ka-v3-dark .ka-admin-wrap .ka-row--danger .ka-btn-secondary {
1735 + color: #ff6b5e;
1736 + border-color: #5a3a37;
1737 +}
1738 +
1739 +body.ka-v3-dark .ka-admin-wrap .ka-row--danger .ka-btn-secondary:hover {
1740 + background: #3a2523;
1741 + border-color: #ff6b5e;
1742 +}
1743 +
1744 +/* Right-align the button column of a shared table. */
1745 +.ka-admin-wrap .ka-table .ka-table-actions {
1746 + text-align: right;
1747 + white-space: nowrap;
1748 +}
1749 +
1750 +.ka-admin-wrap .ka-table .ka-table-actions .ka-btn + .ka-btn {
1751 + margin-left: 6px;
1441 1752 }