PluginProbe
Taskbuilder – Project Management & Task Management Tool With Kanban Board / 6.0.6
Taskbuilder – Project Management & Task Management Tool With Kanban Board v6.0.6
6.0.6 6.0.5 6.0.2 6.0.3 6.0.4 6.0.1 6.0.0 5.0.8 5.0.9 4.0.9 5.0.0 5.0.1 5.0.2 5.0.3 5.0.4 5.0.5 5.0.6 5.0.7 trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 All 58 releases
← All changes | asset/css/admin.css +1220 -9 5.0.16.0.6 View file →
@@ -324,9 +324,9 @@
324 324 text-align: center;
325 325 line-height: 1;
326 326
327 327 }
328 -.avatar{
328 +.wppm_bootstrap .avatar{
329 329 border-radius: 50%;
330 330 border: 2px solid #FFF;
331 331 margin-left: -12px;
332 332 border: 2px solid #FFF;
@@ -404,8 +404,9 @@
404 404 top: 50px;
405 405 right: 50px;
406 406 font-size: 15px;
407 407 font-weight: bold;
408 + z-index: 10000000000000;
408 409 }
409 410 #wppm_add_new_project{
410 411 margin:20px;
411 412 background-color: #FFFFFF;
@@ -499,10 +500,17 @@
499 500 list-style-type: none!important;
500 501 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
501 502 }
502 503 #wppm_task_search{
504 + flex-shrink: 0;
505 + white-space: nowrap;
503 506 width:40%;
504 507 margin-top: 15px;
508 + display: flex;
509 + /* align-items: center;
510 + gap: 8px;
511 + align-items: center; */
512 + flex-wrap: nowrap;
505 513 }
506 514 #wppm_task_search svg{
507 515 width: 16px;
508 516 height: 16px;
@@ -513,9 +521,13 @@
513 521 }
514 522 #wppm_task_search_filter{
515 523 padding: 0 30px;
516 524 border-radius: 20px;
517 -}
525 + width: auto;
526 + flex: 1;
527 + min-width: 150px;
528 + min-height: 30px!important;
529 +}
518 530 #wppm_more_filter_option div{
519 531 display: inline-block;
520 532 }
521 533 #wppm_heading_inline svg{
@@ -694,8 +706,32 @@
694 706 background-color: #FFFFFF;
695 707 margin: 15px;
696 708 border: 1px solid #eee !important;
697 709 }
710 +.wppm_task_subtask_container{
711 + background-color: #FFFFFF;
712 + margin: 15px;
713 + border: 1px solid #eee !important;
714 +}
715 +.wppm_subtask_parent_link{
716 + font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
717 + color: #7a7a7a;
718 + margin-top: 4px;
719 +}
720 +.wppm_subtask_parent_link a{
721 + color: #306EFF;
722 + text-decoration: none;
723 +}
724 +.wppm_subtask_badge{
725 + display: inline-block;
726 + font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
727 + color: #5a5a5a;
728 + background-color: #eef1f5;
729 + border-radius: 10px;
730 + padding: 1px 8px;
731 + margin-left: 6px;
732 + vertical-align: middle;
733 +}
698 734 .wppm_proj_thread{
699 735 background-color: #FFFFFF;
700 736 border: 1px solid #eee !important;
701 737 }
@@ -772,8 +808,19 @@
772 808 color: #858c96;
773 809 margin-bottom: 5px;
774 810 margin-top: 5px;
775 811 }
812 +#tb-advanced-toggle{
813 + border: 1px solid #ccc;
814 + padding: 6px;
815 + background-color: #FFFFFF;
816 + /* float: right; */
817 + border-radius: 4px;
818 + cursor: pointer;
819 + /* margin-top:10px; */
820 + font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
821 + color: #858c96;
822 +}
776 823 #wppm_list_view_btn{
777 824 border: 1px solid #ccc;
778 825 padding: 5px;
779 826 background-color: #FFFFFF;
@@ -951,8 +998,20 @@
951 998 }
952 999 .wppm_task_label,.wppm_checklist_label,.wppm_project_label{
953 1000 font: 18px "Helvetica Neue",Helvetica,Arial,sans-serif !important;
954 1001 }
1002 +.wppm_task_subtask_container .wppm_checklist_label {
1003 + display: inline-flex;
1004 + align-items: center;
1005 + gap: 8px;
1006 + margin-top: 7px;
1007 +}
1008 +.wppm_task_checklist_container .wppm_checklist_label {
1009 + display: inline-flex;
1010 + align-items: center;
1011 + gap: 8px;
1012 + margin-top: 7px;
1013 +}
955 1014 .widget_divider{
956 1015 margin:4px 0 6px 0px !important;
957 1016 }
958 1017 .wppm_individual_task_widget{
@@ -958,9 +1017,9 @@
958 1017 .wppm_individual_task_widget{
959 1018 margin-top: 15px!important;
960 1019 }
961 1020 .select2-container{
962 - z-index:999999999999!important;
1021 + z-index:999999999!important;
963 1022 width:100%!important;
964 1023 }
965 1024 .flatpickr-calendar{
966 1025 z-index:999999999999!important;
@@ -978,9 +1037,9 @@
978 1037 .wppm_edit_task_details_widget, .wppm_thread_action, .wppm_edit_project_details_widget{
979 1038 float:right;
980 1039 cursor:pointer;
981 1040 }
982 -.wppm_add_new_task_btn, #wppm_task_list_btn,#wppm_delete_btn,#wppm_delete_task_btn,#wppm_clone_task_btn,#wppm_print_task_btn{
1041 +.wppm_add_new_task_btn, #wppm_task_list_btn,#wppm_delete_btn,#wppm_delete_task_btn,#wppm_clone_task_btn,#wppm_print_task_btn,#wppm_archieve_task_btn,#wppm_dashboard_btn{
983 1042 cursor: pointer;
984 1043 }
985 1044 #wppm_project_details_container{
986 1045 border: 1px solid #eee;
@@ -989,17 +1048,18 @@
989 1048 margin-bottom: 12px;
990 1049 }
991 1050 #wppm_view_project_task{
992 1051 background-color: #ffffff;
1052 + margin-top: 10px;
993 1053 }
994 -#wppm_project_tasks,.wppm_add_new_project_btn{
1054 +#wppm_project_tasks,.wppm_add_new_project_btn,#wppm_proj_overview_btn{
995 1055 cursor:pointer;
996 1056 }
997 -#wppm_add_new_project_btn{
1057 +#wppm_add_new_project_btn,#wppm_proj_overview_btn,#wppm_archieve_project_btn{
998 1058 margin-bottom: 10px;
999 1059 }
1000 1060 #wppm_delete_project_icon, #wppm_add_new_project_icon, #wppm_project_list_icon, #wppm_task_list_icon{
1001 - margin-top: -3px;
1061 + margin-top: -7px;
1002 1062 }
1003 1063 .wppm_add_new_icon{
1004 1064 float: right!important;
1005 1065 cursor:pointer;
@@ -1182,9 +1242,9 @@
1182 1242 .wppm_bootstrap .purchase_addon{
1183 1243 padding-right: 5px;
1184 1244 }
1185 1245
1186 -#wppm_chevron_sort_down_task_name_img, #wppm_chevron_sort_down_project_list_img, #wppm_chevron_sort_down_status_img, #wppm_chevron_sort_down_priority_img, #wppm_chevron_sort_down_start_date_img, #wppm_chevron_sort_down_end_date_img{
1246 +#wppm_chevron_sort_down_task_name_img, #wppm_chevron_sort_down_project_list_img, #wppm_chevron_sort_down_status_img, #wppm_chevron_sort_down_priority_img, #wppm_chevron_sort_down_start_date_img, #wppm_chevron_sort_down_end_date_img,#wppm_chevron_sort_down_task_duration_img{
1187 1247 margin-right:-19px;
1188 1248 }
1189 1249
1190 1250 .wppm-help-container{
@@ -1217,9 +1277,9 @@
1217 1277 align-items: flex-end;
1218 1278 margin-bottom: 10px;
1219 1279 }
1220 1280
1221 -#wppm_task_filter, #wppm_task_list_proj_filter
1281 +#wppm_task_filter, #wppm_task_list_proj_filter, #tb-filter-created-by
1222 1282 {
1223 1283 border: 1px solid #ccc !important;
1224 1284 background-color:#FFFFFF;
1225 1285 border-radius:4px;
@@ -1560,5 +1620,1156 @@
1560 1620 }
1561 1621
1562 1622 #wppmprint_menu a:hover {
1563 1623 background: #f0f0f0;
1624 +}
1625 +
1626 +.wppm_checklist_items_container {
1627 + list-style: none;
1628 + padding-left: 0;
1629 + margin-left: 20px;
1630 + margin-right: 20px;
1631 +}
1632 +.wppm_checklist_items_container .wppm_checklist_item {
1633 + padding: 6px 10px;
1634 + background: #fff;
1635 + margin-right: 5px;
1636 + margin-bottom: 4px;
1637 + margin-left: 5px;
1638 + border: 1px solid #ddd;
1639 + cursor: grab;
1640 + display: flex;
1641 + align-items: center;
1642 +}
1643 +.wppm_checklist_items_container .wppm_chk_items_drag {
1644 + margin-right: 10px;
1645 + cursor: move;
1646 +}
1647 +.wppm_subtask_more_users {
1648 + display: inline-flex;
1649 + flex-shrink: 0;
1650 + align-items: center;
1651 + justify-content: center;
1652 + width: 20px;
1653 + height: 20px;
1654 + min-width: 20px;
1655 + border-radius: 50%;
1656 + background: #e2e4e7;
1657 + color: #555d66;
1658 + font-size: 8px;
1659 + line-height: 1;
1660 + font-weight: 600;
1661 + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1662 + vertical-align: middle;
1663 + margin-left: -12px;
1664 + padding: 0;
1665 + border: 2px solid #fff;
1666 + box-sizing: border-box;
1667 +}
1668 +
1669 +/* Add checklist / add checklist item: input + button sized to content, not full-width */
1670 +#wppm_checklist_label,
1671 +input[name="wppm_checklist_item_label"] {
1672 + display: inline-block !important;
1673 + width: 240px !important;
1674 + max-width: 100%;
1675 + margin-right: 8px;
1676 + vertical-align: middle;
1677 + box-sizing: border-box;
1678 +}
1679 +#wppm_checklist_btn,
1680 +input[name="wppm_checklist_item_label"] + input[type="button"] {
1681 + display: inline-block !important;
1682 + width: auto !important;
1683 + vertical-align: middle;
1684 +}
1685 +
1686 +/* Subtasks / checklist - mobile */
1687 +@media (max-width: 782px) {
1688 + .wppm_checklist_items_container {
1689 + margin-left: 0;
1690 + margin-right: 0;
1691 + }
1692 + .wppm_checklist_items_container .wppm_checklist_item {
1693 + flex-wrap: wrap;
1694 + margin-left: 0;
1695 + margin-right: 0;
1696 + }
1697 + .wppm_checklist_items_container .wppm_checklist_item .col-sm-8,
1698 + .wppm_checklist_items_container .wppm_checklist_item .col-sm-4 {
1699 + width: 100%;
1700 + text-align: left !important;
1701 + margin-top: 6px;
1702 + }
1703 + #wppm_checklist_label,
1704 + input[name="wppm_checklist_item_label"] {
1705 + width: 100% !important;
1706 + margin-right: 0;
1707 + margin-bottom: 8px;
1708 + }
1709 + #wppm_checklist_btn,
1710 + input[name="wppm_checklist_item_label"] + input[type="button"] {
1711 + width: 100% !important;
1712 + }
1713 +
1714 + /* Open Task toolbar: let the icon buttons wrap instead of overflowing */
1715 + .wppm_headers.row {
1716 + display: flex;
1717 + flex-wrap: wrap;
1718 + align-items: center;
1719 + row-gap: 8px;
1720 + }
1721 + .wppm_headers .col-sm-8 {
1722 + display: flex;
1723 + flex-wrap: wrap;
1724 + align-items: center;
1725 + gap: 6px;
1726 + width: 100%;
1727 + }
1728 +
1729 + /* Checklist header row (title + delete link) - stack like subtask/checklist items */
1730 + .wppm_task_checklist_container .row .col-sm-8,
1731 + .wppm_task_checklist_container .row .col-sm-4 {
1732 + width: 100%;
1733 + text-align: left !important;
1734 + margin-top: 4px;
1735 + }
1736 + .wppm_task_subtask_container,
1737 + .wppm_task_checklist_container,
1738 + .wppm_thread,
1739 + .wppm_proj_thread {
1740 + margin: 8px;
1741 + }
1742 +
1743 + /* Comment thread: avatar above the comment body instead of a cramped side-by-side table */
1744 + .wppm_thread,
1745 + .wppm_proj_thread {
1746 + display: block;
1747 + }
1748 + .wppm_thread_avatar,
1749 + .wppm_thread_body {
1750 + display: block;
1751 + width: 100%;
1752 + padding-left: 0;
1753 + }
1754 + .wppm_thread_avatar {
1755 + padding-bottom: 8px;
1756 + }
1757 +}
1758 +
1759 +/* Main container */
1760 +/* GRID CONTAINER */
1761 +.wppm_bootstrap .pricing-flex {
1762 + display: grid !important;
1763 + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1764 + gap: 20px;
1765 + align-items: stretch;
1766 +}
1767 +
1768 +/* CARD */
1769 +.wppm_bootstrap .pricing-widget {
1770 + display: flex;
1771 + flex-direction: column;
1772 +
1773 + background: #fff;
1774 + border: 1px solid #e5e5e5;
1775 + border-radius: 6px;
1776 + padding: 15px;
1777 + box-sizing: border-box;
1778 +}
1779 +
1780 +/* BODY GROWS */
1781 +.wppm_bootstrap .pricing-widget .pbody {
1782 + flex: 1;
1783 +}
1784 +
1785 +/* PRO ADDON CARD (Addons page) - card stays fully visible, just a small corner badge */
1786 +.wppm_bootstrap .pricing-widget {
1787 + position: relative;
1788 +}
1789 +.wppm_bootstrap .wppm-pro-badge-corner-lg {
1790 + position: absolute;
1791 + top: 10px;
1792 + right: 10px;
1793 + z-index: 5;
1794 + display: flex;
1795 + align-items: center;
1796 + justify-content: center;
1797 + width: 30px;
1798 + height: 30px;
1799 + background: #fff;
1800 + border-radius: 50%;
1801 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
1802 + line-height: 0;
1803 +}
1804 +
1805 +/* PRO FEATURE BADGE ICON (sidebar menu, settings pills, toolbar buttons) */
1806 +.wppm-pro-badge {
1807 + display: inline-flex;
1808 + align-items: center;
1809 + margin-left: 4px;
1810 + line-height: 0;
1811 + vertical-align: middle;
1812 +}
1813 +.wppm-pro-badge svg {
1814 + display: block;
1815 +}
1816 +
1817 +/* Locked settings pill */
1818 +.wppm_bootstrap .wppm_setting_pills li.wppm-locked-pill a {
1819 + display: flex;
1820 + align-items: center;
1821 + opacity: 0.75;
1822 +}
1823 +.wppm_bootstrap .wppm_setting_pills li.wppm-locked-pill .wppm-pro-pill-lock {
1824 + display: inline-flex;
1825 + align-items: center;
1826 + margin-right: 4px;
1827 + line-height: 0;
1828 + vertical-align: middle;
1829 +}
1830 +
1831 +/* Locked project toolbar button */
1832 +.wppm_bootstrap .wppm-locked-toolbar-btn {
1833 + opacity: 0.7;
1834 +}
1835 +.wppm_bootstrap .wppm-locked-toolbar-btn:hover {
1836 + opacity: 1;
1837 +}
1838 +.wppm_bootstrap .wppm-pro-icon-wrap {
1839 + position: relative;
1840 + display: inline-block;
1841 + line-height: 0;
1842 +}
1843 +.wppm_bootstrap .wppm-pro-icon-wrap img {
1844 + width: 16px;
1845 + height: 16px;
1846 + vertical-align: middle;
1847 +}
1848 +.wppm_bootstrap .wppm-pro-badge-corner {
1849 + position: absolute;
1850 + top: -5px;
1851 + right: -6px;
1852 + display: flex;
1853 + align-items: center;
1854 + justify-content: center;
1855 + width: 14px;
1856 + height: 14px;
1857 + background: #fff;
1858 + border-radius: 50%;
1859 + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
1860 + line-height: 0;
1861 +}
1862 +
1863 +/* Pro addon teaser (sidebar page + settings inline upsell) */
1864 +.wppm-pro-teaser {
1865 + max-width: 520px;
1866 + margin: 30px auto;
1867 + padding: 30px;
1868 + text-align: center;
1869 + background: #fff;
1870 + border: 1px solid #e5e5e5;
1871 + border-radius: 6px;
1872 + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1873 +}
1874 +.wppm-pro-teaser-inline {
1875 + margin: 0;
1876 +}
1877 +.wppm-pro-teaser-icon {
1878 + position: relative;
1879 + display: inline-block;
1880 + margin-bottom: 15px;
1881 +}
1882 +.wppm-pro-teaser-icon img {
1883 + width: 48px;
1884 + height: 48px;
1885 + opacity: 0.5;
1886 +}
1887 +.wppm-pro-teaser-icon .wppm-pro-teaser-lock {
1888 + position: absolute;
1889 + right: -6px;
1890 + bottom: -4px;
1891 + display: flex;
1892 + align-items: center;
1893 + justify-content: center;
1894 + width: 22px;
1895 + height: 22px;
1896 + background: #f5a623;
1897 + border-radius: 50%;
1898 + line-height: 0;
1899 +}
1900 +.wppm-pro-teaser h2 {
1901 + margin: 0 0 10px;
1902 + font-family: "OpenSans-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
1903 +}
1904 +.wppm-pro-teaser p {
1905 + color: #555;
1906 + margin-bottom: 20px;
1907 +}
1908 +.wppm-pro-teaser-actions .btn {
1909 + margin: 0 5px;
1910 +}
1911 +
1912 +/* FOOTER */
1913 +/* .wppm_bootstrap .pricing-widget .pfooter {
1914 + display: flex;
1915 + justify-content: space-between;
1916 + gap: 10px;
1917 + margin-top: 15px;
1918 +}
1919 +
1920 +/* MOBILE FOOTER STACK */
1921 +@media (max-width: 480px) {
1922 + .wppm_bootstrap .pricing-widget .pfooter {
1923 + flex-direction: column;
1924 + }
1925 +} */
1926 +
1927 +.wppm-dashboard{
1928 + padding:20px;
1929 + margin-top:20px;
1930 + font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
1931 +}
1932 +.wppm-dashboard-top{
1933 + display:grid;
1934 + grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
1935 + gap:20px;
1936 + margin-bottom:20px;
1937 +}
1938 +
1939 +.wppm-small-widget{
1940 + background:#ffffff;
1941 + border-radius:10px;
1942 + padding:20px;
1943 + box-shadow:0 2px 8px rgba(0,0,0,0.05);
1944 + transition:all 0.2s ease;
1945 + display:flex;
1946 + align-items:center;
1947 + gap:15px;
1948 +}
1949 +
1950 +.wppm-small-widget:hover{
1951 + transform:translateY(-3px);
1952 + box-shadow:0 6px 16px rgba(0,0,0,0.08);
1953 +}
1954 +
1955 +.wppm-small-widget h3{
1956 + font-size:14px;
1957 + color:#666;
1958 + margin-bottom:10px;
1959 +}
1960 +
1961 +.wppm-number{
1962 + font-size:28px;
1963 + font-weight:600;
1964 + color:#222;
1965 +}
1966 +.wppm-small-widget.overdue{
1967 + border-left:4px solid #e74c3c;
1968 +}
1969 +
1970 +.wppm-divider{
1971 + height:1px;
1972 + background:#eee;
1973 + margin:20px 0;
1974 +}
1975 +
1976 +.wppm-row{
1977 + display:grid;
1978 + grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
1979 + gap:20px;
1980 + margin-bottom:20px;
1981 +}
1982 +
1983 +.wppm-widget{
1984 + background:#fff;
1985 + border-radius:10px;
1986 + padding:20px;
1987 + box-shadow:0 2px 8px rgba(0,0,0,0.05);
1988 + transition:all 0.2s ease;
1989 +}
1990 +.wppm-widget h2{
1991 + font-size:16px;
1992 + margin-bottom:15px;
1993 + font-weight:600;
1994 + color:#222;
1995 +}
1996 +
1997 +#tbl_my_tasks,#tbl_active_projects,#tbl_upcoming_tasks, #tbl_todays_tasks {
1998 + border-collapse: collapse !important;
1999 + width: 100% !important;
2000 +}
2001 +
2002 +#tbl_my_tasks th,
2003 +#tbl_my_tasks td,
2004 +#tbl_todays_tasks th,
2005 +#tbl_todays_tasks td,
2006 +#tbl_active_projects th,
2007 +#tbl_active_projects td,
2008 +#tbl_upcoming_tasks th,
2009 +#tbl_upcoming_tasks td {
2010 + border: 1px solid #ddd !important;
2011 + padding: 8px !important;
2012 +}
2013 +
2014 +#tbl_my_tasks th, #tbl_active_projects th, #tbl_upcoming_tasks th, #tbl_todays_tasks th{
2015 + background-color: #f5f5f5 !important;
2016 + text-align: left !important;
2017 +}
2018 +
2019 +#tbl_my_tasks tr:hover, #tbl_active_projects tr:hover, #tbl_upcoming_tasks tr:hover, #tbl_todays_tasks tr:hover{
2020 + background-color: #f9f9f9 !important;
2021 + cursor: pointer;
2022 +}
2023 +.wppm-widget table td{
2024 + padding:10px;
2025 + border-top:1px solid #f2f2f2;
2026 + font-size:14px;
2027 +}
2028 +
2029 +.wppm-widget table th{
2030 + background:#f8fafc;
2031 + color:#777;
2032 + font-weight:600;
2033 + padding:10px;
2034 + border-bottom:1px solid #e5e7eb;
2035 +}
2036 +
2037 +canvas{
2038 + max-height:250px !important;
2039 +}
2040 +
2041 +.wppm-widget:hover{
2042 + box-shadow:0 8px 20px rgba(0,0,0,0.07);
2043 +}
2044 +
2045 +.wppm-widget-icon{
2046 + font-size:28px;
2047 + background:#f5f7fb;
2048 + padding:12px;
2049 + border-radius:8px;
2050 +}
2051 +.wppm-widget h2{
2052 + display:flex;
2053 + justify-content:space-between;
2054 + align-items:center;
2055 +}
2056 +
2057 +.wppm-view-all{
2058 + font-size:13px;
2059 + color:#4c7cf3;
2060 + text-decoration:none;
2061 +}
2062 +
2063 +.wppm-view-all:hover{
2064 + text-decoration:underline;
2065 +}
2066 +
2067 +.wppm-workload-list {
2068 + list-style: none;
2069 + padding: 0;
2070 + margin: 0;
2071 +}
2072 +
2073 +.wppm-workload-list li {
2074 + display: flex;
2075 + align-items: center;
2076 + gap:10px;
2077 + margin-bottom: 10px;
2078 +}
2079 +
2080 +.wppm-workload-bar {
2081 + flex:1;
2082 + height:8px;
2083 + background:#eee;
2084 + border-radius:5px;
2085 + overflow:hidden;
2086 +}
2087 +
2088 +.wppm-workload-bar div {
2089 + height: 100%;
2090 + background: #3498db;
2091 + border-radius: 5px;
2092 +}
2093 +
2094 +.dashboard-progress-wrapper{
2095 + display:flex;
2096 + align-items:center;
2097 + gap:8px;
2098 +}
2099 +
2100 +.dashboard-progress-bar{
2101 + flex:1;
2102 + height:8px;
2103 + background:#e5e7eb;
2104 + border-radius:5px;
2105 + overflow:hidden;
2106 +}
2107 +
2108 +.dashboard-progress{
2109 + height:100%;
2110 + border-radius:5px;
2111 +}
2112 +
2113 +.dashboard-progress-text{
2114 + font-size:12px;
2115 + font-weight:600;
2116 +}
2117 +.wppm-priority-dot{
2118 + display:inline-block;
2119 + width:10px;
2120 + height:10px;
2121 + border-radius:50%;
2122 + margin-right:6px;
2123 + vertical-align:middle;
2124 +}
2125 +/* Wrapper (relative parent) */
2126 +.tb-filter-bar {
2127 + position: relative;
2128 +}
2129 +
2130 +/* Advanced panel (FLOAT) */
2131 +#tb-advanced-panel {
2132 + position: absolute;
2133 + top: 110%; /* below button */
2134 + right: 0;
2135 + width: 320px;
2136 +
2137 + background: #ffffff;
2138 + border: 1px solid #e2e8f0;
2139 + border-radius: 10px;
2140 + box-shadow: 0 10px 25px rgba(0,0,0,0.1);
2141 +
2142 + padding: 12px;
2143 + z-index: 999999999;
2144 +
2145 + /* hidden state */
2146 + opacity: 0;
2147 + transform: translateY(-10px);
2148 + pointer-events: none;
2149 +
2150 + transition: all 0.25s ease;
2151 +}
2152 +
2153 +/* OPEN STATE */
2154 +#tb-advanced-panel.tb-open {
2155 + opacity: 1;
2156 + transform: translateY(0);
2157 + pointer-events: auto;
2158 +}
2159 +
2160 +/* Rows */
2161 +.tb-row {
2162 + margin-bottom: 10px;
2163 +}
2164 +
2165 +.tb-row label {
2166 + font-size: 12px;
2167 + font-weight: 600;
2168 + display: block;
2169 + margin-bottom: 4px;
2170 +}
2171 +
2172 +/* Inputs */
2173 +#tb-advanced-panel input,
2174 +#tb-advanced-panel select {
2175 + width: 100%!important;
2176 + padding: 6px 8px!important;
2177 + border: 1px solid #cbd5e1;
2178 + border-radius: 6px;
2179 +}
2180 +/* Wrapper */
2181 +.tb-filter-bar {
2182 + position: relative;
2183 + display: flex;
2184 + align-items: center;
2185 + gap: 10px;
2186 + overflow: visible!important;
2187 +}
2188 +
2189 +/* Button */
2190 +.tb-btn {
2191 + padding: 2px 10px;
2192 + border-radius: 6px;
2193 + border: 1px solid #cbd5e1;
2194 + background: #fff;
2195 + cursor: pointer;
2196 +}
2197 +
2198 +/* ================= POPOVER ================= */
2199 +.tb-popover {
2200 + position: absolute;
2201 + top: 120%;
2202 + right: 0;
2203 + width: 320px;
2204 +
2205 + background: #fff;
2206 + border: 1px solid #e2e8f0;
2207 + border-radius: 10px;
2208 + box-shadow: 0 15px 35px rgba(0,0,0,0.12);
2209 +
2210 + padding: 12px;
2211 + z-index: 999999999;
2212 +
2213 + opacity: 0;
2214 + transform: translateY(-10px);
2215 + pointer-events: none;
2216 + transition: all 0.25s ease;
2217 +}
2218 +
2219 +.tb-popover.tb-open {
2220 + opacity: 1;
2221 + transform: translateY(0);
2222 + pointer-events: auto;
2223 +}
2224 +
2225 +/* Arrow */
2226 +.tb-arrow {
2227 + position: absolute;
2228 + top: -6px;
2229 + right: 20px;
2230 + width: 12px;
2231 + height: 12px;
2232 + background: white;
2233 + border-left: 1px solid #e2e8f0;
2234 + border-top: 1px solid #e2e8f0;
2235 + transform: rotate(45deg);
2236 +}
2237 +
2238 +/* Sections */
2239 +.tb-section {
2240 + margin-bottom: 12px;
2241 +}
2242 +
2243 +.tb-section h4 {
2244 + font-size: 12px;
2245 + margin-bottom: 6px;
2246 + color: #64748b;
2247 +}
2248 +
2249 +/* Inputs */
2250 +.tb-popover input,
2251 +.tb-popover select {
2252 + width: 100%;
2253 + margin-bottom: 6px;
2254 + padding: 6px;
2255 + border: 1px solid #cbd5e1;
2256 + border-radius: 6px;
2257 +}
2258 +
2259 +/* ================= CHIPS ================= */
2260 +/* .tb-chips {
2261 + display: flex;
2262 + gap: 6px;
2263 + flex-wrap: wrap;
2264 +} */
2265 +
2266 +/* .tb-chip {
2267 + background: #eef2ff;
2268 + color: #3730a3;
2269 + padding: 4px 8px;
2270 + border-radius: 20px;
2271 + font-size: 12px;
2272 + cursor: pointer;
2273 +} */
2274 +/* =========================
2275 + MOBILE FILTER PANEL
2276 +========================= */
2277 +/* @media (max-width: 768px) {
2278 +
2279 + #tb-advanced-panel {
2280 + position: fixed;
2281 + left: 0;
2282 + right: 0;
2283 + bottom: 0;
2284 + top: auto;
2285 +
2286 + width: 100%;
2287 + max-height: 80vh;
2288 +
2289 + border-radius: 16px 16px 0 0;
2290 + padding: 16px;
2291 +
2292 + transform: translateY(100%);
2293 + opacity: 1;
2294 + pointer-events: auto;
2295 +
2296 + overflow-y: auto;
2297 + }
2298 +
2299 + #tb-advanced-panel.tb-open {
2300 + transform: translateY(0);
2301 + }
2302 +
2303 + .tb-arrow {
2304 + display: none;
2305 + }
2306 +
2307 + /* backdrop */
2308 + /* #tb-backdrop {
2309 + position: fixed;
2310 + top: 0;
2311 + left: 0;
2312 + right: 0;
2313 + bottom: 0;
2314 + background: rgba(0,0,0,0.4);
2315 + z-index: 9998;
2316 + display: none;
2317 + }
2318 +
2319 + #tb-backdrop.active {
2320 + display: block;
2321 + }
2322 +
2323 +} */
2324 +/* =========================
2325 + MOBILE FILTER PANEL
2326 +========================= */
2327 +@media (max-width: 768px) {
2328 +
2329 + #tb-advanced-panel,
2330 + #tb-advanced-panel.tb-popover {
2331 + position: fixed !important;
2332 +
2333 + top: 0 !important;
2334 + right: 0 !important;
2335 + bottom: 0 !important;
2336 + left: 0 !important;
2337 +
2338 + width: 100vw !important;
2339 + height: 100vh !important;
2340 + max-width: none !important;
2341 + max-height: none !important;
2342 +
2343 + margin: 0 !important;
2344 + padding: 16px !important;
2345 +
2346 + box-sizing: border-box !important;
2347 +
2348 + background: #fff !important;
2349 +
2350 + border: none !important;
2351 + border-radius: 0 !important;
2352 +
2353 + box-shadow: none !important;
2354 +
2355 + overflow-y: auto !important;
2356 + -webkit-overflow-scrolling: touch;
2357 +
2358 + z-index: 999999999 !important;
2359 +
2360 + /* CLOSED */
2361 + opacity: 0 !important;
2362 + visibility: hidden !important;
2363 + transform: none !important;
2364 + pointer-events: none !important;
2365 +
2366 + transition: opacity 0.25s ease, visibility 0.25s ease !important;
2367 + }
2368 +
2369 + @media (max-width: 768px) {
2370 +
2371 + #tb-active-filters,
2372 + .tb-chips {
2373 + display: flex !important;
2374 + flex-direction: column !important;
2375 + align-items: stretch !important;
2376 + gap: 8px !important;
2377 + width: 100% !important;
2378 + }
2379 +
2380 + #tb-active-filters .tb-chip,
2381 + .tb-chips .tb-chip {
2382 + display: inline-flex !important;
2383 + align-items: center;
2384 + justify-content: space-between;
2385 +
2386 + width: 100% !important;
2387 + box-sizing: border-box;
2388 + }
2389 +}
2390 +
2391 + /* OPEN */
2392 + #tb-advanced-panel.tb-open {
2393 + opacity: 1 !important;
2394 + visibility: visible !important;
2395 + transform: none !important;
2396 + pointer-events: auto !important;
2397 + }
2398 +
2399 + /* Hide arrow on mobile */
2400 + #tb-advanced-panel .tb-arrow {
2401 + display: none !important;
2402 + }
2403 +
2404 + /* Mobile header */
2405 + .tb-mobile-header {
2406 + display: flex !important;
2407 +
2408 + position: sticky;
2409 + top: 0;
2410 +
2411 + background: #fff;
2412 + z-index: 2;
2413 +
2414 + padding: 5px 0 15px;
2415 + margin-bottom: 15px;
2416 +
2417 + font-size: 18px;
2418 + }
2419 +
2420 + #tb-close-filters {
2421 + border: 0;
2422 + background: transparent;
2423 + font-size: 24px;
2424 + cursor: pointer;
2425 + }
2426 +
2427 + /* Backdrop */
2428 + #tb-backdrop {
2429 + position: fixed !important;
2430 +
2431 + top: 0 !important;
2432 + right: 0 !important;
2433 + bottom: 0 !important;
2434 + left: 0 !important;
2435 +
2436 + width: 100vw !important;
2437 + height: 100vh !important;
2438 +
2439 + background: rgba(0, 0, 0, 0.4);
2440 +
2441 + z-index: 999998 !important;
2442 +
2443 + display: none;
2444 + }
2445 +
2446 + #tb-backdrop.active {
2447 + display: block !important;
2448 + }
2449 +
2450 +}
2451 +
2452 +.tb-mobile-header {
2453 + display: none;
2454 + justify-content: space-between;
2455 + align-items: center;
2456 + font-weight: 600;
2457 + margin-bottom: 10px;
2458 +}
2459 +
2460 +@media (max-width:768px){
2461 + .tb-mobile-header {
2462 + display: flex;
2463 + }
2464 +}
2465 +.tb-section {
2466 + display: flex;
2467 + flex-direction: column;
2468 + gap: 8px;
2469 +}
2470 +.tb-popover {
2471 + width: 300px;
2472 +}
2473 +.tb-chip {
2474 + background: #eef3ff;
2475 + padding: 5px 10px;
2476 + border-radius: 20px;
2477 + margin: 18px 5px 10px 0px;
2478 + display: inline-block;
2479 + cursor: pointer;
2480 + color: #3730a3;
2481 + font-size: 12px;
2482 + gap: 6px;
2483 +}
2484 +
2485 +.tb-remove {
2486 + margin-left: 6px;
2487 + color: red;
2488 + font-weight: bold;
2489 +}
2490 +
2491 +.tb-chip-close {
2492 + margin-left: 6px;
2493 + cursor: pointer;
2494 +}
2495 +
2496 +@media (max-width: 767px) {
2497 +
2498 + .tb-filter-bar {
2499 + display: flex;
2500 + align-items: center;
2501 + justify-content: flex-end;
2502 + flex-wrap: wrap;
2503 + gap: 8px;
2504 + width: 100%;
2505 + overflow: visible!important;
2506 + }
2507 +
2508 + #tb-advanced-toggle {
2509 + display: inline-flex !important;
2510 + align-items: center;
2511 + justify-content: center;
2512 +
2513 + /* float: left; */
2514 + position: relative;
2515 + margin-top : 20px;
2516 +
2517 + height: 34px;
2518 + min-width: 34px;
2519 + padding: 0 10px;
2520 +
2521 + border: 1px solid #d5d9dd;
2522 + border-radius: 5px;
2523 + background: #fff;
2524 +
2525 + color: #555;
2526 + font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
2527 +
2528 + cursor: pointer;
2529 + box-sizing: border-box;
2530 + white-space: nowrap;
2531 + }
2532 +
2533 + #tb-advanced-toggle:hover {
2534 + background: #f5f5f5;
2535 + }
2536 +
2537 + #tb-advanced-panel input,
2538 + #tb-advanced-panel select {
2539 + width: 75%!important;
2540 + padding: 6px 8px!important;
2541 + border: 1px solid #cbd5e1;
2542 + border-radius: 6px;
2543 + }
2544 +
2545 + .wppm-filter-actions span {
2546 + cursor: pointer;
2547 + font-size: 16px;
2548 + text-decoration: underline;
2549 + /* margin-bottom: 7px!important; */
2550 + font: 14px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
2551 + color: #858c96;
2552 + margin-bottom: 20px !important;
2553 + margin-left: 5px;
2554 + }
2555 +}
2556 +
2557 +.wppm-mention {
2558 + display:inline;
2559 + background: #e7f3ff;
2560 + color: #0073aa;
2561 + font-weight: bold;
2562 + padding: 2px 6px;
2563 + border-radius: 4px;
2564 + font-weight: 500;
2565 + margin: 0;
2566 +}
2567 +
2568 +.wppm-mention:hover {
2569 + background: #d0e7ff;
2570 +}
2571 +
2572 +.wppm-mention-me{
2573 + background:#ffcc00 !important;
2574 + color:#000 !important;
2575 + font-weight:700;
2576 +}
2577 +
2578 +#wppm_mention_list {
2579 + position: absolute !important;
2580 + min-width: 220px;
2581 + max-width: 300px;
2582 + max-height: 240px;
2583 + overflow-y: auto;
2584 + background: #fff;
2585 + border: 1px solid #dcdcde;
2586 + border-radius: 8px;
2587 + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
2588 + padding: 6px 0;
2589 + margin-top: 4px;
2590 + z-index: 99999999999 !important;
2591 + animation: wppmMentionFade .15s ease-in-out;
2592 +}
2593 +
2594 +#wppm_mention_list .mention-item:hover,
2595 +#wppm_mention_list .mention-item.active {
2596 + background: linear-gradient(135deg, #7c3aed, #a855f7);
2597 + color: #fff;
2598 +}
2599 +
2600 +#wppm_mention_list .mention-item {
2601 + padding: 2px 12px;
2602 + cursor: pointer;
2603 + font-size: 14px;
2604 + color: #333;
2605 + border-bottom: 1px solid #eee;
2606 +}
2607 +
2608 +#wppm_mention_list .mention-item:last-child {
2609 + border-bottom: none;
2610 +}
2611 +
2612 +/* Floating Button */
2613 +#wppm_notification_bell{
2614 + position:fixed;
2615 + right:24px;
2616 + bottom:24px;
2617 + width:56px;
2618 + height:56px;
2619 + border-radius:16px;
2620 + background:#ffffff;
2621 + border:1px solid #e5e7eb;
2622 + box-shadow:
2623 + 0 8px 24px rgba(15,23,42,.12),
2624 + 0 2px 8px rgba(15,23,42,.08);
2625 + display:flex;
2626 + justify-content:center;
2627 + align-items:center;
2628 + cursor:pointer;
2629 + z-index:999999999!important;
2630 + transition:all .25s ease;
2631 +}
2632 +
2633 +#wppm_notification_bell:hover{
2634 + transform:translateY(-3px);
2635 + box-shadow:
2636 + 0 15px 35px rgba(15,23,42,.18),
2637 + 0 5px 15px rgba(15,23,42,.12);
2638 +}
2639 +
2640 +#wppm_notification_bell .dashicons{
2641 + color:#6b7280;
2642 + font-size:22px;
2643 + transition:.2s;
2644 +}
2645 +
2646 +#wppm_notification_bell:hover .dashicons{
2647 + color:#7c3aed;
2648 +}
2649 +
2650 +/* Notification Badge */
2651 +.wppm-badge{
2652 + position:absolute;
2653 + top:-6px;
2654 + right:-6px;
2655 + min-width:22px;
2656 + height:22px;
2657 + border-radius:50px;
2658 + background:#ff3366;
2659 + color:#fff;
2660 + display:flex;
2661 + align-items:center;
2662 + justify-content:center;
2663 + font-size:11px;
2664 + font-weight:700;
2665 + border:2px solid #fff;
2666 +}
2667 +
2668 +/* Popup */
2669 +#wppm-notification-container{
2670 + position:fixed;
2671 + right:24px;
2672 + bottom:90px;
2673 + width:360px;
2674 + background:#fff;
2675 + border-radius:18px;
2676 + box-shadow:0 20px 60px rgba(0,0,0,.15);
2677 + overflow:hidden;
2678 + display:none;
2679 + z-index:999999999!important;
2680 +}
2681 +
2682 +/* Item */
2683 +.wppm-notification-item, .wppm-no-notification{
2684 + padding:16px 18px;
2685 + border-bottom:1px solid #f3f4f6;
2686 + cursor:pointer;
2687 + transition:.2s;
2688 +}
2689 +
2690 +.wppm-notification-item:hover{
2691 + background:#f9fafb;
2692 +}
2693 +
2694 +.wppm-notification-message{
2695 + font-size:14px;
2696 + font-weight:600;
2697 + color:#111827;
2698 + margin-bottom:4px;
2699 +}
2700 +
2701 +.wppm-notification-item small{
2702 + color:#9ca3af;
2703 +}
2704 +
2705 +.wppm-pro-btn{
2706 + display:inline-flex;
2707 + align-items:center;
2708 + gap:6px;
2709 + text-decoration:none;
2710 +}
2711 +/* .wppm-pro-btn .dashicons{
2712 + font-size:16px;
2713 + width:16px;
2714 + height:16px;
2715 + line-height:16px;
2716 +} */
2717 +.wppm-pro-btn .wppm-btn-text{
2718 + display:inline-block;
2719 +}
2720 +
2721 +.tb-pro-feature-card{
2722 + position:relative;
2723 + overflow:hidden;
2724 + border-radius:8px;
2725 +}
2726 +
2727 +.tb-pro-content{
2728 + filter:blur(4px);
2729 + pointer-events:none;
2730 + opacity:.7;
2731 +}
2732 +
2733 +.tb-pro-overlay{
2734 + position:absolute;
2735 + inset:0;
2736 + display:flex;
2737 + flex-direction:column;
2738 + justify-content:center;
2739 + align-items:center;
2740 + background:rgba(255,255,255,.5);
2741 + z-index:10;
2742 +}
2743 +
2744 +.tb-pro-badge{
2745 + background:#ff9800;
2746 + color:#fff;
2747 + padding:6px 12px;
2748 + border-radius:4px;
2749 + margin-bottom:10px;
2750 + font-weight:600;
2751 +}
2752 +
2753 +#wppm-archive-project {
2754 + display: inline-flex;
2755 + align-items: center;
2756 + gap: 6px;
2757 +}
2758 +
2759 +#wppm-archive-project svg {
2760 + flex-shrink: 0;
2761 +}
2762 +
2763 +.wppm_create_project_btn {
2764 + display: inline-flex;
2765 + align-items: center;
2766 + gap: 6px;
2767 + padding: 8px 12px;
2768 + border-radius: 4px;
2769 + text-decoration: none;
2770 + cursor: pointer;
2771 +}
2772 +
2773 +.wppm_create_project_btn svg {
2774 + flex-shrink: 0;
1564 2775 }