1538 lines
No EOL
25 KiB
CSS
1538 lines
No EOL
25 KiB
CSS
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;
|
|
overflow-x: hidden;
|
|
height:100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.profile {
|
|
display: inline-block;
|
|
position: absolute;
|
|
background-color: var(--profile-bg);
|
|
border-radius: 10%;
|
|
padding: .2cm;
|
|
width: 7cm !important;
|
|
height: 8cm;
|
|
border: solid, color-mix(in hsl,var(--black),transparent 80%), .03in;
|
|
}
|
|
video{
|
|
max-width: 3in;
|
|
max-height: 4in;
|
|
}
|
|
.collapse{
|
|
width:0px !important;
|
|
overflow: hidden;
|
|
max-width: 0px !important;
|
|
}
|
|
#TOS{
|
|
width: fit-content !important;
|
|
}
|
|
.imgfit {
|
|
max-width: 80vw;
|
|
max-height: 80dvh;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.centeritem {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: var(--dialog-bg);
|
|
z-index: 12;
|
|
}
|
|
|
|
.nonimagecenter {
|
|
z-index: 12;
|
|
border-style: solid;
|
|
border-radius: .1in;
|
|
border-color: var(--dialog-border);
|
|
padding:.03in;
|
|
}
|
|
|
|
th {
|
|
font-weight: 400;
|
|
padding: 0;
|
|
}
|
|
|
|
.background {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100vh;
|
|
top: 0;
|
|
background-color: #000000bf;
|
|
z-index: 11;
|
|
max-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.messagediv:hover {
|
|
background-color: var(--message-bg-hover);
|
|
}
|
|
|
|
.jumped{
|
|
animation-duration: 1.3s;
|
|
animation-name: jumped;
|
|
}
|
|
@keyframes jumped{
|
|
0%,100% {
|
|
background-color: transparent;
|
|
}
|
|
50% {
|
|
background-color: var(--message-jump);
|
|
}
|
|
}
|
|
.messagediv{
|
|
overflow: hidden;
|
|
max-width:100%;
|
|
/* width: 9%; */
|
|
/* display: inline-block; */
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
flex-direction: column;
|
|
max-height: 20in;
|
|
padding: .02in .1in 0 .1in;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
pre {
|
|
background: var(--code-bg);
|
|
color: var(--code-text);
|
|
width: 100%;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
margin: 0px;
|
|
}
|
|
|
|
samp {
|
|
background-color: var(--code-bg);
|
|
color: var(--code-text);
|
|
}
|
|
|
|
.contextbutton {
|
|
transition: background .1s ease-in-out;
|
|
background-color: var(--channels-bg);
|
|
color: var(--primary-text);
|
|
font-weight: bold;
|
|
width: 5cm;
|
|
height: .8cm;
|
|
text-align: left;
|
|
font-size: .5cm;
|
|
cursor: pointer;
|
|
border-width: 0px 0px .03in;
|
|
margin: .02in .05in;
|
|
}
|
|
.contextbutton:active{
|
|
border-width: 0px;
|
|
}
|
|
.contextbutton:disabled{
|
|
cursor:not-allowed;
|
|
border-width:0px;
|
|
}
|
|
.contextbutton:disabled:hover{
|
|
background-color: var(--channels-bg);
|
|
}
|
|
|
|
.infosection {
|
|
hr{
|
|
width:100%;
|
|
}
|
|
display: inline-block;
|
|
background-color: var(--profile-info-bg);
|
|
border-radius: 10%;
|
|
padding: .3cm;
|
|
width: 100%;
|
|
flex-grow:1;
|
|
margin-top: .1cm;
|
|
height: calc(100% - .5in - .2cm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.hypoprofile {
|
|
display: inline-block;
|
|
background-color: var(--profile-bg);
|
|
border-radius: 10%;
|
|
padding: .2cm;
|
|
width: 7cm !important;
|
|
height: 8cm;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 19px;
|
|
}
|
|
.h2md {
|
|
font-size: .25in;
|
|
}
|
|
|
|
.pfp {
|
|
border-radius: 50%;
|
|
width: 0.5in;
|
|
height: .5in;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.servericon {
|
|
transition: border-radius .2s;
|
|
position: relative;
|
|
margin: .0in 0in 0.03in 0;
|
|
}
|
|
.servericon:hover {
|
|
border-radius: 30%;
|
|
}
|
|
.serveropen .servericon{
|
|
border-radius: 30%;
|
|
}
|
|
.contextbutton:hover {
|
|
background-color: var(--primary-bg);
|
|
}
|
|
|
|
.contextmenu {
|
|
position: absolute;
|
|
background-color: var(--profile-info-bg);
|
|
border-radius: .05in;
|
|
}
|
|
|
|
#neunence {
|
|
vertical-align: top;
|
|
overflow: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#servers {
|
|
vertical-align: top;
|
|
height: 100dvh;
|
|
overflow-x: hidden;
|
|
padding: 0.02in .05in 0.0in .05in;
|
|
}
|
|
|
|
#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: 100vw;
|
|
}
|
|
|
|
.message {
|
|
width: 100%;
|
|
flex-wrap: nowrap !important;
|
|
overflow: auto !important;
|
|
}
|
|
|
|
.pfprow {
|
|
width: .5in;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.commentrow {
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: top;
|
|
word-wrap: break-word;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.messagecontainer {
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
max-width: 100%;
|
|
flex-shrink: 1;
|
|
width: 100%;
|
|
/* flex-grow: 1; */
|
|
overflow-x: clip;
|
|
}
|
|
|
|
#messages {
|
|
max-width: 100%;
|
|
/* height: 100%; */
|
|
width: 100%;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#channels {
|
|
background-color: var(--channels-bg);
|
|
top: var(--top-height);
|
|
overflow: auto;
|
|
user-select: none;
|
|
flex-grow: 1;
|
|
/* display: flex; */
|
|
flex-shrink: 1;
|
|
min-height: 0px;
|
|
min-width: 0px;
|
|
width: 2.5in;
|
|
/* height: 100%; */
|
|
}
|
|
|
|
#channels p {
|
|
text-indent: 10px;
|
|
}
|
|
|
|
.space {
|
|
margin: .02in;
|
|
font-size: .25in;
|
|
display: inline-block;
|
|
text-indent: .05in;
|
|
width: .175in;
|
|
padding-right: .026in;
|
|
}
|
|
|
|
.spacee {
|
|
text-indent: .15in;
|
|
margin-right: .02in;
|
|
font-size: .15in;
|
|
display: inline-block;
|
|
width: .2in;
|
|
}
|
|
|
|
#channels p2 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input {
|
|
background-color: var(--message-bg-hover);
|
|
color: var(--primary-text);
|
|
height: .4in;
|
|
width: 97.5%;
|
|
border-color: var(--settings-hover);
|
|
border-width:0 0 .04in 0;
|
|
border-radius:.05in;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
div {
|
|
transition: background .1s ease-in-out;
|
|
}
|
|
|
|
.md-timestamp {
|
|
background-color: var(--markdown-timestamp);
|
|
}
|
|
|
|
#typebox {
|
|
font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
padding: 3px;
|
|
border-radius: .25cm;
|
|
width: 100%;
|
|
min-height: .6in;
|
|
z-index: -100;
|
|
display: flex;
|
|
max-height: 1.5in;
|
|
overflow-y: auto;
|
|
color: var(--primary-text);
|
|
background: var(--textarea-bg);
|
|
border: 1px solid;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p {
|
|
transition: background .1s ease-in-out, color .1s ease-in-out;
|
|
/* width: 100%; */
|
|
}
|
|
|
|
.username {
|
|
width: fit-content;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
word-break:normal;
|
|
}
|
|
.username:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.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: var(--black);
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.replying {
|
|
background-color: var(--reply-bg);
|
|
}
|
|
|
|
#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 .5s ease, opacity .1s ease;
|
|
opacity: 1;
|
|
}
|
|
|
|
#typediv {
|
|
position: relative;
|
|
/* display: flex; */
|
|
width: 100%;
|
|
}
|
|
hr {
|
|
border-style: solid;
|
|
border-width: .01in;
|
|
border-color: var(--primary-text);
|
|
}
|
|
.loading-indicator {
|
|
font-size: 24px;
|
|
display: flex;
|
|
gap: 0;
|
|
}
|
|
|
|
.dot {
|
|
animation: fade 1s infinite;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.dot:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.dot:nth-child(2) {
|
|
animation-delay: .33s;
|
|
}
|
|
|
|
.dot:nth-child(3) {
|
|
animation-delay: .66s;
|
|
}
|
|
|
|
#typing p {
|
|
margin: 0;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
#typing.hidden {
|
|
transform: translateY(0%);
|
|
/* Move down out of view */
|
|
opacity: 0;
|
|
/* Fade out */
|
|
display: none;
|
|
}
|
|
|
|
@keyframes fade {
|
|
0%,
|
|
100% {
|
|
opacity: .2;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.lightbr {
|
|
border-color: var(--light-border);
|
|
color: var(--black);
|
|
background-color: var(--black);
|
|
width: 80%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#channelw {
|
|
width: 100%;
|
|
display: flex;
|
|
grid-template-rows: auto 1fr;
|
|
max-width: 100%;
|
|
flex-direction: column;
|
|
flex-shrink: 1;
|
|
min-height: 0;
|
|
height: 100%;
|
|
/* width: 100%; */
|
|
}
|
|
|
|
.timestamp {
|
|
color: var(--timestamp-color);
|
|
font-size: 0.75rem;
|
|
line-height: 1.3rem;
|
|
padding-left: .05in;
|
|
}
|
|
|
|
.replyflex {
|
|
color: var(--reply-text); /* for date line */
|
|
font-size: 0.9rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
flex-direction: row;
|
|
/* width: 00; */
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.reply {
|
|
display: inline;
|
|
vertical-align: middle;
|
|
flex-grow: 1;
|
|
border-color: var(--reply-border);
|
|
/* flex: 1; */
|
|
min-width: 0px;
|
|
/* max-width: 0px; */
|
|
/* grid-column-end: 1; */
|
|
}
|
|
|
|
.startreply {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 25px;
|
|
border-color: var(--reply-border);
|
|
margin-left: .2in;
|
|
}
|
|
|
|
.replypfp {
|
|
border-radius: 50%;
|
|
width: .2in;
|
|
height: .2in;
|
|
padding: .05in;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.replytext {
|
|
padding: 0 .05in;
|
|
color: var(--reply-text);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: fit-content;
|
|
/* display: block; */
|
|
/* flex-grow: 1; */
|
|
flex: 1 1 auto;
|
|
width: fit-content;
|
|
min-width: 0;
|
|
/* display: inline-block !important; */
|
|
width: 25vw;
|
|
grid-column: 2;
|
|
cursor: pointer;
|
|
}
|
|
.replytext pre {
|
|
/* padding: 0 .05in; */
|
|
color: var(--reply-text);
|
|
/* overflow: hidden; */
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: fit-content;
|
|
/* display: block; */
|
|
/* flex-grow: 1; */
|
|
flex: 1 1 auto;
|
|
/* width: fit-content; */
|
|
min-width: 0;
|
|
display: inline-block !important;
|
|
width: 25vw;
|
|
grid-column: 2;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: .1in;
|
|
height: .1in;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:hover {
|
|
background: var(--scrollbar-track);
|
|
background-color: var(--scrollbar-track);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: .08in;
|
|
border: .03in solid transparent;
|
|
background-clip: padding-box;
|
|
transition: .1s;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
}
|
|
|
|
.pronouns {
|
|
color: var(--pronouns);
|
|
font-size: .15in;
|
|
}
|
|
|
|
textarea {
|
|
background-color: var(--textarea-bg);
|
|
color: var(--primary-text);
|
|
width: 3.5in;
|
|
resize: none;
|
|
height: 1.5in;
|
|
font-size: .75rem;
|
|
}
|
|
input[type=text]:focus-visible,
|
|
input[type=password]:focus-visible,
|
|
textarea:focus-visible,
|
|
#typebox:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
}
|
|
.channels {
|
|
overflow: auto;
|
|
transition: height .2s ease-in-out;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
padding-left: .05in;
|
|
overflow-y: clip;
|
|
}
|
|
|
|
.channel:hover {
|
|
background-color: var(--channel-hover);
|
|
}
|
|
|
|
.channel {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
transition: font-weight .1s;
|
|
border-radius: .05in;
|
|
padding: .05in .1in;
|
|
}
|
|
.viewChannel{
|
|
font-weight:900;
|
|
background: color-mix(in srgb, var(--channel-hover) 60%, transparent)
|
|
}
|
|
#serverName {
|
|
padding-left: 0.1in;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
max-width: 220px;
|
|
}
|
|
|
|
.servertd {
|
|
background-color: var(--server-bg);
|
|
border-color: var(--server-border);
|
|
border-width: .04in;
|
|
border-style: solid;
|
|
height: .48in;
|
|
width:100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.channeleffects {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
flex-direction: row;
|
|
align-self: stretch;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: .025in .0in;
|
|
}
|
|
.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;
|
|
}
|
|
.embedimg {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
max-width:1in;
|
|
max-height:.75in;
|
|
border-radius:.03in;
|
|
}
|
|
.tag {
|
|
font-size: .13in;
|
|
font-weight: 500;
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
#userdock {
|
|
background-color: var(--user-dock-bg);
|
|
width: 2.5in;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
height: .6in;
|
|
display: flex;
|
|
align-content: stretch;
|
|
/* flex-direction: row; */
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: .02in;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#channels-td {
|
|
padding-right: 240px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
#user-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#user-actions h2 {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-radius: .3in;
|
|
transition: color .5s;
|
|
text-align: center;
|
|
overflow: visible;
|
|
width: .28in;
|
|
height: .28in;
|
|
}
|
|
#user-actions h2:hover, #user-actions h2:focus {
|
|
background: var(--settings-hover);
|
|
color: var(--timestamp-color);
|
|
}
|
|
|
|
#userinfo {
|
|
position:relative;
|
|
background-color: var(--user-info-bg);
|
|
border-radius: .1in;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
padding: .03in;
|
|
}
|
|
|
|
.servernamediv {
|
|
width: 100%;
|
|
/* max-width: 100%; */
|
|
}
|
|
|
|
button {
|
|
transition: background .1s ease-in-out;
|
|
background-color: var(--message-bg-hover);
|
|
color: var(--primary-text);
|
|
border-color:var(--timestamp-color);
|
|
font-weight: bold;
|
|
text-align: left;
|
|
font-size: .45cm;
|
|
cursor: pointer;
|
|
border-width: 0px .00in .03in 0in;
|
|
border-radius:.03in;
|
|
margin: .02in .05in;
|
|
box-shadow: 0px 0px .03in var(--black);
|
|
}
|
|
button:active{
|
|
border-width: 0px;
|
|
}
|
|
button:disabled{
|
|
cursor:not-allowed;
|
|
border-width:0px;
|
|
}
|
|
button:disabled:hover{
|
|
background-color: var(--message-bg-hover);
|
|
border-color:var(--timestamp-color);
|
|
color: var(--primary-text);
|
|
}
|
|
button:hover {
|
|
background-color: var(--primary-bg);
|
|
}
|
|
input::file-selector-button {
|
|
transition: background .1s ease-in-out;
|
|
background-color: var(--message-bg-hover);
|
|
border-color:var(--timestamp-color);
|
|
color: var(--primary-text);
|
|
font-weight: bold;
|
|
text-align: left;
|
|
font-size: .45cm;
|
|
cursor: pointer;
|
|
border-style: solid;
|
|
border-width: 0px .00in .03in 0;
|
|
border-radius:.03in;
|
|
margin: .02in .05in;
|
|
}
|
|
input[type="file"] {
|
|
background:transparent;
|
|
}
|
|
select{
|
|
transition: background .1s ease-in-out;
|
|
background-color: var(--message-bg-hover);
|
|
color: var(--primary-text);
|
|
font-weight: bold;
|
|
text-align: left;
|
|
font-size: .45cm;
|
|
cursor: pointer;
|
|
border-width: 0px .00in .03in 0;
|
|
border-radius:.03in;
|
|
border-color:var(--timestamp-color);
|
|
margin: .02in .05in;
|
|
box-shadow: 0px 0px .03in var(--black);
|
|
-webkit-appearance: none;
|
|
}
|
|
#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;
|
|
height: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: 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;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: .15in;
|
|
height: .15in;
|
|
accent-color: var(--black);
|
|
color: var(--black);
|
|
}
|
|
|
|
.dragdiv {
|
|
height: .3in;
|
|
}
|
|
|
|
.quote {
|
|
display: inline-block;
|
|
width: fit-content;
|
|
position: relative;
|
|
}
|
|
|
|
.quoteline {
|
|
display: inline-block;
|
|
width: .02in;
|
|
height: 100%;
|
|
position: absolute;
|
|
background: var(--quote-bg);
|
|
}
|
|
|
|
.quote > span {
|
|
margin-left: 0.5em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
span {
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
/* overflow: clip; */
|
|
/* width: 2in; */
|
|
/* max-width: 100%; */
|
|
}
|
|
|
|
#loading {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--loading-bg);
|
|
z-index: 100;
|
|
text-align: center;
|
|
transition: transform .2s;
|
|
vertical-align: middle;
|
|
display: flex;
|
|
}
|
|
|
|
#centerdiv {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#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 .3s, width .2s;
|
|
transform: translate(-.16in, .2in);
|
|
z-index: 10;
|
|
border-radius: .2in;
|
|
border: solid;
|
|
border-width: .02in;
|
|
border-color: var(--black);
|
|
}
|
|
.servernoti:hover .unread{
|
|
transform: translate(-.1in, 0.15in);
|
|
height:.2in;
|
|
}
|
|
.serveropen .unread{
|
|
transform: translate(-.1in, 0.1in) !important;
|
|
height:.3in !important;
|
|
}
|
|
.notiunread {
|
|
transform: translate(-.1in, .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;
|
|
}
|
|
.tabbed-head{
|
|
background: var(--settings-hover);
|
|
}
|
|
.tabbed-content td{
|
|
/* border-color: var(--textarea-bg); */
|
|
/* border-width:1in; */
|
|
border-inline: medium solid var(--textarea-bg);
|
|
}
|
|
.tabbed-head td button{
|
|
min-width:1.5in;
|
|
}
|
|
.accountSwitcher{
|
|
background:var(--profile-bg);
|
|
cursor:pointer;
|
|
box-shadow: .00in -.5in 1in color-mix(in srgb, var(--shadow) 42%, transparent);
|
|
border-radius: .05in .05in .0in.0in;
|
|
flex-grow: 0;
|
|
align-self: center;
|
|
flex-shrink: 1;
|
|
min-width: 0px;
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding-left:.025in;
|
|
}
|
|
.accountSwitcher tr{
|
|
transition: background .3s;
|
|
background:var(--profile-bg);
|
|
}
|
|
.accountSwitcher tr:hover{
|
|
background:var(--profile-info-bg);
|
|
}
|
|
.switchtable tr{
|
|
background-color:transparent;
|
|
}
|
|
.serverURL{
|
|
color: var(--pronouns);
|
|
word-wrap: normal;
|
|
word-break: normal;
|
|
white-space: nowrap;
|
|
font-size: .125in;
|
|
min-width: 0px;
|
|
}
|
|
.title{
|
|
font-size:.25in;
|
|
font-weight:bold;
|
|
text-shadow: .01in .01in .02in var(--black);
|
|
}
|
|
#channelname{
|
|
font-size:.2in;
|
|
font-weight:bold;
|
|
display: flex;
|
|
padding-left:.2in;
|
|
}
|
|
#mobileback{
|
|
/* display:inline-block; */
|
|
font-size:.3in;
|
|
font-weight:bold;
|
|
padding:.025in;
|
|
background:#06003f96;
|
|
width:.25in;
|
|
height:.25in;
|
|
text-align: center;
|
|
margin-right:.1in;
|
|
margin-left:.05in;
|
|
border-radius:.05in;
|
|
border:solid;
|
|
border-color:black;
|
|
border-width:.04in;
|
|
}
|
|
.bot{
|
|
background:steelblue;
|
|
padding:.02in .05in;
|
|
border-radius:.05in;
|
|
border:solid black;
|
|
border-width:.03in;
|
|
font-weight:bold;
|
|
font-size:.125in;
|
|
margin-left:.025in;
|
|
}
|
|
.embed-color{
|
|
padding-left: .04in;
|
|
border-radius:.05in;
|
|
background: black;
|
|
}
|
|
.embed{
|
|
background:var(--embed);
|
|
padding:.075in;
|
|
border-radius:.05in;
|
|
max-width: 4in;
|
|
font-size: .15in;
|
|
}
|
|
.embedp{
|
|
margin-bottom:.075in
|
|
}
|
|
.embedicon{
|
|
width:.25in;
|
|
height:.25in;
|
|
border-radius:.25in;
|
|
margin-right:.1in;
|
|
}
|
|
.linkembed{
|
|
max-width:5in;
|
|
border: solid;
|
|
border-color: var(--settings-hover);
|
|
}
|
|
.bigembedimg {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
max-width:4in;
|
|
max-height:3in;
|
|
border-radius:.03in;
|
|
}
|
|
.embed a{
|
|
margin-bottom:.1in;
|
|
display: block;
|
|
font-size:.2in;
|
|
}
|
|
.provider{
|
|
color:var(--timestamp-color);
|
|
}
|
|
.embedtitle{
|
|
margin-bottom:0in !important;
|
|
padding-bottom: .05in;
|
|
font-weight: bold;
|
|
}
|
|
.embed b{
|
|
margin-right:.075in;
|
|
}
|
|
.inline{
|
|
display:inline-block;
|
|
margin-right:.1in;
|
|
}
|
|
.embed .username{
|
|
color:var(--primary-text);
|
|
font-size:.15in;
|
|
}
|
|
.spaceright{
|
|
margin-right:.1in;
|
|
}
|
|
.membererror{
|
|
display:inline-block;
|
|
background:#656500;
|
|
height:.15in;
|
|
width:.15in;
|
|
border-radius:.1in;
|
|
text-align:center;
|
|
border:solid black .03in;
|
|
margin-left:.025in;
|
|
}
|
|
.replyflex span{
|
|
/* display: inline-block; */
|
|
text-overflow:ellipsis;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
}
|
|
.controls{
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
}
|
|
.containedFile{
|
|
position: relative;
|
|
width: fit-content;
|
|
box-shadow:.02in .02in .05in black;
|
|
display: inline-block;
|
|
}
|
|
#replybox{
|
|
display:flex;
|
|
background:var(--reply-bg);
|
|
width: 100%;
|
|
height:.3in;
|
|
transition: height .2s, padding .2s;
|
|
border-radius:.1in .1in 0 0;
|
|
padding-left:.05in;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
}
|
|
#replybox span{
|
|
align-self:center;
|
|
}
|
|
.cancelReply{
|
|
align-self:flex-start;
|
|
color:var(--red);
|
|
height: auto;
|
|
width: .25in;
|
|
text-align: center;
|
|
padding: 0in;
|
|
border: none;
|
|
}
|
|
#replybox.hideReplyBox{
|
|
height: 0in;
|
|
padding: 0in;
|
|
overflow: hidden;
|
|
}
|
|
.Buttons{
|
|
background:var(--primary-bg);
|
|
position: relative;
|
|
}
|
|
.flexltr{
|
|
display:flex;
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
.flexttb{
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 100vh;
|
|
overflow: auto;
|
|
/* margin-bottom: 1in; */
|
|
/* padding-bottom: .1in; */
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
.settingbuttons{
|
|
padding-top:.075in;
|
|
width: 4in;
|
|
border-right: solid var(--message-bg-hover);
|
|
gap:.04in;
|
|
}
|
|
.setting{
|
|
background:var(--user-info-bg);
|
|
padding:.075in;
|
|
border-radius:.075in;
|
|
box-shadow:0in 0in .1in var(--message-bg-hover);
|
|
}
|
|
.settingsname{
|
|
font-size:.25in;
|
|
font-weight:bold;
|
|
margin-right:.1in;
|
|
}
|
|
.flexspace{
|
|
gap:.1in;
|
|
}
|
|
.titlediv{
|
|
height:100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.settingstitle{
|
|
font-weight:900;
|
|
font-size:.25in;
|
|
border-bottom:solid var(--message-bg-hover);
|
|
background: var(--primary-bg);
|
|
padding: .02in .1in;
|
|
}
|
|
.exitsettings{
|
|
position:absolute;
|
|
top:.05in;
|
|
right:.05in;
|
|
background:var(--channel-hover);
|
|
width:.3in;
|
|
height:.3in;
|
|
display:flex;
|
|
border-radius:1in;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
font-size:.2in;
|
|
cursor:pointer;
|
|
border:solid .04in black;
|
|
}
|
|
|
|
.tritoggle{
|
|
display:inline-block;
|
|
input{
|
|
height:.15in;
|
|
width:.15in;
|
|
margin:.015in;
|
|
}
|
|
:first-child{
|
|
accent-color:var(--green);
|
|
}
|
|
:last-child{
|
|
accent-color:var(--red);
|
|
}
|
|
}
|
|
|
|
.channelflex{
|
|
flex-shrink:0;
|
|
flex-grow:0;
|
|
width:2.5in;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-content: stretch;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.messageflex{
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
.userflex{
|
|
display:flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: 0.1in;
|
|
}
|
|
.savediv{
|
|
position:absolute;
|
|
background:var(--message-bg-hover);
|
|
border:solid black;
|
|
border-radius:.075in;
|
|
padding:.05in .2in;
|
|
display:flex;
|
|
align-items: center;
|
|
right:50%;
|
|
transform:translate(50%,0);
|
|
bottom:.1in;
|
|
font-weight:bold;
|
|
font-size:.2in;
|
|
width:5in;
|
|
height:.5in;
|
|
button{
|
|
background:var(--green);
|
|
}
|
|
}
|
|
#status {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
#discovery-guild-content {
|
|
display: flex;
|
|
/*grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));*/
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
flex-direction: column;
|
|
min-height: 0px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.discovery-guild {
|
|
margin: 5px;
|
|
padding: 5px;
|
|
background-color: var(--discovery-bg);
|
|
border-radius: 5px;
|
|
box-shadow: 1px 1px 7px var(--primary-text);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.discovery-guild .flex {
|
|
align-items: center;
|
|
}
|
|
|
|
.discovery-guild img.banner {
|
|
width: 215px;
|
|
}
|
|
|
|
.discovery-guild img.icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 5px;
|
|
border-radius: 50%;
|
|
transition: border-radius .2s;
|
|
}
|
|
.discovery-guild img.icon:hover {
|
|
border-radius: 30%;
|
|
}
|
|
|
|
.discovery-guild p {
|
|
overflow-wrap: anywhere;
|
|
max-width: 215px;
|
|
}
|
|
|
|
.guildy{
|
|
height:80vh;
|
|
width:80vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.flex{
|
|
display:flex;
|
|
h3{
|
|
width: fit-content;
|
|
}
|
|
;
|
|
}
|
|
.pfprow .pfp{
|
|
width:.4in;
|
|
height:.4in;
|
|
}
|
|
|
|
.topMessage{
|
|
padding-top:.03in;
|
|
margin-top:.1in;
|
|
}
|
|
.messagediv .flexltr{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
overflow:hidden !important;
|
|
max-height:100in;
|
|
}
|
|
.messagediv .flexttb{
|
|
display:flex;
|
|
overflow: hidden;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
max-height:100in;
|
|
}
|
|
|
|
#connection-container, #app-list-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
max-width: 700px;
|
|
}
|
|
#connection-container div, #app-list-container div {
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
background-color: var(--textarea-bg);
|
|
cursor: pointer;
|
|
}
|
|
#connection-container .disabled {
|
|
background-color: var(--embed-fallback);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.sizeupdown{
|
|
height:4in;
|
|
}
|
|
.bigemoji{
|
|
width:48px;
|
|
height:48px;
|
|
}
|
|
.smallemoji{
|
|
width:22px;
|
|
height:22px;
|
|
}
|
|
#typebox[contenteditable=false]{
|
|
|
|
cursor:not-allowed;
|
|
|
|
}
|
|
#typebox[contenteditable=false]:before{
|
|
content:'You can\'t chat here';
|
|
color:color-mix(in hsl, var(--primary-bg),var(--primary-text));
|
|
}
|
|
.scroller{
|
|
padding-bottom: .2in;
|
|
}
|
|
.suberror{
|
|
animation: goout 6s forwards;
|
|
}
|
|
.suberrora{
|
|
background:var(--channel-hover);
|
|
border-radius:.1in;
|
|
position:absolute;
|
|
border:solid var(--primary-text) .02in;
|
|
color:color-mix(in hsl,var(--yellow),var(--red));
|
|
font-weight:bold;
|
|
opacity:0;
|
|
cursor:default;
|
|
/* height: .4in; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-evenly;
|
|
padding: .075in;
|
|
box-sizing: border-box;
|
|
}
|
|
@keyframes goout {
|
|
0%,100%{
|
|
opacity:0;
|
|
}
|
|
5%,90%{
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
#register{
|
|
display:flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
justify-content: space-between;
|
|
}
|
|
.dontgrow{
|
|
flex-grow:0;
|
|
width: 1.6in;
|
|
text-align: center;
|
|
}
|
|
form div{
|
|
width:100%;
|
|
}
|
|
.svgtheme{
|
|
color: var(--icon-color);
|
|
filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness));
|
|
}
|
|
.channels .channel{
|
|
margin-bottom: .03in;
|
|
}
|
|
.colaspeicon{
|
|
width:.15in;
|
|
padding-right: .025in;
|
|
padding-left: .05in;
|
|
transition:rotate .2s;
|
|
}
|
|
.hiddencat{
|
|
rotate:-90deg;
|
|
}
|
|
.svgicon{
|
|
width:.5in;
|
|
height:.5in;
|
|
} |