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 98284b88167ace8339e90cfe38fd3c31e4a96e49..2136a2e5beb1d8a6f174f373e3040261a27486e8 100644 (file)
--- a/extra/webapps/wiki/wiki.css
+++ b/extra/webapps/wiki/wiki.css
@@ -1,78 +1,66 @@
-.comparison th {
-    border-width: 1px;
-    border-color: #666;
-    border-style: solid;
-    width: 50%;
+input, textarea, select {
+    font-size: 12pt;
+    border: 1px solid #dbdbdb;
+    border-radius: 5px;
+    padding: 5px;
 }
 
-.comparison table {
-    border-color: #666;
-    border-style: solid;
-    border-width: 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
+textarea {
+    width: 100%;
 }
 
-.insert {
-    background-color: #9f9;
+table {
+    table-layout: fixed;
 }
 
-.delete {
-    background-color: #f99;
+td {
+    word-wrap: break-word;
 }
 
-.revisions table, .revisions td, .revisions th {
-    border-color: #666;
-    border-style: solid;
+table.comparison {
+    width: 100%;
 }
 
-.revisions table {
-    border-width: 0 0 1px 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
+table.comparison th {
+    width: 50%;
 }
 
-.revisions td, .revisions th {
-    margin: 0;
-    padding: 4px;
-    border-width: 1px 1px 0 0;
+table.comparison th, table.comparison td {
+    border: 1px solid #ccc;
 }
 
-.contents {
-    font-size: 90%;
-    margin: 0;
-    padding: 0;
-    padding-left: 10px;
-    padding-right: 10px;
-    line-height: 130%;
+.insert {
+    background-color: #9f9;
+    color: black;
 }
 
-.contents ul {
-    list-style-type: none;
-    margin: 0;
-    padding-left: 20px;
+.delete {
+    background-color: #f99;
+    color: black;
 }
 
-.page {
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-bottom: 15px;
-    max-width: 800px;
+table.revisions {
+    width: 100%;
 }
 
-.page nav {
-    margin-left: -15px;
-    margin-right: -15px;
-    margin-bottom: -15px;
-    border-top: 1px solid #ccc;
+table.revisions td, table.revisions th {
+    margin: 0;
+    padding: 4px;
 }
 
-.page img {
-    max-width: 100%;
+table.revisions, table.revisions th, table.revisions td {
+    border: 1px solid #ccc;
 }
 
-.page hr {
-    height: 1px;
+/* 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;
+    }
 }
 
 .description {
@@ -94,101 +82,140 @@
 .description p:first-child { margin-top: 0px; }
 .description p:last-child { margin-bottom: 0px; }
 
-.description table, .description td {
-    border-color: #666;
-    border-style: solid;
+#left {
+    position: absolute;
+    top: 0;
+    left: calc(min(100vw - 200px, 800px));
+    width: 200px;
+    z-index: 99;
+    border: none;
+    border-left: 1px dashed #ccc;
 }
 
-.description table {
-    border-width: 0 0 1px 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
+#right {
+    width: calc(100vw - 200px);
+    max-width: calc(min(100vw - 230px, 770px));
 }
 
-.description td {
+.contents {
+    font-size: 90%;
     margin: 0;
-    padding: 4px;
-    border-width: 1px 1px 0 0;
+    padding: 15px;
+    padding-top: 0px;
+    line-height: 130%;
 }
 
-footer {
-    padding-left: 15px;
-    font-size: smaller;
+.contents ul {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 20px;
 }
 
-#left {
-    float: left;
-    width: 200px;
-    z-index: 99;
-    border-right: 1px solid #ccc;
-    background: #f3f2ea;
+.page nav {
+    margin: -15px;
+    margin-top: 0px;
+    background: none;
 }
 
-#right {
-    margin-left: 200px;
-    width: calc(100% - 200px);
+.page img {
+    max-width: 100%;
 }
 
-nav {
-    padding-left: 15px;
+.page hr {
+    height: 1px;
 }
 
 nav img {
-    margin: -15px;
-    margin-top: -19px;
-    margin-right: 0px;
-    padding: 15px;
-    padding-top: 13px;
-    padding-bottom: 11px;
-    vertical-align: middle;
+    margin-right: 5px;
     display: none;
 }
 
-.page {
-    max-width: 800px;
-    left: 0;
+nav input {
+    border-radius: 3px;
+    padding: 3px;
+    margin: 0px;
 }
 
 .page nav {
-    position: relative;
     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;
-        margin-top: 32px;
         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 {
-        margin-left: 0;
-        width: 100vw;
+        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 {
-        background-color: #373e48;
-        border-right: 1px solid #666;
+        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;
+    }
 }