more nice lookingness
This commit is contained in:
parent
983b7e3fa2
commit
1e572932d3
4 changed files with 34 additions and 14 deletions
|
@ -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';
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
|
|
1
webpage/icons/category.svg
Normal file
1
webpage/icons/category.svg
Normal 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 |
|
@ -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;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue