|
Tags: Mobile edit Mobile web edit |
| (18 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| == Generic Infobox == | | == Universal Popups v3 — Full Testbed (Sectioned) == |
|
| |
|
| Used as a base template for other boxes. Rows must be manually added or removed.
| | === 1) Notes (Small Hover) — Bullet List === |
| | | <div class="sv-tip"> |
| {| class="infobox" style="width:275px; font-size:90%; border:2px solid #372b54; background:#f7f7fa; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.25);"
| | <span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Info" aria-controls="sv-tb-notes-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span> |
| |-
| | <div class="sv-tip-pop sv-hidden" id="sv-tb-notes-1" role="dialog" aria-label="Info"> |
| ! colspan="2" style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:6px; font-size:110%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Info</div></div> |
| '''{{{name|Example Infobox}}}'''<br />
| | <div class="sv-tip-pop-body"> |
| {{#if:{{{image|}}}|[[File:{{{image}}}|100px]]}}
| | * Bullet line one (wrap test for compact width). |
| | | * Bullet line two with a longer phrase to force vertical growth. |
| |-
| | </div> |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | {{{row1_label|}}}
| | </div> |
| | style="background:#ffffff;" | {{{row1_value|}}}
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | {{{row2_label|}}}
| |
| | style="background:#ffffff;" | {{{row2_value|}}}
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | {{{row3_label|}}}
| |
| | style="background:#ffffff;" | {{{row3_value|}}}
| |
| |}
| |
| | |
| === Example 1 ===
| |
| | |
| Old version
| |
| | |
| {| class="infobox" style="width:275px; font-size:90%; border:2px solid #372b54; background:#f7f7fa; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.25);"
| |
| |-
| |
| ! colspan="2" style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:6px; font-size:110%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Player'''<br />
| |
| [[File:SpiritValeLogo.png|100px]]<br />
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | Character
| |
| | style="background:#ffffff;" | Eviand
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Class
| |
| | style="background:#ffffff;" | Acolyte
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Role
| |
| | style="background:#ffffff;" | Support
| |
| |}
| |
| | |
| === Example 2 ===
| |
| | |
| This one is much more appropriate, and feels a lot easier to use. Will be for classes only.
| |
| | |
| <noinclude>[[Category:Templates]]</noinclude> | |
| {| class="infobox" style="float:right; width:275px; font-size:90%; border:2px solid #372b54; background:#f7f7fa; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.25);"
| |
| |-
| |
| ! colspan="2" style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:6px; font-size:110%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Class Overview'''<br />
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| |
| | style="background:#ffffff;" | {{{Role}}}
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Primary Stats
| |
| | style="background:#ffffff;" | {{{Stats}}}
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Weapons
| |
| | style="background:#ffffff;" | {{{Weapons}}}
| |
| |}
| |
| | |
| ==Fun Class Template Idea==
| |
| | |
| Had fun creating this for testing, but will instead use a simpler template.
| |
| | |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px 0;"
| |
| |-
| |
| | style="padding:20px; background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; border-top-left-radius:14px; border-top-right-radius:14px; text-align:center; font-size:200%;" |
| |
| [[File:SpiritValeLogo.png|100px]]<br />
| |
| '''{{{Class}}}'''
| |
| |-
| |
| | style="padding:15px; line-height:1.6; font-size:100%;" |
| |
| | |
| <div style="display:flex; gap:20px; align-items:flex-start; margin-top:20px; font-size:100%;"> | |
| | |
| <div style="flex:2; line-height:1.6;"> | |
| {{{ClassDescription}}}
| |
| </div> | | </div> |
|
| |
|
| <div style="flex:1; align-self:flex-start;"> | | === 2) Notes (Small Hover) — Single Sentence === |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
| | <div class="sv-tip"> |
| |-
| | <span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Notes" aria-controls="sv-tb-notes-2" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span> |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| | <div class="sv-tip-pop sv-hidden" id="sv-tb-notes-2" role="dialog" aria-label="Notes"> |
| '''Class Information'''
| | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Notes</div></div> |
| |-
| | <div class="sv-tip-pop-body"> |
| | style="padding:12px; text-align:left; line-height:1.7; font-size:100%;" |
| | A short single-line note that should wrap early and grow vertically. |
| {| class="infobox" style="width:100%; font-size:100%; border:1px solid #ccc; background:#ffffff; border-radius:10px; padding:6px;"
| |
| |-
| |
| | style="padding:6px; font-weight:bold;" | Role
| |
| | style="padding:6px;" | {{{Role}}}
| |
| |-
| |
| | style="padding:6px; font-weight:bold;" | Primary Stats
| |
| | style="padding:6px;" | {{{Stats}}}
| |
| |-
| |
| | style="padding:6px; font-weight:bold;" | Weapon Type(s)
| |
| | style="padding:6px;" | {{{Weapons}}}
| |
| |}
| |
| |}
| |
| </div> | | </div> |
| </div> | | </div> |
|
| |
| {| style="width:100%; border:2px solid #5a4e7c; background:#eef0f6; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2); padding:0; margin-top:20px;"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Skills'''
| |
| |-
| |
| | style="padding:12px; text-align:center; font-size:100%;" |
| |
|
| |
| {| class="wikitable" style="width:100%; text-align:center; border:1px solid #ccc; border-collapse:collapse;"
| |
| |-
| |
| ! style="width:16%;" | {{{Skill1}}}
| |
| ! style="width:16%;" | {{{Skill2}}}
| |
| ! style="width:16%;" | {{{Skill3}}}
| |
| ! style="width:16%;" | {{{Skill4}}}
| |
| ! style="width:16%;" | {{{Skill5}}}
| |
| ! style="width:16%;" | {{{Skill6}}}
| |
| |-
| |
| | {{#if:{{{SkillImage1|}}}|[[File:{{{SkillImage1}}}|50px]]}}<br>{{{SkillDescription1}}}
| |
| | {{#if:{{{SkillImage2|}}}|[[File:{{{SkillImage2}}}|50px]]}}<br>{{{SkillDescription2}}}
| |
| | {{#if:{{{SkillImage3|}}}|[[File:{{{SkillImage3}}}|50px]]}}<br>{{{SkillDescription3}}}
| |
| | {{#if:{{{SkillImage4|}}}|[[File:{{{SkillImage4}}}|50px]]}}<br>{{{SkillDescription4}}}
| |
| | {{#if:{{{SkillImage5|}}}|[[File:{{{SkillImage5}}}|50px]]}}<br>{{{SkillDescription5}}}
| |
| | {{#if:{{{SkillImage6|}}}|[[File:{{{SkillImage6}}}|50px]]}}<br>{{{SkillDescription6}}}
| |
| |-
| |
| ! style="width:16%;" | {{{Skill7}}}
| |
| ! style="width:16%;" | {{{Skill8}}}
| |
| ! style="width:16%;" | {{{Skill9}}}
| |
| ! style="width:16%;" | {{{Skill10}}}
| |
| ! style="width:16%;" | {{{Skill11}}}
| |
| ! style="width:16%;" | {{{Skill12}}}
| |
| |-
| |
| | {{#if:{{{SkillImage7|}}}|[[File:{{{SkillImage7}}}|50px]]}}<br>{{{SkillDescription7}}}
| |
| | {{#if:{{{SkillImage8|}}}|[[File:{{{SkillImage8}}}|50px]]}}<br>{{{SkillDescription8}}}
| |
| | {{#if:{{{SkillImage9|}}}|[[File:{{{SkillImage9}}}|50px]]}}<br>{{{SkillDescription9}}}
| |
| | {{#if:{{{SkillImage10|}}}|[[File:{{{SkillImage10}}}|50px]]}}<br>{{{SkillDescription10}}}
| |
| | {{#if:{{{SkillImage11|}}}|[[File:{{{SkillImage11}}}|50px]]}}<br>{{{SkillDescription11}}}
| |
| | {{#if:{{{SkillImage12|}}}|[[File:{{{SkillImage12}}}|50px]]}}<br>{{{SkillDescription12}}}
| |
| |-
| |
| ! style="width:16%;" | {{{Skill13}}}
| |
| ! style="width:16%;" | {{{Skill14}}}
| |
| ! style="width:16%;" | {{{Skill15}}}
| |
| ! style="width:16%;" | {{{Skill16}}}
| |
| ! style="width:16%;" | {{{Skill17}}}
| |
| ! style="width:16%;" | {{{Skill18}}}
| |
| |-
| |
| | {{#if:{{{SkillImage13|}}}|[[File:{{{SkillImage13}}}|50px]]}}<br>{{{SkillDescription13}}}
| |
| | {{#if:{{{SkillImage14|}}}|[[File:{{{SkillImage14}}}|50px]]}}<br>{{{SkillDescription14}}}
| |
| | {{#if:{{{SkillImage15|}}}|[[File:{{{SkillImage15}}}|50px]]}}<br>{{{SkillDescription15}}}
| |
| | {{#if:{{{SkillImage16|}}}|[[File:{{{SkillImage16}}}|50px]]}}<br>{{{SkillDescription16}}}
| |
| | {{#if:{{{SkillImage17|}}}|[[File:{{{SkillImage17}}}|50px]]}}<br>{{{SkillDescription17}}}
| |
| | {{#if:{{{SkillImage18|}}}|[[File:{{{SkillImage18}}}|50px]]}}<br>{{{SkillDescription18}}}
| |
| |-
| |
| ! style="width:16%;" | {{{Skill19}}}
| |
| ! style="width:16%;" | {{{Skill20}}}
| |
| ! style="width:16%;" | {{{Skill21}}}
| |
| ! style="width:16%;" | {{{Skill22}}}
| |
| ! style="width:16%;" | {{{Skill23}}}
| |
| ! style="width:16%;" | {{{Skill24}}}
| |
| |-
| |
| | {{#if:{{{SkillImage19|}}}|[[File:{{{SkillImage19}}}|50px]]}}<br>{{{SkillDescription19}}}
| |
| | {{#if:{{{SkillImage20|}}}|[[File:{{{SkillImage20}}}|50px]]}}<br>{{{SkillDescription20}}}
| |
| | {{#if:{{{SkillImage21|}}}|[[File:{{{SkillImage21}}}|50px]]}}<br>{{{SkillDescription21}}}
| |
| | {{#if:{{{SkillImage22|}}}|[[File:{{{SkillImage22}}}|50px]]}}<br>{{{SkillDescription22}}}
| |
| | {{#if:{{{SkillImage23|}}}|[[File:{{{SkillImage23}}}|50px]]}}<br>{{{SkillDescription23}}}
| |
| | {{#if:{{{SkillImage24|}}}|[[File:{{{SkillImage24}}}|50px]]}}<br>{{{SkillDescription24}}}
| |
| |}
| |
| |}
| |
|
| |
|
| |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Advanced Classes'''
| |
| |-
| |
| |
| |
|
| |
| <div style="display:flex; justify-content:space-between; gap:20px; padding:12px; font-size:100%;">
| |
|
| |
| {| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
| |
| |-
| |
| ! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''{{{AdvancedClass1}}}'''<br />
| |
| [[File:{{{AdvancedClassImage1}}}|100px]]
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| |
| | style="background:#ffffff;" | {{{AdvancedClassRole1}}}
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Description
| |
| | style="background:#ffffff;" | {{{AdvancedClassDescription1}}}
| |
| |}
| |
|
| |
|
| |
|
| |
| {| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
| |
| |-
| |
| ! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''{{{AdvancedClass2}}}'''<br />
| |
| [[File:{{{AdvancedClassImage2}}}|100px]]
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| |
| | style="background:#ffffff;" | {{{AdvancedClassRole2}}}
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Description
| |
| | style="background:#ffffff;" | {{{AdvancedClassDescription2}}}
| |
| |}
| |
|
| |
|
| |
| </div> | | </div> |
| |}
| |
|
| |
|
| |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Advice & Guides'''
| |
| |-
| |
| | style="padding:12px; line-height:1.6;" |
| |
|
| |
| |}
| |
| |}
| |
|
| |
| ===Example===
| |
|
| |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px 0;"
| |
| |-
| |
| | style="padding:20px; background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; border-top-left-radius:14px; border-top-right-radius:14px; text-align:center; font-size:200%;" |
| |
| [[File:SpiritValeLogo.png|100px]]<br />
| |
| '''Class Template'''
| |
| |-
| |
| | style="padding:15px; line-height:1.6; font-size:100%;" |
| |
|
| |
| <div style="display:flex; gap:20px; align-items:flex-start; margin-top:20px; font-size:100%;">
| |
|
| |
|
| <div style="flex:2; line-height:1.6;"> | | === 3) Notes (Small Hover) — Two Paragraphs === |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
| | <div class="sv-tip"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| | <span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Details" aria-controls="sv-tb-notes-3" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span> |
| | <div class="sv-tip-pop sv-hidden" id="sv-tb-notes-3" role="dialog" aria-label="Details"> |
| | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Details</div></div> |
| | <div class="sv-tip-pop-body"> |
| | First paragraph for spacing checks. |
| | Second paragraph for spacing checks (should not add huge margins). |
| </div> | | </div> |
|
| |
| <div style="flex:1; align-self:flex-start;">
| |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Class Information'''
| |
| |-
| |
| | style="padding:12px; text-align:left; line-height:1.7; font-size:100%;" |
| |
| {| class="infobox" style="width:100%; font-size:100%; border:1px solid #ccc; background:#ffffff; border-radius:10px; padding:6px;"
| |
| |-
| |
| | style="padding:6px; font-weight:bold;" | Role
| |
| | style="padding:6px;" | [Role Placeholder]
| |
| |-
| |
| | style="padding:6px; font-weight:bold;" | Primary Stats
| |
| | style="padding:6px;" | [Stat Placeholder]
| |
| |-
| |
| | style="padding:6px; font-weight:bold;" | Weapon Type(s)
| |
| | style="padding:6px;" | [Weapon Placeholder]
| |
| |}
| |
| |}
| |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| {| style="width:100%; border:2px solid #5a4e7c; background:#eef0f6; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2); padding:0; margin-top:20px;"
| | === 4) Definition (Small Hover) — No Link, 2 Lines === |
| |-
| | <span class="sv-def" tabindex="0" data-sv-def-tip="Hover-only definition.\nSecond line test for newline rendering.">Ground Cast (no link)</span> |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Skills'''
| |
| |-
| |
| | style="padding:12px; text-align:center; font-size:100%;" |
| |
|
| |
|
| {| class="wikitable" style="width:100%; text-align:center; border:1px solid #ccc; border-collapse:collapse;"
| | === 5) Definition (Small Hover) — No Link, Long Wrap === |
| |-
| | <span class="sv-def" tabindex="0" data-sv-def-tip="This is a longer definition tooltip meant to wrap quickly to validate narrow width behavior and vertical growth.">Piercing (no link)</span> |
| ! style="width:16%;" | Skill 1
| |
| ! style="width:16%;" | Skill 2
| |
| ! style="width:16%;" | Skill 3
| |
| ! style="width:16%;" | Skill 4
| |
| ! style="width:16%;" | Skill 5
| |
| ! style="width:16%;" | Skill 6
| |
| |-
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| |-
| |
| ! style="width:16%;" | Skill 7
| |
| ! style="width:16%;" | Skill 8
| |
| ! style="width:16%;" | Skill 9
| |
| ! style="width:16%;" | Skill 10
| |
| ! style="width:16%;" | Skill 11
| |
| ! style="width:16%;" | Skill 12
| |
| |-
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| |-
| |
| ! style="width:16%;" | Skill 13
| |
| ! style="width:16%;" | Skill 14
| |
| ! style="width:16%;" | Skill 15
| |
| ! style="width:16%;" | Skill 16
| |
| ! style="width:16%;" | Skill 17
| |
| ! style="width:16%;" | Skill 18
| |
| |-
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| |-
| |
| ! style="width:16%;" | Skill 19
| |
| ! style="width:16%;" | Skill 20
| |
| ! style="width:16%;" | Skill 21
| |
| ! style="width:16%;" | Skill 22
| |
| ! style="width:16%;" | Skill 23
| |
| ! style="width:16%;" | Skill 24
| |
| |-
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| | [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| |
| |}
| |
| |}
| |
| | |
| | |
| | |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Advanced Classes'''
| |
| |-
| |
| |
| |
| | |
| <div style="display:flex; justify-content:space-between; gap:20px; padding:12px; font-size:100%;">
| |
| | |
| | |
| {| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
| |
| |-
| |
| ! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''[Advanced Class 1]'''<br />
| |
| [[File:SpiritValeLogo.png|100px]]
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| |
| | style="background:#ffffff;" | [Short descriptor]
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Description
| |
| | style="background:#ffffff;" | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| |
| |}
| |
| | |
| | |
| | |
| {| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
| |
| |-
| |
| ! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''[Advanced Class 2]'''<br />
| |
| [[File:SpiritValeLogo.png|100px]]
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| |
| | style="background:#ffffff;" | [Short descriptor]
| |
| |-
| |
| | style="background:#e6e3f0; font-weight:bold;" | Description
| |
| | style="background:#ffffff;" | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| |
| |}
| |
|
| |
|
| | === 6) Users (Large Click) — Grouped List === |
| | <div class="sv-disclose"> |
| | <span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Users" aria-controls="sv-tb-users-1" aria-expanded="false"><span class="sv-disclose-label">Users</span><span class="sv-disclose-count">(6)</span></span> |
| | <div class="sv-disclose-pop sv-hidden" id="sv-tb-users-1" role="dialog" aria-label="Users"> |
| | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Users</div></div> |
| | <ul class="sv-disclose-list"> |
| | <li class="sv-disclose-group-title">Classes</li> |
| | <li>Paladin</li> |
| | <li>Cleric</li> |
| | <li>Templar</li> |
| | <li class="sv-disclose-group-title">Summons</li> |
| | <li>Turtle Champion</li> |
| | <li>Celestial Squire</li> |
| | <li>Holy Sentinel</li> |
| | </ul> |
| | </div> |
| | </div> |
|
| |
|
| | === 7) Requirements (Large Click) — Simple List === |
| | <div class="sv-disclose"> |
| | <span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Requirements" aria-controls="sv-tb-req-1" aria-expanded="false"><span class="sv-disclose-label">Requirements</span><span class="sv-disclose-count">(4)</span></span> |
| | <div class="sv-disclose-pop sv-hidden" id="sv-tb-req-1" role="dialog" aria-label="Requirements"> |
| | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Requirements</div></div> |
| | <ul class="sv-disclose-list"> |
| | <li>Level 25</li> |
| | <li>Weapon: Sword</li> |
| | <li>Cost: 12 SP</li> |
| | <li>Cooldown: 8s</li> |
| | </ul> |
| | </div> |
| </div> | | </div> |
| |}
| |
|
| |
|
| |
| {| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| |
| '''Advice & Guides'''
| |
| |-
| |
| | style="padding:12px; line-height:1.6;" |
| |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| |
| |}
| |
| |}
| |
|
| |
| ==Template Box==
| |
|
| |
| Had this super fun template idea, but I couldn't get it to work on mobile. Going to shelve it for now as it might be useful for later.
| |
|
| |
| <!-- Compact Infobox Template with Shrinking Rows, Equal Height Columns, Word Wrapping, and Mobile-Safe Display -->
| |
|
| |
| <div style="display:inline-block; width:100%; max-width:260px; margin:0 0 1em 1em; float:{{{float|right}}}; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2); font-size:95%; overflow:hidden; box-sizing:border-box;">
| |
|
| |
|
| <!-- Header Section --> | | === 8) Scroll Test (Large Click) — Long List === |
| <div style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:4px 6px; font-size:110%; border-top-left-radius:10px; border-top-right-radius:10px;"> | | <div class="sv-disclose"> |
| '''{{{BoxName}}}'''
| | <span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Scroll Test" aria-controls="sv-tb-scroll-1" aria-expanded="false"><span class="sv-disclose-label">Scroll Test</span><span class="sv-disclose-count">(14)</span></span> |
| | <div class="sv-disclose-pop sv-hidden" id="sv-tb-scroll-1" role="dialog" aria-label="Scroll Test"> |
| | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Scroll Test</div></div> |
| | <ul class="sv-disclose-list"> |
| | <li class="sv-disclose-group-title">Entries</li> |
| | <li>Entry 1</li> |
| | <li>Entry 2</li> |
| | <li>Entry 3</li> |
| | <li>Entry 4</li> |
| | <li>Entry 5</li> |
| | <li>Entry 6</li> |
| | <li>Entry 7</li> |
| | <li>Entry 8</li> |
| | <li>Entry 9</li> |
| | <li>Entry 10</li> |
| | <li>Entry 11</li> |
| | <li>Entry 12</li> |
| | <li>Entry 13</li> |
| | <li>Entry 14</li> |
| | </ul> |
| </div> | | </div> |
|
| |
| <!-- Content Section -->
| |
| <div style="padding:0; display:flex; flex-direction:column;">
| |
|
| |
| <!-- Row 1 -->
| |
| {{#if: {{{A1|}}} |
| |
| <div style="display:flex; align-items:center; flex-wrap:nowrap;">
| |
| <div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A1}}}</div>
| |
| <div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B1}}}</div>
| |
| </div> | | </div> |
| }}
| |
|
| |
|
| <!-- Row 2 -->
| | === 9) Definition (Large Click) — With Link (Header Link) === |
| {{#if: {{{A2|}}} |
| | <span class="sv-def" tabindex="0" data-sv-def-tip="This definition is click-open so the user can interact inside the popup.\nHeader title should be a real link (no action button)." data-sv-def-link="Casting">Casting (with link)</span> |
| <div style="display:flex; align-items:center; flex-wrap:nowrap;"> | |
| <div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A2}}}</div>
| |
| <div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B2}}}</div>
| |
| </div>
| |
| }}
| |
|
| |
|
| <!-- Row 3 -->
| | === 10) Definition (Large Click) — With Link, Long Wrap === |
| {{#if: {{{A3|}}} |
| | <span class="sv-def" tabindex="0" data-sv-def-tip="A longer linked definition to confirm that click-open popups remain compact in width but comfortably readable with vertical growth and scrolling when needed." data-sv-def-link="Judgement Blade">Judgement Blade (with link)</span> |
| <div style="display:flex; align-items:center; flex-wrap:nowrap;"> | |
| <div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A3}}}</div>
| |
| <div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B3}}}</div>
| |
| </div>
| |
| }}
| |
|
| |
|
| <!-- Row 4 --> | | === 11) Notes (Small Hover) — Inline Wiki Link in Body === |
| {{#if: {{{A4|}}} |
| | <div class="sv-tip"> |
| <div style="display:flex; align-items:center; flex-wrap:nowrap;"> | | <span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Link Test" aria-controls="sv-tb-link-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span> |
| <div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A4}}}</div> | | <div class="sv-tip-pop sv-hidden" id="sv-tb-link-1" role="dialog" aria-label="Link Test"> |
| <div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B4}}}</div> | | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Link Test</div></div> |
| | <div class="sv-tip-pop-body"> |
| | This popup contains a wiki link to validate Popups extension behavior: [[Casting]]. |
| </div> | | </div> |
| }}
| |
|
| |
| <!-- Row 5 -->
| |
| {{#if: {{{A5|}}} |
| |
| <div style="display:flex; align-items:center; flex-wrap:nowrap;">
| |
| <div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A5}}}</div>
| |
| <div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B5}}}</div>
| |
| </div> | | </div> |
| }}
| |
|
| |
| <!-- Row 6 -->
| |
| {{#if: {{{A6|}}} |
| |
| <div style="display:flex; align-items:center; flex-wrap:nowrap;">
| |
| <div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A6}}}</div>
| |
| <div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B6}}}</div>
| |
| </div> | | </div> |
| }}
| |
|
| |
|
| <!-- Row 7 --> | | === 12) Mixed Content (Large Click) — Text + List === |
| {{#if: {{{A7|}}} |
| | <div class="sv-disclose"> |
| <div style="display:flex; align-items:center; flex-wrap:nowrap;"> | | <span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Mixed" aria-controls="sv-tb-mixed-1" aria-expanded="false"><span class="sv-disclose-label">Mixed</span><span class="sv-disclose-count">(5)</span></span> |
| <div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal;">{{{A7}}}</div> | | <div class="sv-disclose-pop sv-hidden" id="sv-tb-mixed-1" role="dialog" aria-label="Mixed"> |
| <div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal;">{{{B7}}}</div> | | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Mixed</div></div> |
| | <div class="sv-disclose-pop-body"> |
| | Short intro line for mixed content test. |
| | <ul> |
| | <li>Bullet A</li> |
| | <li>Bullet B</li> |
| | <li>Bullet C</li> |
| | </ul> |
| </div> | | </div> |
| }}
| |
|
| |
| </div> | | </div> |
| </div> | | </div> |
