style pagination row

themes/lumbung-theme/static/css/main.css

@@ -604,26 +604,37 @@ ul.pagination {
   display: block;
   text-align: center;
   font-size: 38px;
-  border: 2px solid #1B4C8A;
+  border-bottom: 2px solid black;
-  box-shadow:0.4em 0.4em 0 #d2d1c8;
-  
 }
 
 li.page-item {
-  background-color: lightblue;
   padding: 0.4em;
+  position: relative;
+}
+
+li.page-item a {
+  color: black;
 }
 
 li.page-item.active {
-  background-color: peachpuff;
+  border-color: tomato;
-  border: 2px solid tomato;
   padding: 0.4em;
 }
 
+li.page-item.active::after,
+li.page-item.active::before {
+  border-color: tomato
+}
+
+.active a.page-link {
+  color: tomato;
+}
+
 li.page-item.disabled {
   display: none;
 }
 
+/* 
 li.page-item:nth-child(even) {
   transform: rotate(-1deg);
 }
@@ -638,8 +649,48 @@ li.page-item:nth-child(5) {
 
 li.page-item:nth-child(8) {
   transform: rotate(-3deg);
+} */
+
+li.page-item:first-child,
+li.page-item:last-child {
+  border: none;
+  text-decoration: none;
 }
 
+li.page-item:first-child::before,
+li.page-item:first-child::after,
+li.page-item:last-child::before,
+li.page-item:last-child::after {
+  display: none;
+}
+
+li.page-item a {
+  text-decoration: none;
+}
+
+li.page-item a:hover {
+  text-decoration: underline;
+}
+
+li.page-item:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 50%;
+  width: 50%;
+  border-left: 2px solid black;
+}
+
+li.page-item:after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 50%;
+  width: 50%;
+  border-right: 2px solid black;
+}
 
 
 /* Page footer */