Template:CharacterCard/style.css: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
mNo edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/*** CharacterCard ***/ |
|||
.charactercard { |
.charactercard { |
||
display: inline-block; |
display: inline-block; |
||
Line 5: | Line 6: | ||
margin: 3px 0px 5px 0; |
margin: 3px 0px 5px 0; |
||
z-index: 1; |
z-index: 1; |
||
} |
|||
.charactercard-detailed { |
|||
padding: 2px 0 10px 2px; |
|||
} |
} |
||
Line 26: | Line 23: | ||
} |
} |
||
/* hidden name to facilitate ctrl+f search */ |
|||
.charactercard .name { |
|||
cursor: default; |
|||
position: absolute; |
|||
top: calc(100% - 2px); |
|||
left: 0; |
|||
right: 0; |
|||
height: 10px; |
|||
overflow: visible; |
|||
color: transparent; |
|||
z-index: 4; |
|||
text-align: left; |
|||
font-size: 10px; |
|||
line-height: 10px; |
|||
} |
|||
.charactercard .name::selection { |
|||
background: rgba(0,0,0,0); |
|||
} |
|||
.charactercard.attack { |
|||
padding: 2px 0 10px 2px; |
|||
} |
|||
.charactercard.attack::before { |
|||
background-color: var(--normal); |
|||
} |
|||
.charactercard.attack-explosive::before { |
.charactercard.attack-explosive::before { |
||
background-color: var(--explosive); |
background-color: var(--explosive); |
||
Line 39: | Line 63: | ||
} |
} |
||
.portrait { |
.charactercard .portrait { |
||
position: relative; |
position: relative; |
||
} |
} |
||
.portrait img { |
.charactercard .portrait img { |
||
z-index: 2; |
z-index: 2; |
||
position: relative; |
position: relative; |
||
Line 51: | Line 75: | ||
} |
} |
||
.portrait::before |
.charactercard .portrait::before |
||
.portrait::after { |
/* .portrait::after */ { |
||
content: ""; |
content: ""; |
||
position: absolute; |
position: absolute; |
||
Line 64: | Line 88: | ||
} |
} |
||
.portrait::before { |
.charactercard .portrait::before { |
||
background-size: cover; |
background-size: cover; |
||
/* background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png); */ |
/* background-image: url(https://static.miraheze.org/bluearchivewiki/8/8b/Itembg.png); */ |
||
Line 77: | Line 101: | ||
} */ |
} */ |
||
/* rank */ |
|||
.charactercard .rank { |
|||
position: absolute; |
position: absolute; |
||
z-index: 4; |
z-index: 4; |
||
Line 106: | Line 131: | ||
} |
} |
||
.rank-uw { |
.charactercard .rank-uw { |
||
left:2px; |
|||
border: 1px solid #ee7700; |
|||
background-image: url('https://static.miraheze.org/bluearchivewiki/0/03/Icon_UW.png'); |
|||
background-color: #ffc904; |
|||
border-radius: 7px; |
|||
transform: skewX(-11deg); |
|||
width:24px; |
|||
overflow: hidden; |
|||
/* padding-right: 2px; |
|||
background-image: url('https://static.miraheze.org/bluearchivewiki/0/03/Icon_UW.png'); */ |
|||
} |
} |
||
.charactercard .rank-uw::before { |
|||
.role { |
|||
position: absolute; |
|||
left:0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
content: ""; |
|||
transform: skewX(11deg); |
|||
/* filter: drop-shadow(0 0 0.5px #ee7700) drop-shadow(0 0 0.5px #ee7700) drop-shadow(0 0 0.5px #ee7700); */ |
|||
filter: drop-shadow(0 1px 0 #ee7700) drop-shadow(0 -1px 0 #ee7700) drop-shadow(1px 0 0 #ee7700); |
|||
background-size: cover; |
|||
background-image: url('https://static.miraheze.org/bluearchivewiki/8/8d/Icon_UW.svg'); |
|||
} |
|||
/* role */ |
|||
.charactercard [class^="role-"] { |
|||
position: absolute; |
position: absolute; |
||
z-index: 4; |
z-index: 4; |
||
right: |
right: 12%; |
||
bottom: 1px; |
bottom: 1px; |
||
height: 25px; |
height: 25px; |
||
Line 123: | Line 173: | ||
} |
} |
||
.role::before { |
.charactercard [class^="role-"]::before { |
||
content: ""; |
content: ""; |
||
position: absolute; |
position: absolute; |
||
Line 135: | Line 185: | ||
} |
} |
||
.role::after { |
.charactercard [class^="role-"]::after { |
||
/* content: ""; */ |
|||
content: ""; |
content: ""; |
||
position: absolute; |
position: absolute; |
||
Line 148: | Line 197: | ||
} |
} |
||
. |
.charactercard .role-attacker::after { |
||
background-image: url(https://static.miraheze.org/bluearchivewiki/6/65/Icon_role_attacker.png); |
background-image: url(https://static.miraheze.org/bluearchivewiki/6/65/Icon_role_attacker.png); |
||
} |
} |
||
. |
.charactercard .role-healer::after { |
||
background-image: url(https://static.miraheze.org/bluearchivewiki/5/54/Icon_role_healer.png); |
background-image: url(https://static.miraheze.org/bluearchivewiki/5/54/Icon_role_healer.png); |
||
} |
} |
||
. |
.charactercard .role-support::after { |
||
background-image: url(https://static.miraheze.org/bluearchivewiki/2/2b/Icon_role_support.png); |
background-image: url(https://static.miraheze.org/bluearchivewiki/2/2b/Icon_role_support.png); |
||
} |
} |
||
. |
.charactercard .role-tank::after { |
||
background-image: url(https://static.miraheze.org/bluearchivewiki/5/58/Icon_role_tank.png); |
background-image: url(https://static.miraheze.org/bluearchivewiki/5/58/Icon_role_tank.png); |
||
} |
} |
||
. |
.charactercard .role-ts::after { |
||
background-image: url(https://static.miraheze.org/bluearchivewiki/e/ea/Icon_role_tactical_support.png); |
background-image: url(https://static.miraheze.org/bluearchivewiki/e/ea/Icon_role_tactical_support.png); |
||
} |
} |
||
/* assist */ |
|||
.charactercard .assist { |
|||
.rental { |
|||
position: absolute; |
position: absolute; |
||
z-index: 4; |
z-index: 4; |
||
Line 189: | Line 238: | ||
} |
} |
||
. |
.charactercard .assist::after { |
||
content: "A"; |
content: "A"; |
||
} |
} |
||
/* level */ |
|||
.charactercard .level { |
|||
position: absolute; |
|||
z-index: 4; |
|||
left: 15%; |
|||
top: 0; |
|||
/* height: 24px; */ |
|||
width: 70%; |
|||
box-sizing: border-box; |
|||
text-align: left; |
|||
color: #ffffff; |
|||
font-weight: bold; |
|||
text-shadow: 0 0 1px #39436e, 0 0 1px #39436e, 0 0 1px #39436e, 0 0 1px #39436e; |
|||
font-size: 18px; |
|||
font-style: italic; |
|||
line-height: 27px; |
|||
filter: drop-shadow(0px 0px 0px black); |
|||
cursor: default; |
|||
} |
|||
/* DORK MODE */ |
/* DORK MODE */ |
||
Line 209: | Line 283: | ||
background-color: #57c5ff; |
background-color: #57c5ff; |
||
} |
} |
||
/*** CharacterCard - END ***/ |
|||
/*** Team ***/ |
|||
.team { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
.team > div { |
|||
margin: 0 6px; |
|||
} |
|||
.team .charactercard { |
|||
margin-left: -4px; |
|||
margin-right: -4px; |
|||
} |
|||
.strikers, |
|||
.specials { |
|||
position: relative; |
|||
display: inline-block; |
|||
padding: 0px 2px 0 6px; |
|||
} |
|||
.strikers::after, |
|||
.specials::after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
/* right: 0; */ |
|||
top: 16px; |
|||
bottom: 16px; |
|||
width: 24px; |
|||
transform: skewX(-11deg); |
|||
border-radius: 6px; |
|||
z-index: 0; |
|||
} |
|||
.strikers::after { |
|||
background-color: #b43030; |
|||
} |
|||
.specials::after { |
|||
background-color: #0f6dbc; |
|||
} |
|||
.team .info { |
|||
position: relative; |
|||
display: inline-block; |
|||
font-size: 18px; |
|||
min-width: 120px; |
|||
} |
|||
/*** Team - END ***/ |