Hugging Face's logo

Spaces:
rohan965
/
Python_Project_2
Sleeping

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

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +38 -75
style.css CHANGED
@@ -1,112 +1,75 @@
1
  /* ===============================
2
- DARK THEME FIXED VERSION
3
  =============================== */
4
 
5
- :root{
6
- --bg1:#0b1220;
7
- --bg2:#0f1b33;
8
- --card:#111a2e;
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;
43
- color: var(--muted) !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
  }
 
1
  /* ===============================
2
+ CLEAN WHITE + BLUE THEME
3
  =============================== */
4
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  /* Page background */
6
  body {
7
+ background: linear-gradient(135deg, #eef3fb, #dce8f8);
 
8
  }
9
 
10
+ /* Main app container */
11
  .gradio-container {
12
+ background-color: white !important;
13
+ border-radius: 20px !important;
14
+ padding: 24px !important;
15
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
16
+ }
17
+
18
+ /* Headings */
19
+ h1 {
20
+ color: #1e3a8a !important;
21
  }
22
 
23
+ h2, h3 {
24
+ color: #1f2937 !important;
 
25
  }
26
 
27
  /* Tabs */
28
  button[role="tab"] {
29
+ border-radius: 12px !important;
30
+ font-weight: 600 !important;
31
+ border: none !important;
 
 
32
  }
33
 
34
  button[role="tab"][aria-selected="true"] {
35
+ background-color: #2563eb !important;
36
+ color: white !important;
 
37
  }
38
 
39
  /* Buttons */
40
  button {
41
+ border-radius: 12px !important;
42
+ font-weight: 600 !important;
43
+ border: none !important;
 
 
44
  }
45
 
46
+ button.primary {
47
+ background-color: #2563eb !important;
48
+ color: white !important;
49
  }
50
 
51
+ button:hover {
52
+ opacity: 0.92;
 
 
 
53
  }
54
 
55
+ /* Panels / boxes */
56
+ .gr-box, .gr-panel {
57
+ border-radius: 16px !important;
58
+ border: 1px solid #e5e7eb !important;
59
  }
60
 
61
+ /* JSON + Logs */
62
+ textarea, .json-output {
63
+ border-radius: 12px !important;
64
+ border: 1px solid #e5e7eb !important;
 
65
  }
66
 
67
  /* DataFrames */
68
  .gr-dataframe {
69
+ border-radius: 12px !important;
70
+ border: 1px solid #e5e7eb !important;
 
 
 
 
 
71
  }
72
 
73
  .gr-dataframe th {
74
+ background-color: #f3f4f6 !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  }