librecast-live/css/live.css

Live Streaming Video Platform with IPv6 Multicast

.projectbox {
        color: #3365a3;
        font-family: sans-serif;
        flex: 1 0 100px;
        display: flex;
}
.projectname {
        align-self: center;
        font-size: 21pt;
        text-transform: uppercase;
        width: 100%;
}
.itsalive {
	font-style: italic;
}
.middle, .middle p, .middle h1, .middle h2, .middle ul {
	width: unset;
}
.middle {
	background-color: black;
	display: flex;
	flex: 1 1 100px;
}
.dialog {
	background-color: white;
	border: 1px solid grey;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	padding: 1em;
	position: absolute;
	left: calc(50% - 250px);
	margin-top: 2em;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	height: 250px;
	overflow-wrap: break-word;
	text-align: left;
	width: 500px;
}
.dialog h1 {
	font-size: 1.2em;
	margin-top: 0;
	width: unset;
}
.closex {
	align-self: flex-end;
	font-weight: bold;
	margin-top: -15px;
	margin-right: -10px;
	user-select: none;
}
.closex:hover {
	color: grey;
}
.loginmenu {
	flex: 1 0 200px;
}
.tabmenu {
	display: flex;
}
.tabmenu button {
	color: black;
	background-color: white;
	border: none;
	font-size: 14pt;
	font-weight: bold;
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 1em;
	user-select: none;
}
.tabmenu button.down {
	color: #3365a3;
	border-bottom: 3px solid #3365a3;
}
button:focus {
	outline: 2px dotted #3365a3;
}
.dialogform {
	display: flex;
	flex-direction: column;
	align-self: center;
}
.dialogform label {
	align-self: flex-start;
	font-size: 10pt;
	font-weight: bold;
}
.dialogform button[type=submit] {
	align-self: center;
	margin-top: 0.2em;
}
.dialogform form {
	display: flex;
	flex-direction: column;
}
.chatbox h2 {
	width: unset;
}
.chatbox {
	display: flex;
	flex-direction: column;
	min-width: 100%;
}
.chatbox > section {
	border: 1px dashed black;
	display: flex;
	flex-grow: 1;
}
.chattopic {
	color: white;
	padding: 0.2em 0;
}
.channellist, .userlist, .stats {
	flex: 1 2 100px;
	background-color: black;
	border: 2px solid white;
}
.chatbox h2 {
	color: #3365a3;
	background-color: white;
	font-size: 14pt;
	margin: 0 0;
}
.chatbox ul, .stats dl {
	padding-left: 0;
	margin: 0;
}
.chatbox ul li, .stats dl div {
	background-color: #fff8cb; /* cornsilk */
	padding: 0 1vw;
	list-style: none;
}
.chatbox ul li:nth-child(2n), .stats dl div:nth-child(2n) {
	background-color: #ffec9b; /* lightgoldenrod1 */
}
.stats dl div {
	display: flex;
}
.stats div {
}
.stats dl dt {
	flex: 1 1 100px;
	text-align: start;
}
.stats dl dd {
	flex: 1 1 100px;
	text-align: end;
}
.channellist ul li {
	list-style-type: '#';
	list-style-position: inside;
	font-weight: bold;
	padding: 2px 1vw;
}
.channellistitem {
	color: gray;
}
.channellistitem.ready {
	color: black;
}
.channellistitem.active {
	color: #3365a3;
}
.chatpane {
	display: flex;
	border: 2px solid white;
	flex-direction: column;
	flex: 2 1 100px;
}
.chatmsgs {
	display: flex;
	flex-direction: column;
	flex: 1 1 100px;
	overflow-y: scroll;
	scrollbar-width: thin;
	text-align: left;
}
.chatmsg {
	display: flex;
	flex-wrap: wrap;
	background-color: #fff8cb; /* cornsilk */
}
.chatmsg .msghdr {
	display: flex;
	border: 1px solid white;
	font-weight: bold;
	padding: 2px 1vw;
	width: 100%;
}
.msghdr img.avatar, .userlist img.avatar {
	border-radius: 15px;
	height: 30px;
	width: 30px;
}
.userlist ul li {
	display: flex;
	font-weight: bold;
	padding: 2px 1vw;
}
.userlist ul li img.avatar {
	margin-right: 1em;
}
.msghdr .username {
	flex: 1 1 100px;
	align-self: center;
	font-size: 12pt;
	margin-left: 1em;
}
.msghdr .timestamp {
	flex: 1 1 100px;
	align-self: center;
	font-size: 10pt;
	text-align: end;
}
.chatmsg section {
	padding: 0.2em 0;
}
.chatmsg section p {
	font-size: 11pt;
	margin-left: 1vw;
	margin-right: 1vw;
}
.chatmsg section p:nth-child(1) {
	margin-top: 0;
}
.chatmsg section p:nth-child(n) {
	margin-bottom: 0;
}
.chatmsg:nth-child(2n) {
	background-color: #ffec9b; /* lightgoldenrod1 */
}
.chatbar {
	display: flex;
	align-self: end;
	width: 100%;
}
.chatbar input[type=text] {
	border-radius: 0;
	flex-grow: 1;
}
.vidbox .avatar {
	height: 33vw;
	width: 33vw;
}
button.profile {
	/*background: url("/media/profilepic.jpg");*/
	/*border: none;*/
	border: 5px solid #3365a3;
	background-size: cover;
	border-radius: 25px;
	height: 50px;
	width: 50px;
}
button.stats {
	background: url("/media/stats.svg");
	background-size: cover;
	border: none;
	height: 50px;
	width: 50px;
}button.login {
	background: url("/media/login.svg");
	background-size: cover;
	border: none;
	border-radius: 25px;
	height: 50px;
	width: 50px;
}
button.logout {
	background: url("/media/logout.svg");
	background-size: cover;
	border: none;
	border-radius: 25px;
	height: 50px;
	width: 50px;
}