Zahlreiche Design-Verbesserungen

diff --git a/css/dialog.css b/css/dialog.css
index 5f61878028b5c5195ebdc4e9337ce317a2341821..2ee058bc3af9f444261d798e95b455bd847dd11d 100644 (file)
--- a/css/dialog.css
+++ b/css/dialog.css
@@ -1,9 +1,10 @@
+@charset "UTF-8";
 /**
  * dialog.css
  */
 
 
-/* <dialog> for GnuPG key details
+/* <dialog> for settings
    https://github.com/GoogleChrome/dialog-polyfill */
 dialog {
        border:               .1em solid #ff8000;
@@ -11,30 +12,29 @@ dialog {
        background:           /*#2e3436*/  #444;
        color:                #eee;
        
-       position:             fixed;
+       /*position:             fixed;
        top:                  50%;
-       transform:            translate(0, -50%);
+       transform:            translate(0, -50%);*/
        
-       width:                18em;
+       width:                25em;
        max-width:            100%;
        
-       height:               14em;
+       height:               18em;
        max-height:           100%;
        
-       position:             fixed;
-       
        z-index:              100;
        
-       left:                 50%;
-       top:                  50%;
+       /*left:                 50%;
+       top:                  50%;*/
        
-       /* Use this for centering if unknown width/height */
+       /* Use this for centering if unknown width/height *
        transform:            translate(-50%, -50%);
        
        /* If known, negative margins are probably better (less chance of blurry text). */
        /* margin: -200px 0 0 -200px; */
        
        box-shadow:           0 0 60px 10px rgba(0, 0, 0, 0.9);
+       
 }
 
 dialog h3 {
@@ -53,6 +53,9 @@ dialog button.close {
        cursor:               pointer;
        color:                #d3d7cf;
        line-height:          .75em;
+
+
+       display: none;
 }
 
 dialog button.close:focus {
@@ -93,7 +96,7 @@ dialog + .backdrop { /* polyfill */
 dialog {
        /* Fade on */
        visibility:           visible;
-       opacity:              1
+       opacity:              1;
        /*transition:         opacity 0.5s linear;*/
        animation:            appear .5s ease-in-out;
 }

diff --git a/css/style.css b/css/style.css
index a2def109663e4d80829483da8416ab15f12b99a2..910d4d69834ff0309b2368a1e5e25df347351d47 100644 (file)
--- a/css/style.css
+++ b/css/style.css
@@ -9,15 +9,22 @@
  *    #ff8000  Orange
  */
 
+:root {
+       --color-light-grey: #eee;
+       --color-grey: #888;
+       --color-dark-grey: #444;
+       --color-orange: #ff8000;
+}
+
 body {
-       background: #eee;
+       background: var(--color-light-grey);
        font: 26px "Source Code Pro", monospace;
 }
 main {
        /*width: 30em;*/
        width: 40em;
        margin: 3em auto 1em;
-       color: #444;
+       color: var(--color-dark-grey);
        
        /* ALT: zentriert
        text-align: center;
@@ -31,14 +38,14 @@ main {
        margin: 100px auto;*/
 }
 a:link, a:visited {
-       color: #888;
+       color: var(--color-grey);
        text-decoration: none;
 }
 a:hover, a:active {
-       color: #444;
+       color: var(--color-dark-grey);
 }
 .red {
-       color: #ff8000;
+       color: var(--color-orange);
 }
 
 /**
@@ -60,43 +67,62 @@ a:hover, a:active {
        font:         1em "Source Code Pro", monospace;
        display:      inline-block;
        padding:      6px;
-       background:   #eee;
-       color:        #888;
-       border:        0;
-       border-bottom: 2px solid #888;
+       border:       0;
 }
-/*#google-search input[type=text]:active {
-       color: #ff8000;
-}*/
 #google-search input[type=text]:focus {
-    outline: 0;
-    /*border-bottom-color: #ff8000;*/
+       outline: 0;
 }
+/*#google-search input[type=text]:active {
+       color: var(--color-orange);
+}*/
 #google-search input[type=text]:hover {
-    border-bottom-color: #ff8000;
+       border-bottom-color: var(--color-orange);
 }
+@media (prefers-color-scheme: light) {
+       #google-search input[type=text] {
+               background:   var(--color-light-grey);
+               color:        var(--color-grey);
+               border-bottom: 2px solid var(--color-grey);
+       }
+       #google-search input[type=text]:focus {
+               color: var(--color-dark-grey);
+               border-bottom-color: var(--color-orange);
+       }
+}
+@media (prefers-color-scheme: dark) {
+       #google-search input[type=text] {
+               background:   var(--color-dark-grey);
+               color:        var(--color-grey);
+               border-bottom: 2px solid var(--color-grey);
+       }
+       #google-search input[type=text]:focus {
+               color: var(--color-light-grey);
+               border-bottom-color: var(--color-orange);
+       }
+}
+
 
 /**
  * Notepad
  */
 #notepad p {
        margin: 0;
-       color: #888;
+       color: var(--color-grey);
 }
 #notepadContent {
-       border-left: 2px solid #888;
+       border-left: 2px solid var(--color-grey);
        font: 1em "Source Code Pro", monospace;
        padding: .3em .8em;
-       color: #888;
+       color: var(--color-grey);
        margin: .5em 0;
 }
 #notepadContent:focus {
        outline: 0;
-       border-left-color: #444;
-       color: #444;
+       border-left-color: var(--color-dark-grey);
+       color: var(--color-dark-grey);
 }
 #notepadContent:hover {
-       border-left-color: #ff8000;
+       border-left-color: var(--color-orange);
 }
 
 /**
@@ -111,17 +137,64 @@ footer {
        text-align: right;
 }
 footer p {
-       margin: 0;
+       margin: 0 0 .5em;
        padding: .1em;
        font-size: 0.6em;
-       color: #444;
+       color: var(--color-dark-grey);
+}
+footer p:last-child {
+       margin: 0;
 }
 footer p a:link, footer p a:visited {
-       color: #444;
+       color: var(--color-dark-grey);
        text-decoration: underline;
 }
 footer p a:hover, footer p a:active {
-       color: #888;
+       color: var(--color-grey);
+}
+footer button {
+       display: inline-block;
+       border: 1px solid var(--color-grey);
+       border-radius: .4em;
+       padding: .4em .6em;
+}
+
+
+/**
+ * Form elements
+ */
+dialog {
+       input[type=text] {
+               border: 0;
+               border-bottom: 1px solid var(--color-light-grey);
+               background-color: var(--color-dark-grey);
+               color: var(--color-light-grey);
+               height: 32px;
+               vertical-align: middle;
+               width: 400px;
+               max-width: 100%;
+               font-size: 20px;
+               padding: .3em .5em;
+       }
+       h4 {
+               margin-bottom: .5em;
+       }
+       button {
+               border: 1px solid var(--color-light-grey);
+               border-radius: .2em;
+               padding: .1em .3em;
+               font-size: 26px;
+               display: inline-block;
+               margin-top: 1.5em;
+       }
+}
+#whoami_user:active, #whoami_host:active {
+       outline: 0;
+}
+
+
+.small-caps {
+       font-variant: small-caps;
 }
 
 
@@ -130,44 +203,56 @@ footer p a:hover, footer p a:active {
  */
 @media (prefers-color-scheme: dark) {
        body {
-               background: #444;
+               background: var(--color-dark-grey);
        }
        main {
-               color: #eee;
+               color: var(--color-light-grey);
        }
        a:link, a:visited {
-               color: #eee;
+               color: var(--color-light-grey);
        }
        a:hover, a:active {
-               color: #eee;
+               color: var(--color-light-grey);
                text-decoration: underline;
        }
-       #google-search input[type=text] {
-               color: #eee;
-               background: #444;
-               border-bottom: 1px solid #ff8000;
-       }
+       /*#google-search input[type=text] {
+               color: var(--color-light-grey);
+               background-color: var(--color-dark-grey);
+               border-bottom: 1px solid var(--color-orange);
+       }*/
        #notepad p {
-               color: #eee;
+               color: var(--color-light-grey);
        }
        footer p {
-               color: #888;
+               color: var(--color-grey);
        }
        footer p a:link, footer p a:visited {
-               color: #888;
+               color: var(--color-grey);
        }
        footer p a:hover, footer p a:active {
-               color: #eee;
+               color: var(--color-light-grey);
        }
-       button#settings {
-               background:    #888;
-               color:         #eee;
-               border-color:  #eee;
+       footer button {
+               /*background:    var(--color-grey);
+               color:         var(--color-light-grey);
+               border-color:  var(--color-light-grey);
                padding:       .2em.4em;
-               border-radius: 8%;
+               border-radius: 8%;*/
+               
+               border: 1px solid var(--color-light-grey);
+               border-radius: .2em;
+               padding: .1em .3em;
+               /*font-size: 22px;*/
+               
+               display: inline-block;
+               margin-top: 1.5em;
+       }
+       section#google-search input[type=text] {
+               background: var(--color-dark-grey);
+               color: var(--color-light-grey);
        }
        #notepadContent:focus {
-               color: #eee;
-               border-left-color: #eee;
+               color: var(--color-light-grey);
+               border-left-color: var(--color-light-grey);
        }
 }

diff --git a/template.inc.php b/template.inc.php
index faca40b392a54c40bddcc74f45a9e55aabaac3a6..6a949fb02ad96f432d244fafd280ba8439477a17 100644 (file)
--- a/template.inc.php
+++ b/template.inc.php
@@ -5,12 +5,14 @@
  * Used by index.php and tty/index.php.
  */
 
+
 /**
  * Correct Content-Type header for HTML5 including
  * the charset
  */
 header("Content-Type: text/html; charset=".$Data["Meta"]["Charset"]);
 
+
 /**
  * The placeholder of the search input gets chosen from
  * this array using `array_rand()`
@@ -72,18 +74,19 @@ unset($i);
                                        <input type="text" id="whoami_host">
                                </div>
 
+                               <h4><span class="small-caps">WhoAmI</span> Format</h4>
                                <div>
                                        <input type="radio" id="whoami_format_unix" name="whoami_format" value="unix" checked>
-                                       <label for="whoami_format_unix">Unix-Format</label>
+                                       <label for="whoami_format_unix">Unix (<tt>username@hostname</tt>)</label>
                                </div>
 
                                <div>
                                        <input type="radio" id="whoami_format_windows" name="whoami_format" value="windows">
-                                       <label for="whoami_format_windows">Windows-Format</label>
+                                       <label for="whoami_format_windows">Windows (<tt>\\hostname\username</pttre>)</label>
                                </div>
 
                                <div>
-                                       <button id="whoami_reset" type="button">Zurücksetzen</button>
+                                       <button id="whoami_reset" type="button">Reset settings</button>
                                </div>
                        </form>
                </dialog>
@@ -208,5 +211,6 @@ foreach ($Data["JS"] as $js) {
 ?>
                </script>
 <?php endif; ?>
+
        </body>
 </html>