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

be more professional

master
g2384 5 years ago
parent
4c60b5c96a
commit
aef6b5f0b5
2 changed files with 53 additions and 13 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -2
      index.html
  2. +46
    -11
      style.css

+ 7
- 2
index.html View File

@ -28,8 +28,9 @@
<body> <body>
<div class="content"> <div class="content">
<div class="top-bar">
<div class="container">
<h2>VHDL Beautifier, Formatter</h2> <h2>VHDL Beautifier, Formatter</h2>
<p style="color:#888">
<ul> <ul>
<li> <li>
<div class="tooltip emoji top-button" onclick="showInfo();">&#x2139; <div class="tooltip emoji top-button" onclick="showInfo();">&#x2139;
@ -75,7 +76,8 @@
<a class="top-button" href="https://github.com/g2384/VHDLFormatter">Source code</a> <a class="top-button" href="https://github.com/g2384/VHDLFormatter">Source code</a>
</li> </li>
</ul> </ul>
</p>
</div>
</div>
<textarea id="in" rows="10" wrap="off"></textarea> <textarea id="in" rows="10" wrap="off"></textarea>
<br> <br>
<div class="setting-field"> <div class="setting-field">
@ -298,6 +300,9 @@
const localStorageSettingKey = "settings"; const localStorageSettingKey = "settings";
const localStorageNoFormatKey = "noFormat"; const localStorageNoFormatKey = "noFormat";
var areaIn = document.getElementById("in");
areaIn.placeholder = "library IEEE;\nuse IEEE.std_logic_1164.all;\nuse IEEE.std_logic_unsigned.all;\n...";
function showHideSettings() { function showHideSettings() {
var settingsDiv = document.getElementById("settings_div"); var settingsDiv = document.getElementById("settings_div");
var control = document.getElementById("settings_control"); var control = document.getElementById("settings_control");


+ 46
- 11
style.css View File

@ -33,11 +33,7 @@ ul {
flex-wrap: wrap; flex-wrap: wrap;
max-width: 100%; max-width: 100%;
list-style: none; list-style: none;
align-items: center;
display: flex;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0;
justify-content: flex-start;
padding: 0px; padding: 0px;
} }
@ -50,25 +46,64 @@ li {
} }
.top-button { .top-button {
color: #000;
color: rgba(0, 0, 0, 0.7);
font-size: 1rem; font-size: 1rem;
line-height: 1rem; line-height: 1rem;
padding: .5em 1em;
padding: 1em 0.5em;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
margin-bottom: -2px;
border-radius: 0px; border-radius: 0px;
background-color: #fff;
border-bottom: solid 2px #f5f5f5;
background-color: #f5f5f5;
} }
.top-button:hover { .top-button:hover {
border-bottom: solid 2px #dbdbdb;
background: rgba(0, 0, 0, .03);
color: #000;
background: #eff0f1;
-webkit-transition: .1s background-color ease; -webkit-transition: .1s background-color ease;
transition: .1s background-color ease; transition: .1s background-color ease;
} }
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f5f5f5;
box-sizing: border-box;
box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1);
}
.top-bar .container {
margin: 0 auto;
max-width: 940px;
display: flex;
box-sizing: border-box;
flex-flow: row wrap;
align-items: center;
}
.top-bar h2 {
flex-shrink: 0;
display: flex;
justify-content: flex-start;
font-size: 1.3em;
line-height: 1.3em;
margin: 0px;
cursor: default;
}
.top-bar ul {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0px;
}
#in {
margin-top: 70px;
}
.inline-emoji { .inline-emoji {
font-size: 0.8em; font-size: 0.8em;
} }


Write Preview
Loading…
Cancel
Save