Hugging Face's logo

Spaces:
vectara
/
ProaC
Running

App Files Community
joao-vectara commited on
Commit
aa82568
·
verified ·
1 Parent(s): b270ee7

Update style.css

Browse files

Change look n feel

Files changed (1) hide show
  1. style.css +70 -28
style.css CHANGED
@@ -1,39 +1,81 @@
1
- /* Set background color */
2
- .stApp {
3
- background-color: #121212;
4
- color: white;
5
  }
6
 
7
- /* Center content */
8
- .block-container {
9
- max-width: 600px;
10
- margin: auto;
11
- text-align: center;
12
  }
13
 
14
- /* Style file uploader */
15
- .stFileUploader label {
16
- font-size: 18px;
17
- font-weight: bold;
18
- color: white;
 
19
  }
20
 
21
- .stFileUploader div {
22
- background-color: #292929;
23
- padding: 20px;
24
- border-radius: 10px;
25
- border: 2px dashed #555;
26
- text-align: center;
27
  }
28
 
29
- .stFileUploader button {
30
- background-color: #444;
31
- border: 1px solid #777;
32
- color: white;
33
- padding: 5px 15px;
34
- border-radius: 5px;
 
 
 
 
 
35
  }
36
 
37
- .stFileUploader span {
38
- color: #ccc;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  }
 
1
+ /* 1) Overall page background and removal of Streamlit header */
2
+ [data-testid="stAppViewContainer"] {
3
+ background-color: #0E1117; /* Dark background similar to screenshot */
 
4
  }
5
 
6
+ [data-testid="stHeader"] {
7
+ display: none; /* Hide default Streamlit header if you want a cleaner look */
 
 
 
8
  }
9
 
10
+ /* 2) Main heading (H1) styling */
11
+ h1 {
12
+ color: #FFFFFF;
13
+ font-weight: 700;
14
+ font-size: 2.5rem; /* Adjust size as needed */
15
+ margin-bottom: 1rem;
16
  }
17
 
18
+ /* 3) Icon + text container for “How may I help you?” */
19
+ .icon-container {
20
+ display: flex;
21
+ align-items: center;
22
+ gap: 10px;
23
+ margin-bottom: 1rem;
24
  }
25
 
26
+ /* The background box behind the icon */
27
+ .icon-box {
28
+ background-color: #FFD24C; /* Similar to the gold/yellow in screenshot */
29
+ width: 40px;
30
+ height: 40px;
31
+ border-radius: 8px;
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+ color: #000000;
36
+ font-size: 20px;
37
  }
38
 
39
+ /* The text “How may I help you?” */
40
+ .icon-text {
41
+ color: #FFFFFF;
42
+ font-size: 1.1rem;
43
+ margin: 0;
44
+ }
45
+
46
+ /* 4) Subheading for “Add additional files here” */
47
+ h4 {
48
+ color: #FFFFFF;
49
+ font-weight: 400;
50
+ margin-bottom: 0.5rem;
51
+ }
52
+
53
+ /* 5) Streamlit file uploader styling */
54
+ [data-testid="stFileUploader"] {
55
+ background-color: #2E2E38; /* Dark gray box background */
56
+ border: 1px solid #444; /* Subtle border */
57
+ border-radius: 8px;
58
+ padding: 1.2rem;
59
+ color: #FFFFFF;
60
+ }
61
+
62
+ /* Uploader label text (the main “Drag and drop file here”) */
63
+ [data-testid="stFileUploader"] label {
64
+ color: #FFFFFF;
65
+ font-size: 1rem;
66
+ font-weight: 500;
67
+ }
68
+
69
+ /* The subtext (the smaller “Limit 200MB per file”) */
70
+ [data-testid="stFileUploader"] .css-1f42894 {
71
+ color: #B4B4B4; /* Lighter gray for subtext */
72
+ font-size: 0.9rem;
73
+ margin-top: 0.4rem;
74
+ }
75
+
76
+ /* 6) Browse Files button */
77
+ button[kind="secondary"] {
78
+ background-color: #444 !important;
79
+ color: #FFFFFF !important;
80
+ border-radius: 8px !important;
81
  }