Xsporty/base.css at master · Ollie202/Xsporty · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/* base.css
   Active stylesheet split. */

:root {
  --bg: #202833;
  --bg-deep: #17121c;
  --panel: #1b151f;
  --panel-soft: #2f2634;
  --panel-raised: #332a37;
  --line: #514554;
  --line-soft: #6a5b6d;
  --text: #fff8ff;
  --muted: #b8adb8;
  --faint: #8d818e;
  --red: #f00018;
  --red-dark: #b00018;
  --cyan: #25d8e8;
  --yellow: #fff000;
  --green: #08a844;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 0%, rgba(37, 216, 232, 0.11), transparent 28rem),
    radial-gradient(circle at 8% 18%, rgba(240, 0, 24, 0.1), transparent 24rem),
    linear-gradient(180deg, #2b2430 0%, #202b35 28rem, #18131d 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(37, 216, 232, 0.55);
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

/* Landing hero and tighter modern scale. */

body {
  font-size: 15px;
}

/* Final scale, footer, and PNL polish. */

body {
  font-size: 14px;
}

/* Restore the compact dark market layout from the earlier version. */

body {
  background:
    radial-gradient(circle at 78% 2%, rgba(37, 216, 232, 0.09), transparent 26rem),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.035), transparent 16rem),
    linear-gradient(180deg, #2b2430 0%, #202833 8.5rem, #17121c 100%);
}

/* Compact light market theme */

:root {
  --bg: #f6f7fb;
  --bg-deep: #edf1f6;
  --panel: #ffffff;
  --panel-soft: #f3f5f8;
  --panel-raised: #ffffff;
  --line: #e3e7ee;
  --line-soft: #d4dbe5;
  --text: #131927;
  --muted: #5e6677;
  --faint: #98a2b3;
  --red: #e42342;
  --red-dark: #bd1732;
  --cyan: #0ea5c6;
  --yellow: #0f766e;
  --green: #199b51;
  --shadow: 0 16px 38px rgba(16, 24, 40, 0.08);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 10% -4%, rgba(14, 165, 198, 0.12), transparent 25rem),
    radial-gradient(circle at 92% 2%, rgba(25, 155, 81, 0.08), transparent 22rem),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 18rem, #f8fafc 100%);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline-color: rgba(14, 165, 198, 0.45);
}

/* Softer light surfaces across the whole market. */

:root {
  --bg: #edf2f5;
  --bg-deep: #e4ebf0;
  --panel: #f8fafb;
  --panel-soft: #eef3f6;
  --panel-raised: #fbfcfd;
  --line: #d9e2e8;
  --line-soft: #cbd7df;
  --text: #152033;
  --muted: #5d6a7d;
  --faint: #8592a6;
  --shadow: 0 16px 36px rgba(20, 32, 51, 0.09);
}

body {
  background:
    radial-gradient(circle at 10% -2%, rgba(14, 165, 198, 0.11), transparent 27rem),
    radial-gradient(circle at 94% 2%, rgba(25, 155, 81, 0.07), transparent 24rem),
    linear-gradient(180deg, #f3f6f8 0%, #eaf0f4 22rem, #e6edf2 100%);
}