|
|
| 2,028行目: |
2,028行目: |
| } | | } |
| /* ========================================================= | | /* ========================================================= |
| 転スラWiki 外部画像スライドギャラリー | | 画像表示領域 |
| PC / タブレット / スマートフォン対応
| |
| | |
| ・外部画像の生URLに対応
| |
| ・縦長 / 横長 / 正方形を混在可能
| |
| ・画像は絶対にトリミングしない
| |
| ・画像表示領域の高さを統一
| |
| ・PCでは左右ボタン
| |
| ・スマホでは横スワイプ
| |
| ========================================================= */
| |
| | |
| | |
| /* =========================================================
| |
| 1. ギャラリー全体
| |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| .mw-parser-output .ts-gallery { | | .mw-parser-output .ts-gallery .ts-gallery__imagebox { |
| --ts-gallery-image-height: 300px;
| |
| | |
| position: relative;
| |
| display: block;
| |
| | |
| width: 100%;
| |
| max-width: 100%;
| |
| | |
| margin: 0.8em 0 1.5em;
| |
| padding: 0;
| |
| | |
| box-sizing: border-box;
| |
| }
| |
| | |
| | |
| .mw-parser-output .ts-gallery__title {
| |
| margin: 0 0 0.6em;
| |
| padding: 0;
| |
| | |
| font-size: 1.05em;
| |
| font-weight: 700;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 2. 横スクロール領域
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .ts-gallery__track {
| |
| display: flex !important; | | display: flex !important; |
| flex-flow: row nowrap !important; | | align-items: center !important; |
| align-items: flex-start !important; | | justify-content: center !important; |
| | |
| gap: 12px;
| |
|
| |
|
| width: 100% !important; | | width: 100% !important; |
| max-width: 100% !important;
| |
|
| |
| margin: 0 !important;
| |
| padding: 4px 46px 12px 2px !important;
| |
|
| |
|
| overflow-x: auto !important; | | height: var(--ts-gallery-image-height, 300px) !important; |
| overflow-y: hidden !important;
| | min-height: var(--ts-gallery-image-height, 300px) !important; |
| | | max-height: var(--ts-gallery-image-height, 300px) !important; |
| box-sizing: border-box;
| |
| | |
| scroll-snap-type: x mandatory;
| |
| scroll-behavior: smooth; | |
| | |
| -webkit-overflow-scrolling: touch;
| |
| overscroll-behavior-x: contain;
| |
| | |
| scrollbar-width: thin;
| |
| scrollbar-color: #a2a9b1 transparent;
| |
| }
| |
| | |
| | |
| .mw-parser-output .ts-gallery__track::-webkit-scrollbar {
| |
| height: 6px;
| |
| }
| |
| | |
| | |
| .mw-parser-output .ts-gallery__track::-webkit-scrollbar-track {
| |
| background: transparent;
| |
| }
| |
| | |
| | |
| .mw-parser-output .ts-gallery__track::-webkit-scrollbar-thumb {
| |
| background: #a2a9b1;
| |
| border-radius: 999px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 3. 1枚ごとのカード
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .ts-gallery__item {
| |
| /*
| |
| * 大きすぎず小さすぎないサイズ。
| |
| * 広いPCでは最大380px。
| |
| */
| |
| flex: 0 0 clamp(300px, 31vw, 380px) !important;
| |
| | |
| width: clamp(300px, 31vw, 380px) !important;
| |
| max-width: calc(100% - 24px) !important; | |
| min-width: 0 !important;
| |
|
| |
|
| margin: 0 !important; | | margin: 0 !important; |
| padding: 0 !important; | | padding: 0 !important; |
|
| |
|
| background: #fff; | | background: #f8f9fa; |
| | |
| border: 1px solid #a2a9b1;
| |
| border-radius: 5px;
| |
|
| |
|
| /* | | /* |
| * カード外へのはみ出しだけを防ぐ。 | | * 今回はhiddenに戻す。 |
| * 画像本体は下で必ず枠内に収める。 | | * 中の画像を確実に枠内へ収めるため、 |
| | * 正常なら画像が切れることはない。 |
| */ | | */ |
| overflow: hidden; | | overflow: hidden !important; |
|
| |
|
| box-sizing: border-box; | | box-sizing: border-box !important; |
| | |
| scroll-snap-align: start;
| |
| scroll-snap-stop: always;
| |
| } | | } |
|
| |
|
|
| |
|
| /* ========================================================= | | /* ========================================================= |
| 4. 画像表示領域 | | MediaWikiが自動生成する可能性があるpを無害化 |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| .mw-parser-output .ts-gallery__imagebox { | | .mw-parser-output .ts-gallery .ts-gallery__imagebox > p { |
| display: flex !important; | | display: flex !important; |
| align-items: center !important; | | align-items: center !important; |
| 2,165行目: |
2,068行目: |
|
| |
|
| width: 100% !important; | | width: 100% !important; |
| | height: 100% !important; |
|
| |
|
| /*
| | min-width: 0 !important; |
| * 全画像で表示領域の高さを統一
| | min-height: 0 !important; |
| */
| |
| height: var(--ts-gallery-image-height) !important;
| |
| min-height: var(--ts-gallery-image-height) !important; | |
| max-height: var(--ts-gallery-image-height) !important; | |
|
| |
|
| margin: 0 !important; | | margin: 0 !important; |
| padding: 0 !important; | | padding: 0 !important; |
|
| |
|
| background: #f8f9fa;
| | box-sizing: border-box !important; |
| | |
| box-sizing: border-box; | |
| | |
| /*
| |
| * 画像は100%×100% + containで
| |
| * 必ずこの領域内に収まるため、
| |
| * ここではトリミング処理をしない。
| |
| */
| |
| overflow: visible !important;
| |
| } | | } |
|
| |
|
|
| |
|
| /* ========================================================= | | /* ========================================================= |
| 5. 画像がリンクで囲まれた場合 | | 画像がリンクで囲まれた場合にも対応 |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| .mw-parser-output .ts-gallery__imagebox > a { | | .mw-parser-output .ts-gallery .ts-gallery__imagebox > a, |
| display: block !important; | | .mw-parser-output .ts-gallery .ts-gallery__imagebox > p > a { |
| | display: flex !important; |
| | align-items: center !important; |
| | justify-content: center !important; |
|
| |
|
| width: 100% !important; | | width: 100% !important; |
| height: 100% !important; | | height: 100% !important; |
| | |
| | min-width: 0 !important; |
| | min-height: 0 !important; |
|
| |
|
| margin: 0 !important; | | margin: 0 !important; |
| padding: 0 !important; | | padding: 0 !important; |
|
| |
|
| box-sizing: border-box; | | box-sizing: border-box !important; |
| } | | } |
|
| |
|
|
| |
|
| /* ========================================================= | | /* ========================================================= |
| 6. 画像本体 | | 画像本体 |
| 最重要部分 | | 絶対にトリミングしない |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| /*
| | .mw-parser-output .ts-gallery .ts-gallery__imagebox img, |
| * 重要：
| |
| *
| |
| * width:auto;
| |
| * height:auto;
| |
| *
| |
| * は使用しない。
| |
| *
| |
| * img自体に表示枠と同じサイズを与え、
| |
| * object-fit:contain で画像本体だけを
| |
| * 縦横比を維持したまま収める。
| |
| *
| |
| * これにより、
| |
| *
| |
| * 縦長画像 → 左右に余白
| |
| * 横長画像 → 上下に余白
| |
| * 正方形 → 状況に応じて余白
| |
| *
| |
| * となり、画像は一切切れない。
| |
| */
| |
| | |
| .mw-parser-output .ts-gallery__imagebox > img, | |
| .mw-parser-output .ts-gallery__imagebox > a > img,
| |
| .mw-parser-output .ts-gallery img.ts-gallery__image { | | .mw-parser-output .ts-gallery img.ts-gallery__image { |
| display: block !important; | | display: block !important; |
|
| |
|
| | /* |
| | * img要素そのものを表示枠と同じ大きさにする。 |
| | * 実画像はobject-fit:containでその中に収める。 |
| | */ |
| width: 100% !important; | | width: 100% !important; |
| height: 100% !important; | | height: 100% !important; |
| 2,252行目: |
2,131行目: |
| box-shadow: none !important; | | box-shadow: none !important; |
|
| |
|
| | /* |
| | * これによって元画像は絶対に切り抜かれない。 |
| | */ |
| object-fit: contain !important; | | object-fit: contain !important; |
| object-position: center center !important; | | object-position: center center !important; |
| 2,258行目: |
2,140行目: |
|
| |
|
| box-sizing: border-box !important; | | box-sizing: border-box !important; |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 7. キャプション
| |
| ========================================================= */
| |
|
| |
| .mw-parser-output .ts-gallery__caption {
| |
| display: block;
| |
|
| |
| width: 100%;
| |
|
| |
| margin: 0;
| |
| padding: 10px 12px 12px;
| |
|
| |
| color: #202122;
| |
| background: #fff;
| |
|
| |
| font-size: 12px;
| |
| line-height: 1.6;
| |
|
| |
| box-sizing: border-box;
| |
|
| |
| overflow-wrap: anywhere;
| |
| word-break: normal;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__caption p {
| |
| margin-top: 0;
| |
| margin-bottom: 0.4em;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__caption p:last-child {
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__source {
| |
| display: inline;
| |
|
| |
| color: #54595d;
| |
|
| |
| font-size: 11px;
| |
| line-height: 1.55;
| |
|
| |
| overflow-wrap: anywhere;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__caption a,
| |
| .mw-parser-output .ts-gallery__source a {
| |
| overflow-wrap: anywhere;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 8. 左右移動ボタン
| |
| ========================================================= */
| |
|
| |
| .mw-parser-output .ts-gallery__nav {
| |
| position: absolute;
| |
|
| |
| /*
| |
| * 300px画像領域の中央付近
| |
| */
| |
| top: calc(
| |
| (var(--ts-gallery-image-height) / 2)
| |
| + 4px
| |
| );
| |
|
| |
| z-index: 20;
| |
|
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
|
| |
| width: 40px;
| |
| height: 40px;
| |
|
| |
| margin: 0;
| |
| padding: 0;
| |
|
| |
| border: 1px solid rgba(84, 89, 93, 0.45);
| |
| border-radius: 50%;
| |
|
| |
| background: rgba(255, 255, 255, 0.92);
| |
| color: #202122;
| |
|
| |
| font-family: Arial, sans-serif;
| |
| font-size: 27px;
| |
| font-weight: normal;
| |
| line-height: 1;
| |
|
| |
| cursor: pointer;
| |
|
| |
| box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
| |
|
| |
| transform: translateY(-50%);
| |
|
| |
| transition:
| |
| background-color 0.15s ease,
| |
| opacity 0.15s ease,
| |
| border-color 0.15s ease;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__prev {
| |
| left: 10px;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__next {
| |
| right: 10px;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__nav:hover {
| |
| background: #fff;
| |
| border-color: #72777d;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__nav:focus-visible {
| |
| outline: 2px solid #36c;
| |
| outline-offset: 2px;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__nav:disabled {
| |
| opacity: 0.25;
| |
| cursor: default;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * スライドする必要がなければボタン非表示
| |
| */
| |
| .mw-parser-output
| |
| .ts-gallery:not(.ts-gallery--scrollable)
| |
| .ts-gallery__nav {
| |
| display: none;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 9. タブレット
| |
| ========================================================= */
| |
|
| |
| @media screen and (max-width: 900px) {
| |
|
| |
| .mw-parser-output .ts-gallery__item {
| |
| flex-basis: clamp(290px, 45vw, 360px) !important;
| |
| width: clamp(290px, 45vw, 360px) !important;
| |
| }
| |
|
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 10. スマートフォン
| |
| ========================================================= */
| |
|
| |
| @media screen and (max-width: 720px) {
| |
|
| |
| .mw-parser-output .ts-gallery {
| |
| /*
| |
| * スマホでは少し低くする。
| |
| * ただし全画像で同じ高さ。
| |
| */
| |
| --ts-gallery-image-height:
| |
| clamp(220px, 64vw, 270px);
| |
|
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
|
| |
| margin: 0.6em 0 1.2em !important;
| |
| padding: 0 !important;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__track {
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
|
| |
| gap: 9px;
| |
|
| |
| margin: 0 !important;
| |
|
| |
| /*
| |
| * 次のカードが少しだけ見える
| |
| */
| |
| padding: 3px 30px 8px 0 !important;
| |
|
| |
| overflow-x: auto !important;
| |
| overflow-y: hidden !important;
| |
|
| |
| scroll-snap-type: x mandatory;
| |
|
| |
| /*
| |
| * スマホではスクロールバーを隠す
| |
| */
| |
| scrollbar-width: none;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output
| |
| .ts-gallery__track::-webkit-scrollbar {
| |
| display: none;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__item {
| |
| /*
| |
| * vwではなく親要素基準。
| |
| * MobileFrontendでも本文幅からはみ出しにくい。
| |
| */
| |
| flex:
| |
| 0 0 calc(100% - 28px) !important;
| |
|
| |
| width:
| |
| calc(100% - 28px) !important;
| |
|
| |
| max-width:
| |
| calc(100% - 28px) !important;
| |
|
| |
| min-width: 0 !important;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * スマホでも画像本体は同じ原理。
| |
| * 100%×100%の領域内にcontain。
| |
| */
| |
| .mw-parser-output
| |
| .ts-gallery__imagebox > img,
| |
|
| |
| .mw-parser-output
| |
| .ts-gallery__imagebox > a > img,
| |
|
| |
| .mw-parser-output
| |
| .ts-gallery img.ts-gallery__image {
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
|
| |
| max-width: 100% !important;
| |
| max-height: 100% !important;
| |
|
| |
| object-fit: contain !important;
| |
| object-position: center center !important;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__caption {
| |
| padding: 9px 10px 11px !important;
| |
|
| |
| font-size: 12px;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__source {
| |
| font-size: 10.5px;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__nav {
| |
| top: calc(
| |
| (var(--ts-gallery-image-height) / 2)
| |
| + 3px
| |
| );
| |
|
| |
| width: 34px;
| |
| height: 34px;
| |
|
| |
| font-size: 23px;
| |
|
| |
| background:
| |
| rgba(255, 255, 255, 0.88);
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__prev {
| |
| left: 5px;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__next {
| |
| right: 5px;
| |
| }
| |
|
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 11. 非常に狭いスマートフォン
| |
| ========================================================= */
| |
|
| |
| @media screen and (max-width: 380px) {
| |
|
| |
| .mw-parser-output .ts-gallery {
| |
| --ts-gallery-image-height: 220px;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__track {
| |
| padding-right: 24px !important;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__item {
| |
| flex-basis:
| |
| calc(100% - 22px) !important;
| |
|
| |
| width:
| |
| calc(100% - 22px) !important;
| |
|
| |
| max-width:
| |
| calc(100% - 22px) !important;
| |
| }
| |
|
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 12. 印刷
| |
| ========================================================= */
| |
|
| |
| @media print {
| |
|
| |
| .mw-parser-output .ts-gallery__track {
| |
| display: block !important;
| |
|
| |
| overflow: visible !important;
| |
|
| |
| padding: 0 !important;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__item {
| |
| display: inline-block !important;
| |
|
| |
| width: 45% !important;
| |
| max-width: 45% !important;
| |
|
| |
| margin: 0 2% 1em 0;
| |
|
| |
| vertical-align: top;
| |
| }
| |
|
| |
|
| |
| .mw-parser-output .ts-gallery__nav {
| |
| display: none !important;
| |
| }
| |
|
| |
| } | | } |