settings style was tuned

alexzaitsev · May 11, 2017 · 6461843 · 6461843
1 parent 2132c65
commit 6461843
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 48 deletions.
diff --git a/build/jar/apk-dependency-graph.jar b/build/jar/apk-dependency-graph.jar
diff --git a/gui/Scripts/dependency.css b/gui/Scripts/dependency.css
@@ -107,40 +107,33 @@ form {
   position: absolute;
   right: 10px;
   top: 60px;
+  color: white;
+}
+
+form label {
+  color: white;
+}
+
+form input::placeholder {
+  color: white;
+}
+
+#form-background {
+  position: absolute;
+  right: 0px;
+  top: 60px;
+  width: 390px;
+  height: 350px;
+  background-color: #000;
+  filter: alpha(opacity=40);
+  -moz-opacity: 0.4;
+  -khtml-opacity: 0.4;
+  opacity: 0.4;
 }
 
 #simple-menu {
   position: absolute;
   right: 10px;
   top: 10px;
-
-}
-.editor-button {
-    background: #000000;
-  background-image: -webkit-linear-gradient(top, #000000, #6a7175);
-  background-image: -moz-linear-gradient(top, #000000, #6a7175);
-  background-image: -ms-linear-gradient(top, #000000, #6a7175);
-  background-image: -o-linear-gradient(top, #000000, #6a7175);
-  background-image: linear-gradient(to bottom, #000000, #6a7175);
-  -webkit-border-radius: 28;
-  -moz-border-radius: 28;
-  border-radius: 28px;
-  text-shadow: 2px 1px 5px #000000;
-  font-family: Menlo;
-  color: #ffffff;
-  font-size: 20px;
-  padding: 10px 20px 10px 20px;
-  text-decoration: none;
-
-
-}
-
-.editor-button:hover {
-  background: #545f66;
-  background-image: -webkit-linear-gradient(top, #545f66, #111112);
-  background-image: -moz-linear-gradient(top, #545f66, #111112);
-  background-image: -ms-linear-gradient(top, #545f66, #111112);
-  background-image: -o-linear-gradient(top, #545f66, #111112);
-  background-image: linear-gradient(to bottom, #545f66, #111112);
-  text-decoration: none;
+  z-index: 0;
 }
diff --git a/gui/index.html b/gui/index.html
@@ -47,26 +47,29 @@
 <!-- ===========ACTUAL HTML           ================ -->
 <!-- ================================================= -->
 
-<form id="form">
-    <p class="range-field"><input type="range" id="circle_size" name="circle_size" min="1" max="50" value="15"/>
-    <label for="circle_size">Circle size</label></p>
-
-    <p class="range-field"><input type="range" id="charge_multiplier" name="charge_multiplier" min="1" max="500" value="100"/>
-    <label for="charge_multiplier">Charge multiplier</label></p>
-
-    <p class="range-field"><input type="range" id="link_strength" name="link_strength" min="1" max="100" value="7"/>
-    <label for="link_strength">Link strength</label></p>
-
-    <input type="checkbox" name="show_texts_near_circles" id="show_texts_near_circles"/>
-    <label for="show_texts_near_circles">Show names</label><br/>
-
-    <input type="checkbox" name="show_inactive_elements" id="show_inactive_elements" checked="true"/>
-    <label for="show_inactive_elements">Show inactive elements</label> <span class="tooltipped " data-position="left" data-delay="50" data-html="true" data-tooltip="If this is active, you will see every node and link.<br>If this is not active, you will see no links when no<br> node is selected and when a node is selected you<br>will only see direct links from and to that selected node"><i class="material-icons" style="vertical-align: middle;font-size:18px">help</i></span>
-    <input id="search_input" placeholder="Type regexp to filter nodes" style="width:100%;"><br>
-</form>
-
 <a id="simple-menu" class="waves-effect waves-light btn" href="#sidr"><i class="material-icons right">reorder</i>Live editor</a>
 
+<div>
+    <div id="form-background"></div>
+    <form>
+        <p class="range-field"><input type="range" id="circle_size" name="circle_size" min="1" max="50" value="15"/>
+        <label for="circle_size">Circle size</label></p>
+
+        <p class="range-field"><input type="range" id="charge_multiplier" name="charge_multiplier" min="1" max="500" value="100"/>
+        <label for="charge_multiplier">Charge multiplier</label></p>
+
+        <p class="range-field"><input type="range" id="link_strength" name="link_strength" min="1" max="100" value="7"/>
+        <label for="link_strength">Link strength</label></p>
+
+        <input type="checkbox" name="show_texts_near_circles" id="show_texts_near_circles"/>
+        <label for="show_texts_near_circles">Show names</label><br/>
+
+        <input type="checkbox" name="show_inactive_elements" id="show_inactive_elements" checked="true"/>
+        <label for="show_inactive_elements">Show inactive elements</label> <span class="tooltipped " data-position="left" data-delay="50" data-html="true" data-tooltip="If this is active, you will see every node and link.<br>If this is not active, you will see no links when no<br> node is selected and when a node is selected you<br>will only see direct links from and to that selected node"><i class="material-icons" style="vertical-align: middle;font-size:18px">help</i></span>
+        <input id="search_input" placeholder="Type regexp to filter nodes" style="width:100%;"><br>
+    </form>
+</div>
+
 <div id="chart">
     <!-- Here the SVG will be placed-->
 </div>