struggling to get this css fixed on dock

steveseguin · Feb 19, 2025 · 36ad597 · 36ad597
1 parent 102051e
commit 36ad597
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/dock.html b/dock.html
@@ -12,7 +12,7 @@
 		<style>
 			:root {
 				--show-emoji-only: flex;
-				--list-or-horizontal: block;
+				--list-or-horizontal: inline-flex;
 				--show-donos-only: flex;
 				--show-queue-only: flex;
 				--scale-output: 1;
@@ -566,7 +566,12 @@
 			.twoLines .hl-firstline {
 				align-items: center;
 				display: flex;
-				margin-top: 8px;
+				margin-top: 4px;
+			}
+
+			.notcompactmode .twoLines .hl-firstline {
+				margin-top: 10px;
+				margin-bottom: 2px;
 			}
 
 			#context-menu {
@@ -979,10 +984,6 @@
 				margin: 2px 5px 0 5px;
 			}
 
-			.highlight-chat {
-				display: flex;
-			}
-
 			.hide {
 				display: none !important;
 			}
@@ -1031,6 +1032,7 @@
 			}
 			.notcompactmode .highlight-chat>div:not(.bubble) .hl-name {
 				margin: 3.14px 5px 0 5px;
+				position: static;
 			}
 			.notcompactmode .highlight-chat>div.bubble .hl-name {
 				min-width: max(35px, 2vw);
@@ -1053,7 +1055,6 @@
 				padding: 2px 1px;
 				margin: 0;
 				min-height: 27px;
-				display:inline-flex;
 			}
 
 			@media only screen and (max-width: 400px) {
@@ -1904,7 +1905,7 @@
 			.fadein {
 				animation: fadein 1s;
 				webkit-transition: opacity 0.5s ease-in-out;
-				transition: opacity 0.5 ease-in-out;
+				transition: opacity 0.5s ease-in-out;
 				opacity: 1;
 			}
 
@@ -4564,6 +4565,7 @@ <h3>Status</h3>
 				compactmode = true;
 				document.body.classList.remove("notcompactmode");
 				document.documentElement.style.setProperty("--padding-rows", "2px");
+				document.documentElement.style.setProperty("--list-or-horizontal", "flex");
 			}
 
 			if (urlParams.has("padding")) {
@@ -8276,7 +8278,7 @@ <h2 id="c">What message do you want to send ${chatName}?</h2>
 					if (largeavatar) {
 						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + expand + '" data-source-type="' + data.type + '">' + '<div class="hl-leftside">' + chatImg + showType + "</div>" + '<div class="hl-rightside' + larger + '">' + '<div class="hl-righttopline">' + chatname + timeArrived  +  "<div class='queueid'></div>" + "</div>" + '<div class="hl-message">' + '<span class="hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</span>" + addImage + donationHTML + "</div>" + "</div></div>");
 					} else if (twoLines) {
-						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + '<div class="hl-firstline">' + "<div class='queueid'></div>" + showType + chatImg + chatname + '</div><div class="hl-message">' + timeArrived + '<span class="hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</span>" + addImage + donationHTML + "</div></div>");
+						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + '<div class="hl-firstline">' + "" + "<div class='queueid'></div>" + showType + chatImg + chatname + '</div><div class="hl-message"><span class="hl-content" dir="' + textDirection + '" id="content_' + data.id + '">'+ timeArrived  + chatmessage + "</span>" + addImage + donationHTML + "</div></div>");
 					} else if (splitMode) {
 						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + "<div class='queueid' title='Order in Queue, with 1 being next up.'></div>" + "<div class='leftside " + larger + "'>"  + showType  + chatImg + chatname + "</div>" + '<div class="hl-message hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</div>" + addImage + donationHTML + "</div>");
 					} else if (compactmode) {

diff --git a/multi.html b/multi.html
@@ -29,6 +29,8 @@
 		<iframe src="dock.html?hidemenu&session=${session}&compact"></iframe>
 		<iframe src="dock.html?hidemenu&session=${session}&largeavatar&bubble"></iframe>
 		<iframe src="dock.html?hidemenu&session=${session}&bubble"></iframe>
+		<iframe src="dock.html?hidemenu&session=${session}&twolinles"></iframe>
+		<iframe src="dock.html?hidemenu&session=${session}&compact"></iframe>
 		<iframe src="dock.html?hidemenu&session=${session}"></iframe>
 		<iframe src="dock.html?hidemenu&session=${session}&emoji"></iframe>
 		<iframe src="dock.html?hidemenu&session=${session}&emoji&compact&bubble"></iframe>