Mudanças entre as edições de "Predefinição:Itemdata/styles.css"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
.item-wrapper { | .item-wrapper { | ||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: flex-start; | |||
position: relative; | position: relative; | ||
margin: 0 4px; | margin: 0 4px; | ||
padding: 0; | |||
width: 40px; | |||
z-index: 5; | z-index: 5; | ||
} | } | ||
.item-wrapper img { | .item-wrapper img { | ||
width: 32px; | |||
height: 32px; | |||
display: block; | |||
margin: 0 auto; | |||
} | } | ||
/* Tooltip */ | |||
.item-wrapper[data-tooltip]:hover::after { | .item-wrapper[data-tooltip]:hover::after { | ||
content: attr(data-tooltip); | content: attr(data-tooltip); | ||
| Linha 39: | Linha 47: | ||
} | } | ||
/* Quantidade embaixo do ícone */ | |||
.item-count { | .item-count { | ||
position: | position: static; | ||
margin-top: 2px; | |||
font-size: 11px; | |||
font-size: | |||
font-weight: bold; | font-weight: bold; | ||
background: | background: transparent; | ||
color: | color: #333; | ||
padding: | padding: 0; | ||
line-height: 1; | line-height: 1; | ||
white-space: nowrap; | white-space: nowrap; | ||
text-align: center; | |||
box-shadow: none; | |||
border-radius: 0; | |||
z-index: 2; | z-index: 2; | ||
} | } | ||
.item-wrapper:hover .item-count { | .item-wrapper:hover .item-count { | ||
background: | background: transparent; | ||
} | } | ||
Edição das 16h46min de 11 de junho de 2025
.item-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
margin: 0 4px;
padding: 0;
width: 40px;
z-index: 5;
}
.item-wrapper img {
width: 32px;
height: 32px;
display: block;
margin: 0 auto;
}
/* Tooltip */
.item-wrapper[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #2c2c2c;
color: #fff;
padding: 2px 5px;
font-size: 13px;
font-weight: bold;
border-radius: 4px;
white-space: nowrap;
z-index: 9999;
}
.item-wrapper[data-tooltip]:hover::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 8px 8px 0 8px;
border-style: solid;
border-color: #2c2c2c transparent transparent transparent;
z-index: 9998;
}
/* Quantidade embaixo do ícone */
.item-count {
position: static;
margin-top: 2px;
font-size: 11px;
font-weight: bold;
background: transparent;
color: #333;
padding: 0;
line-height: 1;
white-space: nowrap;
text-align: center;
box-shadow: none;
border-radius: 0;
z-index: 2;
}
.item-wrapper:hover .item-count {
background: transparent;
}