webapps.pastebin: better dark mode

[factor.git] / extra / webapps / pastebin / pastebin.css

diff --git a/extra/webapps/pastebin/pastebin.css b/extra/webapps/pastebin/pastebin.css
index 94f063cd0b352ed11dbf8f833f84e20f271cabd9..e98b9ce8f69bb37d655a47c19c824f368fe23652 100644 (file)
--- a/extra/webapps/pastebin/pastebin.css
+++ b/extra/webapps/pastebin/pastebin.css
@@ -1,13 +1,58 @@
-.page {
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-bottom: 15px;
+input, textarea, select {
+    font-size: 12pt;
+    border: 1px solid #dbdbdb;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+textarea {
+    font-family: monospace;
 }
 
 pre.code {
-       border:1px dashed #ccc;
-       background-color:#f5f5f5;
-       padding:5px;
-       font-size:150%;
-       color:#000000;
+    border: 1px solid #dbdbdb;
+    border-radius: 5px;
+    background-color: #f7f7f7;
+    padding: 5px;
+    color: black;
+}
+
+table {
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+table td {
+    padding: 5px;
+    word-wrap: break-word;
+}
+
+table th {
+    padding: 5px;
+}
+
+table tr:hover {
+    background-color: #f5f5f5;
+}
+
+@media screen and (max-width: 480px) {
+
+    th:nth-of-type(3), td:nth-of-type(3) {
+        display: none;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    table tr:hover {
+        background-color: #373e48;
+    }
+
+    pre.code {
+        filter: invert(80%);
+    }
+
+    input, textarea, select {
+        filter: invert(80%);
+    }
 }