Hugging Face's logo

Spaces:
larxius
/
SentinelScan-WSS
Running on CPU Upgrade

App Files Community
larxius commited on
Commit
ca3f7d6
·
verified ·
1 Parent(s): ca5e972

Update frontend/src/index.css

Browse files
Files changed (1) hide show
  1. frontend/src/index.css +137 -95
frontend/src/index.css CHANGED
@@ -1,95 +1,137 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
-
5
- @layer base {
6
- html {
7
- font-size: 14px; /* Decreased from default 16px */
8
- }
9
- :root {
10
- --on-surface: #1e1e1e;
11
- --on-primary-container: #1e3a8a;
12
- --inverse-on-surface: #f4f0ef;
13
- --error-container: #ffdad6;
14
- --on-secondary: #ffffff;
15
- --surface-container: #efedec;
16
- --surface-tint: #2563eb;
17
- --secondary: #7c3aed;
18
- --surface-container-low: #f4f3f2;
19
- --surface-variant: #dfe2eb;
20
- --on-error: #ffffff;
21
- --secondary-container: #e0e7ff;
22
- --surface-bright: #f9f9f9;
23
- --surface-dim: #ded8d7;
24
- --tertiary-container: #f3e8ff;
25
- --surface-container-high: #e9e8e7;
26
- --error: #ba1a1a;
27
- --inverse-surface: #313030;
28
- --on-tertiary-container: #581c87;
29
- --surface-container-highest: #e3e2e1;
30
- --surface-container-lowest: #ffffff;
31
- --on-secondary-container: #3730a3;
32
- --outline-variant: #c3c7cf;
33
- --primary-container: #dbeafe;
34
- --on-surface-variant: #43474e;
35
- --tertiary: #9333ea;
36
- --surface: #faf9f8;
37
- --on-primary: #ffffff;
38
- --on-tertiary: #ffffff;
39
- --primary: #2563eb;
40
- }
41
- }
42
-
43
- .brand-gradient {
44
- background: linear-gradient(to right, #0a1128 0%, #2563eb 45%, #9333ea 100%);
45
- -webkit-background-clip: text;
46
- background-clip: text;
47
- color: transparent;
48
- font-weight: 800;
49
- }
50
-
51
- /* Custom UI Animations */
52
- @keyframes fade-in {
53
- 0% { opacity: 0; transform: translateY(10px); }
54
- 100% { opacity: 1; transform: translateY(0); }
55
- }
56
- .animate-fade-in {
57
- animation: fade-in 0.4s ease-out forwards;
58
- }
59
-
60
- @keyframes slide-up {
61
- 0% { opacity: 0; transform: translateY(30px); }
62
- 100% { opacity: 1; transform: translateY(0); }
63
- }
64
- .animate-slide-up {
65
- animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
66
- }
67
-
68
- @keyframes float {
69
- 0% { transform: translateY(0px) rotate(0deg); }
70
- 50% { transform: translateY(-20px) rotate(2deg); }
71
- 100% { transform: translateY(0px) rotate(0deg); }
72
- }
73
- .animate-float {
74
- animation: float 8s ease-in-out infinite;
75
- }
76
-
77
- @keyframes float-delayed {
78
- 0% { transform: translateY(0px) rotate(0deg); }
79
- 50% { transform: translateY(20px) rotate(-2deg); }
80
- 100% { transform: translateY(0px) rotate(0deg); }
81
- }
82
- .animate-float-delayed {
83
- animation: float-delayed 10s ease-in-out infinite;
84
- }
85
-
86
- .glass-panel {
87
- background: rgba(255, 255, 255, 0.05);
88
- backdrop-filter: blur(16px);
89
- -webkit-backdrop-filter: blur(16px);
90
- border: 1px solid rgba(255, 255, 255, 0.1);
91
- }
92
- .dark .glass-panel {
93
- background: rgba(15, 23, 42, 0.6);
94
- border: 1px solid rgba(255, 255, 255, 0.05);
95
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @layer base {
6
+ html {
7
+ font-size: 14px; /* Decreased from default 16px */
8
+ }
9
+ :root {
10
+ --on-surface: #1e1e1e;
11
+ --on-primary-container: #1e3a8a;
12
+ --inverse-on-surface: #f4f0ef;
13
+ --error-container: #ffdad6;
14
+ --on-secondary: #ffffff;
15
+ --surface-container: #efedec;
16
+ --surface-tint: #2563eb;
17
+ --secondary: #7c3aed;
18
+ --surface-container-low: #f4f3f2;
19
+ --surface-variant: #dfe2eb;
20
+ --on-error: #ffffff;
21
+ --secondary-container: #e0e7ff;
22
+ --surface-bright: #f9f9f9;
23
+ --surface-dim: #ded8d7;
24
+ --tertiary-container: #f3e8ff;
25
+ --surface-container-high: #e9e8e7;
26
+ --error: #ba1a1a;
27
+ --inverse-surface: #313030;
28
+ --on-tertiary-container: #581c87;
29
+ --surface-container-highest: #e3e2e1;
30
+ --surface-container-lowest: #ffffff;
31
+ --on-secondary-container: #3730a3;
32
+ --outline-variant: #c3c7cf;
33
+ --primary-container: #dbeafe;
34
+ --on-surface-variant: #43474e;
35
+ --tertiary: #9333ea;
36
+ --surface: #faf9f8;
37
+ --on-primary: #ffffff;
38
+ --on-tertiary: #ffffff;
39
+ --primary: #2563eb;
40
+ }
41
+ }
42
+
43
+ .brand-gradient {
44
+ background: linear-gradient(to right, #0a1128 0%, #2563eb 45%, #9333ea 100%);
45
+ -webkit-background-clip: text;
46
+ background-clip: text;
47
+ color: transparent;
48
+ font-weight: 800;
49
+ }
50
+
51
+ /* Custom UI Animations */
52
+ @keyframes fade-in {
53
+ 0% { opacity: 0; transform: translateY(10px); }
54
+ 100% { opacity: 1; transform: translateY(0); }
55
+ }
56
+ .animate-fade-in {
57
+ animation: fade-in 0.4s ease-out forwards;
58
+ }
59
+
60
+ @keyframes slide-up {
61
+ 0% { opacity: 0; transform: translateY(30px); }
62
+ 100% { opacity: 1; transform: translateY(0); }
63
+ }
64
+ .animate-slide-up {
65
+ animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
66
+ }
67
+
68
+ @keyframes float {
69
+ 0% { transform: translateY(0px) rotate(0deg); }
70
+ 50% { transform: translateY(-20px) rotate(2deg); }
71
+ 100% { transform: translateY(0px) rotate(0deg); }
72
+ }
73
+ .animate-float {
74
+ animation: float 8s ease-in-out infinite;
75
+ }
76
+
77
+ @keyframes float-delayed {
78
+ 0% { transform: translateY(0px) rotate(0deg); }
79
+ 50% { transform: translateY(20px) rotate(-2deg); }
80
+ 100% { transform: translateY(0px) rotate(0deg); }
81
+ }
82
+ .animate-float-delayed {
83
+ animation: float-delayed 10s ease-in-out infinite;
84
+ }
85
+
86
+ .glass-panel {
87
+ background: rgba(255, 255, 255, 0.05);
88
+ backdrop-filter: blur(16px);
89
+ -webkit-backdrop-filter: blur(16px);
90
+ border: 1px solid rgba(255, 255, 255, 0.1);
91
+ }
92
+ .dark .glass-panel {
93
+ background: rgba(15, 23, 42, 0.6);
94
+ border: 1px solid rgba(255, 255, 255, 0.05);
95
+ }
96
+
97
+ /* Custom Modern Rounded Dark Scrollbars */
98
+ ::-webkit-scrollbar {
99
+ width: 7px;
100
+ height: 7px;
101
+ }
102
+
103
+ ::-webkit-scrollbar-track {
104
+ background: #020617;
105
+ border-radius: 8px;
106
+ }
107
+
108
+ ::-webkit-scrollbar-thumb {
109
+ background: #334155;
110
+ border-radius: 8px;
111
+ border: 2px solid #020617;
112
+ }
113
+
114
+ ::-webkit-scrollbar-thumb:hover {
115
+ background: #38bdf8;
116
+ }
117
+
118
+ .custom-scrollbar::-webkit-scrollbar {
119
+ width: 7px;
120
+ height: 7px;
121
+ }
122
+
123
+ .custom-scrollbar::-webkit-scrollbar-track {
124
+ background: #020617;
125
+ border-radius: 8px;
126
+ }
127
+
128
+ .custom-scrollbar::-webkit-scrollbar-thumb {
129
+ background: #334155;
130
+ border-radius: 8px;
131
+ border: 1px solid #0f172a;
132
+ }
133
+
134
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
135
+ background: #38bdf8;
136
+ }
137
+