Add files via upload

multichat-overlay/style.css

@@ -0,0 +1,245 @@
+* {
+	margin: 0;
+	padding: 0;
+	--margin: 40px;
+	--border-radius: 20px;
+}
+
+html {
+	width: 100vw;
+	height: 100vh;
+	scroll-behavior: smooth;
+	/* background: #000000d9; */
+	font-size: 30px;
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+	color: white;
+	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+	overflow-wrap: break-word;
+}
+
+#statusContainer {
+	font-weight: 500;
+	font-size: 30px;
+	text-align: center;
+	background-color: #D12025;
+	color: white;
+	padding: 10px;
+	border-radius: 10px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+#mainContainer {
+	position: absolute;
+	height: calc(100% - 2 * var(--margin));
+	width: calc(100% - 2 * var(--margin));
+	margin: var(--margin);
+}
+
+#messageList {
+	position: absolute;
+	left: 0;
+	width: 100%;
+}
+
+.normalScrollDirection {
+	bottom: 0;
+}
+.reverseScrollDirection {
+	display: flex;
+	top: 0;
+	flex-direction: column-reverse;
+}
+
+li {
+	list-style: none;
+	overflow: hidden;
+	height: 0;
+    margin-top: 10px;
+	transition: all 1s ease-in-out;
+}
+.reverseLineItemDirection {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+}
+
+.slide-fade li {
+	transition: all 0.5s ease-out;
+	opacity: 0;
+}
+
+.slide-fade li.show {
+	opacity: 1;
+}
+
+#IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList {
+    margin-top: 10px;
+	opacity: 0;
+}
+
+#firstMessage {
+	display: none;
+	font-weight: 500;
+	font-size: 0.7em;
+}
+
+.firstMessageHighlight {
+	background: #adadad46;
+	padding: 20px 40px;
+	border-radius: var(--border-radius);
+}
+
+.avatar {
+	height: 2em;
+	margin: 1px;
+	transform: translate(0px, 0.25em);
+	border-radius: 50%
+}
+
+.timestamp,
+.pronouns {
+	background: #adadad46;
+	/* border-radius: var(--border-radius); */
+	border-radius: 1em;
+	font-size: 0.7em;
+	/* padding: 5px 15px; */
+	padding: 0.15em 0.5em;
+}
+
+.bits {
+	background: #adadad46;
+	border-radius: calc(var(--border-radius) / 2);
+	font-size: 0.7em;
+	padding: 5px 10px;
+}
+
+.platform,
+.badge,
+.emote {
+	height: 1em;
+	margin: 1px;
+	transform: translate(0px, 0.25em);
+}
+
+#badgeList {
+	margin: 0px 5px;
+}
+
+#username,
+#title {
+	font-weight: 700;
+}
+
+.title {
+	font-weight: 700;
+}
+
+#reply {
+	display: none;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	font-size: 0.7em;
+	opacity: 0.5;
+}
+
+#message {
+	font-weight: 400;
+	line-height: 1.7em;
+}
+
+#card {
+	background: #adadad46;
+	padding: 20px 40px;
+	border-radius: var(--border-radius);
+}
+
+#youtubeSuperSticker {
+	display: block;
+}
+
+#sticker-img {
+	height: 5em;
+}
+
+#stickerLabel {
+	text-align: center;
+	font-weight: 700;
+}
+
+/*****************/
+/** CARD COLORS **/
+/*****************/
+
+.announcementBlue {
+	background: linear-gradient(#03d3d7BF, #8d49feBF) !important;
+}
+
+.announcementGreen {
+	background: linear-gradient(#01da86BF, #55bee4BF) !important;
+}
+
+.announcementOrange {
+	background: linear-gradient(#feb419BF, #e1df00BF) !important;
+}
+
+.announcementPurple {
+	background: linear-gradient(#9548ffBF, #fc74e6BF) !important;
+}
+
+.twitch {
+	background: linear-gradient(#6d5ca1bf, #9146ffBF) !important;
+}
+
+.youtube {
+	background: linear-gradient(#FF6C60BF, #FF0707BF) !important;
+}
+
+.streamlabs {
+	background: linear-gradient(#73dabbbf, #397765bf) !important;
+}
+
+.streamelements {
+	background: linear-gradient(#263b8abf, #0a112abf) !important;
+}
+
+/****************/
+/** ANIMATIONS **/
+/****************/
+
+.statusConnected {
+	animation-name: statusConnected;
+	animation-duration: 2s;
+	animation-fill-mode: forwards;
+}
+
+.statusDisconnected {
+	animation-name: statusDisconnected;
+	animation-duration: 0.5s;
+	animation-fill-mode: forwards;
+}
+
+@keyframes statusConnected {
+	0% {
+		opacity: 1;
+		background-color: #2FB774;
+	}
+
+	100% {
+		opacity: 0;
+		background-color: #2FB774;
+	}
+}
+
+@keyframes statusDisconnected {
+	0% {
+		background-color: #D12025;
+	}
+
+	100% {
+		background-color: #D12025;
+	}
+}