webapps: better style

[factor.git] / basis / help / html / stylesheet.css

diff --git a/basis/help/html/stylesheet.css b/basis/help/html/stylesheet.css
index b0ae275b7faaea78af084d835f14319996ed88f2..7fe0ca3900585178c1219be37cbd0ab7ea5e1b01 100644 (file)
--- a/basis/help/html/stylesheet.css
+++ b/basis/help/html/stylesheet.css
@@ -1,12 +1,126 @@
-a:link { text-decoration: none; color: #104e8b; }
-a:visited { text-decoration: none; color: #104e8b; }
-a:active { text-decoration: none; color: #104e8b; }
-a:hover { text-decoration: underline; color: #104e8b; }
-
-.navbar {
-    background-color: #eeeee0;
-    padding: 5px;
-    border: 1px solid #ccc;
-    font:9pt "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
-    margin-bottom: 10px;
+html {
+    box-sizing: border-box;
+}
+
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
+a, .link { color: #2A5DB0; }
+a:link, a:visited, a:active, .link { text-decoration: none; }
+a:hover, .link:hover { text-decoration: underline; }
+
+body {
+    margin: 0;
+    font-family: sans-serif;
+    font-size: 12pt;
+    line-height: 150%;
+}
+
+input {
+    border: 1px solid #d5d5d5;
+    border-radius: 3px;
+    font-size: 1.0em;
+}
+
+input[type=text] {
+    width: 200px;
+}
+
+img {
+    vertical-align: middle;
+}
+
+table {
+    border-collapse: collapse;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+tr:hover {
+    background-color: #f5f5f5;
+}
+
+nav {
+    border-bottom: 1px solid #d5d5d5;
+    background-color: #f5f5f5;
+    padding: 10px;
+    padding-left: calc(max(50% - 400px, 0px) + 15px);
+    padding-right: calc(max(50% - 400px, 0px) + 15px);
+}
+
+nav a, nav .link {
+    margin-right: 10px;
+}
+
+nav img {
+    vertical-align: middle;
+}
+
+.page {
+    max-width: 800px;
+    position: relative;
+    left: calc(max(-400px,-50%) + 50%);
+    padding: 15px;
+}
+
+.page img {
+    width: 16px;
+    height: 16px;
+}
+
+footer {
+    margin-top: 15px;
+    border-top: 1px dashed #d5d5d5;
+    color: #666;
+    font-size: 10pt;
+}
+
+@media screen and (max-width: 480px) {
+
+    input {
+        font-size: smaller;
+    }
+
+    input[type=text] {
+        width: 100px;
+    }
+
+    nav img {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 600px) {
+
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #202124;
+        color: #bdc1c6;
+    }
+
+    a {
+        color: #8ab4f8;
+    }
+
+    nav {
+        background-color: #373e48;
+        border-bottom: 1px solid #666;
+    }
+
+    footer {
+        border-top: 1px dashed #666;
+        color: #999;
+    }
+
+    input {
+        border: 1px solid #666;
+    }
+
+    tr:hover {
+        background-color: #373e48;
+    }
 }