The Deadlock Wiki

Editing Template:Infobox hero/styles.css

Warning: You are not logged in. Once you make an edit, a temporary account will be created for you. Learn more. Log in or create an account to continue receiving notifications after this account expires, and to access other features.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
/* ========== @MEDIA/MINERVA FIXES/OVERRIDES ========== */
body.skin-minerva .infobox-h table{
    margin: 0;
}
body.skin-minerva .infobox-h table caption{
    text-align: center;
    display: table-caption;
}
@media (max-width: 639px){
.infobox-h table,
body.skin-minerva .infobox-h table{
display: table;
overflow: visible;
}
.infobox-h table.infobox-h-content{
display: table;
}
}
@media (max-width: 539px){
body.skin-minerva .infobox-h{
max-width: 350px;
margin: 0em auto 1em auto;
float: none;
}
body.skin-minerva .infobox-h-subsection table td{
width: 50%;
}
}
/* ========== INFOBOX_HERO CSS ========== */
/* ========== INFOBOX_HERO CSS ========== */
.infobox-h{
.infobox{
/* -- variables -- */
/* -- variables -- */
--th-heroinfobox-text-normal: white;
--th-heroinfobox-text-normal: white;
Line 64: Line 31:
width: 100%;
width: 100%;
     max-width: 275px;
     max-width: 275px;
min-width: 240px;
min-width: 250px;
border-collapse: collapse;
border-collapse: collapse;
font-family: 'Retail Demo', 'Open Sans', serif;
font-family: 'Retail Demo', 'Open Sans', serif;
font-size: 15px;
font-size: 16px;
     background-color: var(--th-heroinfobox-color1);
     background-color: var(--th-heroinfobox-color1);
     margin: 0 0 1em 1em;
     margin: 0 0 1em 1em;
Line 75: Line 42:


/* ---------- Background Styling ---------- */
/* ---------- Background Styling ---------- */
.infobox-h-background {
.infobox-background {
position: absolute;
position: absolute;
width: 100%;
width: 100%;
Line 83: Line 50:


/* --- Background Horizontal Positioning --- */
/* --- Background Horizontal Positioning --- */
.infobox-h-background > figure{
.infobox-background > figure{
margin-right: var(--th-heroinfobox-bg-margin) !important;
margin-right: var(--th-heroinfobox-bg-margin) !important;
}
}


/* ---------- Content Styling ---------- */
/* ---------- Content Styling ---------- */
.infobox-h-content {
.infobox-content {
position: relative;
position: relative;
width: 100%;
width: 100%;
Line 100: Line 67:
background-image: linear-gradient(180deg, var(--th-heroinfobox-color1-transparent) var(--th-heroinfobox-bg-grad-point1), var(--th-heroinfobox-color1-grad) var(--th-heroinfobox-bg-grad-height));
background-image: linear-gradient(180deg, var(--th-heroinfobox-color1-transparent) var(--th-heroinfobox-bg-grad-point1), var(--th-heroinfobox-color1-grad) var(--th-heroinfobox-bg-grad-height));
background-color: transparent;
background-color: transparent;
font-size: 15px;
font-size: 16px;
text-align: center;
text-align: center;
text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.7);
text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.7);
}
}


.infobox-h, .infobox-h-background, .infobox-h-content{
.infobox, .infobox-background, .infobox-content{
border-radius: 8px;
border-radius: 8px;
}
}


.infobox-h .infobox-h-image {
.infobox .infobox-image {
margin: auto;
margin: auto;
border: none;
border: none;
     text-align: center;
     text-align: center;
}
}
/* .infobox-table th {
    vertical-align: top;
    text-align: right;
    width: 120px;
}
.infobox-table td {
    vertical-align: top;
}
.infobox_item a {
color: #fff;
}
.infobox_template {
border-radius: 8px; overflow: hidden;
} */


/* ---------- Top Section (Above Portrait) ---------- */
/* ---------- Top Section (Above Portrait) ---------- */
.infobox-h-title{
.infobox-title{
color: var(--th-heroinfobox-text-title);
color: var(--th-heroinfobox-text-title);
font-size: 22px;
font-size: 25px;
font-weight: bold;
font-weight: bold;
     text-align: center;
     text-align: center;
Line 124: Line 109:
}
}


.infobox-h-title-regular{
.infobox-title-hero{
color: var(--th-heroinfobox-text-title);
font-size: 22px;
font-weight: normal;
    text-align: center;
text-shadow: 1.2px 2px 3px black, 1.2px 1.2px 0.1px #A5A5A5;
}
 
.infobox-h-title-hero{
display: flex;
display: flex;
position: relative;
position: relative;
justify-content: space-between;
justify-content: space-between;
align-items: center;
align-items: center;
min-height: 34px;
min-height: 45px;
margin-top: 2px;
margin-top: 4px;
margin-bottom: var(--th-heroinfobox-logo-bottom);
margin-bottom: var(--th-heroinfobox-logo-bottom);
}
}


.infobox-h-title-hero-left{
.infobox-title-hero-left{
position: absolute;
position: absolute;
height: 100%;
height: 100%;
Line 150: Line 127:


/* --- Logo/Name --- */
/* --- Logo/Name --- */
.infobox-h-title-hero-middle{
.infobox-title-hero-middle{
position: relative;
position: relative;
width: 100%;
width: 100%;
Line 157: Line 134:
filter: drop-shadow(1px 1px 2px black);
filter: drop-shadow(1px 1px 2px black);
}
}
.infobox-h-title-hero-middle-text{
.infobox-title-hero-middle-text{
width: calc(100% - 120px);
width: calc(100% - 120px);
margin: 0px 60px;
margin: 0px 60px;
Line 164: Line 141:
word-break: break-word;
word-break: break-word;
}
}
.infobox-h-title-hero-middle > span{
.infobox-title-hero-middle > span{
bottom: 0 !important;
bottom: 0 !important;
}
}
.infobox-h-title-hero-middle img{
.infobox-title-hero-middle img{
margin: var(--th-heroinfobox-logo-bleed);
margin: var(--th-heroinfobox-logo-bleed);
}
}


/* --- Map Icon --- */
/* --- Map Icon --- */
.infobox-h-title-hero-right{
.infobox-title-hero-right{
position: absolute;
position: absolute;
height: 45px;
height: 45px;
Line 181: Line 158:
margin-right: 5px;
margin-right: 5px;
}
}
.infobox-h-title-hero-right > div{
.infobox-title-hero-right > div{
position: relative;
position: relative;
width: 100%;
width: 100%;
Line 188: Line 165:


/* --- Torn Box Behind Map Icon --- */
/* --- Torn Box Behind Map Icon --- */
.infobox-h-title-hero-tornbox{
.infobox-title-hero-tornbox{
     position: absolute;
     position: absolute;
     width: 105%;
     width: 105%;
Line 202: Line 179:
}
}


.infobox-h-title-hero-icon{
.infobox-title-hero-icon{
     position: absolute;
     position: absolute;
     width: calc(100% - 10px);
     width: calc(100% - 10px);
Line 213: Line 190:


/* --- Text Before Stats --- */
/* --- Text Before Stats --- */
.infobox-h-text-weapon{
.infobox-text-weapon{
padding: 2px 0;
padding: 8px 0;
line-height: 1.2em;
line-height: 1.35;
position: relative;
position: relative;
}
}


.infobox-h-text-stat-subtitle > *:first-child,
.infobox-text-stat-subtitle > *:first-child,
.infobox-h-text-stat-subtitle-border > *:first-child{
.infobox-text-stat-subtitle-border > *:first-child{
margin-top: 4px;
margin-top: 8px;
margin-bottom: 0;
margin-bottom: 0;
text-transform: uppercase;
text-transform: uppercase;
}
}
.infobox-h-text-stat-subtitle > *:first-child{
.infobox-text-stat-subtitle > *:first-child{
margin-top: 4px;
margin-top: 4px;
}
}
.infobox-h-text-stat-subtitle-border{
.infobox-text-stat-subtitle-border{
margin-top: 2px;
margin-top: 8px;
border-top: solid 2px var(--th-heroinfobox-color2);
border-top: solid 3px var(--th-heroinfobox-color2);
}
}


/* ---------- Hero Portrait Image ---------- */
/* ---------- Hero Portrait Image ---------- */
.infobox-h-image > div{
.infobox-image > div{
max-width: 150px;
max-width: 190px;
height: auto;
height: auto;
margin: auto;
margin: auto;
Line 244: Line 221:
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
}
.infobox-h-image > div img{
.infobox-image > div img{
filter: drop-shadow(2px 3px 2px var(--th-heroinfobox-color2-shadow));
filter: drop-shadow(2px 3px 2px var(--th-heroinfobox-color2-shadow));
clip-path: rect(3px calc(100% - 3px) calc(100% - 3px) 3px round 8px);
clip-path: rect(3px calc(100% - 3px) calc(100% - 3px) 3px round 8px);
}
/* ---------- Hero Tags (Inside Infobox) ---------- */
.infobox-h-herotags-row {
padding: 0;
}
.infobox-h-herotags-inner {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
padding: 4px 0 6px 0;
}
.infobox-h-herotag-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
background: var(--th-heroinfobox-stats-back);
font-size: 13px;
font-weight: 600;
color: var(--th-heroinfobox-text-title);
text-transform: uppercase;
letter-spacing: 0.03em;
text-shadow: 1.5px 1.5px 0.8px rgba(0, 0, 0, 0.5);
}
}


Line 280: Line 231:
/* note: dropdown is a child of subsection            */
/* note: dropdown is a child of subsection            */


.infobox-h-subsection {
.infobox-subsection {
padding: 0 2px 2px 2px;
padding: 0 5px 5px 5px;
vertical-align: middle;
vertical-align: middle;
}
}


.infobox-h-subsection table{
.infobox-subsection table{
table-layout: auto;
table-layout: auto;
padding: 0 6px;
padding: 0 6px;
}
}


.infobox-h-subsection tr{
.infobox-subsection tr{
font-size: 14px;
font-size: 15px;
text-align: left;
text-align: left;
line-height: 1.1em;
line-height: 1.2em;
}
.infobox-h-subsection tr > td{
padding-bottom: 2px;
}
}
.infobox-h-subsection tr:first-child > td{
.infobox-subsection tr > td{
padding-top: 2px;
padding-bottom: 5px;
}
}
.infobox-h-dropdown .infobox-h-subsection-child tr:first-child > td {
.infobox-subsection tr:first-child > td{
    padding-top: 5px;
padding-top: 5px;
}
}
.infobox-h-subsection tr:last-child > td{
.infobox-subsection tr:last-child > td{
padding-bottom: 4px;
padding-bottom: 6px;
}
}
.infobox-h-subsection tr > td:first-child{
.infobox-subsection tr > td:first-child{
width: auto;
width: auto;
font-family: "Retail Demo Medium", "Retail Demo", 'Open Sans', serif;
font-family: "Retail Demo Medium", "Retail Demo", 'Open Sans', serif;
Line 316: Line 264:
vertical-align: top;
vertical-align: top;
}
}
.infobox-h-subsection tr > td:first-child .infobox-h-stat-label{
.infobox-subsection tr > td:first-child span{
color: var(--th-heroinfobox-stats-text);
color: var(--th-heroinfobox-stats-text);
text-decoration: underline;
}
}
.infobox-h-subsection tr > td:last-child{
.infobox-subsection tr > td:last-child{
width: max-content;
width: max-content;
padding-left: 4px;
padding-left: 4px;
Line 326: Line 273:
}
}


.infobox-h-spiritboon{
.infobox-spiritboon{
display: inline-block;
display: inline-block;
}
}
.infobox-h-spiritboon:not(:empty){
.infobox-spiritboon:not(:empty){
padding-right: 0;
padding-right: 5px;
}
}
.infobox-h-dropdown tr:first-child .infobox-h-spiritboon:not(:empty){
.infobox-dropdown tr:first-child .infobox-spiritboon:not(:empty){
padding-top: 3px;
padding-top: 3px;
}
}


.infobox-h-subsection-child{
.infobox-subsection-child{
width: 100%;
width: 100%;
font-weight: normal;
font-weight: normal;
Line 344: Line 291:
}
}


.infobox-h-dropdown-header > button{
.infobox-dropdown-header > button{
position: absolute;
position: absolute;
top: 0;
top: 0;
Line 357: Line 304:
}
}


.infobox-h-dropdown-title{
.infobox-dropdown-title{
text-shadow: 0 2px 4px black, 1.2px 1.2px rgba(0, 0, 0, 0.7);
text-shadow: 0 2px 4px black, 1.2px 1.2px rgba(0, 0, 0, 0.7);
color: var(--th-heroinfobox-text-normal);
color: var(--th-heroinfobox-text-normal);
}
}


.infobox-h-dropdown-header button,
.infobox-dropdown-header button,
.infobox-h-dropdown-header button .mw-collapsible-text{
.infobox-dropdown-header button .mw-collapsible-text{
color: var(--th-heroinfobox-header-link);
color: var(--th-heroinfobox-header-link);
font-size: 13px;
font-size: 13px;
Line 369: Line 316:
}
}


.infobox-h-dropdown-header button.mw-collapsible-text:hover,
.infobox-dropdown-header button.mw-collapsible-text:hover,
.infobox-h-dropdown-header button .mw-collapsible-text:hover{
.infobox-dropdown-header button .mw-collapsible-text:hover{
color: white;
color: white;
}
.infobox-h-dropdown-header > button::before,
.infobox-h-dropdown-header > button::after{
color: inherit;
}
.infobox-h-dropdown-header-overflow a{
display: block;
margin: 2px 65px 2px 5px;
width: fit-content;
line-height: 1.25em;
word-break: break-word;
}
}




/* ------------ Dropdown Subsection Only -------------------*/
/* ------------ Dropdown Subsection Only -------------------*/
.infobox-h-dropdown{
.infobox-dropdown{
--th-heroinfobox-header-back: #d5903f;
--th-heroinfobox-header-back: #d5903f;
--th-heroinfobox-header-link: #F4E3CF;
--th-heroinfobox-header-link: #F4E3CF;
}
}


.infobox-h-dropdown .infobox-h-subsection-child{
.infobox-dropdown .infobox-subsection-child{
border-top-right-radius: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top-left-radius: 0;
}
}


.infobox-h-dropdown .infobox-h-subsection-child:not(.mw-collapsed) .infobox-h-dropdown-header{
.infobox-dropdown .infobox-subsection-child:not(.mw-collapsed) .infobox-dropdown-header{
border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
}


.infobox-h-dropdown tr > td:last-child{
.infobox-dropdown tr > td:last-child{
white-space: nowrap;
white-space: nowrap;
}
}


/*--- Statistic Dropdown Themes --- */
/*--- Statistic Dropdown Themes --- */
.infobox-h-dropdown-weapon{
.infobox-dropdown-weapon{
--th-heroinfobox-header-back: #CD8837;
--th-heroinfobox-header-back: #d5903f;
--th-heroinfobox-header-link: #FFF0DF;
--th-heroinfobox-header-link: #FFF0DF;
}
}
.infobox-h-dropdown-vitality{
.infobox-dropdown-vitality{
--th-heroinfobox-header-back: #74b01c;
--th-heroinfobox-header-back: #74b01c;
--th-heroinfobox-header-link: #DAFFD2;
--th-heroinfobox-header-link: #DAFFD2;
}
}
.infobox-h-dropdown-spirit{
.infobox-dropdown-spirit{
--th-heroinfobox-header-back: #A657BC;
--th-heroinfobox-header-back: #ba5ca6;
--th-heroinfobox-header-link: #ffdff8;
--th-heroinfobox-header-link: #ffdff8;
}
}


/*--- Statistic Dropdown Header --- */
/*--- Statistic Dropdown Header --- */
.infobox-h-dropdown-header{
.infobox-dropdown-header{
position: relative;
position: relative;
width: calc(100% - 4px);
width: calc(100% - 4px);
padding: 1px;
padding: 2px;
background-color: var(--th-heroinfobox-header-back);
background-color: var(--th-heroinfobox-header-back);
Line 435: Line 369:


/* ------------ Subsection Text Themes -------------------*/
/* ------------ Subsection Text Themes -------------------*/
.infobox-h-content .infotext-h-bold{
.infobox-content .infotext-bold{
font-weight: bold;
font-weight: bold;
}
}
.infobox-h-content .infotext-h-title{
.infobox-content .infotext-title{
color: var(--th-heroinfobox-text-title);
color: var(--th-heroinfobox-text-title);
}
}
.infobox-h-content .infotext-h-big{
.infobox-content .infotext-big{
font-size: 16px;
font-size: 18px;
}
}
.infobox-h-content .infotext-h-bigger{
.infobox-content .infotext-bigger{
text-shadow: 1.1px 2px 2px black, 1.2px 1.2px 0.2px #7a7369;
text-shadow: 1.1px 2px 2px black, 1.2px 1.2px 0.2px #7a7369;
font-size: 18px;
font-size: 20px;
}
 
 
 
/* ------------ Hero Tags -------------------*/
.infobox-herotags{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
column-gap: 10px;
--th-heroinfobox-tags-text: #FFEFD7;
--th-heroinfobox-tags-back: #000000;
}
 
.infobox-herotags > div{
display: inline-block;
position: relative;
}
 
.infobox-herotag-back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--th-heroinfobox-tags-back);
animation-play-state: paused;
}
 
.infobox-herotag-text{
position: relative;
color: var(--th-heroinfobox-tags-text);
font-size: 1.2em;
font-family: "VALVE Pulp", "Open Sans", "serif";
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 7px;
cursor: default;
}
 
/*--- Tag Posing --- */
.infobox-herotags > div:nth-child(3n + 1) .infobox-herotag-back{
    transform: rotateZ(3deg);
    animation-name: TagGroove1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.infobox-herotags > div:nth-child(3n + 2) .infobox-herotag-back{
    transform: rotateZ(-3deg);
    animation-name: TagGroove2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.infobox-herotags > div:nth-child(3n + 3) .infobox-herotag-back{
    transform: rotateZ(4deg);
    animation-name: TagGroove3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
}




/* ------------ Stat Cell Modifiers -------------------*/


/* Headroom for a section's first row when it carries a scaling icon. */
 
.infobox-h .infobox-h-dropdown .infobox-h-subsection-child tr > td.infobox-h-stat-label-scaled{
/*--- Tag Animation (ONLY on Hover) --- */
padding-top: 8px;
.infobox-herotags:hover .infobox-herotag-back{
animation-play-state: running;
}
 
/* --- Tag Keyframes (ripped from game) --- */
@keyframes 'TagGroove1'
{
    0%{
transform: rotateZ(-3deg);
}
    25%{
transform: rotateZ(-3deg);
}
    26%{
transform: rotateZ(2deg);
}
    50%{
        transform: rotateZ(2deg);
    }
    51%{
        transform: rotateZ(-1deg);
    }
    75%{
        transform: rotateZ(-1deg);
    }
    76%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(0deg);
    }
}
}


/* Breathing room for value cells whose scaling icon sits near the edge. */
@keyframes 'TagGroove2'
.infobox-h .infobox-h-dropdown .infobox-h-subsection-child tr > td.infobox-h-stat-value-padded{
{
padding-right: 5px;
    0%{
transform: rotateZ(3deg);
}
    25%{
transform: rotateZ(3deg);
}
    26%{
transform: rotateZ(-1deg);
}
    50%{
        transform: rotateZ(-1deg);
    }
    51%{
        transform: rotateZ(0deg);
    }
    75%{
        transform: rotateZ(0deg);
    }
    76%{
        transform: rotateZ(2deg);
    }
    100%{
        transform: rotateZ(2deg);
    }
}
 
@keyframes 'TagGroove3'
{
    0%{
transform: rotateZ(-3deg);
}
    25%{
transform: rotateZ(-3deg);
}
    26%{
transform: rotateZ(-1deg);
}
    50%{
        transform: rotateZ(-1deg);
    }
    51%{
        transform: rotateZ(2deg);
    }
    75%{
        transform: rotateZ(2deg);
    }
    76%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(0deg);
    }
}
}
Please note that all contributions to The Deadlock Wiki are considered to be released under the Creative Commons Attribution-NonCommercial-ShareAlike (see Deadlock:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!
Cancel Editing help (opens in new window)
Preview page with this template
Retrieved from "https://deadlock.wiki/Template:Infobox_hero/styles.css"