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

Theming update

Browse source
This commit is contained in:
MathMan05 2024-06-08 11:37:51 -05:00
parent dc8ba099da
commit e219ae7fc7
4 changed files with 822 additions and 735 deletions
Download patch file Download diff file Expand all files Collapse all files

5
webpage/index.html
View file

@ -3,11 +3,12 @@
<head> <head>
<link href="/style.css" rel="stylesheet" type="text/css" /> <link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/light.css" rel="stylesheet" type="text/css" id="lightcss" disabled="true"/> <link href="/light.css" rel="stylesheet" type="text/css" id="lightcss"/>
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
</head> </head>
<body>
<body class="Dark-theme">
<script src="/login.js"></script> <script src="/login.js"></script>
<script src="/member.js"></script> <script src="/member.js"></script>
<script src="/user.js"></script> <script src="/user.js"></script>

12
webpage/index.js
View file

@ -632,9 +632,10 @@ function genusersettings(){
thisuser.updatebio(newbio); thisuser.updatebio(newbio);
} }
}], }],
["select","Theme:",["Dark","Light"],e=>{ ["select","Theme:",["Dark","Light","WHITE"],e=>{
localStorage.setItem("theme",["Dark","Light"][e.target.selectedIndex]); localStorage.setItem("theme",["Dark","Light","WHITE"][e.target.selectedIndex]);
},["Dark","Light"].indexOf(localStorage.getItem("theme"))] setTheme();
},["Dark","Light","WHITE"].indexOf(localStorage.getItem("theme"))]
], ],
["vdiv", ["vdiv",
["html",hypothetcialprofie] ["html",hypothetcialprofie]
@ -647,6 +648,11 @@ function genusersettings(){
newbio=null; newbio=null;
}) })
} }
setTheme();
function setTheme(){
const name=localStorage.getItem("theme");
document.body.className=name+"-theme";
}
function userSettings(){ function userSettings(){
usersettings.show(); usersettings.show();
} }

262
webpage/light.css
View file

@ -1,186 +1,100 @@
.centeritem { .WHITE-theme {
background: #a3b8e9; color-scheme: light;
}
.nonimagecenter{
border-color: #b1afd8;
}
.background{
background:#000000bf;
}
.messagediv:hover{
background:rgb(162 162 198);
}
pre{
background:#101014;
color: white;
}
samp{
background:#101014;
}
.contextbutton{
background:rgb(139 139 255);
color:#01021a;
}
.infosection{
background:#57577c;
}
.profile{
background:#a4a0bb;
}
.hypoprofile{
background:#a4a0bb;
}
.contextbutton:hover{
background:rgb(84 84 166);
}
.contextmenu{
background:#a4a2b1;
}
.blankserver{
background:#8b8b98;
}
body{
background:rgb(160 160 229);
color:black;
}
#channels{
background:rgb(123 123 196);
}
input{
background:rgb(163 163 210);
color:black;
}
.spoiler{
background:black;
color:black;
}
.spoiler:hover{
background:#111111;
color:#111111;
}
.unspoiled{
background:#454545;
color: black;
}
.unspoiled:before { --primary-text: #000;
background-color: rgb(0 0 0); --primary-bg: #FFF;
background-clip: content-box; --black: #FFF;
}
.replying{
background:#5f68bb;
}
#typing{
background:#161616;
}
.lightbr{
border-color: #929292;
color:black;
background-color:#9ea7dd;
}
.Home{
background:#7ea6b9;
}
.timestamp{
color:#2c2b31;
} --message-bg-hover: #d2d2df;
.reply{ --typing-bg: #dad8d8;
border-color:#000000; --profile-bg: #afabc5;
} --timestamp-color: #a2a2a2;
.replytext{ --code-bg: #cbcbcc;
padding:.05in; --info-bg: #b0b0c5;
color:#1f1f21; --user-info-bg: #b0abc2;
} --user-dock-bg: #b2b2c4;
::-webkit-scrollbar-track { --channels-bg: #c2c2d1;
--channel-hover: #b8b5cc;
--blank-bg: #ceccdd;
--light-border: #929292;
--settings-hover: #b5b1bb;
--quote-bg: #7a798e;
--button-bg: #b7b7cc;
--textarea-bg: #b1b6ce;
--filename: #47bbff;
--mention-bg: #F00;
--pronouns: #202020;
--server-border: #aaaac4;
--server-hover: #b5b5ce;
background: #978fae; --reply-border: #474b76;
} --reply-bg: #d4d6e9;
--reply-text: #38383d;
::-webkit-scrollbar-thumb { --spoiler-hover: #b9b9b9;
background: #52515a; --spoiler-open-bg: #dadada;
box-shadow: 0px 2px 5px #000000;
}
::-webkit-scrollbar-thumb:hover { --unknown-file-bg: #bdbdbd;
background: #63636a; --unknown-file-border: #adadad;
box-shadow: 0px 2px 5px #000000;
}
.pronouns{
color: #111111;
}
textarea{
background:#9ea9e3;
}
.Channel:hover{ --login-border: #c3c0e0;
background:#5a4fb9; --loading-bg: #b5b7cc;
}
.servertd{
background:#a5a5dc;
border-color:#8c8cb0;
}
.channeleffects:hover{ --dialog-bg: #c1c8d6;
background:#554ab8; --dialog-border: #b9b7db;
}
.tag{
color:black;
}
#userdock{
background:#626292;
}
#settings:hover{
background:#473962;
}
#userinfo{
background:#4e3c8f;
}
button{
color:black;
background:#6363c6;
}
input::file-selector-button{
color:black;
background:#6363c6;
}
#logindiv{
background: #33363d;
border-color:#131315;
}
.addchannel:hover{
background:#524089;
}
input[type="checkbox"] {
accent-color:#5b5dbf;
color:black;
}
.quoteline{
background:#636274;
}
#loading{
background:#9ba0cd;
}
.unkownfile{
background:#a69cbb;
border-color:#474555;
}
.filename{
color:#47bbff;
}
.unread{ --scrollbar-track: #d2cedf;
background:#ffffff; --scrollbar-thumb: #bdbcca;
border-color:black; --scrollbar-thumb-hover: #a7a7be;
}
.pinged{
background:red;
}
.cunread{
box-shadow: inset .024in 0 white;
} }
.Light-theme {
color-scheme: light;
.startreply{ --primary-text: #000;
background: black; --primary-bg: #8e90c3;
--black: #fff;
--message-bg-hover: #5757b5;
--typing-bg: #000000;
--profile-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: #96969e;
--textarea-bg: #abb1cd;
--filename: #47bbff;
--mention-bg: #F00;
--pronouns: #202020;
--server-border: #aaaac4;
--server-hover: #7f7fa8;
--reply-border: #474b76;
--reply-bg: #d4d6e9;
--reply-text: #38383d;
--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;
} }

420
webpage/style.css
View file

@ -1,50 +1,125 @@
:root {
--servertd-height: 0px;
/* Default value */
}
.Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
color-scheme: dark;
--primary-text: #FFF;
--primary-bg: #282832;
--black: #000;
--message-bg-hover: #1e1e28;
--typing-bg: #161616;
--profile-bg: #2e2d33;
--timestamp-color: #a2a2a2;
--code-bg: #101014;
--info-bg: #1a1a1e;
--user-info-bg: #323039;
--user-dock-bg: #1a1a23;
--channels-bg: #32323c;
--channel-hover: #1c1b25;
--blank-bg: #1b1b1b;
--light-border: #929292;
--settings-hover: #0e0d10;
--quote-bg: #7a798e;
--button-bg: #1b1b28;
--textarea-bg: #26272c;
--filename: #47bbff;
--mention-bg: #F00;
--pronouns: #797979;
--server-border: #1b1b24;
--server-hover: #252530;
--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;
}
body {
font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
background-color: var(--primary-bg);
color: var(--primary-text);
overflow-y: hidden;
margin: 0;
padding: 0;
}
.imgfit { .imgfit {
max-width: 80vw; max-width: 80vw;
max-height: 80vh; max-height: 80vh;
width: auto; width: auto;
height: auto; height: auto;
} }
.centeritem { .centeritem {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: #33363d; background-color: var(--dialog-bg);
z-index: 12; z-index: 12;
} }
.commentrow{
vertical-align:top;
height: 100%;
}
.nonimagecenter { .nonimagecenter {
z-index: 12; z-index: 12;
border-style: solid; border-style: solid;
border-radius: .1in; border-radius: .1in;
border-color: #1c1b31; border-color: var(--dialog-border);
} }
th {
font-weight: 400;
padding: 0;
}
.background { .background {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top:0px; top: 0;
background:#000000bf; background-color: #000000bf;
z-index: 11; z-index: 11;
} }
.messagediv:hover { .messagediv:hover {
background:rgb(30,30,40); background-color: var(--message-bg-hover);
} }
pre { pre {
background:#101014; background-color: var(--code-bg);
width: 100%; width: 100%;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
samp { samp {
background:#101014; background-color: var(--code-bg);
} }
.contextbutton { .contextbutton {
transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out;
background:rgb(30,30,40); background-color: var(--message-bg-hover);
color:white; color: var(--primary-text);
font-weight: bold; font-weight: bold;
width: 5cm; width: 5cm;
height: .8cm; height: .8cm;
@ -52,38 +127,48 @@ samp{
font-size: .5cm; font-size: .5cm;
cursor: pointer; cursor: pointer;
} }
.infosection { .infosection {
display: inline-block; display: inline-block;
background:#1a1a1e; background-color: var(--info-bg);
border-radius: 10%; border-radius: 10%;
padding: .3cm; padding: .3cm;
width: calc(100% - .6cm); width: calc(100% - .6cm);
height: calc(100% - .75in); height: calc(100% - .75in);
} }
.profile { .profile {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
background:#2e2d33; background-color: var(--profile-bg);
border-radius: 10%; border-radius: 10%;
padding: .2cm; padding: .2cm;
width: 7cm; width: 7cm;
height:8cm height: 8cm;
} }
.hypoprofile { .hypoprofile {
display: inline-block; display: inline-block;
background:#2e2d33; background-color: var(--profile-bg);
border-radius: 10%; border-radius: 10%;
padding: .2cm; padding: .2cm;
width: 7cm; width: 7cm;
height:8cm height: 8cm;
} }
h2,h3{
margin:0 h1,
h2,
h3 {
margin: 0;
} }
h2 { h2 {
font-size: .2in; font-size: 19px;
margin: 0px;
} }
.h2md {
font-size: .25in;
}
.pfp { .pfp {
border-radius: 50%; border-radius: 50%;
width: .5in; width: .5in;
@ -91,6 +176,7 @@ h2{
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
.servericon { .servericon {
transition: border-radius .2s; transition: border-radius .2s;
position: relative; position: relative;
@ -98,42 +184,44 @@ h2{
.servericon:hover { .servericon:hover {
border-radius: 30%; border-radius: 30%;
} }
.contextbutton:hover { .contextbutton:hover {
background:rgb(40,40,50); background-color: var(--primary-bg);
} }
.contextmenu { .contextmenu {
position: absolute; position: absolute;
background:#2e2d33; background-color: var(--profile-bg);
} }
#neunence { #neunence {
vertical-align: top; vertical-align: top;
overflow: auto; overflow: auto;
height: 9vh; height: 9vh;
} }
#servers { #servers {
vertical-align: top; vertical-align: top;
height: 100vh; height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
#servers::-webkit-scrollbar { #servers::-webkit-scrollbar {
display: none; display: none;
} }
.blankserver { .blankserver {
border-radius: 50%; border-radius: 50%;
width: .5in; width: .5in;
height: .5in; height: .5in;
background:#1b1b1b; background-color: var(--blank-bg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
body{
background:rgb(40,40,50);
color:white;
overflow-y: hidden;
}
img { img {
vertical-align: middle; vertical-align: middle;
max-width: 3in; max-width: 3in;
@ -141,81 +229,98 @@ img {
width: auto; width: auto;
height: auto; height: auto;
} }
body {
margin: 0;
padding: 0;
}
#page { #page {
height: 100%; height: 100%;
width: 100%; width: 100%;
/* table-layout: fixed; */
} }
.message { .message {
width: 100%; width: 100%;
} }
.pfprow { .pfprow {
width: .5in; width: .5in;
} }
.commentrow { .commentrow {
width: 100%; width: 100%;
height: 100%;
vertical-align: top;
word-wrap: break-word; word-wrap: break-word;
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
} }
#messagecontainer { #messagecontainer {
overflow: auto; overflow: auto;
height: 100%; height: 100%;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
} }
#messages { #messages {
width: 100%; width: 100%;
} }
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
#channels { #channels {
background:rgb(50,50,60); background-color: var(--channels-bg);
height: calc(100% - .6in); height: calc(100% - .6in);
width: 2.5in; width: 2.5in;
overflow: auto; overflow: auto;
user-select: none; user-select: none;
} }
#userdock { #userdock {
height: .5in; height: .5in;
} }
#channels p { #channels p {
text-indent: 10px; text-indent: 10px;
} }
.space { .space {
margin-right: .02in; margin-right: .02in;
font-size: .25in; font-size: .25in;
display: inline-block; display: inline-block;
text-indent: .05in; text-indent: .05in;
} }
.spacee { .spacee {
text-indent: .15in; text-indent: .15in;
margin-right: .02in; margin-right: .02in;
font-size: .15in; font-size: .15in;
display: inline-block; display: inline-block;
} }
#channels p2 { #channels p2 {
font-weight: bold; font-weight: bold;
} }
input { input {
background:rgb(30,30,40); background-color: var(--message-bg-hover);
color:white; color: var(--primary-text);
height: .4in; height: .4in;
width: 100%; width: 100%;
} }
div { div {
transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out;
} }
.unkownfile{
background: var(--unknown-file-bg);
}
#typebox { #typebox {
font-family: "sans-serif";
font-size: 16px;
padding: 3px;
border-radius: .25cm; border-radius: .25cm;
width: 100%; width: 100%;
height: .5in; height: .5in;
@ -226,52 +331,59 @@ p{
transition: background 0.1s ease-in-out, color 0.1s ease-in-out; transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
width: 100%; width: 100%;
} }
.username { .username {
width: fit-content; width: fit-content;
cursor: pointer; cursor: pointer;
user-select: none;
font-weight: bold; font-weight: bold;
} }
.spoiler { .spoiler {
background:black; background-color: var(--black);
color:black; color: var(--black);
} }
.spoiler:hover { .spoiler:hover {
background:#111111; background-color: var(--spoiler-hover);
color:#111111; color: var(--spoiler-hover);
} }
.unspoiled { .unspoiled {
background:#1e1e1e; background-color: var(--spoiler-open-bg);
color: white; color: var(--primary-text);
} }
.unspoiled:before { .unspoiled:before {
background-color: rgb(0 0 0); background-color: var(--black);
background-clip: content-box; background-clip: content-box;
} }
.replying { .replying {
background:#0b0d20; background-color: var(--reply-bg);
} }
#typing { #typing {
display: flex; display: flex;
position: absolute; position: absolute;
top:0px; top: 0;
right: 4px; right: 4px;
background:#161616; background-color: var(--typing-bg);
width: fit-content; width: fit-content;
transform: translateY(-100%); transform: translateY(-100%);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
padding: 4px; padding: 4px;
transition: transform 0.5s ease, opacity 0.1s ease; transition: transform 0.5s ease, opacity 0.1s ease;
opacity: 1; opacity: 1;
position: absolute;
} }
#typediv{position: relative;}
#typediv {
position: relative;
}
.loading-indicator { .loading-indicator {
font-size: 24px; font-size: 24px;
display: flex; display: flex;
gap: 0px; gap: 0;
} }
.dot { .dot {
@ -290,34 +402,42 @@ p{
.dot:nth-child(3) { .dot:nth-child(3) {
animation-delay: .666s; animation-delay: .666s;
} }
#typing p { #typing p {
margin: 0; margin: 0;
padding-right: 5px; padding-right: 5px;
} }
#typing.hidden { #typing.hidden {
transform: translateY(0%); /* Move down out of view */ transform: translateY(0%);
opacity: 0; /* Fade out */ /* Move down out of view */
opacity: 0;
/* Fade out */
} }
@keyframes fade { @keyframes fade {
0%, 100% { 0%,
100% {
opacity: .2; opacity: .2;
} }
50% { 50% {
opacity: 1; opacity: 1;
} }
} }
.lightbr { .lightbr {
border-color: #929292; border-color: var(--light-border);
color:black; color: var(--black);
background-color:black; background-color: var(--black);
width: 80%; width: 80%;
} }
.Home { .Home {
border-radius: 50%; border-radius: 50%;
width: .5in; width: .5in;
height: .5in; height: .5in;
background:#1b1b1b; background-color: var(--blank-bg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -325,34 +445,37 @@ p{
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
:root {
--servertd-height: 0px; /* Default value */
}
#channelw { #channelw {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
height: calc(100vh - .1in - var(--servertd-height)); height: calc(100vh - .1in - var(--servertd-height));
} }
.timestamp { .timestamp {
color:#a2a2a2; color: var(--timestamp-color);
font-size: .14in; font-size: .14in;
} }
.replyflex { .replyflex {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.reply { .reply {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
flex-grow: 1; flex-grow: 1;
border-color:#474b76; border-color: var(--reply-border);
} }
.startreply { .startreply {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: .4in; width: .4in;
} }
.replypfp { .replypfp {
border-radius: 50%; border-radius: 50%;
width: .2in; width: .2in;
@ -361,71 +484,78 @@ p{
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
.replytext { .replytext {
padding: .05in; padding: .05in;
color:#acacac; color: var(--reply-text);
}
::-webkit-scrollbar {
width: .1in;
height: .1in;
} }
::-webkit-scrollbar {width: .1in;height:.1in;}
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
background: #34313c;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #201f29; background-color: var(--scrollbar-thumb);
box-shadow: 0px 2px 5px #000000; box-shadow: 0 2px 5px var(--black);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #16161f; background-color: var(--scrollbar-thumb-hover);
box-shadow: 0px 2px 5px #000000; box-shadow: 0 2px 5px var(--black);
} }
.pronouns { .pronouns {
color: #797979; color: var(--pronouns);
font-size: .15in; font-size: .15in;
} }
textarea { textarea {
background:#26272c; background-color: var(--textarea-bg);
color:white; color: var(--primary-text);
width: 3.5in; width: 3.5in;
resize: none; resize: none;
height: 1.5in; height: 1.5in;
} }
.channels { .channels {
overflow: auto; overflow: auto;
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
.Channel:hover { .Channel:hover {
background:#1c1b25; background-color: var(--channel-hover);
} }
.Channel { .Channel {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
#serverName{
#servername {
margin-top: .1in; margin-top: .1in;
margin-bottom: .1in; margin-bottom: .1in;
padding-left: 5px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
max-width: 220px;
} }
.servertd { .servertd {
background:#252530; background-color: var(--server-hover);
border-color:#1b1b24; border-color: var(--server-border);
border-width: .1cm; border-width: .1cm;
border-style: solid; border-style: solid;
height: .2in; height: .2in;
} }
/*
#channels div div{
cursor: pointer;
user-select: none;
}
#channels div div:hover{
background:#1c1b25;
}
*/
.channeleffects { .channeleffects {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -433,25 +563,37 @@ textarea{
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
} }
.channeleffects:hover {
background-color: var(--channel-hover);
}
.dm-container {
display: flex;
flex-direction: column;
}
.dm-container div img {
padding: 5px;
}
.messageimg { .messageimg {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.channeleffects:hover{
background:#1c1b25;
}
.username:hover { .username:hover {
text-decoration: underline; text-decoration: underline;
} }
.tag { .tag {
font-size: .13in; font-size: .13in;
color:white; color: var(--primary-text);
} }
#userdock { #userdock {
background:#1a1a23; background-color: var(--user-dock-bg);
width: 100%; width: 100%;
} }
#settings { #settings {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -459,63 +601,74 @@ textarea{
transition: background 1s; transition: background 1s;
text-align: center; text-align: center;
} }
#settings:hover { #settings:hover {
background:#0e0d10; background-color: var(--settings-hover);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
#userinfo { #userinfo {
background:#323039; background-color: var(--user-info-bg);
border-radius: .1in; border-radius: .1in;
} }
.replyusername { .replyusername {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
word-break: normal; word-break: normal;
} }
.replyusername:hover { .replyusername:hover {
text-decoration: underline; text-decoration: underline;
} }
.servernamediv { .servernamediv {
width: 100%; width: 100%;
} }
button { button {
color:white; color: var(--primary-text);
background:#1b1b28; background-color: var(--button-bg);
border-radius: .05in; border-radius: .05in;
height: .3in; height: .3in;
min-width: 1.3in; min-width: 1.3in;
font-size: .175in; font-size: .175in;
} }
input::file-selector-button { input::file-selector-button {
color:white; color: var(--primary-text);
background:#1b1b28; background-color: var(--button-bg);
border-radius: .05in; border-radius: .05in;
height: .25in; height: .25in;
min-width: 1in; min-width: 1in;
} }
#logindiv { #logindiv {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: #33363d; background-color: var(--dialog-bg);
min-width: max(min(70%, calc(50% + .5in)), min(3in, 100%)); min-width: max(min(70%, calc(50% + .5in)), min(3in, 100%));
min-height: 70%; min-height: 70%;
border-radius: .1in; border-radius: .1in;
border-style: solid; border-style: solid;
border-color:#131315; border-color: var(--login-border);
text-align: center; text-align: center;
} }
#logindiv input { #logindiv input {
width: 90%; width: 90%;
border-radius: .1in; border-radius: .1in;
} }
.adddiv { .adddiv {
display: inline-block; display: inline-block;
height: 0in; height: 0;
align-self: stretch; align-self: stretch;
} }
.addchannel { .addchannel {
align-self: end; align-self: end;
margin-left: auto; margin-left: auto;
@ -526,84 +679,99 @@ input::file-selector-button{
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.addchannel:hover { .addchannel:hover {
background:#000000; background-color: var(--black);
} }
.capsflex { .capsflex {
display: flex; display: flex;
} }
.radio { .radio {
width: .15in; width: .15in;
height: .15in; height: .15in;
} }
.channels .space { .channels .space {
text-indent: .15in; text-indent: .15in;
} }
input[type="checkbox"] { input[type="checkbox"] {
width: .15in; width: .15in;
height: .15in; height: .15in;
accent-color:black; accent-color: var(--black);
color:black; color: var(--black);
} }
.dragdiv { .dragdiv {
height: .3in; height: .3in;
} }
.quote { .quote {
display: inline-block; display: inline-block;
width: fit-content; width: fit-content;
} }
.quoteline { .quoteline {
display: inline-block; display: inline-block;
width: .02in; width: .02in;
height: .15in; height: .15in;
margin-left: .02in; margin-left: .02in;
margin-right: .04in; margin-right: .04in;
background:#7a798e; background-color: var(--quote-bg);
} }
span { span {
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
} }
#loading { #loading {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background:#22232c; background-color: var(--loading-bg);
z-index: 100; z-index: 100;
text-align: center; text-align: center;
transition: transform .2s; transition: transform .2s;
vertical-align: middle vertical-align: middle;
} }
#centerdiv { #centerdiv {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
#loading.doneloading { #loading.doneloading {
transform:translate(0%, -100%) transform: translate(0%, -100%);
} }
.unkownfile{
background:#141316; .unknownfile {
background-color: var(--unknown-file-bg);
border-style: solid; border-style: solid;
border-radius: .1in; border-radius: .1in;
border-color:#474555; border-color: var(--unknown-file-border);
border-width: .03in; border-width: .03in;
display: inline-block; display: inline-block;
border-collapse: collapse; border-collapse: collapse;
} }
.fileicon { .fileicon {
font-size: .4in; font-size: .4in;
user-select: none; user-select: none;
} }
.filename { .filename {
color:#47bbff; color: var(--filename);
} }
.unread { .unread {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
position: absolute; position: absolute;
background:white; background-color: var(--primary-text);
height: .075in; height: .075in;
width: .075in; width: .075in;
transition: transform .2s, background .2s, height .2s, width .2s; transition: transform .2s, background .2s, height .2s, width .2s;
@ -612,28 +780,26 @@ span{
border-radius: 50%; border-radius: 50%;
border: solid; border: solid;
border-width: .02in; border-width: .02in;
border-color:black; border-color: var(--black);
} }
.notiunread { .notiunread {
transform:translate(0in,.2in); transform: translate(0, .2in);
}
.h2md{
font-size: .25in;
} }
.pinged { .pinged {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
transform:translate(0in,.4in); transform: translate(0, .4in);
background:red; background-color: var(--mention-bg);
height: .15in; height: .15in;
width: .15in; width: .15in;
text-align: center; text-align: center;
} }
.cunread { .cunread {
box-shadow: inset .024in 0 white; box-shadow: inset .024in 0 var(--primary-text);
} }
.servernoti { .servernoti {
position: relative; position: relative;
} }
h1{
margin: 0px;
}