@import "../../../css/ui.less"; @pad: 8px; @btnSize: 64px; .uiMessages { position: absolute; left: 10px; bottom: 10px; width: 480px; padding: @pad; pointer-events: none; &.typing { .el.message { display: block; } .filters { pointer-events: all; display: block; } .list { overflow-y: auto; background-color: @darkGray; .list-message { filter: none; } } } &.active { .list-message { opacity: 1 !important; } } .filters { display: none; width: 100%; height: 26px; margin-bottom: 10px; .filter { height: 100%; background-color: @blackC; float: left; color: @blackA; margin-right: 10px; padding: 5px 10px; cursor: pointer; &:hover { background-color: @blackB; color: @grayD; } &.active { background-color: @blackB; color: @green; &:hover { background-color: @blackA; color: @grayB; } } } } .list { overflow-y: hidden; width: 100%; max-height: 320px; .list-message { width: 100%; padding: 5px 10px; 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); word-wrap: break-word; line-height: 18px; &.q0 { color: @white; } &.q1 { color: @blue; } a, &.q2 { color: @yellow; } &.q3 { color: @purple; } &.q4 { color: @orange; } &.color-green { color: @green; } &.color-red { color: @red; } &.color-cyan { color: @blueA; } display: none; } &.rep .list-message.rep { display: block; } &.chat .list-message.chat { display: block; } &.info .list-message.info { display: block; } &.loot .list-message.loot { display: block; } } .el.message { display: none; text-align: left; background-color: @gray; width: 100%; color: @white; padding: 5px 10px; } }