MediaWiki:Common.css：修訂間差異

/* =========================================================
   Encyclato 全站樣式
   維基經典風格

   目錄
    1. 資訊面板本體
    2. 資訊面板標題
    3. 分區標題
    4. 欄名與內容
    5. 圖像與簽名
    6. 國旗與國徽
    7. 格言與國歌
    8. 歷代國旗與國徽（摺疊）
    9. 任期與前任繼任
   10. 跨欄內容、備註與頁尾
   11. 數值警告與分級
   12. 政黨色
   13. 維基標準表格
   14. 歷史朝代資訊面板
   15. 主條目提示（hatnote）
   16. 導覽框（navbox）
   17. 前後任接續框
   18. 公文與御批
   19. 參考文獻與輔助類別
   20. 窄螢幕
   21. 夜間模式
   22. 列印
========================================================= */


/* =========================================================
   1. 資訊面板本體
========================================================= */

table.encyclato-infobox {
    float: right !important;
    clear: right !important;
    width: 22em;
    max-width: calc(100% - 1em);
    margin: 0.5em 0 0.5em 1em !important;
    padding: 0.2em;
    border: 1px solid #a2a9b1;
    border-collapse: separate !important;
    border-spacing: 3px !important;
    background-color: #f8f9fa;
    color: #202122;
    font-size: 88%;
    line-height: 1.5em;
    box-sizing: border-box;
}

table.encyclato-infobox + table.encyclato-infobox {
    clear: right;
}

table.encyclato-infobox > tbody > tr > th,
table.encyclato-infobox > tbody > tr > td {
    padding: 0.2em 0.4em;
    border: 0;
    vertical-align: top;
}

table.encyclato-infobox p {
    margin: 0;
}

table.encyclato-infobox ul,
table.encyclato-infobox ol {
    margin-top: 0;
    margin-bottom: 0;
}

table.encyclato-infobox img {
    max-width: 100%;
    height: auto;
}

table.encyclato-infobox small {
    font-size: 90%;
}

/* 空白列 */
table.encyclato-infobox > tbody > tr.infobox-hidden {
    display: none !important;
}


/* =========================================================
   2. 資訊面板標題
   caption：艦級、車輛等面板
   infobox-banner：國家、人物、政黨等面板
========================================================= */

table.encyclato-infobox > caption,
table.encyclato-infobox > tbody > tr > th.infobox-banner {
    padding: 0.2em 0.4em 0.3em;
    background: transparent;
    color: #202122;
    font-family: 'Linux Libertine', 'Georgia', 'Times', 'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', 'PMingLiU', serif;
    font-size: 125%;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
}

table.encyclato-infobox .infobox-banner-title {
    font-size: 100%;
}

table.encyclato-infobox .infobox-native-name,
table.encyclato-infobox .infobox-banner-native {
    margin-top: 0.1em;
    font-size: 80%;
    font-weight: normal;
}

table.encyclato-infobox .infobox-banner-role {
    margin-top: 0.15em;
    font-family: sans-serif;
    font-size: 72%;
    font-weight: bold;
}

table.encyclato-infobox .infobox-banner-sub {
    margin-top: 0.2em;
    font-family: sans-serif;
    font-size: 68%;
    font-weight: normal;
}

/* 國家或政黨狀態：斜體小字 */
table.encyclato-infobox .infobox-status-wrap {
    margin-top: 0.15em;
    font-family: sans-serif;
    font-size: 68%;
    font-weight: normal;
}

table.encyclato-infobox .infobox-status {
    font-style: italic;
}

table.encyclato-infobox .infobox-status-active {
    color: #14866d;
}

table.encyclato-infobox .infobox-status-defunct {
    color: #54595d;
}


/* =========================================================
   3. 分區標題
========================================================= */

table.encyclato-infobox > tbody > tr > th.infobox-section {
    padding: 0.2em 0.4em;
    border: 0 !important;
    background-color: #eaecf0;
    font-weight: bold;
    text-align: center;
}

/* 次級標題，例如人物面板的職務名稱 */
table.encyclato-infobox > tbody > tr > th.infobox-subsection {
    padding: 0.2em 0.4em;
    border: 0 !important;
    background-color: #e6e6fa;
    font-weight: bold;
    text-align: center;
}


/* =========================================================
   4. 欄名與內容
========================================================= */

table.encyclato-infobox > tbody > tr > th.infobox-label {
    width: auto;
    padding-right: 0.65em;
    background: transparent;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
}

table.encyclato-infobox > tbody > tr > th.infobox-label + td {
    background: transparent;
    text-align: left;
    overflow-wrap: anywhere;
}

/* 四字以內的欄名兩端對齊 */
table.encyclato-infobox .infobox-label-text {
    display: inline-block;
    width: 4em;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-character;
}

/* 職稱、建立事件等自訂欄名允許換行 */
table.encyclato-infobox > tbody > tr > th.infobox-label-dynamic {
    white-space: normal;
}

/* 第二行的補充資訊，例如出生地 */
table.encyclato-infobox .infobox-subline {
    display: block;
}

/* 年份與排名：括號小字 */
table.encyclato-infobox .infobox-year,
table.encyclato-infobox .infobox-rank {
    margin-left: 0.2em;
    color: #54595d;
    font-size: 90%;
    white-space: nowrap;
}

table.encyclato-infobox .infobox-year::before,
table.encyclato-infobox .infobox-rank::before {
    content: "（";
}

table.encyclato-infobox .infobox-year::after,
table.encyclato-infobox .infobox-rank::after {
    content: "）";
}


/* =========================================================
   5. 圖像與簽名
========================================================= */

table.encyclato-infobox .infobox-image-cell,
table.encyclato-infobox .infobox-portrait-cell,
table.encyclato-infobox .infobox-map-cell,
table.encyclato-infobox .infobox-wide-image {
    padding: 0.4em 0.2em;
    text-align: center;
    vertical-align: middle;
}

table.encyclato-infobox .infobox-portrait-caption,
table.encyclato-infobox .infobox-map-caption {
    margin-top: 0.2em;
    font-size: 94%;
    line-height: 1.4em;
}

table.encyclato-infobox .infobox-signature-cell {
    padding: 0.4em 0.2em;
    text-align: center;
}

table.encyclato-infobox .infobox-signature-label {
    display: block;
    font-weight: bold;
}

table.encyclato-infobox .infobox-signature-cell img {
    max-width: 150px;
    max-height: 80px;
    width: auto;
}


/* =========================================================
   6. 國旗與國徽
========================================================= */

table.encyclato-infobox .infobox-emblem-cell,
table.encyclato-infobox .infobox-symbol-cell {
    width: 50%;
    padding: 0.4em 0.2em;
    text-align: center;
    vertical-align: bottom;
}

table.encyclato-infobox .infobox-emblem-media,
table.encyclato-infobox .infobox-symbol-media {
    line-height: 0;
}

table.encyclato-infobox .infobox-flag-media img {
    border: 1px solid #c8ccd1;
}

table.encyclato-infobox .infobox-emblem-name,
table.encyclato-infobox .infobox-symbol-name {
    display: block;
    margin-top: 0.2em;
    font-size: 94%;
    font-weight: normal;
}

table.encyclato-infobox .infobox-emblem-meta {
    display: block;
    color: #54595d;
    font-size: 85%;
    line-height: 1.4em;
}

/* 舊版國旗列的多餘換行修正 */
table.encyclato-infobox tr.infobox-symbol-row br:first-child,
table.encyclato-infobox tr.infobox-symbol-row br:last-child {
    display: none;
}


/* =========================================================
   7. 格言與國歌
========================================================= */

table.encyclato-infobox .infobox-motto-cell {
    padding: 0.3em 0.4em;
    text-align: center;
}

table.encyclato-infobox .infobox-motto-line {
    margin: 0.1em 0;
}

table.encyclato-infobox .infobox-motto-label {
    margin-right: 0.3em;
    font-weight: bold;
}

table.encyclato-infobox .infobox-motto-label::after {
    content: "：";
}


/* =========================================================
   8. 歷代國旗與國徽（摺疊）
========================================================= */

table.encyclato-infobox .infobox-history-cell {
    padding: 0.2em 0.4em;
}

table.encyclato-infobox .infobox-history-title {
    font-weight: bold;
    text-align: center;
}

table.encyclato-infobox .mw-collapsible-toggle {
    float: right;
    font-weight: normal;
}

table.encyclato-infobox .infobox-history-item {
    display: flex;
    align-items: flex-end;
    gap: 0.4em;
    padding: 0.4em 0 0.2em;
}

table.encyclato-infobox .infobox-history-col {
    flex: 1 1 50%;
    text-align: center;
}


/* =========================================================
   9. 任期與前任繼任
========================================================= */

table.encyclato-infobox .infobox-term-cell {
    padding: 0.1em 0.4em 0.3em;
    text-align: center;
}

table.encyclato-infobox .infobox-succession-cell {
    width: 50%;
    padding: 0.2em 0.4em;
    text-align: center;
    vertical-align: top;
}

table.encyclato-infobox .infobox-succession-label {
    display: block;
    font-weight: bold;
}


/* =========================================================
   10. 跨欄內容、備註與頁尾
========================================================= */

table.encyclato-infobox .infobox-wide-cell {
    padding: 0.2em 0.4em;
    text-align: left;
}

table.encyclato-infobox .infobox-note {
    padding: 0.3em 0.4em;
    font-size: 90%;
    text-align: left;
}

table.encyclato-infobox .infobox-footer-cell {
    padding: 0.3em 0.4em;
    text-align: center;
}

table.encyclato-infobox .infobox-footer-line + .infobox-footer-line {
    margin-top: 0.1em;
}

table.encyclato-infobox .infobox-footer-label {
    margin-right: 0.3em;
    font-weight: bold;
}

table.encyclato-infobox .infobox-footer-label::after {
    content: "：";
}


/* =========================================================
   11. 數值警告與分級
   不限定在資訊面板內，一般表格也可使用
========================================================= */

.infobox-warning {
    margin-left: 0.3em;
    color: #d33;
    font-size: 85%;
    font-weight: bold;
    white-space: nowrap;
}

.infobox-value-invalid {
    color: #d33;
}

.infobox-grade::after {
    margin-left: 0.35em;
    font-weight: bold;
}

/* 人類發展指數：越高越好 */
.infobox-hdi-1::after { content: "極高"; color: #006400; }
.infobox-hdi-2::after { content: "高";   color: #2e8b57; }
.infobox-hdi-3::after { content: "中";   color: #b8860b; }
.infobox-hdi-4::after { content: "低";   color: #b22222; }

/* 基尼係數：越低越平均 */
.infobox-gini-1::after { content: "極低"; color: #006400; }
.infobox-gini-2::after { content: "低";   color: #2e8b57; }
.infobox-gini-3::after { content: "中等"; color: #b8860b; }
.infobox-gini-4::after { content: "高";   color: #cc5500; }
.infobox-gini-5::after { content: "極高"; color: #b22222; }


/* =========================================================
   12. 政黨色
   party-bar-*：表頭上緣色條
   party-bg-*：執政或當選儲存格的淡色底
   party-swatch-*：文字前的小色塊
========================================================= */

/* 紫荊政友會 */
.party-bar-zijing    { border-top: 4px solid #6b4a8b !important; }
.party-bg-zijing     { background-color: #efe7f5 !important; }
.party-swatch-zijing { background-color: #6b4a8b; }

/* 中央黨（3701－3731） */
.party-bar-zhongyang    { border-top: 4px solid #8a6aa8 !important; }
.party-bg-zhongyang     { background-color: #f3edf8 !important; }
.party-swatch-zhongyang { background-color: #8a6aa8; }

/* 日月新潮流 */
.party-bar-riyue    { border-top: 4px solid #c9a227 !important; }
.party-bg-riyue     { background-color: #fbf3d9 !important; }
.party-swatch-riyue { background-color: #c9a227; }

/* 中間派 */
.party-bar-zhongjian    { border-top: 4px solid #9aa0a6 !important; }
.party-bg-zhongjian     { background-color: #eeeeee !important; }
.party-swatch-zhongjian { background-color: #9aa0a6; }

/* 聯合政府 */
.party-bg-coalition { background-color: #eeeeee !important; }

/* 其他與無黨籍 */
.party-bar-other    { border-top: 4px solid #c8ccd1 !important; }
.party-swatch-other { background-color: #c8ccd1; }

/* 色塊共用樣式 */
[class*="party-swatch-"] {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.3em;
    border: 1px solid #a2a9b1;
    vertical-align: -0.1em;
}


/* =========================================================
   13. 維基標準表格
========================================================= */

table.wikitable {
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
    background-color: #f8f9fa;
    color: #202122;
}

table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
    padding: 0.2em 0.4em;
    border: 1px solid #a2a9b1;
}

table.wikitable > * > tr > th {
    background-color: #eaecf0;
    text-align: center;
}

table.wikitable > caption {
    padding: 0.2em 0;
    font-weight: bold;
}

/* 列標題不加粗、靠左 */
table.wikitable.plainrowheaders > * > tr > th[scope="row"] {
    font-weight: normal;
    text-align: left;
}

/* 合計列固定在底部，不參與排序 */
table.wikitable > * > tr.sortbottom > th,
table.wikitable > * > tr.sortbottom > td {
    background-color: #eaecf0;
    font-weight: bold;
}

/* 數字欄靠右 */
table.wikitable .num {
    text-align: right;
    white-space: nowrap;
}

/* 置中表格 */
table.wikitable.center {
    margin-left: auto;
    margin-right: auto;
}

/* 全寬表格 */
table.wikitable.fullwidth {
    width: 100%;
}


/* =========================================================
   14. 歷史朝代資訊面板
   模板：歷史朝代資訊面板
========================================================= */

table.dynasty-info-table {
    width: 100%;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
    color: #202122;
    font-size: 95%;
    line-height: 1.45;
}

table.dynasty-info-table > caption {
    padding: 0.55em 0.7em;
    border: 1px solid #a2a9b1;
    border-bottom: 0;
    background: #eaecf0;
    font-size: 125%;
    font-weight: 700;
    text-align: center;
}

table.dynasty-info-table > tbody > tr > th,
table.dynasty-info-table > tbody > tr > td {
    padding: 0.42em 0.6em;
    border: 1px solid #c8ccd1;
    vertical-align: middle;
}

table.dynasty-info-table > tbody > tr.dynasty-info-head > th {
    background: #eaecf0;
    font-weight: 700;
    text-align: center;
}

table.dynasty-info-table .dynasty-col-period { width: 12%; }
table.dynasty-info-table .dynasty-col-name   { width: 16%; }
table.dynasty-info-table .dynasty-col-date   { width: 19%; }
table.dynasty-info-table .dynasty-col-story  { width: 53%; }

table.dynasty-info-table .dynasty-period {
    background: #f1f3f5;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

table.dynasty-info-table .dynasty-name {
    background: #fff;
    font-weight: 600;
    text-align: center;
}

table.dynasty-info-table .dynasty-date {
    background: #fff;
    text-align: center;
    white-space: nowrap;
}

table.dynasty-info-table .dynasty-story {
    background: #fff;
    text-align: left;
}

table.dynasty-info-table > tbody > tr.dynasty-data-row:hover > td,
table.dynasty-info-table > tbody > tr.dynasty-data-row:hover > th {
    background-color: #f8f9fa;
}

table.dynasty-info-table > tbody > tr.dynasty-hidden {
    display: none;
}


/* =========================================================
   15. 主條目提示（hatnote）
   用法：<div class="hatnote">另請參閱主條目：[[大奭學制]]</div>
========================================================= */

.hatnote {
    margin-bottom: 0.5em;
    padding-left: 1.6em;
    font-style: italic;
}

.hatnote i {
    font-style: normal;
}

.hatnote + .hatnote {
    margin-top: -0.5em;
}


/* =========================================================
   16. 導覽框（navbox）
   置於條目底部，串連同一主題的條目
========================================================= */

table.navbox {
    clear: both;
    width: 100%;
    margin: 1em auto 0;
    padding: 1px;
    border: 1px solid #a2a9b1;
    border-spacing: 0;
    background-color: #fdfdfd;
    font-size: 88%;
    text-align: center;
}

table.navbox + table.navbox {
    margin-top: -1px;
}

table.navbox .navbox-title {
    padding: 0.25em 1em;
    background-color: #ccccff;
    font-size: 114%;
    font-weight: bold;
}

table.navbox .navbox-group {
    width: 1%;
    padding: 0.25em 1em;
    background-color: #ddddff;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

table.navbox .navbox-list {
    padding: 0.25em 0.5em;
    border-left: 2px solid #fdfdfd;
    text-align: left;
    line-height: 1.6em;
}

table.navbox .navbox-even {
    background-color: #f7f7f7;
}

table.navbox .navbox-odd {
    background-color: transparent;
}

/* 清單項目以「・」分隔 */
table.navbox .navbox-list ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

table.navbox .navbox-list li {
    display: inline;
    margin: 0;
}

table.navbox .navbox-list li + li::before {
    content: "・";
    padding: 0 0.1em;
    font-weight: bold;
}


/* =========================================================
   17. 前後任接續框
   用於人物條目底部，標示前任與繼任
========================================================= */

table.succession-box {
    clear: both;
    width: 100%;
    margin: 1em auto 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
    background-color: #f8f9fa;
    font-size: 90%;
    text-align: center;
}

table.succession-box > * > tr > th,
table.succession-box > * > tr > td {
    padding: 0.3em 0.6em;
    border: 1px solid #a2a9b1;
}

table.succession-box > * > tr > th {
    background-color: #eaecf0;
}

table.succession-box .succession-before,
table.succession-box .succession-after {
    width: 30%;
}

table.succession-box .succession-title {
    width: 40%;
    font-weight: bold;
}


/* =========================================================
   18. 公文與御批
   用於呈現奏摺、政牒、咨牒、札等公文原文
========================================================= */

.encyclato-document {
    max-width: 48em;
    margin: 1em 0;
    padding: 1em 1.4em;
    border: 1px solid #c8b99a;
    background-color: #fbf8f1;
    color: #202122;
    font-family: 'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', 'PMingLiU', serif;
    line-height: 1.9;
}

.encyclato-document .doc-title {
    margin-bottom: 0.6em;
    font-size: 110%;
    font-weight: bold;
    text-align: center;
}

.encyclato-document .doc-route {
    margin-bottom: 0.8em;
    color: #54595d;
    font-size: 90%;
    text-align: center;
}

.encyclato-document .doc-body p {
    margin: 0.4em 0;
    text-indent: 2em;
}

/* 挪抬：於敬稱前自動空一格 */
.encyclato-document .doc-honor::before {
    content: "\3000";
}

/* 落款與文號 */
.encyclato-document .doc-sign {
    margin-top: 1em;
    color: #202122;
    text-align: right;
}

.encyclato-document .doc-number {
    color: #54595d;
    font-size: 90%;
    text-align: right;
}

/* 御批：硃筆 */
.encyclato-document .doc-vermilion,
.doc-vermilion {
    color: #b8262b;
    font-family: 'DFKai-SB', 'BiauKai', 'Kaiti TC', 'STKaiti', 'KaiTi', serif;
    font-size: 112%;
    font-weight: bold;
}

.encyclato-document .doc-vermilion-block {
    margin-top: 1em;
    padding-top: 0.6em;
    border-top: 1px dashed #c8b99a;
}


/* =========================================================
   19. 參考文獻與輔助類別
========================================================= */

.reflist {
    margin-bottom: 0.5em;
    font-size: 90%;
    column-width: 30em;
}

.reflist ol.references {
    margin-top: 0;
}

.nowrap {
    white-space: nowrap;
}

.plainlist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plainlist li {
    margin-bottom: 0;
}

.muted {
    color: #54595d;
}


/* =========================================================
   20. 窄螢幕
========================================================= */

@media screen and (max-width: 720px) {
    table.wikitable,
    table.succession-box {
        display: block;
        overflow-x: auto;
    }

    table.navbox .navbox-group {
        white-space: normal;
    }

    .encyclato-document {
        padding: 0.8em 1em;
    }
}

@media screen and (max-width: 520px) {
    table.encyclato-infobox {
        width: 20em;
        max-width: calc(100% - 0.5em);
        margin: 0.5em 0 0.5em 0.6em !important;
    }
}


/* =========================================================
   21. 夜間模式
   適用 MediaWiki 1.43 以後的 Vector 2022 外觀
========================================================= */

@media screen {
    html.skin-theme-clientpref-night table.encyclato-infobox,
    html.skin-theme-clientpref-night table.wikitable,
    html.skin-theme-clientpref-night table.succession-box,
    html.skin-theme-clientpref-night table.dynasty-info-table {
        border-color: #72777d;
        background-color: #1b1d20;
        color: #eaecf0;
    }

    html.skin-theme-clientpref-night table.encyclato-infobox > caption,
    html.skin-theme-clientpref-night table.encyclato-infobox th.infobox-banner {
        color: #eaecf0;
    }

    html.skin-theme-clientpref-night table.encyclato-infobox th.infobox-section,
    html.skin-theme-clientpref-night table.wikitable > * > tr > th,
    html.skin-theme-clientpref-night table.succession-box > * > tr > th,
    html.skin-theme-clientpref-night table.dynasty-info-table th {
        background-color: #2a2d31;
        color: #eaecf0;
    }

    html.skin-theme-clientpref-night table.encyclato-infobox th.infobox-subsection {
        background-color: #2e2b45;
    }

    html.skin-theme-clientpref-night table.wikitable > * > tr > th,
    html.skin-theme-clientpref-night table.wikitable > * > tr > td,
    html.skin-theme-clientpref-night table.dynasty-info-table td {
        border-color: #72777d;
    }

    html.skin-theme-clientpref-night table.dynasty-info-table td {
        background-color: #1b1d20;
    }

    html.skin-theme-clientpref-night .encyclato-document {
        border-color: #6b5f47;
        background-color: #22201b;
        color: #eaecf0;
    }

    html.skin-theme-clientpref-night .doc-vermilion {
        color: #ff6b6b;
    }

    html.skin-theme-clientpref-night table.navbox {
        background-color: #1b1d20;
    }

    html.skin-theme-clientpref-night table.navbox .navbox-title {
        background-color: #3a3a66;
    }

    html.skin-theme-clientpref-night table.navbox .navbox-group {
        background-color: #2e2e52;
    }

    html.skin-theme-clientpref-night table.navbox .navbox-even {
        background-color: #232528;
    }

    html.skin-theme-clientpref-night .party-bg-zijing    { background-color: #3a2d47 !important; }
    html.skin-theme-clientpref-night .party-bg-zhongyang { background-color: #3d3148 !important; }
    html.skin-theme-clientpref-night .party-bg-riyue     { background-color: #45391a !important; }
    html.skin-theme-clientpref-night .party-bg-zhongjian,
    html.skin-theme-clientpref-night .party-bg-coalition { background-color: #34373b !important; }
}


/* =========================================================
   22. 列印
========================================================= */

@media print {
    table.encyclato-infobox {
        border-color: #000;
        background: #fff !important;
    }

    table.navbox,
    .mw-collapsible-toggle {
        display: none !important;
    }

    .encyclato-document {
        border-color: #000;
        background: #fff;
    }
}