|
- @import "../../../css/ui.less";
-
- .uiEquipment {
- display: none;
- z-index: 2;
- border: 5px solid @blackB;
- text-align: center;
- width: 458px;
- height: 534px;
-
- > .heading {
- color: @white;
- width: 100%;
- height: 36px;
- background-color: @blackB;
-
- .heading-text {
- padding-top: 8px;
- margin: auto;
- }
- }
-
- .bottom {
- height: calc(100% - 36px);
- background-color: @blackC;
-
- .tabs {
- width: 100%;
- height: 40px;
- padding: 8px 8px 0px 8px;
-
- .tab {
- cursor: pointer;
- background-color: @blackB;
- color: @white;
- margin-right: 8px;
- float: left;
- height: 100%;
- padding-top: 8px;
- padding-left: 8px;
- padding-right: 8px;
- width: calc((100% - 24px) / 4);
-
- &:hover {
- background-color: @blackA;
- }
-
- &.selected {
- background-color: @blackA;
- color: @blueA;
- }
-
- &:last-child {
- margin-right: 0px;
- }
- }
- }
-
- .left, .stats, .right {
- float: left;
- height: 440px;
- }
-
- .left, .right, .itemList, .runes {
- width: 96px;
- padding: 8px;
-
- .slot {
- width: 80px;
- height: 80px;
- background-color: @blackD;
- margin-bottom: 8px;
- cursor: pointer;
- padding: 8px;
-
- &:last-child {
- margin-bottom: 0px;
- }
-
- &.show-default-icon {
- .icon {
- opacity: 0.5;
- background-image: url('../../../images/uiIcons.png') !important;
- }
-
- &[slot="head"] .icon { background-position: -0px -448px; }
- &[slot="neck"] .icon { background-position: -64px -448px; }
- &[slot="chest"] .icon { background-position: -128px -448px; }
- &[slot="hands"] .icon { background-position: -192px -448px; }
- &[slot="finger"] .icon { background-position: -256px -448px; }
- &[slot="waist"] .icon { background-position: -320px -448px; }
- &[slot="legs"] .icon { background-position: -384px -448px; }
- &[slot="feet"] .icon { background-position: -448px -448px; }
- &[slot="trinket"] .icon { background-position: -448px -384px; }
- &[slot="twoHanded"] .icon { background-position: -384px -384px; }
- &[slot^="rune"] .icon { background-position: -320px -384px; }
- }
-
- .icon {
- height: 100%;
- }
-
- &:hover {
- .icon {
- filter: brightness(160%);
- }
-
- &.empty {
- background-color: fade(@blueA, 10%);
- }
- }
- }
- }
-
- .middle {
- float: left;
- width: calc(100% - (2 * 96px));
-
- .stats {
- width: 100%;
- padding-top: 16px;
- height: calc(440px - 80px);
-
- .stat {
- height: 22px;
-
- 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);
-
- &.blueText > font {
- color: @blue;
- }
-
- &.empty {
- height: 22px;
- }
-
- &.gold {
- font {
- color: @yellowB;
- }
- }
- }
- }
-
- .runes {
- width: 100%;
- height: 80px;
- padding-left: calc((100% - (80px * 2) - 8px) / 2);
-
- .slot {
- float: left;
- margin-right: 8px;
-
- &:last-child {
- margin-right: 0px;
- }
- }
- }
- }
-
- .itemList {
- display: none;
- position: absolute;
- left: 0px;
- top: 0px;
- width: 100%;
- height: 100%;
- background-color: @blackC;
- padding: 0px;
-
- .slot {
- float: left;
- margin: 8px 0px 0px 8px;
-
- .icon {
- position: relative;
-
- &.eq {
- &:before {
- content: 'eq';
- left: -2px;
- 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);
- }
- }
- }
- }
- }
- }
- }
|