Hugging Face's logo

Spaces:
mgbam
/
Synthetic_Biology
Sleeping

App Files Community
mgbam commited on
Commit
3703d2e
·
verified ·
1 Parent(s): 47975fb

Update genesis/static/style.css

Browse files
Files changed (1) hide show
  1. genesis/static/style.css +88 -78
genesis/static/style.css CHANGED
@@ -1,105 +1,115 @@
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
  }
 
1
+ /* ---------- GLOBAL THEME ---------- */
 
 
2
  body {
3
+ background-color: #0a1a0f;
4
  font-family: 'Orbitron', sans-serif;
5
+ color: #e0e0e0;
6
+ margin: 0;
7
+ padding: 0;
8
+ overflow-x: hidden;
9
  }
10
 
11
+ h1, h2, h3 {
12
+ font-family: 'Orbitron', sans-serif;
13
+ color: #00ff9d;
14
+ text-shadow: 0 0 10px rgba(0, 255, 157, 0.6);
 
 
 
15
  }
16
 
17
+ a {
18
+ color: #ff9100;
19
+ text-decoration: none;
 
 
 
20
  }
21
+ a:hover {
22
+ text-shadow: 0 0 8px #ff9100;
 
 
 
 
 
 
 
23
  }
24
+
25
+ /* ---------- GRADIO PANEL STYLING ---------- */
26
+ .gradio-container {
27
+ max-width: 95%;
28
+ margin: auto;
29
+ padding: 15px;
30
  }
31
 
32
+ .gr-block {
33
+ background: rgba(0, 255, 157, 0.05);
34
+ border: 1px solid rgba(0, 255, 157, 0.2);
35
+ border-radius: 12px;
36
+ box-shadow: 0 0 15px rgba(0, 255, 157, 0.15);
37
+ padding: 15px;
38
+ margin-bottom: 20px;
39
+ transition: all 0.3s ease-in-out;
 
40
  }
41
+ .gr-block:hover {
42
+ box-shadow: 0 0 20px rgba(255, 145, 0, 0.4);
43
+ transform: scale(1.02);
 
44
  }
45
 
46
+ /* ---------- BUTTONS ---------- */
47
+ button, .gr-button {
48
+ background: linear-gradient(90deg, #00ff9d, #ff9100);
49
+ color: #0a1a0f !important;
 
 
 
50
  font-weight: bold;
51
+ border-radius: 6px;
52
+ padding: 10px 20px;
53
+ border: none;
54
  text-transform: uppercase;
55
+ box-shadow: 0 0 10px rgba(0, 255, 157, 0.4);
56
+ cursor: pointer;
57
+ transition: all 0.3s ease;
58
  }
59
+ button:hover, .gr-button:hover {
60
+ box-shadow: 0 0 15px rgba(255, 145, 0, 0.6);
61
+ transform: translateY(-2px);
 
62
  }
63
 
64
+ /* ---------- TABS ---------- */
65
+ .gradio-tabs {
66
+ background: rgba(0, 255, 157, 0.05);
 
67
  border-radius: 8px;
68
+ border: 1px solid rgba(255, 145, 0, 0.4);
69
+ box-shadow: 0 0 10px rgba(255, 145, 0, 0.3);
 
70
  }
71
 
72
+ /* ---------- SCROLLBAR ---------- */
73
+ ::-webkit-scrollbar {
74
+ width: 10px;
 
75
  }
76
+ ::-webkit-scrollbar-track {
77
+ background: #0a1a0f;
78
+ }
79
+ ::-webkit-scrollbar-thumb {
80
+ background: linear-gradient(#00ff9d, #ff9100);
81
+ border-radius: 5px;
82
+ }
83
+
84
+ /* ---------- INPUT FIELDS ---------- */
85
+ input, textarea {
86
+ background: rgba(0, 255, 157, 0.05);
87
+ border: 1px solid rgba(0, 255, 157, 0.2);
88
+ border-radius: 8px;
89
+ color: #fff;
90
+ padding: 8px;
91
+ }
92
+ input:focus, textarea:focus {
93
+ border-color: #ff9100;
94
+ outline: none;
95
+ box-shadow: 0 0 8px rgba(255, 145, 0, 0.5);
96
+ }
97
+
98
+ /* ---------- GRAPH DISPLAY ---------- */
99
+ .graph-container {
100
+ background: rgba(0, 255, 157, 0.05);
101
+ padding: 10px;
102
+ border-radius: 8px;
103
+ box-shadow: inset 0 0 15px rgba(0, 255, 157, 0.2);
104
  }
105
 
106
+ /* ---------- ANIMATION ---------- */
107
+ @keyframes pulse {
108
+ 0% { box-shadow: 0 0 5px rgba(0, 255, 157, 0.4); }
109
+ 50% { box-shadow: 0 0 20px rgba(255, 145, 0, 0.6); }
110
+ 100% { box-shadow: 0 0 5px rgba(0, 255, 157, 0.4); }
111
  }
112
 
113
+ .pulse {
114
+ animation: pulse 2s infinite;
115
  }