1961 lines
34 KiB
CSS
1961 lines
34 KiB
CSS
/* General */
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
background: var(--secondary-bg);
|
|
font-family: var(--font);
|
|
color: var(--primary-text);
|
|
overflow: hidden; /* avoid "bounce" */
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
#page {
|
|
height: 100svh;
|
|
background: var(--primary-bg);
|
|
}
|
|
.flexltr {
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
.flexttb {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.flexgrow {
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
p, h1, h2, h3, pre, form {
|
|
margin: 0;
|
|
}
|
|
.title {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
.ellipsis {
|
|
display: -webkit-box;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
a, .clickable {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
word-break: break-word;
|
|
cursor: pointer;
|
|
}
|
|
a:hover, .clickable:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.clickable {
|
|
color: unset;
|
|
}
|
|
hr {
|
|
height: 2px;
|
|
background: var(--divider);
|
|
border: none;
|
|
}
|
|
pre, samp {
|
|
background: var(--code-bg);
|
|
color: var(--code-text);
|
|
text-wrap: wrap;
|
|
word-break: break-word;
|
|
}
|
|
video, iframe {
|
|
max-height: 50svh;
|
|
max-width: 100%;
|
|
}
|
|
audio::-webkit-media-controls-panel {
|
|
background: var(--secondary-bg);
|
|
}
|
|
button, input::file-selector-button, select {
|
|
padding: 6px 10px;
|
|
background: var(--button-bg);
|
|
font-size: 1rem;
|
|
font-family: var(--font);
|
|
text-align: left;
|
|
color: var(--button-text);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background .1s ease-in-out;
|
|
}
|
|
input::file-selector-button {
|
|
margin-right: 6px;
|
|
}
|
|
button:hover, input::file-selector-button:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
button:active:enabled, input::file-selector-button:active {
|
|
border: none;
|
|
}
|
|
button:disabled {
|
|
color: var(--button-disabled-text);
|
|
cursor: not-allowed;
|
|
}
|
|
.selectspan {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
padding-right: 32px;
|
|
margin-left: 4px;
|
|
}
|
|
.fileinputdiv {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
input[type="file"] {
|
|
flex: 1 0;
|
|
min-width: 0;
|
|
margin-top: 4px;
|
|
}
|
|
input[type="color"] {
|
|
display: block;
|
|
height: 48px;
|
|
width: 48px;
|
|
margin-top: 4px;
|
|
background: var(--secondary-bg);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
input[type="checkbox"] {
|
|
accent-color: var(--accent-color);
|
|
}
|
|
textarea {
|
|
height: 144px;
|
|
resize: none;
|
|
}
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="date"],
|
|
textarea {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 8px 12px;
|
|
margin-top: 4px;
|
|
background: var(--text-input-bg);
|
|
font-family: var(--font);
|
|
font-size: 1rem;
|
|
color: var(--secondary-text);
|
|
border: none;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
::-webkit-calendar-picker-indicator {
|
|
opacity: 1;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 0;
|
|
}
|
|
#typebox:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
/* Icons */
|
|
.pfpDiv {
|
|
position: relative;
|
|
}
|
|
.pfp, .replypfp {
|
|
display: block;
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.svg-announce {
|
|
mask: url(/icons/announce.svg);
|
|
}
|
|
.svg-edit {
|
|
mask: url(/icons/edit.svg);
|
|
}
|
|
.svg-reply {
|
|
mask: url(/icons/reply.svg);
|
|
}
|
|
.svg-delete {
|
|
mask: url(/icons/delete.svg);
|
|
}
|
|
.svg-category {
|
|
mask: url(/icons/category.svg);
|
|
}
|
|
.svg-channel {
|
|
mask: url(/icons/channel.svg);
|
|
}
|
|
.svg-copy {
|
|
mask: url(/icons/copy.svg);
|
|
}
|
|
.svg-explore {
|
|
mask: url(/icons/explore.svg);
|
|
}
|
|
.svg-home {
|
|
mask: url(/icons/home.svg);
|
|
}
|
|
.svg-settings {
|
|
mask: url(/icons/settings.svg);
|
|
}
|
|
.svg-voice {
|
|
mask: url(/icons/voice.svg);
|
|
}
|
|
.svg-plus {
|
|
mask: url(/icons/plus.svg);
|
|
}
|
|
.svg-x {
|
|
mask: url(/icons/x.svg);
|
|
}
|
|
.svgicon {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: var(--primary-text-soft);
|
|
mask-repeat: no-repeat;
|
|
}
|
|
.selectarrow {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
height: 12px;
|
|
width: 12px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fade {
|
|
0%, 100% {
|
|
opacity: .2;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes jumped {
|
|
0%, 100% {
|
|
background: transparent;
|
|
}
|
|
50% {
|
|
background: var(--message-jump-bg);
|
|
}
|
|
}
|
|
|
|
/* Scrollbars */
|
|
::-webkit-scrollbar {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-track:hover {
|
|
background: var(--channels-bg);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--primary-text-soft);
|
|
border-radius: 8px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--primary-text-soft);
|
|
}
|
|
#servers::-webkit-scrollbar, #channels::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Homepage */
|
|
#titleDiv {
|
|
padding: 8px;
|
|
background: var(--primary-bg);
|
|
font-size: .8rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0 28px;
|
|
}
|
|
.TitleButtons {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
#homePage {
|
|
max-width: 80%;
|
|
padding-bottom: 40px;
|
|
margin: 0 auto;
|
|
}
|
|
h1.pagehead {
|
|
padding: 22px;
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.pagebox {
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
background: var(--primary-bg);
|
|
border-radius: 8px;
|
|
}
|
|
.pagebox h2 {
|
|
margin-bottom: 12px;
|
|
}
|
|
.pagebox ul {
|
|
margin-bottom: 0;
|
|
line-height: 1.5em;
|
|
}
|
|
#instancebox {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(318px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.instance {
|
|
padding: 16px;
|
|
background: var(--secondary-bg);
|
|
color: var(--secondary-text);
|
|
border-radius: 8px;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.instance img {
|
|
height: 64px;
|
|
width: 64px;
|
|
border-radius: 30%;
|
|
}
|
|
.instance p {
|
|
margin-bottom: 24px;
|
|
}
|
|
.instance span {
|
|
margin-bottom: 4px;
|
|
font-size: .9rem;
|
|
color: var(--secondary-text-soft);
|
|
}
|
|
span.instanceStatus {
|
|
font-size: .75rem;
|
|
}
|
|
.instancetextbox h2 {
|
|
margin-bottom: 4px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Login/Invite */
|
|
#logindiv, #invitebody {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
max-height: 100svh;
|
|
min-width: 512px;
|
|
padding: 24px;
|
|
background: var(--primary-bg);
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 8px var(--shadow);
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
#logindiv label, #TOSbox {
|
|
display: inline-block;
|
|
margin-top: 12px;
|
|
}
|
|
#verify {
|
|
color: var(--primary-text-soft);
|
|
}
|
|
#TOS {
|
|
vertical-align: middle;
|
|
margin-bottom: 4px;
|
|
}
|
|
#h-captcha {
|
|
margin: 16px 0;
|
|
text-align: center;
|
|
}
|
|
#logindiv button {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 16px;
|
|
font-size: 1.15rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
#invitebody {
|
|
background: var(--primary-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.inviteGuild {
|
|
height: 64px;
|
|
width: 64px;
|
|
background-color: var(--blank-bg);
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
border-radius: 30%;
|
|
user-select: none;
|
|
}
|
|
#inviteimg.pfp {
|
|
height: 64px;
|
|
width: 64px;
|
|
cursor: auto;
|
|
}
|
|
#invitedescription {
|
|
color: var(--primary-text-soft);
|
|
}
|
|
#acceptInvite {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
}
|
|
#permissions {
|
|
margin-top: 8px;
|
|
color: var(--primary-text-soft);
|
|
}
|
|
#permissions h1 {
|
|
font-size: 1.4rem;
|
|
color: var(--primary-text);
|
|
}
|
|
#permissions .flexttb {
|
|
margin-top: 12px;
|
|
}
|
|
#permissions h2 {
|
|
font-size: 1rem;
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
/* Loading */
|
|
#loading {
|
|
z-index: 100;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: var(--loading-bg, inherit) !important;
|
|
color: var(--loading-text);
|
|
text-align: center;
|
|
transition: transform .2s;
|
|
overflow: hidden; /* keep size if window height is too small */
|
|
}
|
|
#loading.doneloading {
|
|
transform: translate(0%, -100%);
|
|
}
|
|
#loadingdiv {
|
|
display: none;
|
|
flex: 0 0 100%; /* push out scroller until loaded */
|
|
overflow-y: auto;
|
|
flex-direction: column-reverse;
|
|
}
|
|
#switchaccounts {
|
|
color: var(--link);
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
#loadingdiv.loading {
|
|
display: flex;
|
|
}
|
|
.loadingmessage {
|
|
position: relative;
|
|
}
|
|
.loadingpfp {
|
|
position: absolute;
|
|
height: 40px;
|
|
width: 40px;
|
|
margin-left: 16px;
|
|
background: var(--typebox-bg);
|
|
border-radius: 50%;
|
|
}
|
|
.loadingcontent {
|
|
height: 16px;
|
|
margin: 0 0 12px 68px;
|
|
background: var(--typebox-bg);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Server List */
|
|
#servers {
|
|
flex: 0 0 auto;
|
|
padding: 8px;
|
|
background: var(--servers-bg);
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
user-select: none;
|
|
}
|
|
.servericon, #sentdms .pfp {
|
|
height: 48px;
|
|
width: 48px;
|
|
margin-bottom: 6px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: border-radius .2s;
|
|
}
|
|
.servericon:hover, .serveropen .servericon, #sentdms .pfp:hover {
|
|
border-radius: 30%;
|
|
}
|
|
.home .svgicon {
|
|
background: var(--icon);
|
|
}
|
|
.home .svg-plus {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.home .svg-explore {
|
|
height: 44px;
|
|
width: 44px;
|
|
}
|
|
.lightbr {
|
|
margin: 8px 4px;
|
|
}
|
|
.blankserver, .home {
|
|
background: var(--blank-bg);
|
|
}
|
|
.servernoti, .home {
|
|
position: relative;
|
|
}
|
|
.unread {
|
|
position: absolute;
|
|
transform: translate(-18px, 20px);
|
|
height: 8px;
|
|
width: 8px;
|
|
background: var(--primary-text);
|
|
border-radius: 4px;
|
|
transition: transform .2s, height .2s;
|
|
}
|
|
.servernoti:hover .unread {
|
|
transform: translate(-12px, 12px);
|
|
height: 24px;
|
|
}
|
|
.serveropen .unread {
|
|
transform: translate(-12px, 8px) !important;
|
|
height: 32px !important;
|
|
}
|
|
.notiunread {
|
|
transform: translate(-12px, 20px);
|
|
}
|
|
#sentdms {
|
|
position: relative;
|
|
}
|
|
.unread.pinged, .servernoti:hover .unread.pinged {
|
|
height: 16px;
|
|
width: 16px;
|
|
transform: translate(28px, 28px);
|
|
background: var(--red);
|
|
font-size: .75rem;
|
|
font-weight: bold;
|
|
line-height: 15px;
|
|
text-align: center;
|
|
border: 4px solid var(--servers-bg);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Channel Panel */
|
|
.channelflex {
|
|
flex: none;
|
|
width: 240px;
|
|
background: var(--channels-bg);
|
|
user-select: none;
|
|
}
|
|
.header {
|
|
flex: none;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
background: var(--channels-header-bg);
|
|
border-bottom: 2px solid var(--shadow);
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
#serverName {
|
|
font-size: 1.15rem;
|
|
}
|
|
#channels {
|
|
flex: 1;
|
|
padding-bottom: 12px;
|
|
color: var(--primary-text-soft);
|
|
overflow-y: auto;
|
|
}
|
|
.channels {
|
|
overflow-y: hidden;
|
|
transition: height .2s ease-in-out;
|
|
}
|
|
#channels > div > div:first-child {
|
|
margin-top: 8px;
|
|
}
|
|
.channel {
|
|
margin: 0 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.channelbutton {
|
|
height: 2em;
|
|
padding: 0 8px;
|
|
background: transparent;
|
|
color: var(--primary-text-soft);
|
|
display: flex;
|
|
align-items: center;
|
|
transition: font-weight .1s;
|
|
}
|
|
.channelbutton:hover {
|
|
background: var(--channel-hover);
|
|
color: var(--primary-text-prominent);
|
|
}
|
|
.viewChannel .channelbutton, .viewChannel .channelbutton:hover {
|
|
background: var(--channel-selected);
|
|
font-weight: bold;
|
|
color: var(--primary-text-prominent);
|
|
}
|
|
.cunread {
|
|
position: relative;
|
|
color: var(--primary-text-prominent);
|
|
}
|
|
.cunread:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: calc(50% - 4px);
|
|
left: -12px;
|
|
height: 8px;
|
|
width: 8px;
|
|
background: var(--primary-text);
|
|
border-radius: 50%;
|
|
}
|
|
.space {
|
|
flex: none;
|
|
height: 1em;
|
|
width: 1em;
|
|
margin-right: 8px;
|
|
background: var(--primary-text-soft);
|
|
}
|
|
.capsflex {
|
|
margin-top: 8px;
|
|
align-items: center;
|
|
}
|
|
.channeleffects {
|
|
flex: 1;
|
|
height: 2em;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.channeleffects:hover {
|
|
color: var(--primary-text-prominent);
|
|
}
|
|
.collapse-icon {
|
|
flex: none;
|
|
height: 12px;
|
|
width: 12px;
|
|
margin-right: 6px;
|
|
transition: rotate .2s;
|
|
}
|
|
.hiddencat {
|
|
rotate: -90deg;
|
|
}
|
|
.addchannel {
|
|
height: 10px;
|
|
width: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.addchannel:hover {
|
|
background: var(--primary-text-prominent);
|
|
}
|
|
.voiceuser {
|
|
margin-left: 32px;
|
|
padding: 4px 0;
|
|
font-size: .9rem;
|
|
}
|
|
|
|
/* Member Info (DM/Member List) */
|
|
.liststyle {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.liststyle .statusDiv {
|
|
right: -1px;
|
|
bottom: -1px;
|
|
}
|
|
.liststyle:hover {
|
|
background: var(--channel-hover);
|
|
color: var(--primary-text-prominent);
|
|
}
|
|
#channels .liststyle {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
/* Dock */
|
|
#VoiceBox {
|
|
margin: 2px 0;
|
|
background: var(--dock-bg);
|
|
}
|
|
#VoiceStatus {
|
|
padding: 8px;
|
|
font-weight: bold;
|
|
}
|
|
#VoiceStatus:empty {
|
|
padding: 0;
|
|
}
|
|
#userdock {
|
|
padding: 4px 6px;
|
|
background: var(--dock-bg);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
#userinfo {
|
|
min-width: 50%;
|
|
padding: 0 6px;
|
|
background: var(--user-info-bg);
|
|
color: var(--user-info-text);
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
}
|
|
#userinfo:hover {
|
|
background: var(--dock-hover);
|
|
}
|
|
#userpfp {
|
|
margin: 6px 0;
|
|
}
|
|
.userflex {
|
|
justify-content: center;
|
|
}
|
|
#status {
|
|
font-size: .8em;
|
|
}
|
|
#user-actions {
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
#user-actions:hover {
|
|
background: var(--dock-hover);
|
|
}
|
|
#settings {
|
|
height: 22px;
|
|
width: 22px;
|
|
margin: 6px;
|
|
background: var(--user-info-text);
|
|
}
|
|
|
|
/* Message Area */
|
|
.channelnamediv {
|
|
background: var(--main-header-bg);
|
|
}
|
|
#channelname {
|
|
flex: none;
|
|
font-weight: bold;
|
|
}
|
|
#channelTopic {
|
|
margin: auto 0 0 8px;
|
|
font-size: .9em;
|
|
color: var(--primary-text-soft);
|
|
}
|
|
#channelTopic[hidden] {
|
|
display: none;
|
|
}
|
|
#channelw {
|
|
flex: 1;
|
|
}
|
|
.scroller {
|
|
flex: 1;
|
|
padding-bottom: 22px;
|
|
overflow-y: auto;
|
|
}
|
|
#pasteimage {
|
|
height: 30%;
|
|
padding: 12px;
|
|
margin: 16px;
|
|
background: var(--typebox-bg);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
gap: 12px;
|
|
overflow-y: auto;
|
|
}
|
|
#pasteimage:empty {
|
|
height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.containedFile {
|
|
position: relative;
|
|
flex: 0 0 192px;
|
|
background: var(--blank-bg);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.messageimgdiv {
|
|
height: 100%;
|
|
}
|
|
.messageimg {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
.attachments .messageimg {
|
|
border-radius: 4px;
|
|
}
|
|
#replybox {
|
|
height: 32px;
|
|
padding: 0 10px 0 16px;
|
|
margin: 0 16px;
|
|
background: var(--secondary-bg);
|
|
font-size: .9em;
|
|
color: var(--secondary-text);
|
|
border-radius: 8px 8px 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: height .2s;
|
|
}
|
|
.cancelReply {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.cancelReply:hover {
|
|
background: var(--primary-text-prominent);
|
|
}
|
|
#replybox.hideReplyBox {
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
#realbox {
|
|
padding: 0 16px 28px 16px;
|
|
}
|
|
#typebox {
|
|
max-height: 50svh;
|
|
padding: 10px 14px;
|
|
background: var(--typebox-bg);
|
|
border-radius: 4px;
|
|
overflow-y: auto;
|
|
}
|
|
#typebox > span::before {
|
|
content: "\feff";
|
|
}
|
|
#typebox[contenteditable=false] {
|
|
cursor:not-allowed;
|
|
}
|
|
#typebox[contenteditable=false]:before {
|
|
content: "You can't send messages here";
|
|
opacity: .5;
|
|
}
|
|
#typebox.typeboxreplying {
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
#typebox img {
|
|
max-width: 100%;
|
|
}
|
|
#typing {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
margin-left: 24px;
|
|
font-size: .9em;
|
|
gap: 4px;
|
|
}
|
|
#typing.hidden {
|
|
display: none;
|
|
}
|
|
.loading-indicator {
|
|
margin-top: 2px;
|
|
align-items: center;
|
|
}
|
|
.dot {
|
|
animation: fade 1s infinite;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--primary-text);
|
|
border-radius: 50%;
|
|
margin-right: 3px;
|
|
}
|
|
.dot:nth-child(2) {
|
|
animation-delay: .33s;
|
|
}
|
|
.dot:nth-child(3) {
|
|
animation-delay: .66s;
|
|
}
|
|
|
|
/* Message */
|
|
.messagediv, .titlespace {
|
|
padding: 3px 36px 3px 16px;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
.messagediv {
|
|
position: relative;
|
|
}
|
|
.messagediv:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
.messageButtons, .controls {
|
|
position: absolute;
|
|
top: -16px;
|
|
right: 16px;
|
|
background: var(--secondary-bg);
|
|
box-shadow: 0 0 4px var(--shadow), 0 0 2px var(--shadow);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.messageButtons button, .controls button {
|
|
padding: 8px;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
transition: none;
|
|
}
|
|
.messageButtons button span, .controls button span {
|
|
display: block;
|
|
height: 16px;
|
|
width: 16px;
|
|
background: var(--secondary-text-soft);
|
|
}
|
|
.messageButtons button:hover, .controls button:hover {
|
|
background: var(--secondary-hover);
|
|
}
|
|
.messageButtons button:hover span, .controls button:hover span {
|
|
background: var(--secondary-text);
|
|
}
|
|
.controls {
|
|
top: 6px;
|
|
right: 6px;
|
|
box-shadow: 0 0 1.5px var(--primary-text-soft);
|
|
}
|
|
.message {
|
|
padding-right: 28px;
|
|
}
|
|
.topMessage {
|
|
margin-top: 16px;
|
|
}
|
|
.zeroheight {
|
|
padding: 0;
|
|
}
|
|
.blocked {
|
|
display: inline-block;
|
|
margin-bottom: 4px;
|
|
color: var(--primary-text-soft);
|
|
cursor: pointer;
|
|
}
|
|
.message.blocked {
|
|
margin-bottom: 0;
|
|
}
|
|
.messagediv:has(.message.blocked):hover {
|
|
background: transparent;
|
|
}
|
|
.pfprow {
|
|
flex: none;
|
|
width: 40px;
|
|
margin: 2px 12px 0 0;
|
|
}
|
|
.pfprow .pfp {
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
.commentrow {
|
|
word-break: break-word;
|
|
gap: 4px;
|
|
}
|
|
.username {
|
|
margin-top: auto;
|
|
font-weight: bold;
|
|
word-break: break-all;
|
|
cursor: pointer;
|
|
}
|
|
.username:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.bot {
|
|
padding: 2px 5px;
|
|
margin-left: 4px;
|
|
vertical-align: 1px;
|
|
background: color-mix(in srgb, var(--accent-color) 75%, transparent);
|
|
font-size: .75em;
|
|
font-weight: bold;
|
|
color: var(--primary-text-prominent);
|
|
border-radius: 4px;
|
|
}
|
|
.membererror {
|
|
display: inline-block;
|
|
width: 14px;
|
|
margin-left: 4px;
|
|
font-size: 13px;
|
|
line-height: 1em;
|
|
text-align: center;
|
|
border: solid var(--red) 2px;
|
|
border-radius: 50%;
|
|
}
|
|
.jumped {
|
|
animation: jumped 1.3s;
|
|
}
|
|
|
|
/* Message Content */
|
|
.message pre {
|
|
padding: 8px;
|
|
margin-top: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.message img {
|
|
max-width: 100%;
|
|
}
|
|
.timestamp {
|
|
margin-left: 6px;
|
|
font-size: .75em;
|
|
color: var(--primary-text-soft);
|
|
}
|
|
.spoiler {
|
|
background: var(--spoiler-bg);
|
|
color: var(--spoiler-bg);
|
|
cursor: pointer;
|
|
}
|
|
.spoiler:hover {
|
|
background: var(--spoiler-hover);
|
|
color: var(--spoiler-hover);
|
|
}
|
|
.unspoiled {
|
|
color: var(--spoiler-text);
|
|
}
|
|
.quote {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
.quoteline {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 4px;
|
|
background: var(--quote-line);
|
|
}
|
|
span .quote:first-of-type .quoteline {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
span .quote:last-of-type .quoteline {
|
|
border-bottom-left-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
}
|
|
.quote span {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
}
|
|
.replyflex {
|
|
position: relative;
|
|
padding-left: 52px;
|
|
margin-bottom: 4px;
|
|
font-size: .9em;
|
|
color: var(--reply-text);
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.replyflex::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: calc(50% - 1px);
|
|
left: 19px;
|
|
height: calc(50% + 1px);
|
|
width: 28px;
|
|
border-top: 2px solid var(--reply-line);
|
|
border-left: 2px solid var(--reply-line);
|
|
border-top-left-radius: 8px;
|
|
}
|
|
.startreply {
|
|
flex: none;
|
|
width: 28px;
|
|
margin-left: 20px;
|
|
background: transparent;
|
|
}
|
|
.replypfp {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
.replyflex .username {
|
|
flex: none;
|
|
max-width: calc(100% - 75px);
|
|
}
|
|
.replytext {
|
|
margin-top: auto;
|
|
cursor: pointer;
|
|
}
|
|
.replytext a {
|
|
pointer-events: none;
|
|
}
|
|
.reply {
|
|
flex: 1;
|
|
background: var(--reply-line);
|
|
}
|
|
.replying {
|
|
background: color-mix(in srgb, var(--reply-highlight) 10%, transparent);
|
|
border-color: var(--reply-highlight);
|
|
}
|
|
.replying:hover {
|
|
background: color-mix(in srgb, var(--reply-highlight) 10%, var(--primary-hover));
|
|
}
|
|
.mentioned {
|
|
background: color-mix(in srgb, var(--mention-highlight) 10%, transparent);
|
|
border-color: var(--mention-highlight);
|
|
}
|
|
.mentioned:hover {
|
|
background: color-mix(in srgb, var(--mention-highlight) 10%, var(--primary-hover));
|
|
}
|
|
.mentionMD {
|
|
background: color-mix(in srgb, var(--mention), transparent);
|
|
padding: 1px 2px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.mentionMD:hover {
|
|
background: var(--mention);
|
|
}
|
|
.reactiondiv {
|
|
padding-left: 52px;
|
|
gap: 0 4px;
|
|
flex-wrap: wrap;
|
|
user-select: none;
|
|
}
|
|
.reaction {
|
|
min-width: 30px;
|
|
padding: 3px 4px;
|
|
margin-top: 4px;
|
|
background: var(--reaction-bg);
|
|
color: var(--secondary-text);
|
|
border: 1.5px solid transparent;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
gap: 4px;
|
|
}
|
|
.reaction p {
|
|
line-height: 1em;
|
|
}
|
|
.reaction:hover {
|
|
border-color: color-mix(in srgb, var(--primary-text-soft), transparent);
|
|
}
|
|
.reaction.meReacted {
|
|
background: var(--reaction-reacted-bg);
|
|
border-color: color-mix(in srgb, var(--accent-color), transparent);
|
|
}
|
|
.smallemoji {
|
|
height: auto;
|
|
width: auto;
|
|
max-height: 16px;
|
|
max-width: 16px;
|
|
}
|
|
|
|
/* Message External */
|
|
.filename a {
|
|
color: var(--filename);
|
|
}
|
|
.attachments {
|
|
margin-top: 4px;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.embed {
|
|
max-width: 400px;
|
|
padding: 12px;
|
|
background: var(--embed-bg);
|
|
font-size: .88em;
|
|
color: var(--secondary-text);
|
|
border-radius: 4px;
|
|
}
|
|
.linkembed {
|
|
margin-top: 4px;
|
|
}
|
|
.embed-color {
|
|
max-width: 400px;
|
|
margin-top: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.embed-color .embed {
|
|
margin-left: 4px;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
.embed a {
|
|
display: inline-block;
|
|
padding-bottom: 4px;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
.embed .provider {
|
|
padding-bottom: 4px;
|
|
color: var(--secondary-text-soft);
|
|
}
|
|
img.embedicon {
|
|
height: 16px;
|
|
width: 16px;
|
|
margin-right: 4px;
|
|
border-radius: 50%;
|
|
vertical-align: bottom;
|
|
}
|
|
img.embedimg {
|
|
max-width: 96px;
|
|
}
|
|
img.bigembedimg {
|
|
height: auto !important;
|
|
margin-top: 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.inviteEmbed {
|
|
width: 400px;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
margin: 4px 0 0 0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.inviteEmbed .banner {
|
|
height: 48px;
|
|
}
|
|
.inviteEmbed .flexltr {
|
|
padding: 12px;
|
|
gap: 8px;
|
|
}
|
|
.inviteEmbed .unread {
|
|
display: none;
|
|
}
|
|
.inviteEmbed .pfp {
|
|
cursor: auto;
|
|
}
|
|
.inviteEmbed .invguildinfo {
|
|
flex: 1;
|
|
padding: 4px 12px;
|
|
background: var(--primary-bg);
|
|
color: var(--primary-text);
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
}
|
|
.subtext {
|
|
color: var(--primary-text-soft);
|
|
}
|
|
.inviteEmbed h2 {
|
|
margin: 0 12px;
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
color: var(--secondary-text-soft);
|
|
}
|
|
.unknownfile {
|
|
margin-top: 4px;
|
|
padding: 4px;
|
|
background: var(--secondary-bg);
|
|
border-radius: 4px;
|
|
}
|
|
.acceptinvbutton {
|
|
width: calc(100% - 24px);
|
|
padding: 6px;
|
|
margin: 12px;
|
|
background: var(--green);
|
|
font-size: 1.15rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.acceptinvbutton:hover, .acceptinvbutton:disabled {
|
|
background: color-mix(in hsl, var(--green) 80%, var(--black));
|
|
}
|
|
|
|
/* Sidebar */
|
|
#sideDiv {
|
|
display: none;
|
|
flex: none;
|
|
width: 240px;
|
|
padding: 16px 8px;
|
|
background: var(--sidebar-bg);
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.memberList {
|
|
padding-bottom: 16px;
|
|
color: var(--primary-text-soft);
|
|
}
|
|
.memberList h3 {
|
|
margin: 0 8px 4px 8px;
|
|
font-size: 1rem;
|
|
}
|
|
.memberList .liststyle:hover {
|
|
background: var(--sidebar-hover);
|
|
}
|
|
.memberList.offline .liststyle {
|
|
opacity: .5;
|
|
}
|
|
#memberlisttoggle {
|
|
display: none;
|
|
}
|
|
#memberlisttoggleicon {
|
|
display: block;
|
|
padding: 12px 0;
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
}
|
|
#memberlisttoggleicon span {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
#page:has(#memberlisttoggle:checked) #sideDiv {
|
|
display: block;
|
|
}
|
|
#page:has(#memberlisttoggle:checked) #memberlisttoggleicon span {
|
|
background: var(--primary-text-prominent);
|
|
}
|
|
|
|
/* Context Menu */
|
|
.contextmenu {
|
|
position: absolute;
|
|
padding: 8px;
|
|
background: var(--secondary-bg);
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 8px var(--shadow);
|
|
}
|
|
.contextbutton {
|
|
width: 180px;
|
|
padding: 8px;
|
|
background: transparent;
|
|
font-size: .9rem;
|
|
line-height: 1em;
|
|
color: var(--secondary-text);
|
|
border: none;
|
|
transition: none;
|
|
}
|
|
.contextbutton:enabled:hover {
|
|
background: var(--secondary-hover);
|
|
}
|
|
.contextbutton:disabled {
|
|
background: var(--secondary-bg);
|
|
}
|
|
|
|
/* Profile */
|
|
.profile {
|
|
position: absolute;
|
|
height: 350px;
|
|
width: 300px;
|
|
max-height: 100svh;
|
|
background: var(--card-bg);
|
|
box-shadow: 0 0 8px var(--shadow), inset 0 132px 64px var(--accent_color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
align-items: flex-start;
|
|
}
|
|
.hypoprofile {
|
|
position: relative;
|
|
min-height: 350px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.profile .pfpDiv {
|
|
position: absolute;
|
|
}
|
|
.profile .pfp {
|
|
height: 48px;
|
|
width: 48px;
|
|
margin: 8px 0 0 8px;
|
|
cursor: auto;
|
|
}
|
|
.statusDiv {
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
height: 7px;
|
|
width: 7px;
|
|
background: var(--black);
|
|
border: 2.5px solid var(--black);
|
|
border-radius: 50%;
|
|
}
|
|
.onlinestatus {
|
|
background: var(--green);
|
|
}
|
|
.offlinestatus {
|
|
background:var(--primary-bg);
|
|
}
|
|
.banner {
|
|
height: 100px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.infosection {
|
|
flex: 1;
|
|
width: calc(100% - 16px);
|
|
padding: 12px;
|
|
margin: 8px;
|
|
margin-top: 64px;
|
|
background: var(--secondary-bg);
|
|
color: var(--secondary-text);
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
.profile:has(.banner) .infosection {
|
|
margin-top: 8px;
|
|
}
|
|
.infosection h2, .infosection h3 {
|
|
word-break: break-word;
|
|
}
|
|
.infosection hr {
|
|
width: 100%;
|
|
}
|
|
.tag {
|
|
margin: 4px 0;
|
|
font-size: .9em;
|
|
color: var(--secondary-text);
|
|
}
|
|
.pronouns {
|
|
font-size: .9em;
|
|
color: var(--secondary-text-soft);
|
|
}
|
|
.rolesbox {
|
|
min-height: unset;
|
|
margin-top: auto;
|
|
padding-top: 6px;
|
|
gap: 2px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.rolediv {
|
|
padding: 4px 6px;
|
|
background: var(--role-bg);
|
|
color: var(--role-text);
|
|
font-size: .9em;
|
|
border: 1px solid var(--black);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.colorrolediv {
|
|
height: 12px;
|
|
width: 12px;
|
|
background: var(--role-color);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Emoji Picker */
|
|
.emojiPicker {
|
|
position: absolute;
|
|
height: 440px;
|
|
width: 360px;
|
|
max-height: 100svh;
|
|
padding: 12px;
|
|
background: var(--card-bg);
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 8px var(--shadow);
|
|
gap: 8px;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
}
|
|
.emojiTitle {
|
|
font-size: 1.2rem;
|
|
}
|
|
.emojirow {
|
|
flex: none;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
}
|
|
.emojiSelect {
|
|
flex: none;
|
|
height: 40px;
|
|
width: 40px;
|
|
font-size: 28px;
|
|
line-height: 28px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.emojiSelect:hover {
|
|
background: var(--secondary-hover);
|
|
}
|
|
.emoji-server, .emojiBody .smallemoji {
|
|
height: auto;
|
|
width: auto;
|
|
max-height: 28px;
|
|
max-width: 28px;
|
|
margin: 0;
|
|
}
|
|
.emojiBody {
|
|
flex: 1;
|
|
padding: 6px;
|
|
background: var(--secondary-bg);
|
|
border-radius: 8px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
|
grid-auto-rows: min-content;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Fullscreen and Modal (TEMP) */
|
|
.background {
|
|
position: fixed;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: color-mix(in srgb, var(--black) 75%, transparent);
|
|
}
|
|
.imgfit {
|
|
max-height: 85svh;
|
|
max-width: 85svw;
|
|
}
|
|
.centeritem, .accountSwitcher {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.nonimagecenter, .accountSwitcher {
|
|
max-height: 80svh;
|
|
width: 500px;
|
|
padding: 12px;
|
|
margin: 0;
|
|
background: var(--secondary-bg);
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 24px var(--shadow), 0 0 1.5px var(--primary-text);
|
|
box-sizing: border-box;
|
|
gap: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
.nonimagecenter .flexttb, .nonimagecenter .flexltr {
|
|
flex: 1;
|
|
gap: 8px;
|
|
}
|
|
.nonimagecenter > .flexttb, .nonimagecenter > .flexltr {
|
|
padding: 16px;
|
|
background: var(--primary-bg);
|
|
border-radius: 8px;
|
|
}
|
|
.nonimagecenter button {
|
|
height: 100%;
|
|
}
|
|
fieldset {
|
|
margin-bottom: 4px;
|
|
border-color: var(--primary-text-soft);
|
|
}
|
|
fieldset input[type="radio"] {
|
|
margin: 6px;
|
|
}
|
|
.switchtable {
|
|
padding: 8px;
|
|
background: var(--primary-bg);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
.switchtable:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
.switchtable .pfp {
|
|
height: 48px;
|
|
width: 48px;
|
|
margin-right: 8px;
|
|
}
|
|
.serverURL {
|
|
font-size: .9em;
|
|
color: var(--primary-text-soft);
|
|
}
|
|
.accountSwitcher {
|
|
z-index: 102;
|
|
}
|
|
.accountSwitcher h1 {
|
|
margin-bottom: 4px;
|
|
text-align: center;
|
|
}
|
|
.accountSwitcher select {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
.accountSwitcher:has(button) {
|
|
padding: 24px;
|
|
}
|
|
.accountSwitcher button {
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
.invitediv {
|
|
padding-left: 8px;
|
|
border-radius: 4px;
|
|
background: var(--secondary-bg);
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.copycontainer {
|
|
flex: none;
|
|
background: var(--button-bg);
|
|
cursor: pointer;
|
|
}
|
|
.copycontainer:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
.copybutton {
|
|
height: 20px;
|
|
width: 20px;
|
|
margin: 8px;
|
|
}
|
|
.nonimagecenter:has(.guildy) {
|
|
max-height: unset;
|
|
width: auto;
|
|
}
|
|
.guildy {
|
|
height: 80svh;
|
|
width: 80svw;
|
|
gap: 6px;
|
|
}
|
|
#discovery-guild-content {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
.discovery-guild {
|
|
height: 280px;
|
|
border-radius: 8px;
|
|
background: var(--secondary-bg);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
.discovery-guild:hover {
|
|
background: var(--secondary-hover);
|
|
}
|
|
.flex {
|
|
margin: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.icon {
|
|
height: 48px;
|
|
width: 48px;
|
|
border-radius: 50%;
|
|
}
|
|
.discovery-guild h3 {
|
|
font-size: 1em;
|
|
}
|
|
.discovery-guild p {
|
|
margin: 0 12px;
|
|
font-size: .9em;
|
|
color: var(--secondary-text-soft);
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Settings */
|
|
.menu {
|
|
background: var(--settings-bg);
|
|
}
|
|
.settingstitle {
|
|
flex: none;
|
|
background: var(--settings-header-bg);
|
|
min-height: 48px;
|
|
padding: 8px 16px;
|
|
flex-wrap: wrap;
|
|
border-bottom: 2px solid var(--shadow);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
gap: 0 6px;
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
.Buttons {
|
|
flex: 1;
|
|
}
|
|
.settingbuttons {
|
|
flex: none;
|
|
width: 192px;
|
|
padding: 8px;
|
|
background: var(--settings-panel-bg);
|
|
border-right: 2px solid var(--shadow);
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
.SettingsButton {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
color: var(--primary-text-soft);
|
|
border: none;
|
|
transition: none;
|
|
}
|
|
.SettingsButton:hover {
|
|
background: var(--settings-panel-hover);
|
|
color: var(--primary-text-prominent);
|
|
}
|
|
.titlediv {
|
|
max-height: 100%;
|
|
}
|
|
.flexspace {
|
|
overflow-y: auto;
|
|
padding-bottom: 32px;
|
|
}
|
|
.flexspace:has(.flexspace) {
|
|
padding-bottom: 0;
|
|
}
|
|
.optionElement, .FormSettings > button {
|
|
margin: 16px 16px 0 16px;
|
|
word-break: break-word;
|
|
}
|
|
.optionElement:has(.optionElement) {
|
|
margin: 0;
|
|
}
|
|
.optionElement:has(.Buttons) {
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
.optionElement input[type="text"],
|
|
.optionElement textarea,
|
|
.optionElement .fileinputdiv {
|
|
width: 500px;
|
|
}
|
|
#app-list-container div, #connection-container div {
|
|
max-width: 500px;
|
|
padding: 8px;
|
|
margin-top: 12px;
|
|
background: var(--secondary-bg);
|
|
color: var(--secondary-text);
|
|
border: 1.5px solid transparent;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
#app-list-container div:hover {
|
|
border: 1.5px solid color-mix(in srgb, var(--secondary-text), transparent);
|
|
}
|
|
#app-list-container img {
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 4px;
|
|
}
|
|
#app-list-container h2 {
|
|
font-size: 1rem;
|
|
}
|
|
#connection-container .disabled {
|
|
color: var(--button-disabled-text);
|
|
cursor: not-allowed;
|
|
}
|
|
.inlinelabel {
|
|
margin-right: 4px;
|
|
}
|
|
.setting {
|
|
padding: 16px;
|
|
background: var(--secondary-bg);
|
|
color: var(--secondary-text);
|
|
border-radius: 4px;
|
|
}
|
|
.settingsname {
|
|
font-size: 1.15rem;
|
|
}
|
|
.setting p {
|
|
font-size: .9em;
|
|
color: var(--secondary-text-soft)
|
|
}
|
|
.tritoggle {
|
|
display: inline;
|
|
margin-left: 4px;
|
|
}
|
|
.tritoggle input {
|
|
margin: 0 2px;
|
|
}
|
|
.tritoggle input:first-child {
|
|
accent-color: var(--green);
|
|
}
|
|
.tritoggle input:last-child {
|
|
accent-color: var(--red);
|
|
}
|
|
.savediv {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
padding: 16px;
|
|
background: var(--secondary-bg);
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
color: var(--secondary-text);
|
|
border-radius: 8px;
|
|
align-items: center;
|
|
box-shadow: 0 0 24px var(--shadow), 0 0 1px var(--primary-text);
|
|
box-sizing: border-box;
|
|
}
|
|
.savediv button {
|
|
margin-left: 12px;
|
|
background: var(--green);
|
|
}
|
|
.exitsettings {
|
|
position: absolute;
|
|
top: 11px;
|
|
right: 12px;
|
|
height: 24px;
|
|
width: 24px;
|
|
cursor: pointer;
|
|
}
|
|
.exitsettings:hover {
|
|
background: var(--primary-text-prominent);
|
|
}
|
|
|
|
/* Jank Mobile */
|
|
#maintoggle, #maintoggleicon {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
#sideDiv {
|
|
position: absolute;
|
|
right: 0;
|
|
height: calc(100svh - 50px);
|
|
}
|
|
.flexspace {
|
|
flex-direction: column;
|
|
}
|
|
.optionElement input[type="text"],
|
|
.optionElement textarea,
|
|
.optionElement .fileinputdiv {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
#homePage {
|
|
max-width: unset;
|
|
width: 94%;
|
|
}
|
|
#page {
|
|
display: block;
|
|
position: fixed;
|
|
}
|
|
#servers, .channelflex, #mainarea {
|
|
position: absolute;
|
|
height: 100svh;
|
|
}
|
|
.channelflex {
|
|
left: 64px;
|
|
}
|
|
#mainarea {
|
|
left: 304px;
|
|
width: 100svw;
|
|
background: var(--primary-bg);
|
|
transition: left .3s;
|
|
}
|
|
#sideDiv {
|
|
display: block;
|
|
right: -100svw;
|
|
width: 100svw;
|
|
transition: right .3s;
|
|
}
|
|
.channelnamediv {
|
|
padding: 0;
|
|
}
|
|
#maintoggleicon, #memberlisttoggleicon {
|
|
display: block;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
}
|
|
#maintoggleicon span {
|
|
height: 14px;
|
|
width: 14px;
|
|
rotate: -90deg;
|
|
}
|
|
.scroller {
|
|
pointer-events: none;
|
|
}
|
|
#page:has(#maintoggle:checked) .scroller {
|
|
pointer-events: auto;
|
|
}
|
|
#page:has(#maintoggle:checked) #mainarea {
|
|
left: 0;
|
|
}
|
|
#page:has(#memberlisttoggle:checked) #sideDiv {
|
|
right: 0;
|
|
}
|
|
#page:has(#maintoggle:checked) #maintoggleicon {
|
|
rotate: 180deg;
|
|
}
|
|
.messagediv {
|
|
padding: 3px 12px 3px 10px;
|
|
}
|
|
.message {
|
|
padding-right: 4px;
|
|
}
|
|
.topMessage {
|
|
margin-top: 8px;
|
|
}
|
|
.pfprow {
|
|
width: 32px;
|
|
}
|
|
.pfprow .pfp {
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
.replyflex:before {
|
|
left: 15px;
|
|
width: 24px;
|
|
}
|
|
.replyflex, .reactiondiv {
|
|
padding-left: 44px;
|
|
}
|
|
#realbox, #logindiv, #pasteimg {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
#replybox {
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
.contextmenu, .profile, .emojiPicker {
|
|
top: unset !important;
|
|
bottom: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow: 0 0 14px var(--shadow), 0 0 28px var(--shadow)
|
|
}
|
|
.contextbutton {
|
|
width: 100%;
|
|
padding: 12px;
|
|
}
|
|
.profile {
|
|
height: 65%;
|
|
box-shadow: 0 0 14px var(--shadow), 0 0 28px var(--shadow), inset 0 132px 64px var(--accent_color);
|
|
}
|
|
.hypoprofile {
|
|
border-radius: 8px;
|
|
}
|
|
#logindiv, #invitebody, .savediv, .nonimagecenter, .accountSwitcher {
|
|
width: 94%;
|
|
min-width: unset;
|
|
}
|
|
.Buttons {
|
|
flex-direction: column;
|
|
}
|
|
.settingstitle {
|
|
font-size: 1.2rem;
|
|
}
|
|
.settingbuttons {
|
|
height: 100px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.addrole{
|
|
width:.1in;
|
|
height: .1in;
|
|
margin-left: .1in;
|
|
margin-top: .04in;
|
|
cursor: pointer;
|
|
}
|
|
.fixedsearch{
|
|
position: absolute;
|
|
background: var(--primary-bg);
|
|
min-height: .2in;
|
|
padding:.05in;
|
|
border:solid .03in var(--black);
|
|
border-radius:.05in;
|
|
span{
|
|
margin-top:.1in;
|
|
width:100%;
|
|
padding:.03in;
|
|
border:solid .03in var(--black);
|
|
box-sizing:border-box;
|
|
border-radius:.05in;
|
|
cursor:pointer;
|
|
}
|
|
|
|
}
|