Compile Now

src/css/components/pagi.css

@@ -0,0 +1,50 @@
+pagi {
+  position: static;
+  display: flex;
+}
+pagi item {
+  cursor: pointer;
+  z-index: 1;
+  flex: 0 1 auto;
+  padding: 5px 10px;
+  border: 1.5px #9e9e9e solid;
+  transition: 150ms;
+}
+pagi item:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+pagi item:first-child::before {
+  content: "<";
+}
+pagi item:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+pagi item:last-child::before {
+  content: ">";
+}
+pagi item[active] {
+  background-color: var(--primary-color);
+  color: white;
+}
+pagi item[active] a:visited {
+  color: white;
+}
+pagi item[active] a:hover {
+  color: white;
+}
+pagi item[disable] {
+  cursor: default;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.1);
+  opacity: 80%;
+  color: #757575;
+}
+pagi item:hover:not(pagi item[active], pagi item[disable]) {
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+pagi item:not(pagi item:first-child) {
+  border-left: none;
+}

src/css/components/pg-bar.css

@@ -8,8 +8,9 @@ pgbar {
   min-height: 20px;
   border-radius: 2.5px;
   background-color: var(--bar-color);
-  filter: brightness(0.75);
+  filter: none;
   overflow: hidden;
+  border-radius: 10px;
 }
 pgbar bar {
   position: absolute;
@@ -18,8 +19,9 @@ pgbar bar {
   padding: 2px 5px;
   padding-left: calc( var(--active) / 2);
   background-color: var(--active-color);
+  box-shadow: 2.5px 0px 0.5px var(--secondary-color);
   width: var(--active);
   height: 100%;
   color: var(--color);
-  filter: brightness(1.15);
+  filter: none;
 }