|
Tags: Mobile edit Mobile web edit |
| (23 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"> |
| | <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"> |
| | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Info</div></div> |
| | <div class="sv-tip-pop-body"> |
| | * Bullet line one (wrap test for compact width). |
| | * Bullet line two with a longer phrase to force vertical growth. |
| | </div> |
| | </div> |
| | </div> |
|
| |
|
| {| 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);"
| | === 2) Notes (Small Hover) — Single Sentence === |
| |-
| | <div class="sv-tip"> |
| ! 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;" |
| | <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> |
| '''{{{name|Example Infobox}}}'''<br />
| | <div class="sv-tip-pop sv-hidden" id="sv-tb-notes-2" role="dialog" aria-label="Notes"> |
| {{#if:{{{image|}}}|[[File:{{{image}}}|100px]]}}
| | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Notes</div></div> |
| | <div class="sv-tip-pop-body"> |
| | A short single-line note that should wrap early and grow vertically. |
| | </div> |
| | </div> |
| | </div> |
|
| |
|
| |-
| | === 3) Notes (Small Hover) — Two Paragraphs === |
| | style="background:#e6e3f0; font-weight:bold; width:35%;" | {{{row1_label|}}}
| | <div class="sv-tip"> |
| | style="background:#ffffff;" | {{{row1_value|}}}
| | <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"> |
| | style="background:#e6e3f0; font-weight:bold;" | {{{row2_label|}}}
| | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Details</div></div> |
| | style="background:#ffffff;" | {{{row2_value|}}}
| | <div class="sv-tip-pop-body"> |
| |-
| | First paragraph for spacing checks. |
| | style="background:#e6e3f0; font-weight:bold;" | {{{row3_label|}}}
| | Second paragraph for spacing checks (should not add huge margins). |
| | style="background:#ffffff;" | {{{row3_value|}}}
| | </div> |
| |}
| | </div> |
| | </div> |
|
| |
|
| === Example === | | === 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> |
|
| |
|
| {| 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);"
| | === 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> |
| ! 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
| |
| |}
| |
|
| |
|
| == Main Page Box == | | === 6) Users (Large Click) — Grouped List === |
| | | <div class="sv-disclose"> |
| Used on the main page for holding content.
| | <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"> |
| {| class="infobox" style="width:250px; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px;"
| | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Users</div></div> |
| |-
| | <ul class="sv-disclose-list"> |
| ! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| | <li class="sv-disclose-group-title">Classes</li> |
| '''{{{title|Main Page Box}}}'''
| | <li>Paladin</li> |
| |-
| | <li>Cleric</li> |
| | style="padding:8px; text-align:center; line-height:1.4;" |
| | <li>Templar</li> |
| {{{content|''No content provided.''}}}
| | <li class="sv-disclose-group-title">Summons</li> |
| |}
| | <li>Turtle Champion</li> |
| | | <li>Celestial Squire</li> |
| === Example ===
| | <li>Holy Sentinel</li> |
| | | </ul> |
| {| class="infobox" style="width:250px; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px;"
| | </div> |
| |-
| |
| ! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| |
| '''Game Systems'''
| |
| |-
| |
| | style="padding:8px; text-align:center; line-height:1.4;" |
| |
| [[File:Icon1.png|20px]] [[Refinement]]<br />
| |
| [[File:Icon2.png|20px]] [[Card]]<br />
| |
| [[File:Icon3.png|20px]] [[Storage]]<br />
| |
| [[File:Icon4.png|20px]] [[NPC]]
| |
| |}
| |
| | |
| <br> | |
| | |
| <div style="display:flex; justify-content:space-between; flex-wrap:wrap;"> | |
| | |
| <!-- Box 1 -->
| |
| <div style="flex:0 0 23%; margin:1%;"> | |
| {| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| |
| '''Main Box 1'''
| |
| |-
| |
| | style="padding:8px; text-align:center; line-height:1.4;" |
| |
| [[File:Icon1.png|20px]] [[Page 1]]<br />
| |
| [[File:Icon2.png|20px]] [[Page 2]]
| |
| |}
| |
| </div> | | </div> |
|
| |
|
| <!-- Box 2 --> | | === 7) Requirements (Large Click) — Simple List === |
| <div style="flex:0 0 23%; margin:1%;">
| | <div class="sv-disclose"> |
| {| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
| | <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"> |
| ! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Requirements</div></div> |
| '''Main Box 2'''
| | <ul class="sv-disclose-list"> |
| |-
| | <li>Level 25</li> |
| | style="padding:8px; text-align:center; line-height:1.4;" |
| | <li>Weapon: Sword</li> |
| [[File:Icon3.png|20px]] [[Page 3]]<br />
| | <li>Cost: 12 SP</li> |
| [[File:Icon4.png|20px]] [[Page 4]]
| | <li>Cooldown: 8s</li> |
| |}
| | </ul> |
| </div> | | </div> |
|
| |
| <!-- Box 3 -->
| |
| <div style="flex:0 0 23%; margin:1%;">
| |
| {| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
| |
| |-
| |
| ! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| |
| '''Main Box 3'''
| |
| |-
| |
| | style="padding:8px; text-align:center; line-height:1.4;" |
| |
| [[File:Icon5.png|20px]] [[Page 5]]<br />
| |
| [[File:Icon6.png|20px]] [[Page 6]]
| |
| |}
| |
| </div> | | </div> |
|
| |
|
| <!-- Box 4 --> | | === 8) Scroll Test (Large Click) — Long List === |
| <div style="flex:0 0 23%; margin:1%;">
| | <div class="sv-disclose"> |
| {| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
| | <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"> |
| ! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Scroll Test</div></div> |
| '''Main Box 4'''
| | <ul class="sv-disclose-list"> |
| |-
| | <li class="sv-disclose-group-title">Entries</li> |
| | style="padding:8px; text-align:center; line-height:1.4;" |
| | <li>Entry 1</li> |
| [[File:Icon7.png|20px]] [[Page 7]]<br />
| | <li>Entry 2</li> |
| [[File:Icon8.png|20px]] [[Page 8]]
| | <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> |
|
| |
| </div> | | </div> |
|
| |
|
| ==Fun Class Template Idea== | | === 9) Definition (Large Click) — With Link (Header Link) === |
| | <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> |
|
| |
|
| Had fun creating this for testing, but will instead use a simpler template.
| | === 10) Definition (Large Click) — With Link, Long Wrap === |
| | <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> |
|
| |
|
| {| 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;"
| | === 11) Notes (Small Hover) — Inline Wiki Link in Body === |
| |-
| | <div class="sv-tip"> |
| | 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%;" |
| | <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> |
| [[File:SpiritValeLogo.png|100px]]<br />
| | <div class="sv-tip-pop sv-hidden" id="sv-tb-link-1" role="dialog" aria-label="Link Test"> |
| '''{{{Class}}}'''
| | <div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Link Test</div></div> |
| |-
| | <div class="sv-tip-pop-body"> |
| | style="padding:15px; line-height:1.6; font-size:100%;" |
| | This popup contains a wiki link to validate Popups extension behavior: [[Casting]]. |
| | | </div> |
| <div style="display:flex; gap:20px; align-items:flex-start; margin-top:20px; font-size:100%;"> | | </div> |
| | |
| <div style="flex:2; line-height:1.6;"> | |
| {{{ClassDescription}}}
| |
| </div> | | </div> |
|
| |
|
| <div style="flex:1; align-self:flex-start;"> | | === 12) Mixed Content (Large Click) — Text + List === |
| {| 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-disclose"> |
| |-
| | <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> |
| ! 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-disclose-pop sv-hidden" id="sv-tb-mixed-1" role="dialog" aria-label="Mixed"> |
| '''Class Information'''
| | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Mixed</div></div> |
| |-
| | <div class="sv-disclose-pop-body"> |
| | style="padding:12px; text-align:left; line-height:1.7; font-size:100%;" |
| | Short intro line for mixed content test. |
| {| class="infobox" style="width:100%; font-size:100%; border:1px solid #ccc; background:#ffffff; border-radius:10px; padding:6px;"
| | <ul> |
| |-
| | <li>Bullet A</li> |
| | style="padding:6px; font-weight:bold;" | Role
| | <li>Bullet B</li> |
| | style="padding:6px;" | {{{Role}}}
| | <li>Bullet C</li> |
| |-
| | </ul> |
| | 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;" |
| |
|
| |
| |}
| |
| |}
| |