bucde
/
vhdl_formatter
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

update style

master
g2384 5 years ago
parent
4dfec145e9
commit
4c60b5c96a
3 changed files with 147 additions and 50 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      README.md
  2. +46
    -29
      index.html
  3. +100
    -20
      style.css

+ 1
- 1
README.md View File

@ -9,7 +9,7 @@ VHDL formatter web online written in javascript
### 2.5 [2018-03-13] ### 2.5 [2018-03-13]
- keep the front page concise - keep the front page concise
- add `style.css`
- add `style.css`, improve UI
- support all browsers (do not use `RegExp Lookbehind Assertions`) - support all browsers (do not use `RegExp Lookbehind Assertions`)
### 2.4 [2018-02-23] ### 2.4 [2018-02-23]


+ 46
- 29
index.html View File

@ -30,39 +30,55 @@
<div class="content"> <div class="content">
<h2>VHDL Beautifier, Formatter</h2> <h2>VHDL Beautifier, Formatter</h2>
<p style="color:#888"> <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>
<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> </p>
<textarea id="in" rows="10" wrap="off"></textarea> <textarea id="in" rows="10" wrap="off"></textarea>
<br> <br>
<div class="setting-field">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="no_format" onclick="noFormat()"> <input type="checkbox" id="no_format" onclick="noFormat()">
<label for="no_format">Only highlight, don't format</label> <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> <label for="mix_letter">! EVIL - unreadable (mix upper/lower-case letters)</label>
</div> </div>
</div> </div>
</div>
<div> <div>
<a id="settings_control" onclick="showHideSettings();">Show More Settings ▼</a> <a id="settings_control" onclick="showHideSettings();">Show More Settings ▼</a>
<a onclick="outputSetting()">Output Settings</a> <a onclick="outputSetting()">Output Settings</a>


+ 100
- 20
style.css View File

@ -7,11 +7,78 @@ body {
textarea { textarea {
width: 100%; width: 100%;
border: solid 1px #9a9a9a;
padding: 3px; padding: 3px;
resize: vertical;
font-family: 'Consolas', Courier, monospace; 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 { fieldset {
width: fit-content; width: fit-content;
border: 1px solid #9a9a9a; border: 1px solid #9a9a9a;
@ -32,22 +99,21 @@ legend {
} }
.btn { .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; border-radius: 3px;
color: #333; color: #333;
border-color: #ccc;
border: solid 1px #dbdbdb;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border: 1px solid rgb(194, 194, 194);
background-color: #fff; background-color: #fff;
} }
.btn:hover { .btn:hover {
background-color: #eee;
border-color: #b5b5b5;
background: rgba(0, 0, 0, .03);
} }
.show { .show {
@ -85,8 +151,8 @@ form span {
a { a {
color: #4b9aff; color: #4b9aff;
text-decoration: none; text-decoration: none;
background: #f0f8ff;
padding: 2px 5px;
background-color: #f0f8ff;
padding: .5em 1em;
border-radius: 3px; border-radius: 3px;
font-size: 0.8em; font-size: 0.8em;
cursor: pointer; cursor: pointer;
@ -274,24 +340,25 @@ p {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: inline-block; display: inline-block;
border-bottom: 1px dotted black;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
width: 220px; width: 220px;
background-color: black;
color: #fff;
background-color: #fff;
color: #000;
text-align: left; 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; position: absolute;
z-index: 1; 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 { .tooltip:hover .tooltiptext {
@ -299,7 +366,20 @@ p {
opacity: 1; 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 { .emoji {
padding: 2px;
font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol; font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
} }

Write Preview
Loading…
Cancel
Save