Template:AbilityNew/Ability.css

/* This is CSS specifically for the {{AbilityNew}} template, authored by Sillyvizion/NINJISY.
This shit is a mess, good luck making sense of it. Help me.
Should be imported through to Common.css */

/* This forces the height of the AbilityNew table*/
.ph-new-table {
    height:280px;
}

/* This forces the height of the tabber element */
.ph-ability-tabber > .tabber {
    min-height:200px;
}

/* This forces the height of the tabber element and centers the text on both axis */
.tabber__panel {
    min-height:200px;
    max-height:200px;
    overflow-y:auto;
    display:flex;
    justify-content:center;
    align-items:safe center;
    padding:5px 30px 5px 30px;
    box-sizing:border-box;
}

/* SCROLLBAR STYLING */
/* The styling for the scrollbar can be found in Common.css as TemplateStyles doesn't allow ::webkit-scrollbar */
/* BECAUSE ITS STUPID AND HATES ME */

/* This standardizes the size of demo videos */
.tabber__panel .video  {
    width:30%;
}

/* This makes lists inside tabber panels less ugly */
.tabber__panel ul {
	list-style-position: inside;
    width: 90%;
    margin: auto;
}

/* This forces the height of the 'sidebar' for alignment reasons */
.ph-ability-sidebar tbody {
    height:280px;
}

/* This adds padding to even out the ability icon because margins hate me */
.ph-ability-sidebar {
    padding-left:7px;
    padding-right:7px;
}

/* This makes sure the background of the ability icon is always white and forces some other styling */
/* ABILITY ICONS MUST BE 1:1 RATIO OR ELSE ITLL LOOK LIKE SHIT!! */
.ph-new-ability-icon .mw-file-element {
    box-sizing:border-box;
    width:200px;
    height:auto;
    padding:2px;
    background-color:white;
    margin-bottom:2px;
    border-radius:2px;
}

/* This applies text styling to the selected tabber tab */
.ph-ability-tabber .tabber__tab[aria-selected='true'], .ph-ability-tabber .tabber__tab[aria-selected='true']:visited {
    color:white;
    font-family:"Gotham";
    font-weight:bold;
    text-transform:uppercase;
}

/* This removes the italics when hovering on the selected tab because its ugly */
.ph-ability-tabber .tabber__tab[aria-selected='true']:hover {
    font-style:normal;
}

/* CLASS HIGHLIGHT STYLING */
/* This forces colouring for the 'tabber indicator' based on the {{{classtab}}} parameter */
/* This is kind of jank and has to be hardcoded unfortunately. But it's ok, we ball */

/* SWORD */
.ph-tabber-Sword .tabber__indicator {
    background-color:#D84C4C
}

/* SKATEBOARD */
.ph-tabber-Skateboard .tabber__indicator {
    background-color:#FF0000
}

/* BIOGRAFT */
.ph-tabber-Biograft .tabber__indicator {
    background-color:#FE6A00
}

/* KATANA */
.ph-tabber-Katana .tabber__indicator {
    background-color:#F95757
}

/* BAN HAMMER */
.ph-tabber-BanHammer .tabber__indicator {
    background-color:#3A3A82
}

/* ROCKET */
.ph-tabber-Rocket .tabber__indicator {
    background-color:#527CAE
}

/* SLINGSHOT */
.ph-tabber-Slingshot .tabber__indicator {
    background-color:#499FB8
}

/* HYPERLASER */
.ph-tabber-Hyperlaser .tabber__indicator {
    background-color:#2A8DB0
}

/* SHURIKEN */
.ph-tabber-Shuriken .tabber__indicator {
    background-color:#7CC740
}

/* SCYTHE */
.ph-tabber-Scythe .tabber__indicator {
    background-color:#23806F
}

/* MEDKIT */
.ph-tabber-Medkit .tabber__indicator {
    background-color:#2CBEA1
}

/* BOOMBOX */
.ph-tabber-Boombox .tabber__indicator {
    background-color:#93BA49
}

/* SUBSPACE */
.ph-tabber-Subspace .tabber__indicator {
    background-color:#FF006F
}

/* VINE STAFF */
.ph-tabber-VineStaff .tabber__indicator {
    background-color:#FF5877
}