@kne/system-layout 0.2.0-alpha.13 → 0.2.0-alpha.15

package/dist/index.css

@@ -248,34 +248,34 @@
 }
 
 @media (max-width: 768px) {
-  ._sK89O {
+  .kne-system-layout_sK89O {
     width: 100%;
     padding: 0;
     overflow: hidden;
     height: unset;
     min-height: var(--window-height);
-    --page-height: 100vh;
+    --page-height: 100dvh;
     --page-content-height: var(--page-height);
     --page-inner-height: calc(var(--page-height) - var(--nav-height) - var(--toolbar-height));
   }
-  ._sK89O._gyKfI {
+  .kne-system-layout_sK89O.kne-system-layout_gyKfI {
     --toolbar-height: 60px;
   }
-  ._sK89O._X1wZG {
+  .kne-system-layout_sK89O.kne-system-layout_X1wZG {
     --nav-height: 48px;
   }
-  ._sK89O ._-LpWn {
+  .kne-system-layout_sK89O .kne-system-layout_-LpWn {
     position: absolute;
     left: calc(var(--menu-min-width) * -1);
     z-index: 900;
     background: var(--background);
     height: 100%;
   }
-  ._sK89O ._-LpWn._G-zuN {
+  .kne-system-layout_sK89O .kne-system-layout_-LpWn.kne-system-layout_G-zuN {
     left: 0;
     box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
   }
-  ._sK89O ._6TCwG {
+  .kne-system-layout_sK89O .kne-system-layout_6TCwG {
     position: absolute;
     top: 0;
     left: 0;
@@ -287,29 +287,32 @@
     pointer-events: none;
     transition: opacity 300ms;
   }
-  ._sK89O ._6TCwG._G-zuN {
+  .kne-system-layout_sK89O .kne-system-layout_6TCwG.kne-system-layout_G-zuN {
     opacity: 1;
     pointer-events: auto;
   }
-  ._sK89O ._5qnw5 {
+  .kne-system-layout_sK89O .kne-system-layout_5qnw5 {
     display: none;
   }
-  ._sK89O ._HnwkM {
+  .kne-system-layout_sK89O .kne-system-layout_HnwkM {
     border-radius: 0;
     border: 0;
   }
-  ._sK89O ._h8PAW {
+  .kne-system-layout_sK89O .kne-system-layout_h8PAW {
     display: block;
   }
-  ._sK89O ._OM1Q2 {
+  .kne-system-layout_sK89O .kne-system-layout_OM1Q2 {
     padding: 0;
     overflow: visible !important;
     height: unset;
   }
 }
-._sK89O {
+.kne-system-layout_sK89O {
   --window-width: 100vw;
-  --window-height: 100vh;
+  --window-height: 100dvh;
+  --multiple: var(--safe-area-multiple, 1);
+  --safe-area-inset-top: calc(env(safe-area-inset-top) * var(--multiple));
+  --safe-area-inset-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
   --nav-height: 0px;
   --toolbar-height: 0px;
   --page-height: calc(var(--window-height) - 48px);
@@ -321,95 +324,136 @@
   box-sizing: border-box;
   padding: 24px 24px 24px 0;
   position: relative;
+  line-height: 1.4;
 }
-._sK89O .ant-tag {
+.kne-system-layout_sK89O .system-max-width-900 {
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+}
+.kne-system-layout_sK89O .system-font-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.kne-system-layout_sK89O .system-font-title-primary {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+.kne-system-layout_sK89O .system-font-sub-title {
+  font-weight: bold;
+}
+.kne-system-layout_sK89O .system-font-bold {
+  font-weight: bold;
+}
+.kne-system-layout_sK89O .system-font-description {
+  color: var(--font-color-grey);
+}
+.kne-system-layout_sK89O .scroller-bar {
+  background: transparent !important;
+  border-color: transparent !important;
+}
+.kne-system-layout_sK89O .scroller-bar .scroller-bar-inner {
+  background: #999 !important;
+  height: 40%;
+}
+.kne-system-layout_sK89O .ant-tag {
   background: var(--primary-color-1);
   border-radius: 11px;
   color: var(--font-color-grey);
 }
-._sK89O .ant-segmented {
+.kne-system-layout_sK89O .ant-segmented {
   border: 1px solid #d1d5db;
   border-radius: 17px;
   background: transparent !important;
 }
-._sK89O .ant-segmented .ant-segmented-item,
-._sK89O .ant-segmented .ant-segmented-thumb {
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item,
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-thumb {
   border-radius: 14px;
 }
-._sK89O .ant-segmented .ant-segmented-item.ant-segmented-item-selected,
-._sK89O .ant-segmented .ant-segmented-thumb {
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item.ant-segmented-item-selected,
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-thumb {
   background: var(--primary-color) !important;
   color: #fff !important;
 }
-._sK89O .ant-segmented .ant-segmented-item:after {
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item:after {
   background: transparent !important;
 }
-._sK89O .filter .filter-title {
+.kne-system-layout_sK89O .filter .filter-title {
   border-bottom: none;
 }
-._sK89O .react-form .ant-card {
+.kne-system-layout_sK89O .react-form .ant-card {
   max-width: 900px;
   margin: 0 auto;
   width: 100%;
 }
-._sK89O .max-width-info-page {
+.kne-system-layout_sK89O .max-width-info-page {
   max-width: 900px;
   margin: 0 auto;
   width: 100%;
 }
-._sK89O .part.bordered {
+.kne-system-layout_sK89O .part.bordered {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .part.bordered .part-title {
+.kne-system-layout_sK89O .part.bordered .part-title {
   font-size: 16px;
 }
-._sK89O .ant-pagination-options-size-changer {
+.kne-system-layout_sK89O .ant-pagination-options-size-changer {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .ant-tree {
+.kne-system-layout_sK89O .ant-tree {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .ant-table,
-._sK89O .ant-table-placeholder {
+.kne-system-layout_sK89O .ant-table,
+.kne-system-layout_sK89O .ant-table-placeholder {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .ant-table-cell,
-._sK89O .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell {
+.kne-system-layout_sK89O .ant-table-cell,
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell {
   padding: 4px 8px;
 }
-._sK89O .ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell {
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell {
   padding: 6px 16px;
   font-weight: 400 !important;
   color: var(--font-color-grey);
 }
-._sK89O._udBgQ {
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix {
+  background: transparent;
+}
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-end-shadow-show, .kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-start-shadow-show {
+  background: var(--bg-color-grey);
+}
+.kne-system-layout_sK89O .ant-tooltip-container {
+  max-width: 400px;
+}
+.kne-system-layout_sK89O.kne-system-layout_udBgQ {
   width: 100%;
   padding: 0;
   overflow: hidden;
   height: unset;
   min-height: var(--window-height);
-  --page-height: 100vh;
+  --page-height: 100dvh;
   --page-content-height: var(--page-height);
   --page-inner-height: calc(var(--page-height) - var(--nav-height) - var(--toolbar-height));
 }
-._sK89O._udBgQ._gyKfI {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ.kne-system-layout_gyKfI {
   --toolbar-height: 60px;
 }
-._sK89O._udBgQ._X1wZG {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ.kne-system-layout_X1wZG {
   --nav-height: 48px;
 }
-._sK89O._udBgQ ._-LpWn {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_-LpWn {
   position: absolute;
   left: calc(var(--menu-min-width) * -1);
   z-index: 900;
   background: var(--background);
   height: 100%;
 }
-._sK89O._udBgQ ._-LpWn._G-zuN {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_-LpWn.kne-system-layout_G-zuN {
   left: 0;
   box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
 }
-._sK89O._udBgQ ._6TCwG {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_6TCwG {
   position: absolute;
   top: 0;
   left: 0;
@@ -421,105 +465,105 @@
   pointer-events: none;
   transition: opacity 300ms;
 }
-._sK89O._udBgQ ._6TCwG._G-zuN {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_6TCwG.kne-system-layout_G-zuN {
   opacity: 1;
   pointer-events: auto;
 }
-._sK89O._udBgQ ._5qnw5 {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_5qnw5 {
   display: none;
 }
-._sK89O._udBgQ ._HnwkM {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_HnwkM {
   border-radius: 0;
   border: 0;
 }
-._sK89O._udBgQ ._h8PAW {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_h8PAW {
   display: block;
 }
-._sK89O._udBgQ ._OM1Q2 {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_OM1Q2 {
   padding: 0;
   overflow: visible !important;
   height: unset;
 }
-._sK89O ._h8PAW {
+.kne-system-layout_sK89O .kne-system-layout_h8PAW {
   display: none;
 }
-._sK89O .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
   background: var(--primary-color-2);
   color: var(--primary-color);
 }
-._sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(10px);
 }
-._sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled):hover:not(:disabled):not(.ant-btn-loading) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled):hover:not(:disabled):not(.ant-btn-loading) {
   backdrop-filter: blur(40px) saturate(1.5) brightness(1.2);
   transform: scale(1.04);
 }
-._sK89O .ant-btn:active:not(.ant-btn-loading) {
+.kne-system-layout_sK89O .ant-btn:active:not(.ant-btn-loading) {
   box-shadow: none !important;
   transform: scale(1);
 }
-._sK89O .ant-btn:disabled {
+.kne-system-layout_sK89O .ant-btn:disabled {
   box-shadow: none;
   color: var(--font-color-disabled);
   background: rgba(17, 24, 39, 0.2);
 }
-._sK89O .ant-btn.ant-btn-primary:not(:disabled) {
+.kne-system-layout_sK89O .ant-btn.ant-btn-primary:not(:disabled) {
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
 }
-._sK89O .ant-btn.ant-btn-loading {
+.kne-system-layout_sK89O .ant-btn.ant-btn-loading {
   opacity: 0.6;
 }
-._sK89O .ant-btn {
+.kne-system-layout_sK89O .ant-btn {
   position: relative;
 }
-._sK89O .ant-btn .ant-btn-loading-icon {
+.kne-system-layout_sK89O .ant-btn .ant-btn-loading-icon {
   position: absolute;
 }
 
-._-LpWn {
+.kne-system-layout_-LpWn {
   flex: none;
   transition: width 0.3s;
   position: relative;
 }
-._-LpWn._G-zuN {
+.kne-system-layout_-LpWn.kne-system-layout_G-zuN {
   width: var(--menu-max-width);
 }
-._-LpWn:not(._G-zuN) {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) {
   width: var(--menu-min-width);
 }
-._-LpWn:not(._G-zuN) ._7wq3X {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_7wq3X {
   padding: 0 16px;
 }
-._-LpWn:not(._G-zuN) ._-T-Dc {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_-T-Dc {
   padding: 8px 16px;
   justify-content: center;
 }
-._-LpWn:not(._G-zuN) ._LOrmu {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_LOrmu {
   padding: 12px 0;
   border: none;
   background: none;
   justify-content: center;
 }
 
-._-T-Dc {
+.kne-system-layout_-T-Dc {
   padding: 8px 24px;
   display: flex;
   justify-content: flex-start;
 }
-._-T-Dc img {
+.kne-system-layout_-T-Dc img {
   height: 24px !important;
   object-fit: contain;
   max-width: 100%;
 }
 
-._2cRWf {
+.kne-system-layout_2cRWf {
   display: flex;
   align-items: center;
 }
 
-._5D-Oq {
+.kne-system-layout_5D-Oq {
   position: absolute;
   right: -10px;
   top: 20px;
@@ -532,11 +576,11 @@
   justify-content: center;
   transition: transform 0.3s;
 }
-._5D-Oq:hover {
+.kne-system-layout_5D-Oq:hover {
   transform: scale(1.2);
 }
 
-._p4eOE {
+.kne-system-layout_p4eOE {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -545,19 +589,19 @@
   transition: opacity 0.5s;
 }
 
-._8dzE7 {
+.kne-system-layout_8dzE7 {
   transition: transform 0.3s;
 }
-._8dzE7.is-closed {
+.kne-system-layout_8dzE7.is-closed {
   transform: scaleX(-1);
 }
 
-._7wq3X {
+.kne-system-layout_7wq3X {
   padding: 0 8px 0 16px;
   margin-top: 12px;
 }
 
-._LOrmu {
+.kne-system-layout_LOrmu {
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.12);
@@ -569,16 +613,16 @@
   overflow: hidden;
 }
 
-._b7XeQ {
+.kne-system-layout_b7XeQ {
   font-weight: 500;
 }
 
-._U0YTk {
+.kne-system-layout_U0YTk {
   font-size: 12px;
   color: var(--font-color-grey);
 }
 
-._HnwkM {
+.kne-system-layout_HnwkM {
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%);
@@ -587,11 +631,11 @@
   min-width: 0;
 }
 
-._8gqbZ {
+.kne-system-layout_8gqbZ {
   margin-top: 16px;
 }
 
-._5qnw5 {
+.kne-system-layout_5qnw5 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -607,13 +651,13 @@
   cursor: pointer;
   transition: all 0.3s;
 }
-._5qnw5:hover {
+.kne-system-layout_5qnw5:hover {
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(40px) saturate(1.5);
   transform: scale(1.1);
 }
 
-._UAJc- {
+.kne-system-layout_UAJc- {
   --container-width: 400px;
   --container-height: 400px;
   --container-base-width: var(--container-width);
@@ -629,7 +673,7 @@
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
   transition: box-shadow 0.3s;
 }
-@keyframes _VjIWn {
+@keyframes kne-system-layout_VjIWn {
   0%, 100% {
     transform: scale(1);
   }
@@ -637,24 +681,24 @@
     transform: scale(1.02, 0.98);
   }
 }
-._UAJc-:hover {
-  animation: _VjIWn 0.4s ease-out;
+.kne-system-layout_UAJc-:hover {
+  animation: kne-system-layout_VjIWn 0.4s ease-out;
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(10px) saturate(1.5);
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
 }
 
-._I7Anv {
+.kne-system-layout_I7Anv {
   padding: 24px 0 24px 24px;
 }
 
-._UhsFd {
+.kne-system-layout_UhsFd {
   background: rgba(255, 255, 255, 0.4);
   border-radius: 8px;
   height: 100%;
   transition: box-shadow 0.3s;
 }
-@keyframes _H7slV {
+@keyframes kne-system-layout_H7slV {
   0%, 100% {
     transform: scale(1, 1);
   }
@@ -662,59 +706,59 @@
     transform: scale(1.01, 0.99);
   }
 }
-._UhsFd:hover {
+.kne-system-layout_UhsFd:hover {
   backdrop-filter: blur(40px) saturate(1.2);
-  animation: _H7slV 0.4s ease-out;
+  animation: kne-system-layout_H7slV 0.4s ease-out;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
 }
 
-._2mdNn {
+.kne-system-layout_2mdNn {
   --container-height: calc(var(--page-content-height) - 58px);
   height: var(--container-height);
 }
 
-._OM1Q2 {
+.kne-system-layout_OM1Q2 {
   --container-height: calc(var(--page-content-height) - 48px);
   padding: 24px;
   box-sizing: border-box;
   height: var(--page-height);
 }
-._OM1Q2._6gjkS {
+.kne-system-layout_OM1Q2.kne-system-layout_6gjkS {
   overflow-y: auto;
 }
 
-._nyAa2 {
+.kne-system-layout_nyAa2 {
   width: 100%;
 }
 
-._33Tja {
+.kne-system-layout_33Tja {
   height: 58px;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 }
-._33Tja .btn {
+.kne-system-layout_33Tja .btn {
   font-size: 24px;
   color: var(--font-color-grey);
   cursor: pointer;
 }
 
-._YmBhl {
+.kne-system-layout_YmBhl {
   --container-height: calc(var(--container-base-height) - 58px);
   height: var(--container-height);
 }
-._Rfzv4 {
+.kne-system-layout_Rfzv4 {
   font-size: 12px;
   color: var(--font-color-grey);
   line-height: 24px;
   padding: 12px;
 }
 
-._qoDtD {
+.kne-system-layout_qoDtD {
   color: var(--font-color-grey);
 }
 
-._socoO {
+.kne-system-layout_socoO {
   opacity: 0.6;
   background: var(--font-color-grey-3);
   height: 1px;
@@ -722,7 +766,7 @@
   margin: 8px auto;
 }
 
-._Xa-2h {
+.kne-system-layout_Xa-2h {
   line-height: 24px;
   padding: 12px;
   margin: 2px 0;
@@ -733,34 +777,35 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._Xa-2h:hover {
+.kne-system-layout_Xa-2h:hover {
   backdrop-filter: brightness(1.1);
   transform: scale(1.02);
 }
-._Xa-2h.is-active {
+.kne-system-layout_Xa-2h.is-active {
   background: linear-gradient(270deg, rgba(255, 255, 255, 0) -4%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.3) 100%);
   box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.05);
 }
-._Xa-2h.is-active ._qoDtD {
+.kne-system-layout_Xa-2h.is-active .kne-system-layout_qoDtD {
   color: var(--primary-color);
 }
-._Xa-2h.is-closed {
+.kne-system-layout_Xa-2h.is-closed {
   display: flex;
   justify-content: center;
 }
-._Xa-2h.is-closed.is-active {
+.kne-system-layout_Xa-2h.is-closed.is-active {
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(40px) saturate(1.5);
 }
-._Xa-2h.is-closed ._qoDtD {
+.kne-system-layout_Xa-2h.is-closed .kne-system-layout_qoDtD {
   font-size: 24px;
 }
-._SLK-0 {
+.kne-system-layout_SLK-0 {
   background: rgba(255, 255, 255, 0.72);
   backdrop-filter: blur(10px);
+  padding-bottom: var(--safe-area-inset-bottom);
 }
 
-._GTQvM {
+.kne-system-layout_GTQvM {
   height: 60px;
   position: fixed;
   z-index: 600;
@@ -773,98 +818,104 @@
   backdrop-filter: blur(10px);
 }
 
-._fAZ3n {
+.kne-system-layout_fAZ3n {
   cursor: pointer;
 }
-._fAZ3n.is-active ._qOB9o,
-._fAZ3n.is-active ._h48es {
+.kne-system-layout_fAZ3n.is-active .kne-system-layout_qOB9o,
+.kne-system-layout_fAZ3n.is-active .kne-system-layout_h48es {
   color: var(--primary-color);
 }
 
-._fAZ3n ._qOB9o {
+.kne-system-layout_fAZ3n .kne-system-layout_qOB9o {
   width: 24px;
   height: 24px;
   font-size: 24px;
 }
 
-._h48es {
+.kne-system-layout_h48es {
   font-size: 12px;
 }
 @media (max-width: 768px) {
-  ._c1kXt {
+  .kne-system-layout_c1kXt {
     gap: 0 !important;
   }
-  ._c1kXt ._h-YXH {
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH {
     height: 48px;
     padding: 0 16px;
     background: #ffffff;
+    margin-bottom: 0;
   }
-  ._c1kXt ._IOVGr {
+  .kne-system-layout_c1kXt .kne-system-layout_IOVGr {
     font-size: 16px;
     flex: 1;
     color: var(--primary-color);
   }
-  ._c1kXt ._mKsLu {
+  .kne-system-layout_c1kXt .kne-system-layout_mKsLu {
     flex: none;
   }
-  ._c1kXt ._wHWje {
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje {
     box-sizing: border-box;
     --content-height: calc(var(--page-inner-height) - 24px);
     padding: 12px;
   }
-  ._c1kXt ._wHWje:after {
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje:after {
     content: "";
     display: block;
     height: var(--toolbar-height);
   }
-  ._c1kXt ._wHWje._tBnAD {
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje.kne-system-layout_tBnAD {
     --content-height: var(--page-inner-height);
     padding: 0;
   }
 }
-._c1kXt._yRZMx {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx {
   gap: 0 !important;
 }
-._c1kXt._yRZMx ._h-YXH {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH {
   height: 48px;
   padding: 0 16px;
   background: #ffffff;
+  margin-bottom: 0;
 }
-._c1kXt._yRZMx ._IOVGr {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_IOVGr {
   font-size: 16px;
   flex: 1;
   color: var(--primary-color);
 }
-._c1kXt._yRZMx ._mKsLu {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_mKsLu {
   flex: none;
 }
-._c1kXt._yRZMx ._wHWje {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje {
   box-sizing: border-box;
   --content-height: calc(var(--page-inner-height) - 24px);
   padding: 12px;
 }
-._c1kXt._yRZMx ._wHWje:after {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje:after {
   content: "";
   display: block;
   height: var(--toolbar-height);
 }
-._c1kXt._yRZMx ._wHWje._tBnAD {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje.kne-system-layout_tBnAD {
   --content-height: var(--page-inner-height);
   padding: 0;
 }
 
-._jhcGo {
+.kne-system-layout_jhcGo {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-._IOVGr {
+.kne-system-layout_h-YXH {
+  margin-bottom: 12px;
+}
+
+.kne-system-layout_IOVGr {
   font-size: 20px;
   font-weight: 500;
 }
 
-._wHWje {
+.kne-system-layout_wHWje {
   --content-height: var(--page-inner-height);
   min-height: calc(var(--page-inner-height) + var(--toolbar-height));
   display: flex;
@@ -872,21 +923,33 @@
   flex: 1;
 }
 
-._mKsLu {
+.kne-system-layout_mKsLu {
   display: flex;
   justify-content: flex-end;
   flex: 1;
   max-width: 50%;
 }
 
-._vcf3J {
+.kne-system-layout_vcf3J {
   width: 100%;
   background: #fff;
   padding: 12px;
   border-radius: 12px;
 }
 
-._07Mna {
+.kne-system-layout_Y1y7o {
+  display: block;
+  width: 100%;
+  padding-top: var(--safe-area-inset-top);
+}
+
+.kne-system-layout_vXk1s {
+  display: block;
+  width: 100%;
+  padding-bottom: var(--safe-area-inset-bottom);
+}
+
+.kne-system-layout_07Mna {
   display: block;
   transform: rotate(180deg);
 }