From 6461843bd05d8b370eaa486aea33e4a1ec902f12 Mon Sep 17 00:00:00 2001
From: Alex Zaitsev <alex.zaitsev.pro@gmail.com>
Date: Thu, 11 May 2017 14:36:02 +0300
Subject: [PATCH] settings style was tuned

---
 build/jar/apk-dependency-graph.jar | Bin 8738 -> 8738 bytes
 gui/Scripts/dependency.css         |  53 +++++++++++++----------------
 gui/index.html                     |  39 +++++++++++----------
 3 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/build/jar/apk-dependency-graph.jar b/build/jar/apk-dependency-graph.jar
index a057fb9aeb22c253e0eca032cb49736b448aeb92..3bdf811559aa9623c283a78529851d94d737184a 100644
GIT binary patch
delta 168
zcmZ4FvdD!ez?+$ci-CcIfg!(SB99hh$wc!7OnD^}Zz_VwKPo_Svl62XGl))LiDClL
zd)OB7fce7lj3D};NE8c*mX%xw=AV`7VPPzp93^iBB&W(d0OclMmp24aTnZ*2%0U4v
f*rZ?$;_X*(0a2`qP9Vxt(E~(HR&)kYHx#`9B5XB`

delta 168
zcmZ4FvdD!ez?+$ci-CcIfgwMCB99hh{zUTyOhD#MMG*N%1xRjIVzglf(FrV3Odxs>
z+aew?UpSr-L?0B1Vgb>zlIy_yvr;`QjQNwJ<gI|@RCx!W+~n)>h9HVd!30D(D1Zf<
e6s$qK{R%E1idE4GM0qNDfT+oe&LHZBq89)KaWyai

diff --git a/gui/Scripts/dependency.css b/gui/Scripts/dependency.css
index 881248e..e4cca8c 100644
--- 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
index 12f17f8..a843db6 100644
--- 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>