819 lines
40 KiB
CSS
819 lines
40 KiB
CSS
:root {
|
|
--border-width-default: 1px;
|
|
--border-width-input: 2px;
|
|
--border-width-input-overlay-unfocused: 1px;
|
|
--border-width-marked: 3px;
|
|
--border-width-spinner: 2px;
|
|
--border-width-tag: 2px;
|
|
--border-radius-none: 0;
|
|
--border-radius-small: 0.2rem;
|
|
--border-radius-medium: 0.4rem;
|
|
--border-radius-large: 0.6rem;
|
|
--border-radius-extra-large: 1rem;
|
|
--border-radius-extra-extra-large: 1.6rem;
|
|
--border-radius-rounded: 9000px;
|
|
--break-xs: 480px;
|
|
--break-sm: 768px;
|
|
--break-md: 1024px;
|
|
--break-lg: 1200px;
|
|
--break-xl: 1440px;
|
|
--break-xxl: 1600px;
|
|
--color-brand-muted-ice: #d6e4ff;
|
|
--color-brand-muted-cupcake: #ffa3ee;
|
|
--color-brand-muted-mint: #5cffbe;
|
|
--color-brand-muted-sky: #7aa7ff;
|
|
--color-brand-muted-blush: #ffcdcc;
|
|
--color-brand-muted-canary: #ebeb00;
|
|
--color-brand-muted-smoke: #d3d3d9;
|
|
--color-brand-muted-lavender: #d1b3ff;
|
|
--color-brand-muted-mustard: #ffd37a;
|
|
--color-brand-muted-emerald: #00f593;
|
|
--color-brand-muted-coral: #ff8280;
|
|
--color-brand-muted-ocean: #1345aa;
|
|
--color-brand-accent-grape: #5c16c5;
|
|
--color-brand-accent-dragonfruit: #ff38db;
|
|
--color-brand-accent-carrot: #e69900;
|
|
--color-brand-accent-sun: #ebeb00;
|
|
--color-brand-accent-lime: #00f593;
|
|
--color-brand-accent-turquoise: #00f0f0;
|
|
--color-brand-accent-eggplant: #451093;
|
|
--color-brand-accent-wine: #ae1392;
|
|
--color-brand-accent-slime: #00f593;
|
|
--color-brand-accent-seafoam: #5cffbe;
|
|
--color-brand-accent-cherry: #eb0400;
|
|
--color-brand-accent-marine: #1f69ff;
|
|
--color-brand-accent-seaweed: #00a3a3;
|
|
--color-brand-accent-pebble: #848494;
|
|
--color-brand-accent-moon: #efeff1;
|
|
--color-brand-accent-fiji: #5cffbe;
|
|
--color-brand-accent-blueberry: #1f69ff;
|
|
--color-brand-accent-arctic: #00f0f0;
|
|
--color-brand-accent-highlighter: #f5f500;
|
|
--color-brand-accent-flamingo: #ff38db;
|
|
--color-brand-accent-ruby: #eb0400;
|
|
--color-brand-accent-punch: #ffcdcc;
|
|
--color-brand-accent-creamsicle: #ffd37a;
|
|
--color-white: #fff;
|
|
--color-black: #000;
|
|
--color-red: #e91916;
|
|
--color-red-darker: #bb1411;
|
|
--color-orange: #ffd37a;
|
|
--color-yellow: #ffd37a;
|
|
--color-green: #00f593;
|
|
--color-green-darker: #00ad96;
|
|
--color-blue: #1f69ff;
|
|
--color-prime-blue: #0e9bd8;
|
|
--color-magenta: #c53dff;
|
|
--color-error: #eb0400;
|
|
--color-warn: #ffd37a;
|
|
--color-success: #00f593;
|
|
--color-info: #1f69ff;
|
|
--color-accent: #9147ff;
|
|
--color-twitch-purple: #9147ff;
|
|
--color-twitch-purple-1: #040109;
|
|
--color-twitch-purple-2: #0d031c;
|
|
--color-twitch-purple-3: #15052e;
|
|
--color-twitch-purple-4: #24094e;
|
|
--color-twitch-purple-5: #330c6e;
|
|
--color-twitch-purple-6: #451093;
|
|
--color-twitch-purple-7: #5c16c5;
|
|
--color-twitch-purple-8: #772ce8;
|
|
--color-twitch-purple-9: #9147ff;
|
|
--color-twitch-purple-10: #a970ff;
|
|
--color-twitch-purple-11: #bf94ff;
|
|
--color-twitch-purple-12: #d1b3ff;
|
|
--color-twitch-purple-13: #e3d1ff;
|
|
--color-twitch-purple-14: #ede0ff;
|
|
--color-twitch-purple-15: #f3ebff;
|
|
--color-hinted-grey-1: #0e0e10;
|
|
--color-hinted-grey-2: #18181b;
|
|
--color-hinted-grey-3: #1f1f23;
|
|
--color-hinted-grey-4: #26262c;
|
|
--color-hinted-grey-5: #323239;
|
|
--color-hinted-grey-6: #3b3b44;
|
|
--color-hinted-grey-7: #53535f;
|
|
--color-hinted-grey-8: #848494;
|
|
--color-hinted-grey-9: #adadb8;
|
|
--color-hinted-grey-10: #c8c8d0;
|
|
--color-hinted-grey-11: #d3d3d9;
|
|
--color-hinted-grey-12: #dedee3;
|
|
--color-hinted-grey-13: #e6e6ea;
|
|
--color-hinted-grey-14: #efeff1;
|
|
--color-hinted-grey-15: #f7f7f8;
|
|
--color-transparent: transparent;
|
|
--color-opac-b-1: rgba(0,0,0,.05);
|
|
--color-opac-b-2: rgba(0,0,0,.1);
|
|
--color-opac-b-3: rgba(0,0,0,.15);
|
|
--color-opac-b-4: rgba(0,0,0,.2);
|
|
--color-opac-b-5: rgba(0,0,0,.25);
|
|
--color-opac-b-6: rgba(0,0,0,.3);
|
|
--color-opac-b-7: rgba(0,0,0,.4);
|
|
--color-opac-b-8: rgba(0,0,0,.5);
|
|
--color-opac-b-9: rgba(0,0,0,.6);
|
|
--color-opac-b-10: rgba(0,0,0,.7);
|
|
--color-opac-b-11: rgba(0,0,0,.75);
|
|
--color-opac-b-12: rgba(0,0,0,.8);
|
|
--color-opac-b-13: rgba(0,0,0,.85);
|
|
--color-opac-b-14: rgba(0,0,0,.9);
|
|
--color-opac-b-15: rgba(0,0,0,.95);
|
|
--color-opac-w-1: hsla(0,0%,100%,.05);
|
|
--color-opac-w-2: hsla(0,0%,100%,.1);
|
|
--color-opac-w-3: hsla(0,0%,100%,.15);
|
|
--color-opac-w-4: hsla(0,0%,100%,.2);
|
|
--color-opac-w-5: hsla(0,0%,100%,.25);
|
|
--color-opac-w-6: hsla(0,0%,100%,.3);
|
|
--color-opac-w-7: hsla(0,0%,100%,.4);
|
|
--color-opac-w-8: hsla(0,0%,100%,.5);
|
|
--color-opac-w-9: hsla(0,0%,100%,.6);
|
|
--color-opac-w-10: hsla(0,0%,100%,.7);
|
|
--color-opac-w-11: hsla(0,0%,100%,.75);
|
|
--color-opac-w-12: hsla(0,0%,100%,.8);
|
|
--color-opac-w-13: hsla(0,0%,100%,.85);
|
|
--color-opac-w-14: hsla(0,0%,100%,.9);
|
|
--color-opac-w-15: hsla(0,0%,100%,.95);
|
|
--color-opac-p-1: rgba(92,22,197,.05);
|
|
--color-opac-p-2: rgba(92,22,197,.1);
|
|
--color-opac-p-3: rgba(92,22,197,.15);
|
|
--color-opac-p-4: rgba(92,22,197,.2);
|
|
--color-opac-p-5: rgba(92,22,197,.25);
|
|
--color-opac-p-6: rgba(92,22,197,.3);
|
|
--color-opac-p-7: rgba(92,22,197,.4);
|
|
--color-opac-p-8: rgba(92,22,197,.5);
|
|
--color-opac-p-9: rgba(92,22,197,.6);
|
|
--color-opac-p-10: rgba(92,22,197,.7);
|
|
--color-opac-p-11: rgba(92,22,197,.75);
|
|
--color-opac-p-12: rgba(92,22,197,.8);
|
|
--color-opac-p-13: rgba(92,22,197,.85);
|
|
--color-opac-p-14: rgba(92,22,197,.9);
|
|
--color-opac-p-15: rgba(92,22,197,.95);
|
|
--color-orange-1: #050301;
|
|
--color-orange-2: #090601;
|
|
--color-orange-3: #120d02;
|
|
--color-orange-4: #251a04;
|
|
--color-orange-5: #372706;
|
|
--color-orange-6: #453008;
|
|
--color-orange-7: #65470b;
|
|
--color-orange-8: #7c570e;
|
|
--color-orange-9: #9e6900;
|
|
--color-orange-10: #c28100;
|
|
--color-orange-11: #e69900;
|
|
--color-orange-12: #ffb31a;
|
|
--color-orange-13: #ffd37a;
|
|
--color-orange-14: #ffdf9e;
|
|
--color-orange-15: #ffebc2;
|
|
--color-yellow-1: #050501;
|
|
--color-yellow-2: #090901;
|
|
--color-yellow-3: #0e0e02;
|
|
--color-yellow-4: #1c1c03;
|
|
--color-yellow-5: #292905;
|
|
--color-yellow-6: #373706;
|
|
--color-yellow-7: #4e4e09;
|
|
--color-yellow-8: #60600b;
|
|
--color-yellow-9: #7a7a00;
|
|
--color-yellow-10: #949400;
|
|
--color-yellow-11: #adad00;
|
|
--color-yellow-12: #c7c700;
|
|
--color-yellow-13: #e0e000;
|
|
--color-yellow-14: #ebeb00;
|
|
--color-yellow-15: #f5f500;
|
|
--color-green-1: #010503;
|
|
--color-green-2: #010906;
|
|
--color-green-3: #02120c;
|
|
--color-green-4: #042015;
|
|
--color-green-5: #063221;
|
|
--color-green-6: #074029;
|
|
--color-green-7: #0a5738;
|
|
--color-green-8: #016b40;
|
|
--color-green-9: #018852;
|
|
--color-green-10: #00a865;
|
|
--color-green-11: #00c274;
|
|
--color-green-12: #00db84;
|
|
--color-green-13: #00f593;
|
|
--color-green-14: #5cffbe;
|
|
--color-green-15: #a8ffdc;
|
|
--color-cyan-1: #010505;
|
|
--color-cyan-2: #010909;
|
|
--color-cyan-3: #021212;
|
|
--color-cyan-4: #042020;
|
|
--color-cyan-5: #052e2e;
|
|
--color-cyan-6: #073c3c;
|
|
--color-cyan-7: #095353;
|
|
--color-cyan-8: #0c6a6a;
|
|
--color-cyan-9: #018383;
|
|
--color-cyan-10: #00a3a3;
|
|
--color-cyan-11: #00b8b8;
|
|
--color-cyan-12: #00d6d6;
|
|
--color-cyan-13: #00f0f0;
|
|
--color-cyan-14: #2effff;
|
|
--color-cyan-15: #94ffff;
|
|
--color-blue-1: #010205;
|
|
--color-blue-2: #020712;
|
|
--color-blue-3: #040d20;
|
|
--color-blue-4: #071a40;
|
|
--color-blue-5: #0a255c;
|
|
--color-blue-6: #0d3177;
|
|
--color-blue-7: #1345aa;
|
|
--color-blue-8: #1756d3;
|
|
--color-blue-9: #1f69ff;
|
|
--color-blue-10: #528bff;
|
|
--color-blue-11: #7aa7ff;
|
|
--color-blue-12: #a3c2ff;
|
|
--color-blue-13: #c7daff;
|
|
--color-blue-14: #d6e4ff;
|
|
--color-blue-15: #e5eeff;
|
|
--color-magenta-1: #050104;
|
|
--color-magenta-2: #12020f;
|
|
--color-magenta-3: #20041b;
|
|
--color-magenta-4: #37062e;
|
|
--color-magenta-5: #4e0941;
|
|
--color-magenta-6: #650b55;
|
|
--color-magenta-7: #8a0f73;
|
|
--color-magenta-8: #ae1392;
|
|
--color-magenta-9: #c516a5;
|
|
--color-magenta-10: #ff38db;
|
|
--color-magenta-11: #ff75e6;
|
|
--color-magenta-12: #ffa3ee;
|
|
--color-magenta-13: #ffc7f5;
|
|
--color-magenta-14: #ffd6f8;
|
|
--color-magenta-15: #ffe5fa;
|
|
--color-red-1: #050101;
|
|
--color-red-2: #120202;
|
|
--color-red-3: #200404;
|
|
--color-red-4: #3c0807;
|
|
--color-red-5: #530a09;
|
|
--color-red-6: #6e0e0c;
|
|
--color-red-7: #971311;
|
|
--color-red-8: #bb1411;
|
|
--color-red-9: #eb0400;
|
|
--color-red-10: #ff4f4d;
|
|
--color-red-11: #ff8280;
|
|
--color-red-12: #ffaaa8;
|
|
--color-red-13: #ffcdcc;
|
|
--color-red-14: #ffdcdb;
|
|
--color-red-15: #ffe6e5;
|
|
--color-twitter: #1da1f2;
|
|
--color-facebook: #3b5998;
|
|
--color-reddit: #ff4500;
|
|
--color-snapchat: #fffc00;
|
|
--color-instagram: #405de6;
|
|
--color-youtube: #cd201f;
|
|
--color-paypal: #009cde;
|
|
--color-paypal-blue: #009cde;
|
|
--color-paypal-yellow: #fcc439;
|
|
--color-vk: #45668e;
|
|
--color-amazon: #fad677;
|
|
--button-size-small: 2.4rem;
|
|
--button-size-default: 3rem;
|
|
--button-size-large: 3.6rem;
|
|
--button-text-small: 1.2rem;
|
|
--button-text-default: 1.3rem;
|
|
--button-text-large: 1.4rem;
|
|
--button-padding-x: 1rem;
|
|
--button-padding-y: 0.5rem;
|
|
--input-text-small: 1.2rem;
|
|
--input-text-default: 1.3rem;
|
|
--input-text-large: 1.4rem;
|
|
--input-size-small: 2.4rem;
|
|
--input-size-default: 3rem;
|
|
--input-size-large: 3.6rem;
|
|
--font-base: "Inter","Roobert","Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
--font-display: "Roobert","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
--font-mono: monospace;
|
|
--font-size-1: 5.4rem;
|
|
--font-size-2: 3.6rem;
|
|
--font-size-3: 2.4rem;
|
|
--font-size-4: 1.8rem;
|
|
--font-size-5: 1.4rem;
|
|
--font-size-6: 1.3rem;
|
|
--font-size-7: 1.2rem;
|
|
--font-size-8: 1.2rem;
|
|
--font-size-base: 1.3rem;
|
|
--font-weight-normal: 400;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-weight-hdr: 400;
|
|
--line-height-body: 1.5;
|
|
--line-height-heading: 1.2;
|
|
--base-rem-unit: 10;
|
|
--grid-columns: 12;
|
|
--grid-gutter-width: 1.5rem;
|
|
--grid-gutter-width-lg: 2rem;
|
|
--grid-gutter-width-sm: 1rem;
|
|
--grid-gutter-width-xs: 0.5rem;
|
|
--opac-1: 0.05;
|
|
--opac-2: 0.1;
|
|
--opac-3: 0.15;
|
|
--opac-4: 0.2;
|
|
--opac-5: 0.25;
|
|
--opac-6: 0.3;
|
|
--opac-7: 0.4;
|
|
--opac-8: 0.5;
|
|
--opac-9: 0.6;
|
|
--opac-10: 0.7;
|
|
--opac-11: 0.75;
|
|
--opac-12: 0.8;
|
|
--opac-13: 0.85;
|
|
--opac-14: 0.9;
|
|
--opac-15: 0.95;
|
|
--space-0: 0;
|
|
--space-1: 1rem;
|
|
--space-2: 2rem;
|
|
--space-3: 3rem;
|
|
--space-4: 4rem;
|
|
--space-5: 5rem;
|
|
--space-6: 6rem;
|
|
--space-7: 7rem;
|
|
--space-8: 8rem;
|
|
--space-9: 9rem;
|
|
--space-10: 10rem;
|
|
--space-auto: auto;
|
|
--space-05: 0.5rem;
|
|
--timing-short: 100ms;
|
|
--timing-medium: 150ms;
|
|
--timing-long: 200ms;
|
|
--z-index-modal: 5000;
|
|
--z-index-notification: 4000;
|
|
--z-index-overlay: 3000;
|
|
--z-index-balloon: 2000;
|
|
--z-index-sticky: 1000;
|
|
--z-index-above: 10;
|
|
--z-index-default: 1;
|
|
--z-index-below: -1;
|
|
--color-background-button: var(--color-twitch-purple-7);
|
|
--color-background-button-hover: var(--color-twitch-purple-8);
|
|
--color-background-button-focus: var(--color-twitch-purple-8);
|
|
--color-background-button-active: var(--color-twitch-purple-7);
|
|
--color-background-button-purchase: var(--color-opac-b-5);
|
|
--color-background-button-status: var(--color-background-button-success);
|
|
--color-background-button-status-hover: var(--color-background-button-error-hover);
|
|
--color-background-button-status-focus: var(--color-background-button-error-hover);
|
|
--color-background-button-status-active: var(--color-background-button-error-active);
|
|
--color-background-button-success-focus: var(--color-green-darker);
|
|
--color-background-button-alert: var(--color-red);
|
|
--color-background-button-alert-hover: var(--color-red-darker);
|
|
--color-background-button-alert-focus: var(--color-red-darker);
|
|
--color-background-button-alert-active: var(--color-red);
|
|
--color-background-button-overlay: var(--color-transparent);
|
|
--color-background-button-overlay-hover: var(--color-opac-w-1);
|
|
--color-background-button-overlay-focus: var(--color-opac-w-1);
|
|
--color-background-button-overlay-active: transparent;
|
|
--color-background-interactable-alpha-hover: var(--color-opac-w-4);
|
|
--color-background-interactable-alpha-active: var(--color-opac-w-5);
|
|
--color-background-interactable-alpha-selected: var(--color-opac-w-3);
|
|
--color-text-button: var(--color-white);
|
|
--color-text-button-hover: var(--color-white);
|
|
--color-text-button-focus: var(--color-white);
|
|
--color-text-button-active: var(--color-white);
|
|
--color-text-button-secondary-hover: var(--color-hinted-grey-6);
|
|
--color-text-button-secondary-focus: var(--color-hinted-grey-6);
|
|
--color-text-button-secondary-active: var(--color-hinted-grey-6);
|
|
--color-text-button-text-focus: var(--color-opac-w-1);
|
|
--color-text-button-text-active: var(--color-opac-p-2);
|
|
--color-text-button-status: var(--color-white);
|
|
--color-text-button-status-hover: var(--color-white);
|
|
--color-text-button-status-focus: var(--color-white);
|
|
--color-text-button-status-active: var(--color-white);
|
|
--color-text-button-success-hover: var(--color-black);
|
|
--color-text-button-success-focus: var(--color-black);
|
|
--color-text-button-success-active: var(--color-black);
|
|
--color-text-button-alert: var(--color-black);
|
|
--color-text-button-alert-hover: var(--color-black);
|
|
--color-text-button-alert-focus: var(--color-black);
|
|
--color-text-button-alert-active: var(--color-black);
|
|
--color-text-button-overlay: var(--color-white);
|
|
--color-text-button-overlay-hover: var(--color-white);
|
|
--color-text-button-overlay-focus: var(--color-white);
|
|
--color-text-button-overlay-active: var(--color-white);
|
|
--color-text-interactable: currentColor;
|
|
--color-text-interactable-hover: var(--color-white);
|
|
--color-text-interactable-active: var(--color-white);
|
|
--color-text-interactable-inverted: var(--color-white);
|
|
--color-text-input-focus: transparent;
|
|
--color-border-button: var(--color-twitch-purple-7);
|
|
--color-border-button-hover: var(--color-twitch-purple-8);
|
|
--color-border-button-focus: var(--color-twitch-purple-9);
|
|
--color-border-button-active: var(--color-twitch-purple-8);
|
|
--color-border-button-disabled: var(--color-opac-w-1);
|
|
--color-border-button-status: var(--color-green);
|
|
--color-border-button-status-hover: var(--color-red-darker);
|
|
--color-border-button-status-focus: var(--color-red-darker);
|
|
--color-border-button-status-active: var(--color-red);
|
|
--color-border-button-success: var(--color-green);
|
|
--color-border-button-success-hover: var(--color-green);
|
|
--color-border-button-success-focus: var(--color-green);
|
|
--color-border-button-success-active: var(--color-green);
|
|
--color-border-button-alert: var(--color-red);
|
|
--color-border-button-alert-hover: var(--color-red-darker);
|
|
--color-border-button-alert-focus: var(--color-red-darker);
|
|
--color-border-button-alert-active: var(--color-red);
|
|
--color-border-button-overlay: var(--color-transparent);
|
|
--color-border-button-overlay-hover: var(--color-transparent);
|
|
--color-border-button-overlay-focus: var(--color-opac-w-6);
|
|
--color-border-button-overlay-active: var(--color-opac-w-9);
|
|
--color-border-button-overlay-bordered: var(--color-white);
|
|
--color-border-interactable-selected: var(--color-twitch-purple-10);
|
|
--shadow-input: inset 0 0 0 1px var(--color-twitch-purple-5);
|
|
--shadow-input-error: 0 0 0 1px var(--color-border-error);
|
|
--shadow-input-focus: 0 0 10px -2px var(--color-border-brand);
|
|
--shadow-input-error-focus: 0 0 6px -2px var(--color-border-error);
|
|
--shadow-interactable-focus: 0 0 6px 0 var(--color-twitch-purple-8);
|
|
--color-background-subscriber-stream-tag-default: var(--color-twitch-purple-4);
|
|
--color-background-subscriber-stream-tag-hover: var(--color-twitch-purple-3);
|
|
--color-background-subscriber-stream-tag-active: var(--color-twitch-purple-4);
|
|
--color-border-subscriber-stream-tag: var(--color-twitch-purple-5);
|
|
--color-background-body: var(--color-hinted-grey-1);
|
|
--color-background-base: var(--color-hinted-grey-2);
|
|
--color-background-alt: var(--color-hinted-grey-3);
|
|
--color-background-alt-2: var(--color-hinted-grey-4);
|
|
--color-background-float: var(--color-hinted-grey-3);
|
|
--color-background-accent: var(--color-twitch-purple-8);
|
|
--color-background-accent-alt: var(--color-twitch-purple-7);
|
|
--color-background-accent-alt-2: var(--color-twitch-purple-6);
|
|
--color-background-placeholder: var(--color-opac-w-1);
|
|
--color-background-overlay-placeholder: var(--color-opac-w-3);
|
|
--color-background-live: var(--color-red);
|
|
--color-background-prime: var(--color-prime-blue);
|
|
--color-background-error: var(--color-red-11);
|
|
--color-background-warn: var(--color-orange-13);
|
|
--color-background-success: var(--color-green-13);
|
|
--color-background-info: var(--color-blue-12);
|
|
--color-background-brand: var(--color-twitch-purple-11);
|
|
--color-background-overlay-error: var(--color-red-11);
|
|
--color-background-overlay-warn: var(--color-orange-13);
|
|
--color-background-overlay-success: var(--color-green-13);
|
|
--color-background-overlay-info: var(--color-blue-12);
|
|
--color-background-overlay-brand: var(--color-twitch-purple-11);
|
|
--color-background-interactable-hover: var(--color-opac-w-4);
|
|
--color-background-interactable-active: var(--color-opac-w-5);
|
|
--color-background-interactable-selected: var(--color-background-button-brand);
|
|
--color-background-interactable-overlay-hover: var(--color-opac-w-4);
|
|
--color-background-interactable-overlay-active: var(--color-opac-w-5);
|
|
--color-background-interactable-overlay-selected: var(--color-white);
|
|
--color-background-interactable-destructive-hover: var(--color-red-darker);
|
|
--color-background-interactable-destructive-active: var(--color-red);
|
|
--color-background-button-primary-default: var(--color-background-button-brand);
|
|
--color-background-button-primary-hover: var(--color-background-button-brand-hover);
|
|
--color-background-button-primary-active: var(--color-background-button-brand-active);
|
|
--color-background-button-secondary-default: var(--color-opac-w-3);
|
|
--color-background-button-secondary-hover: var(--color-background-interactable-hover);
|
|
--color-background-button-secondary-active: var(--color-background-interactable-active);
|
|
--color-background-button-text-default: var(--color-transparent);
|
|
--color-background-button-text-hover: var(--color-background-interactable-hover);
|
|
--color-background-button-text-active: var(--color-background-interactable-active);
|
|
--color-background-button-destructive-default: var(--color-background-button-error);
|
|
--color-background-button-destructive-hover: var(--color-background-button-error-hover);
|
|
--color-background-button-destructive-active: var(--color-background-button-error-active);
|
|
--color-background-button-error: var(--color-red-10);
|
|
--color-background-button-error-hover: var(--color-red-12);
|
|
--color-background-button-error-active: var(--color-red-14);
|
|
--color-background-button-warn: var(--color-orange-12);
|
|
--color-background-button-warn-hover: var(--color-orange-14);
|
|
--color-background-button-warn-active: var(--color-orange-15);
|
|
--color-background-button-success: var(--color-green-12);
|
|
--color-background-button-success-hover: var(--color-green-14);
|
|
--color-background-button-success-active: var(--color-green-15);
|
|
--color-background-button-info: var(--color-blue-11);
|
|
--color-background-button-info-hover: var(--color-blue-13);
|
|
--color-background-button-info-active: var(--color-blue-15);
|
|
--color-background-button-brand: var(--color-twitch-purple-9);
|
|
--color-background-button-brand-hover: var(--color-twitch-purple-8);
|
|
--color-background-button-brand-active: var(--color-twitch-purple-7);
|
|
--color-background-button-overlay-primary-default: var(--color-white);
|
|
--color-background-button-overlay-primary-hover: var(--color-opac-w-14);
|
|
--color-background-button-overlay-primary-active: var(--color-opac-w-13);
|
|
--color-background-button-overlay-secondary-default: var(--color-opac-w-3);
|
|
--color-background-button-overlay-secondary-hover: var(--color-background-interactable-overlay-hover);
|
|
--color-background-button-overlay-secondary-active: var(--color-background-interactable-overlay-active);
|
|
--color-background-button-overlay-text-default: var(--color-transparent);
|
|
--color-background-button-overlay-text-hover: var(--color-background-interactable-overlay-hover);
|
|
--color-background-button-overlay-text-active: var(--color-background-interactable-overlay-active);
|
|
--color-background-button-overlay-error: var(--color-background-button-error);
|
|
--color-background-button-overlay-error-hover: var(--color-background-button-error-hover);
|
|
--color-background-button-overlay-error-active: var(--color-background-button-error-active);
|
|
--color-background-button-overlay-warn: var(--color-background-button-warn);
|
|
--color-background-button-overlay-warn-hover: var(--color-background-button-warn-hover);
|
|
--color-background-button-overlay-warn-active: var(--color-background-button-warn-active);
|
|
--color-background-button-overlay-success: var(--color-background-button-success);
|
|
--color-background-button-overlay-success-hover: var(--color-background-button-success-hover);
|
|
--color-background-button-overlay-success-active: var(--color-background-button-success-active);
|
|
--color-background-button-overlay-info: var(--color-background-button-info);
|
|
--color-background-button-overlay-info-hover: var(--color-background-button-info-hover);
|
|
--color-background-button-overlay-info-active: var(--color-background-button-info-active);
|
|
--color-background-button-overlay-brand: var(--color-white);
|
|
--color-background-button-overlay-brand-hover: var(--color-opac-w-14);
|
|
--color-background-button-overlay-brand-active: var(--color-opac-w-13);
|
|
--color-background-button-icon-overlay-default: var(--color-transparent);
|
|
--color-background-button-icon-overlay-hover: var(--color-background-interactable-overlay-hover);
|
|
--color-background-button-icon-overlay-active: var(--color-background-interactable-overlay-active);
|
|
--color-background-button-disabled: var(--color-opac-w-3);
|
|
--color-background-button-overlay-disabled: var(--color-opac-w-2);
|
|
--color-background-image-selector-overlay: var(--color-transparent);
|
|
--color-background-input: var(--color-opac-w-4);
|
|
--color-background-input-focus: var(--color-black);
|
|
--color-background-input-checked: var(--color-twitch-purple-8);
|
|
--color-background-input-overlay: var(--color-opac-b-4);
|
|
--color-background-input-overlay-focus: var(--color-black);
|
|
--color-background-input-checkbox-checked: var(--color-border-brand);
|
|
--color-background-input-checkbox-checked-background: var(--color-black);
|
|
--color-background-input-checkbox-checked-background-overlay: var(--color-black);
|
|
--color-background-input-checkbox-checked-overlay: var(--color-white);
|
|
--color-background-selectable: var(--color-opac-w-3);
|
|
--color-background-selectable-hover: var(--color-opac-w-4);
|
|
--color-background-selectable-overlay: var(--color-opac-w-3);
|
|
--color-background-selectable-overlay-hover: var(--color-opac-w-4);
|
|
--color-background-tag-default: var(--color-opac-w-3);
|
|
--color-background-tag-hover: var(--color-background-interactable-hover);
|
|
--color-background-tag-active: var(--color-background-interactable-active);
|
|
--color-background-toggle: var(--color-transparent);
|
|
--color-background-toggle-handle: var(--color-white);
|
|
--color-background-toggle-handle-checked: var(--color-twitch-purple-10);
|
|
--color-background-toggle-handle-overlay: var(--color-white);
|
|
--color-background-toggle-hover: var(--color-opac-w-5);
|
|
--color-background-toggle-focus: var(--color-opac-w-5);
|
|
--color-background-toggle-checked: var(--color-black);
|
|
--color-background-toggle-overlay: var(--color-opac-b-4);
|
|
--color-background-toggle-overlay-checked: var(--color-black);
|
|
--color-background-tooltip: var(--color-white);
|
|
--color-background-overlay: var(--color-opac-b-9);
|
|
--color-background-progress: var(--color-opac-w-4);
|
|
--color-background-progress-status: var(--color-border-brand);
|
|
--color-background-progress-status-error: var(--color-border-error);
|
|
--color-background-progress-status-caution: var(--color-border-warn);
|
|
--color-background-progress-status-success: var(--color-border-success);
|
|
--color-background-progress-overlay-status: var(--color-opac-w-12);
|
|
--color-background-progress-overlay-mask: var(--color-opac-b-7);
|
|
--color-background-progress-countdown: none;
|
|
--color-background-progress-countdown-status: var(--color-twitch-purple-9);
|
|
--color-background-pill: var(--color-hinted-grey-7);
|
|
--color-background-pill-new: var(--color-magenta-11);
|
|
--color-background-pill-subtle: var(--color-hinted-grey-10);
|
|
--color-background-pill-notification: var(--color-red);
|
|
--color-background-range: var(--color-opac-w-4);
|
|
--color-background-range-fill: var(--color-border-brand);
|
|
--color-background-range-overlay: var(--color-opac-w-6);
|
|
--color-background-range-overlay-fill: var(--color-white);
|
|
--color-background-social-column: var(--color-hinted-grey-2);
|
|
--color-background-top-nav: var(--color-twitch-purple-6);
|
|
--color-background-chat: var(--color-twitch-purple-1);
|
|
--color-background-chat-alt: var(--color-twitch-purple-3);
|
|
--color-background-chat-header: var(--color-twitch-purple-2);
|
|
--color-background-chat-line-mentioning: var(--color-hinted-grey-5);
|
|
--color-background-chat-line-mentioned: var(--color-hinted-grey-15);
|
|
--color-background-modal-overlay: var(--color-opac-b-13);
|
|
--color-background-modal: var(--color-twitch-purple-3);
|
|
--color-background-graph: var(--color-twitch-purple-2);
|
|
--color-background-graph-fill: var(--color-twitch-purple-8);
|
|
--color-background-scrollbar: var(--color-opac-w-8);
|
|
--color-background-hover: var(--color-opac-w-3);
|
|
--color-text-base: var(--color-hinted-grey-14);
|
|
--color-text-alt: var(--color-hinted-grey-12);
|
|
--color-text-alt-2: var(--color-hinted-grey-9);
|
|
--color-text-link: var(--color-twitch-purple-11);
|
|
--color-text-link-hover: var(--color-twitch-purple-10);
|
|
--color-text-link-active: var(--color-twitch-purple-11);
|
|
--color-text-link-focus: var(--color-twitch-purple-10);
|
|
--color-text-link-visited: var(--color-twitch-purple-11);
|
|
--color-text-live: var(--color-text-accessible-red);
|
|
--color-text-alert: var(--color-text-accessible-red);
|
|
--color-text-prime: var(--color-prime-blue);
|
|
--color-text-error: var(--color-red-11);
|
|
--color-text-warn: var(--color-orange-11);
|
|
--color-text-success: var(--color-green-11);
|
|
--color-text-info: var(--color-blue-11);
|
|
--color-text-brand: var(--color-twitch-purple-11);
|
|
--color-text-overlay-error: var(--color-red-11);
|
|
--color-text-overlay-warn: var(--color-orange-11);
|
|
--color-text-overlay-success: var(--color-green-11);
|
|
--color-text-overlay-info: var(--color-blue-11);
|
|
--color-text-overlay-brand: var(--color-white);
|
|
--color-text-accessible-red: var(--color-red-11);
|
|
--color-text-accessible-green: var(--color-green-11);
|
|
--color-text-accessible-blue: var(--color-blue-11);
|
|
--color-text-tab: var(--color-text-base);
|
|
--color-text-tab-active: var(--color-twitch-purple-11);
|
|
--color-text-badge-alt: var(--color-black);
|
|
--color-text-badge-alt-2: var(--color-black);
|
|
--color-text-button-primary: var(--color-white);
|
|
--color-text-button-secondary: var(--color-text-base);
|
|
--color-text-button-text: var(--color-text-brand);
|
|
--color-text-button-text-hover: var(--color-text-base);
|
|
--color-text-button-destructive: var(--color-text-button-error);
|
|
--color-text-button-error: var(--color-black);
|
|
--color-text-button-warn: var(--color-black);
|
|
--color-text-button-success: var(--color-black);
|
|
--color-text-button-info: var(--color-black);
|
|
--color-text-button-brand: var(--color-white);
|
|
--color-text-button-overlay-primary: var(--color-black);
|
|
--color-text-button-overlay-secondary: var(--color-white);
|
|
--color-text-button-overlay-text: var(--color-white);
|
|
--color-text-button-overlay-error: var(--color-black);
|
|
--color-text-button-overlay-warn: var(--color-black);
|
|
--color-text-button-overlay-success: var(--color-black);
|
|
--color-text-button-overlay-info: var(--color-black);
|
|
--color-text-button-overlay-brand: var(--color-black);
|
|
--color-text-button-disabled: var(--color-opac-w-8);
|
|
--color-text-interactable-selected: var(--color-text-overlay);
|
|
--color-text-interactable-overlay-selected: var(--color-black);
|
|
--color-text-input: var(--color-text-base);
|
|
--color-text-input-placeholder: var(--color-opac-w-10);
|
|
--color-text-input-placeholder-overlay: var(--color-opac-w-10);
|
|
--color-text-input-checked-icon: var(--color-white);
|
|
--color-text-label: var(--color-hinted-grey-15);
|
|
--color-text-label-optional: var(--color-hinted-grey-8);
|
|
--color-text-hint: var(--color-hinted-grey-8);
|
|
--color-text-tag: var(--color-opac-w-10);
|
|
--color-text-toggle-checked-icon: var(--color-border-brand);
|
|
--color-text-toggle-checked-icon-overlay: var(--color-white);
|
|
--color-text-tooltip: var(--color-twitch-purple-1);
|
|
--color-text-overlay: var(--color-white);
|
|
--color-text-overlay-alt: var(--color-opac-w-13);
|
|
--color-text-overlay-link: var(--color-white);
|
|
--color-text-overlay-link-hover: var(--color-opac-w-12);
|
|
--color-text-overlay-link-active: var(--color-white);
|
|
--color-text-overlay-link-focus: var(--color-opac-w-12);
|
|
--color-text-overlay-link-visited: var(--color-white);
|
|
--color-text-pill: var(--color-black);
|
|
--color-text-chat-line-mentioning: var(--color-white);
|
|
--color-text-chat-line-mentioned: var(--color-hinted-grey-2);
|
|
--color-text-channel-status-text-indicator-hosting: var(--color-black);
|
|
--color-text-channel-status-text-indicator-rerun: var(--color-black);
|
|
--color-text-channel-status-text-indicator-offline: var(--color-black);
|
|
--color-text-channel-status-text-indicator-hosting-overlay: var(--color-black);
|
|
--color-text-channel-status-text-indicator-rerun-overlay: var(--color-black);
|
|
--color-text-channel-status-text-indicator-offline-overlay: var(--color-black);
|
|
--color-text-ribbon: var(--color-white);
|
|
--color-border-base: var(--color-opac-w-2);
|
|
--color-border-region: var(--color-black);
|
|
--color-border-overlay: var(--color-opac-w-5);
|
|
--color-border-alert: var(--color-red);
|
|
--color-border-error: var(--color-red-10);
|
|
--color-border-warn: var(--color-orange-12);
|
|
--color-border-success: var(--color-green-12);
|
|
--color-border-info: var(--color-blue-10);
|
|
--color-border-brand: var(--color-twitch-purple-10);
|
|
--color-border-error-decorative: var(--color-red-10);
|
|
--color-border-warn-decorative: var(--color-orange-12);
|
|
--color-border-success-decorative: var(--color-green-12);
|
|
--color-border-info-decorative: var(--color-blue-10);
|
|
--color-border-brand-decorative: var(--color-twitch-purple-10);
|
|
--color-border-overlay-error: var(--color-red-10);
|
|
--color-border-overlay-warn: var(--color-orange-12);
|
|
--color-border-overlay-success: var(--color-green-12);
|
|
--color-border-overlay-info: var(--color-blue-10);
|
|
--color-border-overlay-brand: var(--color-white);
|
|
--color-border-overlay-error-decorative: var(--color-red-10);
|
|
--color-border-overlay-warn-decorative: var(--color-orange-12);
|
|
--color-border-overlay-success-decorative: var(--color-green-12);
|
|
--color-border-overlay-info-decorative: var(--color-blue-10);
|
|
--color-border-overlay-brand-decorative: var(--color-twitch-purple-10);
|
|
--color-border-balloon-overlay: var(--color-opac-w-4);
|
|
--color-border-tab: var(--color-border-base);
|
|
--color-border-tab-hover: var(--color-twitch-purple-11);
|
|
--color-border-tab-focus: var(--color-twitch-purple-11);
|
|
--color-border-tab-active: var(--color-border-brand);
|
|
--color-border-image-selector: var(--color-opac-b-6);
|
|
--color-border-image-selector-overlay: var(--color-opac-w-6);
|
|
--color-border-image-selector-overlay-selected: var(--color-white);
|
|
--color-border-input: var(--color-opac-w-4);
|
|
--color-border-input-hover: var(--color-opac-w-6);
|
|
--color-border-input-focus: var(--color-border-brand);
|
|
--color-border-input-error: var(--color-border-error);
|
|
--color-border-input-overlay: var(--color-opac-w-6);
|
|
--color-border-input-overlay-hover: var(--color-opac-w-8);
|
|
--color-border-input-overlay-focus: var(--color-white);
|
|
--color-border-input-checkbox: var(--color-opac-w-10);
|
|
--color-border-input-checkbox-hover: var(--color-white);
|
|
--color-border-input-checkbox-focus: var(--color-border-brand);
|
|
--color-border-input-checkbox-checked: var(--color-border-brand);
|
|
--color-border-input-checkbox-error: var(--color-border-error);
|
|
--color-border-input-checkbox-overlay: var(--color-opac-w-10);
|
|
--color-border-input-checkbox-hover-overlay: var(--color-white);
|
|
--color-border-input-checkbox-checked-overlay: var(--color-white);
|
|
--color-border-input-checkbox-overlay-focus: var(--color-white);
|
|
--color-border-range-handle: var(--color-border-brand);
|
|
--color-border-range-handle-focus: var(--color-white);
|
|
--color-border-tag: var(--color-opac-w-3);
|
|
--color-border-toggle: var(--color-opac-w-10);
|
|
--color-border-toggle-hover: var(--color-white);
|
|
--color-border-toggle-focus: var(--color-border-brand);
|
|
--color-border-toggle-checked: var(--color-border-brand);
|
|
--color-border-toggle-overlay: var(--color-opac-w-10);
|
|
--color-border-toggle-overlay-hover: var(--color-white);
|
|
--color-border-toggle-overlay-focus: var(--color-white);
|
|
--color-border-toggle-overlay-checked: var(--color-white);
|
|
--color-border-whisper-incoming: var(--color-twitch-purple-10);
|
|
--color-border-whisper-outgoing: var(--color-hinted-grey-9);
|
|
--color-border-selectable: var(--color-opac-w-3);
|
|
--color-border-selectable-hover: var(--color-opac-w-4);
|
|
--color-border-selectable-hover-selected: var(--color-white);
|
|
--color-border-selectable-selected-outer: var(--color-white);
|
|
--color-border-selectable-selected-inner: var(--color-black);
|
|
--color-border-selectable-overlay: var(--color-opac-w-3);
|
|
--color-border-selectable-overlay-hover: var(--color-opac-w-4);
|
|
--color-border-selectable-overlay-selected: var(--color-white);
|
|
--color-border-selectable-overlay-selected-inner: var(--color-black);
|
|
--color-border-spinner: var(--color-opac-w-3);
|
|
--color-border-spinner-fill: var(--color-hinted-grey-12);
|
|
--color-border-quote: var(--color-hinted-grey-9);
|
|
--color-data-series-a-base: var(--color-twitch-purple-12);
|
|
--color-data-series-a-alt: var(--color-twitch-purple-11);
|
|
--color-data-series-a-alt-2: var(--color-twitch-purple-10);
|
|
--color-data-series-a-alt-3: var(--color-twitch-purple-9);
|
|
--color-data-series-a-alt-4: var(--color-twitch-purple-8);
|
|
--color-data-series-b-base: var(--color-magenta-12);
|
|
--color-data-series-b-alt: var(--color-magenta-11);
|
|
--color-data-series-b-alt-2: var(--color-magenta-10);
|
|
--color-data-series-b-alt-3: var(--color-magenta-9);
|
|
--color-data-series-b-alt-4: var(--color-magenta-8);
|
|
--color-data-series-c-base: var(--color-blue-12);
|
|
--color-data-series-c-alt: var(--color-blue-11);
|
|
--color-data-series-c-alt-2: var(--color-blue-10);
|
|
--color-data-series-c-alt-3: var(--color-blue-9);
|
|
--color-data-series-c-alt-4: var(--color-blue-8);
|
|
--color-data-series-d-base: var(--color-cyan-12);
|
|
--color-data-series-d-alt: var(--color-cyan-11);
|
|
--color-data-series-d-alt-2: var(--color-cyan-10);
|
|
--color-data-series-d-alt-3: var(--color-cyan-9);
|
|
--color-data-series-d-alt-4: var(--color-cyan-8);
|
|
--color-data-series-e-base: var(--color-orange-12);
|
|
--color-data-series-e-alt: var(--color-orange-11);
|
|
--color-data-series-e-alt-2: var(--color-orange-10);
|
|
--color-data-series-e-alt-3: var(--color-orange-9);
|
|
--color-data-series-e-alt-4: var(--color-orange-8);
|
|
--color-data-text-title: var(--color-text-base);
|
|
--color-data-text-subtitle: var(--color-text-alt-2);
|
|
--color-data-background-chart: var(--color-background-base);
|
|
--color-data-axis: var(--color-text-alt-2);
|
|
--color-data-grid: var(--color-border-base);
|
|
--color-data-background-gauge: var(--color-background-alt);
|
|
--color-data-indicator-positive: var(--color-cyan-11);
|
|
--color-data-indicator-negative: var(--color-red-11);
|
|
--color-icon-input-checked: var(--color-white);
|
|
--color-icon-input-radio-checked: var(--color-white);
|
|
--color-fill-base: var(--color-text-base);
|
|
--color-fill-current: currentColor;
|
|
--color-fill-alt: var(--color-text-alt);
|
|
--color-fill-alt-2: var(--color-text-alt-2);
|
|
--color-fill-offline: var(--color-hinted-grey-9);
|
|
--color-fill-hosting: var(--color-orange-13);
|
|
--color-fill-live: var(--color-red-9);
|
|
--color-fill-recording: var(--color-red-9);
|
|
--color-fill-alert: var(--color-error);
|
|
--color-fill-error: var(--color-red-10);
|
|
--color-fill-warn: var(--color-orange-12);
|
|
--color-fill-success: var(--color-green-13);
|
|
--color-fill-info: var(--color-blue-10);
|
|
--color-fill-brand: var(--color-twitch-purple-10);
|
|
--color-fill-error-overlay: var(--color-red-10);
|
|
--color-fill-warn-overlay: var(--color-orange-12);
|
|
--color-fill-success-overlay: var(--color-green-13);
|
|
--color-fill-info-overlay: var(--color-blue-10);
|
|
--color-fill-brand-overlay: var(--color-twitch-purple-10);
|
|
--color-fill-prime: var(--color-prime-blue);
|
|
--color-fill-drops: var(--color-green);
|
|
--color-fill-crate: var(--color-green);
|
|
--color-fill-range-notch: var(--color-hinted-grey-7);
|
|
--color-fill-button-icon: var(--color-text-base);
|
|
--color-fill-button-icon-hover: var(--color-text-base);
|
|
--color-fill-button-icon-focus: var(--color-text-base);
|
|
--color-fill-button-icon-active: var(--color-text-base);
|
|
--color-fill-channel-status-text-indicator-hosting: var(--color-opac-w-10);
|
|
--color-fill-channel-status-text-indicator-rerun: var(--color-opac-w-10);
|
|
--color-fill-channel-status-text-indicator-offline: var(--color-white);
|
|
--color-fill-channel-status-text-indicator-hosting-overlay: var(--color-opac-w-10);
|
|
--color-fill-channel-status-text-indicator-rerun-overlay: var(--color-opac-w-10);
|
|
--color-fill-channel-status-text-indicator-offline-overlay: var(--color-white);
|
|
--color-fill-new-item-indicator: var(--color-magenta-11);
|
|
--color-fill-presence-offline: var(--color-hinted-grey-9);
|
|
--color-fill-presence-invisible: var(--color-hinted-grey-9);
|
|
--color-fill-presence-online: var(--color-green-13);
|
|
--color-fill-presence-away: var(--color-orange-12);
|
|
--color-fill-presence-busy: var(--color-red-10);
|
|
--color-fill-presence-idle: var(--color-orange-12);
|
|
--color-fill-ribbon: var(--color-red-9);
|
|
--color-social-twitter: var(--color-twitter);
|
|
--color-social-facebook: var(--color-facebook);
|
|
--color-social-reddit: var(--color-reddit);
|
|
--color-social-snapchat: var(--color-snapchat);
|
|
--color-social-instagram: var(--color-instagram);
|
|
--color-social-youtube: var(--color-youtube);
|
|
--color-social-paypal: var(--color-paypal);
|
|
--color-social-vk: var(--color-vk);
|
|
--shadow-elevation-umbra: 0.34;
|
|
--shadow-elevation-penumbra: 0.26;
|
|
--shadow-elevation-ambient: 0.28;
|
|
--shadow-elevation-1: 0 1px 2px var(--color-opac-b-14),0 0px 2px var(--color-opac-b-14);
|
|
--shadow-elevation-2: 0 4px 8px var(--color-opac-b-7),0 0px 4px var(--color-opac-b-7);
|
|
--shadow-elevation-3: 0 6px 16px var(--color-opac-b-8),0 0px 4px var(--color-opac-b-7);
|
|
--shadow-elevation-4: 0 12px 32px var(--color-opac-b-8),0 0px 8px var(--color-opac-b-7);
|
|
--shadow-elevation-5: 0 32px 64px var(--color-opac-b-9),0 0px 16px var(--color-opac-b-7);
|
|
--shadow-button-focus: 0 0 6px 0 var(--color-twitch-purple-8);
|
|
--shadow-button-active: 0 0 6px 0 var(--color-twitch-purple-8);
|
|
--shadow-button-disabled: none;
|
|
--shadow-button-overlay-focus: 0 0 6px 0 var(--color-opac-w-6);
|
|
--shadow-button-overlay-active: 0 0 6px 0 var(--color-opac-w-6);
|
|
--shadow-tab-focus: 0 4px 6px -4px var(--color-twitch-purple-11);
|
|
--shadow-balloon: 0 1px 1px var(--color-opac-b-5);
|
|
--shadow-scrollbar: 0 0 1px 1px var(--color-opac-w-5);
|
|
}
|