upgrade framework7 to 9.0

src/styles/mobile/global.scss

@@ -89,6 +89,8 @@ input[type=number] {
 
 /** Replacing the default style of framework7 **/
 :root {
+    --f7-toolbar-inner-padding-left: 8px;
+    --f7-toolbar-inner-padding-right: 8px;
     --f7-popup-push-offset: 5px;
     --f7-color-gray: #8e8e93;
     --f7-color-gray-rgb: 142, 142, 147;
@@ -203,8 +205,11 @@ i.icon.la, i.icon.las, i.icon.lab {
 }
 
 .lang-popover-menu .popover-inner {
-    max-height: 300px;
-    overflow-y: auto;
+    max-height: 350px;
+
+    > .list {
+        overflow-y: auto;
+    }
 }
 
 .lang-popover-menu .popover-inner .item-title {
@@ -221,12 +226,27 @@ i.icon.la, i.icon.las, i.icon.lab {
     text-overflow: ellipsis;
 }
 
-.settings-list .item-inner > .item-after {
-    max-width: 70%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: relative;
-    display: block;
+.settings-list .item-truncate-after-text .item-inner {
+    > .item-actual-title {
+        display: flex;
+        flex-shrink: 0;
+        max-width: 80%;
+
+        > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    > .item-after {
+        display: block;
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 70%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: relative;
+    }
 }
 
 .login-page-fixed-bottom {
@@ -289,14 +309,29 @@ html[dir="rtl"] i.icon.icon-with-direction {
     margin-inline-start: 0;
 }
 
+.navbar > .navbar-inner > .navbar-hidden-icon.right {
+    box-shadow: inherit;
+    background-color: inherit;
+}
+
+.toolbar-inner {
+    gap: 2px !important;
+
+    > .link {
+        padding: 0 !important;
+    }
+}
+
 .toolbar-item-auto-size .toolbar-inner {
     padding-inline-start: 16px;
     padding-inline-end: 16px;
-    gap: 4px;
+    justify-content: space-between;
+    gap: 4px !important;
 }
 
 .toolbar-item-auto-size .toolbar-inner > .link {
     width: auto;
+    min-width: 28px !important;
 }
 
 .tabbar-primary-link,
@@ -337,10 +372,12 @@ html[dir="rtl"] i.icon.icon-with-direction {
     text-overflow: ellipsis;
 }
 
-.list .item-content .input.list-title-input {
-    margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
-    margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
+.list .editing-list-item .item-content .item-inner {
+    padding-top: 5px;
+    padding-bottom: 7px;
+}
 
+.list .item-content .input.list-title-input {
     > input.input-with-value {
         font-size: var(--f7-list-item-title-font-size);
     }
@@ -728,6 +765,18 @@ html[dir="rtl"] .combination-list-wrapper .list.combination-list-header .combina
 }
 
 /** Fix @vuepic/vue-datepicker style issue **/
+.dp__theme_light {
+    --dp-background-color: inherit;
+    --dp-border-color: #aaa;
+    --dp-menu-border-color: #aaa;
+}
+
+.dp__theme_dark {
+    --dp-background-color: inherit;
+    --dp-border-color: #555;
+    --dp-menu-border-color: #555;
+}
+
 .dp__main.dp__flex_display {
     flex-direction: column;
 }