diff --git a/webpage/index.html b/webpage/index.html
index 69aff77..c1ea700 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -3,11 +3,12 @@
-
+
-
+
+
diff --git a/webpage/index.js b/webpage/index.js
index dd49ee6..e718f9f 100644
--- a/webpage/index.js
+++ b/webpage/index.js
@@ -632,9 +632,10 @@ function genusersettings(){
thisuser.updatebio(newbio);
}
}],
- ["select","Theme:",["Dark","Light"],e=>{
- localStorage.setItem("theme",["Dark","Light"][e.target.selectedIndex]);
- },["Dark","Light"].indexOf(localStorage.getItem("theme"))]
+ ["select","Theme:",["Dark","Light","WHITE"],e=>{
+ localStorage.setItem("theme",["Dark","Light","WHITE"][e.target.selectedIndex]);
+ setTheme();
+ },["Dark","Light","WHITE"].indexOf(localStorage.getItem("theme"))]
],
["vdiv",
["html",hypothetcialprofie]
@@ -647,6 +648,11 @@ function genusersettings(){
newbio=null;
})
}
+setTheme();
+function setTheme(){
+ const name=localStorage.getItem("theme");
+ document.body.className=name+"-theme";
+}
function userSettings(){
usersettings.show();
}
diff --git a/webpage/light.css b/webpage/light.css
index 6d4bb17..271e988 100644
--- a/webpage/light.css
+++ b/webpage/light.css
@@ -1,186 +1,100 @@
-.centeritem {
- background: #a3b8e9;
-}
-.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;
-}
+.WHITE-theme {
+ color-scheme: light;
-.unspoiled:before {
- background-color: rgb(0 0 0);
- background-clip: content-box;
-}
-.replying{
- background:#5f68bb;
-}
-#typing{
- background:#161616;
-}
-.lightbr{
- border-color: #929292;
- color:black;
- background-color:#9ea7dd;
-}
-.Home{
- background:#7ea6b9;
-}
-.timestamp{
- color:#2c2b31;
+ --primary-text: #000;
+ --primary-bg: #FFF;
+ --black: #FFF;
-}
-.reply{
- border-color:#000000;
-}
-.replytext{
- padding:.05in;
- color:#1f1f21;
-}
-::-webkit-scrollbar-track {
+ --message-bg-hover: #d2d2df;
+ --typing-bg: #dad8d8;
+ --profile-bg: #afabc5;
+ --timestamp-color: #a2a2a2;
+ --code-bg: #cbcbcc;
+ --info-bg: #b0b0c5;
+ --user-info-bg: #b0abc2;
+ --user-dock-bg: #b2b2c4;
+ --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 {
- background: #52515a;
- box-shadow: 0px 2px 5px #000000;
-}
+ --spoiler-hover: #b9b9b9;
+ --spoiler-open-bg: #dadada;
-::-webkit-scrollbar-thumb:hover {
- background: #63636a;
- box-shadow: 0px 2px 5px #000000;
-}
-.pronouns{
- color: #111111;
-}
-textarea{
- background:#9ea9e3;
-}
+ --unknown-file-bg: #bdbdbd;
+ --unknown-file-border: #adadad;
-.Channel:hover{
- background:#5a4fb9;
-}
-.servertd{
- background:#a5a5dc;
- border-color:#8c8cb0;
-}
+ --login-border: #c3c0e0;
+ --loading-bg: #b5b7cc;
-.channeleffects:hover{
- background:#554ab8;
-}
-.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;
-}
+ --dialog-bg: #c1c8d6;
+ --dialog-border: #b9b7db;
-.unread{
- background:#ffffff;
- border-color:black;
-}
-.pinged{
- background:red;
-}
-.cunread{
- box-shadow: inset .024in 0 white;
+ --scrollbar-track: #d2cedf;
+ --scrollbar-thumb: #bdbcca;
+ --scrollbar-thumb-hover: #a7a7be;
}
+.Light-theme {
+ color-scheme: light;
-.startreply{
- background: black;
-}
\ No newline at end of file
+ --primary-text: #000;
+ --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;
+}
diff --git a/webpage/style.css b/webpage/style.css
index 9870969..0a0b8f5 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -1,639 +1,805 @@
-.imgfit{
- max-width: 80vw;
- max-height: 80vh;
- width: auto;
- height: auto;
-}
-.centeritem {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: #33363d;
- z-index: 12;
-}
-.commentrow{
- vertical-align:top;
- height: 100%;
-}
-.nonimagecenter{
- z-index: 12;
- border-style: solid;
- border-radius:.1in;
- border-color: #1c1b31;
-}
-.background{
- position: absolute;
- width:100%;
- height:100%;
- top:0px;
- background:#000000bf;
- z-index: 11;
-}
-.messagediv:hover{
- background:rgb(30,30,40);
-}
-pre{
- background:#101014;
- width:100%;
- overflow-wrap: break-word;
-}
-samp{
- background:#101014;
-}
-.contextbutton{
- transition: background 0.1s ease-in-out;
- background:rgb(30,30,40);
- color:white;
- font-weight:bold;
- width:5cm;
- height:.8cm;
- text-align:left;
- font-size:.5cm;
- cursor:pointer;
-}
-.infosection{
- display: inline-block;
- background:#1a1a1e;
- border-radius: 10%;
- padding:.3cm;
- width:calc(100% - .6cm);
- height:calc(100% - .75in);
-}
-.profile{
- display: inline-block;
- position: absolute;
- background:#2e2d33;
- border-radius: 10%;
- padding:.2cm;
- width:7cm;
- height:8cm
-}
-.hypoprofile{
- display: inline-block;
- background:#2e2d33;
- border-radius: 10%;
- padding:.2cm;
- width:7cm;
- height:8cm
-}
-h2,h3{
- margin:0
-}
-h2{
- font-size: .2in;
- margin: 0px;
-}
-.pfp{
- border-radius: 50%;
- width:.5in;
- height:.5in;
- user-select: none;
- cursor: pointer;
-}
-.servericon{
- transition: border-radius .2s;
- position:relative;
-}
-.servericon:hover{
- border-radius: 30%;
-}
-.contextbutton:hover{
- background:rgb(40,40,50);
-}
-.contextmenu{
- position: absolute;
- background:#2e2d33;
-}
-#neunence{
- vertical-align: top;
- overflow: auto;
- height: 9vh;
-}
-#servers{
- vertical-align: top;
- height: 100vh;
- overflow-x: hidden;
-}
-#servers::-webkit-scrollbar {
- display: none;
-}
-.blankserver{
- border-radius: 50%;
- width:.5in;
- height:.5in;
- background:#1b1b1b;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- user-select: none;
-}
-body{
- background:rgb(40,40,50);
- color:white;
- overflow-y: hidden;
-}
-img {
- vertical-align: middle;
- max-width: 3in;
- max-height: 3in;
- width: auto;
- height: auto;
-}
-body {
- margin: 0;
- padding: 0;
-}
-#page{
- height:100%;
- width:100%;
- /* table-layout: fixed; */
-}
-.message{
- width:100%;
-}
-.pfprow{
- width:.5in;
-}
-.commentrow{
- width:100%;
- word-wrap: break-word;
- text-align: left;
- font-weight: normal;
-}
-#messagecontainer{
- overflow: auto;
- height: 100%;
- width:100%;
- display: inline-block;
-}
-#messages{
- width:100%;
-}
-p{
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
-}
-#channels{
- background:rgb(50,50,60);
- height: calc(100% - .6in);
- width: 2.5in;
- overflow: auto;
- user-select: none;
-}
-#userdock{
- height: .5in;
-}
-#channels p{
- text-indent:10px;
-}
-.space{
- margin-right:.02in;
- font-size:.25in;
- display:inline-block;
- text-indent:.05in;
-}
-.spacee{
- text-indent:.15in;
- margin-right:.02in;
- font-size:.15in;
- display:inline-block;
-
-}
-#channels p2{
- font-weight:bold;
-}
-input{
- background:rgb(30,30,40);
- color:white;
- height: .4in;
- width:100%;
-}
-div{
- transition: background 0.1s ease-in-out;
-}
-#typebox{
- border-radius: .25cm;
- width: 100%;
- height: .5in;
- z-index: -100;
+:root {
+ --servertd-height: 0px;
+ /* Default value */
}
-p{
- transition: background 0.1s ease-in-out,color 0.1s ease-in-out;
- width: 100%;
+.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;
}
-.username{
- width:fit-content;
- cursor: pointer;
- user-select: none;
- font-weight: bold;
+
+
+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;
}
-.spoiler{
- background:black;
- color:black;
+
+.imgfit {
+ max-width: 80vw;
+ max-height: 80vh;
+ width: auto;
+ height: auto;
}
-.spoiler:hover{
- background:#111111;
- color:#111111;
+
+.centeritem {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: var(--dialog-bg);
+ z-index: 12;
}
-.unspoiled{
- background:#1e1e1e;
- color: white;
+
+.nonimagecenter {
+ z-index: 12;
+ border-style: solid;
+ border-radius: .1in;
+ border-color: var(--dialog-border);
+}
+
+th {
+ font-weight: 400;
+ padding: 0;
+}
+
+.background {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ background-color: #000000bf;
+ z-index: 11;
+}
+
+.messagediv:hover {
+ background-color: var(--message-bg-hover);
+}
+
+pre {
+ background-color: var(--code-bg);
+ width: 100%;
+ overflow-wrap: break-word;
+}
+
+samp {
+ background-color: var(--code-bg);
+}
+
+.contextbutton {
+ transition: background 0.1s ease-in-out;
+ background-color: var(--message-bg-hover);
+ color: var(--primary-text);
+ font-weight: bold;
+ width: 5cm;
+ height: .8cm;
+ text-align: left;
+ font-size: .5cm;
+ cursor: pointer;
+}
+
+.infosection {
+ display: inline-block;
+ background-color: var(--info-bg);
+ border-radius: 10%;
+ padding: .3cm;
+ width: calc(100% - .6cm);
+ height: calc(100% - .75in);
+}
+
+.profile {
+ display: inline-block;
+ position: absolute;
+ background-color: var(--profile-bg);
+ border-radius: 10%;
+ padding: .2cm;
+ width: 7cm;
+ height: 8cm;
+}
+
+.hypoprofile {
+ display: inline-block;
+ background-color: var(--profile-bg);
+ border-radius: 10%;
+ padding: .2cm;
+ width: 7cm;
+ height: 8cm;
+}
+
+h1,
+h2,
+h3 {
+ margin: 0;
+}
+
+h2 {
+ font-size: 19px;
+}
+.h2md {
+ font-size: .25in;
+}
+
+.pfp {
+ border-radius: 50%;
+ width: .5in;
+ height: .5in;
+ user-select: none;
+ cursor: pointer;
+}
+
+.servericon {
+ transition: border-radius .2s;
+ position: relative;
+}
+.servericon:hover {
+ border-radius: 30%;
+}
+
+.contextbutton:hover {
+ background-color: var(--primary-bg);
+}
+
+.contextmenu {
+ position: absolute;
+ background-color: var(--profile-bg);
+}
+
+#neunence {
+ vertical-align: top;
+ overflow: auto;
+ height: 9vh;
+}
+
+#servers {
+ vertical-align: top;
+ height: 100vh;
+ overflow-x: hidden;
+}
+
+#servers::-webkit-scrollbar {
+ display: none;
+}
+
+.blankserver {
+ border-radius: 50%;
+ width: .5in;
+ height: .5in;
+ background-color: var(--blank-bg);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ user-select: none;
+}
+
+img {
+ vertical-align: middle;
+ max-width: 3in;
+ max-height: 3in;
+ width: auto;
+ height: auto;
+}
+
+#page {
+ height: 100%;
+ width: 100%;
+}
+
+.message {
+ width: 100%;
+}
+
+.pfprow {
+ width: .5in;
+}
+
+.commentrow {
+ width: 100%;
+ height: 100%;
+ vertical-align: top;
+ word-wrap: break-word;
+ text-align: left;
+ font-weight: normal;
+}
+
+#messagecontainer {
+ overflow: auto;
+ height: 100%;
+ width: 100%;
+ display: inline-block;
+}
+
+#messages {
+ width: 100%;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+#channels {
+ background-color: var(--channels-bg);
+ height: calc(100% - .6in);
+ width: 2.5in;
+ overflow: auto;
+ user-select: none;
+}
+
+#userdock {
+ height: .5in;
+}
+
+#channels p {
+ text-indent: 10px;
+}
+
+.space {
+ margin-right: .02in;
+ font-size: .25in;
+ display: inline-block;
+ text-indent: .05in;
+}
+
+.spacee {
+ text-indent: .15in;
+ margin-right: .02in;
+ font-size: .15in;
+ display: inline-block;
+}
+
+#channels p2 {
+ font-weight: bold;
+}
+
+input {
+ background-color: var(--message-bg-hover);
+ color: var(--primary-text);
+ height: .4in;
+ width: 100%;
+}
+
+div {
+ transition: background 0.1s ease-in-out;
+}
+.unkownfile{
+ background: var(--unknown-file-bg);
+}
+#typebox {
+ font-family: "sans-serif";
+ font-size: 16px;
+ padding: 3px;
+ border-radius: .25cm;
+ width: 100%;
+ height: .5in;
+ z-index: -100;
+}
+
+p {
+ transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
+ width: 100%;
+}
+
+.username {
+ width: fit-content;
+ cursor: pointer;
+ font-weight: bold;
+}
+
+.spoiler {
+ background-color: var(--black);
+ color: var(--black);
+}
+
+.spoiler:hover {
+ background-color: var(--spoiler-hover);
+ color: var(--spoiler-hover);
+}
+
+.unspoiled {
+ background-color: var(--spoiler-open-bg);
+ color: var(--primary-text);
}
.unspoiled:before {
- background-color: rgb(0 0 0);
- background-clip: content-box;
+ background-color: var(--black);
+ background-clip: content-box;
}
-.replying{
- background:#0b0d20;
+
+.replying {
+ background-color: var(--reply-bg);
}
-#typing{
- display: flex;
- position:absolute;
- top:0px;
- right:4px;
- background:#161616;
- width:fit-content;
- transform: translateY(-100%);
- border-radius: 5px 5px 0 0;
- padding: 4px;
- transition: transform 0.5s ease, opacity 0.1s ease;
- opacity: 1;
- position: absolute;
+
+#typing {
+ display: flex;
+ position: absolute;
+ top: 0;
+ right: 4px;
+ background-color: var(--typing-bg);
+ width: fit-content;
+ transform: translateY(-100%);
+ border-radius: 5px 5px 0 0;
+ padding: 4px;
+ transition: transform 0.5s ease, opacity 0.1s ease;
+ opacity: 1;
+}
+
+#typediv {
+ position: relative;
}
-#typediv{position: relative;}
.loading-indicator {
- font-size: 24px;
- display: flex;
- gap: 0px;
+ font-size: 24px;
+ display: flex;
+ gap: 0;
}
.dot {
- animation: fade 1s infinite;
- line-height: 14px;
+ animation: fade 1s infinite;
+ line-height: 14px;
}
.dot:nth-child(1) {
- animation-delay: 0s;
+ animation-delay: 0s;
}
.dot:nth-child(2) {
- animation-delay: 0.333s;
+ animation-delay: 0.333s;
}
.dot:nth-child(3) {
- animation-delay: .666s;
+ animation-delay: .666s;
}
+
#typing p {
- margin: 0;
- padding-right: 5px;
+ margin: 0;
+ padding-right: 5px;
}
#typing.hidden {
- transform: translateY(0%); /* Move down out of view */
- opacity: 0; /* Fade out */
+ transform: translateY(0%);
+ /* Move down out of view */
+ opacity: 0;
+ /* Fade out */
}
+
@keyframes fade {
- 0%, 100% {
- opacity: .2;
- }
- 50% {
- opacity: 1;
- }
+ 0%,
+ 100% {
+ opacity: .2;
+ }
+
+ 50% {
+ opacity: 1;
+ }
}
-.lightbr{
- border-color: #929292;
- color:black;
- background-color:black;
- width:80%;
+
+.lightbr {
+ border-color: var(--light-border);
+ color: var(--black);
+ background-color: var(--black);
+ width: 80%;
}
-.Home{
- border-radius: 50%;
- width:.5in;
- height:.5in;
- background:#1b1b1b;
- display: flex;
- justify-content: center;
- align-items:center;
- font-size:200%;
- user-select: none;
- cursor: pointer;
+
+.Home {
+ border-radius: 50%;
+ width: .5in;
+ height: .5in;
+ background-color: var(--blank-bg);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 200%;
+ user-select: none;
+ cursor: pointer;
}
-:root {
- --servertd-height: 0px; /* Default value */
+
+#channelw {
+ width: 100%;
+ display: inline-block;
+ grid-template-rows: auto 1fr;
+ height: calc(100vh - .1in - var(--servertd-height));
}
-#channelw{
- width:100%;
- display: inline-block;
- grid-template-rows: auto 1fr;
- height: calc(100vh - .1in - var(--servertd-height));
+
+.timestamp {
+ color: var(--timestamp-color);
+ font-size: .14in;
}
-.timestamp{
- color:#a2a2a2;
- font-size:.14in;
+
+.replyflex {
+ display: flex;
+ align-items: center;
}
-.replyflex{
- display: flex;
- align-items: center;
+
+.reply {
+ display: inline-block;
+ vertical-align: middle;
+ flex-grow: 1;
+ border-color: var(--reply-border);
}
-.reply{
- display: inline-block;
- vertical-align: middle;
- flex-grow: 1;
- border-color:#474b76;
+
+.startreply {
+ display: inline-block;
+ vertical-align: middle;
+ width: .4in;
}
-.startreply{
- display: inline-block;
- vertical-align: middle;
- width:.4in;
+
+.replypfp {
+ border-radius: 50%;
+ width: .2in;
+ height: 2.in;
+ padding: .05in;
+ user-select: none;
+ cursor: pointer;
}
-.replypfp{
- border-radius: 50%;
- width:.2in;
- height:2.in;
- padding:.05in;
- user-select: none;
- cursor: pointer;
+
+.replytext {
+ padding: .05in;
+ color: var(--reply-text);
}
-.replytext{
- padding:.05in;
- color:#acacac;
+
+::-webkit-scrollbar {
+ width: .1in;
+ height: .1in;
}
-::-webkit-scrollbar {width: .1in;height:.1in;}
::-webkit-scrollbar-track {
-
-
- background: #34313c;
+ background-color: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
- background: #201f29;
- box-shadow: 0px 2px 5px #000000;
+ background-color: var(--scrollbar-thumb);
+ box-shadow: 0 2px 5px var(--black);
}
::-webkit-scrollbar-thumb:hover {
- background: #16161f;
- box-shadow: 0px 2px 5px #000000;
+ background-color: var(--scrollbar-thumb-hover);
+ box-shadow: 0 2px 5px var(--black);
}
-.pronouns{
- color: #797979;
- font-size:.15in;
-}
-textarea{
- background:#26272c;
- color:white;
- width: 3.5in;
- resize: none;
- height: 1.5in;
-}
-.channels{
- overflow:auto;
- transition: height 0.2s ease-in-out;
- user-select: none;
- cursor: pointer;
-}
-.Channel:hover{
- background:#1c1b25;
-}
-.Channel{
- user-select: none;
- cursor: pointer;
-}
-#serverName{
- margin-top:.1in;
- margin-bottom:.1in;
-}
-.servertd{
- background:#252530;
- border-color:#1b1b24;
- border-width:.1cm;
- border-style: solid;
- height: .2in;
-}
-/*
-#channels div div{
- cursor: pointer;
- user-select: none;
-}
-#channels div div:hover{
- background:#1c1b25;
-}
-*/
-.channeleffects{
- cursor: pointer;
- user-select: none;
- flex-direction: row;
- align-self: stretch;
- width: 100%;
-}
-.messageimg{
- cursor: pointer;
- user-select: none;
-}
-.channeleffects:hover{
- background:#1c1b25;
+.pronouns {
+ color: var(--pronouns);
+ font-size: .15in;
}
-.username:hover{
- text-decoration: underline;
+
+textarea {
+ background-color: var(--textarea-bg);
+ color: var(--primary-text);
+ width: 3.5in;
+ resize: none;
+ height: 1.5in;
}
-.tag{
- font-size:.13in;
- color:white;
+
+.channels {
+ overflow: auto;
+ transition: height 0.2s ease-in-out;
+ user-select: none;
+ cursor: pointer;
}
-#userdock{
- background:#1a1a23;
- width:100%;
+
+.Channel:hover {
+ background-color: var(--channel-hover);
}
-#settings{
- cursor: pointer;
- user-select: none;
- border-radius:.1in;
- transition: background 1s;
- text-align: center;
+
+.Channel {
+ user-select: none;
+ cursor: pointer;
}
-#settings:hover{
- background:#0e0d10;
- cursor: pointer;
- user-select: none;
+
+#servername {
+ margin-top: .1in;
+ margin-bottom: .1in;
+ padding-left: 5px;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ white-space: nowrap;
+ max-width: 220px;
}
-#userinfo{
- background:#323039;
- border-radius:.1in;
+
+.servertd {
+ background-color: var(--server-hover);
+ border-color: var(--server-border);
+ border-width: .1cm;
+ border-style: solid;
+ height: .2in;
}
-.replyusername{
- user-select: none;
- cursor: pointer;
- word-break: normal;
+
+.channeleffects {
+ cursor: pointer;
+ user-select: none;
+ flex-direction: row;
+ align-self: stretch;
+ width: 100%;
}
-.replyusername:hover{
- text-decoration: underline;
+.channeleffects:hover {
+ background-color: var(--channel-hover);
}
-.servernamediv{
- width:100%;
+
+.dm-container {
+ display: flex;
+ flex-direction: column;
}
-button{
- color:white;
- background:#1b1b28;
- border-radius:.05in;
- height:.3in;
- min-width: 1.3in;
- font-size:.175in;
+.dm-container div img {
+ padding: 5px;
}
-input::file-selector-button{
- color:white;
- background:#1b1b28;
- border-radius:.05in;
- height:.25in;
- min-width: 1in;
+
+.messageimg {
+ cursor: pointer;
+ user-select: none;
}
-#logindiv{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: #33363d;
- min-width:max(min(70%,calc(50% + .5in)),min(3in,100%));
- min-height:70%;
- border-radius:.1in;
- border-style:solid;
- border-color:#131315;
- text-align: center;
+
+.username:hover {
+ text-decoration: underline;
}
-#logindiv input{
- width:90%;
- border-radius:.1in;
+
+.tag {
+ font-size: .13in;
+ color: var(--primary-text);
}
-.adddiv{
- display: inline-block;
- height: 0in;
- align-self: stretch;
+
+#userdock {
+ background-color: var(--user-dock-bg);
+ width: 100%;
}
-.addchannel{
- align-self: end;
- margin-left: auto;
- width:.2in;
- text-align: center;
- transition: background .2s;
- border-radius:.1in;
- cursor: pointer;
- user-select: none;
+
+#settings {
+ cursor: pointer;
+ user-select: none;
+ border-radius: .1in;
+ transition: background 1s;
+ text-align: center;
}
-.addchannel:hover{
- background:#000000;
+
+#settings:hover {
+ background-color: var(--settings-hover);
+ cursor: pointer;
+ user-select: none;
}
-.capsflex{
- display:flex;
+
+#userinfo {
+ background-color: var(--user-info-bg);
+ border-radius: .1in;
}
-.radio{
- width:.15in;
- height: .15in;
+
+.replyusername {
+ user-select: none;
+ cursor: pointer;
+ word-break: normal;
}
-.channels .space{
- text-indent:.15in;
+
+.replyusername:hover {
+ text-decoration: underline;
}
+
+.servernamediv {
+ width: 100%;
+}
+
+button {
+ color: var(--primary-text);
+ background-color: var(--button-bg);
+ border-radius: .05in;
+ height: .3in;
+ min-width: 1.3in;
+ font-size: .175in;
+}
+
+input::file-selector-button {
+ color: var(--primary-text);
+ background-color: var(--button-bg);
+ border-radius: .05in;
+ height: .25in;
+ min-width: 1in;
+}
+
+#logindiv {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: var(--dialog-bg);
+ min-width: max(min(70%, calc(50% + .5in)), min(3in, 100%));
+ min-height: 70%;
+ border-radius: .1in;
+ border-style: solid;
+ border-color: var(--login-border);
+ text-align: center;
+}
+
+#logindiv input {
+ width: 90%;
+ border-radius: .1in;
+}
+
+.adddiv {
+ display: inline-block;
+ height: 0;
+ align-self: stretch;
+}
+
+.addchannel {
+ align-self: end;
+ margin-left: auto;
+ width: .2in;
+ text-align: center;
+ transition: background .2s;
+ border-radius: .1in;
+ cursor: pointer;
+ user-select: none;
+}
+
+.addchannel:hover {
+ background-color: var(--black);
+}
+
+.capsflex {
+ display: flex;
+}
+
+.radio {
+ width: .15in;
+ height: .15in;
+}
+
+.channels .space {
+ text-indent: .15in;
+}
+
input[type="checkbox"] {
- width:.15in;
- height:.15in;
- accent-color:black;
- color:black;
-}
-.dragdiv{
- height:.3in;
-}
-.quote{
- display:inline-block;
- width:fit-content;
-}
-.quoteline{
- display:inline-block;
- width:.02in;
- height:.15in;
- margin-left:.02in;
- margin-right:.04in;
- background:#7a798e;
-}
-span{
- word-wrap: break-word;
- word-break: break-word;
-}
-#loading{
- position:absolute;
- width:100%;
- height:100%;
- background:#22232c;
- z-index:100;
- text-align: center;
- transition: transform .2s;
- vertical-align: middle
-}
-#centerdiv{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-#loading.doneloading{
- transform:translate(0%, -100%)
-}
-.unkownfile{
- background:#141316;
- border-style:solid;
- border-radius:.1in;
- border-color:#474555;
- border-width:.03in;
- display:inline-block;
- border-collapse: collapse;
-}
-.fileicon{
- font-size:.4in;
- user-select: none;
-}
-.filename{
- color:#47bbff;
+ width: .15in;
+ height: .15in;
+ accent-color: var(--black);
+ color: var(--black);
}
-.unread{
- aspect-ratio : 1 / 1;
- position:absolute;
- background:white;
- height:.075in;
- width:.075in;
- transition:transform .2s,background .2s,height .2s,width .2s;
- transform:translate(-.20in,.2in);
- z-index:10;
- border-radius: 50%;
- border:solid;
- border-width:.02in;
- border-color:black;
+.dragdiv {
+ height: .3in;
}
-.notiunread{
- transform:translate(0in,.2in);
+
+.quote {
+ display: inline-block;
+ width: fit-content;
}
-.h2md{
- font-size: .25in;
+
+.quoteline {
+ display: inline-block;
+ width: .02in;
+ height: .15in;
+ margin-left: .02in;
+ margin-right: .04in;
+ background-color: var(--quote-bg);
}
-.pinged{
- aspect-ratio : 1 / 1;
- transform:translate(0in,.4in);
- background:red;
- height:.15in;
- width:.15in;
- text-align: center;
+
+span {
+ word-wrap: break-word;
+ word-break: break-word;
}
-.cunread{
- box-shadow: inset .024in 0 white;
+
+#loading {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: var(--loading-bg);
+ z-index: 100;
+ text-align: center;
+ transition: transform .2s;
+ vertical-align: middle;
}
-.servernoti{
- position:relative;
+
+#centerdiv {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
-h1{
- margin: 0px;
+
+#loading.doneloading {
+ transform: translate(0%, -100%);
+}
+
+.unknownfile {
+ background-color: var(--unknown-file-bg);
+ border-style: solid;
+ border-radius: .1in;
+ border-color: var(--unknown-file-border);
+ border-width: .03in;
+ display: inline-block;
+ border-collapse: collapse;
+}
+
+.fileicon {
+ font-size: .4in;
+ user-select: none;
+}
+
+.filename {
+ color: var(--filename);
+}
+
+.unread {
+ aspect-ratio: 1 / 1;
+ position: absolute;
+ background-color: var(--primary-text);
+ height: .075in;
+ width: .075in;
+ transition: transform .2s, background .2s, height .2s, width .2s;
+ transform: translate(-.20in, .2in);
+ z-index: 10;
+ border-radius: 50%;
+ border: solid;
+ border-width: .02in;
+ border-color: var(--black);
+}
+
+.notiunread {
+ transform: translate(0, .2in);
+}
+
+.pinged {
+ aspect-ratio: 1 / 1;
+ transform: translate(0, .4in);
+ background-color: var(--mention-bg);
+ height: .15in;
+ width: .15in;
+ text-align: center;
+}
+
+.cunread {
+ box-shadow: inset .024in 0 var(--primary-text);
+}
+
+.servernoti {
+ position: relative;
}