コンテンツにスキップ

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

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

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

10,073 バイト追加 、 2026年9月2日 (水)
編集の要約なし
編集の要約なし
編集の要約なし
 
(同じ利用者による、間の9版が非表示)
2,028行目: 2,028行目:
}
}
/* =========================================================
/* =========================================================
   外部画像ギャラリー
   転スラWiki 外部画像スライドギャラリー 完全版
  ・画像を切り抜かない
  ・高さを統一
  ・PCでは横並び＋左右ボタン
  ・スマホでは横スワイプ
   ========================================================= */
   ========================================================= */


.ts-gallery {
.mw-parser-output .ts-gallery {
position: relative;
position: relative !important;
margin: 1em 0 1.5em;
display: block !important;
width: 100%;
width: 100% !important;
box-sizing: border-box;
max-width: 100% !important;
margin: 0.8em 0 1.5em !important;
padding: 0 !important;
box-sizing: border-box !important;
}
}


.ts-gallery__title {
/* =========================================================
margin: 0 0 0.55em;
  横スクロール領域
font-size: 1.05em;
  ========================================================= */
font-weight: 700;
 
.mw-parser-output .ts-gallery .ts-gallery__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
 
width: 100% !important;
max-width: 100% !important;
 
gap: 12px !important;
margin: 0 !important;
padding: 4px 44px 10px 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;
 
scrollbar-width: thin;
scrollbar-color: #a2a9b1 transparent;
}
 
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
height: 6px;
}
 
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-track {
background: transparent;
}
 
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar-thumb {
background: #a2a9b1;
border-radius: 999px;
}
 
/* =========================================================
  カード
  ========================================================= */
 
.mw-parser-output .ts-gallery .ts-gallery__item {
position: relative !important;
display: block !important;
 
flex: 0 0 360px !important;
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
 
margin: 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;
scroll-snap-align: start;
}
 
/* =========================================================
  画像表示領域
  ========================================================= */
 
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
display: flex !important;
align-items: center !important;
justify-content: center !important;
 
width: 100% !important;
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が挿入する可能性があるラッパーを全部無害化
  ここが超重要
  ========================================================= */
 
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p,
.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;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
 
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
 
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;
}
 
/* =========================================================
  画像本体
  画像全体を必ず表示（切り抜かない）
  ========================================================= */
 
.mw-parser-output .ts-gallery .ts-gallery__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;
 
object-fit: contain !important;
object-position: center center !important;
 
background: transparent !important;
box-sizing: border-box !important;
vertical-align: top !important;
}
 
/* =========================================================
  キャプション
  ========================================================= */
 
.mw-parser-output .ts-gallery .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;
 
box-sizing: border-box !important;
overflow-wrap: anywhere;
}
 
.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 .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) !important;
cursor: pointer !important;
transform: translateY(-50%);
}
 
.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 .ts-gallery__nav:disabled {
opacity: .25 !important;
}
 
.mw-parser-output .ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
display: none !important;
}
 
/* =========================================================
  スマホ
  ========================================================= */
 
@media screen and (max-width: 720px) {
 
.mw-parser-output .ts-gallery {
margin: 0.6em 0 1.2em !important;
}
 
.mw-parser-output .ts-gallery .ts-gallery__track {
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;
}
 
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
}
 
.mw-parser-output .ts-gallery .ts-gallery__nav {
top: 128px !important;
width: 34px !important;
height: 34px !important;
font-size: 23px !important;
}
 
.mw-parser-output .ts-gallery .ts-gallery__prev {
left: 5px !important;
}
 
.mw-parser-output .ts-gallery .ts-gallery__next {
right: 5px !important;
}
}
}


@media screen and (max-width: 380px) {
.mw-parser-output .ts-gallery .ts-gallery__imagebox {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
}
.mw-parser-output .ts-gallery .ts-gallery__nav {
top: 113px !important;
}
}


/* =========================================================
/* =========================================================
   横スクロール部分
   Infobox 外部画像スライダー
   ========================================================= */
   ========================================================= */


.ts-gallery__track {
.ts-infobox-slider {
display: flex;
position: relative !important;
gap: 12px;
 
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;
overflow-x: auto !important;
overflow-y: hidden;
overflow-y: hidden !important;


padding: 4px 48px 12px 2px;
box-sizing: border-box !important;


scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
2,064行目: 2,391行目:
overscroll-behavior-x: contain;
overscroll-behavior-x: contain;


box-sizing: border-box;
/* スクロールバーは非表示 */
 
scrollbar-width: none;
scrollbar-width: thin;
}
}


.ts-gallery__track::-webkit-scrollbar {
.ts-infobox-slider__track::-webkit-scrollbar {
height: 6px;
display: none;
}
 
.ts-gallery__track::-webkit-scrollbar-thumb {
background: #a2a9b1;
border-radius: 10px;
}
}




/* =========================================================
/* =========================================================
   1枚ごとのカード
   1枚のスライド
   ========================================================= */
   ========================================================= */


.ts-gallery__item {
.ts-infobox-slider__slide {
flex: 0 0 min(480px, calc(100% - 72px));
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-align: start;
scroll-snap-stop: always;
scroll-snap-stop: always;
min-width: 0;


background: #fff;
background: #fff;
border: 1px solid #a2a9b1;
border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
}
}




/* =========================================================
/* =========================================================
   画像表示部分
   画像表示領域
   ========================================================= */
   ========================================================= */


.ts-gallery__imagebox {
.ts-infobox-slider__imagebox {
display: flex;
display: flex !important;
align-items: center;
align-items: center !important;
justify-content: center;
justify-content: center !important;


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


/*
/*
* ここで全画像の縦サイズを統一
* Infobox内なのでギャラリーより少しコンパクト
* PCでは最大340px程度
*/
*/
height: clamp(280px, 32vw, 340px);
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
 
margin: 0 !important;
padding: 0 !important;
 
background: #f8f9fa !important;


background: #f8f9fa;
overflow: hidden !important;


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




/*
/* =========================================================
* 元画像が縦長でも横長でも、
  MediaWikiによるラッパー対策
* 枠の中に収まるように縮小
  ========================================================= */
*/
.ts-gallery__image {
display: block;


width: 100%;
.ts-infobox-slider__imagebox p,
height: 100%;
.ts-infobox-slider__imagebox a,
.ts-infobox-slider__imagebox span {
margin: 0 !important;
padding: 0 !important;
}


object-fit: contain;
object-position: center;


margin: 0;
/* =========================================================
  画像本体
  絶対にトリミングしない
  ========================================================= */
 
.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-gallery__caption {
.ts-infobox-slider__caption {
padding: 8px 10px 10px;
display: block !important;
 
width: 100% !important;
 
margin: 0 !important;
padding: 7px 8px 9px !important;


font-size: 12px;
background: #fff;
line-height: 1.55;


color: #202122;
color: #202122;
font-size: 11px !important;
line-height: 1.5 !important;
text-align: left;
box-sizing: border-box !important;
overflow-wrap: anywhere;
}
}


.ts-gallery__source {
 
font-size: 11px;
.ts-infobox-slider__source {
color: #54595d;
color: #54595d;
font-size: 10px;
line-height: 1.45;
}
}


2,164行目: 2,546行目:
   ========================================================= */
   ========================================================= */


.ts-gallery__nav {
.ts-infobox-slider__nav {
position: absolute;
position: absolute !important;
top: 50%;
z-index: 5;


width: 40px;
/*
height: 40px;
* 300pxの画像枠中央
padding: 0;
*/
top: 150px !important;


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


background: rgba(255, 255, 255, 0.94);
display: flex !important;
color: #202122;
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-size: 28px;
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
line-height: 36px;
font-size: 22px !important;
text-align: center;
font-weight: normal;
line-height: 1 !important;
 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);


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


transform: translateY(-50%);
transform: translateY(-50%);
}
}


.ts-gallery__prev {
 
left: 8px;
.ts-infobox-slider__prev {
left: 5px !important;
}
}


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


.ts-gallery__nav:hover {
 
background: #fff;
.ts-infobox-slider__nav:hover {
border-color: #72777d;
background: #fff !important;
color: #202122 !important;
}
}


.ts-gallery__nav:disabled {
 
opacity: 0.25;
.ts-infobox-slider__nav:disabled {
opacity: 0.25 !important;
cursor: default;
cursor: default;
}
}


.ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
 
display: none;
/* 1枚しかない場合はナビ不要 */
.ts-infobox-slider--single .ts-infobox-slider__nav {
display: none !important;
}
}


2,220行目: 2,619行目:
@media screen and (max-width: 720px) {
@media screen and (max-width: 720px) {


.ts-gallery {
.ts-infobox-slider__imagebox {
margin: 0.8em 0 1.2em;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
}
}


.ts-gallery__track {
.ts-infobox-slider__nav {
gap: 9px;
top: 140px !important;
padding: 2px 34px 9px 0;
}
}


/*
}
* 次の画像を少し見せる
*/
.ts-gallery__item {
flex-basis: 88%;
}


/*
/* メインページ4カラムを内容量に合わせる */
* スマホでは約230～270px
.ts-grid-4 {
*/
grid-auto-rows: auto !important;
.ts-gallery__imagebox {
height: auto !important;
height: clamp(230px, 65vw, 270px);
min-height: 0 !important;
}
}


.ts-gallery__caption {
.ts-grid-4 > .ts-panel {
padding: 7px 8px 9px;
height: auto !important;
font-size: 12px;
min-height: 0 !important;
}
 
.ts-gallery__source {
font-size: 10.5px;
}
 
.ts-gallery__nav {
width: 34px;
height: 34px;
 
font-size: 24px;
line-height: 30px;
}
 
.ts-gallery__prev {
left: 4px;
}
 
.ts-gallery__next {
right: 4px;
}
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4252...4346」から取得