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
  --side-nav-width: 180px;
  --font-size-subtext-multiple: 0.92;

  --spacing-vertical-miniscule: calc(2rem / 5);
  --spacing-vertical-tiny: calc(2rem / 4);
  --spacing-vertical-small: calc(2rem / 3);
  --spacing-vertical-medium: calc(2rem / 2);
  --spacing-vertical-large: 2rem;
  --spacing-vertical-xlarge: 3rem;

  --file-page-max-width: 1787px;
  --file-max-height: 788px;
  --file-max-width: 1400px;

  --video-aspect-ratio: 56.25%; // 9 x 16

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

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

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

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

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

  // Header -> search
  --search-modal-input-height: 70px;

  // Card
  --card-radius: 2px;
  --card-max-width: 1000px;

  // File
  --file-tile-media-height: 125px;
  --file-tile-media-width: calc(125px * (16 / 9));
  --file-tile-media-height-small: 60px;
  --file-tile-media-width-small: calc(60px * (16 / 9));
  --file-tile-media-height-large: 200px;
  --file-tile-media-width-large: calc(200px * (16 / 9));
  --file-page-min-width: 400px;
  --recommended-content-width: 300px;
  --recommended-content-width-medium: 400px;

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

  // Animation :)
  --animation-duration: 0.3s;
  --animation-style: cubic-bezier(0.55, 0, 0.1, 1);

  // Image
  --thumbnail-preview-height: 100px;
  --thumbnail-preview-width: 177px;
}