← All changes
|
includes/admin/layouts/shared/admin-v3-styles.css
+442
-14
51.1.44
→
51.1.87
View file →
| @@ -1,6 +1,6 @@ | ||
| 1 | 1 | /** |
| 2 | - * Shared Admin V3 Styles - Apple-inspired "Pro" UI | |
| 2 | + * Shared Admin V3 Styles - Premium style inspired "Pro" UI | |
| 3 | 3 | * |
| 4 | 4 | * Modern, premium design with glassmorphism and iOS aesthetics. |
| 5 | 5 | * Shared across Settings, Wishlist, and Analytics pages. |
| 6 | 6 | * |
| @@ -6,8 +6,16 @@ | ||
| 6 | 6 | * |
| 7 | 7 | * @package King_Addons |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | +@font-face { | |
| 11 | + font-family: 'Inter'; | |
| 12 | + font-style: normal; | |
| 13 | + font-weight: 100 900; | |
| 14 | + font-display: swap; | |
| 15 | + src: url('../../fonts/Inter.woff2') format('woff2'); | |
| 16 | +} | |
| 17 | + | |
| 10 | 18 | /* ===== RESET & BASE ===== */ |
| 11 | 19 | body.ka-admin-v3 #wpcontent, |
| 12 | 20 | body.ka-admin-v3 #wpbody, |
| 13 | 21 | body.ka-admin-v3 #wpbody-content { |
| @@ -26,9 +34,9 @@ | ||
| 26 | 34 | background: #000000 !important; |
| 27 | 35 | } |
| 28 | 36 | |
| 29 | 37 | .ka-admin-wrap { |
| 30 | - font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| 38 | + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| 31 | 39 | max-width: 1200px; |
| 32 | 40 | margin: 0 auto; |
| 33 | 41 | padding: 60px 40px; |
| 34 | 42 | color: #1d1d1f; |
| @@ -62,8 +70,9 @@ | ||
| 62 | 70 | |
| 63 | 71 | /* ===== HEADER ===== */ |
| 64 | 72 | .ka-admin-header { |
| 65 | 73 | display: flex; |
| 74 | + flex-wrap: wrap; | |
| 66 | 75 | justify-content: space-between; |
| 67 | 76 | align-items: flex-start; |
| 68 | 77 | margin-bottom: 48px; |
| 69 | 78 | gap: 24px; |
| @@ -69,8 +78,15 @@ | ||
| 69 | 78 | gap: 24px; |
| 70 | 79 | } |
| 71 | 80 | |
| 72 | 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 { | |
| 73 | 89 | display: flex; |
| 74 | 90 | align-items: flex-start; |
| 75 | 91 | gap: 20px; |
| 76 | 92 | } |
| @@ -118,8 +134,13 @@ | ||
| 118 | 134 | gap: 12px; |
| 119 | 135 | align-items: center; |
| 120 | 136 | } |
| 121 | 137 | |
| 138 | +/* ===== FOOTER ===== */ | |
| 139 | +#wpfooter { | |
| 140 | + visibility: visible; | |
| 141 | +} | |
| 142 | + | |
| 122 | 143 | /* ===== BUTTONS ===== */ |
| 123 | 144 | .ka-btn { |
| 124 | 145 | display: inline-flex; |
| 125 | 146 | align-items: center; |
| @@ -273,23 +294,27 @@ | ||
| 273 | 294 | .ka-v3-segmented-btn[aria-pressed="false"] { |
| 274 | 295 | color: rgba(29, 29, 31, 0.7); |
| 275 | 296 | } |
| 276 | 297 | |
| 277 | -body.ka-admin-v3.ka-v3-dark .ka-v3-segmented { | |
| 298 | +body.ka-admin-v3.ka-v3-dark .ka-v3-segmented, | |
| 299 | +body.ka-v3-dark .ka-v3-segmented { | |
| 278 | 300 | background: rgba(255, 255, 255, 0.1); |
| 279 | 301 | border-color: rgba(255, 255, 255, 0.1); |
| 280 | 302 | } |
| 281 | 303 | |
| 282 | -body.ka-admin-v3.ka-v3-dark .ka-v3-segmented-indicator { | |
| 304 | +body.ka-admin-v3.ka-v3-dark .ka-v3-segmented-indicator, | |
| 305 | +body.ka-v3-dark .ka-v3-segmented-indicator { | |
| 283 | 306 | background: rgba(255, 255, 255, 0.1); |
| 284 | 307 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); |
| 285 | 308 | } |
| 286 | 309 | |
| 287 | -body.ka-admin-v3.ka-v3-dark .ka-v3-segmented-btn { | |
| 310 | +body.ka-admin-v3.ka-v3-dark .ka-v3-segmented-btn, | |
| 311 | +body.ka-v3-dark .ka-v3-segmented-btn { | |
| 288 | 312 | color: #f5f5f7; |
| 289 | 313 | } |
| 290 | 314 | |
| 291 | -body.ka-admin-v3.ka-v3-dark .ka-v3-segmented-btn[aria-pressed="false"] { | |
| 315 | +body.ka-admin-v3.ka-v3-dark .ka-v3-segmented-btn[aria-pressed="false"], | |
| 316 | +body.ka-v3-dark .ka-v3-segmented-btn[aria-pressed="false"] { | |
| 292 | 317 | color: rgba(245, 245, 247, 0.72); |
| 293 | 318 | } |
| 294 | 319 | |
| 295 | 320 | |
| @@ -348,8 +373,38 @@ | ||
| 348 | 373 | box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3) !important; |
| 349 | 374 | color: #f5f5f7 !important; |
| 350 | 375 | } |
| 351 | 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 | + | |
| 352 | 407 | body.ka-admin-v3 .notice p, |
| 353 | 408 | body.ka-admin-v3 .updated p, |
| 354 | 409 | body.ka-admin-v3 .error p, |
| 355 | 410 | .ka-admin-wrap .notice p, |
| @@ -382,9 +437,9 @@ | ||
| 382 | 437 | body.ka-admin-v3.ka-dark-theme .notice .notice-dismiss:focus:before { |
| 383 | 438 | color: rgba(245, 245, 247, 0.92); |
| 384 | 439 | } |
| 385 | 440 | |
| 386 | -/* Subtle left accent like Apple callouts */ | |
| 441 | +/* Subtle left accent like callouts */ | |
| 387 | 442 | body.ka-admin-v3 .notice, |
| 388 | 443 | body.ka-admin-v3 .updated, |
| 389 | 444 | body.ka-admin-v3 .error, |
| 390 | 445 | .ka-admin-wrap .notice, |
| @@ -563,8 +618,9 @@ | ||
| 563 | 618 | .ka-row-field input[type="text"], |
| 564 | 619 | .ka-row-field input[type="number"], |
| 565 | 620 | .ka-row-field input[type="password"], |
| 566 | 621 | .ka-row-field input[type="email"], |
| 622 | +.ka-row-field input[type="url"], | |
| 567 | 623 | .ka-row-field input[type="date"], |
| 568 | 624 | .ka-row-field textarea, |
| 569 | 625 | .ka-row-field select { |
| 570 | 626 | width: 100%; |
| @@ -573,12 +629,25 @@ | ||
| 573 | 629 | border: 1px solid rgba(0, 0, 0, 0.1); |
| 574 | 630 | border-radius: 12px; |
| 575 | 631 | font-size: 15px; |
| 576 | 632 | font-family: inherit; |
| 577 | - background: #fff; | |
| 633 | + background-color: #fff; | |
| 578 | 634 | transition: border-color 0.2s, box-shadow 0.2s; |
| 579 | 635 | } |
| 580 | 636 | |
| 637 | +/* Select dropdown arrow (single selects only) */ | |
| 638 | +.ka-row-field select:not([multiple]) { | |
| 639 | + padding-right: 48px; | |
| 640 | + cursor: pointer; | |
| 641 | + -webkit-appearance: none; | |
| 642 | + -moz-appearance: none; | |
| 643 | + appearance: none; | |
| 644 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); | |
| 645 | + background-repeat: no-repeat; | |
| 646 | + background-position: right 16px center; | |
| 647 | + background-size: 18px 18px; | |
| 648 | +} | |
| 649 | + | |
| 581 | 650 | .ka-row-field input:focus, |
| 582 | 651 | .ka-row-field textarea:focus, |
| 583 | 652 | .ka-row-field select:focus { |
| 584 | 653 | outline: none; |
| @@ -668,14 +737,103 @@ | ||
| 668 | 737 | color: #1d1d1f; |
| 669 | 738 | cursor: pointer; |
| 670 | 739 | } |
| 671 | 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"], | |
| 672 | 746 | .ka-radio-item input[type="radio"] { |
| 673 | - width: 20px; | |
| 674 | - height: 20px; | |
| 675 | - 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; | |
| 676 | 768 | } |
| 677 | 769 | |
| 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, | |
| 775 | +body.ka-admin-v3 .ka-admin-wrap input[type="radio"]:checked::before, | |
| 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; | |
| 780 | +} | |
| 781 | + | |
| 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; | |
| 785 | +} | |
| 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 | + | |
| 678 | 836 | /* ===== COLOR PICKER ===== */ |
| 679 | 837 | .ka-color-wrap { |
| 680 | 838 | display: flex; |
| 681 | 839 | align-items: center; |
| @@ -772,8 +930,10 @@ | ||
| 772 | 930 | font-size: 36px; |
| 773 | 931 | font-weight: 700; |
| 774 | 932 | color: #1d1d1f; |
| 775 | 933 | letter-spacing: -0.02em; |
| 934 | + margin-bottom: 4px; | |
| 935 | + line-height: 1; | |
| 776 | 936 | } |
| 777 | 937 | |
| 778 | 938 | .ka-stat-value.good { |
| 779 | 939 | color: #34c759; |
| @@ -1154,13 +1314,30 @@ | ||
| 1154 | 1314 | |
| 1155 | 1315 | body.ka-v3-dark .ka-row-field input, |
| 1156 | 1316 | body.ka-v3-dark .ka-row-field textarea, |
| 1157 | 1317 | body.ka-v3-dark .ka-row-field select { |
| 1158 | - background: #2c2c2e; | |
| 1318 | + background-color: #2c2c2e; | |
| 1159 | 1319 | border-color: rgba(255, 255, 255, 0.1); |
| 1160 | 1320 | color: #f5f5f7; |
| 1161 | 1321 | } |
| 1162 | 1322 | |
| 1323 | +/* Tables (e.g., Categories) also contain inputs/selects outside .ka-row-field */ | |
| 1324 | +body.ka-v3-dark .ka-table input[type="text"], | |
| 1325 | +body.ka-v3-dark .ka-table input[type="number"], | |
| 1326 | +body.ka-v3-dark .ka-table input[type="password"], | |
| 1327 | +body.ka-v3-dark .ka-table input[type="email"], | |
| 1328 | +body.ka-v3-dark .ka-table input[type="date"], | |
| 1329 | +body.ka-v3-dark .ka-table textarea, | |
| 1330 | +body.ka-v3-dark .ka-table select { | |
| 1331 | + background-color: #2c2c2e; | |
| 1332 | + border-color: rgba(255, 255, 255, 0.1); | |
| 1333 | + color: #f5f5f7; | |
| 1334 | +} | |
| 1335 | + | |
| 1336 | +body.ka-v3-dark .ka-row-field select:not([multiple]) { | |
| 1337 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); | |
| 1338 | +} | |
| 1339 | + | |
| 1163 | 1340 | body.ka-v3-dark .ka-row-field input:focus, |
| 1164 | 1341 | body.ka-v3-dark .ka-row-field textarea:focus, |
| 1165 | 1342 | body.ka-v3-dark .ka-row-field select:focus { |
| 1166 | 1343 | border-color: #0a84ff; |
| @@ -1253,8 +1430,20 @@ | ||
| 1253 | 1430 | body.ka-v3-dark .ka-upgrade-card li { |
| 1254 | 1431 | color: #f5f5f7; |
| 1255 | 1432 | } |
| 1256 | 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 | + | |
| 1257 | 1446 | body.ka-v3-dark .ka-empty { |
| 1258 | 1447 | color: #86868b; |
| 1259 | 1448 | } |
| 1260 | 1449 | |
| @@ -1322,12 +1511,36 @@ | ||
| 1322 | 1511 | .ka-stats-grid { |
| 1323 | 1512 | grid-template-columns: 1fr; |
| 1324 | 1513 | } |
| 1325 | 1514 | |
| 1515 | + .ka-admin-wrap .ka-card-body { | |
| 1516 | + overflow-x: auto; | |
| 1517 | + -webkit-overflow-scrolling: touch; | |
| 1518 | + max-width: 100%; | |
| 1519 | + } | |
| 1520 | + | |
| 1326 | 1521 | .ka-table { |
| 1327 | - display: block; | |
| 1328 | - overflow-x: auto; | |
| 1522 | + display: table; | |
| 1523 | + width: max-content; | |
| 1524 | + min-width: 100%; | |
| 1525 | + max-width: none; | |
| 1329 | 1526 | } |
| 1527 | + | |
| 1528 | + .ka-v3-segmented { | |
| 1529 | + min-width: 0; | |
| 1530 | + width: 100%; | |
| 1531 | + max-width: 100%; | |
| 1532 | + } | |
| 1533 | + | |
| 1534 | + .ka-admin-header-actions { | |
| 1535 | + width: 100%; | |
| 1536 | + max-width: 100%; | |
| 1537 | + flex-wrap: wrap; | |
| 1538 | + } | |
| 1539 | + | |
| 1540 | + .ka-admin-wrap .ka-table .ka-table-actions { | |
| 1541 | + white-space: normal; | |
| 1542 | + } | |
| 1330 | 1543 | } |
| 1331 | 1544 | |
| 1332 | 1545 | /* ===== WP COLOR PICKER ===== */ |
| 1333 | 1546 | .wp-picker-container { |
| @@ -1333,8 +1546,27 @@ | ||
| 1333 | 1546 | .wp-picker-container { |
| 1334 | 1547 | display: inline-block; |
| 1335 | 1548 | } |
| 1336 | 1549 | |
| 1550 | +/* Iris (WP Color Picker) relies on content-box sizing for correct geometry; our global | |
| 1551 | + `.ka-admin-wrap * { box-sizing: border-box; }` can break slider placement. */ | |
| 1552 | +body.ka-admin-v3 .wp-picker-container .iris-picker, | |
| 1553 | +body.ka-admin-v3 .wp-picker-container .iris-picker * { | |
| 1554 | + box-sizing: content-box; | |
| 1555 | +} | |
| 1556 | + | |
| 1557 | +body.ka-admin-v3 .wp-picker-container .iris-picker { | |
| 1558 | + direction: ltr; | |
| 1559 | +} | |
| 1560 | + | |
| 1561 | +/* Iris container border (dark theme) */ | |
| 1562 | +body.ka-v3-dark .wp-picker-container .iris-border { | |
| 1563 | + border-radius: 3px; | |
| 1564 | + border: 1px solid rgba(255, 255, 255, 0.1); | |
| 1565 | + width: 200px; | |
| 1566 | + background-color: #2c2c2e; | |
| 1567 | +} | |
| 1568 | + | |
| 1337 | 1569 | .wp-picker-container .wp-color-result { |
| 1338 | 1570 | height: 38px; |
| 1339 | 1571 | border-radius: 8px; |
| 1340 | 1572 | } |
| @@ -1342,7 +1574,203 @@ | ||
| 1342 | 1574 | body.ka-v3-dark .wp-picker-container .wp-color-result { |
| 1343 | 1575 | border-color: rgba(255, 255, 255, 0.2); |
| 1344 | 1576 | } |
| 1345 | 1577 | |
| 1578 | +/* WP Color Picker text label (dark theme) */ | |
| 1579 | +body.ka-v3-dark .wp-picker-container .wp-color-result-text { | |
| 1580 | + background: #2c2c2e; | |
| 1581 | + border-left: 1px solid rgba(255, 255, 255, 0.18); | |
| 1582 | + color: rgba(245, 245, 247, 0.85); | |
| 1583 | +} | |
| 1584 | + | |
| 1346 | 1585 | .wp-picker-container input.wp-color-picker { |
| 1347 | 1586 | max-width: 100px !important; |
| 1587 | +} | |
| 1588 | + | |
| 1589 | +/* ========================================================================== | |
| 1590 | + Shared form pieces for extension screens (page-shell.php) | |
| 1591 | + ========================================================================== */ | |
| 1592 | + | |
| 1593 | +.ka-admin-wrap .ka-check { | |
| 1594 | + display: flex; | |
| 1595 | + align-items: flex-start; | |
| 1596 | + gap: 10px; | |
| 1597 | + font-size: 15px; | |
| 1598 | + color: #1d1d1f; | |
| 1599 | + cursor: pointer; | |
| 1600 | + line-height: 1.4; | |
| 1601 | +} | |
| 1602 | + | |
| 1603 | +.ka-admin-wrap .ka-check input[type="checkbox"] { | |
| 1604 | + width: 18px; | |
| 1605 | + height: 18px; | |
| 1606 | + margin: 1px 0 0; | |
| 1607 | + accent-color: #0071e3; | |
| 1608 | + flex: 0 0 auto; | |
| 1609 | +} | |
| 1610 | + | |
| 1611 | +.ka-admin-wrap .ka-check-group { | |
| 1612 | + display: flex; | |
| 1613 | + flex-direction: column; | |
| 1614 | + gap: 10px; | |
| 1615 | +} | |
| 1616 | + | |
| 1617 | +/* A radio with a bold title and a line of explanation under it. */ | |
| 1618 | + | |
| 1619 | +.ka-admin-wrap .ka-radio-item > span { | |
| 1620 | + display: flex; | |
| 1621 | + flex-direction: column; | |
| 1622 | + gap: 2px; | |
| 1623 | +} | |
| 1624 | + | |
| 1625 | +.ka-admin-wrap .ka-radio-item em { | |
| 1626 | + font-style: normal; | |
| 1627 | + font-size: 13px; | |
| 1628 | + color: #6e6e73; | |
| 1629 | +} | |
| 1630 | + | |
| 1631 | +.ka-admin-wrap .ka-inline-field { | |
| 1632 | + display: flex; | |
| 1633 | + align-items: center; | |
| 1634 | + gap: 8px; | |
| 1635 | + margin: 12px 0 0; | |
| 1636 | +} | |
| 1637 | + | |
| 1638 | +.ka-admin-wrap .ka-inline-field label { | |
| 1639 | + font-size: 13px; | |
| 1640 | + color: #6e6e73; | |
| 1641 | +} | |
| 1642 | + | |
| 1643 | +.ka-admin-wrap .ka-color-row { | |
| 1644 | + display: flex; | |
| 1645 | + flex-wrap: wrap; | |
| 1646 | + gap: 18px; | |
| 1647 | +} | |
| 1648 | + | |
| 1649 | +.ka-admin-wrap .ka-color-wrap { | |
| 1650 | + display: inline-flex; | |
| 1651 | + align-items: center; | |
| 1652 | + gap: 8px; | |
| 1653 | + font-size: 14px; | |
| 1654 | + color: #1d1d1f; | |
| 1655 | + cursor: pointer; | |
| 1656 | +} | |
| 1657 | + | |
| 1658 | +.ka-admin-wrap .ka-color-wrap input[type="color"] { | |
| 1659 | + width: 42px; | |
| 1660 | + height: 30px; | |
| 1661 | + padding: 2px; | |
| 1662 | + border: 1px solid #d2d2d7; | |
| 1663 | + border-radius: 8px; | |
| 1664 | + background: #fff; | |
| 1665 | + cursor: pointer; | |
| 1666 | +} | |
| 1667 | + | |
| 1668 | +.ka-admin-wrap .ka-submit { | |
| 1669 | + margin: 24px 0 0; | |
| 1670 | +} | |
| 1671 | + | |
| 1672 | +/* Long single-line inputs should fill the field column rather than sit at | |
| 1673 | + WordPress's default width. */ | |
| 1674 | +.ka-admin-wrap .ka-row-field > input[type="text"], | |
| 1675 | +.ka-admin-wrap .ka-row-field > input[type="url"], | |
| 1676 | +.ka-admin-wrap .ka-row-field > input[type="email"], | |
| 1677 | +.ka-admin-wrap .ka-row-field > textarea { | |
| 1678 | + width: 100%; | |
| 1679 | + max-width: 520px; | |
| 1680 | +} | |
| 1681 | + | |
| 1682 | +.ka-admin-wrap .ka-code-editor { | |
| 1683 | + width: 100%; | |
| 1684 | + min-height: 260px; | |
| 1685 | + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| 1686 | + font-size: 13px; | |
| 1687 | + line-height: 1.55; | |
| 1688 | + tab-size: 2; | |
| 1689 | +} | |
| 1690 | + | |
| 1691 | +/* Dark theme */ | |
| 1692 | +body.ka-v3-dark .ka-admin-wrap .ka-check, | |
| 1693 | +body.ka-v3-dark .ka-admin-wrap .ka-color-wrap, | |
| 1694 | +body.ka-v3-dark .ka-admin-wrap .ka-radio-item { | |
| 1695 | + color: #f5f5f7; | |
| 1696 | +} | |
| 1697 | + | |
| 1698 | +body.ka-v3-dark .ka-admin-wrap .ka-radio-item em, | |
| 1699 | +body.ka-v3-dark .ka-admin-wrap .ka-inline-field label { | |
| 1700 | + color: #a1a1a6; | |
| 1701 | +} | |
| 1702 | + | |
| 1703 | +body.ka-v3-dark .ka-admin-wrap .ka-color-wrap input[type="color"] { | |
| 1704 | + border-color: #3a3a3c; | |
| 1705 | + background: #1c1c1e; | |
| 1706 | +} | |
| 1707 | + | |
| 1708 | +/* --- My Account endpoint cards ------------------------------------------ */ | |
| 1709 | + | |
| 1710 | +.ka-admin-wrap .ka-endpoint-card .ka-card-header { | |
| 1711 | + display: flex; | |
| 1712 | + align-items: center; | |
| 1713 | + gap: 10px; | |
| 1714 | + flex-wrap: wrap; | |
| 1715 | +} | |
| 1716 | + | |
| 1717 | +.ka-admin-wrap .ka-endpoint-slug { | |
| 1718 | + font-size: 12px; | |
| 1719 | + padding: 2px 8px; | |
| 1720 | + border-radius: 6px; | |
| 1721 | + background: #f5f5f7; | |
| 1722 | + color: #6e6e73; | |
| 1723 | +} | |
| 1724 | + | |
| 1725 | +.ka-admin-wrap .ka-endpoint-toggle { | |
| 1726 | + margin-left: auto; | |
| 1727 | + font-size: 14px; | |
| 1728 | +} | |
| 1729 | + | |
| 1730 | +/* A hidden endpoint still needs to be readable and editable, so this is a | |
| 1731 | + dimmed state rather than a greyed-out one. */ | |
| 1732 | +.ka-admin-wrap .ka-endpoint-card.is-off .ka-card-header h2, | |
| 1733 | +.ka-admin-wrap .ka-endpoint-card.is-off .ka-endpoint-slug { | |
| 1734 | + opacity: .55; | |
| 1735 | +} | |
| 1736 | + | |
| 1737 | +.ka-admin-wrap .ka-check-group--inline { | |
| 1738 | + flex-direction: row; | |
| 1739 | + flex-wrap: wrap; | |
| 1740 | + gap: 8px 20px; | |
| 1741 | +} | |
| 1742 | + | |
| 1743 | +.ka-admin-wrap .ka-row--danger .ka-btn-secondary { | |
| 1744 | + color: #c0392b; | |
| 1745 | + border-color: #e6b8b2; | |
| 1746 | +} | |
| 1747 | + | |
| 1748 | +.ka-admin-wrap .ka-row--danger .ka-btn-secondary:hover { | |
| 1749 | + background: #fdf1ef; | |
| 1750 | + border-color: #c0392b; | |
| 1751 | +} | |
| 1752 | + | |
| 1753 | +body.ka-v3-dark .ka-admin-wrap .ka-endpoint-slug { | |
| 1754 | + background: #2c2c2e; | |
| 1755 | + color: #a1a1a6; | |
| 1756 | +} | |
| 1757 | + | |
| 1758 | +body.ka-v3-dark .ka-admin-wrap .ka-row--danger .ka-btn-secondary { | |
| 1759 | + color: #ff6b5e; | |
| 1760 | + border-color: #5a3a37; | |
| 1761 | +} | |
| 1762 | + | |
| 1763 | +body.ka-v3-dark .ka-admin-wrap .ka-row--danger .ka-btn-secondary:hover { | |
| 1764 | + background: #3a2523; | |
| 1765 | + border-color: #ff6b5e; | |
| 1766 | +} | |
| 1767 | + | |
| 1768 | +/* Right-align the button column of a shared table. */ | |
| 1769 | +.ka-admin-wrap .ka-table .ka-table-actions { | |
| 1770 | + text-align: right; | |
| 1771 | + white-space: nowrap; | |
| 1772 | +} | |
| 1773 | + | |
| 1774 | +.ka-admin-wrap .ka-table .ka-table-actions .ka-btn + .ka-btn { | |
| 1775 | + margin-left: 6px; | |
| 1348 | 1776 | } |