Hugging Face's logo

Spaces:
siddhartharya
/
Bookmark-Manager
Running

App Files Community
siddhartharya commited on
Commit
0201c98
·
verified ·
1 Parent(s): 99d9847

Update app.css

Browse files
Files changed (1) hide show
  1. app.css +35 -68
app.css CHANGED
@@ -1,114 +1,81 @@
1
  /* app.css */
2
 
3
  body {
4
- background-color: #f0f2f5;
 
 
5
  }
6
 
7
  .gradio-container {
8
- font-family: Arial, sans-serif;
9
  margin: 0 auto;
10
  padding: 20px;
11
  }
12
 
13
  .gr-button {
14
- background-color: #4CAF50;
15
  color: white;
16
  font-weight: bold;
17
  cursor: pointer;
18
  border: none;
19
  padding: 10px 20px;
20
  margin: 5px;
21
- border-radius: 5px;
 
22
  }
23
 
24
  .gr-button:hover {
25
- background-color: #45a049;
26
  }
27
 
28
  h1 {
29
  color: #333;
30
  text-align: center;
 
31
  }
32
 
33
- table {
34
- width: 100%;
35
- border-collapse: collapse;
36
- margin-top: 20px;
 
37
  }
38
 
39
- table th, table td {
40
- padding: 12px;
41
- border: 1px solid #ddd;
42
- text-align: left;
43
- vertical-align: top;
44
  }
45
 
46
- table th {
47
- background-color: #4CAF50;
48
- color: white;
49
- }
50
-
51
- table tr:nth-child(even) {
52
- background-color: #f9f9f9;
53
  }
54
 
55
- table tr:hover {
56
- background-color: #f1f1f1;
 
57
  }
58
 
59
- a {
60
- color: #0066cc;
61
  text-decoration: none;
62
  }
63
 
64
- a:hover {
65
  text-decoration: underline;
66
  }
67
 
68
- /* Highlight dead links */
69
- tr.dead-link {
70
- background-color: #ffcccc !important;
71
  }
72
 
73
- /* Responsive table */
74
- @media screen and (max-width: 768px) {
75
- table, thead, tbody, th, td, tr {
76
- display: block;
77
- }
78
-
79
- table {
80
- border: none;
81
- }
82
-
83
- table tr {
84
- margin-bottom: 15px;
85
- }
86
-
87
- table th {
88
- background-color: transparent;
89
- color: #333;
90
- text-align: left;
91
- font-size: 14px;
92
- padding: 8px 0;
93
- }
94
-
95
- table td {
96
- padding: 8px 0;
97
- text-align: left;
98
- position: relative;
99
- }
100
-
101
- table td::before {
102
- content: attr(data-label);
103
- position: absolute;
104
- left: 0;
105
- width: 40%;
106
- padding-left: 15px;
107
- font-weight: bold;
108
- text-align: left;
109
- }
110
 
111
- table td:last-child {
112
- border-bottom: 1px solid #ddd;
 
113
  }
114
  }
 
1
  /* app.css */
2
 
3
  body {
4
+ background-color: #f5f5f5;
5
+ margin: 0;
6
+ padding: 0;
7
  }
8
 
9
  .gradio-container {
10
+ font-family: 'Roboto', sans-serif;
11
  margin: 0 auto;
12
  padding: 20px;
13
  }
14
 
15
  .gr-button {
16
+ background-color: #6200EE;
17
  color: white;
18
  font-weight: bold;
19
  cursor: pointer;
20
  border: none;
21
  padding: 10px 20px;
22
  margin: 5px;
23
+ border-radius: 4px;
24
+ transition: background-color 0.3s;
25
  }
26
 
27
  .gr-button:hover {
28
+ background-color: #3700B3;
29
  }
30
 
31
  h1 {
32
  color: #333;
33
  text-align: center;
34
+ font-weight: normal;
35
  }
36
 
37
+ .card {
38
+ background-color: white;
39
+ border-radius: 4px;
40
+ margin: 10px 0;
41
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
42
  }
43
 
44
+ .card-content {
45
+ padding: 15px;
 
 
 
46
  }
47
 
48
+ .card-content h3 {
49
+ margin-top: 0;
50
+ font-size: 1.2em;
51
+ color: #6200EE;
 
 
 
52
  }
53
 
54
+ .card-content p {
55
+ margin: 5px 0;
56
+ color: #555;
57
  }
58
 
59
+ .card-content a {
60
+ color: #1E88E5;
61
  text-decoration: none;
62
  }
63
 
64
+ .card-content a:hover {
65
  text-decoration: underline;
66
  }
67
 
68
+ .dead-link {
69
+ background-color: #FFF59D; /* Yellow background */
 
70
  }
71
 
72
+ .dead-link .card-content h3,
73
+ .dead-link .card-content p {
74
+ color: #D32F2F; /* Red text */
75
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
 
77
+ @media screen and (max-width: 600px) {
78
+ .card-content h3 {
79
+ font-size: 1em;
80
  }
81
  }