multi-lines per task feature

configs.js

@@ -76,6 +76,7 @@ const configs = (function () {
 		bodyMarginTop: "1px", // px
 
 		// task
+		numberOfLines: 2, // number
 		lineHeight: 1.5, // number
 		usernameFontWeight: "bold", // normal or bold or number
 		usernameColor: "white", // hex or name or "" for twitch user color

scripts/defaultConfigs.js

@@ -76,6 +76,7 @@ const defaultConfigs = (function () {
 		bodyMarginTop: "0px", // px
 
 		// task
+		numberOfLines: 1, // number
 		lineHeight: 1.5, // number
 		usernameFontWeight: "bold", // normal or bold or number
 		usernameColor: "white", // hex or name or "" for twitch user color

scripts/taskList.js

@@ -2424,7 +2424,12 @@ async function renderTaskListToDOM() {
 					taskElement.classList.add("focus");
 				}
 
-				taskElement.innerText = task.text;
+				const taskContent = document.createElement("div");
+				taskContent.classList.add("content");
+
+				taskContent.innerText = task.text;
+
+				taskElement.appendChild(taskContent);
 				olListDiv.appendChild(taskElement);
 			}
 		}

styles/taskList.css

@@ -17,12 +17,13 @@
   --header-font-family: sans-serif;
   --header-font-color: white;
   --header-font-weight: bold;
-  --task-count-margin-right: 10px;
+  --task-count-margin-right: 0px;
   --body-background-color: rgba(0, 0, 0, 0.7);
   --body-border-width: 5px;
   --body-border-color: white;
   --body-border-radius: 5px;
   --body-margin-top: 0px;
+  --number-of-lines: 1;
   --line-height: 1.5;
   --username-font-weight: bold;
   --task-background-color: rgba(0, 0, 0, 0.7);
@@ -45,10 +46,6 @@
   box-sizing: border-box;
 }
 
-body {
-  background: gray;
-}
-
 #main-container {
   width: 100%;
   height: 100vh;
@@ -118,14 +115,26 @@ body {
   font-size: var(--username-font-size);
 }
 #main-container .task-wrapper .task-container .task .user-tasks {
-  list-style-position: inside;
+  counter-reset: item;
 }
 #main-container .task-wrapper .task-container .task .user-tasks .todo {
+  display: flex;
+}
+#main-container .task-wrapper .task-container .task .user-tasks .todo:before {
+  counter-increment: item;
+  content: counters(item, ".") ". ";
+  margin-right: 5px;
+}
+#main-container .task-wrapper .task-container .task .user-tasks .todo .content {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--number-of-lines);
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 #main-container .task-wrapper .task-container .task .user-tasks .done {
+  color: var(--done-task-font-color);
+}
+#main-container .task-wrapper .task-container .task .user-tasks .done .content {
   text-decoration: line-through;
   color: var(--done-task-font-color);
 }
@@ -136,4 +145,5 @@ body {
   border-radius: var(--focus-task-border-radius);
   width: -moz-fit-content;
   width: fit-content;
+  margin-left: calc(var(--focus-task-horizontal-padding) * -1);
 }/*# sourceMappingURL=taskList.css.map */