Hugging Face's logo

Spaces:
ghostai1
/
SentimentSpark
Running

App Files Community
ghostai1 commited on
Commit
3884117
·
verified ·
1 Parent(s): 80796a5

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +74 -51
style.css CHANGED
@@ -1,107 +1,130 @@
1
  body {
2
  font-family: 'Roboto', sans-serif;
3
- background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
4
- color: #e0e0e0;
5
  min-height: 100vh;
6
  display: flex;
7
  flex-direction: column;
8
  }
9
 
10
- h1 {
11
- font-family: 'Orbitron', sans-serif;
12
- color: #ffffff;
13
- text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
 
14
  }
15
 
16
- .hero {
17
- background: linear-gradient(45deg, #2a2a2a, #3a3a3a);
18
- border-bottom: 2px solid #00ffff;
19
- animation: fadeIn 1s ease-in;
 
20
  }
21
 
22
- .lead {
23
- color: #cccccc;
24
- font-size: 1.25rem;
 
25
  }
26
 
27
  .card {
28
- background-color: #2a2a2a;
29
- border: 1px solid #00ffff;
30
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 
31
  }
32
 
33
  .card:hover {
34
- transform: translateY(-5px);
35
- box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
36
  }
37
 
38
  .form-select {
39
- background-color: #3a3a3a;
40
- border-color: #00ffff;
41
- color: #e0e0e0;
42
- transition: background-color 0.3s ease;
 
43
  }
44
 
45
  .form-select:focus {
46
- background-color: #3a3a3a;
47
- border-color: #00ffff;
48
- box-shadow: 0 0 0 0.2rem rgba(0, 255, 255, 0.5);
49
  }
50
 
51
  .table-dark {
52
- background-color: #2a2a2a;
53
- border-color: #00ffff;
54
  }
55
 
56
  .table-dark th,
57
  .table-dark td {
58
- border-color: #00ffff;
59
- padding: 12px;
 
60
  }
61
 
62
  .table-dark tbody tr {
63
- transition: background-color 0.3s ease, transform 0.2s ease;
64
  }
65
 
66
  .table-dark tbody tr:hover {
67
- background-color: #4a4a4a;
68
- transform: scale(1.02);
69
  }
70
 
71
- .pagination .page-link {
72
- background-color: #3a3a3a;
73
- border-color: #00ffff;
74
- color: #e0e0e0;
75
- transition: background-color 0.3s ease;
 
 
76
  }
77
 
78
- .pagination .page-link:hover {
79
- background-color: #00ffff;
80
- color: #1a1a1a;
 
81
  }
82
 
83
- .pagination .active .page-link {
84
- background-color: #00ffff;
85
- border-color: #00ffff;
86
- color: #1a1a1a;
 
 
 
 
 
87
  }
88
 
89
  .container {
90
- max-width: 1200px;
91
  flex: 1;
92
  }
93
 
94
  footer {
95
- background-color: #1a1a1a;
96
- border-top: 1px solid #00ffff;
97
- color: #999;
 
98
  }
99
 
100
  .border-neon {
101
- border-color: #00ffff !important;
 
 
 
 
 
 
 
 
 
102
  }
103
 
104
- @keyframes fadeIn {
105
- from { opacity: 0; }
106
- to { opacity: 1; }
107
  }
 
1
  body {
2
  font-family: 'Roboto', sans-serif;
3
+ background: linear-gradient(135deg, #1e1e1e 0%, #12122a 100%);
4
+ color: #d3d4e8;
5
  min-height: 100vh;
6
  display: flex;
7
  flex-direction: column;
8
  }
9
 
10
+ .hero {
11
+ background: linear-gradient(45deg, #2a2a3a, #1a1a2a);
12
+ border-bottom: 3px solid #00f6ff;
13
+ animation: slideIn 1.5s ease-out;
14
+ box-shadow: 0 4px 20px rgba(0, 246, 255, 0.3);
15
  }
16
 
17
+ .hero h1 {
18
+ font-family: 'Orbitron', sans-serif;
19
+ color: #ffffff;
20
+ text-shadow: 0 0 8px rgba(0, 246, 255, 0.6);
21
+ letter-spacing: 2px;
22
  }
23
 
24
+ .hero .lead {
25
+ color: #b0b0d0;
26
+ font-size: 1.3rem;
27
+ font-weight: 400;
28
  }
29
 
30
  .card {
31
+ background: #252535;
32
+ border: 2px solid #00f6ff;
33
  transition: transform 0.3s ease, box-shadow 0.3s ease;
34
+ box-shadow: 0 4px 15px rgba(0, 246, 255, 0.2);
35
  }
36
 
37
  .card:hover {
38
+ transform: translateY(-8px);
39
+ box-shadow: 0 6px 20px rgba(0, 246, 255, 0.4);
40
  }
41
 
42
  .form-select {
43
+ background: #2f2f4f;
44
+ border: 1px solid #00f6ff;
45
+ color: #d3d4e8;
46
+ font-weight: 500;
47
+ transition: background 0.3s ease, box-shadow 0.3s ease;
48
  }
49
 
50
  .form-select:focus {
51
+ background: #2f2f4f;
52
+ border-color: #00f6ff;
53
+ box-shadow: 0 0 0 0.25rem rgba(0, 246, 255, 0.5);
54
  }
55
 
56
  .table-dark {
57
+ background: #252535;
58
+ border: 1px solid #00f6ff;
59
  }
60
 
61
  .table-dark th,
62
  .table-dark td {
63
+ border-color: #3a3a5a;
64
+ padding: 12px 15px;
65
+ vertical-align: middle;
66
  }
67
 
68
  .table-dark tbody tr {
69
+ transition: background 0.3s ease, transform 0.2s ease;
70
  }
71
 
72
  .table-dark tbody tr:hover {
73
+ background: #3a3a5a;
74
+ transform: translateX(5px);
75
  }
76
 
77
+ .pagination .page-item .page-link {
78
+ background: #2f2f4f;
79
+ border: 1px solid #00f6ff;
80
+ color: #d3d4e8;
81
+ font-weight: 500;
82
+ transition: background 0.3s ease, color 0.3s ease;
83
+ margin: 0 2px;
84
  }
85
 
86
+ .pagination .page-item.active .page-link {
87
+ background: #00f6ff;
88
+ border-color: #00f6ff;
89
+ color: #1e1e2e;
90
  }
91
 
92
+ .pagination .page-item .page-link:hover {
93
+ background: #00f6ff;
94
+ color: #1e1e2e;
95
+ }
96
+
97
+ .pagination .page-item.disabled .page-link {
98
+ background: #3a3a5a;
99
+ border-color: #3a3a5a;
100
+ color: #6a6a8a;
101
  }
102
 
103
  .container {
104
+ max-width: 1300px;
105
  flex: 1;
106
  }
107
 
108
  footer {
109
+ background: #1a1a2a;
110
+ border-top: 2px solid #00f6ff;
111
+ color: #8a8aaa;
112
+ font-size: 0.9rem;
113
  }
114
 
115
  .border-neon {
116
+ border-color: #00f6ff !important;
117
+ }
118
+
119
+ .border-neon-dark {
120
+ border-color: #3a3a5a !important;
121
+ }
122
+
123
+ @keyframes slideIn {
124
+ from { opacity: 0; transform: translateY(-50px); }
125
+ to { opacity: 1; transform: translateY(0); }
126
  }
127
 
128
+ .table-responsive {
129
+ box-shadow: 0 4px 15px rgba(0, 246, 255, 0.2);
 
130
  }