3301 lines
54 KiB
CSS
3301 lines
54 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);
|
||
}
|
||
.createdWebhook {
|
||
display: flex;
|
||
align-items: center;
|
||
width: fit-content;
|
||
padding: 0.1in;
|
||
border-radius: 0.1in;
|
||
background: var(--secondary-bg);
|
||
user-select: none;
|
||
cursor: pointer;
|
||
|
||
.pfp {
|
||
width: 0.5in;
|
||
height: 0.5in;
|
||
margin-right: 0.15in;
|
||
}
|
||
}
|
||
.Mplayer {
|
||
padding: 4px;
|
||
border-radius: 3px;
|
||
background: var(--secondary-bg);
|
||
align-items: center;
|
||
flex-grow: 0;
|
||
flex-shrink: 0;
|
||
height: 52px;
|
||
position: relative;
|
||
|
||
* {
|
||
margin: 2px;
|
||
accent-color: var(--primary-text-soft);
|
||
flex-shrink: 1;
|
||
}
|
||
.flexttb {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.bandiv {
|
||
padding: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
background: var(--secondary-bg);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
div {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
.templateMiniBox {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 6px;
|
||
border-radius: 4px;
|
||
width: fit-content;
|
||
background: var(--secondary-bg);
|
||
margin-bottom: 8px;
|
||
span {
|
||
margin-right: 4px;
|
||
}
|
||
button {
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
.flexltr {
|
||
min-height: 0;
|
||
display: flex;
|
||
}
|
||
.flexttb {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.searchNavButtons {
|
||
height: 0.3in;
|
||
flex-shrink: 0;
|
||
background: var(--secondary-bg);
|
||
top: 0px;
|
||
padding: 0.1in;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: auto;
|
||
|
||
button {
|
||
flex-shrink: 0;
|
||
margin-left: 0.1in;
|
||
}
|
||
}
|
||
.sortBar {
|
||
height: 0.3in;
|
||
flex-shrink: 0;
|
||
background: var(--secondary-bg);
|
||
position: sticky;
|
||
top: 0px;
|
||
padding: 0.1in;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 1;
|
||
|
||
button {
|
||
flex-shrink: 0;
|
||
margin-left: 0.1in;
|
||
}
|
||
}
|
||
.selectedB {
|
||
background: color-mix(in srgb, black, var(--button-bg) 60%);
|
||
}
|
||
.pinnedMessages {
|
||
position: absolute;
|
||
background: var(--secondary-bg);
|
||
width: 3.5in;
|
||
padding: 8px;
|
||
border-radius: 6px;
|
||
box-shadow: 1px 3px 10px var(--shadow);
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
min-height: 1in;
|
||
z-index: 2;
|
||
|
||
b {
|
||
width: 100%;
|
||
height: 1in;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.searchOptions {
|
||
padding: 0.05in 0.15in;
|
||
border-radius: 0.1in;
|
||
background: var(--channels-bg);
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: calc(100% - 32px);
|
||
box-sizing: border-box;
|
||
> span {
|
||
transition: background 0.1s;
|
||
margin-bottom: 0.025in;
|
||
margin-top: 0.025in;
|
||
padding: 0.075in 0.05in;
|
||
border-radius: 0.03in;
|
||
cursor: pointer;
|
||
> span,
|
||
img {
|
||
margin-right: 0.05in;
|
||
}
|
||
}
|
||
span.selected {
|
||
background: var(--button-bg);
|
||
}
|
||
span:hover {
|
||
background: var(--button-bg);
|
||
}
|
||
margin: 16px;
|
||
border: solid 0.025in var(--black);
|
||
}
|
||
.searchOptions:empty {
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
#player {
|
||
flex-grow: 0;
|
||
|
||
input {
|
||
width: 100px;
|
||
}
|
||
}
|
||
#player:empty {
|
||
height: 0px;
|
||
}
|
||
.messageEditContainer {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
#voiceArea:empty {
|
||
display: none;
|
||
}
|
||
#voiceArea {
|
||
background: var(--black);
|
||
position: relative;
|
||
}
|
||
.voiceUsers {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
.speaking {
|
||
outline: 3px solid var(--green);
|
||
}
|
||
.voiceUsers > :hover .leave {
|
||
bottom: 10px;
|
||
opacity: 1;
|
||
}
|
||
.leave {
|
||
position: absolute;
|
||
bottom: 0px;
|
||
right: 10px;
|
||
background: var(--red);
|
||
opacity: 0;
|
||
transition:
|
||
bottom 0.4s,
|
||
opacity 0.2s,
|
||
background 0.1s;
|
||
}
|
||
.leave:hover {
|
||
background: color-mix(in srgb, var(--red) 85%, white);
|
||
}
|
||
.voiceUsers > * {
|
||
background: var(--accent_color, var(--primary-bg));
|
||
border-radius: 8px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
margin: 8px;
|
||
width: 340px;
|
||
height: 220px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 60px;
|
||
height: 60px;
|
||
cursor: unset;
|
||
}
|
||
video {
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.buttonRow > * {
|
||
margin-right: 6px;
|
||
width: 54px;
|
||
height: 54px;
|
||
background: var(--secondary-hover);
|
||
border-radius: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
* {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
background: var(--primary-text);
|
||
}
|
||
}
|
||
.buttonRow {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.voiceUsername {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 14px;
|
||
background: var(--secondary-bg);
|
||
padding: 4px;
|
||
border-radius: 6px;
|
||
z-index: 1;
|
||
}
|
||
.flexgrow {
|
||
flex-grow: 1;
|
||
min-height: 0;
|
||
}
|
||
.channelSTitle {
|
||
margin-top: 0.2in;
|
||
margin-bottom: 0;
|
||
margin-left: 10px;
|
||
}
|
||
p,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
pre,
|
||
form {
|
||
margin: 0;
|
||
}
|
||
h2:empty {
|
||
display: none;
|
||
}
|
||
.title {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
}
|
||
.cunread {
|
||
.ellipsis {
|
||
font-weight: bold;
|
||
color: var(--primary-text);
|
||
}
|
||
}
|
||
.ellipsis {
|
||
display: -webkit-box;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
line-clamp: 1;
|
||
-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 {
|
||
max-height: 50svh;
|
||
max-width: 100%;
|
||
}
|
||
.dateline {
|
||
hr {
|
||
width: 100%;
|
||
height: 1px;
|
||
margin: 0.05in;
|
||
}
|
||
span {
|
||
flex-shrink: 0;
|
||
}
|
||
align-items: center;
|
||
}
|
||
iframe {
|
||
/* max-height: 50svh; */
|
||
max-width: 100%;
|
||
}
|
||
audio::-webkit-media-controls-panel {
|
||
background: var(--secondary-bg);
|
||
}
|
||
.joinb {
|
||
background: var(--green);
|
||
border-radius: 200px;
|
||
transition: background 0.2s;
|
||
}
|
||
.joinb:hover {
|
||
background: color-mix(in srgb, var(--green) 80%, transparent);
|
||
}
|
||
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 0.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;
|
||
}
|
||
.voiceTray {
|
||
margin-left: auto;
|
||
span {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 1px;
|
||
margin-left: 4px;
|
||
background: var(--primary-text-soft);
|
||
}
|
||
}
|
||
/* Icons */
|
||
.pfpDiv {
|
||
position: relative;
|
||
}
|
||
.pfp,
|
||
.replypfp {
|
||
display: block;
|
||
height: 32px;
|
||
width: 32px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.leftArrow {
|
||
z-index: 1;
|
||
width: 42px;
|
||
height: 42px;
|
||
display: block;
|
||
background: var(--primary-text-soft);
|
||
position: absolute;
|
||
top: calc(50vh - 42px);
|
||
left: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.rightArrow {
|
||
z-index: 1;
|
||
width: 42px;
|
||
height: 42px;
|
||
display: block;
|
||
background: var(--primary-text-soft);
|
||
position: absolute;
|
||
top: calc(50vh - 42px);
|
||
right: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.svg-mediaSettings {
|
||
width: 15px;
|
||
height: 30px;
|
||
background: var(--primary-text);
|
||
cursor: pointer;
|
||
display: block;
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-mediaButton {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: var(--primary-text);
|
||
cursor: pointer;
|
||
display: block;
|
||
mask-size: cover !important;
|
||
}
|
||
.svg-stream {
|
||
mask: url(/icons/stream.svg);
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-video {
|
||
mask: url(/icons/video.svg);
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-novideo {
|
||
mask: url(/icons/novideo.svg);
|
||
mask-size: contain !important;
|
||
background: var(--red);
|
||
}
|
||
.svg-call {
|
||
mask: url(/icons/call.svg);
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-hangup {
|
||
mask: url(/icons/hangup.svg);
|
||
mask-size: contain !important;
|
||
background: var(--red);
|
||
}
|
||
.svg-plainx {
|
||
mask: url(/icons/plainx.svg);
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-sticker {
|
||
mask: url(/icons/sticker.svg);
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-search {
|
||
mask: url(/icons/search.svg);
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-spoiler {
|
||
mask: url(/icons/spoiler.svg);
|
||
}
|
||
.svg-pin {
|
||
mask: url(/icons/pin.svg);
|
||
mask-size: cover;
|
||
}
|
||
.svg-rules {
|
||
mask: url(/icons/rules.svg);
|
||
mask-size: cover;
|
||
}
|
||
.svg-unspoiler {
|
||
mask: url(/icons/unspoiler.svg);
|
||
}
|
||
.svg-soundMore {
|
||
mask: url(/icons/soundMore.svg);
|
||
}
|
||
.svg-play {
|
||
mask: url(/icons/play.svg);
|
||
}
|
||
.svg-pause {
|
||
mask: url(/icons/pause.svg);
|
||
}
|
||
.svg-announce {
|
||
mask: url(/icons/announce.svg);
|
||
}
|
||
.svg-emoji {
|
||
mask: url(/icons/emoji.svg);
|
||
}
|
||
.svg-gif {
|
||
mask: url(/icons/gif.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-intoMenu {
|
||
mask: url(/icons/intoMenu.svg);
|
||
}
|
||
.svg-leftArrow {
|
||
mask: url(/icons/leftArrow.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-upload {
|
||
mask: url(/icons/upload.svg);
|
||
width: 0.2in !important;
|
||
cursor: pointer;
|
||
}
|
||
.svg-x {
|
||
mask: url(/icons/x.svg);
|
||
}
|
||
.svg-friends {
|
||
mask: url(/icons/friends.svg);
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
.svg-frmessage {
|
||
mask: url(/icons/frmessage.svg);
|
||
}
|
||
.svg-addfriend {
|
||
mask: url(/icons/addfriend.svg);
|
||
}
|
||
|
||
.svg-channelnsfw {
|
||
mask: url(/icons/channelnsfw.svg);
|
||
}
|
||
.svg-announcensfw {
|
||
mask: url(/icons/announcensfw.svg);
|
||
}
|
||
.svg-voicensfw {
|
||
mask: url(/icons/voicensfw.svg);
|
||
}
|
||
|
||
.svgicon {
|
||
display: block;
|
||
height: 100%;
|
||
width: 100%;
|
||
background: var(--primary-text-soft);
|
||
mask-repeat: no-repeat;
|
||
aspect-ratio: 1/1;
|
||
flex-shrink: 0;
|
||
}
|
||
.svg-mic {
|
||
height: 22px;
|
||
width: 22px;
|
||
margin: 6px;
|
||
mask: url(/icons/mic.svg);
|
||
mask-size: contain !important;
|
||
}
|
||
.svg-micmute {
|
||
height: 22px;
|
||
width: 22px;
|
||
margin: 6px;
|
||
mask: url(/icons/micmute.svg);
|
||
background-color: var(--red);
|
||
mask-size: contain !important;
|
||
}
|
||
.mobileback {
|
||
visibility: hidden;
|
||
height: 0px;
|
||
width: 0px;
|
||
}
|
||
#searchX {
|
||
width: 0.16in;
|
||
height: 0.16in;
|
||
position: absolute;
|
||
right: 13px;
|
||
top: 6px;
|
||
}
|
||
#searchX.svg-plainx {
|
||
cursor: pointer;
|
||
}
|
||
#pinnedM {
|
||
width: 0.25in;
|
||
height: 0.25in;
|
||
cursor: pointer;
|
||
}
|
||
.unreadPin {
|
||
position: relative;
|
||
}
|
||
.unreadPin::after {
|
||
width: 0.1in;
|
||
height: 0.1in;
|
||
content: "";
|
||
background: var(--red);
|
||
position: absolute;
|
||
right: 0px;
|
||
bottom: -5px;
|
||
border-radius: 1in;
|
||
}
|
||
#stickerTB {
|
||
width: 0.2in;
|
||
height: 0.2in;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
margin-left: 6px;
|
||
}
|
||
#emojiTB {
|
||
width: 0.2in;
|
||
height: 0.2in;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
margin-left: 6px;
|
||
}
|
||
#gifTB {
|
||
width: 0.2in;
|
||
height: 0.2in;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
mask-size: 0.2in 0.2in;
|
||
}
|
||
.selectarrow {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
height: 12px;
|
||
width: 12px;
|
||
pointer-events: none;
|
||
}
|
||
.hoverthing {
|
||
position: absolute;
|
||
background: var(--dock-bg);
|
||
padding: 0.04in;
|
||
border-radius: 0.05in;
|
||
transform: translate(-50%, 0);
|
||
|
||
animation-duration: 0.2s;
|
||
animation-name: fade-in;
|
||
|
||
border: solid 0.03in var(--black);
|
||
z-index: 4;
|
||
}
|
||
@keyframes fade-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.editMessage {
|
||
background: var(--typebox-bg);
|
||
padding: 0.05in;
|
||
border-radius: 0.04in;
|
||
}
|
||
#gimmefile {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #00000070;
|
||
top: 0px;
|
||
}
|
||
/* Animations */
|
||
@keyframes fade {
|
||
0%,
|
||
100% {
|
||
opacity: 0.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,
|
||
#sideContainDiv::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
#sideContainDiv:has(#sideDiv:empty):has(#player:empty) {
|
||
width: 0px;
|
||
margin: 0px;
|
||
padding: 0px;
|
||
}
|
||
#servers,
|
||
#channels,
|
||
#sideDiv {
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
/* Homepage */
|
||
#titleDiv {
|
||
padding: 8px;
|
||
background: var(--primary-bg);
|
||
font-size: 0.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: 0.9rem;
|
||
color: var(--secondary-text-soft);
|
||
}
|
||
span.instanceStatus {
|
||
font-size: 0.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);
|
||
}
|
||
.verify {
|
||
color: var(--primary-text-soft);
|
||
}
|
||
#TOS {
|
||
vertical-align: middle;
|
||
margin-bottom: 4px;
|
||
}
|
||
#h-captcha {
|
||
margin: 16px 0;
|
||
text-align: center;
|
||
}
|
||
.createAccount {
|
||
width: 94%;
|
||
padding: 8px;
|
||
margin-bottom: 16px;
|
||
font-size: 1.15rem;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
#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 0.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: 8px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: border-radius 0.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 {
|
||
position: relative;
|
||
}
|
||
.unread {
|
||
position: absolute;
|
||
transform: translate(-18px, 20px);
|
||
height: 8px;
|
||
width: 8px;
|
||
background: var(--primary-text);
|
||
border-radius: 4px;
|
||
transition:
|
||
transform 0.2s,
|
||
height 0.2s;
|
||
}
|
||
.servernoti:hover .unread.pinged {
|
||
transform: translate(34px, 14px);
|
||
height: 20px;
|
||
}
|
||
.servernoti:hover .unread {
|
||
transform: translate(-12px, 12px);
|
||
height: 24px;
|
||
}
|
||
.serveropen .unread {
|
||
transform: translate(-12px, 8px) !important;
|
||
height: 32px !important;
|
||
width: 8px !important;
|
||
}
|
||
.serveropen .unread.pinged {
|
||
color: transparent;
|
||
}
|
||
.notiunread {
|
||
transform: translate(-12px, 20px);
|
||
}
|
||
#sentdms {
|
||
position: relative;
|
||
}
|
||
.unread.pinged {
|
||
height: 16px;
|
||
width: 16px;
|
||
transform: translate(34px, 34px);
|
||
background: var(--red);
|
||
font-size: 0.75rem;
|
||
font-weight: bold;
|
||
line-height: 15px;
|
||
text-align: center;
|
||
/* border: 4px solid var(--servers-bg); */
|
||
/* border-radius: 50%; */
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Channel Panel */
|
||
.channelflex {
|
||
flex: none;
|
||
width: 240px;
|
||
background: var(--channels-bg);
|
||
user-select: none;
|
||
}
|
||
.searchMeta {
|
||
position: relative;
|
||
display: flex;
|
||
}
|
||
.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;
|
||
}
|
||
.Banner {
|
||
height: 100px;
|
||
align-items: start;
|
||
padding-top: 10px;
|
||
background-size: cover;
|
||
}
|
||
#serverName {
|
||
font-size: 1rem;
|
||
}
|
||
#channels {
|
||
flex: 1;
|
||
padding-bottom: 12px;
|
||
color: var(--primary-text-soft);
|
||
overflow-y: auto;
|
||
}
|
||
.channels {
|
||
overflow-y: hidden;
|
||
transition: height 0.2s ease-in-out;
|
||
}
|
||
#channels > div > div:first-child {
|
||
margin-top: 6px;
|
||
}
|
||
.channel {
|
||
margin: 0 6px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 2px;
|
||
position: relative;
|
||
}
|
||
.channelbutton {
|
||
height: 2em;
|
||
padding: 0 8px;
|
||
background: transparent;
|
||
color: var(--primary-text-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
transition: font-weight 0.1s;
|
||
}
|
||
.channelbutton:hover {
|
||
background: var(--channel-hover);
|
||
color: var(--primary-text-prominent);
|
||
}
|
||
.channels .channelbutton {
|
||
margin-left: 8px;
|
||
}
|
||
.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% - 8px);
|
||
left: -10px;
|
||
height: 16px;
|
||
width: 7px;
|
||
background: var(--primary-text);
|
||
border-radius: 50%;
|
||
}
|
||
.cunread.mentioned:after {
|
||
background: var(--red);
|
||
}
|
||
.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 0.2s;
|
||
}
|
||
.hiddencat {
|
||
rotate: -90deg;
|
||
}
|
||
.statBub {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
background: color-mix(in srgb, var(--secondary-bg) 75%, transparent);
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
|
||
* {
|
||
background: var(--primary-text);
|
||
width: 16px;
|
||
height: 16px;
|
||
display: block;
|
||
margin: 5px;
|
||
}
|
||
}
|
||
.addchannel {
|
||
height: 10px;
|
||
width: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.addchannel:hover {
|
||
background: var(--primary-text-prominent);
|
||
}
|
||
.voiceuser:hover {
|
||
background: var(--channel-hover);
|
||
}
|
||
.voiceuser {
|
||
margin-left: 32px;
|
||
padding: 4px 4px;
|
||
border-radius: 4px;
|
||
margin-bottom: 2px;
|
||
font-size: 0.9rem;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
.unreadDateline {
|
||
color: var(--red);
|
||
hr {
|
||
background: var(--red);
|
||
}
|
||
}
|
||
/* Member Info (DM/Member List) */
|
||
.liststyle {
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
margin-bottom: 4px;
|
||
}
|
||
.memberListStyle {
|
||
span {
|
||
font-size: 0.9rem;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
.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;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
}
|
||
#userinfo:hover {
|
||
background: var(--dock-hover);
|
||
}
|
||
#userpfp {
|
||
margin: 6px 0;
|
||
}
|
||
.userflex {
|
||
justify-content: center;
|
||
}
|
||
#status {
|
||
font-size: 0.8em;
|
||
}
|
||
#user-actions > * {
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
background: var(--user-info-bg);
|
||
color: var(--user-info-text);
|
||
box-sizing: border-box;
|
||
}
|
||
#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: 0.9em;
|
||
color: var(--primary-text-soft);
|
||
cursor: pointer;
|
||
|
||
button {
|
||
margin-right: 0.05in;
|
||
}
|
||
}
|
||
#channelTopic[hidden] {
|
||
display: none;
|
||
}
|
||
#channelw {
|
||
flex: 1;
|
||
max-height: fit-content;
|
||
flex-basis: auto;
|
||
flex-grow: 0;
|
||
}
|
||
.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;
|
||
flex-wrap: wrap;
|
||
flex-shrink: 0;
|
||
margin-top: 8px;
|
||
}
|
||
#ghostMessages {
|
||
transform: translate(0px, -22px);
|
||
flex-grow: 1;
|
||
}
|
||
#pasteimage:empty {
|
||
height: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.containedFile {
|
||
position: relative;
|
||
flex: 0 0 192px;
|
||
background: var(--blank-bg);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
height: 192px;
|
||
}
|
||
.messageimgdiv {
|
||
position: relative;
|
||
}
|
||
.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: 0.9em;
|
||
color: var(--secondary-text);
|
||
border-radius: 8px 8px 0 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: height 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
.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 {
|
||
margin: -10px 0px;
|
||
flex-grow: 1;
|
||
width: 1px;
|
||
margin-left: 0.06in;
|
||
white-space: pre;
|
||
flex-shrink: 1;
|
||
text-wrap: auto;
|
||
overflow-y: auto;
|
||
margin-right: 0.03in;
|
||
padding: 10px 0;
|
||
}
|
||
.outerTypeBox {
|
||
max-height: 50svh;
|
||
padding: 10px 10px;
|
||
background: var(--typebox-bg);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.searchBox:empty {
|
||
width: 2in;
|
||
}
|
||
.searchBox:empty::after {
|
||
content: var(--hint-text);
|
||
color: var(--primary-text-soft);
|
||
position: absolute;
|
||
top: 4px;
|
||
}
|
||
.searchBox {
|
||
white-space: nowrap;
|
||
height: 0.075in;
|
||
padding: 7px 10px 13px 10px;
|
||
background: var(--dock-bg);
|
||
border-radius: 4px;
|
||
/* overflow-y: auto; */
|
||
display: flex;
|
||
flex-direction: row;
|
||
width: 3in;
|
||
margin: 0 0.1in;
|
||
overflow: hidden;
|
||
|
||
flex-shrink: 0;
|
||
transition: width 0.2s;
|
||
}
|
||
.spaceElm {
|
||
margin: auto;
|
||
}
|
||
.outerTypeBox > span::before {
|
||
content: "\feff";
|
||
}
|
||
#typebox[contenteditable="false"] {
|
||
cursor: not-allowed;
|
||
}
|
||
#typebox[contenteditable="false"]:before {
|
||
content: "You can't send messages here";
|
||
opacity: 0.5;
|
||
}
|
||
#typebox.typeboxreplying {
|
||
border-radius: 0 0 4px 4px;
|
||
}
|
||
#typebox img {
|
||
max-width: 100%;
|
||
}
|
||
#typing {
|
||
position: absolute;
|
||
bottom: 7px;
|
||
margin-left: 24px;
|
||
font-size: 0.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: 0.33s;
|
||
}
|
||
.dot:nth-child(3) {
|
||
animation-delay: 0.66s;
|
||
}
|
||
.loadingMessage {
|
||
span {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
.erroredMessage {
|
||
span {
|
||
opacity: 1;
|
||
color: var(--red);
|
||
}
|
||
}
|
||
/* Message */
|
||
.messagediv,
|
||
.titlespace {
|
||
padding: 3px 36px 3px 16px;
|
||
border-left: 2px solid transparent;
|
||
}
|
||
.messagediv {
|
||
position: relative;
|
||
}
|
||
.messagediv:hover {
|
||
background: var(--primary-hover);
|
||
}
|
||
.fSpoil {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
backdrop-filter: blur(20px);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: backdrop-filter 0.4s;
|
||
span {
|
||
background: var(--spoiler-bg);
|
||
padding: 3px 6px;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
.fSpoil:hover {
|
||
backdrop-filter: blur(15px);
|
||
span {
|
||
background: var(--spoiler-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);
|
||
z-index: 1;
|
||
}
|
||
.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;
|
||
width: 100%;
|
||
}
|
||
.username {
|
||
margin-top: auto;
|
||
font-weight: bold;
|
||
word-break: break-all;
|
||
cursor: pointer;
|
||
}
|
||
.pinText {
|
||
cursor: pointer;
|
||
}
|
||
.pinText:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.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: 0.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;
|
||
}
|
||
.media-medium {
|
||
max-width: 1.2in !important;
|
||
max-height: 1in;
|
||
object-fit: contain;
|
||
}
|
||
.media-small {
|
||
max-width: 0.6in !important;
|
||
max-height: 0.4in;
|
||
object-fit: contain;
|
||
}
|
||
.message img {
|
||
max-width: 100%;
|
||
}
|
||
.timestamp {
|
||
margin-left: 6px;
|
||
font-size: 0.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: 0.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;
|
||
}
|
||
.replytext pre {
|
||
display: inline;
|
||
}
|
||
.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::after {
|
||
/* content: ""; */
|
||
}
|
||
.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: 0.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.authorEmbedImg {
|
||
max-width: 20px;
|
||
padding-right: 4px;
|
||
border-radius: 1in;
|
||
}
|
||
img.bigembedimg {
|
||
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;
|
||
position: relative;
|
||
}
|
||
.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 */
|
||
#sideContainDiv {
|
||
padding: 16px 8px;
|
||
display: none;
|
||
flex: none;
|
||
width: 240px;
|
||
background: var(--sidebar-bg);
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
#sideDiv {
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
overflow: auto;
|
||
flex-grow: 1;
|
||
}
|
||
#page:has(#memberlisttoggle:checked) #sideContainDiv {
|
||
display: flex;
|
||
}
|
||
#sideContainDiv.searchDiv {
|
||
padding: 0px;
|
||
display: flex;
|
||
width: max(30vw, 400px);
|
||
|
||
.topMessage {
|
||
margin: 0px 10px;
|
||
margin-top: 2px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
padding: 0.05in;
|
||
border-radius: 0.075in;
|
||
background: #00000020;
|
||
}
|
||
.topMessage:hover {
|
||
background: #00000050;
|
||
}
|
||
}
|
||
|
||
.memberList {
|
||
padding-bottom: 16px;
|
||
color: var(--primary-text-soft);
|
||
}
|
||
.memberList h3 {
|
||
margin: 0 8px 4px 8px;
|
||
font-size: 0.9rem;
|
||
}
|
||
.memberList .liststyle:hover {
|
||
background: var(--sidebar-hover);
|
||
}
|
||
.memberList.offline .liststyle {
|
||
opacity: 0.5;
|
||
}
|
||
#memberlisttoggle {
|
||
display: none;
|
||
}
|
||
#memberlisttoggleicon {
|
||
display: block;
|
||
padding: 12px 0;
|
||
margin-left: 0;
|
||
cursor: pointer;
|
||
flex-grow: 0;
|
||
}
|
||
#memberlisttoggleicon span {
|
||
height: 16px;
|
||
width: 16px;
|
||
}
|
||
#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);
|
||
z-index: 2;
|
||
|
||
hr {
|
||
width: 90%;
|
||
height: 1px;
|
||
}
|
||
}
|
||
.contextbutton {
|
||
position: relative;
|
||
width: 180px;
|
||
padding: 8px;
|
||
background: transparent;
|
||
font-size: 0.9rem;
|
||
line-height: 1em;
|
||
color: var(--secondary-text);
|
||
border: none;
|
||
transition: none;
|
||
display: flex;
|
||
flex-direction: row;
|
||
.svgicon {
|
||
height: 0.2in;
|
||
width: 0.2in;
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 6px;
|
||
}
|
||
}
|
||
.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;
|
||
z-index: 3;
|
||
}
|
||
.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;
|
||
}
|
||
.badge {
|
||
display: inline-flex;
|
||
padding: 2px;
|
||
border: solid 2px var(--black);
|
||
border-radius: 8px;
|
||
img {
|
||
object-fit: contain;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
.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;
|
||
font-size: 20px;
|
||
}
|
||
.infosection hr {
|
||
width: 100%;
|
||
}
|
||
.tag {
|
||
margin: 4px 0;
|
||
font-size: 0.9em !important;
|
||
color: var(--secondary-text);
|
||
}
|
||
.pronouns {
|
||
font-size: 0.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: 0.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;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 8px var(--shadow);
|
||
gap: 8px;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
background: var(--secondary-bg);
|
||
z-index: 4;
|
||
|
||
input {
|
||
width: 1in;
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 2px;
|
||
transition: width 0.2s;
|
||
background: var(--card-bg);
|
||
}
|
||
}
|
||
.stickerSelect {
|
||
width: 1in;
|
||
height: 1in;
|
||
margin-right: 6px;
|
||
padding: 8px;
|
||
background: var(--secondary-bg);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
}
|
||
.stickerPicker {
|
||
position: absolute;
|
||
height: 440px;
|
||
width: 390px;
|
||
max-height: 100svh;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 8px var(--shadow);
|
||
gap: 8px;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
background: var(--secondary-bg);
|
||
z-index: 4;
|
||
|
||
input {
|
||
width: 1in;
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 2px;
|
||
transition: width 0.2s;
|
||
background: var(--card-bg);
|
||
}
|
||
.sticker {
|
||
max-width: 1in;
|
||
max-height: 1in;
|
||
flex-grow: 1;
|
||
}
|
||
}
|
||
.emojiHeading {
|
||
height: 0.25in;
|
||
}
|
||
.emojiTitle {
|
||
font-size: 1.2rem;
|
||
}
|
||
.emojirow {
|
||
flex: none;
|
||
align-items: center;
|
||
overflow-x: auto;
|
||
flex-grow: 0;
|
||
}
|
||
.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(--card-bg);
|
||
border-radius: 8px;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
||
grid-auto-rows: min-content;
|
||
overflow-y: auto;
|
||
}
|
||
.stickerBody {
|
||
flex: 1;
|
||
padding: 8px;
|
||
background: var(--card-bg);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
overflow-y: auto;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
/* Fullscreen and Modal (TEMP) */
|
||
.background {
|
||
position: fixed;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
background: color-mix(in srgb, var(--black) 75%, transparent);
|
||
z-index: 2;
|
||
}
|
||
.imgfit {
|
||
max-height: 85svh;
|
||
max-width: 85svw;
|
||
}
|
||
.centeritem,
|
||
.accountSwitcher {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.nonimagecenter,
|
||
.accountSwitcher {
|
||
max-height: 95svh;
|
||
width: 500px;
|
||
padding: 6px;
|
||
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;
|
||
overflow-y: auto;
|
||
}
|
||
.nonimagecenter & .flexttb,
|
||
.nonimagecenter & .flexltr {
|
||
flex: 1;
|
||
gap: 8px;
|
||
}
|
||
.nonimagecenter > .flexttb,
|
||
.nonimagecenter > .flexltr {
|
||
padding: 0 0 16px 0 !important;
|
||
background: var(--primary-bg);
|
||
border-radius: 8px;
|
||
}
|
||
.nonimagecenter .settingstitle {
|
||
padding-bottom: 0;
|
||
border-bottom: none;
|
||
}
|
||
.nonimagecenter .flexspace,
|
||
.nonimagecenter .FormSettings {
|
||
padding: 0;
|
||
}
|
||
.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;
|
||
flex-shrink: 0;
|
||
}
|
||
.switchtable:hover {
|
||
background: var(--primary-hover);
|
||
}
|
||
.switchtable .pfp {
|
||
height: 48px;
|
||
width: 48px;
|
||
margin-right: 8px;
|
||
}
|
||
.serverURL {
|
||
font-size: 0.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;
|
||
position: relative;
|
||
}
|
||
.copycontainer {
|
||
flex: none;
|
||
background: var(--button-bg);
|
||
cursor: pointer;
|
||
margin-left: auto;
|
||
}
|
||
.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: 0.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.flexltr {
|
||
width: 100%;
|
||
border-right: 0;
|
||
border-radius: 0.04in;
|
||
.SettingsButton {
|
||
width: auto;
|
||
}
|
||
}
|
||
.settingbuttons {
|
||
flex: none;
|
||
width: 192px;
|
||
padding: 6px;
|
||
background: var(--settings-panel-bg);
|
||
border-right: 2px solid var(--shadow);
|
||
border-left: 2px solid transparent;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.SettingsButton {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
background: transparent;
|
||
color: var(--primary-text-soft);
|
||
border: none;
|
||
transition: background 0.1s;
|
||
position: relative;
|
||
}
|
||
.activeSetting {
|
||
background: color-mix(in srgb, var(--secondary-bg) 60%, transparent);
|
||
}
|
||
.SettingsButton:hover {
|
||
background: var(--settings-panel-hover);
|
||
color: var(--primary-text-prominent);
|
||
}
|
||
.activeSetting:hover {
|
||
background: color-mix(in srgb, var(--secondary-bg) 40%, transparent);
|
||
}
|
||
.addrole {
|
||
height: 10px;
|
||
width: 10px;
|
||
margin-left: auto;
|
||
align-self: center;
|
||
cursor: pointer;
|
||
}
|
||
.titlediv {
|
||
height: 100%;
|
||
}
|
||
.flexspace {
|
||
padding-bottom: 32px;
|
||
overflow-y: auto;
|
||
}
|
||
.flexspace:has(.flexspace) {
|
||
height: 100%;
|
||
padding-bottom: 0;
|
||
}
|
||
.FormSettings .flexspace {
|
||
padding-bottom: 0;
|
||
}
|
||
.FormSettings {
|
||
padding-bottom: 32px;
|
||
}
|
||
.webhookArea {
|
||
background: var(--secondary-bg);
|
||
padding: 0.2in;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 0.1in;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
span {
|
||
color: var(--secondary-text-soft);
|
||
}
|
||
.svgicon {
|
||
width: 0.4in;
|
||
height: 0.4in;
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
.stickersDiv {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
.webhookpfppreview {
|
||
width: 0.8in;
|
||
height: 0.8in;
|
||
border-radius: 1in;
|
||
margin-right: 0.2in;
|
||
}
|
||
.stickerView {
|
||
max-width: 2.5in;
|
||
max-height: 2.5in;
|
||
}
|
||
.sticker {
|
||
max-width: 4in;
|
||
height: 2in;
|
||
}
|
||
.vsmaller {
|
||
.optionElement {
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
.optionElement,
|
||
.FormSettings > button {
|
||
margin: 16px 16px 0 16px;
|
||
word-break: break-word;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.flexltr:has(> .optionElement) {
|
||
margin: 16px 16px 0 16px;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
.flexltr > .optionElement {
|
||
margin: 0;
|
||
}
|
||
.optionElement:has(.optionElement) {
|
||
margin: 0;
|
||
position: relative;
|
||
}
|
||
.optionElement:has(.Buttons) {
|
||
height: 100%;
|
||
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: 0.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) {
|
||
#sideContainDiv {
|
||
position: relative;
|
||
margin-left: -256px;
|
||
}
|
||
.flexspace:has(.hypoprofile) {
|
||
flex-direction: column;
|
||
}
|
||
.optionElement input[type="text"],
|
||
.optionElement textarea,
|
||
.optionElement .fileinputdiv {
|
||
width: 100%;
|
||
}
|
||
.searching {
|
||
#searchBox {
|
||
width: 2in;
|
||
margin-right: 36px;
|
||
padding: 7px 10px 13px 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
#searchBox {
|
||
width: 0px;
|
||
padding: 0;
|
||
}
|
||
#searchX {
|
||
position: absolute;
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
top: 5px;
|
||
right: 2px;
|
||
transition: height 0.2s;
|
||
}
|
||
.searchMeta {
|
||
transition: width 0.2s;
|
||
min-width: 32px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 600px) {
|
||
.searching {
|
||
position: absolute;
|
||
width: 100%;
|
||
background: var(--primary-bg);
|
||
z-index: 1;
|
||
#searchBox {
|
||
width: 100%;
|
||
padding: 7px 10px 13px 10px;
|
||
flex-shrink: 1;
|
||
}
|
||
}
|
||
#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 0.3s;
|
||
}
|
||
#sideContainDiv,
|
||
#sideContainDiv.searchDiv {
|
||
display: block;
|
||
right: -100svw;
|
||
margin-left: -100svw;
|
||
width: 100svw;
|
||
transition: right 0.3s;
|
||
box-sizing: border-box;
|
||
}
|
||
.channelnamediv {
|
||
padding: 0;
|
||
}
|
||
#maintoggleicon {
|
||
display: block;
|
||
padding: 12px;
|
||
cursor: pointer;
|
||
}
|
||
#memberlisttoggleicon {
|
||
padding: 6px;
|
||
}
|
||
#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) #sideContainDiv,
|
||
#sideContainDiv.searchDiv {
|
||
right: 0;
|
||
overflow: auto;
|
||
transition: transform 0.2s;
|
||
}
|
||
.hideSearchDiv {
|
||
transform: translate(100%);
|
||
}
|
||
#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: 100%;
|
||
width: 100%;
|
||
z-index: 1;
|
||
position: absolute;
|
||
}
|
||
.settingsHTMLArea {
|
||
z-index: 2;
|
||
height: 100%;
|
||
background: var(--primary-bg);
|
||
transition: transform 0.2s;
|
||
}
|
||
.nonimagecenter .settingbuttons {
|
||
height: auto;
|
||
}
|
||
.fixedsearch {
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%);
|
||
min-width: 80svw;
|
||
}
|
||
.rolesheader {
|
||
margin: 6px 12px;
|
||
}
|
||
.mobileback {
|
||
width: 20px;
|
||
height: 20px;
|
||
visibility: visible;
|
||
cursor: pointer;
|
||
}
|
||
.mobileHidden {
|
||
transform: translate(100%, 0px);
|
||
}
|
||
}
|
||
.friendcontainer {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 0.2in;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
|
||
> div {
|
||
background: #00000030;
|
||
margin-bottom: 0.1in;
|
||
padding: 0.06in 0.1in;
|
||
border-radius: 0.1in;
|
||
border: solid 1px var(--black);
|
||
}
|
||
}
|
||
.fixedsearch {
|
||
position: absolute;
|
||
background: var(--primary-bg);
|
||
min-height: 0.2in;
|
||
padding: 0.05in;
|
||
border: solid 0.03in var(--black);
|
||
border-radius: 0.05in;
|
||
z-index: 3;
|
||
|
||
span {
|
||
margin-top: 0.1in;
|
||
width: 100%;
|
||
padding: 0.03in;
|
||
border: solid 0.03in var(--black);
|
||
box-sizing: border-box;
|
||
border-radius: 0.05in;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.suberror {
|
||
animation: goout 6s forwards;
|
||
}
|
||
.suberrora {
|
||
background: var(--channel-hover);
|
||
border-radius: 0.1in;
|
||
position: absolute;
|
||
border: solid var(--primary-text) 0.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: 0.075in;
|
||
box-sizing: border-box;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes goout {
|
||
0%,
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
5%,
|
||
90% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.friendsbutton {
|
||
transition: background-color 0.2s;
|
||
background-color: #00000050;
|
||
padding: 0.08in;
|
||
}
|
||
.bigemoji {
|
||
width: 0.6in;
|
||
object-fit: contain;
|
||
height: 0.6in;
|
||
}
|
||
.friendlyButton {
|
||
padding: 0.07in;
|
||
background: #00000045;
|
||
transition: background 0.2s;
|
||
border-radius: 1in;
|
||
border: solid 1px var(--black);
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 0 0.05in;
|
||
}
|
||
.friendlyButton:hover {
|
||
background: black;
|
||
}
|
||
.stickerOption {
|
||
border: solid 1px var(--black);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.075in;
|
||
margin-bottom: 0.2in;
|
||
border-radius: 0.1in;
|
||
background: var(--primary-hover);
|
||
position: relative;
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
img {
|
||
height: 2in;
|
||
}
|
||
}
|
||
.emojiOption {
|
||
border: solid 1px var(--black);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.075in;
|
||
margin-bottom: 0.2in;
|
||
border-radius: 0.1in;
|
||
background: var(--primary-hover);
|
||
position: relative;
|
||
input {
|
||
width: 2in !important;
|
||
height: 0.3in;
|
||
}
|
||
.bigemoji {
|
||
padding-right: 0.5in;
|
||
}
|
||
}
|
||
.deleteEmoji {
|
||
width: 0.3in;
|
||
height: 0.3in;
|
||
position: absolute;
|
||
right: 0.2in;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.gifmenu {
|
||
position: absolute;
|
||
width: 4.5in;
|
||
height: 5in;
|
||
background: var(--secondary-bg);
|
||
border-radius: 8px;
|
||
}
|
||
.gifPreviewBox {
|
||
position: relative;
|
||
width: 2in;
|
||
margin-bottom: 10px;
|
||
border-radius: 7px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 2in;
|
||
height: 1in;
|
||
object-fit: cover;
|
||
}
|
||
span {
|
||
top: 0px;
|
||
left: 0px;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #00000099;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.gifbox {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
overflow-y: auto;
|
||
margin: 0.1in;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow-x: clip;
|
||
}
|
||
.searchGifBar {
|
||
height: 0.3in;
|
||
margin: 0.15in 0.15in 0 0.15in;
|
||
flex-shrink: 0;
|
||
background: var(--black);
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 0.2in;
|
||
padding: 0 0.1in;
|
||
}
|
||
img.error {
|
||
position: relative;
|
||
}
|
||
img.error::after {
|
||
background: var(--secondary-bg) url("/icons/sad.svg");
|
||
background-size: contain;
|
||
content: "";
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.dragBottomView {
|
||
position: relative;
|
||
}
|
||
.dragTopView {
|
||
position: relative;
|
||
}
|
||
.dragTopView::after {
|
||
content: "";
|
||
width: 100%;
|
||
height: 4px;
|
||
border-radius: 4px;
|
||
background: var(--primary-text-soft);
|
||
top: -1px;
|
||
left: 0px;
|
||
position: absolute;
|
||
}
|
||
.dragBottomView::after {
|
||
content: "";
|
||
width: 100%;
|
||
height: 4px;
|
||
border-radius: 4px;
|
||
background: var(--primary-text-soft);
|
||
bottom: -3px;
|
||
left: 0px;
|
||
position: absolute;
|
||
}
|
||
.gifBox {
|
||
img {
|
||
max-width: 196px;
|
||
border-radius: 4px;
|
||
}
|
||
cursor: pointer;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
}
|
||
.emojiForm {
|
||
display: flex;
|
||
background: var(--secondary-bg);
|
||
padding: 6px;
|
||
width: fit-content;
|
||
border-radius: 4px;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
:last-child {
|
||
margin-left: 6px;
|
||
max-width: 32px !important;
|
||
max-height: 32px !important;
|
||
flex-shrink: 0;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
.emptyEmoji {
|
||
background: var(--primary-bg);
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 2in;
|
||
}
|
||
.stickerMArea {
|
||
padding-left: 48px;
|
||
}
|
||
.solidBackground {
|
||
background: var(--secondary-bg);
|
||
opacity: 1;
|
||
}
|