Mudanças entre as edições de "Predefinição:Achiev/styles.css"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
.conquista-box { | .conquista-box { | ||
display: flex; | display: flex; | ||
background-color: rgba(100, 100, 100, 0.8); | background-color: rgba(100, 100, 100, 0.8); | ||
border: 1px solid #333; | border: 1px solid #333; | ||
border-radius: 4px; | border-radius: 4px; | ||
| Linha 15: | Linha 15: | ||
width: 82px; | width: 82px; | ||
height: 82px; | height: 82px; | ||
background-color: #1c1005; | background-color: #1c1005; | ||
border: 3px solid gold; | border: 3px solid gold; | ||
border-radius: 10px; | border-radius: 10px; | ||
box-shadow: | box-shadow: | ||
0 0 0 2px #522e00 inset, | 0 0 0 2px #522e00 inset, | ||
0 0 6px rgba(255, 215, 0, 0.5); | 0 0 6px rgba(255, 215, 0, 0.5); | ||
| Linha 28: | Linha 28: | ||
} | } | ||
.conquista-icon img{ | .conquista-icon img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| Linha 51: | Linha 51: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
align-items: flex-end; | |||
gap: 6px; | gap: 6px; | ||
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
.item { | .conquista-recompensas .item { | ||
display: inline-block; | |||
position: relative; | position: relative; | ||
margin: 0 4px; | |||
overflow: visible; | |||
} | |||
.conquista-recompensas .item .item-img { | |||
display: block; | |||
vertical-align: bottom; | |||
width: 32px; | width: 32px; | ||
height: 32px; | height: 32px; | ||
} | } | ||
.item | .conquista-recompensas .item .item-qtd { | ||
.item-qtd { | |||
position: absolute; | position: absolute; | ||
bottom: - | bottom: -4px; | ||
right: - | right: -4px; | ||
font-size: 10px; | font-size: 10px; | ||
font-weight: bold; | font-weight: bold; | ||
background: rgba(0, 0, 0, 0.75); | |||
color: white; | |||
padding: 1px 4px; | |||
border-radius: 4px; | |||
line-height: 1; | |||
box-shadow: 0 0 2px #000; | |||
white-space: nowrap; | |||
z-index: 2; | |||
} | } | ||
.conquista-recompensas .item:hover .item-qtd { | .conquista-recompensas .item:hover .item-qtd { | ||
background: rgba(0, 0, 0, 0.9); | |||
} | } | ||
Edição das 13h25min de 7 de junho de 2025
.conquista-box {
display: flex;
background-color: rgba(100, 100, 100, 0.8);
border: 1px solid #333;
border-radius: 4px;
padding: 6px;
width: max-content;
min-width: 500px;
font-family: sans-serif;
color: white;
box-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.conquista-icon {
width: 82px;
height: 82px;
background-color: #1c1005;
border: 3px solid gold;
border-radius: 10px;
box-shadow:
0 0 0 2px #522e00 inset,
0 0 6px rgba(255, 215, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
align-self: center;
margin-right: 16px;
}
.conquista-icon img {
width: 100%;
height: 100%;
border-radius: 7px;
}
.conquista-conteudo {
flex-grow: 1;
}
.conquista-titulo {
font-weight: bold;
font-size: 1.2em;
}
.conquista-descricao {
font-size: 1em;
color: #ccc;
}
.conquista-recompensas {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 6px;
margin-top: 10px;
}
.conquista-recompensas .item {
display: inline-block;
position: relative;
margin: 0 4px;
overflow: visible;
}
.conquista-recompensas .item .item-img {
display: block;
vertical-align: bottom;
width: 32px;
height: 32px;
}
.conquista-recompensas .item .item-qtd {
position: absolute;
bottom: -4px;
right: -4px;
font-size: 10px;
font-weight: bold;
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 1px 4px;
border-radius: 4px;
line-height: 1;
box-shadow: 0 0 2px #000;
white-space: nowrap;
z-index: 2;
}
.conquista-recompensas .item:hover .item-qtd {
background: rgba(0, 0, 0, 0.9);
}