+
@@ -298,6 +300,9 @@
const localStorageSettingKey = "settings";
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() {
var settingsDiv = document.getElementById("settings_div");
var control = document.getElementById("settings_control");
diff --git a/style.css b/style.css
index c16cc17..6303fe4 100644
--- a/style.css
+++ b/style.css
@@ -33,11 +33,7 @@ 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;
}
@@ -50,25 +46,64 @@ li {
}
.top-button {
- color: #000;
+ color: rgba(0, 0, 0, 0.7);
font-size: 1rem;
line-height: 1rem;
- padding: .5em 1em;
+ padding: 1em 0.5em;
margin: 0;
cursor: pointer;
- margin-bottom: -2px;
border-radius: 0px;
- background-color: #fff;
- border-bottom: solid 2px #f5f5f5;
+ background-color: #f5f5f5;
}
.top-button:hover {
- border-bottom: solid 2px #dbdbdb;
- background: rgba(0, 0, 0, .03);
+ color: #000;
+ background: #eff0f1;
-webkit-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 {
font-size: 0.8em;
}