react-responsive-pagination/themes/classic-light-dark.css

React component for responsive pagination

/*
Classic theme [auto light / dark]

Want to override color variables? See reference at:
https://github.com/jonelantha/react-responsive-pagination/tree/main/packages/react-responsive-pagination/themes/classic-light-dark.md
*/

.pagination {
  --pagination-color: var(--pagination-color-light, #0d6efd);
  --pagination-bg: var(--pagination-bg-light, #fff);
  --pagination-font-weight: var(--pagination-font-weight-light, 400);
  --pagination-border-color: var(--pagination-border-color-light, #dee2e6);
  --pagination-hover-color: var(
    --pagination-hover-color-light,
    var(--pagination-color)
  );
  --pagination-hover-bg: var(--pagination-hover-bg-light, #e9ecef);
  --pagination-hover-border-color: var(
    --pagination-hover-border-color-light,
    var(--pagination-border-color)
  );
  --pagination-active-color: var(--pagination-active-color-light, #fff);
  --pagination-active-bg: var(--pagination-active-bg-light, #0d6efd);
  --pagination-active-border-color: var(
    --pagination-active-border-color-light,
    var(--pagination-active-bg)
  );
  --pagination-active-font-weight: var(
    --pagination-active-font-weight-light,
    var(--pagination-font-weight)
  );
  --pagination-disabled-color: var(--pagination-disabled-color-light, #6c757d);
  --pagination-disabled-bg: var(
    --pagination-disabled-bg-light,
    var(--pagination-bg)
  );
  --pagination-disabled-border-color: var(
    --pagination-disabled-border-color-light,
    var(--pagination-border-color)
  );
}

@media (prefers-color-scheme: dark) {
  .pagination:not([data-pagination-subtheme='light'] *) {
    --pagination-color: var(--pagination-color-dark, #6ea8fe);
    --pagination-bg: var(--pagination-bg-dark, #212529);
    --pagination-font-weight: var(--pagination-font-weight-dark, 400);
    --pagination-border-color: var(--pagination-border-color-dark, #495057);
    --pagination-hover-color: var(
      --pagination-hover-color-dark,
      var(--pagination-color)
    );
    --pagination-hover-bg: var(--pagination-hover-bg-dark, #343a40);
    --pagination-hover-border-color: var(
      --pagination-hover-border-color-dark,
      var(--pagination-border-color)
    );
    --pagination-active-color: var(--pagination-active-color-dark, #fff);
    --pagination-active-bg: var(--pagination-active-bg-dark, #0d6efd);
    --pagination-active-border-color: var(
      --pagination-active-border-color-dark,
      var(--pagination-active-bg)
    );
    --pagination-active-font-weight: var(
      --pagination-active-font-weight-dark,
      var(--pagination-font-weight)
    );
    --pagination-disabled-color: var(
      --pagination-disabled-color-dark,
      rgba(222, 226, 230, 0.75)
    );
    --pagination-disabled-bg: var(
      --pagination-disabled-bg-dark,
      var(--pagination-bg)
    );
    --pagination-disabled-border-color: var(
      --pagination-disabled-border-color-dark,
      var(--pagination-border-color)
    );
  }
}

.pagination {
  font-family: var(
    --pagination-font-family,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    'Noto Sans',
    'Liberation Sans',
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  );
  font-weight: var(--pagination-font-weight);
  line-height: var(--pagination-line-height, 1.5);
  display: flex;
  padding-left: 0;
  margin-top: var(--pagination-margin-top, 0);
  margin-bottom: var(--pagination-margin-bottom, 0);
  list-style: none;
  justify-content: var(
    --pagination-justify-content,
    var(--pagination-justify-content-fb)
  );
}

.pagination .page-link {
  position: relative;
  display: block;
  padding: var(--pagination-padding-y, 0.375rem) var(--pagination-padding-x, 0.75rem);
  font-size: var(--pagination-font-size, 1rem);
  color: var(--pagination-color);
  text-decoration: none;
  background-color: var(--pagination-bg);
  border: var(--pagination-border-width, 1px) solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius, 0.375rem);
  margin: 0 var(--pagination-item-margin-x, 0.2rem);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .pagination .page-link {
    transition: none;
  }
}

@media (hover: hover) {
  .pagination .page-link:hover {
    z-index: 2;
    color: var(--pagination-hover-color);
    background-color: var(--pagination-hover-bg);
    border-color: var(--pagination-hover-border-color);
  }
}
.pagination .page-link:focus {
  z-index: 3;
}
.pagination .active > .page-link {
  z-index: 3;
  color: var(--pagination-active-color);
  background-color: var(--pagination-active-bg);
  border-color: var(--pagination-active-border-color);
  font-weight: var(--pagination-active-font-weight);
}
.pagination .disabled > .page-link {
  color: var(--pagination-disabled-color);
  pointer-events: none;
  background-color: var(--pagination-disabled-bg);
  border-color: var(--pagination-disabled-border-color);
}

.pagination.justify-content-start {
  --pagination-justify-content-fb: flex-start;
}

.pagination.justify-content-end {
  --pagination-justify-content-fb: flex-end;
}

.pagination.justify-content-center {
  --pagination-justify-content-fb: center;
}