decentraland-ui
Version:
Decentraland's UI components and styles
120 lines (104 loc) • 2.31 kB
CSS
: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;
}
}