daggerheart/styles/less/ux/tooltip/armorManagement.less
2026-02-13 13:17:00 +01:00

100 lines
3 KiB
Text

.bordered-tooltip.locked-tooltip .daggerheart.armor-management-container {
display: flex;
flex-direction: column;
gap: 16px;
.armor-source-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
.armor-source-label {
font-size: var(--font-size-24);
font-weight: bold;
}
.status-bar {
display: flex;
justify-content: center;
position: relative;
width: 80px;
height: 20px;
.status-value {
position: absolute;
display: flex;
padding: 0 5px;
font-size: 1rem;
align-items: center;
width: 80px;
height: 20px;
justify-content: center;
text-align: center;
z-index: 2;
color: @beige;
input[type='number'] {
background: transparent;
font-size: 1rem;
width: 30px;
height: 15px;
text-align: center;
border: none;
outline: 2px solid transparent;
color: @beige;
&.bar-input {
padding: 0;
color: @beige;
backdrop-filter: none;
background: transparent;
transition: all 0.3s ease;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9.5px);
}
}
}
.bar-label {
width: 40px;
}
}
.progress-bar {
position: absolute;
appearance: none;
width: 80px;
height: 20px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
z-index: 1;
background: @dark-blue;
&::-webkit-progress-bar {
border: none;
background: @dark-blue;
border-radius: 6px;
}
&::-webkit-progress-value {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-webkit-progress-value {
background: @gradient-stress;
border-radius: 6px;
}
&::-moz-progress-bar {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-moz-progress-bar {
background: @gradient-stress;
border-radius: 6px;
}
}
}
}
}