コンテンツにスキップ

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

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

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

2,881 バイト追加 、 2026年9月2日 (水)
編集の要約なし
編集の要約なし
編集の要約なし
 
(同じ利用者による、間の6版が非表示)
2,028行目: 2,028行目:
}
}
/* =========================================================
/* =========================================================
   転スラWiki 外部画像スライドギャラリー
   転スラWiki 外部画像スライドギャラリー 完全版
   PC / タブレット / スマートフォン対応
   ・画像を切り抜かない
 
   ・高さを統一
  ・外部画像の生URLに対応
   ・PCでは横並び＋左右ボタン
  ・縦長 / 横長 / 正方形を混在可能
  ・画像は絶対にトリミングしない
   ・画像表示領域の高さを統一
   ・PCでは左右ボタン
   ・スマホでは横スワイプ
   ・スマホでは横スワイプ
  ========================================================= */
/* =========================================================
  1. ギャラリー全体
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery {
.mw-parser-output .ts-gallery {
--ts-gallery-image-height: 300px;
position: relative !important;
 
display: block !important;
position: relative;
width: 100% !important;
display: block;
max-width: 100% !important;
 
margin: 0.8em 0 1.5em !important;
width: 100%;
padding: 0 !important;
max-width: 100%;
box-sizing: border-box !important;
 
margin: 0.8em 0 1.5em;
padding: 0;
 
box-sizing: border-box;
}
 
 
.mw-parser-output .ts-gallery__title {
margin: 0 0 0.6em;
padding: 0;
 
font-size: 1.05em;
font-weight: 700;
line-height: 1.4;
}
}


/* =========================================================
/* =========================================================
   2. 横スクロール領域
   横スクロール領域
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery__track {
.mw-parser-output .ts-gallery .ts-gallery__track {
display: flex !important;
display: flex !important;
flex-flow: row nowrap !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
align-items: flex-start !important;
gap: 12px;


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


gap: 12px !important;
margin: 0 !important;
margin: 0 !important;
padding: 4px 46px 12px 2px !important;
padding: 4px 44px 10px 0 !important;


overflow-x: auto !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overflow-y: hidden !important;


box-sizing: border-box;
box-sizing: border-box !important;


scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;


scrollbar-width: thin;
scrollbar-width: thin;
2,102行目: 2,075行目:
}
}


 
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
.mw-parser-output .ts-gallery__track::-webkit-scrollbar {
height: 6px;
height: 6px;
}
}


 
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-track {
.mw-parser-output .ts-gallery__track::-webkit-scrollbar-track {
background: transparent;
background: transparent;
}
}


 
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-thumb {
.mw-parser-output .ts-gallery__track::-webkit-scrollbar-thumb {
background: #a2a9b1;
background: #a2a9b1;
border-radius: 999px;
border-radius: 999px;
}
}


/* =========================================================
/* =========================================================
   3. 1枚ごとのカード
   カード
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery__item {
.mw-parser-output .ts-gallery .ts-gallery__item {
/*
position: relative !important;
* 大きすぎず小さすぎないサイズ。
display: block !important;
* 広いPCでは最大380px。
*/
flex: 0 0 clamp(300px, 31vw, 380px) !important;


width: clamp(300px, 31vw, 380px) !important;
flex: 0 0 360px !important;
max-width: calc(100% - 24px) !important;
width: 360px !important;
min-width: 0 !important;
min-width: 360px !important;
max-width: 360px !important;


margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;


background: #fff;
border: 1px solid #a2a9b1 !important;
 
border-radius: 5px !important;
border: 1px solid #a2a9b1;
background: #fff !important;
border-radius: 5px;
overflow: hidden !important;
 
/*
* カード外へのはみ出しだけを防ぐ。
* 画像本体は下で必ず枠内に収める。
*/
overflow: hidden;
 
box-sizing: border-box;


box-sizing: border-box !important;
scroll-snap-align: start;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}


/* =========================================================
/* =========================================================
   4. 画像表示領域
   画像表示領域
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery__imagebox {
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
display: flex !important;
display: flex !important;
align-items: center !important;
align-items: center !important;
2,165行目: 2,123行目:


width: 100% !important;
width: 100% !important;
 
height: 300px !important;
/*
min-height: 300px !important;
* 全画像で表示領域の高さを統一
max-height: 300px !important;
*/
height: var(--ts-gallery-image-height) !important;
min-height: var(--ts-gallery-image-height) !important;
max-height: var(--ts-gallery-image-height) !important;


margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;


background: #f8f9fa;
background: #f8f9fa !important;
overflow: hidden !important;


box-sizing: border-box;
box-sizing: border-box !important;


/*
/* 余計なベースライン隙間防止 */
* 画像は100%×100% + containで
line-height: 0 !important;
* 必ずこの領域内に収まるため、
font-size: 0 !important;
* ここではトリミング処理をしない。
*/
overflow: visible !important;
}
}


/* =========================================================
/* =========================================================
   5. 画像がリンクで囲まれた場合
   MediaWikiが挿入する可能性があるラッパーを全部無害化
  ここが超重要
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery__imagebox > a {
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p,
display: block !important;
.mw-parser-output .ts-gallery .ts-gallery__imagebox > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span > a,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p > span,
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;


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


margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
border: 0 !important;


box-sizing: border-box;
box-sizing: border-box !important;
line-height: 0 !important;
font-size: 0 !important;
}
}


/* pタグが入っても余白を出さない */
.mw-parser-output .ts-gallery .ts-gallery__imagebox p {
margin: 0 !important;
}


/* =========================================================
/* =========================================================
   6. 画像本体
   画像本体
   最重要部分
   画像全体を必ず表示（切り抜かない）
   ========================================================= */
   ========================================================= */


/*
.mw-parser-output .ts-gallery .ts-gallery__imagebox img {
* 重要：
*
* width:auto;
* height:auto;
*
* は使用しない。
*
* img自体に表示枠と同じサイズを与え、
* object-fit:contain で画像本体だけを
* 縦横比を維持したまま収める。
*
* これにより、
*
* 縦長画像 → 左右に余白
* 横長画像 → 上下に余白
* 正方形  → 状況に応じて余白
*
* となり、画像は一切切れない。
*/
 
.mw-parser-output .ts-gallery__imagebox > img,
.mw-parser-output .ts-gallery__imagebox > a > img,
.mw-parser-output .ts-gallery img.ts-gallery__image {
display: block !important;
display: block !important;


2,242行目: 2,190行目:
max-width: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
max-height: 100% !important;
min-width: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
min-height: 0 !important;
2,248行目: 2,195行目:
margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
border: 0 !important;
border: 0 !important;
box-shadow: none !important;
box-shadow: none !important;
2,256行目: 2,202行目:


background: transparent !important;
background: transparent !important;
box-sizing: border-box !important;
box-sizing: border-box !important;
vertical-align: top !important;
}
}


/* =========================================================
/* =========================================================
   7. キャプション
   キャプション
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery__caption {
.mw-parser-output .ts-gallery .ts-gallery__caption {
display: block;
display: block !important;
width: 100% !important;


width: 100%;
margin: 0 !important;
 
padding: 10px 12px 12px !important;
margin: 0;
padding: 10px 12px 12px;
 
color: #202122;
background: #fff;


font-size: 12px;
background: #fff !important;
line-height: 1.6;
color: #202122 !important;


box-sizing: border-box;
font-size: 12px !important;
line-height: 1.6 !important;


box-sizing: border-box !important;
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: normal;
}
}


.mw-parser-output .ts-gallery .ts-gallery__source {
color: #54595d !important;
font-size: 11px !important;
line-height: 1.55 !important;
}


.mw-parser-output .ts-gallery__caption p {
/* =========================================================
margin-top: 0;
  左右ボタン
margin-bottom: 0.4em;
  ========================================================= */
}
 
.mw-parser-output .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;


.mw-parser-output .ts-gallery__caption p:last-child {
margin: 0 !important;
margin-bottom: 0;
padding: 0 !important;
}


border: 1px solid #a2a9b1 !important;
border-radius: 50% !important;


.mw-parser-output .ts-gallery__source {
background: rgba(255,255,255,.92) !important;
display: inline;
color: #202122 !important;


color: #54595d;
font-size: 26px !important;
line-height: 1 !important;


font-size: 11px;
box-shadow: 0 1px 5px rgba(0,0,0,.2) !important;
line-height: 1.55;
cursor: pointer !important;
transform: translateY(-50%);
}


overflow-wrap: anywhere;
.mw-parser-output .ts-gallery .ts-gallery__prev {
left: 8px !important;
}
}


.mw-parser-output .ts-gallery .ts-gallery__next {
right: 8px !important;
}


.mw-parser-output .ts-gallery__caption a,
.mw-parser-output .ts-gallery .ts-gallery__nav:disabled {
.mw-parser-output .ts-gallery__source a {
opacity: .25 !important;
overflow-wrap: anywhere;
}
}


.mw-parser-output .ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
display: none !important;
}


/* =========================================================
/* =========================================================
   8. 左右移動ボタン
   スマホ
   ========================================================= */
   ========================================================= */


.mw-parser-output .ts-gallery__nav {
@media screen and (max-width: 720px) {
position: absolute;


/*
.mw-parser-output .ts-gallery {
* 300px画像領域の中央付近
margin: 0.6em 0 1.2em !important;
*/
}
top: calc(
 
(var(--ts-gallery-image-height) / 2)
.mw-parser-output .ts-gallery .ts-gallery__track {
+ 4px
gap: 9px !important;
);
padding: 3px 28px 8px 0 !important;
scrollbar-width: none;
}
 
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
display: none;
}
 
.mw-parser-output .ts-gallery .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;
}


z-index: 20;
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
}


display: flex;
.mw-parser-output .ts-gallery .ts-gallery__nav {
align-items: center;
top: 128px !important;
justify-content: center;
width: 34px !important;
height: 34px !important;
font-size: 23px !important;
}


width: 40px;
.mw-parser-output .ts-gallery .ts-gallery__prev {
height: 40px;
left: 5px !important;
}


margin: 0;
.mw-parser-output .ts-gallery .ts-gallery__next {
padding: 0;
right: 5px !important;
}
}


border: 1px solid rgba(84, 89, 93, 0.45);
@media screen and (max-width: 380px) {
border-radius: 50%;


background: rgba(255, 255, 255, 0.92);
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
color: #202122;
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
}
 
.mw-parser-output .ts-gallery .ts-gallery__nav {
top: 113px !important;
}
}
 
/* =========================================================
  Infobox 外部画像スライダー
  ========================================================= */
 
.ts-infobox-slider {
position: relative !important;


font-family: Arial, sans-serif;
display: block !important;
font-size: 27px;
font-weight: normal;
line-height: 1;


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


box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
margin: 0 !important;
padding: 0 !important;


transform: translateY(-50%);
box-sizing: border-box !important;


transition:
overflow: hidden !important;
background-color 0.15s ease,
opacity 0.15s ease,
border-color 0.15s ease;
}
}




.mw-parser-output .ts-gallery__prev {
/* =========================================================
left: 10px;
  スライド領域
}
  ========================================================= */


.ts-infobox-slider__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;


.mw-parser-output .ts-gallery__next {
width: 100% !important;
right: 10px;
max-width: 100% !important;
}


margin: 0 !important;
padding: 0 !important;


.mw-parser-output .ts-gallery__nav:hover {
overflow-x: auto !important;
background: #fff;
overflow-y: hidden !important;
border-color: #72777d;
}


box-sizing: border-box !important;


.mw-parser-output .ts-gallery__nav:focus-visible {
scroll-snap-type: x mandatory;
outline: 2px solid #36c;
scroll-behavior: smooth;
outline-offset: 2px;
}


-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;


.mw-parser-output .ts-gallery__nav:disabled {
/* スクロールバーは非表示 */
opacity: 0.25;
scrollbar-width: none;
cursor: default;
}
}


 
.ts-infobox-slider__track::-webkit-scrollbar {
/*
* スライドする必要がなければボタン非表示
*/
.mw-parser-output
.ts-gallery:not(.ts-gallery--scrollable)
.ts-gallery__nav {
display: none;
display: none;
}
}
2,405行目: 2,401行目:


/* =========================================================
/* =========================================================
   9. タブレット
   1枚のスライド
   ========================================================= */
   ========================================================= */


@media screen and (max-width: 900px) {
.ts-infobox-slider__slide {
position: relative !important;
 
display: block !important;
 
flex: 0 0 100% !important;


.mw-parser-output .ts-gallery__item {
width: 100% !important;
flex-basis: clamp(290px, 45vw, 360px) !important;
min-width: 100% !important;
width: clamp(290px, 45vw, 360px) !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;
}
}




/* =========================================================
/* =========================================================
   10. スマートフォン
   画像表示領域
   ========================================================= */
   ========================================================= */


@media screen and (max-width: 720px) {
.ts-infobox-slider__imagebox {
display: flex !important;
align-items: center !important;
justify-content: center !important;


.mw-parser-output .ts-gallery {
width: 100% !important;
/*
* スマホでは少し低くする。
* ただし全画像で同じ高さ。
*/
--ts-gallery-image-height:
clamp(220px, 64vw, 270px);


width: 100% !important;
/*
max-width: 100% !important;
* Infobox内なのでギャラリーより少しコンパクト
*/
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;


margin: 0.6em 0 1.2em !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
}


background: #f8f9fa !important;


.mw-parser-output .ts-gallery__track {
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;


gap: 9px;
box-sizing: border-box !important;


margin: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}


/*
* 次のカードが少しだけ見える
*/
padding: 3px 30px 8px 0 !important;


overflow-x: auto !important;
/* =========================================================
overflow-y: hidden !important;
  MediaWikiによるラッパー対策
  ========================================================= */


scroll-snap-type: x mandatory;
.ts-infobox-slider__imagebox p,
.ts-infobox-slider__imagebox a,
.ts-infobox-slider__imagebox span {
margin: 0 !important;
padding: 0 !important;
}


/*
* スマホではスクロールバーを隠す
*/
scrollbar-width: none;
}


/* =========================================================
  画像本体
  絶対にトリミングしない
  ========================================================= */


.mw-parser-output
.ts-infobox-slider__imagebox img {
.ts-gallery__track::-webkit-scrollbar {
display: block !important;
display: none;
}


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


.mw-parser-output .ts-gallery__item {
max-width: 100% !important;
/*
max-height: 100% !important;
* vwではなく親要素基準。
* MobileFrontendでも本文幅からはみ出しにくい。
*/
flex:
0 0 calc(100% - 28px) !important;


width:
min-width: 0 !important;
calc(100% - 28px) !important;
min-height: 0 !important;


max-width:
margin: 0 !important;
calc(100% - 28px) !important;
padding: 0 !important;
 
min-width: 0 !important;
}


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


/*
/*
* スマホでも画像本体は同じ原理。
* 元画像全体を表示する。
* 100%×100%の領域内にcontain。
* cover は使用しない。
*/
*/
.mw-parser-output
object-fit: contain !important;
.ts-gallery__imagebox > img,
object-position: center center !important;


.mw-parser-output
background: transparent !important;
.ts-gallery__imagebox > a > img,
 
box-sizing: border-box !important;
}


.mw-parser-output
.ts-gallery img.ts-gallery__image {
width: 100% !important;
height: 100% !important;


max-width: 100% !important;
/* =========================================================
max-height: 100% !important;
  各画像の説明
  ========================================================= */


object-fit: contain !important;
.ts-infobox-slider__caption {
object-position: center center !important;
display: block !important;
}
 
width: 100% !important;
 
margin: 0 !important;
padding: 7px 8px 9px !important;
 
background: #fff;


color: #202122;


.mw-parser-output .ts-gallery__caption {
font-size: 11px !important;
padding: 9px 10px 11px !important;
line-height: 1.5 !important;


font-size: 12px;
text-align: left;
line-height: 1.6;
}


box-sizing: border-box !important;


.mw-parser-output .ts-gallery__source {
overflow-wrap: anywhere;
font-size: 10.5px;
}
line-height: 1.55;
}




.mw-parser-output .ts-gallery__nav {
.ts-infobox-slider__source {
top: calc(
color: #54595d;
(var(--ts-gallery-image-height) / 2)
+ 3px
);


width: 34px;
font-size: 10px;
height: 34px;
line-height: 1.45;
}


font-size: 23px;


background:
/* =========================================================
rgba(255, 255, 255, 0.88);
  左右ボタン
}
  ========================================================= */


.ts-infobox-slider__nav {
position: absolute !important;


.mw-parser-output .ts-gallery__prev {
/*
left: 5px;
* 300pxの画像枠中央
}
*/
top: 150px !important;


z-index: 20 !important;


.mw-parser-output .ts-gallery__next {
display: flex !important;
right: 5px;
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;
  11. 非常に狭いスマートフォン
border-radius: 50% !important;
  ========================================================= */


@media screen and (max-width: 380px) {
background: rgba(255, 255, 255, 0.88) !important;
color: #54595d !important;


.mw-parser-output .ts-gallery {
font-family: Arial, sans-serif;
--ts-gallery-image-height: 220px;
font-size: 22px !important;
}
font-weight: normal;
line-height: 1 !important;


box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);


.mw-parser-output .ts-gallery__track {
cursor: pointer;
padding-right: 24px !important;
}


transform: translateY(-50%);
}


.mw-parser-output .ts-gallery__item {
flex-basis:
calc(100% - 22px) !important;


width:
.ts-infobox-slider__prev {
calc(100% - 22px) !important;
left: 5px !important;
}


max-width:
calc(100% - 22px) !important;
}


.ts-infobox-slider__next {
right: 5px !important;
}
}




/* =========================================================
.ts-infobox-slider__nav:hover {
  12. 印刷
background: #fff !important;
  ========================================================= */
color: #202122 !important;
}


@media print {


.mw-parser-output .ts-gallery__track {
.ts-infobox-slider__nav:disabled {
display: block !important;
opacity: 0.25 !important;
cursor: default;
}


overflow: visible !important;


padding: 0 !important;
/* 1枚しかない場合はナビ不要 */
}
.ts-infobox-slider--single .ts-infobox-slider__nav {
display: none !important;
}




.mw-parser-output .ts-gallery__item {
/* =========================================================
display: inline-block !important;
  スマートフォン
  ========================================================= */


width: 45% !important;
@media screen and (max-width: 720px) {
max-width: 45% !important;


margin: 0 2% 1em 0;
.ts-infobox-slider__imagebox {
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
}


vertical-align: top;
.ts-infobox-slider__nav {
top: 140px !important;
}
}


}


.mw-parser-output .ts-gallery__nav {
/* メインページ4カラムを内容量に合わせる */
display: none !important;
.ts-grid-4 {
}
grid-auto-rows: auto !important;
height: auto !important;
min-height: 0 !important;
}


.ts-grid-4 > .ts-panel {
height: auto !important;
min-height: 0 !important;
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4256...4346」から取得