MediaWiki:Instance-Page.css: Difference between revisions

From Elwiki
No edit summary
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>__NOTOC__{{#css:MediaWiki:Instance-Page.css}}{{#if:{{{DunButton|}}}|
.instance-page .segment {
[[File:{{{DunButton|}}}|100px|left]]
    margin: 0.5rem 0;
|}}{{#if:{{{SmallPic|}}}|
}
[[File:{{{SmallPic|}}}|right]]
.instance-page .segment-header {
|}}
    font-size: 1em !important;
=<span class="fancy-font">{{{DunName|}}}</span>=
    border: 1px solid #c1c1c1 !important;
{{#if:{{{Quotation|}}}|
    color: white;
<center>{{quotation|{{{Quotation|}}}}}</center>
}
|}}
.instance-page .segment-contents {
<div class="instance-page">
    border: 1px solid #c1c1c1;
<div class="section-side-column">
    border-top: none;
<div class="section-side-column-image instance-image">
}
{{#if:{{{LvFitHell|}}}
.instance-page .segment-contents .mw-collapsible-content,
|{{Tabber
.instance-page .segment-header {
|$divclass=fancy
    box-sizing: border-box;
|Normal Mode=[[File:{{{BigPic|}}}{{!}}600px]]
}
|Hell Mode=[[File:{{{BigPic2|}}}{{!}}600px]]}}
.instance-page .segment-contents .instance-image img {
|
    max-width: 100%;
{{#if:{{{BigPic2|}}}
    height: auto;
|
    margin-bottom: 1rem;
{{Tabber
}
|$divclass=fancy
.instance-page .instance-image img {
|Bethma=[[File:{{{BigPic|}}}{{!}}600px]]
    border-radius: 4px;
|Altera=[[File:{{{BigPic2|}}}{{!}}600px]]
}
}}
.section-side-column-image.instance-image p {
|
    margin: 0;
[[File:{{{BigPic|}}}|600px]]
}
}}
.instance-page .section-side-column {
}}
    display: grid;
</div>
    grid-template-columns: repeat(2, 1fr);
{{#if:{{{Description|}}}|
    gap: 1rem;
{{Segment
    place-content: center;
| SectionSty=text-align: center; {{#if:{{{BigPic2|}}}|margin-top: 36px;}}
    place-items: self-start;
| Color0={{{Color|}}}
}
| Title0=Description
.instance-page .section-side-column-image {
| Content0={{{Description|}}}
    grid-row: span 3;
}}|}}
    margin: 0;
{{Segment
    align-self: center;
| Color0={{{Color|}}}
}
| SectionCls=fancy-text
.instance-page .section-side-column .segment:first-of-type {
| Title0=Recommended Level
    display: flex;
| Content0={{{LvNeed|}}}
    flex-direction: column;
}}{{#vardefine: CP|#ee6f1c}}
    place-content: end;
{{Segment
}
| Color0={{{Color|}}}
.instance-page .section-side-column .segment:first-of-type,
| SectionCls=fancy-text
.instance-page .section-side-column .segment:last-of-type {
| Title0={{#if:{{{LvFit|}}}|Required Combat Power|Appropriate Item Level}}
    display: flex;
| Content0=
    flex-direction: column;
{{#if:{{{LvFitHell|}}}
    height: 100%;
|
}
{{Tabber
.instance-page .section-side-column .segment:first-of-type .segment-contents,
|$divclass=tabber-vertical fancy
.instance-page .section-side-column .segment:last-of-type .segment-contents {
|Normal Mode={{color|{{#var:CP}}|{{{LvFit|}}} }}
    display: flex;
|Hell Mode={{color|{{#var:CP}}|{{{LvFitHell|}}} }}
    place-content: center;
}}
    place-items: center;
|
    height: 100%;
{{#if:{{{LvFitStory|}}}
}
|
.instance-page .fancy-text .segment-contents > .mw-collapsible-content {
{{Tabber
    font-family: "Heading";
|$divclass=tabber-vertical fancy
    font-size: 2.5rem;
|Story Mode={{color|{{#var:CP}}|{{{LvFitStory|}}} }}
    text-align: center;
|Normal Mode={{color|{{#var:CP}}|{{{LvFit|}}} }}
}
}}
.instance-page .fancy-text .segment-contents > .mw-collapsible-content .custom-text {
|
    font-family: "Heading";
{{color|{{#var:CP}}|{{{LvFit|}}}}}
}
}}
.instance-h1 {
}}
    font-size: 1.05em;
}}
    letter-spacing: -1px;
</div>{{#if:{{{XEntryReq|}}}|
}
{{Segment
.instance-page h4:first-of-type {
| Color0={{{Color|}}}
    margin-top: 0;
| Title0=Entry Requirements
}
| Content0={{{XEntryReq|}}}
.instance-page .section-side-column .segment {
}}|}}{{#if:{{{DunMap|}}}|
    margin: 0;
{{Segment
    width: 100%;
| SectionSty=text-align: center;
}
| Title0=Dungeon Layout
.instance-page .tabdiv > ul > li, .instance-page .tabdiv > ul > li a {
| Color0={{{Color|}}}
    font-size: initial;
| Content0={{{DunMap|}}}
    letter-spacing: initial;
}}|}}{{#if:{{{Detail|}}}|
}
{{Segment
.dungeon-button {
| Title0=Details
    float: left;
| Color0={{{Color|}}}
    margin: 1rem 1rem 0 0;
| Content0={{{Detail|}}}
}
}}|}}{{#if:{{{Ally|}}}|
#tabs-Dialog {
{{Segment
    gap: 1rem;
| Color0={{{Color|}}}
}
| Title0=Ally{{#ifeq:{{{Ally_KROnly}}}|true| (KR Only)|}}
.dungeon-page-fields {
| Content0=<dfn>{{</dfn>
    display: flex;
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
    flex-direction: column;
  |-
    place-content: center;
  ! width="60px" | Ally Image
    place-items: center;
  ! {{#ifeq:{{{AllyATK}}}|true|width="350px"|}} | Ally Description
}
  {{#ifeq:{{{AllyATK}}}|true|! Ally Moves|}}
.instance-page .segment > .mw-collapsible-toggle {
  |-
    top: 2px;
  {{{Ally|}}}
}
  |}
 
<dfn>}}</dfn>
@media screen and (max-width: 768px) {
}}|}}{{#if:{{{Mob|}}}|
    .instance-page .section-side-column {
{{Segment
        grid-template-columns: auto;
| Color0={{{Color|}}}
    }
| Title0=Mobs
    .instance-page img {
| Content0=<dfn>{{</dfn>
        max-width: 100%;
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
        height: auto;
  |-
    }
  ! width="60px" | Monster Image
}
  ! width="350px" | Monster Description
  ! Monster Moves
  |-
  {{{Mob|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{BethmaMob|}}}|
{{Segment
| Color0={{ColorSel|Village|3}}
| Title0=Bethma Mobs
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Monster Description
  ! Monster Moves
  |-
  {{{BethmaMob|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{AlteraMob|}}}|
{{Segment
| Color0={{ColorSel|Village|4}}
| Title0=Altera Mobs
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Monster Description
  ! Monster Moves
  |-
  {{{AlteraMob|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Start|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Hall of El - Beginning
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Shadow Description
  ! Shadow Moves
  |-
  {{{Start|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Trial|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Hall of El - Trials
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Shadow Description
  ! Shadow Moves
  |-
  {{{Trial|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Choice|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Hall of El - Choice
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Shadow Description
  ! Shadow Moves
  |-
  {{{Choice|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{General|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=General
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | General Description
  ! General Moves
  |-
  {{{General|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{MiniBoss|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Mini Boss{{#ifeq:{{{MiniBoss_KROnly}}}|true| (KR Only)|}}
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Boss Description
  ! Boss Moves
  |-
  {{{MiniBoss|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Shadows|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Trial of Shadows
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Shadow Description
  ! Shadow Moves
  |-
  {{{Shadows|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Potions|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Potions
| Content0={{{Potions|}}}
}}|}}{{#if:{{{Buffs|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Buffs
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Buffs Image
  ! Buffs Description
  |-
  {{{Buffs|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Obstacle|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Obstacles{{#ifeq:{{{Obstacle_KROnly}}}|true| (KR Only)|}}
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Obstacles Image
  ! Obstacles Description
  |-
  {{{Obstacle|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Boss|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Boss
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Boss Description
  ! Boss Moves
  |-
  {{{Boss|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{BethmaBoss|}}}|
{{Segment
| Color0={{ColorSel|Village|3}}
| Title0=Bethma Boss
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Boss Description
  ! Boss Moves
  |-
  {{{BethmaBoss|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{AlteraBoss|}}}|
{{Segment
| Color0={{ColorSel|Village|4}}
| Title0=Altera Boss
| Content0=<dfn>{{</dfn>
  {| class="wikitable" border="1" cellpadding="5" style="border-spacing: 0; border: 1px #000 solid; border-collapse: collapse; width: 100%; vertical-align: top;"
  |-
  ! width="60px" | Monster Image
  ! width="350px" | Boss Description
  ! Boss Moves
  |-
  {{{AlteraBoss|}}}
  |}
<dfn>}}</dfn>
}}|}}{{#if:{{{Helpful|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Helpful Skills
| Content0={{{Helpful|}}}
}}|}}{{#if:{{{Dialogue|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Dialogue
| Content0={{{Dialogue|}}}
}}|}}{{#if:{{{XSet|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Secret Set
| Content0={{{XSet|}}}
}}|}}{{#if:{{{YSet|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Legendary Weapon
| Content0={{{YSet|}}}
}}|}}{{#if:{{{Reward|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Reward
| Content0={{{Reward|}}}
}}|}}
{{Segment
| Color={{{Color|}}}
| SectionCls=split uneven-split
| hStyle1={{#if:{{{BDrop|}}}{{{SBDrop|}}}||border-left: none;}}
| Title0={{#if:{{{BDrop|}}}|[[Boss Drops]]|}}{{#if:{{{SBDrop|}}}|Boss Drops|}}
| Title1=[[Soundtrack|BGM]]
| Content0=<dfn>{{</dfn>
{{{BDrop|}}}{{{SBDrop|}}}
<dfn>}}</dfn>
| Style1=text-align: center;
| Content1=<dfn>{{</dfn>
{{#if:{{{SBGM|}}}|{{{SBGM|}}}|}}
{{#if:{{{DBGM|}}}|
=== Dungeon ===
{{{DBGM|}}}|}}
{{#if:{{{DLBGM|}}}|
=== Luto Mode ===
{{{DLBGM|}}}|}}
{{#if:{{{BBGM|}}}|
=== Boss ===
{{{BBGM|}}}|}}
{{#if:{{{BLBGM|}}}|
=== Luto Boss ===
{{{BLBGM|}}}|}}
<dfn>}}</dfn>
}}{{#if:{{{Gallery|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Gallery
| Content0={{{Gallery|}}}
}}|}}{{#if:{{{Video|}}}|
{{Segment
| SectionSty=text-align: center;
| Color0={{{Color|}}}
| Title0=Videos
| Content0=<dfn>{{</dfn>
{{{Video|}}}
<dfn>}}</dfn>
}}|}}{{#if:{{{Trivia|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Trivia
| Content0={{{Trivia|}}}
}}|}}{{#if:{{{Updates|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Updates
| Content0={{{Updates|}}}
}}|}}{{#if:{{{AltLang|}}}|
{{Segment
| Color0={{{Color|}}}
| Title0=Alternative Names
| Content0=<dfn>{{</dfn>
{{{AltLang|}}}
<dfn>}}</dfn>
}}|}}
</div>
<br>
{{Dungeons|name=a|Orient={{{Orient|}}}}}{{Hunting Fields|name=b|Orient={{{Orient|}}}}}
</includeonly>

Latest revision as of 14:54, 14 September 2023

.instance-page .segment {
    margin: 0.5rem 0;
}
.instance-page .segment-header {
    font-size: 1em !important;
    border: 1px solid #c1c1c1 !important;
    color: white;
}
.instance-page .segment-contents {
    border: 1px solid #c1c1c1;
    border-top: none;
}
.instance-page .segment-contents .mw-collapsible-content,
.instance-page .segment-header {
    box-sizing: border-box;
}
.instance-page .segment-contents .instance-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
}
.instance-page .instance-image img {
    border-radius: 4px;
}
.section-side-column-image.instance-image p {
    margin: 0;
}
.instance-page .section-side-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    place-content: center;
    place-items: self-start;
}
.instance-page .section-side-column-image {
    grid-row: span 3;
    margin: 0;
    align-self: center;
}
.instance-page .section-side-column .segment:first-of-type {
    display: flex;
    flex-direction: column;
    place-content: end;
}
.instance-page .section-side-column .segment:first-of-type,
.instance-page .section-side-column .segment:last-of-type {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.instance-page .section-side-column .segment:first-of-type .segment-contents,
.instance-page .section-side-column .segment:last-of-type .segment-contents {
    display: flex;
    place-content: center;
    place-items: center;
    height: 100%;
}
.instance-page .fancy-text .segment-contents > .mw-collapsible-content {
    font-family: "Heading";
    font-size: 2.5rem;
    text-align: center;
}
.instance-page .fancy-text .segment-contents > .mw-collapsible-content .custom-text {
    font-family: "Heading";
}
.instance-h1 {
    font-size: 1.05em;
    letter-spacing: -1px;
}
.instance-page h4:first-of-type {
    margin-top: 0;
}
.instance-page .section-side-column .segment {
    margin: 0;
    width: 100%;
}
.instance-page .tabdiv > ul > li, .instance-page .tabdiv > ul > li a {
    font-size: initial;
    letter-spacing: initial;
}
.dungeon-button {
    float: left;
    margin: 1rem 1rem 0 0;
}
#tabs-Dialog {
    gap: 1rem;
}
.dungeon-page-fields {
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
}
.instance-page .segment > .mw-collapsible-toggle {
    top: 2px;
}

@media screen and (max-width: 768px) {
    .instance-page .section-side-column {
        grid-template-columns: auto;
    }
    .instance-page img {
        max-width: 100%;
        height: auto;
    }
}
Retrieved from "https://elwiki.net:443/wiki/index.php?title=MediaWiki:Instance-Page.css&oldid=899471"