Difference between revisions of "Template:Harem-Heroes-Gallery"

From Hgames Wiki
Jump to: navigation, search
Line 1: Line 1:
<div style="display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);">
+
<div style="display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding: 14px; border: 1px solid #d4d8dd; border-radius: 12px; background: linear-gradient(#fbfcfd, #f2f4f7); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,0.10); scroll-snap-type: x mandatory;">
   {{#if:{{{image1|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">
+
   {{#if:{{{image1|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image1}}}|center|frameless|500x400px]]</div>{{#if:{{{caption1|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption1}}}</div>}}</div>}}
    [[File:{{{image1}}}|center|frameless|500x400px]]
+
   {{#if:{{{image2|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image2}}}|center|frameless|500x400px]]</div>{{#if:{{{caption2|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption2}}}</div>}}</div>}}
    <div style="margin-top: 5px; font-size: 0.9em;">{{{caption1|}}}</div>
+
   {{#if:{{{image3|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image3}}}|center|frameless|500x400px]]</div>{{#if:{{{caption3|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption3}}}</div>}}</div>}}
  </div>}}
+
   {{#if:{{{image4|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image4}}}|center|frameless|500x400px]]</div>{{#if:{{{caption4|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption4}}}</div>}}</div>}}
   {{#if:{{{image2|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">
+
   {{#if:{{{image5|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image5}}}|center|frameless|500x400px]]</div>{{#if:{{{caption5|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption5}}}</div>}}</div>}}
    [[File:{{{image2}}}|center|frameless|500x400px]]
+
   {{#if:{{{image6|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image6}}}|center|frameless|500x400px]]</div>{{#if:{{{caption6|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption6}}}</div>}}</div>}}
    <div style="margin-top: 5px; font-size: 0.9em;">{{{caption2|}}}</div>
+
   {{#if:{{{image7|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image7}}}|center|frameless|500x400px]]</div>{{#if:{{{caption7|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption7}}}</div>}}</div>}}
  </div>}}
+
   {{#if:{{{image8|}}}|<div style="flex: 0 0 auto; width: min(500px, 82vw); box-sizing: border-box; text-align: center; scroll-snap-align: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"><div style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f4f6f8;">[[File:{{{image8}}}|center|frameless|500x400px]]</div>{{#if:{{{caption8|}}}|<div style="padding: 7px 10px; font-size: 0.875em; line-height: 1.35; color: #54595d; border-top: 1px solid #e6e9ed;">{{{caption8}}}</div>}}</div>}}
   {{#if:{{{image3|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image3}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption3|}}}</div></div>}}
 
   {{#if:{{{image4|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image4}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption4|}}}</div></div>}}
 
   {{#if:{{{image5|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image5}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption5|}}}</div></div>}}
 
   {{#if:{{{image6|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image6}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption6|}}}</div></div>}}
 
   {{#if:{{{image7|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image7}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption7|}}}</div></div>}}
 
   {{#if:{{{image8|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image8}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption8|}}}</div></div>}}
 
 
</div>
 
</div>

Revision as of 04:46, 3 September 2026