use mask instead of filter
This commit is contained in:
ygg2
parent
28ded9ed7c
commit
3a6f400cc4
6 changed files with 62 additions and 162 deletions
|
|
@ -354,9 +354,8 @@ class Channel {
|
|||
this.sortchildren();
|
||||
const caps = document.createElement("div");
|
||||
const decdiv = document.createElement("div");
|
||||
const decoration = document.createElement("img");
|
||||
decoration.src = "/icons/category.svg";
|
||||
decoration.classList.add("svgtheme", "colaspeicon");
|
||||
const decoration = document.createElement("span");
|
||||
decoration.classList.add("svgtheme", "colaspeicon", "svg-category");
|
||||
decdiv.appendChild(decoration);
|
||||
const myhtml = document.createElement("p2");
|
||||
myhtml.textContent = this.name;
|
||||
|
|
@ -411,22 +410,19 @@ class Channel {
|
|||
const myhtml = document.createElement("span");
|
||||
myhtml.textContent = this.name;
|
||||
if (this.type === 0) {
|
||||
const decoration = document.createElement("img");
|
||||
decoration.src = "/icons/channel.svg";
|
||||
const decoration = document.createElement("span");
|
||||
div.appendChild(decoration);
|
||||
decoration.classList.add("space", "svgtheme");
|
||||
decoration.classList.add("space", "svgtheme", "svg-channel");
|
||||
}
|
||||
else if (this.type === 2) { //
|
||||
const decoration = document.createElement("img");
|
||||
decoration.src = "/icons/voice.svg";
|
||||
const decoration = document.createElement("span");
|
||||
div.appendChild(decoration);
|
||||
decoration.classList.add("space", "svgtheme");
|
||||
decoration.classList.add("space", "svgtheme", "svg-voice");
|
||||
}
|
||||
else if (this.type === 5) { //
|
||||
const decoration = document.createElement("img");
|
||||
decoration.src = "/icons/announce.svg";
|
||||
const decoration = document.createElement("span");
|
||||
div.appendChild(decoration);
|
||||
decoration.classList.add("space", "svgtheme");
|
||||
decoration.classList.add("space", "svgtheme", "svg-announce");
|
||||
}
|
||||
else {
|
||||
console.log(this.type);
|
||||
|
|
|
|||
|
|
@ -499,21 +499,20 @@ class Localuser {
|
|||
buildservers() {
|
||||
const serverlist = document.getElementById("servers"); //
|
||||
const outdiv = document.createElement("div");
|
||||
const img = document.createElement("img");
|
||||
const home = document.createElement("span");
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("home", "servericon");
|
||||
img.src = "/icons/home.svg";
|
||||
img.classList.add("svgtheme", "svgicon");
|
||||
img["all"] = this.guildids.get("@me");
|
||||
home.classList.add("svgtheme", "svgicon", "svg-home");
|
||||
home["all"] = this.guildids.get("@me");
|
||||
this.guildids.get("@me").html = outdiv;
|
||||
const unread = document.createElement("div");
|
||||
unread.classList.add("unread");
|
||||
outdiv.append(unread);
|
||||
outdiv.append(div);
|
||||
div.appendChild(img);
|
||||
div.appendChild(home);
|
||||
outdiv.classList.add("servernoti");
|
||||
serverlist.append(outdiv);
|
||||
img.onclick = function () {
|
||||
home.onclick = function () {
|
||||
this["all"].loadGuild();
|
||||
this["all"].loadChannel();
|
||||
};
|
||||
|
|
@ -545,9 +544,8 @@ class Localuser {
|
|||
this.createGuild();
|
||||
};
|
||||
const guilddsdiv = document.createElement("div");
|
||||
const guildDiscoveryContainer = document.createElement("img");
|
||||
guildDiscoveryContainer.src = "/icons/explore.svg";
|
||||
guildDiscoveryContainer.classList.add("svgtheme", "svgicon");
|
||||
const guildDiscoveryContainer = document.createElement("span");
|
||||
guildDiscoveryContainer.classList.add("svgtheme", "svgicon", "svg-explore");
|
||||
guilddsdiv.classList.add("home", "servericon");
|
||||
guilddsdiv.appendChild(guildDiscoveryContainer);
|
||||
serverlist.appendChild(guilddsdiv);
|
||||
|
|
@ -922,7 +920,6 @@ class Localuser {
|
|||
{
|
||||
const userinfos = getBulkInfo();
|
||||
tas.addColorInput("Accent color:", _ => {
|
||||
fixsvgtheme();
|
||||
userinfos.accent_color = _;
|
||||
localStorage.setItem("userinfos", JSON.stringify(userinfos));
|
||||
document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
|
||||
|
|
@ -1426,61 +1423,3 @@ class Localuser {
|
|||
}
|
||||
}
|
||||
export { Localuser };
|
||||
let fixsvgtheme;
|
||||
{
|
||||
let last;
|
||||
const dud = document.createElement("p");
|
||||
dud.classList.add("svgtheme");
|
||||
document.body.append(dud);
|
||||
const css = window.getComputedStyle(dud);
|
||||
function fixsvgtheme_() {
|
||||
//console.log(things);
|
||||
const color = css.color;
|
||||
if (color === last) {
|
||||
return;
|
||||
}
|
||||
;
|
||||
last = color;
|
||||
const thing = color.replace("rgb(", "").replace(")", "").split(",");
|
||||
//sconsole.log(thing);
|
||||
const r = +thing[0] / 255;
|
||||
const g = +thing[1] / 255;
|
||||
const b = +thing[2] / 255;
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const l = (max + min) / 2;
|
||||
let s;
|
||||
let h;
|
||||
if (max !== min) {
|
||||
if (l <= .5) {
|
||||
s = (max - min) / (max + min);
|
||||
}
|
||||
else {
|
||||
s = (max - min) / (2.0 - max - min);
|
||||
}
|
||||
if (r === max) {
|
||||
h = (g - b) / (max - min);
|
||||
}
|
||||
else if (g === max) {
|
||||
h = 2 + (b - r) / (max - min);
|
||||
}
|
||||
else {
|
||||
h = 4 + (r - g) / (max - min);
|
||||
}
|
||||
}
|
||||
else {
|
||||
s = 0;
|
||||
h = 0;
|
||||
}
|
||||
const rot = Math.floor(h * 60) + "deg";
|
||||
const invert = .5 - (s / 2) + "";
|
||||
const brightness = Math.floor((l * 200)) + "%";
|
||||
document.documentElement.style.setProperty('--rot', rot);
|
||||
document.documentElement.style.setProperty('--invert', invert);
|
||||
document.documentElement.style.setProperty('--brightness', brightness);
|
||||
}
|
||||
fixsvgtheme = fixsvgtheme_;
|
||||
setTimeout(fixsvgtheme_, 100);
|
||||
fixsvgtheme_();
|
||||
}
|
||||
export { fixsvgtheme };
|
||||
|
|
|
|||
|
|
@ -360,9 +360,8 @@ class Channel{
|
|||
const caps=document.createElement("div");
|
||||
|
||||
const decdiv=document.createElement("div");
|
||||
const decoration=document.createElement("img");
|
||||
decoration.src="/icons/category.svg";
|
||||
decoration.classList.add("svgtheme","colaspeicon")
|
||||
const decoration=document.createElement("span");
|
||||
decoration.classList.add("svgtheme","colaspeicon","svg-category")
|
||||
decdiv.appendChild(decoration)
|
||||
|
||||
const myhtml=document.createElement("p2");
|
||||
|
|
@ -417,20 +416,17 @@ class Channel{
|
|||
const myhtml=document.createElement("span");
|
||||
myhtml.textContent=this.name;
|
||||
if(this.type===0){
|
||||
const decoration=document.createElement("img");
|
||||
decoration.src="/icons/channel.svg";
|
||||
const decoration=document.createElement("span");
|
||||
div.appendChild(decoration)
|
||||
decoration.classList.add("space","svgtheme");
|
||||
decoration.classList.add("space","svgtheme","svg-channel");
|
||||
}else if(this.type===2){//
|
||||
const decoration=document.createElement("img");
|
||||
decoration.src="/icons/voice.svg";
|
||||
const decoration=document.createElement("span");
|
||||
div.appendChild(decoration)
|
||||
decoration.classList.add("space","svgtheme");
|
||||
decoration.classList.add("space","svgtheme","svg-voice");
|
||||
}else if(this.type===5){//
|
||||
const decoration=document.createElement("img");
|
||||
decoration.src="/icons/announce.svg";
|
||||
const decoration=document.createElement("span");
|
||||
div.appendChild(decoration)
|
||||
decoration.classList.add("space","svgtheme");
|
||||
decoration.classList.add("space","svgtheme","svg-announce");
|
||||
}else{
|
||||
console.log(this.type)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
|
||||
<div id="user-actions">
|
||||
<img id="settings" class="svgtheme" src="/icons/settings.svg"></img>
|
||||
<span id="settings" class="svgtheme svg-settings"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -501,23 +501,22 @@ class Localuser{
|
|||
buildservers():void{
|
||||
const serverlist=document.getElementById("servers") as HTMLDivElement;//
|
||||
const outdiv=document.createElement("div");
|
||||
const img=document.createElement("img");
|
||||
const home=document.createElement("span");
|
||||
const div=document.createElement("div");
|
||||
div.classList.add("home","servericon");
|
||||
|
||||
img.src="/icons/home.svg";
|
||||
img.classList.add("svgtheme","svgicon")
|
||||
img["all"]=this.guildids.get("@me");
|
||||
home.classList.add("svgtheme","svgicon","svg-home")
|
||||
home["all"]=this.guildids.get("@me");
|
||||
(this.guildids.get("@me") as Guild).html=outdiv;
|
||||
const unread=document.createElement("div");
|
||||
unread.classList.add("unread");
|
||||
outdiv.append(unread);
|
||||
outdiv.append(div);
|
||||
div.appendChild(img);
|
||||
div.appendChild(home);
|
||||
|
||||
outdiv.classList.add("servernoti")
|
||||
serverlist.append(outdiv);
|
||||
img.onclick=function(){
|
||||
home.onclick=function(){
|
||||
this["all"].loadGuild();
|
||||
this["all"].loadChannel();
|
||||
}
|
||||
|
|
@ -551,9 +550,8 @@ class Localuser{
|
|||
this.createGuild();
|
||||
}
|
||||
const guilddsdiv=document.createElement("div");
|
||||
const guildDiscoveryContainer=document.createElement("img");
|
||||
guildDiscoveryContainer.src="/icons/explore.svg";
|
||||
guildDiscoveryContainer.classList.add("svgtheme","svgicon");
|
||||
const guildDiscoveryContainer=document.createElement("span");
|
||||
guildDiscoveryContainer.classList.add("svgtheme","svgicon","svg-explore");
|
||||
guilddsdiv.classList.add("home","servericon");
|
||||
guilddsdiv.appendChild(guildDiscoveryContainer);
|
||||
serverlist.appendChild(guilddsdiv);
|
||||
|
|
@ -933,7 +931,6 @@ class Localuser{
|
|||
{
|
||||
const userinfos=getBulkInfo();
|
||||
tas.addColorInput("Accent color:",_=>{
|
||||
fixsvgtheme();
|
||||
userinfos.accent_color=_;
|
||||
localStorage.setItem("userinfos",JSON.stringify(userinfos));
|
||||
document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
|
||||
|
|
@ -1436,57 +1433,3 @@ class Localuser{
|
|||
}
|
||||
}
|
||||
export {Localuser};
|
||||
let fixsvgtheme:Function;
|
||||
{
|
||||
let last:string;
|
||||
const dud=document.createElement("p")
|
||||
dud.classList.add("svgtheme")
|
||||
document.body.append(dud);
|
||||
const css=window.getComputedStyle(dud);
|
||||
function fixsvgtheme_(){
|
||||
//console.log(things);
|
||||
const color=css.color;
|
||||
if(color===last) {return};
|
||||
last=color;
|
||||
const thing=color.replace("rgb(","").replace(")","").split(",");
|
||||
//sconsole.log(thing);
|
||||
const r=+thing[0]/255;
|
||||
const g=+thing[1]/255;
|
||||
const b=+thing[2]/255;
|
||||
const max=Math.max(r,g,b);
|
||||
const min=Math.min(r,g,b);
|
||||
const l=(max+min)/2;
|
||||
|
||||
let s:number;
|
||||
let h:number;
|
||||
if(max!==min){
|
||||
if(l<=.5){
|
||||
s=(max-min)/(max+min);
|
||||
}else{
|
||||
s=(max-min)/(2.0-max-min);
|
||||
}
|
||||
if(r===max){
|
||||
h=(g-b)/(max-min);
|
||||
}else if(g===max){
|
||||
h=2+(b-r)/(max-min);
|
||||
}else{
|
||||
h=4+(r-g)/(max-min);
|
||||
}
|
||||
}else{
|
||||
s=0;
|
||||
h=0;
|
||||
}
|
||||
const rot=Math.floor(h*60)+"deg";
|
||||
const invert=.5-(s/2)+"";
|
||||
const brightness=Math.floor((l*200))+"%";
|
||||
|
||||
document.documentElement.style.setProperty('--rot', rot);
|
||||
document.documentElement.style.setProperty('--invert', invert);
|
||||
document.documentElement.style.setProperty('--brightness', brightness);
|
||||
|
||||
}
|
||||
fixsvgtheme=fixsvgtheme_;
|
||||
setTimeout(fixsvgtheme_,100);
|
||||
fixsvgtheme_();
|
||||
}
|
||||
export {fixsvgtheme};
|
||||
|
|
|
|||
|
|
@ -1556,14 +1556,11 @@ span {
|
|||
form div{
|
||||
width:100%;
|
||||
}
|
||||
.svgtheme{
|
||||
color: var(--icon-color);
|
||||
filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness));
|
||||
}
|
||||
.channels .channel{
|
||||
margin-bottom: .03in;
|
||||
}
|
||||
.colaspeicon{
|
||||
height:.15in;
|
||||
width:.15in;
|
||||
padding-right: .025in;
|
||||
padding-left: .05in;
|
||||
|
|
@ -1572,6 +1569,34 @@ form div{
|
|||
.hiddencat{
|
||||
rotate:-90deg;
|
||||
}
|
||||
.svg-announce{
|
||||
mask: url(/icons/announce.svg);
|
||||
}
|
||||
.svg-category{
|
||||
mask: url(/icons/category.svg);
|
||||
}
|
||||
.svg-channel{
|
||||
mask: url(/icons/channel.svg);
|
||||
}
|
||||
.svg-copy{
|
||||
mask: url(/icons/copy.svg);
|
||||
}
|
||||
.svg-explore{
|
||||
mask: url(/icons/explore.svg);
|
||||
}
|
||||
.svg-home{
|
||||
mask: url(/icons/home.svg);
|
||||
}
|
||||
.svg-settings{
|
||||
mask: url(/icons/settings.svg);
|
||||
}
|
||||
.svg-voice{
|
||||
mask: url(/icons/voice.svg);
|
||||
}
|
||||
.svgtheme{
|
||||
background: var(--icon-color);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
.svgicon{
|
||||
width:.5in;
|
||||
height:.5in;
|
||||
|
|
@ -1726,6 +1751,7 @@ form div{
|
|||
background: var(--settings-hover);
|
||||
}
|
||||
#settings{
|
||||
height:.225in;
|
||||
width:.225in;
|
||||
margin:.05in;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue