update pagination ui

public/translations/ar/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "اشتراكات اللوحات",
   "chain_ticker": "رمز السلسلة",
   "enable_infinite_scroll": "تفعيل التمرير اللانهائي",
-  "prev": "السابق",
+  "previous": "السابق",
   "next": "التالي",
   "bottom": "أسفل",
   "enable_infinite_scroll_tip": "لا ينطبق على اللوحات المتعددة، التي تستخدم التمرير اللانهائي دائماً.",

public/translations/bn/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "বোর্ড সাবস্ক্রিপশন",
   "chain_ticker": "চেইন টিকার",
   "enable_infinite_scroll": "অসীম স্ক্রল সক্ষম করুন",
-  "prev": "পূর্ববর্তী",
+  "previous": "পূর্ববর্তী",
   "next": "পরবর্তী",
   "bottom": "নিচ",
   "enable_infinite_scroll_tip": "মাল্টিবোর্ডে প্রযোজ্য নয়, যা সবসময় অসীম স্ক্রল ব্যবহার করে।",

public/translations/cs/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Odběry desek",
   "chain_ticker": "ticker řetězce",
   "enable_infinite_scroll": "Povolit nekonečné posouvání",
-  "prev": "Předchozí",
+  "previous": "Předchozí",
   "next": "Další",
   "bottom": "Dole",
   "enable_infinite_scroll_tip": "Netýká se multidesek, které vždy používají nekonečné posouvání.",

public/translations/da/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "opslagstavleabonnementer",
   "chain_ticker": "kæde-ticker",
   "enable_infinite_scroll": "Aktiver uendelig rulning",
-  "prev": "Forrige",
+  "previous": "Forrige",
   "next": "Næste",
   "bottom": "Bund",
   "enable_infinite_scroll_tip": "Gælder ikke for multiboard, som altid bruger uendelig scroll.",

public/translations/de/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Board-Abonnements",
   "chain_ticker": "Chain-Ticker",
   "enable_infinite_scroll": "Unendliches Scrollen aktivieren",
-  "prev": "Zurück",
+  "previous": "Zurück",
   "next": "Weiter",
   "bottom": "Unten",
   "enable_infinite_scroll_tip": "Gilt nicht für Multiboards, die immer Endlos-Scrolling verwenden.",

public/translations/el/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Συνδρομές σε πίνακες",
   "chain_ticker": "σύμβολο αλυσίδας",
   "enable_infinite_scroll": "Ενεργοποίηση άπειρου κύλισης",
-  "prev": "Προηγ",
+  "previous": "Προηγ",
   "next": "Επόμενο",
   "bottom": "Κάτω",
   "enable_infinite_scroll_tip": "Δεν ισχύει για τους πολυπίνακες, που χρησιμοποιούν πάντα την ατελείωτη κύλιση.",

public/translations/en/default.json

@@ -19,6 +19,7 @@
   "close_post_form": "Close Post Form",
   "catalog": "Catalog",
   "all": "All",
+  "archive": "Archive",
   "subscriptions": "Subscriptions",
   "board_subscriptions": "Board subscriptions",
   "board": "Board",
@@ -271,7 +272,7 @@
   "media_hosting_preferred_failure_guidance": "If your preferred provider fails, the app will try other providers (Random mode) or show an error (Preferred mode).",
   "media_hosting_all_providers_failed_guidance": "All upload providers failed. Try again or paste a link manually.",
   "enable_infinite_scroll": "Enable infinite scroll",
-  "prev": "Prev",
+  "previous": "Previous",
   "next": "Next",
   "pagination.pageCurrent": "Page {{page}} (current)",
   "enable_infinite_scroll_tip": "Does not apply to multiboards, which always use infinite scroll.",

public/translations/es/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Suscripciones a tableros",
   "chain_ticker": "ticker de cadena",
   "enable_infinite_scroll": "Activar desplazamiento infinito",
-  "prev": "Anterior",
+  "previous": "Anterior",
   "next": "Siguiente",
   "bottom": "Abajo",
   "enable_infinite_scroll_tip": "No aplica a los multiboard, que siempre usan scroll infinito.",

public/translations/fa/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "اشتراک‌های تابلو",
   "chain_ticker": "نماد زنجیره",
   "enable_infinite_scroll": "فعال کردن اسکرول بی‌نهایت",
-  "prev": "قبلی",
+  "previous": "قبلی",
   "next": "بعدی",
   "bottom": "پایین",
   "enable_infinite_scroll_tip": "برای تابلوهای چندگانه اعمال نمی‌شود، که همیشه از اسکرول بی‌نهایت استفاده می‌کنند.",

public/translations/fi/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Alustojen tilaukset",
   "chain_ticker": "ketjumerkki",
   "enable_infinite_scroll": "Ota ääretön vieritys käyttöön",
-  "prev": "Edell.",
+  "previous": "Edell.",
   "next": "Seuraava",
   "bottom": "Pohja",
   "enable_infinite_scroll_tip": "Ei koske monilautalistauksia, jotka aina käyttävät ääretöntä vieritystä.",

public/translations/fil/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Mga subscription sa board",
   "chain_ticker": "chain ticker",
   "enable_infinite_scroll": "Paganahin ang walang hanggang scroll",
-  "prev": "Nakaraan",
+  "previous": "Nakaraan",
   "next": "Susunod",
   "bottom": "Ibaba",
   "enable_infinite_scroll_tip": "Hindi naaangkop sa mga multiboard, na palaging gumagamit ng walang hanggang scroll.",

public/translations/fr/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Abonnements aux tableaux",
   "chain_ticker": "ticker de chaîne",
   "enable_infinite_scroll": "Activer le défilement infini",
-  "prev": "Précédent",
+  "previous": "Précédent",
   "next": "Suivant",
   "bottom": "Bas",
   "enable_infinite_scroll_tip": "Ne s'applique pas aux multiboards, qui utilisent toujours le défilement infini.",

public/translations/he/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "מנויים ללוחות",
   "chain_ticker": "טיקר שרשרת",
   "enable_infinite_scroll": "הפעל גלילה אינסופית",
-  "prev": "הקודם",
+  "previous": "הקודם",
   "next": "הבא",
   "bottom": "תחתית",
   "enable_infinite_scroll_tip": "לא חל על לוחות מרובים, שתמיד משתמשים בגלילה אינסופית.",

public/translations/hi/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "बोर्ड सदस्यता",
   "chain_ticker": "श्रृंखला टिकर",
   "enable_infinite_scroll": "अनंत स्क्रॉल सक्षम करें",
-  "prev": "पिछला",
+  "previous": "पिछला",
   "next": "अगला",
   "bottom": "नीचे",
   "enable_infinite_scroll_tip": "मल्टीबोर्ड पर लागू नहीं होता, जो हमेशा अनंत स्क्रॉल का उपयोग करते हैं।",

public/translations/hu/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Fórum feliratkozások",
   "chain_ticker": "lánc ticker",
   "enable_infinite_scroll": "Végtelen görgetés engedélyezése",
-  "prev": "Előző",
+  "previous": "Előző",
   "next": "Következő",
   "bottom": "Alul",
   "enable_infinite_scroll_tip": "A többtáblás nézetekre nem vonatkozik, amelyek mindig végtelen görgetést használnak.",

public/translations/id/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Langganan papan",
   "chain_ticker": "ticker rantai",
   "enable_infinite_scroll": "Aktifkan scroll tak terbatas",
-  "prev": "Sebelumnya",
+  "previous": "Sebelumnya",
   "next": "Berikutnya",
   "bottom": "Bawah",
   "enable_infinite_scroll_tip": "Tidak berlaku untuk papan ganda, yang selalu menggunakan scroll tak terbatas.",

public/translations/it/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Iscrizioni alle bacheche",
   "chain_ticker": "ticker di catena",
   "enable_infinite_scroll": "Abilita scorrimento infinito",
-  "prev": "Prec.",
+  "previous": "Prec.",
   "next": "Avanti",
   "bottom": "In basso",
   "enable_infinite_scroll_tip": "Non si applica ai multiboard, che usano sempre lo scroll infinito.",

public/translations/ja/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "掲示板の購読",
   "chain_ticker": "チェーンチッカー",
   "enable_infinite_scroll": "無限スクロールを有効にする",
-  "prev": "前へ",
+  "previous": "前へ",
   "next": "次へ",
   "bottom": "下",
   "enable_infinite_scroll_tip": "マルチボードには適用されません。マルチボードは常に無限スクロールを使用します。",

public/translations/ko/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "보드 구독",
   "chain_ticker": "체인 티커",
   "enable_infinite_scroll": "무한 스크롤 활성화",
-  "prev": "이전",
+  "previous": "이전",
   "next": "다음",
   "bottom": "아래",
   "enable_infinite_scroll_tip": "항상 무한 스크롤을 사용하는 멀티보드에는 적용되지 않습니다.",

public/translations/mr/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "बोर्ड सदस्यता",
   "chain_ticker": "चेन टिकर",
   "enable_infinite_scroll": "अनंत स्क्रोल सक्षम करा",
-  "prev": "मागील",
+  "previous": "मागील",
   "next": "पुढे",
   "bottom": "तळ",
   "enable_infinite_scroll_tip": "मल्टीबोर्डवर लागू होत नाही, जे नेहमी अंतहीन स्क्रॉल वापरतात.",

public/translations/nl/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Boardabonnementen",
   "chain_ticker": "kettingticker",
   "enable_infinite_scroll": "Oneindig scrollen inschakelen",
-  "prev": "Vorige",
+  "previous": "Vorige",
   "next": "Volgende",
   "bottom": "Onder",
   "enable_infinite_scroll_tip": "Geldt niet voor multiboards, die altijd oneindig scrollen gebruiken.",

public/translations/no/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Brettabonnementer",
   "chain_ticker": "kjede-ticker",
   "enable_infinite_scroll": "Aktiver uendelig rulling",
-  "prev": "Forrige",
+  "previous": "Forrige",
   "next": "Neste",
   "bottom": "Bunn",
   "enable_infinite_scroll_tip": "Gjelder ikke for multiboard, som alltid bruker uendelig scroll.",

public/translations/pl/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Subskrypcje tablic",
   "chain_ticker": "ticker łańcucha",
   "enable_infinite_scroll": "Włącz nieskończone przewijanie",
-  "prev": "Poprz.",
+  "previous": "Poprz.",
   "next": "Dalej",
   "bottom": "Dół",
   "enable_infinite_scroll_tip": "Nie dotyczy multiboardów, które zawsze używają nieskończonego przewijania.",

public/translations/pt/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Assinaturas de quadros",
   "chain_ticker": "ticker da cadeia",
   "enable_infinite_scroll": "Ativar rolagem infinita",
-  "prev": "Anterior",
+  "previous": "Anterior",
   "next": "Próximo",
   "bottom": "Inferior",
   "enable_infinite_scroll_tip": "Não se aplica a multiboard, que sempre usam rolagem infinita.",

public/translations/ro/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Abonamente la panouri",
   "chain_ticker": "ticker lanț",
   "enable_infinite_scroll": "Activează derularea infinită",
-  "prev": "Anterior",
+  "previous": "Anterior",
   "next": "Următorul",
   "bottom": "Jos",
   "enable_infinite_scroll_tip": "Nu se aplică la multiboard-urile, care folosesc întotdeauna defilarea infinită.",

public/translations/ru/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Подписки на доски",
   "chain_ticker": "тикер блокчейна",
   "enable_infinite_scroll": "Включить бесконечную прокрутку",
-  "prev": "Пред.",
+  "previous": "Пред.",
   "next": "Далее",
   "bottom": "Вниз",
   "enable_infinite_scroll_tip": "Не применяется к мультибордам, которые всегда используют бесконечную прокрутку.",

public/translations/sq/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Abonime në tabela",
   "chain_ticker": "simboli i zinxhirit",
   "enable_infinite_scroll": "Aktivizo rrëshqitjen e pafundme",
-  "prev": "Paraprake",
+  "previous": "Paraprake",
   "next": "Tjetra",
   "bottom": "Poshtë",
   "enable_infinite_scroll_tip": "Nuk aplikohet për multiboard-et, që gjithmonë përdorin rrëshqitje të pafundme.",

public/translations/sv/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Brädeabonnemang",
   "chain_ticker": "kedjeticker",
   "enable_infinite_scroll": "Aktivera oändlig scrollning",
-  "prev": "Föreg.",
+  "previous": "Föreg.",
   "next": "Nästa",
   "bottom": "Botten",
   "enable_infinite_scroll_tip": "Gäller inte multiboard, som alltid använder oändlig scroll.",

public/translations/te/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "బోర్డ్ సబ్‌స్క్రిప్షన్లు",
   "chain_ticker": "చైన్ టికర్",
   "enable_infinite_scroll": "అనంత స్క్రోల్ చేతనం చేయండి",
-  "prev": "మునుపటి",
+  "previous": "మునుపటి",
   "next": "తదుపరి",
   "bottom": "క్రింద",
   "enable_infinite_scroll_tip": "మల్టీబోర్డ్‌లకు వర్తించదు, అవి ఎల్లప్పుడూ అనంత స్క్రాల్ ఉపయోగిస్తాయి.",

public/translations/th/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "การสมัครสมาชิกบอร์ด",
   "chain_ticker": "สัญลักษณ์เชน",
   "enable_infinite_scroll": "เปิดใช้งานการเลื่อนแบบไม่จำกัด",
-  "prev": "ก่อนหน้า",
+  "previous": "ก่อนหน้า",
   "next": "ถัดไป",
   "bottom": "ล่าง",
   "enable_infinite_scroll_tip": "ไม่ใช้กับมัลติบอร์ด ซึ่งใช้การเลื่อนแบบไม่สิ้นสุดเสมอ",

public/translations/tr/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Pano abonelikleri",
   "chain_ticker": "zincir ticker'ı",
   "enable_infinite_scroll": "Sonsuz kaydırmayı etkinleştir",
-  "prev": "Önceki",
+  "previous": "Önceki",
   "next": "İleri",
   "bottom": "Alt",
   "enable_infinite_scroll_tip": "Her zaman sonsuz kaydırma kullanan çoklu panolar için geçerli değildir.",

public/translations/uk/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Підписки на дошки",
   "chain_ticker": "тикер ланцюга",
   "enable_infinite_scroll": "Увімкнути нескінченну прокрутку",
-  "prev": "Попередн.",
+  "previous": "Попередн.",
   "next": "Далі",
   "bottom": "Вниз",
   "enable_infinite_scroll_tip": "Не застосовується до мультибордів, які завжди використовують нескінченне прокручування.",

public/translations/ur/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "بورڈ سبسکرپشنز",
   "chain_ticker": "چین ٹکر",
   "enable_infinite_scroll": "لامحدود سکرول فعال کریں",
-  "prev": "پچھلا",
+  "previous": "پچھلا",
   "next": "اگلا",
   "bottom": "نیچے",
   "enable_infinite_scroll_tip": "ملٹی بورڈز پر لاگو نہیں ہوتا، جو ہمیشہ لامحدود سکرول استعمال کرتے ہیں۔",

public/translations/vi/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "Đăng ký bảng",
   "chain_ticker": "mã chuỗi",
   "enable_infinite_scroll": "Bật cuộn vô hạn",
-  "prev": "Trước",
+  "previous": "Trước",
   "next": "Tiếp theo",
   "bottom": "Dưới cùng",
   "enable_infinite_scroll_tip": "Không áp dụng cho đa bảng, luôn sử dụng cuộn vô hạn.",

public/translations/zh/default.json

@@ -269,7 +269,7 @@
   "board_subscriptions": "板块订阅",
   "chain_ticker": "链代币符号",
   "enable_infinite_scroll": "启用无限滚动",
-  "prev": "上一页",
+  "previous": "上一页",
   "next": "下一页",
   "bottom": "底部",
   "enable_infinite_scroll_tip": "不适用于多板视图，后者始终使用无限滚动。",

src/components/board-pagination/board-pagination.module.css

@@ -35,20 +35,75 @@
   color: var(--button-desktop-text-color-hover);
 }
 
-/* Footer-style compact pagination (layout in footer-first-row.module.css) */
+.pagelist {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 3px 7px !important;
+  overflow: hidden;
+  list-style: none;
+  background-color: var(--pagelist-background-color);
+}
+
+.footerNavPlain {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+.footerNavPlain:hover {
+  text-decoration: none;
+}
+
+.footerNavPlainDisabled {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  opacity: 0.5;
+  cursor: default;
+  color: inherit;
+}
+
+.footerPageLink,
+.footerPageCurrent {
+  font-size: 13px;
+  margin: 0;
+  padding: 3px 2px;
+  border: none;
+  background: transparent;
+  list-style: none;
+  overflow: hidden;
+  color: var(--pagelist-item-text-color, #89a);
+}
+
 .footerPageLink {
-  padding: 2px 6px;
+  all: unset;
-  font-size: 12px;
+  display: inline-block;
+  font-size: 13px;
+  margin: 0;
+  padding: 3px 2px;
+  border: none;
+  background: transparent;
+  color: var(--pagelist-item-text-color, #89a);
+  text-transform: capitalize;
+  cursor: pointer;
   text-decoration: var(--button-text-decoration);
-  color: var(--button-desktop-text-color);
 }
 
 .footerPageLink:hover {
-  color: var(--button-desktop-text-color-hover);
+  color: var(--pagelist-item-text-color-hover, #d00);
   text-decoration: var(--button-text-decoration);
 }
 
 .footerPageCurrent {
   font-weight: bold;
-  color: var(--button-desktop-text-color-hover);
+  color: var(--pagelist-item-text-color-current, #000);
 }

src/components/board-pagination/board-pagination.tsx

@@ -8,7 +8,7 @@ export interface BoardPaginationProps {
   basePath: string;
   currentPage: number;
   totalPages: number;
-  /** When true, renders compact footer-style row with [1] [2] ... [10] Next Catalog + Style select */
+  /** When true, renders pagelist: [All] [1] [2] ... [10] Catalog Archive + Style select */
   footerStyle?: boolean;
 }
 
@@ -26,41 +26,43 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
 
   if (footerStyle) {
     const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
-    const ellipsisThreshold = 7;
+    const archiveHref = `${basePath}/archive`;
-    const showEllipsis = totalPages > ellipsisThreshold;
-    const visiblePages = showEllipsis ? [1, 2, currentPage, totalPages].filter((p, i, arr) => arr.indexOf(p) === i).sort((a, b) => a - b) : pageNumbers;
 
     return (
       <div className={footerStyles.footerRow}>
-        <div className={footerStyles.footerLeft}>
+        <div className={styles.pagelist}>
-          {visiblePages.map((page, idx) => {
+          {currentPage > 1 && (
-            const isCurrent = page === currentPage;
+            <Link to={pageHref(currentPage - 1)} className={styles.footerNavPlain}>
-            const prevPage = visiblePages[idx - 1];
+              {t('previous')}
-            const showLeadingEllipsis = showEllipsis && prevPage !== undefined && page - prevPage > 1;
+            </Link>
-            return (
+          )}
-              <span key={page}>
+          <Link to={basePath} className={styles.footerPageLink}>
-                {showLeadingEllipsis && <span> ... </span>}
+            [{t('all')}]
-                {isCurrent ? (
+          </Link>
-                  <span className={styles.footerPageCurrent}>[{page}]</span>
+          {pageNumbers.map((page) =>
-                ) : (
+            page === currentPage ? (
-                  <Link to={pageHref(page)} className={styles.footerPageLink}>
+              <span key={page} className={styles.footerPageCurrent}>
-                    [{page}]
+                [{page}]
-                  </Link>
-                )}
               </span>
-            );
+            ) : (
-          })}
+              <Link key={page} to={pageHref(page)} className={styles.footerPageLink}>
-          {nextHref && (
+                [{page}]
-            <>
-              {' '}
-              <Link to={nextHref} className={styles.footerPageLink}>
-                {t('next')}
               </Link>
-            </>
+            ),
-          )}{' '}
+          )}
+          {currentPage < totalPages ? (
+            <Link to={pageHref(currentPage + 1)} className={styles.footerNavPlain}>
+              {t('next')}
+            </Link>
+          ) : (
+            <span className={styles.footerNavPlainDisabled}>{t('next')}</span>
+          )}
           <Link to={catalogHref} className={styles.footerPageLink}>
             {t('catalog')}
           </Link>
+          <Link to={archiveHref} className={styles.footerPageLink}>
+            {t('archive')}
+          </Link>
         </div>
         <div className={footerStyles.footerRight}>
           <span className={footerStyles.styleLabel}>{t('style')}:</span>
@@ -75,12 +77,12 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
   return (
     <div className={styles.pagination}>
       {prevHref ? (
-        <Link to={prevHref} className={styles.paginationButton} aria-label={t('prev')}>
+        <Link to={prevHref} className={styles.paginationButton} aria-label={t('previous')}>
-          {t('prev')}
+          {t('previous')}
         </Link>
       ) : (
         <span className={`${styles.paginationButton} ${styles.disabled}`} aria-disabled='true'>
-          {t('prev')}
+          {t('previous')}
         </span>
       )}
       {pageNumbers.map((page) => {

src/components/footer/footer.tsx

@@ -24,7 +24,6 @@ export const PageFooterDesktop = ({ firstRow, styleRow }: PageFooterDesktopProps
   <footer className={styles.footer}>
     <hr />
     <div className={styles.firstRow}>{firstRow}</div>
-    <hr />
     {styleRow != null ? <div className={styles.styleRow}>{styleRow}</div> : null}
     <div className={styles.boardsBarRow}>
       <BoardsBar />

src/themes.css

@@ -57,6 +57,14 @@
   --hr-border-top: 1px solid #d9bfb7;
   --hr-height: 0px;
 
+  /* pagelist */
+  --pagelist-background-color: #ead6ca;
+  --pagelist-item-background-color: #f0e0d6;
+  --pagelist-item-border-color: #d9bfb7;
+  --pagelist-item-text-color: #800;
+  --pagelist-item-text-color-hover: red;
+  --pagelist-item-text-color-current: #800;
+
   /* homepage */
   --homepage-infobox-text-color: #000;
   --homepage-infobox-bar-text-color: #fff;
@@ -294,6 +302,14 @@
   /* footer */
   --footer-item-background-color-desktop: #eef2ff;
 
+  /* pagelist */
+  --pagelist-background-color: #c9cde8;
+  --pagelist-item-background-color: #d6daf0;
+  --pagelist-item-border-color: #b7c5d9;
+  --pagelist-item-text-color: #89a;
+  --pagelist-item-text-color-hover: #d00;
+  --pagelist-item-text-color-current: #000;
+
   /* homepage */
   --homepage-infobox-text-color: #000;
   --homepage-infobox-bar-text-color: #000;
@@ -532,6 +548,14 @@
   --close-button-background-image: url("/assets/buttons/cross-red.png");
   --open-help-button-background-image: url("/assets/buttons/help-red.png");
 
+  /* pagelist */
+  --pagelist-background-color: #ead6ca;
+  --pagelist-item-background-color: #f0e0d6;
+  --pagelist-item-border-color: #d9bfb7;
+  --pagelist-item-text-color: #800;
+  --pagelist-item-text-color-hover: red;
+  --pagelist-item-text-color-current: #800;
+
   /* directory modal */
   --directory-modal-background-color: #f0e0d6;
   --directory-modal-border: 1px solid rgba(0, 0, 0, 0.20);
@@ -736,9 +760,18 @@
   --button-desktop-text-color-hover: #d00;
   --close-button-background-image: url("/assets/buttons/cross-blue.png");
   --open-help-button-background-image: url("/assets/buttons/help-blue.png");
+
   /* footer */
   --footer-item-background-color-desktop: #eef2ff;
 
+  /* pagelist */
+  --pagelist-background-color: #c9cde8;
+  --pagelist-item-background-color: #d6daf0;
+  --pagelist-item-border-color: #b7c5d9;
+  --pagelist-item-text-color: #89a;
+  --pagelist-item-text-color-hover: #d00;
+  --pagelist-item-text-color-current: #000;
+
   /* homepage */
   --homepage-infobox-text-color: #000;
   --homepage-infobox-bar-text-color: #000;
@@ -954,6 +987,14 @@
   /* filter for inputs */
   --filter80: brightness(85%);
 
+  /* pagelist */
+  --pagelist-background-color: #282a2e;
+  --pagelist-item-background-color: #282a2e;
+  --pagelist-item-border-color: #111;
+  --pagelist-item-text-color: #81a2be;
+  --pagelist-item-text-color-hover: #5f89ac;
+  --pagelist-item-text-color-current: #c5c8c6;
+
   /* homepage */
   --homepage-infobox-text-color: #c5c8c6;
   --homepage-infobox-bar-text-color: #c5c8c6;
@@ -1194,6 +1235,15 @@
   --button-desktop-text-color-hover: #f30;
   --close-button-background-image: url("/assets/buttons/cross-photon.png");
   --open-help-button-background-image: url("/assets/buttons/help-photon.png");
+
+  /* pagelist */
+  --pagelist-background-color: #ddd;
+  --pagelist-item-background-color: #ddd;
+  --pagelist-item-border-color: #ccc;
+  --pagelist-item-text-color: #333;
+  --pagelist-item-text-color-hover: #f30;
+  --pagelist-item-text-color-current: #333;
+
   /* horizontal rule */
   --hr-border: none;
   --hr-border-top: 1px solid #ddd;