MediaWiki:Character-Banner.css
From Elwiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.char-banner {
width: 300px;
height: 61px;
transform: skew(-13deg);
display: flex;
position: relative;
cursor: pointer;
}
.char-banner-image {
transform: skew(13deg);
margin-left: -7px;
}
.char-banner::after {
content: "";
transform: skew(50deg);
display: block;
position: absolute;
background: inherit;
width: 100px;
height: 61px;
right: -50px;
z-index: 1;
cursor: pointer;
}
.char-banner-title {
transform: skew(13deg);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.15rem;
white-space: nowrap;
z-index: 2;
position: relative;
display: flex;
align-items: center;
padding-left: 0.5rem;
}
.char-banner-tree {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 2rem 0.25rem;
width: 350px;
padding: 1rem 0;
margin-left: 0.3rem;
}
.char-banner-tree-image {
display: flex;
place-content: center;
place-items: center;
position: relative;
}
.char-banner-tree-image::before {
content: "";
height: 14px;
width: 14px;
background-position: center;
display: block;
background-repeat: no-repeat;
transform: rotate(90deg);
padding: 0.25rem;
position: absolute;
bottom: -50%;
z-index: 2;
}
.char-banner-tree-image:nth-last-child(4)::before,
.char-banner-tree-image:nth-last-child(3)::before,
.char-banner-tree-image:nth-last-child(2)::before,
.char-banner-tree-image:nth-last-child(1)::before {
display: none;
}
.image-cropped {
width: 108px;
height: 61px;
position: relative;
overflow: hidden;
display: inline-block;
}
.image-wrap {
position: absolute;
}
.character-banner-select {
display: flex;
gap: 0.7rem 0.4rem;
flex-wrap: wrap;
width: 320px;
padding-left: 1.2rem;
margin-bottom: 0;
margin-top: 0.4rem;
justify-content: space-between;
}
.character-banner-select img {
height: 35px;
width: 35px;
image-rendering: -webkit-optimize-contrast;
}
.char-banner-tree:not([data-base="Elsword"]) {
display: none;
}
.skin-minerva .char-banner::after {
width: 50px;
right: -25px;
transform: skew(13deg);
}
.skin-minerva .char-banner {
margin-left: 1.5rem;
}
