infima/styles/common/variables.css

A UI framework for content-centric websites.

:root {
  // Colors.
  --ifm-dark-value: 10%;
  --ifm-darker-value: 15%;
  --ifm-darkest-value: 30%;
  --ifm-light-value: 15%;
  --ifm-lighter-value: 30%;
  --ifm-lightest-value: 50%;

  // Colors.
  --ifm-color-primary: #3578e5;
  --ifm-color-primary-dark: color-mod(
    var(--ifm-color-primary) shade(var(--ifm-dark-value))
  );
  --ifm-color-primary-darker: color-mod(
    var(--ifm-color-primary),
    shade(var(--ifm-darker-value))
  );
  --ifm-color-primary-darkest: color-mod(
    var(--ifm-color-primary),
    shade(var(--ifm-darkest-value))
  );
  --ifm-color-primary-light: color-mod(
    var(--ifm-color-primary),
    tint(var(--ifm-light-value))
  );
  --ifm-color-primary-lighter: color-mod(
    var(--ifm-color-primary),
    tint(var(--ifm-lighter-value))
  );
  --ifm-color-primary-lightest: color-mod(
    var(--ifm-color-primary),
    tint(var(--ifm-lightest-value))
  );

  --ifm-color-secondary: #ebedf0;
  --ifm-color-secondary-dark: color-mod(
    var(--ifm-color-secondary),
    shade(var(--ifm-dark-value))
  );
  --ifm-color-secondary-darker: color-mod(
    var(--ifm-color-secondary),
    shade(var(--ifm-darker-value))
  );
  --ifm-color-secondary-darkest: color-mod(
    var(--ifm-color-secondary),
    shade(var(--ifm-darkest-value))
  );
  --ifm-color-secondary-light: color-mod(
    var(--ifm-color-secondary),
    tint(var(--ifm-light-value))
  );
  --ifm-color-secondary-lighter: color-mod(
    var(--ifm-color-secondary),
    tint(var(--ifm-lighter-value))
  );
  --ifm-color-secondary-lightest: color-mod(
    var(--ifm-color-secondary),
    tint(var(--ifm-lightest-value))
  );

  --ifm-color-success: #00a400;
  --ifm-color-success-dark: color-mod(
    var(--ifm-color-success),
    shade(var(--ifm-dark-value))
  );
  --ifm-color-success-darker: color-mod(
    var(--ifm-color-success),
    shade(var(--ifm-darker-value))
  );
  --ifm-color-success-darkest: color-mod(
    var(--ifm-color-success),
    shade(var(--ifm-darkest-value))
  );
  --ifm-color-success-light: color-mod(
    var(--ifm-color-success),
    tint(var(--ifm-light-value))
  );
  --ifm-color-success-lighter: color-mod(
    var(--ifm-color-success),
    tint(var(--ifm-lighter-value))
  );
  --ifm-color-success-lightest: color-mod(
    var(--ifm-color-success),
    tint(var(--ifm-lightest-value))
  );

  --ifm-color-info: #54c7ec;
  --ifm-color-info-dark: color-mod(
    var(--ifm-color-info),
    shade(var(--ifm-dark-value))
  );
  --ifm-color-info-darker: color-mod(
    var(--ifm-color-info),
    shade(var(--ifm-darker-value))
  );
  --ifm-color-info-darkest: color-mod(
    var(--ifm-color-info),
    shade(var(--ifm-darkest-value))
  );
  --ifm-color-info-light: color-mod(
    var(--ifm-color-info),
    tint(var(--ifm-light-value))
  );
  --ifm-color-info-lighter: color-mod(
    var(--ifm-color-info),
    tint(var(--ifm-lighter-value))
  );
  --ifm-color-info-lightest: color-mod(
    var(--ifm-color-info),
    tint(var(--ifm-lightest-value))
  );

  --ifm-color-warning: #ffba00;
  --ifm-color-warning-dark: color-mod(
    var(--ifm-color-warning),
    shade(var(--ifm-dark-value))
  );
  --ifm-color-warning-darker: color-mod(
    var(--ifm-color-warning),
    shade(var(--ifm-darker-value))
  );
  --ifm-color-warning-darkest: color-mod(
    var(--ifm-color-warning),
    shade(var(--ifm-darkest-value))
  );
  --ifm-color-warning-light: color-mod(
    var(--ifm-color-warning),
    tint(var(--ifm-light-value))
  );
  --ifm-color-warning-lighter: color-mod(
    var(--ifm-color-warning),
    tint(var(--ifm-lighter-value))
  );
  --ifm-color-warning-lightest: color-mod(
    var(--ifm-color-warning),
    tint(var(--ifm-lightest-value))
  );

  --ifm-color-danger: #fa383e;
  --ifm-color-danger-dark: color-mod(
    var(--ifm-color-danger),
    shade(var(--ifm-dark-value))
  );
  --ifm-color-danger-darker: color-mod(
    var(--ifm-color-danger),
    shade(var(--ifm-darker-value))
  );
  --ifm-color-danger-darkest: color-mod(
    var(--ifm-color-danger),
    shade(var(--ifm-darkest-value))
  );
  --ifm-color-danger-light: color-mod(
    var(--ifm-color-danger),
    tint(var(--ifm-light-value))
  );
  --ifm-color-danger-lighter: color-mod(
    var(--ifm-color-danger),
    tint(var(--ifm-lighter-value))
  );
  --ifm-color-danger-lightest: color-mod(
    var(--ifm-color-danger),
    tint(var(--ifm-lightest-value))
  );

  --ifm-color-white: #fff;
  --ifm-color-black: #000;

  --ifm-color-gray-0: var(--ifm-color-white);
  --ifm-color-gray-100: #f5f6f7;
  --ifm-color-gray-200: #ebedf0;
  --ifm-color-gray-300: #dadde1;
  --ifm-color-gray-400: #ccd0d5;
  --ifm-color-gray-500: #bec3c9;
  --ifm-color-gray-600: #8d949e;
  --ifm-color-gray-700: #606770;
  --ifm-color-gray-800: #444950;
  --ifm-color-gray-900: #1c1e21;
  --ifm-color-gray-1000: var(--ifm-color-black);

  --ifm-color-emphasis-0: var(--ifm-color-gray-0);
  --ifm-color-emphasis-100: var(--ifm-color-gray-100);
  --ifm-color-emphasis-200: var(--ifm-color-gray-200);
  --ifm-color-emphasis-300: var(--ifm-color-gray-300);
  --ifm-color-emphasis-400: var(--ifm-color-gray-400);
  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
  --ifm-color-emphasis-600: var(--ifm-color-gray-600);
  --ifm-color-emphasis-700: var(--ifm-color-gray-700);
  --ifm-color-emphasis-800: var(--ifm-color-gray-800);
  --ifm-color-emphasis-900: var(--ifm-color-gray-900);
  --ifm-color-emphasis-1000: var(--ifm-color-gray-1000);

  // Base.
  --ifm-color-content: var(--ifm-color-emphasis-900);
  --ifm-color-content-inverse: var(--ifm-color-emphasis-0);
  --ifm-color-content-secondary: #606770;

  --ifm-background-color: transparent; // Body's background.
  --ifm-background-surface-color: var(--ifm-color-content-inverse);
  --ifm-global-border-width: 1px;
  --ifm-global-radius: 0.4rem;

  --ifm-hover-overlay: rgba(0, 0, 0, 0.05);

  // Typography.
  --ifm-font-color-base: var(--ifm-color-content);
  --ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
  --ifm-font-color-secondary: var(--ifm-color-content-secondary);
  --ifm-font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  --ifm-font-size-base: 16px;

  --ifm-font-weight-light: 300;
  --ifm-font-weight-normal: 400;
  --ifm-font-weight-semibold: 500;
  --ifm-font-weight-bold: 700;

  --ifm-font-weight-base: var(--ifm-font-weight-normal);
  --ifm-line-height-base: 1.65;

  // Spacing.
  --ifm-global-spacing: 1rem;
  --ifm-spacing-vertical: var(--ifm-global-spacing);
  --ifm-spacing-horizontal: var(--ifm-global-spacing);

  // Transitions.
  --ifm-transition-fast: 200ms;
  --ifm-transition-slow: 400ms;

  // Shadows.
  --ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --ifm-global-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2);
  --ifm-global-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 0 rgba(0, 0, 0, 0.1);

  // Z-index.
  --ifm-z-index-dropdown: 100;
  --ifm-z-index-fixed: 200;
  --ifm-z-index-overlay: 400;
}

@custom-media --ifm-narrow-window (max-width: 996px);