webapps.wiki: form margin zero.

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

diff --git a/extra/webapps/wiki/wiki.css b/extra/webapps/wiki/wiki.css
index 83ec918e3baac71c6313c075d97901563c88115c..2136a2e5beb1d8a6f174f373e3040261a27486e8 100644 (file)
--- a/extra/webapps/wiki/wiki.css
+++ b/extra/webapps/wiki/wiki.css
@@ -1,40 +1,221 @@
-.comparison th {
-    border-width: 1px;
-    border-color: #666;
-    border-style: solid;
+input, textarea, select {
+    font-size: 12pt;
+    border: 1px solid #dbdbdb;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+textarea {
+    width: 100%;
+}
+
+table {
+    table-layout: fixed;
+}
+
+td {
+    word-wrap: break-word;
+}
+
+table.comparison {
+    width: 100%;
+}
+
+table.comparison th {
     width: 50%;
 }
 
-.comparison table {
-    border-color: #666;
-    border-style: solid;
-    border-width: 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
+table.comparison th, table.comparison td {
+    border: 1px solid #ccc;
 }
 
 .insert {
     background-color: #9f9;
+    color: black;
 }
 
 .delete {
     background-color: #f99;
+    color: black;
+}
+
+table.revisions {
+    width: 100%;
+}
+
+table.revisions td, table.revisions th {
+    margin: 0;
+    padding: 4px;
+}
+
+table.revisions, table.revisions th, table.revisions td {
+    border: 1px solid #ccc;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    table.comparison, table.comparison th, table.comparison td {
+        border-color: #666;
+    }
+
+    table.revisions, table.revisions th, table.revisions td {
+        border-color: #666;
+    }
 }
 
-.revisions table, .revisions td, .revisions th {
-    border-color: #666;
-    border-style: solid;
+.description {
+    line-height: 150%;
 }
 
-.revisions table {
-    border-width: 0 0 1px 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
+.description pre {
+    padding: 5px;
+    border: 1px dashed #ccc;
+    background-color: #f5f5f5;
 }
 
-.revisions td, .revisions th {
+.description h1 { font-size: 1.5em; }
+.description h2 { font-size: 1.17em; }
+.description h3 { font-size: 1.0em; }
+.description h4 { font-size: 0.83em; }
+.description h5 { font-size: 0.67em; }
+
+.description p:first-child { margin-top: 0px; }
+.description p:last-child { margin-bottom: 0px; }
+
+#left {
+    position: absolute;
+    top: 0;
+    left: calc(min(100vw - 200px, 800px));
+    width: 200px;
+    z-index: 99;
+    border: none;
+    border-left: 1px dashed #ccc;
+}
+
+#right {
+    width: calc(100vw - 200px);
+    max-width: calc(min(100vw - 230px, 770px));
+}
+
+.contents {
+    font-size: 90%;
     margin: 0;
-    padding: 4px;
-    border-width: 1px 1px 0 0;
+    padding: 15px;
+    padding-top: 0px;
+    line-height: 130%;
 }
 
+.contents ul {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 20px;
+}
+
+.page nav {
+    margin: -15px;
+    margin-top: 0px;
+    background: none;
+}
+
+.page img {
+    max-width: 100%;
+}
+
+.page hr {
+    height: 1px;
+}
+
+nav img {
+    margin-right: 5px;
+    display: none;
+}
+
+nav input {
+    border-radius: 3px;
+    padding: 3px;
+    margin: 0px;
+}
+
+.page nav {
+    width: calc(100vw - 200px);
+    max-width: 800px;
+    left: 0;
+    border-top: 1px dashed #ccc;
+    border-bottom: 1px dashed #ccc;
+    margin-top: 15px;
+}
+
+.page footer {
+    padding: 15px;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: smaller;
+}
+
+@media screen and (max-width: 600px) {
+    #left {
+        position: absolute;
+        display: none;
+        left: 0;
+        top: 0;
+        background: #f5f5f5;
+        border: none;
+        border-right: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        padding-top: 0px;
+        box-shadow: 5px 5px 10px #aaa;
+    }
+
+    #right {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    nav img {
+        display: inline;
+    }
+
+    .page {
+        width: 100%;
+    }
+
+    .page nav {
+        width: 100vw;
+    }
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    nav img {
+        filter: invert(80%);
+    }
+
+    nav input {
+        font-size: smaller;
+    }
+
+    #left {
+        border: none;
+        border-left: 1px dashed #666;
+    }
+
+    .description pre {
+        color: black;
+    }
+
+    .page nav {
+        border-top: 1px dashed #666;
+        border-bottom: 1px dashed #666;
+    }
+}
+
+@media screen and (max-width: 600px) and (prefers-color-scheme: dark) {
+
+    #left {
+        background-color: #373e48;
+        border: none;
+        border-right: 1px solid #666;
+        border-bottom: 1px solid #666;
+        box-shadow: 5px 5px 10px #333;
+    }
+}