Modèle:Fabrication/styles.css

/* Conteneur principal */

.mc-craft-container {

display: inline-block;

background: var(--color-surface-1);

border: 2px solid var(--color-surface-4);

border-radius: 4px;

padding: 12px;

margin: 8px 0;

font-family: 'Minecraft', monospace, sans-serif;

}



/* Nom de la recette */

.mc-craft-name {

text-align: center;

font-weight: var(--font-weight-semibold);

font-size: 14px;

margin-bottom: 8px;

color: var(--color-emphasized);

}



/* Wrapper grille + flèche + résultat */

.mc-craft-wrapper {

display: flex;

align-items: center;

gap: 12px;

}



/* Grille de fabrication */

/* Couleurs fixes : identité visuelle Minecraft */

.mc-craft-grid {

display: grid;

gap: 2px;

background: #8B8B8B;

padding: 2px;

border: 1px solid #555;

}



.mc-craft-2x2 {

grid-template-columns: repeat(2, 36px);

grid-template-rows: repeat(2, 36px);

}



.mc-craft-3x3 {

grid-template-columns: repeat(3, 36px);

grid-template-rows: repeat(3, 36px);

}



/* Cellule individuelle */

/* Couleurs fixes : identité visuelle Minecraft */

.mc-craft-cell {

width: 36px;

height: 36px;

background: #C6C6C6;

display: flex;

align-items: center;

justify-content: center;

position: relative;

border: 1px solid #373737;

}



.mc-craft-cell:hover {

background: #d0d0d0;

}



.mc-craft-empty {

background: #8B8B8B;

}



/* Images des items */

.mc-craft-item {

image-rendering: pixelated;

image-rendering: crisp-edges;

}



/* Flèche */

.mc-craft-arrow {

font-size: 24px;

color: var(--color-subtle);

font-weight: bold;

padding: 0 4px;

}



/* Résultat */

.mc-craft-result {

position: relative;

display: flex;

align-items: center;

justify-content: center;

}



/* Couleurs fixes : identité visuelle Minecraft */

.mc-craft-result-cell {

width: 36px;

height: 36px;

background: #C6C6C6;

display: flex;

align-items: center;

justify-content: center;

border: 2px solid #373737;

box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}



/* Compteur de résultat */

/* Couleurs fixes : UI Minecraft (blanc sur noir) */

.mc-craft-count {

position: absolute;

bottom: 2px;

right: 2px;

background: rgba(0,0,0,0.7);

color: #ffffff;

font-size: 11px;

font-weight: bold;

padding: 1px 4px;

border-radius: 2px;

text-shadow: 1px 1px 0 #000;

}



/* Description */

.mc-craft-description {

margin-top: 8px;

font-size: 12px;

color: var(--color-subtle);

text-align: center;

font-style: italic;

}



/* Responsive */

@media (max-width: 480px) {

.mc-craft-wrapper {

flex-direction: column;

gap: 8px;

}



.mc-craft-arrow {

transform: rotate(90deg);

}

}