Hugging Face's logo

Spaces:
mgbam
/
Synthetic_Biology
Sleeping

App Files Community
mgbam commited on
Commit
5e07340
·
verified ·
1 Parent(s): 7984ae1

Update genesis/static/style.css

Browse files
Files changed (1) hide show
  1. genesis/static/style.css +85 -23
genesis/static/style.css CHANGED
@@ -1,43 +1,105 @@
 
 
 
1
  body {
2
- background-color: #0a0f0a;
3
- font-family: 'Segoe UI', sans-serif;
4
- color: #d0ffd0;
5
  }
6
 
7
- .gradio-container {
8
- background-color: #0f1a0f !important;
 
 
9
  border-radius: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  padding: 10px;
 
 
 
 
 
 
 
11
  }
12
 
 
13
  button {
14
- background-color: #22aa22 !important;
15
- color: white !important;
16
- border-radius: 8px !important;
17
- border: none !important;
18
- transition: background-color 0.3s ease;
 
 
 
 
 
19
  }
20
-
21
  button:hover {
22
- background-color: #ff6600 !important;
 
 
23
  }
24
 
25
- input, textarea, select {
26
- background-color: #1a2a1a !important;
27
- border: 1px solid #22aa22 !important;
28
- color: #d0ffd0 !important;
 
 
 
 
29
  }
30
 
 
31
  a {
32
- color: #ff6600 !important;
 
 
 
 
 
33
  }
34
 
35
- .tab-nav {
36
- background-color: #0a0f0a !important;
 
 
 
37
  }
38
 
39
- .gr-block {
40
- border: 1px solid #22aa22;
41
- border-radius: 8px;
42
- padding: 8px;
43
  }
 
1
+ /* ===== GENESIS-AI LCARS Biotech Theme ===== */
2
+
3
+ /* Dark background for biotech feel */
4
  body {
5
+ background-color: #0d0d0d;
6
+ font-family: 'Orbitron', sans-serif;
7
+ color: #d4f5d0;
8
  }
9
 
10
+ /* App container */
11
+ #root {
12
+ padding: 20px;
13
+ border: 2px solid #00ff99;
14
  border-radius: 12px;
15
+ box-shadow: 0 0 25px #00ff99;
16
+ background: linear-gradient(145deg, #0d0d0d, #121212);
17
+ }
18
+
19
+ /* Tabs styling */
20
+ .gradio-tabs {
21
+ background-color: rgba(0, 255, 153, 0.05);
22
+ border: 1px solid #00ff99;
23
+ border-radius: 10px;
24
+ box-shadow: inset 0 0 10px #00ff99;
25
+ }
26
+
27
+ /* Tab buttons */
28
+ .gradio-tabs button {
29
+ background: transparent;
30
+ color: #ff6600;
31
+ font-weight: bold;
32
+ border: none;
33
+ padding: 12px;
34
+ transition: all 0.3s ease;
35
+ }
36
+ .gradio-tabs button:hover {
37
+ background-color: rgba(255, 102, 0, 0.2);
38
+ box-shadow: 0 0 10px #ff6600;
39
+ }
40
+
41
+ /* Inputs */
42
+ textarea, input[type="text"], select {
43
+ background-color: #111;
44
+ color: #d4f5d0;
45
+ border: 1px solid #00ff99;
46
+ border-radius: 6px;
47
  padding: 10px;
48
+ font-size: 14px;
49
+ box-shadow: inset 0 0 5px #00ff99;
50
+ }
51
+ textarea:focus, input[type="text"]:focus {
52
+ outline: none;
53
+ border-color: #ff6600;
54
+ box-shadow: 0 0 10px #ff6600;
55
  }
56
 
57
+ /* Buttons */
58
  button {
59
+ background: linear-gradient(145deg, #00ff99, #009966);
60
+ color: #0d0d0d;
61
+ border: none;
62
+ border-radius: 8px;
63
+ padding: 12px 20px;
64
+ font-weight: bold;
65
+ cursor: pointer;
66
+ text-transform: uppercase;
67
+ transition: all 0.3s ease-in-out;
68
+ box-shadow: 0 0 10px #00ff99;
69
  }
 
70
  button:hover {
71
+ background: linear-gradient(145deg, #ff6600, #cc5200);
72
+ box-shadow: 0 0 15px #ff6600;
73
+ transform: scale(1.05);
74
  }
75
 
76
+ /* Outputs */
77
+ .output {
78
+ background-color: rgba(0, 255, 153, 0.05);
79
+ border: 1px solid #00ff99;
80
+ border-radius: 8px;
81
+ padding: 15px;
82
+ color: #d4f5d0;
83
+ box-shadow: inset 0 0 15px #00ff99;
84
  }
85
 
86
+ /* Citations and links */
87
  a {
88
+ color: #ff6600;
89
+ text-decoration: none;
90
+ }
91
+ a:hover {
92
+ text-decoration: underline;
93
+ color: #ff884d;
94
  }
95
 
96
+ /* Animations */
97
+ @keyframes glow {
98
+ 0% { box-shadow: 0 0 5px #00ff99; }
99
+ 50% { box-shadow: 0 0 20px #00ff99; }
100
+ 100% { box-shadow: 0 0 5px #00ff99; }
101
  }
102
 
103
+ button {
104
+ animation: glow 2s infinite alternate;
 
 
105
  }