Template:UnitsNavbox/styles.css: Difference between revisions

From Heroes of Might and Magic: Olden Era Official Wiki
No edit summary
N (talk | contribs)
Trying same border color as infoboxes
Line 2: Line 2:
     text-align: center;
     text-align: center;
     padding: 4px;
     padding: 4px;
     border: solid 2px #45494e;
     border: solid 2px #BCB096;
     border-bottom: 0;
     border-bottom: 0;
}
}
Line 20: Line 20:
     gap: 8px;
     gap: 8px;
     padding: 8px;
     padding: 8px;
     border: solid 2px #45494e;
     border: solid 2px #BCB096;
}
}


Line 29: Line 29:
     flex-direction: column;
     flex-direction: column;
     align-items: flex-start;
     align-items: flex-start;
     border: solid 2px #45494e;
     border: solid 2px #BCB096;
     border-radius: 8px;
     border-radius: 8px;
     background: rgba(30, 70, 92, 0.1);
     background: rgba(30, 70, 92, 0.1);
Line 48: Line 48:
     margin-left: -16px;
     margin-left: -16px;
     text-align: center;
     text-align: center;
     border: solid 2px #45494e;
     border: solid 2px #BCB096;
     border-bottom-left-radius: 8px;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
     border-bottom-right-radius: 8px;

Revision as of 14:46, 23 July 2026

.units-navbox .header {
    text-align: center;
    padding: 4px;
    border: solid 2px #BCB096;
    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 #BCB096;
}

.units-navbox .group {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: solid 2px #BCB096;
    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 #BCB096;
    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;
}