html {
margin: 0em;
padding: 0;
border-color: red;
}
body {
height: 95vh;
box-sizing: border-box;
background: black;
color: red;
border-color: red;
font-family: sans-serif;
font-size: medium;
color: red;
display: flex;
flex-direction: column;
z-index: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
.header {
display: flex;
justify-content: center;
padding: 20px;
filter: drop-shadow(rgba(220, 38, 38, 10) 0px 0px 10px);
}
.main-container {
display: flex;
height: calc(100vh - 109px);
gap: 10px;
padding: 0 20px 20px 20px;
}
.stream-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
position: relative;
}
.viewer-counter {
position: absolute;
bottom: 10px;
right: 10px;
padding: 6px 12px;
font-family: Arial, sans-serif;
font-size: 13px;
z-index: 1000;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
}
.offline-txt {
align-self: anchor-center;
text-align: center;
font-size: 30px;
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}
.viewer-counter .live-dot {
width: 8px;
height: 8px;
background: #ff0000;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.viewer-counter .count {
font-weight: bold;
color: #ff4444;
}
.stream-container iframe {
width: 100%;
height: 100%;
background: black;
border: none;
}
.popout-btn {
position: absolute;
top: 8px;
right: 8px;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
border: 1px solid #ff0000;
color: #ff0000;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
z-index: 10;
transition: all 0.3s ease;
opacity: 0.7;
font-family: Arial, sans-serif;
box-shadow: 0 2px 4px rgba(255, 0, 0, 0.2);
}
.popout-btn:hover {
opacity: 1;
background: linear-gradient(135deg, #2a0000 0%, #1a0000 100%);
border-color: #ff3333;
color: #ff3333;
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.4);
transform: translateY(-1px);
}
.popout-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(255, 0, 0, 0.3);
}
.comments-container {
position: relative;
transition: all 0.3s ease;
width: 350px;
min-width: 300px;
max-width: 350px;
display: flex;
flex-direction: column;
}
.comments-container.hidden {
display: none;
}
.main-container.centered {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.main-container.centered .stream-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.main-container.centered .stream-container iframe {
width: 100%;
height: 100%;
}
.comments-container iframe {
width: 100%;
height: 100%;
border: none;
background: black;
}
@media (max-width: 1200px) {
.main-container {
flex-direction: column;
height: auto;
overflow-y: auto;
}
.stream-container {
height: 60vh;
}
.comments-container {
width: 100%;
height: 65vh;
max-width: none;
max-height: 67%
}
}
.content {
min-width: 35vh;
}
#video {
background: black;
}
.container {
display: flow;
height: 74vh;
place-content: center;
}
.container > div {
background-color: rgba(0, 0, 0, 1);
}
.container > div.menu {
display: contents;
}
.container > div.content {}
h1 {
margin: 0;
padding: 0;
font-size: 2em;
}
.scroller {
scrollbar-color: red black;
}
ul#messages {
max-height: 88vh;
overflow: auto;
padding: 0 3px;
list-style: none;
border: 2px solid #ff00007d;
}
ul#messages li {
margin: 0.35em 0;
padding: 0;
border-color: red;
}
ul#messages li small {
font-size: 0.59em;
color: white;
border-color: red;
}
ul#messages li.pending {
color: #red;
}
form {
font-size: 1em;
margin: 0;
color: red;
background: black;
border-color: red;
max-height: 5%;
}
form p {
margin: 0;
gap: 0.5em;
color: red;
background: black;
border-color: red;
margin-top: 7px;
}
form p input {
font-size: 1em;
min-width: 0;
color: red;
background: black;
border-color: red;
}
form p input[name=name] {
color: red;
background: black;
max-width: 15%;
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
border: 2px solid #ff00007d;
}
form p input[name=content] {
color: red;
background: black;
border: 2px solid #ff00007d;
width: 62%;
}
form p button {
color: red;
background: black;
border: 2px solid #ff00007d;
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}
h1, ul#messages, form {
box-sizing: border-box;
color: red;
background: black;
margin: 0 auto;
}
#mainDiv {
perspective: 800px;
}
#boxDiv {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: spin 10s infinite linear;
}
#boxDiv > div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
}
#front { background-image: url(../img/Checker.png); transform: translateZ(100px); }
#back { background-image: url(../img/Checker.png); transform: translateZ(-100px) rotateY(180deg); }
#left { background-image: url(../img/Checker.png); transform: rotateY(-90deg) translateZ(100px); }
#right { background-image: url(../img/Checker.png); transform: rotateY(90deg) translateZ(100px); }
#top { background-image: url(../img/Checker.png); transform: rotateX(90deg) translateZ(100px); }
#bottom { background-image: url(../img/Checker.png); transform: rotateX(-90deg) translateZ(100px); }
@keyframes spin {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
counter-container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
gap: 10px;
font-family: Arial, sans-serif;
}
counter-value {
font-size: 24px;
font-weight: bold;
color: red;
}