転生したらスライムだった件Wiki

「MediaWiki:Common.css」の版間の差分

メッセージ 議論

MediaWiki:Common.css (ソースを閲覧)

2026年9月2日 (水) 07:18時点における版

3,278 バイト追加 、 2026年9月2日 (水)
編集の要約なし
編集の要約なし
編集の要約なし
2,028行目: 2,028行目:
}
}
/* =========================================================
/* =========================================================
   画像表示領域
   転スラWiki 外部画像スライドギャラリー
  ========================================================= */
 
.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__imagebox {
.ts-gallery > .ts-gallery__track {
display: flex !important;
display: flex !important;
align-items: center !important;
flex-direction: row !important;
justify-content: center !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;


width: 100% !important;
width: 100% !important;
max-width: 100% !important;


height: var(--ts-gallery-image-height, 300px) !important;
gap: 12px !important;
min-height: var(--ts-gallery-image-height, 300px) !important;
max-height: var(--ts-gallery-image-height, 300px) !important;


margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 4px 44px 10px 0 !important;
 
overflow-x: auto !important;
overflow-y: hidden !important;
 
box-sizing: border-box !important;


background: #f8f9fa;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;


/*
-webkit-overflow-scrolling: touch;
* 今回はhiddenに戻す。
* 中の画像を確実に枠内へ収めるため、
* 正常なら画像が切れることはない。
*/
overflow: hidden !important;


box-sizing: border-box !important;
scrollbar-width: thin;
}
}




/* =========================================================
/* =========================================================
   MediaWikiが自動生成する可能性があるpを無害化
   カード
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery .ts-gallery__imagebox > p {
.ts-gallery > .ts-gallery__track > .ts-gallery__item {
display: flex !important;
position: relative !important;
align-items: center !important;
 
justify-content: center !important;
display: block !important;


width: 100% !important;
flex: 0 0 360px !important;
height: 100% !important;


min-width: 0 !important;
width: 360px !important;
min-height: 0 !important;
min-width: 360px !important;
max-width: 360px !important;


margin: 0 !important;
margin: 0 !important;
padding: 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;
box-sizing: border-box !important;
scroll-snap-align: start;
}
}




/* =========================================================
/* =========================================================
   画像がリンクで囲まれた場合にも対応
   画像表示領域
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery .ts-gallery__imagebox > a,
.ts-gallery
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > a {
> .ts-gallery__track
> .ts-gallery__item
> .ts-gallery__imagebox {
 
display: flex !important;
display: flex !important;
align-items: center !important;
align-items: center !important;
2,091行目: 2,122行目:


width: 100% !important;
width: 100% !important;
height: 100% !important;


min-width: 0 !important;
height: 300px !important;
min-height: 0 !important;
min-height: 300px !important;
max-height: 300px !important;


margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
background: #f8f9fa !important;
overflow: hidden !important;


box-sizing: border-box !important;
box-sizing: border-box !important;
2,105行目: 2,140行目:
/* =========================================================
/* =========================================================
   画像本体
   画像本体
   絶対にトリミングしない
   切り抜かない
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery .ts-gallery__imagebox img,
.ts-gallery
.mw-parser-output .ts-gallery img.ts-gallery__image {
> .ts-gallery__track
> .ts-gallery__item
> .ts-gallery__imagebox
> img {
 
display: block !important;
display: block !important;


/*
* img要素そのものを表示枠と同じ大きさにする。
* 実画像はobject-fit:containでその中に収める。
*/
width: 100% !important;
width: 100% !important;
height: 100% !important;
height: 100% !important;
2,121行目: 2,156行目:
max-width: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;


margin: 0 !important;
margin: 0 !important;
2,129行目: 2,161行目:


border: 0 !important;
border: 0 !important;
box-shadow: none !important;


/*
* これによって元画像は絶対に切り抜かれない。
*/
object-fit: contain !important;
object-fit: contain !important;
object-position: center center !important;
object-position: center center !important;


background: transparent !important;
box-sizing: border-box !important;
}
 
 
/* =========================================================
  キャプション
  ========================================================= */
 
.ts-gallery
> .ts-gallery__track
> .ts-gallery__item
> .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;
 
overflow-wrap: anywhere;


box-sizing: border-box !important;
box-sizing: border-box !important;
}
.ts-gallery__source {
color: #54595d;
font-size: 11px;
}
/* =========================================================
  左右ボタン
  ========================================================= */
.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);
cursor: pointer !important;
transform: translateY(-50%);
}
.ts-gallery > .ts-gallery__prev {
left: 8px !important;
}
.ts-gallery > .ts-gallery__next {
right: 8px !important;
}
.ts-gallery > .ts-gallery__nav:disabled {
opacity: .25 !important;
}
/* =========================================================
  スマートフォン
  ========================================================= */
@media screen and (max-width: 720px) {
.ts-gallery {
width: 100% !important;
max-width: 100% !important;
margin: 0.6em 0 1.2em !important;
}
.ts-gallery > .ts-gallery__track {
gap: 9px !important;
padding:
3px
28px
8px
0 !important;
scrollbar-width: none;
}
.ts-gallery
> .ts-gallery__track::-webkit-scrollbar {
display: none;
}
.ts-gallery
> .ts-gallery__track
> .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;
}
.ts-gallery
> .ts-gallery__track
> .ts-gallery__item
> .ts-gallery__imagebox {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
}
.ts-gallery > .ts-gallery__nav {
top: 128px !important;
width: 34px !important;
height: 34px !important;
font-size: 23px !important;
}
.ts-gallery > .ts-gallery__prev {
left: 5px !important;
}
.ts-gallery > .ts-gallery__next {
right: 5px !important;
}
}
/* =========================================================
  とても狭いスマホ
  ========================================================= */
@media screen and (max-width: 380px) {
.ts-gallery
> .ts-gallery__track
> .ts-gallery__item
> .ts-gallery__imagebox {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
}
.ts-gallery > .ts-gallery__nav {
top: 113px !important;
}
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4262」から取得