Difference between revisions of "User:Felix/Test"

From City of Hope MUSH
Jump to navigation Jump to search
imported>Felix
imported>Felix
 
(78 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<noinclude>This is my main test page for template development.</noinclude>{{#css:
+
<noinclude>This is my main testing page.</noinclude>&#32;
−
 
+
{{#css:
−
.lastrow td {
+
.slider {
−
border-bottom: 1px dotted #102f45;
+
    height: 450px;
 +
    margin: 2em auto;
 +
    position: relative;
 +
    text-indent: 0;
 +
    width: 400px;
 
}
 
}
−
.dot5 {
+
.slider > ul {
−
margin-left: 1em;
+
    border: 2px solid black;
 +
    box-sizing: border-box;
 +
    height: 400px;
 +
    margin: 0;
 +
    max-width: 400px;
 +
    padding: 1em;
 +
    position: absolute;
 +
    width: 400px;
 
}
 
}
−
.dot5 img {
+
.prev, .next {
−
vertical-align: unset;
+
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
 +
    border-radius: 25px;
 +
    font-size: 3em;
 +
    left: -51px;
 +
    padding: 10px;
 +
    position: absolute;
 +
    top: 180px;
 
}
 
}
−
.wrapper {
+
.next {
−
position: relative;
+
    left: auto;
−
cursor: help;
+
    right: -52px;
 
}
 
}
−
.wrapper .tooltip {
+
.prev a, .next a {
−
visibility: hidden;
+
    color: white;
−
white-space:nowrap;
+
    left: -2px;
−
background-color: #C3D2E7;
+
    position: relative;
−
color: #461a00;
+
    top: 1px;
−
border:2px #461a00 solid;
 
−
text-align: center;
 
−
border-radius: 6px;
 
−
padding: 5px 1em;
 
−
position: absolute;
 
−
z-index: 1;
 
−
top: -7px;
 
−
left: 115%;
 
 
}
 
}
−
.wrapper .tooltip.wrap {
+
.next a {
−
white-space:normal;
+
    left: 2px;
−
width:20em;
 
 
}
 
}
−
.wrapper .tooltip::after {
+
.prev a:hover, .next a:hover, .prev a:focus, .next a:focus, .prev a:active, .next a:active {
−
content: "";
+
    font-weight: bold;
−
position: absolute;
+
    text-decoration: none;
−
top: 50%;
 
−
right: 100%;
 
−
margin-top: -8px;
 
−
border-width: 8px;
 
−
border-style: solid;
 
−
border-color: transparent #461a00 transparent transparent;
 
 
}
 
}
−
.wrapper .tooltip.wrap::after {
+
#panels {
−
top: 1.25em;
+
    display: flex;
 +
    flex-flow: row wrap;
 +
    justify-content: center;
 +
    width: 100%;
 
}
 
}
−
.wrapper:hover .tooltip {
+
.tab {
−
visibility: visible;
+
    font-weight: bold;
 +
    margin-top: -4em;
 +
    order: 1;
 +
    padding-top: 4em;
 +
}
 +
.first.tab {
 +
    order: 0;
 +
}
 +
.tab a,
 +
:target ~ .first.tab a {
 +
    border-bottom: medium none;
 +
    display: inline-block;
 +
    margin: 0 0.5em 0.5em;
 +
    opacity: 0.5;
 +
    padding: 0 1em;
 +
}
 +
.first.tab a,
 +
.first.anchor:target ~ .first.tab a,
 +
.second.anchor:target ~ .second.tab a,
 +
.third.anchor:target ~ .third.tab a,
 +
.fourth.anchor:target ~ .fourth.tab a,
 +
.fifth.anchor:target ~ .fifth.tab a,
 +
.sixth.anchor:target ~ .sixth.tab a {
 +
    opacity: 1;
 +
}
 +
.panel {
 +
    display: none;
 +
    order: 2;
 +
    text-indent: 1.5em;
 +
    width: 100%;
 +
}
 +
#First-panel,
 +
.panel .slider .slide:first-of-type {
 +
    display: block;
 +
}
 +
:target ~ #First-panel,
 +
:target ~ .panel .slider .slide:first-of-type,
 +
.anchor,
 +
.slide {
 +
    display: none;
 +
}
 +
.first:target ~ #First-panel,
 +
.second:target ~ #Second-panel,
 +
.third:target ~ #Third-panel,
 +
.fourth:target ~ #Fourth-panel,
 +
.fifth:target ~ #Fifth-panel,
 +
.sixth:target ~ #Sixth-panel,
 +
.main:target ~ .panel .slider .slide:first-of-type,
 +
div[id$="-1"]:target ~ .panel .slider .slide:first-of-type,
 +
div[id$="-2"]:target ~ .panel .slider .slide:nth-of-type(2),
 +
div[id$="-3"]:target ~ .panel .slider .slide:nth-of-type(3),
 +
div[id$="-4"]:target ~ .panel .slider .slide:nth-of-type(4),
 +
div[id$="-5"]:target ~ .panel .slider .slide:nth-of-type(5) {
 +
    display: block;
 
}
 
}
 
}}
 
}}
−
{| align="center" cellspacing=0
+
<div id="panels">
−
|-
+
<div id="second-1" class="second anchor"></div>
−
| '''Dexterity:'''
+
<div id="second-2" class="second anchor"></div>
−
| class="wrapper" |{{chocdot|dots=4|size=10px}}<div class="tooltip">Specialty: Quick</div>
+
<div id="second-3" class="second anchor"></div>
−
|-
+
<div id="second-4" class="second anchor"></div>
−
| '''Stamina:'''
+
<div id="second-5" class="second anchor"></div>
−
| class="wrapper" | {{chocdot|dots=4|size=10px}}<div class="tooltip">Specialty: Enduring</div>
+
<div id="Puppet Maker" class="main second anchor" tabindex="0"></div>
−
|-
+
<div id="Second-tab" class="second tab" tabindex="0">[[#Puppet Maker|Puppet Maker]]</div>
−
| '''Charisma:'''
+
<div id="third-1" class="third anchor"></div>
−
| class="wrapper" | {{chocdot|dots=4|size=10px}}<div class="tooltip">Specialty: Charming</div>
+
<div id="third-2" class="third anchor"></div>
−
|- class="lastrow"
+
<div id="third-3" class="third anchor"></div>
−
| '''Appearance:'''
+
<div id="third-4" class="third anchor"></div>
−
| {{chocdot|dots=3|size=10px}}
+
<div id="third-5" class="third anchor"></div>
−
|- class="lastrow"
+
<div id="Sin Eater" class="main third anchor" tabindex="0"></div>
−
| '''Performance:'''
+
<div id="Third-tab" class="third tab" tabindex="0">[[#Sin Eater|Sin Eater]]</div>
−
| class="wrapper" | {{chocdot|dots=4|size=10px}}<div class="tooltip">Specialty: Music</div>
+
<div id="fourth-1" class="fourth anchor"></div>
−
|- class="lastrow"
+
<div id="fourth-2" class="fourth anchor"></div>
−
| '''Rage:'''
+
<div id="fourth-3" class="fourth anchor"></div>
−
| {{chocdot|dots=4|size=10px}}
+
<div id="fourth-4" class="fourth anchor"></div>
−
|-
+
<div id="fourth-5" class="fourth anchor"></div>
−
! colspan=2 style="padding-top: 5px;" | Noticeable Merits
+
<div id="Hell Dancer" class="main fourth anchor" tabindex="0"></div>
−
|-
+
<div id="Fourth-tab" class="fourth tab" tabindex="0">[[#Hell Dancer|Hell Dancer]]</div>
−
| colspan=2 class="wrapper" | Confidence<div class="tooltip wrap">Self-confidence is like armor. If it fits, you can stand up to almost anything. In game terms, whenever another character tries to mislead or intimidate you, the Merit lowers your Social difficulties by two and raises the other character's difficulty by two.</div>
+
<div id="fifth-1" class="fifth anchor"></div>
−
|-
+
<div id="fifth-2" class="fifth anchor"></div>
−
| colspan=2 class="wrapper" | Enchanting Voice<div class="tooltip wrap">There's just something about that voice. Rolls that involve using the voice are at -2 diff.</div>
+
<div id="fifth-3" class="fifth anchor"></div>
−
|}
+
<div id="fifth-4" class="fifth anchor"></div>
 +
<div id="fifth-5" class="fifth anchor"></div>
 +
<div id="Secret Master" class="main fifth anchor" tabindex="0"></div>
 +
<div id="Fifth-tab" class="fifth tab" tabindex="0">[[#Secret Master|Secret Master]]</div>
 +
<div id="sixth-1" class="sixth anchor"></div>
 +
<div id="sixth-2" class="sixth anchor"></div>
 +
<div id="sixth-3" class="sixth anchor"></div>
 +
<div id="sixth-4" class="sixth anchor"></div>
 +
<div id="sixth-5" class="sixth anchor"></div>
 +
<div id="Gate Keeper" class="main sixth anchor" tabindex="0"></div>
 +
<div id="Sixth-tab" class="sixth tab" tabindex="0">[[#Gate Keeper|Gate Keeper]]</div>
 +
<div id="first-1" class="first anchor"></div>
 +
<div id="first-2" class="first anchor"></div>
 +
<div id="first-3" class="first anchor"></div>
 +
<div id="first-4" class="first anchor"></div>
 +
<div id="first-5" class="first anchor"></div>
 +
<div id="Ghost Walker" class="main first anchor" tabindex="0"></div>
 +
<div id="First-tab" class="first tab" tabindex="0">[[#Ghost Walker|Ghost Walker]]</div>
 +
<div id="First-panel" class="first panel">
 +
This is some information in the first panel.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="first-1" class="slide">
 +
      Slide 1-1
 +
      <div class="prev">[[#first-5|<]]</div>
 +
      <div class="next">[[#first-2|>]]</div>
 +
    </li>
 +
    <li class="first-2" class="slide">
 +
      Slide 1-2
 +
      <div class="prev">[[#first-1|<]]</div>
 +
      <div class="next">[[#first-3|>]]</div>         
 +
    </li>
 +
    <li class="first-3" class="slide">
 +
      Slide 1-3
 +
      <div class="prev">[[#first-2|<]]</div>
 +
      <div class="next">[[#first-4|>]]</div>         
 +
    </li>
 +
    <li class=first-4" class="slide">
 +
      Slide 1-4
 +
[[File:FelixGraffiti.jpg]]
 +
      <div class="prev">[[#first-3|<]]</div>
 +
      <div class="next">[[#first-5|>]]</div>         
 +
    </li>
 +
    <li class="first-5" class="slide">
 +
      Slide 1-5
 +
      <div class="prev">[[#first-4|<]]</div>
 +
      <div class="next">[[#first-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Second-panel" class="second panel">
 +
Here's some info in the second panel.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="second-1" class="slide">
 +
      Slide 2-1
 +
      <div class="prev">[[#second-5|<]]</div>
 +
      <div class="next">[[#second-2|>]]</div>
 +
    </li>
 +
    <li class="second-2" class="slide">
 +
      Slide 2-2
 +
      <div class="prev">[[#second-1|<]]</div>
 +
      <div class="next">[[#second-3|>]]</div>         
 +
    </li>
 +
    <li class="second-3" class="slide">
 +
      Slide 2-3
 +
      <div class="prev">[[#second-2|<]]</div>
 +
      <div class="next">[[#second-4|>]]</div>         
 +
    </li>
 +
    <li class=second-4" class="slide">
 +
      Slide 2-4
 +
      <div class="prev">[[#second-3|<]]</div>
 +
      <div class="next">[[#second-5|>]]</div>         
 +
    </li>
 +
    <li class="second-5" class="slide">
 +
      Slide 2-5
 +
      <div class="prev">[[#second-4|<]]</div>
 +
      <div class="next">[[#second-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Third-panel" class="third panel">
 +
Third panel info would go here, if I had any.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="third-1" class="slide">
 +
      Slide 3-1
 +
      <div class="prev">[[#third-5|<]]</div>
 +
      <div class="next">[[#third-2|>]]</div>
 +
    </li>
 +
    <li class="third-2" class="slide">
 +
      Slide 3-2
 +
      <div class="prev">[[#third-1|<]]</div>
 +
      <div class="next">[[#third-3|>]]</div>         
 +
    </li>
 +
    <li class="third-3" class="slide">
 +
      Slide 3-3
 +
      <div class="prev">[[#third-2|<]]</div>
 +
      <div class="next">[[#third-4|>]]</div>         
 +
    </li>
 +
    <li class=third-4" class="slide">
 +
      Slide 3-4
 +
      <div class="prev">[[#third-3|<]]</div>
 +
      <div class="next">[[#third-5|>]]</div>         
 +
    </li>
 +
    <li class="third-5" class="slide">
 +
      Slide 3-5
 +
      <div class="prev">[[#third-4|<]]</div>
 +
      <div class="next">[[#third-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Fourth-panel" class="fourth panel">
 +
And then this would be the fourth panel's spot.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="fourth-1" class="slide">
 +
      Slide 4-1
 +
      <div class="prev">[[#fourth-5|<]]</div>
 +
      <div class="next">[[#fourth-2|>]]</div>
 +
    </li>
 +
    <li class="fourth-2" class="slide">
 +
      Slide 4-2
 +
      <div class="prev">[[#fourth-1|<]]</div>
 +
      <div class="next">[[#fourth-3|>]]</div>         
 +
    </li>
 +
    <li class="fourth-3" class="slide">
 +
      Slide 4-3
 +
      <div class="prev">[[#fourth-2|<]]</div>
 +
      <div class="next">[[#fourth-4|>]]</div>         
 +
    </li>
 +
    <li class=fourth-4" class="slide">
 +
      Slide 4-4
 +
      <div class="prev">[[#fourth-3|<]]</div>
 +
      <div class="next">[[#fourth-5|>]]</div>         
 +
    </li>
 +
    <li class="fourth-5" class="slide">
 +
      Slide 4-5
 +
      <div class="prev">[[#fourth-4|<]]</div>
 +
      <div class="next">[[#fourth-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Fifth-panel" class="fifth panel">
 +
And then this would be the fifth panel's spot.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="fifth-1" class="slide">
 +
      Slide 5-1
 +
      <div class="prev">[[#fifth-5|<]]</div>
 +
      <div class="next">[[#fifth-2|>]]</div>
 +
    </li>
 +
    <li class="fifth-2" class="slide">
 +
      Slide 5-2
 +
      <div class="prev">[[#fifth-1|<]]</div>
 +
      <div class="next">[[#fifth-3|>]]</div>         
 +
    </li>
 +
    <li class="fifth-3" class="slide">
 +
      Slide 5-3
 +
      <div class="prev">[[#fifth-2|<]]</div>
 +
      <div class="next">[[#fifth-4|>]]</div>         
 +
    </li>
 +
    <li class=fifth-4" class="slide">
 +
      Slide 5-4
 +
      <div class="prev">[[#fifth-3|<]]</div>
 +
      <div class="next">[[#fifth-5|>]]</div>         
 +
    </li>
 +
    <li class="fifth-5" class="slide">
 +
      Slide 5-5
 +
      <div class="prev">[[#fifth-4|<]]</div>
 +
      <div class="next">[[#fifth-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="Sixth-panel" class="sixth panel">
 +
And then this would be the sixth panel's spot.
 +
<div class="slider">
 +
  <ul>
 +
    <li class="sixth-1" class="slide">
 +
      Slide 6-1
 +
      <div class="prev">[[#sixth-5|<]]</div>
 +
      <div class="next">[[#sixth-2|>]]</div>
 +
    </li>
 +
    <li class="sixth-2" class="slide">
 +
      Slide 6-2
 +
      <div class="prev">[[#sixth-1|<]]</div>
 +
      <div class="next">[[#sixth-3|>]]</div>         
 +
    </li>
 +
    <li class="sixth-3" class="slide">
 +
      Slide 6-3
 +
      <div class="prev">[[#sixth-2|<]]</div>
 +
      <div class="next">[[#sixth-4|>]]</div>         
 +
    </li>
 +
    <li class=sixth-6" class="slide">
 +
      Slide 6-4
 +
      <div class="prev">[[#sixth-3|<]]</div>
 +
      <div class="next">[[#sixth-5|>]]</div>         
 +
    </li>
 +
    <li class="sixth-6" class="slide">
 +
      Slide 6-5
 +
      <div class="prev">[[#sixth-4|<]]</div>
 +
      <div class="next">[[#sixth-1|>]]</div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
</div>

Latest revision as of 01:50, 24 April 2017

This is my main testing page.

This is some information in the first panel.

  • Slide 1-1
  • Slide 1-2
  • Slide 1-3
  • Slide 1-4 FelixGraffiti.jpg
  • Slide 1-5

Here's some info in the second panel.

  • Slide 2-1
  • Slide 2-2
  • Slide 2-3
  • Slide 2-4
  • Slide 2-5

Third panel info would go here, if I had any.

  • Slide 3-1
  • Slide 3-2
  • Slide 3-3
  • Slide 3-4
  • Slide 3-5

And then this would be the fourth panel's spot.

  • Slide 4-1
  • Slide 4-2
  • Slide 4-3
  • Slide 4-4
  • Slide 4-5

And then this would be the fifth panel's spot.

  • Slide 5-1
  • Slide 5-2
  • Slide 5-3
  • Slide 5-4
  • Slide 5-5

And then this would be the sixth panel's spot.

  • Slide 6-1
  • Slide 6-2
  • Slide 6-3
  • Slide 6-4
  • Slide 6-5
Retrieved from "https://cityofhopemush.net/index.php?title=User:Felix/Test&oldid=125936"