|
- @import "../../../css/colors.less";
- @pad: 8px;
- @btnSize: 64px;
-
- .uiSpells {
- position: absolute;
- right: 10px;
- top: 10px;
- height: (@btnSize + @pad);
-
- .spell {
- width: @btnSize;
- height: @btnSize;
- float: left;
- margin-left: 10px;
- background-color: #2d2136;
- cursor: pointer;
- position: relative;
- box-sizing: content-box;
- border: 5px solid fade(#3a3b4a, 90%);
- transition-property: filter;
- transition-duration: 0.1s;
-
- &:first-child {
- margin-left: 0px;
- }
-
- &:hover {
- filter: brightness(160%);
- -moz-filter: brightness(160%);
- }
-
- &.active .hotkey {
- color: @greenA;
- }
-
- .icon {
- position: absolute;
- left: 0px;
- top: 0px;
- width: 100%;
- height: 100%;
- }
-
- .cooldown {
- position: absolute;
- left: 0px;
- top: 0px;
- width: 0px;
- height: 100%;
- background-color: fade(@redB, 75%);
- }
-
- .hotkey {
- position: absolute;
- left: -2px;
- bottom: -6px;
- color: @white;
- font-size: 18px;
- z-index: 2;
- text-shadow: 2px 2px 0 #2d2136, -2px -2px 0 #2d2136, 2px -2px 0 #2d2136, -2px 2px 0 #2d2136, 2px 2px 0 #2d2136;
-
- &.no-mana {
- color: @redB;
- }
-
- }
-
- }
-
- }
-
- .mobile .uiSpells {
- top: auto;
- bottom: 10px;
- padding: 0px;
- height: auto;
- background-color: transparent;
- display: flex;
- flex-direction: column-reverse;
-
- .spell {
- position: relative;
- margin: 10px 0px 0px 0px;
- background-color: fade(#3a3b4a, 90%);
- border: none;
-
- .hotkey {
- display: none;
- }
-
- &.active:before {
- content: '';
- width: 5px;
- height: 100%;
- left: -5px;
- top: 0%;
- background-color: @greenB;
- position: absolute;
- }
-
- }
-
- }
|