コンテンツにスキップ

「MediaWiki:Common.css」の版間の差分

MediaWiki:Common.css (ソースを閲覧)

2026年8月26日 (水) 17:53時点における版

13,283 バイト追加 、 2026年8月26日 (水)
編集の要約なし
編集の要約なし
タグ: 手動差し戻し
編集の要約なし
1,279行目: 1,279行目:
     color: var(--ts-muted);
     color: var(--ts-muted);
     font-size: .82rem;
     font-size: .82rem;
}
/* =========================================================
  転スラ年表・転スラ全史
  共通デザイン
  ========================================================= */
/* =========================================================
  0. 基本
  ========================================================= */
.ts-chronology,
.ts-fullchronology {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
/* 年表内でMediaWiki側が生成する段落余白を抑える */
.ts-chronology p,
.ts-fullchronology p,
.ts-chron-entry p,
.ts-fullchron-entry p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* =========================================================
  1. ページ上部
  ========================================================= */
.ts-chron-header,
.ts-fullchron-header {
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
}
/* ---------- 導入文 ---------- */
.ts-chron-lead,
.ts-fullchron-lead {
    margin: 0 0 12px;
    padding: 0;
    font-size: 1rem;
    line-height: 1.85;
}
/* ---------- 注意書き ---------- */
.ts-chron-notice,
.ts-fullchron-notice {
    margin: 14px 0;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 1px solid #c8ccd1;
    border-left: 3px solid #36c;
    border-radius: 2px;
    font-size: .94rem;
    line-height: 1.75;
    box-sizing: border-box;
}
.ts-chron-notice p,
.ts-fullchron-notice p {
    margin: 0 !important;
}
.ts-chron-notice p + p,
.ts-fullchron-notice p + p {
    margin-top: 5px !important;
}
/* ---------- 年表内ナビ ---------- */
.ts-chron-nav,
.ts-fullchron-nav {
    margin: 14px 0 18px;
    padding: 7px 0;
    border-top: 1px solid #c8ccd1;
    border-bottom: 1px solid #c8ccd1;
    font-size: .94rem;
    line-height: 1.8;
}
.ts-chron-nav a,
.ts-fullchron-nav a {
    white-space: nowrap;
}
/* ---------- 他方の年表へのリンクなど ---------- */
.ts-chron-more,
.ts-fullchron-more {
    margin: 8px 0 0;
    padding: 0;
    font-size: .94rem;
    line-height: 1.6;
}
/* =========================================================
  2. 時代セクション
  ========================================================= */
.ts-chron-section,
.ts-fullchron-section {
    width: 100%;
    margin: 20px 0 26px !important;
    padding: 0 !important;
    box-sizing: border-box;
}
/* 年表と全史の見出しを完全に同じデザインにする */
h2.ts-chron-section-title,
h2.ts-fullchron-section-title,
.ts-chron-section-title,
.ts-fullchron-section-title {
    margin: 0 0 8px !important;
    padding: 5px 10px !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #c8ccd1 !important;
    border-left: 4px solid #36c !important;
    background: transparent !important;
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    box-sizing: border-box;
}
/* =========================================================
  3. タイムライン本体
  ========================================================= */
.ts-chron-list,
.ts-fullchron-list {
    position: relative;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box;
}
/* ---------- 縦線 ---------- */
.ts-chron-list::before,
.ts-fullchron-list::before {
    content: "";
    position: absolute;
    left: 145px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #a7c1ee;
    z-index: 0;
}
/* =========================================================
  4. 1件の出来事
  ========================================================= */
.ts-chron-entry,
.ts-fullchron-entry {
    position: relative;
    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr) !important;
    column-gap: 30px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    /*
    * 以前よりかなりコンパクト。
    * これ以上狭くすると逆に詰まりすぎるため
    * まずは7px / 9pxを標準とする。
    */
    padding: 7px 0 9px !important;
    border-bottom: 1px solid #eaecf0;
    box-sizing: border-box;
}
/* 最終項目 */
.ts-chron-entry:last-child,
.ts-fullchron-entry:last-child {
    border-bottom: 0;
}
/* ---------- タイムライン上の丸 ---------- */
.ts-chron-entry::before,
.ts-fullchron-entry::before {
    content: "";
    position: absolute;
    left: 140px;
    top: 12px;
    width: 11px;
    height: 11px;
    background: #fff;
    border: 2px solid #36c;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 2;
}
/* =========================================================
  5. 年代
  ========================================================= */
.ts-chron-date,
.ts-fullchron-date {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right;
    color: #2457a6;
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    box-sizing: border-box;
}
/* =========================================================
  6. 本文エリア
  ========================================================= */
.ts-chron-body,
.ts-fullchron-main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
/* =========================================================
  7. 出来事名
  ========================================================= */
.ts-chron-event,
.ts-fullchron-event {
    width: 100%;
    margin: 0 0 2px !important;
    padding: 0 !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    box-sizing: border-box;
}
/* =========================================================
  8. 概要
  ========================================================= */
.ts-chron-summary,
.ts-fullchron-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .96rem;
    line-height: 1.65;
    box-sizing: border-box;
}
/* =========================================================
  9. 全史のみ：人物・国家・組織・出典
  ========================================================= */
.ts-fullchron-meta {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
/* ---------- 1行 ---------- */
.ts-fullchron-meta-row {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    gap: 8px;
    line-height: 1.55;
    box-sizing: border-box;
}
/* ---------- 人物・国家・組織・出典ラベル ---------- */
.ts-fullchron-meta-label {
    display: block !important;
    flex: 0 0 3.5em !important;
    width: 3.5em !important;
    min-width: 3.5em !important;
    max-width: 3.5em !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #54595d;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap !important;
    box-sizing: border-box;
}
/* ---------- 実際の値 ---------- */
.ts-fullchron-meta-value {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .9rem;
    line-height: 1.55;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
/* =========================================================
  10. 年代・前後関係に関する注記
  ========================================================= */
.ts-order-note {
    width: 100%;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    color: #72777d;
    font-size: .78rem;
    line-height: 1.5;
}
/* =========================================================
  11. 詳細を見る
  ========================================================= */
.ts-chron-detail,
.ts-fullchron-detail {
    width: 100%;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: .9rem;
    line-height: 1.5;
}
/* =========================================================
  12. リンク
  ========================================================= */
.ts-chronology a,
.ts-fullchronology a {
    text-decoration: none;
}
.ts-chronology a:hover,
.ts-fullchronology a:hover {
    text-decoration: underline;
}
/* =========================================================
  13. タブレット
  ========================================================= */
@media screen and (max-width: 900px) {
    .ts-chron-list::before,
    .ts-fullchron-list::before {
        left: 125px;
    }
    .ts-chron-entry,
    .ts-fullchron-entry {
        grid-template-columns: 110px minmax(0, 1fr) !important;
        column-gap: 30px !important;
    }
    .ts-chron-entry::before,
    .ts-fullchron-entry::before {
        left: 120px;
    }
}
/* =========================================================
  14. スマートフォン
  ========================================================= */
@media screen and (max-width: 720px) {
    /* ---------- ページ上部 ---------- */
    .ts-chron-header,
    .ts-fullchron-header {
        margin-bottom: 14px;
    }
    .ts-chron-lead,
    .ts-fullchron-lead {
        font-size: .95rem;
        line-height: 1.75;
    }
    .ts-chron-notice,
    .ts-fullchron-notice {
        margin: 10px 0;
        padding: 9px 11px;
        font-size: .88rem;
        line-height: 1.7;
    }
    /* ナビは横スクロール可能にする */
    .ts-chron-nav,
    .ts-fullchron-nav {
        margin: 10px 0 14px;
        padding: 6px 0;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        font-size: .88rem;
        -webkit-overflow-scrolling: touch;
    }
    /* ---------- セクション ---------- */
    .ts-chron-section,
    .ts-fullchron-section {
        margin: 16px 0 22px !important;
    }
    h2.ts-chron-section-title,
    h2.ts-fullchron-section-title,
    .ts-chron-section-title,
    .ts-fullchron-section-title {
        margin-bottom: 6px !important;
        padding: 5px 8px !important;
        font-size: 1.08rem !important;
    }
    /* ---------- 縦線 ---------- */
    .ts-chron-list::before,
    .ts-fullchron-list::before {
        left: 8px;
    }
    /* ---------- 1件 ---------- */
    .ts-chron-entry,
    .ts-fullchron-entry {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding:
            7px
            0
            8px
            27px !important;
    }
    /* 丸 */
    .ts-chron-entry::before,
    .ts-fullchron-entry::before {
        left: 3px;
        top: 12px;
        width: 11px;
        height: 11px;
    }
    /* ---------- 年代 ---------- */
    .ts-chron-date,
    .ts-fullchron-date {
        margin: 0 0 2px !important;
        text-align: left;
        font-size: .84rem;
        line-height: 1.45;
    }
    /* ---------- 出来事 ---------- */
    .ts-chron-event,
    .ts-fullchron-event {
        margin-bottom: 2px !important;
        font-size: .96rem;
        line-height: 1.5;
    }
    /* ---------- 概要 ---------- */
    .ts-chron-summary,
    .ts-fullchron-summary {
        font-size: .9rem;
        line-height: 1.6;
    }
    /* ---------- 全史メタ情報 ---------- */
    .ts-fullchron-meta {
        margin-top: 4px !important;
    }
    .ts-fullchron-meta-row {
        gap: 5px;
        margin: 1px 0 !important;
        line-height: 1.5;
    }
    .ts-fullchron-meta-label {
        flex-basis: 3.2em !important;
        width: 3.2em !important;
        min-width: 3.2em !important;
        max-width: 3.2em !important;
        font-size: .82rem;
    }
    .ts-fullchron-meta-value {
        font-size: .82rem;
        line-height: 1.5;
    }
    /* ---------- 注記 ---------- */
    .ts-order-note {
        margin-top: 3px !important;
        font-size: .74rem;
    }
    /* ---------- 詳細 ---------- */
    .ts-chron-detail,
    .ts-fullchron-detail {
        margin-top: 3px !important;
        font-size: .84rem;
    }
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4043」から取得