framework7 8.0.5 → 8.2.0

package/framework7-bundle-rtl.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.5
+ * Framework7 8.2.0
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: May 8, 2023
+ * Released on: July 6, 2023
  */
 
 /*====================
@@ -165,11 +165,16 @@ body {
   font-size: var(--f7-font-size);
   line-height: var(--f7-line-height);
   color: var(--f7-text-color);
+  scrollbar-width: none;
+  scrollbar-color: transparent;
 }
 body::-webkit-scrollbar {
+  -webkit-appearance: none;
+          appearance: none;
   width: 0px;
+  display: none;
+  opacity: 0;
   background: transparent;
-  position: relative;
 }
 body::-webkit-scrollbar-track {
   box-shadow: none;
@@ -2494,13 +2499,26 @@ html.device-full-viewport body {
   justify-content: flex-start;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  scrollbar-color: transparent;
 }
 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
   -webkit-appearance: none;
-  opacity: 0 !important;
+          appearance: none;
+  width: 0px;
+  display: none;
+  opacity: 0;
+  background: transparent;
+}
+.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-track {
+  box-shadow: none;
+  background: transparent;
+}
+.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: none;
+  border-radius: 9999px;
+  position: relative;
 }
 .tabbar-scrollable .tab-link,
 .tabbar-scrollable .link {
@@ -8068,11 +8086,11 @@ html.device-android-4 .accordion-item-content {
   --f7-list-index-font-weight: 600;
   /* --f7-list-index-text-color: var(--f7-theme-color); */
   --f7-list-index-item-height: 14px;
-  --f7-list-index-label-text-color: #fff;
-  /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
   --f7-list-index-label-font-weight: 500;
 }
 .ios {
+  --f7-list-index-label-text-color: #fff;
+  /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
   --f7-list-index-label-size: 44px;
   --f7-list-index-label-font-size: 17px;
   --f7-list-index-skip-dot-size: 6px;
@@ -8082,6 +8100,12 @@ html.device-android-4 .accordion-item-content {
   --f7-list-index-label-font-size: 20px;
   --f7-list-index-skip-dot-size: 4px;
 }
+.md,
+.md .dark,
+.md [class*='color-'] {
+  --f7-list-index-label-bg-color: var(--f7-md-primary);
+  --f7-list-index-label-text-color: var(--f7-md-on-primary);
+}
 .list-index {
   position: absolute;
   top: 0;
@@ -9459,6 +9483,9 @@ html.with-panel-right-push .framework7-root > .view {
 .with-panel-right-floating .panel-right {
   transform: translate3d(-8px, 0, 0);
 }
+.panel-resizable {
+  max-width: 100%;
+}
 .panel-resize-handler {
   position: absolute;
   top: 0;
@@ -9471,14 +9498,16 @@ html.with-panel-right-push .framework7-root > .view {
 .panel-resizable .panel-resize-handler {
   display: block;
 }
-.panel-left.panel-cover .panel-resize-handler {
+.panel-left.panel-cover .panel-resize-handler,
+.panel-left.panel-floating .panel-resize-handler {
   right: -3px;
 }
 .panel-resize-handler .panel-left.panel-reveal,
 .panel-left.panel-push .panel-resize-handler {
   right: 0;
 }
-.panel-right.panel-cover .panel-resize-handler {
+.panel-right.panel-cover .panel-resize-handler,
+.panel-right.panel-floating .panel-resize-handler {
   left: -3px;
 }
 .panel-resize-handler .panel-right.panel-reveal,
@@ -10728,6 +10757,11 @@ textarea:-webkit-autofill-and-obscured {
 .ios .item-input-outline .item-content .item-input-wrap,
 .ios .item-input-outline.item-content .item-input-wrap,
 .ios .input-outline .item-input-wrap {
+  margin-top: 2px;
+}
+.ios .item-input-outline .item-content .item-title + .item-input-wrap,
+.ios .item-input-outline.item-content .item-title + .item-input-wrap,
+.ios .input-outline .item-title + .item-input-wrap {
   margin-top: -22px;
 }
 .ios .item-input-outline .item-content .item-label,
@@ -13197,6 +13231,10 @@ label.item-radio.disabled,
 .calendar-day-selected-right:first-child:before {
   display: none;
 }
+.calendar-day-selected-left.calendar-day-selected-right:before {
+  content: none;
+  display: none;
+}
 .calendar-day-selected-range .calendar-day-number {
   background-color: transparent;
   color: inherit;
@@ -13469,6 +13507,9 @@ label.item-radio.disabled,
   max-height: 100%;
   z-index: 10;
 }
+.picker-column.picker-column-first.picker-column-last {
+  width: 100%;
+}
 .picker-column.picker-column-left {
   text-align: left;
 }
@@ -13485,15 +13526,30 @@ label.item-radio.disabled,
 }
 .picker-items {
   overflow: auto;
-  scrollbar-width: none;
   scroll-snap-type: y mandatory;
   height: 100%;
   box-sizing: border-box;
   padding: var(--f7-picker-scroll-padding, 0px) 0px;
+  scrollbar-width: none;
+  scrollbar-color: transparent;
 }
 .picker-items::-webkit-scrollbar {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 0px;
   display: none;
   opacity: 0;
+  background: transparent;
+}
+.picker-items::-webkit-scrollbar-track {
+  box-shadow: none;
+  background: transparent;
+}
+.picker-items::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: none;
+  border-radius: 9999px;
+  position: relative;
 }
 .picker-item {
   height: var(--f7-picker-item-height);
@@ -13605,6 +13661,12 @@ label.item-radio.disabled,
   --f7-ptr-preloader-size: 22px;
   --f7-ptr-size: 40px;
 }
+.md,
+.md .dark,
+.md [class*='color-'] {
+  --f7-ptr-preloader-bg-color: var(--f7-md-surface-1);
+  --f7-ptr-preloader-color: var(--f7-md-primary);
+}
 .ptr-preloader {
   position: relative;
   top: var(--f7-ptr-top, 0);
@@ -13701,7 +13763,8 @@ label.item-radio.disabled,
 .md .ptr-preloader {
   width: var(--f7-ptr-size);
   border-radius: 50%;
-  background: #fff;
+  background: var(--f7-ptr-preloader-bg-color);
+  --f7-preloader-color: var(--f7-ptr-preloader-color);
   margin-top: calc(-1 * var(--f7-ptr-size));
   z-index: 100;
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
@@ -15496,8 +15559,7 @@ table.data-table {
   opacity: 1;
 }
 .md .searchbar .input-clear-button:before {
-  margin-left: 0;
-  margin-top: 0;
+  display: none;
 }
 .md .searchbar-inline {
   --f7-searchbar-input-extra-padding-left: 32px;
@@ -16461,7 +16523,7 @@ table.data-table {
 }
 /* === Swiper === */
 /**
- * Swiper 9.2.0
+ * Swiper 10.0.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -16469,7 +16531,7 @@ table.data-table {
  *
  * Released under the MIT License
  *
- * Released on: March 31, 2023
+ * Released on: July 3, 2023
  */
 
 /* FONT_START */
@@ -16487,12 +16549,19 @@ table.data-table {
   --swiper-wrapper-transition-timing-function: initial;
   */
 }
-.swiper,
-swiper-container {
+:host {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1;
+}
+.swiper {
   margin-left: auto;
   margin-right: auto;
   position: relative;
   overflow: hidden;
+  overflow: clip;
   list-style: none;
   padding: 0;
   /* Fix of Webkit flickering */
@@ -16513,6 +16582,7 @@ swiper-container {
   box-sizing: content-box;
 }
 .swiper-android .swiper-slide,
+.swiper-ios .swiper-slide,
 .swiper-wrapper {
   transform: translate3d(0px, 0, 0);
 }
@@ -16522,8 +16592,7 @@ swiper-container {
 .swiper-vertical {
   touch-action: pan-x;
 }
-.swiper-slide,
-swiper-slide {
+.swiper-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
@@ -16559,42 +16628,9 @@ swiper-slide {
   perspective: 1200px;
 }
 .swiper-3d .swiper-slide,
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom,
 .swiper-3d .swiper-cube-shadow {
   transform-style: preserve-3d;
 }
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-.swiper-3d .swiper-slide-shadow {
-  background: rgba(0, 0, 0, 0.15);
-}
-.swiper-3d .swiper-slide-shadow-left {
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-.swiper-3d .swiper-slide-shadow-right {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-.swiper-3d .swiper-slide-shadow-top {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-.swiper-3d .swiper-slide-shadow-bottom {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
 /* CSS Mode */
 .swiper-css-mode > .swiper-wrapper {
   overflow: auto;
@@ -16609,37 +16645,78 @@ swiper-slide {
 .swiper-css-mode > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: start start;
 }
-.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
   scroll-snap-type: x mandatory;
 }
-.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-vertical > .swiper-wrapper {
   scroll-snap-type: y mandatory;
 }
-.swiper-centered > .swiper-wrapper::before {
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
+  scroll-snap-type: none;
+}
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: none;
+}
+.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
   content: '';
   flex-shrink: 0;
   order: 9999;
 }
-.swiper-centered > .swiper-wrapper > .swiper-slide {
+.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: center center;
   scroll-snap-stop: always;
 }
-.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
   margin-inline-start: var(--swiper-centered-offset-before);
 }
-.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
   height: 100%;
   min-height: 1px;
   width: var(--swiper-centered-offset-after);
 }
-.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
   margin-block-start: var(--swiper-centered-offset-before);
 }
-.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
   width: 100%;
   min-width: 1px;
   height: var(--swiper-centered-offset-after);
 }
+/* Slide styles start */
+/* 3D Shadows */
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
 .swiper-lazy-preloader {
   width: 42px;
   height: 42px;
@@ -16656,7 +16733,6 @@ swiper-slide {
   border-top-color: transparent;
 }
 .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
-swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
   animation: swiper-preloader-spin 1s infinite linear;
 }
@@ -16674,6 +16750,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
     transform: rotate(360deg);
   }
 }
+/* Slide styles end */
 .swiper-virtual .swiper-slide {
   -webkit-backface-visibility: hidden;
   transform: translateZ(0);
@@ -16731,6 +16808,31 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 .swiper-navigation-disabled .swiper-button-next {
   display: none !important;
 }
+.swiper-button-prev svg,
+.swiper-button-next svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: center;
+}
+.swiper-rtl .swiper-button-prev svg,
+.swiper-rtl .swiper-button-next svg {
+  transform: rotate(180deg);
+}
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: var(--swiper-navigation-sides-offset, 10px);
+  right: auto;
+}
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: var(--swiper-navigation-sides-offset, 10px);
+  left: auto;
+}
+.swiper-button-lock {
+  display: none;
+}
+/* Navigation font start */
 .swiper-button-prev:after,
 .swiper-button-next:after {
   font-family: swiper-icons;
@@ -16740,11 +16842,6 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   font-variant: initial;
   line-height: 1;
 }
-.swiper-button-prev,
-.swiper-rtl .swiper-button-next {
-  left: var(--swiper-navigation-sides-offset, 10px);
-  right: auto;
-}
 .swiper-button-prev:after,
 .swiper-rtl .swiper-button-next:after {
   content: 'prev';
@@ -16758,9 +16855,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 .swiper-rtl .swiper-button-prev:after {
   content: 'next';
 }
-.swiper-button-lock {
-  display: none;
-}
+/* Navigation font end */
 :root {
   /*
   --swiper-pagination-color: var(--swiper-theme-color);
@@ -16896,8 +16991,7 @@ button.swiper-pagination-bullet {
 .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: 200ms transform, 200ms left;
 }
-.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
-:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: 200ms transform, 200ms right;
 }
 /* Fraction */
@@ -16908,7 +17002,6 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar {
   background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
   position: absolute;
-  /*ADD_HOST*/
 }
 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   background: var(--swiper-pagination-color, var(--swiper-theme-color));
@@ -17022,8 +17115,7 @@ button.swiper-pagination-bullet {
   touch-action: none;
 }
 /* a11y */
-.swiper .swiper-notification,
-swiper-container .swiper-notification {
+.swiper .swiper-notification {
   position: absolute;
   left: 0;
   top: 0;
@@ -17081,19 +17173,10 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide-active,
 .swiper-cube .swiper-slide-next,
-.swiper-cube .swiper-slide-prev,
-.swiper-cube .swiper-slide-next + .swiper-slide {
+.swiper-cube .swiper-slide-prev {
   pointer-events: auto;
   visibility: visible;
 }
-.swiper-cube .swiper-slide-shadow-top,
-.swiper-cube .swiper-slide-shadow-bottom,
-.swiper-cube .swiper-slide-shadow-left,
-.swiper-cube .swiper-slide-shadow-right {
-  z-index: 0;
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-}
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
   left: 0;
@@ -17113,6 +17196,20 @@ swiper-container .swiper-notification {
   right: 0;
   filter: blur(50px);
 }
+.swiper-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+/* Cube slide shadows start */
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+/* Cube slide shadows end */
 .swiper-flip {
   overflow: visible;
 }
@@ -17129,14 +17226,16 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-active .swiper-slide-active {
   pointer-events: auto;
 }
-.swiper-flip .swiper-slide-shadow-top,
-.swiper-flip .swiper-slide-shadow-bottom,
-.swiper-flip .swiper-slide-shadow-left,
-.swiper-flip .swiper-slide-shadow-right {
+/* Flip slide shadows start */
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
   z-index: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
 }
+/* Flip slide shadows end */
 .swiper-creative .swiper-slide {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
@@ -17510,7 +17609,8 @@ swiper-container .swiper-notification {
 }
 .ios {
   --f7-notification-margin: 8px;
-  --f7-notification-padding: 10px;
+  --f7-notification-padding-horizontal: 10px;
+  --f7-notification-padding-vertical: 10px;
   --f7-notification-border-radius: 12px;
   --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
   --f7-notification-icon-size: 20px;
@@ -17542,7 +17642,8 @@ swiper-container .swiper-notification {
 }
 .md {
   --f7-notification-margin: 16px;
-  --f7-notification-padding: 16px;
+  --f7-notification-padding-vertical: 20px;
+  --f7-notification-padding-horizontal: 16px;
   --f7-notification-border-radius: 16px;
   --f7-notification-box-shadow: none;
   --f7-notification-icon-size: 24px;
@@ -17579,7 +17680,7 @@ swiper-container .swiper-notification {
   transition-property: transform;
   direction: ltr;
   max-width: var(--f7-notification-max-width);
-  padding: var(--f7-notification-padding);
+  padding: var(--f7-notification-padding-vertical) var(--f7-notification-padding-horizontal);
   border-radius: var(--f7-notification-border-radius);
   box-shadow: var(--f7-notification-box-shadow);
   background: var(--f7-notification-bg-color);
@@ -17726,7 +17827,7 @@ swiper-container .swiper-notification {
   transform: translate3d(0, -150%, 0);
 }
 .md .notification.modal-in {
-  transition-duration: 200ms;
+  transition-duration: 500ms;
   transform: translate3d(0, 0%, 0);
   transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
 }
@@ -17741,8 +17842,8 @@ swiper-container .swiper-notification {
 }
 .md .notification-with-icon .notification-icon {
   position: absolute;
-  left: var(--f7-notification-padding);
-  top: var(--f7-notification-padding);
+  left: var(--f7-notification-padding-horizontal);
+  top: var(--f7-notification-padding-vertical);
 }
 .md .notification-with-icon .notification-content,
 .md .notification-with-icon .notification-header {
@@ -17755,7 +17856,7 @@ swiper-container .swiper-notification {
   margin-top: 4px;
 }
 .md .notification-header + .notification-content {
-  margin-top: 4px;
+  margin-top: 8px;
 }
 .md .notification-title-right-text {
   margin-left: 4px;
@@ -18990,9 +19091,26 @@ button.text-editor-button .material-icons sub {
   justify-content: flex-start !important;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  scrollbar-color: transparent;
 }
 .text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 0px;
   display: none;
+  opacity: 0;
+  background: transparent;
+}
+.text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar-track {
+  box-shadow: none;
+  background: transparent;
+}
+.text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: none;
+  border-radius: 9999px;
+  position: relative;
 }
 .text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider {
   height: 100%;
@@ -19281,10 +19399,26 @@ button.text-editor-button .material-icons sub {
   overflow: auto;
   white-space: nowrap;
   padding: var(--f7-breadcrumbs-padding);
+  scrollbar-width: none;
+  scrollbar-color: transparent;
 }
 .breadcrumbs::-webkit-scrollbar {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 0px;
   display: none;
   opacity: 0;
+  background: transparent;
+}
+.breadcrumbs::-webkit-scrollbar-track {
+  box-shadow: none;
+  background: transparent;
+}
+.breadcrumbs::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: none;
+  border-radius: 9999px;
+  position: relative;
 }
 .breadcrumbs-separator,
 .breadcrumbs-item,