Hugging Face's logo

Spaces:
mgbam
/
Synthetic_Biology
Running

App Files Community
mgbam commited on
Commit
adad416
·
verified ·
1 Parent(s): 3acac05

Update genesis/static/style.css

Browse files
Files changed (1) hide show
  1. genesis/static/style.css +91 -79
genesis/static/style.css CHANGED
@@ -1,115 +1,127 @@
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
  }
 
1
+ /* static/style.css */
2
+
3
+ /* ===== General Layout ===== */
4
  body {
5
+ background-color: #0b0f0c; /* Deep biotech black */
6
+ color: #e0e5df; /* Light greenish text */
7
  font-family: 'Orbitron', sans-serif;
 
8
  margin: 0;
9
  padding: 0;
 
10
  }
11
 
12
+ /* ===== Headings ===== */
13
  h1, h2, h3 {
14
+ color: #00ff7f; /* Neon green */
15
+ text-shadow: 0 0 10px rgba(0, 255, 127, 0.8);
16
+ letter-spacing: 2px;
17
  }
18
 
19
+ /* ===== Tab Navigation ===== */
20
+ .gradio-tabs .tab-nav {
21
+ background-color: #111;
22
+ border-bottom: 3px solid #ff7f00; /* Orange accent */
 
 
23
  }
24
 
25
+ .gradio-tabs .tab-nav button {
26
+ background-color: #1a1f1d;
27
+ color: #00ff7f;
28
+ border: none;
29
+ padding: 12px 20px;
30
+ transition: background 0.3s ease, color 0.3s ease;
31
  }
32
 
33
+ .gradio-tabs .tab-nav button:hover {
34
+ background-color: #ff7f00;
35
+ color: #000;
 
 
 
 
 
36
  }
37
+
38
+ .gradio-tabs .tab-nav button.active {
39
+ background-color: #00ff7f;
40
+ color: #000;
41
  }
42
 
43
+ /* ===== Buttons ===== */
44
+ button {
45
+ background-color: #00ff7f;
46
+ border: none;
47
+ padding: 10px 18px;
48
+ color: #000;
49
  font-weight: bold;
50
+ border-radius: 8px;
51
+ transition: transform 0.2s ease, background-color 0.3s ease;
52
+ }
53
+
54
+ button:hover {
55
+ background-color: #ff7f00;
56
+ transform: scale(1.05);
57
+ }
58
+
59
+ /* ===== Inputs & Textboxes ===== */
60
+ input, textarea, select {
61
+ background-color: #0f1512;
62
+ border: 1px solid #00ff7f;
63
+ color: #e0e5df;
64
+ padding: 10px;
65
  border-radius: 6px;
 
 
 
 
 
 
66
  }
67
+
68
+ textarea:focus, input:focus, select:focus {
69
+ border-color: #ff7f00;
70
+ outline: none;
71
  }
72
 
73
+ /* ===== JSON & Data Outputs ===== */
74
+ .output-json {
75
+ background-color: #141c18;
76
+ border: 1px solid #00ff7f;
77
+ padding: 12px;
78
  border-radius: 8px;
79
+ overflow: auto;
 
80
  }
81
 
82
+ /* ===== Images ===== */
83
+ img {
84
+ border: 3px solid #ff7f00;
85
+ border-radius: 10px;
86
+ box-shadow: 0 0 15px rgba(255, 127, 0, 0.7);
87
  }
88
+
89
+ /* ===== Audio Player ===== */
90
+ audio {
91
+ background-color: #0b0f0c;
92
+ border: 2px solid #00ff7f;
93
+ border-radius: 8px;
94
  }
95
+
96
+ /* ===== PDF File Download ===== */
97
+ a[href$=".pdf"], .file-download {
98
+ color: #ff7f00;
99
+ font-weight: bold;
100
+ text-decoration: none;
101
  }
102
 
103
+ a[href$=".pdf"]:hover, .file-download:hover {
104
+ color: #00ff7f;
105
+ text-decoration: underline;
 
 
 
 
106
  }
107
+
108
+ /* ===== Glow Animations ===== */
109
+ @keyframes glowGreen {
110
+ 0% { box-shadow: 0 0 5px #00ff7f; }
111
+ 50% { box-shadow: 0 0 20px #00ff7f; }
112
+ 100% { box-shadow: 0 0 5px #00ff7f; }
113
  }
114
 
115
+ @keyframes glowOrange {
116
+ 0% { box-shadow: 0 0 5px #ff7f00; }
117
+ 50% { box-shadow: 0 0 20px #ff7f00; }
118
+ 100% { box-shadow: 0 0 5px #ff7f00; }
 
 
119
  }
120
 
121
+ button {
122
+ animation: glowGreen 2s infinite alternate;
 
 
 
123
  }
124
 
125
+ .gradio-tabs .tab-nav button.active {
126
+ animation: glowOrange 2s infinite alternate;
127
  }