5chan/src/components/footer/footer.module.css

/* Page footer (desktop) */
.footer {
  margin-top: 16px;
  padding-bottom: 24px;
}

.footerCatalog {
  margin-top: 0;
}

.firstRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
}

.styleRow {
  padding: 8px 0 0;
  display: flex;
  justify-content: flex-end;
}

.styleRowContent {
  display: flex;
  align-items: center;
  gap: 6px;
}

.boardsBarRow {
  padding: 8px 0;
}

.legalMeta {
  padding: 12px 0 0;
  font-size: 10px;
  color: var(--body-font-color);
  text-align: center;
}

.legalMeta a {
  color: var(--post-link-text-color);
  text-decoration: var(--boardsbar-desktop-link-text-decoration);
}

.legalMeta a:hover {
  color: var(--post-link-text-color-hover);
  text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
  cursor: pointer;
}

/* Shared footer first-row layout (catalog, board pagination footer mode) */
.footerRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* When only footerRight is shown (e.g. multiboards), align it right */
.footerRowRightOnly {
  justify-content: flex-end;
}

.footerLeft {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.footerRight {
  display: flex;
  align-items: center;
  gap: 6px;
}

.styleLabel {
  text-transform: capitalize;
}

/* Thread footer first row */
.threadRow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-transform: capitalize;
}

.threadLeft {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-self: start;
}

.threadCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.threadRight {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* Buttons and links in footer first row (catalog, thread): same text-link styling */
.threadRow button,
.threadRow .button,
.threadLeft a,
.footerRow button,
.footerRow .button,
.footerLeft a,
.button {
  all: unset;
  font: inherit;
  text-transform: capitalize;
  color: var(--button-desktop-text-color);
  text-decoration: var(--button-text-decoration);
  cursor: pointer;
}

.threadRow button:hover:not(:disabled),
.threadRow .button:hover:not(:disabled),
.threadLeft a:hover,
.footerRow button:hover:not(:disabled),
.footerRow .button:hover:not(:disabled),
.footerLeft a:hover,
.button:hover:not(:disabled) {
  color: var(--button-desktop-text-color-hover);
}

.threadRow button:disabled,
.threadRow .button:disabled,
.footerRow button:disabled,
.footerRow .button:disabled,
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .footer {
    display: none;
  }
}

/* Mobile page footer — hidden on desktop, shown on mobile */
.mobileFooter {
  display: none;
}

@media (max-width: 640px) {
  .mobileFooter {
    display: block;
    text-align: center;
    padding: 0 0 16px;
  }
}

.mobileFooterButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
}

.mobileFooterButtons a:not([class~='button']) {
  all: unset;
}

.mobileFooterButtons input[type='checkbox'] {
  margin: 0 3px 0 0;
  position: relative;
  top: -2px;
  border-radius: 0;
  height: 10px;
  width: 10px;
}

.mobileFooterPagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  font-size: 16px;
  color: var(--boardsbar-desktop-link-text-color);
}

.mobileFooterPagination a {
  text-decoration: none;
  color: var(--boardsbar-desktop-link-text-color);
}

.mobileFooterPaginationCurrent {
  font-weight: bold;
}

.mobileFooterLinks {
  padding: 12px 8px 4px;
  font-size: 10px;
  text-align: center;
}

.mobileFooterLinks a {
  color: var(--post-link-text-color);
  text-decoration: var(--boardsbar-desktop-link-text-decoration);
}

.mobileFooterLinks a:hover {
  color: var(--post-link-text-color-hover);
  text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
}

.mobileFooterStats {
  padding: 4px 8px;
  font-size: 14px;
  text-align: center;
}

.threadMobileFooterContent .mobileFooterButtons {
  padding-top: 0;
  padding-bottom: 6px;
}

.threadMobileFooterContent .mobileFooterButtons:first-child {
  padding-top: 25px;
  padding-bottom: 10px;
}

.threadMobileFooterContent .mobileFooterStats {
  padding-top: 15px;
}