Better sortable grabbing

Minor ui tweaks


Former-commit-id: 8ef3c17

Author: Dbz

jQuery/jquery-ui-1.12.1.custom/jquery-ui.js

@@ -68,7 +68,7 @@
 
   color: #DA727E;
   border-left-style: solid;
-  border-left-color: #FFBC67;
+  border-left-color: #455C7B;
   border-left-width: 1px;
   margin-left: 5px;
   padding-left: 25px;
@@ -77,9 +77,7 @@
 
 .context-cache {
   display: flex;
-  /*margin: 0 3px 3px 3px;*/
   justify-content: flex-start;
-  cursor: hand;
 }
 
 .context-cache .checkbox-wrapper {
@@ -110,12 +108,28 @@ input:checked + .context-menu-label {
   display: none;
 }
 
+span.ui-icon {
+  display: flex;
+
+  -webkit-transform: scale(2.5);
+  color: white;
+  margin-top: 0px;
+  margin-left: 5px;
+  background-image: url(jQuery/ui-icons_FFFFFF_256x240.png);
+}
+
 .list-item {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: flex-end;
+
+
   background-color: #455C7B;
   margin: 3px 3px 3px 3px;
   padding: 10px;
   border: 1px solid #ddd;
-  cursor: hand;
+  cursor: -webkit-grab;
   border-radius: 22px;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
 }
@@ -126,7 +140,8 @@ input:checked + .context-menu-label {
 
 .list-item p {
   text-align: center;
-  color: #DA727E;
+  color: #FFFFFF;
+  margin-left: 10px;
 }
 
 .title {
@@ -145,7 +160,7 @@ h3 {
 }
 
 .setting-definition p {
-  color: #685C79;
+  color: #DA727E;
   padding-right: 10px;
 }
 
@@ -191,12 +206,12 @@ h3 {
 .onoffswitch-inner:before {
   content: "ON";
   padding-left: 10px;
-  background-color: #FFBC67; color: #DA727E;
+  background-color: #DA727E; color: #FFFFFF;
 }
 .onoffswitch-inner:after {
   content: "OFF";
   padding-right: 10px;
-  background-color: #DA727E; color: #FFBC67;
+  background-color: #685C79; color: #FFFFFF;
   text-align: right;
 }
 .onoffswitch-switch {

jQuery/jquery-ui-1.12.1.custom/jquery-ui.min.css

@@ -3,10 +3,12 @@
   <meta charset="utf-8">
 	<title>WebCache Options</title>
 
-	<link rel="stylesheet" href="options.css" />
+  <link rel="stylesheet" href="options.css" />
+  <link rel="stylesheet" href="jQuery/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
+
+  <script src="jQuery/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
+  <script src="jQuery/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
 
-	<script src="jQuery/jquery-1.10.2.js"></script>
-	<script src="jQuery/jquery-ui-1.10.4.custom.min.js"></script>
 
 </head>
 
@@ -37,9 +39,18 @@ <h3 class="title">WebCache Options</h3>
   <div class="settings-wrapper">
     <div class="setting">
       <ul id="sortable">
-        <li class="list-item" id="Google Cache"><p>Google Cache</p></li>
-        <li class="list-item" id="Wayback Machine"><p>Wayback Machine</p></li>
-        <li class="list-item" id="Coral CDN"><p>Coral CDN</p></li>
+        <li class="list-item" id="Google Cache">
+          <p>Google Cache</p>
+          <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
+        </li>
+        <li class="list-item" id="Wayback Machine">
+          <p>Wayback Machine</p>
+          <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
+        </li>
+        <li class="list-item" id="Coral CDN">
+          <p>Coral CDN</p>
+          <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
+        </li>
       </ul>
     </div>
     <div class="setting-definition">
@@ -58,7 +69,7 @@ <h3 class="title">WebCache Options</h3>
       </div>
     </div>
     <div class="setting-definition">
-      <p> Would you like for WebCache to automatically detect when a web page is down and
+      <p>DDOS Protection. Would you like for WebCache to automatically detect when a web page is down and
       load a cached copy?</p>
     </div>
   </div>