「MediaWiki:Common.css」の版間の差分
編集の要約なし タグ: 差し戻し済み |
編集の要約なし |
||
| (同じ利用者による、間の36版が非表示) | |||
| 704行目: | 704行目: | ||
} | } | ||
/* ================================================== | /* ========================================================= | ||
転スラWiki メインページ | 転スラWiki メインページ | ||
================================================== */ | ========================================================= */ | ||
.ts-main { | .ts-main { | ||
max-width: | --ts-blue: #36c; | ||
--ts-blue-dark: #2a4b8d; | |||
--ts-blue-light: #f4f7fc; | |||
--ts-border: #c8ccd1; | |||
--ts-border-light: #eaecf0; | |||
--ts-text: #202122; | |||
--ts-subtext: #54595d; | |||
--ts-muted: #72777d; | |||
width: 100%; | |||
max-width: 1220px; | |||
margin: 0 auto; | margin: 0 auto; | ||
color: var(--ts-text); | |||
box-sizing: border-box; | |||
} | |||
/* | |||
MediaWikiが空行から生成するp/brが | |||
Gridのセルとして扱われるのを防ぐ | |||
*/ | |||
.ts-main > p, | |||
.ts-main-section > p, | |||
.ts-portal-grid > p, | |||
.ts-grid-4 > p, | |||
.ts-grid-2 > p, | |||
.ts-main > br, | |||
.ts-main-section > br, | |||
.ts-portal-grid > br, | |||
.ts-grid-4 > br, | |||
.ts-grid-2 > br { | |||
display: none !important; | |||
width: 0 !important; | |||
height: 0 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | } | ||
.ts- | /* ========================================================= | ||
margin: 0 0 | Welcome | ||
padding: | ========================================================= */ | ||
border | |||
.ts-welcome { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
gap: 25px; | |||
margin: 0 0 20px; | |||
padding: 15px 18px; | |||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #fff; | |||
} | } | ||
.ts- | .ts-welcome-title { | ||
margin: 0; | margin: 0 0 5px; | ||
font-size: | color: #202122; | ||
font-size: 1.45rem; | |||
font-weight: 700; | font-weight: 700; | ||
color: | line-height: 1.35; | ||
} | |||
.ts-welcome-desc { | |||
color: var(--ts-subtext); | |||
font-size: .92rem; | |||
line-height: 1.65; | |||
} | |||
.ts-welcome-count { | |||
flex-shrink: 0; | |||
padding-left: 20px; | |||
border-left: 1px solid var(--ts-border-light); | |||
color: var(--ts-muted); | |||
font-size: .87rem; | |||
white-space: nowrap; | |||
} | } | ||
.ts- | .ts-welcome-count strong { | ||
color: var(--ts-blue-dark); | |||
color: | font-size: 1.1rem; | ||
font-size: | |||
} | } | ||
.ts-main- | |||
margin | /* ========================================================= | ||
Section | |||
========================================================= */ | |||
.ts-main-section { | |||
margin: 18px 0 !important; | |||
padding: 0 !important; | |||
} | } | ||
.ts-main-heading { | |||
margin: 0 0 10px !important; | |||
padding: 4px 0 7px 10px !important; | |||
border: 0 !important; | |||
border-left: 4px solid var(--ts-blue) !important; | |||
border-bottom: 1px solid var(--ts-border-light) !important; | |||
. | font-size: 1.2rem !important; | ||
font-weight: 700 !important; | |||
line-height: 1.4 !important; | |||
} | } | ||
.ts- | .ts-main-heading::after { | ||
display: none !important; | |||
} | } | ||
/* | /* ========================================================= | ||
6 portal links | |||
========================================================= */ | |||
.ts-portal-grid { | .ts-portal-grid { | ||
display: grid; | display: grid !important; | ||
grid-template-columns: repeat(3, 1fr); | grid-template-columns: repeat(3, minmax(0, 1fr)) !important; | ||
gap: 0 !important; | |||
width: 100%; | |||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #fff; | background: #fff; | ||
} | } | ||
.ts-portal { | .ts-portal-card { | ||
display: grid !important; | |||
min-height: | grid-template-columns: 46px minmax(0, 1fr); | ||
padding: 18px | align-items: start; | ||
border-right: 1px solid | gap: 13px; | ||
border-bottom: 1px solid # | |||
min-width: 0; | |||
min-height: 118px; | |||
margin: 0 !important; | |||
padding: 17px 18px !important; | |||
border-right: 1px solid var(--ts-border-light); | |||
border-bottom: 1px solid var(--ts-border-light); | |||
background: #fff; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.ts-portal:nth- | .ts-portal-card:nth-of-type(3n) { | ||
border-right: | border-right: 0; | ||
} | |||
.ts-portal-card:nth-last-of-type(-n+3) { | |||
border-bottom: 0; | |||
} | } | ||
.ts-portal: | .ts-portal-card:hover { | ||
background: #f8faff; | |||
} | } | ||
.ts-portal: | .ts-portal-icon { | ||
background: # | display: flex; | ||
align-items: center; | |||
justify-content: center; | |||
width: 42px; | |||
height: 42px; | |||
border: 1px solid #a7b9d8; | |||
border-radius: 5px; | |||
background: #f8faff; | |||
color: var(--ts-blue-dark); | |||
font-size: 1rem; | |||
font-weight: 700; | |||
} | } | ||
.ts-portal-title { | .ts-portal-title { | ||
margin | margin: 1px 0 4px; | ||
font-size: 1. | font-size: 1.02rem; | ||
font-weight: 700; | font-weight: 700; | ||
} | } | ||
.ts-portal-title a { | .ts-portal-title a { | ||
color: | color: var(--ts-blue-dark); | ||
} | } | ||
.ts-portal- | .ts-portal-description { | ||
margin | margin: 0 0 7px; | ||
color: | color: var(--ts-subtext); | ||
font-size: | font-size: .86rem; | ||
line-height: 1. | line-height: 1.55; | ||
} | } | ||
.ts-portal- | .ts-portal-more { | ||
font-size: | font-size: .84rem; | ||
} | } | ||
/* | /* ========================================================= | ||
General panels | |||
========================================================= */ | |||
.ts-grid-4, | |||
.ts-grid-2 { | .ts-grid-2 { | ||
display: grid; | display: grid !important; | ||
grid-template-columns: 1fr | gap: 0 !important; | ||
width: 100%; | |||
overflow: hidden; | |||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #fff; | |||
} | |||
.ts-grid-4 { | |||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important; | |||
} | } | ||
.ts-grid- | .ts-grid-2 { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; | |||
grid-template-columns: repeat( | |||
} | } | ||
.ts-panel { | .ts-panel { | ||
padding: | min-width: 0; | ||
border: 1px solid | |||
margin: 0 !important; | |||
padding: 15px 17px !important; | |||
border-right: 1px solid var(--ts-border-light); | |||
background: #fff; | background: #fff; | ||
box-sizing: border-box; | |||
} | |||
.ts-grid-4 > .ts-panel:last-of-type, | |||
.ts-grid-2 > .ts-panel:last-of-type { | |||
border-right: none; | |||
} | |||
.ts-panel-heading { | |||
display: flex; | |||
align-items: center; | |||
gap: 6px; | |||
margin: 0 0 10px !important; | |||
padding: 0 0 7px !important; | |||
border-bottom: 1px solid var(--ts-border-light); | |||
color: var(--ts-blue-dark); | |||
font-size: 1rem; | |||
font-weight: 700; | |||
} | } | ||
.ts-panel- | .ts-panel-symbol { | ||
color: var(--ts-blue); | |||
font-weight: 700; | font-weight: 700; | ||
} | } | ||
.ts-panel-content { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
font-size: .88rem; | |||
line-height: 1.65; | |||
} | |||
.ts- | .ts-panel-content > p:first-child { | ||
margin- | margin-top: 0; | ||
} | } | ||
.ts- | .ts-panel-content ul { | ||
margin: 0 0 0 1.3em !important; | |||
padding: 0 !important; | |||
} | } | ||
.ts- | .ts-panel-content li { | ||
margin | margin: 4px 0; | ||
} | } | ||
/* ---------- | /* ========================================================= | ||
Pickup | |||
========================================================= */ | |||
.ts-pickup-label { | |||
display: inline-block; | |||
margin: 0 0 7px; | |||
padding: 2px 7px; | |||
border-radius: 3px; | |||
background: #eef3fb; | |||
color: var(--ts-blue-dark); | |||
font-size: .72rem; | |||
font-weight: 700; | |||
} | |||
.ts-pickup-title { | |||
margin: 0 0 6px; | |||
font-size: 1.08rem; | |||
font-weight: 700; | |||
} | |||
.ts- | .ts-pickup-text { | ||
margin: 0; | margin: 0; | ||
color: var(--ts-subtext); | |||
line-height: 1.6; | |||
} | } | ||
.ts- | .ts-panel-footer { | ||
margin: | margin-top: 10px; | ||
text-align: right; | |||
font-size: .83rem; | |||
} | } | ||
/* ========================================================= | |||
Ranking | |||
========================================================= */ | |||
.ts-ranking { | .ts-ranking { | ||
width: 100%; | width: 100%; | ||
margin: 0 !important; | |||
border: 0 !important; | |||
border-collapse: collapse; | border-collapse: collapse; | ||
background: transparent !important; | |||
font-size: .88rem; | |||
} | |||
.ts-ranking tr, | |||
.ts-ranking td { | |||
background: transparent !important; | |||
} | } | ||
.ts-ranking td { | .ts-ranking td { | ||
padding: | padding: 4px 3px !important; | ||
border: | border: 0 !important; | ||
} | } | ||
.ts-ranking- | .ts-ranking-num { | ||
width: | width: 26px; | ||
color: | color: var(--ts-muted); | ||
text-align: center; | text-align: center; | ||
} | } | ||
.ts-ranking-value { | .ts-ranking-value { | ||
width: 70px; | |||
color: var(--ts-muted); | |||
text-align: right; | text-align: right; | ||
white-space: nowrap; | white-space: nowrap; | ||
color: # | } | ||
.ts-up { | |||
color: #14866d; | |||
font-weight: 700; | |||
} | |||
/* ========================================================= | |||
DPL | |||
========================================================= */ | |||
.ts-dpl ul { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
list-style: none !important; | |||
} | |||
.ts-dpl li { | |||
margin: 0 !important; | |||
padding: 5px 0 !important; | |||
border-bottom: 1px dotted #d8dfe8; | |||
} | |||
.ts-dpl li:last-child { | |||
border-bottom: none; | |||
} | } | ||
/* | /* ========================================================= | ||
Edit | |||
========================================================= */ | |||
.ts-edit- | .ts-edit-list { | ||
margin: 0 !important; | |||
padding-left: 1.25em !important; | |||
} | } | ||
.ts-beginner { | .ts-edit-list li { | ||
margin: 4px 0; | |||
} | |||
.ts-beginner-box { | |||
margin-top: 12px; | margin-top: 12px; | ||
padding: 12px | padding: 11px 12px; | ||
background: # | |||
border-left: 3px solid var(--ts-blue); | |||
background: #f4f7fc; | |||
font-size: .86rem; | |||
} | |||
.ts-beginner-title { | |||
margin-bottom: 3px; | |||
font-weight: 700; | |||
} | } | ||
/* | /* ========================================================= | ||
About | |||
========================================================= */ | |||
.ts-about { | .ts-about { | ||
padding: 18px | margin: 0; | ||
padding: 16px 18px; | |||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #f8f9fa; | background: #f8f9fa; | ||
border: 1px solid | |||
border- | font-size: .9rem; | ||
line-height: 1.7; | |||
} | |||
.ts-about-title { | |||
margin-bottom: 5px; | |||
color: #202122; | |||
font-size: 1.03rem; | |||
font-weight: 700; | |||
} | |||
/* ========================================================= | |||
Bottom nav | |||
========================================================= */ | |||
.ts-subnav { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
margin: 18px 0 0; | |||
padding: 10px 0; | |||
border-top: 1px solid var(--ts-border-light); | |||
border-bottom: 1px solid var(--ts-border-light); | |||
font-size: .82rem; | |||
} | |||
.ts-subnav a { | |||
margin: 2px 0; | |||
padding: 0 11px; | |||
border-right: 1px solid var(--ts-border); | |||
} | |||
.ts-subnav a:last-child { | |||
border-right: none; | |||
} | } | ||
/* ---------- | /* ========================================================= | ||
Mobile / tablet | |||
========================================================= */ | |||
@media screen and (max-width: 1000px) { | |||
.ts-grid-4 { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; | |||
} | |||
.ts-grid-4 .ts-panel:nth-of-type(2n) { | |||
border-right: 0; | |||
} | |||
.ts-grid-4 .ts-panel:nth-of-type(-n+2) { | |||
border-bottom: 1px solid var(--ts-border-light); | |||
} | |||
} | |||
@media screen and (max-width: | @media screen and (max-width: 800px) { | ||
.ts-portal-grid { | .ts-portal-grid { | ||
grid-template-columns: 1fr | grid-template-columns: repeat(2, minmax(0, 1fr)) !important; | ||
} | |||
.ts-portal-card:nth-of-type(3n) { | |||
border-right: 1px solid var(--ts-border-light); | |||
} | |||
.ts-portal-card:nth-of-type(2n) { | |||
border-right: 0; | |||
} | } | ||
.ts-portal { | .ts-portal-card:nth-last-of-type(-n+3) { | ||
border- | border-bottom: 1px solid var(--ts-border-light); | ||
} | } | ||
.ts-portal:nth- | .ts-portal-card:nth-last-of-type(-n+2) { | ||
border- | border-bottom: 0; | ||
} | } | ||
.ts- | .ts-grid-2 { | ||
grid-template-columns: 1fr !important; | |||
} | } | ||
.ts- | .ts-grid-2 .ts-panel { | ||
border-bottom: 1px solid | border-right: 0; | ||
border-bottom: 1px solid var(--ts-border-light); | |||
} | } | ||
.ts- | .ts-grid-2 .ts-panel:last-of-type { | ||
border-bottom: | border-bottom: 0; | ||
} | } | ||
.ts- | .ts-welcome { | ||
.ts- | display: block; | ||
} | |||
.ts-welcome-count { | |||
margin-top: 10px; | |||
padding: 8px 0 0; | |||
border-top: 1px solid var(--ts-border-light); | |||
border-left: 0; | |||
} | } | ||
} | } | ||
@media screen and (max-width: 520px) { | @media screen and (max-width: 520px) { | ||
.ts-portal-grid { | .ts-portal-grid, | ||
grid-template-columns: 1fr; | .ts-grid-4 { | ||
grid-template-columns: 1fr !important; | |||
} | |||
.ts-portal-card, | |||
.ts-portal-card:nth-of-type(2n), | |||
.ts-portal-card:nth-of-type(3n) { | |||
border-right: 0; | |||
border-bottom: 1px solid var(--ts-border-light); | |||
} | |||
.ts-portal-card:last-of-type { | |||
border-bottom: 0; | |||
} | |||
.ts-grid-4 .ts-panel, | |||
.ts-grid-4 .ts-panel:nth-of-type(2n) { | |||
border-right: 0; | |||
border-bottom: 1px solid var(--ts-border-light); | |||
} | |||
.ts-grid-4 .ts-panel:last-of-type { | |||
border-bottom: 0; | |||
} | |||
} | |||
.ts-spoiler-note { | |||
color: var(--ts-muted); | |||
font-size: .82rem; | |||
} | |||
.ts-ranking-value { | |||
color: var(--ts-muted); | |||
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- | .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- | .ts-fullchron-meta-value { | ||
font-size: .82rem; | |||
line-height: 1.5; | |||
} | } | ||
.ts- | |||
font-size: | /* ---------- 注記 ---------- */ | ||
.ts-order-note { | |||
margin-top: 3px !important; | |||
font-size: .74rem; | |||
} | } | ||
/* ---------- 詳細 ---------- */ | |||
.ts-chron-detail, | |||
.ts-fullchron-detail { | |||
margin-top: 3px !important; | |||
font-size: .84rem; | |||
} | |||
} | |||
/* ResourceLoader cache refresh 2026-08-28 */ | |||
/* 案内・お知らせボックス */ | |||
.ts-notice-box { | |||
display: flex; | |||
align-items: center; | |||
gap: 12px; | |||
margin: 12px 0 20px; | |||
padding: 12px 16px; | |||
background: #f5f9ff; | |||
border: 1px solid #a2a9b1; | |||
border-left: 5px solid #36c; | |||
border-radius: 2px; | |||
box-sizing: border-box; | |||
} | |||
.ts-notice-icon { | |||
flex: 0 0 auto; | |||
width: 28px; | |||
height: 28px; | |||
border: 2px solid #36c; | |||
border-radius: 50%; | |||
color: #36c; | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 24px; | |||
text-align: center; | |||
} | |||
.ts-notice-content { | |||
flex: 1; | |||
line-height: 1.6; | |||
} | |||
@media screen and (max-width: 600px) { | |||
.ts-notice-box { | |||
align-items: flex-start; | |||
padding: 10px 12px; | |||
} | |||
} | |||
/* ========================================================= | |||
転スラWiki 外部画像スライドギャラリー 完全版 | |||
・画像を切り抜かない | |||
・高さを統一 | |||
・PCでは横並び+左右ボタン | |||
・スマホでは横スワイプ | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery { | |||
position: relative !important; | |||
display: block !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0.8em 0 1.5em !important; | |||
padding: 0 !important; | |||
box-sizing: border-box !important; | |||
} | |||
/* ========================================================= | |||
横スクロール領域 | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery .ts-gallery__track { | |||
display: flex !important; | |||
flex-direction: row !important; | |||
flex-wrap: nowrap !important; | |||
align-items: flex-start !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
gap: 12px !important; | |||
margin: 0 !important; | |||
padding: 4px 44px 10px 0 !important; | |||
overflow-x: auto !important; | |||
overflow-y: hidden !important; | |||
box-sizing: border-box !important; | |||
scroll-snap-type: x mandatory; | |||
scroll-behavior: smooth; | |||
-webkit-overflow-scrolling: touch; | |||
scrollbar-width: thin; | |||
scrollbar-color: #a2a9b1 transparent; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar { | |||
height: 6px; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-track { | |||
background: transparent; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-thumb { | |||
background: #a2a9b1; | |||
border-radius: 999px; | |||
} | |||
/* ========================================================= | |||
カード | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery .ts-gallery__item { | |||
position: relative !important; | |||
display: block !important; | |||
flex: 0 0 360px !important; | |||
width: 360px !important; | |||
min-width: 360px !important; | |||
max-width: 360px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 1px solid #a2a9b1 !important; | |||
border-radius: 5px !important; | |||
background: #fff !important; | |||
overflow: hidden !important; | |||
box-sizing: border-box !important; | |||
scroll-snap-align: start; | |||
} | |||
/* ========================================================= | |||
画像表示領域 | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox { | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 100% !important; | |||
height: 300px !important; | |||
min-height: 300px !important; | |||
max-height: 300px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
background: #f8f9fa !important; | |||
overflow: hidden !important; | |||
box-sizing: border-box !important; | |||
/* 余計なベースライン隙間防止 */ | |||
line-height: 0 !important; | |||
font-size: 0 !important; | |||
} | |||
/* ========================================================= | |||
MediaWikiが挿入する可能性があるラッパーを全部無害化 | |||
ここが超重要 | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > a, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > a, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > a, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span > a, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > span, | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > span { | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
max-width: 100% !important; | |||
max-height: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
box-sizing: border-box !important; | |||
line-height: 0 !important; | |||
font-size: 0 !important; | |||
} | |||
/* pタグが入っても余白を出さない */ | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox p { | |||
margin: 0 !important; | |||
} | |||
/* ========================================================= | |||
画像本体 | |||
画像全体を必ず表示(切り抜かない) | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox img { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
max-width: 100% !important; | |||
max-height: 100% !important; | |||
min-width: 0 !important; | |||
min-height: 0 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
object-fit: contain !important; | |||
object-position: center center !important; | |||
background: transparent !important; | |||
box-sizing: border-box !important; | |||
vertical-align: top !important; | |||
} | |||
/* ========================================================= | |||
キャプション | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery .ts-gallery__caption { | |||
display: block !important; | |||
width: 100% !important; | |||
margin: 0 !important; | |||
padding: 10px 12px 12px !important; | |||
background: #fff !important; | |||
color: #202122 !important; | |||
font-size: 12px !important; | |||
line-height: 1.6 !important; | |||
box-sizing: border-box !important; | |||
overflow-wrap: anywhere; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__source { | |||
color: #54595d !important; | |||
font-size: 11px !important; | |||
line-height: 1.55 !important; | |||
} | |||
/* ========================================================= | |||
左右ボタン | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery .ts-gallery__nav { | |||
position: absolute !important; | |||
top: 154px !important; | |||
z-index: 20 !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 40px !important; | |||
height: 40px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 1px solid #a2a9b1 !important; | |||
border-radius: 50% !important; | |||
background: rgba(255,255,255,.92) !important; | |||
color: #202122 !important; | |||
font-size: 26px !important; | |||
line-height: 1 !important; | |||
box-shadow: 0 1px 5px rgba(0,0,0,.2) !important; | |||
cursor: pointer !important; | |||
transform: translateY(-50%); | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__prev { | |||
left: 8px !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__next { | |||
right: 8px !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__nav:disabled { | |||
opacity: .25 !important; | |||
} | |||
.mw-parser-output .ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav { | |||
display: none !important; | |||
} | |||
/* ========================================================= | |||
スマホ | |||
========================================================= */ | |||
@media screen and (max-width: 720px) { | |||
.mw-parser-output .ts-gallery { | |||
margin: 0.6em 0 1.2em !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__track { | |||
gap: 9px !important; | |||
padding: 3px 28px 8px 0 !important; | |||
scrollbar-width: none; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar { | |||
display: none; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__item { | |||
flex: 0 0 calc(100% - 28px) !important; | |||
width: calc(100% - 28px) !important; | |||
min-width: calc(100% - 28px) !important; | |||
max-width: calc(100% - 28px) !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox { | |||
height: 250px !important; | |||
min-height: 250px !important; | |||
max-height: 250px !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__nav { | |||
top: 128px !important; | |||
width: 34px !important; | |||
height: 34px !important; | |||
font-size: 23px !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__prev { | |||
left: 5px !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__next { | |||
right: 5px !important; | |||
} | |||
} | |||
@media screen and (max-width: 380px) { | |||
.mw-parser-output .ts-gallery .ts-gallery__imagebox { | |||
height: 220px !important; | |||
min-height: 220px !important; | |||
max-height: 220px !important; | |||
} | |||
.mw-parser-output .ts-gallery .ts-gallery__nav { | |||
top: 113px !important; | |||
} | |||
} | |||
/* ========================================================= | |||
Infobox 外部画像スライダー | |||
========================================================= */ | |||
.ts-infobox-slider { | |||
position: relative !important; | |||
display: block !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
box-sizing: border-box !important; | |||
overflow: hidden !important; | |||
} | |||
/* ========================================================= | |||
スライド領域 | |||
========================================================= */ | |||
.ts-infobox-slider__track { | |||
display: flex !important; | |||
flex-direction: row !important; | |||
flex-wrap: nowrap !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
overflow-x: auto !important; | |||
overflow-y: hidden !important; | |||
box-sizing: border-box !important; | |||
scroll-snap-type: x mandatory; | |||
scroll-behavior: smooth; | |||
-webkit-overflow-scrolling: touch; | |||
overscroll-behavior-x: contain; | |||
/* スクロールバーは非表示 */ | |||
scrollbar-width: none; | |||
} | |||
.ts-infobox-slider__track::-webkit-scrollbar { | |||
display: none; | |||
} | } | ||
.ts- | |||
/* ========================================================= | |||
1枚のスライド | |||
========================================================= */ | |||
.ts-infobox-slider__slide { | |||
position: relative !important; | |||
display: block !important; | |||
flex: 0 0 100% !important; | |||
width: 100% !important; | |||
min-width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
box-sizing: border-box !important; | |||
scroll-snap-align: start; | |||
scroll-snap-stop: always; | |||
background: #fff; | |||
} | |||
/* ========================================================= | |||
画像表示領域 | |||
========================================================= */ | |||
.ts-infobox-slider__imagebox { | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 100% !important; | |||
/* | |||
* Infobox内なのでギャラリーより少しコンパクト | |||
*/ | |||
height: 300px !important; | |||
min-height: 300px !important; | |||
max-height: 300px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
background: #f8f9fa !important; | |||
overflow: hidden !important; | |||
box-sizing: border-box !important; | |||
line-height: 0 !important; | |||
font-size: 0 !important; | |||
} | |||
/* ========================================================= | |||
MediaWikiによるラッパー対策 | |||
========================================================= */ | |||
.ts-infobox-slider__imagebox p, | |||
.ts-infobox-slider__imagebox a, | |||
.ts-infobox-slider__imagebox span { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* ========================================================= | |||
画像本体 | |||
絶対にトリミングしない | |||
========================================================= */ | |||
.ts-infobox-slider__imagebox img { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
max-width: 100% !important; | |||
max-height: 100% !important; | |||
min-width: 0 !important; | |||
min-height: 0 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
/* | |||
* 元画像全体を表示する。 | |||
* cover は使用しない。 | |||
*/ | |||
object-fit: contain !important; | |||
object-position: center center !important; | |||
background: transparent !important; | |||
box-sizing: border-box !important; | |||
} | |||
/* ========================================================= | |||
各画像の説明 | |||
========================================================= */ | |||
.ts-infobox-slider__caption { | |||
display: block !important; | |||
width: 100% !important; | |||
margin: 0 !important; | |||
padding: 7px 8px 9px !important; | |||
background: #fff; | |||
color: #202122; | |||
font-size: 11px !important; | |||
line-height: 1.5 !important; | |||
text-align: left; | |||
box-sizing: border-box !important; | |||
overflow-wrap: anywhere; | |||
} | |||
.ts-infobox-slider__source { | |||
color: #54595d; | |||
font-size: 10px; | |||
line-height: 1.45; | |||
} | |||
/* ========================================================= | |||
左右ボタン | |||
========================================================= */ | |||
.ts-infobox-slider__nav { | |||
position: absolute !important; | |||
/* | |||
* 300pxの画像枠中央 | |||
*/ | |||
top: 150px !important; | |||
z-index: 20 !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 32px !important; | |||
height: 32px !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 1px solid rgba(84, 89, 93, 0.35) !important; | |||
border-radius: 50% !important; | |||
background: rgba(255, 255, 255, 0.88) !important; | |||
color: #54595d !important; | |||
font-family: Arial, sans-serif; | |||
font-size: 22px !important; | |||
font-weight: normal; | |||
line-height: 1 !important; | |||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); | |||
cursor: pointer; | |||
transform: translateY(-50%); | |||
} | |||
.ts-infobox-slider__prev { | |||
left: 5px !important; | |||
} | |||
.ts-infobox-slider__next { | |||
right: 5px !important; | |||
} | |||
.ts-infobox-slider__nav:hover { | |||
background: #fff !important; | |||
color: #202122 !important; | |||
} | |||
.ts-infobox-slider__nav:disabled { | |||
opacity: 0.25 !important; | |||
cursor: default; | |||
} | |||
/* 1枚しかない場合はナビ不要 */ | |||
.ts-infobox-slider--single .ts-infobox-slider__nav { | |||
display: none !important; | |||
} | |||
/* ========================================================= | |||
スマートフォン | |||
========================================================= */ | |||
@media screen and (max-width: 720px) { | |||
.ts-infobox-slider__imagebox { | |||
height: 280px !important; | |||
min-height: 280px !important; | |||
max-height: 280px !important; | |||
} | |||
.ts-infobox-slider__nav { | |||
top: 140px !important; | |||
} | |||
} | |||
/* メインページ4カラムを内容量に合わせる */ | |||
.ts-grid-4 { | |||
grid-auto-rows: auto !important; | |||
height: auto !important; | |||
min-height: 0 !important; | |||
} | |||
.ts-grid-4 > .ts-panel { | |||
height: auto !important; | |||
min-height: 0 !important; | |||
} | } | ||
2026年9月2日 (水) 19:11時点における最新版
/* ここに記述したCSSはすべての外装に反映されます */
/**
* Styling for links generated by [[MediaWiki:Edittools]] in WikimediaUI inspired theme.
* @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
* @updated 2020-03-17
*/
.mw-charinsert-buttons {
margin-top: 8px;
border: 1px solid #c8ccd1;
padding: 2px 4px 4px;
font-size: 1.1em;
text-align: center;
}
.mw-charinsert-buttons a {
background-color: #f8f9fa !important;
color: #202122;
border: thin #36c outset;
padding: 0 1px 2px;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
}
.mw-charinsert-buttons a:hover {
background-color: #fff;
color: #404244;
}
.mw-charinsert-buttons a:active {
background-color: #c8ccd1;
border-style: inset;
}
.client-js .mw-edittools-section {
display: inline;
}
.client-js .mw-edittools-section input[type="button"] {
background-color: #f8f9fa;
color: #202122;
margin-left: 1px;
border-radius: 2px;
padding: 1px 6px;
font-size: 0.9em;
/* Apply pointer cursor to all interactive elements. */
cursor: pointer;
}
.client-js .mw-edittools-section input[type="button"]:hover {
background-color: #fff;
color: #404244;
}
.client-js .mw-edittools-section input[type="button"]:active {
background-color: #c8ccd1;
color: #000;
}
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 1px #afeeee;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 135%;
background: #FFF;
color: #000;
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}
/* 線形グラデーション(左右) */
.mainpage {
width: 50%;
background-color: #f0ffff;
background: linear-gradient(to right, #d6eaff, #f9fcff);
background: -moz-linear-gradient(left, #d6eaff, #f9fcff);
background: -webkit-linear-gradient(left, #d6eaff, #f9fcff);
border-radius: 10px;
}
/*---- DPL Forum ----*/
/* Forumheader style */
.forum-header {
border: 1px solid #aaa;
background-color: #cedff2;
margin: 0 0 1em;
padding: 0 0.5em;
}
/* Forum table outside border */
table.forum-table {
border: 1px solid lightgrey;
}
/* Forum table cell padding and borders for all table body cells */
table.forum-table > tbody > tr > td {
border-top: 1px solid lightgrey;
padding: 8px;
}
/* Forum table background color (show on odd rows) */
table.forum-table > tbody > tr {
background-color:#fff;
}
/* Forum table background color (shows on even rows) */
table.forum-table > tbody > tr:nth-child(even) {
background-color:#f5faff;
}
/* Forum table header row background, style and padding */
table.forum-table > tbody > tr > th {
background-color:#cedff2;
font-weight:bold;
padding: 8px;
}
/*-- InputBox --*/
.inputbox-sidebar {
width: 300px;
border: 1px solid lightgrey;
clear: right;
float: right;
margin: 3px;
padding:10px;
margin-left: 2em;
}
/* 以下の内容はhttps://creativecommons.org/licenses/by-sa/3.0/ (クリエイティブ・コモンズ・表示・継承ライセンス3.0) のもとで公表されたウィキペディアの項目https://ja.wikipedia.org/wiki/MediaWiki:Common.css「MediaWiki:Common.css」を複製しています。
以下の内容はhttps://creativecommons.org/licenses/by-sa/3.0/ (クリエイティブ・コモンズ・表示・継承ライセンス3.0)の下で利用可能です。
変更履歴 → https:/ja.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=history */
/* フォント・ファミリの設定 */
/* [[MediaWiki‐ノート:Common.css#特定テンプレート用のCSSをTemplateStylesに移行する提案(1回目)]]により非推奨化([[Template:Unicode]]への移行推奨) */
.Unicode {
font-family: 'TITUS Cyberbit Basic', 'Code2000', 'Chrysanthi Unicode', 'Doulos SIL', 'Bitstream Cyberbit', 'Bitstream CyberBase', 'Bitstream Vera', 'Thryomanes', 'Gentium', 'GentiumAlt', 'Visual Geez Unicode', 'Lucida Grande', 'Arial Unicode MS', 'Microsoft Sans Serif', 'Lucida Sans Unicode', sans-serif;
}
.IPA {
font-family: 'Charis SIL', 'Doulos SIL', 'DejaVu Sans', 'Code2000', 'Hiragino Kaku Gothic Pro', 'Matrix Unicode', 'Tahoma', 'Microsoft Sans Serif', sans-serif;
}
/* make the list of references look smaller */
ol.references,
div.reflist {
font-size: 90%; /* Default font-size */
}
div.reflist ol.references {
font-size: 100%; /* Reset font-size when nested in div.reflist */
list-style-type: inherit; /* Enable custom list style types */
}
/* Default style for navigation boxes */
.navbox { /* Navbox container style */
box-sizing: border-box;
border: 1px solid #a2a9b1;
width: 100%;
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
}
.navbox + .navbox {
margin-top: -1px; /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
width: 100%;
}
.navbox-title,
.navbox-abovebelow,
.navbox th {
text-align: center; /* Title, group and above/below styles */
padding-left: 1em;
padding-right: 1em;
}
th.navbox-group { /* Group style */
white-space: nowrap;
/* @noflip */
text-align: right;
}
.navbox,
.navbox-subgroup {
background-color: #fdfdfd; /* Background color */
}
.navbox-list {
border-color: #fdfdfd; /* Must match background color */
}
/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list { /* Borders above 2nd, 3rd, etc. rows */
border-top: 2px solid #fdfdfd; /* Must match background color */
}
.navbox th,
.navbox-title {
background-color: #ccccff; /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
background-color: #ddddff; /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background-color: #e6e6ff; /* Level 3 color */
}
.navbox-even {
background-color: #f7f7f7; /* Even row striping */
}
.navbox-odd {
background-color: transparent; /* Odd row striping */
}
/* [[MediaWiki:Common.js]] にある createCollapseButtons 関数を参照。 */
.collapseButton {
float: right;
font-weight: normal;
text-align: right;
width: auto;
}
/* Styling for jQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
font-weight: normal;
/* @noflip */
text-align: right;
padding-right: 0.2em;
padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* @noflip */
float: left;
/* @noflip */
text-align: left;
}
/* 表組みを折り畳んだ場合、横幅が極端に狭くなることを強引に修正 */
table.mw-collapsed > caption {
white-space: nowrap;
}
/* Style for horizontal lists (separator following item).
@source mediawiki.org/wiki/Snippets/Horizontal_lists
@revision 9 (2016-08-10)
@author [[User:Edokter]]
*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
display: none;
}
/* Generate interpuncts */
.hlist dt:after {
content: ": ";
}
.hlist dd:after,
.hlist li:after {
content: " · ";
font-weight: bold;
}
/* 日本語版の独自仕様。-pipe、-hyphen、-comma、-slash */
.hlist-pipe dd:after,
.hlist-pipe li:after {
content: " | ";
font-weight: normal;
}
.hlist-hyphen dd:after,
.hlist-hyphen li:after {
content: " - ";
font-weight: normal;
}
.hlist-comma dd:after,
.hlist-comma li:after {
content: "、 ";
font-weight: normal;
}
.hlist-slash dd:after,
.hlist-slash li:after {
content: " / ";
font-weight: normal;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
content: ")";
font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li:before {
content: " " counter(listitem) ".\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
content: " (" counter(listitem) "\a0";
}
/* Avoid elements from breaking between columns */
li, dd {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
dt {
-webkit-column-break-after: avoid;
page-break-after: avoid;
break-after: avoid-column;
}
dd {
-webkit-column-break-before: avoid;
page-break-before: avoid;
break-before: avoid-column;
}
/* Merge template style */
.messagebox {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
width: 80%;
margin: 0 auto 1em auto;
padding: 0.2em;
text-align: justify;
}
.infobox {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
color: black;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
float: right;
clear: right;
text-align: left;
font-size: 88%;
line-height: 1.5em;
}
.infobox caption {
margin-top: 0.5em;
font-size: 125%;
font-weight: bold;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
/* Styles for geography infoboxes, eg countries,
country subdivisions, cities, etc. */
.infobox.geography {
border-collapse: collapse;
line-height: 1.6em;
font-size: 88%;
}
.infobox.geography td,
.infobox.geography th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
border-top: 0;
border-bottom: 1px solid #a2a9b1;
padding: 0 0.6em 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
border: 0;
padding: 0;
}
/* NavFrame関係。[[MediaWiki:Monobook.css]]も参照 */
div.NavFrame {
margin: 0px;
padding: 2px;
border: 1px solid #a2a9b1;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.NavFrame div.NavHead {
height: 1.6em;
font-weight: bold;
font-size: 100%;
background-color: #efefef;
position: relative;
text-align: center;
}
div.NavFrame p {
font-size: 100%;
}
div.NavFrame div.NavContent {
font-size: 100%;
}
div.NavFrame div.NavContent p {
font-size: 100%;
}
a.NavToggle {
position: absolute;
top: 0px;
right: 3px;
font-weight: normal;
}
/* System messages styled similarly to fmbox */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background-color: #ffdbdb;
padding: 0.25em 0.9em;
box-sizing: border-box;
}
/* 脚注ジャンプ先強調 */
.citation:target {
background-color: #eaf3ff;
}
/* 特定場所での改行を防ぐ:
1) 個別に指定した場所
2) リンク途中
3) グループ名付きの ref タグ <ref group="注"> --> "[注 1]" */
.nowrap,
.nowraplinks a,
sup.reference a {
white-space: nowrap;
}
/* 以下のクラスを指定した場所では解除する: */
.wrap,
.wraplinks a {
white-space: normal;
}
/*
* カテゴリページのリスト部にフロート指定のブロックを入れない。
* 2009-01-24 by [[User:mizusumashi]]
*/
#mw-subcategories, #mw-pages, #mw-category-media {
clear: both;
}
/* Don't display page title on the main page */
.page-メインページ #deleteconfirm,
.page-メインページ #t-cite,
.page-メインページ #footer-info-lastmod,
.action-view.page-メインページ #siteSub,
.action-view.page-メインページ .subtitle,
.action-view.page-メインページ .firstHeading,
.action-view.page-メインページ #contentSub,
.action-view.page-メインページ #contentSub2 {
display: none;
}
/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
line-height: inherit;
list-style: none;
margin: 0;
}
.plainlist ol li,
.plainlist ul li {
margin-bottom: 0;
}
/* [[Template:Math]]用のtexhtmlクラス。(2021-05-24更新)
texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 108%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
-webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
font-feature-settings: "lnum", "tnum", "kern" 0;
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
span.texhtml span.texhtml {
font-size: 100%;
}
span.mwe-math-mathml-inline {
font-size: 108%;
}
/* Make <math display="block"> be left aligned with one space indent for
* compatibility with style conventions
*/
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
.mwe-math-mathml-display math {
display: inline;
}
/* 日本語版追加分 */
span.texhtml sup {
vertical-align: 1.0ex;
font-size: 75%;
}
span.texhtml sub {
vertical-align: -0.5ex;
font-size: 75%;
}
/* MediaWiki:Common.js - modifyEditsection
拡張節編集リンク内の分割線をビジュアルエディター無効でも表示する */
.ve-not-available .editsection-extensions .mw-editsection-divider {
display: inline;
}
/* 履歴や本文で長い文字列を折り返せない問題の解消 */
#bodyContent {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Hide broken download box on [[Special:Book]] pending [[phab:T285400]] */
.mw-special-Book #coll-downloadbox {
display: none;
}
/* T156351: Support for Parsoid's Cite implementation */
span[rel="mw:referencedBy"]::before {
content: "^ ";
}
a[rel="mw:referencedBy"]::before {
font-weight: bold;
content: "^";
}
span[ rel="mw:referencedBy" ] {
counter-reset: mw-ref-linkback 0;
}
span[ rel="mw:referencedBy" ] > a::before {
font-weight: bold;
font-style: italic;
content: counter( mw-ref-linkback, lower-alpha );
}
.mw-ref > a[data-mw-group=lower-roman]::after {
content: '[' counter( mw-Ref, lower-roman ) ']';
}
.mw-ref > a[data-mw-group=upper-roman]::after {
content: '[' counter( mw-Ref, upper-roman ) ']';
}
.mw-ref > a[data-mw-group=decimal]::after {
content: '[' counter( mw-Ref, decimal ) ']';
}
.mw-ref > a[data-mw-group=lower-greek]::after {
content: '[' counter( mw-Ref, lower-greek ) ']';
}
.mw-ref > a[data-mw-group=upper-alpha]::after {
content: '[' counter( mw-Ref, upper-alpha ) ']';
}
.mw-ref > a[data-mw-group=lower-alpha]::after {
content: '[' counter( mw-Ref, lower-alpha ) ']';
}
/* =========================================================
転スラWiki メインページ
========================================================= */
.ts-main {
--ts-blue: #36c;
--ts-blue-dark: #2a4b8d;
--ts-blue-light: #f4f7fc;
--ts-border: #c8ccd1;
--ts-border-light: #eaecf0;
--ts-text: #202122;
--ts-subtext: #54595d;
--ts-muted: #72777d;
width: 100%;
max-width: 1220px;
margin: 0 auto;
color: var(--ts-text);
box-sizing: border-box;
}
/*
MediaWikiが空行から生成するp/brが
Gridのセルとして扱われるのを防ぐ
*/
.ts-main > p,
.ts-main-section > p,
.ts-portal-grid > p,
.ts-grid-4 > p,
.ts-grid-2 > p,
.ts-main > br,
.ts-main-section > br,
.ts-portal-grid > br,
.ts-grid-4 > br,
.ts-grid-2 > br {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
Welcome
========================================================= */
.ts-welcome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin: 0 0 20px;
padding: 15px 18px;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #fff;
}
.ts-welcome-title {
margin: 0 0 5px;
color: #202122;
font-size: 1.45rem;
font-weight: 700;
line-height: 1.35;
}
.ts-welcome-desc {
color: var(--ts-subtext);
font-size: .92rem;
line-height: 1.65;
}
.ts-welcome-count {
flex-shrink: 0;
padding-left: 20px;
border-left: 1px solid var(--ts-border-light);
color: var(--ts-muted);
font-size: .87rem;
white-space: nowrap;
}
.ts-welcome-count strong {
color: var(--ts-blue-dark);
font-size: 1.1rem;
}
/* =========================================================
Section
========================================================= */
.ts-main-section {
margin: 18px 0 !important;
padding: 0 !important;
}
.ts-main-heading {
margin: 0 0 10px !important;
padding: 4px 0 7px 10px !important;
border: 0 !important;
border-left: 4px solid var(--ts-blue) !important;
border-bottom: 1px solid var(--ts-border-light) !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.ts-main-heading::after {
display: none !important;
}
/* =========================================================
6 portal links
========================================================= */
.ts-portal-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100%;
overflow: hidden;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #fff;
}
.ts-portal-card {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr);
align-items: start;
gap: 13px;
min-width: 0;
min-height: 118px;
margin: 0 !important;
padding: 17px 18px !important;
border-right: 1px solid var(--ts-border-light);
border-bottom: 1px solid var(--ts-border-light);
background: #fff;
box-sizing: border-box;
}
.ts-portal-card:nth-of-type(3n) {
border-right: 0;
}
.ts-portal-card:nth-last-of-type(-n+3) {
border-bottom: 0;
}
.ts-portal-card:hover {
background: #f8faff;
}
.ts-portal-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid #a7b9d8;
border-radius: 5px;
background: #f8faff;
color: var(--ts-blue-dark);
font-size: 1rem;
font-weight: 700;
}
.ts-portal-title {
margin: 1px 0 4px;
font-size: 1.02rem;
font-weight: 700;
}
.ts-portal-title a {
color: var(--ts-blue-dark);
}
.ts-portal-description {
margin: 0 0 7px;
color: var(--ts-subtext);
font-size: .86rem;
line-height: 1.55;
}
.ts-portal-more {
font-size: .84rem;
}
/* =========================================================
General panels
========================================================= */
.ts-grid-4,
.ts-grid-2 {
display: grid !important;
gap: 0 !important;
width: 100%;
overflow: hidden;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #fff;
}
.ts-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.ts-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ts-panel {
min-width: 0;
margin: 0 !important;
padding: 15px 17px !important;
border-right: 1px solid var(--ts-border-light);
background: #fff;
box-sizing: border-box;
}
.ts-grid-4 > .ts-panel:last-of-type,
.ts-grid-2 > .ts-panel:last-of-type {
border-right: none;
}
.ts-panel-heading {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 10px !important;
padding: 0 0 7px !important;
border-bottom: 1px solid var(--ts-border-light);
color: var(--ts-blue-dark);
font-size: 1rem;
font-weight: 700;
}
.ts-panel-symbol {
color: var(--ts-blue);
font-weight: 700;
}
.ts-panel-content {
margin: 0 !important;
padding: 0 !important;
font-size: .88rem;
line-height: 1.65;
}
.ts-panel-content > p:first-child {
margin-top: 0;
}
.ts-panel-content ul {
margin: 0 0 0 1.3em !important;
padding: 0 !important;
}
.ts-panel-content li {
margin: 4px 0;
}
/* =========================================================
Pickup
========================================================= */
.ts-pickup-label {
display: inline-block;
margin: 0 0 7px;
padding: 2px 7px;
border-radius: 3px;
background: #eef3fb;
color: var(--ts-blue-dark);
font-size: .72rem;
font-weight: 700;
}
.ts-pickup-title {
margin: 0 0 6px;
font-size: 1.08rem;
font-weight: 700;
}
.ts-pickup-text {
margin: 0;
color: var(--ts-subtext);
line-height: 1.6;
}
.ts-panel-footer {
margin-top: 10px;
text-align: right;
font-size: .83rem;
}
/* =========================================================
Ranking
========================================================= */
.ts-ranking {
width: 100%;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse;
background: transparent !important;
font-size: .88rem;
}
.ts-ranking tr,
.ts-ranking td {
background: transparent !important;
}
.ts-ranking td {
padding: 4px 3px !important;
border: 0 !important;
}
.ts-ranking-num {
width: 26px;
color: var(--ts-muted);
text-align: center;
}
.ts-ranking-value {
width: 70px;
color: var(--ts-muted);
text-align: right;
white-space: nowrap;
}
.ts-up {
color: #14866d;
font-weight: 700;
}
/* =========================================================
DPL
========================================================= */
.ts-dpl ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.ts-dpl li {
margin: 0 !important;
padding: 5px 0 !important;
border-bottom: 1px dotted #d8dfe8;
}
.ts-dpl li:last-child {
border-bottom: none;
}
/* =========================================================
Edit
========================================================= */
.ts-edit-list {
margin: 0 !important;
padding-left: 1.25em !important;
}
.ts-edit-list li {
margin: 4px 0;
}
.ts-beginner-box {
margin-top: 12px;
padding: 11px 12px;
border-left: 3px solid var(--ts-blue);
background: #f4f7fc;
font-size: .86rem;
}
.ts-beginner-title {
margin-bottom: 3px;
font-weight: 700;
}
/* =========================================================
About
========================================================= */
.ts-about {
margin: 0;
padding: 16px 18px;
border: 1px solid var(--ts-border);
border-radius: 5px;
background: #f8f9fa;
font-size: .9rem;
line-height: 1.7;
}
.ts-about-title {
margin-bottom: 5px;
color: #202122;
font-size: 1.03rem;
font-weight: 700;
}
/* =========================================================
Bottom nav
========================================================= */
.ts-subnav {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 18px 0 0;
padding: 10px 0;
border-top: 1px solid var(--ts-border-light);
border-bottom: 1px solid var(--ts-border-light);
font-size: .82rem;
}
.ts-subnav a {
margin: 2px 0;
padding: 0 11px;
border-right: 1px solid var(--ts-border);
}
.ts-subnav a:last-child {
border-right: none;
}
/* =========================================================
Mobile / tablet
========================================================= */
@media screen and (max-width: 1000px) {
.ts-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ts-grid-4 .ts-panel:nth-of-type(2n) {
border-right: 0;
}
.ts-grid-4 .ts-panel:nth-of-type(-n+2) {
border-bottom: 1px solid var(--ts-border-light);
}
}
@media screen and (max-width: 800px) {
.ts-portal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ts-portal-card:nth-of-type(3n) {
border-right: 1px solid var(--ts-border-light);
}
.ts-portal-card:nth-of-type(2n) {
border-right: 0;
}
.ts-portal-card:nth-last-of-type(-n+3) {
border-bottom: 1px solid var(--ts-border-light);
}
.ts-portal-card:nth-last-of-type(-n+2) {
border-bottom: 0;
}
.ts-grid-2 {
grid-template-columns: 1fr !important;
}
.ts-grid-2 .ts-panel {
border-right: 0;
border-bottom: 1px solid var(--ts-border-light);
}
.ts-grid-2 .ts-panel:last-of-type {
border-bottom: 0;
}
.ts-welcome {
display: block;
}
.ts-welcome-count {
margin-top: 10px;
padding: 8px 0 0;
border-top: 1px solid var(--ts-border-light);
border-left: 0;
}
}
@media screen and (max-width: 520px) {
.ts-portal-grid,
.ts-grid-4 {
grid-template-columns: 1fr !important;
}
.ts-portal-card,
.ts-portal-card:nth-of-type(2n),
.ts-portal-card:nth-of-type(3n) {
border-right: 0;
border-bottom: 1px solid var(--ts-border-light);
}
.ts-portal-card:last-of-type {
border-bottom: 0;
}
.ts-grid-4 .ts-panel,
.ts-grid-4 .ts-panel:nth-of-type(2n) {
border-right: 0;
border-bottom: 1px solid var(--ts-border-light);
}
.ts-grid-4 .ts-panel:last-of-type {
border-bottom: 0;
}
}
.ts-spoiler-note {
color: var(--ts-muted);
font-size: .82rem;
}
.ts-ranking-value {
color: var(--ts-muted);
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;
}
}
/* ResourceLoader cache refresh 2026-08-28 */
/* 案内・お知らせボックス */
.ts-notice-box {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 0 20px;
padding: 12px 16px;
background: #f5f9ff;
border: 1px solid #a2a9b1;
border-left: 5px solid #36c;
border-radius: 2px;
box-sizing: border-box;
}
.ts-notice-icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
border: 2px solid #36c;
border-radius: 50%;
color: #36c;
font-size: 18px;
font-weight: bold;
line-height: 24px;
text-align: center;
}
.ts-notice-content {
flex: 1;
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.ts-notice-box {
align-items: flex-start;
padding: 10px 12px;
}
}
/* =========================================================
転スラWiki 外部画像スライドギャラリー 完全版
・画像を切り抜かない
・高さを統一
・PCでは横並び+左右ボタン
・スマホでは横スワイプ
========================================================= */
.mw-parser-output .ts-gallery {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0.8em 0 1.5em !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
横スクロール領域
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
gap: 12px !important;
margin: 0 !important;
padding: 4px 44px 10px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
box-sizing: border-box !important;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #a2a9b1 transparent;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
height: 6px;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-track {
background: transparent;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-thumb {
background: #a2a9b1;
border-radius: 999px;
}
/* =========================================================
カード
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__item {
position: relative !important;
display: block !important;
flex: 0 0 360px !important;
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #a2a9b1 !important;
border-radius: 5px !important;
background: #fff !important;
overflow: hidden !important;
box-sizing: border-box !important;
scroll-snap-align: start;
}
/* =========================================================
画像表示領域
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 !important;
padding: 0 !important;
background: #f8f9fa !important;
overflow: hidden !important;
box-sizing: border-box !important;
/* 余計なベースライン隙間防止 */
line-height: 0 !important;
font-size: 0 !important;
}
/* =========================================================
MediaWikiが挿入する可能性があるラッパーを全部無害化
ここが超重要
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > span,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* pタグが入っても余白を出さない */
.mw-parser-output .ts-gallery .ts-gallery__imagebox p {
margin: 0 !important;
}
/* =========================================================
画像本体
画像全体を必ず表示(切り抜かない)
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__imagebox img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
box-sizing: border-box !important;
vertical-align: top !important;
}
/* =========================================================
キャプション
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__caption {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 12px 12px !important;
background: #fff !important;
color: #202122 !important;
font-size: 12px !important;
line-height: 1.6 !important;
box-sizing: border-box !important;
overflow-wrap: anywhere;
}
.mw-parser-output .ts-gallery .ts-gallery__source {
color: #54595d !important;
font-size: 11px !important;
line-height: 1.55 !important;
}
/* =========================================================
左右ボタン
========================================================= */
.mw-parser-output .ts-gallery .ts-gallery__nav {
position: absolute !important;
top: 154px !important;
z-index: 20 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #a2a9b1 !important;
border-radius: 50% !important;
background: rgba(255,255,255,.92) !important;
color: #202122 !important;
font-size: 26px !important;
line-height: 1 !important;
box-shadow: 0 1px 5px rgba(0,0,0,.2) !important;
cursor: pointer !important;
transform: translateY(-50%);
}
.mw-parser-output .ts-gallery .ts-gallery__prev {
left: 8px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__next {
right: 8px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__nav:disabled {
opacity: .25 !important;
}
.mw-parser-output .ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
display: none !important;
}
/* =========================================================
スマホ
========================================================= */
@media screen and (max-width: 720px) {
.mw-parser-output .ts-gallery {
margin: 0.6em 0 1.2em !important;
}
.mw-parser-output .ts-gallery .ts-gallery__track {
gap: 9px !important;
padding: 3px 28px 8px 0 !important;
scrollbar-width: none;
}
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
display: none;
}
.mw-parser-output .ts-gallery .ts-gallery__item {
flex: 0 0 calc(100% - 28px) !important;
width: calc(100% - 28px) !important;
min-width: calc(100% - 28px) !important;
max-width: calc(100% - 28px) !important;
}
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__nav {
top: 128px !important;
width: 34px !important;
height: 34px !important;
font-size: 23px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__prev {
left: 5px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__next {
right: 5px !important;
}
}
@media screen and (max-width: 380px) {
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__nav {
top: 113px !important;
}
}
/* =========================================================
Infobox 外部画像スライダー
========================================================= */
.ts-infobox-slider {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* =========================================================
スライド領域
========================================================= */
.ts-infobox-slider__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
box-sizing: border-box !important;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* スクロールバーは非表示 */
scrollbar-width: none;
}
.ts-infobox-slider__track::-webkit-scrollbar {
display: none;
}
/* =========================================================
1枚のスライド
========================================================= */
.ts-infobox-slider__slide {
position: relative !important;
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
scroll-snap-align: start;
scroll-snap-stop: always;
background: #fff;
}
/* =========================================================
画像表示領域
========================================================= */
.ts-infobox-slider__imagebox {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
/*
* Infobox内なのでギャラリーより少しコンパクト
*/
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 !important;
padding: 0 !important;
background: #f8f9fa !important;
overflow: hidden !important;
box-sizing: border-box !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* =========================================================
MediaWikiによるラッパー対策
========================================================= */
.ts-infobox-slider__imagebox p,
.ts-infobox-slider__imagebox a,
.ts-infobox-slider__imagebox span {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
画像本体
絶対にトリミングしない
========================================================= */
.ts-infobox-slider__imagebox img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
/*
* 元画像全体を表示する。
* cover は使用しない。
*/
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* =========================================================
各画像の説明
========================================================= */
.ts-infobox-slider__caption {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 7px 8px 9px !important;
background: #fff;
color: #202122;
font-size: 11px !important;
line-height: 1.5 !important;
text-align: left;
box-sizing: border-box !important;
overflow-wrap: anywhere;
}
.ts-infobox-slider__source {
color: #54595d;
font-size: 10px;
line-height: 1.45;
}
/* =========================================================
左右ボタン
========================================================= */
.ts-infobox-slider__nav {
position: absolute !important;
/*
* 300pxの画像枠中央
*/
top: 150px !important;
z-index: 20 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(84, 89, 93, 0.35) !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.88) !important;
color: #54595d !important;
font-family: Arial, sans-serif;
font-size: 22px !important;
font-weight: normal;
line-height: 1 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
cursor: pointer;
transform: translateY(-50%);
}
.ts-infobox-slider__prev {
left: 5px !important;
}
.ts-infobox-slider__next {
right: 5px !important;
}
.ts-infobox-slider__nav:hover {
background: #fff !important;
color: #202122 !important;
}
.ts-infobox-slider__nav:disabled {
opacity: 0.25 !important;
cursor: default;
}
/* 1枚しかない場合はナビ不要 */
.ts-infobox-slider--single .ts-infobox-slider__nav {
display: none !important;
}
/* =========================================================
スマートフォン
========================================================= */
@media screen and (max-width: 720px) {
.ts-infobox-slider__imagebox {
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
}
.ts-infobox-slider__nav {
top: 140px !important;
}
}
/* メインページ4カラムを内容量に合わせる */
.ts-grid-4 {
grid-auto-rows: auto !important;
height: auto !important;
min-height: 0 !important;
}
.ts-grid-4 > .ts-panel {
height: auto !important;
min-height: 0 !important;
}