more nice lookingness

This commit is contained in:
MathMan05 2024-07-31 23:51:41 -05:00
parent 983b7e3fa2
commit 1e572932d3
4 changed files with 34 additions and 14 deletions

View file

@ -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';
}

View file

@ -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';
}

View file

@ -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>

After

Width:  |  Height:  |  Size: 192 B

View file

@ -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;
}