Theming update
This commit is contained in:
MathMan05
parent
dc8ba099da
commit
e219ae7fc7
4 changed files with 822 additions and 735 deletions
|
|
@ -3,11 +3,12 @@
|
|||
<head>
|
||||
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body class="Dark-theme">
|
||||
<script src="/login.js"></script>
|
||||
<script src="/member.js"></script>
|
||||
<script src="/user.js"></script>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
--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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
max-width: 80vw;
|
||||
max-height: 80vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.centeritem {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #33363d;
|
||||
background-color: var(--dialog-bg);
|
||||
z-index: 12;
|
||||
}
|
||||
.commentrow{
|
||||
vertical-align:top;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nonimagecenter {
|
||||
z-index: 12;
|
||||
border-style: solid;
|
||||
border-radius: .1in;
|
||||
border-color: #1c1b31;
|
||||
border-color: var(--dialog-border);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top:0px;
|
||||
background:#000000bf;
|
||||
top: 0;
|
||||
background-color: #000000bf;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.messagediv:hover {
|
||||
background:rgb(30,30,40);
|
||||
background-color: var(--message-bg-hover);
|
||||
}
|
||||
|
||||
pre {
|
||||
background:#101014;
|
||||
background-color: var(--code-bg);
|
||||
width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
samp {
|
||||
background:#101014;
|
||||
background-color: var(--code-bg);
|
||||
}
|
||||
|
||||
.contextbutton {
|
||||
transition: background 0.1s ease-in-out;
|
||||
background:rgb(30,30,40);
|
||||
color:white;
|
||||
background-color: var(--message-bg-hover);
|
||||
color: var(--primary-text);
|
||||
font-weight: bold;
|
||||
width: 5cm;
|
||||
height: .8cm;
|
||||
|
|
@ -52,38 +127,48 @@ samp{
|
|||
font-size: .5cm;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.infosection {
|
||||
display: inline-block;
|
||||
background:#1a1a1e;
|
||||
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:#2e2d33;
|
||||
background-color: var(--profile-bg);
|
||||
border-radius: 10%;
|
||||
padding: .2cm;
|
||||
width: 7cm;
|
||||
height:8cm
|
||||
height: 8cm;
|
||||
}
|
||||
|
||||
.hypoprofile {
|
||||
display: inline-block;
|
||||
background:#2e2d33;
|
||||
background-color: var(--profile-bg);
|
||||
border-radius: 10%;
|
||||
padding: .2cm;
|
||||
width: 7cm;
|
||||
height:8cm
|
||||
height: 8cm;
|
||||
}
|
||||
h2,h3{
|
||||
margin:0
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: .2in;
|
||||
margin: 0px;
|
||||
font-size: 19px;
|
||||
}
|
||||
.h2md {
|
||||
font-size: .25in;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
border-radius: 50%;
|
||||
width: .5in;
|
||||
|
|
@ -91,6 +176,7 @@ h2{
|
|||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.servericon {
|
||||
transition: border-radius .2s;
|
||||
position: relative;
|
||||
|
|
@ -98,42 +184,44 @@ h2{
|
|||
.servericon:hover {
|
||||
border-radius: 30%;
|
||||
}
|
||||
|
||||
.contextbutton:hover {
|
||||
background:rgb(40,40,50);
|
||||
background-color: var(--primary-bg);
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
position: absolute;
|
||||
background:#2e2d33;
|
||||
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:#1b1b1b;
|
||||
background-color: var(--blank-bg);
|
||||
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;
|
||||
|
|
@ -141,81 +229,98 @@ img {
|
|||
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%;
|
||||
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:rgb(50,50,60);
|
||||
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:rgb(30,30,40);
|
||||
color:white;
|
||||
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;
|
||||
|
|
@ -226,52 +331,59 @@ p{
|
|||
transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.username {
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
background:black;
|
||||
color:black;
|
||||
background-color: var(--black);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.spoiler:hover {
|
||||
background:#111111;
|
||||
color:#111111;
|
||||
background-color: var(--spoiler-hover);
|
||||
color: var(--spoiler-hover);
|
||||
}
|
||||
|
||||
.unspoiled {
|
||||
background:#1e1e1e;
|
||||
color: white;
|
||||
background-color: var(--spoiler-open-bg);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.unspoiled:before {
|
||||
background-color: rgb(0 0 0);
|
||||
background-color: var(--black);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.replying {
|
||||
background:#0b0d20;
|
||||
background-color: var(--reply-bg);
|
||||
}
|
||||
|
||||
#typing {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
top: 0;
|
||||
right: 4px;
|
||||
background:#161616;
|
||||
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;
|
||||
position: absolute;
|
||||
}
|
||||
#typediv{position: relative;}
|
||||
|
||||
#typediv {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
gap: 0px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
|
|
@ -290,34 +402,42 @@ p{
|
|||
.dot:nth-child(3) {
|
||||
animation-delay: .666s;
|
||||
}
|
||||
|
||||
#typing p {
|
||||
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% {
|
||||
0%,
|
||||
100% {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbr {
|
||||
border-color: #929292;
|
||||
color:black;
|
||||
background-color:black;
|
||||
border-color: var(--light-border);
|
||||
color: var(--black);
|
||||
background-color: var(--black);
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.Home {
|
||||
border-radius: 50%;
|
||||
width: .5in;
|
||||
height: .5in;
|
||||
background:#1b1b1b;
|
||||
background-color: var(--blank-bg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -325,34 +445,37 @@ p{
|
|||
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));
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color:#a2a2a2;
|
||||
color: var(--timestamp-color);
|
||||
font-size: .14in;
|
||||
}
|
||||
|
||||
.replyflex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reply {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
flex-grow: 1;
|
||||
border-color:#474b76;
|
||||
border-color: var(--reply-border);
|
||||
}
|
||||
|
||||
.startreply {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: .4in;
|
||||
}
|
||||
|
||||
.replypfp {
|
||||
border-radius: 50%;
|
||||
width: .2in;
|
||||
|
|
@ -361,71 +484,78 @@ p{
|
|||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.replytext {
|
||||
padding: .05in;
|
||||
color:#acacac;
|
||||
color: var(--reply-text);
|
||||
}
|
||||
|
||||
::-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;
|
||||
color: var(--pronouns);
|
||||
font-size: .15in;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background:#26272c;
|
||||
color:white;
|
||||
background-color: var(--textarea-bg);
|
||||
color: var(--primary-text);
|
||||
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;
|
||||
background-color: var(--channel-hover);
|
||||
}
|
||||
|
||||
.Channel {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#serverName{
|
||||
|
||||
#servername {
|
||||
margin-top: .1in;
|
||||
margin-bottom: .1in;
|
||||
padding-left: 5px;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.servertd {
|
||||
background:#252530;
|
||||
border-color:#1b1b24;
|
||||
background-color: var(--server-hover);
|
||||
border-color: var(--server-border);
|
||||
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;
|
||||
|
|
@ -433,25 +563,37 @@ textarea{
|
|||
align-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.channeleffects:hover {
|
||||
background-color: var(--channel-hover);
|
||||
}
|
||||
|
||||
.dm-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dm-container div img {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.messageimg {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.channeleffects:hover{
|
||||
background:#1c1b25;
|
||||
}
|
||||
.username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: .13in;
|
||||
color:white;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
#userdock {
|
||||
background:#1a1a23;
|
||||
background-color: var(--user-dock-bg);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#settings {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
|
@ -459,63 +601,74 @@ textarea{
|
|||
transition: background 1s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#settings:hover {
|
||||
background:#0e0d10;
|
||||
background-color: var(--settings-hover);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#userinfo {
|
||||
background:#323039;
|
||||
background-color: var(--user-info-bg);
|
||||
border-radius: .1in;
|
||||
}
|
||||
|
||||
.replyusername {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.replyusername:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.servernamediv {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
color:white;
|
||||
background:#1b1b28;
|
||||
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:white;
|
||||
background:#1b1b28;
|
||||
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: #33363d;
|
||||
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:#131315;
|
||||
border-color: var(--login-border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#logindiv input {
|
||||
width: 90%;
|
||||
border-radius: .1in;
|
||||
}
|
||||
|
||||
.adddiv {
|
||||
display: inline-block;
|
||||
height: 0in;
|
||||
height: 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.addchannel {
|
||||
align-self: end;
|
||||
margin-left: auto;
|
||||
|
|
@ -526,84 +679,99 @@ input::file-selector-button{
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.addchannel:hover {
|
||||
background:#000000;
|
||||
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;
|
||||
accent-color: var(--black);
|
||||
color: var(--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;
|
||||
background-color: var(--quote-bg);
|
||||
}
|
||||
|
||||
span {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:#22232c;
|
||||
background-color: var(--loading-bg);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
transition: transform .2s;
|
||||
vertical-align: middle
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#centerdiv {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#loading.doneloading {
|
||||
transform:translate(0%, -100%)
|
||||
transform: translate(0%, -100%);
|
||||
}
|
||||
.unkownfile{
|
||||
background:#141316;
|
||||
|
||||
.unknownfile {
|
||||
background-color: var(--unknown-file-bg);
|
||||
border-style: solid;
|
||||
border-radius: .1in;
|
||||
border-color:#474555;
|
||||
border-color: var(--unknown-file-border);
|
||||
border-width: .03in;
|
||||
display: inline-block;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.fileicon {
|
||||
font-size: .4in;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.filename {
|
||||
color:#47bbff;
|
||||
color: var(--filename);
|
||||
}
|
||||
|
||||
.unread {
|
||||
aspect-ratio: 1 / 1;
|
||||
position: absolute;
|
||||
background:white;
|
||||
background-color: var(--primary-text);
|
||||
height: .075in;
|
||||
width: .075in;
|
||||
transition: transform .2s, background .2s, height .2s, width .2s;
|
||||
|
|
@ -612,28 +780,26 @@ span{
|
|||
border-radius: 50%;
|
||||
border: solid;
|
||||
border-width: .02in;
|
||||
border-color:black;
|
||||
border-color: var(--black);
|
||||
}
|
||||
|
||||
.notiunread {
|
||||
transform:translate(0in,.2in);
|
||||
}
|
||||
.h2md{
|
||||
font-size: .25in;
|
||||
transform: translate(0, .2in);
|
||||
}
|
||||
|
||||
.pinged {
|
||||
aspect-ratio: 1 / 1;
|
||||
transform:translate(0in,.4in);
|
||||
background:red;
|
||||
transform: translate(0, .4in);
|
||||
background-color: var(--mention-bg);
|
||||
height: .15in;
|
||||
width: .15in;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cunread {
|
||||
box-shadow: inset .024in 0 white;
|
||||
box-shadow: inset .024in 0 var(--primary-text);
|
||||
}
|
||||
|
||||
.servernoti {
|
||||
position: relative;
|
||||
}
|
||||
h1{
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue