Template:AbilityNew/Ability.css: Difference between revisions
From PHIGHTING! Wiki
Content deleted Content added
Sillyvizion (talk | contribs) mNo edit summary |
Sillyvizion (talk | contribs) m Styling for <ul> inside tabber__panel |
||
Line 32: | Line 32: | ||
.tabber__panel .video { |
.tabber__panel .video { |
||
width:30%; |
width:30%; |
||
} |
|||
/* This makes lists inside tabber panels less ugly */ |
|||
.tabber__panel ul { |
|||
list-style-position: inside; |
|||
width: 90%; |
|||
margin: auto; |
|||
} |
} |
||
Latest revision as of 22:59, 1 April 2024
/* 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
}