From 4c60b5c96a48bf2546ec0dddf1f102260622761e Mon Sep 17 00:00:00 2001
From: g2384 <g2384@users.noreply.github.com>
Date: Fri, 15 Mar 2019 22:30:17 +0000
Subject: [PATCH] update style

---
 README.md  |   2 +-
 index.html |  75 ++++++++++++++++++++-------------
 style.css  | 120 ++++++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 147 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index 56cb888..4f92cc2 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ VHDL formatter web online written in javascript
 ### 2.5 [2018-03-13]
 
 - keep the front page concise
-- add `style.css`
+- add `style.css`, improve UI
 - support all browsers (do not use `RegExp Lookbehind Assertions`)
 
 ### 2.4 [2018-02-23]
diff --git a/index.html b/index.html
index 2188091..c24d4cc 100644
--- a/index.html
+++ b/index.html
@@ -30,39 +30,55 @@
     <div class="content">
     <h2>VHDL Beautifier, Formatter</h2>
     <p style="color:#888">
-        <div class="tooltip emoji" onclick="showInfo();">&#x2139;
-                <span class="tooltiptext">Beautify and format your VHDL code online</span>
-            </div>
-            <div id="info" class="modal">
-                <div class="modal-content">
-                    <span id="close-info" class="close">&times;</span>
-                    <p>Beautify and format your VHDL code online</p>
+        <ul>
+            <li>
+                <div class="tooltip emoji top-button" onclick="showInfo();">&#x2139;
+                    <span class="tooltiptext">Beautify and format your VHDL code online</span>
                 </div>
-            </div>
-        <div class="tooltip emoji" onclick="showWarning();">&#x26A0;
-            <span class="tooltiptext">Please make a backup before you replace your code!</span>
-        </div>
-        <div id="warning" class="modal">
-            <div class="modal-content">
-                <span id="close-warning" class="close">&times;</span>
-                <p>Please make a backup before you replace your code!</p>
-            </div>
-        </div>
-        <div class="tooltip emoji" onclick="showHappy();">&#x1F638;
-            <span class="tooltiptext">Proper formatting makes code easier to read and understand.</span>
-        </div>
-        <div id="happy" class="modal">
-            <div class="modal-content">
-                <span id="close-happy" class="close">&times;</span>
-                <p>Proper formatting makes code easier to read and understand.</p>
-            </div>
-        </div>
-        <a href="https://github.com/g2384/VHDLFormatter#release-notes">Release notes</a>
-        <a href="https://github.com/g2384/VHDLFormatter/issues/new" target="_blank">Report <span>&#x1f41e;</span> bug</a>
-        <a href="https://github.com/g2384/VHDLFormatter">Source code</a>
+                <div id="info" class="modal">
+                    <div class="modal-content">
+                        <span id="close-info" class="close">&times;</span>
+                        <p>Beautify and format your VHDL code online</p>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="tooltip emoji top-button" onclick="showWarning();">&#x26A0;
+                    <span class="tooltiptext">Please make a backup before you replace your code!</span>
+                </div>
+                <div id="warning" class="modal">
+                    <div class="modal-content">
+                        <span id="close-warning" class="close">&times;</span>
+                        <p>Please make a backup before you replace your code!</p>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="tooltip emoji top-button" onclick="showHappy();">&#x1F638;
+                    <span class="tooltiptext">Proper formatting makes code easier to read and understand.</span>
+                </div>
+                <div id="happy" class="modal">
+                    <div class="modal-content">
+                        <span id="close-happy" class="close">&times;</span>
+                        <p>Proper formatting makes code easier to read and understand.</p>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <a class="top-button" href="https://github.com/g2384/VHDLFormatter#release-notes">Release notes</a>
+            </li>
+            <li>
+                <a class="top-button" href="https://github.com/g2384/VHDLFormatter/issues/new" target="_blank">Report
+                    <span class="inline-emoji">&#x1f41e;</span> bug</a>
+            </li>
+            <li>
+                <a class="top-button" href="https://github.com/g2384/VHDLFormatter">Source code</a>
+            </li>
+        </ul>
     </p>
     <textarea id="in" rows="10" wrap="off"></textarea>
     <br>
+    <div class="setting-field">
     <div class="checkbox">
         <input type="checkbox" id="no_format" onclick="noFormat()">
         <label for="no_format">Only highlight, don't format</label>
@@ -206,6 +222,7 @@
             <label for="mix_letter">! EVIL - unreadable (mix upper/lower-case letters)</label>
         </div>
     </div>
+</div>
     <div>
         <a id="settings_control" onclick="showHideSettings();">Show More Settings ▼</a>
         <a onclick="outputSetting()">Output Settings</a>
diff --git a/style.css b/style.css
index de14016..c16cc17 100644
--- a/style.css
+++ b/style.css
@@ -7,11 +7,78 @@ body {
 
 textarea {
     width: 100%;
-    border: solid 1px #9a9a9a;
     padding: 3px;
+    resize: vertical;
     font-family: 'Consolas', Courier, monospace;
 }
 
+input[type="text"] {
+    padding: 2px 4px;
+}
+
+input[type="text"],
+textarea {
+    border: solid 1px #dbdbdb;
+    box-shadow: inset 0 1px 2px rgba(10, 10, 10, .1);
+    border-radius: 4px 4px 0px 0px;
+    font-size: 1rem;
+}
+
+input[type="text"]:hover,
+textarea:hover {
+    border-color: #b5b5b5;
+}
+
+ul {
+    flex-wrap: wrap;
+    max-width: 100%;
+    list-style: none;
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-start;
+    padding: 0px;
+}
+
+li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+    user-select: none;
+}
+
+.top-button {
+    color: #000;
+    font-size: 1rem;
+    line-height: 1rem;
+    padding: .5em 1em;
+    margin: 0;
+    cursor: pointer;
+    margin-bottom: -2px;
+    border-radius: 0px;
+    background-color: #fff;
+    border-bottom: solid 2px #f5f5f5;
+}
+
+.top-button:hover {
+    border-bottom: solid 2px #dbdbdb;
+    background: rgba(0, 0, 0, .03);
+    -webkit-transition: .1s background-color ease;
+    transition: .1s background-color ease;
+}
+
+.inline-emoji {
+    font-size: 0.8em;
+}
+
+.setting-field {
+    padding: 1.25rem 1.5rem;
+    background-color: #f5f5f5;
+    border-radius: 0px 0px 6px 6px;
+}
+
 fieldset {
     width: fit-content;
     border: 1px solid #9a9a9a;
@@ -32,22 +99,21 @@ legend {
 }
 
 .btn {
-    margin: 10px 10px;
-    padding: 5px 8px;
-    font-size: 16px;
-    line-height: 1.33;
+    margin: 10px 0px;
+    padding: .5em 1em;
+    font-size: 1rem;
     border-radius: 3px;
     color: #333;
-    border-color: #ccc;
+    border: solid 1px #dbdbdb;
     cursor: pointer;
     text-align: center;
     white-space: nowrap;
-    border: 1px solid rgb(194, 194, 194);
     background-color: #fff;
 }
 
 .btn:hover {
-    background-color: #eee;
+    border-color: #b5b5b5;
+    background: rgba(0, 0, 0, .03);
 }
 
 .show {
@@ -85,8 +151,8 @@ form span {
 a {
     color: #4b9aff;
     text-decoration: none;
-    background: #f0f8ff;
-    padding: 2px 5px;
+    background-color: #f0f8ff;
+    padding: .5em 1em;
     border-radius: 3px;
     font-size: 0.8em;
     cursor: pointer;
@@ -274,24 +340,25 @@ p {
     cursor: pointer;
     position: relative;
     display: inline-block;
-    border-bottom: 1px dotted black;
 }
 
 .tooltip .tooltiptext {
     visibility: hidden;
     opacity: 0;
     width: 220px;
-    background-color: black;
-    color: #fff;
+    background-color: #fff;
+    color: #000;
     text-align: left;
-    padding: 5px 3px;
-    border-radius: 5px;
-    top: 100%;
-    left: 50%;
+    padding: .5em 1em;
+    border: 1px solid #cecece;
+    border-radius: 3px;
+    top: 130%;
+    left: 0%;
     position: absolute;
     z-index: 1;
-    -webkit-transition: opacity 1s ease-in-out;
-    transition: opacity 1s ease-in-out;
+    -webkit-transition: opacity 0.5s ease-in-out;
+    transition: opacity 0.5s ease-in-out;
+    box-shadow: 1px 0px 5px #bcbcbc;
 }
 
 .tooltip:hover .tooltiptext {
@@ -299,7 +366,20 @@ p {
     opacity: 1;
 }
 
+.tooltip .tooltiptext::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;
+    left: 9%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-width: 0 0.5em 0.5em 0.5em;
+    border-color: transparent transparent white transparent;
+    -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
+    filter: drop-shadow(1px -1px 1px #bcbcbc);
+}
+
 .emoji {
-    padding: 2px;
     font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
 }
\ No newline at end of file