@opensig/opendesign/lib/pagination/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.o-pagination {
  --pagination-item-size: var(--o-control_size-m);
  --pagination-arrow-size: var(--o-control_size-s);
  --pagination-item-gap: 24px;
  --pagination-arrow-color: var(--o-color-info2);
  --pagination-arrow-color-hover: var(--o-color-info1);
  --pagination-arrow-color-active: var(--o-color-info3);
  --pagination-arrow-color-disabled: var(--o-color-info4);
  --pagination-item-color: var(--o-color-info2);
  --pagination-item-color-hover: var(--o-color-primary2);
  --pagination-item-color-active: var(--o-color-primary1);
  --pagination-item-color-current: var(--o-color-primary1);
  --pagination-item-bd-color: transparent;
  --pagination-item-bd-color-hover: transparent;
  --pagination-item-bd-color-active: transparent;
  --pagination-item-bd-color-current: transparent;
  --pagination-item-bd-color-disabled: transparent;
  --pagination-radius: var(--o-radius_control-s);
}

.o-pagination-outline {
  --pagination-arrow-bd-color: var(--o-color-control1);
  --pagination-arrow-bd-color-hover: var(--o-color-control2);
  --pagination-arrow-bd-color-active: var(--o-color-control3);
  --pagination-arrow-bd-color-current: var(--o-color-primary1);
  --pagination-arrow-bd-color-disabled: var(--o-color-control4);
}

.o-pagination-solid {
  --pagination-item-color-current: var(--o-color-primary1);
  --pagination-item-bg-color: transparent;
  --pagination-item-bg-color-hover: var(--o-color-control2-light);
  --pagination-item-bg-color-active: var(--o-color-control3-light);
  --pagination-item-bg-color-current: var(--o-color-primary1-light);
  --pagination-arrow-bg-color: transparent;
  --pagination-arrow-bg-color-hover: var(--o-color-control2-light);
  --pagination-arrow-bg-color-active: var(--o-color-control3-light);
  --pagination-arrow-bg-color-current: var(--o-color-primary1-light);
  --pagination-arrow-bg-color-disabled: var(--o-color-control4-light);
}

.o-pagination-round-pill {
  --pagination-radius: var(--pagination-item-size);
}

.o-pagination {
  color: var(--o-color-info2);
  font-size: var(--o-font_size-tip1);
  line-height: var(--o-line_height-tip1);
}

.o-pagination-wrap {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.o-pagination-wrap > *:not(:first-child) {
  margin-left: var(--pagination-item-gap);
}

.o-pagination-pager {
  display: flex;
  user-select: none;
}

.o-pagination-prev,
.o-pagination-next {
  width: var(--pagination-item-size);
  height: var(--pagination-item-size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--pagination-arrow-size);
  color: var(--pagination-arrow-color);
  border: 1px solid var(--pagination-arrow-bd-color);
  background-color: var(--pagination-arrow-bg-color);
  cursor: pointer;
  user-select: none;
  border-radius: var(--pagination-radius);
}
@media (hover: hover) {
  .o-pagination-prev:hover,
  .o-pagination-next:hover {
    color: var(--pagination-arrow-color-hover);
    border-color: var(--pagination-arrow-bd-color-hover);
    background-color: var(--pagination-arrow-bg-color-hover);
  }
}
.o-pagination-prev:active,
.o-pagination-next:active {
  color: var(--pagination-arrow-color-active);
  border-color: var(--pagination-arrow-bd-color-active);
  background-color: var(--pagination-arrow-bg-color-active);
}
.o-pagination-prev.is-disabled,
.o-pagination-next.is-disabled {
  cursor: not-allowed;
  color: var(--pagination-arrow-color-disabled);
  border: 1px solid var(--pagination-arrow-bd-color-disabled);
  background-color: var(--pagination-arrow-bg-color-disabled);
}

.o-pagination-pages {
  margin-left: 8px;
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.o-pagination-item {
  width: var(--pagination-item-size);
  height: var(--pagination-item-size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--pagination-item-color);
  border: 1px solid var(--pagination-item-bd-color);
  background-color: var(--pagination-item-bg-color);
  border-radius: var(--pagination-radius);
  transition: all var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-pagination-item + .o-pagination-item {
  margin-left: 8px;
}
@media (hover: hover) {
  .o-pagination-item:hover {
    color: var(--pagination-item-color-hover);
    border: 1px solid var(--pagination-item-bd-color-hover);
    background-color: var(--pagination-item-bg-color-hover);
  }
}
.o-pagination-item:active {
  color: var(--pagination-item-color-active);
  border: 1px solid var(--pagination-item-bd-color-active);
  background-color: var(--pagination-item-bg-color-active);
  font-weight: 500;
}
.o-pagination-item.active {
  color: var(--pagination-item-color-current);
  border: 1px solid var(--pagination-item-bd-color-current);
  background-color: var(--pagination-item-bg-color-current);
  font-weight: 500;
}

.o-pagination-more-popup {
  min-width: 64px;
  max-height: 200px;
  overflow: auto;
}

.o-pagination-more-item {
  cursor: pointer;
  justify-content: center;
}

.o-pagination-input {
  width: 60px;
}
.o-pagination-goto .o-pagination-input {
  margin-left: 8px;
}

.o-pagination-select {
  width: 110px;
}

.o-table + .o-pagination {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.o-pagination .o-input-input {
  text-align: center;
}

.o-pagination-more-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.o-pagination-more-icon {
  font-size: var(--o-icon_size_control-xs);
  display: inline-flex;
}
.o-pagination-more-icon-wrap:hover .o-pagination-more-icon {
  display: none;
}

.o-pagination-more-arrow-icon {
  font-size: var(--o-icon_size_control-xs);
  display: none;
}
.o-pagination-more-icon-wrap:hover .o-pagination-more-arrow-icon {
  display: inline-flex;
}

.o-pagination-virtual-more-list {
  max-height: inherit;
}