version 3.111

.gitignore

@@ -1,5 +1,3 @@
 .vscode/*
-styles/taskList.css.map
-styles/taskList.scss
 to-do.md
 updates

configs.js

@@ -11,7 +11,7 @@ const configs = (function () {
 		taskSeparator: [";", ","], // array of strings
 		openQuote: '"', // string
 		closeQuote: '"', // string
-		testTasks: false, // true or false
+		testTasks: true, // true or false
 		headerGoogleFont: true, // true: use google font, false: use system font
 		taskGoogleFont: true, // true: use google font, false: use system font
 		displayTaskCount: true, // true or false

scripts/taskList.js

@@ -2698,11 +2698,12 @@ function cancelAnimation() {
 DBHandler.open()
 	.then(async () => {
 		await setupDB();
+		importStyles();
 		if (getSetting("testTasks")) {
 			await resetDB();
 			await tests();
 		}
-		importStyles();
+
 		await renderTaskListToDOM();
 	})
 	.catch((error) => {

styles/taskList.css

@@ -78,7 +78,11 @@
 #main-container .header .task-count {
   margin-right: var(--task-count-margin-right);
 }
+#main-container .task-wrapper, #main-container .task-container {
+  transition: height 0.5s ease-out;
+}
 #main-container .task-wrapper {
+  animation: scrollTasks 20s linear infinite;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -102,6 +106,7 @@
   margin-left: auto;
   margin-right: auto;
   margin-top: var(--body-margin-top);
+  transition: transform 0.4s ease-in-out;
 }
 #main-container .task-wrapper .task-container .task {
   padding: var(--task-vertical-padding) var(--task-horizontal-padding);
@@ -128,6 +133,7 @@
 }
 #main-container .task-wrapper .task-container .task .user-tasks .todo .content {
   display: -webkit-box;
+  line-clamp: var(--number-of-lines);
   -webkit-line-clamp: var(--number-of-lines);
   -webkit-box-orient: vertical;
   overflow: hidden;

styles/taskList.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["taskList.scss","taskList.css"],"names":[],"mappings":"AAAA;EACC,uBAAA;EACA,yBAAA;EAEA,gDAAA;EAEA,6BAAA;EACA,+BAAA;EACA,8BAAA;EAEA,mCAAA;EACA,iCAAA;EAEA,iCAAA;EACA,+BAAA;EAEA,6CAAA;EAEA,0BAAA;EACA,4BAAA;EACA,2BAAA;EAEA,wBAAA;EACA,gCAAA;EACA,0BAAA;EACA,0BAAA;EAEA,8BAAA;EAEA,2CAAA;EAEA,wBAAA;EACA,0BAAA;EACA,yBAAA;EAEA,sBAAA;EAEA,oBAAA;EACA,kBAAA;EACA,4BAAA;EAEA,2CAAA;EAEA,8BAAA;EACA,sBAAA;EACA,wBAAA;EAEA,0BAAA;EACA,wBAAA;EACA,yBAAA;EAEA,8BAAA;EACA,4BAAA;EAEA,yBAAA;EACA,8BAAA;EACA,4BAAA;AChBD;;ADmBA;EACC,SAAA;EACA,UAAA;EACA,sBAAA;AChBD;;ADoBA;EACC,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EAEA,8EAAA;EAGA,mDAAA;EAEA,yEAAA;EACA,6CAAA;EAEA,oCAAA;ACvBD;ADyBC;EACC,aAAA;EACA,8BAAA;EAEA,wEAAA;EAEA,mEAAA;EACA,0CAAA;EAEA,+BAAA;EACA,0CAAA;EAEA,sCAAA;EACA,kCAAA;EACA,sCAAA;AC3BF;AD6BE;EACC,6BAAA;AC3BH;AD6BE;EACC,UAAA;AC3BH;AD8BE;EACC,4CAAA;AC5BH;ADgCC;EACC,gCAAA;AC9BF;ADiCC;EACC,0CAAA;EAEA,WAAA;EACA,YAAA;EAEA,gBAAA;EAEA,kBAAA;EAEA,wCAAA;EAEA,6BAAA;EACA,oCAAA;EACA,gCAAA;EAEA,+BAAA;EAEA,+DAAA;EACA,wCAAA;EAEA,UAAA;ACvCF;ADyCE;EACC,kBAAA;EACA,cAAA;EAEA,OAAA;EAEA,aAAA;EACA,sBAAA;EAEA,mBAAA;EAEA,iBAAA;EACA,kBAAA;EAEA,kCAAA;EAEA,sCAAA;AC7CH;ADgDG;EACC,oEAAA;EAEA,wCAAA;EAEA,wCAAA;EAEA,wBAAA;EAEA,+DAAA;EACA,wCAAA;AClDJ;ADoDI;EACC,wCAAA;EACA,oCAAA;AClDL;ADqDI;EACC,mBAAA;ACnDL;ADqDK;EACC,aAAA;ACnDN;ADqDM;EACC,uBAAA;EACA,iCAAA;EACA,iBAAA;ACnDP;ADsDM;EACC,oBAAA;EACA,kCAAA;EACA,0CAAA;EACA,4BAAA;EACA,gBAAA;ACpDP;ADwDK;EACC,kCAAA;ACtDN;ADwDM;EACC,6BAAA;EACA,kCAAA;ACtDP;AD2DK;EACC,8CAAA;EACA,mCAAA;EAEA,gFAAA;EAGA,8CAAA;EAEA,uBAAA;EAAA,kBAAA;EAEA,4DAAA;AC9DN","file":"taskList.css"}

styles/taskList.scss

@@ -0,0 +1,223 @@
+:root {
+	--task-list-width: 100%;
+	--task-list-height: 100vh;
+
+	--task-list-background-color: rgba(0, 0, 0, 0.8);
+
+	--task-list-border-width: 2px;
+	--task-list-border-color: white;
+	--task-list-border-radius: 5px;
+
+	--task-list-horizontal-padding: 0px;
+	--task-list-vertical-padding: 0px;
+
+	--header-horizontal-padding: 10px;
+	--header-vertical-padding: 10px;
+
+	--header-background-color: rgba(0, 0, 0, 0.8);
+
+	--header-border-width: 2px;
+	--header-border-color: white;
+	--header-border-radius: 5px;
+
+	--header-font-size: 20px;
+	--header-font-family: sans-serif;
+	--header-font-color: white;
+	--header-font-weight: bold;
+
+	--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);
+
+	--task-font-family: sans-serif;
+	--task-font-size: 25px;
+	--task-font-color: white;
+
+	--task-border-color: black;
+	--task-border-width: 0px;
+	--task-border-radius: 5px;
+
+	--task-horizontal-padding: 0px;
+	--task-vertical-padding: 0px;
+
+	--task-margin-bottom: 5px;
+	--task-horizontal-padding: 5px;
+	--task-vertical-padding: 5px;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+
+#main-container {
+	width: 100%;
+	height: 100vh;
+
+	display: flex;
+	flex-direction: column;
+
+	padding: var(--task-list-vertical-padding)
+		var(--task-list-horizontal-padding);
+
+	background-color: var(--task-list-background-color);
+
+	border: solid var(--task-list-border-width) var(--task-list-border-color);
+	border-radius: var(--task-list-border-radius);
+
+	transition: opacity 0.5s ease-in-out; 
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+
+		padding: var(--header-vertical-padding) var(--header-horizontal-padding);
+
+		border: solid var(--header-border-width) var(--header-border-color);
+		border-radius: var(--header-border-radius);
+
+		color: var(--header-font-color);
+		background: var(--header-background-color);
+
+		font-family: var(--header-font-family);
+		font-size: var(--header-font-size);
+		font-weight: var(--header-font-weight);
+
+		.title {
+			transition: opacity 0.5s ease;
+		}
+		.fade {
+			opacity: 0;
+		}
+
+		.task-count {
+			margin-right: var(--task-count-margin-right);
+		}
+	}
+
+	.task-wrapper, .task-container {
+		transition: height 0.5s ease-out;
+	}
+
+	.task-wrapper {
+		animation: scrollTasks 20s linear infinite;
+
+		width: 100%;
+		height: 100%;
+
+		overflow: hidden;
+
+		position: relative;
+
+		background: var(--body-background-color);
+
+		color: var(--task-font-color);
+		font-family: var(--task-font-family);
+		font-size: var(--task-font-size);
+
+		line-height: var(--line-height);
+
+		border: var(--body-border-width) solid var(--body-border-color);
+		border-radius: var(--body-border-radius);
+
+		z-index: 1;
+
+		.task-container {
+			position: absolute;
+			width: inherit;
+
+			left: 0;
+
+			display: flex;
+			flex-direction: column;
+
+			align-items: center;
+
+			margin-left: auto;
+			margin-right: auto;
+
+			margin-top: var(--body-margin-top);
+
+			transition: transform 0.4s ease-in-out;
+
+
+			.task {
+				padding: var(--task-vertical-padding)
+					var(--task-horizontal-padding);
+				background: var(--task-background-color);
+
+				margin-bottom: var(--task-margin-bottom);
+
+				width: var(--task-width);
+
+				border: solid var(--task-border-width) var(--task-border-color);
+				border-radius: var(--task-border-radius);
+
+				.username {
+					font-weight: var(--username-font-weight);
+					font-size: var(--username-font-size);
+				}
+
+				.user-tasks {
+					counter-reset: item;
+
+					.todo {
+						display: flex;
+
+						&:before {
+							counter-increment: item;
+							content: counters(item, ".") ". ";
+							margin-right: 5px;
+						}
+
+						.content {
+							display: -webkit-box;
+							line-clamp: var(--number-of-lines);
+							-webkit-line-clamp: var(--number-of-lines); // change this to the number of lines you want
+							-webkit-box-orient: vertical;
+							overflow: hidden;
+						}
+					}
+
+					.done {
+						color: var(--done-task-font-color);
+
+						.content {
+							text-decoration: line-through;
+							color: var(--done-task-font-color);
+						}
+						
+					}
+
+					.focus {
+						background: var(--focus-task-background-color);
+						color: var(--focus-task-font-color);
+
+						padding: var(--focus-task-vertical-padding)
+								var(--focus-task-horizontal-padding);
+
+						border-radius: var(--focus-task-border-radius);
+
+						width:fit-content;
+
+						margin-left: calc(var(--focus-task-horizontal-padding) * -1);
+					}
+				}
+			}
+		}
+	}
+}