Hugging Face's logo

Spaces:
rohan965
/
Python_Project_2
Sleeping

App Files Community
rohan965 commited on
Commit
c61867b
·
verified ·
1 Parent(s): 1e633b9

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +62 -46
style.css CHANGED
@@ -1,67 +1,83 @@
1
  /* ===============================
2
- Global Background
3
  =============================== */
4
 
5
- body {
6
- background: linear-gradient(135deg, #0f2f5f, #1e5aa8);
 
 
 
 
 
 
 
 
7
  }
8
 
9
- /* Make main container slightly transparent white */
10
- .gradio-container {
11
- background-color: rgba(255, 255, 255, 0.95) !important;
12
- border-radius: 20px;
13
- padding: 20px;
14
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
15
  }
16
 
17
- /* ===============================
18
- Tabs Styling
19
- =============================== */
20
-
21
- button[role="tab"] {
22
- font-weight: 600 !important;
23
- border-radius: 12px !important;
24
  }
25
 
26
- button[role="tab"][aria-selected="true"] {
27
- background-color: #1e5aa8 !important;
28
- color: white !important;
29
  }
30
 
31
- /* ===============================
32
- Buttons
33
- =============================== */
34
-
35
- button {
36
- border-radius: 12px !important;
37
- border: none !important;
38
- font-weight: 600 !important;
39
  }
40
 
41
- button.primary {
42
- background-color: #1e5aa8 !important;
 
 
43
  }
44
 
45
- button:hover {
46
- opacity: 0.9;
 
 
 
 
 
47
  }
48
 
49
- /* ===============================
50
- Boxes (logs, JSON, tables)
51
- =============================== */
52
 
53
- textarea,
54
- .json-output,
55
- .gr-dataframe,
56
- .gr-box {
57
- border-radius: 15px !important;
58
- border: 1px solid #d0d7e2 !important;
59
  }
60
 
61
- /* ===============================
62
- Headings
63
- =============================== */
 
 
 
 
 
 
 
 
 
 
 
64
 
65
- h1, h2, h3 {
66
- color: #0f2f5f;
67
- }
 
1
  /* ===============================
2
+ Dark theme base
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.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;
41
+ color: var(--muted) !important;
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; }