2,780
回編集
「MediaWiki:Mobile.css」の版間の差分
編集の要約なし
(ページの作成:「→ここに記述した全てのCSSはモバイル版サイトの利用者に影響します: →ここに記述したCSSは携帯機器版サイトの利用者に影響します: →The message body cell(s), such as for {{Commonscat}}. * this is a very small subset of the styles from Common.css * just to make sure the box isn't squashed without any spacing * which looks out of place with visuals of other nearby elements: .mbox-text { →@noflip: pad…」) |
編集の要約なし |
||
| (同じ利用者による、間の14版が非表示) | |||
| 142行目: | 142行目: | ||
.mw-special-Book #coll-downloadbox { | .mw-special-Book #coll-downloadbox { | ||
display: none; | display: none; | ||
} | |||
/* ========================================================= | |||
転スラWiki メインページ - Mobile | |||
========================================================= */ | |||
.ts-main { | |||
--ts-blue: #36c; | |||
--ts-blue-dark: #2a4b8d; | |||
--ts-blue-light: #f4f7fc; | |||
--ts-border: #c8ccd1; | |||
--ts-border-light: #eaecf0; | |||
--ts-text: #202122; | |||
--ts-subtext: #54595d; | |||
--ts-muted: #72777d; | |||
width: 100%; | |||
margin: 0; | |||
color: var(--ts-text); | |||
box-sizing: border-box; | |||
} | |||
/* MediaWikiが自動生成する余計な空白対策 */ | |||
.ts-main > p, | |||
.ts-main-section > p, | |||
.ts-portal-grid > p, | |||
.ts-grid-4 > p, | |||
.ts-grid-2 > p, | |||
.ts-main > br, | |||
.ts-main-section > br, | |||
.ts-portal-grid > br, | |||
.ts-grid-4 > br, | |||
.ts-grid-2 > br { | |||
display: none !important; | |||
} | |||
/* ========================================================= | |||
Welcome | |||
========================================================= */ | |||
.ts-welcome { | |||
display: block; | |||
margin: 0 0 16px; | |||
padding: 14px; | |||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #fff; | |||
} | |||
.ts-welcome-title { | |||
margin: 0 0 5px; | |||
font-size: 1.2rem; | |||
font-weight: 700; | |||
line-height: 1.4; | |||
} | |||
.ts-welcome-desc { | |||
color: var(--ts-subtext); | |||
font-size: .86rem; | |||
line-height: 1.6; | |||
} | |||
.ts-spoiler-note { | |||
color: var(--ts-muted); | |||
font-size: .78rem; | |||
} | |||
.ts-welcome-count { | |||
margin-top: 10px; | |||
padding-top: 8px; | |||
border-top: 1px solid var(--ts-border-light); | |||
color: var(--ts-muted); | |||
font-size: .82rem; | |||
} | |||
.ts-welcome-count strong { | |||
color: var(--ts-blue-dark); | |||
font-size: 1rem; | |||
} | |||
/* ========================================================= | |||
セクション見出し | |||
========================================================= */ | |||
.ts-main-section { | |||
margin: 16px 0 !important; | |||
padding: 0 !important; | |||
} | |||
.ts-main-heading { | |||
margin: 0 0 9px !important; | |||
padding: 3px 0 6px 9px !important; | |||
border: 0 !important; | |||
border-left: 4px solid var(--ts-blue) !important; | |||
border-bottom: 1px solid var(--ts-border-light) !important; | |||
font-size: 1.08rem !important; | |||
font-weight: 700 !important; | |||
} | |||
/* ========================================================= | |||
探す | |||
スマホでも2列 | |||
========================================================= */ | |||
.ts-portal-grid { | |||
display: grid !important; | |||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; | |||
overflow: hidden; | |||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #fff; | |||
} | |||
.ts-portal-card { | |||
display: block !important; | |||
min-width: 0; | |||
min-height: 112px; | |||
margin: 0 !important; | |||
padding: 12px !important; | |||
border-right: 1px solid var(--ts-border-light); | |||
border-bottom: 1px solid var(--ts-border-light); | |||
box-sizing: border-box; | |||
background: #fff; | |||
} | |||
.ts-portal-card:nth-of-type(2n) { | |||
border-right: 0; | |||
} | |||
.ts-portal-card:nth-last-of-type(-n+2) { | |||
border-bottom: 0; | |||
} | |||
.ts-portal-icon { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 31px; | |||
height: 31px; | |||
margin-bottom: 7px; | |||
border: 1px solid #a7b9d8; | |||
border-radius: 4px; | |||
background: #f8faff; | |||
color: var(--ts-blue-dark); | |||
font-size: .84rem; | |||
font-weight: 700; | |||
} | |||
.ts-portal-title { | |||
margin: 0 0 4px; | |||
font-size: .91rem; | |||
font-weight: 700; | |||
line-height: 1.4; | |||
} | |||
.ts-portal-title a { | |||
color: var(--ts-blue-dark); | |||
} | |||
.ts-portal-description { | |||
margin: 0; | |||
color: var(--ts-subtext); | |||
font-size: .75rem; | |||
line-height: 1.45; | |||
} | |||
.ts-portal-more { | |||
display: none; | |||
} | |||
/* ========================================================= | |||
各パネル | |||
========================================================= */ | |||
.ts-grid-4, | |||
.ts-grid-2 { | |||
display: grid !important; | |||
grid-template-columns: 1fr !important; | |||
overflow: hidden; | |||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #fff; | |||
} | |||
.ts-panel { | |||
min-width: 0; | |||
margin: 0 !important; | |||
padding: 14px !important; | |||
border-right: 0; | |||
border-bottom: 1px solid var(--ts-border-light); | |||
box-sizing: border-box; | |||
} | |||
.ts-grid-4 > .ts-panel:last-of-type, | |||
.ts-grid-2 > .ts-panel:last-of-type { | |||
border-bottom: 0; | |||
} | |||
.ts-panel-heading { | |||
display: flex; | |||
align-items: center; | |||
gap: 6px; | |||
margin: 0 0 9px !important; | |||
padding: 0 0 7px !important; | |||
border-bottom: 1px solid var(--ts-border-light); | |||
color: var(--ts-blue-dark); | |||
font-size: .98rem; | |||
font-weight: 700; | |||
} | |||
.ts-panel-symbol { | |||
color: var(--ts-blue); | |||
} | |||
.ts-panel-content { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
font-size: .86rem; | |||
line-height: 1.6; | |||
} | |||
.ts-panel-content ul { | |||
margin: 0 0 0 1.2em !important; | |||
padding: 0 !important; | |||
} | |||
.ts-panel-footer { | |||
margin-top: 9px; | |||
text-align: right; | |||
font-size: .79rem; | |||
} | |||
/* ========================================================= | |||
ピックアップ・今日のスキル | |||
========================================================= */ | |||
.ts-pickup-label { | |||
display: inline-block; | |||
margin: 0 0 6px; | |||
padding: 2px 6px; | |||
border-radius: 3px; | |||
background: #eef3fb; | |||
color: var(--ts-blue-dark); | |||
font-size: .7rem; | |||
font-weight: 700; | |||
} | |||
.ts-pickup-title { | |||
margin: 0 0 5px; | |||
font-size: 1rem; | |||
font-weight: 700; | |||
} | |||
.ts-pickup-text { | |||
margin: 0; | |||
color: var(--ts-subtext); | |||
font-size: .84rem; | |||
line-height: 1.55; | |||
} | |||
/* ========================================================= | |||
注目の記事 | |||
========================================================= */ | |||
.ts-focus-list { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
list-style: none !important; | |||
} | |||
.ts-focus-list li { | |||
position: relative; | |||
margin: 0 !important; | |||
padding: 6px 0 6px 14px !important; | |||
border-bottom: 1px dotted #d8dfe8; | |||
} | |||
.ts-focus-list li:last-child { | |||
border-bottom: 0; | |||
} | |||
.ts-focus-list li::before { | |||
content: "›"; | |||
position: absolute; | |||
left: 1px; | |||
color: var(--ts-blue); | |||
font-weight: 700; | |||
} | |||
/* ========================================================= | |||
新着・最近更新 | |||
========================================================= */ | |||
.ts-update-list { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
list-style: none !important; | |||
} | |||
.ts-update-list li { | |||
display: flex; | |||
align-items: baseline; | |||
justify-content: space-between; | |||
gap: 8px; | |||
margin: 0 !important; | |||
padding: 6px 0 !important; | |||
border-bottom: 1px dotted #d8dfe8; | |||
} | |||
.ts-update-list li:last-child { | |||
border-bottom: 0; | |||
} | |||
.ts-update-title { | |||
min-width: 0; | |||
overflow-wrap: anywhere; | |||
} | |||
.ts-update-date { | |||
flex-shrink: 0; | |||
color: var(--ts-muted); | |||
font-size: .73rem; | |||
white-space: nowrap; | |||
} | |||
/* ========================================================= | |||
人気記事・急上昇 | |||
========================================================= */ | |||
.ts-ranking { | |||
display: table; | |||
width: 100%; | |||
margin: 0 !important; | |||
border: 0 !important; | |||
border-collapse: collapse; | |||
background: transparent !important; | |||
} | |||
.ts-ranking tr { | |||
display: grid; | |||
grid-template-columns: 24px minmax(0, 1fr) auto; | |||
align-items: baseline; | |||
width: 100%; | |||
border-bottom: 1px dotted #d8dfe8; | |||
} | |||
.ts-ranking tr:last-child { | |||
border-bottom: 0; | |||
} | |||
.ts-ranking td { | |||
display: block; | |||
min-width: 0; | |||
padding: 6px 2px !important; | |||
border: 0 !important; | |||
background: transparent !important; | |||
font-size: .83rem; | |||
} | |||
.ts-ranking-num { | |||
color: var(--ts-muted); | |||
text-align: center; | |||
} | |||
.ts-ranking-value { | |||
padding-left: 8px !important; | |||
color: var(--ts-muted); | |||
text-align: right; | |||
white-space: nowrap; | |||
font-size: .75rem !important; | |||
} | |||
.ts-ranking-note { | |||
margin: 0 0 7px; | |||
color: var(--ts-muted); | |||
font-size: .74rem; | |||
line-height: 1.5; | |||
} | |||
.ts-up { | |||
color: #14866d !important; | |||
font-weight: 700; | |||
} | |||
/* ========================================================= | |||
編集案内 | |||
========================================================= */ | |||
.ts-edit-list { | |||
margin: 0 !important; | |||
padding-left: 1.2em !important; | |||
} | |||
.ts-edit-list li { | |||
margin: 5px 0; | |||
} | |||
.ts-beginner-box { | |||
margin-top: 11px; | |||
padding: 10px; | |||
border-left: 3px solid var(--ts-blue); | |||
background: #f4f7fc; | |||
font-size: .81rem; | |||
} | |||
.ts-beginner-title { | |||
margin-bottom: 3px; | |||
font-weight: 700; | |||
} | |||
/* ========================================================= | |||
作品紹介 | |||
========================================================= */ | |||
.ts-about { | |||
margin: 0; | |||
padding: 14px; | |||
border: 1px solid var(--ts-border); | |||
border-radius: 5px; | |||
background: #f8f9fa; | |||
font-size: .84rem; | |||
line-height: 1.65; | |||
} | |||
.ts-about-title { | |||
margin-bottom: 6px; | |||
font-size: .98rem; | |||
font-weight: 700; | |||
} | |||
/* ========================================================= | |||
下部ナビ | |||
========================================================= */ | |||
.ts-subnav { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: flex-start; | |||
margin: 16px 0 0; | |||
padding: 9px 0; | |||
border-top: 1px solid var(--ts-border-light); | |||
border-bottom: 1px solid var(--ts-border-light); | |||
font-size: .76rem; | |||
line-height: 1.8; | |||
} | |||
.ts-subnav a { | |||
margin: 2px 0; | |||
padding: 0 8px; | |||
border-right: 1px solid var(--ts-border); | |||
} | |||
.ts-subnav a:last-child { | |||
border-right: 0; | |||
} | |||
/* ========================================================= | |||
かなり狭いスマホ | |||
========================================================= */ | |||
@media screen and (max-width: 360px) { | |||
.ts-portal-card { | |||
min-height: 105px; | |||
padding: 10px !important; | |||
} | |||
.ts-portal-title { | |||
font-size: .86rem; | |||
} | |||
.ts-portal-description { | |||
font-size: .71rem; | |||
} | |||
.ts-panel { | |||
padding: 12px !important; | |||
} | |||
.ts-ranking td { | |||
font-size: .8rem; | |||
} | |||
.ts-ranking-value { | |||
font-size: .71rem !important; | |||
} | |||
} | |||
/* ========================================================= | |||
転スラWiki 外部画像スライドギャラリー 完全版 | |||
・画像を切り抜かない | |||
・高さを統一 | |||
・PCでは横並び＋左右ボタン | |||
・スマホでは横スワイプ | |||
========================================================= */ | |||
.mw-parser-output .ts-gallery { | |||
position: relative !important; | |||
display: block !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0.8em 0 1.5em !important; | |||
padding: 0 !important; | |||
box-sizing: border-box !important; | |||
} | |||
/* ========================================================= | |||
横スクロール領域 | |||
========================================================= */ | |||
.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-infobox-slider { | |||
position: relative !important; | |||
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 !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-infobox-slider__track::-webkit-scrollbar { | |||
display: none; | |||
} | |||
/* ========================================================= | |||
1枚のスライド | |||
========================================================= */ | |||
.ts-infobox-slider__slide { | |||
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-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; | |||
box-sizing: border-box !important; | |||
line-height: 0 !important; | |||
font-size: 0 !important; | |||
} | |||
/* ========================================================= | |||
MediaWikiによるラッパー対策 | |||
========================================================= */ | |||
.ts-infobox-slider__imagebox p, | |||
.ts-infobox-slider__imagebox a, | |||
.ts-infobox-slider__imagebox span { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* ========================================================= | |||
画像本体 | |||
絶対にトリミングしない | |||
========================================================= */ | |||
.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-infobox-slider__caption { | |||
display: block !important; | |||
width: 100% !important; | |||
margin: 0 !important; | |||
padding: 7px 8px 9px !important; | |||
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-infobox-slider__source { | |||
color: #54595d; | |||
font-size: 10px; | |||
line-height: 1.45; | |||
} | |||
/* ========================================================= | |||
左右ボタン | |||
========================================================= */ | |||
.ts-infobox-slider__nav { | |||
position: absolute !important; | |||
/* | |||
* 300pxの画像枠中央 | |||
*/ | |||
top: 150px !important; | |||
z-index: 20 !important; | |||
display: flex !important; | |||
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-family: Arial, sans-serif; | |||
font-size: 22px !important; | |||
font-weight: normal; | |||
line-height: 1 !important; | |||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); | |||
cursor: pointer; | |||
transform: translateY(-50%); | |||
} | |||
.ts-infobox-slider__prev { | |||
left: 5px !important; | |||
} | |||
.ts-infobox-slider__next { | |||
right: 5px !important; | |||
} | |||
.ts-infobox-slider__nav:hover { | |||
background: #fff !important; | |||
color: #202122 !important; | |||
} | |||
.ts-infobox-slider__nav:disabled { | |||
opacity: 0.25 !important; | |||
cursor: default; | |||
} | |||
/* 1枚しかない場合はナビ不要 */ | |||
.ts-infobox-slider--single .ts-infobox-slider__nav { | |||
display: none !important; | |||
} | |||
/* ========================================================= | |||
スマートフォン | |||
========================================================= */ | |||
@media screen and (max-width: 720px) { | |||
.ts-infobox-slider__imagebox { | |||
height: 280px !important; | |||
min-height: 280px !important; | |||
max-height: 280px !important; | |||
} | |||
.ts-infobox-slider__nav { | |||
top: 140px !important; | |||
} | |||
} | } | ||