2,719
回編集
編集の要約なし |
編集の要約なし |
||
| 2,342行目: | 2,342行目: | ||
top: 113px !important; | 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; | |||
} | |||
} | } | ||