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

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

メッセージ 議論

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

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

757 バイト追加 、 2026年9月2日 (水)
編集の要約なし
編集の要約なし
編集の要約なし
2,033行目: 2,033行目:
.ts-gallery {
.ts-gallery {
position: relative;
position: relative;
width: 100%;
margin: 1em 0 1.5em;
margin: 1em 0 1.5em;
width: 100%;
box-sizing: border-box;
box-sizing: border-box;
}
}


.ts-gallery__title {
.ts-gallery__title {
margin: 0 0 0.55em;
margin: 0 0 0.6em;
font-size: 1.05em;
font-size: 1.05em;
font-weight: 700;
font-weight: 700;
2,046行目: 2,046行目:


/* =========================================================
/* =========================================================
   横スクロール部分
   横スクロール領域
   ========================================================= */
   ========================================================= */


.ts-gallery__track {
.ts-gallery__track {
display: flex;
display: flex;
align-items: flex-start;
gap: 12px;
gap: 12px;


width: 100%;
overflow-x: auto;
overflow-x: auto;
overflow-y: hidden;
overflow-y: hidden;


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


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;
overscroll-behavior-x: contain;
box-sizing: border-box;


scrollbar-width: thin;
scrollbar-width: thin;
2,084行目: 2,085行目:


.ts-gallery__item {
.ts-gallery__item {
flex: 0 0 min(480px, calc(100% - 72px));
/*
* PCでは1枚 約360px
*/
flex: 0 0 360px !important;
width: 360px !important;
max-width: 360px !important;
 
min-width: 0;


scroll-snap-align: start;
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-snap-stop: always;
min-width: 0;


background: #fff;
background: #fff;
2,101行目: 2,107行目:


/* =========================================================
/* =========================================================
   画像表示部分
   画像枠
   ========================================================= */
   ========================================================= */


.ts-gallery__imagebox {
.ts-gallery__imagebox {
display: flex;
/*
align-items: center;
* ここを全画像で完全に統一
justify-content: center;
*/
width: 100% !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;


width: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;


/*
overflow: hidden !important;
* ここで全画像の縦サイズを統一
* PCでは最大340px程度
*/
height: clamp(280px, 32vw, 340px);


background: #f8f9fa;
background: #f8f9fa;


overflow: hidden;
box-sizing: border-box;
box-sizing: border-box;
}
}




/*
/* =========================================================
* 元画像が縦長でも横長でも、
  画像そのもの
* 枠の中に収まるように縮小
  ========================================================= */
*/
 
.ts-gallery__imagebox img,
.ts-gallery__image {
.ts-gallery__image {
display: block;
display: block !important;
 
width: 100% !important;
height: 100% !important;


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


object-fit: contain;
margin: 0 !important;
object-position: center;
padding: 0 !important;


margin: 0;
/*
* 切り取らず、枠内に画像全体を表示
*/
object-fit: contain !important;
object-position: center center !important;
}
}


2,146行目: 2,161行目:


.ts-gallery__caption {
.ts-gallery__caption {
padding: 8px 10px 10px;
padding: 9px 11px 11px;


font-size: 12px;
font-size: 12px;
2,152行目: 2,167行目:


color: #202122;
color: #202122;
box-sizing: border-box;
}
}


.ts-gallery__source {
.ts-gallery__source {
font-size: 11px;
font-size: 11px;
line-height: 1.5;
color: #54595d;
color: #54595d;
}
}
2,166行目: 2,184行目:
.ts-gallery__nav {
.ts-gallery__nav {
position: absolute;
position: absolute;
top: 50%;
 
z-index: 5;
/*
* カード全体ではなく画像領域の中央付近
*/
top: 154px;
 
z-index: 10;


width: 40px;
width: 40px;
2,176行目: 2,199行目:
border-radius: 50%;
border-radius: 50%;


background: rgba(255, 255, 255, 0.94);
background: rgba(255, 255, 255, 0.93);
color: #202122;
color: #202122;


2,186行目: 2,209行目:
cursor: pointer;
cursor: pointer;


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


transform: translateY(-50%);
transform: translateY(-50%);
2,192行目: 2,215行目:


.ts-gallery__prev {
.ts-gallery__prev {
left: 8px;
left: 10px;
}
}


.ts-gallery__next {
.ts-gallery__next {
right: 8px;
right: 10px;
}
}


2,205行目: 2,228行目:


.ts-gallery__nav:disabled {
.ts-gallery__nav:disabled {
opacity: 0.25;
opacity: 0.3;
cursor: default;
cursor: default;
}
}
2,226行目: 2,249行目:
.ts-gallery__track {
.ts-gallery__track {
gap: 9px;
gap: 9px;
padding: 2px 34px 9px 0;
 
/*
* 次のカードを少しだけ見せる
*/
padding: 3px 38px 10px 0;
}
}


/*
* 次の画像を少し見せる
*/
.ts-gallery__item {
.ts-gallery__item {
flex-basis: 88%;
flex: 0 0 86vw !important;
width: 86vw !important;
max-width: 86vw !important;
}
}


/*
/*
* スマホでは約230～270px
* スマホも全画像同じ高さ
*/
*/
.ts-gallery__imagebox {
.ts-gallery__imagebox {
height: clamp(230px, 65vw, 270px);
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
}
}


.ts-gallery__caption {
.ts-gallery__caption {
padding: 7px 8px 9px;
padding: 8px 9px 10px;
font-size: 12px;
font-size: 12px;
}
}
2,253行目: 2,281行目:


.ts-gallery__nav {
.ts-gallery__nav {
top: 129px;
width: 34px;
width: 34px;
height: 34px;
height: 34px;
2,261行目: 2,291行目:


.ts-gallery__prev {
.ts-gallery__prev {
left: 4px;
left: 5px;
}
}


.ts-gallery__next {
.ts-gallery__next {
right: 4px;
right: 5px;
}
}
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4253」から取得