Hugging Face's logo

Spaces:
mgbam
/
builder
Sleeping

App Files Community
mgbam commited on
Commit
f24cb90
·
verified ·
1 Parent(s): 659fc7b

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +121 -77
style.css CHANGED
@@ -1,78 +1,122 @@
1
- /* General App Styling */
2
- body {
3
- font-family: 'Inter', sans-serif;
4
- background-color: #f8f9fa;
5
- color: #212529;
6
- }
7
-
8
- /* Main Title */
9
- h1 {
10
- color: #0056b3;
11
- font-weight: 600;
12
- letter-spacing: -1px;
13
- }
14
-
15
- /* Column Headers */
16
- .gradio-container .col-header {
17
- color: #495057;
18
- font-weight: 500;
19
- text-transform: uppercase;
20
- font-size: 0.9rem;
21
- letter-spacing: 0.5px;
22
- border-bottom: 2px solid #e9ecef;
23
- padding-bottom: 8px;
24
- margin-bottom: 16px;
25
- }
26
-
27
- /* Custom Button Styling */
28
- .gradio-container .gr-button-primary {
29
- background-color: #007bff !important;
30
- color: white !important;
31
- border: none !important;
32
- transition: background-color 0.3s ease;
33
- }
34
-
35
- .gradio-container .gr-button-primary:hover {
36
- background-color: #0056b3 !important;
37
- }
38
-
39
- .gradio-container .gr-button-secondary {
40
- background-color: #6c757d !important;
41
- color: white !important;
42
- border: none !important;
43
- }
44
- .gradio-container .gr-button-secondary:hover {
45
- background-color: #5a6268 !important;
46
- }
47
-
48
- /* Input Textbox Styling */
49
- .gradio-container .gr-textbox {
50
- border-radius: 8px !important;
51
- border: 1px solid #ced4da !important;
52
- }
53
- .gradio-container .gr-textbox:focus {
54
- border-color: #80bdff !important;
55
- box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
56
- }
57
-
58
- /* Accordion Styling */
59
- .gradio-container .gr-accordion {
60
- border: 1px solid #dee2e6 !important;
61
- border-radius: 8px !important;
62
- box-shadow: 0 2px 4px rgba(0,0,0,0.05);
63
- }
64
-
65
- /* Tabs Styling */
66
- .gradio-container .tabs > .tab-nav > button {
67
- font-weight: 500;
68
- color: #495057;
69
- }
70
- .gradio-container .tabs > .tab-nav > button.selected {
71
- color: #007bff;
72
- border-bottom: 2px solid #007bff;
73
- }
74
-
75
- /* Code Block Styling */
76
- .gradio-container .gr-code {
77
- border-radius: 8px !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  }
 
1
+ /* General App Styling */
2
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
3
+ body {
4
+ font-family: 'Inter', sans-serif;
5
+ background-color: #f8f9fa;
6
+ color: #212529;
7
+ }
8
+
9
+ /* Main Title */
10
+ h1 {
11
+ color: #0056b3;
12
+ font-weight: 600;
13
+ letter-spacing: -1px;
14
+ }
15
+
16
+ /* Column Headers */
17
+ .gradio-container .col-header {
18
+ color: #495057;
19
+ font-weight: 500;
20
+ text-transform: uppercase;
21
+ font-size: 0.9rem;
22
+ letter-spacing: 0.5px;
23
+ border-bottom: 1px solid #e9ecef;
24
+ padding-bottom: 8px;
25
+ margin-bottom: 16px;
26
+ text-align: left;
27
+ }
28
+
29
+ /* Add spacing below controls */
30
+ .gradio-container .col-header + div {
31
+ margin-bottom: 20px;
32
+ }
33
+
34
+ /* Consistent Label Styling */
35
+ .gradio-container .label {
36
+ font-weight: 500;
37
+ color: #343a40;
38
+ }
39
+
40
+ /* Custom Button Styling */
41
+ .gradio-container .gr-button-primary {
42
+ background-color: #007bff !important;
43
+ color: white !important;
44
+ border: none !important;
45
+ transition: background-color 0.3s ease;
46
+ }
47
+ .gradio-container .gr-button {
48
+ border-radius: 8px !important;
49
+ padding: 0.75rem 1.25rem !important;
50
+ font-size: 1rem !important;
51
+ }
52
+ .gradio-container .gr-button-primary:hover {
53
+ background-color: #0056b3 !important;
54
+ }
55
+
56
+ .gradio-container .gr-button-secondary {
57
+ background-color: #6c757d !important;
58
+ color: white !important;
59
+ border: none !important;
60
+ }
61
+
62
+
63
+
64
+ .gradio-container .gr-button-secondary:hover {
65
+ background-color: #5a6268 !important;
66
+ }
67
+
68
+ /* Input Textbox Styling */
69
+ .gradio-container .gr-textbox {
70
+ border-radius: 8px !important;
71
+ border: 1px solid #ced4da !important;
72
+ }
73
+ .gradio-container .gr-textbox:focus {
74
+ border-color: #80bdff !important;
75
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
76
+ }
77
+
78
+ /* Consistent Textbox Label Style */
79
+ .gradio-container .gr-textbox .label {
80
+ font-weight: 500; /* Or any other consistent style you prefer */
81
+ margin-bottom: 5px; /* Adjust spacing as needed */
82
+ }
83
+
84
+ /* Accordion Styling */
85
+ .gradio-container .gr-accordion {
86
+ border: 1px solid #dee2e6 !important;
87
+ border-radius: 8px !important;
88
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
89
+ }
90
+ .gradio-container .gr-accordion-header {
91
+ padding: 0.75rem 1.25rem !important;
92
+ font-size: 1rem !important;
93
+ font-weight: 500;
94
+ color: #495057;
95
+ }
96
+ .gradio-container .gr-accordion-content {
97
+ padding: 0.75rem 1.25rem;
98
+ }
99
+
100
+ /* Dropdown Styling */
101
+ .gradio-container .gr-dropdown {
102
+ border-radius: 8px !important;
103
+ border: 1px solid #ced4da !important;
104
+ }
105
+ .gradio-container .gr-dropdown:focus {
106
+ border-color: #80bdff !important;
107
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
108
+ }
109
+ /* Tabs Styling */
110
+ .gradio-container .tabs > .tab-nav > button {
111
+ font-weight: 500;
112
+ color: #495057;
113
+ }
114
+ .gradio-container .tabs > .tab-nav > button.selected {
115
+ color: #007bff;
116
+ border-bottom: 2px solid #007bff;
117
+ }
118
+
119
+ /* Code Block Styling */
120
+ .gradio-container .gr-code {
121
+ border-radius: 8px !important;
122
  }