2,710
回編集
編集の要約なし
編集の要約なし |
編集の要約なし |
||
| 702行目: | 702行目: | ||
.mw-ref > a[data-mw-group=lower-alpha]::after { | .mw-ref > a[data-mw-group=lower-alpha]::after { | ||
content: '[' counter( mw-Ref, lower-alpha ) ']'; | content: '[' counter( mw-Ref, lower-alpha ) ']'; | ||
} | |||
/* ================================================== | |||
転スラWiki メインページ | |||
================================================== */ | |||
.ts-main { | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
} | |||
/* ---------- ヘッダー ---------- */ | |||
.ts-main-header { | |||
margin: 0 0 22px; | |||
padding: 6px 0 18px; | |||
border-bottom: 1px solid #d8dfe8; | |||
} | |||
.ts-main-title { | |||
margin: 0; | |||
font-size: 2rem; | |||
font-weight: 700; | |||
color: #202122; | |||
} | |||
.ts-main-subtitle { | |||
margin-top: 6px; | |||
color: #54595d; | |||
font-size: 0.95rem; | |||
} | |||
.ts-main-count { | |||
margin-top: 8px; | |||
font-size: 0.9rem; | |||
color: #72777d; | |||
} | |||
/* ---------- セクション ---------- */ | |||
.ts-section { | |||
margin: 22px 0; | |||
} | |||
.ts-section-title { | |||
margin: 0 0 12px; | |||
padding: 0 0 7px 10px; | |||
border-left: 4px solid #3366cc; | |||
border-bottom: 1px solid #eaecf0; | |||
font-size: 1.25rem; | |||
font-weight: 700; | |||
color: #202122; | |||
} | |||
/* ---------- 6入口 ---------- */ | |||
.ts-portal-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
border: 1px solid #c8ccd1; | |||
border-radius: 6px; | |||
overflow: hidden; | |||
background: #fff; | |||
} | |||
.ts-portal { | |||
position: relative; | |||
min-height: 105px; | |||
padding: 18px 20px; | |||
border-right: 1px solid #eaecf0; | |||
border-bottom: 1px solid #eaecf0; | |||
box-sizing: border-box; | |||
} | |||
.ts-portal:nth-child(3n) { | |||
border-right: none; | |||
} | |||
.ts-portal:nth-last-child(-n+3) { | |||
border-bottom: none; | |||
} | |||
.ts-portal:hover { | |||
background: #f8f9fa; | |||
} | |||
.ts-portal-title { | |||
margin-bottom: 6px; | |||
font-size: 1.08rem; | |||
font-weight: 700; | |||
} | |||
.ts-portal-title a { | |||
color: #36c; | |||
} | |||
.ts-portal-desc { | |||
margin-bottom: 8px; | |||
color: #54595d; | |||
font-size: 0.88rem; | |||
line-height: 1.6; | |||
} | |||
.ts-portal-link { | |||
font-size: 0.88rem; | |||
} | |||
/* ---------- 汎用グリッド ---------- */ | |||
.ts-grid-2 { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 16px; | |||
} | |||
.ts-grid-3 { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 16px; | |||
} | |||
.ts-panel { | |||
padding: 16px 18px; | |||
border: 1px solid #c8ccd1; | |||
border-radius: 6px; | |||
background: #fff; | |||
} | |||
.ts-panel-title { | |||
margin: 0 0 12px; | |||
padding-bottom: 7px; | |||
border-bottom: 1px solid #eaecf0; | |||
font-size: 1.08rem; | |||
font-weight: 700; | |||
color: #245c9f; | |||
} | |||
/* ---------- ピックアップ ---------- */ | |||
.ts-pickup-name { | |||
margin-bottom: 7px; | |||
font-size: 1.15rem; | |||
font-weight: 700; | |||
} | |||
.ts-pickup-text { | |||
color: #202122; | |||
line-height: 1.7; | |||
} | |||
.ts-pickup-meta { | |||
margin-top: 12px; | |||
color: #72777d; | |||
font-size: 0.82rem; | |||
} | |||
/* ---------- リスト ---------- */ | |||
.ts-list { | |||
margin: 0; | |||
padding-left: 1.4em; | |||
} | |||
.ts-list li { | |||
margin: 5px 0; | |||
} | |||
.ts-ranking { | |||
width: 100%; | |||
border-collapse: collapse; | |||
} | |||
.ts-ranking td { | |||
padding: 5px 3px; | |||
border: none; | |||
} | |||
.ts-ranking-rank { | |||
width: 28px; | |||
color: #72777d; | |||
text-align: center; | |||
} | |||
.ts-ranking-value { | |||
text-align: right; | |||
white-space: nowrap; | |||
color: #54595d; | |||
} | |||
/* ---------- 編集案内 ---------- */ | |||
.ts-edit-links { | |||
line-height: 2; | |||
} | |||
.ts-beginner { | |||
margin-top: 12px; | |||
padding: 12px 14px; | |||
background: #f8f9fa; | |||
border-left: 3px solid #36c; | |||
} | |||
/* ---------- 作品概要 ---------- */ | |||
.ts-about { | |||
padding: 18px 20px; | |||
background: #f8f9fa; | |||
border: 1px solid #eaecf0; | |||
border-radius: 6px; | |||
line-height: 1.75; | |||
} | |||
/* ---------- スマホ ---------- */ | |||
@media screen and (max-width: 850px) { | |||
.ts-portal-grid { | |||
grid-template-columns: 1fr 1fr; | |||
} | |||
.ts-portal { | |||
border-right: 1px solid #eaecf0; | |||
border-bottom: 1px solid #eaecf0; | |||
} | |||
.ts-portal:nth-child(3n) { | |||
border-right: 1px solid #eaecf0; | |||
} | |||
.ts-portal:nth-child(2n) { | |||
border-right: none; | |||
} | |||
.ts-portal:nth-last-child(-n+3) { | |||
border-bottom: 1px solid #eaecf0; | |||
} | |||
.ts-portal:nth-last-child(-n+2) { | |||
border-bottom: none; | |||
} | |||
.ts-grid-2, | |||
.ts-grid-3 { | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
@media screen and (max-width: 520px) { | |||
.ts-portal-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.ts-portal, | |||
.ts-portal:nth-child(2n), | |||
.ts-portal:nth-child(3n) { | |||
border-right: none; | |||
border-bottom: 1px solid #eaecf0; | |||
} | |||
.ts-portal:last-child { | |||
border-bottom: none; | |||
} | |||
.ts-main-title { | |||
font-size: 1.65rem; | |||
} | |||
} | } | ||