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

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

メッセージ 議論

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

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

5,681 バイト追加 、 2026年9月2日 (水)
編集の要約なし
編集の要約なし
編集の要約なし
2,028行目: 2,028行目:
}
}
/* =========================================================
/* =========================================================
   外部画像ギャラリー
   転スラWiki 外部画像スライドギャラリー
  PC / タブレット / スマートフォン対応
   ========================================================= */
   ========================================================= */
/* ---------------------------------------------------------
  ギャラリー全体
  --------------------------------------------------------- */


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


/* テンプレート側でタイトルを指定した場合 */
.ts-gallery__title {
.ts-gallery__title {
margin: 0 0 0.6em;
margin: 0 0 0.6em;
padding: 0;
font-size: 1.05em;
font-size: 1.05em;
font-weight: 700;
font-weight: 700;
line-height: 1.4;
}
}




/* =========================================================
/* ---------------------------------------------------------
   横スクロール領域
   横スクロール領域
   ========================================================= */
   --------------------------------------------------------- */


.ts-gallery__track {
.ts-gallery__track {
display: flex;
display: flex !important;
align-items: flex-start;
flex-flow: row nowrap !important;
align-items: flex-start !important;
 
gap: 12px;
gap: 12px;


width: 100%;
width: 100% !important;
overflow-x: auto;
max-width: 100% !important;
overflow-y: hidden;


margin: 0;
padding: 4px 46px 12px 2px;
padding: 4px 46px 12px 2px;
overflow-x: auto !important;
overflow-y: hidden !important;


box-sizing: border-box;
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;


/* PCでは細いスクロールバー */
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #a2a9b1 transparent;
}
}


.ts-gallery__track::-webkit-scrollbar {
.ts-gallery__track::-webkit-scrollbar {
height: 6px;
height: 6px;
}
}
.ts-gallery__track::-webkit-scrollbar-track {
background: transparent;
}


.ts-gallery__track::-webkit-scrollbar-thumb {
.ts-gallery__track::-webkit-scrollbar-thumb {
background: #a2a9b1;
background: #a2a9b1;
border-radius: 10px;
border-radius: 999px;
}
}




/* =========================================================
/* ---------------------------------------------------------
   1枚ごとのカード
   1枚ごとのカード
   ========================================================= */
   --------------------------------------------------------- */


.ts-gallery__item {
.ts-gallery__item {
/*
/*
* PCでは1枚 約360px
* PCで巨大になりすぎないよう固定気味にする。
* 画面が狭ければ自動的に小さくなる。
*/
*/
flex: 0 0 360px !important;
flex: 0 0 clamp(300px, 31vw, 380px) !important;
width: 360px !important;
max-width: 360px !important;


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


scroll-snap-align: start;
min-width: 0 !important;
scroll-snap-stop: always;
 
margin: 0;
padding: 0;


background: #fff;
background: #fff;
border: 1px solid #a2a9b1;
border: 1px solid #a2a9b1;
border-radius: 4px;
border-radius: 5px;


overflow: hidden;
overflow: hidden;
box-sizing: border-box;
box-sizing: border-box;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}




/* =========================================================
/* ---------------------------------------------------------
   画像枠
   画像を入れる共通枠
   ========================================================= */
   --------------------------------------------------------- */


.ts-gallery__imagebox {
.ts-gallery__imagebox {
/*
/*
* ここを全画像で完全に統一
* 画像そのものではなく「表示枠」を統一する。
* これによって縦長・横長でも高さが揃う。
*/
*/
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
width: 100% !important;
height: 300px !important;
height: 300px !important;
min-height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
max-height: 300px !important;


margin: 0 !important;
padding: 0 !important;
background: #f8f9fa;
overflow: hidden;
box-sizing: border-box;
}
/*
* imgがリンクで囲まれた場合にも対応
*/
.ts-gallery__imagebox > a {
display: flex !important;
display: flex !important;
align-items: center !important;
align-items: center !important;
justify-content: center !important;
justify-content: center !important;


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


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


box-sizing: border-box;
box-sizing: border-box;
2,131行目: 2,194行目:




/* =========================================================
/* ---------------------------------------------------------
   画像そのもの
   画像本体
   ========================================================= */
   ここが重要
  --------------------------------------------------------- */


.ts-gallery__imagebox img,
.ts-gallery__imagebox img,
.ts-gallery__image {
.ts-gallery img.ts-gallery__image {
 
display: block !important;
display: block !important;


width: 100% !important;
/*
height: 100% !important;
* width:100%;
* height:100%;
* にはしない。
*
* 画像本来の縦横比を維持して
* 枠に収まるところまで縮小する。
*/
width: auto !important;
height: auto !important;


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


margin: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
 
margin: auto !important;
padding: 0 !important;
padding: 0 !important;


/*
/*
* 切り取らず、枠内に画像全体を表示
* 念のためcontainを指定。
* 画像をトリミングしない。
*/
*/
object-fit: contain !important;
object-fit: contain !important;
object-position: center center !important;
object-position: center center !important;
border: 0 !important;
box-shadow: none !important;
vertical-align: middle !important;
}
}




/* =========================================================
/* ---------------------------------------------------------
   キャプション
   キャプション
   ========================================================= */
   --------------------------------------------------------- */


.ts-gallery__caption {
.ts-gallery__caption {
padding: 9px 11px 11px;
display: block;
 
margin: 0;
padding: 10px 12px 12px;


font-size: 12px;
font-size: 12px;
line-height: 1.55;
line-height: 1.6;


color: #202122;
color: #202122;
background: #fff;


box-sizing: border-box;
box-sizing: border-box;
/*
* 長いURLや著作権表記が
* スマホ画面からはみ出すのを防ぐ
*/
overflow-wrap: anywhere;
word-break: normal;
}
}
.ts-gallery__caption p {
margin-top: 0;
margin-bottom: 0.4em;
}
.ts-gallery__caption p:last-child {
margin-bottom: 0;
}


.ts-gallery__source {
.ts-gallery__source {
display: inline;
font-size: 11px;
font-size: 11px;
line-height: 1.5;
line-height: 1.55;
 
color: #54595d;
color: #54595d;
overflow-wrap: anywhere;
}
}




/* =========================================================
/* 外部リンクが長くてもカードからはみ出させない */
   左右ボタン
.ts-gallery__caption a,
   ========================================================= */
.ts-gallery__source a {
overflow-wrap: anywhere;
}
 
 
/* ---------------------------------------------------------
  左右移動ボタン
   Common.jsで生成されるもの
   --------------------------------------------------------- */


.ts-gallery__nav {
.ts-gallery__nav {
2,186行目: 2,305行目:


/*
/*
* カード全体ではなく画像領域の中央付近
* 画像領域のほぼ中央に配置。
* キャプションの高さには影響されない。
*/
*/
top: 154px;
top: 154px;


z-index: 10;
z-index: 20;
 
display: flex;
align-items: center;
justify-content: center;


width: 40px;
width: 40px;
height: 40px;
height: 40px;
margin: 0;
padding: 0;
padding: 0;


border: 1px solid #a2a9b1;
border: 1px solid rgba(84, 89, 93, 0.45);
border-radius: 50%;
border-radius: 50%;


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


font-size: 28px;
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
line-height: 36px;
font-size: 27px;
text-align: center;
font-weight: normal;
line-height: 1;


cursor: pointer;
cursor: pointer;
2,212行目: 2,338行目:


transform: translateY(-50%);
transform: translateY(-50%);
transition:
background-color 0.15s ease,
opacity 0.15s ease,
border-color 0.15s ease;
}
}


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


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


.ts-gallery__nav:hover {
.ts-gallery__nav:hover {
2,226行目: 2,360行目:
border-color: #72777d;
border-color: #72777d;
}
}
.ts-gallery__nav:focus-visible {
outline: 2px solid #36c;
outline-offset: 2px;
}


.ts-gallery__nav:disabled {
.ts-gallery__nav:disabled {
opacity: 0.3;
opacity: 0.25;
cursor: default;
cursor: default;
}
}


/*
* 横スクロールできない場合は
* ボタン自体を隠す
*/
.ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
.ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
display: none;
display: none;
}
/* =========================================================
  中程度の画面
  ========================================================= */
@media screen and (max-width: 900px) {
.ts-gallery__item {
flex-basis: clamp(290px, 45vw, 360px) !important;
width: clamp(290px, 45vw, 360px) !important;
}
}
}


2,244行目: 2,404行目:


.ts-gallery {
.ts-gallery {
margin: 0.8em 0 1.2em;
width: 100% !important;
max-width: 100% !important;
 
margin: 0.6em 0 1.2em !important;
padding: 0 !important;
}
}


.ts-gallery__track {
.ts-gallery__track {
/*
* vwではなく親要素のwidthを基準にする。
* Minervaの本文幅を超えないため重要。
*/
width: 100% !important;
max-width: 100% !important;
gap: 9px;
gap: 9px;
margin: 0 !important;
/*
* 右側に少し余白を置くことで、
* 次のカードが見える。
*/
padding: 3px 30px 8px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;


/*
/*
* 次のカードを少しだけ見せる
* スマホではスクロールバーを隠す。
* スワイプ自体は可能。
*/
*/
padding: 3px 38px 10px 0;
scrollbar-width: none;
}
}
.ts-gallery__track::-webkit-scrollbar {
display: none;
}


.ts-gallery__item {
.ts-gallery__item {
flex: 0 0 86vw !important;
/*
width: 86vw !important;
* 86vwを使わない。
max-width: 86vw !important;
*
* MobileFrontendでは本文領域と
* viewport幅が一致しない場合があるため、
* 親要素基準にする。
*
* 右に次の画像が少しだけ見える。
*/
flex: 0 0 calc(100% - 28px) !important;
 
width: calc(100% - 28px) !important;
max-width: calc(100% - 28px) !important;
 
min-width: 0 !important;
}
}
.ts-gallery__imagebox {
/*
* スマホは大きすぎない高さ。
* 同じ端末では全画像が必ず同じ高さになる。
*/
height: clamp(220px, 64vw, 270px) !important;
min-height: clamp(220px, 64vw, 270px) !important;
max-height: clamp(220px, 64vw, 270px) !important;
}


/*
/*
* スマホも全画像同じ高さ
* Minerva側のimg指定より強くして
* 縦横比を必ず維持する
*/
*/
.ts-gallery__imagebox {
.ts-gallery__imagebox img,
height: 250px !important;
.ts-gallery img.ts-gallery__image {
min-height: 250px !important;
width: auto !important;
max-height: 250px !important;
height: auto !important;
 
max-width: 100% !important;
max-height: 100% !important;
 
object-fit: contain !important;
object-position: center center !important;
}
}


.ts-gallery__caption {
.ts-gallery__caption {
padding: 8px 9px 10px;
padding: 9px 10px 11px !important;
 
font-size: 12px;
font-size: 12px;
line-height: 1.6;
}
}


.ts-gallery__source {
.ts-gallery__source {
font-size: 10.5px;
font-size: 10.5px;
line-height: 1.55;
}
}


.ts-gallery__nav {
.ts-gallery__nav {
top: 129px;
/*
* clampの画像高におおよそ合わせる
*/
top: clamp(113px, 32vw, 138px);


width: 34px;
width: 34px;
height: 34px;
height: 34px;


font-size: 24px;
font-size: 23px;
line-height: 30px;
 
background: rgba(255, 255, 255, 0.88);
}
}


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


.ts-gallery__next {
.ts-gallery__next {
right: 5px;
right: 5px;
}
}
}
/* =========================================================
  非常に狭いスマートフォン
  ========================================================= */
@media screen and (max-width: 380px) {
.ts-gallery__track {
padding-right: 24px !important;
}
.ts-gallery__item {
flex-basis: calc(100% - 22px) !important;
width: calc(100% - 22px) !important;
max-width: calc(100% - 22px) !important;
}
.ts-gallery__imagebox {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
}
.ts-gallery__nav {
top: 113px;
}
}
/* =========================================================
  印刷
  ========================================================= */
@media print {
.ts-gallery__track {
display: block !important;
overflow: visible !important;
padding: 0 !important;
}
.ts-gallery__item {
display: inline-block !important;
width: 45% !important;
max-width: 45% !important;
margin: 0 2% 1em 0;
vertical-align: top;
}
.ts-gallery__nav {
display: none !important;
}
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4254」から取得