|
- .uiSpells{position:absolute;right:10px;top:10px;height:72px;box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiSpells .spell{width:64px;height:64px;float:left;margin-left:10px;background-color:#2d2136;cursor:pointer;position:relative;box-sizing:content-box;border:5px solid rgba(58,59,74,.9);transition-property:filter;transition-duration:.1s}.uiSpells .spell:first-child{margin-left:0}.uiSpells .spell:hover{filter:brightness(160%);-moz-filter:brightness(160%)}.uiSpells .spell.active .hotkey{color:#80f643}.uiSpells .spell .icon{position:absolute;left:0;top:0;width:100%;height:100%}.uiSpells .spell .cooldown{position:absolute;left:0;top:0;width:0;height:100%;background-color:rgba(212,51,70,.75)}.uiSpells .spell .hotkey{position:absolute;left:-2px;bottom:-6px;color:#fcfcfc;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}.uiSpells .spell .hotkey.no-mana{color:#d43346}.mobile .uiSpells{top:auto;bottom:10px;padding:0;height:auto;background-color:transparent;display:flex;flex-direction:column-reverse}.mobile .uiSpells .spell{position:relative;margin:10px 0 0 0;background-color:rgba(58,59,74,.9);border:none}.mobile .uiSpells .spell .hotkey{display:none}.mobile .uiSpells .spell.active:before{content:'';width:5px;height:100%;left:-5px;top:0;background-color:#4ac441;position:absolute}
|
