* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
font-family:
Arial,
"Noto Sans KR",
sans-serif;
background: #313338;
color: #dbdee1;
}
/* =========================
공통
========================= */
.hidden {
display: none !important;
}
/* =========================
로그인
========================= */
.loginScreen {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background:
radial-gradient(
circle at 50% 20%,
#5865f2,
#36393f 45%,
#1e1f22
);
}
.loginBox {
width: 100%;
max-width: 430px;
padding: 35px;
border-radius: 12px;
background: #2b2d31;
box-shadow:
0 20px 60px #0008;
text-align: center;
}
.logo {
width: 70px;
height: 70px;
margin: 0 auto 15px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #5865f2;
color: white;
font-size: 32px;
font-weight: 900;
}
.loginBox h1 {
margin: 0;
color: white;
}
.loginBox p {
color: #949ba4;
margin:
8px 0 28px;
}
.loginBox label {
display: block;
text-align: left;
margin-bottom: 7px;
color: #b5bac1;
font-size: 12px;
font-weight: bold;
}
.loginBox input {
width: 100%;
height: 48px;
border: none;
outline: none;
border-radius: 6px;
padding: 0 14px;
background: #1e1f22;
color: white;
margin-bottom: 12px;
}
.loginBox input:focus {
outline:
2px solid #5865f2;
}
.loginBox button {
width: 100%;
height: 48px;
border: none;
border-radius: 6px;
background: #5865f2;
color: white;
font-weight: bold;
cursor: pointer;
}
.loginBox button:hover {
background: #4752c4;
}
.loginError {
min-height: 25px;
margin-top: 10px;
color: #f23f42;
font-size: 13px;
}
.loginBox small {
display: block;
margin-top: 15px;
color: #72767d;
}
/* =========================
클라이언트
========================= */
.clientScreen {
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
/* =========================
서버 바
========================= */
.serverBar {
width: 72px;
flex-shrink: 0;
padding: 12px;
background: #1e1f22;
overflow-y: auto;
}
.fuyuLogo {
width: 48px;
height: 48px;
margin-bottom: 12px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #5865f2;
color: white;
font-size: 20px;
font-weight: 900;
}
.server {
width: 48px;
height: 48px;
margin-bottom: 10px;
border-radius: 50%;
overflow: hidden;
background: #313338;
cursor: pointer;
transition: 0.15s;
}
.server:hover,
.server.active {
border-radius: 16px;
background: #5865f2;
}
.server img {
width: 100%;
height: 100%;
object-fit: cover;
}
.serverText {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
/* =========================
채널 바
========================= */
.channelBar {
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: #2b2d31;
}
.serverHeader {
height: 48px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
border-bottom:
1px solid #1f2023;
}
#online {
color: #23a55a;
}
.channelList {
flex: 1;
padding: 10px;
overflow-y: auto;
}
.channel {
height: 36px;
margin-bottom: 2px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 7px;
border-radius: 5px;
color: #949ba4;
cursor: pointer;
}
.channel:hover {
background: #35373c;
color: #dbdee1;
}
.channel.active {
background: #404249;
color: white;
}
.channelHash {
font-size: 20px;
}
/* =========================
봇 정보
========================= */
.botInfo {
height: 58px;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
background: #232428;
}
.botAvatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
background: #5865f2;
}
.botInfo div {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.botInfo strong {
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.botInfo small {
color: #23a55a;
font-size: 11px;
}
#logoutButton {
border: none;
background: transparent;
color: #949ba4;
font-size: 18px;
cursor: pointer;
}
#logoutButton:hover {
color: #ed4245;
}
/* =========================
채팅
========================= */
.chat {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: #313338;
}
.chatHeader {
height: 48px;
flex-shrink: 0;
padding: 0 16px;
display: flex;
align-items: center;
gap: 8px;
border-bottom:
1px solid #26272b;
}
.chatHeader span {
font-size: 24px;
color: #949ba4;
}
.chatHeader strong {
color: white;
}
.messages {
flex: 1;
overflow-y: auto;
padding: 15px 0;
}
.empty {
margin-top: 50px;
text-align: center;
color: #949ba4;
}
/* =========================
메시지
========================= */
.message {
position: relative;
display: flex;
gap: 12px;
padding:
5px 16px;
}
.message:hover {
background: #2e3035;
}
.messageAvatar {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
object-fit: cover;
}
.messageBody {
min-width: 0;
}
.messageHeader {
display: flex;
align-items: baseline;
gap: 8px;
}
.author {
color: white;
font-weight: bold;
}
.time {
color: #949ba4;
font-size: 11px;
}
.messageText {
margin-top: 2px;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.45;
}
.deleteButton {
display: none;
position: absolute;
right: 15px;
top: 0;
border: none;
border-radius: 4px;
padding: 5px;
background: #313338;
color: #ed4245;
cursor: pointer;
}
.message:hover
.deleteButton {
display: block;
}
/* =========================
입력창
========================= */
.messageForm {
padding: 16px;
display: flex;
gap: 8px;
}
.messageForm input {
flex: 1;
height: 44px;
border: none;
outline: none;
border-radius: 8px;
padding: 0 14px;
background: #383a40;
color: white;
}
.messageForm button {
width: 48px;
border: none;
border-radius: 8px;
background: #5865f2;
color: white;
font-size: 18px;
cursor: pointer;
}
/* =========================
모바일
========================= */
@media (
max-width: 700px
) {
.serverBar {
width: 60px;
padding: 8px;
}
.fuyuLogo,
.server {
width: 42px;
height: 42px;
}
.channelBar {
width: 210px;
}
.message {
padding-left: 10px;
padding-right: 10px;
}
.messageForm {
padding: 10px;
}
}