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; } 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); } .messagediv{ overflow: hidden; max-width:100%; /* width: 9%; */ /* display: inline-block; */ display: flex; flex-wrap: nowrap; flex-direction: column; max-height: 20in; flex-shrink: 0; width: 100%; } pre { background-color: var(--code-bg); width: 100%; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; } samp { background-color: var(--code-bg); } .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 { display: inline-block; background-color: var(--profile-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: 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%; */ } #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: 97.5%; border-color: var(--settings-hover); border-width:0 0 .04in 0; border-radius:.05in; } 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; font-size: 16px; padding: 3px; border-radius: .25cm; width: 100%; height: .5in; z-index: -100; max-width: 99%; display: flex; max-height: fit-content; } 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: 99%; } .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; } .addserver{ 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: .14in; padding-left: .05in; } .replyflex { 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: 26px; } .replypfp { border-radius: 50%; width: .2in; height: 2.in; 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; } .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: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); box-shadow: 0 2px 5px var(--black); transition: .1s; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); box-shadow: 0 2px 5px var(--black); } .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; } .channels { overflow: auto; transition: height .2s ease-in-out; user-select: none; cursor: pointer; } .channel:hover { background-color: var(--channel-hover); } .channel { user-select: none; cursor: pointer; transition: font-weight .1s; } .viewChannel{ font-weight:900; background: color-mix(in srgb, var(--channel-hover) 60%, transparent) } #servername { margin-top: .1in; margin-bottom: .1in; padding-left: 5px; 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: .1cm; border-style: solid; height: .4in; width:100%; display: flex; flex-direction: column; justify-content: space-evenly; flex-shrink: 0; } .channeleffects { cursor: pointer; user-select: none; flex-direction: row; 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; } .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-top: .02in; } #channels-td { padding-right: 240px; flex-grow: 1; display: flex; flex-direction: column; height: 100%; flex-shrink: 1; } #settings { cursor: pointer; user-select: none; border-radius: .3in; transition: background 1s; text-align: center; font-size: .25in; width: .3in; height: .3in; overflow: visible; } #settings:hover { background-color: var(--settings-hover); cursor: pointer; user-select: none; } #userinfo { position:relative; background-color: var(--user-info-bg); border-radius: .1in; cursor: pointer; flex-shrink: 0; padding: .03in; } .servernamediv { width: 99%; /* 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-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); } #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: 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-color: var(--quote-bg); } 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; } #centerdiv { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #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(-.14in, .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 #0000006b; border-radius: .05in .05in .0in.0in; flex-grow: 0; align-self: center; flex-shrink: 1; min-width: 0px; display: inline-block; width: 100%; } .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; } #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; text-decoration:none; 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); height:.25in; 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; padding-top: .05in; } #replybox span{ align-self:stretch; } .cancelReply{ align-self:flex-start; color:red; margin-right: .1in; height: .25in; width: .25in; text-align: center; padding: 0in; } #replybox.hideReplyBox{ height: 0in; padding: 0in; } .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:green; } :last-child{ accent-color: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; } .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:green; } } #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:.1in } .messagediv .flexltr{ display:flex; flex-wrap:wrap; overflow:hidden !important; max-height:100in; } .messagediv .flexttb{ display:flex; overflow: hidden; flex-wrap: wrap; width: 100%; flex-direction: column; max-height:100in; } .sizeupdown{ height:4in; }