The Deadlock Wiki

Template:Infobox hero/styles.css: Difference between revisions

Browse history interactively
← Older editNewer edit →

LVL (talk | contribs)

3 user groups
4,834 edits
undo
removed padding on spiritboon
LVL (talk | contribs)
Contributors, Interface administrators, Moderators
4,834 edits
Made infobox more compact and moved herotags to inside infobox
Line 64: Line 64:
width: 100%;
width: 100%;
     max-width: 275px;
     max-width: 275px;
min-width: 250px;
min-width: 240px;
border-collapse: collapse;
border-collapse: collapse;
font-family: 'Retail Demo', 'Open Sans', serif;
font-family: 'Retail Demo', 'Open Sans', serif;
font-size: 16px;
font-size: 15px;
     background-color: var(--th-heroinfobox-color1);
     background-color: var(--th-heroinfobox-color1);
     margin: 0 0 1em 1em;
     margin: 0 0 1em 1em;
Line 100: Line 100:
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: 16px;
font-size: 15px;
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);
Line 118: Line 118:
.infobox-h-title{
.infobox-h-title{
color: var(--th-heroinfobox-text-title);
color: var(--th-heroinfobox-text-title);
font-size: 25px;
font-size: 22px;
font-weight: bold;
font-weight: bold;
     text-align: center;
     text-align: center;
Line 129: Line 129:
justify-content: space-between;
justify-content: space-between;
align-items: center;
align-items: center;
min-height: 45px;
min-height: 34px;
margin-top: 4px;
margin-top: 2px;
margin-bottom: var(--th-heroinfobox-logo-bottom);
margin-bottom: var(--th-heroinfobox-logo-bottom);
}
}
Line 206: Line 206:
/* --- Text Before Stats --- */
/* --- Text Before Stats --- */
.infobox-h-text-weapon{
.infobox-h-text-weapon{
padding: 8px 0;
padding: 2px 0;
line-height: 1.35;
line-height: 1.2em;
position: relative;
position: relative;
}
}
Line 213: Line 213:
.infobox-h-text-stat-subtitle > *:first-child,
.infobox-h-text-stat-subtitle > *:first-child,
.infobox-h-text-stat-subtitle-border > *:first-child{
.infobox-h-text-stat-subtitle-border > *:first-child{
margin-top: 8px;
margin-top: 4px;
margin-bottom: 0;
margin-bottom: 0;
text-transform: uppercase;
text-transform: uppercase;
Line 221: Line 221:
}
}
.infobox-h-text-stat-subtitle-border{
.infobox-h-text-stat-subtitle-border{
margin-top: 8px;
margin-top: 2px;
border-top: solid 3px var(--th-heroinfobox-color2);
border-top: solid 2px var(--th-heroinfobox-color2);
}
}


/* ---------- Hero Portrait Image ---------- */
/* ---------- Hero Portrait Image ---------- */
.infobox-h-image > div{
.infobox-h-image > div{
max-width: 190px;
max-width: 150px;
height: auto;
height: auto;
margin: auto;
margin: auto;
Line 239: Line 239:
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 247: Line 273:


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


.infobox-h-subsection tr{
.infobox-h-subsection tr{
font-size: 15px;
font-size: 14px;
text-align: left;
text-align: left;
line-height: 1.2em;
line-height: 1.1em;
}
}
.infobox-h-subsection tr > td{
.infobox-h-subsection tr > td{
padding-bottom: 5px;
padding-bottom: 2px;
}
}
.infobox-h-subsection tr:first-child > td{
.infobox-h-subsection tr:first-child > td{
padding-top: 5px;
padding-top: 2px;
}
.infobox-h-dropdown .infobox-h-subsection-child tr:first-child > td {
    padding-top: 5px;
}
}
.infobox-h-subsection tr:last-child > td{
.infobox-h-subsection tr:last-child > td{
padding-bottom: 6px;
padding-bottom: 4px;
}
}
.infobox-h-subsection tr > td:first-child{
.infobox-h-subsection tr > td:first-child{
Line 292: Line 321:
}
}
.infobox-h-spiritboon:not(:empty){
.infobox-h-spiritboon:not(:empty){
padding-right: 0px;
padding-right: 5px;
}
}
.infobox-h-dropdown tr:first-child .infobox-h-spiritboon:not(:empty){
.infobox-h-dropdown tr:first-child .infobox-h-spiritboon:not(:empty){
Line 383: Line 412:
position: relative;
position: relative;
width: calc(100% - 4px);
width: calc(100% - 4px);
padding: 2px;
padding: 1px;
background-color: var(--th-heroinfobox-header-back);
background-color: var(--th-heroinfobox-header-back);
Line 399: Line 428:
}
}
.infobox-h-content .infotext-h-big{
.infobox-h-content .infotext-h-big{
font-size: 18px;
font-size: 16px;
}
}
.infobox-h-content .infotext-h-bigger{
.infobox-h-content .infotext-h-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: 20px;
font-size: 18px;
}
 
 
 
/* ------------ Hero Tags -------------------*/
.infobox-h-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-h-herotags > div{
display: inline-block;
position: relative;
}
 
.infobox-h-herotag-back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--th-heroinfobox-tags-back);
animation-play-state: paused;
}
 
.infobox-h-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-h-herotags > div:nth-child(3n + 1) .infobox-h-herotag-back{
    transform: rotateZ(3deg);
    animation-name: TagGroove1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.infobox-h-herotags > div:nth-child(3n + 2) .infobox-h-herotag-back{
    transform: rotateZ(-3deg);
    animation-name: TagGroove2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.infobox-h-herotags > div:nth-child(3n + 3) .infobox-h-herotag-back{
    transform: rotateZ(4deg);
    animation-name: TagGroove3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
 
 
 
 
/*--- Tag Animation (ONLY on Hover) --- */
.infobox-h-herotags:hover .infobox-h-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);
    }
}
 
@keyframes 'TagGroove2'
{
    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);
    }
}
}
Retrieved from "https://deadlock.wiki/Template:Infobox_hero/styles.css"