improve code demo box style

static/style.css

@@ -1645,6 +1645,10 @@ footer ul li > a {
   padding-right: 15px;
 }
 
+.code-boxes-col:last-child {
+  padding-right: 0;
+}
+
 .code-box {
   border: 1px solid #E9E9E9;
   border-radius: 6px;
@@ -1652,6 +1656,20 @@ footer ul li > a {
   width: 100%;
   position: relative;
   margin: 0px 15px 15px 0px;
+  transition: border-color 0.4s ease;
+}
+
+.code-box:hover {
+  border-color: #ccc;
+}
+
+.code-box:hover .code-box-meta {
+  background: #fbfbfb;
+}
+
+.code-box:hover .code-box-title {
+  background: #fbfbfb;
+  box-shadow: 0 -1.2px 0 #e9e9e9;
 }
 
 .code-box .code-box-demo {
@@ -1662,8 +1680,8 @@ footer ul li > a {
 .code-box-meta {
   position: relative;
   padding: 12px 15px;
-  background: #f9f9f9;
   border-radius: 0 0 6px 6px;
+  transition: background-color 0.4s ease;
 }
 
 .code-box-meta h4,
@@ -1677,8 +1695,8 @@ footer ul li > a {
   padding: 1px 1.1em;
   color: #777;
   border-radius: 6px;
-  background: #fafafa;
-  box-shadow: 0 -1.2px 0 #e9e9e9;
+  background: #fff;
+  transition: all 0.4s ease;
 }
 
 .code-box-title:before {
@@ -1713,6 +1731,7 @@ footer ul li > a {
   text-align: center;
   transform: rotate(90deg);
   transition: all 0.3s ease;
+  color: #999;
 }
 
 .code-box.expand .collapse {