MediaWiki:Character-Banner.css: Difference between revisions

no edit summary
No edit summary
No edit summary
 
(30 intermediate revisions by the same user not shown)
Line 7: Line 7:
     cursor: pointer;
     cursor: pointer;
     user-select: none;
     user-select: none;
    margin-top: 1.1rem;
}
}


.char-banner-image {
.char-banner-image {
     transform: skew(13deg);
     transform: skew(13deg);
     margin-left: -7px;
     margin-left: -9px;
}
}


Line 22: Line 23:
     width: 100px;
     width: 100px;
     height: 61px;
     height: 61px;
     right: -50px;
     right: -46px;
     z-index: 1;
     z-index: 1;
     cursor: pointer;
     cursor: pointer;
Line 43: Line 44:
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 2rem 0.25rem;
     gap: 2rem 0.25rem;
     width: 350px;
     width: 336px;
     padding: 1.3rem 0 1rem 0;
     padding: 0.85rem 0 1rem 0;
     margin-left: 0.3rem;
     margin-left: 0;
     user-select: none;
     user-select: none;
}
}
Line 90: Line 91:


.character-banner-select {
.character-banner-select {
     display: flex;
     display: grid;
    grid-template-columns: repeat(5, auto);
     gap: 0.7rem 0.4rem;
     gap: 0.7rem 0.4rem;
     flex-wrap: wrap;
     flex-wrap: wrap;
     width: 320px;
     width: 320px;
     margin-left: 0.8rem;
     margin-left: 0;
     margin-bottom: 0;
     margin-bottom: 0;
     margin-top: 0.4rem;
     margin-top: 0;
     justify-content: space-between;
     justify-content: space-around;
     pointer-events: none;
     pointer-events: none;
     padding: 7px;
     padding: 8px;
    border-radius: 5px;
    border: 1px solid #8acdcd4d!important;
}
}


.character-banner-select img {
.character-banner-select img {
     height: 35px;
     height: 40px;
     width: 35px;
     width: 40px;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: -webkit-optimize-contrast;
     user-select: none;
     user-select: none;
Line 119: Line 119:
}
}


.character-banner-select .image.active {
.character-banner-select .active img {
     outline: 2px solid #7cb5ff;
     outline: 2px solid #7cb5ff;
    display: flex;
}
}


.skin-minerva .char-banner::after {
.skin-minerva .char-banner::after {
     width: 50px;
     width: 50px;
     right: -25px;
     right: -30px;
     transform: skew(13deg);
     transform: skew(13deg);
}
}


.skin-minerva .char-banner {
.skin-minerva .char-banner {
     margin-left: 1.5rem;
     margin-left: 8px;
    margin-top: 0;
}
 
.character-banner-wrap:not(.skin-minerva .character-banner-wrap) {
    margin-top: 0.5rem;
    padding-top: 0;
    margin-bottom: 1.9rem;
    padding-bottom: 0rem;
    display: inline-block;
    margin-left: 0.75rem;
}
 
.character-banner-wrap {
    border: 1px solid;
}
 
.dark-mode .character-banner-wrap:not(.skin-minerva div) {
    background: #2e2e2e!important;
}
 
.skin-minerva .character-banner-select {
    margin: 0;
}
 
.skin-minerva .character-banner-wrap {
    margin-bottom: 1rem;
}
 
.char-banner:not(.dark-mode div, .skin-minerva div) {
    box-shadow: 2px 2px 0 1px #c7d1da
}
 
.dark-mode .char-banner:not(.skin-minerva div) {
    box-shadow: 2px 2px 0 1px #5e666e;
}
 
.char-banner:not(.dark-mode div, .skin-minerva div)::after {
    box-shadow: 0 2px 0 1px #c7d1da;
    background: #d3dbe0;
}
 
.dark-mode .char-banner:not(.skin-minerva div)::after {
    box-shadow: 0 2px 0 1px #5e666e;
    background: #5e666e;
}
 
.char-banner-title:not(.dark-mode div, .skin-minerva div) {
    color: #304667;
}
}