decentraland-ui/src/themes/base-theme.css

Decentraland's UI components and styles

:root {
  /* sizes */
  --navbar-height: 64px;
  --navbar-margin-bottom: 44px;
  --footer-height: 56px;
  --footer-margin-top: 96px;
  --tabs-height: 65px;
  --tabs-margin-bottom: 24px;

  /* z-indexes */
  --z-index-navbar: 1000;

  /* fonts */
  --font-family: system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-monospace: 'Inconsolata', 'Consolas', 'Droid Sans Mono', 'Monaco',
    'Courier New', monospace;

  /* colors */
  --neon-blue: #00d3ff;
  --summer-red: #ff2d55;
  --void: #16141a;
  --luisxvi-violet: #a524b3;
  --idontfeelthatwell: #f3f2f5;
  --shadows: #242129;
  --night-time: #691fa9;
  --bluish-steel: #676370;
  --innocence: #ffffff;
  --candy-purple: #c640cd;
  --sunish: #ffbc5b;
  --millenial-orange: #fc9965;
  --oj-not-simpson: #ff7439;
  --dark: #18141a;

  /* raw colors */
  --neon-blue-raw: 0, 211, 255;
  --summer-red-raw: 255, 45, 85;
  --void-raw: 22, 20, 26;
  --luisxvi-violet-raw: 165, 36, 179;
  --idontfeelthatwell-raw: 243, 242, 245;
  --shadows-raw: 36, 33, 41;
  --night-time-raw: 105, 31, 169;
  --bluish-steel-raw: 103, 99, 112;
  --innocence-raw: 255, 255, 255;
  --candy-purple-raw: 198, 64, 205;
  --sunish-raw: 255, 188, 91;
  --millenial-orange-raw: 252, 153, 101;
  --oj-not-simpson-raw: 255, 116, 57;
  --dark-raw: 24, 20, 26;

  /* Rarity colors */
  --common: #73d3d3;
  --uncommon: #ff8362;
  --rare: #34ce76;
  --epic: #438fff;
  --legendary: #a14bf3;
  --mythic: #ff4bed;
  --unique: #fea217;

  /* Raw rarity colors */
  --common-raw: 115, 211, 211;
  --uncommon-raw: 255, 131, 98;
  --rare-raw: 52, 206, 118;
  --epic-raw: 67, 143, 255;
  --legendary-raw: 161, 75, 243;
  --mythic-raw: 255, 75, 237;
  --unique-raw: 254, 162, 23;
}

body {
  font-family: var(--font-family);
  background: var(--background);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
  color: var(--text);
}

p {
  color: var(--text);
}

a {
  color: var(--primary);
  font-weight: 500;
}
a:hover {
  color: var(--primary);
}

.text {
  color: var(--text);
}

.secondary-text {
  color: var(--secondary-text);
}

.danger-text {
  color: var(--danger);
}

.error-text {
  color: var(--error);
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 56px;
    --footer-margin-top: 48px;
  }
}