lbry-desktop/ui/scss/_vars.scss

/*
Both of these should probably die and become variables as well
 */
$spacing-vertical: 24px;
$width-page-constrained: 800px;
$text-color: #000;

: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-meta-light: #505050;
  --color-money: #216C2A;
  --color-download: #444;
  --color-canvas: #f5f5f5;
  --color-bg: #ffffff;
  --color-bg-alt: #D9D9D9;


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

  /* 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);

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

  /* Text */
  --text-color: $text-color;
  --text-help-color: #EEE;
  --text-max-width: 660px;
  --text-link-padding: 4px;
  --text-selection-bg: rgba(saturate(lighten(#155B4A, 20%), 20%), 1); // temp color
  --text-selection-color: #FFF;

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

  /* Input */
  --input-bg: transparent;
  --input-active-bg: transparent;
  --input-width: 330px;
  --input-color: var(--text-color);
  --input-border-size: 2px;
  --input-border-color: rgba(0,0,0,.25);

  /* Select */
  --select-bg: var(--color-bg-alt);
  --select-color: var(--text-color);

  /* Button */
  --button-bg: var(--color-bg-alt);
  --button-color: #FFF;
  --button-primary-bg: var(--color-primary);
  --button-primary-color: #FFF;
  --button-padding: $spacing-vertical * 2/3;
  --button-height: $spacing-vertical * 1.5;
  --button-intra-margin: $spacing-vertical;

  /* Header */
  --header-bg: var(--color-bg);
  --header-color: #666;
  --header-active-color: rgba(0,0,0, 0.85);
  --header-height: $spacing-vertical * 2.5;
  --header-button-bg: var(--button-bg);

  /* Header -> search */
  --search-bg: rgba(255, 255, 255, 0.7);
  --search-border:1px solid #ccc;
  --search-color: #666;
  --search-active-color: var(--header-active-color);

  /* Tabs */
  --tab-bg: transparent;
  --tab-color: rgba(0, 0, 0, 0.5);
  --tab-active-color: var(--color-primary);
  --tab-border-size: 2px;
  --tab-border: var(--tab-border-size) solid var(--tab-active-color);

  /* Table */
  --table-border: 1px solid #e2e2e2;
  --table-item-even: white;
  --table-item-odd: #f4f4f4;

  /* 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-small-width: $spacing-vertical * 10;

  /* Modal */
  --modal-bg: var(--color-bg);
  --modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5
  --modal-border: 1px solid rgb(204, 204, 204);

  /* Menu */
  --menu-bg: var(--color-bg);
  --menu-radius: 2px;
  --menu-item-hover-bg: var(--color-bg-alt);

  /* Tooltip */
  --tooltip-width: 300px;
  --tooltip-bg: var(--color-bg);
  --tooltip-color: var(--text-color);
  --tooltip-border: 1px solid #aaa;

  /* Scrollbar */
  --scrollbar-radius: 10px;
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.20);
  --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35);
  --scrollbar-thumb-active-bg: var(--color-primary);
  --scrollbar-track-bg: transparent;

  /* Media */
  --media-bg: #FFF;

  /* Divider */
  --divider: 1px solid rgba(0, 0, 0, 0.12);
}