Hugging Face's logo

Spaces:
annanurov
/
rainytrek
Running

App Files Community
annanurov commited on
Commit
a3fa814
·
verified ·
1 Parent(s): e4c43ab

Created style.css

Browse files
Files changed (1) hide show
  1. src/style.css +172 -0
src/style.css ADDED
@@ -0,0 +1,172 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <style>
2
+ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
3
+
4
+ html, body, [class*="css"] {
5
+ font-family: 'Syne', sans-serif;
6
+ }
7
+
8
+ .stApp {
9
+ background: #0a0f1e;
10
+ color: #e8eaf0;
11
+ }
12
+
13
+ h1, h2, h3 {
14
+ font-family: 'Syne', sans-serif;
15
+ font-weight: 800;
16
+ }
17
+
18
+ .main-title {
19
+ font-family: 'Syne', sans-serif;
20
+ font-size: 3rem;
21
+ font-weight: 800;
22
+ background: linear-gradient(135deg, #64b5f6, #81c784, #fff176);
23
+ -webkit-background-clip: text;
24
+ -webkit-text-fill-color: transparent;
25
+ background-clip: text;
26
+ margin-bottom: 0.2rem;
27
+ }
28
+
29
+ .subtitle {
30
+ color: #78909c;
31
+ font-family: 'Space Mono', monospace;
32
+ font-size: 0.85rem;
33
+ margin-bottom: 2rem;
34
+ letter-spacing: 0.05em;
35
+ }
36
+
37
+ .city-card {
38
+ background: linear-gradient(135deg, #141a2e 0%, #1a2340 100%);
39
+ border: 1px solid #1e2d4a;
40
+ border-radius: 16px;
41
+ padding: 1.5rem;
42
+ margin-bottom: 1.5rem;
43
+ box-shadow: 0 4px 24px rgba(0,0,0,0.4);
44
+ }
45
+
46
+ .city-name {
47
+ font-size: 1.6rem;
48
+ font-weight: 800;
49
+ color: #64b5f6;
50
+ margin-bottom: 0.3rem;
51
+ }
52
+
53
+ .city-coords {
54
+ font-family: 'Space Mono', monospace;
55
+ font-size: 0.72rem;
56
+ color: #546e7a;
57
+ margin-bottom: 1rem;
58
+ }
59
+
60
+ .weather-grid {
61
+ display: grid;
62
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
63
+ gap: 0.75rem;
64
+ margin-top: 1rem;
65
+ }
66
+
67
+ .day-card {
68
+ background: #0d1525;
69
+ border: 1px solid #1e2d4a;
70
+ border-radius: 12px;
71
+ padding: 0.9rem 0.6rem;
72
+ text-align: center;
73
+ transition: transform 0.2s;
74
+ }
75
+
76
+ .day-card:hover {
77
+ transform: translateY(-3px);
78
+ border-color: #64b5f6;
79
+ }
80
+
81
+ .day-label {
82
+ font-family: 'Space Mono', monospace;
83
+ font-size: 0.65rem;
84
+ color: #78909c;
85
+ text-transform: uppercase;
86
+ letter-spacing: 0.08em;
87
+ margin-bottom: 0.4rem;
88
+ }
89
+
90
+ .day-icon {
91
+ font-size: 1.8rem;
92
+ margin: 0.3rem 0;
93
+ }
94
+
95
+ .day-temp-max {
96
+ font-size: 1.1rem;
97
+ font-weight: 700;
98
+ color: #ff8a65;
99
+ }
100
+
101
+ .day-temp-min {
102
+ font-size: 0.85rem;
103
+ color: #64b5f6;
104
+ }
105
+
106
+ .day-precip {
107
+ font-family: 'Space Mono', monospace;
108
+ font-size: 0.62rem;
109
+ color: #546e7a;
110
+ margin-top: 0.3rem;
111
+ }
112
+
113
+ .stat-row {
114
+ display: flex;
115
+ gap: 1rem;
116
+ flex-wrap: wrap;
117
+ margin-bottom: 0.5rem;
118
+ }
119
+
120
+ .stat-pill {
121
+ background: #0d1525;
122
+ border: 1px solid #1e2d4a;
123
+ border-radius: 20px;
124
+ padding: 0.3rem 0.75rem;
125
+ font-family: 'Space Mono', monospace;
126
+ font-size: 0.72rem;
127
+ color: #90a4ae;
128
+ }
129
+
130
+ .stat-pill span {
131
+ color: #81c784;
132
+ font-weight: 700;
133
+ }
134
+
135
+ .error-box {
136
+ background: #1a0d0d;
137
+ border: 1px solid #b71c1c;
138
+ border-radius: 12px;
139
+ padding: 1rem 1.25rem;
140
+ color: #ef9a9a;
141
+ font-family: 'Space Mono', monospace;
142
+ font-size: 0.8rem;
143
+ }
144
+
145
+ .llm-box {
146
+ background: #0d1a25;
147
+ border: 1px solid #1e3a4a;
148
+ border-radius: 12px;
149
+ padding: 1rem 1.25rem;
150
+ color: #b0bec5;
151
+ font-family: 'Space Mono', monospace;
152
+ font-size: 0.78rem;
153
+ line-height: 1.6;
154
+ margin-bottom: 1.5rem;
155
+ }
156
+
157
+ .llm-label {
158
+ font-size: 0.65rem;
159
+ text-transform: uppercase;
160
+ letter-spacing: 0.1em;
161
+ color: #546e7a;
162
+ margin-bottom: 0.4rem;
163
+ }
164
+
165
+ stTextInput > div > div > input {
166
+ background: #141a2e !important;
167
+ border: 1px solid #1e2d4a !important;
168
+ border-radius: 12px !important;
169
+ color: #e8eaf0 !important;
170
+ font-family: 'Space Mono', monospace !important;
171
+ }
172
+ </style>