« Modèle:Fabrication/styles.css » : différence entre les versions
De Nefald
Autres actions
m charte graphique Balise : Révoqué |
Aucun résumé des modifications |
||
| (Une version intermédiaire par le même utilisateur non affichée) | |||
| Ligne 1 : | Ligne 1 : | ||
/* Conteneur principal */ | /* Conteneur principal */ | ||
.mc-craft-container { | .mc-craft-container { | ||
display: inline-block; | display: inline-block; | ||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border: 2px solid var(--color-surface-4); | border: 2px solid var(--color-surface-4); | ||
border-radius: 4px; | border-radius: 4px; | ||
padding: 12px; | padding: 12px; | ||
margin: 8px 0; | margin: 8px 0; | ||
font-family: 'Minecraft', monospace, sans-serif; | font-family: 'Minecraft', monospace, sans-serif; | ||
} | } | ||
/* Nom de la recette */ | /* Nom de la recette */ | ||
.mc-craft-name { | .mc-craft-name { | ||
text-align: center; | text-align: center; | ||
font-weight: var(--font-weight-semibold); | font-weight: var(--font-weight-semibold); | ||
font-size: 14px; | font-size: 14px; | ||
margin-bottom: 8px; | margin-bottom: 8px; | ||
color: var(--color-emphasized); | color: var(--color-emphasized); | ||
} | } | ||
/* Wrapper grille + flèche + résultat */ | /* Wrapper grille + flèche + résultat */ | ||
.mc-craft-wrapper { | .mc-craft-wrapper { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 12px; | gap: 12px; | ||
} | } | ||
/* Grille de fabrication */ | /* Grille de fabrication */ | ||
/* Couleurs fixes : identité visuelle Minecraft */ | /* Couleurs fixes : identité visuelle Minecraft */ | ||
.mc-craft-grid { | .mc-craft-grid { | ||
display: grid; | display: grid; | ||
gap: 2px; | gap: 2px; | ||
background: #8B8B8B; | background: #8B8B8B; | ||
padding: 2px; | padding: 2px; | ||
border: 1px solid #555; | border: 1px solid #555; | ||
} | } | ||
.mc-craft-2x2 { | .mc-craft-2x2 { | ||
grid-template-columns: repeat(2, 36px); | grid-template-columns: repeat(2, 36px); | ||
grid-template-rows: repeat(2, 36px); | grid-template-rows: repeat(2, 36px); | ||
} | } | ||
.mc-craft-3x3 { | .mc-craft-3x3 { | ||
grid-template-columns: repeat(3, 36px); | grid-template-columns: repeat(3, 36px); | ||
grid-template-rows: repeat(3, 36px); | grid-template-rows: repeat(3, 36px); | ||
} | } | ||
/* Cellule individuelle */ | /* Cellule individuelle */ | ||
/* Couleurs fixes : identité visuelle Minecraft */ | /* Couleurs fixes : identité visuelle Minecraft */ | ||
.mc-craft-cell { | .mc-craft-cell { | ||
width: 36px; | width: 36px; | ||
height: 36px; | height: 36px; | ||
background: #C6C6C6; | background: #C6C6C6; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
position: relative; | position: relative; | ||
border: 1px solid #373737; | border: 1px solid #373737; | ||
} | } | ||
.mc-craft-cell:hover { | .mc-craft-cell:hover { | ||
background: #d0d0d0; | background: #d0d0d0; | ||
} | } | ||
.mc-craft-empty { | .mc-craft-empty { | ||
background: #8B8B8B; | background: #8B8B8B; | ||
} | } | ||
/* Images des items */ | /* Images des items */ | ||
.mc-craft-item { | .mc-craft-item { | ||
image-rendering: pixelated; | image-rendering: pixelated; | ||
image-rendering: crisp-edges; | image-rendering: crisp-edges; | ||
} | } | ||
/* Flèche */ | /* Flèche */ | ||
.mc-craft-arrow { | .mc-craft-arrow { | ||
font-size: 24px; | font-size: 24px; | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
font-weight: bold; | font-weight: bold; | ||
padding: 0 4px; | padding: 0 4px; | ||
} | } | ||
/* Résultat */ | /* Résultat */ | ||
.mc-craft-result { | .mc-craft-result { | ||
position: relative; | position: relative; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
} | } | ||
/* Couleurs fixes : identité visuelle Minecraft */ | /* Couleurs fixes : identité visuelle Minecraft */ | ||
.mc-craft-result-cell { | .mc-craft-result-cell { | ||
width: 36px; | width: 36px; | ||
height: 36px; | height: 36px; | ||
background: #C6C6C6; | background: #C6C6C6; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
border: 2px solid #373737; | border: 2px solid #373737; | ||
box-shadow: 0 2px 4px rgba(0,0,0,0.2); | box-shadow: 0 2px 4px rgba(0,0,0,0.2); | ||
} | } | ||
/* Compteur de résultat */ | /* Compteur de résultat */ | ||
/* Couleurs fixes : UI Minecraft (blanc sur noir) */ | /* Couleurs fixes : UI Minecraft (blanc sur noir) */ | ||
.mc-craft-count { | .mc-craft-count { | ||
position: absolute; | position: absolute; | ||
bottom: 2px; | bottom: 2px; | ||
right: 2px; | right: 2px; | ||
background: rgba(0,0,0,0.7); | background: rgba(0,0,0,0.7); | ||
color: #ffffff; | color: #ffffff; | ||
font-size: 11px; | font-size: 11px; | ||
font-weight: bold; | font-weight: bold; | ||
padding: 1px 4px; | padding: 1px 4px; | ||
border-radius: 2px; | border-radius: 2px; | ||
text-shadow: 1px 1px 0 #000; | text-shadow: 1px 1px 0 #000; | ||
} | } | ||
/* Description */ | /* Description */ | ||
.mc-craft-description { | .mc-craft-description { | ||
margin-top: 8px; | margin-top: 8px; | ||
font-size: 12px; | font-size: 12px; | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
text-align: center; | text-align: center; | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
/* Responsive */ | /* Responsive */ | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.mc-craft-wrapper { | .mc-craft-wrapper { | ||
flex-direction: column; | flex-direction: column; | ||
gap: 8px; | gap: 8px; | ||
} | } | ||
.mc-craft-arrow { | .mc-craft-arrow { | ||
transform: rotate(90deg); | transform: rotate(90deg); | ||
} | } | ||
} | } | ||
Dernière version du 3 mars 2026 à 17:51
/* 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);
}
}