add some transitions

patchpanel/index.php

@@ -22,20 +22,21 @@
     tr.highlight:hover,
     tr.highlight:hover td {
         background-color: #F0E68C !important;
+        transition: .1s;
     }
 
     .container  {
-        display: block;
-        position: relative;
-        margin: 5px;
-        margin-top: -7px;
-        padding-left: 14px;
-        cursor: pointer;
-        font-size: 22px;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
+      display: block;
+      position: relative;
+      margin: 5px;
+      margin-top: -9px;
+      padding-left: 17px;
+      cursor: default;
+      font-size: 22px;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
     }
 
     /* Hide the browser's default checkbox */
@@ -52,11 +53,12 @@
       position: absolute;
       top: 0;
       left: 0;
-      height: 10px;
-      width: 10px;
+      height: 12px;
+      width: 12px;
       background-color: #eee;
       border: 2px solid #ddd;
-      border-radius: 7px;
+      border-radius: 8px;
+      transition: .2s;
     }
 
     /* On mouse-over, add a grey background color */
@@ -77,6 +79,17 @@
       border: 2px solid #eee;
     }
 
+    /* On mouse-over, add a grey background color */
+    .common .container:hover input:checked ~ .checkmark {
+      background-color: #CD0000;
+      border: 2px solid #CD0000;
+    }
+
+    .common .container input:checked ~ .checkmark {
+      background-color: #CD0000;
+      border: 2px solid #eee;
+    }
+
     /* Create the checkmark/indicator (hidden when not checked) */
     .checkmark:after {
       content: "";
@@ -91,13 +104,13 @@
 
     /* Style the checkmark/indicator */
     .container .checkmark:after {
-      left: 2px;
-      top: 2px;
+      left: 3px;
+      top: 3px;
       width: 2px;
       height: 2px;
       border: solid white;
       border-width: 1px 2px 3px 2px;
-      border-radius: 3px;
+      border-radius: 4px;
     }
 </style>
 </head>
@@ -390,6 +403,7 @@
 			{
 				//if ($id % 4 == 2 || $id % 4 == 3) $color = "#FFFFFF"; else $color = "#C8C8C8";
                 if ($id % 4 == 2 || $id % 4 == 3) $class = "odd"; else $class = "even";
+                if ($ch == 22) $class .= " common";
 
 				$checked = "";
 				if ($check[$id] == $ch) $checked = 'checked="checked"';
@@ -413,6 +427,7 @@
 			{
 				//if ($id % 4 == 0 || $id % 4 == 1) $color = "#FFFFFF"; else $color = "#C8C8C8";
                 if ($id % 4 == 2 || $id % 4 == 3) $class = "even"; else $class = "odd";
+                if ($ch == 22) $class .= " common";
 
 				$checked = "";
 				if ($check[$id] == $ch) $checked = 'checked="checked"';