lbry-desktop/ui/scss/_vars.scss

@import "global";

:root {

  /* Colors */
  --color-brand: #155B4A;
  --color-primary: #155B4A;
  --color-primary-light: saturate(lighten(#155B4A, 50%), 20%);
  --color-light-alt: hsl(hue(#155B4A), 15, 85);
  --color-dark-overlay: rgba(32,32,32,0.9);
  --color-help: rgba(0,0,0,.6);
  --color-notice: #8a6d3b;
  --color-error: #a94442;
  --color-load-screen-text: #c3c3c3;
  --color-money: #216C2A;
  --color-meta-light: #505050;
  --color-canvas: #f5f5f5;
  --color-bg: #ffffff;
  --color-bg-alt: #D9D9D9;

  /* Font */
  --font-size: 16px;
  --font-line-height: 1.3333;
  --font-size-subtext-multiple: 0.82;

  /* Shadows */
  --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);

  /* Misc */
  --content-max-width: 1000px;
  --nsfw-blur-intensity: 20px;
  --height-video-embedded: $width-page-constrained * 9 / 16 ;

  /* Transitions */
  --transition-duration: .225s;
  --transition-type: ease;

  /* Text */
  --text-color: #000;
  --text-max-width: 660px;
  --text-link-padding: 4px;

  /* Input */
  --input-width: 330px;

  /* Button */
  --button-primary-bg: var(--color-primary);
  --button-primary-color: #FFF;
  --button-padding: 12px;
  --button-height: $spacing-vertical * 1.5;

  /* Header */
  --header-bg: var(--color-bg);
  --header-color: #666;
  --header-height: $spacing-vertical * 2.5;
  --header-shadow: var(--box-shadow-layer);

  /* Window */
  --window-bg: var(--color-canvas);

  /* Card */
  --card-bg: var(--color-bg);
  --card-hover-translate: 10px;
  --card-margin: $spacing-vertical * 2/3;
  --card-max-width: $width-page-constrained;
  --card-padding: $spacing-vertical * 2/3;
  --card-radius: 2px;
  --card-link-scaling: 1.1;
  --card-shadow: var(--box-shadow-layer);
  --card-small-width: $spacing-vertical * 10;

  /* Tooltip */
  --tooltip-body-width: 300px;
  --tooltip-bg: var(--color-bg);
  --tooltip-color: var(--text-color);
  --tooltip-shadow: var(--box-shadow-layer);
}