body { position: relative; } .shinobi_stream { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .shinobi_hud { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: 0.2s } .shinobi_hud:hover { opacity: 1 } .shinobi_hud .shinobi_viewers { position: absolute; top: 5px; left: 5px; } .shinobi_hud .shinobi_viewers { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #777; border-radius: 10px; font-family: sans-serif; } iframe.stream-element { border: 0; } /* All-CSS Toggle Switch (Checkbox Hack) by Marcus Burnette - https://codepen.io/mburnette/pen/LxNxNg */ .shinobi_ws_http_toggle { width: 50px; height: 20px; position: absolute; bottom: 10px; left: 10px; } .shinobi_ws_http_toggle input[type=checkbox] { height: 0; width: 0; visibility: hidden; } .shinobi_ws_http_toggle label { cursor: pointer; text-indent: -9999px; width: 100px; height: 20px; background: grey; display: block; border-radius: 100px; position: relative; } .shinobi_ws_http_toggle label:after { content: ''; position: absolute; top: 5px; left: 5px; width: 10px; height: 10px; background: #fff; border-radius: 90px; transition: 0.3s; } .shinobi_ws_http_toggle input:checked+label { background: #00118c; } .shinobi_ws_http_toggle input:checked+label:after { left: calc(100% - 5px); transform: translateX(-100%); } .shinobi_ws_http_toggle label:active:after { width: 10px; } .unmute-embed-audio { position: absolute; bottom: 5px; right: 5px; z-index: 1000; }