more nice lookingness

.dist/channel.js

@@ -248,8 +248,9 @@ class Channel {
             this.sortchildren();
             const caps = document.createElement("div");
             const decdiv = document.createElement("div");
-            const decoration = document.createElement("b");
-            decoration.textContent = "▼";
+            const decoration = document.createElement("img");
+            decoration.src = "/icons/category.svg";
+            decoration.classList.add("svgtheme", "colaspeicon");
             decdiv.appendChild(decoration);
             const myhtml = document.createElement("p2");
             myhtml.textContent = this.name;
@@ -278,13 +279,13 @@ class Channel {
             childrendiv.classList.add("channels");
             setTimeout(_ => { childrendiv.style.height = childrendiv.scrollHeight + 'px'; }, 100);
             decdiv.onclick = function () {
-                if (decoration.textContent === "▼") { //
-                    decoration.textContent = "▲";
+                if (childrendiv.style.height !== '0px') {
+                    decoration.classList.add("hiddencat");
                     //childrendiv.classList.add("colapsediv");
                     childrendiv.style.height = '0px';
                 }
                 else {
-                    decoration.textContent = "▼";
+                    decoration.classList.remove("hiddencat");
                     //childrendiv.classList.remove("colapsediv")
                     childrendiv.style.height = childrendiv.scrollHeight + 'px';
                 }

webpage/channel.ts

@@ -261,8 +261,9 @@ class Channel{
             const caps=document.createElement("div");
 
             const decdiv=document.createElement("div");
-            const decoration=document.createElement("b");
-            decoration.textContent="▼"
+            const decoration=document.createElement("img");
+            decoration.src="/icons/category.svg";
+            decoration.classList.add("svgtheme","colaspeicon")
             decdiv.appendChild(decoration)
 
             const myhtml=document.createElement("p2");
@@ -295,12 +296,12 @@ class Channel{
             childrendiv.classList.add("channels");
             setTimeout(_=>{childrendiv.style.height = childrendiv.scrollHeight + 'px';},100)
             decdiv.onclick=function(){
-                if(decoration.textContent==="▼"){//
-                    decoration.textContent="▲";
+                if(childrendiv.style.height!=='0px'){
+                    decoration.classList.add("hiddencat");
                     //childrendiv.classList.add("colapsediv");
                     childrendiv.style.height = '0px';
                 }else{
-                    decoration.textContent="▼";
+                    decoration.classList.remove("hiddencat");
                     //childrendiv.classList.remove("colapsediv")
                     childrendiv.style.height = childrendiv.scrollHeight + 'px';
                 }

webpage/icons/category.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path d="m15 118 75-64 75 64" style="fill:none;stroke:red;stroke-width:29.0323;stroke-linecap:round;stroke-linejoin:round"/></svg>

webpage/style.css

@@ -328,7 +328,8 @@ p {
 	font-size: .25in;
 	display: inline-block;
 	text-indent: .05in;
-	width: .15in;
+	width: .175in;
+	padding-right: .026in;
 }
 
 .spacee {
@@ -651,7 +652,7 @@ textarea:focus-visible,
 	transition: height .2s ease-in-out;
 	user-select: none;
 	cursor: pointer;
-	padding-left: .15in;
+	padding-left: .05in;
 }
 
 .channel:hover {
@@ -662,7 +663,8 @@ textarea:focus-visible,
 	user-select: none;
 	cursor: pointer;
 	transition: font-weight .1s;
-	padding: .02in 0;
+	padding: .02in .0in;
+	border-radius: .05in;
 }
 .viewChannel{
 	font-weight:900;
@@ -696,6 +698,9 @@ textarea:focus-visible,
 	flex-direction: row;
 	align-self: stretch;
 	width: 100%;
+	display: flex;
+	align-content: center;
+	align-items: center;
 }
 .channeleffects:hover {
 	background-color: var(--channel-hover);
@@ -898,7 +903,7 @@ select{
 }
 
 .channels .space {
-	text-indent: .15in;
+	/* text-indent: .15in; */
 }
 
 input[type="checkbox"] {
@@ -1518,3 +1523,15 @@ form div{
 	color: var(--icon-color);
 	filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness));
 }
+.channels .channel{
+	padding: .05in .1in;
+	margin-bottom: .03in;
+}
+.colaspeicon{
+	width:.15in;
+	padding-right: .025in;
+	transition:rotate .1s;
+}
+.hiddencat{
+	rotate:90deg;
+}