12,922
回編集
「MediaWiki:Common.css」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし
編集の要約なし |
編集の要約なし |
||
| 267行目: | 267行目: | ||
} | } | ||
/* | /* モダンでカラフルな目次のスタイル */ | ||
#toc, | #toc, | ||
.toc { | .toc { | ||
border: none; | border: none; | ||
background: linear-gradient(135deg, | background: linear-gradient(135deg, | ||
# | #4158D0 0%, | ||
# | #C850C0 46%, | ||
#FFCC70 100% | |||
); | ); | ||
padding: 1.5rem; | padding: 1.5rem; | ||
margin: 1.5rem 0; | margin: 1.5rem 0; | ||
border-radius: | border-radius: 16px; | ||
box-shadow: 0 | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); | ||
} | } | ||
/* 目次のタイトル */ | /* 目次のタイトル */ | ||
.toc-title { | .toc-title { | ||
color: # | color: #ffffff; | ||
font-weight: | font-weight: 700; | ||
font-size: 1. | font-size: 1.4rem; | ||
margin-bottom: | margin-bottom: 1.2rem; | ||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); | |||
} | } | ||
/* 目次の項目コンテナ */ | /* 目次の項目コンテナ */ | ||
.toc ul { | .toc ul { | ||
background-color: | background-color: rgba(255, 255, 255, 0.95); | ||
padding: | padding: 1rem; | ||
margin: 0; | margin: 0; | ||
border-radius: 12px; | |||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); | |||
} | } | ||
/* 目次の項目 */ | /* 目次の項目 */ | ||
.toc li { | .toc li { | ||
margin: 0. | margin: 0.6rem 0; | ||
padding: 0. | padding: 0.3rem 0; | ||
transition: all 0. | transition: all 0.3s ease; | ||
} | } | ||
/* リンクの基本スタイル */ | /* リンクの基本スタイル */ | ||
.toc a { | .toc a { | ||
color: # | color: #2d3748; | ||
text-decoration: none; | text-decoration: none; | ||
display: block; | display: block; | ||
padding: 0. | padding: 0.6rem 1rem; | ||
border-radius: | border-radius: 8px; | ||
transition: all 0. | transition: all 0.3s ease; | ||
font-weight: 500; | |||
} | } | ||
/* ホバー時のスタイル */ | /* ホバー時のスタイル */ | ||
.toc a:hover { | .toc a:hover { | ||
color: # | color: #ffffff; | ||
background- | background: linear-gradient(45deg, #4158D0, #C850C0); | ||
transform: translateX( | transform: translateX(6px); | ||
border: none; | border: none; | ||
padding: 0. | padding: 0.6rem 1rem; | ||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |||
} | } | ||
/* 目次の番号 */ | /* 目次の番号 */ | ||
.toc-number { | .toc-number { | ||
color: # | color: #C850C0; | ||
font-weight: | font-weight: 600; | ||
margin-right: 0. | margin-right: 0.7rem; | ||
} | } | ||
/* 非表示ボタン */ | /* 非表示ボタン */ | ||
.toc .toctoggle { | .toc .toctoggle { | ||
color: # | color: #ffffff; | ||
background-color: | background-color: rgba(255, 255, 255, 0.2); | ||
padding: 0. | padding: 0.3rem 0.6rem; | ||
border-radius: | border-radius: 6px; | ||
font-size: 0. | font-size: 0.9rem; | ||
backdrop-filter: blur(4px); | |||
} | } | ||
/* ネストされた項目のインデント */ | /* ネストされた項目のインデント */ | ||
.toc ul ul { | .toc ul ul { | ||
margin-left: 1. | margin-left: 1.8rem; | ||
background-color: transparent; | |||
box-shadow: none; | |||
} | } | ||
/* アクティブな項目 */ | /* アクティブな項目 */ | ||
.toc a:active { | .toc a:active { | ||
color: # | color: #ffffff; | ||
background- | background: linear-gradient(45deg, #C850C0, #FFCC70); | ||
transform: translateX(4px) scale(0.98); | |||
transition: all 0.1s ease; | |||
} | |||
/* 目次全体にグラスモーフィズム効果を追加 */ | |||
.toc::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
border-radius: 16px; | |||
backdrop-filter: blur(8px); | |||
z-index: -1; | |||
} | } | ||