(Feat) Tools Creation
This commit is contained in:
@@ -0,0 +1,427 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user