Mudanças entre as edições de "Predefinição:Price/styles.css"
Ir para navegação
Ir para pesquisar
(Criou página com '.item-price-inline { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; line-height: 1; vertical-align: middle; } .item-price-inline .item-coun...') |
m |
||
| (4 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
.item-price-inline { | .item-price-inline { | ||
display: inline-block; | |||
position: relative; | |||
vertical-align: middle; | |||
} | } | ||
.item-price-inline .item-count-inline { | .item-price-inline .item-wrapper { | ||
display: inline-block; | |||
position: relative; | |||
width: 32px; | |||
height: 32px; | |||
margin: 0; | |||
padding: 0; | |||
overflow: visible; | |||
vertical-align: middle; | |||
} | |||
.item-price-inline .item-wrapper img { | |||
display: block; | |||
margin: 0 auto; | |||
width: 100%; | |||
height: auto; | |||
} | |||
.item-price-inline .item-count { | |||
position: absolute; | |||
bottom: -5px; | |||
left: 4px; | |||
font-size: 12px; | |||
font-weight: bold; | |||
color: #fff; | |||
background: rgba(0,0,0,0.75); | |||
padding: 1px 4px; | |||
border-radius: 4px; | |||
line-height: 1; | |||
white-space: nowrap; | |||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); | |||
z-index: 10; | |||
} | |||
.item-price-inline .item-count-x { | |||
color: #bfbebe; | |||
font-size: 11px; | |||
font-weight: bold; | |||
margin-right: 2px; | |||
} | |||
.item-price-inline .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-price-inline .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; | |||
} | } | ||
Edição atual tal como às 14h53min de 17 de junho de 2025
.item-price-inline {
display: inline-block;
position: relative;
vertical-align: middle;
}
.item-price-inline .item-wrapper {
display: inline-block;
position: relative;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
overflow: visible;
vertical-align: middle;
}
.item-price-inline .item-wrapper img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}
.item-price-inline .item-count {
position: absolute;
bottom: -5px;
left: 4px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: rgba(0,0,0,0.75);
padding: 1px 4px;
border-radius: 4px;
line-height: 1;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
z-index: 10;
}
.item-price-inline .item-count-x {
color: #bfbebe;
font-size: 11px;
font-weight: bold;
margin-right: 2px;
}
.item-price-inline .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-price-inline .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;
}