mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-30 12:05:39 -05:00
80 lines
2.5 KiB
CSS
80 lines
2.5 KiB
CSS
:root {
|
|
--theme-color: #0a0a23;
|
|
--yellow-gold: #ffbf00;
|
|
--gray-00: #ffffff;
|
|
--gray-05: #f5f6f7;
|
|
--gray-10: #dfdfe2;
|
|
--gray-15: #d0d0d5;
|
|
--gray-45: #858591;
|
|
--gray-75: #3b3b4f;
|
|
--gray-80: #2a2a40;
|
|
--gray-85: #1b1b32;
|
|
--gray-90: #0a0a23;
|
|
--purple-light: #dbb8ff;
|
|
--purple-dark: #5a01a7;
|
|
--yellow-light: #ffc300;
|
|
--yellow-dark: #4d3800;
|
|
--blue-light: rgb(153, 201, 255);
|
|
--blue-light-translucent: rgba(153, 201, 255, 0.3);
|
|
--blue-dark: rgb(0, 46, 173);
|
|
--blue-dark-translucent: rgba(0, 46, 173, 0.3);
|
|
--green-light: #acd157;
|
|
--blue-mid: #198eee;
|
|
--purple-mid: #9400d3;
|
|
--green-dark: #00471b;
|
|
--red-light: #ffadad;
|
|
--red-dark: #850000;
|
|
--love-light: #f8577c;
|
|
--love-dark: #f82153;
|
|
--editor-background-light: #fffffe;
|
|
--editor-background-dark: #2a2b40;
|
|
--focus-outline-color: var(--blue-mid);
|
|
--font-family-sans-serif: 'Lato', sans-serif;
|
|
--font-family-monospace: 'Hack-ZeroSlash', monospace;
|
|
--header-element-size: 30px;
|
|
--header-sub-element-size: 45px;
|
|
--header-height: 56px;
|
|
--breadcrumbs-height: 44px;
|
|
--z-index-site-header: 200;
|
|
}
|
|
|
|
.dark-palette {
|
|
--primary-color: var(--gray-00);
|
|
--secondary-color: var(--gray-05);
|
|
--tertiary-color: var(--gray-10);
|
|
--quaternary-color: var(--gray-15);
|
|
--quaternary-background: var(--gray-75);
|
|
--tertiary-background: var(--gray-80);
|
|
--secondary-background: var(--gray-85);
|
|
--primary-background: var(--gray-90);
|
|
--highlight-color: var(--blue-light);
|
|
--highlight-background: var(--blue-dark);
|
|
--selection-color: var(--blue-light-translucent);
|
|
--success-color: var(--green-light);
|
|
--success-background: var(--green-dark);
|
|
--danger-color: var(--red-light);
|
|
--danger-background: var(--red-dark);
|
|
--love-color: var(--love-light);
|
|
--editor-background: var(--editor-background-dark);
|
|
}
|
|
|
|
.light-palette {
|
|
--primary-color: var(--gray-90);
|
|
--secondary-color: var(--gray-85);
|
|
--tertiary-color: var(--gray-80);
|
|
--quaternary-color: var(--gray-75);
|
|
--quaternary-background: var(--gray-15);
|
|
--tertiary-background: var(--gray-10);
|
|
--secondary-background: var(--gray-05);
|
|
--primary-background: var(--gray-00);
|
|
--highlight-color: var(--blue-dark);
|
|
--highlight-background: var(--blue-light);
|
|
--selection-color: var(--blue-dark-translucent);
|
|
--success-color: var(--green-dark);
|
|
--success-background: var(--green-light);
|
|
--danger-color: var(--red-dark);
|
|
--danger-background: var(--red-light);
|
|
--love-color: var(--love-dark);
|
|
--editor-background: var(--editor-background-light);
|
|
}
|