|
- @import "../../../css/colors.less";
- @pad: 8px;
-
- .uiHud {
- position: absolute;
- left: 10px;
- top: 10px;
-
- .hudBox {
- position: absolute;
- left: 0px;
- top: 0px;
- width: calc(280px + (@pad * 2));
- padding: @pad;
- background-color: fade(#3a3b4a, 90%);
- box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;
-
- .portraitBox {
- float: left;
- margin-right: 12px;
-
- .portrait {
- visibility: hidden;
- width: 64px;
- height: 64px;
- }
-
- }
-
- .boxes {
- width: calc(100% - 76px);
- float: left;
- height: 100%;
-
- .statBox {
- width: 100%;
- height: 18px;
- margin-bottom: 5px;
- position: relative;
-
- &:last-child {
- margin-bottom: 0px;
- }
-
- [class^="stat"] {
- position: absolute;
- left: 0px;
- top: 0px;
- height: 100%;
- }
-
- .statManaReserve {
- position: absolute;
- right: 0%;
- top: 0px;
- left: auto;
- height: 100%;
- background-color: @grayB;
- }
-
- .text {
- position: absolute;
- left: 0px;
- top: 0px;
- width: 100%;
- height: 100%;
- text-align: center;
- color: @white;
- padding: 2px 0px;
- line-height: 16px;
- text-shadow: 2px 0px #2d2136, -2px 0px #2d2136, 0px -2px #2d2136, 0px 2px #2d2136, -2px -2px #2d2136, -2px 2px #2d2136, 2px -2px #2d2136, 2px 2px #2d2136;
- }
-
- &:nth-child(1) {
- background-color: #802343;
- }
-
- &:nth-child(2) {
- background-color: #42548d;
- }
-
- &:nth-child(3) {
- background-color: #386646;
- }
-
- .statHp {
- background-color: #d43346;
- }
-
- .statMana {
- background-color: #3fa7dd;
- }
-
- .statXp {
- background-color: #4ac441;
- }
-
- }
-
- }
-
- }
-
- .quickBar {
- position: absolute;
- left: calc(290px + (@pad * 2));
- top: 0px;
- box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;
-
- .quickItem {
- display: none;
- width: 80px;
- height: 80px;
- background-color: fade(#3a3b4a, 90%);
- cursor: pointer;
- padding: 8px;
- position: relative;
-
- .icon {
- height: 100%;
- filter: brightness(100%)
- drop-shadow(0px -4px 0px @blackC)
- drop-shadow(0px 4px 0px @blackC)
- drop-shadow(4px 0px 0px @blackC)
- drop-shadow(-4px 0px 0px @blackC);
- }
-
- .info {
- left: 6px;
- bottom: 3px;
- position: absolute;
- color: @white;
- filter: drop-shadow(0px -2px 0px @blackD)
- drop-shadow(0px 2px 0px @blackD)
- drop-shadow(2px 0px 0px @blackD)
- drop-shadow(-2px 0px 0px @blackD);
- -moz-filter: drop-shadow(0px -2px 0px @blackD)
- drop-shadow(0px 2px 0px @blackD)
- drop-shadow(2px 0px 0px @blackD)
- drop-shadow(-2px 0px 0px @blackD);
- }
-
- .cooldown {
- position: absolute;
- left: 0px;
- top: 0px;
- width: 0px;
- height: 100%;
- background-color: fade(@red, 75%);
- }
-
- &:hover {
- .icon {
- filter: brightness(160%);
- -moz-filter: brightness(160%);
- }
-
- &.empty {
- background-color: fade(@blueA, 10%);
- }
-
- }
-
- }
-
- }
-
- }
|