abhaypratapsingh111 commited on
Commit
d569537
·
verified ·
1 Parent(s): edd7d12

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. static/custom.css +143 -0
static/custom.css ADDED
@@ -0,0 +1,143 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom CSS for Chronos 2 Forecasting App */
2
+
3
+ /* Body and container */
4
+ body {
5
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
6
+ background-color: #f8f9fa;
7
+ }
8
+
9
+ /* Card enhancements */
10
+ .card {
11
+ border: none;
12
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
13
+ margin-bottom: 1.5rem;
14
+ transition: box-shadow 0.3s ease;
15
+ }
16
+
17
+ .card:hover {
18
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
19
+ }
20
+
21
+ .card-header {
22
+ background-color: #fff;
23
+ border-bottom: 2px solid #0066CC;
24
+ font-weight: 600;
25
+ }
26
+
27
+ /* Upload area */
28
+ #upload-data {
29
+ cursor: pointer;
30
+ transition: all 0.3s ease;
31
+ }
32
+
33
+ #upload-data:hover {
34
+ border-color: #0066CC !important;
35
+ background-color: #e7f3ff !important;
36
+ }
37
+
38
+ /* Buttons */
39
+ .btn-primary {
40
+ background-color: #0066CC;
41
+ border-color: #0066CC;
42
+ }
43
+
44
+ .btn-primary:hover {
45
+ background-color: #0052a3;
46
+ border-color: #0052a3;
47
+ }
48
+
49
+ /* Loading spinner */
50
+ .dash-spinner {
51
+ color: #0066CC;
52
+ }
53
+
54
+ /* Slider customization */
55
+ .rc-slider-track {
56
+ background-color: #0066CC;
57
+ }
58
+
59
+ .rc-slider-handle {
60
+ border-color: #0066CC;
61
+ }
62
+
63
+ .rc-slider-handle:active,
64
+ .rc-slider-handle:focus,
65
+ .rc-slider-handle:hover {
66
+ border-color: #0052a3;
67
+ box-shadow: 0 0 0 5px rgba(0, 102, 204, 0.2);
68
+ }
69
+
70
+ /* Table styling */
71
+ .table {
72
+ font-size: 0.9rem;
73
+ }
74
+
75
+ .table thead th {
76
+ background-color: #0066CC;
77
+ color: white;
78
+ border: none;
79
+ font-weight: 600;
80
+ }
81
+
82
+ /* Alert styling */
83
+ .alert {
84
+ border-radius: 8px;
85
+ border: none;
86
+ }
87
+
88
+ /* Responsive adjustments */
89
+ @media (max-width: 768px) {
90
+ .card-body {
91
+ padding: 1rem;
92
+ }
93
+
94
+ h2 {
95
+ font-size: 1.5rem;
96
+ }
97
+
98
+ h5 {
99
+ font-size: 1.1rem;
100
+ }
101
+ }
102
+
103
+ /* Chart container */
104
+ #forecast-chart {
105
+ border-radius: 8px;
106
+ }
107
+
108
+ /* Metrics cards */
109
+ .metrics-card {
110
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
111
+ color: white;
112
+ border-radius: 12px;
113
+ padding: 1.5rem;
114
+ text-align: center;
115
+ }
116
+
117
+ /* Footer */
118
+ footer {
119
+ margin-top: 3rem;
120
+ padding: 1rem 0;
121
+ border-top: 1px solid #dee2e6;
122
+ }
123
+
124
+ /* Accessibility improvements */
125
+ :focus {
126
+ outline: 2px solid #0066CC;
127
+ outline-offset: 2px;
128
+ }
129
+
130
+ /* Loading overlay */
131
+ ._dash-loading {
132
+ background-color: rgba(255, 255, 255, 0.8);
133
+ }
134
+
135
+ ._dash-loading-callback {
136
+ color: #0066CC;
137
+ }
138
+
139
+ /* Quality report badges */
140
+ .badge {
141
+ font-weight: 500;
142
+ padding: 0.5em 0.75em;
143
+ }