refactor: modify the style of pagination

source/css/_common/components/widgets/paginator.styl

@@ -2,61 +2,46 @@
   margin-top: 1rem;
   text-align: center;
 
+  // ------------------------------
+  // Pagination for Home/Archives
+  // ------------------------------
   &-inner {
     border-radius: 5px;
-    padding: .8em 0;
+    padding: 12px 0;
     background-color: var(--color-gray-150);
   }
 
-  .space,
-  .page-number {
+  .page-number,
+  .prev,
+  .next {
     display: inline-block;
+    margin: 0 .5em;
+    border: 1px solid transparent;
     border-radius: 3px;
-    width: 1rem;
-    height: 1rem;
-    line-height: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    text-align: center;
     vertical-align: middle;
-  }
-
-  .page-number {
-    margin: 0 .5em;
-    color: $pagination-item-color;
-    transition: color .2s ease, background-color .2s ease;
+    transition: border .2s ease;
 
     &:hover {
-      color: $pagination-item-hover-color;
-      background-color: $pagination-item-hover-bg-color;
+      border-color: var(--color-gray-260);
     }
   }
 
   .current {
     color: $pagination-item-active-color;
     background-color: $pagination-item-active-bg-color;
-  }
-
-  a.prev,
-  a.next {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    line-height: 1rem;
-    vertical-align: middle;
-    color: $pagination-arrow-color;
-    transition: color .2s ease;
 
     &:hover {
-      color: $pagination-arrow-hover-color;
+      border-color: transparent;
     }
   }
 
-  a.prev {
-    margin-right: .2em;
-  }
-
-  a.next {
-    margin-left: .2em;
-  }
-
+  // -------------------------
+  // Pagination for Articles
+  // -------------------------
   &-prev,
   &-next {
     width: 100%;

source/css/_variables/index.styl

@@ -160,13 +160,10 @@ $post-timeline-dot-color           = #6ec5ff
 $post-timeline-dot-hover-color     = $orange-dark
 
 // Pagination
-$pagination-item-color             = $blue-light
-$pagination-item-hover-color       = #f4f5f5
-$pagination-item-hover-bg-color    = $blue-light
-$pagination-item-active-color      = #f4f5f5
-$pagination-item-active-bg-color   = $blue-light
-$pagination-arrow-color            = $blue-light
-$pagination-arrow-hover-color      = $orange-dark
+$pagination-item-active-color       = #f4f5f5
+$pagination-item-active-bg-color    = $blue-light
+$pagination-arrow-color             = $blue-light
+$pagination-arrow-hover-color       = $orange-dark
 
 // Reward
 $reward-btn-color                  = #ff6868