mirror of
https://github.com/MathMan05/Fermi.git
synced 2026-03-30 19:55:43 +00:00
4945 lines
82 KiB
CSS
4945 lines
82 KiB
CSS
/* General */
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
background: var(--secondary-bg);
|
|
font-family: var(--font), emojiFont;
|
|
color: var(--primary-text);
|
|
overflow: hidden; /* avoid "bounce" */
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
#page {
|
|
height: 100svh;
|
|
background: var(--primary-bg);
|
|
}
|
|
.emojiJoin {
|
|
background: var(--green);
|
|
margin-top: 6px;
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--green), 20% white);
|
|
}
|
|
}
|
|
.mutFriends {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.createdWebhook {
|
|
flex-grow: 1;
|
|
background: var(--primary-bg);
|
|
margin-bottom: 6px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.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 !important;
|
|
height: 0.5in !important;
|
|
margin-right: 0.15in !important;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.adminList {
|
|
width: 95%;
|
|
background: var(--secondary-bg);
|
|
padding: 6px;
|
|
margin-bottom: 6px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.flexttb {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.flexltr {
|
|
span {
|
|
margin-right: 4px;
|
|
text-wrap: nowrap;
|
|
background: var(--primary-bg);
|
|
padding: 2px;
|
|
border-radius: 3px;
|
|
margin-bottom: 4px;
|
|
}
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
}
|
|
.buttonDanger {
|
|
--interColor: var(--red);
|
|
}
|
|
.buttonSuccess {
|
|
--interColor: var(--green);
|
|
}
|
|
.buttonLink {
|
|
--interColor: var(--button-bg);
|
|
}
|
|
.buttonPrimary {
|
|
--interColor: var(--primary-button-bg);
|
|
}
|
|
.buttonPremium {
|
|
--interColor: purple;
|
|
}
|
|
.buttonSecondary {
|
|
--interColor: var(--button-bg);
|
|
}
|
|
.interButton {
|
|
background: var(--interColor);
|
|
margin-right: 4px;
|
|
}
|
|
.interButton:hover {
|
|
background: color-mix(in srgb, var(--interColor), black 30%);
|
|
}
|
|
|
|
.compAppStatus {
|
|
padding-left: 50px;
|
|
opacity: 0.6;
|
|
font-size: 12px;
|
|
&.failed {
|
|
color: var(--red);
|
|
}
|
|
}
|
|
.dmline {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 14px;
|
|
}
|
|
.commandinput {
|
|
display: inline-flex !important;
|
|
width: fit-content;
|
|
margin-left: 6px;
|
|
align-items: center;
|
|
background: var(--primary-bg);
|
|
padding-left: 4px;
|
|
border-radius: 4px;
|
|
input {
|
|
padding: 5px !important;
|
|
margin: 0px !important;
|
|
margin-left: 5px !important;
|
|
height: 100%;
|
|
field-sizing: content;
|
|
}
|
|
}
|
|
.flexltr {
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
.sessionDiv {
|
|
padding: 8px;
|
|
background: #00000040;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.trustedDomain {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #00000026;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
justify-content: space-between;
|
|
}
|
|
.ephemeralDiv {
|
|
padding-left: 50px;
|
|
opacity: 0.6;
|
|
span {
|
|
padding-right: 6px;
|
|
}
|
|
font-size: 13px;
|
|
}
|
|
.traceBars {
|
|
height: 30px;
|
|
}
|
|
#recentBlog {
|
|
padding-top: 12px;
|
|
gap: 12px;
|
|
}
|
|
#chatArea {
|
|
display: flex;
|
|
min-width: 40%;
|
|
}
|
|
.flexttb {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.mediaDisp {
|
|
> * {
|
|
height: 150px;
|
|
margin-bottom: 4px;
|
|
> * {
|
|
height: 150px !important;
|
|
margin-right: 4px;
|
|
border-radius: 6px;
|
|
img {
|
|
height: 150px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.messageComps {
|
|
> .flexltr {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
.reactionList {
|
|
div {
|
|
padding: 10px;
|
|
font-size: 18px;
|
|
margin: 3px 0px;
|
|
background: var(--secondary-bg);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
:first-child {
|
|
margin-right: 4px;
|
|
}
|
|
&.current {
|
|
background: color-mix(in srgb, var(--secondary-bg) 60%, var(--black));
|
|
}
|
|
}
|
|
margin-right: 4px;
|
|
}
|
|
.reactionUserList {
|
|
div {
|
|
margin: 3px;
|
|
.pfp {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
border-left: solid var(--secondary-bg) 2px;
|
|
padding-left: 6px;
|
|
}
|
|
.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);
|
|
z-index: 1;
|
|
}
|
|
.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;
|
|
min-width: 60%;
|
|
}
|
|
.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;
|
|
aspect-ratio: 3/2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
cursor: unset;
|
|
}
|
|
video {
|
|
position: absolute;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
.voiceUsers:has(.bigBox) > * {
|
|
width: 220px;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.bigBox {
|
|
width: min(80%, 600px) !important;
|
|
height: unset;
|
|
margin: 0 calc((100% - min(80%, 600px)) / 2);
|
|
}
|
|
|
|
.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;
|
|
z-index: 1;
|
|
|
|
* {
|
|
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;
|
|
}
|
|
#inviteBanner {
|
|
img {
|
|
height: 30vh;
|
|
width: 80vw;
|
|
object-fit: cover;
|
|
margin: -24px;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
h2:empty {
|
|
display: none;
|
|
}
|
|
.title {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
.cunread {
|
|
> button > .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 {
|
|
samp {
|
|
color: var(--link);
|
|
background: color-mix(in srgb, var(--code-bg), black);
|
|
}
|
|
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;
|
|
padding: 1px;
|
|
border-radius: 2px;
|
|
}
|
|
video {
|
|
max-height: 100%;
|
|
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);
|
|
}
|
|
.discoverButton {
|
|
width: calc(100% - 10px);
|
|
text-align: center;
|
|
margin: 5px;
|
|
box-sizing: border-box;
|
|
background: #00000029;
|
|
padding: 10px;
|
|
&.selected {
|
|
background: #00000050;
|
|
}
|
|
}
|
|
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;
|
|
margin-top: 4px;
|
|
}
|
|
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;
|
|
}
|
|
.fancySelect {
|
|
position: relative;
|
|
padding: 6px;
|
|
background: var(--text-input-bg);
|
|
border-radius: 6px;
|
|
flex-shrink: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
width: fit-content;
|
|
flex-grow: 1;
|
|
|
|
> input {
|
|
padding: 0px !important;
|
|
width: fit-content !important;
|
|
min-width: 96px;
|
|
flex-grow: 1;
|
|
}
|
|
.selected {
|
|
padding: 2px;
|
|
background: var(--blue);
|
|
border-radius: 4px;
|
|
cursor: default;
|
|
user-select: all;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 5px;
|
|
|
|
span {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
display: block;
|
|
background: var(--primary-text);
|
|
margin: 0 3px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.fancyOptions {
|
|
position: absolute;
|
|
bottom: calc(100% + 5px);
|
|
background: var(--secondary-bg);
|
|
padding: 5px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
> div {
|
|
padding: 5px;
|
|
&:hover {
|
|
background-color: #00000061;
|
|
}
|
|
margin-top: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
border-radius: 6px;
|
|
p {
|
|
font-size: 14px;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
input {
|
|
margin-left: auto;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
z-index: 1;
|
|
animation-duration: 0.2s;
|
|
animation-name: fade-in-back;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-out;
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
left: 0;
|
|
|
|
&.removeElm {
|
|
animation-name: fade-in-back-out;
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
::placeholder {
|
|
color: color-mix(in srgb, var(--primary-text-soft), transparent);
|
|
}
|
|
: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;
|
|
background: none !important;
|
|
}
|
|
.pfp,
|
|
.replypfp {
|
|
display: block;
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.leftArrow {
|
|
z-index: 1;
|
|
width: 42px;
|
|
height: 42px;
|
|
display: block;
|
|
background: var(--primary-text-soft);
|
|
position: absolute;
|
|
top: calc(50% - 42px);
|
|
left: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.rightArrow {
|
|
z-index: 1;
|
|
width: 42px;
|
|
height: 42px;
|
|
display: block;
|
|
background: var(--primary-text-soft);
|
|
position: absolute;
|
|
top: calc(50% - 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-crown {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: var(--yellow) !important;
|
|
mask: url(./icons/crown.svg);
|
|
mask-size: cover !important;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
margin-left: -2px !important;
|
|
}
|
|
.svg-history {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--primary-text-soft);
|
|
mask: url(./icons/history.svg);
|
|
mask-size: cover !important;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: var(--black);
|
|
}
|
|
}
|
|
.svg-timeout {
|
|
mask: url(./icons/timeout.svg);
|
|
width: 16px;
|
|
height: 16px;
|
|
mask-size: cover !important;
|
|
background: var(--red);
|
|
margin-left: 6px;
|
|
margin-right: -2px;
|
|
}
|
|
.svg-folder {
|
|
mask: url(./icons/folder.svg);
|
|
background-color: var(--folder-color, var(--accent-color));
|
|
mask-size: contain !important;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
.messageimgdiv:hover {
|
|
.svg-gifstar {
|
|
top: 4px;
|
|
}
|
|
}
|
|
.svg-gifstar {
|
|
mask: url(./icons/gifstar.svg);
|
|
mask-size: contain !important;
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
top: -30px;
|
|
right: 5px;
|
|
transition: top 0.2s;
|
|
transition-timing-function: ease-in;
|
|
background: white;
|
|
cursor: pointer;
|
|
&.favorited {
|
|
background: yellow;
|
|
}
|
|
}
|
|
.visually-hidden {
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
white-space: pre-wrap;
|
|
width: 1px;
|
|
}
|
|
.svg-stream {
|
|
mask: url(./icons/stream.svg);
|
|
mask-size: contain !important;
|
|
background: var(--primary-text);
|
|
}
|
|
.svg-select {
|
|
mask: url(./icons/select.svg);
|
|
mask-size: contain !important;
|
|
background: var(--primary-text);
|
|
}
|
|
.svg-noSelect {
|
|
mask: url(./icons/noSelect.svg);
|
|
mask-size: contain !important;
|
|
background: var(--primary-text);
|
|
}
|
|
.svg-stopstream {
|
|
mask: url(./icons/stopstream.svg);
|
|
mask-size: contain !important;
|
|
background-color: var(--red);
|
|
}
|
|
.svg-video {
|
|
mask: url(./icons/video.svg);
|
|
mask-size: contain !important;
|
|
background: var(--primary-text);
|
|
}
|
|
.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);
|
|
mask-size: contain !important;
|
|
}
|
|
.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);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-soundMore {
|
|
mask: url(./icons/soundMore.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-play {
|
|
mask: url(./icons/play.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-pause {
|
|
mask: url(./icons/pause.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-announce {
|
|
mask: url(./icons/announce.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-emoji {
|
|
mask: url(./icons/emoji.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-gif {
|
|
mask: url(./icons/gif.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-edit {
|
|
mask: url(./icons/edit.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-reply {
|
|
mask: url(./icons/reply.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-delete {
|
|
mask: url(./icons/delete.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-category {
|
|
mask: url(./icons/category.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-intoMenu {
|
|
mask: url(./icons/intoMenu.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-leftArrow {
|
|
mask: url(./icons/leftArrow.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-channel {
|
|
mask: url(./icons/channel.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-forum {
|
|
mask: url(./icons/forum.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-forumnsfw {
|
|
mask: url(./icons/forumnsfw.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-copy {
|
|
mask: url(./icons/copy.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-explore {
|
|
mask: url(./icons/explore.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-home {
|
|
mask: url(./icons/home.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-settings {
|
|
mask: url(./icons/settings.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-voice {
|
|
mask: url(./icons/voice.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-plus {
|
|
mask: url(./icons/plus.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-upload {
|
|
mask: url(./icons/upload.svg);
|
|
mask-size: contain !important;
|
|
width: 0.2in !important;
|
|
cursor: pointer;
|
|
}
|
|
.svg-x {
|
|
mask: url(./icons/x.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-update {
|
|
mask: url(./icons/update.svg);
|
|
mask-size: cover !important;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
margin-right: 0 !important;
|
|
background: var(--update) !important;
|
|
cursor: pointer;
|
|
}
|
|
.svg-friends {
|
|
mask: url(./icons/friends.svg);
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
margin-right: 0 !important;
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-frmessage {
|
|
mask: url(./icons/frmessage.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-addfriend {
|
|
mask: url(./icons/addfriend.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
|
|
.svg-channelnsfw {
|
|
mask: url(./icons/channelnsfw.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-announcensfw {
|
|
mask: url(./icons/announcensfw.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
.svg-voicensfw {
|
|
mask: url(./icons/voicensfw.svg);
|
|
mask-size: contain !important;
|
|
}
|
|
|
|
.svgicon {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: var(--primary-text-soft);
|
|
mask-repeat: no-repeat;
|
|
aspect-ratio: 1/1;
|
|
flex-shrink: 0;
|
|
color: transparent;
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
.forumIcon {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.forumHead {
|
|
width: calc(100% - 12px);
|
|
background: var(--dock-bg);
|
|
padding: 6px;
|
|
margin: 6px;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
flex: 0;
|
|
min-height: fit-content;
|
|
height: max-content;
|
|
flex-shrink: 0;
|
|
/* overflow: clip; */
|
|
|
|
> .flexltr {
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
.editMessage {
|
|
margin-top: 6px;
|
|
}
|
|
.searchOptions {
|
|
top: 32px;
|
|
bottom: unset;
|
|
}
|
|
.forumTagSelect {
|
|
margin-top: 6px;
|
|
> * {
|
|
margin-left: 0px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
}
|
|
.newPostForumButton {
|
|
width: 100px;
|
|
height: 34px;
|
|
padding: 6px;
|
|
transition:
|
|
width 0.15s,
|
|
padding 0.15s;
|
|
overflow: clip;
|
|
text-overflow: clip;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
.forumHead:has(input:placeholder-shown) {
|
|
.newPostForumButton {
|
|
width: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
.forumBody {
|
|
height: 100%;
|
|
}
|
|
.forumList {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
}
|
|
.allTagButton {
|
|
margin-left: auto;
|
|
}
|
|
.forumSortRow {
|
|
flex-shrink: 0;
|
|
padding: 4px 12px;
|
|
align-items: center;
|
|
}
|
|
.forumTagSelect {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
overflow-y: clip;
|
|
min-height: fit-content;
|
|
|
|
> * {
|
|
margin-left: 6px;
|
|
}
|
|
.selected {
|
|
background: #ffffff5e;
|
|
}
|
|
}
|
|
.forumTag {
|
|
padding: 3px;
|
|
background: #ffffff21;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.forumPostError {
|
|
color: var(--red);
|
|
}
|
|
.forumPostBody {
|
|
background: var(--secondary-bg);
|
|
margin: 4px 12px;
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
> * {
|
|
margin-bottom: 4px;
|
|
}
|
|
cursor: pointer;
|
|
}
|
|
.forumButtonRow {
|
|
flex-shrink: 0;
|
|
mix-height: fit-content;
|
|
padding: 12px;
|
|
button {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.forumMessageRow {
|
|
.svg-frmessage {
|
|
width: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.msep {
|
|
margin: 6px;
|
|
background: #000000de;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 100%;
|
|
}
|
|
.forumSearch {
|
|
margin-left: 3px;
|
|
background: transparent !important;
|
|
}
|
|
.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;
|
|
pointer-events: none;
|
|
animation-duration: 0.1s;
|
|
animation-name: fade-in-hover;
|
|
animation-timing-function: ease-out;
|
|
border: solid 0.03in var(--dock-bg);
|
|
z-index: 200;
|
|
}
|
|
@keyframes fade-in-hover {
|
|
0% {
|
|
opacity: 0;
|
|
user-select: none;
|
|
}
|
|
0.1% {
|
|
opacity: 0;
|
|
transform: scale(0.9) translateY(-10px);
|
|
user-select: none;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.errorHTML {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100vh;
|
|
justify-content: center;
|
|
align-content: center;
|
|
h3 {
|
|
margin-bottom: 15px;
|
|
}
|
|
> div {
|
|
background: var(--primary-bg);
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
height: 60%;
|
|
width: 60%;
|
|
box-shadow: 5px 5px 5px black;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
> div {
|
|
padding: 10px;
|
|
box-shadow: 0px 0px 5px black;
|
|
border-radius: 10px;
|
|
margin-top: auto;
|
|
}
|
|
}
|
|
img {
|
|
background: var(--primary-bg);
|
|
padding: 10px;
|
|
border-radius: 10px 10px 0 0;
|
|
box-shadow: 5px 5px 5px black;
|
|
}
|
|
}
|
|
.editMessage {
|
|
background: var(--typebox-bg);
|
|
padding: 0.05in;
|
|
border-radius: 0.04in;
|
|
white-space: preserve-breaks;
|
|
}
|
|
#gimmefile {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #00000070;
|
|
top: 0px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 99;
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
.commandError {
|
|
position: absolute;
|
|
top: -36px;
|
|
left: 34px;
|
|
z-index: 1;
|
|
background: var(--red);
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
&.removeElm {
|
|
animation-duration: 4s;
|
|
animation-name: errorElm;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
}
|
|
@keyframes errorElm {
|
|
100%,
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
5%,
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
/* 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;
|
|
box-shadow: 1px 1px 15px 0px black;
|
|
|
|
&.moreShadow {
|
|
box-shadow: 1px 1px 20px 10px black;
|
|
}
|
|
}
|
|
|
|
.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: 110;
|
|
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;
|
|
position: absolute;
|
|
background: var(--primary-bg);
|
|
z-index: 3;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#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;
|
|
}
|
|
.folder-icon-div {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: var(--folder-bg);
|
|
border-radius: 16px;
|
|
margin: 2px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.folder-div {
|
|
background: color-mix(in srgb, var(--primary-text-soft), 70% transparent);
|
|
padding: 3px;
|
|
margin: -3px;
|
|
border-radius: 16px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.guilds-div-folder {
|
|
transition: height 0.2s;
|
|
}
|
|
/* 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;
|
|
top: 0px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.threads {
|
|
button {
|
|
position: relative;
|
|
}
|
|
button::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: calc(50% - 1px);
|
|
width: 3px;
|
|
border-bottom: 2px solid var(--reply-line);
|
|
border-left: 2px solid var(--reply-line);
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
button::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
height: calc(50% - 1px);
|
|
width: 3px;
|
|
border-top: 2px solid var(--reply-line);
|
|
border-left: 2px solid var(--reply-line);
|
|
border-top-left-radius: 8px;
|
|
}
|
|
}
|
|
.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;
|
|
&.muted {
|
|
span {
|
|
color: color-mix(in srgb, var(--primary-text-soft), transparent);
|
|
&.svgicon {
|
|
background: color-mix(in srgb, var(--primary-text-soft), transparent);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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: 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;
|
|
}
|
|
.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: 3px 8px;
|
|
border-radius: 4px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
margin-bottom: 4px;
|
|
transition: background 0.2s;
|
|
&.viewChannel,
|
|
&.viewChannel:hover {
|
|
background: var(--channel-selected);
|
|
color: var(--primary-text-prominent);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.memberListStyle {
|
|
span {
|
|
font-size: 0.9rem;
|
|
margin-left: 4px;
|
|
font-weight: 600;
|
|
color: transparent;
|
|
background-clip: text, border-box;
|
|
position: relative;
|
|
background-image: var(--userbg, linear-gradient(var(--primary-text)));
|
|
}
|
|
}
|
|
.liststyle .statusDiv {
|
|
right: -1px;
|
|
bottom: -1px;
|
|
}
|
|
.liststyle:hover {
|
|
background: var(--channel-hover);
|
|
color: var(--primary-text-prominent);
|
|
}
|
|
#channels .liststyle {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Dock */
|
|
#VoiceBox {
|
|
margin: 2px 0;
|
|
background: var(--dock-bg);
|
|
div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
#VoiceStatus {
|
|
padding: 8px;
|
|
font-weight: bold;
|
|
padding-bottom: 2px;
|
|
}
|
|
#VoiceStatus:empty {
|
|
padding: 0;
|
|
}
|
|
#VoiceButtons:empty {
|
|
padding: 0;
|
|
height: 0;
|
|
}
|
|
#VoiceButtons {
|
|
height: 46px;
|
|
display: flex;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
|
|
div {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--primary-bg);
|
|
margin: 6px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
span {
|
|
height: 24px;
|
|
width: 24px;
|
|
display: block;
|
|
}
|
|
transition: background 0.1s;
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--primary-bg), 20% var(--primary-text));
|
|
}
|
|
}
|
|
}
|
|
|
|
#VoiceGuild {
|
|
padding-left: 8px;
|
|
font-weight: bold;
|
|
padding-bottom: 4px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
width: fit-content;
|
|
span {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
#VoiceGuild:hover {
|
|
text-decoration: underline;
|
|
}
|
|
#VoiceGuild: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;
|
|
}
|
|
#scrollWrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
}
|
|
#channelw {
|
|
flex: 1;
|
|
/* max-height: fit-content; */
|
|
flex-basis: auto;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
.scroller {
|
|
flex: 1;
|
|
padding-bottom: 22px;
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 1;
|
|
max-height: fit-content;
|
|
> * {
|
|
flex: 0;
|
|
}
|
|
}
|
|
#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;
|
|
}
|
|
|
|
#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;
|
|
overflow: clip;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
.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;
|
|
}
|
|
#replybox:not(:empty) ~ #typediv .outerTypeBox {
|
|
border-top-right-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
#realbox {
|
|
padding: 0 16px 28px 16px;
|
|
position: relative;
|
|
}
|
|
.commandFront {
|
|
user-select: none !important;
|
|
padding: 4px;
|
|
background: var(--secondary-bg);
|
|
border-radius: 4px;
|
|
}
|
|
#typebox {
|
|
position: relative;
|
|
margin: -10px 0px;
|
|
flex-grow: 1;
|
|
width: 1px;
|
|
margin-left: 0.06in;
|
|
white-space: preserve-breaks;
|
|
flex-shrink: 1;
|
|
text-wrap: auto;
|
|
overflow-y: auto;
|
|
margin-right: 0.03in;
|
|
padding: 10px 0;
|
|
}
|
|
#typebox:not([contenteditable="false"]):empty:before,
|
|
#typebox:not([contenteditable="false"]):has(span:only-child:empty):before {
|
|
content: var(--channel-text);
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
cursor: text;
|
|
}
|
|
.outerTypeBox {
|
|
max-height: 50svh;
|
|
padding: 10px 10px;
|
|
background: var(--typebox-bg);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: relative;
|
|
}
|
|
|
|
.searchBox:empty {
|
|
width: 2in;
|
|
}
|
|
.searchBox:empty::after {
|
|
content: var(--hint-text);
|
|
color: var(--primary-text-soft);
|
|
position: absolute;
|
|
top: 4px;
|
|
cursor: text;
|
|
}
|
|
.searchBox {
|
|
white-space: nowrap;
|
|
height: 0.075in;
|
|
padding: 4px 10px 16px 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;
|
|
}
|
|
.titlespace {
|
|
margin-bottom: 20px;
|
|
}
|
|
.messagediv {
|
|
position: relative;
|
|
}
|
|
.messagediv:not(.topMessage):hover::after {
|
|
content: var(--time-text);
|
|
position: absolute;
|
|
color: #ffffffb8;
|
|
left: 2px;
|
|
top: 5px;
|
|
font-size: 12px;
|
|
}
|
|
.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;
|
|
}
|
|
.displayComp {
|
|
padding: 12px;
|
|
background: var(--embed-bg);
|
|
border-radius: 4px;
|
|
border-left: solid var(--accent-color, black);
|
|
}
|
|
.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%;
|
|
overflow: clip;
|
|
position: relative;
|
|
}
|
|
|
|
.commentrow:hover::after {
|
|
background: var(--secondary-hover);
|
|
}
|
|
.fileinputdiv > div {
|
|
width: 64px;
|
|
height: 64px;
|
|
object-fit: contain;
|
|
background: var(--secondary-bg);
|
|
border-radius: 16px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 64px;
|
|
height: 64px;
|
|
object-fit: contain;
|
|
border-radius: 16px;
|
|
}
|
|
&.pfp {
|
|
border-radius: 50%;
|
|
overflow: clip;
|
|
}
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
span {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.username {
|
|
font-weight: bold;
|
|
word-break: break-all;
|
|
cursor: pointer;
|
|
color: transparent;
|
|
background-clip: text, border-box;
|
|
position: relative;
|
|
background-image: var(--userbg, linear-gradient(var(--primary-text), var(--primary-text)));
|
|
}
|
|
.roleIcon {
|
|
display: inline-block;
|
|
padding: 1px;
|
|
margin-left: 3px;
|
|
cursor: default;
|
|
width: 20px;
|
|
height: 20px;
|
|
object-fit: contain;
|
|
align-self: center;
|
|
}
|
|
.userwrap {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
.pinText {
|
|
cursor: pointer;
|
|
}
|
|
.pinText:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.username:hover:after {
|
|
text-decoration: underline;
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 1px;
|
|
background-image: inherit;
|
|
left: 0;
|
|
bottom: 1px;
|
|
}
|
|
.bot {
|
|
padding: 2px 5px;
|
|
margin-left: 4px;
|
|
background: color-mix(in srgb, var(--accent-color) 75%, transparent) !important;
|
|
font-size: 0.75em !important;
|
|
font-weight: bold;
|
|
color: var(--primary-text-prominent) !important;
|
|
border-radius: 4px;
|
|
flex-grow: 0;
|
|
width: fit-content;
|
|
background-clip: border-box !important;
|
|
align-self: center;
|
|
}
|
|
.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%;
|
|
}
|
|
.profile .avDec {
|
|
width: 110%;
|
|
height: 110%;
|
|
top: 1px;
|
|
left: 1px;
|
|
}
|
|
input[type="search"]:read-only {
|
|
cursor: not-allowed;
|
|
color: var(--secondary-text-soft);
|
|
}
|
|
.avDec {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
width: 125%;
|
|
height: 125%;
|
|
top: -5px;
|
|
left: -5px;
|
|
max-width: 150% !important;
|
|
}
|
|
.timestamp {
|
|
flex: none;
|
|
margin-left: 6px;
|
|
font-size: 0.75em;
|
|
color: var(--primary-text-soft);
|
|
}
|
|
.spoiler {
|
|
background: var(--spoiler-bg);
|
|
color: var(--spoiler-bg);
|
|
cursor: pointer;
|
|
a {
|
|
color: var(--spoiler-bg);
|
|
}
|
|
}
|
|
.spoiler:hover {
|
|
background: var(--spoiler-hover);
|
|
color: var(--spoiler-hover);
|
|
}
|
|
.unspoiled {
|
|
color: var(--spoiler-text);
|
|
}
|
|
a.unspoiled {
|
|
color: var(--link) !important;
|
|
}
|
|
.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: baseline;
|
|
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;
|
|
align-self: center;
|
|
}
|
|
.replyflex .username {
|
|
flex: none;
|
|
max-width: calc(100% - 75px);
|
|
}
|
|
.replytext {
|
|
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 > button,
|
|
.mentioned.messagediv {
|
|
background: color-mix(in srgb, var(--mention-highlight) 10%, transparent);
|
|
border-color: var(--mention-highlight);
|
|
}
|
|
.mentioned:hover > button {
|
|
background: color-mix(in srgb, var(--mention-highlight) 10%, var(--primary-hover));
|
|
}
|
|
#slideCount {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 10px;
|
|
width: calc(100% - 30px);
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
div {
|
|
padding: 3px;
|
|
margin: 2px;
|
|
cursor: pointer;
|
|
&.selected {
|
|
span {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
span {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: white;
|
|
display: block;
|
|
opacity: 0.5;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
.screenshots {
|
|
width: calc(100% - 10px);
|
|
margin: 5px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
transition: opacity 0.4s;
|
|
&.hidden {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
#ScreenshotSlides {
|
|
position: relative;
|
|
aspect-ratio: 1.9;
|
|
}
|
|
.mentionMD {
|
|
color: transparent;
|
|
background-clip: text;
|
|
padding: 1px 2px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
background-image: var(--userbg, linear-gradient(var(--primary-text), var(--primary-text)));
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.mentionMD::before {
|
|
background: color-mix(in srgb, var(--mention), transparent);
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0px;
|
|
z-index: -1;
|
|
border-radius: 4px;
|
|
}
|
|
.mentionMD:hover::before {
|
|
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;
|
|
|
|
> p {
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.linkembed {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.embed-color {
|
|
max-width: fit-content;
|
|
margin-top: 4px;
|
|
border-radius: 4px;
|
|
width: 400px;
|
|
}
|
|
.embed-color .embed {
|
|
margin-left: 4px;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
.embed .embedtitle {
|
|
display: inline-block;
|
|
padding-bottom: 4px;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
.embed .provider {
|
|
padding-bottom: 4px;
|
|
color: var(--secondary-text-soft);
|
|
}
|
|
.rich-embed {
|
|
width: unset;
|
|
.embed {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
.slowmodeTimer {
|
|
position: absolute;
|
|
right: 16px;
|
|
color: var(--primary-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;
|
|
margin-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;
|
|
width: 400px;
|
|
}
|
|
.inviteEmbed .flexltr {
|
|
padding: 12px;
|
|
gap: 8px;
|
|
z-index: 2;
|
|
padding-top: 24px;
|
|
}
|
|
.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;
|
|
z-index: 4;
|
|
}
|
|
#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);
|
|
.flexttb {
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
.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: 102;
|
|
|
|
animation-duration: 0.2s;
|
|
animation-name: context-fade-in;
|
|
animation-timing-function: ease-out;
|
|
|
|
hr {
|
|
width: 90%;
|
|
height: 1px;
|
|
}
|
|
}
|
|
.removeElm {
|
|
pointer-events: none;
|
|
}
|
|
.contextmenu.removeElm {
|
|
animation-name: context-fade-out;
|
|
}
|
|
@keyframes context-fade-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes context-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
&:not(.hypoprofile) {
|
|
animation-duration: 0.2s;
|
|
animation-name: fade-in;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: cubic-bezier(0.28, 0.48, 0.24, 1.27);
|
|
}
|
|
input {
|
|
width: calc(100% - 20px);
|
|
margin: 0px 10px;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
background: var(--secondary-bg);
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
@keyframes fade-in {
|
|
0% {
|
|
transform: translateY(30px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.hypoprofile {
|
|
position: relative;
|
|
min-height: 350px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.profile .pfpDiv {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 20px;
|
|
}
|
|
.profile .pfp {
|
|
height: 64px;
|
|
width: 64px;
|
|
margin: 8px 0 0 8px;
|
|
cursor: pointer;
|
|
}
|
|
.statusDiv {
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
height: 8px;
|
|
width: 8px;
|
|
background: var(--black);
|
|
border: 2.5px solid var(--black);
|
|
border-radius: 8px;
|
|
transition: width 0.5s;
|
|
}
|
|
.profile .statusDiv {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.onlinestatus {
|
|
background: var(--green);
|
|
}
|
|
.typingstatus {
|
|
width: 16px;
|
|
&::before {
|
|
content: " ";
|
|
background: white;
|
|
height: 4px;
|
|
width: 4px;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 1px;
|
|
border-radius: 100%;
|
|
animation: fade 1s infinite;
|
|
}
|
|
&::after {
|
|
content: " ";
|
|
background: white;
|
|
height: 4px;
|
|
width: 4px;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 1px;
|
|
border-radius: 100%;
|
|
animation: fade 1s infinite;
|
|
animation-delay: 0.33s;
|
|
}
|
|
div {
|
|
background: white;
|
|
height: 4px;
|
|
width: 4px;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 6px;
|
|
border-radius: 100%;
|
|
animation: fade 1s infinite;
|
|
animation-delay: 0.66s;
|
|
}
|
|
}
|
|
.dndstatus {
|
|
background: var(--red);
|
|
}
|
|
.offlinestatus {
|
|
background: var(--primary-bg);
|
|
}
|
|
.banner {
|
|
height: 100px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
position: absolute !important;
|
|
/* z-index: 2; */
|
|
}
|
|
.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;
|
|
padding-top: 30px;
|
|
z-index: 1;
|
|
}
|
|
.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;
|
|
}
|
|
ul {
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.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: 104;
|
|
|
|
input {
|
|
width: 1in;
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 2px;
|
|
transition: width 0.2s;
|
|
background: var(--card-bg);
|
|
}
|
|
}
|
|
.emojiPicker,
|
|
.gifmenu,
|
|
.stickerPicker {
|
|
animation-duration: 0.2s;
|
|
animation-name: fade-in-back;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-out;
|
|
&.removeElm {
|
|
animation-name: fade-in-back-out;
|
|
}
|
|
}
|
|
.stickerSelect {
|
|
width: 1in;
|
|
height: 1in;
|
|
margin-right: 6px;
|
|
padding: 5px;
|
|
background: var(--secondary-bg);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
}
|
|
.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 {
|
|
contain-intrinsic-width: AUTO 100px;
|
|
position: fixed;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: color-mix(in srgb, var(--black) 75%, transparent);
|
|
backdrop-filter: blur(1px);
|
|
z-index: 102;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:not(.menu) {
|
|
animation-name: bg-fade;
|
|
}
|
|
animation-duration: 0.2s;
|
|
&.removeElm {
|
|
animation-name: bg-fade-out;
|
|
> * {
|
|
&.centeritem {
|
|
animation-name: fade-in-back-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
> * {
|
|
animation-duration: 0.2s;
|
|
animation-name: fade-in-back-settings;
|
|
&.centeritem {
|
|
animation-name: fade-in-back;
|
|
}
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
@keyframes bg-fade-out {
|
|
0% {
|
|
background: color-mix(in srgb, var(--black) 75%, transparent);
|
|
backdrop-filter: blur(1px);
|
|
}
|
|
100% {
|
|
background: transparent;
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
}
|
|
@keyframes bg-fade {
|
|
0% {
|
|
background: transparent;
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
100% {
|
|
background: color-mix(in srgb, var(--black) 75%, transparent);
|
|
backdrop-filter: blur(1px);
|
|
}
|
|
}
|
|
@keyframes fade-in-back-settings {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.bgRemove {
|
|
animation-duration: 0.2s;
|
|
animation-name: bg-out;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
@keyframes bg-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
@keyframes fade-in-back-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
backdrop-filter: blur(0px);
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
@keyframes fade-in-back {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
1% {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.imgfit {
|
|
max-height: 85svh;
|
|
max-width: 85svw;
|
|
display: flex;
|
|
|
|
img {
|
|
flex-shrink: 1;
|
|
height: auto;
|
|
max-width: inherit;
|
|
width: auto;
|
|
max-height: inherit;
|
|
}
|
|
}
|
|
.centeritem.profile {
|
|
width: 80%;
|
|
height: 80%;
|
|
}
|
|
.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;
|
|
margin-bottom: 10px;
|
|
}
|
|
.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: 111;
|
|
}
|
|
.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;
|
|
}
|
|
#typediv[style*="hidden"] {
|
|
height: 0px;
|
|
}
|
|
.guildy {
|
|
gap: 6px;
|
|
height: 100%;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
#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;
|
|
position: relative;
|
|
.banner {
|
|
position: relative !important;
|
|
}
|
|
}
|
|
.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;
|
|
/* pointer-events: none; */
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.Buttons {
|
|
flex: 1;
|
|
width: inherit;
|
|
}
|
|
.settingbuttons.flexltr {
|
|
width: 100%;
|
|
border-right: 0;
|
|
border-radius: 0.04in;
|
|
.SettingsButton {
|
|
width: auto;
|
|
border-radius: 3px 3px 1px 1px;
|
|
}
|
|
}
|
|
.reportMenu {
|
|
background: var(--primary-bg);
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
box-shadow: 1px 2px 5px 2px black;
|
|
width: 70%;
|
|
height: 70%;
|
|
overflow-y: auto;
|
|
> div {
|
|
> * {
|
|
margin-bottom: 4px;
|
|
}
|
|
min-height: 100%;
|
|
}
|
|
}
|
|
.removeElm {
|
|
> .reportMenu {
|
|
animation-duration: 0.2s;
|
|
animation-name: fade-in-back;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-out;
|
|
animation-name: fade-in-back-out;
|
|
}
|
|
}
|
|
.checkCard {
|
|
padding: 2px;
|
|
background: #00000036;
|
|
margin: 2px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.reportButtonDiv {
|
|
flex-shrink: 0;
|
|
button {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
.reportChildren {
|
|
margin-top: auto;
|
|
height: fit-content;
|
|
|
|
button {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.roleButtonStyle {
|
|
color: transparent;
|
|
background-image: var(
|
|
--user-bg,
|
|
linear-gradient(var(--primary-text-soft), var(--primary-text-soft))
|
|
);
|
|
background-clip: text;
|
|
}
|
|
.SettingsButton {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
color: var(--primary-text-soft);
|
|
border: none;
|
|
transition: background 0.1s;
|
|
position: relative;
|
|
}
|
|
.infosection {
|
|
.activeSetting {
|
|
border-bottom: white solid 1px;
|
|
}
|
|
}
|
|
.activeSetting {
|
|
background: var(--secondary-hover);
|
|
}
|
|
.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;
|
|
}
|
|
|
|
@keyframes fade-shrink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
@keyframes fade-grow-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
1% {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.EmojiGuildMenu.removeElm {
|
|
animation-duration: 0.2s;
|
|
animation-name: fade-shrink;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
.titlediv {
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
> flexspace {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.flexspace {
|
|
padding-bottom: 32px;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.traceHead {
|
|
cursor: pointer;
|
|
border-bottom: black solid 4px;
|
|
}
|
|
.traceDiv {
|
|
padding: 5px 10px;
|
|
}
|
|
.traceBars {
|
|
padding: 10px 0px;
|
|
}
|
|
.mutGuildBox {
|
|
background: var(--primary-bg);
|
|
padding: 6px;
|
|
cursor: pointer;
|
|
margin-top: 6px;
|
|
|
|
img {
|
|
width: 48px !important;
|
|
height: 48px !important;
|
|
padding: 4px !important;
|
|
margin: 0px !important;
|
|
}
|
|
.flexttb {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
padding-left: 8px;
|
|
}
|
|
border-radius: 6px;
|
|
}
|
|
.dropDownTrace {
|
|
background: var(--primary-hover);
|
|
padding: 20px 10px;
|
|
border-radius: 10px;
|
|
border: black solid 4px;
|
|
}
|
|
.optionElement,
|
|
.FormSettings > button {
|
|
margin: 16px 16px 0 16px;
|
|
word-break: break-word;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
.permbox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.permbox > span {
|
|
padding: 6px;
|
|
margin: 4px;
|
|
background: var(--role-bg);
|
|
white-space: nowrap;
|
|
word-break: keep-all;
|
|
border-radius: 3px;
|
|
}
|
|
.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 {
|
|
max-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;
|
|
accent-color: var(--grey);
|
|
}
|
|
.tritoggle input:first-child {
|
|
accent-color: var(--green);
|
|
}
|
|
.tritoggle input:nth-child(3) {
|
|
accent-color: var(--red);
|
|
}
|
|
.nonimagecenter > .flexltr.savediv {
|
|
padding: 16px !important;
|
|
}
|
|
.savediv {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
padding: 16px !important;
|
|
background: var(--secondary-bg) !important;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
color: var(--secondary-text);
|
|
border-radius: 8px !important;
|
|
align-items: center;
|
|
box-shadow:
|
|
0 0 24px var(--shadow),
|
|
0 0 1px var(--primary-text);
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
}
|
|
.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;
|
|
}
|
|
.searchBox:empty::after {
|
|
content: "";
|
|
}
|
|
#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:not(.hideSearchDiv),
|
|
#sideContainDiv.searchDiv:not(.hideSearchDiv) {
|
|
right: 0;
|
|
overflow: auto;
|
|
}
|
|
#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;
|
|
}
|
|
.sticker {
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
#realbox,
|
|
#logindiv,
|
|
#pasteimg {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
#replybox {
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
.pinnedMessages {
|
|
box-sizing: border-box;
|
|
left: 8px;
|
|
width: calc(100% - 16px);
|
|
}
|
|
.contextmenu,
|
|
.profile,
|
|
.emojiPicker,
|
|
.stickerPicker,
|
|
.gifmenu {
|
|
top: unset !important;
|
|
bottom: 0 !important;
|
|
right: unset !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box;
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow:
|
|
0 0 14px var(--shadow),
|
|
0 0 28px var(--shadow);
|
|
}
|
|
.contextmenu hr {
|
|
width: calc(100% - 24px);
|
|
}
|
|
.contextbutton {
|
|
width: 100%;
|
|
padding: 12px;
|
|
.svgicon {
|
|
top: 10px;
|
|
right: 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);
|
|
}
|
|
.outerTypeBox:not(.noConent) {
|
|
#mobileSend {
|
|
width: 25px;
|
|
margin-left: 4px;
|
|
}
|
|
#buttonCol {
|
|
width: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#mobileSend {
|
|
cursor: pointer;
|
|
height: 25px;
|
|
margin: -3px 0px;
|
|
width: 0px;
|
|
transition:
|
|
width 0.2s,
|
|
margin-left 0.2s;
|
|
margin-left: 0px;
|
|
}
|
|
#buttonCol {
|
|
overflow: hidden;
|
|
width: 44px;
|
|
transition: width 0.2s;
|
|
}
|
|
.settingsHTMLArea {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.friendcontainer {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0.2in;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
align-items: stretch;
|
|
box-sizing: border-box;
|
|
|
|
> 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 1px var(--black);
|
|
border-radius: 0.05in;
|
|
z-index: 104;
|
|
span {
|
|
background: #00000042;
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
padding: 6px;
|
|
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;
|
|
z-index: 10000000;
|
|
}
|
|
@keyframes goout {
|
|
0%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
5%,
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.friendsbutton {
|
|
transition: background-color 0.2s;
|
|
padding: 0.08in;
|
|
}
|
|
.bigemoji {
|
|
width: 0.6in;
|
|
object-fit: contain;
|
|
height: 0.6in;
|
|
}
|
|
.bigemojiUni {
|
|
font-size: 47px;
|
|
}
|
|
.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: color-mix(in srgb, var(--card-bg) 60%, transparent);
|
|
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 {
|
|
background: var(--card-bg);
|
|
}
|
|
.vr-message {
|
|
border-right: 1px solid var(--black) !important;
|
|
}
|
|
.gifmenu .title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.searchGifBar,
|
|
.gifmenu .title {
|
|
height: 0.3in;
|
|
margin: 0.15in 0.15in 0 0.15in;
|
|
flex-shrink: 0;
|
|
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 0.2in;
|
|
padding: 0 0.1in;
|
|
span {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: var(--primary-text);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
.dragFolderView::before {
|
|
content: "";
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--green);
|
|
top: 12px;
|
|
left: -6px;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.blogDiv {
|
|
background: var(--secondary-bg);
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
div {
|
|
width: 100%;
|
|
h2 {
|
|
width: 100%;
|
|
border-bottom: solid var(--primary-text) 1px;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.emptyEmoji {
|
|
background: var(--primary-bg);
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 2in;
|
|
}
|
|
.stickerMArea {
|
|
padding-left: 48px;
|
|
}
|
|
.solidBackground {
|
|
background: var(--secondary-bg);
|
|
opacity: 1;
|
|
}
|
|
.EmojiGuildMenu {
|
|
position: absolute;
|
|
background: var(--dock-bg);
|
|
padding: 6px;
|
|
border-radius: 6px;
|
|
width: 350px;
|
|
animation-duration: 0.2s;
|
|
animation-name: fade-grow-in;
|
|
animation-timing-function: ease-out;
|
|
z-index: 1;
|
|
}
|
|
.GuildEmojiTop {
|
|
background: var(--primary-bg);
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
margin-bottom: 10px;
|
|
img {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.guildEmojiRow {
|
|
img {
|
|
margin-right: 8px;
|
|
margin-bottom: 0px;
|
|
flex-shrink: 0;
|
|
}
|
|
margin: 4px;
|
|
}
|
|
.guildEmojiText {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.optionElement:has(.friendGroupSelect) {
|
|
flex-shrink: 1;
|
|
overflow-y: scroll;
|
|
}
|
|
.friendGroupSelect {
|
|
> div {
|
|
padding: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
margin-right: 12px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
input,
|
|
button {
|
|
margin-left: auto;
|
|
}
|
|
input {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
}
|
|
}
|
|
.expandButtons {
|
|
.optionElement {
|
|
flex-grow: 1;
|
|
button {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.groupDmDiv {
|
|
position: relative;
|
|
width: 32px;
|
|
height: 32px;
|
|
img {
|
|
background: var(--channels-bg);
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
&:nth-child(1) {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
&:nth-child(2) {
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
&:nth-child(3) {
|
|
left: 0px;
|
|
bottom: 0px;
|
|
}
|
|
&:nth-child(4) {
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
&:nth-child(5) {
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sentdms .groupDmDiv {
|
|
background: transparent;
|
|
width: 48px;
|
|
height: 48px;
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
&:nth-child(1) {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
.guildPreview {
|
|
.banner {
|
|
position: relative !important;
|
|
margin-left: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
.icon {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.inviteBG {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.8;
|
|
}
|
|
.threadBox {
|
|
padding: 6px;
|
|
background: #00000063;
|
|
border-radius: 4px;
|
|
margin: 6px;
|
|
min-width: 300px;
|
|
width: fit-content;
|
|
margin-left: 50px;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -32px;
|
|
height: calc(100% - 8px);
|
|
width: 26px;
|
|
border-bottom: 2px solid var(--reply-line);
|
|
border-left: 2px solid var(--reply-line);
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
.clickable {
|
|
color: var(--link);
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
.embedImg {
|
|
max-width: 400px;
|
|
max-height: 400px;
|
|
border-radius: 3px;
|
|
}
|