/* CSS for front-end block */ #wplc-chat-box { width: fit-content; position: relative; cursor: pointer; } .wplc_block { position: relative; display: inline-block; background: #32373c; color: #eee; border-radius: 3px; height: 35px; padding-left: 45px; margin: 5px 0 5px 0; transition: all .2s ease-in-out; cursor: pointer; border-bottom: 0px solid #111; font-size: 17px; line-height: 35px; } .wplc_block:hover { transform: translateY(-2px); } .wplc_block:after { content: ""; position: absolute; display: block; height: 0px; bottom: 0; left: 0; width: 100%; background-color: #000; opacity: 0; transition: all .2s ease-in-out; } .wplc_block:hover:after { height: 3px; opacity: .2; } #wplc-chat-box.disabled:first-child:after { content: "Disabled"; color: #fff; font-size: 17px; text-transform: uppercase; text-align: center; display: block; position: absolute; height: 100%; width: 100%; bottom: 0; left: 0; background: #0596d4; opacity: .9; } .wplc_block_logo { width: 35px; height: 35px; position: absolute; left: 0; background: #e7e7e7; display: inline-block; margin: 0; background-size: cover; background-position: center; background-color: #0596d4 !important; transition: all .2s ease-in-out; box-sizing: border-box; box-shadow: inset -2px 0px 0px 0px rgba(0, 0, 0, 0.28); -webkit-box-shadow: inset -2px 0px 0px 0px rgba(0, 0, 0, 0.28); -moz-box-shadow: inset -2px 0px 0px 0px rgba(0, 0, 0, 0.28); } .wplc_block_text { display: inline-block; height: 100%; margin-right: 7px; } .wplc_block_icon { height: 100%; width: 35px; background: transparent; display: inline-block; } .wplc_block_icon.disabled { display: none; } /* Block size styles: small */ .wplc_block.sm { height: 25px; line-height: 25px; padding-left: 30px; font-size: 12px; } .wplc_block.sm:hover:after { height: 2px; opacity: .2; } .wplc_block.sm .wplc_block_logo { height: 25px; width: 25px; } .wplc_block.sm .wplc_block_text { margin-right: 7px; } .wplc_block.sm .wplc_block_icon { margin-right: 7px; width: 13px; } /* Block size styles: large */ .wplc_block.lg { height: 80px; line-height: 80px; padding-left: 100px; font-size: 25px; } .wplc_block.lg:hover:after { height: 6px; opacity: .2; } .wplc_block.lg .wplc_block_logo { height: 80px; width: 80px; } .wplc_block.lg .wplc_block_text { margin-right: 13px; } .wplc_block.lg .wplc_block_icon { margin-right: 13px; }