PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 2.2.2
Page Builder: Pagelayer – Drag and Drop website builder v2.2.2
2.2.2 2.2.1 2.2.0 2.1.9 2.1.8 2.1.7 2.1.6 2.1.5 2.1.4 2.1.3 trunk 0.9.0 0.9.1 0.9.2 0.9.3 0.9.4 0.9.5 0.9.6 0.9.7 0.9.8 0.9.9 1.0.0 1.0.2 1.0.3 1.0.4 All 130 releases
← All changes | css/pagelayer-editor.css +2722 -130 2.1.3 → 2.2.2 View file →
@@ -8,12 +8,14 @@
8 8
9 9 html {
10 10 line-height: 1.15; /* 1 */
11 11 -webkit-text-size-adjust: 100%; /* 2 */
12 + overflow: hidden !important;
12 13 }
13 14
14 15 body {
15 16 margin: 0;
17 + overflow: hidden !important;
16 18 }
17 19
18 20 main {
19 21 display: block;
@@ -347,10 +349,9 @@
347 349 /*.pagelayer-body-table{
348 350 max-height: 100vh !important;
349 351 }*/
350 352
351 -.pagelayer-iframe{
352 -}
353 +.pagelayer-iframe {}
353 354
354 355 .pagelayer-iframe-holder{
355 356 max-height: 100vh !important;
356 357 height: 100%;
@@ -393,12 +394,10 @@
393 394 top: 22px !important;
394 395 left: 0px !important;
395 396 }
396 397
397 -.pagelayer-screen-desktop{
398 +.pagelayer-screen-desktop {}
398 399
399 -}
400 -
401 400 .pagelayer-screen-tablet{
402 401 height:900px;
403 402 margin:20px auto;
404 403 border: solid #444;
@@ -586,10 +585,10 @@
586 585 }
587 586
588 587 [pagelayer-elpd-active-tab="1"],
589 588 [pagelayer-history-active-tab="1"] {
590 -color: #3e8ef7;
591 -border-bottom: 2px solid #3e8ef7;
589 +color: #2563eb;
590 +border-bottom: 2px solid #2563eb;
592 591 }
593 592
594 593 .pagelayer-dark [pagelayer-elpd-active-tab="1"],
595 594 .pagelayer-dark [pagelayer-history-active-tab="1"]{
@@ -781,19 +780,19 @@
781 780 line-height: 20px;
782 781 }
783 782
784 783 .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
785 -background-color: #3E8EF7;
784 +background-color: #2563eb;
786 785 }
787 786
788 787 .pagelayer-dark .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
789 -background-color: #1066fd;
788 +background-color: #2563eb;
790 789 }
791 790
792 791 .pagelayer-elp-screen .pagelayer-prop-screen:hover,
793 792 .pagelayer-typo-default:hover i,
794 793 .pagelayer-elp-default:hover i{
795 -color: #3E8EF7;
794 +color: #2563eb;
796 795 }
797 796
798 797 .pagelayer-elp-units{
799 798 display: inline-block;
@@ -855,9 +854,8 @@
855 854 font-size: 13px !important;
856 855 color: #666;
857 856 border-radius: unset;
858 857 border:1px solid #CCC;
859 -line-height: 26px;
860 858 width: 100%;
861 859 }
862 860
863 861 .pagelayer-elp-textarea{
@@ -885,33 +883,47 @@
885 883
886 884 .pagelayer-elpd-body input:focus,
887 885 .pagelayer-elpd-body textarea:focus,
888 886 .pagelayer-elpd-body select:focus{
889 -border-color: #00A0D2;
890 -box-shadow: 0 0 1px #00A0D2 inset;
887 +border-color: #2563eb;
888 +box-shadow: 0 0 1px #2563eb inset;
891 889 }
892 890
893 891 .pagelayer-elp-button{
894 -text-transform: unset;
895 -border: 1px solid #00A0D2;
896 -font-weight: unset;
897 -font-size: 12px;
898 -margin:5px;
899 -min-height: unset;
900 -background-color: #00A0D2;
901 -color: #fff;
902 -transition: all 0.3s;
903 -border-radius: unset;
904 -border-radius: 2px;
905 -padding: 10px 15px;
906 -cursor:pointer;
892 +text-transform: unset !important;
893 +border: 1px solid #2563eb !important;
894 +font-weight: 500 !important;
895 +font-size: 13px !important;
896 +margin: 15px auto !important;
897 +min-height: unset !important;
898 +background-color: #2563eb !important;
899 +color: #ffffff !important;
900 +transition: all 0.2s ease !important;
901 +border-radius: 6px !important;
902 +padding: 8px 18px !important;
903 +cursor: pointer !important;
904 +display: block !important;
907 905 }
908 906
909 907 .pagelayer-elp-button:hover{
910 -background-color: #00A0D2bf;
911 -border-color: #00A0D2;
908 +background-color: #1d4ed8 !important;
909 +border-color: #1d4ed8 !important;
912 910 }
913 911
912 +.pagelayer-dark .pagelayer-elp-button{
913 +background-color: #2563eb !important;
914 +border-color: #2563eb !important;
915 +}
916 +
917 +.pagelayer-dark .pagelayer-elp-button:hover{
918 +background-color: #3b82f6 !important;
919 +border-color: #3b82f6 !important;
920 +}
921 +
922 +.pagelayer-elp-group-item .pagelayer-form-item{
923 +padding: 8px 12px !important;
924 +}
925 +
914 926 .pagelayer-elp-image-div,
915 927 .pagelayer-elp-retina-image-div,
916 928 .pagelayer-elp-retina-mobile-image-div{
917 929 padding:7px;
@@ -918,9 +930,9 @@
918 930 width:90%;
919 931 margin:5px auto;
920 932 height:150px;
921 933 position:relative;
922 -border: 1px solid #2EA5DF;
934 +border: 1px solid #2563eb;
923 935 }
924 936
925 937 /* image drop zone css start */
926 938 .pagelayer-elp-drop-zone{
@@ -930,9 +942,9 @@
930 942 height:100%;
931 943 top:0;
932 944 left:0;
933 945 z-index:3;
934 -background-color: #2ea5dff0;
946 +background-color: rgba(37, 99, 235, 0.94);
935 947 display:none;
936 948 }
937 949
938 950 .pagelayer-elp-drop-zone *{
@@ -1091,10 +1103,10 @@
1091 1103 cursor: pointer;
1092 1104 position: absolute;
1093 1105 top: 4px;
1094 1106 right: 4px;
1095 -background-color: #2EA5DF;
1096 -padding: 5px 9px;
1107 +background-color: #2563eb;
1108 +padding: 5px 9px;
1097 1109 max-width: 28px;
1098 1110 max-height: 28px;
1099 1111 -webkit-box-sizing: content-box;
1100 1112 -moz-box-sizing: content-box;
@@ -1588,9 +1600,9 @@
1588 1600 color:#bdbdbd;
1589 1601 }
1590 1602
1591 1603 .pagelayer-elp-icon-span:hover{
1592 -border-color: #00A0D2;
1604 +border-color: #2563eb;
1593 1605 background-color: #3e8ef7;
1594 1606 color: #ffffff;
1595 1607 box-shadow: 0px 1px 1px #3e8ef7bf;
1596 1608 }
@@ -1655,26 +1667,33 @@
1655 1667 left: 8px;
1656 1668 }
1657 1669
1658 1670 .pagelayer-elp-slider-div{
1659 -display: flex;
1660 -padding: 7px 0 0;
1671 +display: flex !important;
1672 +align-items: center !important;
1673 +width: 100% !important;
1674 +padding: 6px 0 !important;
1675 +box-sizing: border-box !important;
1661 1676 }
1662 1677
1663 1678 input.pagelayer-elp-slider{
1664 --webkit-appearance: none;
1665 -width: 70%;
1666 -height: 10px;
1667 -border-radius: 5px;
1668 -background-color: #d3d3d3 !important;
1669 -outline: none;
1670 -opacity: 0.7;
1671 --webkit-transition: .2s;
1672 -transition: opacity .2s;
1673 -font-size: 0px !important;
1674 -padding: 0;
1679 +-webkit-appearance: none !important;
1680 +flex: 1 1 auto !important;
1681 +width: 0 !important;
1682 +height: 6px !important;
1683 +border-radius: 3px !important;
1684 +background-color: #e2e8f0 !important;
1685 +outline: none !important;
1686 +opacity: 0.8 !important;
1687 +transition: opacity 0.2s !important;
1688 +padding: 0 !important;
1689 +margin: 0 !important;
1675 1690 }
1676 1691
1692 +.pagelayer-dark input.pagelayer-elp-slider {
1693 +background-color: #334155 !important;
1694 +}
1695 +
1677 1696 .pagelayer-elp-slider:focus{
1678 1697 border-color: transparent;
1679 1698 box-shadow: 0 0 1px transparent;
1680 1699 }
@@ -1700,45 +1719,102 @@
1700 1719 .pagelayer-elp-slider::-moz-range-thumb{
1701 1720 width: 15px;
1702 1721 height: 15px;
1703 1722 border-radius: 50%;
1704 -background: #00A0D2;
1723 +background: #2563eb;
1705 1724 cursor: pointer;
1706 1725 }
1707 1726
1708 -.pagelayer-elp-slider-value{
1709 -width: 23% !important;
1710 -margin-left: 7%;
1711 -margin-top: -12px;
1712 -border-radius: 3px !important;
1713 -padding: 2px 2px 2px 6px;
1714 -border: 0px solid #fff !important;
1715 -border-bottom: 1px solid #ccc !important;
1727 +.pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
1728 +flex: 0 0 55px !important;
1729 +width: 55px !important;
1730 +height: 28px !important;
1731 +border: 1px solid #cbd5e1 !important;
1732 +border-radius: 6px !important;
1733 +padding: 4px 6px !important;
1734 +margin: 0 0 0 12px !important;
1735 +font-size: 13px !important;
1736 +text-align: center !important;
1737 +background-color: #ffffff !important;
1738 +color: #0f172a !important;
1739 +box-sizing: border-box !important;
1716 1740 }
1717 1741
1742 +.pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
1743 +border-color: #334155 !important;
1744 +background-color: #131926 !important;
1745 +color: #f8fafc !important;
1746 +}
1747 +
1718 1748 .pagelayer-elp-datetime-div{
1719 1749 position: relative;
1750 +width: 100% !important;
1720 1751 }
1721 1752
1753 +.pagelayer-elp-datetime{
1754 +width: 100% !important;
1755 +box-sizing: border-box !important;
1756 +}
1757 +
1722 1758 .pagelayer-elp-postdate-div{
1723 -display: flex;
1724 -border: 1px solid lightgrey;
1725 -border-radius:3px;
1759 +display: flex !important;
1760 +border: 1px solid #cbd5e1 !important;
1761 +border-radius: 6px !important;
1762 +background-color: #ffffff !important;
1763 +height: 32px !important;
1764 +align-items: center !important;
1765 +overflow: hidden !important;
1766 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
1767 +transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
1768 +width: 100% !important;
1769 +box-sizing: border-box !important;
1726 1770 }
1727 1771
1728 -.pagelayer-elp-datetime{
1729 -width: 99%;
1772 +.pagelayer-elp-postdate-div:focus-within {
1773 +border-color: #2563eb !important;
1774 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
1730 1775 }
1731 1776
1732 1777 .pagelayer-elp-postdate{
1733 -border: none !important;
1734 -outline: none;
1778 +flex: 1 !important;
1779 +height: 100% !important;
1780 +border: none !important;
1781 +background: transparent !important;
1782 +padding: 6px 10px !important;
1783 +font-size: 13px !important;
1784 +color: #0f172a !important;
1785 +outline: none !important;
1786 +box-sizing: border-box !important;
1787 +min-width: 0 !important;
1735 1788 }
1736 1789
1790 +.pagelayer-elp-postdate:first-child {
1791 +border-right: 1px solid #cbd5e1 !important;
1792 +}
1793 +
1737 1794 .pagelayer-elp-postdate::-webkit-calendar-picker-indicator {
1738 -cursor: pointer;
1795 +cursor: pointer !important;
1796 +margin-left: 4px !important;
1739 1797 }
1740 1798
1799 +.pagelayer-dark .pagelayer-elp-postdate-div {
1800 +border-color: #334155 !important;
1801 +background-color: #131926 !important;
1802 +}
1803 +
1804 +.pagelayer-dark .pagelayer-elp-postdate-div:focus-within {
1805 +border-color: #2563eb !important;
1806 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
1807 +}
1808 +
1809 +.pagelayer-dark .pagelayer-elp-postdate {
1810 +color: #f8fafc !important;
1811 +}
1812 +
1813 +.pagelayer-dark .pagelayer-elp-postdate:first-child {
1814 +border-right: 1px solid #334155 !important;
1815 +}
1816 +
1741 1817 .pagelayer-elp-fa-calendar{
1742 1818 position: absolute;
1743 1819 height: 40px;
1744 1820 width: 40px;
@@ -1857,31 +1933,105 @@
1857 1933 .pagelayer-dark .pagelayer-elp-padding-linked{
1858 1934 background: #e0e0e0 !important;
1859 1935 }
1860 1936
1937 +.pagelayer-elp-dimension-div {
1938 +display: flex !important;
1939 +align-items: stretch !important;
1940 +width: 100% !important;
1941 +position: relative !important;
1942 +box-sizing: border-box !important;
1943 +}
1944 +
1945 +.pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
1946 +flex: 1 1 auto !important;
1947 +width: 0 !important;
1948 +height: 32px !important;
1949 +border: 1px solid #cbd5e1 !important;
1950 +border-right: none !important;
1951 +border-radius: 0 !important;
1952 +box-sizing: border-box !important;
1953 +padding: 6px 10px !important;
1954 +font-size: 13px !important;
1955 +background-color: #ffffff !important;
1956 +margin: 0 !important;
1957 +}
1958 +
1959 +.pagelayer-elp-dimension-div input.pagelayer-elp-dimension:first-child {
1960 +border-radius: 6px 0 0 6px !important;
1961 +}
1962 +
1861 1963 .pagelayer-elp-dimension-div i.pli{
1862 -padding:8px 11px;
1863 -border: 1px solid #d1d1d1;
1864 -border-left:0px !important;
1865 -cursor: pointer;
1866 -background: #FFF;
1867 -vertical-align:top;
1868 -font-size: 12px;
1869 -border-top-right-radius: 3px;
1870 -border-bottom-right-radius: 3px;
1964 +flex: 0 0 auto !important;
1965 +width: 36px !important;
1966 +height: 32px !important;
1967 +border: 1px solid #cbd5e1 !important;
1968 +border-radius: 0 6px 6px 0 !important;
1969 +box-sizing: border-box !important;
1970 +background-color: #f8fafc !important;
1971 +color: #64748b !important;
1972 +cursor: pointer !important;
1973 +display: flex !important;
1974 +align-items: center !important;
1975 +justify-content: center !important;
1976 +margin: 0 !important;
1977 +position: static !important;
1978 +font-size: 14px !important;
1979 +line-height: normal !important;
1980 +transition: background-color 0.15s ease, color 0.15s ease !important;
1871 1981 }
1872 1982
1983 +.pagelayer-elp-dimension-div i.pli:hover {
1984 +background-color: #f1f5f9 !important;
1985 +color: #2563eb !important;
1986 +}
1987 +
1988 +.pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
1873 1989 .pagelayer-elp-dimension-linked{
1874 -background: #1a7fb0 !important;
1875 -color: #fff !important;
1876 -border: 1px solid #1a7fb0 !important;
1990 +background-color: #2563eb !important;
1991 +border-color: #2563eb !important;
1992 +color: #ffffff !important;
1877 1993 }
1878 1994
1879 -.pagelayer-elp-dimension:first-child{
1880 -border-top-left-radius: 3px;
1881 -border-bottom-left-radius: 3px;
1995 +/* Focus states */
1996 +.pagelayer-elp-dimension-div:focus-within input {
1997 +border-color: #2563eb !important;
1882 1998 }
1883 1999
2000 +.pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
2001 +border-color: #2563eb !important;
2002 +}
2003 +
2004 +/* Dark Mode Overrides */
2005 +.pagelayer-dark .pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
2006 +border-color: #334155 !important;
2007 +background-color: #131926 !important;
2008 +color: #f8fafc !important;
2009 +}
2010 +
2011 +.pagelayer-dark .pagelayer-elp-dimension-div i.pli {
2012 +border-color: #334155 !important;
2013 +background-color: #1e1e24 !important;
2014 +color: #94a3b8 !important;
2015 +}
2016 +
2017 +.pagelayer-dark .pagelayer-elp-dimension-div i.pli:hover:not(.pagelayer-elp-dimension-linked) {
2018 +background-color: #2d2d34 !important;
2019 +color: #3b82f6 !important;
2020 +}
2021 +
2022 +.pagelayer-dark .pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
2023 +.pagelayer-dark .pagelayer-elp-dimension-linked {
2024 +background-color: #2563eb !important;
2025 +border-color: #2563eb !important;
2026 +color: #ffffff !important;
2027 +}
2028 +
2029 +.pagelayer-dark .pagelayer-elp-dimension-div:focus-within input,
2030 +.pagelayer-dark .pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
2031 +border-color: #2563eb !important;
2032 +}
2033 +
1884 2034 /* Pagelayer Multi Select Property */
1885 2035 .pagelayer-elp-multiselect{
1886 2036 min-height: 25px;
1887 2037 width:95%;
@@ -2035,17 +2185,108 @@
2035 2185 float: left;
2036 2186 }
2037 2187
2038 2188 .pagelayer-elp-audio-div,
2039 -.pagelayer-elp-media-div{
2040 -position: relative;
2189 +.pagelayer-elp-media-div,
2190 +.pagelayer-elp-video-div {
2191 +display: flex !important;
2192 +align-items: stretch !important;
2193 +width: 100% !important;
2194 +position: relative !important;
2195 +box-sizing: border-box !important;
2041 2196 }
2042 2197
2043 -.pagelayer-elp-audio,
2044 -.pagelayer-elp-media{
2045 -width: calc(100% - 40px);
2198 +.pagelayer-elp-audio-div input.pagelayer-elp-audio,
2199 +.pagelayer-elp-media-div input.pagelayer-elp-media,
2200 +.pagelayer-elp-video-div input.pagelayer-elp-video {
2201 +flex: 1 1 auto !important;
2202 +width: 0 !important;
2203 +height: 32px !important;
2204 +border: 1px solid #cbd5e1 !important;
2205 +border-right: none !important;
2206 +border-radius: 6px 0 0 6px !important;
2207 +box-sizing: border-box !important;
2208 +padding: 6px 10px !important;
2209 +font-size: 13px !important;
2210 +background-color: #ffffff !important;
2211 +margin: 0 !important;
2046 2212 }
2047 2213
2214 +.pagelayer-elp-audio-div i.pli,
2215 +.pagelayer-elp-media-div i.pli,
2216 +.pagelayer-elp-video-div i.pli {
2217 +flex: 0 0 auto !important;
2218 +width: 36px !important;
2219 +height: 32px !important;
2220 +border: 1px solid #cbd5e1 !important;
2221 +border-radius: 0 6px 6px 0 !important;
2222 +box-sizing: border-box !important;
2223 +background-color: #f8fafc !important;
2224 +color: #64748b !important;
2225 +cursor: pointer !important;
2226 +display: flex !important;
2227 +align-items: center !important;
2228 +justify-content: center !important;
2229 +margin: 0 !important;
2230 +position: static !important;
2231 +font-size: 14px !important;
2232 +line-height: normal !important;
2233 +transition: background-color 0.15s ease, color 0.15s ease !important;
2234 +}
2235 +
2236 +.pagelayer-elp-audio-div i.pli:hover,
2237 +.pagelayer-elp-media-div i.pli:hover,
2238 +.pagelayer-elp-video-div i.pli:hover {
2239 +background-color: #f1f5f9 !important;
2240 +color: #2563eb !important;
2241 +}
2242 +
2243 +/* Focus states */
2244 +.pagelayer-elp-audio-div:focus-within input,
2245 +.pagelayer-elp-media-div:focus-within input,
2246 +.pagelayer-elp-video-div:focus-within input {
2247 +border-color: #2563eb !important;
2248 +}
2249 +
2250 +.pagelayer-elp-audio-div:focus-within i.pli,
2251 +.pagelayer-elp-media-div:focus-within i.pli,
2252 +.pagelayer-elp-video-div:focus-within i.pli {
2253 +border-color: #2563eb !important;
2254 +}
2255 +
2256 +/* Dark Mode*/
2257 +.pagelayer-dark .pagelayer-elp-audio-div input.pagelayer-elp-audio,
2258 +.pagelayer-dark .pagelayer-elp-media-div input.pagelayer-elp-media,
2259 +.pagelayer-dark .pagelayer-elp-video-div input.pagelayer-elp-video {
2260 +border-color: #334155 !important;
2261 +background-color: #131926 !important;
2262 +color: #f8fafc !important;
2263 +}
2264 +
2265 +.pagelayer-dark .pagelayer-elp-audio-div i.pli,
2266 +.pagelayer-dark .pagelayer-elp-media-div i.pli,
2267 +.pagelayer-dark .pagelayer-elp-video-div i.pli {
2268 +border-color: #334155 !important;
2269 +background-color: #1e1e24 !important;
2270 +color: #94a3b8 !important;
2271 +}
2272 +
2273 +.pagelayer-dark .pagelayer-elp-audio-div i.pli:hover,
2274 +.pagelayer-dark .pagelayer-elp-media-div i.pli:hover,
2275 +.pagelayer-dark .pagelayer-elp-video-div i.pli:hover {
2276 +background-color: #2d2d34 !important;
2277 +color: #3b82f6 !important;
2278 +}
2279 +
2280 +.pagelayer-dark .pagelayer-elp-audio-div:focus-within input,
2281 +.pagelayer-dark .pagelayer-elp-media-div:focus-within input,
2282 +.pagelayer-dark .pagelayer-elp-video-div:focus-within input,
2283 +.pagelayer-dark .pagelayer-elp-audio-div:focus-within i.pli,
2284 +.pagelayer-dark .pagelayer-elp-media-div:focus-within i.pli,
2285 +.pagelayer-dark .pagelayer-elp-video-div:focus-within i.pli {
2286 +border-color: #2563eb !important;
2287 +}
2288 +
2048 2289 .pagelayer-elp-audio-insert,
2049 2290 .pagelayer-elp-media-select{
2050 2291 position: absolute;
2051 2292 top: 0;
@@ -2130,8 +2371,10 @@
2130 2371 margin: 0px;
2131 2372 padding: 10px 0;
2132 2373 position: relative;
2133 2374 border-bottom: 1px dashed #ccc;
2375 +display: flex;
2376 +align-items: center;
2134 2377 }
2135 2378
2136 2379 .pagelayer-elp-typo-fonts{
2137 2380 padding: 10px 0;
@@ -2138,10 +2381,22 @@
2138 2381 }
2139 2382
2140 2383 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
2141 2384 padding: 5px 0;
2385 +display: flex;
2386 +align-items: center;
2387 +justify-content: space-between;
2142 2388 }
2143 2389
2390 +.pagelayer-elp-gradient-div .pagelayer-elp-label{
2391 +width: auto !important;
2392 +}
2393 +
2394 +.pagelayer-elp-gradient-input{
2395 +width: 65px !important;
2396 +text-align: center;
2397 +}
2398 +
2144 2399 .pagelayer-elp-gradient-color{
2145 2400 padding: 15px 0px !important;
2146 2401 }
2147 2402
@@ -2172,8 +2427,9 @@
2172 2427
2173 2428 .pagelayer-elp-filter-input{
2174 2429 background-position: center center !important;
2175 2430 background-size: cover !important;
2431 +width: 50% !important;
2176 2432 }
2177 2433
2178 2434 .pagelayer-elp-filter-blur .pagelayer-elp-filter-input{
2179 2435 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAKCAIAAAC2Wq7lAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABq9JREFUeJyVlmtvHGcZhnfOszs7u+s9ENtrI9eqHbWJKSSIlBz4QD/mFxQpUvlSviTKb4nyC4qI/0HkCCgijapQQJBDUe04uPEh69re887OeXa43l2wjNsK+toejd/Dc7if+7nfUTMnhiRJGxsbS0tLk3/TNL1+/fra2hrzvPO8c+fOzZs3eZlsuHv37u3btydL5XL5xo0bv/rwwzeXl9Ikff16b+3Bg3v3fvPs6bMwiqbPTF/92ZX33//FpUvvFoulfq/7ycOHH/36o4d//MRxBpZlrays/PKDD35y6d36XN31gid//9tvf/+7x59+2mg0dF1fXlq6cuXylWvXzp07Z1mFXrfz4MHaxx//YfPFJsZnpqdXfnD+xxcvnHv7fC6fazVbX6x/8fTpsxebm439fU2RL1648NPLl996620rb3W73a1/bj198qTf7w+HQ1mWK5XqwsLC4uIbc3PzZGGYpnoSFNI7hdHJ+cnzePLUkpSRcCBl+M2MmMiMt6X8iCOSzIIcR3E6GmVGYrBDVbSJH1lRVE1jb5ImSRJHYRDFIYYUVcWmooi/NMPxxHN9TdWTUYJFlaEpo1Ey9ithM0wiY5TESYJ5JnVVsy0rCAMiGKWjGMsRxiN84F04HdtniLNh6HpD3cV4pE7yPAXHdx0AJSsydoAjEYOcE/AAJwInYk3TFUmJRUj8BmEYEAd14xSR6brBIALf87udnuP0Qz9UJNk09FwuB1N0zQBkTkErUPA8V1Uk3dBY5bhh6rgOwngwcMjQ9704jgEym8vaUUHxXFCnHr7rEtbQdclfkSRN1UamqcgCGvY7w2Gn3QY2w/hvpvzP8Y3YaZqmKEo2m6V6QeA3j5ps6/UHVCyXs6q1ipRK5UpFMwzHcZuHRy7+3SGh66o+NTWVy+aKpSIjDMJWu+UMnTiISF5RlalyGWRVTS8UberW7fb2Gw3o7flelMRWLletVuM4sW2bzFzPPTo88L3hYIBxn5DsQkFVVDvOg6rn+c1WS9XUoQMsrgLfMikuqCTPKI4H/T5wD5wh7FOXl5dPpkoPZ/7TI8yXSiUkZqIazERRtLm5ebwK5Kx+f34eOArFAqX7/PN/sEYvhUHgDoeLiwv1+kwmIxMWiR8eHv75r3+hG8DLGQyKUyWEAmJTq0ql0h/0Xmxs0gppOgr8APq8sbBQn63Td1SPIn/1VaPdbkEB2if0Pdsu6JrOvGgjVe11up7r8g5RAUXT1XKplNgFyKtrGgoSBPRRZiTaM6JzsZOKSDOQKwrDbg+GOmO+y+r6+vpJFM6ePUvaxxjdv39/dXX1mCbIKiAer966dQthfvnyJe8k/OjRo9XVewHM1xTKuLi4ePXqtWKhQBsBEHB/+erVZ5/9icY2dL1aq62snH/vvZ+riuIF/u727s7Oq3bnS/BCROx8ng1z9Xo2myNJ+gISbW/vuq4DNci8YNsz0zPWzKysSHgE4k67gyiQHt1ocz6fL+RtpIoeBqz2mIMoGq2IzaxpGYomKRJZoTXoTuQQVyhUD5RPCufXxeXU6td7h0nIIgTCsh4/fry9s7O7vaPq2vSZM3VIMjMDymw6OjwcOA6RPX/+nILYBfvijy5C/nfe+aGZNTutdhxGGxvrW1tbFBnI5ufnZ2frXAe1ahV67uy9braahwcHjf0GG/JWntU3l5bn6rOarnGh+J4HF/YPGv3+oFCwOVgqTnHNWfm8Zuh7O7ugtvd6j7zptVqtlsvm6XpVVwGFvsNFr99z+gPXE3r03TTl24agnCbwTeKYhleiwPeLIGUY+qThCRo+kw+hkwMt44d+LitqZuWsJIooLPVAjziezZrgpQpRsCu1KlrT6XSoFaU+ah6hCHE5LpWn2MbT0HTuG2jv+m6r2ez1+3RfrfY9lAKbpakSXg729yFjt9MlAHhB37GHypkml1WC7KOvQ8dpddqD3iCMwtOgfCMd/g9QRGdK8r9Pi9tnNLm/meTuU4SkISVQfzxgKfCNnbEuIaW6afDmieEyzU6eKJGhm7xABzkViuaLdS/MR5mxwIML9xo/7EEsh8gpIwjxgDvDFIhTDFzgjoWh5xqmkaRxmqGPVNM0Y24iWVznrDoDB0wxoPK/NB6Zb7lcjsfxd8rJbccaLGUmZmTesUnSkw8YMS+WBGbEmo4H6bFH3Nniw0boP1o4/npJyI1bQHzfjIGGAjIfInQ/oScjUBWWU1IyIKAi8YcEKSIqnEZjGyPxoYJZ7hGuv3gUTeJEnpMoGX8riY8n4skqemRIqixAoAxQBtCHvvcv+qJRH7fzah8AAAAASUVORK5CYII=') !important;
@@ -2350,14 +2606,47 @@
2350 2606 .pagelayer-elp-group-item .pagelayer-form-item{
2351 2607 padding: 10px 0px 10px 0px;
2352 2608 }
2353 2609
2354 -.pagelayer-elp-group-item .pagelayer-elp-select-div,
2355 2610 .pagelayer-elp-group-item .pagelayer-elp-spinner-div,
2356 -.pagelayer-elp-group-item .pagelayer-elp-color-div{
2357 -right:0px;
2611 +.pagelayer-elp-group-item .pagelayer-elp-color-div,
2612 +.pagelayer-elp-group-item .pagelayer-elp-color-div-holder{
2613 +right: 0px !important;
2358 2614 }
2359 2615
2616 +.pagelayer-elp-group-item .pagelayer-elp-select-div{
2617 +position: relative !important;
2618 +width: 100% !important;
2619 +right: auto !important;
2620 +left: auto !important;
2621 +top: auto !important;
2622 +display: block !important;
2623 +margin-top: 6px !important;
2624 +box-sizing: border-box !important;
2625 +}
2626 +
2627 +.pagelayer-elp-group-item .pagelayer-elp-select {
2628 +width: 100% !important;
2629 +}
2630 +
2631 +.pagelayer-elp-group-item .pagelayer-elp-label-div[type=select] {
2632 +width: 100% !important;
2633 +}
2634 +
2635 +.pagelayer-elp-group-item .pagelayer-elp-label-div {
2636 +display: flex !important;
2637 +width: 100% !important;
2638 +align-items: center !important;
2639 +justify-content: space-between !important;
2640 +flex-wrap: nowrap !important;
2641 +}
2642 +
2643 +.pagelayer-elp-group-item .pagelayer-elp-label-div .pagelayer-elp-units {
2644 +margin-left: auto !important;
2645 +}
2646 +
2647 +
2648 +
2360 2649 .pagelayer-elp-group-item-head{
2361 2650 display:flex;
2362 2651 background: #F8F8F8;
2363 2652 }
@@ -2429,11 +2718,31 @@
2429 2718 padding:5px;
2430 2719 }
2431 2720
2432 2721 .pagelayer-widgets-form input[type="checkbox"]{
2433 -width: auto;
2722 +width: auto !important;
2723 +height: auto !important;
2724 +display: inline-block !important;
2725 +float: left !important;
2726 +clear: left !important;
2727 +margin: 4px 8px 12px 0 !important;
2728 +vertical-align: middle !important;
2434 2729 }
2435 2730
2731 +.pagelayer-widgets-form input[type="checkbox"] + label {
2732 +display: inline-block !important;
2733 +float: left !important;
2734 +width: calc(100% - 35px) !important;
2735 +margin-bottom: 12px !important;
2736 +vertical-align: middle !important;
2737 +cursor: pointer !important;
2738 +}
2739 +
2740 +.pagelayer-widgets-form p,
2741 +.pagelayer-widgets-form li {
2742 +display: flow-root !important;
2743 +}
2744 +
2436 2745 .pagelayer-widgets-form{
2437 2746 line-height:150%;
2438 2747 border-top: none;
2439 2748 padding: 8px;
@@ -2482,8 +2791,20 @@
2482 2791 .pagelayer-topbar-mover{
2483 2792 cursor: all-scroll;
2484 2793 }
2485 2794
2795 +/* Sidebar top header bar */
2796 +td.pagelayer-topbar-holder {
2797 +background: #26292c !important;
2798 +border-bottom: 1px solid #1f2124 !important;
2799 +height: 50px !important;
2800 +display: flex !important;
2801 +align-items: center !important;
2802 +justify-content: space-between !important;
2803 +padding: 0 15px !important;
2804 +box-sizing: border-box !important;
2805 +}
2806 +
2486 2807 .pagelayer-logo{
2487 2808 font-size:18px;
2488 2809 font-weight: bold;
2489 2810 display: block;
@@ -2572,12 +2893,8 @@
2572 2893 font-weight:bolder;
2573 2894 cursor:pointer;
2574 2895 }
2575 2896
2576 -.pagelayer-shortcodes{
2577 -margin-left:17px;
2578 -}
2579 -
2580 2897 .pagelayer-widget-group,
2581 2898 .pagelayer-leftbar-group{
2582 2899 width: 100%;
2583 2900 background-repeat: no-repeat;
@@ -2687,14 +3004,14 @@
2687 3004 }
2688 3005
2689 3006 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
2690 3007 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
2691 -color: #00A0D2;
3008 +color: #2563eb;
2692 3009 }
2693 3010
2694 3011 .pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
2695 3012 .pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
2696 -color: #3d5afe;
3013 +color: #2563eb;
2697 3014 }
2698 3015
2699 3016 /* Trumbowyg color widget style */
2700 3017 .trumbowyg-dropdown-foreColor,
@@ -2827,8 +3144,10 @@
2827 3144 font-size: 14px;
2828 3145 }
2829 3146
2830 3147 .pagelayer-general-options .pagelayer-option-holder{
3148 +display: flex !important;
3149 +align-items: center !important;
2831 3150 padding: 10px;
2832 3151 border-radius: 4px;
2833 3152 transition: all 0.1s;
2834 3153 margin-bottom:4px;
@@ -2839,12 +3158,17 @@
2839 3158 margin: 0 10px;
2840 3159 }
2841 3160
2842 3161 .pagelayer-general-options .pagelayer-option-holder:hover{
2843 -color:#1a7fb0;
2844 -background: #ebebeb;
3162 +color: #3b82f6;
3163 +background: #f1f5f9;
2845 3164 }
2846 3165
3166 +.pagelayer-dark .pagelayer-general-options .pagelayer-option-holder:hover {
3167 +color: #60a5fa !important;
3168 +background: #1e293b !important;
3169 +}
3170 +
2847 3171 .pagelayer-general-options .pagelayer-option-holder:active{
2848 3172 transform: scale(0.97);
2849 3173 cursor: progress;
2850 3174 }
@@ -3632,11 +3956,12 @@
3632 3956 -webkit-animation-delay: 2s;
3633 3957 animation-delay: 2s
3634 3958 }
3635 3959
3636 -.pagelayer-loaded .pagelayer-animation-section .pagelayer-loader, .pagelayer-loaded .pagelayer-animation-section .pagelayer-txt-loading{
3960 +.pagelayer-loaded .pagelayer-animation-section .pagelayer-loader,
3961 +.pagelayer-loaded .pagelayer-animation-section .pagelayer-txt-loading {
3637 3962 opacity: 0;
3638 --webkit-transition: all 0.3s ease-out;
3963 +-webkit-transition: all 0.3s ease-out;
3639 3964 transition: all 0.3s ease-out;
3640 3965 }
3641 3966
3642 3967 @-webkit-keyframes letters-loading {
@@ -3700,8 +4025,9 @@
3700 4025
3701 4026 .pagelayer-update-loader{
3702 4027 display:none;
3703 4028 padding:2px;
4029 +white-space: nowrap;
3704 4030 }
3705 4031
3706 4032 .pagelayer-update-loader span{
3707 4033 width:8px;
@@ -4117,10 +4443,10 @@
4117 4443 cursor:pointer;
4118 4444 line-height:3;
4119 4445 }
4120 4446
4121 -.pagelayer-add-cat-btn:hover{
4122 -color:#00a0d2;
4447 +.pagelayer-add-cat-btn:hover {
4448 +color: #2563eb;
4123 4449 }
4124 4450
4125 4451 .pagelayer-elp-postCategory input, .pagelayer-parent-category > select{
4126 4452 margin-top:5px;
@@ -4243,32 +4569,39 @@
4243 4569 background-color:#007cba;
4244 4570 }
4245 4571
4246 4572 .pagelayer-elp-trash-button-div{
4247 -text-align:center;
4573 +text-align: center !important;
4574 +margin-top: 8px !important;
4248 4575 }
4249 4576
4250 4577 .pagelayer-elp-trash-button{
4251 -color: #cc1818;
4252 -padding: 6px;
4253 -white-space: nowrap;
4254 -background: transparent;
4255 -text-decoration: none;
4256 -font-size: 13px;
4257 -cursor: pointer;
4258 -border: 1px solid #cc1818;
4259 -border-radius: 2px;
4578 +color: #dc2626 !important;
4579 +padding: 6px 14px !important;
4580 +white-space: nowrap !important;
4581 +background: transparent !important;
4582 +text-decoration: none !important;
4583 +font-size: 12px !important;
4584 +font-weight: 500 !important;
4585 +cursor: pointer !important;
4586 +border: 1px solid #dc2626 !important;
4587 +border-radius: 6px !important;
4588 +line-height: 1.2 !important;
4589 +display: inline-block !important;
4590 +transition: all 0.2s ease !important;
4260 4591 }
4261 4592
4262 4593 .pagelayer-elp-trash-button:hover{
4263 -background-color: transparent;
4264 -color: #710d0d;
4265 -box-shadow: inset 0 0 0 1px #710d0d;
4594 +background-color: #fee2e2 !important;
4595 +color: #b91c1c !important;
4596 +border-color: #b91c1c !important;
4597 +box-shadow: none !important;
4266 4598 }
4267 4599
4268 4600 .pagelayer-dark .pagelayer-elp-trash-button:hover{
4269 -color:#ffffff;
4270 -background-color: #cc1818;
4601 +color: #ffffff !important;
4602 +background-color: #dc2626 !important;
4603 +border-color: #dc2626 !important;
4271 4604 }
4272 4605
4273 4606
4274 4607 .pagelayer-dark .pagelayer-elp-postdate-div .pagelayer-elp-postdate::-webkit-calendar-picker-indicator{
@@ -4319,12 +4652,22 @@
4319 4652 border: 1px solid transparent;
4320 4653 }
4321 4654
4322 4655 .pagelayer-widget-list-tooltip{
4323 -width: 150px !important;
4324 -padding: 0px 10px;
4656 +width: 200px !important;
4657 +padding: 6px !important;
4658 +border-radius: 6px !important;
4659 +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
4660 +border: 1px solid #e2e8f0 !important;
4661 +box-sizing: border-box !important;
4325 4662 }
4326 4663
4664 +.pagelayer-dark .pagelayer-widget-list-tooltip {
4665 +background-color: #1e1e24 !important;
4666 +border-color: #2d2d34 !important;
4667 +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
4668 +}
4669 +
4327 4670 .pagelayer-shortcode-holder[pagelayer-tag="pl_row"],
4328 4671 .pagelayer-shortcode-holder[pagelayer-tag="pl_col"],
4329 4672 .pagelayer-widget-list-tooltip .pagelayer-widget-group h5,
4330 4673 .pagelayer-widget-list-tooltip .pagelayer-widget-search-holder{
@@ -4331,39 +4674,85 @@
4331 4674 display:none !important;
4332 4675 }
4333 4676
4334 4677 .pagelayer-widget-list-tooltip .pagelayer-shortcode{
4335 -width: 24px;
4336 -height: 16px;
4337 -font-size: 14px;
4338 -text-align: left;
4678 +width: 20px !important;
4679 +height: 20px !important;
4680 +font-size: 16px !important;
4681 +text-align: center !important;
4682 +display: flex !important;
4683 +align-items: center !important;
4684 +justify-content: center !important;
4339 4685 }
4340 4686
4341 4687 .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder{
4342 4688 width: 100% !important;
4343 4689 height: auto !important;
4344 -float: unset;
4345 -margin: 0px;
4690 +float: unset !important;
4691 +margin: 2px 0px !important;
4692 +border: 1px solid transparent !important;
4693 +border-radius: 4px !important;
4694 +background-color: transparent !important;
4695 +box-sizing: border-box !important;
4696 +transition: background-color 0.15s ease, border-color 0.15s ease !important;
4346 4697 }
4347 4698
4699 +.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
4700 +transform: none !important;
4701 +background-color: #f1f5f9 !important;
4702 +}
4703 +
4704 +.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
4705 +background-color: #2d2d34 !important;
4706 +}
4707 +
4348 4708 .pagelayer-widget-list-tooltip .pagelayer-sc{
4349 -display: flex;
4350 -align-items: center;
4709 +display: flex !important;
4710 +flex-direction: row !important;
4711 +align-items: center !important;
4712 +justify-content: flex-start !important;
4713 +padding: 6px 8px !important;
4714 +margin: 0 !important;
4715 +height: auto !important;
4716 +width: 100% !important;
4717 +box-sizing: border-box !important;
4351 4718 }
4352 4719
4353 4720 .pagelayer-widget-list-tooltip .pagelayer-shortcode-text{
4354 -text-align: left;
4721 +text-align: left !important;
4722 +white-space: nowrap !important;
4723 +overflow: hidden !important;
4724 +text-overflow: ellipsis !important;
4725 +max-width: none !important;
4726 +font-size: 12px !important;
4727 +font-weight: 500 !important;
4728 +color: #334155 !important;
4355 4729 }
4356 4730
4731 +.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-text {
4732 +color: #cbd5e1 !important;
4733 +}
4734 +
4357 4735 .pagelayer-widget-list-tooltip .pagelayer-shortcode-inner{
4358 -height: auto;
4359 -width: 22px;
4736 +height: auto !important;
4737 +width: auto !important;
4738 +margin-bottom: 0px !important;
4739 +margin-right: 10px !important;
4740 +display: flex !important;
4741 +align-items: center !important;
4742 +justify-content: center !important;
4360 4743 }
4361 4744
4362 -.pagelayer-shortcode-holder.pagelayer-list-widget-active{
4363 -border: 1px solid rgb(0, 128, 0);
4745 +.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active{
4746 +border: 1px solid #3b82f6 !important;
4747 +background-color: #eff6ff !important;
4364 4748 }
4365 4749
4750 +.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active {
4751 +border: 1px solid #3b82f6 !important;
4752 +background-color: #1e293b !important;
4753 +}
4754 +
4366 4755 /* Pagelayer widget list tooltip end*/
4367 4756 /* Menu start */
4368 4757 .pagelayer-elp-menu-items-holder{
4369 4758 padding-top: 15px;
@@ -4458,5 +4847,2208 @@
4458 4847
4459 4848 .pagelayer-menu-item-transport{
4460 4849 padding-top: 10px;
4461 4850 }
4462 -/* Menu end */
4851 +
4852 +/* Menu end */
4853 +
4854 +/* ==========================================================================
4855 +MODERN UI REDESIGN
4856 +========================================================================== */
4857 +/* Apply Font Family Everywhere */
4858 +.pagelayer-normalize,
4859 +.pagelayer-body,
4860 +.pagelayer-leftbar-table,
4861 +.pagelayer-leftbar,
4862 +.pagelayer-shortcode-text,
4863 +.pagelayer-elpd-tab,
4864 +.pagelayer-widget-tab,
4865 +.pagelayer-history-tab,
4866 +.pagelayer-leftbar-group h5,
4867 +.pagelayer-history-title,
4868 +.pagelayer-history-subtitle,
4869 +.pagelayer-history-action,
4870 +.pagelayer-general-options,
4871 +.pagelayer-general-options h5,
4872 +.pagelayer-widgets-form label,
4873 +.pagelayer-post-settings-holder,
4874 +.pagelayer-elpd-title,
4875 +.pagelayer-elp-label {
4876 +font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
4877 +}
4878 +
4879 +
4880 +
4881 +/* 2. Pill Segmented Tab Navigation */
4882 +.pagelayer-widget-tabs,
4883 +.pagelayer-elpd-tabs,
4884 +.pagelayer-history-tabs {
4885 +background-color: #f8fafc !important;
4886 +border-bottom: 1px solid #e2e8f0 !important;
4887 +padding: 6px 12px !important;
4888 +margin: 0 !important;
4889 +display: flex !important;
4890 +gap: 6px !important;
4891 +}
4892 +
4893 +.pagelayer-dark .pagelayer-widget-tabs,
4894 +.pagelayer-dark .pagelayer-elpd-tabs,
4895 +.pagelayer-dark .pagelayer-history-tabs {
4896 +background-color: #0b0f19 !important;
4897 +border-bottom: 1px solid #1e293b !important;
4898 +}
4899 +
4900 +.pagelayer-widget-tab,
4901 +.pagelayer-elpd-tab,
4902 +.pagelayer-history-tab {
4903 +flex: 1 !important;
4904 +text-align: center !important;
4905 +padding: 6px 10px !important;
4906 +margin: 0 !important;
4907 +font-size: 12px !important;
4908 +font-weight: 600 !important;
4909 +color: #64748b !important;
4910 +border-radius: 6px !important;
4911 +border-bottom: none !important;
4912 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
4913 +}
4914 +
4915 +.pagelayer-dark .pagelayer-widget-tab,
4916 +.pagelayer-dark .pagelayer-elpd-tab,
4917 +.pagelayer-dark .pagelayer-history-tab {
4918 +color: #94a3b8 !important;
4919 +}
4920 +
4921 +/* Active tab style overlaying standard borders */
4922 +[pagelayer-elpd-active-tab="1"],
4923 +[pagelayer-history-active-tab="1"],
4924 +.pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
4925 +color: #2563eb !important;
4926 +border-bottom: none !important;
4927 +box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
4928 +}
4929 +
4930 +.pagelayer-dark [pagelayer-elpd-active-tab="1"],
4931 +.pagelayer-dark [pagelayer-history-active-tab="1"],
4932 +.pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
4933 +color: #ffffff !important;
4934 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
4935 +}
4936 +
4937 +.pagelayer-widget-tab:hover,
4938 +.pagelayer-elpd-tab:hover,
4939 +.pagelayer-history-tab:hover {
4940 +color: #0f172a !important;
4941 +background-color: rgba(0, 0, 0, 0.02) !important;
4942 +}
4943 +
4944 +.pagelayer-dark .pagelayer-widget-tab:hover,
4945 +.pagelayer-dark .pagelayer-elpd-tab:hover,
4946 +.pagelayer-dark .pagelayer-history-tab:hover {
4947 +color: #ffffff !important;
4948 +background-color: rgba(255, 255, 255, 0.04) !important;
4949 +}
4950 +
4951 +/* 3. Leftbar Shell & Search Area */
4952 +.pagelayer-leftbar-table {
4953 +border-right: 1px solid #e2e8f0 !important;
4954 +}
4955 +
4956 +.pagelayer-leftbar {
4957 +background: #f8fafc !important;
4958 +border-right: none !important;
4959 +}
4960 +
4961 +.pagelayer-dark .pagelayer-leftbar-table {
4962 +border-right: 1px solid #1e293b !important;
4963 +}
4964 +
4965 +.pagelayer-dark .pagelayer-leftbar {
4966 +background: #0b0f19 !important;
4967 +}
4968 +
4969 +.pagelayer-leftbar-search {
4970 +margin: 16px 12px 12px 12px !important;
4971 +position: relative !important;
4972 +}
4973 +
4974 +.pagelayer-search-field {
4975 +background-color: #ffffff !important;
4976 +border: 1px solid #cbd5e1 !important;
4977 +border-radius: 8px !important;
4978 +padding: 8px 12px 8px 32px !important;
4979 +font-size: 13px !important;
4980 +color: #0f172a !important;
4981 +height: 36px !important;
4982 +width: 100% !important;
4983 +transition: all 0.2s ease !important;
4984 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
4985 +}
4986 +
4987 +.pagelayer-dark .pagelayer-search-field {
4988 +background-color: #1e293b !important;
4989 +border: 1px solid #334155 !important;
4990 +color: #f8fafc !important;
4991 +}
4992 +
4993 +.pagelayer-search-field:focus {
4994 +border-color: #3b82f6 !important;
4995 +box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
4996 +outline: none !important;
4997 +}
4998 +
4999 +.pagelayer-dark .pagelayer-search-field:focus {
5000 +border-color: #60a5fa !important;
5001 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
5002 +}
5003 +
5004 +.pagelayer-leftbar-search .pli-search {
5005 +left: 10px !important;
5006 +line-height: 36px !important;
5007 +height: 36px !important;
5008 +color: #94a3b8 !important;
5009 +font-size: 14px !important;
5010 +}
5011 +
5012 +.pagelayer-leftbar-search .pagelayer-sf-empty {
5013 +right: 8px !important;
5014 +line-height: 36px !important;
5015 +height: 36px !important;
5016 +color: #94a3b8 !important;
5017 +font-size: 14px !important;
5018 +}
5019 +
5020 +/* 4. Group Headings */
5021 +.pagelayer-leftbar-group {
5022 +margin-bottom: 8px !important;
5023 +padding: 0 12px !important;
5024 +}
5025 +
5026 +.pagelayer-leftbar-group h5 {
5027 +font-size: 11px !important;
5028 +font-weight: 700 !important;
5029 +letter-spacing: 0.05em !important;
5030 +text-transform: uppercase !important;
5031 +color: #94a3b8 !important;
5032 +margin: 16px 0 8px 0 !important;
5033 +text-align: left !important;
5034 +border-bottom: 1px solid rgba(0, 0, 0, 0.03);
5035 +padding-bottom: 4px;
5036 +}
5037 +
5038 +.pagelayer-dark .pagelayer-leftbar-group h5 {
5039 +color: #cbd5e1 !important;
5040 +background: #0b0f19 !important;
5041 +border-top: 1px solid #1e293b !important;
5042 +border-bottom: 1px solid #1e293b !important;
5043 +}
5044 +
5045 +/* 5. Draggable Widget Cards */
5046 +.pagelayer-shortcodes-widget {
5047 +padding: 0 4px !important;
5048 +}
5049 +
5050 +.pagelayer-shortcode-drag {
5051 +width: 112px !important;
5052 +height: 58px !important;
5053 +margin: 6px !important;
5054 +background-color: #ffffff !important;
5055 +border: 1px solid #e2e8f0 !important;
5056 +border-radius: 10px !important;
5057 +float: left !important;
5058 +display: flex !important;
5059 +flex-direction: column !important;
5060 +align-items: center !important;
5061 +justify-content: center !important;
5062 +transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
5063 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
5064 +box-sizing: border-box !important;
5065 +}
5066 +
5067 +.pagelayer-dark .pagelayer-shortcode-drag {
5068 +background-color: #131926 !important;
5069 +border: 1px solid #1e293b !important;
5070 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
5071 +}
5072 +
5073 +.pagelayer-shortcode-drag:hover {
5074 +transform: translateY(-3px) scale(1.02) !important;
5075 +border-color: #2563eb !important;
5076 +box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.08), 0 4px 6px -4px rgba(37, 99, 235, 0.08) !important;
5077 +}
5078 +
5079 +.pagelayer-dark .pagelayer-shortcode-drag:hover {
5080 +border-color: #2563eb !important;
5081 +box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
5082 +}
5083 +
5084 +.pagelayer-sc {
5085 +padding: 0 !important;
5086 +margin: 0 !important;
5087 +display: flex !important;
5088 +flex-direction: column !important;
5089 +align-items: center !important;
5090 +justify-content: center !important;
5091 +width: 100% !important;
5092 +height: 100% !important;
5093 +}
5094 +
5095 +.pagelayer-shortcode-inner {
5096 +height: auto !important;
5097 +margin-bottom: 6px !important;
5098 +display: flex !important;
5099 +align-items: center !important;
5100 +justify-content: center !important;
5101 +}
5102 +
5103 +.pagelayer-shortcode {
5104 +font-size: 20px !important;
5105 +color: #2563eb !important;
5106 +/* Indigo accent */
5107 +transition: color 0.2s ease !important;
5108 +}
5109 +
5110 +.pagelayer-dark .pagelayer-shortcode {
5111 +color: #818cf8 !important;
5112 +}
5113 +
5114 +.pagelayer-shortcode-text {
5115 +font-size: 11px !important;
5116 +font-weight: 500 !important;
5117 +color: #475569 !important;
5118 +margin: 0 !important;
5119 +text-align: center !important;
5120 +transition: color 0.2s ease !important;
5121 +white-space: nowrap !important;
5122 +overflow: hidden !important;
5123 +text-overflow: ellipsis !important;
5124 +max-width: 90% !important;
5125 +}
5126 +
5127 +.pagelayer-dark .pagelayer-shortcode-text {
5128 +color: #cbd5e1 !important;
5129 +}
5130 +
5131 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5132 +color: #2563eb !important;
5133 +}
5134 +
5135 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5136 +color: #2563eb !important;
5137 +}
5138 +
5139 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5140 +color: #2563eb !important;
5141 +}
5142 +
5143 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5144 +color: #2563eb !important;
5145 +}
5146 +
5147 +/* 6. Settings Panels & Accordions */
5148 +.pagelayer-elpd,
5149 +.pagelayer-post-settings,
5150 +.pagelayer-general-options {
5151 +background: #ffffff !important;
5152 +}
5153 +
5154 +.pagelayer-dark .pagelayer-elpd,
5155 +.pagelayer-dark .pagelayer-post-settings,
5156 +.pagelayer-dark .pagelayer-general-options {
5157 +background: #0b0f19 !important;
5158 +}
5159 +
5160 +.pagelayer-elpd-header {
5161 +border-bottom: 1px solid #e2e8f0 !important;
5162 +background-color: #ffffff !important;
5163 +}
5164 +
5165 +.pagelayer-dark .pagelayer-elpd-header {
5166 +border-bottom: 1px solid #1e293b !important;
5167 +background-color: #0b0f19 !important;
5168 +}
5169 +
5170 +.pagelayer-elpd-title {
5171 +font-weight: 600 !important;
5172 +color: #0f172a !important;
5173 +}
5174 +
5175 +.pagelayer-dark .pagelayer-elpd-title {
5176 +color: #f8fafc !important;
5177 +}
5178 +
5179 +.pagelayer-form-item {
5180 +margin-bottom: 14px !important;
5181 +position: relative !important;
5182 +border-bottom: none !important;
5183 +padding: 8px 0 !important;
5184 +}
5185 +
5186 +.pagelayer-elp-label,
5187 +.pagelayer-widgets-form label {
5188 +font-size: 12px !important;
5189 +font-weight: 600 !important;
5190 +color: #475569 !important;
5191 +margin-bottom: 6px !important;
5192 +display: block !important;
5193 +}
5194 +
5195 +.pagelayer-dark .pagelayer-elp-label,
5196 +.pagelayer-dark .pagelayer-widgets-form label {
5197 +color: #94a3b8 !important;
5198 +}
5199 +
5200 +/* Rounded Inputs */
5201 +.pagelayer-elp-text,
5202 +.pagelayer-elp-spinner,
5203 +.pagelayer-elp-textarea,
5204 +.pagelayer-elp-gradient-input,
5205 +.pagelayer-elp-datetime,
5206 +.pagelayer-elpd-body input[type="text"],
5207 +.pagelayer-widgets-form input[type="text"],
5208 +.pagelayer-widgets-form textarea {
5209 +background-color: #ffffff !important;
5210 +border: 1px solid #cbd5e1 !important;
5211 +border-radius: 8px !important;
5212 +padding: 8px 10px !important;
5213 +font-size: 13px !important;
5214 +color: #0f172a !important;
5215 +transition: all 0.2s ease !important;
5216 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
5217 +box-sizing: border-box !important;
5218 +}
5219 +
5220 +.pagelayer-elp-text,
5221 +.pagelayer-elp-spinner,
5222 +.pagelayer-elp-gradient-input,
5223 +.pagelayer-elp-datetime,
5224 +.pagelayer-elpd-body input[type="text"],
5225 +.pagelayer-widgets-form input[type="text"] {
5226 +height: auto !important;
5227 +}
5228 +
5229 +.pagelayer-dark .pagelayer-elp-text,
5230 +.pagelayer-dark .pagelayer-elp-spinner,
5231 +.pagelayer-dark .pagelayer-elp-textarea,
5232 +.pagelayer-dark .pagelayer-elp-gradient-input,
5233 +.pagelayer-dark .pagelayer-elp-datetime,
5234 +.pagelayer-dark .pagelayer-elpd-body input[type="text"],
5235 +.pagelayer-dark .pagelayer-widgets-form input[type="text"],
5236 +.pagelayer-dark .pagelayer-widgets-form textarea {
5237 +background-color: #131926 !important;
5238 +border: 1px solid #1e293b !important;
5239 +color: #f8fafc !important;
5240 +}
5241 +
5242 +.pagelayer-elp-text:focus,
5243 +.pagelayer-elp-spinner:focus,
5244 +.pagelayer-elp-gradient-input:focus,
5245 +.pagelayer-elpd-body input:focus,
5246 +.pagelayer-widgets-form input:focus,
5247 +.pagelayer-widgets-form textarea:focus {
5248 +border-color: #3b82f6 !important;
5249 +box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
5250 +outline: none !important;
5251 +}
5252 +
5253 +.pagelayer-dark .pagelayer-elp-text:focus,
5254 +.pagelayer-dark .pagelayer-elp-spinner:focus,
5255 +.pagelayer-dark .pagelayer-elp-gradient-input:focus,
5256 +.pagelayer-dark .pagelayer-elpd-body input:focus,
5257 +.pagelayer-dark .pagelayer-widgets-form input:focus,
5258 +.pagelayer-dark .pagelayer-widgets-form textarea:focus {
5259 +border-color: #2563eb !important;
5260 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
5261 +}
5262 +
5263 +/* Custom Dropdown Select styling */
5264 +.pagelayer-elp-select,
5265 +.pagelayer-widgets-form select {
5266 +background-color: #ffffff !important;
5267 +border: 1px solid #cbd5e1 !important;
5268 +border-radius: 8px !important;
5269 +padding: 6px 30px 6px 10px !important;
5270 +font-size: 13px !important;
5271 +color: #0f172a !important;
5272 +height: 34px !important;
5273 +transition: all 0.2s ease !important;
5274 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
5275 +-webkit-appearance: none !important;
5276 +-moz-appearance: none !important;
5277 +appearance: none !important;
5278 +background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
5279 +background-position: right 8px center !important;
5280 +background-size: 18px 18px !important;
5281 +background-repeat: no-repeat !important;
5282 +}
5283 +
5284 +.pagelayer-dark .pagelayer-elp-select,
5285 +.pagelayer-dark .pagelayer-widgets-form select {
5286 +background-color: #131926 !important;
5287 +border: 1px solid #1e293b !important;
5288 +color: #f8fafc !important;
5289 +background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
5290 +}
5291 +
5292 +.pagelayer-elp-select:focus,
5293 +.pagelayer-widgets-form select:focus {
5294 +border-color: #2563eb !important;
5295 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
5296 +outline: none !important;
5297 +}
5298 +
5299 +/* Accordion sections styling */
5300 +.pagelayer-post-settings-lable{
5301 +border: 1px solid #e2e8f0 !important;
5302 +background: #f8fafc !important;
5303 +border-radius: 8px !important;
5304 +padding: 10px 14px !important;
5305 +font-weight: 600 !important;
5306 +color: #334155 !important;
5307 +margin-bottom: 6px !important;
5308 +transition: all 0.2s ease !important;
5309 +}
5310 +
5311 +.pagelayer-dark .pagelayer-post-settings-lable{
5312 +border: 1px solid #1e293b !important;
5313 +background: #131926 !important;
5314 +color: #cbd5e1 !important;
5315 +}
5316 +
5317 +.pagelayer-post-settings-lable:hover{
5318 +border-color: #cbd5e1 !important;
5319 +background-color: #f1f5f9 !important;
5320 +}
5321 +
5322 +.pagelayer-dark .pagelayer-post-settings-lable:hover{
5323 +border-color: #334155 !important;
5324 +background-color: #1e293b !important;
5325 +}
5326 +
5327 +.pagelayer-elp-group-item-head {
5328 +background: #f8fafc !important;
5329 +border: none !important;
5330 +border-bottom: 1px solid #e2e8f0 !important;
5331 +padding: 10px 14px !important;
5332 +font-weight: 600 !important;
5333 +color: #334155 !important;
5334 +margin-bottom: 0 !important;
5335 +transition: all 0.2s ease !important;
5336 +display: flex !important;
5337 +align-items: center !important;
5338 +justify-content: space-between !important;
5339 +cursor: pointer !important;
5340 +}
5341 +
5342 +.pagelayer-dark .pagelayer-elp-group-item-head {
5343 +background: #131926 !important;
5344 +border-bottom: 1px solid #1e293b !important;
5345 +color: #cbd5e1 !important;
5346 +}
5347 +
5348 +.pagelayer-elp-group-item-head:hover {
5349 +background-color: #f1f5f9 !important;
5350 +}
5351 +
5352 +.pagelayer-dark .pagelayer-elp-group-item-head:hover {
5353 +background-color: #1e293b !important;
5354 +}
5355 +
5356 +.pagelayer-elp-group-item-head span {
5357 +padding: 4px 8px !important;
5358 +display: inline-flex !important;
5359 +align-items: center !important;
5360 +}
5361 +
5362 +.pagelayer-elp-group-item-clone:hover i {
5363 +color: #2563eb !important;
5364 +}
5365 +
5366 +.pagelayer-elp-group-item-del:hover i {
5367 +color: #dc2626 !important;
5368 +}
5369 +
5370 +.pagelayer-dark .pagelayer-elp-group-item-clone:hover i {
5371 +color: #60a5fa !important;
5372 +}
5373 +
5374 +.pagelayer-dark .pagelayer-elp-group-item-del:hover i {
5375 +color: #f87171 !important;
5376 +}
5377 +
5378 +.pagelayer-elp-group-item {
5379 +border: 1px solid #e2e8f0 !important;
5380 +border-radius: 10px !important;
5381 +overflow: hidden !important;
5382 +background: #ffffff !important;
5383 +margin-bottom: 12px !important;
5384 +}
5385 +
5386 +.pagelayer-dark .pagelayer-elp-group-item {
5387 +border: 1px solid #1e293b !important;
5388 +background: #0b0f19 !important;
5389 +}
5390 +
5391 +/* Prevent popup clipping inside list group items */
5392 +.pagelayer-elp-group-item:has(.pagelayer-elp-icon-selector:not([style*="display: none"])),
5393 +.pagelayer-elp-group-item:has(.pagelayer-elp-link-list:not([style*="display: none"])) {
5394 +overflow: visible !important;
5395 +}
5396 +
5397 +/* Ranges Sliders Modernization */
5398 +.pagelayer-elp-slider-input[type="range"] {
5399 + -webkit-appearance: none !important;
5400 + width: 100% !important;
5401 + height: 6px !important;
5402 + border-radius: 3px !important;
5403 + background: #e2e8f0 !important;
5404 + outline: none !important;
5405 +}
5406 +
5407 +.pagelayer-dark .pagelayer-elp-slider-input[type="range"] {
5408 + background: #1e293b !important;
5409 +}
5410 +
5411 +.pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
5412 + -webkit-appearance: none !important;
5413 + appearance: none !important;
5414 + width: 16px !important;
5415 + height: 16px !important;
5416 + border-radius: 50% !important;
5417 + background: #3b82f6 !important;
5418 + cursor: pointer !important;
5419 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
5420 + transition: transform 0.1s ease !important;
5421 +}
5422 +
5423 +.pagelayer-dark .pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
5424 + background: #60a5fa !important;
5425 +}
5426 +
5427 +.pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb:hover {
5428 + transform: scale(1.2) !important;
5429 +}
5430 +
5431 +/* 7. Revisions & History Panel */
5432 +.pagelayer-revision-holder,
5433 +.pagelayer-history-holder {
5434 + border: 1px solid #e2e8f0 !important;
5435 + border-radius: 8px !important;
5436 + margin-bottom: 8px !important;
5437 + padding: 12px !important;
5438 + background-color: #ffffff !important;
5439 + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
5440 + transition: all 0.2s ease !important;
5441 +}
5442 +
5443 +.pagelayer-dark .pagelayer-revision-holder,
5444 +.pagelayer-dark .pagelayer-history-holder {
5445 + border: 1px solid #1e293b !important;
5446 + background-color: #131926 !important;
5447 +}
5448 +
5449 +.pagelayer-revision-holder:hover,
5450 +.pagelayer-history-holder:hover,
5451 +.pagelayer-history-holder.current_active_item {
5452 + background-color: #f8fafc !important;
5453 + border-color: #cbd5e1 !important;
5454 +}
5455 +
5456 +.pagelayer-dark .pagelayer-revision-holder:hover,
5457 +.pagelayer-dark .pagelayer-history-holder:hover,
5458 +.pagelayer-dark .pagelayer-history-holder.current_active_item {
5459 + background-color: #1e293b !important;
5460 + border-color: #334155 !important;
5461 +}
5462 +
5463 +.pagelayer-revision-img-holder {
5464 + border-radius: 50% !important;
5465 + width: 24px !important;
5466 + height: 24px !important;
5467 + box-shadow: 0 0 0 2px #e2e8f0 !important;
5468 + overflow: hidden !important;
5469 +}
5470 +
5471 +.pagelayer-dark .pagelayer-revision-img-holder {
5472 + box-shadow: 0 0 0 2px #1e293b !important;
5473 +}
5474 +
5475 +.pagelayer-revision-img-holder img {
5476 + width: 100% !important;
5477 + height: 100% !important;
5478 + object-fit: cover !important;
5479 +}
5480 +
5481 +.pagelayer-history-title {
5482 + font-weight: 600 !important;
5483 + color: #334155 !important;
5484 +}
5485 +
5486 +.pagelayer-dark .pagelayer-history-title {
5487 + color: #f8fafc !important;
5488 +}
5489 +
5490 +.pagelayer-history-subtitle {
5491 + color: #64748b !important;
5492 +}
5493 +
5494 +.pagelayer-dark .pagelayer-history-subtitle {
5495 + color: #94a3b8 !important;
5496 +}
5497 +
5498 +/* 8. Loader overlay & Custom scrollbars */
5499 +.pagelayer-leftbar-scroll::-webkit-scrollbar,
5500 +.pagelayer-leftbar::-webkit-scrollbar,
5501 +.slimScrollDiv::-webkit-scrollbar,
5502 +#pagelayer-history::-webkit-scrollbar,
5503 +#pagelayer-elpd::-webkit-scrollbar {
5504 + width: 6px !important;
5505 + height: 6px !important;
5506 +}
5507 +
5508 +.pagelayer-leftbar-scroll::-webkit-scrollbar-track,
5509 +.pagelayer-leftbar::-webkit-scrollbar-track,
5510 +#pagelayer-history::-webkit-scrollbar-track,
5511 +#pagelayer-elpd::-webkit-scrollbar-track {
5512 + background: transparent !important;
5513 +}
5514 +
5515 +.pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
5516 +.pagelayer-leftbar::-webkit-scrollbar-thumb,
5517 +#pagelayer-history::-webkit-scrollbar-thumb,
5518 +#pagelayer-elpd::-webkit-scrollbar-thumb {
5519 + background: #cbd5e1 !important;
5520 + border-radius: 3px !important;
5521 +}
5522 +
5523 +.pagelayer-dark .pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
5524 +.pagelayer-dark .pagelayer-leftbar::-webkit-scrollbar-thumb,
5525 +.pagelayer-dark #pagelayer-history::-webkit-scrollbar-thumb,
5526 +.pagelayer-dark #pagelayer-elpd::-webkit-scrollbar-thumb {
5527 + background: #334155 !important;
5528 +}
5529 +
5530 +
5531 +/* ==========================================================================
5532 +HEADER BAR AND ACTIVE SUB-TABS OVERRIDES
5533 +========================================================================== */
5534 +
5535 +/* 1. Show and Redesign Iframe Top Bar */
5536 +.pagelayer-iframe-top-bar {
5537 + display: block !important;
5538 + height: 48px !important;
5539 + background-color: #ffffff !important;
5540 + border-bottom: 1px solid #e2e8f0 !important;
5541 + box-sizing: border-box !important;
5542 +}
5543 +
5544 +.pagelayer-dark .pagelayer-iframe-top-bar {
5545 + background-color: #0f172a !important;
5546 + border-bottom: 1px solid #1e293b !important;
5547 +}
5548 +
5549 +.pagelayer-iframe-holder {
5550 + max-height: calc(100vh - 48px) !important;
5551 + height: calc(100vh - 48px) !important;
5552 +}
5553 +
5554 +.pagelayer-iframe-holder-with-bar {
5555 + max-height: calc(100vh - 48px) !important;
5556 + height: calc(100vh - 48px) !important;
5557 +}
5558 +
5559 +/* Header bar inside top container */
5560 +.pagelayer-top-header-bar {
5561 + display: flex !important;
5562 + align-items: center !important;
5563 + justify-content: space-between !important;
5564 + height: 100% !important;
5565 + padding: 0 16px !important;
5566 + color: #475569 !important;
5567 +}
5568 +
5569 +.pagelayer-dark .pagelayer-top-header-bar {
5570 + color: #cbd5e1 !important;
5571 +}
5572 +
5573 +/* Hide legacy bottom button switcher */
5574 +.pagelayer-bottombar-holder,
5575 +.pagelayer-bottombar-row {
5576 + display: none !important;
5577 +}
5578 +
5579 +
5580 +/* 2. Style Opened settings sub-tabs (accordions) */
5581 +.pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5582 + background-color: #eff6ff !important;
5583 + color: #2563eb !important;
5584 + border-left: 4px solid #3b82f6 !important;
5585 + border-radius: 8px 8px 0 0 !important;
5586 + font-weight: 700 !important;
5587 + box-shadow: 0 1px 3px rgba(59, 130, 246, 0.05) !important;
5588 +}
5589 +
5590 +.pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5591 + background-color: #1e293b !important;
5592 + color: #60a5fa !important;
5593 + border-left: 4px solid #2563eb !important;
5594 +}
5595 +
5596 +/* Sibling rows container for opened tab */
5597 +.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
5598 + background-color: #ffffff !important;
5599 + border-left: 4px solid #3b82f6 !important;
5600 + border-right: 1px solid #e2e8f0 !important;
5601 + border-bottom: 1px solid #e2e8f0 !important;
5602 + border-radius: 0 0 8px 8px !important;
5603 + padding: 16px 12px !important;
5604 + margin-bottom: 12px !important;
5605 +}
5606 +
5607 +.pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
5608 + background-color: #0b0f19 !important;
5609 + border-left: 4px solid #2563eb !important;
5610 + border-right: 1px solid #1e293b !important;
5611 + border-bottom: 1px solid #1e293b !important;
5612 +}
5613 +
5614 +/* WordPress postbox (post settings tabs inside iframe) active state */
5615 +.postbox:not(.closed) {
5616 + border: 1px solid #3b82f6 !important;
5617 + border-radius: 10px !important;
5618 + overflow: hidden !important;
5619 + margin-bottom: 16px !important;
5620 + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05) !important;
5621 +}
5622 +
5623 +.pagelayer-dark .postbox:not(.closed) {
5624 + border: 1px solid #334155 !important;
5625 +}
5626 +
5627 +.postbox:not(.closed) .postbox-header,
5628 +.postbox:not(.closed) h2.hndle {
5629 + background-color: #eff6ff !important;
5630 + color: #1e40af !important;
5631 + border-bottom: 1px solid #bfdbfe !important;
5632 +}
5633 +
5634 +.pagelayer-dark .postbox:not(.closed) .postbox-header,
5635 +.pagelayer-dark .postbox:not(.closed) h2.hndle {
5636 + background-color: #1e293b !important;
5637 + color: #60a5fa !important;
5638 + border-bottom: 1px solid #334155 !important;
5639 +}
5640 +
5641 +.postbox:not(.closed) .inside {
5642 + padding: 16px 12px !important;
5643 + background-color: #ffffff !important;
5644 +}
5645 +
5646 +.pagelayer-dark .postbox:not(.closed) .inside {
5647 + background-color: #0b0f19 !important;
5648 +}
5649 +
5650 +/* ==========================================================================
5651 +STYLE SKIN
5652 +========================================================================== */
5653 +
5654 +/* Parent topbar Dark Theme */
5655 +.pagelayer-iframe-top-bar {
5656 +background: #26292c !important;
5657 +border-bottom: 1px solid #1f2124 !important;
5658 +height: 50px !important;
5659 +box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
5660 +display: block !important;
5661 +}
5662 +
5663 +.pagelayer-top-header-bar {
5664 +color: #ffffff !important;
5665 +height: 100% !important;
5666 +}
5667 +
5668 +
5669 +
5670 +/* Header right icons & buttons */
5671 +.pagelayer-header-icon-wrap {
5672 +cursor: pointer !important;
5673 +display: inline-flex !important;
5674 +align-items: center !important;
5675 +justify-content: center !important;
5676 +color: #a4afb7 !important;
5677 +border-radius: 6px !important;
5678 +width: 34px !important;
5679 +height: 34px !important;
5680 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5681 +}
5682 +
5683 +.pagelayer-header-icon-wrap:hover {
5684 +background-color: rgba(255, 255, 255, 0.08) !important;
5685 +color: #ffffff !important;
5686 +transform: translateY(-1px) !important;
5687 +}
5688 +
5689 +.pagelayer-header-right .pagelayer-ai-topbar-btn {
5690 +cursor: pointer !important;
5691 +display: inline-flex !important;
5692 +align-items: center !important;
5693 +justify-content: center !important;
5694 +width: 34px !important;
5695 +height: 34px !important;
5696 +border-radius: 6px !important;
5697 +color: #c084fc !important;
5698 +background: rgba(168, 85, 247, 0.15) !important;
5699 +border: 1px solid rgba(168, 85, 247, 0.3) !important;
5700 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5701 +position: relative !important;
5702 +margin-right: 4px !important;
5703 +box-sizing: border-box !important;
5704 +font-size: 14px !important;
5705 +line-height: 1 !important;
5706 +}
5707 +
5708 +.pagelayer-header-right .pagelayer-ai-topbar-btn:hover,
5709 +.pagelayer-header-right .pagelayer-ai-topbar-btn.active {
5710 +background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
5711 +color: #ffffff !important;
5712 +border-color: transparent !important;
5713 +box-shadow: 0 0 12px rgba(124, 58, 237, 0.5) !important;
5714 +transform: translateY(-1px) !important;
5715 +}
5716 +
5717 +.pagelayer-header-right .pagelayer-ai-topbar-btn i {
5718 +font-size: 14px !important;
5719 +line-height: 1 !important;
5720 +pointer-events: none !important;
5721 +color: inherit !important;
5722 +}
5723 +
5724 +.pagelayer-header-divider {
5725 +width: 1px !important;
5726 +height: 20px !important;
5727 +background-color: rgba(255, 255, 255, 0.1) !important;
5728 +margin: 0 4px !important;
5729 +}
5730 +
5731 +.pagelayer-header-right .pagelayer-update-button {
5732 +width: 76px !important;
5733 +background-color: #2563eb !important;
5734 +color: #ffffff !important;
5735 +border-radius: 6px !important;
5736 +padding: 0 !important;
5737 +font-weight: 600 !important;
5738 +box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
5739 +height: 34px !important;
5740 +display: inline-flex !important;
5741 +align-items: center !important;
5742 +justify-content: center !important;
5743 +border: none !important;
5744 +font-size: 13px !important;
5745 +line-height: normal !important;
5746 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5747 +}
5748 +
5749 +.pagelayer-header-right .pagelayer-update-button:hover {
5750 +background-color: #1d4ed8 !important;
5751 +box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
5752 +transform: translateY(-1px) !important;
5753 +}
5754 +
5755 +.pagelayer-header-right .pagelayer-close-button {
5756 +background-color: rgba(255, 255, 255, 0.08) !important;
5757 +color: #a4afb7 !important;
5758 +border: none !important;
5759 +border-radius: 6px !important;
5760 +width: 34px !important;
5761 +height: 34px !important;
5762 +display: inline-flex !important;
5763 +align-items: center !important;
5764 +justify-content: center !important;
5765 +padding: 0 !important;
5766 +cursor: pointer !important;
5767 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5768 +box-sizing: border-box !important;
5769 +}
5770 +
5771 +.pagelayer-header-right .pagelayer-close-button:hover {
5772 +background-color: #ef4444 !important;
5773 +color: #ffffff !important;
5774 +transform: translateY(-1px) !important;
5775 +}
5776 +
5777 +.pagelayer-header-right .pagelayer-close-button i {
5778 +font-size: 14px !important;
5779 +display: block !important;
5780 +margin: 0 !important;
5781 +padding: 0 !important;
5782 +}
5783 +
5784 +
5785 +
5786 +/* Edit Element properties header */
5787 +.pagelayer-elpd-header {
5788 +background: transparent !important;
5789 +border-bottom: none !important;
5790 +height: 100% !important;
5791 +color: #ffffff !important;
5792 +display: flex;
5793 +align-items: center !important;
5794 +justify-content: space-between !important;
5795 +flex: 1 !important;
5796 +margin-left: 25px !important;
5797 +}
5798 +
5799 +.pagelayer-elpd-title {
5800 +color: #ffffff !important;
5801 +font-weight: 700 !important;
5802 +font-size: 14px !important;
5803 +order: 1 !important;
5804 +margin-right: auto !important;
5805 +}
5806 +
5807 +.pagelayer-elpd-close {
5808 +color: #a4afb7 !important;
5809 +cursor: pointer !important;
5810 +font-size: 16px !important;
5811 +order: 2 !important;
5812 +position: static !important;
5813 +transform: none !important;
5814 +transition: color 0.2s !important;
5815 +}
5816 +
5817 +.pagelayer-elpd-close:hover {
5818 +color: #ffffff !important;
5819 +}
5820 +
5821 +/* Segmented Tab Switchers - Flat light grey theme */
5822 +.pagelayer-widget-tabs,
5823 +.pagelayer-elpd-tabs {
5824 +background-color: #f4f5f7 !important;
5825 +border-bottom: 1px solid #eaeaea !important;
5826 +padding: 0 !important;
5827 +gap: 0 !important;
5828 +display: flex !important;
5829 +width: 100% !important;
5830 +}
5831 +
5832 +.pagelayer-elpd-tabs {
5833 +margin-bottom: 12px !important;
5834 +}
5835 +
5836 +.pagelayer-widget-tab,
5837 +.pagelayer-elpd-tab {
5838 +flex: 1 !important;
5839 +text-align: center !important;
5840 +padding: 12px 6px !important;
5841 +font-size: 12px !important;
5842 +font-weight: 600 !important;
5843 +color: #8c9298 !important;
5844 +border-radius: 0 !important;
5845 +border: none !important;
5846 +background: transparent !important;
5847 +box-shadow: none !important;
5848 +cursor: pointer !important;
5849 +border-bottom: 3px solid transparent !important;
5850 +}
5851 +
5852 +.pagelayer-widget-tab:hover,
5853 +.pagelayer-elpd-tab:hover {
5854 +color: #23282d !important;
5855 +background: transparent !important;
5856 +}
5857 +
5858 +/* Active tab style */
5859 +[pagelayer-elpd-active-tab="1"],
5860 +.pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
5861 +color: #23282d !important;
5862 +border-bottom: 3px solid #2563eb !important;
5863 +/* Brand indigo line */
5864 +font-weight: 700 !important;
5865 +box-shadow: none !important;
5866 +}
5867 +
5868 +/* Sidebar lists backgrounds */
5869 +.pagelayer-leftbar {
5870 +background: #ffffff !important;
5871 +}
5872 +
5873 +/* Search Area */
5874 +.pagelayer-leftbar-search {
5875 +margin: 15px 15px 5px 15px !important;
5876 +}
5877 +
5878 +.pagelayer-search-field {
5879 +border: 1px solid #d5dadf !important;
5880 +border-radius: 3px !important;
5881 +height: 32px !important;
5882 +font-size: 12px !important;
5883 +padding-left: 28px !important;
5884 +box-shadow: none !important;
5885 +background: #ffffff !important;
5886 +}
5887 +
5888 +.pagelayer-search-field:focus {
5889 +border-color: #2563eb !important;
5890 +box-shadow: none !important;
5891 +}
5892 +
5893 +/* Group headings list */
5894 +.pagelayer-leftbar-group {
5895 +display: grid !important;
5896 +grid-template-columns: repeat(3, 1fr) !important;
5897 +gap: 8px !important;
5898 +padding: 0 15px 15px 15px !important;
5899 +box-sizing: border-box !important;
5900 +clear: both !important;
5901 +}
5902 +
5903 +.pagelayer-leftbar-group h5 {
5904 +grid-column: span 3 !important;
5905 +font-size: 11px !important;
5906 +font-weight: 700 !important;
5907 +letter-spacing: 0.5px !important;
5908 +text-transform: uppercase !important;
5909 +color: #495157 !important;
5910 +background: #f4f5f7 !important;
5911 +margin: 15px -15px 10px -15px !important;
5912 +padding: 8px 15px !important;
5913 +border-top: 1px solid #eaeaea !important;
5914 +border-bottom: 1px solid #eaeaea !important;
5915 +text-align: left !important;
5916 +}
5917 +
5918 +/* Draggable widgets cards - style (3 Columns & Compact) */
5919 +.pagelayer-shortcode-drag {
5920 +width: 100% !important;
5921 +min-width: 0 !important;
5922 +/* Prevents text-nowrap children from expanding grid column width */
5923 +height: 58px !important;
5924 +margin: 0 !important;
5925 +background-color: #ffffff !important;
5926 +border: 1px solid #d5dadf !important;
5927 +border-radius: 4px !important;
5928 +display: flex !important;
5929 +flex-direction: column !important;
5930 +align-items: center !important;
5931 +justify-content: center !important;
5932 +gap: 4px !important;
5933 +box-shadow: none !important;
5934 +box-sizing: border-box !important;
5935 +float: none !important;
5936 +transition: all 0.2s ease !important;
5937 +cursor: grab !important;
5938 +}
5939 +
5940 +.pagelayer-shortcode-drag:hover {
5941 +transform: none !important;
5942 +border-color: #2563eb !important;
5943 +box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
5944 +}
5945 +
5946 +.pagelayer-shortcode {
5947 +font-size: 18px !important;
5948 +color: #a4afb7 !important;
5949 +}
5950 +
5951 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5952 +color: #2563eb !important;
5953 +}
5954 +
5955 +.pagelayer-shortcode-inner {
5956 +margin-bottom: 2px !important;
5957 +}
5958 +
5959 +.pagelayer-shortcode-text {
5960 +font-size: 10px !important;
5961 +color: #556068 !important;
5962 +font-weight: 400 !important;
5963 +white-space: nowrap !important;
5964 +overflow: hidden !important;
5965 +text-overflow: ellipsis !important;
5966 +max-width: 95% !important;
5967 +display: block !important;
5968 +}
5969 +
5970 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5971 +color: #2563eb !important;
5972 +}
5973 +
5974 +/* Properties forms, sections and inputs */
5975 +.pagelayer-elpd-section {
5976 +border-bottom: 1px solid #eaeaea !important;
5977 +background: #ffffff !important;
5978 +}
5979 +
5980 +.pagelayer-elpd-section-name {
5981 +background-color: #ffffff !important;
5982 +color: #495157 !important;
5983 +font-weight: 700 !important;
5984 +font-size: 12px !important;
5985 +padding: 12px 15px !important;
5986 +border-bottom: none !important;
5987 +border-radius: 0 !important;
5988 +border-left: none !important;
5989 +box-shadow: none !important;
5990 +transition: background 0.2s !important;
5991 +}
5992 +
5993 +.pagelayer-elpd-section-name:hover {
5994 +background-color: #f7f8f9 !important;
5995 +color: #23282d !important;
5996 +}
5997 +
5998 +.pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5999 +background-color: #f7f8f9 !important;
6000 +color: #23282d !important;
6001 +border-left: none !important;
6002 +border-radius: 0 !important;
6003 +font-weight: 700 !important;
6004 +box-shadow: none !important;
6005 +}
6006 +
6007 +.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6008 +background-color: #ffffff !important;
6009 +border-left: none !important;
6010 +border-right: none !important;
6011 +border-bottom: none !important;
6012 +border-radius: 0 !important;
6013 +padding: 15px 0 !important;
6014 +margin-bottom: 0 !important;
6015 +}
6016 +
6017 +.pagelayer-form-item {
6018 +padding: 6px 16px !important;
6019 +margin-bottom: 10px !important;
6020 +border-bottom: none !important;
6021 +}
6022 +
6023 +.pagelayer-elp-label,
6024 +.pagelayer-widgets-form label {
6025 +font-size: 11px !important;
6026 +color: #6d7882 !important;
6027 +text-transform: uppercase !important;
6028 +font-weight: 700 !important;
6029 +letter-spacing: 0.5px !important;
6030 +margin-bottom: 5px !important;
6031 +}
6032 +
6033 +/* Fields & inputs */
6034 +.pagelayer-elp-text,
6035 +.pagelayer-elp-spinner,
6036 +.pagelayer-elp-textarea,
6037 +.pagelayer-elp-datetime,
6038 +.pagelayer-elpd-body input[type="text"],
6039 +.pagelayer-widgets-form input[type="text"],
6040 +.pagelayer-widgets-form textarea {
6041 +background-color: #ffffff !important;
6042 +border: 1px solid #d5dadf !important;
6043 +border-radius: 3px !important;
6044 +padding: 6px 8px !important;
6045 +font-size: 12px !important;
6046 +color: #23282d !important;
6047 +box-shadow: none !important;
6048 +}
6049 +
6050 +.pagelayer-elp-text,
6051 +.pagelayer-elp-spinner,
6052 +.pagelayer-elp-datetime,
6053 +.pagelayer-elpd-body input[type="text"],
6054 +.pagelayer-widgets-form input[type="text"] {
6055 +height: 30px !important;
6056 +}
6057 +
6058 +.pagelayer-elp-select,
6059 +.pagelayer-widgets-form select {
6060 +background-color: #ffffff !important;
6061 +border: 1px solid #d5dadf !important;
6062 +border-radius: 3px !important;
6063 +padding: 6px 28px 6px 10px !important;
6064 +/* Fixed padding to allow text to show fully with select arrow */
6065 +font-size: 12px !important;
6066 +color: #23282d !important;
6067 +height: 30px !important;
6068 +box-shadow: none !important;
6069 +-webkit-appearance: none !important;
6070 +-moz-appearance: none !important;
6071 +appearance: none !important;
6072 +}
6073 +
6074 +.pagelayer-elp-text:focus,
6075 +.pagelayer-elp-spinner:focus,
6076 +.pagelayer-elpd-body input:focus,
6077 +.pagelayer-widgets-form input:focus,
6078 +.pagelayer-widgets-form textarea:focus,
6079 +.pagelayer-elp-select:focus,
6080 +.pagelayer-widgets-form select:focus {
6081 +border-color: #2563eb !important;
6082 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6083 +outline: none !important;
6084 +}
6085 +
6086 +/* Custom dropdown arrow for select */
6087 +.pagelayer-elp-select,
6088 +.pagelayer-widgets-form select {
6089 +background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236d7882' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
6090 +background-position: right 6px center !important;
6091 +background-size: 14px 14px !important;
6092 +}
6093 +
6094 +/* 4-column Spacing/Padding styles */
6095 +.pagelayer-elp-padding-div {
6096 +display: flex !important;
6097 +align-items: center !important;
6098 +gap: 6px !important;
6099 +background: transparent !important;
6100 +}
6101 +
6102 +.pagelayer-elp-padding-inner {
6103 +display: flex !important;
6104 +flex-direction: column !important;
6105 +align-items: center !important;
6106 +flex: 1 !important;
6107 +}
6108 +
6109 +.pagelayer-elp-padding-inner input {
6110 +width: 100% !important;
6111 +text-align: center !important;
6112 +padding: 6px !important;
6113 +border: 1px solid #d5dadf !important;
6114 +border-radius: 3px !important;
6115 +font-size: 12px !important;
6116 +box-sizing: border-box !important;
6117 +height: 28px !important;
6118 +background: #ffffff !important;
6119 +}
6120 +
6121 +.pagelayer-elp-padding-inner input:focus {
6122 +border-color: #2563eb !important;
6123 +outline: none !important;
6124 +}
6125 +
6126 +.pagelayer-elp-padding-lbl {
6127 +font-size: 9px !important;
6128 +text-transform: uppercase !important;
6129 +color: #a4afb7 !important;
6130 +margin-top: 4px !important;
6131 +font-weight: 600 !important;
6132 +}
6133 +
6134 +.pagelayer-elp-padding-div i.pli-link {
6135 +cursor: pointer !important;
6136 +font-size: 13px !important;
6137 +color: #a4afb7 !important;
6138 +padding: 4px !important;
6139 +border: 1px solid #d5dadf !important;
6140 +border-radius: 3px !important;
6141 +background: #ffffff !important;
6142 +display: flex !important;
6143 +align-items: center !important;
6144 +justify-content: center !important;
6145 +height: 28px !important;
6146 +width: 28px !important;
6147 +box-sizing: border-box !important;
6148 +align-self: flex-start !important;
6149 +}
6150 +
6151 +.pagelayer-elp-padding-div i.pagelayer-elp-padding-linked {
6152 +color: #ffffff !important;
6153 +background: #2563eb !important;
6154 +border-color: #2563eb !important;
6155 +}
6156 +
6157 +/* Close bar & toggle tab styling */
6158 +.pagelayer-leftbar-toggle {
6159 +background: #eaeaea !important;
6160 +border: 1px solid #d5dadf !important;
6161 +border-left: none !important;
6162 +border-radius: 0 4px 4px 0 !important;
6163 +color: #556068 !important;
6164 +width: 12px !important;
6165 +font-size: 14px !important;
6166 +line-height: 40px !important;
6167 +top: 50% !important;
6168 +height: 40px !important;
6169 +display: flex !important;
6170 +align-items: center !important;
6171 +justify-content: center !important;
6172 +box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
6173 +}
6174 +
6175 +.pagelayer-leftbar-toggle:hover {
6176 +background: #d5dadf !important;
6177 +color: #23282d !important;
6178 +}
6179 +
6180 +/* Radio selectors (Normal/Hover, None/Color/Gradient/Image) */
6181 +.pagelayer-elp-radio-div {
6182 +border: 1px solid #d5dadf !important;
6183 +border-radius: 3px !important;
6184 +overflow: hidden !important;
6185 +background: #ffffff !important;
6186 +display: flex !important;
6187 +}
6188 +
6189 +.pagelayer-elp-radio {
6190 +background: #ffffff !important;
6191 +color: #6d7882 !important;
6192 +border: none !important;
6193 +border-right: 1px solid #d5dadf !important;
6194 +font-size: 11px !important;
6195 +padding: 6px 10px !important;
6196 +font-weight: 500 !important;
6197 +transition: all 0.2s ease !important;
6198 +text-align: center !important;
6199 +flex: 1 !important;
6200 +}
6201 +
6202 +.pagelayer-elp-radio:last-child {
6203 +border-right: none !important;
6204 +}
6205 +
6206 +.pagelayer-elp-radio:hover {
6207 +background-color: #f7f8f9 !important;
6208 +color: #23282d !important;
6209 +}
6210 +
6211 +.pagelayer-elp-radio-active {
6212 +background-color: #556068 !important;
6213 +color: #ffffff !important;
6214 +}
6215 +
6216 +.pagelayer-elp-radio-active:hover {
6217 +background-color: #556068 !important;
6218 +}
6219 +
6220 +/* Sidebar bottom control bar */
6221 +.pagelayer-bottombar-holder {
6222 +background: #26292c !important;
6223 +border-top: 1px solid #1f2124 !important;
6224 +padding: 5px 10px !important;
6225 +height: 35px !important;
6226 +display: flex !important;
6227 +align-items: center !important;
6228 +justify-content: space-between !important;
6229 +box-sizing: border-box !important;
6230 +}
6231 +
6232 +.pagelayer-bottombar-row {
6233 +background: #26292c !important;
6234 +height: 35px !important;
6235 +}
6236 +
6237 +.pagelayer-bottombar-holder button {
6238 +border: none !important;
6239 +padding: 4px 8px !important;
6240 +font-size: 11px !important;
6241 +font-weight: 600 !important;
6242 +border-radius: 3px !important;
6243 +cursor: pointer !important;
6244 +transition: background 0.2s !important;
6245 +}
6246 +
6247 +.pagelayer-bottombar-holder .pagelayer-success-btn {
6248 +background-color: #2563eb !important;
6249 +/* Indigo update button */
6250 +color: #ffffff !important;
6251 +}
6252 +
6253 +.pagelayer-bottombar-holder .pagelayer-success-btn:hover {
6254 +background-color: #1d4ed8 !important;
6255 +}
6256 +
6257 +.pagelayer-bottombar-holder .pagelayer-close-button {
6258 +background-color: transparent !important;
6259 +color: #a4afb7 !important;
6260 +border: 1px solid #495157 !important;
6261 +}
6262 +
6263 +.pagelayer-bottombar-holder .pagelayer-close-button:hover {
6264 +background-color: #373a3c !important;
6265 +color: #ffffff !important;
6266 +}
6267 +
6268 +.pagelayer-bottombar-holder i {
6269 +color: #a4afb7 !important;
6270 +font-size: 13px !important;
6271 +cursor: pointer !important;
6272 +transition: color 0.2s !important;
6273 +}
6274 +
6275 +.pagelayer-bottombar-holder i:hover {
6276 +color: #ffffff !important;
6277 +}
6278 +
6279 +/* ==========================================================================
6280 +STYLE SIDEBAR WIDTH & RESPONSIVE DEVICERS OVERRIDES
6281 +========================================================================== */
6282 +
6283 +/* Custom Sidebar Width (Style: 300px) */
6284 +.pagelayer-leftbar-table {
6285 +width: 300px !important;
6286 +min-width: 300px !important;
6287 +max-width: 300px !important;
6288 +}
6289 +
6290 +.pagelayer-leftbar-table.pagelayer-leftbar-hidden {
6291 +width: 0px !important;
6292 +min-width: 0px !important;
6293 +max-width: 0px !important;
6294 +}
6295 +
6296 +.pagelayer-leftbar-holder {
6297 +width: 300px !important;
6298 +}
6299 +
6300 +.pagelayer-leftbar {
6301 +width: 300px !important;
6302 +max-width: 300px !important;
6303 +}
6304 +
6305 +.pagelayer-leftbar-scroll,
6306 +.pagelayer-leftbar-tab,
6307 +.pagelayer-leftbar-holder .slimScrollDiv {
6308 +width: 100% !important;
6309 +max-width: 100% !important;
6310 +box-sizing: border-box !important;
6311 +}
6312 +
6313 +/* absolute center 3-column topbar alignment */
6314 +.pagelayer-header-left {
6315 +flex: 1 !important;
6316 +display: flex !important;
6317 +align-items: center !important;
6318 +justify-content: flex-end !important;
6319 +padding-right: 24px !important;
6320 +}
6321 +
6322 +.pagelayer-header-center {
6323 +color: #ffffff !important;
6324 +font-size: 14px !important;
6325 +font-weight: 500 !important;
6326 +flex: 1 !important;
6327 +display: flex !important;
6328 +align-items: center !important;
6329 +justify-content: center !important;
6330 +}
6331 +
6332 +.pagelayer-header-right {
6333 +flex: 1 !important;
6334 +display: flex !important;
6335 +align-items: center !important;
6336 +justify-content: flex-end !important;
6337 +gap: 12px !important;
6338 +}
6339 +.pagelayer-header-document-title {
6340 +font-size: 13px !important;
6341 +font-weight: 500 !important;
6342 +color: #94a3b8 !important;
6343 +display: inline-flex !important;
6344 +align-items: center !important;
6345 +}
6346 +
6347 +.pagelayer-header-post-name {
6348 +color: #f8fafc !important;
6349 +font-weight: 600 !important;
6350 +background-color: rgba(255, 255, 255, 0.06) !important;
6351 +border: 1px solid rgba(255, 255, 255, 0.12) !important;
6352 +padding: 4px 10px !important;
6353 +border-radius: 6px !important;
6354 +margin-left: 8px !important;
6355 +font-size: 12.5px !important;
6356 +transition: all 0.2s ease !important;
6357 +}
6358 +
6359 +.pagelayer-header-post-name:hover {
6360 +background-color: rgba(255, 255, 255, 0.12) !important;
6361 +border-color: rgba(255, 255, 255, 0.2) !important;
6362 +}
6363 +
6364 +/* Device Selector Modernization (Style) */
6365 +.pagelayer-device-selectors {
6366 +background-color: transparent !important;
6367 +border: none !important;
6368 +padding: 0 !important;
6369 +border-radius: 0 !important;
6370 +display: flex !important;
6371 +gap: 16px !important;
6372 +align-items: center !important;
6373 +}
6374 +
6375 +.pagelayer-device-selectors .screen-mode {
6376 +font-size: 18px !important;
6377 +padding: 6px !important;
6378 +color: #a4afb7 !important;
6379 +cursor: pointer !important;
6380 +border-radius: 4px !important;
6381 +background-color: transparent !important;
6382 +box-shadow: none !important;
6383 +transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
6384 +position: relative !important;
6385 +display: inline-flex !important;
6386 +align-items: center !important;
6387 +justify-content: center !important;
6388 +}
6389 +
6390 +.pagelayer-device-selectors .screen-mode:hover {
6391 +color: #ffffff !important;
6392 +background-color: transparent !important;
6393 +transform: translateY(-1px) !important;
6394 +}
6395 +
6396 +.pagelayer-device-selectors .screen-mode.active {
6397 +color: #2563eb !important;
6398 +/* Premium Brand Indigo */
6399 +background-color: transparent !important;
6400 +box-shadow: none !important;
6401 +transform: scale(1.15) !important;
6402 +}
6403 +
6404 +/* Accent bottom indicator dot for active screen mode */
6405 +.pagelayer-device-selectors .screen-mode.active::after {
6406 +content: '' !important;
6407 +position: absolute !important;
6408 +bottom: -4px !important;
6409 +left: calc(50% - 2px) !important;
6410 +width: 4px !important;
6411 +height: 4px !important;
6412 +background-color: #2563eb !important;
6413 +border-radius: 50% !important;
6414 +box-shadow: 0 0 4px #2563eb !important;
6415 +}
6416 +
6417 +/* Consistent Checkbox and Radio styling (Brand Indigo) */
6418 +input[type="checkbox"],
6419 +input[type="radio"] {
6420 +accent-color: #2563eb !important;
6421 +}
6422 +
6423 +input[type="checkbox"]:checked,
6424 +input[type="radio"]:checked,
6425 +.pagelayer-post-category input[type="checkbox"]:checked,
6426 +.pagelayer-widgets-form input[type="checkbox"]:checked,
6427 +.pagelayer-elpd-body input[type="checkbox"]:checked {
6428 +background-color: #2563eb !important;
6429 +border-color: #2563eb !important;
6430 +}
6431 +
6432 +/* Consistent Toggle switch checked color (Brand Indigo) */
6433 +input[type="checkbox"].pagelayer-elp-checkbox:checked {
6434 +background-color: #2563eb !important;
6435 +border-color: #2563eb !important;
6436 +}
6437 +
6438 +.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked {
6439 +background-color: #2563eb !important;
6440 +border-color: #2563eb !important;
6441 +}
6442 +
6443 +/* Segmented selector active state color override (Brand Indigo) */
6444 +.pagelayer-elp-radio-active,
6445 +.pagelayer-elp-radio-active:hover,
6446 +.pagelayer-dark .pagelayer-elp-radio-active,
6447 +.pagelayer-dark .pagelayer-elp-radio-active:hover {
6448 +background-color: #2563eb !important;
6449 +color: #ffffff !important;
6450 +}
6451 +
6452 +/* ==========================================================================
6453 +DARK MODE
6454 +========================================================================== */
6455 +
6456 +/* Accordion sections and headings */
6457 +.pagelayer-dark .pagelayer-elpd-section {
6458 +border-bottom: 1px solid #1e293b !important;
6459 +background: #0b0f19 !important;
6460 +}
6461 +
6462 +.pagelayer-dark .pagelayer-elpd-section-name {
6463 +background-color: #0b0f19 !important;
6464 +color: #cbd5e1 !important;
6465 +}
6466 +
6467 +.pagelayer-dark .pagelayer-elpd-section-name:hover {
6468 +background-color: #1e293b !important;
6469 +color: #ffffff !important;
6470 +}
6471 +
6472 +.pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
6473 +background-color: #1e293b !important;
6474 +color: #ffffff !important;
6475 +}
6476 +
6477 +.pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6478 +background-color: #0b0f19 !important;
6479 +}
6480 +
6481 +/* Input elements, Selects, Textareas, and Link buttons */
6482 +.pagelayer-dark .pagelayer-elp-text,
6483 +.pagelayer-dark .pagelayer-elp-spinner,
6484 +.pagelayer-dark .pagelayer-elp-textarea,
6485 +.pagelayer-dark .pagelayer-elpd-body input[type="text"],
6486 +.pagelayer-dark .pagelayer-widgets-form input[type="text"],
6487 +.pagelayer-dark .pagelayer-widgets-form textarea,
6488 +.pagelayer-dark .pagelayer-elp-select,
6489 +.pagelayer-dark .pagelayer-widgets-form select,
6490 +.pagelayer-dark .pagelayer-elp-padding-inner input,
6491 +.pagelayer-dark .pagelayer-elp-padding-div i.pli-link {
6492 +color: #f8fafc !important;
6493 +}
6494 +
6495 +/* Form labels text color */
6496 +.pagelayer-dark .pagelayer-elp-label,
6497 +.pagelayer-dark .pagelayer-widgets-form label {
6498 +color: #94a3b8 !important;
6499 +}
6500 +
6501 +/* Segmented selectors container & inactive buttons */
6502 +.pagelayer-dark .pagelayer-elp-radio-div {
6503 +border: 1px solid #334155 !important;
6504 +background: #131926 !important;
6505 +}
6506 +
6507 +.pagelayer-dark .pagelayer-elp-radio {
6508 +border-right: 1px solid #334155 !important;
6509 +}
6510 +
6511 +.pagelayer-dark .pagelayer-elp-radio:last-child {
6512 +border-right: none !important;
6513 +}
6514 +
6515 +.pagelayer-dark .pagelayer-elp-radio:hover {
6516 +background-color: #1e293b !important;
6517 +color: #ffffff !important;
6518 +}
6519 +
6520 +/* Active tab text color */
6521 +.pagelayer-dark [pagelayer-elpd-active-tab="1"],
6522 +.pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
6523 +color: #ffffff !important;
6524 +}
6525 +
6526 +/* Force hidden elements to be display none even if stylesheet has display important */
6527 +.pagelayer-leftbar-group[style*="display: none"],
6528 +.pagelayer-leftbar-group[style*="display:none"],
6529 +.pagelayer-shortcode-drag[style*="display: none"],
6530 +.pagelayer-shortcode-drag[style*="display:none"] {
6531 +display: none !important;
6532 +}
6533 +
6534 +/* Fix desktop screen selector position to sit inline with label */
6535 +.pagelayer-elp-label-div,
6536 +.pagelayer-elp-link-label-div {
6537 +display: flex !important;
6538 +align-items: center !important;
6539 +gap: 6px !important;
6540 +}
6541 +
6542 +.pagelayer-elp-label-div .pagelayer-elp-label,
6543 +.pagelayer-elp-link-label-div .pagelayer-elp-link-label {
6544 +display: inline-block !important;
6545 +width: auto !important;
6546 +vertical-align: middle !important;
6547 +margin-bottom: 0 !important;
6548 +}
6549 +
6550 +.pagelayer-elp-label-div .pagelayer-elp-units,
6551 +.pagelayer-elp-link-label-div .pagelayer-elp-units {
6552 +margin-left: auto !important;
6553 +}
6554 +
6555 +/* Fix textarea height in sidebar */
6556 +.pagelayer-elp-textarea,
6557 +.pagelayer-widgets-form textarea {
6558 +height: 100px;
6559 +min-height: 50px;
6560 +resize: vertical;
6561 +}
6562 +
6563 +/* Fix restore/revert default icon position to sit inline next to the label text */
6564 +.pagelayer-elp-label-div,
6565 +.pagelayer-elp-link-label-div {
6566 +position: relative !important;
6567 +display: flex !important;
6568 +width: 100% !important;
6569 +align-items: center !important;
6570 +flex-wrap: nowrap !important;
6571 +gap: 6px !important;
6572 +}
6573 +
6574 +.pagelayer-elp-typo .pagelayer-elp-label {
6575 +position: relative !important;
6576 +display: inline-flex !important;
6577 +align-items: center !important;
6578 +flex-wrap: wrap !important;
6579 +gap: 6px !important;
6580 +}
6581 +
6582 +.pagelayer-elp-default,
6583 +.pagelayer-typo-default {
6584 +position: relative !important;
6585 +display: none !important;
6586 +align-items: center !important;
6587 +justify-content: center !important;
6588 +margin: 0 !important;
6589 +cursor: pointer !important;
6590 +top: 0 !important;
6591 +left: 0 !important;
6592 +right: 0 !important;
6593 +width: auto !important;
6594 +height: auto !important;
6595 +z-index: 5 !important;
6596 +}
6597 +
6598 +.pagelayer-form-item:hover .pagelayer-elp-default[data_show=true],
6599 +.pagelayer-base-control:hover .pagelayer-elp-default[data_show=true] {
6600 +display: inline-flex !important;
6601 +}
6602 +
6603 +.pagelayer-elp-default i,
6604 +.pagelayer-typo-default i {
6605 +font-size: 11px !important;
6606 +color: #64748b !important;
6607 +transition: color 0.15s ease !important;
6608 +}
6609 +
6610 +.pagelayer-elp-default:hover i,
6611 +.pagelayer-typo-default:hover i {
6612 +color: #2563eb !important;
6613 +}
6614 +
6615 +/* Dark mode colors for restore/revert default icons */
6616 +.pagelayer-dark .pagelayer-elp-default i,
6617 +.pagelayer-dark .pagelayer-typo-default i {
6618 +color: #94a3b8 !important;
6619 +}
6620 +
6621 +.pagelayer-dark .pagelayer-elp-default:hover i,
6622 +.pagelayer-dark .pagelayer-typo-default:hover i {
6623 +color: #3b82f6 !important;
6624 +}
6625 +
6626 +/* Active state for topbar header icon wraps */
6627 +.pagelayer-header-icon-wrap.active {
6628 +background-color: rgba(59, 130, 246, 0.2) !important;
6629 +color: #3b82f6 !important;
6630 +}
6631 +
6632 +.pagelayer-dark .pagelayer-header-icon-wrap.active {
6633 +background-color: rgba(96, 165, 250, 0.2) !important;
6634 +color: #60a5fa !important;
6635 +}
6636 +
6637 +/* Right sidebar panel for Navigator and History */
6638 +.pagelayer-right-sidebar {
6639 +position: fixed !important;
6640 +right: -300px;
6641 +top: 0px !important;
6642 +bottom: 0;
6643 +width: 300px;
6644 +background: #ffffff !important;
6645 +border-left: 1px solid #cbd5e1 !important;
6646 +box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08) !important;
6647 +z-index: 9999 !important;
6648 +display: flex !important;
6649 +flex-direction: column !important;
6650 +transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6651 +font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
6652 +}
6653 +
6654 +.pagelayer-right-sidebar-header {
6655 +display: flex !important;
6656 +align-items: center !important;
6657 +justify-content: space-between !important;
6658 +padding: 0 15px !important;
6659 +border-bottom: 1px solid #1f2124 !important;
6660 +background: #26292c !important; /* matches left sidebar header topbar background */
6661 +height: 50px !important; /* matches left sidebar header topbar height */
6662 +box-sizing: border-box !important;
6663 +}
6664 +
6665 +.pagelayer-right-sidebar-title {
6666 +margin: 0 !important;
6667 +font-size: 14px !important;
6668 +font-weight: 600 !important;
6669 +color: #ffffff !important;
6670 +}
6671 +
6672 +.pagelayer-right-sidebar-close {
6673 +background: transparent !important;
6674 +border: none !important;
6675 +font-size: 16px !important;
6676 +cursor: pointer !important;
6677 +color: #a4afb7 !important;
6678 +padding: 4px !important;
6679 +line-height: 1 !important;
6680 +display: flex !important;
6681 +align-items: center !important;
6682 +justify-content: center !important;
6683 +outline: none !important;
6684 +}
6685 +
6686 +.pagelayer-right-sidebar-close:hover {
6687 +color: #ffffff !important;
6688 +}
6689 +
6690 +.pagelayer-right-sidebar-content {
6691 +flex: 1 !important;
6692 +overflow-y: auto !important;
6693 +padding: 0 !important;
6694 +position: relative !important;
6695 +}
6696 +
6697 +/* Ensure inside containers are correctly displayed */
6698 +.pagelayer-right-sidebar #pagelayer-navigator,
6699 +.pagelayer-right-sidebar #pagelayer-history {
6700 +position: static !important;
6701 +height: 100% !important;
6702 +background: transparent !important;
6703 +}
6704 +
6705 +.pagelayer-right-sidebar .pagelayer-leftbar-prop-body {
6706 +padding: 12px !important;
6707 +}
6708 +
6709 +.pagelayer-right-sidebar .pagelayer-history-body {
6710 +height: calc(100% - 40px) !important;
6711 +overflow-y: auto !important;
6712 +}
6713 +
6714 +/* Dark mode overrides */
6715 +.pagelayer-dark.pagelayer-right-sidebar {
6716 +background: #1c1c1f !important;
6717 +border-left-color: #1c1c1f !important;
6718 +color: #ffffff !important;
6719 +}
6720 +
6721 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-header {
6722 +background: #0b0f19 !important;
6723 +border-bottom-color: #1e293b !important;
6724 +}
6725 +
6726 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-title {
6727 +color: #ffffff !important;
6728 +}
6729 +
6730 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close {
6731 +color: #94a3b8 !important;
6732 +}
6733 +
6734 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close:hover {
6735 +color: #ffffff !important;
6736 +}
6737 +
6738 +/* Adjust Editor section when Right Sidebar is active */
6739 +.pagelayer-iframe {
6740 +transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6741 +}
6742 +
6743 +.pagelayer-right-sidebar-open .pagelayer-iframe {
6744 +padding-right: 300px !important;
6745 +}
6746 +/* Custom premium input/select/textarea styling inside Sidebar tabs (including Post Settings, Properties, etc.) */
6747 +.pagelayer-leftbar-holder textarea,
6748 +.pagelayer-leftbar-holder select,
6749 +.pagelayer-leftbar-holder input[type="text"],
6750 +.pagelayer-leftbar-holder input[type="search"],
6751 +.pagelayer-leftbar-holder input[type="email"],
6752 +.pagelayer-leftbar-holder input[type="tel"],
6753 +.pagelayer-leftbar-holder input[type="url"],
6754 +.pagelayer-leftbar-holder input:not([type]) {
6755 +border: 1px solid #cbd5e1 !important;
6756 +border-radius: 6px !important;
6757 +background-color: #ffffff !important;
6758 +color: #0f172a !important;
6759 +font-size: 13px !important;
6760 +transition: all 0.2s ease !important;
6761 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6762 +width: 100% !important;
6763 +box-sizing: border-box !important;
6764 +outline: none !important;
6765 +}
6766 +
6767 +.pagelayer-leftbar-holder textarea:focus,
6768 +.pagelayer-leftbar-holder select:focus,
6769 +.pagelayer-leftbar-holder input[type="text"]:focus,
6770 +.pagelayer-leftbar-holder input[type="search"]:focus,
6771 +.pagelayer-leftbar-holder input[type="number"]:focus,
6772 +.pagelayer-leftbar-holder input[type="email"]:focus,
6773 +.pagelayer-leftbar-holder input[type="tel"]:focus,
6774 +.pagelayer-leftbar-holder input[type="url"]:focus,
6775 +.pagelayer-leftbar-holder input:not([type]):focus {
6776 +border-color: #2563eb !important;
6777 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6778 +}
6779 +
6780 +.pagelayer-dark .pagelayer-leftbar-holder textarea,
6781 +.pagelayer-dark .pagelayer-leftbar-holder select,
6782 +.pagelayer-dark .pagelayer-leftbar-holder input[type="text"],
6783 +.pagelayer-dark .pagelayer-leftbar-holder input[type="search"],
6784 +.pagelayer-dark .pagelayer-leftbar-holder input[type="number"],
6785 +.pagelayer-dark .pagelayer-leftbar-holder input[type="email"],
6786 +.pagelayer-dark .pagelayer-leftbar-holder input[type="tel"],
6787 +.pagelayer-dark .pagelayer-leftbar-holder input[type="url"],
6788 +.pagelayer-dark .pagelayer-leftbar-holder input:not([type]) {
6789 +border-color: #334155 !important;
6790 +background-color: #131926 !important;
6791 +color: #f8fafc !important;
6792 +}
6793 +
6794 +.pagelayer-dark .pagelayer-leftbar-holder textarea:focus,
6795 +.pagelayer-dark .pagelayer-leftbar-holder select:focus,
6796 +.pagelayer-dark .pagelayer-leftbar-holder input[type="text"]:focus,
6797 +.pagelayer-dark .pagelayer-leftbar-holder input[type="search"]:focus,
6798 +.pagelayer-dark .pagelayer-leftbar-holder input[type="number"]:focus,
6799 +.pagelayer-dark .pagelayer-leftbar-holder input[type="email"]:focus,
6800 +.pagelayer-dark .pagelayer-leftbar-holder input[type="tel"]:focus,
6801 +.pagelayer-dark .pagelayer-leftbar-holder input[type="url"]:focus,
6802 +.pagelayer-dark .pagelayer-leftbar-holder input:not([type]):focus {
6803 +border-color: #2563eb !important;
6804 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
6805 +}
6806 +
6807 +/* Search field padding and icon alignment fixes */
6808 +.pagelayer-leftbar-holder input.pagelayer-search-field {
6809 +padding: 6px 28px 6px 32px !important;
6810 +height: 32px !important;
6811 +border: 1px solid #cbd5e1 !important;
6812 +border-radius: 6px !important;
6813 +background-color: #ffffff !important;
6814 +color: #0f172a !important;
6815 +font-size: 13px !important;
6816 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6817 +width: 100% !important;
6818 +box-sizing: border-box !important;
6819 +outline: none !important;
6820 +}
6821 +
6822 +.pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-search-field {
6823 +border-color: #334155 !important;
6824 +background-color: #1e293b !important;
6825 +color: #f8fafc !important;
6826 +}
6827 +
6828 +.pagelayer-leftbar-search .pli-search {
6829 +left: 10px !important;
6830 +line-height: 32px !important;
6831 +height: 32px !important;
6832 +color: #94a3b8 !important;
6833 +font-size: 14px !important;
6834 +position: absolute !important;
6835 +top: 0 !important;
6836 +display: flex !important;
6837 +align-items: center !important;
6838 +}
6839 +
6840 +.pagelayer-leftbar-search .pagelayer-sf-empty {
6841 +right: 10px !important;
6842 +line-height: 32px !important;
6843 +height: 32px !important;
6844 +color: #94a3b8 !important;
6845 +font-size: 14px !important;
6846 +position: absolute !important;
6847 +top: 0 !important;
6848 +display: flex !important;
6849 +align-items: center !important;
6850 +cursor: pointer !important;
6851 +transition: color 0.15s ease !important;
6852 +}
6853 +
6854 +.pagelayer-leftbar-search .pagelayer-sf-empty:hover {
6855 +color: #2563eb !important;
6856 +}
6857 +
6858 +/* Fix device icon overlapping/showing on top of select and input fields */
6859 +.pagelayer-elp-screen {
6860 +flex-shrink: 0 !important;
6861 +}
6862 +
6863 +.pagelayer-form-item:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6864 +.pagelayer-form-item:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6865 +.pagelayer-form-item:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6866 +.pagelayer-form-item:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div,
6867 +.pagelayer-base-control:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6868 +.pagelayer-base-control:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6869 +.pagelayer-base-control:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6870 +.pagelayer-base-control:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div {
6871 +max-width: 45% !important;
6872 +flex-wrap: wrap !important;
6873 +padding-right: 10px !important;
6874 +box-sizing: border-box !important;
6875 +}
6876 +
6877 +/* Fix: undo icon overlapping the icon picker select box */
6878 +.pagelayer-form-item:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div,
6879 +.pagelayer-base-control:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div{
6880 +max-width: 45% !important;
6881 +flex-wrap: wrap !important;
6882 +padding-right: 20px !important;
6883 +box-sizing: border-box !important;
6884 +}
6885 +
6886 +.pagelayer-elp-typo {
6887 +display: flex !important;
6888 +align-items: center !important;
6889 +justify-content: space-between !important;
6890 +flex-wrap: wrap !important;
6891 +}
6892 +
6893 +.pagelayer-elp-typo .pagelayer-elp-label {
6894 +width: 48% !important;
6895 +max-width: 48% !important;
6896 +display: flex !important;
6897 +align-items: center !important;
6898 +flex-wrap: wrap !important;
6899 +gap: 6px !important;
6900 +margin-bottom: 0 !important;
6901 +padding-right: 8px !important;
6902 +box-sizing: border-box !important;
6903 +}
6904 +
6905 +.pagelayer-elp-typo .pagelayer-elp-typo-input {
6906 +width: 48% !important;
6907 +max-width: 48% !important;
6908 +}
6909 +
6910 +/* Fix link input field and gear icon alignment to form a unified input group */
6911 +.pagelayer-elp-link-div {
6912 +display: flex !important;
6913 +align-items: stretch !important;
6914 +flex-wrap: wrap !important;
6915 +width: 100% !important;
6916 +}
6917 +
6918 +.pagelayer-elp-link-div input.pagelayer-elp-link {
6919 +flex: 1 1 auto !important;
6920 +width: 0 !important;
6921 +height: 32px !important;
6922 +border: 1px solid #cbd5e1 !important;
6923 +border-right: none !important;
6924 +border-radius: 4px 0 0 4px !important;
6925 +box-sizing: border-box !important;
6926 +padding: 6px 10px !important;
6927 +font-size: 13px !important;
6928 +background-color: #fff !important;
6929 +margin: 0 !important;
6930 +}
6931 +
6932 +.pagelayer-dark .pagelayer-elp-link-div input.pagelayer-elp-link {
6933 +background-color: #252529 !important;
6934 +border-color: #475569 !important;
6935 +color: #cbd5e1 !important;
6936 +}
6937 +
6938 +.pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6939 +flex: 0 0 auto !important;
6940 +width: 36px !important;
6941 +height: 32px !important;
6942 +border: 1px solid #cbd5e1 !important;
6943 +border-radius: 0 4px 4px 0 !important;
6944 +box-sizing: border-box !important;
6945 +background-color: #f8fafc !important;
6946 +color: #64748b !important;
6947 +cursor: pointer !important;
6948 +display: flex !important;
6949 +align-items: center !important;
6950 +justify-content: center !important;
6951 +margin: 0 !important;
6952 +position: static !important;
6953 +font-size: 14px !important;
6954 +line-height: normal !important;
6955 +transition: background-color 0.15s ease, color 0.15s ease !important;
6956 +}
6957 +
6958 +.pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6959 +background-color: #f1f5f9 !important;
6960 +color: #2563eb !important;
6961 +}
6962 +
6963 +.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6964 +background-color: #1e1e24 !important;
6965 +border-color: #475569 !important;
6966 +color: #94a3b8 !important;
6967 +}
6968 +
6969 +.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6970 +background-color: #2d2d34 !important;
6971 +color: #3b82f6 !important;
6972 +}
6973 +
6974 +.pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6975 +border-radius: 4px !important;
6976 +border-right: 1px solid #cbd5e1 !important;
6977 +}
6978 +
6979 +.pagelayer-dark .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6980 +border-right-color: #475569 !important;
6981 +}
6982 +
6983 +.pagelayer-elp-link-div .pagelayer-elp-link-addons {
6984 +width: 100% !important;
6985 +margin-right: 0 !important;
6986 +}
6987 +
6988 +.pagelayer-elp-link-div .pagelayer-elp-link-list {
6989 +width: 100% !important;
6990 +}
6991 +
6992 +/* Match sidebar top header section and bottombar section background in dark mode */
6993 +.pagelayer-dark td.pagelayer-topbar-holder,
6994 +.pagelayer-dark .pagelayer-bottombar-row {
6995 +background: #0b0f19 !important;
6996 +}
6997 +
6998 +.pagelayer-dark td.pagelayer-topbar-holder {
6999 +border-bottom: 1px solid #1e293b !important;
7000 +}
7001 +
7002 +.pagelayer-dark .pagelayer-bottombar-holder {
7003 +border-top: 1px solid #1e293b !important;
7004 +background: #0b0f19 !important;
7005 +}
7006 +
7007 +/* Sidebar fields alignment and symmetric padding */
7008 +.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
7009 +padding: 16px 0 !important;
7010 +box-sizing: border-box !important;
7011 +}
7012 +
7013 +.pagelayer-elpd-section-rows .pagelayer-form-item {
7014 +padding: 8px 16px 8px 12px !important;
7015 +box-sizing: border-box !important;
7016 +width: 100% !important;
7017 +}
7018 +
7019 +.pagelayer-elpd-section-rows .pagelayer-elp-select-div,
7020 +.pagelayer-elpd-section-rows .pagelayer-elp-spinner-div,
7021 +.pagelayer-elpd-section-rows .pagelayer-elp-checkbox-div,
7022 +.pagelayer-elpd-section-rows .pagelayer-elp-color-div-holder,
7023 +.pagelayer-elpd-section-rows .pagelayer-elp-color-div {
7024 +right: 16px !important;
7025 +}
7026 +
7027 +.pagelayer-elpd-section-name {
7028 +margin-top: 0 !important;
7029 +}
7030 +
7031 +/* Global Tab widgets list - styled to match standard widgets tab (3 columns, same box size) */
7032 +#pagelayer-global-widget {
7033 +display: grid !important;
7034 +grid-template-columns: repeat(3, 1fr) !important;
7035 +gap: 8px !important;
7036 +padding: 0 15px 15px 15px !important;
7037 +box-sizing: border-box !important;
7038 +}
7039 +
7040 +#pagelayer-global-widget > .pagelayer-global-widget-shortcodes{
7041 +grid-column: span 3 !important;
7042 +margin-left: -15px !important;
7043 +margin-right: -15px !important;
7044 +}
7045 +
7046 +#pagelayer-global-widget > .pagelayer-leftbar-group{
7047 +grid-column: span 3 !important;
7048 +margin-left: -15px !important;
7049 +margin-right: -15px !important;
7050 +}
7051 +
7052 +#pagelayer-global-widget > .pagelayer-global-widget-pro{
7053 +grid-column: span 3 !important;
7054 +}