629 lines
No EOL
10 KiB
CSS
629 lines
No EOL
10 KiB
CSS
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
table {
|
|
/* border-collapse: collapse; */
|
|
}
|
|
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;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
p{
|
|
transition: background 0.1s ease-in-out;
|
|
transition: color 0.1s ease-in-out;
|
|
width: 100%;
|
|
}
|
|
.username{
|
|
width:fit-content;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.spoiler{
|
|
background:black;
|
|
color:black;
|
|
}
|
|
.spoiler:hover{
|
|
background:#111111;
|
|
color:#111111;
|
|
}
|
|
.unspoiled{
|
|
background:#1e1e1e;
|
|
color: white;
|
|
}
|
|
|
|
.unspoiled:before {
|
|
background-color: rgb(0 0 0);
|
|
background-clip: content-box;
|
|
}
|
|
.replying{
|
|
background:#0b0d20;
|
|
}
|
|
#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;
|
|
}
|
|
#typediv{position: relative;}
|
|
|
|
.loading-indicator {
|
|
font-size: 24px;
|
|
display: flex;
|
|
gap: 0px;
|
|
}
|
|
|
|
.dot {
|
|
animation: fade 1s infinite;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.dot:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.dot:nth-child(2) {
|
|
animation-delay: 0.333s;
|
|
}
|
|
|
|
.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 */
|
|
}
|
|
@keyframes fade {
|
|
0%, 100% {
|
|
opacity: .2;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.lightbr{
|
|
border-color: #929292;
|
|
color:black;
|
|
background-color: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;
|
|
}
|
|
: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;
|
|
font-size:.14in;
|
|
}
|
|
.replyflex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.reply{
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
flex-grow: 1;
|
|
border-color:#474b76;
|
|
}
|
|
.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;
|
|
}
|
|
.replytext{
|
|
padding:.05in;
|
|
color:#acacac;
|
|
}
|
|
::-webkit-scrollbar {width: .1in;height:.1in;}
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
|
background: #34313c;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #201f29;
|
|
box-shadow: 0px 2px 5px #000000;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #16161f;
|
|
box-shadow: 0px 2px 5px #000000;
|
|
}
|
|
.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;
|
|
}
|
|
.username:hover{
|
|
text-decoration: underline;
|
|
}
|
|
.tag{
|
|
font-size:.13in;
|
|
color:white;
|
|
}
|
|
#userdock{
|
|
background:#1a1a23;
|
|
width:100%;
|
|
}
|
|
#settings{
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-radius:.1in;
|
|
transition: background 1s;
|
|
text-align: center;
|
|
}
|
|
#settings:hover{
|
|
background:#0e0d10;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
#userinfo{
|
|
background:#323039;
|
|
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;
|
|
border-radius:.05in;
|
|
height:.3in;
|
|
min-width: 1.3in;
|
|
font-size:.175in;
|
|
}
|
|
input::file-selector-button{
|
|
color:white;
|
|
background:#1b1b28;
|
|
border-radius:.05in;
|
|
height:.25in;
|
|
min-width: 1in;
|
|
}
|
|
#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;
|
|
}
|
|
#logindiv input{
|
|
width:90%;
|
|
border-radius:.1in;
|
|
}
|
|
.adddiv{
|
|
display: inline-block;
|
|
height: 0in;
|
|
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:#000000;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.notiunread{
|
|
transform:translate(0in,.2in);
|
|
}
|
|
.pinged{
|
|
aspect-ratio : 1 / 1;
|
|
transform:translate(0in,.4in);
|
|
background:red;
|
|
height:.15in;
|
|
width:.15in;
|
|
text-align: center;
|
|
}
|
|
.cunread{
|
|
box-shadow: inset .024in 0 white;
|
|
}
|
|
.servernoti{
|
|
position:relative;
|
|
} |