img#stream-image { width: 640px; height: 480px; display: block; background-color: var(--bg-color-stream-screen); } img.stream-image-active { -webkit-filter: none; filter: none; } img.stream-image-inactive { -webkit-filter: grayscale(100%) brightness(75%) sepia(75%); filter: grayscale(100%) brightness(75%) sepia(75%); } div#stream-box { position: relative; display: inline-block; border: var(--dark-border); } div.stream-box-inactive::after { cursor: wait; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; background: radial-gradient(transparent 20%, black); } div.stream-box-mouse-enabled { cursor: url("../svg/stream-mouse-cursor.svg"), pointer; } select#stream-quality-select { margin: 8px 0 8px 0; } span#stream-size-value { } div#stream-size-slider-box { margin-top: 5px; display: flex; } @supports (-webkit-appearance:none) { div#stream-size-slider-box input[type=range] { cursor: pointer; outline: none; width: 100%; box-shadow: none; background: transparent; margin: 8px 0 8px 0; -webkit-appearance: none; } } @supports not (-webkit-appearance:none) { div#stream-size-slider-box input[type=range] { cursor: pointer; outline: none; width: 100%; box-shadow: none; margin-left: 0; margin-right: 0; } } div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track { height: 5px; background: var(--bg-color-light); border-radius: 3px; } div#stream-size-slider-box input[type=range]::-webkit-slider-thumb { border: var(--intensive-border); height: 18px; width: 18px; border-radius: 25px; background: var(--bg-color-intensive); -webkit-appearance: none; margin-top: -7px; } div#stream-size-slider-box input[type=range]::-moz-range-track { height: 5px; background: var(--bg-color-light); border-radius: 3px; } div#stream-size-slider-box input[type=range]::-moz-range-thumb { border: var(--intensive-border); height: 18px; width: 18px; border-radius: 25px; background: var(--bg-color-intensive); } div#stream-mouse-buttons { display: none; margin: 0; padding: 0; font-size: 0; }