Hugging Face's logo

Spaces:
siddhartharya
/
Bookmark-Manager
Running

App Files Community
siddhartharya commited on
Commit
c785493
·
verified ·
1 Parent(s): e985ab1

Update app.css

Browse files
Files changed (1) hide show
  1. app.css +128 -155
app.css CHANGED
@@ -1,211 +1,184 @@
1
- /* app.css */
2
-
3
- /* Define CSS variables for light and dark themes */
4
  :root {
5
- /* Light Theme Variables */
6
- --background-color: #ffffff;
7
  --text-color: #000000;
8
- --card-border-color: #4CAF50; /* Green for active links */
9
- --dead-link-color: #D32F2F; /* Red for dead links */
10
- --button-background: #4CAF50;
11
- --button-hover-background: #45a049;
12
- --file-upload-border: #4CAF50;
13
- --file-upload-hover-background: #f1f1f1;
14
- --file-upload-hover-color: #45a049;
15
- --link-color: #2980B9;
16
- --link-hover-color: #1F618D;
17
- --output-background: #f0f0f0;
18
- }
19
-
20
- @media (prefers-color-scheme: dark) {
21
- :root {
22
- /* Dark Theme Variables */
23
- --background-color: #121212;
24
- --text-color: #ffffff;
25
- --card-border-color: #4CAF50;
26
- --dead-link-color: #FF6B6B;
27
- --button-background: #4CAF50;
28
- --button-hover-background: #45a049;
29
- --file-upload-border: #4CAF50;
30
- --file-upload-hover-background: #1f1f1f;
31
- --file-upload-hover-color: #45a049;
32
- --link-color: #6FB1FC;
33
- --link-hover-color: #5A9BD3;
34
- --output-background: #1f1f1f;
35
- }
36
- }
37
-
38
- /* General Styling */
39
- body {
40
- background-color: var(--background-color);
41
- color: var(--text-color);
42
- font-family: Arial, Helvetica, sans-serif;
43
- margin: 0;
44
- padding: 0;
45
  }
46
 
47
- /* Header Styling */
48
- h1, h2, h3, h4, h5, h6 {
 
 
 
 
 
 
 
 
 
49
  color: var(--text-color);
 
50
  }
51
 
52
- /* Card Styling */
53
  .card {
54
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
55
- transition: box-shadow 0.3s ease;
56
- padding: 15px;
57
- margin: 10px;
58
- border-radius: 8px;
59
  background-color: var(--background-color);
60
- border: 2px solid var(--card-border-color);
 
 
61
  }
62
 
63
  .card:hover {
64
- box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
65
  }
66
 
67
- /* Dead Link Styling */
68
- .dead-link {
69
- border-color: var(--dead-link-color) !important;
70
- color: var(--dead-link-color) !important;
71
- }
72
-
73
- /* Active Link Styling */
74
- .active-link {
75
- color: var(--text-color) !important;
76
  }
77
 
78
- /* Button Styling */
79
- button {
80
- background-color: var(--button-background);
81
- border: none;
82
- color: white;
83
- padding: 10px 20px;
84
- text-align: center;
85
- text-decoration: none;
86
  display: inline-block;
87
- font-size: 14px;
88
- margin: 4px 2px;
89
- border-radius: 4px;
90
- cursor: pointer;
91
- transition: background-color 0.3s ease;
92
  }
93
 
94
- button:hover {
95
- background-color: var(--button-hover-background);
 
 
96
  }
97
 
98
- /* File Upload Styling */
99
- input[type="file"] {
100
- border: 2px dashed var(--file-upload-border);
101
- border-radius: 5px;
102
- padding: 20px;
103
- text-align: center;
104
- color: var(--file-upload-border);
105
  cursor: pointer;
106
- transition: background-color 0.3s ease, color 0.3s ease;
 
 
 
 
 
 
107
  }
108
 
109
- input[type="file"]:hover {
110
- background-color: var(--file-upload-hover-background);
111
- color: var(--file-upload-hover-color);
 
 
 
 
 
 
 
112
  }
113
 
114
- /* Dropdown Styling */
115
- select, .gr-dropdown {
116
- padding: 8px;
117
- border-radius: 4px;
118
- border: 1px solid #ccc;
119
- font-size: 14px;
120
- width: 100%;
121
- box-sizing: border-box;
122
- margin-bottom: 10px;
123
- background-color: var(--background-color);
124
- color: var(--text-color);
125
  }
126
 
127
- /* Checkbox Group Styling */
128
- .gr-checkboxgroup {
129
- display: flex;
130
- flex-direction: column;
131
- margin-bottom: 10px;
132
  }
133
 
134
- .gr-checkboxgroup label {
135
- margin-bottom: 5px;
136
- font-size: 14px;
 
 
137
  }
138
 
139
- /* Textbox Styling */
140
- textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"], .gr-textbox {
141
- width: 100%;
142
- padding: 8px 12px;
143
- margin: 4px 0;
144
- box-sizing: border-box;
145
- border: 2px solid #ccc;
146
- border-radius: 4px;
147
- resize: vertical;
148
- font-size: 14px;
149
- background-color: var(--background-color);
150
  color: var(--text-color);
 
151
  }
152
 
153
- /* Link Styling */
154
  a {
155
- color: var(--link-color);
156
- text-decoration: none;
157
  }
158
 
159
  a:hover {
160
- text-decoration: underline;
161
- color: var(--link-hover-color);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  }
163
 
164
- /* Markdown Styling */
165
- .markdown {
166
- line-height: 1.6;
167
  }
168
 
169
- /* Output Textbox Styling */
170
- .gr-output .gr-textbox {
171
- background-color: var(--output-background);
172
- border: 1px solid #ccc;
173
  color: var(--text-color);
 
 
 
 
174
  }
175
 
176
- /* Export Button Styling */
177
- .gr-button--export {
178
- background-color: #3498DB; /* Blue background for export button */
179
  }
180
 
181
- .gr-button--export:hover {
182
- background-color: #2980B9; /* Darker blue on hover */
 
 
 
 
183
  }
184
 
185
- /* Download Link Styling */
186
- .gr-html {
187
- margin-top: 10px;
188
- font-size: 14px;
189
  }
190
 
191
- /* Chatbot Styling */
192
- .gr-chatbot {
193
- background-color: var(--output-background);
194
- border: 1px solid #ccc;
195
- border-radius: 8px;
196
- padding: 10px;
197
- overflow-y: auto;
198
- height: 400px;
199
  }
200
 
201
- /* Responsive Design */
202
- @media screen and (max-width: 600px) {
203
- .gr-row {
204
- flex-direction: column;
205
- }
 
 
 
 
 
 
 
 
 
206
 
207
- button, select, input[type="file"], textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
208
- width: 100%;
209
- margin: 5px 0;
210
- }
211
  }
 
1
+ /* Define CSS Variables for Themes */
 
 
2
  :root {
3
+ --background-color: #FFFFFF;
 
4
  --text-color: #000000;
5
+ --success-color: #4CAF50;
6
+ --error-color: #D32F2F;
7
+ --card-shadow: rgba(0, 0, 0, 0.2);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  }
9
 
10
+ .dark-theme {
11
+ --background-color: #121212;
12
+ --text-color: #FFFFFF;
13
+ --success-color: #81C784;
14
+ --error-color: #E57373;
15
+ --card-shadow: rgba(255, 255, 255, 0.2);
16
+ }
17
+
18
+ /* Apply Background and Text Colors */
19
+ body {
20
+ background-color: var(--background-color);
21
  color: var(--text-color);
22
+ transition: background-color 0.3s, color 0.3s;
23
  }
24
 
25
+ /* Card Styles */
26
  .card {
27
+ box-shadow: 0 4px 8px 0 var(--card-shadow);
28
+ transition: box-shadow 0.3s, background-color 0.3s;
 
 
 
29
  background-color: var(--background-color);
30
+ padding: 10px;
31
+ margin: 10px;
32
+ border-radius: 5px;
33
  }
34
 
35
  .card:hover {
36
+ box-shadow: 0 8px 16px 0 var(--card-shadow);
37
  }
38
 
39
+ /* Toggle Switch Styles */
40
+ .theme-toggle {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: flex-end;
44
+ padding: 10px;
 
 
 
45
  }
46
 
47
+ .switch {
48
+ position: relative;
 
 
 
 
 
 
49
  display: inline-block;
50
+ width: 60px;
51
+ height: 34px;
 
 
 
52
  }
53
 
54
+ .switch input {
55
+ opacity: 0;
56
+ width: 0;
57
+ height: 0;
58
  }
59
 
60
+ .slider {
61
+ position: absolute;
 
 
 
 
 
62
  cursor: pointer;
63
+ top: 0;
64
+ left: 0;
65
+ right: 0;
66
+ bottom: 0;
67
+ background-color: #ccc;
68
+ transition: .4s;
69
+ border-radius: 34px;
70
  }
71
 
72
+ .slider:before {
73
+ position: absolute;
74
+ content: "";
75
+ height: 26px;
76
+ width: 26px;
77
+ left: 4px;
78
+ bottom: 4px;
79
+ background-color: white;
80
+ transition: .4s;
81
+ border-radius: 50%;
82
  }
83
 
84
+ input:checked + .slider {
85
+ background-color: #2196F3;
 
 
 
 
 
 
 
 
 
86
  }
87
 
88
+ input:checked + .slider:before {
89
+ transform: translateX(26px);
 
 
 
90
  }
91
 
92
+ /* Gradio Components Styling */
93
+ .gradio-container {
94
+ background-color: var(--background-color);
95
+ color: var(--text-color);
96
+ transition: background-color 0.3s, color 0.3s;
97
  }
98
 
99
+ /* Ensure All Text Elements Use var(--text-color) */
100
+ body, p, h1, h2, h3, h4, h5, h6, span, a, label, button, input, textarea, select {
 
 
 
 
 
 
 
 
 
101
  color: var(--text-color);
102
+ transition: color 0.3s, background-color 0.3s;
103
  }
104
 
105
+ /* Links Styling */
106
  a {
107
+ color: var(--text-color);
108
+ text-decoration: underline;
109
  }
110
 
111
  a:hover {
112
+ color: var(--success-color);
113
+ }
114
+
115
+ /* Buttons Styling */
116
+ button, .gr-button {
117
+ background-color: var(--success-color);
118
+ color: var(--background-color);
119
+ border: none;
120
+ padding: 10px 20px;
121
+ text-align: center;
122
+ text-decoration: none;
123
+ display: inline-block;
124
+ font-size: 16px;
125
+ margin: 4px 2px;
126
+ cursor: pointer;
127
+ border-radius: 4px;
128
+ transition: background-color 0.3s, color 0.3s;
129
  }
130
 
131
+ button:hover, .gr-button:hover {
132
+ background-color: var(--error-color);
 
133
  }
134
 
135
+ /* Inputs and Selects Styling */
136
+ input, textarea, select, .gr-textbox, .gr-dropdown, .gr-file {
137
+ background-color: var(--background-color);
 
138
  color: var(--text-color);
139
+ border: 1px solid var(--text-color);
140
+ border-radius: 4px;
141
+ padding: 8px;
142
+ transition: background-color 0.3s, color 0.3s, border-color 0.3s;
143
  }
144
 
145
+ /* Checkbox and Radio Buttons Styling */
146
+ input[type="checkbox"], input[type="radio"] {
147
+ accent-color: var(--success-color);
148
  }
149
 
150
+ /* Gradio-specific Class Overrides */
151
+ .gradio-container .gradio-block,
152
+ .gradio-container .gradio-row,
153
+ .gradio-container .gradio-column {
154
+ background-color: var(--background-color);
155
+ color: var(--text-color);
156
  }
157
 
158
+ /* Ensure Gradio Tabs Respect the Theme */
159
+ .gradio-container .tab-title {
160
+ color: var(--text-color);
 
161
  }
162
 
163
+ .gradio-container .tab-title.selected {
164
+ border-bottom: 2px solid var(--success-color);
 
 
 
 
 
 
165
  }
166
 
167
+ /* Additional Styling for HTML Components within Gradio */
168
+ .gradio-container .markdown p,
169
+ .gradio-container .markdown h1,
170
+ .gradio-container .markdown h2,
171
+ .gradio-container .markdown h3,
172
+ .gradio-container .markdown h4,
173
+ .gradio-container .markdown h5,
174
+ .gradio-container .markdown h6 {
175
+ color: var(--text-color);
176
+ }
177
+
178
+ .gradio-container .html-content a {
179
+ color: var(--text-color);
180
+ }
181
 
182
+ .gradio-container .html-content a:hover {
183
+ color: var(--success-color);
 
 
184
  }