Update app.py

app.py

@@ -55,7 +55,7 @@ class PaperManager:
 
         return f"""
         <tr class="athing">
-            <td align="right" valign="top" class="rank"><span>{rank}.</span></td>
+            <td align="right" valign="top" class="title"><span class="rank">{rank}.</span></td>
             <td valign="top" class="title">
                 <a href="{url}" class="storylink" target="_blank">{title}</a>
             </td>
@@ -108,123 +108,97 @@ def refresh_papers():
     else:
         return "<div class='no-papers'>Failed to refresh papers. Please try again later.</div>"
 
-# Dark Mode CSS
 css = """
-/* Base Styling */
 body {
-    background-color: #121212; /* Dark background for the entire app */
+    background-color: white;
     font-family: Verdana, Geneva, sans-serif;
     margin: 0;
     padding: 0;
-    color: #e0e0e0; /* Light text color for dark mode */
 }
 
-/* Links */
 a {
-    color: #bb86fc; /* Light purple for links */
+    color: #0000ff;
     text-decoration: none;
 }
 
 a:visited {
-    color: #8f56c1; /* Darker purple for visited links */
+    color: #551A8B;
 }
 
-/* Container */
 .container {
     width: 85%;
     margin: auto;
-    background-color: #1e1e1e; /* Dark background for the container */
-    padding: 20px;
-    border-radius: 8px;
 }
 
-/* Table */
 table {
     width: 100%;
-    background-color: #1e1e1e; /* Dark background for the table */
-    border-spacing: 0;
-    border-collapse: collapse;
 }
 
-tr.athing {
-    background-color: #2c2c2c; /* Slightly lighter dark color for rows */
+.header-table {
+    width: 100%;
+    background-color: #ff6600;
+    padding: 2px 10px;
 }
 
-tr.athing:nth-child(even) {
-    background-color: #232323; /* Alternate row color */
+.header-table a {
+    color: black;
+    font-weight: bold;
+    font-size: 14pt;
+    text-decoration: none;
 }
 
-.rank, .storylink, .subtext {
-    padding: 10px;
-    border-bottom: 1px solid #333; /* Border between rows */
+.itemlist .athing {
+    background-color: #f6f6ef;
 }
 
 .rank {
     font-size: 14pt;
-    color: #bbbbbb;
-    padding-right: 10px;
+    color: #828282;
+    padding-right: 5px;
 }
 
 .storylink {
-    font-size: 12pt;
-    color: #bb86fc; /* Light purple for story titles */
-}
-
-.subtext {
     font-size: 10pt;
-    color: #888888; /* Light gray for subtext */
 }
 
-/* Header Styling */
-.header-table {
-    width: 100%;
-    background-color: #ff6600;
-    padding: 10px 20px;
+.subtext {
+    font-size: 8pt;
+    color: #828282;
+    padding-left: 40px;
 }
 
-.header-table a {
-    color: black;
-    font-weight: bold;
-    font-size: 18pt;
+.subtext a {
+    color: #828282;
     text-decoration: none;
 }
 
-/* Refresh Button */
 #refresh-button {
-    background: #ff6600;
+    background: none;
     border: none;
     color: black;
     font-weight: bold;
     font-size: 14pt;
     cursor: pointer;
-    padding: 10px 20px;
-    border-radius: 5px;
 }
 
-#refresh-button:hover {
-    background-color: #e55b00; /* Slightly darker orange on hover */
-}
-
-/* No Papers Section */
 .no-papers {
     text-align: center;
-    color: #bbbbbb;
-    padding: 20px;
-    font-size: 16pt;
+    color: #828282;
+    padding: 1rem;
+    font-size: 14pt;
 }
 
-/* Responsive Styles */
 @media (max-width: 640px) {
     .header-table a {
-        font-size: 14pt;
+        font-size: 12pt;
     }
 
     .storylink {
-        font-size: 10pt;
+        font-size: 9pt;
     }
 
     .subtext {
-        font-size: 9pt;
+        font-size: 7pt;
     }
 }
 """
@@ -274,4 +248,4 @@ with demo:
     </script>
     """)
 
-demo.launch()
+demo.launch()