Emberwild/Assets/GAME/Script/Editor/Database/AshwildDatabase.uss

/* Ashwild Database window — dark, card-based styling. Loaded by AshwildDatabaseWindow. */

.ash-root {
    flex-grow: 1;
    background-color: rgb(36, 37, 41);
}

/* ── Toolbar ─────────────────────────────────────────────── */
.ash-toolbar {
    flex-direction: row;
    align-items: center;
    height: 38px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: rgb(28, 29, 33);
    border-bottom-width: 1px;
    border-bottom-color: rgb(18, 19, 22);
}

.ash-tab {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding-left: 12px;
    padding-right: 14px;
    margin-right: 4px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0);
    border-width: 0;
    color: rgb(150, 152, 158);
    -unity-font-style: bold;
    -unity-text-align: middle-center;
}

.ash-tab__icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    opacity: 0.85;
}

.ash-tab:hover {
    background-color: rgb(46, 47, 52);
    color: rgb(220, 221, 225);
}

.ash-tab--active {
    background-color: rgb(64, 110, 220);
    color: rgb(255, 255, 255);
}

.ash-tab--active:hover {
    background-color: rgb(74, 120, 230);
    color: rgb(255, 255, 255);
}

.ash-toolbar-spacer {
    flex-grow: 1;
}

.ash-search {
    width: 180px;
    margin-right: 6px;
}

/* ── Body split ──────────────────────────────────────────── */
.ash-body {
    flex-direction: row;
    flex-grow: 1;
}

.ash-left {
    width: 250px;
    background-color: rgb(31, 32, 36);
    border-right-width: 1px;
    border-right-color: rgb(18, 19, 22);
}

.ash-list {
    flex-grow: 1;
}

.ash-right {
    flex-grow: 1;
    padding: 12px;
}

/* ── List rows ───────────────────────────────────────────── */
.ash-row {
    flex-direction: row;
    align-items: center;
    height: 48px;
    padding-left: 10px;
    padding-right: 10px;
}

.ash-row__icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-color: rgb(48, 49, 54);
    border-radius: 6px;
    -unity-background-scale-mode: scale-to-fit;
}

.ash-row__label {
    flex-grow: 1;
    color: rgb(210, 211, 215);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ash-row__tag {
    color: rgb(120, 122, 128);
    font-size: 10px;
    -unity-font-style: italic;
}

.unity-list-view__item:hover .ash-row__label {
    color: rgb(255, 255, 255);
}

/* ── Footer (New button) ─────────────────────────────────── */
.ash-footer {
    padding: 6px;
    border-top-width: 1px;
    border-top-color: rgb(18, 19, 22);
}

/* ── Buttons ─────────────────────────────────────────────── */
.ash-btn {
    height: 26px;
    border-radius: 6px;
    border-width: 0;
    background-color: rgb(60, 61, 67);
    color: rgb(220, 221, 225);
    padding-left: 12px;
    padding-right: 12px;
}

.ash-btn:hover {
    background-color: rgb(72, 73, 80);
}

.ash-btn--primary {
    background-color: rgb(64, 110, 220);
    color: rgb(255, 255, 255);
    -unity-font-style: bold;
}

.ash-btn--primary:hover {
    background-color: rgb(74, 120, 230);
}

.ash-empty {
    flex-grow: 1;
    -unity-text-align: middle-center;
    color: rgb(110, 112, 118);
    -unity-font-style: italic;
    white-space: normal;
}

.ash-row__tag {
    color: rgb(120, 122, 128);
    font-size: 10px;
    -unity-font-style: bold;
}

/* ── Action bar (Ping / Delete) ──────────────────────────── */
.ash-actionbar {
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

/* ── Hero header ─────────────────────────────────────────── */
.ash-hero {
    flex-direction: row;
    align-items: center;
    background-color: rgb(43, 44, 49);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.ash-hero__icon {
    width: 72px;
    height: 72px;
    margin-right: 14px;
    border-radius: 8px;
    background-color: rgb(30, 31, 35);
    border-width: 1px;
    border-color: rgb(56, 57, 63);
    -unity-background-scale-mode: scale-to-fit;
}

.ash-hero__icon--clickable:hover {
    border-color: rgb(64, 110, 220);
    background-color: rgb(36, 38, 44);
}

.ash-hero__info {
    flex-grow: 1;
}

.ash-hero__name {
    margin-bottom: 6px;
}

.ash-hero__name > .unity-text-field__input {
    font-size: 18px;
    -unity-font-style: bold;
    background-color: rgba(0, 0, 0, 0);
    border-width: 0;
    border-bottom-width: 1px;
    border-bottom-color: rgb(60, 61, 67);
    padding-left: 0;
    color: rgb(238, 239, 242);
}

.ash-hero__typerow {
    flex-direction: row;
    align-items: center;
}

.ash-hero__type {
    width: 150px;
    margin-right: 8px;
}

.ash-hero__badge {
    flex-direction: row;
}

.ash-badge {
    -unity-font-style: bold;
    font-size: 10px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 10px;
    -unity-text-align: middle-center;
}

/* ── Cards ───────────────────────────────────────────────── */
.ash-card {
    background-color: rgb(43, 44, 49);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.ash-card--accent {
    border-left-width: 3px;
    border-left-color: rgb(64, 110, 220);
}

.ash-card__title {
    -unity-font-style: bold;
    font-size: 12px;
    color: rgb(150, 175, 240);
    margin-bottom: 8px;
}

.ash-description .unity-text-field__input {
    min-height: 48px;
    white-space: normal;
}

/* Tidy two-column label/field rows inside cards */
.ash-card .unity-base-field__label {
    min-width: 130px;
    color: rgb(170, 172, 178);
}

.ash-buttons {
    flex-direction: row;
    margin-top: 8px;
}

.ash-buttons .ash-btn {
    margin-right: 6px;
}

/* ── Recipe equation strip ───────────────────────────────── */
.ash-equation {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgb(31, 32, 36);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}

.ash-equation__op {
    font-size: 18px;
    -unity-font-style: bold;
    color: rgb(120, 122, 130);
    margin-left: 6px;
    margin-right: 6px;
}

/* ── Recipe ingredient / result cards ────────────────────── */
.ash-rchip {
    width: 116px;
    min-height: 124px;
    align-items: center;
    background-color: rgb(46, 47, 53);
    border-radius: 10px;
    padding-top: 12px;
    padding-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
    border-width: 1px;
    border-color: rgb(56, 57, 63);
}

.ash-rchip--result {
    background-color: rgb(40, 50, 44);
    border-color: rgb(64, 110, 80);
}

.ash-rchip__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 8px;
    background-color: rgb(30, 31, 35);
    border-width: 1px;
    border-color: rgb(58, 59, 65);
    -unity-background-scale-mode: scale-to-fit;
}

.ash-rchip__icon:hover {
    border-color: rgb(64, 110, 220);
}

.ash-rchip__name {
    color: rgb(214, 215, 220);
    font-size: 11px;
    -unity-font-style: bold;
    -unity-text-align: middle-center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    margin-bottom: 8px;
}

.ash-rchip__stepper {
    flex-direction: row;
    align-items: center;
}

.ash-rchip__step {
    width: 22px;
    height: 22px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 5px;
    border-width: 0;
    background-color: rgb(60, 61, 67);
    color: rgb(225, 226, 230);
    font-size: 14px;
    -unity-font-style: bold;
    -unity-text-align: middle-center;
}

.ash-rchip__step:hover {
    background-color: rgb(72, 73, 80);
}

.ash-rchip__qty {
    width: 34px;
    color: rgb(238, 239, 242);
    -unity-font-style: bold;
    -unity-text-align: middle-center;
}

.ash-rchip__remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 9px;
    border-width: 0;
    background-color: rgba(0, 0, 0, 0);
    color: rgb(130, 110, 112);
    font-size: 11px;
}

.ash-rchip__remove:hover {
    background-color: rgb(110, 56, 58);
    color: rgb(255, 210, 210);
}

/* Dashed "add ingredient" tile */
.ash-rchip--add {
    justify-content: center;
    background-color: rgba(64, 110, 220, 0.07);
    border-color: rgb(74, 90, 130);
}

.ash-rchip--add:hover {
    background-color: rgba(64, 110, 220, 0.16);
    border-color: rgb(96, 130, 210);
}

.ash-rchip__plus {
    font-size: 30px;
    -unity-font-style: bold;
    color: rgb(120, 150, 220);
    -unity-text-align: middle-center;
}

/* ── Recipe name field (styled like an item hero name) ───── */
.ash-recipe-name {
    margin-bottom: 12px;
}