Template:UnitsNavbox/styles.css: Difference between revisions

From Heroes of Might and Magic: Olden Era Official Wiki
No edit summary
No edit summary
Line 32: Line 32:
     border-radius: 8px;
     border-radius: 8px;
     background: rgba(30, 70, 92, 0.1);
     background: rgba(30, 70, 92, 0.1);
     padding-right: 4px;
     padding-top: 26px;
    max-width: 196px;
}
}


.units-navbox .group.larva {
.units-navbox .group.larva {
    padding: 0;
     align-self: center;
}
 
.units-navbox .group > * {
    margin-top: 20px;
    display: flex;
     align-items: center;
}
 
.units-navbox .group > * > *:first-child {
    flex-shrink: 0;
}
}


.units-navbox .group:before {
.units-navbox .group:before {
     position: absolute;
     position: absolute;
     right: -2px;
     left: 50%;
     top: -2px;
     top: -2px;
     width: 32px;
     width: 32px;
     height: 24px;
     height: 24px;
     line-height: 20px;
     line-height: 20px;
    margin-left: -16px;
     text-align: center;
     text-align: center;
     border: solid 2px #45494e;
     border: solid 2px #45494e;
     border-top-right-radius: 4px;
     border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
     background: #1e465c;
     background: #1e465c;
     color: #fff;
     color: #fff;

Revision as of 03:26, 23 July 2026

.units-navbox .header {
    text-align: center;
    padding: 4px;
    border: solid 2px #45494e;
    border-bottom: 0;
}

.units-navbox .town + .header {
    border-top: 0;
}

.units-navbox .header a {
    color: #fff !important;
}

.units-navbox .town {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: solid 2px #45494e;
}

.units-navbox .group {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: solid 2px #45494e;
    border-radius: 8px;
    background: rgba(30, 70, 92, 0.1);
    padding-top: 26px;
}

.units-navbox .group.larva {
    align-self: center;
}

.units-navbox .group:before {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 32px;
    height: 24px;
    line-height: 20px;
    margin-left: -16px;
    text-align: center;
    border: solid 2px #45494e;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #1e465c;
    color: #fff;
}

.units-navbox .group:nth-child(1):before {
    content: 'I'
}

.units-navbox .group:nth-child(2):before {
    content: 'II'
}

.units-navbox .group:nth-child(3):before {
    content: 'III'
}

.units-navbox .group:nth-child(4):before {
    content: 'IV'
}

.units-navbox .group:nth-child(5):before {
    content: 'V'
}

.units-navbox .group:nth-child(6):before {
    content: 'VI'
}

.units-navbox .group:nth-child(7):before {
    content: 'VII'
}

.units-navbox .group:nth-child(8):before {
    content: 'VIII'
}

.units-navbox .group.larva:before {
    content: 'IV';
}

.units-navbox .links {
    margin-top: 8px;
    display: flex;
    gap: 10px;
}

.units-navbox .faction-links {
    flex-grow: 1;
}

.units-navbox .general-links {
    margin-top: 6px;
}

.units-navbox .faction-links > *,
.units-navbox .general-links > * {
    white-space: nowrap;
    margin-right: 16px;
}

.units-navbox .general-links > *:last-child {
    margin: 0;
}

/* COLORS */
/* == human == */
.units-navbox .header.human {
    background: #8b7e47;
}

.units-navbox .human .group {
    background: rgba(139, 126, 71, 0.1);
}

.units-navbox .human .group:before {
    background: #8b7e47;
}

/* == undead == */
.units-navbox .header.undead {
    background: #122c29;
}

.units-navbox .undead .group {
    background: rgba(18, 44, 41, 0.2);
}

.units-navbox .undead .group:before {
    background: #122c29;
}

/* == nature == */
.units-navbox .header.nature {
    background: #3d0c21;
}

.units-navbox .nature .group {
    background: rgba(61, 12, 33, 0.1);
}

.units-navbox .nature .group:before {
    background: #3d0c21;
}

/* == demon == */
.units-navbox .header.demon {
    background: #400f08;
}

.units-navbox .demon .group {
    background: rgba(64, 15, 8, 0.1);
}

.units-navbox .demon .group:before {
    background: #400f08;
}

/* == unfrozen == */
.units-navbox .header.unfrozen {
    background: #1f3756;
}

.units-navbox .unfrozen .group {
    background: rgba(31, 55, 86, 0.1);
}

.units-navbox .unfrozen .group:before {
    background: #1f3756;
}

/* == dungeon == */
.units-navbox .header.dungeon {
    background: #2d143c;
}

.units-navbox .dungeon .group {
    background: rgba(45, 20, 60, 0.1);
}

.units-navbox .dungeon .group:before {
    background: #2d143c;
}

/* == neutral == */
.units-navbox .header.neutral {
    background: #3e3e3e;
}

.units-navbox .neutral .group {
    background: rgba(62, 62, 62, 0.1);
}

.units-navbox .neutral .group:before {
    background: #3e3e3e;
}