CSS Variables Reference

This page contains reference to all CSS variables defined in all components.

Note that commented variables are not specified by default and their values is what they fallback to in this case.

App / Core

/*====================
  Core
  ==================== */
:root {
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
  --f7-safe-area-top: 0px;
  --f7-safe-area-bottom: 0px;

  --f7-safe-area-outer-left: 0px;
  --f7-safe-area-outer-right: 0px;

  @supports (left: env(safe-area-inset-left)) {
    --f7-safe-area-top: env(safe-area-inset-top);
    --f7-safe-area-bottom: env(safe-area-inset-bottom);
    .ios-left-edge,
    .ios-edges,
    .safe-area-left,
    .safe-areas,
    .popup,
    .sheet-modal,
    .panel-left {
      --f7-safe-area-left: env(safe-area-inset-left);
      --f7-safe-area-outer-left: env(safe-area-inset-left);
    }
    .ios-right-edge,
    .ios-edges,
    .safe-area-right,
    .safe-areas,
    .popup,
    .sheet-modal,
    .panel-right {
      --f7-safe-area-right: env(safe-area-inset-right);
      --f7-safe-area-outer-right: env(safe-area-inset-right);
    }
    .no-safe-areas,
    .no-safe-area-left,
    .no-ios-edges,
    .no-ios-left-edge {
      --f7-safe-area-left: 0px;
      --f7-safe-area-outer-left: 0px;
    }
    .no-safe-areas,
    .no-safe-area-right,
    .no-ios-edges,
    .no-ios-right-edge {
      --f7-safe-area-right: 0px;
      --f7-safe-area-outer-right: 0px;
    }
  }

  --f7-device-pixel-ratio: 1;
  @media (min-resolution: 2dppx) {
    --f7-device-pixel-ratio: 2;
  }
  @media (min-resolution: 3dppx) {
    --f7-device-pixel-ratio: 3;
  }
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --f7-font-size: 14px;

  --f7-bars-translucent-opacity: 0.8;
  --f7-bars-translucent-blur: 20px;
}
.ios {
  --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.4;
  /*
  --f7-bars-link-color: var(--f7-theme-color);
  */
  --f7-bars-text-color: #000;
  --f7-text-color: #000;
  --f7-bars-bg-color: #f7f7f8;
  --f7-bars-bg-color-rgb: 247, 247, 248;
  --f7-bars-border-color: rgba(0,0,0,0.25);
}
.ios .dark,
.ios.dark {
  --f7-bars-text-color: #fff;
  --f7-text-color: #fff;
  --f7-bars-bg-color: #121212;
  --f7-bars-bg-color-rgb: 22, 22, 22;
  --f7-bars-border-color: rgba(255,255,255,0.16);
}

.md {
  --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.5;
  --f7-bars-border-color: transparent;
  --f7-text-color: #212121;
}
.md .dark,
.md.dark {
  --f7-text-color: rgba(255,255,255,0.87);
}

.md,
.md .dark,
.md [class*='color-'] {
  --f7-bars-link-color: var(--f7-md-on-surface);
  --f7-bars-bg-color: var(--f7-md-surface-2);
  --f7-bars-bg-color-rgb: var(--f7-md-surface-2-rgb);
}

/*====================
  Color Themes
  ==================== */
.text-color-primary {
  --f7-theme-color-text-color: var(--f7-theme-color);
}
.bg-color-primary {
  --f7-theme-color-bg-color: var(--f7-theme-color);
}
.border-color-primary {
  --f7-theme-color-border-color: var(--f7-theme-color);
}
.ripple-color-primary {
  --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
}

Action Sheet

:root {
  --f7-actions-grid-button-font-size: 12px;
  --f7-actions-grid-button-icon-size: 48px;
}
.ios {
  --f7-actions-transition-timing-function: initial;
  --f7-actions-border-radius: 13px;
  /*
  --f7-actions-button-text-color: var(--f7-theme-color);
  */
  --f7-actions-grid-button-text-color: #757575;
  --f7-actions-button-padding: 0px;
  --f7-actions-button-text-align: center;
  --f7-actions-button-height: 57px;
  --f7-actions-button-height-landscape: 44px;
  --f7-actions-button-font-size: 20px;
  --f7-actions-button-icon-size: 28px;
  --f7-actions-button-justify-content: center;
  --f7-actions-label-padding: 8px 10px;
  --f7-actions-label-font-weight: 400;
  --f7-actions-label-font-size: 13px;
  --f7-actions-label-justify-content: center;
  --f7-actions-group-border-color: transparent;
  --f7-actions-group-margin: 8px;
  --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
  --f7-actions-bg-color-rgb: 255, 255, 255;
  --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
  --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
  --f7-actions-label-text-color: #8a8a8a;
}
.ios .dark,
.ios.dark {
  --f7-actions-bg-color: rgba(45, 45, 45, 0.95);
  --f7-actions-bg-color-rgb: 45, 45, 45;
  --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
  --f7-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
  --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
  --f7-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-actions-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --f7-actions-border-radius: 16px;
  --f7-actions-button-border-color: transparent;
  --f7-actions-button-padding: 0 16px;
  --f7-actions-button-text-align: left;
  --f7-actions-button-height: 48px;
  --f7-actions-button-height-landscape: 48px;
  --f7-actions-button-font-size: 16px;
  --f7-actions-button-icon-size: 24px;
  --f7-actions-button-justify-content: space-between;
  --f7-actions-label-padding: 12px 16px;
  --f7-actions-label-font-size: 14px;
  --f7-actions-label-font-weight: 500;
  --f7-actions-label-justify-content: flex-start;
  --f7-actions-group-margin: 0px;
  --f7-actions-button-pressed-bg-color: #e5e5e5;
}
.md .dark,
.md.dark {
  --f7-actions-button-pressed-bg-color: #2e2e2e;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-actions-button-text-color: var(--f7-md-on-surface);
  --f7-actions-bg-color: var(--f7-md-surface-3);
  --f7-actions-group-border-color: var(--f7-md-outline);
  --f7-actions-label-text-color: var(--f7-theme-color);
  --f7-actions-grid-button-text-color: var(--f7-md-on-surface);
}

Area Chart

:root {
  --f7-area-chart-current-line-stroke-width: 2px;
  --f7-area-chart-current-line-stroke: rgba(0, 0, 0, 0.15);
  --f7-area-chart-axis-text-color: inherit;
  --f7-area-chart-axis-height: 1px;
  --f7-area-chart-axis-font-size: 10px;
  --f7-area-chart-axis-font-weight: 500;
  --f7-area-chart-tooltip-font-size: 12px;
  --f7-area-chart-tooltip-total-font-size: 16px;
  --f7-area-chart-tooltip-total-font-weight: bold;
  --f7-area-chart-tooltip-color-size: 10px;
  --f7-area-chart-legend-font-size: 14px;
  --f7-area-chart-legend-font-weight: 500;
  --f7-area-chart-legend-text-color: inherit;
  --f7-area-chart-legend-padding: 4px 8px;
  --f7-area-chart-legend-border-radius: 4px;
  --f7-area-chart-legend-color-size: 14px;
  --f7-area-chart-line-stroke-width: 2px;
  --f7-area-chart-axis-bg-color: rgba(0, 0, 0, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(0, 0, 0, 0.22);
}
:root .dark,
:root.dark {
  --f7-area-chart-axis-bg-color: rgba(255, 255, 255, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(255, 255, 255, 0.22);
}
.ios {
  --f7-area-chart-tooltip-total-label-text-color: rgba(255, 255, 255, 0.75);
}
.md {
  --f7-area-chart-tooltip-total-label-text-color: inherit;
}

Autocomplete

:root {
  --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
  --f7-autocomplete-dropdown-preloader-size: 20px;
  --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  /*
  --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  */
}
.ios {
  --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  --f7-autocomplete-dropdown-text-matching-font-weight: 600;
  --f7-autocomplete-dropdown-bg-color: #fff;
  --f7-autocomplete-dropdown-text-color: #000;
  --f7-autocomplete-dropdown-text-matching-color: #000;
}
.ios .dark,
.ios.dark {
  --f7-autocomplete-dropdown-bg-color: #1c1c1d;
  --f7-autocomplete-dropdown-text-color: #fff;
  --f7-autocomplete-dropdown-text-matching-color: #fff;
}
.md {
  --f7-autocomplete-dropdown-box-shadow: none;
  --f7-autocomplete-dropdown-text-matching-font-weight: 500;
  --f7-autocomplete-dropdown-text-matching-color: #000;
}
.md .dark,
.md.dark {
  --f7-autocomplete-dropdown-text-matching-color: #fff;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-autocomplete-dropdown-bg-color: var(--f7-md-surface-2);
  --f7-autocomplete-dropdown-text-color: var(--f7-md-on-surface);
}

Badge

:root {
  --f7-badge-text-color: #fff;
  --f7-badge-bg-color: #8e8e93;
  --f7-badge-in-icon-size: 16px;
  --f7-badge-in-icon-font-size: 10px;
  --f7-badge-font-weight: normal;
  --f7-badge-font-size: 12px;
}
.ios {
  --f7-badge-padding: 0 4px;
  --f7-badge-size: 20px;
  --f7-badge-font-weight: 600;
}
.md {
  --f7-badge-padding: 2px 6px;
  --f7-badge-size: 20px;
  --f7-badge-font-weight: 500;
}

Block

:root {
  --f7-block-padding-horizontal: 16px;
  --f7-block-padding-vertical: 16px;
  --f7-block-font-size: inherit;
  --f7-block-header-margin: 10px;
  --f7-block-footer-margin: 10px;
  --f7-block-header-font-size: 14px;
  --f7-block-footer-font-size: 14px;
  --f7-block-title-text-transform: none;
  --f7-block-title-white-space: nowrap;
  --f7-block-title-medium-text-transform: none;
  --f7-block-title-large-text-transform: none;
  --f7-block-inset-side-margin: 16px;
}
:root .dark,
:root.dark {
  --f7-block-outline-border-color: rgba(255, 255, 255, 0.15);
}
.ios {
  --f7-block-text-color: inherit;
  --f7-block-margin-vertical: 35px;
  --f7-block-outline-border-color: rgba(0, 0, 0, 0.22);
  --f7-block-title-font-size: 16px;
  --f7-block-title-font-weight: 600;
  --f7-block-title-line-height: 20px;
  --f7-block-title-margin-bottom: 10px;
  --f7-block-title-medium-font-size: 22px;
  --f7-block-title-medium-font-weight: bold;
  --f7-block-title-medium-line-height: 1.4;
  --f7-block-title-large-font-size: 30px;
  --f7-block-title-large-font-weight: bold;
  --f7-block-title-large-line-height: 1.3;
  --f7-block-inset-border-radius: 8px;
  --f7-block-title-text-color: #000;
  --f7-block-strong-text-color: #000;
  --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
  --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-block-strong-bg-color: #fff;
  --f7-block-title-medium-text-color: #000;
  --f7-block-title-large-text-color: #000;
}
.ios .dark,
.ios.dark {
  --f7-block-title-text-color: #fff;
  --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
  --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-block-strong-text-color: #fff;
  --f7-block-strong-bg-color: #1c1c1d;
  --f7-block-title-medium-text-color: #fff;
  --f7-block-title-large-text-color: #fff;
}
.md {
  --f7-block-margin-vertical: 32px;
  --f7-block-title-font-size: inherit;
  --f7-block-title-font-weight: 500;
  --f7-block-title-line-height: 16px;
  --f7-block-title-margin-bottom: 16px;
  --f7-block-title-medium-font-size: 16px;
  --f7-block-title-medium-font-weight: 500;
  --f7-block-title-medium-line-height: 1.3;
  --f7-block-title-large-font-size: 22px;
  --f7-block-title-large-font-weight: 500;
  --f7-block-title-large-line-height: 1.2;
  --f7-block-inset-border-radius: 16px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-block-text-color: var(--f7-md-on-surface);
  --f7-block-strong-text-color: var(--f7-md-on-surface);
  --f7-block-outline-border-color: var(--f7-md-outline);
  --f7-block-title-text-color: var(--f7-theme-color);
  --f7-block-title-medium-text-color: var(--f7-theme-color);
  --f7-block-title-large-text-color: var(--f7-theme-color);
  --f7-block-strong-bg-color: var(--f7-md-surface-1);
  --f7-block-header-text-color: var(--f7-md-on-surface-variant);
  --f7-block-footer-text-color: var(--f7-md-on-surface-variant);
}

Breadcrumbs

:root {
  --f7-breadcrumbs-spacing: 12px;
  --f7-breadcrumbs-padding: 2px 0;
  --f7-breadcrumbs-icon-size: 24px;
  --f7-breadcrumbs-separator-color: rgba(0, 0, 0, 0.35);
}
:root .dark,
:root.dark {
  --f7-breadcrumbs-separator-color: rgba(255, 255, 255, 0.35);
}
.ios {
  --f7-breadcrumbs-item-bg-color: transparent;
  --f7-breadcrumbs-collapsed-border-radius: 4px;
  --f7-breadcrumbs-collapsed-padding: 0px 6px;
  --f7-breadcrumbs-separator-icon: 'chevron_right_ios';
  --f7-breadcrumbs-font-size: 17px;
  --f7-breadcrumbs-item-border-radius: 0px;
  --f7-breadcrumbs-item-padding: 0px;
  --f7-breadcrumbs-item-font-weight: normal;
  --f7-breadcrumbs-item-active-font-weight: 600;
  --f7-breadcrumbs-item-color: rgba(0, 0, 0, 0.55);
  --f7-breadcrumbs-item-active-color: #000;
  --f7-breadcrumbs-collapsed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-breadcrumbs-collapsed-color: rgba(0, 0, 0, 0.75);
}
.ios .dark,
.ios.dark {
  --f7-breadcrumbs-item-color: rgba(255, 255, 255, 0.75);
  --f7-breadcrumbs-item-active-color: #fff;
  --f7-breadcrumbs-collapsed-bg-color: rgba(255, 255, 255, 0.15);
  --f7-breadcrumbs-collapsed-color: rgba(255, 255, 255, 0.75);
}
.md {
  --f7-breadcrumbs-collapsed-border-radius: 8px;
  --f7-breadcrumbs-collapsed-padding: 12px 8px;
  --f7-breadcrumbs-separator-icon: 'chevron_right_md';
  --f7-breadcrumbs-font-size: 14px;
  --f7-breadcrumbs-item-border-radius: 8px;
  --f7-breadcrumbs-item-padding: 4px 8px;
  --f7-breadcrumbs-item-font-weight: 500;
  --f7-breadcrumbs-item-active-font-weight: 500;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-breadcrumbs-item-color: var(--f7-theme-color);
  --f7-breadcrumbs-item-bg-color: var(--f7-md-secondary-container);
  --f7-breadcrumbs-item-active-color: var(--f7-md-on-secondary-container);
  --f7-breadcrumbs-collapsed-color: var(--f7-theme-color);
  --f7-breadcrumbs-collapsed-bg-color: var(--f7-md-secondary-container);
}

Button

:root {
  --f7-button-font-size: 14px;
  --f7-button-min-width: 32px;
  --f7-button-bg-color: transparent;
  --f7-button-border-width: 0px;
  /*
  --f7-button-text-color: var(--f7-theme-color);
  --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  --f7-button-border-color: var(--f7-theme-color);
  --f7-button-fill-bg-color: var(--f7-theme-color);
  --f7-button-padding-vertical: 0px;
  */
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  --f7-segmented-strong-padding: 2px;
  --f7-segmented-strong-between-buttons: 4px;
  --f7-segmented-strong-button-font-weight: 500;
  --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  --f7-segmented-strong-button-text-color: #000;
  --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  --f7-segmented-strong-button-active-text-color: #000;
  --f7-segmented-strong-button-active-bg-color: #fff;
}
:root .dark,
:root.dark {
  --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  --f7-segmented-strong-button-text-color: #fff;
  --f7-segmented-strong-button-active-text-color: #fff;
}
.ios {
  --f7-button-fill-text-color: #fff;
  --f7-button-text-transform: uppercase;
  --f7-button-height: 28px;
  --f7-button-padding-horizontal: 10px;
  --f7-button-border-radius: 4px;
  --f7-button-font-weight: 600;
  --f7-button-letter-spacing: 0;
  /*
  --f7-button-outline-border-color: var(--f7-theme-color);
  */
  --f7-button-outline-border-width: 2px;
  /*
  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
  */
  --f7-button-large-text-transform: uppercase;
  --f7-button-large-height: 44px;
  --f7-button-large-font-size: 17px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-outline-border-width: 2px;
  --f7-button-small-text-transform: uppercase;
  --f7-button-small-height: 26px;
  --f7-button-small-font-size: 13px;
  --f7-button-small-font-weight: 600;
  --f7-segmented-strong-button-text-transform: none;
  --f7-segmented-strong-button-active-font-weight: 600;
  --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
  --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
  --f7-button-tonal-text-color: var(--f7-theme-color);
  --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
}
.ios .dark,
.ios.dark {
  --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
}
.md {
  /*
  --f7-button-pressed-bg-color: transparent;
  */
  --f7-button-text-transform: none;
  --f7-button-height: 40px;
  --f7-button-padding-horizontal: 16px;
  --f7-button-border-radius: 8px;
  --f7-button-font-weight: 500;
  --f7-button-letter-spacing: normal;
  --f7-button-outline-border-width: 1px;
  --f7-button-large-text-transform: none;
  --f7-button-large-height: 48px;
  --f7-button-large-font-size: 14px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-text-transform: none;
  --f7-button-small-outline-border-width: 1px;
  --f7-button-small-height: 32px;
  --f7-button-small-font-size: 14px;
  --f7-button-small-font-weight: 500;
  --f7-segmented-strong-button-text-transform: none;
  --f7-segmented-strong-button-active-font-weight: 500;
  --f7-segmented-strong-button-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-button-fill-pressed-bg-color: transparent;
  --f7-button-fill-text-color: var(--f7-md-on-primary);
  --f7-button-outline-border-color: var(--f7-md-outline);
  --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
  --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
  --f7-button-tonal-pressed-bg-color: transparent;
  --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
}

Calendar

:root {
  --f7-calendar-height: 340px;
  --f7-calendar-sheet-landscape-height: 220px;
  --f7-calendar-popover-width: 320px;
  --f7-calendar-popover-height: 320px;
  --f7-calendar-modal-height: 420px;
  --f7-calendar-modal-max-width: 380px;
  /*
  --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
  --f7-calendar-header-link-color: var(--f7-bars-link-color);
  --f7-calendar-header-text-color: var(--f7-bars-text-color);
  --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
  --f7-calendar-footer-border-color: var(--f7-bars-border-color);
  --f7-calendar-footer-link-color: var(--f7-bars-link-color);
  --f7-calendar-footer-text-color: var(--f7-bars-text-color);
  */
  --f7-calendar-week-header-bg-color: transparent;
  --f7-calendar-footer-padding: 0 8px;
  --f7-calendar-week-header-font-size: 11px;
  /*
  --f7-calendar-selected-bg-color:  var(--f7-theme-color);
  */
  --f7-calendar-disabled-text-color: #d4d4d4;
  --f7-calendar-event-dot-size: 4px;
  /*
  --f7-calendar-event-bg-color: var(--f7-theme-color);
  */
  /*
  --f7-calendar-picker-selected-text-color: var(--f7-theme-color);
  */
  --f7-calendar-time-selector-height: 28px;
  --f7-calendar-picker-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --f7-calendar-picker-hover-bg-color: rgba(0, 0, 0, 0.03);
  --f7-calendar-time-selector-bg-color: rgba(0, 0, 0, 0.05);
}
:root .dark,
:root.dark {
  --f7-calendar-picker-pressed-bg-color: rgba(255, 255, 255, 0.08);
  --f7-calendar-picker-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-calendar-time-selector-bg-color: rgba(255, 255, 255, 0.1);
}
.ios {
  --f7-calendar-selected-text-color: #fff;
  --f7-calendar-header-height: 44px;
  --f7-calendar-header-font-size: 17px;
  --f7-calendar-header-font-weight: 600;
  --f7-calendar-header-padding: 0 8px;
  --f7-calendar-footer-height: 44px;
  --f7-calendar-footer-font-size: 17px;
  --f7-calendar-week-header-height: 18px;
  --f7-calendar-day-font-size: 15px;
  --f7-calendar-day-size: 30px;
  --f7-calendar-picker-font-size: 17px;
  --f7-calendar-time-selector-font-size: 17px;
  --f7-calendar-modal-border-radius: 4px;
  --f7-calendar-modal-box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
                                  0px 24px 38px 3px rgba(0, 0, 0, 0.14),
                                  0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --f7-calendar-prev-next-text-color: #c8c8c8;
  --f7-calendar-sheet-border-color: #929499;
  --f7-calendar-sheet-bg-color: #fff;
  --f7-calendar-week-header-text-color: #5e5e5e;
  --f7-calendar-modal-bg-color: #fff;
  --f7-calendar-day-text-color: #000;
  --f7-calendar-today-text-color: #000;
  --f7-calendar-today-bg-color: #e3e3e3;
}
.ios .dark,
.ios.dark {
  --f7-calendar-prev-next-text-color: #5e5e5e;
  --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
  --f7-calendar-sheet-bg-color: #121212;
  --f7-calendar-week-header-text-color: #aaa;
  --f7-calendar-modal-bg-color: #121212;
  --f7-calendar-day-text-color: #fff;
  --f7-calendar-today-text-color: #fff;
  --f7-calendar-today-bg-color: #333;
}
.md {
  --f7-calendar-sheet-border-color: transparent;
  --f7-calendar-header-height: 64px;
  --f7-calendar-header-font-size: 24px;
  --f7-calendar-header-font-weight: 400;
  --f7-calendar-header-padding: 0 24px;
  --f7-calendar-footer-height: 56px;
  --f7-calendar-footer-font-size: 14px;
  --f7-calendar-week-header-height: 24px;
  --f7-calendar-day-font-size: 14px;
  --f7-calendar-today-bg-color: none;
  --f7-calendar-day-size: 32px;
  --f7-calendar-picker-font-size: 14px;
  --f7-calendar-time-selector-font-size: 14px;
  --f7-calendar-modal-border-radius: 28px;
  --f7-calendar-modal-box-shadow: none;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-calendar-sheet-bg-color: var(--f7-md-surface-1);
  --f7-calendar-selected-text-color: var(--f7-md-on-primary);
  --f7-calendar-week-header-text-color: var(--f7-md-on-surface-variant);
  --f7-calendar-day-text-color: var(--f7-md-on-surface);
  --f7-calendar-prev-next-text-color: rgba(var(--f7-md-on-surface-variant-rgb), 0.55);
  --f7-calendar-today-text-color: var(--f7-theme-color);
  --f7-calendar-modal-bg-color: var(--f7-md-surface-1);
}

Card

:root {
  --f7-card-margin-horizontal: 16px;
  --f7-card-margin-vertical: 16px;
  --f7-card-content-padding-horizontal: 16px;
  --f7-card-content-padding-vertical: 16px;
  --f7-card-font-size: inherit;
  --f7-card-header-text-color: inherit;
  --f7-card-header-font-weight: 400;
  --f7-card-header-padding-horizontal: 16px;
  --f7-card-footer-font-weight: 400;
  --f7-card-footer-font-size: inherit;
  --f7-card-footer-padding-horizontal: 16px;
  --f7-card-expandable-font-size: 16px;
  --f7-card-expandable-tablet-width: 670px;
  --f7-card-expandable-tablet-height: 670px;
}
.ios {
  --f7-card-border-radius: 8px;
  --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  --f7-card-header-font-size: 17px;
  --f7-card-header-padding-vertical: 10px;
  --f7-card-header-min-height: 44px;
  --f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-card-footer-padding-vertical: 10px;
  --f7-card-footer-min-height: 44px;
  --f7-card-expandable-margin-horizontal: 20px;
  --f7-card-expandable-margin-vertical: 30px;
  --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  --f7-card-expandable-border-radius: 16px;
  --f7-card-expandable-tablet-border-radius: 16px;
  --f7-card-expandable-header-font-size: 27px;
  --f7-card-expandable-header-font-weight: bold;
  --f7-card-text-color: inherit;
  --f7-card-bg-color: #fff;
  --f7-card-expandable-bg-color: #fff;
  --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
  --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
  --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
}
.ios .dark,
.ios.dark {
  --f7-card-bg-color: #1c1c1d;
  --f7-card-expandable-bg-color: #1c1c1d;
  --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
  --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
  --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
  --f7-card-footer-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-card-border-radius: 16px;
  --f7-card-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);
  --f7-card-header-font-size: 22px;
  --f7-card-header-padding-vertical: 16px;
  --f7-card-header-min-height: 48px;
  --f7-card-footer-padding-vertical: 16px;
  --f7-card-footer-min-height: 48px;
  --f7-card-expandable-margin-horizontal: 12px;
  --f7-card-expandable-margin-vertical: 24px;
  --f7-card-expandable-box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
                                   0px 10px 14px 1px rgba(0, 0, 0, 0.14),
                                   0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --f7-card-expandable-border-radius: 16px;
  --f7-card-expandable-tablet-border-radius: 16px;
  --f7-card-expandable-header-font-size: 22px;
  --f7-card-expandable-header-font-weight: 500;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-card-bg-color: var(--f7-md-surface-1);
  --f7-card-expandable-bg-color: var(--f7-md-surface-1);
  --f7-card-outline-border-color: var(--f7-md-outline);
  --f7-card-header-border-color: var(--f7-md-outline);
  --f7-card-footer-border-color: var(--f7-md-outline);
  --f7-card-text-color: var(--f7-md-on-surface);
  --f7-card-footer-text-color: var(--f7-md-on-surface-variant);
}

Checkbox

:root {
  /* --f7-checkbox-active-color: var(--f7-theme-color); */
  --f7-checkbox-icon-color: #fff;
  --f7-checkbox-extra-margin: 0px;
}
:root .dark,
:root.dark {
  --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
  --f7-checkbox-icon-color: #000;
}
.ios {
  --f7-checkbox-size: 22px;
  --f7-checkbox-border-radius: 50%;
  --f7-checkbox-border-width: 1px;
  --f7-checkbox-inactive-color: #c7c7cc;
}
.md {
  --f7-checkbox-size: 18px;
  --f7-checkbox-border-radius: 2px;
  --f7-checkbox-border-width: 2px;
  --f7-checkbox-inactive-color: #6d6d6d;
}

Chip

:root {
  --f7-chip-font-size: 14px;
  --f7-chip-media-font-size: 16px;
  --f7-chip-delete-button-color: #000;
}
:root .dark,
:root.dark {
  --f7-chip-delete-button-color: #fff;
}
.ios {
  --f7-chip-height: 28px;
  --f7-chip-media-size: 28px;
  --f7-chip-padding-horizontal: 10px;
  --f7-chip-border-radius: 28px;
  --f7-chip-font-weight: normal;
  --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
  --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
  --f7-chip-text-color: #000;
  --f7-chip-outline-text-color: #000;
}
.ios .dark,
.ios.dark {
  --f7-chip-bg-color: #333;
  --f7-chip-text-color: #fff;
  --f7-chip-outline-text-color: #fff;
  --f7-chip-outline-border-color: rgba(255, 255, 255, 0.12);
}
.md {
  --f7-chip-font-weight: 500;
  --f7-chip-media-size: 24px;
  --f7-chip-height: 32px;
  --f7-chip-padding-horizontal: 12px;
  --f7-chip-border-radius: 8px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-chip-bg-color: var(--f7-md-secondary-container);
  --f7-chip-text-color: var(--f7-md-on-secondary-container);
  --f7-chip-outline-text-color: var(--f7-md-on-surface);
  --f7-chip-outline-border-color: var(--f7-md-outline);
}

Contacts List

.ios {
  --f7-contacts-list-title-font-size: inherit;
  --f7-contacts-list-title-font-weight: 600;
  --f7-contacts-list-title-height: 22px;
  --f7-contacts-list-title-text-color: #000;
  --f7-contacts-list-title-bg-color: #f7f7f7;
}
.ios .dark,
.ios.dark {
  --f7-contacts-list-title-text-color: #fff;
  --f7-contacts-list-title-bg-color: #323234;
}
.md {
  --f7-contacts-list-title-font-size: 20px;
  --f7-contacts-list-title-font-weight: 500;
  --f7-contacts-list-title-height: 48px;
  --f7-contacts-list-title-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-contacts-list-title-text-color: var(--f7-theme-color);
}

Data Table

:root {
  --f7-table-head-font-size: 12px;
  --f7-table-body-font-size: 14px;
  --f7-table-footer-font-size: 12px;
  --f7-table-input-height: 24px;
  --f7-table-input-font-size: 14px;
  --f7-table-collapsible-cell-padding: 16px;
  --f7-table-link-icon-only-icon-size: 20px;
  --f7-table-head-bg-color: transparent;
  --f7-table-card-header-bg-color: transparent;
  --f7-table-card-header-height: 64px;
  --f7-table-cell-padding-vertical: 0px;
  --f7-table-sortable-icon-color: #000;
}
:root .dark,
:root.dark {
  --f7-table-sortable-icon-color: #fff;
  --f7-table-input-text-color: #fff;
}
.ios {
  --f7-table-head-font-weight: 600;
  --f7-table-head-cell-height: 44px;
  --f7-table-head-icon-size: 18px;
  --f7-table-body-cell-height: 44px;
  --f7-table-cell-padding-horizontal: 16px;
  --f7-table-edge-cell-padding-horizontal: 16px;
  --f7-table-label-cell-padding-horizontal: 16px;
  --f7-table-checkbox-cell-width: 22px;
  /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  /* --f7-table-actions-link-color: var(--f7-theme-color); */
  --f7-table-title-font-size: 17px;
  --f7-table-title-font-weight: 600;
  --f7-table-footer-height: 44px;
  --f7-table-head-text-color: rgba(0, 0, 0, 0.45);
  --f7-table-cell-border-color: rgba(0, 0, 0, 0.22);
  --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  --f7-table-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-table-input-text-color: #000;
}
.ios .dark,
.ios.dark {
  --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
  --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
  --f7-table-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
}
.md {
  --f7-table-head-font-weight: 500;
  --f7-table-head-cell-height: 56px;
  --f7-table-head-icon-size: 16px;
  --f7-table-body-cell-height: 48px;
  --f7-table-cell-padding-horizontal: 28px;
  --f7-table-edge-cell-padding-horizontal: 24px;
  --f7-table-label-cell-padding-horizontal: 24px;
  --f7-table-checkbox-cell-width: 18px;
  --f7-table-title-font-size: 20px;
  --f7-table-title-font-weight: 400;
  --f7-table-footer-height: 56px;
  --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-input-text-color: #212121;
}
.md .dark,
.md.dark {
  --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-table-head-text-color: var(--f7-md-on-surface-variant);
  --f7-table-footer-text-color: var(--f7-md-on-surface-variant);
  --f7-table-selected-row-bg-color: var(--f7-md-secondary-container);
  --f7-table-cell-border-color: var(--f7-md-outline);
}

Dialog

:root {
  --f7-dialog-button-text-color: var(--f7-theme-color);
  --f7-dialog-button-text-align: center;
}
.ios {
  --f7-dialog-width: 270px;
  --f7-dialog-inner-padding: 16px;
  --f7-dialog-border-radius: 13px;
  --f7-dialog-text-align: center;
  --f7-dialog-font-size: 14px;
  --f7-dialog-title-text-color: inherit;
  --f7-dialog-title-font-size: 18px;
  --f7-dialog-title-font-weight: 600;
  --f7-dialog-title-line-height: inherit;
  --f7-dialog-button-font-size: 17px;
  --f7-dialog-button-height: 44px;
  --f7-dialog-button-letter-spacing: 0;
  --f7-dialog-button-font-weight: 400;
  --f7-dialog-button-text-transform: none;
  --f7-dialog-button-strong-bg-color: transparent;
  --f7-dialog-button-strong-text-color: var(--f7-theme-color);
  --f7-dialog-button-strong-font-weight: 500;
  --f7-dialog-input-border-radius: 4px;
  --f7-dialog-input-font-size: 14px;
  --f7-dialog-input-height: 32px;
  --f7-dialog-input-border-width: 1px;
  --f7-dialog-input-placeholder-color: #a9a9a9;
  --f7-dialog-preloader-size: 34px;
  --f7-dialog-input-bg-color: #fff;
  --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
  --f7-dialog-bg-color-rgb: 255, 255, 255;
  --f7-dialog-text-color: #000;
  --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --f7-dialog-button-strong-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
  --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
}
.ios .dark,
.ios.dark {
  --f7-dialog-text-color: #fff;
  --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
  --f7-dialog-bg-color-rgb: 45, 45, 45;
  --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
  --f7-dialog-button-strong-pressed-bg-color: rgba(0, 0, 0, 0.2);
  --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
  --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
}
.md {
  --f7-dialog-width: 280px;
  --f7-dialog-inner-padding: 24px;
  --f7-dialog-border-radius: 28px;
  --f7-dialog-text-align: left;
  --f7-dialog-font-size: 14px;
  --f7-dialog-title-font-size: 24px;
  --f7-dialog-title-font-weight: 400;
  --f7-dialog-title-line-height: 1.3;
  --f7-dialog-button-font-size: 14px;
  --f7-dialog-button-height: 40px;
  --f7-dialog-button-letter-spacing: normal;
  --f7-dialog-button-font-weight: 500;
  --f7-dialog-button-text-transform: none;
  --f7-dialog-button-strong-font-weight: 500;
  --f7-dialog-input-border-radius: 0px;
  --f7-dialog-input-font-size: 16px;
  --f7-dialog-input-height: 36px;
  --f7-dialog-input-border-color: transparent;
  --f7-dialog-input-border-width: 0px;
  --f7-dialog-preloader-size: 32px;
  --f7-dialog-input-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-dialog-button-pressed-bg-color: transparent;
  --f7-dialog-button-strong-bg-color: var(--f7-theme-color);
  --f7-dialog-button-strong-text-color: var(--f7-md-on-primary);
  --f7-dialog-button-strong-pressed-bg-color: transparent;
  --f7-dialog-bg-color: var(--f7-md-surface-3);
  --f7-dialog-input-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-dialog-text-color: var(--f7-md-on-surface-variant);
  --f7-dialog-title-text-color: var(--f7-md-on-surface);
}

Fab

:root {
  --f7-fab-margin: 16px;
  --f7-fab-extended-text-font-size: 14px;
  --f7-fab-label-padding: 4px 12px;
  --f7-fab-label-font-size: inherit;
  --f7-fab-button-size: 40px;
}
.ios {
  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
  /* --f7-fab-bg-color: var(--f7-theme-color)); */
  --f7-fab-text-color: #fff;
  --f7-fab-border-radius: 50px;
  --f7-fab-size: 50px;
  --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  --f7-fab-extended-text-transform: uppercase;
  --f7-fab-extended-size: 50px;
  --f7-fab-extended-text-padding: 0 20px;
  --f7-fab-extended-text-font-weight: 600;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-label-border-radius: 4px;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  --f7-fab-label-text-color: #333;
  --f7-fab-label-bg-color: #fff;
}
.md {
  /*
  --f7-fab-pressed-bg-color: var(--f7-fab-bg-color, var(--f7-theme-color));
  */
  --f7-fab-border-radius: 16px;
  --f7-fab-size: 56px;
  --f7-fab-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  --f7-fab-extended-size: 56px;
  --f7-fab-extended-text-padding: 0 16px;
  --f7-fab-extended-text-font-weight: 500;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-extended-text-transform: none;
  --f7-fab-label-border-radius: 8px;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-fab-bg-color: var(--f7-md-primary-container);
  --f7-fab-text-color: var(--f7-md-on-primary-container);
  --f7-fab-label-text-color: var(--f7-md-on-surface);
  --f7-fab-label-bg-color: var(--f7-md-surface-5);
}

Grid

:root {
  --f7-grid-gap: 16px;
}

Input

:root {
  --f7-input-bg-color: transparent;
  --f7-label-font-weight: 400;
  --f7-label-height: 16px;
  --f7-label-font-size: 12px;
  --f7-floating-label-scale: calc(16 / 12);
  --f7-input-padding-left: 0px;
  --f7-input-padding-right: 0px;
  --f7-input-error-text-color: #ff3b30;
  --f7-input-error-font-size: 12px;
  --f7-input-error-line-height: 1.4;
  --f7-input-error-font-weight: 400;
  --f7-input-info-font-size: 12px;
  --f7-input-info-line-height: 1.4;
  --f7-textarea-height: 100px;
  /*
  --f7-input-outline-focused-border-color: var(--f7-theme-color);
  --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  */
}
.ios {
  --f7-input-item-bg-color: transparent;
  --f7-input-item-border-radius: 0px;
  --f7-input-height: 40px;
  --f7-input-font-size: 16px;
  --f7-input-placeholder-color: #a9a9a9;
  --f7-textarea-padding-vertical: 8px;
  /*
  --f7-input-focused-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  */
  --f7-label-text-color: inherit;
  /*
  --f7-label-focused-text-color: var(--f7-label-text-color);
  --f7-label-invalid-text-color: var(--f7-label-text-color);
  */
  --f7-input-clear-button-size: 14px;
  --f7-input-outline-border-radius: 8px;
  --f7-input-text-color: #000000;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
  --f7-input-outline-border-color: #bbb;
}
.ios .dark,
.ios.dark {
  --f7-input-text-color: #fff;
  --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
  --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
  --f7-input-outline-border-color: #444;
}
.md {
  --f7-input-item-border-radius: 4px 4px 0 0;
  --f7-input-height: 24px;
  --f7-input-font-size: 16px;
  --f7-textarea-padding-vertical: 0px;
  --f7-input-outline-border-radius: 4px;
  /*
  --f7-input-focused-border-color: var(--f7-theme-color);
  --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  --f7-input-invalid-text-color: var(--f7-input-text-color);
  */
  /*
  --f7-label-focused-text-color: var(--f7-theme-color);
  --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  */
  --f7-floating-label-scale: calc(16 / 12);
  --f7-input-clear-button-size: 24px;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
}
.md .dark,
.md.dark {
  --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-input-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-input-item-bg-color: var(--f7-md-surface-variant);
  --f7-input-border-color: var(--f7-md-outline);
  --f7-input-clear-button-color: var(--f7-md-on-surface-variant);
  --f7-input-outline-border-color: var(--f7-md-outline);
  --f7-input-text-color: var(--f7-md-on-surface);
  --f7-label-text-color: var(--f7-md-on-surface-variant);
}

Link

:root {
  --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
.ios {
  --f7-link-pressed-opacity: 0.3;
}

List

:root {
  --f7-list-inset-side-margin: 16px;
  --f7-list-item-padding-horizontal: 16px;
  --f7-list-item-padding-vertical: 8px;
  --f7-list-media-item-padding-horizontal: 16px;
  --f7-list-item-text-max-lines: 2;
  --f7-list-chevron-icon-font-size: 20px;
  --f7-list-item-media-margin: 16px;
  --f7-list-item-title-font-size: inherit;
  --f7-list-item-title-font-weight: 400;
  --f7-list-item-title-line-height: inherit;
  --f7-list-item-title-white-space: nowrap;
  --f7-list-item-subtitle-font-weight: 400;
  --f7-list-item-subtitle-line-height: inherit;
  --f7-list-item-text-font-weight: 400;
  --f7-list-item-after-font-weight: 400;
  --f7-list-item-after-line-height: inherit;
  --f7-list-item-header-font-size: 12px;
  --f7-list-item-header-font-weight: 400;
  --f7-list-item-header-line-height: 1.2;
  --f7-list-item-footer-font-size: 12px;
  --f7-list-item-footer-font-weight: 400;
  --f7-list-item-footer-line-height: 1.2;
  /*
  --f7-list-button-text-color: var(--f7-theme-color);
  */
  --f7-list-button-font-size: inherit;
  --f7-list-button-font-weight: 400;
  --f7-list-button-text-align: center;
  --f7-list-group-title-line-height: inherit;
  --f7-menu-list-font-size: 14px;
  --f7-menu-list-item-title-font-size: 14px;
  --f7-menu-list-item-title-font-weight: 500;
  --f7-menu-list-item-subtitle-font-size: 14px;
  --f7-menu-list-item-text-font-size: 14px;
  --f7-menu-list-item-after-font-size: 14px;
  --f7-list-outline-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
  --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-outline-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-group-title-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --f7-list-in-list-padding-left: 30px;
  --f7-list-inset-border-radius: 8px;
  --f7-list-margin-vertical: 35px;
  --f7-list-font-size: 17px;
  --f7-list-chevron-icon-area: 20px;
  --f7-list-item-title-text-color: inherit;
  --f7-list-item-subtitle-text-color: inherit;
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-list-item-subtitle-font-size: 15px;
  --f7-list-item-text-font-size: 15px;
  --f7-list-item-text-line-height: 21px;
  --f7-list-item-after-font-size: inherit;
  --f7-list-item-after-padding: 5px;
  --f7-list-item-min-height: 44px;
  --f7-list-item-media-icons-margin: 5px;
  --f7-list-media-item-padding-vertical: 10px;
  --f7-list-media-item-title-font-weight: 600;
  --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
  /*
  --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  */
  --f7-list-group-title-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-group-title-height: 31px;
  --f7-list-group-title-font-size: inherit;
  --f7-list-group-title-font-weight: 400;
  --f7-menu-list-offset: 8px;
  --f7-menu-list-border-radius: 8px;
  --f7-menu-list-item-bg-color: transparent;
  --f7-menu-list-item-text-color: inherit;
  --f7-menu-list-item-min-height: 44px;
  --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-outline-inset-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-strong-bg-color: #fff;
  --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-item-header-text-color: inherit;
  --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-group-title-bg-color: #f7f7f7;
  --f7-menu-list-item-selected-text-color: var(--f7-theme-color);
  --f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
.ios .dark,
.ios.dark {
  --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
  --f7-list-strong-bg-color: #1c1c1d;
  --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-group-title-bg-color: #232323;
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
  --f7-menu-list-item-selected-text-color: inherit;
  --f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
}
.md {
  --f7-list-in-list-padding-left: 24px;
  --f7-list-inset-border-radius: 16px;
  --f7-list-margin-vertical: 32px;
  --f7-list-font-size: 16px;
  --f7-list-chevron-icon-area: 26px;
  --f7-list-item-subtitle-font-size: 14px;
  --f7-list-item-text-font-size: 14px;
  --f7-list-item-text-line-height: 20px;
  --f7-list-item-after-font-size: 14px;
  --f7-list-item-after-padding: 8px;
  --f7-list-item-min-height: 48px;
  --f7-list-item-media-icons-margin: 8px;
  --f7-list-media-item-padding-vertical: 12px;
  --f7-list-media-item-title-font-weight: 500;
  --f7-list-button-border-color: transparent;
  /*
  --f7-list-button-pressed-bg-color: transparent;
  */
  --f7-list-group-title-border-color: transparent;
  --f7-list-group-title-height: 48px;
  --f7-list-group-title-font-size: 16px;
  --f7-list-group-title-font-weight: 400;
  --f7-menu-list-offset: 16px;
  --f7-menu-list-border-radius: 999px;
  --f7-menu-list-item-min-height: 56px;
  --f7-list-link-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-list-outline-inset-border-color: var(--f7-md-outline);
  --f7-list-item-border-color: var(--f7-md-outline);
  --f7-list-item-title-text-color: var(--f7-md-on-surface);
  --f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
  --f7-list-group-title-bg-color: var(--f7-md-surface-2);
  --f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
  --f7-list-strong-bg-color: var(--f7-md-surface-1);
  --f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
  --f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
  --f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
  --f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);
  --f7-menu-list-item-text-color: var(--f7-md-on-surface-variant);
  --f7-menu-list-item-bg-color: var(--f7-md-surface-1);
  --f7-menu-list-item-selected-text-color: var(--f7-md-on-secondary-container);
  --f7-menu-list-item-selected-bg-color: var(--f7-md-secondary-container);
}

List Index

:root {
  --f7-list-index-width: 16px;
  --f7-list-index-font-size: 11px;
  --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-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;
}
.md {
  --f7-list-index-label-size: 56px;
  --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);
}

:root {
  --f7-login-screen-blocks-max-width: 480px;
  --f7-login-screen-title-text-align: center;
  --f7-login-screen-title-text-color: inherit;
  --f7-login-screen-title-letter-spacing: 0;
}
.ios {
  --f7-login-screen-blocks-margin-vertical: 25px;
  --f7-login-screen-transition-timing-function: initial;
  --f7-login-screen-transition-duration: 400ms;
  --f7-login-screen-title-font-weight: 600;
  --f7-login-screen-title-font-size: 28px;
  --f7-login-screen-content-bg-color: #fff;
  --f7-login-screen-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-login-screen-bg-color: #000;
  --f7-login-screen-content-bg-color: #000;
}
.md {
  --f7-login-screen-transition-duration: 600ms;
  --f7-login-screen-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
  --f7-login-screen-blocks-margin-vertical: 24px;
  --f7-login-screen-title-font-weight: 400;
  --f7-login-screen-title-font-size: 28px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-login-screen-content-bg-color: var(--f7-md-surface);
  --f7-login-screen-bg-color: var(--f7-md-surface);
}

Messagebar

:root {
  --f7-messagebar-attachments-height: 155px;
  --f7-messagebar-sheet-height: 252px;
  --f7-messagebar-sheet-landscape-height: 192px;
  /*
  --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
  --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
  */
}
.ios {
  --f7-messagebar-height: 44px;
  --f7-messagebar-font-size: 17px;
  --f7-messagebar-textarea-bg-color: transparent;
  /*
  --f7-messagebar-link-color: var(--f7-theme-color);
  */
  --f7-messagebar-border-color: transparent;
  --f7-messagebar-textarea-border-radius: 17px;
  --f7-messagebar-textarea-padding: 6px 16px;
  --f7-messagebar-textarea-height: 34px;
  --f7-messagebar-textarea-font-size: 17px;
  --f7-messagebar-textarea-line-height: 20px;
  --f7-messagebar-sheet-bg-color: #d1d5da;
  --f7-messagebar-sheet-border-color: transparent;
  --f7-messagebar-attachment-border-radius: 12px;
  --f7-messagebar-attachment-height: 155px;
  --f7-messagebar-attachment-landscape-height: 120px;
  --f7-messagebar-textarea-placeholder-color: rgba(0, 0, 0, 0.4);
  --f7-messagebar-textarea-text-color: #000;
  --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  --f7-messagebar-attachments-border-color: #c8c8cd;
  --f7-messagebar-bg-color: #fff;
  --f7-messagebar-bg-color-rgb: 255, 255, 255;
}
.ios .dark,
.ios.dark {
  --f7-messagebar-textarea-placeholder-color: rgba(255, 255, 255, 0.4);
  --f7-messagebar-textarea-text-color: #fff;
  --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  --f7-messagebar-bg-color: var(--f7-bars-bg-color);
  --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
}
.md {
  --f7-messagebar-height: 64px;
  --f7-messagebar-font-size: 16px;
  --f7-messagebar-textarea-border-radius: 24px;
  --f7-messagebar-textarea-padding: 12px 16px;
  --f7-messagebar-textarea-height: 48px;
  --f7-messagebar-textarea-font-size: 16px;
  --f7-messagebar-textarea-line-height: 22px;
  --f7-messagebar-textarea-border: 1px solid transparent;
  --f7-messagebar-attachment-border-radius: 12px;
  --f7-messagebar-attachment-height: 72px;
  --f7-messagebar-attachment-landscape-height: 72px;
  --f7-messagebar-border-color: transparent;
  --f7-messagebar-attachments-border-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-messagebar-textarea-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-messagebar-textarea-bg-color: var(--f7-md-surface-variant);
  --f7-messagebar-bg-color: var(--f7-md-surface);
  --f7-messagebar-textarea-text-color: var(--f7-md-on-surface);
  --f7-messagebar-sheet-bg-color: var(--f7-md-surface);
  --f7-messagebar-sheet-border-color: var(--f7-md-outline-variant);
  --f7-messagebar-link-color: var(--f7-md-on-surface);
}

Messages

:root {
  --f7-message-text-header-opacity: 0.65;
  --f7-message-text-header-font-size: 12px;
  --f7-message-text-footer-opacity: 0.65;
  --f7-message-text-footer-font-size: 12px;
  --f7-message-bubble-line-height: 1.2;
  --f7-message-header-font-size: 12px;
  --f7-message-footer-font-size: 11px;
  --f7-message-name-font-size: 12px;
  --f7-message-name-font-weight: inherit;
  --f7-message-avatar-border-radius: 50%;
  --f7-messages-title-font-weight: inherit;
  --f7-message-typing-indicator-bg-color: #000;
}
:root .dark,
:root.dark {
  --f7-message-typing-indicator-bg-color: #fff;
}
.ios {
  --f7-message-text-header-text-color: inherit;
  --f7-message-text-footer-text-color: inherit;
  --f7-messages-title-font-size: 11px;
  --f7-message-avatar-size: 29px;
  --f7-message-margin: 10px;
  --f7-message-bubble-min-height: 32px;
  --f7-message-bubble-font-size: 17px;
  --f7-message-bubble-border-radius: 16px;
  --f7-message-bubble-padding-vertical: 6px;
  --f7-message-bubble-padding-horizontal: 16px;
  --f7-message-typing-indicator-opacity: 0.35;
  /*
  --f7-message-sent-bg-color: var(--f7-theme-color);
  */
  --f7-message-sent-text-color: #fff;
  --f7-messages-content-bg-color: #fff;
  --f7-message-received-text-color: #000;
  --f7-message-received-bg-color: #e5e5ea;
  --f7-messages-title-text-color: rgba(0, 0, 0, 0.45);
  --f7-message-header-text-color: rgba(0, 0, 0, 0.45);
  --f7-message-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-message-name-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-message-received-bg-color: #252525;
  --f7-message-received-text-color: #fff;
  --f7-messages-content-bg-color: transparent;
  --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
  --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
  --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
  --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
}
.md {
  --f7-messages-content-bg-color: transparent;
  --f7-messages-title-font-size: 12px;
  --f7-message-avatar-size: 32px;
  --f7-message-margin: 16px;
  --f7-message-bubble-min-height: 40px;
  --f7-message-bubble-font-size: 16px;
  --f7-message-bubble-border-radius: 20px;
  --f7-message-bubble-padding-vertical: 10px;
  --f7-message-bubble-padding-horizontal: 16px;
  --f7-message-typing-indicator-opacity: 0.6;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-message-sent-bg-color: var(--f7-md-primary);
  --f7-message-sent-text-color: var(--f7-md-on-primary);
  --f7-message-received-bg-color: var(--f7-md-surface-variant);
  --f7-message-received-text-color: var(--f7-md-on-surface);
  --f7-message-text-header-text-color: var(--f7-md-on-surface-variant);
  --f7-message-text-footer-text-color: var(--f7-md-on-surface-variant);
  --f7-messages-title-text-color: var(--f7-md-on-surface-variant);
  --f7-message-header-text-color: var(--f7-md-on-surface-variant);
  --f7-message-footer-text-color: var(--f7-md-on-surface-variant);
  --f7-message-name-text-color: var(--f7-md-on-surface-variant);
}

:root {
  /*
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
  --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-navbar-border-color: var(--f7-bars-border-color);
  */
  --f7-navbar-hide-show-transition-duration: 400ms;
  --f7-navbar-title-line-height: 1.2;
  --f7-navbar-subtitle-text-align: inherit;
  --f7-navbar-large-title-line-height: 1.2;
  --f7-navbar-large-title-text-color: inherit;
  --f7-navbar-large-title-padding-left: 16px;
  --f7-navbar-large-title-padding-right: 16px;
}
.ios {
  /*
  --f7-navbar-link-color: var(--f7-bars-link-color);
  --f7-navbar-text-color: var(--f7-bars-text-color);
  */
  --f7-navbar-height: 44px;
  --f7-navbar-font-size: 17px;
  --f7-navbar-title-font-size: inherit;
  --f7-navbar-inner-padding-left: 8px;
  --f7-navbar-inner-padding-right: 8px;
  --f7-navbar-title-font-weight: 600;
  --f7-navbar-title-margin-left: 0;
  --f7-navbar-title-margin-right: 0;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-font-size: 10px;
  --f7-navbar-subtitle-line-height: 1;
  --f7-navbar-large-title-height: 52px;
  --f7-navbar-large-title-font-size: 34px;
  --f7-navbar-large-title-font-weight: 700;
  --f7-navbar-large-title-letter-spacing: -0.03em;
  --f7-navbar-large-title-padding-vertical: 6px;
  /*
  --f7-navbar-link-height: var(--f7-navbar-height);
  --f7-navbar-link-line-height: var(--f7-navbar-height);
  */
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .dark,
.ios.dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-navbar-height: 64px;
  --f7-navbar-font-size: 16px;
  --f7-navbar-title-font-size: 22px;
  --f7-navbar-inner-padding-left: 0px;
  --f7-navbar-inner-padding-right: 0px;
  --f7-navbar-title-font-weight: 400;
  --f7-navbar-title-margin-left: 0px;
  --f7-navbar-title-margin-right: 16px;
  --f7-navbar-title-text-align: left;
  --f7-navbar-subtitle-font-size: 14px;
  --f7-navbar-subtitle-line-height: 1.2;
  --f7-navbar-large-title-font-size: 28px;
  --f7-navbar-large-title-height: 88px;
  --f7-navbar-large-title-font-weight: 400;
  --f7-navbar-large-title-letter-spacing: 0;
  --f7-navbar-large-title-padding-vertical: 8px;
  --f7-navbar-link-height: 48px;
  --f7-navbar-link-line-height: 48px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-navbar-link-color: var(--f7-md-on-surface);
  --f7-navbar-text-color: var(--f7-md-on-surface);
  --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
}

Notification

:root {
  --f7-notification-max-width: 568px;
  --f7-notification-subtitle-text-transform: none;
  --f7-notification-subtitle-line-height: 1.35;
  --f7-notification-text-text-transform: none;
  --f7-notification-text-font-weight: 400;
}
.ios {
  --f7-notification-margin: 8px;
  --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;
  --f7-notification-title-font-size: 13px;
  --f7-notification-title-text-transform: uppercase;
  --f7-notification-title-line-height: 1.4;
  --f7-notification-title-font-weight: 400;
  --f7-notification-title-letter-spacing: 0.02em;
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-font-size: 15px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 15px;
  --f7-notification-text-line-height: 1.2;
  --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
  --f7-notification-bg-color-rgb: 255, 255, 255;
  --f7-notification-title-color: #000;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
  --f7-notification-subtitle-color: #000;
  --f7-notification-text-color: #000;
}
.ios .dark,
.ios.dark {
  --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
  --f7-notification-bg-color-rgb: 30, 30, 30;
  --f7-notification-title-color: #fff;
  --f7-notification-text-color: #fff;
  --f7-notification-subtitle-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-notification-margin: 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;
  --f7-notification-title-font-size: 16px;
  --f7-notification-title-text-transform: none;
  --f7-notification-title-line-height: 1.35;
  --f7-notification-title-font-weight: 500;
  --f7-notification-title-right-font-size: 12px;
  --f7-notification-subtitle-font-size: 14px;
  --f7-notification-subtitle-font-weight: 400;
  --f7-notification-text-font-size: 14px;
  --f7-notification-text-line-height: 1.35;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-notification-title-color: var(--f7-md-on-surface);
  --f7-notification-bg-color: var(--f7-md-surface-5);
  --f7-notification-text-color: var(--f7-md-on-surface-variant);
  --f7-notification-title-right-color: var(--f7-md-on-surface-variant);
  --f7-notification-subtitle-color: var(--f7-md-on-surface);
}

Page

:root {
  --f7-page-master-width: 320px;
  --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  --f7-page-master-border-width: 1px;
  --f7-page-swipeback-transition-duration: 300ms;
  --f7-page-parallax-transition-duration: 500ms;
  --f7-page-cover-transition-duration: 450ms;
  --f7-page-dive-transition-duration: 500ms;
  --f7-page-fade-transition-duration: 500ms;
  --f7-page-flip-transition-duration: 700ms;
  --f7-page-push-transition-duration: 500ms;
  /*
  --f7-page-content-extra-padding-top: 0px;
  --f7-page-content-extra-padding-bottom: 0px;
  */
  --f7-page-title-line-height: 1.2;
  --f7-page-title-text-color: inherit;
  --f7-page-title-padding-left: 16px;
  --f7-page-title-padding-right: 16px;
}
.ios {
  --f7-page-transition-duration: 400ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 700;
  --f7-page-title-letter-spacing: -0.03em;
  --f7-page-title-padding-vertical: 6px;
  --f7-page-bg-color: #efeff4;
}
.ios .dark,
.ios.dark {
  --f7-page-bg-color: #000;
}
.md {
  --f7-page-transition-duration: 400ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 500;
  --f7-page-title-letter-spacing: 0;
  --f7-page-title-padding-vertical: 8px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-page-bg-color: var(--f7-md-surface);
}
.dark {
  --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
}

Panel

:root {
  --f7-panel-width: 260px;
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
  /*
  --f7-panel-left-width: var(--f7-panel-width);
  --f7-panel-right-width: var(--f7-panel-width);
  --f7-panel-left-collapsed-width: var(--f7-panel-collapsed-width);
  --f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
  */
  --f7-panel-bg-color: #fff;
}
:root .dark,
:root.dark {
  --f7-panel-bg-color: #000;
}
.ios {
  --f7-panel-collapsed-width: 58px;
  --f7-panel-transition-duration: 400ms;
  --f7-panel-transition-timing-function: initial;
}
.md {
  --f7-panel-collapsed-width: 60px;
  --f7-panel-transition-duration: 400ms;
  --f7-panel-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
}

Photo Browser

:root {
  --f7-photobrowser-bg-color: #fff;
  --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
  --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
  --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
  --f7-photobrowser-caption-font-size: 13px;
  --f7-photobrowser-caption-font-weight: 500;
  --f7-photobrowser-caption-light-text-color: #000;
  --f7-photobrowser-caption-dark-text-color: #fff;
  --f7-photobrowser-exposed-bg-color: #000;
  --f7-photobrowser-dark-bg-color: #000;
  --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
  --f7-photobrowser-dark-bars-text-color: #fff;
  --f7-photobrowser-dark-bars-link-color: #fff;
}

Picker

:root {
  --f7-picker-height: 260px;
  --f7-picker-inline-height: 200px;
  --f7-picker-popover-height: 260px;
  --f7-picker-popover-width: 280px;
  --f7-picker-landscape-height: 200px;
  --f7-picker-item-height: 36px;
  /*
  --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
  */
}
.ios {
  --f7-picker-column-font-size: 20px;
  --f7-picker-item-selected-text-color: #000;
  --f7-picker-item-selected-bg-color: rgba(0, 0, 0, 0.12);
  --f7-picker-divider-text-color: #000;
  --f7-picker-item-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-picker-item-selected-text-color: #fff;
  --f7-picker-item-selected-bg-color: rgba(255, 255, 255, 0.1);
  --f7-picker-divider-text-color: #fff;
  --f7-picker-item-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-picker-column-font-size: 20px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-picker-item-selected-text-color: var(--f7-md-on-surface);
  --f7-picker-item-text-color: var(--f7-md-on-surface-variant);
  --f7-picker-divider-text-color: var(--f7-md-on-surface);
  --f7-picker-item-selected-border-color: var(--f7-md-outline);
}

:root {
  --f7-popover-width: 260px;
}
.ios {
  --f7-popover-border-radius: 13px;
  --f7-popover-actions-icon-size: 28px;
  --f7-popover-transition-timing-function: initial;
  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --f7-popover-border-radius: 28px;
  --f7-popover-actions-icon-size: 24px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-popover-bg-color: var(--f7-md-surface-3);
  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
}

:root {
  --f7-popup-border-radius: 0px;
  --f7-popup-tablet-width: 630px;
  --f7-popup-tablet-height: 630px;
  --f7-popup-push-offset: var(--f7-safe-area-top);
  /*
  --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
  */
}
.ios {
  --f7-popup-tablet-border-radius: 5px;
  --f7-popup-transition-duration: 400ms;
  --f7-popup-transition-timing-function: initial;
  --f7-popup-push-border-radius: 10px;
}
.md {
  --f7-popup-tablet-border-radius: 28px;
  --f7-popup-transition-duration: 600ms;
  --f7-popup-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
  --f7-popup-push-border-radius: 28px;
}

Preloader

:root {
  --f7-preloader-modal-padding: 8px;
  --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
}
.ios {
  --f7-preloader-color: #6c6c6c;
  --f7-preloader-size: 20px;
  --f7-preloader-modal-preloader-size: 34px;
  --f7-preloader-modal-border-radius: 5px;
}
.md {
  --f7-preloader-color: #757575;
  --f7-preloader-size: 32px;
  --f7-preloader-modal-preloader-size: 32px;
  --f7-preloader-modal-border-radius: 4px;
}

Progressbar

:root {
  /*
  --f7-progressbar-progress-color: var(--f7-theme-color);
  */
}
.ios {
  --f7-progressbar-height: 4px;
  --f7-progressbar-border-radius: 4px;
  --f7-progressbar-bg-color: rgba(0, 0, 0, 0.3);
}
.ios .dark,
.ios.dark {
  --f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
}
.md {
  --f7-progressbar-height: 4px;
  --f7-progressbar-border-radius: 0px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
}

Pull To Refresh

.ios {
  --f7-ptr-preloader-size: 28px;
  --f7-ptr-size: 44px;
}
.md {
  --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);
}

Radio

:root {
  /*
  --f7-radio-active-color: var(--f7-theme-color);
  */
  --f7-radio-border-radius: 50%;
  --f7-radio-extra-margin: 0px;
}
:root .dark,
:root.dark {
  --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --f7-radio-size: 22px;
  --f7-radio-border-width: 1px;
  --f7-radio-inactive-color: #c7c7cc;
}
.md {
  --f7-radio-size: 20px;
  --f7-radio-border-width: 2px;
  --f7-radio-inactive-color: #6d6d6d;
}

Range Slider

:root {
  /*
  --f7-range-bar-active-bg-color: var(--f7-theme-color);
  --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-height: 5px;
  --f7-range-scale-substep-width: 1px;
  --f7-range-scale-substep-height: 4px;
  --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
  --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
}
.ios {
  --f7-range-size: 28px;
  --f7-range-bar-size: 4px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 28px;
  --f7-range-knob-color: #fff;
  --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --f7-range-label-size: 24px;
  --f7-range-label-text-color: #000;
  --f7-range-label-bg-color: #fff;
  --f7-range-label-font-size: 12px;
  --f7-range-label-font-weight: 500;
  --f7-range-label-border-radius: 5px;
  --f7-range-label-padding: 0px 2px;
  --f7-range-scale-text-color: #666;
  --f7-range-scale-step-width: 1px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md {
  --f7-range-size: 20px;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 0px;
  --f7-range-knob-size: 12px;
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 26px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-font-size: 10px;
  --f7-range-label-border-radius: 50%;
  --f7-range-label-padding: 0px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-range-knob-color: var(--f7-theme-color);
  --f7-range-label-text-color: var(--f7-md-on-primary);
  --f7-range-label-bg-color: var(--f7-theme-color);
  --f7-range-scale-text-color: var(--f7-md-on-surface-variant);
}

Searchbar

:root {
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color);
  --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  */
  --f7-searchbar-input-border-width: 0px;
  --f7-searchbar-input-border-color: transparent;
}
.ios {
  /*
  --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-searchbar-border-color: var(--f7-bars-border-color);
  */
  --f7-searchbar-height: 44px;
  --f7-searchbar-inner-padding-left: 8px;
  --f7-searchbar-inner-padding-right: 8px;
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  */
  --f7-searchbar-input-font-size: 17px;
  --f7-searchbar-input-border-radius: 8px;
  --f7-searchbar-input-height: 32px;
  --f7-searchbar-inline-input-height: 32px;
  /*
  --f7-searchbar-inline-input-border-radius: var(--f7-searchbar-input-border-radius);
  */
  --f7-searchbar-input-padding-horizontal: 28px;
  /*
  --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
  --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  */
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-in-page-content-margin: 0px;
  --f7-searchbar-in-page-content-box-shadow: none;
  --f7-searchbar-in-page-content-border-radius: 0;
  --f7-searchbar-in-page-content-input-border-radius: 0;
  --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-text-color: #000;
  --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-bg-color: #e4e4e4;
}
.ios .dark,
.ios.dark {
  --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
  --f7-searchbar-input-text-color: #fff;
  --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  --f7-searchbar-input-bg-color: #2a2a2a;
}
.md {
  --f7-searchbar-border-color: transparent;
  --f7-searchbar-height: 48px;
  --f7-searchbar-inner-padding-left: 8px;
  --f7-searchbar-inner-padding-right: 8px;
  --f7-searchbar-input-font-size: 16px;
  --f7-searchbar-input-border-radius: 24px;
  --f7-searchbar-input-height: 48px;
  --f7-searchbar-inline-input-height: 48px;
  --f7-searchbar-inline-input-border-radius: 24px;
  --f7-searchbar-input-padding-horizontal: 16px;
  --f7-searchbar-inline-input-padding-horizontal: 16px;
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  --f7-searchbar-in-page-content-margin: 16px 0;
  --f7-searchbar-in-page-content-box-shadow: none;
  --f7-searchbar-in-page-content-border-radius: 24px;
  --f7-searchbar-in-page-content-input-border-radius: 24px;
  --f7-searchbar-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-searchbar-link-color: var(--f7-md-on-surface);
  --f7-searchbar-search-icon-color: var(--f7-md-on-surface);
  --f7-searchbar-input-clear-button-color: var(--f7-md-on-surface);
  --f7-searchbar-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-searchbar-input-bg-color: var(--f7-md-secondary-container);
  --f7-searchbar-input-text-color: var(--f7-md-on-surface);
}

Sheet

:root {
  --f7-sheet-height: 260px;
  --f7-sheet-push-offset: var(--f7-safe-area-top);
}
.ios {
  --f7-sheet-border-radius: 0px;
  --f7-sheet-border-color: var(--f7-bars-border-color);
  --f7-sheet-transition-timing-function: initial;
  --f7-sheet-push-border-radius: 10px;
  --f7-sheet-transition-duration: 300ms;
  --f7-sheet-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-sheet-bg-color: #202020;
}
.md {
  --f7-sheet-border-radius: 16px;
  --f7-sheet-push-border-radius: 16px;
  --f7-sheet-border-color: transparent;
  --f7-sheet-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --f7-sheet-transition-duration: 400ms;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-sheet-bg-color: var(--f7-md-surface);
}

Skeleton

:root {
  --skeleton-color: #ccc;
  --skeleton-icon-color: rgba(0, 0, 0, 0.25);
}
.dark {
  --skeleton-color: #515151;
  --skeleton-icon-color: rgba(255, 255, 255, 0.25);
}

Smart Select

:root {
  /*
  --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  */
}

Sortable List

.ios {
  --f7-sortable-handler-width: 36px;
  --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  --f7-sortable-handler-color: rgba(0, 0, 0, 0.22);
  --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
}
.ios .dark,
.ios.dark {
  --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
  --f7-sortable-handler-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-sortable-handler-width: 42px;
  --f7-sortable-sorting-item-box-shadow: none;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-sortable-handler-color: var(--f7-md-on-surface-variant);
  --f7-sortable-sorting-item-bg-color: var(--f7-md-surface-3);
}

Stepper

:root {
  /*
  --f7-stepper-button-text-color: var(--f7-theme-color);
  --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  --f7-stepper-value-text-color: var(--f7-theme-color);
  --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  */
  --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-stepper-value-font-weight: 500;
}
.ios {
  --f7-stepper-height: 28px;
  --f7-stepper-border-radius: 5px;
  --f7-stepper-fill-button-text-color: #fff;
  /*
  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  */
  --f7-stepper-large-height: 44px;
  --f7-stepper-small-height: 26px;
  --f7-stepper-value-font-size: 17px;
  --f7-stepper-border-width: 2px;
  --f7-stepper-border-color: var(--f7-theme-color);
  --f7-stepper-small-border-width: 2px;
}
.md {
  --f7-stepper-height: 40px;
  --f7-stepper-border-radius: 8px;
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-height: 32px;
  --f7-stepper-value-font-size: 14px;
  --f7-stepper-border-width: 1px;
  --f7-stepper-small-border-width: 1px;
  --f7-stepper-button-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-stepper-fill-button-text-color: var(--f7-md-on-primary);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color);
  --f7-stepper-border-color: var(--f7-md-outline);
}

Subnavbar

:root {
  /*
  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-subnavbar-border-color: var(--f7-bars-border-color);
  --f7-subnavbar-link-color: var(--f7-bars-link-color);
  --f7-subnavbar-text-color: var(--f7-bars-text-color);
  */
  --f7-subnavbar-title-line-height: 1.2;
}
.ios {
  --f7-subnavbar-height: 44px;
  --f7-subnavbar-inner-padding-left: 8px;
  --f7-subnavbar-inner-padding-right: 8px;
  --f7-subnavbar-title-font-size: 34px;
  --f7-subnavbar-title-font-weight: 700;
  --f7-subnavbar-title-letter-spacing: -0.03em;
  --f7-subnavbar-title-margin-left: 8px;
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}
.md {
  --f7-subnavbar-height: 64px;
  --f7-subnavbar-inner-padding-left: 16px;
  --f7-subnavbar-inner-padding-right: 16px;
  --f7-subnavbar-title-font-size: 22px;
  --f7-subnavbar-title-font-weight: 400;
  --f7-subnavbar-title-letter-spacing: 0;
  --f7-subnavbar-title-margin-left: 0px;
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}

Swipeout

:root {
  --f7-swipeout-delete-button-bg-color: #ff3b30;
  --f7-swipeout-button-text-color: #fff;
  --f7-swipeout-button-padding-vertical: 0px;
  --f7-swipeout-button-bg-color: rgba(0, 0, 0, 0.22);
}
:root .dark,
:root.dark {
  --f7-swipeout-button-bg-color: rgba(255, 255, 255, 0.55);
}
.ios {
  --f7-swipeout-button-padding-horizontal: 30px;
  --f7-swipeout-button-font-size: inherit;
  --f7-swipeout-button-font-weight: inherit;
}
.md {
  --f7-swipeout-button-padding-horizontal: 24px;
  --f7-swipeout-button-font-size: 14px;
  --f7-swipeout-button-font-weight: 500;
}
.md .dark,
.md.dark {
  --f7-swipeout-button-text-color: #000;
}

Text Editor

:root {
  --f7-text-editor-font-size: inherit;
  --f7-text-editor-font-weight: inherit;
  --f7-text-editor-border-width: 1px;
  --f7-text-editor-height: 250px;
  --f7-text-editor-margin: 16px;
  --f7-text-editor-padding: 8px;
  --f7-text-editor-button-bg-color: transparent;
  --f7-text-editor-button-size: 28px;
  --f7-text-editor-button-icon-size: 20px;
  --f7-text-editor-button-margin: 2px;
  --f7-text-editor-text-color: #000;
  --f7-text-editor-bg-color: #fff;
  --f7-text-editor-button-divider-color: rgba(0, 0, 0, 0.15);
}
:root .dark,
:root.dark {
  --f7-text-editor-bg-color: #121212;
  --f7-text-editor-text-color: #fff;
  --f7-text-editor-button-divider-color: rgba(255, 255, 255, 0.15);
}
.ios {
  --f7-text-editor-toolbar-padding: 6px;
  --f7-text-editor-button-border-radius: 2px;
  --f7-text-editor-placeholder-color: rgba(0, 0, 0, 0.35);
  --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
  --f7-text-editor-toolbar-bg-color: #fff;
  --f7-text-editor-border-color: rgba(0, 0, 0, 0.1);
  --f7-text-editor-button-text-color: #333;
}
.ios .dark,
.ios.dark {
  --f7-text-editor-placeholder-color: rgba(255, 255, 255, 0.35);
  --f7-text-editor-toolbar-bg-color: #121212;
  --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
  --f7-text-editor-toolbar-bg-color: #202020;
  --f7-text-editor-border-color: rgba(255, 255, 255, 0.1);
  --f7-text-editor-button-text-color: #fff;
}
.md {
  --f7-text-editor-button-border-radius: 8px;
  --f7-text-editor-toolbar-padding: 8px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-text-editor-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-text-editor-toolbar-bg-color: var(--f7-md-surface-1);
  --f7-text-editor-border-color: var(--f7-md-outline);
  --f7-text-editor-button-text-color: var(--f7-md-on-surface);
}

Timeline

:root {
  --f7-timeline-inner-block-margin-vertical: 16px;
  --f7-timeline-divider-margin-horizontal: 16px;
  --f7-timeline-horizontal-date-height: 34px;
  --f7-timeline-year-height: 24px;
  --f7-timeline-year-font-weight: inherit;
  --f7-timeline-month-height: 24px;
  --f7-timeline-month-font-size: inherit;
  --f7-timeline-month-font-weight: inherit;
  --f7-timeline-item-text-font-weight: inherit;
  --f7-timeline-item-subtitle-font-weight: inherit;
}
.ios {
  --f7-timeline-divider-color: #bbb;
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 35px;
  --f7-timeline-item-inner-border-radius: 7px;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 17px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 600;
  --f7-timeline-item-subtitle-font-size: 15px;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-color: inherit;
  --f7-timeline-item-text-line-height: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 10px;
  --f7-timeline-item-inner-bg-color: #fff;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
  --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
}
.ios .dark,
.ios.dark {
  --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
  --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
  --f7-timeline-item-inner-bg-color: #1c1c1d;
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 32px;
  --f7-timeline-item-inner-border-radius: 16px;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 16px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 400;
  --f7-timeline-item-subtitle-font-size: inherit;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-line-height: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 12px;
  --f7-timeline-horizontal-item-date-border-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-timeline-divider-color: var(--f7-md-outline);
  --f7-timeline-item-text-color: var(--f7-md-on-surface);
  --f7-timeline-horizontal-item-border-color: var(--f7-md-outline);
  --f7-timeline-item-inner-bg-color: var(--f7-md-surface-1);
  --f7-timeline-item-time-text-color: var(--f7-md-on-surface-variant);
}

Toast

:root {
  --f7-toast-font-size: 14px;
  --f7-toast-icon-size: 48px;
  --f7-toast-max-width: 568px;
}
.ios {
  --f7-toast-text-color: #fff;
  --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
  --f7-toast-bg-color-rgb: 0, 0, 0;
  --f7-toast-padding-horizontal: 16px;
  --f7-toast-padding-vertical: 12px;
  --f7-toast-border-radius: 8px;
  --f7-toast-button-min-width: 64px;
}
.md {
  --f7-toast-padding-horizontal: 24px;
  --f7-toast-padding-vertical: 14px;
  --f7-toast-border-radius: 16px;
  --f7-toast-button-min-width: 64px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-toast-text-color: var(--f7-md-on-surface);
  --f7-toast-bg-color: var(--f7-md-surface-5);
}

Toggle

.ios {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
  /*
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  */
  --f7-toggle-inactive-knob-bg-color: #fff;
  --f7-toggle-active-knob-bg-color: #fff;
  --f7-toggle-inactive-border-color: #e5e5e5;
  --f7-toggle-inactive-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-toggle-inactive-border-color: #555;
  --f7-toggle-inactive-bg-color: #555;
}
.md {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-toggle-inactive-bg-color: var(--f7-md-surface-variant);
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  --f7-toggle-inactive-knob-bg-color: var(--f7-md-outline);
  --f7-toggle-active-knob-bg-color: var(--f7-md-on-primary);
  --f7-toggle-inactive-border-color: var(--f7-md-outline);
  --f7-toggle-active-border-color: var(--f7-theme-color);
}

:root {
  /*
  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-toolbar-border-color: var(--f7-bars-border-color);
  --f7-toolbar-link-color: var(--f7-bars-link-color);
  --f7-toolbar-text-color: var(--f7-bars-text-color);
  */
  --f7-tabbar-link-active-bg-color: transparent;
  --f7-tabbar-label-text-transform: none;
  --f7-toolbar-hide-show-transition-duration: 400ms;
}
.ios {
  --f7-toolbar-height: 44px;
  --f7-toolbar-font-size: 17px;
  --f7-toolbar-inner-padding-left: 8px;
  --f7-toolbar-inner-padding-right: 8px;
  --f7-toolbar-link-font-weight: 400;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  --f7-tabbar-link-active-color: var(--f7-theme-color);
  */
  --f7-tabbar-icons-height: 50px;
  --f7-tabbar-icons-tablet-height: 50px;
  --f7-tabbar-icon-size: 28px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 400;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0.01;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
}
.ios .dark,
.ios.dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.md {
  --f7-toolbar-height: 56px;
  --f7-toolbar-font-size: 14px;
  --f7-toolbar-inner-padding-left: 0px;
  --f7-toolbar-inner-padding-right: 0px;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  */
  --f7-tabbar-icons-height: 80px;
  --f7-tabbar-icons-tablet-height: 80px;
  --f7-tabbar-icon-size: 24px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 500;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-toolbar-link-font-weight: 500;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 12px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
  --f7-tabbar-link-active-border-color: var(--f7-md-primary);
  --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
  --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
}

:root {
  --f7-tooltip-padding: 8px 16px;
  --f7-tooltip-font-size: 14px;
  --f7-tooltip-font-weight: 500;
  --f7-tooltip-desktop-padding: 6px 8px;
  --f7-tooltip-desktop-font-size: 12px;
}
.ios {
  --f7-tooltip-border-radius: 4px;
  --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
  --f7-tooltip-text-color: #fff;
}
.md {
  --f7-tooltip-border-radius: 8px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-tooltip-bg-color: var(--f7-md-secondary);
  --f7-tooltip-text-color: var(--f7-md-on-secondary);
}

Touch Ripple

:root {
  --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
  --f7-touch-ripple-white: rgba(255, 255, 255, 0.15);
  --f7-touch-ripple-color: var(--f7-touch-ripple-black);
}
.dark {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
}

Typography

:root {
  --f7-typography-padding: 16px;
  --f7-typography-margin: 16px;
}

CSS Variables Reference

App / Core

Action Sheet

Area Chart

Autocomplete

Badge

Block

Breadcrumbs

Button

Calendar

Card

Checkbox

Chip

Contacts List

Data Table

Dialog

Fab

Grid

Input

Link

List

List Index

Login Screen

Messagebar

Messages

Navbar

Notification

Page

Panel

Photo Browser

Picker

Popover

Popup

Preloader

Progressbar

Pull To Refresh

Radio

Range Slider

Searchbar

Sheet

Skeleton

Smart Select

Sortable List

Stepper

Subnavbar

Swipeout

Text Editor

Timeline

Toast

Toggle

Toolbar

Tooltip

Touch Ripple

Typography