owncast/web/styles/variables.scss
2022-05-08 09:38:42 +02:00

96 lines
2.6 KiB
SCSS

@import url('../public/fonts/inter/inter.css');
// See theme.less for specific Ant Design overrides.
:root {
// old colors
--white: rgba(255, 255, 255, 1);
--white-15: rgba(255, 255, 255, 0.15);
--white-25: rgba(255, 255, 255, 0.25);
--white-35: rgba(255, 255, 255, 0.35);
--white-50: rgba(255, 255, 255, 0.5);
--white-75: rgba(255, 255, 255, 0.75);
--white-88: rgba(255, 255, 255, 0.88);
--black: rgba(0, 0, 0, 1);
--black-35: rgba(0, 0, 0, 0.35);
--black-50: rgba(0, 0, 0, 0.5);
--black-75: rgba(0, 0, 0, 0.75);
// New colors
--purple-100: #f4ebff;
--purple-300: #d6bbfb;
--purple-500: #9e77ed;
--purple-700: #6941c6;
--purple-900: #42307d;
--green-100: #d15ad5;
--green-300: #6ce9a6;
--green-500: #12b76a;
--green-700: #027a48;
--green-900: #054f31;
--red-100: #fee4e2;
--red-300: #fda29b;
--red-500: #f04438;
--red-700: #b42318;
--red-900: #7a271a;
--orange-100: #fef0c7;
--orange-300: #fec84b;
--orange-500: #f79009;
--orange-700: #b54708;
--orange-900: #93370d;
--gray-100: #f2f4f7;
--gray-300: #d0d5dd;
--gray-500: #667085;
--gray-700: #344054;
--gray-900: #101828;
// owncast logo color family
--owncast-purple: rgba(120, 113, 255, 1);
--purple-dark: rgba(28, 26, 59, 1); // #1c1a3b;
--pink: rgba(201, 139, 254, 1); // #D18BFE;
--blue: rgba(32, 134, 225, 1); // #2086E1;
// owncast purple variations
--owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5);
--gray-light: rgba(168, 175, 197, 1);
--gray-medium: rgba(102, 107, 120, 1);
--gray: rgba(51, 53, 60, 1);
--gray-dark: rgba(23, 24, 27, 1); // #17181b;
--online-color: #73dd3f;
--offline-color: #999;
// ////////////////////////////////
--default-text-color: var(--white-88);
--default-bg-color: var(--black);
--default-link-color: var(--owncast-purple);
--container-bg-color: var(--gray-dark);
--container-bg-color-alt: var(--purple-dark);
--container-border-radius: 4px;
--code-color: #9cdcfe;
--code-bg-color: var(--owncast-purple-25);
--nav-bg-color: var(--gray-dark);
--nav-text: #aaa;
--nav-selected-text: var(--pink); //#cd7cff;
--button-focused: var(--owncast-purple-50);
--textfield-border: var(--white-25);
--textfield-bg: var(--black);
//
--popover-base-color: var(--gray);
--tooltip-base-color: var(--gray-medium);
--font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}