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

提供: 小樽のじかん事典
編集の要約なし
編集の要約なし
30行目: 30行目:


/* =====================================================
/* =====================================================
   Timeless:Comments 拡張の外枠整理
   Timeless:Comments 拡張の外枠整理(本文基準に揃える)
   ===================================================== */
   ===================================================== */


/*
  Timeless では本文は内枠(中央寄せ)で表示されている。
  ここを padding 0 にすると、コメントだけが左に張り付いて見える。
  本文と同じ左右余白を与える。
*/
#mw-content-block #mw-data-after-content {
#mw-content-block #mw-data-after-content {
   margin-left: 0;
   margin-left: 0;
   margin-right: 0;
   margin-right: 0;
  padding-left: 0;
  padding-right: 0;
   max-width: none;
   max-width: none;
  padding-left: 2em;
  padding-right: 2em;
  box-sizing: border-box;
}
}


61行目: 69行目:
}
}


/* =========================
  コメント入力フォーム(幅の統一は最小限)
  ========================= */


/* 入力欄そのもの */
/* =====================================================
textarea#comment {
  Timeless:コメント見出しブロックの位置と間隔
    display: block;
  ===================================================== */
    box-sizing: border-box;
 
    width: calc(98% - 6em);
/*
    max-width: 56em;
  見出しの実体は
    margin-left: auto;
  div.mw-heading.mw-heading2 > h2#コメント
    margin-right: auto;
  h2 だけでなく wrapper 側を基準にする。
    padding: 0.6em;
*/
#mw-data-after-content .mw-heading.mw-heading2 {
  margin: 0 0 1em 0;
  padding: 0;
}
}


/* Comments-submit の文章も同一基準に統一 */
/* 見出し自体の余計なマージンを抑制 */
#comments-body form .c-form-title,
#mw-data-after-content .mw-heading.mw-heading2 > h2#コメント {
#comments-body form p,
  margin: 0;
#comments-body form .mw-message-box,
#comments-body form .oo-ui-messageWidget {
    box-sizing: border-box;
    width: calc(98% - 6em);
    max-width: 56em;
    margin-left: auto;
    margin-right: auto;
}
}


/* =========================
/* 見出し直下(コメント本文ブロック)との間隔 */
  コメント投稿ボタン(右寄せ)
#mw-data-after-content .mw-heading.mw-heading2 + * {
  ========================= */
  margin-top: 1em;
 
#comments-body form .c-form-button {
    text-align: right;
}
}


#comments-body form .c-form-button input,
#comments-body form .c-form-button button {
    margin-left: auto;
}


/* =====================================================
/* =====================================================
   Timeless:コメント見出しの位置調整
   コメント入力フォーム(幅の統一は最小限)
   ===================================================== */
   ===================================================== */


/* コメント見出し */
/* 入力欄そのもの */
#mw-data-after-content h2#コメント {
textarea#comment {
    margin-left: 2em;
  display: block;
  box-sizing: border-box;
  width: calc(98% - 6em);
  max-width: 56em;
  margin-left: auto;
  margin-right: auto;
  padding: 0.6em;
}
}


/* 見出し直下の要素(区切り線・説明文など) */
/* Comments-submit の文章も textarea と同一基準に */
#mw-data-after-content h2#コメント + * {
#comments-body form .c-form-title,
    margin-left: 2em;
#comments-body form p,
#comments-body form .mw-message-box,
#comments-body form .oo-ui-messageWidget {
  box-sizing: border-box;
  width: calc(98% - 6em);
  max-width: 56em;
  margin-left: auto;
  margin-right: auto;
}
}




/* =====================================================
/* =====================================================
   Timeless:中央コンテンツと右カラムの間隔調整
   コメント投稿ボタン(右寄せ)
   ===================================================== */
   ===================================================== */


/* 中央コンテンツを少し狭める */
#comments-body form .c-form-button {
#mw-content-container {
  text-align: right;
    padding-right: 2em;
}
}


/* =====================================================
#comments-body form .c-form-button input,
  Timeless:右カラム(ページツール)の右端ベタ付きを解消
#comments-body form .c-form-button button {
  ===================================================== */
   margin-left: auto;
 
/* 右カラム全体を右端から離す(位置を動かす) */
body.skin-timeless #mw-site-navigation {
  right: 2em !important;
  inset-inline-end: 2em !important;
}
 
/* 念のため、右カラム内の塊にも内側余白(中身が詰まるのを防ぐ) */
body.skin-timeless #mw-site-navigation .sidebar-chunk {
   box-sizing: border-box;
  padding-left: 2em;
  padding-right: 2em;
}
}

2026年1月11日 (日) 11:15時点における版

/* =====================================================
   Timeless:ページツールの不要項目を非表示
   ===================================================== */

/* サイドバー TOOLBOX 内 */
#t-whatlinkshere,
#t-recentchangeslinked,
#t-info,
#t-log {
  display: none;
}

/* 右カラム ページツール */
#mw-related-navigation #t-print,
#mw-related-navigation #t-permalink,
#mw-related-navigation #t-pagelog {
  display: none;
}

/* 右カラム ページツール「その他」見出し */
#mw-related-navigation #p-pagemisc > h3 {
  display: none;
}

/* 記事タイトル直下 インラインツール「その他」 */
#mw-page-header-links #p-more {
  display: none;
}


/* =====================================================
   Timeless:Comments 拡張の外枠整理(本文基準に揃える)
   ===================================================== */

/*
  Timeless では本文は内枠(中央寄せ)で表示されている。
  ここを padding 0 にすると、コメントだけが左に張り付いて見える。
  本文と同じ左右余白を与える。
*/
#mw-content-block #mw-data-after-content {
  margin-left: 0;
  margin-right: 0;
  max-width: none;

  padding-left: 2em;
  padding-right: 2em;

  box-sizing: border-box;
}


/* =====================================================
   Comments:背景色を記事本文と同一に
   ===================================================== */

#mw-data-after-content {
  background-color: #ffffff;
}

#mw-data-after-content .comments-body,
#mw-data-after-content .c-comment,
#mw-data-after-content .c-item {
  background-color: #ffffff;
}

#mw-data-after-content .c-item {
  background-color: transparent;
  border: none;
}


/* =====================================================
   Timeless:コメント見出しブロックの位置と間隔
   ===================================================== */

/*
  見出しの実体は
  div.mw-heading.mw-heading2 > h2#コメント
  h2 だけでなく wrapper 側を基準にする。
*/
#mw-data-after-content .mw-heading.mw-heading2 {
  margin: 0 0 1em 0;
  padding: 0;
}

/* 見出し自体の余計なマージンを抑制 */
#mw-data-after-content .mw-heading.mw-heading2 > h2#コメント {
  margin: 0;
}

/* 見出し直下(コメント本文ブロック)との間隔 */
#mw-data-after-content .mw-heading.mw-heading2 + * {
  margin-top: 1em;
}


/* =====================================================
   コメント入力フォーム(幅の統一は最小限)
   ===================================================== */

/* 入力欄そのもの */
textarea#comment {
  display: block;
  box-sizing: border-box;
  width: calc(98% - 6em);
  max-width: 56em;
  margin-left: auto;
  margin-right: auto;
  padding: 0.6em;
}

/* Comments-submit の文章も textarea と同一基準に */
#comments-body form .c-form-title,
#comments-body form p,
#comments-body form .mw-message-box,
#comments-body form .oo-ui-messageWidget {
  box-sizing: border-box;
  width: calc(98% - 6em);
  max-width: 56em;
  margin-left: auto;
  margin-right: auto;
}


/* =====================================================
   コメント投稿ボタン(右寄せ)
   ===================================================== */

#comments-body form .c-form-button {
  text-align: right;
}

#comments-body form .c-form-button input,
#comments-body form .c-form-button button {
  margin-left: auto;
}