.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; } } } } .slot-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border: 1px solid light-dark(@dark-blue, @golden); border-radius: 6px; z-index: 1; background: @dark-blue; justify-content: center; color: light-dark(@dark-blue, @golden); .armor-slot { cursor: pointer; transition: all 0.3s ease; font-size: var(--font-size-12); .fa-shield-halved { color: light-dark(@dark-blue-40, @golden-40); } } } }