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

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

メッセージ 議論

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

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

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


.ts-chronology {
.mw-parser-output .ts-gallery {
    --chron-blue: #36c;
position: relative !important;
    --chron-blue-dark: #2a4b8d;
display: block !important;
    --chron-border: #c8ccd1;
width: 100% !important;
    --chron-border-light: #eaecf0;
max-width: 100% !important;
    --chron-text: #202122;
margin: 0.8em 0 1.5em !important;
    --chron-subtext: #54595d;
padding: 0 !important;
    --chron-muted: #72777d;
box-sizing: border-box !important;
}
}


/* =========================================================
/* =========================================================
   セクション
   横スクロール領域
   ========================================================= */
   ========================================================= */


.ts-chron-section {
.mw-parser-output .ts-gallery .ts-gallery__track {
    margin: 20px 0 26px;
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;
}
}


.ts-chron-section-title {
.mw-parser-output .ts-gallery .ts-gallery__track::-webkit-scrollbar {
    margin: 0 0 12px !important;
height: 6px;
    padding: 3px 0 6px 8px !important;
    border: 0 !important;
    border-left: 3px solid var(--chron-blue) !important;
    border-bottom: 1px solid var(--chron-border) !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
}
}


.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;
}


/* =========================================================
/* =========================================================
   年表本体
   カード
   ========================================================= */
   ========================================================= */


.ts-chron-list {
.mw-parser-output .ts-gallery .ts-gallery__item {
    position: relative;
position: relative !important;
    margin: 0;
display: block !important;
    padding: 0;
 
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;
.ts-chron-list::before {
max-height: 300px !important;
    content: "";
 
    position: absolute;
margin: 0 !important;
    top: 7px;
padding: 0 !important;
    bottom: 7px;
 
    left: 8px;
background: #f8f9fa !important;
    width: 1px;
overflow: hidden !important;
    background: #a7b9d8;
 
box-sizing: border-box !important;
 
/* 余計なベースライン隙間防止 */
line-height: 0 !important;
font-size: 0 !important;
}
}


/* =========================================================
/* =========================================================
   1件の出来事
   MediaWikiが挿入する可能性があるラッパーを全部無害化
  ここが超重要
   ========================================================= */
   ========================================================= */


.ts-chron-entry {
.mw-parser-output .ts-gallery .ts-gallery__imagebox > p,
    position: relative;
.mw-parser-output .ts-gallery .ts-gallery__imagebox > a,
    display: block;
.mw-parser-output .ts-gallery .ts-gallery__imagebox > span,
    margin: 0;
.mw-parser-output .ts-gallery .ts-gallery__imagebox > div,
    padding: 0 0 19px 27px;
.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;
.ts-chron-entry::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 4px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--chron-blue);
    box-shadow: 0 0 0 1px var(--chron-blue);
    z-index: 1;
}
}


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


/* =========================================================
/* =========================================================
   年代
   画像本体
  画像全体を必ず表示（切り抜かない）
   ========================================================= */
   ========================================================= */


.ts-chron-date {
.mw-parser-output .ts-gallery .ts-gallery__imagebox img {
    margin: 0 0 4px;
display: block !important;
    padding: 0;
 
    color: var(--chron-blue-dark);
width: 100% !important;
    font-size: .76rem;
height: 100% !important;
    font-weight: 600;
 
    line-height: 1.5;
max-width: 100% !important;
    text-align: left;
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;
}
}


/* =========================================================
/* =========================================================
   出来事本文
   キャプション
   ========================================================= */
   ========================================================= */


.ts-chron-body {
.mw-parser-output .ts-gallery .ts-gallery__caption {
    min-width: 0;
display: block !important;
    padding: 0 0 13px;
width: 100% !important;
    border-bottom: 1px solid var(--chron-border-light);
 
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;
}
}


.ts-chron-entry:last-child {
.mw-parser-output .ts-gallery .ts-gallery__source {
    padding-bottom: 0;
color: #54595d !important;
font-size: 11px !important;
line-height: 1.55 !important;
}
}


.ts-chron-entry:last-child .ts-chron-body {
/* =========================================================
    border-bottom: 0;
  左右ボタン
  ========================================================= */
 
.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%);
}
}


.ts-chron-event {
.mw-parser-output .ts-gallery .ts-gallery__prev {
    margin: 0 0 4px;
left: 8px !important;
    color: var(--chron-text);
    font-size: .93rem;
    font-weight: 700;
    line-height: 1.45;
}
}


.ts-chron-event a {
.mw-parser-output .ts-gallery .ts-gallery__next {
    color: var(--chron-blue-dark);
right: 8px !important;
}
}


.ts-chron-summary {
.mw-parser-output .ts-gallery .ts-gallery__nav:disabled {
    color: var(--chron-subtext);
opacity: .25 !important;
    font-size: .82rem;
    line-height: 1.65;
}
}


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


/* =========================================================
/* =========================================================
   詳細リンク
   スマホ
   ========================================================= */
   ========================================================= */


.ts-chron-detail {
@media screen and (max-width: 720px) {
    margin-top: 6px;
 
    font-size: .77rem;
.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;
}
}
}


.ts-chron-detail a {
@media screen and (max-width: 380px) {
    color: var(--chron-blue);
 
.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;
}
}
}


@media screen and (max-width: 360px) {
/* =========================================================
  Infobox 外部画像スライダー
  ========================================================= */


    .ts-chron-entry {
.ts-infobox-slider {
        padding-left: 24px;
position: relative !important;
    }


    .ts-chron-event {
display: block !important;
        font-size: .89rem;
    }


    .ts-chron-summary {
width: 100% !important;
        font-size: .79rem;
max-width: 100% !important;
    }


    .ts-chron-date {
margin: 0 !important;
        font-size: .73rem;
padding: 0 !important;
    }


    .ts-chron-list::before {
box-sizing: border-box !important;
        left: 7px;
    }


    .ts-chron-entry::before {
overflow: hidden !important;
        left: 3px;
    }
}
}


/* =========================================================
/* =========================================================
   転スラ年表 - ページ上部 Mobile
   スライド領域
   ========================================================= */
   ========================================================= */


.ts-chron-header {
.ts-infobox-slider__track {
    margin-bottom: 15px;
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 !important;
overflow-y: hidden !important;
 
box-sizing: border-box !important;
 
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
 
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
 
/* スクロールバーは非表示 */
scrollbar-width: none;
}
}


.ts-chron-lead {
.ts-infobox-slider__track::-webkit-scrollbar {
    margin-bottom: 11px;
display: none;
    font-size: .86rem;
    line-height: 1.7;
}
}


.ts-chron-notice {
 
    padding: 10px 11px;
/* =========================================================
    border: 1px solid var(--chron-border);
  1枚のスライド
    border-left: 3px solid var(--chron-blue);
  ========================================================= */
    background: #f8f9fa;
 
    color: var(--chron-subtext);
.ts-infobox-slider__slide {
    font-size: .79rem;
position: relative !important;
    line-height: 1.6;
 
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-stop: always;
 
background: #fff;
}
}




/* 横スクロール式の簡潔なナビ */
/* =========================================================
  画像表示領域
  ========================================================= */
 
.ts-infobox-slider__imagebox {
display: flex !important;
align-items: center !important;
justify-content: center !important;
 
width: 100% !important;
 
/*
* Infobox内なのでギャラリーより少しコンパクト
*/
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
 
margin: 0 !important;
padding: 0 !important;
 
background: #f8f9fa !important;
 
overflow: hidden !important;


.ts-chron-nav {
box-sizing: border-box !important;
    display: flex;
 
    flex-wrap: nowrap;
line-height: 0 !important;
    overflow-x: auto;
font-size: 0 !important;
    margin: 0 0 20px;
    border-top: 1px solid var(--chron-border);
    border-bottom: 1px solid var(--chron-border);
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
}


.ts-chron-nav > span,
 
.ts-chron-nav > a {
/* =========================================================
    flex-shrink: 0;
  MediaWikiによるラッパー対策
    padding: 7px 9px;
  ========================================================= */
    font-size: .76rem;
 
.ts-infobox-slider__imagebox p,
.ts-infobox-slider__imagebox a,
.ts-infobox-slider__imagebox span {
margin: 0 !important;
padding: 0 !important;
}
}


.ts-chron-nav > a {
 
    border-left: 1px solid var(--chron-border-light);
/* =========================================================
  画像本体
  絶対にトリミングしない
  ========================================================= */
 
.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-chron-more {
.ts-infobox-slider__caption {
    margin: 23px 0 8px;
display: block !important;
    padding: 11px 12px;
 
    border: 1px solid var(--chron-border);
width: 100% !important;
    background: #f8f9fa;
 
    color: var(--chron-subtext);
margin: 0 !important;
    font-size: .8rem;
padding: 7px 8px 9px !important;
    line-height: 1.65;
 
background: #fff;
 
color: #202122;
 
font-size: 11px !important;
line-height: 1.5 !important;
 
text-align: left;
 
box-sizing: border-box !important;
 
overflow-wrap: anywhere;
}
}


.ts-chron-more-title {
    margin-bottom: 4px;
    color: var(--chron-text);
    font-size: .9rem;
    font-weight: 700;
}


.ts-chron-more-link {
.ts-infobox-slider__source {
    margin-top: 6px;
color: #54595d;
 
font-size: 10px;
line-height: 1.45;
}
}




/* =========================================================
/* =========================================================
   転スラ全史 Mobile
   左右ボタン
   ========================================================= */
   ========================================================= */


.ts-fullchron-lead {
.ts-infobox-slider__nav {
    font-size: .85rem;
position: absolute !important;
    line-height: 1.7;
 
}
/*
* 300pxの画像枠中央
*/
top: 150px !important;
 
z-index: 20 !important;
 
display: flex !important;
align-items: center !important;
justify-content: center !important;


.ts-fullchron-notice {
width: 32px !important;
    padding: 9px 10px;
height: 32px !important;
    font-size: .78rem;
    line-height: 1.6;
}


.ts-fullchron-nav {
margin: 0 !important;
    display: flex;
padding: 0 !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 16px 0 20px;
    border-top: 1px solid var(--chron-border);
    border-bottom: 1px solid var(--chron-border);
    white-space: nowrap;
}


.ts-fullchron-nav > span,
border: 1px solid rgba(84, 89, 93, 0.35) !important;
.ts-fullchron-nav > a {
border-radius: 50% !important;
    flex-shrink: 0;
    padding: 7px 9px;
    font-size: .75rem;
}


.ts-fullchron-section {
background: rgba(255, 255, 255, 0.88) !important;
    margin: 20px 0 26px;
color: #54595d !important;
}


.ts-fullchron-section-title {
font-family: Arial, sans-serif;
    margin: 0 0 11px !important;
font-size: 22px !important;
    padding: 3px 0 6px 8px !important;
font-weight: normal;
    border-left: 3px solid var(--chron-blue) !important;
line-height: 1 !important;
    border-bottom: 1px solid var(--chron-border) !important;
    font-size: 1.06rem !important;
}


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


/* モバイルでは年代→本文の縦型 */
cursor: pointer;


.ts-fullchron-list::before {
transform: translateY(-50%);
    left: 8px;
}
}


.ts-fullchron-entry {
 
    display: block;
.ts-infobox-slider__prev {
    padding: 0 0 19px 27px;
left: 5px !important;
}
}


.ts-fullchron-entry::before {
 
    top: 7px;
.ts-infobox-slider__next {
    left: 4px;
right: 5px !important;
}
}


.ts-fullchron-date {
 
    margin-bottom: 4px;
.ts-infobox-slider__nav:hover {
    padding: 0;
background: #fff !important;
    text-align: left;
color: #202122 !important;
    font-size: .75rem;
}
}


.ts-fullchron-main {
 
    padding-bottom: 13px;
.ts-infobox-slider__nav:disabled {
opacity: 0.25 !important;
cursor: default;
}
}


.ts-fullchron-event {
 
    font-size: .9rem;
/* 1枚しかない場合はナビ不要 */
.ts-infobox-slider--single .ts-infobox-slider__nav {
display: none !important;
}
}


.ts-fullchron-summary {
    font-size: .81rem;
    line-height: 1.6;
}


.ts-fullchron-meta {
/* =========================================================
    margin-top: 6px;
  スマートフォン
    font-size: .74rem;
  ========================================================= */
}
 
@media screen and (max-width: 720px) {


.ts-fullchron-meta-row {
.ts-infobox-slider__imagebox {
    grid-template-columns: 38px minmax(0, 1fr);
height: 280px !important;
    gap: 6px;
min-height: 280px !important;
}
max-height: 280px !important;
}


.ts-fullchron-detail {
.ts-infobox-slider__nav {
    font-size: .74rem;
top: 140px !important;
}
}


.ts-fullchron-footer {
    margin-top: 22px;
    padding: 10px 11px;
    font-size: .79rem;
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/3913...4274」から取得