lbry-desktop/src/ui/scss/init/_vars.scss

// Both of these should probably die and become variables as well
$spacing-vertical: 2rem;
$spacing-width: 36px;

$medium-breakpoint: 1279px;
$large-breakpoint: 1921px;

:root {
  // Width & spacing
  --page-max-width: 1200px;
  --mobile: 600px;
  --side-nav-width: 170px;
  --font-size-subtext-multiple: 0.92;
  --spacing-miniscule: calc(2rem / 5);
  --spacing-tiny: calc(2rem / 4);
  --spacing-small: calc(2rem / 3);
  --spacing-medium: calc(2rem / 2);
  --spacing-large: 2rem;
  --spacing-xlarge: 3rem;
  --spacing-main-padding: var(--spacing-xlarge);
  --file-page-max-width: 1787px;
  --file-max-height: 788px;
  --file-max-width: 1400px;
  --video-aspect-ratio: 56.25%; // 9 x 16

  // Color
  --color-background: #270f34;

  // Text
  --text-max-width: 660px;
  --text-link-padding: 4px;

  // Tabs
  --tab-indicator-size: 0.5rem;
  --tab-header-size: 1.5rem; // Needs to be static so the animated styling always works

  // Input
  --input-border-size: 1px;
  --input-border-radius: 2px;

  // Select
  --select-height: 30px;

  // Button
  --button-radius: 2.6rem;
  --button-height: 2.6rem;

  // Header
  --header-height: 6rem;

  // Card
  --card-radius: 5px;
  --card-max-width: 1000px;
  --card-box-shadow: 0px 0px 30px 2px;

  // Modal
  --modal-width: 440px;

  // Animation :)
  --animation-duration: 0.2s;
  --animation-style: ease-in-out;

  // Image
  --thumbnail-preview-height: 100px;
  --thumbnail-preview-width: 177px;
  --cover-photo-height: 300px;
  --channel-thumbnail-width: 10rem;
  --file-list-thumbnail-width: 10rem;
}