| @@ -464,8 +464,34 @@ | ||
| 464 | 464 | } |
| 465 | 465 | .wpsc-ticket-list-tbl tbody tr:hover { |
| 466 | 466 | cursor: pointer; |
| 467 | 467 | } |
| 468 | +.wpsc-ticket-list-tbl th.wpsc-tl-sortable-th { | |
| 469 | + cursor: pointer; | |
| 470 | + white-space: nowrap; | |
| 471 | + -webkit-user-select: none; | |
| 472 | + user-select: none; | |
| 473 | +} | |
| 474 | +.wpsc-ticket-list-tbl th .wpsc-tl-th-inner { | |
| 475 | + display: flex; | |
| 476 | + align-items: center; | |
| 477 | +} | |
| 478 | +.wpsc-ticket-list-tbl th .wpsc-tl-sort-icon { | |
| 479 | + display: inline-flex; | |
| 480 | + align-items: center; | |
| 481 | + flex: none; | |
| 482 | + height: 12px; | |
| 483 | + margin-right: 6px; | |
| 484 | +} | |
| 485 | +.wpsc-ticket-list-tbl th .wpsc-tl-sort-icon svg { | |
| 486 | + width: auto; | |
| 487 | + height: 100%; | |
| 488 | + fill: #a7aaad; | |
| 489 | +} | |
| 490 | +.wpsc-ticket-list-tbl th.wpsc-tl-sorted-asc .wpsc-tl-sort-icon svg, | |
| 491 | +.wpsc-ticket-list-tbl th.wpsc-tl-sorted-desc .wpsc-tl-sort-icon svg { | |
| 492 | + fill: #2271b1; | |
| 493 | +} | |
| 468 | 494 | |
| 469 | 495 | /* Modal Popup */ |
| 470 | 496 | .wpsc-modal .loader, |
| 471 | 497 | .wpsc-modal .inner-container { |
| @@ -867,8 +893,14 @@ | ||
| 867 | 893 | } |
| 868 | 894 | .wpsc-thread .thread-text { |
| 869 | 895 | overflow: hidden; |
| 870 | 896 | } |
| 897 | +.wpsc-thread .thread-text.wpsc-collapsed { | |
| 898 | + max-height: 100px; | |
| 899 | +} | |
| 900 | +.wpsc-thread .thread-text.wpsc-expanded { | |
| 901 | + max-height: none; | |
| 902 | +} | |
| 871 | 903 | .wpsc-thread .thread-text ul{ |
| 872 | 904 | list-style-type: disc !important; |
| 873 | 905 | padding-inline-start: 2em; |
| 874 | 906 | } |
| @@ -1211,12 +1243,21 @@ | ||
| 1211 | 1243 | } |
| 1212 | 1244 | .wpsc-switch-editor.active { |
| 1213 | 1245 | background: #c3c3c3; |
| 1214 | 1246 | } |
| 1215 | -.wpsc_textarea { | |
| 1247 | +.wpsc_textarea:not(#wpsc-en-body) { | |
| 1216 | 1248 | height: 160px !important; |
| 1217 | 1249 | width: 100% !important; |
| 1218 | 1250 | } |
| 1251 | +/* Email Notifications body editor (Ticket Notifications, OTP, Satisfaction Survey, | |
| 1252 | + Auto Close Ticket, WooCommerce create ticket): allow vertical resize handle to work | |
| 1253 | + by not forcing height with !important. Scoped to this id only so other .wpsc_textarea | |
| 1254 | + usages (canned replies, GDPR/T&C, ticket description, print templates, etc.) are unaffected. */ | |
| 1255 | +#wpsc-en-body.wpsc_textarea { | |
| 1256 | + height: 160px; | |
| 1257 | + width: 100% !important; | |
| 1258 | + resize: vertical; | |
| 1259 | +} | |
| 1219 | 1260 | |
| 1220 | 1261 | /* Ticket form field */ |
| 1221 | 1262 | .wpsc-tff { |
| 1222 | 1263 | display: flex; |
| @@ -1776,25 +1817,24 @@ | ||
| 1776 | 1817 | flex-wrap: wrap; |
| 1777 | 1818 | gap: 5px; |
| 1778 | 1819 | padding: 10px; |
| 1779 | 1820 | } |
| 1780 | -.wpsc-ac-agent { | |
| 1781 | - display: flex; | |
| 1782 | - width: fit-content; | |
| 1783 | - align-items: center; | |
| 1784 | - gap: 5px; | |
| 1785 | - padding: 5px; | |
| 1786 | - border-radius: 5px; | |
| 1787 | - font-size: 13px; | |
| 1821 | +/* Dashboard widgets css */ | |
| 1822 | + | |
| 1823 | +/* Card/widget background, text and icon colors are NOT set here - they come from the "Appearance | |
| 1824 | + > Dashboard" settings (wpsc-ap-dashboard option), injected as inline !important styles by | |
| 1825 | + WPSC_Tickets::get_agent_dashboard() (core/includes/admin/tickets/class-wpsc-tickets.php). This | |
| 1826 | + stylesheet only handles structure/spacing/shape, so it never fights that setting. */ | |
| 1827 | + | |
| 1828 | +:root { | |
| 1829 | + --wpsc-dash-border: #e7eaf0; | |
| 1830 | + --wpsc-dash-divider: #eef0f4; | |
| 1831 | + --wpsc-dash-surface-hover: #f8fafc; | |
| 1832 | + --wpsc-dash-accent: #0079bf; | |
| 1833 | + --wpsc-dash-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); | |
| 1788 | 1834 | } |
| 1789 | -.wpsc-ac-agent img { | |
| 1790 | - border-radius: 50%; | |
| 1791 | -} | |
| 1792 | 1835 | |
| 1793 | -/* Dashboard widgets css */ | |
| 1794 | - | |
| 1795 | 1836 | .wpsc-dash-widget svg { |
| 1796 | - color: #ccc; | |
| 1797 | 1837 | height: 80px !important; |
| 1798 | 1838 | } |
| 1799 | 1839 | |
| 1800 | 1840 | .wpsc-dashboard-widget-icon-header { |
| @@ -1801,8 +1841,14 @@ | ||
| 1801 | 1841 | display: flex; |
| 1802 | 1842 | align-items: center; |
| 1803 | 1843 | } |
| 1804 | 1844 | |
| 1845 | +.wpsc-dashboard-widget-icon-header span { | |
| 1846 | + font-size: 14px; | |
| 1847 | + font-weight: 600; | |
| 1848 | + letter-spacing: 0.01em; | |
| 1849 | +} | |
| 1850 | + | |
| 1805 | 1851 | .wpsc-dashboard-card-icon-header { |
| 1806 | 1852 | cursor: pointer; |
| 1807 | 1853 | } |
| 1808 | 1854 | |
| @@ -1816,17 +1862,16 @@ | ||
| 1816 | 1862 | .wpsc-dash-widget { |
| 1817 | 1863 | margin: 10px; |
| 1818 | 1864 | position: relative; |
| 1819 | 1865 | box-sizing: border-box; |
| 1820 | - background-color: #f4f6f9; | |
| 1821 | - border: 1px solid #ccc; | |
| 1822 | - border-radius: 5px; | |
| 1823 | - padding: 10px; | |
| 1824 | - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| 1866 | + border: 1px solid var(--wpsc-dash-border); | |
| 1867 | + border-radius: 12px; | |
| 1868 | + padding: 16px 18px; | |
| 1869 | + box-shadow: var(--wpsc-dash-shadow); | |
| 1825 | 1870 | } |
| 1826 | 1871 | |
| 1827 | 1872 | .wpsc-dash-widget2 { |
| 1828 | - padding: 10px; | |
| 1873 | + padding: 16px 18px; | |
| 1829 | 1874 | } |
| 1830 | 1875 | |
| 1831 | 1876 | .wpsc-dash-widget-small { |
| 1832 | 1877 | width: calc(20% - 20px); |
| @@ -1837,14 +1882,18 @@ | ||
| 1837 | 1882 | } |
| 1838 | 1883 | |
| 1839 | 1884 | .wpsc-dash-widget-small .wpsc-dash-widget-icon { |
| 1840 | 1885 | font-size: 70px; /* Increase the size as needed */ |
| 1841 | - color: #ccc; /* Change the icon color as needed */ | |
| 1842 | 1886 | margin-left: 10px; /* Add margin to separate from the text */ |
| 1843 | 1887 | } |
| 1844 | 1888 | |
| 1845 | 1889 | .wpsc-dash-widget-small svg { |
| 1846 | - opacity: 0.2; | |
| 1890 | + opacity: 0.5; | |
| 1891 | + flex-shrink: 0; | |
| 1892 | + overflow: visible; | |
| 1893 | + height: 48px !important; | |
| 1894 | + width: 48px !important; | |
| 1895 | + margin-right: 10px; | |
| 1847 | 1896 | } |
| 1848 | 1897 | |
| 1849 | 1898 | .wpsc-dash-widget-mid { |
| 1850 | 1899 | width: calc(50% - 20px); |
| @@ -1856,47 +1905,96 @@ | ||
| 1856 | 1905 | |
| 1857 | 1906 | .wpsc-widget h2 { |
| 1858 | 1907 | font-size: 18px; |
| 1859 | 1908 | margin-bottom: 5px; |
| 1909 | + font-weight: 600; | |
| 1860 | 1910 | } |
| 1861 | 1911 | |
| 1862 | 1912 | .wpsc-dash-widget-small h2 { |
| 1863 | - margin-bottom: 5px; | |
| 1864 | - font-size: 35px; | |
| 1865 | - font-weight: 600; | |
| 1913 | + margin-bottom: 4px; | |
| 1914 | + font-size: 32px; | |
| 1915 | + font-weight: 700; | |
| 1916 | + letter-spacing: -0.02em; | |
| 1866 | 1917 | } |
| 1867 | 1918 | |
| 1919 | +.wpsc-dash-widget-small p { | |
| 1920 | + font-size: 13px; | |
| 1921 | + font-weight: 500; | |
| 1922 | +} | |
| 1923 | + | |
| 1868 | 1924 | /* Style the header of widgets with icons and actions */ |
| 1869 | 1925 | .wpsc-dash-widget-header { |
| 1870 | 1926 | display: flex; |
| 1871 | 1927 | justify-content: space-between; |
| 1872 | 1928 | align-items: center; |
| 1873 | - margin-bottom: 10px; | |
| 1874 | - border-bottom: 1px solid #ccc; | |
| 1875 | - padding-bottom: 10px; | |
| 1929 | + margin-bottom: 14px; | |
| 1930 | + border-bottom: 1px solid var(--wpsc-dash-divider); | |
| 1931 | + padding-bottom: 12px; | |
| 1876 | 1932 | } |
| 1877 | 1933 | |
| 1878 | 1934 | .wpsc-dash-widget-header svg { |
| 1879 | - color: #ccc; | |
| 1880 | 1935 | height: 15px !important; |
| 1881 | 1936 | margin: 0px 0px 0px 5px; |
| 1882 | 1937 | } |
| 1883 | 1938 | |
| 1884 | 1939 | .wpsc-dash-widget-actions { |
| 1885 | - /* Widget action links styles here */ | |
| 1940 | + font-size: 12px; | |
| 1886 | 1941 | } |
| 1887 | 1942 | |
| 1888 | 1943 | .wpsc-dash-widget-actions a { |
| 1889 | 1944 | cursor: pointer; |
| 1890 | 1945 | text-decoration: none; |
| 1946 | + color: var(--wpsc-dash-accent); | |
| 1947 | + font-weight: 500; | |
| 1891 | 1948 | } |
| 1892 | 1949 | |
| 1950 | +.wpsc-dash-widget-actions a:hover { | |
| 1951 | + text-decoration: underline; | |
| 1952 | +} | |
| 1953 | + | |
| 1893 | 1954 | /* Style the content of widgets */ |
| 1894 | 1955 | .wpsc-dash-widget-content { |
| 1895 | - /* Widget content styles here */ | |
| 1956 | + font-size: 13px; | |
| 1896 | 1957 | } |
| 1897 | 1958 | |
| 1959 | +/* Tables rendered inside a widget's content area (agent list, recent tickets, todos, out-of-sla, | |
| 1960 | + timers, usergroups, agent performance, feedback, ...) - scoped to the content wrapper so this | |
| 1961 | + doesn't touch tables anywhere else in the app. Text color is intentionally left unset here so | |
| 1962 | + it inherits the widget's appearance-setting-driven text color instead of overriding it. */ | |
| 1963 | +.wpsc-dash-widget-content table { | |
| 1964 | + width: 100%; | |
| 1965 | + border-collapse: collapse; | |
| 1966 | +} | |
| 1967 | + | |
| 1968 | +.wpsc-dash-widget-content table thead th { | |
| 1969 | + text-align: right; | |
| 1970 | + font-size: 11px; | |
| 1971 | + font-weight: 600; | |
| 1972 | + text-transform: uppercase; | |
| 1973 | + letter-spacing: 0.04em; | |
| 1974 | + padding: 8px 10px; | |
| 1975 | + border-bottom: 1px solid var(--wpsc-dash-divider); | |
| 1976 | + white-space: nowrap; | |
| 1977 | +} | |
| 1978 | + | |
| 1979 | +.wpsc-dash-widget-content table tbody td { | |
| 1980 | + padding: 10px; | |
| 1981 | + border-bottom: 1px solid var(--wpsc-dash-divider); | |
| 1982 | +} | |
| 1983 | + | |
| 1984 | +.wpsc-dash-widget-content table tbody tr:last-child td { | |
| 1985 | + border-bottom: none; | |
| 1986 | +} | |
| 1987 | + | |
| 1988 | +.wpsc-dash-widget-content table tbody tr:hover td { | |
| 1989 | + background-color: var(--wpsc-dash-surface-hover); | |
| 1990 | +} | |
| 1991 | + | |
| 1898 | 1992 | .wpsc-actions-btn-setting { |
| 1993 | + width: 100%; | |
| 1994 | + display: flex; | |
| 1995 | + align-items: center; | |
| 1996 | + justify-content: space-between; | |
| 1899 | 1997 | padding-bottom: 15px; |
| 1900 | 1998 | } |
| 1901 | 1999 | |
| 1902 | 2000 | /* Style full-width widgets */ |
| @@ -1928,9 +2026,9 @@ | ||
| 1928 | 2026 | } |
| 1929 | 2027 | |
| 1930 | 2028 | .wpsc-dash-widget-content::-webkit-scrollbar-track, |
| 1931 | 2029 | .wpsc-widget-body::-webkit-scrollbar-track { |
| 1932 | - background-color: #ffffff; | |
| 2030 | + background-color: transparent; | |
| 1933 | 2031 | } |
| 1934 | 2032 | /* table scrollable end */ |
| 1935 | 2033 | |
| 1936 | 2034 | .wpsc-dash-widget-mid .wpsc-dash-widget-content { |
| @@ -2038,10 +2136,12 @@ | ||
| 2038 | 2136 | flex-direction: column; |
| 2039 | 2137 | } |
| 2040 | 2138 | |
| 2041 | 2139 | .wpsc-widget-list { |
| 2042 | - border-bottom: 1px solid #ccc; | |
| 2043 | - padding: 10px 0px; | |
| 2140 | + border-bottom: 1px solid var(--wpsc-dash-divider, #eef0f4); | |
| 2141 | + padding: 10px 2px; | |
| 2142 | + font-size: 13px; | |
| 2143 | + line-height: 1.6; | |
| 2044 | 2144 | } |
| 2045 | 2145 | |
| 2046 | 2146 | .wpsc-widget-list:last-child { |
| 2047 | 2147 | border-bottom: none; |
| @@ -2046,8 +2146,18 @@ | ||
| 2046 | 2146 | .wpsc-widget-list:last-child { |
| 2047 | 2147 | border-bottom: none; |
| 2048 | 2148 | } |
| 2049 | 2149 | |
| 2150 | +.wpsc-widget-list a { | |
| 2151 | + color: var(--wpsc-dash-accent, #0079bf); | |
| 2152 | + font-weight: 500; | |
| 2153 | + text-decoration: none; | |
| 2154 | +} | |
| 2155 | + | |
| 2156 | +.wpsc-widget-list a:hover { | |
| 2157 | + text-decoration: underline; | |
| 2158 | +} | |
| 2159 | + | |
| 2050 | 2160 | #wpsc-dash-agent-list .dt-search { |
| 2051 | 2161 | display: none; |
| 2052 | 2162 | } |
| 2053 | 2163 | |
| @@ -2171,142 +2281,45 @@ | ||
| 2171 | 2281 | .wpsc-reg-user > .wpsc-tff { |
| 2172 | 2282 | padding-right: 0px !important; |
| 2173 | 2283 | } |
| 2174 | 2284 | |
| 2175 | -/* Merge ticket popup css starts */ | |
| 2176 | -.wpsc-merge-container { | |
| 2177 | - width: 100%; | |
| 2178 | - display: block; | |
| 2179 | - justify-content: space-between; | |
| 2180 | -} | |
| 2181 | - | |
| 2182 | -.wpsc-merge-container .wpsc-merge-warning { | |
| 2183 | - background-color: #fff8e5; | |
| 2184 | - padding: 5px 15px; | |
| 2185 | - margin-bottom: 15px; | |
| 2186 | - font-size: 14px; | |
| 2187 | - border-radius: 5px; | |
| 2188 | - text-align: center; | |
| 2189 | - border: 1px solid #FFE79B; | |
| 2190 | -} | |
| 2191 | - | |
| 2192 | -.wpsc-merge-container .wpsc-merge-box { | |
| 2193 | - width: 100%; | |
| 2194 | - background-color: #f0f0f0; | |
| 2195 | - position: relative; | |
| 2196 | - display: inline-flex; | |
| 2197 | - border-radius: 5px; | |
| 2198 | - padding: 10px 0px; | |
| 2199 | -} | |
| 2200 | - | |
| 2201 | -.wpsc-merge-container .wpsc-merge-box:nth-child(4) { | |
| 2202 | - margin-bottom: 10px; | |
| 2203 | -} | |
| 2204 | - | |
| 2205 | -.wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details { | |
| 2206 | - padding: 0px 15px; | |
| 2207 | - position: relative; | |
| 2208 | - flex: 1 1 30%; | |
| 2209 | -} | |
| 2210 | - | |
| 2211 | -.wpsc-merge-container .wpsc-merge-box .wpsc-merge-id { | |
| 2212 | - padding: 0px 15px; | |
| 2213 | - position: relative; | |
| 2214 | -} | |
| 2215 | - | |
| 2216 | -.wpsc-merge-container .wpsc-merge-box .wpsc-merge-id > div { | |
| 2217 | - font-size: 14px; | |
| 2218 | - color: #777; | |
| 2219 | - background-color: #E5E4E2; | |
| 2220 | - padding: 5px 15px; | |
| 2221 | - border-radius: 5px; | |
| 2222 | - border: 1px solid #D3D3D3; | |
| 2223 | -} | |
| 2224 | - | |
| 2225 | -.wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details h3 { | |
| 2226 | - font-size: 14px; | |
| 2227 | - margin: 0em 0 0.8em 0; | |
| 2228 | -} | |
| 2229 | - | |
| 2230 | -.wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details > p { | |
| 2231 | - margin: 5px 0 15px 0; | |
| 2232 | - font-size: 12px; | |
| 2233 | - line-height: 0.1; | |
| 2234 | - color: #777; | |
| 2235 | -} | |
| 2236 | - | |
| 2237 | -.wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details > span { | |
| 2238 | - font-style: italic; | |
| 2239 | -} | |
| 2240 | - | |
| 2241 | -.wpsc-merge-divider { | |
| 2242 | - width: 100%; | |
| 2243 | - display: block; | |
| 2244 | - height: 0.5px; | |
| 2245 | - background-color: #C8C8C8; | |
| 2246 | - margin-bottom: 1em; | |
| 2247 | -} | |
| 2248 | - | |
| 2249 | -.wpsc-comment-textarea { | |
| 2250 | - width: 100%; | |
| 2251 | -} | |
| 2252 | - | |
| 2253 | -.wpsc-merge-container .wpsc-merge-direction { | |
| 2254 | - width: 100%; | |
| 2255 | -} | |
| 2256 | - | |
| 2257 | -.wpsc-merge-container .wpsc-merge-direction svg { | |
| 2258 | - width: 12px; | |
| 2259 | - padding: 20px 0px; | |
| 2260 | - display: flex; | |
| 2261 | - margin: auto; | |
| 2262 | -} | |
| 2263 | - | |
| 2264 | -.wpsc-merge-comment-info { | |
| 2265 | - margin: 5px 0 15px 0; | |
| 2266 | - font-size: 12px; | |
| 2267 | - line-height: 0.1; | |
| 2268 | - color: #777; | |
| 2269 | -} | |
| 2270 | - | |
| 2271 | -@media screen and (max-width: 768px) { | |
| 2272 | - | |
| 2273 | - .wpsc-merge-comment-info { | |
| 2274 | - line-height: normal; | |
| 2275 | - } | |
| 2276 | - | |
| 2277 | - .wpsc-merge-container .wpsc-merge-box { | |
| 2278 | - display: block; | |
| 2279 | - } | |
| 2280 | - | |
| 2281 | - .wpsc-merge-container .wpsc-merge-box .wpsc-merge-id { | |
| 2282 | - padding: 0px 15px 10px 15px; | |
| 2283 | - } | |
| 2284 | -} | |
| 2285 | 2285 | /* Merge ticket popup css ends */ |
| 2286 | 2286 | .wpsc-live-agents { |
| 2287 | 2287 | display: flex; |
| 2288 | + flex-direction: column; | |
| 2288 | 2289 | gap: 5px; |
| 2289 | - align-items: center; | |
| 2290 | - flex-wrap: wrap; | |
| 2290 | + align-items: stretch; | |
| 2291 | 2291 | } |
| 2292 | 2292 | |
| 2293 | 2293 | .wpsc-agent-avatar { |
| 2294 | 2294 | position: relative; |
| 2295 | - width: 32px; | |
| 2296 | - height: 32px; | |
| 2297 | - border-radius: 50%; | |
| 2298 | - overflow: hidden; | |
| 2295 | + display: flex; | |
| 2296 | + align-items: center; | |
| 2297 | + gap: 6px; | |
| 2298 | + max-width: 100%; | |
| 2299 | + padding: 2px 2px 2px 10px; | |
| 2300 | + border-radius: 16px; | |
| 2301 | + background-color: #f0f0f1; | |
| 2299 | 2302 | cursor: pointer; |
| 2303 | + box-sizing: border-box; | |
| 2300 | 2304 | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| 2301 | 2305 | } |
| 2302 | 2306 | |
| 2303 | 2307 | /* Avatar image */ |
| 2304 | 2308 | .wpsc-agent-avatar img { |
| 2305 | - width: 100%; | |
| 2306 | - height: 100%; | |
| 2309 | + width: 28px; | |
| 2310 | + height: 28px; | |
| 2311 | + flex-shrink: 0; | |
| 2307 | 2312 | object-fit: cover; |
| 2308 | 2313 | border-radius: 50%; |
| 2314 | +} | |
| 2315 | + | |
| 2316 | +/* Agent name shown alongside avatar (also covers installs with avatars disabled) */ | |
| 2317 | +.wpsc-agent-name { | |
| 2318 | + overflow: hidden; | |
| 2319 | + text-overflow: ellipsis; | |
| 2320 | + white-space: nowrap; | |
| 2321 | + font-size: 12px; | |
| 2309 | 2322 | } |
| 2310 | 2323 | |
| 2311 | 2324 | /* Hover effect */ |
| 2312 | 2325 | .wpsc-agent-avatar:hover { |
