Editing Template:Infobox item/styles.cssGive feedback

/* Infobox container */
.infobox_item {
    float: right;
    display: inline-block;
    vertical-align: top;
}

/* Main infobox table */
.item-infobox {
    text-align: left !important;
    border-collapse: collapse;
    width: 312px;
    max-width: 100%;
    height: 30px;
    color: #FFEFD7;
    padding: 12px;
    font-family: 'Retail Demo', 'Open Sans', serif;
}

/* Item type backgrounds - table level */
.item-infobox.item-type-weapon {
    background-color: #654324;
}

.item-infobox.item-type-vitality {
    background-color: #3b4421;
}

.item-infobox.item-type-spirit {
    background-color: #532b41;
}

.item-infobox.item-type-seasonal {
    background-color: #455862;
}

/* Header */
.infobox-header {
    width: 280px;
    padding: 5px 12px;
    text-align: center !important;
    font-size: 24px;
    font-family: 'Retail Demo', 'Open Sans', serif;
}

.infobox-header span {
    font-weight: bold;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
}

/* Header backgrounds by type */
.infobox-header.item-type-weapon {
    background-color: #c8761c;
}

.infobox-header.item-type-vitality {
    background-color: #6f8724;
}

.infobox-header.item-type-spirit {
    background-color: #ba5ca6;
}

.infobox-header.item-type-seasonal {
    background-color: #466f84;
}

/* Image section */
.infobox-image {
    padding: 5px;
    text-align: center !important;
    position: relative;
}

.infobox-image > div {
    position: relative;
    display: inline-block;
}

/* Enhanced item overlay */
.enhanced-overlay {
    z-index: 3;
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, #3fdcff99, #3fdcff40 50%, #0000);
    pointer-events: none;
}

/* Info labels */
.infobox-label {
    text-align: right !important;
    width: 50%;
    padding-right: 0.5em;
}

/* Border colors by type */
.infobox-label.item-type-weapon {
    border-right: 1px solid #c8761c;
}

.infobox-label.item-type-vitality {
    border-right: 1px solid #6f8724;
}

.infobox-label.item-type-spirit {
    border-right: 1px solid #8B56B4;
}

.infobox-label.item-type-seasonal {
    border-right: 1px solid #466f84;
}

/* Info values */
.infobox-value {
    padding-left: 0.5em;
}

/* Street Brawl label */
.infobox-label.street-brawl-label {
    text-align: center !important;
}

.infobox-label.legendary-label {
    text-align: center !important;
    font-size: 1.3em;
    text-transform: uppercase;
}

.infobox-label.enhanced-label {
    text-align: center !important;
    font-size: 1.3em;
    text-transform: uppercase;
}

/* Description */
.infobox-description {
    text-align: left !important;
    padding: 0 12px;
    color: #FFEFD7;
}

.infobox-description.item-type-weapon {
    background-color: #432d15;
}

.infobox-description.item-type-vitality {
    background-color: #3b4421;
}

.infobox-description.item-type-spirit {
    background-color: #ba5ca6;
}

/* Stats */
.infobox-stat {
    text-align: left !important;
    padding: 2px 12px;
}

.infobox-stat.item-type-weapon {
    background-color: #654324;
}

.infobox-stat.item-type-vitality {
    background-color: #3b4421;
}

.infobox-stat.item-type-spirit {
    background-color: #532b41;
}

/* Passive header */
.passive-header {
    text-align: left !important;
    padding: 2px 12px;
}

.passive-header.item-type-weapon {
    background-color: #402b16;
    color: #C4B49E;
}

.passive-header.item-type-vitality {
    background-color: #282a16;
    color: #BDB59D;
}

.passive-header.item-type-spirit {
    background-color: #3a2231;
    color: #C1B2A8;
}

/* Cooldown/Chargeup values */
.cooldown-value,
.chargeup-value {
    text-align: center !important;
    width: 25%;
    max-width: 80px;
    background-color: #0C1414;
    color: #FFEFD7;
}

/* Passive description */
.passive-description {
    text-align: left !important;
    padding: 2px 12px;
}

/* Passive stats layout */
.passive-stat-container {
    padding: 0;
}

.passive-stats-flex {
    display: flex;
    gap: 4px;
    margin: 6px auto;
    width: 300px;
    max-width: 280px;
}

.passive-main-stat {
    flex: 1;
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center !important;
}

.passive-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px auto;
    width: 300px;
    max-width: 280px;
}

.passive-stats-grid .passive-main-stat {
    flex: 1 1 calc(33.33% - 4px);
    min-width: 80px;
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center !important;
}

.passive-alt-stats {
    flex: 2;
    border-radius: 8px;
    padding: 4px 8px;
}

.passive-alt-stats-standalone {
    box-sizing: border-box;
    border-radius: 8px;
    margin: 6px auto;
    width: 300px;
    max-width: 280px;
    padding: 4px 8px;
}

/* Stat backgrounds by type */
.stat-bg-weapon {
    background-color: #402e15;
}

.stat-bg-vitality {
    background-color: #2a3416;
}

.stat-bg-spirit {
    background-color: #392233;
}

.stat-bg-seasonal {
    background-color: #35454f;
}

/* Active header */
.active-header {
    text-align: left !important;
    padding: 2px 12px;
}

.active-header.item-type-weapon {
    background-color: #402b16;
}

.active-header.item-type-vitality {
    background-color: #282a16;
}

.active-header.item-type-spirit {
    background-color: #311e26;
}

.active-header.item-type-seasonal {
    background-color: #2e363c;
}

/* Active description */
.active-description {
    text-align: left !important;
    padding: 2px 12px;
}

/* Active stats - reuse passive stat classes with active- prefix */
.active-stat-container {
    padding: 0;
}

.active-stats-flex {
    display: flex;
    gap: 4px;
    margin: 6px auto;
    width: 300px;
    max-width: 280px;
}

.active-main-stat {
    flex: 1;
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center !important;
}

.active-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px auto;
    width: 300px;
    max-width: 280px;
}

.active-stats-grid .active-main-stat {
    flex: 1 1 calc(33.33% - 4px);
    min-width: 80px;
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center !important;
}

.active-alt-stats {
    flex: 2;
    border-radius: 8px;
    padding: 4px 8px;
}

.active-alt-stats-standalone {
    box-sizing: border-box;
    border-radius: 8px;
    margin: 6px auto;
    width: 300px;
    max-width: 280px;
    padding: 4px 8px;
}

/* Components header */
.components-header {
    text-align: left !important;
    padding: 0 12px;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Retail Demo', 'Open Sans', serif;
}

.components-header.item-type-weapon {
    background-color: #50341b;
    color: #DCCFC6;
}

.components-header.item-type-vitality {
    background-color: #303019;
    color: #C7C9C6;
}

.components-header.item-type-spirit {
    background-color: #342227;
    color: #C9C7CB;
}

/* Is component of header */
.is-component-of-header {
    text-align: left !important;
    padding: 0 12px;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Retail Demo', 'Open Sans', serif;
}

.is-component-of-header.item-type-weapon {
    background-color: #50341b;
    color: #D1CBC6;
}

.is-component-of-header.item-type-vitality {
    background-color: #303019;
    color: #CACFC7;
}

.is-component-of-header.item-type-spirit {
    background-color: #342227;
    color: #CCC8D2;
}

/* Codename */
.codename {
    padding-left: 12px;
}

/* Sounds header */
.sounds-header {
    text-align: center !important;
    padding: 2px 12px;
}

.sounds-header.item-type-weapon {
    background-color: #402b16;
}

.sounds-header.item-type-vitality {
    background-color: #282a16;
}

.sounds-header.item-type-spirit {
    background-color: #311e26;
}