change search to be actually html5 search, add URL field in the page page. man (hehe) what a mess...

1 files changed, 100 insertions, 2 deletions

diff --git a/style/man.css b/style/man.css
index 12a00b2..b804d45 100644
--- a/style/man.css
+++ b/style/man.css
@@ -5,13 +5,91 @@
  * See LICENSE for details
  */
 
+#results
+{
+    margin-top:    3em;
+    margin-bottom: 1em;
+
+    width: min(100% - 3rem, 10in);
+}
+
+#lmmtfy
+{
+    display:         flex;
+    flex-direction:  column;
+    justify-content: center;
+    align-items:     center;
+}
+
+#lmmtfy > div
+{
+    display:         flex;
+    flex-direction:  row;
+    justify-content: center;
+    align-items:     center;
+
+    margin: 0.1in 0.25in;
+    padding: 0.1in 0.25in;
+
+    border: 1px solid var(--border);
+    border-radius: 1em;
+}
+
+#lmmtfy > div > div
+{
+    position: relative;
+    top:  -50px;
+    left: 0;
+
+}
+
+#lmmtfy > div > div> label
+{
+    position: absolute;
+    width: 65pt;
+    padding: 0 8pt;
+
+    background-color: var(--bg);
+}
+
+#lmmtfy textarea
+{
+    height: 3rem;
+    width:  250px;
+
+    margin:  1rem 0.5rem;
+    padding: 0    0.5rem;
+
+    text-align:  center;
+    line-height: 2.75em;
+
+    overflow: auto;
+    outline:  none;
+    resize:   none;
+
+    background-color: var(--qbg);
+    color: var(--qfg);
+
+    border: 1px solid var(--qborder);
+    border-radius: 0.5em;
+
+    box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow);
+}
+
+
+#lmmtfy textarea:hover
+{
+    background-color: var(--qbgh);
+    border: 1px solid var(--qborderh);
+    box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh);
+}
+
 .manpage
 {
     font-size: small;
 
-    width:   min(100% - 3rem, 9in);
+    margin:  0.25in;
     padding: 0.25in;
-    margin:  1em 0 1em 0;
 
     border: 1px solid var(--border);
     border-radius: 1em;
@@ -27,6 +105,17 @@
 }
 
 
+@media (prefers-color-scheme: dark)
+{
+    #lmmtfy textarea
+    {
+        background-color: var(--qbgh);
+        border: 1px solid var(--qborderh);
+    }
+
+    #lmmtfy textarea:hover { box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); }
+}
+
 @media (width <= 800px)
 {
     .manpage
@@ -35,6 +124,15 @@
         border:  none;
         margin:  0;
         padding: 0;
+        padding-right: 1%;
+    }
+
+    #lmmtfy { margin-bottom: 3em; }
+
+    #lmmtfy > div
+    {
+        padding: 0;
+        border: none;
     }
 }