Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #68 from ygg2/voice-css

Browse source 
Voice css
This commit is contained in:
MathMan05 2024-10-26 16:17:57 -05:00 • committed by GitHub
commit a1bd2836ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 2262 additions and 2574 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/webpage/channel.ts
View file

@ -120,13 +120,14 @@ class Channel extends SnowFlake{
const div = document.createElement("div");
div.classList.add("invitediv");
const text = document.createElement("span");
text.classList.add("ellipsis");
div.append(text);
let uses = 0;
let expires = 1800;
const copycontainer = document.createElement("div");
copycontainer.classList.add("copycontainer");
const copy = document.createElement("span");
copy.classList.add("copybutton", "svgtheme", "svg-copy");
copy.classList.add("copybutton", "svgicon", "svg-copy");
copycontainer.append(copy);
copycontainer.onclick = _=>{
if(text.textContent){
@ -489,18 +490,18 @@ class Channel extends SnowFlake{
const decdiv = document.createElement("div");
const decoration = document.createElement("span");
decoration.classList.add("svgtheme", "collapse-icon", "svg-category");
decoration.classList.add("svgicon", "collapse-icon", "svg-category");
decdiv.appendChild(decoration);
const myhtml = document.createElement("p2");
myhtml.classList.add("ellipsis");
myhtml.textContent = this.name;
decdiv.appendChild(myhtml);
caps.appendChild(decdiv);
const childrendiv = document.createElement("div");
if(admin){
const addchannel = document.createElement("span");
addchannel.textContent = "+";
addchannel.classList.add("addchannel");
addchannel.classList.add("addchannel","svgicon","svg-plus");
caps.appendChild(addchannel);
addchannel.onclick = _=>{
this.guild.createchannels(this.createChannel.bind(this));
@ -508,8 +509,8 @@ class Channel extends SnowFlake{
this.coatDropDiv(decdiv, childrendiv);
}
div.appendChild(caps);
caps.classList.add("capsflex");
decdiv.classList.add("channeleffects");
caps.classList.add("flexltr","capsflex");
decdiv.classList.add("flexltr","channeleffects");
decdiv.classList.add("channel");
Channel.contextmenu.bindContextmenu(decdiv, this,undefined);
@ -554,29 +555,34 @@ class Channel extends SnowFlake{
}
// @ts-ignore I dont wanna deal with this
div.all = this;
const button = document.createElement("button");
button.classList.add("channelbutton");
div.append(button);
const myhtml = document.createElement("span");
myhtml.classList.add("ellipsis");
myhtml.textContent = this.name;
if(this.type === 0){
const decoration = document.createElement("span");
div.appendChild(decoration);
decoration.classList.add("space", "svgtheme", "svg-channel");
button.appendChild(decoration);
decoration.classList.add("space", "svgicon", "svg-channel");
}else if(this.type === 2){
//
const decoration = document.createElement("span");
div.appendChild(decoration);
decoration.classList.add("space", "svgtheme", "svg-voice");
button.appendChild(decoration);
decoration.classList.add("space", "svgicon", "svg-voice");
}else if(this.type === 5){
//
const decoration = document.createElement("span");
div.appendChild(decoration);
decoration.classList.add("space", "svgtheme", "svg-announce");
button.appendChild(decoration);
decoration.classList.add("space", "svgicon", "svg-announce");
}else{
console.log(this.type);
}
div.appendChild(myhtml);
div.onclick = _=>{
button.appendChild(myhtml);
button.onclick = _=>{
this.getHTML();
const toggle = document.getElementById("maintoggle") as HTMLInputElement;
toggle.checked = true;
};
if(this.type===2){
const voiceUsers=document.createElement("div");
@ -617,6 +623,7 @@ class Channel extends SnowFlake{
return [];
}
const div=document.createElement("div");
div.classList.add("voiceuser");
const span=document.createElement("span");
span.textContent=member.name;
div.append(span);
@ -812,6 +819,7 @@ class Channel extends SnowFlake{
}
makereplybox(){
const replybox = document.getElementById("replybox") as HTMLElement;
const typebox = document.getElementById("typebox") as HTMLElement;
if(this.replyingto){
replybox.innerHTML = "";
const span = document.createElement("span");
@ -824,14 +832,16 @@ class Channel extends SnowFlake{
replybox.classList.add("hideReplyBox");
this.replyingto = null;
replybox.innerHTML = "";
typebox.classList.remove("typeboxreplying");
};
replybox.classList.remove("hideReplyBox");
X.textContent = "⦻";
X.classList.add("cancelReply");
X.classList.add("cancelReply","svgicon","svg-x");
replybox.append(span);
replybox.append(X);
typebox.classList.add("typeboxreplying");
}else{
replybox.classList.add("hideReplyBox");
typebox.classList.remove("typeboxreplying");
}
}
async getmessage(id: string): Promise<Message>{

7
src/webpage/contextmenu.ts
View file

@ -90,6 +90,13 @@ class Contextmenu<x, y>{
this.makemenu(event.clientX, event.clientY, addinfo, other);
};
obj.addEventListener("contextmenu", func);
obj.addEventListener("touchstart",(event: TouchEvent)=>{
if(event.touches.length > 1){
event.preventDefault();
event.stopImmediatePropagation();
this.makemenu(event.touches[0].clientX, event.touches[0].clientY, addinfo, other);
}
});
return func;
}
static keepOnScreen(obj: HTMLElement){

8
src/webpage/dialog.ts
View file

@ -197,11 +197,17 @@ class Dialog{
case"select": {
const div = document.createElement("div");
const label = document.createElement("label");
const selectSpan = document.createElement("span");
selectSpan.classList.add("selectspan");
const select = document.createElement("select");
const selectArrow = document.createElement("span");
selectArrow.classList.add("svgicon","svg-category","selectarrow");
label.textContent = array[1];
selectSpan.append(select);
selectSpan.append(selectArrow);
div.append(label);
div.appendChild(select);
div.appendChild(selectSpan);
for(const thing of array[2]){
const option = document.createElement("option");
option.textContent = thing;

3
src/webpage/direct.ts
View file

@ -153,8 +153,9 @@ class Group extends Channel{
const div = document.createElement("div");
Group.contextmenu.bindContextmenu(div, this,undefined);
this.html = new WeakRef(div);
div.classList.add("channeleffects");
div.classList.add("flexltr","liststyle");
const myhtml = document.createElement("span");
myhtml.classList.add("ellipsis");
myhtml.textContent = this.name;
div.appendChild(this.user.buildpfp());
div.appendChild(myhtml);

6
src/webpage/embed.ts
View file

@ -157,13 +157,11 @@ Url.pathname.split("/")[Url.pathname.split("/").length - 1];
if(this.json?.footer?.text){
const span = document.createElement("span");
span.textContent = this.json.footer.text;
span.classList.add("spaceright");
footer.append(span);
}
if(this.json?.footer && this.json?.timestamp){
const span = document.createElement("span");
span.textContent = "•";
span.classList.add("spaceright");
span.textContent = " • ";
footer.append(span);
}
if(this.json?.timestamp){
@ -288,7 +286,7 @@ json.guild;
guild as invitejson["guild"] & { info: { cdn: string } }
);
const iconrow = document.createElement("div");
iconrow.classList.add("flexltr", "flexstart");
iconrow.classList.add("flexltr");
iconrow.append(icon);
{
const guildinfo = document.createElement("div");

2
src/webpage/emoji.ts
View file

@ -143,7 +143,7 @@ class Emoji{
title.classList.add("emojiTitle");
menu.append(title);
const selection = document.createElement("div");
selection.classList.add("flexltr", "dontshrink", "emojirow");
selection.classList.add("flexltr", "emojirow");
const body = document.createElement("div");
body.classList.add("emojiBody");

4
src/webpage/file.ts
View file

@ -83,7 +83,9 @@ class File{
div.append(contained);
const controls = document.createElement("div");
const garbage = document.createElement("button");
garbage.textContent = "🗑";
const icon = document.createElement("span");
icon.classList.add("svgicon","svg-delete");
garbage.append(icon);
garbage.onclick = _=>{
div.remove();
files.splice(files.indexOf(file), 1);

27
src/webpage/home.html
View file

@ -11,28 +11,29 @@
<meta content="#4b458c" data-react-helmet="true" name="theme-color">
<link href="/style.css" rel="stylesheet">
<link href="/themes.css" rel="stylesheet" id="lightcss">
<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
</head>
<body class="Dark-theme" style="overflow-y: scroll;">
<body class="no-theme" style="overflow-y: scroll;">
<div id="titleDiv">
<img src="/logo.svg" width="40">
<h1 id="pageTitle">Jank Client</h1>
<a href="https://sb-jankclient.vanillaminigames.net/invite/USgYJo?instance=https%3A%2F%2Fspacebar.chat"
class="TitleButtons">
<h1>Spacebar Guild</h1>
Spacebar Guild
</a>
<a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
<h1>Github</h1>
Github
</a>
<a href="/channels/@me" class="TitleButtons">
Open Client
</a>
</div>
<div class="flexttb">
<div id="homePage">
<div class="flexttb pagehead">
<h1>Welcome to Jank Client</h1>
</div>
<h1 class="pagehead">Welcome to Jank Client</h1>
<div class="pagebox">
<p>Jank Client is a spacebar compatible client seeking to be as good as it can be with many features including:
</p>
<p>Jank Client is a Spacebar-compatible client seeking to be as good as it can be with many features including:</p>
<ul>
<li>Direct Messaging</li>
<li>Reactions support</li>
@ -44,16 +45,16 @@
</ul>
</div>
<div class="pagebox">
<h2>Spacebar compatible Instances:</h2>
<h2>Spacebar-Compatible Instances:</h2>
<div id="instancebox">
</div>
</div>
<div class="pagebox">
<h2>Contribute to Jank Client</h2>
<p>We always appreciate some help, wether that be in the form of bug reports, or code, or even just pointing out
<p>We always appreciate some help, whether that be in the form of bug reports, or code, or even just pointing out
some typos.</p><br>
</a><a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
<h1>Github</h1>
<a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
Github
</a>
</div>
</div>

4
src/webpage/home.ts
View file

@ -37,11 +37,11 @@ login?: string;
div.append(img);
}
const statbox = document.createElement("div");
statbox.classList.add("flexttb");
statbox.classList.add("flexttb","flexgrow");
{
const textbox = document.createElement("div");
textbox.classList.add("flexttb", "instatancetextbox");
textbox.classList.add("flexttb", "instancetextbox");
const title = document.createElement("h2");
title.innerText = instance.name;
if(instance.online !== undefined){

1
src/webpage/icons/plus.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path fill="#c9c9c9" stroke="red" stroke-linecap="round" stroke-width="24" d="M90 168V12M12 90h156"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 169 B

1
src/webpage/icons/x.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path fill="red" d="M90 0A90 90 0 0 0 0 90a90 90 0 0 0 90 90 90 90 0 0 0 90-90A90 90 0 0 0 90 0zM61.7 49.7a12 12 0 0 1 8.5 3.5L90 73l19.8-19.8a12 12 0 0 1 8.5-3.5 12 12 0 0 1 8.5 3.5 12 12 0 0 1 0 17L107 90l19.8 19.8a12 12 0 0 1 0 17 12 12 0 0 1-17 0L90 107l-19.8 19.8a12 12 0 0 1-17 0 12 12 0 0 1 0-17L73 90 53.2 70.2a12 12 0 0 1 0-17 12 12 0 0 1 8.5-3.5z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 427 B

47
src/webpage/index.html
View file

@ -11,15 +11,15 @@
<meta content="#4b458c" data-react-helmet="true" name="theme-color">
<link href="/style.css" rel="stylesheet">
<link href="/themes.css" rel="stylesheet" id="lightcss">
<style>body.no-theme,#loading{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme,#loading{background:#9397bd;}}</style>
<link rel="manifest" href="/manifest.json">
</head>
<body class="Dark-theme">
<body class="no-theme">
<script src="/index.js" type="module"></script>
<div id="loading" class="loading">
<div id="centerdiv">
<div class="centeritem">
<img src="/logo.svg" style="width:3in;height:3in;">
<h1>Jank Client is loading</h1>
<h2 id="load-desc">This shouldn't take long</h2>
@ -27,15 +27,13 @@
</div>
</div>
<div class="flexltr" id="page">
<div id="neunence">
<div id="servers"></div>
</div>
<div class="flexttb channelflex">
<div class="servertd" id="servertd">
<h2 id="serverName">Server Name</h2>
<div class="flexltr header" id="servertd">
<h2 id="serverName" class="ellipsis">Server Name</h2>
</div>
<div id="channels"></div>
<div class="flexttb" style="flex-shrink: 0;">
<div class="flexttb">
<div class="flexltr" id="VoiceBox">
<span id="VoiceStatus"></span>
</div>
@ -43,39 +41,48 @@
<div class="flexltr" id="userinfo">
<img id="userpfp" class="pfp">
<div class="userflex">
<div class="flexttb userflex">
<p id="username">USERNAME</p>
<p id="status">STATUS</p>
</div>
</div>
<div id="user-actions">
<span id="settings" class="svgtheme svg-settings"></span>
<span id="settings" class="svgicon svg-settings"></span>
</div>
</div>
</div>
</div>
<div class="flexttb messageflex">
<div class="servertd channelnamediv">
<span id="mobileback" hidden></span>
<div class="flexttb flexgrow" id="mainarea">
<div class="flexltr header channelnamediv">
<label for="maintoggle" id="maintoggleicon">
<span class="svgicon svg-category"></span>
</label>
<input type="checkbox" id="maintoggle">
<span class="flexltr">
<span id="channelname">Channel name</span>
<span id="channelTopic" hidden>Channel topic</span>
<span id="channelTopic" class="ellipsis" hidden>Channel topic</span>
</span>
<label for="memberlisttoggle" id="memberlisttoggleicon">
<span class="svgicon svg-channel"></span>
</label>
<input type="checkbox" id="memberlisttoggle" checked>
</div>
<div class="flexltr">
<div class="flexttb">
<div id="channelw">
<div class="flexltr flexgrow">
<div class="flexttb flexgrow">
<div id="channelw" class="flexltr">
<div id="loadingdiv">
</div>
</div>
<div id="pasteimage"></div>
<div id="pasteimage" class="flexltr"></div>
<div id="replybox" class="hideReplyBox"></div>
<div id="typediv">
<div id="realbox">
<div id="typebox" contentEditable="true"></div>
</div>
<div id="typing" class="hidden">
<div id="typing" class="hidden flexltr">
<p id="typingtext">typing</p>
<div class="loading-indicator">
<div class="flexltr loading-indicator">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>

25
src/webpage/index.ts
View file

@ -22,7 +22,7 @@ import{ File }from"./file.js";
function showAccountSwitcher(): void{
const table = document.createElement("div");
table.classList.add("accountSwitcher");
table.classList.add("flexttb","accountSwitcher");
for(const user of Object.values(users.users)){
const specialUser = user as Specialuser;
@ -235,25 +235,12 @@ import{ File }from"./file.js";
userSettings;
if(mobile){
const channelWrapper = document.getElementById(
"channelw"
) as HTMLDivElement;
const channelWrapper = document.getElementById("channelw") as HTMLDivElement;
channelWrapper.onclick = ()=>{
(
document.getElementById("channels")!.parentNode as HTMLElement
).classList.add("collapse");
document.getElementById("servertd")!.classList.add("collapse");
document.getElementById("servers")!.classList.add("collapse");
};
const mobileBack = document.getElementById("mobileback") as HTMLDivElement;
mobileBack.textContent = "#";
mobileBack.onclick = ()=>{
(
document.getElementById("channels")!.parentNode as HTMLElement
).classList.remove("collapse");
document.getElementById("servertd")!.classList.remove("collapse");
document.getElementById("servers")!.classList.remove("collapse");
const toggle = document.getElementById("maintoggle") as HTMLInputElement;
toggle.checked = true;
};
const memberListToggle = document.getElementById("memberlisttoggle") as HTMLInputElement;
memberListToggle.checked = false;
}
})();

2
src/webpage/infiniteScroller.ts
View file

@ -39,7 +39,7 @@ offset: number
}
const scroll = document.createElement("div");
scroll.classList.add("flexttb", "scroller");
scroll.classList.add("scroller");
this.div = scroll;
this.div.addEventListener("scroll", ()=>{

8
src/webpage/invite.html
View file

@ -1,4 +1,5 @@
<body class="Dark-theme">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,7 +11,9 @@
<meta content="#4b458c" data-react-helmet="true" name="theme-color">
<link href="/style.css" rel="stylesheet">
<link href="/themes.css" rel="stylesheet" id="lightcss">
<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
</head>
<body class="no-theme">
<div>
<div id="invitebody">
<div id="inviteimg"></div>
@ -20,4 +23,5 @@
</div>
</div>
<script type="module" src="/invite.js"></script>
</body>
</body>
</html>

2
src/webpage/invite.ts
View file

@ -136,7 +136,7 @@ document.getElementById("inviteimg")!.append(div);
}
table.append(td);
table.classList.add("accountSwitcher");
table.classList.add("flexttb","accountSwitcher");
console.log(table);
document.body.append(table);
}

37
src/webpage/localuser.ts
View file

@ -635,11 +635,12 @@ class Localuser{
const memberdiv=document.createElement("div");
const pfp=await member.user.buildstatuspfp();
const username=document.createElement("span");
username.classList.add("ellipsis");
username.textContent=member.name;
member.bind(username)
member.user.bind(memberdiv,member.guild,false);
memberdiv.append(pfp,username);
memberdiv.classList.add("flexltr");
memberdiv.classList.add("flexltr","liststyle");
membershtml.append(memberdiv);
}
category.append(membershtml);
@ -754,7 +755,7 @@ class Localuser{
const div = document.createElement("div");
div.classList.add("home", "servericon");
home.classList.add("svgtheme", "svgicon", "svg-home");
home.classList.add("svgicon", "svg-home");
home.all = this.guildids.get("@me");
(this.guildids.get("@me") as Guild).html = outdiv;
const unread = document.createElement("div");
@ -792,19 +793,17 @@ class Localuser{
br.id = "bottomseparator";
const div = document.createElement("div");
div.textContent = "+";
const plus = document.createElement("span");
plus.classList.add("svgicon", "svg-plus");
div.classList.add("home", "servericon");
div.appendChild(plus);
serverlist.appendChild(div);
div.onclick = _=>{
this.createGuild();
};
const guilddsdiv = document.createElement("div");
const guildDiscoveryContainer = document.createElement("span");
guildDiscoveryContainer.classList.add(
"svgtheme",
"svgicon",
"svg-explore"
);
guildDiscoveryContainer.classList.add("svgicon", "svg-explore");
guilddsdiv.classList.add("home", "servericon");
guilddsdiv.appendChild(guildDiscoveryContainer);
serverlist.appendChild(guilddsdiv);
@ -870,7 +869,7 @@ class Localuser{
["title", "Create a guild"],
[
"fileupload",
"Icon:",
"Icon: ",
function(event: Event){
const target = event.target as HTMLInputElement;
if(!target.files)return;
@ -893,7 +892,7 @@ class Localuser{
[
"button",
"",
"submit",
"Submit",
()=>{
this.makeGuild(fields).then(_=>{
if(_.message){
@ -921,7 +920,7 @@ class Localuser{
}
async guildDiscovery(){
const content = document.createElement("div");
content.classList.add("guildy");
content.classList.add("flexttb","guildy");
content.textContent = "Loading...";
const full = new Dialog(["html", content]);
full.show();
@ -1136,7 +1135,7 @@ class Localuser{
});
let changed = false;
const pronounbox = settingsLeft.addTextInput(
"Pronouns",
"Pronouns:",
_=>{
if(newpronouns || newbio || changed){
this.updateProfile({
@ -1168,7 +1167,7 @@ class Localuser{
color = "transparent";
}
const colorPicker = settingsLeft.addColorInput(
"Profile color",
"Profile color:",
_=>{},
{ initColor: color }
);
@ -1181,9 +1180,9 @@ class Localuser{
});
}
{
const tas = settings.addButton("Themes & sounds");
const tas = settings.addButton("Themes & Sounds");
{
const themes = ["Dark", "WHITE", "Light"];
const themes = ["Dark", "WHITE", "Light", "Dark-Accent"];
tas.addSelect(
"Theme:",
_=>{
@ -1459,9 +1458,9 @@ class Localuser{
}
);
form.addTextInput("Name", "name", { required: true });
form.addTextInput("Name:", "name", { required: true });
form.addSelect(
"Team",
"Team:",
"team_id",
["Personal", ...teams.map((team: { name: string })=>team.name)],
{
@ -1577,7 +1576,7 @@ class Localuser{
});
form.addTextInput("Bot username:","username",{initText:bot.username});
form.addFileInput("Bot avatar:","avatar");
form.addButtonInput("Reset Token:","Reset",async ()=>{
form.addButtonInput("","Reset Token",async ()=>{
if(!confirm("Are you sure you want to reset the bot token? Your bot will stop working until you update it.")){
return;
}
@ -1617,7 +1616,7 @@ class Localuser{
this.userinfo.updateLocal();
}
});
form.addButtonInput("","Advanced bot settings",()=>{
form.addButtonInput("","Advanced Bot Settings",()=>{
const token=this.botTokens.get(appId);
if(token){
const botc=new Bot(bot,token,this);

25
src/webpage/login.html
View file

@ -1,4 +1,5 @@
<body class="Dark-theme">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -12,13 +13,13 @@
<meta content="#4b458c" data-react-helmet="true" name="theme-color">
<link href="/style.css" rel="stylesheet">
<link href="/themes.css" rel="stylesheet" id="lightcss">
<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
</head>
<body class="no-theme">
<div id="logindiv">
<h1>Login</h1>
<br >
<form id="form" submit="check(e)">
<label for="instance"><b>Instance:</b></label
><br >
<label for="instance"><b>Instance:</b></label>
<p id="verify"></p>
<input
type="search"
@ -27,29 +28,26 @@
name="instance"
id="instancein"
value=""
id="instancein"
required
><br ><br >
>
<label for="uname"><b>Email:</b></label
><br >
<label for="uname"><b>Email:</b></label>
<input
type="text"
placeholder="Enter email address"
name="uname"
id="uname"
required
><br ><br >
>
<label for="psw"><b>Password:</b></label
><br >
<label for="psw"><b>Password:</b></label>
<input
type="password"
placeholder="Enter Password"
name="psw"
id="psw"
required
><br ><br ><br ><br >
>
<p class="wrongred" id="wrong"></p>
<div id="h-captcha"></div>
@ -59,4 +57,5 @@
</div>
<datalist id="instances"></datalist>
<script src="/login.js" type="module"></script>
</body>
</body>
</html>

2
src/webpage/login.ts
View file

@ -95,7 +95,7 @@ function setDefaults(){
userinfos.users = {};
}
if(userinfos.accent_color === undefined){
userinfos.accent_color = "#242443";
userinfos.accent_color = "#3096f7";
}
document.documentElement.style.setProperty(
"--accent-color",

4
src/webpage/markdown.ts
View file

@ -765,12 +765,12 @@ txt[j + 1] === undefined)
}else{
const full: Dialog = new Dialog([
"vdiv",
["title", "You're leaving spacebar"],
["title", "You're leaving Spacebar"],
[
"text",
"You're going to " +
Url.host +
" are you sure you want to go there?",
". Are you sure you want to go there?",
],
[
"hdiv",

54
src/webpage/message.ts
View file

@ -11,6 +11,7 @@ import{ SnowFlake }from"./snowflake.js";
import{ memberjson, messagejson }from"./jsontypes.js";
import{ Emoji }from"./emoji.js";
import{ Dialog }from"./dialog.js";
import{ mobile }from"./login.js";
import { I18n } from "./i18n.js";
class Message extends SnowFlake{
@ -403,22 +404,19 @@ class Message extends SnowFlake{
}
if(this.message_reference){
const replyline = document.createElement("div");
const line = document.createElement("hr");
const minipfp = document.createElement("img");
minipfp.classList.add("replypfp");
replyline.appendChild(line);
replyline.appendChild(minipfp);
const username = document.createElement("span");
replyline.appendChild(username);
const reply = document.createElement("div");
username.classList.add("username");
reply.classList.add("replytext");
reply.classList.add("replytext","ellipsis");
replyline.appendChild(reply);
const line2 = document.createElement("hr");
replyline.appendChild(line2);
line2.classList.add("reply");
line.classList.add("startreply");
replyline.classList.add("replyflex");
replyline.classList.add("flexltr","replyflex");
// TODO: Fix this
this.channel.getmessage(this.message_reference.message_id).then(message=>{
if(message.author.relationshipType === 2){
@ -441,7 +439,6 @@ class Message extends SnowFlake{
div.appendChild(build);
if({ 0: true, 19: true }[this.type] || this.attachments.length !== 0){
const pfpRow = document.createElement("div");
pfpRow.classList.add("flexltr");
let pfpparent, current;
if(premessage != null){
pfpparent ??= premessage;
@ -465,10 +462,7 @@ class Message extends SnowFlake{
pfpRow.classList.add("pfprow");
build.appendChild(pfpRow);
const text = document.createElement("div");
text.classList.add("flexttb");
const texttxt = document.createElement("div");
texttxt.classList.add("commentrow", "flexttb");
text.appendChild(texttxt);
text.classList.add("commentrow", "flexttb");
if(combine){
const username = document.createElement("span");
username.classList.add("username");
@ -476,7 +470,6 @@ class Message extends SnowFlake{
div.classList.add("topMessage");
username.textContent = this.author.username;
const userwrap = document.createElement("div");
userwrap.classList.add("flexltr");
userwrap.appendChild(username);
if(this.author.bot){
const username = document.createElement("span");
@ -489,7 +482,7 @@ class Message extends SnowFlake{
time.classList.add("timestamp");
userwrap.appendChild(time);
texttxt.appendChild(userwrap);
text.appendChild(userwrap);
}else{
div.classList.remove("topMessage");
}
@ -498,13 +491,13 @@ class Message extends SnowFlake{
const messagedwrap = document.createElement("div");
messagedwrap.classList.add("flexttb");
messagedwrap.appendChild(messaged);
texttxt.appendChild(messagedwrap);
text.appendChild(messagedwrap);
build.appendChild(text);
if(this.attachments.length){
console.log(this.attachments);
const attach = document.createElement("div");
attach.classList.add("flexltr");
attach.classList.add("flexltr","attachments");
for(const thing of this.attachments){
attach.appendChild(thing.getHTML());
}
@ -512,7 +505,6 @@ class Message extends SnowFlake{
}
if(this.embeds.length){
const embeds = document.createElement("div");
embeds.classList.add("flexltr");
for(const thing of this.embeds){
embeds.appendChild(thing.generateHTML());
}
@ -521,27 +513,23 @@ class Message extends SnowFlake{
//
}else if(this.type === 7){
const text = document.createElement("div");
text.classList.add("flexttb");
const texttxt = document.createElement("div");
text.appendChild(texttxt);
build.appendChild(text);
texttxt.classList.add("flexltr");
const messaged = document.createElement("span");
div.txt = messaged;
messaged.textContent = "welcome: ";
texttxt.appendChild(messaged);
text.appendChild(messaged);
const username = document.createElement("span");
username.textContent = this.author.username;
//this.author.profileclick(username);
this.author.bind(username, this.guild);
texttxt.appendChild(username);
text.appendChild(username);
username.classList.add("username");
const time = document.createElement("span");
time.textContent = " " + formatTime(new Date(this.timestamp));
time.classList.add("timestamp");
texttxt.append(time);
text.append(time);
div.classList.add("topMessage");
}
const reactions = document.createElement("div");
@ -556,6 +544,7 @@ class Message extends SnowFlake{
if(this.div){
let buttons: HTMLDivElement | undefined;
this.div.onmouseenter = _=>{
if(mobile)return;
if(buttons){
buttons.remove();
buttons = undefined;
@ -564,9 +553,9 @@ class Message extends SnowFlake{
buttons = document.createElement("div");
buttons.classList.add("messageButtons", "flexltr");
if(this.channel.hasPermission("SEND_MESSAGES")){
const container = document.createElement("div");
const container = document.createElement("button");
const reply = document.createElement("span");
reply.classList.add("svgtheme", "svg-reply", "svgicon");
reply.classList.add("svg-reply", "svgicon");
container.append(reply);
buttons.append(container);
container.onclick = _=>{
@ -574,9 +563,9 @@ class Message extends SnowFlake{
};
}
if(this.author === this.localuser.user){
const container = document.createElement("div");
const container = document.createElement("button");
const edit = document.createElement("span");
edit.classList.add("svgtheme", "svg-edit", "svgicon");
edit.classList.add("svg-edit", "svgicon");
container.append(edit);
buttons.append(container);
container.onclick = _=>{
@ -584,9 +573,9 @@ class Message extends SnowFlake{
};
}
if(this.canDelete()){
const container = document.createElement("div");
const container = document.createElement("button");
const reply = document.createElement("span");
reply.classList.add("svgtheme", "svg-delete", "svgicon");
reply.classList.add("svg-delete", "svgicon");
container.append(reply);
buttons.append(container);
container.onclick = _=>{
@ -595,12 +584,14 @@ class Message extends SnowFlake{
return;
}
const diaolog = new Dialog([
"vdiv",
["title", "Are you sure you want to delete this?"],
[
"hdiv",
["title", "are you sure you want to delete this?"],
[
"button",
"",
"yes",
"Yes",
()=>{
this.delete();
diaolog.hide();
@ -609,11 +600,12 @@ class Message extends SnowFlake{
[
"button",
"",
"no",
"No",
()=>{
diaolog.hide();
},
],
]
]);
diaolog.show();
};

14
src/webpage/oauth2/auth.ts
View file

@ -102,18 +102,24 @@ type botjsonfetch={
}
}
const dialog=document.createElement("dialog");
dialog.classList.add("accountSwitcher");
dialog.classList.add("flexttb","accountSwitcher");
const h1=document.createElement("h1");
dialog.append(h1);
h1.textContent="Invite to server:";
const select=document.createElement("select");
const selectSpan=document.createElement("span");
selectSpan.classList.add("selectspan");
const selectArrow = document.createElement("span");
selectArrow.classList.add("svgicon","svg-category","selectarrow");
for(const guild of guilds){
const option=document.createElement("option");
option.textContent=guild.name;
option.value=guild.id;
select.append(option);
}
dialog.append(select);
selectSpan.append(select);
selectSpan.append(selectArrow);
dialog.append(selectSpan);
const button=document.createElement("button");
button.textContent="Invite";
dialog.append(button);
@ -193,7 +199,7 @@ type botjsonfetch={
}
table.append(td);
table.classList.add("accountSwitcher");
table.classList.add("flexttb","accountSwitcher");
console.log(table);
document.body.append(table);
}
@ -221,7 +227,7 @@ type botjsonfetch={
const int = Number((BigInt(json.bot.id) >> 22n) % 6n);
pfp.src=`${urls.cdn}/embed/avatars/${int}.png`;
}
const perms=document.getElementById("permsions") as HTMLDivElement;
const perms=document.getElementById("permissions") as HTMLDivElement;
if(perms&&permstr){
const permisions=new Permissions(permstr)

10
src/webpage/oauth2/authorize.html
View file

@ -1,4 +1,5 @@
<body class="Dark-theme">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,15 +10,18 @@
<meta content="#4b458c" data-react-helmet="true" name="theme-color">
<link href="/style.css" rel="stylesheet">
<link href="/themes.css" rel="stylesheet" id="lightcss">
<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
</head>
<body class="no-theme">
<div>
<div id="invitebody">
<img id="inviteimg" class="pfp"/>
<h1 id="invitename">Bot Name</h1>
<p id="invitedescription">Add Bot</p>
<div id="permsions"><h1>This will allow the bot to:</h1></div>
<div id="permissions"><h1>This will allow the bot to:</h1></div>
<button id="AcceptInvite">Add to server</button>
</div>
</div>
<script type="module" src="/oauth2/auth.js"></script>
</body>
</body>
</html>

26
src/webpage/register.html
View file

@ -1,5 +1,5 @@
<body class="Dark-theme">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,37 +10,38 @@
<meta content="#4b458c" data-react-helmet="true" name="theme-color">
<link href="/style.css" rel="stylesheet">
<link href="/themes.css" rel="stylesheet" id="lightcss">
<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
</head>
<body class="no-theme">
<div id="logindiv">
<h1>Create an account</h1><br>
<h1>Create an account</h1>
<form id="register" submit="registertry(e)">
<div>
<label for="instance"><b>Instance:</b></label><br>
<label for="instance"><b>Instance:</b></label>
<p id="verify"></p>
<input type="search" list="instances" placeholder="Instance URL" id="instancein" name="instance" value=""
id="instancein" required>
<input type="search" list="instances" placeholder="Instance URL" id="instancein" name="instance" value="" required>
</div>
<div>
<label for="uname"><b>Email:</b></label><br>
<label for="uname"><b>Email:</b></label>
<input type="text" placeholder="Enter Email" name="uname" id="uname" required>
</div>
<div>
<label for="uname"><b>Username:</b></label><br>
<label for="uname"><b>Username:</b></label>
<input type="text" placeholder="Enter Username" name="username" id="username" required>
</div>
<div>
<label for="psw"><b>Password:</b></label><br>
<label for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
</div>
<div>
<label for="psw2"><b>Enter password again:</b></label><br>
<label for="psw2"><b>Enter password again:</b></label>
<input type="password" placeholder="Enter Password Again" name="psw2" id="psw2" required>
</div>
<div>
<label for="date"><b>Date of birth:</b></label><br>
<label for="date"><b>Date of birth:</b></label>
<input type="date" id="date" name="date">
</div>
@ -59,4 +60,5 @@
</div>
<datalist id="instances"></datalist>
<script src="/register.js" type="module"></script>
</body>
</body>
</html>

27
src/webpage/settings.ts
View file

@ -31,7 +31,7 @@ class Buttons implements OptionsElement<unknown>{
const htmlarea = document.createElement("div");
htmlarea.classList.add("flexgrow");
const buttonTable = document.createElement("div");
buttonTable.classList.add("flexttb", "settingbuttons");
buttonTable.classList.add("settingbuttons");
for(const thing of this.buttons){
const button = document.createElement("button");
button.classList.add("SettingsButton");
@ -244,9 +244,12 @@ class ButtonInput implements OptionsElement<void>{
}
generateHTML(): HTMLDivElement{
const div = document.createElement("div");
if(this.label){
const span = document.createElement("span");
span.classList.add("inlinelabel");
span.textContent = this.label;
div.append(span);
}
const button = document.createElement("button");
button.textContent = this.textContent;
button.onclick = this.onClickEvent.bind(this);
@ -338,6 +341,8 @@ class SelectInput implements OptionsElement<number>{
const span = document.createElement("span");
span.textContent = this.label;
div.append(span);
const selectSpan = document.createElement("span");
selectSpan.classList.add("selectspan");
const select = document.createElement("select");
select.onchange = this.onChange.bind(this);
@ -348,7 +353,11 @@ class SelectInput implements OptionsElement<number>{
}
this.select = new WeakRef(select);
select.selectedIndex = this.index;
div.append(select);
selectSpan.append(select);
const selectArrow = document.createElement("span");
selectArrow.classList.add("svgicon","svg-category","selectarrow");
selectSpan.append(selectArrow);
div.append(selectSpan);
return div;
}
private onChange(){
@ -438,11 +447,13 @@ class FileInput implements OptionsElement<FileList | null>{
const span = document.createElement("span");
span.textContent = this.label;
div.append(span);
const innerDiv = document.createElement("div");
innerDiv.classList.add("flexltr","fileinputdiv");
const input = document.createElement("input");
input.type = "file";
input.oninput = this.onChange.bind(this);
this.input = new WeakRef(input);
div.append(input);
innerDiv.append(input);
if(this.clear){
const button = document.createElement("button");
button.textContent = "Clear";
@ -453,8 +464,9 @@ class FileInput implements OptionsElement<FileList | null>{
this.value = null;
this.owner.changed();
};
div.append(button);
innerDiv.append(button);
}
div.append(innerDiv);
return div;
}
onChange(){
@ -719,7 +731,7 @@ class Options implements OptionsElement<void>{
title: WeakRef<HTMLElement> = new WeakRef(document.createElement("h2"));
generateHTML(): HTMLElement{
const div = document.createElement("div");
div.classList.add("titlediv");
div.classList.add("flexttb","titlediv");
const title = document.createElement("h2");
title.textContent = this.name;
div.append(title);
@ -1199,7 +1211,7 @@ class Settings extends Buttons{
}
show(){
const background = document.createElement("div");
background.classList.add("background");
background.classList.add("flexttb","menu","background");
const title = document.createElement("h2");
title.textContent = this.name;
@ -1209,8 +1221,7 @@ class Settings extends Buttons{
background.append(this.generateHTML());
const exit = document.createElement("span");
exit.textContent = "✖";
exit.classList.add("exitsettings");
exit.classList.add("exitsettings","svgicon","svg-x");
background.append(exit);
exit.onclick = _=>{
this.hide();

3950
src/webpage/style.css
View file

File diff suppressed because it is too large Load diff

324
src/webpage/themes.css
View file

@ -1,178 +1,176 @@
:root {
--servertd-height: 0px;
/* Default value */
--red: red;
--green: green;
--yellow:yellow;
--accent-color:#242443;
--font: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
--black: #000000;
--red: #ff5555;
--yellow: #ffc159;
--green: #1c907b;
}
.Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
/* Themes. See themes.txt */
.Dark-theme {
color-scheme: dark;
--primary-text: #FFF;
--primary-bg: color-mix(in srgb, #2f2f2f 70%, var(--accent-color));
--black: #000;
--shadow: #000;
--focus: #8888ff;
--message-bg-hover: color-mix(in srgb, #191919 85%, var(--accent-color));
--typing-bg: #161616;
--timestamp-color: #a2a2a2;
--code-bg: color-mix(in srgb, #121212 95%, var(--accent-color));
--user-info-bg: color-mix(in srgb,#383838 85%, var(--accent-color));
--user-dock-bg: color-mix(in srgb,#111111 90%, var(--accent-color));
--channels-bg: color-mix(in srgb, #2a2a2a 90%, var(--accent-color));
--channel-hover: color-mix(in srgb, #121212 70%, var(--accent-color));
--blank-bg: #323232;
--light-border: #92929B;
--settings-hover: color-mix(in srgb, #000000 95%, var(--accent-color) 5%);
--quote-bg: #7a798e;
--button-bg: color-mix(in srgb, #191919 85%, var(--accent-color));
--button-hover: color-mix(in srgb, #2f2f2f 70%, var(--accent-color));
--textarea-bg: color-mix(in srgb, #484848 80%, var(--accent-color));
--filename: #47bbff;
--mention-bg: #F00;
--mention-md-bg: #3b588b;
--pronouns: #797979;
--profile-bg: color-mix(in srgb, #232323 90%, var(--accent-color));
--profile-info-bg: color-mix(in srgb, #121212 90%, var(--accent-color));
--server-border: color-mix(in srgb, #000000 80%, var(--accent-color));
--channel-name-bg: color-mix(in srgb, #2a2a2a 80%, var(--accent-color));
--server-name-bg: color-mix(in srgb, #232323 90%, var(--accent-color));
--reply-border: #474b76;
--reply-bg: #0b0d20;
--reply-text: #acacac;
--spoiler-hover: #111111;
--spoiler-open-bg: #1e1e1e;
--unknown-file-bg: #141316;
--unknown-file-border: #474555;
--login-border: #131315;
--loading-bg: #22232c;
--dialog-bg: #33363d;
--dialog-border: #1c1b31;
--scrollbar-track: #34313c;
--scrollbar-thumb: #201f29;
--scrollbar-thumb-hover: #16161f;
--markdown-timestamp: #2f2f33;
--embed: color-mix(in srgb, #131313 90%, var(--accent-color));
--link: #8888ff;
--discovery-bg: #37373b;
--message-jump:#7678b0;
--icon-color:white;
--server-list: color-mix(in srgb, #1d1d1d 90%, var(--accent-color));
--primary-bg: #303339;
--primary-hover: #272b31;
--primary-text: #dfdfdf;
--primary-text-soft: #adb8b9;
--secondary-bg: #16191b;
--secondary-hover: #252b2c;
--servers-bg: #141718;
--channels-bg: #25282b;
--channel-selected: #3c4046;
--typebox-bg: #3a3e45;
--button-bg: #4e5457;
--button-hover: #6b7174;
--spoiler-bg: #000000;
--link: #5ca9ed;
--primary-text-prominent: #efefef;
--dock-bg: #1b1e20;
--card-bg: #000000;
}
.WHITE-theme {
color-scheme: light;
--primary-text: #000;
--primary-bg: #FFF;
--black: #FFF;
--red: #dd6c6c;
--green: #639d63;
--shadow: #777;
--focus: #47bbff;
--message-bg-hover: #dedee2;
--typing-bg: #dad8d8;
--timestamp-color: #929297;
--code-bg: #cbcbcc;
--user-info-bg: #b0abc2;
--user-dock-bg: #b2b2c4;
--channels-bg: #cbcbd8;
--channel-hover: #b8b5cc;
--blank-bg: #ceccdd;
--light-border: #96959e;
--settings-hover: #b5b1bb;
--quote-bg: #7a798e;
--button-bg: #b7b7cc;
--button-hover: #FFF;
--textarea-bg: #b1b6ce;
--filename: #47bbff;
--mention-bg: #F00;
--mention-md-bg: #3b588b;
--pronouns: #6a6a6d;
--profile-bg: #cacad8;
--profile-info-bg: #bbbbce;
--server-border: #bebed3;
--channel-name-bg: #c0c0d4;
--server-name-bg: #a3a3b5;
--reply-border: #b1b2bd;
--reply-bg: #d4d6e9;
--reply-text: #2e2e30;
--spoiler-hover: #b9b9b9;
--spoiler-open-bg: #dadada;
--unknown-file-bg: #bdbdbd;
--unknown-file-border: #adadad;
--login-border: #c3c0e0;
--loading-bg: #b5b7cc;
--dialog-bg: #c1c8d6;
--dialog-border: #b9b7db;
--scrollbar-track: #d5d1e2;
--scrollbar-thumb: #b0afc0;
--scrollbar-thumb-hover: #a5a5b8;
--markdown-timestamp: #c8c8da;
--embed: #f2f3f5;
--link: #3333ee;
--discovery-bg: #c6c6d8;
--message-jump:#ccceff;
--icon-color:black;
--primary-bg: #fefefe;
--primary-hover: #f6f6f9;
--primary-text: #4b4b59;
--primary-text-soft: #656575;
--secondary-bg: #e0e0ea;
--secondary-hover: #d0d0dd;
--servers-bg: #b4b4ca;
--channels-bg: #eaeaf0;
--channel-selected: #c7c7d9;
--typebox-bg: #ededf4;
--button-bg: #cacad8;
--button-hover: #b3b3c4;
--spoiler-bg: #dadada;
--link: #056cd9;
--black: #4b4b59;
--green: #68d79d;
--primary-text-prominent: #08080d;
--secondary-text: #3c3c46;
--secondary-text-soft: #4c4c5a;
--dock-bg: #d1d1df;
--dock-hover: #b8b8d0;
}
.Light-theme {
color-scheme: light;
--primary-text: #000;
--primary-bg: #8e90c3;
--black: #fff;
--shadow: #000;
--focus: #5e50c5;
--primary-bg: #aaafce;
--primary-hover: #b1b6d4;
--primary-text: #060415;
--primary-text-soft: #424268;
--message-bg-hover: #5757b5;
--typing-bg: #d4d6e9;
--profile-bg: #8075bf;
--profile-info-bg: #8075bf;
--timestamp-color: #000000;
--code-bg: #a89adf;
--info-bg: #6060a3;
--user-info-bg: #796f9a;
--user-dock-bg: #83839d;
--channels-bg: #c2c2d1;
--channel-hover: #726e88;
--blank-bg: #5e50c5;
--light-border: #000000;
--settings-hover: #b5b1bb;
--quote-bg: #7a798e;
--button-bg: #5757b5;
--button-hover: #8e90c3;
--textarea-bg: #abb1cd;
--filename: #47bbff;
--mention-bg: #F00;
--mention-md-bg: #3b588b;
--pronouns: #202020;
--channel-name-bg: #c0c0d4;
--server-name-bg: #a3a3b5;
--secondary-bg: #9397bd;
--secondary-hover: #9ea5cc;
--server-border: #aaaac4;
--server-hover: #7f7fa8;
--servers-bg: #7a7aaa;
--channels-bg: #babdd2;
--channel-selected: #9c9fbf;
--typebox-bg: #bac0df;
--reply-border: #474b76;
--reply-bg: #d4d6e9;
--reply-text: #38383d;
--button-bg: #babdd2;
--button-hover: #9c9fbf;
--spoiler-bg: #34333a;
--link: #283c8b;
--spoiler-hover: #34333a;
--spoiler-open-bg: #767587;
--unknown-file-bg: #bdbdbd;
--unknown-file-border: #adadad;
--login-border: #c3c0e0;
--loading-bg: #b5b7cc;
--dialog-bg: #c1c8d6;
--dialog-border: #b9b7db;
--scrollbar-track: #d2cedf;
--scrollbar-thumb: #bdbcca;
--scrollbar-thumb-hover: #a7a7be;
--markdown-timestamp: #c8c8da;
--embed: #cdccd1;
--link: #5566cc;
--discovery-bg: #c6c6d8;
--message-jump:#ccceff;
--icon-color:black;
--black: #434392;
--red: #ca304d;
--secondary-text-soft: #211f2e;
--blank-bg: #494985;
--spoiler-text: #e4e6ed;
}
.Dark-Accent-theme {
color-scheme: dark;
--primary-bg: color-mix(in srgb, #3f3f3f 65%, var(--accent-color));
--primary-hover: color-mix(in srgb, #373737 68%, var(--accent-color));
--primary-text: #ebebeb;
--primary-text-soft: #ebebebb8;
--secondary-bg: color-mix(in srgb, #222222 72%, var(--accent-color));
--secondary-hover: color-mix(in srgb, #222222 65%, var(--accent-color));
--servers-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color));
--channels-bg: color-mix(in srgb, #292929 68%, var(--accent-color));
--channel-selected: color-mix(in srgb, #555555 65%, var(--accent-color));
--typebox-bg: color-mix(in srgb, #666666 60%, var(--accent-color));
--button-bg: color-mix(in srgb, #777777 56%, var(--accent-color));
--button-hover: color-mix(in srgb, #585858 58%, var(--accent-color));
--spoiler: color-mix(in srgb, #101010 72%, var(--accent-color));
--link: color-mix(in srgb, #99ccff 75%, var(--accent-color));
--black: color-mix(in srgb, #000000 90%, var(--accent-color));
--icon: color-mix(in srgb, #ffffff, var(--accent-color));
--dock-bg: color-mix(in srgb, #171717 68%, var(--accent-color));
--spoiler-hover: color-mix(in srgb, #111111 80%, var(--accent-color));
--card-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color));
}
/* Optional Variables */
body {
--primary-text-prominent: var(--primary-text);
--secondary-text: var(--primary-text);
--secondary-text-soft: var(--primary-text-soft);
--text-input-bg: var(--secondary-bg);
--button-text: var(--primary-text);
--button-disabled-text: color-mix(in srgb, var(--button-text), transparent);
--icon: var(--accent-color);
--focus: var(--accent-color);
--shadow: color-mix(in srgb, var(--black) 30%, transparent);
--scrollbar: var(--primary-text-soft);
--scrollbar-track: var(--primary-hover);
--blank-bg: var(--channels-bg);
--divider: color-mix(in srgb, var(--primary-text), transparent);
--channels-header-bg: var(--channels-bg);
--channel-hover: color-mix(in srgb, var(--channel-selected) 60%, transparent);
--dock-bg: var(--secondary-bg);
--dock-hover: var(--secondary-hover);
--user-info-bg: var(--dock-bg);
--user-info-text: var(--secondary-text);
--main-header-bg: transparent;
--message-jump-bg: color-mix(in srgb, var(--accent-color) 20%, transparent);
--code-bg: var(--secondary-bg);
--code-text: var(--secondary-text);
--spoiler-text: var(--primary-text);
--spoiler-hover: color-mix(in srgb, var(--spoiler-bg), var(--primary-text-soft) 10%);
--quote-line: color-mix(in srgb, var(--primary-text-soft), transparent);
--reply-line: color-mix(in srgb, var(--primary-text-soft) 20%, transparent);
--reply-text: var(--primary-text-soft);
--reply-highlight: var(--accent-color);
--mention: color-mix(in srgb, var(--accent-color) 80%, transparent);
--mention-highlight: var(--yellow);
--reaction-bg: var(--secondary-bg);
--reaction-reacted-bg: var(--secondary-hover);
--filename: var(--link);
--embed-bg: var(--secondary-bg);
--sidebar-bg: var(--channels-bg);
--sidebar-hover: var(--channel-hover);
--card-bg: var(--primary-bg);
--role-bg: var(--primary-bg);
--role-text: var(--primary-text);
--settings-bg: var(--primary-bg);
--settings-header-bg: var(--main-header-bg);
--settings-panel-bg: var(--channels-bg);
--settings-panel-selected: var(--channel-selected);
--settings-panel-hover: color-mix(in srgb, var(--settings-panel-selected), transparent);
--loading-bg: var(--secondary-bg);
--loading-text: var(--secondary-text);
}

8
src/webpage/user.ts
View file

@ -245,7 +245,7 @@ class User extends SnowFlake{
async buildstatuspfp(): Promise<HTMLDivElement>{
const div = document.createElement("div");
div.style.position = "relative";
div.classList.add("pfpDiv")
const pfp = this.buildpfp();
div.append(pfp);
const status = document.createElement("div");
@ -399,7 +399,7 @@ class User extends SnowFlake{
div.classList.add("profile", "flexttb");
}else{
this.setstatus("online");
div.classList.add("hypoprofile", "flexttb");
div.classList.add("hypoprofile", "profile", "flexttb");
}
const badgediv = document.createElement("div");
badgediv.classList.add("badges");
@ -426,7 +426,7 @@ class User extends SnowFlake{
const pfp = await this.buildstatuspfp();
div.appendChild(pfp);
const userbody = document.createElement("div");
userbody.classList.add("infosection");
userbody.classList.add("flexttb","infosection");
div.appendChild(userbody);
const usernamehtml = document.createElement("h2");
usernamehtml.textContent = this.username;
@ -450,7 +450,7 @@ class User extends SnowFlake{
Member.resolveMember(this, guild).then(member=>{
if(!member)return;
const roles = document.createElement("div");
roles.classList.add("rolesbox");
roles.classList.add("flexltr","rolesbox");
for(const role of member.roles){
const roleDiv = document.createElement("div");
roleDiv.classList.add("rolediv");