framework7/components/app/app-vars.less

Full featured mobile HTML framework for building iOS & Android apps

/*====================
  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-vars({
  --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-border-color: transparent;
  /*
  --f7-bars-link-color: var(--f7-theme-color);
  */

  .light-vars({
    --f7-glass-bg-color: rgba(255, 255, 255, 0.75);
    --f7-glass-shadow:
      inset -1px -1px 0px -0.5px rgba(255, 255, 255, 1),
      inset 1px 1px 0px -0.5px rgba(255, 255, 255, 1),
      inset 3px 3px 10px -3px #ddd,
      inset -3px -3px 10px -3px #ddd,
      inset 0 0 5px 1px #fff,
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.25),
      inset 0 0 24px 0 rgba(0, 0, 0, 0.1),
      0 0 25px 0 rgba(0, 0, 0, 0.2);
    --f7-glass-shadow-thumb:
      inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
      inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
      inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
      inset 3px 3px 10px -2px #eee,
      inset -3px -3px 10px -2px #eee,
      inset 0 0 5px 1px #fff;
    --f7-bars-text-color: #000;
    --f7-text-color: #000;
    --f7-bars-bg-color: #efeff4;

  });
  .dark-vars({
    --f7-glass-bg-color: rgba(50, 50, 50, 0.5);
    --f7-glass-shadow:
      inset -2px -2px 0.5px -2.5px rgba(255, 255, 255, 0.4),
      inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.4),
      inset 2px 2px 0.5px -2px #262626,
      inset -2px -2px 0.5px -2px #262626,
      inset 0 0 5px 1px #141414,
      inset 0 0 0 1px rgba(255, 255, 255, 0.15),
      inset 0 0 10px 0 rgba(255, 255, 255, 0.075),
      inset 0 0 24px 0 rgba(255, 255, 255, 0.05),
      0 0 25px 0 rgba(0, 0, 0, 0.15);
    --f7-glass-shadow-thumb:
      inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
      inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
      inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
      inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
      inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
      inset 0px -5px 0px -3.5px rgba(255, 255, 255, 0.25),
      inset 0px -5px 5px rgba(255, 255, 255, 0.25);
    --f7-bars-text-color: #fff;
    --f7-text-color: #fff;
    --f7-bars-bg-color: rgba(0,0,0,0.5);
  });
});
.md-vars({
  --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.5;
  --f7-bars-border-color: transparent;

  .light-vars({
    --f7-text-color: #212121;
  });
  .dark-vars({
    --f7-text-color: rgba(255,255,255,0.87);
  });
});
.md-color-vars({
  --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);
}