live-portfolio-tracker/index.css at main · Kalwaleed/live-portfolio-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
@import 'tailwindcss';

@theme {
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --font-sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;

  --color-bg-0: #070808;
  --color-bg-1: #0c0d0d;
  --color-bg-2: #131414;
  --color-bg-3: #1a1b1b;

  --color-ink: #e7e5dd;
  --color-ink-2: #b9b6ab;
  --color-ink-3: #6c6a62;
  --color-ink-4: #3d3c38;

  --color-line: rgba(231, 229, 221, 0.08);
  --color-line-2: rgba(231, 229, 221, 0.16);

  --color-amber: #ffb000;
  --color-amber-dim: #b07a00;
  --color-green: #3fcf8e;
  --color-red: #ff5d5d;
  --color-violet: #b48cff;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-bg-0);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(231, 229, 221, 0) 0px,
    rgba(231, 229, 221, 0) 2px,
    rgba(231, 229, 221, 0.012) 3px,
    rgba(231, 229, 221, 0) 4px
  );
}

body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 60% 30% at 50% 0%, rgba(255, 176, 0, 0.06), transparent 70%);
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-1); }
::-webkit-scrollbar-thumb { background: var(--color-ink-4); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-3); }

@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
@keyframes flash-up {
  0% { background-color: rgba(63, 207, 142, 0.25); }
  100% { background-color: transparent; }
}
@keyframes flash-down {
  0% { background-color: rgba(255, 93, 93, 0.25); }
  100% { background-color: transparent; }
}
@keyframes ticker-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.caret-blink { animation: blink 1s step-end infinite; }
.flash-up { animation: flash-up 1.4s ease-out; }
.flash-down { animation: flash-down 1.4s ease-out; }
.ticker-slide { animation: ticker-slide 60s linear infinite; }
.pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }