Hugging Face's logo

Spaces:
rohan965
/
Python_Project_2
Sleeping

App Files Community
rohan965 commited on
Commit
c40bec0
·
verified ·
1 Parent(s): a35d154

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +64 -35
style.css CHANGED
@@ -1,5 +1,5 @@
1
  /* ===============================
2
- Dark theme base
3
  =============================== */
4
 
5
  :root{
@@ -9,32 +9,34 @@
9
  --card2:#0e1628;
10
  --text:#e7eefc;
11
  --muted:#b8c6e6;
12
- --border:rgba(255,255,255,0.12);
13
- --accent:#3b82f6; /* blue */
14
- --accent2:#22c55e; /* green */
15
  }
16
 
17
- body{
 
18
  background: radial-gradient(1200px 800px at 10% 10%, #142a52 0%, var(--bg1) 40%, var(--bg2) 100%) !important;
19
  color: var(--text) !important;
20
  }
21
 
22
- /* Main white wrapper -> dark card */
23
- .gradio-container{
24
- background: rgba(17, 26, 46, 0.92) !important;
 
25
  border: 1px solid var(--border) !important;
26
- border-radius: 18px !important;
27
- padding: 18px !important;
28
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
 
29
  }
30
 
31
- /* Headings */
32
- h1,h2,h3, label, p, span{
33
  color: var(--text) !important;
34
  }
35
 
36
  /* Tabs */
37
- button[role="tab"]{
38
  border-radius: 12px !important;
39
  border: 1px solid var(--border) !important;
40
  background: rgba(255,255,255,0.06) !important;
@@ -42,42 +44,69 @@ button[role="tab"]{
42
  font-weight: 650 !important;
43
  }
44
 
45
- button[role="tab"][aria-selected="true"]{
46
- background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(34,197,94,0.25)) !important;
47
- color: var(--text) !important;
48
- border-color: rgba(59,130,246,0.6) !important;
49
  }
50
 
51
  /* Buttons */
52
- button{
53
  border-radius: 12px !important;
 
54
  border: 1px solid var(--border) !important;
55
- background: rgba(255,255,255,0.07) !important;
56
- color: var(--text) !important;
57
- font-weight: 650 !important;
58
  }
59
 
60
- button:hover{ opacity: 0.92; }
 
 
 
 
 
 
 
 
 
61
 
62
- button.primary{
63
- background: linear-gradient(135deg, rgba(59,130,246,0.8), rgba(59,130,246,0.55)) !important;
64
- border-color: rgba(59,130,246,0.8) !important;
 
65
  }
66
 
67
- /* Panels / boxes */
68
- textarea, .json-output, .gr-dataframe, .gr-box, .gr-panel{
69
- background: rgba(14, 22, 40, 0.85) !important;
 
70
  border: 1px solid var(--border) !important;
71
- border-radius: 14px !important;
72
- color: var(--text) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
73
  }
74
 
75
  /* Inputs */
76
- input, select{
77
- background: rgba(14, 22, 40, 0.85) !important;
78
  border: 1px solid var(--border) !important;
79
- color: var(--text) !important;
80
  }
81
 
82
- /* Markdown links */
83
- a{ color: #93c5fd !important; }
 
 
 
1
  /* ===============================
2
+ DARK THEME FIXED VERSION
3
  =============================== */
4
 
5
  :root{
 
9
  --card2:#0e1628;
10
  --text:#e7eefc;
11
  --muted:#b8c6e6;
12
+ --border:rgba(255,255,255,0.15);
13
+ --accent:#3b82f6;
14
+ --green:#22c55e;
15
  }
16
 
17
+ /* Page background */
18
+ body {
19
  background: radial-gradient(1200px 800px at 10% 10%, #142a52 0%, var(--bg1) 40%, var(--bg2) 100%) !important;
20
  color: var(--text) !important;
21
  }
22
 
23
+ /* Main container */
24
+ .gradio-container {
25
+ background: rgba(17, 26, 46, 0.95) !important;
26
+ border-radius: 20px !important;
27
  border: 1px solid var(--border) !important;
28
+ padding: 20px !important;
 
29
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
30
+ color: var(--text) !important;
31
  }
32
 
33
+ /* Force text everywhere */
34
+ * {
35
  color: var(--text) !important;
36
  }
37
 
38
  /* Tabs */
39
+ button[role="tab"] {
40
  border-radius: 12px !important;
41
  border: 1px solid var(--border) !important;
42
  background: rgba(255,255,255,0.06) !important;
 
44
  font-weight: 650 !important;
45
  }
46
 
47
+ button[role="tab"][aria-selected="true"] {
48
+ background: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(34,197,94,0.3)) !important;
49
+ color: white !important;
50
+ border-color: var(--accent) !important;
51
  }
52
 
53
  /* Buttons */
54
+ button {
55
  border-radius: 12px !important;
56
+ background: rgba(255,255,255,0.08) !important;
57
  border: 1px solid var(--border) !important;
58
+ font-weight: 600 !important;
59
+ color: white !important;
 
60
  }
61
 
62
+ button:hover {
63
+ opacity: 0.9;
64
+ }
65
+
66
+ /* Panels & containers */
67
+ .gr-box, .gr-panel {
68
+ background: rgba(14, 22, 40, 0.9) !important;
69
+ border: 1px solid var(--border) !important;
70
+ border-radius: 15px !important;
71
+ }
72
 
73
+ /* JSON viewer */
74
+ .json-output {
75
+ background: #0e1628 !important;
76
+ color: #e7eefc !important;
77
  }
78
 
79
+ /* Textareas */
80
+ textarea {
81
+ background: #0e1628 !important;
82
+ color: #e7eefc !important;
83
  border: 1px solid var(--border) !important;
84
+ }
85
+
86
+ /* DataFrames */
87
+ .gr-dataframe {
88
+ background: #0e1628 !important;
89
+ color: #e7eefc !important;
90
+ }
91
+
92
+ .gr-dataframe table {
93
+ background: #0e1628 !important;
94
+ color: #e7eefc !important;
95
+ }
96
+
97
+ .gr-dataframe th {
98
+ background: #142a52 !important;
99
+ color: white !important;
100
  }
101
 
102
  /* Inputs */
103
+ input, select {
104
+ background: #0e1628 !important;
105
  border: 1px solid var(--border) !important;
106
+ color: white !important;
107
  }
108
 
109
+ /* Headings */
110
+ h1, h2, h3 {
111
+ color: white !important;
112
+ }