PluginProbe
WP Directory Kit / 1.5.9
WP Directory Kit v1.5.9
1.5.9 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 trunk 1.1.0 1.1.6 1.1.8 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.8 All 37 releases
← All changes | admin/css/wpdirectorykit-admin.scss +479 -17 1.3.0 → 1.5.9 View file →
@@ -13,11 +13,15 @@
13 13 display: table;
14 14 clear: both;
15 15 }
16 16
17 +.wdk-wrap {
18 + @import 'wdk-utilities.scss';
19 +}
20 +
17 21 .wdk-wrap .postbox-header {
18 - max-width: 100%;
19 - min-width: 100%;
22 + max-width: 100%;
23 + min-width: 100%;
20 24
21 25 h3 {
22 26 padding-left: 15px;
23 27
@@ -221,8 +225,14 @@
221 225 display: flex;
222 226 height: auto;
223 227 }
224 228
229 + .wdk_dropdown_tree>.btn-group {
230 + height: 40px;
231 + border-radius: 2px;
232 + }
233 +
234 +
225 235 .wdk_dropdown_tree button {
226 236 padding: 0 8px;
227 237 height: auto;
228 238 box-shadow: 0 0 0 transparent;
@@ -233,9 +243,9 @@
233 243 }
234 244
235 245 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle,
236 246 .wdk_dropdown_tree button {
237 - border-radius: 4px;
247 + border-radius: 2px;
238 248 }
239 249
240 250 .wdk_dropdown_tree button:first-child {
241 251 border-top-right-radius: 0;
@@ -246,12 +256,17 @@
246 256 border: 1px solid #8c8f94;
247 257 }
248 258
249 259 .wdk_dropdown_tree .list_scroll {
250 - border-left: 1px solid #8c8f94;
251 260 left: 0;
252 261 }
253 262
263 + .wdk_dropdown_tree .list_container {
264 + width: 100%;
265 + border: 1px solid #8c8f94;
266 + box-sizing: border-box;
267 + }
268 +
254 269 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle:last-child {
255 270 border-top-left-radius: 0;
256 271 border-bottom-left-radius: 0;
257 272
@@ -279,15 +294,15 @@
279 294
280 295 & i {
281 296 position: absolute;
282 297 left: 0;
283 - margin-left: 5px;
298 + margin-left: 11px;
284 299 top: 50%;
285 300 margin-top: -9px;
286 301 }
287 302
288 303 & i.fa-spin {
289 - margin-left: 7px;
304 + margin-left: 11px;
290 305 margin-top: -7px;
291 306 }
292 307
293 308 .fa:after {
@@ -318,9 +333,9 @@
318 333 -webkit-animation: wdk-spin 2s infinite linear;
319 334 animation: wdk-spin 2s infinite linear;
320 335 font-family: dashicons;
321 336 font-size: 18px;
322 - margin-left: 6px;
337 + margin-left: 11px;
323 338 margin-top: -9px;
324 339 }
325 340
326 341 @keyframes wdk-spin {
@@ -337,10 +352,22 @@
337 352 }
338 353
339 354 }
340 355
356 +
357 +div.wdk-field-edit.field-error div.wdk-field-container {
358 + background: #FFE6DF;
359 + input, select, textarea,.wp-editor-container {
360 + border-color: rgb(163, 1, 1);
361 + }
362 +
363 + p.wdk-hint.wdk-error {
364 + color: rgb(163, 1, 1);
365 + }
366 +}
367 +
341 368 .form-table p.wdk-hint,
342 -div.wdk-field-edit p.wdk-hint {
369 +div.wdk-field-edit p.wdk-hint {
343 370 font-style: italic;
344 371 }
345 372
346 373 div.wdk-field-edit.inline {
@@ -364,12 +391,24 @@
364 391 }
365 392
366 393 /* Tables */
367 394
395 +.wdk-wrap .widefat #the-list {
396 + display: flex;
397 + flex-wrap: wrap;
398 + gap: 15px 15px;
399 + align-items: flex-start;
400 + justify-content: flex-start;
401 +}
402 +
368 403 .wdk-wrap .widefat .actions_column {
369 404 text-align: right;
370 405 }
371 406
407 +.wdk-wrap .widefat .static {
408 + width: 5%;
409 +}
410 +
372 411 .wdk-wrap .form-table td {
373 412 vertical-align: top;
374 413 }
375 414
@@ -552,8 +591,20 @@
552 591
553 592 /* columns */
554 593
555 594 .wdk-wrap {
595 + .button-secondary,.button-primary {
596 + display: inline-flex;
597 + align-items: center;
598 + justify-content: center;
599 +
600 + gap: 5px;
601 +
602 + .dashicons {
603 + line-height: 1 !important;
604 + }
605 + }
606 +
556 607 .actions {
557 608 margin-top: 0;
558 609 }
559 610
@@ -583,8 +634,16 @@
583 634 .mb0 {
584 635 margin-bottom: 0 !important;
585 636 }
586 637
638 + .m0 {
639 + margin: 0 !important;
640 + }
641 +
642 + .p0 {
643 + padding: 0 !important;
644 + }
645 +
587 646 .align-top {
588 647 vertical-align: top !important;
589 648 }
590 649
@@ -679,8 +738,15 @@
679 738 div.wdk-field-edit p.wdk-hint {
680 739 flex: 0 0 100%;
681 740 }
682 741
742 + div.wdk-field-edit .postbox-upload .hide-if-no-js{
743 + gap: 5px;
744 + display: flex;
745 + flex-wrap: wrap;
746 + margin: 0;
747 + }
748 +
683 749 .wdk-row {
684 750 & {
685 751 display: -ms-flexbox;
686 752 display: flex;
@@ -768,9 +834,9 @@
768 834 .wp-editor-wrap .wp-editor-container {
769 835 width: 100%;
770 836 margin: 0;
771 837 box-shadow: none;
772 - border-radius: 4px;
838 + border-radius: 2px;
773 839 border: 1px solid #8c8f94;
774 840 background-color: #fff;
775 841 color: #2c3338;
776 842 overflow: hidden;
@@ -925,8 +991,25 @@
925 991
926 992 .winter_mvc-media .winter_mvc-media-card {
927 993 min-width: 200px;
928 994 }
995 +
996 +
997 + .field-error {
998 + background: #FFE6DF;
999 + input, select,textarea {
1000 + border-color: rgb(163, 1, 1);
1001 + }
1002 +
1003 + p.wdk-hint.wdk-error {
1004 + color: rgb(163, 1, 1);
1005 + }
1006 + }
1007 +
1008 + .wdk-field-container .button {
1009 + display: inline-flex;
1010 + align-items: center;
1011 + }
929 1012 }
930 1013
931 1014 .wp-core-ui .quicktags-toolbar input.button.button-small {
932 1015 display: inline-block !important;
@@ -951,20 +1034,20 @@
951 1034 }
952 1035
953 1036 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle,
954 1037 .wdk_dropdown_tree button {
955 - border-radius: 4px;
1038 + border-radius: 0;
956 1039 }
957 1040
958 1041 .wdk_dropdown_tree button:first-child {
959 1042 border-top-right-radius: 0;
960 1043 border-bottom-right-radius: 0;
961 - border-top-left-radius: 4px;
962 - border-bottom-left-radius: 4px;
1044 + border-top-left-radius: 0;
1045 + border-bottom-left-radius: 0;
963 1046 }
964 1047
965 1048 .wdk_dropdown_tree .list_container .input-group {
966 - border: 1px solid #8c8f94;
1049 + border-top: 1px solid #8c8f94;
967 1050 }
968 1051
969 1052 .wdk_dropdown_tree .list_scroll {
970 1053 border-left: 1px solid #8c8f94;
@@ -999,9 +1082,9 @@
999 1082
1000 1083 & i {
1001 1084 position: absolute;
1002 1085 left: 0;
1003 - margin-left: 5px;
1086 + margin-left: 11px;
1004 1087 top: 50%;
1005 1088 margin-top: -9px;
1006 1089 }
1007 1090
@@ -1050,8 +1133,20 @@
1050 1133 transform: rotate(360deg);
1051 1134 }
1052 1135 }
1053 1136 }
1137 +
1138 + .field-error {
1139 + input, select,textarea {
1140 + border-color: rgb(163, 1, 1);
1141 + }
1142 +
1143 + p.wdk-hint.wdk-error {
1144 + color: rgb(163, 1, 1);
1145 + }
1146 + }
1147 +
1148 +
1054 1149 }
1055 1150
1056 1151 .tablenav .wdk-unwrapp-field {
1057 1152 float: left;
@@ -1074,16 +1169,25 @@
1074 1169 }
1075 1170
1076 1171
1077 1172 body .select2-container--default {
1078 -
1173 + .select2-selection--multiple {
1174 + border-radius: 2px;
1175 + }
1079 1176 &.select2-container--focus .select2-selection--multiple,
1080 1177 & {
1081 1178 border: 0;
1082 1179 min-width: 150px;
1180 + width: 25em !important;
1181 + border-radius: 2px;
1083 1182 }
1084 1183
1184 + input {
1185 + min-height: 36px;
1186 + }
1187 +
1085 1188 .select2-selection--multiple {
1189 + cursor: pointer;
1086 1190 .select2-search__field {
1087 1191 border: 0 !important;
1088 1192 }
1089 1193
@@ -1100,8 +1204,29 @@
1100 1204 .select2-selection__rendered {
1101 1205 padding: 0;
1102 1206 display: block;
1103 1207 padding: 2px 45px 2px 5px;
1208 +
1209 +
1210 + // Add dropdown arrow icon to the right side (mimicking select dropdown)
1211 + &::after {
1212 + content: "";
1213 + display: block;
1214 + position: absolute;
1215 + right: 0px;
1216 + top: 0;
1217 + width: 26px;
1218 + height: 100%;
1219 + pointer-events: none;
1220 + background: #fff 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%;
1221 + background-size: auto;
1222 + background-size: 16px 16px;
1223 + cursor: pointer;
1224 + border-left: 1px solid #8c8f94;
1225 + z-index: 10;
1226 + }
1227 + position: relative;
1228 +
1104 1229 }
1105 1230 }
1106 1231 }
1107 1232
@@ -1112,8 +1237,25 @@
1112 1237 display: flex;
1113 1238 align-items: center;
1114 1239 flex-wrap: wrap;
1115 1240
1241 + // Add dropdown arrow icon to the right side (mimicking select dropdown)
1242 + &::after {
1243 + content: "";
1244 + display: block;
1245 + position: absolute;
1246 + right: 15px;
1247 + top: 50%;
1248 + width: 16px;
1249 + height: 16px;
1250 + pointer-events: none;
1251 + transform: translateY(-50%);
1252 + background: url('data:image/svg+xml;utf8,<svg fill="gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="5,7 10,12 15,7"/></svg>') no-repeat center center;
1253 + background-size: 16px 16px;
1254 + }
1255 + position: relative;
1256 +
1257 +
1116 1258 li.select2-selection__choice {
1117 1259 padding: 1px 6px;
1118 1260 line-height: 19px;
1119 1261 }
@@ -1301,9 +1443,9 @@
1301 1443 .wdk-wrap .wdk-listing-childs-drop {
1302 1444 margin-top: 6px;
1303 1445 border: 1px solid #c3c4c7;
1304 1446 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1305 - border-radius: 4px;
1447 + border-radius: 0;
1306 1448 border: 1px dashed #8c8f94;
1307 1449 background-color: #fff;
1308 1450
1309 1451 min-height: 75px;
@@ -1316,9 +1458,9 @@
1316 1458 max-width: initial;
1317 1459 min-width: initial;
1318 1460 margin: 0px 15px 15px 0px;
1319 1461 cursor: pointer;
1320 - border-radius: 4px;
1462 + border-radius: 0;
1321 1463 border: 1px solid #c3c4c7;
1322 1464 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1323 1465 background: #fff;
1324 1466
@@ -1534,7 +1676,327 @@
1534 1676 select,
1535 1677 input,
1536 1678 button,
1537 1679 .custom_parameter {
1680 + margin-bottom: 5px;
1681 + }
1682 +}
1683 +
1684 +.wdk-notice-upgrade {
1685 + background: #fcf0f1;
1686 + border-left-color: #d63a3c;
1687 + .dashicons-warning {
1688 + color: #d63a3c;
1689 + }
1690 +}
1691 +
1692 +.wdk-listing-toolbar {
1693 + --borded-radius: 3px;
1694 + --border-color: #ccd0d4;
1695 + display: flex;
1696 + align-items: center;
1697 + justify-content: space-between;
1698 + gap: 10px;
1699 + margin-bottom: 25px;
1700 + background: #f8fafc;
1701 + border-radius: var(--borded-radius);
1702 + box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
1703 + padding: 15px 21px;
1704 + border-radius: var(--borded-radius);
1705 + .wdk-toolbar-left,
1706 + .wdk-toolbar-right {
1707 + flex: 0 0 auto;
1708 + a.button {
1709 + padding: 0 9px;
1710 + border-radius: var(--borded-radius);
1711 + transition: background 0.18s, color 0.18s, box-shadow 0.18s;
1712 + box-shadow: 0 1px 4px rgba(44,62,80,0.08);
1713 + &:hover, &:focus {
1714 + background: #e8eef7;
1715 + color: #2271b1;
1716 + box-shadow: 0 3px 12px rgba(44,62,80,0.12);
1717 + }
1718 + }
1719 + }
1720 +
1721 + .wdk-toolbar-search {
1722 + position: relative;
1723 + width: 200px;
1724 + max-width: 100%;
1725 + min-width: 150px;
1726 + display: flex;
1727 + align-items: center;
1728 +
1729 + input {
1730 + width: 100%;
1731 + padding: 9px 14px;
1732 + border-radius: var(--borded-radius);
1733 + border: 1px solid var(--border-color);
1734 + background: #fff;
1735 + font-size: 15px;
1736 + line-height: 1.3;
1737 + transition: border 0.15s, box-shadow 0.15s;
1738 + box-shadow: 0 1px 4px rgba(44,62,80,0.03);
1739 + &:focus {
1740 + border-color: #2271b1;
1741 + outline: none;
1742 + box-shadow: 0 2px 8px rgba(34,113,177,0.09);
1743 + }
1744 + }
1745 +
1746 + .wdk-search-results {
1747 + position: absolute;
1748 + left: 0;
1749 + right: 0;
1750 + top: calc(100% + 8px);
1751 + background: #fff;
1752 + border: 1px solid #ccd0d4;
1753 + border-radius: 6px;
1754 + box-shadow: 0 4px 18px rgba(44,62,80,0.11);
1755 + max-height: 340px;
1756 + overflow-y: auto;
1757 + z-index: 1001;
1758 +
1759 + .wdk-search-item {
1760 + display: block;
1761 + padding: 12px 18px;
1762 + text-decoration: none;
1763 + color: #222f3e;
1764 + border-bottom: 1px solid #f2f4f8;
1765 + transition: background 0.13s, color 0.13s;
1766 + &:last-child {
1767 + border-bottom: none;
1768 + }
1769 + &:hover, &:focus {
1770 + background: #f0f6fb;
1771 + color: #186dac;
1772 + }
1773 + }
1774 +
1775 + .wdk-search-loading,
1776 + .wdk-search-empty {
1777 + padding: 11px 16px;
1778 + display: flex;
1779 + align-items: center;
1780 + gap: 12px;
1781 + color: #888fa1;
1782 + font-size: 15px;
1783 + background: #f8fafc;
1784 + }
1785 +
1786 + .wdk-search-empty {
1787 + justify-content: flex-start;
1788 + font-style: italic;
1789 + color: #b0b4bb;
1790 + }
1791 + }
1792 + }
1793 + .spinner.is-active {
1794 + float: none;
1795 + margin: 0;
1796 + vertical-align: middle;
1797 + position: relative;
1798 + top: 2px;
1799 + left: 6px;
1800 + }
1801 +}
1802 +
1803 +
1804 +.tribute-container {
1805 + margin-top: 20px;
1806 +}
1807 +
1808 +
1809 +.wdk-wrap {
1810 +
1811 +.wdk-ai-fields-list {
1812 + background: #fff;
1813 + border: 1px solid #dcdcde;
1814 + border-radius: 8px;
1815 + overflow: hidden;
1816 +}
1817 +
1818 +.wdk-ai-field {
1819 + display: flex;
1820 + align-items: center;
1821 + gap: 10px;
1822 +
1823 + padding: 14px 16px;
1824 +
1825 + margin: 0;
1826 +
1827 + border-bottom: 1px solid #f0f0f1;
1828 +
1829 + cursor: pointer;
1830 +
1831 + transition: background 0.15s ease;
1832 +}
1833 +
1834 +.wdk-ai-field:last-child {
1835 + border-bottom: 0;
1836 +}
1837 +
1838 +.wdk-ai-field:hover {
1839 + background: #f6f7f7;
1840 +}
1841 +
1842 +.wdk-ai-field input[type="checkbox"] {
1843 + margin: 0;
1844 + flex: 0 0 auto;
1845 +}
1846 +
1847 +.wdk-ai-field-label {
1848 + flex: 1;
1849 +
1850 + font-size: 14px;
1851 + font-weight: 500;
1852 + color: #1d2327;
1853 +}
1854 +
1855 +.wdk-ai-field-type {
1856 + padding: 3px 8px;
1857 +
1858 + font-size: 11px;
1859 + font-weight: 600;
1860 + line-height: 1.4;
1861 + color: #646970;
1862 + background: #f0f0f1;
1863 + border-radius: 4px;
1864 +}
1865 +
1866 +.wdk-ai-field:has(input:checked) {
1867 + background: #f0f6fc;
1868 +}
1869 +
1870 +.wdk-ai-field:has(input:checked) .wdk-ai-field-label {
1871 + color: #2271b1;
1872 +}
1873 +
1874 +.wdk-ai-search-status {
1875 + display: inline-block;
1876 +
1877 + margin-top: 12px;
1878 +
1879 + font-size: 13px;
1880 + font-weight: 500;
1881 +}
1882 +
1883 +.wdk-ai-search-status.success {
1884 + color: #00a32a;
1885 +}
1886 +
1887 +.wdk-ai-search-status.error {
1888 + color: #d63638;
1889 +}
1890 +
1891 +.wdk-ai-fields-list {
1892 + display: grid;
1893 + grid-template-columns: repeat(2, 1fr);
1894 +
1895 + background: #fff;
1896 + border: 1px solid #dcdcde;
1897 + border-radius: 8px;
1898 +
1899 + overflow: hidden;
1900 +}
1901 +
1902 +.wdk-ai-field {
1903 + border-bottom: 1px solid #f0f0f1;
1904 +}
1905 +
1906 +.wdk-ai-field:nth-child(odd) {
1907 + border-right: 1px solid #f0f0f1;
1908 +}
1909 +}
1910 +
1911 +.wdk-body-listing {
1912 + display: flex;
1913 + flex-wrap: wrap;
1914 + justify-content: space-between;
1915 + align-items: center;
1916 +
1917 + >* {
1918 + order: 1;
1919 + }
1920 +
1921 + .fpai-ai-button {
1922 + order: 0;
1923 + }
1924 +
1925 + >form,
1926 + >.fpai-inline-form {
1927 + width: 100%;
1928 + }
1929 +}
1930 +
1931 +.wdk-empty-state {
1932 + padding: 40px 20px 48px;
1933 + text-align: center;
1934 + display: flex;
1935 + flex-direction: column;
1936 + align-items: center;
1937 +
1938 +
1939 + &__image {
1940 + display: block;
1941 + width: 170px;
1942 + max-width: 100%;
1943 + height: auto;
1944 + margin: 0 auto 18px;
1945 + }
1946 +
1947 + &__title {
1948 + margin: 0 0 8px;
1949 + color: #292d32;
1950 + font-size: 18px;
1951 + font-weight: 600;
1952 + line-height: 1.4;
1953 + }
1954 +
1955 + &__description {
1956 + max-width: 310px;
1957 + margin: 0 auto 18px;
1958 + color: #85858d;
1959 + font-size: 14px;
1960 + line-height: 1.6;
1961 + }
1962 +
1963 + &__button {
1964 + display: inline-flex;
1965 + align-items: center;
1966 + justify-content: center;
1967 + gap: 8px;
1968 + padding: 9px 15px;
1969 + border-radius: 8px;
1970 + background: #edf0fc;
1971 + color: #456596;
1972 + font-size: 14px;
1973 + font-weight: 600;
1974 + line-height: 1.4;
1975 + text-decoration: none;
1976 + transition: background .2s, color .2s;
1977 +
1978 + &:hover {
1979 + background: #e0e7fc;
1980 + color: #2f51a4;
1981 + }
1982 +
1983 + &:focus-visible {
1984 + outline: 2px solid #4775ed;
1985 + outline-offset: 3px;
1986 + }
1987 +
1988 + span {
1989 + font-size: 21px;
1990 + font-weight: 400;
1991 + line-height: 1;
1992 + }
1993 + }
1994 +}
1995 +
1996 +.wdk-wrap {
1997 + br {
1998 + display: block;
1999 + content: "";
1538 2000 margin-bottom: 5px;
1539 2001 }
1540 2002 }