|
- @import "../../../css/ui.less";
-
- .uiInventory {
- display: none;
- z-index: 2;
- width: 818px;
- border: 5px solid @blackB;
- text-align: center;
-
- > .heading {
- color: @blueA;
- width: 100%;
- height: 36px;
- background-color: @blackB;
-
- .heading-text {
- padding-top: 8px;
- margin: auto;
- }
- }
-
- position: relative;
-
- .grid {
- float: left;
- width: 808px;
- height: 408px;
- overflow: hidden;
- padding: 4px;
- position: relative;
- background-color: @blackC;
-
- .item {
- width: 72px;
- height: 72px;
- float: left;
- position: relative;
- cursor: pointer;
- box-sizing: border-box;
- margin: 4px;
- background-color: @blackD;
-
- &.hover {
- background-color: fade(@blueA, 10%);
- }
-
- &.dragging {
- position: absolute;
- opacity: 0.5;
- pointer-events: none;
- background-color: transparent;
-
- .icon {
- filter:
- brightness(100%)
- drop-shadow(0px -4px 0px @blackD)
- drop-shadow(0px 4px 0px @blackD)
- drop-shadow(4px 0px 0px @blackD)
- drop-shadow(-4px 0px 0px @blackD);
-
- -moz-filter:
- brightness(100%)
- drop-shadow(0px -4px 0px @blackD)
- drop-shadow(0px 4px 0px @blackD)
- drop-shadow(4px 0px 0px @blackD)
- drop-shadow(-4px 0px 0px @blackD);
- }
- }
-
- .quantity {
- 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);
-
- }
-
- .icon {
- width: 64px;
- height: 64px;
- position: absolute;
- left: 4px;
- top: 4px;
- }
-
- &.eq {
- .quantity {
- color: @yellow;
- }
- }
-
- &.new {
- .quantity {
- color: @green;
- }
- }
-
- &:hover {
- .icon {
- filter: brightness(160%);
-
- -moz-filter: brightness(160%);
- }
- }
- }
- }
-
- .split-box {
- display: none;
- background-color: fade(@blackD, 85%);
- text-align: center;
- position: absolute;
- left: 0%;
- top: 0%;
- width: 100%;
- height: 100%;
-
- .inner {
- border: 5px solid @blackB;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 200px;
- height: 147px;
-
- > .heading {
- color: @blueA;
- width: 100%;
- height: 36px;
- background-color: @blackB;
-
- .heading-text {
- padding-top: 8px;
- margin: auto;
- }
- }
-
- .bottom {
- height: calc(100% - 36px);
- background-color: @blackC;
- padding: 10px;
-
- .amount {
- float: left;
- color: @white;
- text-align: center;
- width: calc(100% - 80px);
- height: 36px;
- padding-top: 3px;
- border: none;
- }
-
- input, .textbox, input:-webkit-autofill {
- color: @white;
- -webkit-text-fill-color: @white;
- background-color: @blackC;
- }
-
- .button {
- width: 100%;
- height: 36px;
- background-color: @blueC;
- color: @white;
-
- &:hover {
- background-color: @blueB;
- }
-
- &:not(.btnSplit) {
- width: 40px;
- float: left;
- color: @white;
- background-color: @blackB;
-
- &:hover {
- background-color: @blackA;
- }
- }
-
- &.btnSplit {
- margin-top: 45px;
- clear: both;
- }
- }
- }
- }
- }
-
- .tooltip {
- display: none;
- position: absolute;
- border: 4px solid lighten(@blackA, 20%);
- margin-left: -4px;
- margin-top: -4px;
- background-color: fade(@blackD, 95%);
- pointer-events: none;
- padding: 6px;
- color: white;
- text-align: center;
- width: 212px;
- line-height: 18px;
-
- .name {
- margin-bottom: 8px;
- }
-
- .stats {
- color: darken(@white, 20%);
- margin-bottom: 8px;
-
- .gainStat {
- color: @green;
- }
-
- .loseStat {
- color: @red;
- }
- }
-
- .level {
- color: darken(@white, 40%);
- }
-
- .material {
- color: darken(@white, 40%);
- display: none;
- }
-
- .info {
- color: darken(@white, 60%);
- }
-
- &.no-compare .info {
- display: none;
- }
- }
- }
|