557 lines
17 KiB
CSS
557 lines
17 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
--card: 0, 0%, 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
--accent: 0, 0%, 98%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
--destructive: 0 72.22% 50.59%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 240 5% 64.9%;
|
|
--radius: 0.5rem;
|
|
|
|
--neutral-0: 0, 0%, 100%, 1;
|
|
--neutral-50: 0, 0%, 98%, 1;
|
|
--neutral-100: 0, 0%, 96%, 1;
|
|
--neutral-200: 0, 0%, 90%, 1;
|
|
--neutral-300: 0, 0%, 83%, 1;
|
|
--neutral-400: 0, 0%, 64%, 1;
|
|
--neutral-500: 0, 0%, 45%, 1;
|
|
--neutral-600: 0, 0%, 32%, 1;
|
|
--neutral-700: 0, 0%, 25%, 1;
|
|
--neutral-800: 0, 0%, 15%, 1;
|
|
--neutral-900: 0, 0%, 9%, 1;
|
|
--neutral-950: 0, 0%, 4%, 1;
|
|
--onSurface-primary: 240, 11%, 9%;
|
|
--onSurface-secondary: 240, 3%, 24%;
|
|
--onSurface-tertiary: 240, 5%, 65%;
|
|
--surface-tertiary: 0, 0%, 94%;
|
|
--surface-secondary: 0, 0%, 98%;
|
|
--surface-primary: 0, 0%, 100%;
|
|
|
|
--border-primary: var(--mem-neutral-200);
|
|
--elevation-light-2: 0, 0%, 0%, 0.08;
|
|
|
|
/* Mem primitives */
|
|
--mem-neutral-50: #fcfcfc;
|
|
--mem-neutral-100: #f4f4f4;
|
|
--mem-neutral-150: #e9e9e9;
|
|
--mem-neutral-200: #dddddd;
|
|
--mem-neutral-300: #cccccc;
|
|
--mem-neutral-400: #b3b3b3;
|
|
--mem-neutral-450: #999999;
|
|
--mem-neutral-500: #737373;
|
|
--mem-neutral-550: #555555;
|
|
--mem-neutral-600: #383838;
|
|
--mem-neutral-700: #252525;
|
|
--mem-neutral-800: #181818;
|
|
--mem-neutral-850: #0f0f0f;
|
|
--mem-neutral-900: #0a0a0a;
|
|
--mem-neutral-950: #050505;
|
|
--mem-purple-50: #f7f2ff;
|
|
--mem-purple-100: #efe4ff;
|
|
--mem-purple-150: #e5d4ff;
|
|
--mem-purple-200: #dcc3ff;
|
|
--mem-purple-300: #cbb2ff;
|
|
--mem-purple-400: #b89cff;
|
|
--mem-purple-500: #a487f5;
|
|
--mem-purple-600: #8f74e0;
|
|
--mem-purple-700: #745cc4;
|
|
--mem-purple-800: #5c49a3;
|
|
--mem-purple-900: #47397f;
|
|
--mem-purple-950: #31275a;
|
|
--mem-gold-50: #fefaf0;
|
|
--mem-gold-100: #fbf3df;
|
|
--mem-gold-150: #f8ebc9;
|
|
--mem-gold-200: #f4dfae;
|
|
--mem-gold-300: #f2d288;
|
|
--mem-gold-400: #f1c96c;
|
|
--mem-gold-500: #e0b85c;
|
|
--mem-gold-600: #be9f55;
|
|
--mem-gold-700: #a68c51;
|
|
--mem-gold-800: #79683e;
|
|
--mem-gold-900: #54482c;
|
|
--mem-gold-950: #2f2819;
|
|
--mem-blue-50: #f3f5fd;
|
|
--mem-blue-100: #e5eafb;
|
|
--mem-blue-200: #d0d9f8;
|
|
--mem-blue-300: #b1c0f0;
|
|
--mem-blue-400: #889de1;
|
|
--mem-blue-500: #5d79d6;
|
|
--mem-blue-600: #3a5bc8;
|
|
--mem-blue-700: #2b4496;
|
|
--mem-blue-800: #152a6c;
|
|
--mem-blue-900: #0e1d4e;
|
|
--mem-blue-950: #0b1432;
|
|
--mem-green-50: #f5fbf7;
|
|
--mem-green-100: #eaf6ee;
|
|
--mem-green-200: #d9efe0;
|
|
--mem-green-300: #bee3ca;
|
|
--mem-green-400: #97d2af;
|
|
--mem-green-500: #71c291;
|
|
--mem-green-600: #57ab73;
|
|
--mem-green-700: #398457;
|
|
--mem-green-800: #2b6442;
|
|
--mem-green-900: #1c4028;
|
|
--mem-green-950: #112718;
|
|
--mem-red-50: #fdf3f3;
|
|
--mem-red-100: #fbe5e5;
|
|
--mem-red-200: #f8d0d0;
|
|
--mem-red-300: #f0b1b1;
|
|
--mem-red-400: #ec7d7d;
|
|
--mem-red-500: #e64d4d;
|
|
--mem-red-600: #d32f2f;
|
|
--mem-red-700: #ad2525;
|
|
--mem-red-800: #7e1b1b;
|
|
--mem-red-900: #541212;
|
|
--mem-red-950: #320b0b;
|
|
|
|
/* Mem tokens - light mode */
|
|
--mem-border-secondary: var(--mem-neutral-300);
|
|
--mem-border-primary: var(--mem-neutral-200);
|
|
|
|
/* Semantic surface tokens - light mode */
|
|
--surface-default-primary: var(--mem-neutral-50);
|
|
--surface-default-primary-hover: var(--mem-neutral-100);
|
|
--surface-default-secondary: var(--mem-neutral-100);
|
|
--surface-default-secondary-hover: var(--mem-neutral-150);
|
|
--surface-default-fg-secondary: var(--mem-neutral-100);
|
|
--surface-default-fg-secondary-hover: var(--mem-neutral-150);
|
|
--surface-default-tertiary: var(--mem-neutral-150);
|
|
--surface-default-tertiary-hover: var(--mem-neutral-200);
|
|
--surface-default-brand: var(--mem-purple-50);
|
|
--surface-default-brand-hover: var(--mem-purple-100);
|
|
--surface-event-add: var(--mem-green-200);
|
|
--surface-event-search: var(--mem-blue-100);
|
|
--surface-event-delete: var(--mem-red-100);
|
|
--surface-event-get: var(--mem-purple-100);
|
|
--surface-positive-primary: var(--mem-green-100);
|
|
--surface-positive-primary-hover: var(--mem-green-200);
|
|
--surface-danger-primary: var(--mem-red-100);
|
|
--surface-danger-primary-hover: var(--mem-red-200);
|
|
--surface-info-primary: var(--mem-blue-50);
|
|
--surface-info-primary-hover: var(--mem-blue-100);
|
|
|
|
/* Semantic on-surface tokens - light mode */
|
|
--on-surface-default-primary: var(--mem-neutral-800);
|
|
--on-surface-default-secondary: var(--mem-neutral-600);
|
|
--on-surface-default-tertiary: var(--mem-neutral-450);
|
|
--on-surface-default-brand: var(--mem-purple-400);
|
|
--on-surface-default-brand-hover: var(--mem-purple-700);
|
|
--on-surface-event-add: var(--mem-green-700);
|
|
--on-surface-event-search: var(--mem-blue-600);
|
|
--on-surface-event-delete: var(--mem-red-600);
|
|
--on-surface-event-get: var(--mem-purple-700);
|
|
--on-surface-positive-primary: var(--mem-green-700);
|
|
--on-surface-positive-secondary: var(--mem-green-600);
|
|
--on-surface-danger-primary: var(--mem-red-600);
|
|
--on-surface-danger-secondary: var(--mem-red-400);
|
|
--on-surface-info-primary: var(--mem-blue-600);
|
|
--on-surface-info-secondary: var(--mem-blue-400);
|
|
|
|
/* Typography: size, line-height, letter-spacing per token */
|
|
--typo-h1-size: 32px;
|
|
--typo-h1-line: 36px;
|
|
--typo-h1-tracking: -0.01em;
|
|
--typo-h2-size: 28px;
|
|
--typo-h2-line: 32px;
|
|
--typo-h2-tracking: -0.01em;
|
|
--typo-h3-size: 24px;
|
|
--typo-h3-line: 28px;
|
|
--typo-h3-tracking: -0.01em;
|
|
--typo-h4-size: 20px;
|
|
--typo-h4-line: 26px;
|
|
--typo-h4-tracking: 0;
|
|
--typo-h5-size: 18px;
|
|
--typo-h5-line: 22px;
|
|
--typo-h5-tracking: 0;
|
|
--typo-body-lg-size: 18px;
|
|
--typo-body-lg-line: 22px;
|
|
--typo-body-lg-tracking: 0;
|
|
--typo-body-size: 16px;
|
|
--typo-body-line: 22px;
|
|
--typo-body-tracking: 0;
|
|
--typo-body-sm-size: 14px;
|
|
--typo-body-sm-line: 18px;
|
|
--typo-body-sm-tracking: 0;
|
|
--typo-body-xs-size: 12px;
|
|
--typo-body-xs-line: 16px;
|
|
--typo-body-xs-tracking: 0;
|
|
--typo-caption-size: 12px;
|
|
--typo-caption-line: 16px;
|
|
--typo-caption-tracking: 0.05em;
|
|
--typo-caption-sm-size: 10px;
|
|
--typo-caption-sm-line: 12px;
|
|
--typo-caption-sm-tracking: 0.05em;
|
|
--typo-overline-size: 14px;
|
|
--typo-overline-line: 16px;
|
|
--typo-overline-tracking: 0.05em;
|
|
}
|
|
|
|
.dark {
|
|
--background: 0 0% 11%;
|
|
--foreground: 0 0% 88%;
|
|
--card: 0 0% 11%;
|
|
--card-foreground: 0 0% 88%;
|
|
--popover: 0 0% 11%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 240 3.7% 18.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240, 10%, 4%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 85.7% 97.3%;
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
--ring: 240 4.9% 83.9%;
|
|
|
|
--neutral-0: 0, 0%, 0%, 1;
|
|
--neutral-50: 0, 0%, 4%, 1;
|
|
--neutral-100: 0, 0%, 9%, 1;
|
|
--neutral-200: 0, 0%, 15%, 1;
|
|
--neutral-300: 0, 0%, 22%, 1;
|
|
--neutral-400: 0, 0%, 32%, 1;
|
|
--neutral-500: 0, 0%, 54%, 1;
|
|
--neutral-600: 0, 0%, 64%, 1;
|
|
--neutral-700: 0, 0%, 83%, 1;
|
|
--neutral-800: 0, 0%, 90%, 1;
|
|
--neutral-900: 0, 0%, 96%, 1;
|
|
--neutral-950: 0, 0%, 98%, 1;
|
|
--onSurface-primary: 0, 0%, 100%;
|
|
--onSurface-secondary: 40, 4%, 85%;
|
|
--onSurface-tertiary: 240, 4%, 46%;
|
|
--surface-tertiary: 240, 4%, 16%;
|
|
--surface-secondary: 240, 10%, 4%;
|
|
--surface-primary: 240, 11%, 9%;
|
|
--border-primary: var(--mem-neutral-800);
|
|
--elevation-light-2: 0, 0%, 0%, 0.08;
|
|
|
|
/* Mem primitives (same in dark mode) */
|
|
--mem-neutral-50: #fcfcfc;
|
|
--mem-neutral-100: #f4f4f4;
|
|
--mem-neutral-150: #e9e9e9;
|
|
--mem-neutral-200: #dddddd;
|
|
--mem-neutral-300: #cccccc;
|
|
--mem-neutral-400: #b3b3b3;
|
|
--mem-neutral-450: #999999;
|
|
--mem-neutral-500: #737373;
|
|
--mem-neutral-550: #555555;
|
|
--mem-neutral-600: #383838;
|
|
--mem-neutral-700: #252525;
|
|
--mem-neutral-800: #181818;
|
|
--mem-neutral-850: #0f0f0f;
|
|
--mem-neutral-900: #0a0a0a;
|
|
--mem-neutral-950: #050505;
|
|
--mem-purple-50: #f7f2ff;
|
|
--mem-purple-100: #efe4ff;
|
|
--mem-purple-150: #e5d4ff;
|
|
--mem-purple-200: #dcc3ff;
|
|
--mem-purple-300: #cbb2ff;
|
|
--mem-purple-400: #b89cff;
|
|
--mem-purple-500: #a487f5;
|
|
--mem-purple-600: #8f74e0;
|
|
--mem-purple-700: #745cc4;
|
|
--mem-purple-800: #5c49a3;
|
|
--mem-purple-900: #47397f;
|
|
--mem-purple-950: #31275a;
|
|
--mem-gold-50: #fefaf0;
|
|
--mem-gold-100: #fbf3df;
|
|
--mem-gold-150: #f8ebc9;
|
|
--mem-gold-200: #f4dfae;
|
|
--mem-gold-300: #f2d288;
|
|
--mem-gold-400: #f1c96c;
|
|
--mem-gold-500: #e0b85c;
|
|
--mem-gold-600: #be9f55;
|
|
--mem-gold-700: #a68c51;
|
|
--mem-gold-800: #79683e;
|
|
--mem-gold-900: #54482c;
|
|
--mem-gold-950: #2f2819;
|
|
--mem-blue-50: #f3f5fd;
|
|
--mem-blue-100: #e5eafb;
|
|
--mem-blue-200: #d0d9f8;
|
|
--mem-blue-300: #b1c0f0;
|
|
--mem-blue-400: #889de1;
|
|
--mem-blue-500: #5d79d6;
|
|
--mem-blue-600: #3a5bc8;
|
|
--mem-blue-700: #2b4496;
|
|
--mem-blue-800: #152a6c;
|
|
--mem-blue-900: #0e1d4e;
|
|
--mem-blue-950: #0b1432;
|
|
--mem-green-50: #f5fbf7;
|
|
--mem-green-100: #eaf6ee;
|
|
--mem-green-200: #d9efe0;
|
|
--mem-green-300: #bee3ca;
|
|
--mem-green-400: #97d2af;
|
|
--mem-green-500: #71c291;
|
|
--mem-green-600: #57ab73;
|
|
--mem-green-700: #398457;
|
|
--mem-green-800: #2b6442;
|
|
--mem-green-900: #1c4028;
|
|
--mem-green-950: #112718;
|
|
--mem-red-50: #fdf3f3;
|
|
--mem-red-100: #fbe5e5;
|
|
--mem-red-200: #f8d0d0;
|
|
--mem-red-300: #f0b1b1;
|
|
--mem-red-400: #ec7d7d;
|
|
--mem-red-500: #e64d4d;
|
|
--mem-red-600: #d32f2f;
|
|
--mem-red-700: #ad2525;
|
|
--mem-red-800: #7e1b1b;
|
|
--mem-red-900: #541212;
|
|
--mem-red-950: #320b0b;
|
|
|
|
/* Mem tokens - dark mode */
|
|
--mem-border-primary: var(--mem-neutral-700);
|
|
--mem-border-secondary: var(--mem-neutral-600);
|
|
|
|
/* Semantic surface tokens - dark mode */
|
|
--surface-default-primary: var(--mem-neutral-850);
|
|
--surface-default-primary-hover: var(--mem-neutral-800);
|
|
--surface-default-secondary: var(--mem-neutral-950);
|
|
--surface-default-secondary-hover: var(--mem-neutral-900);
|
|
--surface-default-fg-secondary: var(--mem-neutral-800);
|
|
--surface-default-fg-secondary-hover: var(--mem-neutral-700);
|
|
--surface-default-tertiary: var(--mem-neutral-700);
|
|
--surface-default-tertiary-hover: var(--mem-neutral-600);
|
|
--surface-default-brand: var(--mem-purple-950);
|
|
--surface-default-brand-hover: var(--mem-purple-900);
|
|
--surface-event-add: var(--mem-green-950);
|
|
--surface-event-search: var(--mem-blue-900);
|
|
--surface-event-delete: var(--mem-red-900);
|
|
--surface-event-get: var(--mem-purple-950);
|
|
--surface-positive-primary: var(--mem-green-950);
|
|
--surface-positive-primary-hover: var(--mem-green-900);
|
|
--surface-danger-primary: var(--mem-red-950);
|
|
--surface-danger-primary-hover: var(--mem-red-900);
|
|
--surface-info-primary: var(--mem-blue-950);
|
|
--surface-info-primary-hover: var(--mem-blue-900);
|
|
|
|
/* Semantic on-surface tokens - dark mode */
|
|
--on-surface-default-primary: var(--mem-neutral-50);
|
|
--on-surface-default-secondary: var(--mem-neutral-400);
|
|
--on-surface-default-tertiary: var(--mem-neutral-500);
|
|
--on-surface-default-brand: var(--mem-purple-400);
|
|
--on-surface-default-brand-hover: var(--mem-purple-700);
|
|
--on-surface-event-add: var(--mem-green-600);
|
|
--on-surface-event-search: var(--mem-blue-400);
|
|
--on-surface-event-delete: var(--mem-red-400);
|
|
--on-surface-event-get: var(--mem-purple-500);
|
|
--on-surface-positive-primary: var(--mem-green-600);
|
|
--on-surface-positive-secondary: var(--mem-green-700);
|
|
--on-surface-danger-primary: var(--mem-red-400);
|
|
--on-surface-danger-secondary: var(--mem-red-600);
|
|
--on-surface-info-primary: var(--mem-blue-400);
|
|
--on-surface-info-secondary: var(--mem-blue-600);
|
|
}
|
|
|
|
* {
|
|
@apply border-memBorder-primary;
|
|
}
|
|
|
|
html {
|
|
@apply scroll-smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-default-secondary text-foreground;
|
|
font-feature-settings: "ss03" 1;
|
|
font-synthesis-weight: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
|
|
/* Typography system: uses --typo-*-size, --typo-*-line, --typo-*-tracking from :root.
|
|
font/weight via font-fustat, font-dm-mono (var(--font-*, ui-sans-serif) from Tailwind). */
|
|
@layer components {
|
|
.typo-h1 {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-h1-size);
|
|
line-height: var(--typo-h1-line);
|
|
letter-spacing: var(--typo-h1-tracking);
|
|
}
|
|
|
|
.typo-h2 {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-h2-size);
|
|
line-height: var(--typo-h2-line);
|
|
letter-spacing: var(--typo-h2-tracking);
|
|
}
|
|
|
|
.typo-h3 {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-h3-size);
|
|
line-height: var(--typo-h3-line);
|
|
letter-spacing: var(--typo-h3-tracking);
|
|
}
|
|
|
|
.typo-h4 {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-h4-size);
|
|
line-height: var(--typo-h4-line);
|
|
letter-spacing: var(--typo-h4-tracking);
|
|
}
|
|
|
|
.typo-h5 {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-h5-size);
|
|
line-height: var(--typo-h5-line);
|
|
letter-spacing: var(--typo-h5-tracking);
|
|
}
|
|
|
|
.typo-body-lg {
|
|
@apply font-fustat font-semibold;
|
|
font-size: var(--typo-body-lg-size);
|
|
line-height: var(--typo-body-lg-line);
|
|
letter-spacing: var(--typo-body-lg-tracking);
|
|
}
|
|
|
|
.typo-body {
|
|
@apply font-fustat font-semibold;
|
|
font-size: var(--typo-body-size);
|
|
line-height: var(--typo-body-line);
|
|
letter-spacing: var(--typo-body-tracking);
|
|
}
|
|
|
|
.typo-body-sm {
|
|
@apply font-fustat font-semibold;
|
|
font-size: var(--typo-body-sm-size);
|
|
line-height: var(--typo-body-sm-line);
|
|
letter-spacing: var(--typo-body-sm-tracking);
|
|
}
|
|
|
|
.typo-body-xs {
|
|
@apply font-fustat font-semibold;
|
|
font-size: var(--typo-body-xs-size);
|
|
line-height: var(--typo-body-xs-line);
|
|
letter-spacing: var(--typo-body-xs-tracking);
|
|
}
|
|
|
|
.typo-body-lg-bold {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-body-lg-size);
|
|
line-height: var(--typo-body-lg-line);
|
|
letter-spacing: var(--typo-body-lg-tracking);
|
|
}
|
|
|
|
.typo-body-bold {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-body-size);
|
|
line-height: var(--typo-body-line);
|
|
letter-spacing: var(--typo-body-tracking);
|
|
}
|
|
|
|
.typo-body-sm-bold {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-body-sm-size);
|
|
line-height: var(--typo-body-sm-line);
|
|
letter-spacing: var(--typo-body-sm-tracking);
|
|
}
|
|
|
|
.typo-body-xs-bold {
|
|
@apply font-fustat font-bold;
|
|
font-size: var(--typo-body-xs-size);
|
|
line-height: var(--typo-body-xs-line);
|
|
letter-spacing: var(--typo-body-xs-tracking);
|
|
}
|
|
|
|
.typo-caption {
|
|
@apply font-dm-mono font-medium;
|
|
font-size: var(--typo-caption-size);
|
|
line-height: var(--typo-caption-line);
|
|
letter-spacing: var(--typo-caption-tracking);
|
|
}
|
|
|
|
.typo-caption-sm {
|
|
@apply font-dm-mono font-medium;
|
|
font-size: var(--typo-caption-sm-size);
|
|
line-height: var(--typo-caption-sm-line);
|
|
letter-spacing: var(--typo-caption-sm-tracking);
|
|
}
|
|
|
|
.typo-overline {
|
|
@apply font-dm-mono font-medium;
|
|
font-size: var(--typo-overline-size);
|
|
line-height: var(--typo-overline-line);
|
|
letter-spacing: var(--typo-overline-tracking);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.step {
|
|
counter-increment: step;
|
|
}
|
|
|
|
.step:before {
|
|
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
|
|
@apply ml-[-50px] mt-[-4px];
|
|
content: counter(step);
|
|
}
|
|
|
|
.chunk-container {
|
|
@apply shadow-none;
|
|
}
|
|
|
|
.chunk-container::after {
|
|
content: "";
|
|
@apply absolute -inset-4 shadow-xl rounded-xl border;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
@apply px-4;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: currentColor;
|
|
animation: blink 1.4s infinite both;
|
|
}
|
|
|
|
.dot:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.dot:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|