2,719
回編集
編集の要約なし タグ: 差し戻し済み |
編集の要約なし タグ: 差し戻し済み |
||
| 1,520行目: | 1,520行目: | ||
.ts-chron-more-link { | .ts-chron-more-link { | ||
margin-top: 6px; | margin-top: 6px; | ||
} | |||
/* ========================================================= | |||
転スラ全史 | |||
========================================================= */ | |||
.ts-fullchronology { | |||
--chron-blue: #36c; | |||
--chron-blue-dark: #2a4b8d; | |||
--chron-border: #c8ccd1; | |||
--chron-border-light: #eaecf0; | |||
--chron-text: #202122; | |||
--chron-subtext: #54595d; | |||
--chron-muted: #72777d; | |||
--chron-bg: #f8f9fa; | |||
color: var(--chron-text); | |||
} | |||
/* 導入 */ | |||
.ts-fullchron-lead { | |||
margin: 0 0 14px; | |||
font-size: .94rem; | |||
line-height: 1.8; | |||
} | |||
.ts-fullchron-notice { | |||
margin: 10px 0; | |||
padding: 10px 13px; | |||
border: 1px solid var(--chron-border); | |||
border-left: 3px solid var(--chron-blue); | |||
background: var(--chron-bg); | |||
color: var(--chron-subtext); | |||
font-size: .85rem; | |||
line-height: 1.7; | |||
} | |||
/* 上部ナビ */ | |||
.ts-fullchron-nav { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
margin: 20px 0 26px; | |||
border-top: 1px solid var(--chron-border); | |||
border-bottom: 1px solid var(--chron-border); | |||
} | |||
.ts-fullchron-nav > span, | |||
.ts-fullchron-nav > a { | |||
padding: 7px 12px; | |||
font-size: .83rem; | |||
} | |||
.ts-fullchron-nav > a { | |||
border-left: 1px solid var(--chron-border-light); | |||
} | |||
/* セクション */ | |||
.ts-fullchron-section { | |||
margin: 27px 0 34px; | |||
} | |||
.ts-fullchron-section-title { | |||
margin: 0 0 13px !important; | |||
padding: 4px 0 7px 10px !important; | |||
border: 0 !important; | |||
border-left: 4px solid var(--chron-blue) !important; | |||
border-bottom: 1px solid var(--chron-border) !important; | |||
font-size: 1.18rem !important; | |||
} | |||
/* 年表本体 */ | |||
.ts-fullchron-list { | |||
position: relative; | |||
} | |||
.ts-fullchron-list::before { | |||
content: ""; | |||
position: absolute; | |||
top: 9px; | |||
bottom: 9px; | |||
left: 130px; | |||
width: 1px; | |||
background: #a7b9d8; | |||
} | |||
.ts-fullchron-entry { | |||
position: relative; | |||
display: grid; | |||
grid-template-columns: 112px minmax(0, 1fr); | |||
column-gap: 40px; | |||
padding: 10px 0 15px; | |||
} | |||
.ts-fullchron-entry::before { | |||
content: ""; | |||
position: absolute; | |||
top: 17px; | |||
left: 126px; | |||
width: 7px; | |||
height: 7px; | |||
border: 2px solid #fff; | |||
border-radius: 50%; | |||
background: var(--chron-blue); | |||
box-shadow: 0 0 0 1px var(--chron-blue); | |||
} | |||
/* 年代 */ | |||
.ts-fullchron-date { | |||
padding-top: 1px; | |||
color: var(--chron-blue-dark); | |||
font-size: .81rem; | |||
font-weight: 600; | |||
line-height: 1.5; | |||
text-align: right; | |||
} | |||
/* 本文 */ | |||
.ts-fullchron-main { | |||
min-width: 0; | |||
padding-bottom: 14px; | |||
border-bottom: 1px solid var(--chron-border-light); | |||
} | |||
.ts-fullchron-entry:last-child .ts-fullchron-main { | |||
border-bottom: 0; | |||
} | |||
.ts-fullchron-event { | |||
margin-bottom: 4px; | |||
font-size: .95rem; | |||
font-weight: 700; | |||
line-height: 1.5; | |||
} | |||
.ts-fullchron-summary { | |||
color: var(--chron-subtext); | |||
font-size: .86rem; | |||
line-height: 1.7; | |||
} | |||
/* 人物・国家・出典 */ | |||
.ts-fullchron-meta { | |||
margin-top: 7px; | |||
font-size: .78rem; | |||
} | |||
.ts-fullchron-meta-row { | |||
display: grid; | |||
grid-template-columns: 42px minmax(0, 1fr); | |||
gap: 8px; | |||
margin: 2px 0; | |||
color: var(--chron-subtext); | |||
} | |||
.ts-fullchron-meta-label { | |||
color: var(--chron-muted); | |||
font-weight: 600; | |||
} | |||
/* 詳細 */ | |||
.ts-fullchron-detail { | |||
margin-top: 6px; | |||
font-size: .78rem; | |||
} | |||
/* 下部 */ | |||
.ts-fullchron-footer { | |||
margin: 30px 0 10px; | |||
padding: 13px 15px; | |||
border: 1px solid var(--chron-border); | |||
background: var(--chron-bg); | |||
font-size: .85rem; | |||
line-height: 1.7; | |||
} | |||
.ts-fullchron-footer-title { | |||
margin-bottom: 4px; | |||
font-weight: 700; | |||
} | } | ||