| @@ -90,8 +90,9 @@ | ||
| 90 | 90 | .frame-adminify-app { |
| 91 | 91 | position: fixed; |
| 92 | 92 | width: 100%; |
| 93 | 93 | height: 100%; |
| 94 | + height: 100dvh; | |
| 94 | 95 | top: 0; |
| 95 | 96 | left: 0; |
| 96 | 97 | z-index: 999; |
| 97 | 98 | } |
| @@ -134,9 +135,12 @@ | ||
| 134 | 135 | } |
| 135 | 136 | #frame-adminify-app .adminify-frame-wrapper .adminify-frame-content { |
| 136 | 137 | display: flex; |
| 137 | 138 | flex-direction: column; |
| 138 | - height: 100vh; | |
| 139 | + height: calc(100vh - 56px); | |
| 140 | + height: calc(100vh - var(--adminify-topbar-height, 56px)); | |
| 141 | + height: calc(100dvh - 56px); | |
| 142 | + height: calc(100dvh - var(--adminify-topbar-height, 56px)); | |
| 139 | 143 | padding-bottom: 16px; |
| 140 | 144 | position: relative; |
| 141 | 145 | } |
| 142 | 146 | #frame-adminify-app .adminify-frame-wrapper .adminify-frame-content #frame-adminify-app--iframe { |
| @@ -223,9 +227,9 @@ | ||
| 223 | 227 | animation: frame_adminify__appear-animation 0.1s ease-out; |
| 224 | 228 | animation-fill-mode: forwards; |
| 225 | 229 | background: #fff; |
| 226 | 230 | border: 1px solid #dedee7; |
| 227 | - border-radius: 2px; | |
| 231 | + border-radius: "revert-rule"; | |
| 228 | 232 | box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1490196078), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.1490196078), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.1490196078), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.1490196078); |
| 229 | 233 | padding: 16px; |
| 230 | 234 | z-index: 100001; |
| 231 | 235 | } |
| @@ -866,8 +870,11 @@ | ||
| 866 | 870 | } |
| 867 | 871 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap .frame-adminify-admin-menu-wrapper .frame-adminify-admin-main-menu { |
| 868 | 872 | width: var(--adminify-menu-width); |
| 869 | 873 | height: calc(100vh - 78px); |
| 874 | + height: calc(100vh - var(--adminify-sidebar-offset, 78px)); | |
| 875 | + height: calc(100dvh - 78px); | |
| 876 | + height: calc(100dvh - var(--adminify-sidebar-offset, 78px)); | |
| 870 | 877 | transition: width 0.3s; |
| 871 | 878 | } |
| 872 | 879 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap .frame-adminify-admin-menu-wrapper .frame-adminify-admin-main-menu ul.frame-adminify-admin-menu { |
| 873 | 880 | padding: var(--adminify-menu-wrapper-padding-top) var(--adminify-menu-wrapper-padding-right) var(--adminify-menu-wrapper-padding-bottom) var(--adminify-menu-wrapper-padding-left); |
| @@ -881,9 +888,9 @@ | ||
| 881 | 888 | align-items: center; |
| 882 | 889 | justify-content: space-between; |
| 883 | 890 | gap: 10px; |
| 884 | 891 | padding: 6px 14px; |
| 885 | - border-radius: 2px; | |
| 892 | + border-radius: "revert-rule"; | |
| 886 | 893 | font-size: var(--adminify-menu-font-size); |
| 887 | 894 | line-height: var(--adminify-menu-line-height); |
| 888 | 895 | letter-spacing: var(--adminify-menu-letter-spacing); |
| 889 | 896 | color: var(--adminify-menu-text-color); |
| @@ -1177,24 +1184,30 @@ | ||
| 1177 | 1184 | } |
| 1178 | 1185 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-admin-menu .frame-adminify-menu-item .frame-adminify-submenu-wrapper { |
| 1179 | 1186 | position: absolute; |
| 1180 | 1187 | content: ""; |
| 1181 | - top: 0; | |
| 1188 | + top: 0px; | |
| 1189 | + top: var(--adminify-menu-scroll-top, 0px); | |
| 1182 | 1190 | left: 0; |
| 1183 | 1191 | width: 100%; |
| 1184 | 1192 | height: calc(100vh - 78px); |
| 1193 | + height: calc(100vh - var(--adminify-sidebar-offset, 78px)); | |
| 1194 | + height: calc(100dvh - 78px); | |
| 1195 | + height: calc(100dvh - var(--adminify-sidebar-offset, 78px)); | |
| 1185 | 1196 | transform: translateX(100%); |
| 1186 | 1197 | margin: 0; |
| 1187 | 1198 | padding: 16px; |
| 1188 | 1199 | padding-top: 8px; |
| 1189 | 1200 | visibility: hidden; |
| 1190 | - transition: all 0.3s; | |
| 1201 | + transition: transform 0.3s, visibility 0.3s; | |
| 1191 | 1202 | background: var(--adminify-menu-bg); |
| 1192 | 1203 | z-index: 9999; |
| 1193 | - overflow-y: scroll; | |
| 1204 | + overflow: hidden; | |
| 1194 | 1205 | } |
| 1195 | 1206 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-admin-menu .frame-adminify-menu-item .frame-adminify-submenu-wrapper .frame-adminify-submenu { |
| 1196 | 1207 | height: 100%; |
| 1208 | + overflow-y: auto; | |
| 1209 | + overscroll-behavior: contain; | |
| 1197 | 1210 | padding-left: 8px !important; |
| 1198 | 1211 | padding-top: 0 !important; |
| 1199 | 1212 | } |
| 1200 | 1213 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-admin-menu .frame-adminify-menu-item .frame-adminify-submenu-wrapper .frame-adminify-submenu .frame-adminify-two-step { |
| @@ -1252,8 +1265,12 @@ | ||
| 1252 | 1265 | } |
| 1253 | 1266 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-admin-menu .frame-adminify-menu-item .frame-adminify-submenu-wrapper .frame-adminify-submenu .frame-adminify-submenu-item:first-child { |
| 1254 | 1267 | margin-left: 0; |
| 1255 | 1268 | } |
| 1269 | +#frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-admin-menu .frame-adminify-menu-item .frame-adminify-submenu-wrapper .frame-adminify-submenu::-webkit-scrollbar { | |
| 1270 | + width: 0px; | |
| 1271 | + height: 0px; | |
| 1272 | +} | |
| 1256 | 1273 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-admin-menu .frame-adminify-menu-item .frame-adminify-submenu-wrapper::-webkit-scrollbar { |
| 1257 | 1274 | width: 0px; |
| 1258 | 1275 | height: 0px; |
| 1259 | 1276 | } |
| @@ -1487,8 +1504,9 @@ | ||
| 1487 | 1504 | transform: translateX(100%); |
| 1488 | 1505 | transition: transform 0.3s ease; |
| 1489 | 1506 | background: var(--adminify-submenu-wrapper-bg); |
| 1490 | 1507 | z-index: 10; |
| 1508 | + overflow: hidden; | |
| 1491 | 1509 | } |
| 1492 | 1510 | .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-submenu-wrapper .frame-adminify-third-level-panel-container.frame-adminify-third-level-visible { |
| 1493 | 1511 | transform: translateX(0); |
| 1494 | 1512 | } |
| @@ -1493,11 +1511,17 @@ | ||
| 1493 | 1511 | transform: translateX(0); |
| 1494 | 1512 | } |
| 1495 | 1513 | .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-submenu-wrapper .frame-adminify-third-level-panel-container .frame-adminify-third-level-panel { |
| 1496 | 1514 | height: 100%; |
| 1515 | + overflow-y: auto; | |
| 1516 | + overscroll-behavior: contain; | |
| 1497 | 1517 | padding-left: 8px !important; |
| 1498 | 1518 | padding-top: 0 !important; |
| 1499 | 1519 | } |
| 1520 | +.frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-submenu-wrapper .frame-adminify-third-level-panel-container .frame-adminify-third-level-panel::-webkit-scrollbar { | |
| 1521 | + width: 0px; | |
| 1522 | + height: 0px; | |
| 1523 | +} | |
| 1500 | 1524 | .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-submenu-wrapper .frame-adminify-third-level-panel-container .frame-adminify-third-level-panel .frame-adminify-two-step { |
| 1501 | 1525 | margin-bottom: 12px; |
| 1502 | 1526 | } |
| 1503 | 1527 | .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-submenu-wrapper .frame-adminify-third-level-panel-container .frame-adminify-third-level-panel .frame-adminify-two-step .frame-adminify-two-step-title { |
| @@ -1571,19 +1595,45 @@ | ||
| 1571 | 1595 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap { |
| 1572 | 1596 | position: absolute !important; |
| 1573 | 1597 | top: 0; |
| 1574 | 1598 | left: 0; |
| 1599 | + bottom: 0; | |
| 1600 | + height: auto; | |
| 1575 | 1601 | width: 260px !important; |
| 1602 | + display: flex; | |
| 1603 | + flex-direction: column; | |
| 1576 | 1604 | transform: translateX(-100%); |
| 1577 | 1605 | transition: transform 0.4s; |
| 1578 | 1606 | z-index: 9999; |
| 1579 | 1607 | } |
| 1580 | 1608 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap .frame-adminify-admin-menu-wrapper { |
| 1581 | - height: 100vh; | |
| 1609 | + flex: 1 1 auto; | |
| 1610 | + min-height: 0; | |
| 1611 | + height: auto; | |
| 1612 | + overflow-y: auto; | |
| 1613 | + overscroll-behavior: contain; | |
| 1614 | + -webkit-overflow-scrolling: touch; | |
| 1582 | 1615 | } |
| 1583 | 1616 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap .frame-adminify-admin-menu-wrapper .frame-adminify-admin-main-menu { |
| 1584 | 1617 | width: 260px !important; |
| 1618 | + height: auto; | |
| 1619 | + min-height: 100%; | |
| 1585 | 1620 | } |
| 1621 | + #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap .frame-adminify-admin-menu-wrapper ul.frame-adminify-admin-menu { | |
| 1622 | + padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); | |
| 1623 | + padding-bottom: calc(var(--adminify-menu-wrapper-padding-bottom, 16px) + env(safe-area-inset-bottom, 0px)); | |
| 1624 | + } | |
| 1625 | + #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step] .frame-adminify-admin-menu .frame-adminify-menu-item .frame-adminify-submenu-wrapper { | |
| 1626 | + top: 0px; | |
| 1627 | + top: var(--adminify-menu-scroll-top, 0px); | |
| 1628 | + bottom: auto; | |
| 1629 | + height: 100%; | |
| 1630 | + height: var(--adminify-menu-viewport-height, 100%); | |
| 1631 | + } | |
| 1632 | + #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap[data-menu-mode=two_step]:has(.frame-adminify--menu-show):not(.adminify-sidebar-folded) .frame-adminify-admin-menu-wrapper { | |
| 1633 | + height: auto; | |
| 1634 | + overflow-y: hidden; | |
| 1635 | + } | |
| 1586 | 1636 | #frame-adminify-app .adminify-frame-wrapper .frame-adminify-sidebar-wrap.adminify-sidebar-collapse { |
| 1587 | 1637 | transform: translateX(0) !important; |
| 1588 | 1638 | } |
| 1589 | 1639 | #frame-adminify-app .adminify-frame-wrapper.adminify-vertical-menu { |
| @@ -1857,10 +1907,14 @@ | ||
| 1857 | 1907 | .frame-adminify-app .adminify-horizontal-menu .adminify-horizontal-menu-wrapper { |
| 1858 | 1908 | position: fixed; |
| 1859 | 1909 | top: 0; |
| 1860 | 1910 | left: 0; |
| 1911 | + bottom: 0; | |
| 1861 | 1912 | width: 260px; |
| 1862 | - height: 100%; | |
| 1913 | + height: 100vh; | |
| 1914 | + height: 100dvh; | |
| 1915 | + display: flex; | |
| 1916 | + flex-direction: column; | |
| 1863 | 1917 | padding: 12px 0; |
| 1864 | 1918 | padding-right: 4px; |
| 1865 | 1919 | background-color: var(--adminify-menu-bg); |
| 1866 | 1920 | border: 0; |
| @@ -1874,10 +1928,15 @@ | ||
| 1874 | 1928 | flex-wrap: nowrap; |
| 1875 | 1929 | margin: 0; |
| 1876 | 1930 | padding: 0 16px; |
| 1877 | 1931 | padding-right: 12px; |
| 1878 | - height: calc(100vh - 24px); | |
| 1879 | - overflow-y: scroll; | |
| 1932 | + padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); | |
| 1933 | + flex: 1 1 auto; | |
| 1934 | + min-height: 0; | |
| 1935 | + height: auto; | |
| 1936 | + overflow-y: auto; | |
| 1937 | + overscroll-behavior: contain; | |
| 1938 | + -webkit-overflow-scrolling: touch; | |
| 1880 | 1939 | } |
| 1881 | 1940 | .frame-adminify-app .adminify-horizontal-menu .adminify-horizontal-menu-wrapper > ul .frame-adminify-menu-item { |
| 1882 | 1941 | width: 100%; |
| 1883 | 1942 | } |
