html,
body {
height: 100%
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--text-size);
line-height: var(--text-leading);
letter-spacing: var(--text-track);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.body--jakarta {
font-family: var(--font-jakarta)
}
.body--lexend {
font-family: var(--font-lexend)
}
#login-screen {
min-height: 100vh;
display: flex
}
#login-screen.login-hero {
min-height: 100dvh;
display: grid;
place-items: center !important;
padding: clamp(16px, 3vw, 32px);
background:
radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, .15), transparent 60%),
radial-gradient(1000px 500px at -10% 110%, rgba(16, 185, 129, .12), transparent 60%),
linear-gradient(180deg, #f8fbff 0%, #eef4ff 45%, #f6f9ff 100%);
}
.login-card {
width: min(400px, 92vw);
border-radius: 22px;
padding: 28px;
border: 1px solid rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .6);
box-shadow: 0 20px 60px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .6);
backdrop-filter: blur(10px);
}
.login-brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px
}
.login-brand .logo {
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #fff;
border-radius: 12px;
box-shadow: 0 10px 24px rgba(37, 99, 235, .35);
}
.login-subtle {
color: var(--muted);
margin-bottom: 20px
}
.form-floating > .form-control,
.form-floating > .form-control:focus {
background: rgba(255, 255, 255, .85);
border: 1px solid var(--border)
}
.input-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
opacity: .9
}
.input-with-icon .form-control {
padding-left: 38px;
border-radius: 12px
}
.form-floating > label {
padding-left: 34px
}
.login-actions {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
margin-top: 14px
}
.btn-login {
padding: 12px 18px;
border-radius: 12px;
font-weight: 600;
box-shadow: 0 10px 20px rgba(59, 130, 246, .25);
transition: transform .06s ease, box-shadow .2s ease
}
.btn-login:hover {
transform: translateY(-1px)
}
.btn-login:active {
transform: translateY(0)
}
.login-card .col-md-6 {
flex: 0 0 100% !important;
max-width: 100% !important
}
.login-card .row {
--bs-gutter-x: 0
}
#toggle-pass {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
height: 36px;
line-height: 36px;
padding-inline: 10px;
border-radius: 10px;
background: transparent;
border: 1px solid var(--border);
}
#main {
display: none;
height: 100vh;
overflow: hidden;
flex-direction: column
}
.topbar {
height: var(--topbar-h);
padding: 10px 12px;
background: var(--panel);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.app-grid {
display: grid;
grid-template-columns: 1fr 280px;
gap: 0px;
height: calc(100vh - var(--topbar-h));
padding: 12px;
min-height: 0;
}
.app-grid.sidebar-collapsed {
grid-template-columns: 1fr !important
}
.chat-card {
display: flex;
flex-direction: column;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
min-height: 0;
height: 100%;
}
#tabs {
display: flex;
flex-wrap: wrap;
gap: .5rem .6rem;
padding: .5rem .6rem;
background: var(--panel);
border-bottom: 1px solid var(--border);
overflow-x: visible;
max-height: 84px;
overflow-y: auto;
scrollbar-gutter: stable both-edges;
align-content: flex-start;
}
#tabs button {
position: relative;
flex: 0 1 auto;
max-width: 240px;
padding: .42rem .75rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--soft);
color: var(--text);
font: 600 14px/1 var(--font-sans);
display: inline-flex;
align-items: center;
gap: .45rem;
cursor: pointer;
transition: all .18s ease;
text-overflow: ellipsis;
overflow: hidden;
}
#tabs button:hover {
background: #e8eefc
}
#tabs button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, .3)
}
#tabs button.active {
background: var(--primary);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 16px rgba(59, 130, 246, .22)
}
#tabs .close-tab-button {
margin-left: .15rem;
padding: 0 .25rem;
border-radius: 8px;
font-size: 16px;
line-height: 1;
opacity: .7;
transition: transform .15s, opacity .15s, color .15s
}
#tabs button:hover .close-tab-button {
opacity: .95
}
#tabs .close-tab-button:hover {
color: #e65050;
transform: scale(1.12)
}
#tabs button.new-message {
border-color: #3b82f6;
box-shadow: 0 0 0 2px #3b82f6
}
#tabs button.active.new-message {
box-shadow: 0 0 0 2px #3b82f6, 0 6px 16px rgba(59, 130, 246, .22)
}
@keyframes ringPulse {
0% {
box-shadow: 0 0 0 2px #3b82f6
}
50% {
box-shadow: 0 0 0 3px rgba(255, 71, 87, .7)
}
100% {
box-shadow: 0 0 0 2px #3b82f6
}
}
#tabs button.new-message.pulse {
animation: ringPulse 1.4s ease-in-out infinite
}
#topic-header {
display: none;
align-items: center;
gap: 10px;
padding: 8px 12px
}
#private-user-info {
display: none;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--panel);
flex: 0 0 auto;
position: relative;
overflow: visible;
/* avatar taşması için */
}
#channel-name {
font-weight: 700
}
#channel-name,
.login-brand h1 {
letter-spacing: .2px
}
#messages {
font-size: 15px;
line-height: 1.5;
letter-spacing: .1px;
flex: 1;
min-height: 0;
overflow: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 1px;
/* 1) Desen, 2) Logo, 3) En altta gradient ZEMİN */
background-image:
url("https://harabe.org/hchatv4/assets/icons/arka.png"),
/* desen */
url("https://harabe.org/hchatv4/assets/icons/HCHAT.png"),
/* logo */
linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
/* zemin */
background-repeat:
repeat,
/* desen tekrar etsin */
no-repeat,
/* logo */
no-repeat;
/* gradient */
background-position:
center center,
/* desen */
right 24px top 16px,
/* logo */
center top;
/* gradient */
background-size:
420px auto,
/* desenin gerçek boyu – büyüyüp çirkinleşmesin */
110px auto,
/* logo boyutu */
cover;
/* gradient tüm alanı kaplasın */
padding-right: 140px;
/* logonun altına yazı girmesin istersen */
}
.chat-toolbar {
display: flex;
gap: 8px;
align-items: center;
padding: 0 5px;
background: var(--panel);
border-top: 1px solid var(--border)
}
.icon-btn {
border: 0;
background: var(--panel);
color: var(--text);
width: 30px;
height: 30px;
display: grid;
place-items: center;
font-size: 20px;
padding: 0;
border-radius: 10px
}
.icon-btn.active {
background: var(--primary);
color: #fff;
border-color: var(--primary)
}
.icon-btn:hover {
background: var(--soft)
}
.icon-btn i {
line-height: 1;
font-size: 20px
}
.inputbar {
position: sticky;
bottom: 0;
z-index: 10;
display: flex;
gap: 8px;
align-items: center;
padding: 10px;
background: var(--panel);
border-top: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
min-height: var(--inputbar-h);
}
.inputbar input {
flex: 1;
background: #f7faff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 5px;
}
#userlist-sidebar,
#channel-sidebar {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0px 0px 16px 16px;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
}
#userlist-sidebar.hidden {
display: none !important
}
.userlist-head,
#channel-sidebar .channel-head {
position: sticky;
top: 0;
z-index: 1;
background: var(--panel);
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
padding: 8px;
border-bottom: 1px solid var(--border);
}
#userlist {
list-style: none;
margin: 0;
padding: 8px;
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
/*overflow-y: auto;*/
overscroll-behavior: contain
}
#userlist li {
padding: 2px 3px;
border-radius: 1px;
cursor: pointer;
color: var(--col-user)
}
#userlist li:hover {
background: var(--soft);
filter: brightness(1.05);
transform: translateX(1px)
}
#userlist::-webkit-scrollbar {
width: 10px
}
#userlist::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 8px
}
#userlist li[data-nick^="~"] {
color: var(--col-founder);
font-weight: 600
}
#userlist li[data-nick^="&"] {
color: var(--col-admin);
font-weight: 600
}
#userlist li[data-nick^="@"] {
color: var(--col-op);
font-weight: 600
}
#userlist li[data-nick^="%"] {
color: var(--col-halfop);
font-weight: 600
}
#userlist li[data-nick^="+"] {
color: var(--col-voice);
font-weight: 600
}
#userlist li.ul-item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
line-height: 1.2
}
#userlist .ul-badge {
flex: 0 0 24px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-weight: 700;
font-size: 12px;
border: 1px solid transparent;
background: transparent;
color: var(--col-user);
}
#userlist .ul-name {
flex: 1;
min-width: 0;
color: var(--col-user)
}
#userlist li.ul-item:hover .ul-name {
text-decoration: underline
}
#userlist .ul-badge.founder {
background: rgba(217, 119, 6, .12);
color: var(--col-founder);
border-color: rgba(217, 119, 6, .25)
}
#userlist .ul-badge.admin {
background: rgba(124, 58, 237, .12);
color: var(--col-admin);
border-color: rgba(124, 58, 237, .25)
}
#userlist .ul-badge.op {
background: rgba(11, 87, 208, .12);
color: var(--col-op);
border-color: rgba(11, 87, 208, .25)
}
#userlist .ul-badge.halfop {
background: rgba(5, 150, 105, .12);
color: var(--col-halfop);
border-color: rgba(5, 150, 105, .25)
}
#userlist .ul-badge.voice {
background: rgba(14, 165, 233, .12);
color: var(--col-voice);
border-color: rgba(14, 165, 233, .25)
}
#userlist .ul-badge.user {
background: rgba(2, 6, 23, .06);
border-color: rgba(2, 6, 23, .12);
color: var(--col-user)
}
#userlist .ul-badge i {
font-size: 14px;
line-height: 1;
display: inline-block;
transform: translateY(1px)
}
#connecting-overlay {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, .8);
display: none;
align-items: center;
justify-content: center;
z-index: 9999
}
.spinner {
width: 56px;
height: 56px;
border-radius: 50%;
border: 6px solid #cfe2ff;
border-top-color: #3b82f6;
animation: spin 1s linear infinite
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
#popup-notice {
position: fixed;
right: 16px;
bottom: 16px;
background: #111;
color: #fff;
padding: 10px 12px;
border-radius: 10px;
opacity: 0;
transform: translateY(10px);
transition: .2s;
}
#popup-notice.show {
opacity: 1;
transform: none
}
#emoji-menu .emoji-item {
display: inline-block;
padding: 4px 6px;
cursor: pointer;
border-radius: 8px
}
#emoji-menu .emoji-item:hover {
background: var(--soft)
}
.app-logo {
display: block;
margin: 6px;
height: 30px;
width: auto;
object-fit: contain
}
#private-user-info {
gap: 12px;
padding: 10px 12px;
background: #68708033
}
.pm-head {
display: flex;
align-items: center;
gap: 12px;
width: 100%
}
.pm-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
background: #e5e7eb;
color: #111827;
font-weight: 700;
box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d1d5db;
}
.pm-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.pm-avatar .ini {
font-size: 14px
}
.pm-actions {
margin-left: auto;
display: flex;
gap: 8px;
align-items: center
}
.pm-actions .btn {
padding: 4px 10px
}
.emoji-img {
height: 1em;
width: 1em;
vertical-align: -0.15em
}
.chat-toolbar .sep {
display: inline-block;
padding: 0 6px;
color: var(--muted);
opacity: .7;
user-select: none;
font-weight: 600
}
.chat-toolbar .alt-link {
margin-left: 4px;
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 10px;
text-decoration: none;
font-size: 12px;
line-height: 1.2
}
.chat-toolbar .alt-link:hover {
background: var(--soft)
}
.pm-bubbles .bubble {
position: relative;
padding: var(--bubble-vpad, 6px) var(--bubble-hpad, 10px);
border-radius: 10px;
line-height: 1.2;
max-width: min(72%, 620px);
}
.pm-bubbles .msg-row {
margin: 4px 0
}
.pm-bubbles .msg-row.me .bubble {
background: linear-gradient(180deg, #edf4ff 0%, #e3ecff 100%);
border: 1px solid var(--bubble-me-border);
box-shadow: 0 8px 18px rgba(11, 87, 208, .18);
}
.pm-bubbles .msg-row.you .bubble {
background: var(--bubble-you);
border: 1px solid var(--bubble-you-border);
box-shadow: 0 8px 16px rgba(2, 12, 27, .08);
}
.pm-bubbles .bubble .time,
.pm-bubbles .bubble .nick {
font-weight: 900;
margin: 0;
color: #50627a
}
.pm-bubbles .msg-row.me .bubble .time,
.pm-bubbles .msg-row.me .bubble .nick {
color: #3e63a8
}
.pm-bubbles .bubble .sep,
.pm-bubbles .bubble .text {
margin: 0
}
.pm-bubbles .bubble .text {
display: inline;
white-space: normal;
word-break: break-word;
/* Önce istediğin fontları yaz, en sona cursive bırak */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: inherit;
font-weight: bold;
}
.pm-bubbles .bubble::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
top: 8px;
transform: rotate(45deg)
}
.pm-bubbles .msg-row.me .bubble::after {
left: -6px;
/* Sağdan sola aldık */
right: auto;
/* Eski sağ değeri sıfırladık */
background: #e3ecff;
/* Senin balonunun alt rengi */
/* Çizgileri sol ve üst yapıyoruz ki sivri uç sola baksın */
border-left: 1px solid var(--bubble-me-border);
border-top: 1px solid var(--bubble-me-border);
border-right: 0;
border-bottom: 0;
}
.pm-bubbles .msg-row.you .bubble::after {
left: -6px;
background: #ffffff;
border-left: 1px solid var(--bubble-you-border);
border-top: 1px solid var(--bubble-you-border);
border-right: 0;
border-bottom: 0;
}
.pm-bubbles .bubble::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
top: 8px;
transform: rotate(-45deg);
/* Yönü tam ayarlamak için -45 deneyebilirsin */
z-index: 1;
}
.hidden {
display: none !important
}
#hearts-layer {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 9999
}
.svc {
display: inline-block;
font-weight: 700;
padding: 2px 6px;
border-radius: 8px;
border: 1px solid transparent;
line-height: 1
}
.svc-nickserv {
background: rgba(14, 165, 233, .12);
color: #0ea5e9;
border-color: rgba(14, 165, 233, .35)
}
.svc-chanserv {
background: rgba(124, 58, 237, .12);
color: #7c3aed;
border-color: rgba(124, 58, 237, .30)
}
.svc-operserv {
background: rgba(239, 68, 68, .12);
color: #ef4444;
border-color: rgba(239, 68, 68, .30)
}
.svc-memoserv {
background: rgba(245, 158, 11, .14);
color: #d97706;
border-color: rgba(245, 158, 11, .32)
}
.svc-hostserv {
background: rgba(34, 197, 94, .14);
color: #16a34a;
border-color: rgba(34, 197, 94, .30)
}
.svc-global {
background: rgba(244, 63, 94, .14);
color: #dc2626;
border-color: rgba(244, 63, 94, .28)
}
#modalPalette .modal-content {
border-radius: 14px;
box-shadow: var(--shadow)
}
#modalPalette .list-group-item {
cursor: pointer
}
#modalPalette .list-group-item .hint {
color: var(--muted);
font-size: 12px
}
#modalPalette .list-group-item.active {
background: var(--soft)
}
.modal-backdrop.show {
background: rgba(10, 17, 30, .55);
backdrop-filter: blur(4px)
}
.modal {
z-index: 1060
}
.dropdown,
.tooltip,
.popover {
z-index: 1070
}
.nice-modal .modal-content {
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, .06)
}
.nice-modal .modal-header {
padding: 14px 18px;
background: linear-gradient(180deg, rgba(11, 87, 208, .10), rgba(11, 87, 208, .05));
border-bottom: 1px solid rgba(0, 0, 0, .06)
}
.nice-modal .modal-body {
padding: 18px 20px;
font-size: 14.5px;
line-height: 1.55;
color: var(--text)
}
.nice-modal .modal-body h6 {
font-weight: 700;
margin: 16px 0 8px
}
.nice-modal .modal-body p,
.nice-modal .modal-body ul,
.nice-modal .modal-body ol {
margin-bottom: 10px
}
.nice-modal .modal-body ul {
padding-left: 1.1rem
}
.nice-modal .modal-body a {
word-break: break-word;
text-decoration: underline
}
body.modal-open {
overflow: hidden
}
.sticker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 12px
}
.sticker-item {
border: 1px solid var(--border);
background: var(--panel);
border-radius: 12px;
padding: 8px;
cursor: pointer;
text-align: center;
transition: transform .08s ease, box-shadow .15s ease
}
.sticker-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow)
}
.sticker-item img {
width: 100%;
height: 72px;
object-fit: contain;
display: block
}
.msg-sticker {
display: inline-flex;
align-items: center;
justify-content: left;
max-width: 240px;
max-height: 240px
}
.msg-sticker img {
width: 40%;
height: auto;
display: block
}
#tabs {
gap: 6px;
padding: 6px 8px;
max-height: 48px;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: thin;
}
#tabs button {
padding: .38rem .6rem;
max-width: none;
flex: 0 0 auto;
}
#messages {
padding: 12px;
height: calc(100dvh - var(--topbar-h) - 56px - 10px);
/* 56: inputbar */
min-height: 0;
}
.inputbar {
position: sticky;
bottom: 0;
padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
min-height: 56px;
gap: 8px;
border-radius: 0 0 var(--radius) var(--radius);
}
.icon-btn {
width: 28px;
height: 28px;
font-size: 18px;
}
#private-user-info {
padding: 8px 10px 6px 86px;
min-height: 50px;
}
.pm-avatar {
position: absolute;
left: 10px;
top: 0px;
width: 50px;
height: 50px;
}
.pm-head {
min-height: 32px;
}
#userlist-sidebar {
position: fixed;
right: 0;
bottom: 0;
transform: translateX(100%);
transition: transform .25s ease;
border-left: 1px solid var(--border);
border-radius: 0 0 0 0;
z-index: 1050;
}
body.userlist-open #userlist-sidebar {
transform: translateX(0);
}
.userlist-dim {
position: fixed;
inset: 0;
background: rgba(2, 6, 23, .45);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: .2s;
z-index: 1045;
}
body.userlist-open .userlist-dim {
opacity: 1;
visibility: visible;
}
.chat-toolbar {
padding: 6px;
gap: 6px;
}
.chat-toolbar .sep,
.chat-toolbar .alt-link {
display: none;
}
}
/* ===== Alt hızlı menü (opsiyonel) ===== */
@media (max-width:576px) {
.bottom-quickbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: calc(48px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: var(--panel);
border-top: 1px solid var(--border);
display: grid;
grid-template-columns: repeat(4, 1fr);
z-index: 1080;
}
.bottom-quickbar button {
background: none;
border: 0;
padding: 6px 4px;
font-size: 18px;
}
.inputbar {
margin-bottom: 48px;
}
/* alt menü ile çakışmasın */
}
.theme-btn-img {
width: 35px;
height: 35px;
border-radius: 60%;
border: none;
outline: none;
background: url('https://harabe.org/hchatv4/assets/img/tema.jpg') center/60% no-repeat,
rgba(255, 255, 255, .1);
backdrop-filter: blur(6px);
transition: all .3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.theme-btn-img:hover {
transform: scale(1.05);
background-color: rgba(255, 255, 255, .2);
}
#toggle-userlist-mobile {
display: none;
}
#toggle-userlist {
display: inline-grid;
}
.modal-backdrop.show {
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.9));
opacity: 1;
}
.modal.fade.nice-modal .modal-dialog {
margin: 1.5rem auto;
transform: translateY(12px) scale(.96);
opacity: 0;
transition:
transform 180ms ease-out,
opacity 180ms ease-out;
}
.modal.show.nice-modal .modal-dialog {
transform: translateY(0) scale(1);
opacity: 1;
}
.nice-modal .modal-content {
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.4);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.45);
overflow: hidden;
}
.nice-modal .modal-header {
border-bottom: none;
padding: 1rem 1.3rem .4rem;
}
.nice-modal .modal-title {
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: .45rem;
}
.nice-modal .modal-title-icon {
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
background: rgba(59, 130, 246, 0.14);
color: #2563eb;
}
.nice-modal .modal-subtitle {
font-size: .78rem;
color: #6b7280;
margin-top: .2rem;
}
.nice-modal .btn-close {
width: 32px;
height: 32px;
border-radius: 999px;
background-color: rgba(148, 163, 184, 0.18);
opacity: 1;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nice-modal .btn-close:hover {
background-color: rgba(148, 163, 184, 0.34);
}
.nice-modal .modal-body {
padding: .6rem 1.3rem 1.1rem;
font-size: .9rem;
}
.nice-modal.modal .modal-dialog.modal-lg .modal-body {
max-height: min(70vh, 600px);
}
.nice-modal .form-control,
.nice-modal .form-select {
border-radius: 10px;
border-color: #e5e7eb;
font-size: .9rem;
}
.nice-modal .form-control:focus,
.nice-modal .form-select:focus {
border-color: #2563eb;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
.nice-modal .form-check {
font-size: .88rem;
}
.nice-modal .modal-footer {
border-top: none;
padding: .7rem 1.3rem 1.1rem;
display: flex;
justify-content: flex-end;
gap: .5rem;
}
.nice-modal .btn-primary,
.nice-modal .btn-secondary,
.nice-modal .btn-info,
.nice-modal .btn-outline-secondary {
border-radius: 999px;
padding: .45rem 1.2rem;
font-size: .84rem;
font-weight: 500;
}
.nice-modal .sticker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
gap: .5rem;
}
.nice-modal .sticker-grid button {
border: none;
background: transparent;
padding: .35rem;
border-radius: 12px;
transition: transform 120ms ease-out, background-color 120ms ease-out;
}
.nice-modal .sticker-grid button img {
display: block;
width: 36px;
height: 36px;
margin: 0 auto;
}
.nice-modal .sticker-grid button:hover {
background: rgba(148, 163, 184, 0.16);
transform: translateY(-1px);
}
.nice-modal .modal-dialog.modal-sm .modal-content {
border-radius: 16px;
}
#userlist .ul-item {
display: flex;
align-items: center;
gap: 8px;
}
#userlist .ul-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
#userlist .ul-name {
font-size: 13px;
font-weight: 600;
}
#userlist .ul-role {
font-size: 11px;
opacity: .7;
/* tema değişkenin varsa kullanabilirsin: */
color: var(--muted, #6b7280);
}
.disconnect-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .75);
/* koyu yarı saydam */
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
}
.disconnect-card {
background: #ffffff;
border-radius: 18px;
padding: 28px 32px;
max-width: 360px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
}
.disconnect-title {
font-size: 20px;
font-weight: 700;
color: #4c1d95;
/* mor ton, istersen var(--primary) yap */
margin-bottom: 8px;
}
.disconnect-text {
font-size: 14px;
color: #4b5563;
margin-bottom: 20px;
}
.disconnect-btn {
display: inline-block;
min-width: 180px;
border-radius: 999px;
font-weight: 600;
}
#fx-overlay {
position: fixed;
inset: 0;
z-index: 9999;
/* En üstte dursun */
pointer-events: none;
/* Tıklamalar alttaki chatte çalışsın */
background: transparent;
opacity: 0;
transition: opacity 0.35s ease;
}
#fx-overlay.fx-visible {
opacity: 1;
}
#fx-video {
width: 100%;
height: 100%;
object-fit: cover;
/* Ekranı doldur */
border-radius: 0;
box-shadow: none;
opacity: 0.4;
/* Biraz şeffaf olsun ki chat okunabilsin */
filter: blur(1px);
/* İstersen sil, hafif flu hoş duruyor */
}
#channel-sidebar {
padding: 8px 8px 8px 4px;
}
#channel-sidebar .channel-head {
font-size: 13px;
font-weight: 600;
color: var(--muted, #64748b);
text-transform: uppercase;
letter-spacing: .03em;
margin-bottom: 4px;
}
@keyframes channelPing {
0% {
transform: translateX(0);
box-shadow: 0 0 0 0 rgba(59, 130, 246, .65);
}
60% {
transform: translateX(1px);
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
}
100% {
transform: translateX(0);
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}
}
body.mode-status #toggle-userlist,
body.mode-status #toggle-userlist-mobile,
body.mode-pm #toggle-userlist,
body.mode-pm #toggle-userlist-mobile {
display: none !important;
}
body.mode-channel #toggle-userlist {
display: inline-grid;
/* senin desktop için kullandığın display neyse */
}
.user-action-menu {
position: absolute;
min-width: 180px;
background: var(--panel, #fff);
border-radius: 12px;
box-shadow: 0 14px 40px rgba(15, 23, 42, .20);
border: 1px solid rgba(148, 163, 184, .35);
z-index: 2500;
padding: 6px 0;
font-size: 13px;
max-height: 70vh;
overflow-y: auto;
overscroll-behavior: contain;
position: absolute;
z-index: 9999;
scrollbar-width: thin;
}
.user-action-menu::-webkit-scrollbar {
width: 6px;
}
.user-action-menu::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.5);
border-radius: 10px;
}
.user-action-menu.hidden {
display: none;
}
.user-action-menu .uam-header {
padding: 6px 10px 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted, #6b7280);
border-bottom: 1px solid rgba(148, 163, 184, .2);
}
.user-action-menu #uam-nick {
font-weight: 700;
text-transform: none;
}
.user-action-menu .uam-item {
width: 100%;
padding: 6px 10px;
border: 0;
background: transparent;
text-align: left;
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
color: var(--text, #0f172a);
}
.user-action-menu .uam-item i {
font-size: 15px;
}
.user-action-menu .uam-item:hover {
background: var(--soft, #eef3ff);
}
.user-action-menu .uam-sep {
margin: 4px 0;
border-top: 1px solid rgba(148, 163, 184, .25);
}
:root {
/* Font değişkenlerini istersen aynen koru */
--font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial, sans-serif;
--font-jakarta: "Plus Jakarta Sans", var(--font-sans);
--font-lexend: "Lexend", var(--font-sans);
--text-size: 15px;
--text-leading: 1.45;
--text-track: .1px;
/* ANA RENKLER */
--bg: #e9f1ff;
/* sayfa zemini */
--panel: #ffffff;
/* kartlar, topbar, yan paneller */
--soft: #edf3ff;
/* yumuşak doldurma alanları */
--card: #ffffff;
--text: #0b1220;
--muted: #6b7280;
--primary: #2563eb;
/* ana mavi */
--border: rgba(148, 163, 184, .45);
--shadow: 0 18px 45px rgba(15, 23, 42, .08);
--radius: 18px;
--topbar-h: 56px;
--inputbar-h: 56px;
/* Bubble renkleri (PM) */
--bubble-me: #e7f0ff;
--bubble-you: #ffffff;
--bubble-me-border: #bfd3ff;
--bubble-you-border: #e2e8f0;
/* Userlist renkleri aynı kalabilir ama hafif parlattım */
--col-founder: #d97706;
--col-admin: #7c3aed;
--col-op: #2563eb;
--col-halfop: #059669;
--col-voice: #0ea5e9;
--col-user: #0b1a2b;
}
body {
background:
radial-gradient(1100px 600px at 10% -10%, rgba(129, 140, 248, .16), transparent 60%),
radial-gradient(900px 500px at 110% 110%, rgba(45, 212, 191, .14), transparent 60%),
linear-gradient(180deg, #f4f7ff 0%, #e9f1ff 40%, #f5f7ff 100%);
color: var(--text);
font-family: var(--font-sans);
}
.topbar {
/*background: rgba(250 250 251);*/
border-bottom: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
backdrop-filter: blur(10px);
}
.chat-card,
#userlist-sidebar,
#channel-sidebar {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow);
}
.chat-toolbar,
.inputbar {
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(148, 163, 184, .25);
}
.bottom-quickbar {
background: rgba(255, 255, 255, .98);
border-top: 1px solid var(--border);
}
#tabs button {
background: var(--soft);
border-color: transparent;
color: var(--text);
}
#tabs button.active {
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}
.icon-btn {
background: rgba(248, 250, 252, .9);
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, .35);
}
.icon-btn:hover {
background: #e5edff;
}
.icon-btn.active {
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff;
border-color: transparent;
}
.message-line.topic {
background: rgba(255, 255, 255, .65);
padding: 4px 8px;
border-radius: 6px;
backdrop-filter: blur(4px);
}
#messages {
opacity: .94;
/* çok hafif şeffaflık */
}
.chat-toolbar {
padding: 6px 10px;
gap: 6px;
border-top: 1px solid rgba(15, 23, 42, .08);
background: rgba(15, 23, 42, 0.02);
backdrop-filter: blur(8px);
background: var(--panel) !important;
/* Panel rengini zorla alsın */
backdrop-filter: none !important;
/* Blur efektini kaldır */
}
.icon-btn {
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, .30);
background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2));
box-shadow:
0 10px 25px rgba(15, 23, 42, .18),
inset 0 0 0 0 rgba(255, 255, 255, .4);
display: grid;
place-items: center;
color: #0f172a;
transition:
background .16s ease,
border-color .16s ease,
box-shadow .16s ease,
transform .08s ease;
}
.icon-btn i {
font-size: 20px;
line-height: 1;
}
.icon-btn:hover {
transform: translateY(-1px);
box-shadow:
0 14px 30px rgba(15, 23, 42, .25),
inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.icon-btn:active {
transform: translateY(0);
box-shadow:
0 6px 18px rgba(15, 23, 42, .22),
inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.icon-btn.active {
border-color: rgba(59, 130, 246, .9);
background: radial-gradient(circle at 30% 0%, rgba(59, 130, 246, .6), rgba(37, 99, 235, .35));
color: #eff6ff;
}
.icon-btn {
width: 34px;
height: 34px;
border-radius: 999px;
display: grid;
place-items: center;
background:
radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)),
linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(240, 244, 255, .7));
border: 1px solid rgba(148, 163, 184, .35);
box-shadow:
0 6px 16px rgba(15, 23, 42, .15),
inset 0 0 0 0 rgba(255, 255, 255, .4);
backdrop-filter: blur(6px);
color: #1e293b;
/* ikon daha görünür */
transition: .15s ease;
}
.icon-btn i {
font-size: 20px;
color: inherit;
}
.icon-btn:hover {
transform: translateY(-1px);
box-shadow:
0 10px 24px rgba(15, 23, 42, .22),
inset 0 0 0 1px rgba(255, 255, 255, .7);
border-color: rgba(148, 163, 184, .55);
background:
radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .65)),
linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(235, 240, 255, .75));
}
.icon-btn.active {
background:
radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .8), rgba(59, 130, 246, .45)),
linear-gradient(180deg, rgba(59, 130, 246, .95), rgba(96, 165, 250, .65));
border-color: rgba(59, 130, 246, .9);
color: #f0f6ff;
box-shadow:
0 12px 26px rgba(59, 130, 246, .38),
inset 0 0 0 1px rgba(255, 255, 255, .25);
}
#channel-sidebar {
background: rgba(255, 255, 255, .75);
backdrop-filter: blur(12px);
border-radius: 5px 5px 18px 18px;
border: 1px solid rgba(148, 163, 184, .28);
box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}
.mobile-top-switcher {
display: none;
/* sadece mobilde açılacak */
padding: 4px;
gap: 4px;
border-bottom: 1px solid var(--border);
background: var(--card);
}
.mts-btn {
flex: 1 0 auto !important;
border: none;
outline: none;
border-radius: 999px;
padding: 6px 8px;
font-size: 12px;
line-height: 1.2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
background: transparent;
color: var(--muted);
cursor: pointer;
white-space: nowrap;
}
.mts-btn i {
font-size: 14px;
}
.mts-btn-current {
background: rgba(59, 130, 246, .08);
/* primary-soft */
color: var(--primary);
font-weight: 600;
}
.mobile-list-panel {
display: none;
background: var(--card);
border-bottom: 1px solid var(--border);
max-height: 40vh;
overflow-y: auto;
font-size: 13px;
-webkit-overflow-scrolling: touch;
}
.mobile-list-panel.open {
display: block;
}
.mobile-list-panel ul {
list-style: none;
margin: 0;
padding: 4px 0;
}
.mobile-list-panel li {
padding: 6px 12px;
cursor: pointer;
}
.mobile-list-panel li:hover {
background: var(--soft);
}
.mobile-list-panel li.active {
font-weight: 600;
}
.mobile-list-panel .mlp-empty {
padding: 8px 12px;
font-size: 12px;
color: var(--muted);
}
.mobile-top-switcher {
display: none;
}
.mobile-top-switcher .mts-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 4px;
border: 1px solid var(--border, #e5e7eb);
background: var(--soft, #eef3ff);
color: var(--text, #0f172a);
border-radius: 12px;
font-weight: 500;
font-size: 13px;
line-height: 1;
white-space: nowrap;
}
.mobile-top-switcher .mts-btn i {
font-size: 18px;
}
.mobile-top-switcher .mts-btn-current {
background: var(--primary, #3b82f6);
color: #fff;
border-color: transparent;
}
.mobile-list-panel {
display: none;
margin-top: 6px;
border-radius: 12px;
background: var(--panel, #fff);
border: 1px solid var(--border, #e5e7eb);
box-shadow: var(--shadow, 0 6px 20px rgba(0, 0, 0, .08));
max-height: 45vh;
/* çok tab olunca scroll */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-list-panel.open {
display: block;
}
.mobile-list-panel .mlp-list {
list-style: none;
padding: 6px;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-list-panel .mlp-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
background: transparent;
}
.mobile-list-panel .mlp-item:hover {
background: var(--soft, #eef3ff);
}
.mobile-list-panel .mlp-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 28px);
font-size: 14px;
}
.mobile-list-panel .mlp-close {
flex: 0 0 auto;
border: 0;
background: transparent;
color: #ef4444;
font-size: 18px;
line-height: 1;
padding: 0 4px;
}
.mobile-list-panel .mlp-empty {
padding: 8px 10px;
font-size: 12px;
opacity: .7;
}
.pm-bubbles .msg-row {
display: flex;
width: 100%;
margin: 6px 0;
}
.pm-bubbles .msg-row.me {
justify-content: flex-end;
/* benim mesajım sağda */
}
.pm-bubbles .msg-row.you {
justify-content: flex-start;
/* karşı taraf solda */
}
.pm-bubbles .msg-row .bubble {
display: inline-block;
width: fit-content;
max-width: min(100%, 999px);
word-break: break-word;
}
.pm-bubbles .msg-row {
display: flex;
width: 100%;
margin: 6px 0;
}
.pm-bubbles .msg-row.me {
justify-content: flex-end;
/* benim mesajım sağda */
}
.pm-bubbles .msg-row.you {
justify-content: flex-start;
/* karşı taraf solda */
}
.pm-bubbles .msg-row .bubble {
display: inline-block;
width: fit-content;
max-width: min(100%, 999px);
word-break: break-word;
}
#popup-notice {
position: fixed;
top: 16px;
right: 16px;
z-index: 99999;
background: rgba(15, 23, 42, .95);
color: #fff;
padding: 10px 14px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
opacity: 0;
transform: translateY(-10px) scale(.98);
pointer-events: none;
transition: all .25s ease;
}
#popup-notice.show {
opacity: 1;
transform: translateY(0) scale(1);
}
#popup-notice.show {
animation: popIn .25s ease;
}
@keyframes popIn {
from {
opacity: 0;
transform: translateY(-12px) scale(.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
:root {
--toast-bg: #0f172a;
/* koyu zemin */
--toast-text: #f8fafc;
--toast-border: rgba(255, 255, 255, .08);
--toast-shadow: 0 8px 24px rgba(0, 0, 0, .18);
--toast-success: #22c55e;
--toast-error: #ef4444;
--toast-info: #3b82f6;
--toast-warn: #f59e0b;
}
.toast-stack {
position: fixed;
top: 12px;
right: 12px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: none;
}
.toast {
pointer-events: auto;
width: auto;
max-width: 260px;
/* küçük */
min-width: 180px;
padding: 8px 10px;
/* küçük */
border-radius: 10px;
background: var(--toast-bg);
color: var(--toast-text);
border: 1px solid var(--toast-border);
box-shadow: var(--toast-shadow);
font-size: 13px;
/* küçük font */
line-height: 1.35;
display: flex;
align-items: center;
gap: 8px;
opacity: 0;
transform: translateY(-6px) scale(.98);
animation: toast-in .18s ease-out forwards;
}
.toast .t-ico {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.toast.success {
border-left: 3px solid var(--toast-success);
}
.toast.error {
border-left: 3px solid var(--toast-error);
}
.toast.info {
border-left: 3px solid var(--toast-info);
}
.toast.warn {
border-left: 3px solid var(--toast-warn);
}
.toast .t-msg {
flex: 1;
word-break: break-word;
}
.toast .t-close {
background: transparent;
border: 0;
color: inherit;
opacity: .6;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0 2px;
}
.toast .t-close:hover {
opacity: 1;
}
@keyframes toast-in {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes toast-out {
to {
opacity: 0;
transform: translateY(-6px) scale(.98);
}
}
.toast-stack {
top: 8px !important;
right: 8px !important;
gap: 4px !important;
}
.toast {
max-width: 210px !important;
/* daha dar */
min-width: 0 !important;
/* min genişliği kaldır */
padding: 6px 8px !important;
/* daha küçük */
border-radius: 8px !important;
font-size: 12px !important;
line-height: 1.25 !important;
gap: 6px !important;
}
.toast .t-ico {
width: 14px !important;
height: 14px !important;
font-size: 12px !important;
/* ikon küçülsün */
}
.toast .t-close {
font-size: 14px !important;
padding: 0 1px !important;
}
#popup-notice {
position: fixed;
top: 10px !important;
right: 10px !important;
z-index: 99999;
/* boyut */
padding: 6px 8px !important;
border-radius: 9px !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
/* daha mini görünüm */
max-width: 220px !important;
min-width: 0 !important;
/* renk/doku */
background: rgba(15, 23, 42, .90) !important;
/* koyu ama yumuşak */
color: #f8fafc !important;
border: 1px solid rgba(255, 255, 255, .10) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, .20) !important;
/* animasyon başlangıcı */
opacity: 0;
transform: translateY(-6px) scale(.98);
pointer-events: none;
transition: all .22s ease !important;
}
#popup-notice.show {
opacity: 1;
transform: translateY(0) scale(1);
animation: popInMini .22s ease;
}
@keyframes popInMini {
from {
opacity: 0;
transform: translateY(-8px) scale(.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
#popup-notice {
position: fixed;
right: 12px;
bottom: 12px;
/* ÜSTTEN gelen eski top kuralını öldür */
top: auto !important;
left: auto !important;
z-index: 99999;
width: fit-content;
max-width: 220px;
background: rgba(15, 23, 42, .92);
color: #fff;
padding: 6px 10px;
border-radius: 10px;
font-weight: 600;
font-size: 12.5px;
line-height: 1.25;
box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
opacity: 0;
transform: translateY(8px) scale(.98);
/* alttan çıkış hissi */
pointer-events: none;
transition: all .2s ease;
}
#popup-notice.show {
opacity: 1;
transform: translateY(0) scale(1);
animation: popIn .2s ease;
}
@keyframes popIn {
from {
opacity: 0;
transform: translateY(10px) scale(.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.topic-line {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin: 6px 0;
background: var(--soft, #eef3ff);
border-left: 3px solid var(--primary, #3b82f6);
border-radius: 8px;
font-weight: 600;
}
.topic-line .topic-label {
opacity: .7;
}
.topic-line .topic-text {
font-weight: 500;
word-break: break-word;
}
.topic-meta {
margin: -2px 0 6px 22px;
font-size: 12px;
opacity: .7;
}
.topic-box {
background: var(--soft, #eef3ff);
border: 1px solid var(--border, #e5e7eb);
padding: 6px 12px;
border-radius: 0px 0px 15px 15px;
margin: 0px 0 10px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}
.topic-box-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
margin-bottom: 6px;
}
.topic-box-text {
line-height: 1.45;
word-break: break-word;
}
.topic-box-meta {
margin-top: 6px;
color: var(--muted, #6b7280);
display: flex;
align-items: center;
gap: 6px;
}
#messages {
/* 1) LOGO en üst katman, 2) desen, 3) zemin */
background-image:
url("https://harabe.org/hchatv4/assets/icons/HCHAT.png"),
url("https://harabe.org/hchatv4/assets/icons/arka.png"),
linear-gradient(180deg, #f7faff 0%, #ffffff 100%) !important;
background-repeat:
no-repeat,
repeat,
no-repeat !important;
background-position:
right 24px top 16px,
/* logo */
center center,
/* desen */
center top
/* zemin */
!important;
background-size:
120px auto,
/* logo boyutu */
420px auto,
/* desen boyutu */
cover
/* zemin */
!important;
background-attachment: scroll, scroll, scroll !important;
}
#topic-header,
.topic-box {
padding-right: 140px;
}
.nick-colored {
font-weight: 900;
}
.modal.nice-modal .modal-dialog {
max-width: 560px;
margin: 1.2rem auto;
}
.modal.nice-modal .modal-content {
border: 0;
border-radius: 18px;
overflow: hidden;
background: var(--panel, #fff);
color: var(--text, #0f172a);
box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}
.modal.nice-modal .modal-header {
border: 0;
padding: 12px 14px;
background: linear-gradient(135deg,
rgba(59, 130, 246, .18),
rgba(16, 185, 129, .12));
}
.modal.nice-modal .modal-title {
font-weight: 800;
letter-spacing: .2px;
display: flex;
align-items: center;
gap: 8px;
}
.modal.nice-modal .btn-close {
filter: none;
opacity: .8;
border-radius: 10px;
padding: 8px;
}
.modal.nice-modal .btn-close:hover {
opacity: 1;
}
.modal.nice-modal .modal-body {
padding: 14px;
max-height: 70vh;
overflow: auto;
}
.modal.nice-modal .modal-footer {
border: 0;
padding: 10px 14px 14px;
gap: 8px;
display: flex;
justify-content: flex-end;
}
#userlist-sidebar,
#channel-sidebar,
.chat-card {
border-radius: 0px 0px 15px 15px !important;
box-shadow:
0 0 0 1px rgba(15, 23, 42, .06),
/* o silik dış hat */
0 8px 22px rgba(15, 23, 42, .06) !important;
/* derinlik */
overflow: hidden;
}
#userlist-sidebar {
min-height: 0 !important;
}
#userlist {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
/* <-- scroll burada */
overflow-x: hidden !important;
scrollbar-gutter: stable;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden !important;
/* Sayfanın komple kaymasını engeller */
position: fixed;
/* iOS'ta "bounce" efektini ve kaymayı tamamen bitirir */
touch-action: none;
/* Çift tıklama ile zoom'u CSS seviyesinde kısıtlar */
-webkit-text-size-adjust: 100%;
/* iOS font büyüme hatasını engeller */
}
#main {
height: 100dvh;
/* Dinamik viewport height */
overflow: hidden;
display: flex;
flex-direction: column;
}
.app-grid,
.chat-card {
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
#messages {
flex: 1;
overflow-y: auto !important;
/* Sadece mesaj alanı kayabilir */
-webkit-overflow-scrolling: touch;
/* Akıcı mobil kaydırma */
overscroll-behavior: contain;
}
.inputbar {
flex: 0 0 auto;
position: sticky;
bottom: 0;
z-index: 10;
}
.inputbar input {
font-size: 12px !important;
/* 16px altındaki fontlarda iOS otomatik zoom yapar. Bunu 16px yaparak zoom'u engelleriz. */
}
#fx-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
overflow: hidden;
opacity: 0;
transition: opacity .25s ease-out;
}
#fx-overlay.fx-visible {
opacity: 1;
}
#fx-overlay #fx-video {
max-width: 80%;
max-height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fx-item {
position: absolute;
width: 64px;
height: 64px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
animation-name: fx-fall;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes fx-fall {
0% {
transform: translate3d(var(--fx-start-x, 0), 110vh, 0) scale(.7) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
100% {
transform: translate3d(var(--fx-end-x, 0), -10vh, 0) scale(1) rotate(var(--fx-rot, 0deg));
opacity: 0;
}
}
.fx-kalp {
filter: drop-shadow(0 10px 22px rgba(239, 68, 68, .7));
}
.fx-konfeti {
filter: drop-shadow(0 10px 22px rgba(234, 179, 8, .7));
}
.fx-alkis {
filter: drop-shadow(0 10px 22px rgba(37, 99, 235, .7));
}
.fx-gulumse {
filter: drop-shadow(0 10px 22px rgba(16, 185, 129, .7));
}
.theme-switcher .dropdown-menu {
min-width: 210px;
border-radius: 14px;
box-shadow: var(--shadow);
}
.theme-option {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.theme-option.active {
background: var(--soft);
font-weight: 600;
}
.theme-dot {
width: 14px;
height: 14px;
border-radius: 999px;
flex-shrink: 0;
box-shadow:
0 0 0 2px #fff,
0 0 0 1px rgba(15, 23, 42, .15);
}
.theme-dot.theme-ocean {
background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
}
.theme-dot.theme-forest {
background: linear-gradient(135deg, #22c55e, #15803d);
}
.theme-dot.theme-sunset {
background: linear-gradient(135deg, #fb923c, #ec4899);
}
.theme-dot.theme-violet {
background: linear-gradient(135deg, #8b5cf6, #4c1d95);
}
.theme-dot.theme-rose {
background: linear-gradient(135deg, #fb7185, #be123c);
}
.pm-fx-menu {
z-index: 1600;
background: var(--panel, #fff);
border-radius: 999px;
padding: 4px 6px;
box-shadow: var(--shadow, 0 8px 24px rgba(15, 23, 42, 0.2));
display: flex;
gap: 4px;
align-items: center;
}
.pm-fx-menu .pm-fx-btn {
border-radius: 999px;
padding-inline: 8px;
font-size: 14px;
line-height: 1;
border: none;
}
.user-list-item .nickname.privileged {
color: var(--primary);
/* Temel renk değişkeninizden alıyorum. Genellikle mavi. */
/* İsteğe bağlı: Kırmızı yapmak isterseniz: color: #E74C3C; */
font-weight: 700;
/* Daha kalın yap */
text-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
/* Hafif bir parlama ekle */
}
#userlist .ul-avatar-wrap {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
background: var(--soft, #eef3ff);
box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
transition: transform 0.1s ease;
}
#userlist .ul-item:hover .ul-avatar-wrap {
transform: scale(1.05);
}
#userlist .ul-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#userlist .ul-avatar-wrap.has-story{
animation: storyPulse 1.05s ease-in-out infinite;
box-shadow:
0 0 0 2px rgba(255,45,85,.9), /* kırmızı halka */
0 0 0 1px rgba(15, 23, 42, .08); /* mevcut ince gölgeyi koru */
}
@keyframes storyPulse{
0%,100% {
box-shadow:
0 0 0 2px rgba(255,45,85,.35),
0 0 0 1px rgba(15, 23, 42, .08);
}
50% {
box-shadow:
0 0 0 2px rgba(255,45,85,1),
0 0 14px rgba(255,45,85,.35),
0 0 0 1px rgba(15, 23, 42, .08);
}
}
/* Video story ise küçük play ikonu */
#userlist .ul-avatar-wrap.story-video::before{
content:"▶";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
color:#fff;
text-shadow:0 0 6px rgba(0,0,0,.65);
pointer-events:none;
}
#userlist .ul-initials {
font-size: 14px;
font-weight: 700;
color: var(--primary, #3b82f6);
line-height: 1;
}
#userlist .ul-item {
display: flex;
align-items: center;
gap: 8px;
/* Avatar, Yetki Rozeti ve Yazı arası boşluk */
padding: 4px 2px;
}
#userlist .ul-badge {
/* Mevcut stillerinizden */
flex: 0 0 20px;
margin-left: -12px;
/* Rozeti avatarın üzerine kaydırmak için ayarla */
z-index: 1;
border: 1px solid var(--panel, #fff);
/* Panelin kenarını yumuşat */
}
.pm-bubbles .msg-row {
align-items: flex-start;
width: 100%;
margin: 0px 0;
gap: 8px;
/* Avatar ve balon arası boşluk */
}
.pm-bubbles .pm-bubble-avatar-wrap {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
background: var(--soft, #eef3ff);
margin-top: 2px;
/* Balonun ilk satırı ile hizala */
box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
.pm-bubbles .pm-bubble-avatar-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pm-bubbles .pm-bubble-avatar-wrap .ini {
font-size: 11px;
font-weight: 700;
color: var(--primary, #3b82f6);
}
.pm-bubbles .msg-row.me {
justify-content: flex-end;
flex-direction: row-reverse;
/* Avatar sağa, balon sola */
}
.pm-bubbles .msg-row.you {
justify-content: flex-start;
flex-direction: row;
/* Avatar sola, balon sağa */
}
#userlist .ul-avatar-wrap {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
/* User için varsayılan arka plan ve renk (açık gri/mavi) */
background: var(--soft, #eef3ff);
box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
color: var(--primary, #3b82f6);
}
#userlist .ul-avatar-wrap.user .ul-user-icon {
font-size: 18px;
/* İkon boyutu */
color: var(--muted, #6b7280);
/* İkon rengi */
}
#userlist .ul-avatar-wrap.user {
background: var(--bg, #f4f7ff);
/* Zemin rengi biraz daha açık */
border: 1px solid var(--border, #e5e7eb);
}
#userlist .ul-avatar-wrap:not(.user) {
background: rgba(59, 130, 246, .12);
/* Hafif mavi zemin */
color: var(--primary, #3b82f6);
/* Baş harf rengi */
font-weight: 700;
/* Yetkiliye özel bir kutu gölgesi */
box-shadow: 0 0 0 2px var(--primary, #3b82f6);
}
#userlist .ul-initials-priv {
font-size: 14px;
font-weight: 700;
color: var(--primary, #3b82f6);
line-height: 1;
}
#userlist .ul-avatar-wrap.founder {
/* Eski Renk: background: rgba(217, 119, 6, .15); color: var(--col-founder, #d97706); */
/* >> YENİ RENK SEÇİMİ: Mor ve Koyu Gölge << */
box-shadow: 0 0 0 2px var(--col-admin, #7c3aed);
/* Admin rengini veya kendi morunuzu kullanın */
background: rgba(124, 58, 237, .15);
/* Mor tonlarında arka plan */
color: var(--col-admin, #7c3aed);
/* Mor ikon rengi */
/* VEYA */
/* >> YENİ RENK SEÇİMİ: Parlak Altın Sarısı << */
/* box-shadow: 0 0 0 2px #ffc107;
background: rgba(255, 193, 7, .15);
color: #ffc107; */
}
#userlist .ul-avatar-wrap.admin {
background: rgba(124, 58, 237, .12);
/* Admin rengi */
color: var(--col-admin, #7c3aed);
box-shadow: 0 0 0 2px var(--col-admin, #7c3aed);
}
#userlist .ul-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#userlist .ul-badge {
display: none !important;
}
#userlist .ul-item {
gap: 8px;
/* Mevcut boşluk ayarını kullanın veya 8px olarak bırakın */
}
#userlist .ul-avatar-wrap {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
#userlist .ul-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#userlist .ul-avatar-wrap.user {
background: var(--soft, #f4f7ff);
/* Açık zemin */
border: 1px solid var(--border, #e5e7eb);
box-shadow: none;
}
#userlist .ul-initials-user {
font-size: 14px;
font-weight: 600;
color: var(--muted, #6b7280);
/* Gri ton */
}
#userlist .ul-avatar-wrap:not(.user) {
box-shadow: 0 0 0 2px var(--primary, #3b82f6);
/* Mavi çerçeve */
background: rgba(59, 130, 246, .1);
color: var(--primary, #3b82f6);
}
#userlist .ul-role-icon {
font-size: 30px;
font-weight: 700;
line-height: 1;
}
#userlist .ul-avatar-wrap.founder {
/* Yeni atadığımız :root değişkenini kullanıyoruz */
box-shadow: 0 0 0 2px var(--col-founder);
background: var(--col-founder, #ef4444, rgba(239, 68, 68, .15));
/* RGBa'yı direkt kırmızıdan al */
color: var(--col-founder);
/* VEYA SADECE RGBA VE HEX İLE NETLEŞTİRİN: */
box-shadow: 0 0 0 2px #ef4444;
/* HEX */
background: rgba(239, 68, 68, .15);
/* RGBa */
color: #ef4444;
/* HEX */
}
#userlist .ul-avatar-wrap.admin {
box-shadow: 0 0 0 2px var(--col-admin, #7c3aed);
background: rgba(124, 58, 237, .15);
color: var(--col-admin, #7c3aed);
}
#userlist .ul-avatar-wrap.op {
box-shadow: 0 0 0 2px var(--col-op, #0b57d0);
background: rgba(11, 87, 208, .15);
color: var(--col-op, #0b57d0);
}
#userlist .ul-badge {
display: none !important;
}
.avatar-sidebar {
position: fixed;
top: 0;
right: -340px;
/* Başlangıçta gizli */
width: min(275px, 90vw);
/* Maks 340px, mobilde %90 */
height: 100vh;
background: var(--panel, #fff);
border-left: 1px solid var(--border, #e5e7eb);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
padding: 15px;
display: flex;
flex-direction: column;
transition: right 0.25s ease;
z-index: 1060;
}
.avatar-sidebar.open {
right: 0;
}
.avatar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.avatar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.avatar-grid img {
width: 100%;
border-radius: 12px;
cursor: pointer;
border: 2px solid transparent;
}
.avatar-grid img.selected {
border-color: var(--primary);
}
.avatar-grid img {
width: 100%;
border-radius: 16px;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.avatar-grid img:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.avatar-grid img.selected {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}
.avatar-chip {
display: inline-flex;
align-items: center;
gap: 0px;
padding: 2px 2px;
border-radius: 999px;
border: 1px solid var(--border, #d1d5db);
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
font-size: 13px;
line-height: 1;
transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.avatar-chip:hover {
border-color: var(--primary);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}
.avatar-chip img {
width: 30px;
height: 30px;
border-radius: 999px;
object-fit: cover;
display: block;
}
.avatar-chip-text {
font-weight: 500;
}
.chat-card.nudge-shake {
/* Animasyonu başlatır */
animation: nudge-shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes nudge-shake {
/* Yatay titreşim (sağa ve sola kayma) tanımları */
10%,
90% {
transform: translate3d(-1px, 0, 0);
/* Hafif sola */
}
20%,
80% {
transform: translate3d(2px, 0, 0);
/* Orta sağa */
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
/* Güçlü sola */
}
40%,
60% {
transform: translate3d(4px, 0, 0);
/* Güçlü sağa */
}
}
.nice-modal .modal-content {
border-radius: 1.2rem;
border: 0;
padding: 22px 22px 16px;
background: #fff;
box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
animation: swal-pop .22s ease-out;
}
@keyframes swal-pop {
from {
transform: scale(.8);
opacity: 0
}
to {
transform: scale(1);
opacity: 1
}
}
.nice-modal .modal-header {
border: 0;
justify-content: center;
padding-bottom: 6px;
}
.nice-modal .modal-title {
font-weight: 700;
font-size: 1.35rem;
text-align: center;
width: 100%;
}
.nice-modal .modal-body {
text-align: center;
font-size: .95rem;
color: #444;
}
.nice-modal .modal-footer {
border: 0;
justify-content: center;
gap: .5rem;
}
.nice-modal .btn-primary {
background: #6c5ce7;
border: 0;
border-radius: .7rem;
padding: .55rem 1.6rem;
font-weight: 600;
}
.nice-modal .btn-primary:hover {
background: #5a4dd5;
}
.modal-backdrop.show {
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(3px);
}
.msg-sticker img,
.msg-sticker video {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 12px;
vertical-align: middle;
}
.sticker-item img,
.sticker-item video {
width: 35px;
height: 35px;
object-fit: contain;
border-radius: 12px;
}
.sticker-item.is-animated {
position: relative;
}
.sticker-item.is-animated::after {
position: absolute;
right: 6px;
top: 6px;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
background: rgba(0, 0, 0, .55);
color: #fff;
}
#btn-voice-note.is-recording {
background: rgba(220, 53, 69, .15);
border-color: rgba(220, 53, 69, .45);
color: rgb(220, 53, 69);
}
#btn-voice-note.is-recording i {
animation: vnPulse 1s infinite;
}
@keyframes vnPulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: .75;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#pm-call-btn,
#pm-hang-btn {
box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
#pm-call-btn:active,
#pm-hang-btn:active {
box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
transform: translateY(3px);
}
#modalStickers .sticker-tabs {
background: rgba(255, 255, 255, .55);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 14px;
padding: 3px;
gap: 3px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
#modalStickers .sticker-tabs .btn {
border: 0 !important;
border-radius: 11px !important;
padding: 6px 10px;
font-weight: 700;
font-size: 12.5px;
line-height: 1;
white-space: nowrap;
box-shadow: none !important;
}
#modalStickers .sticker-tabs .btn.btn-primary {
background: #5b5fe7 !important;
color: #fff !important;
}
.modern-menu-header {
background: #f8fafc;
margin: 0 !important;
padding: 20px !important;
font-size: 1.3rem !important;
text-align: left !important;
font-weight: 800 !important;
border-bottom: 1px solid #e2e8f0;
}
.menu-icon-bg {
width: 32px;
height: 32px;
background: #edf2f7;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #4a5568;
}
.modern-menu-container .list-group-item {
border-left: none;
border-right: none;
border-color: #f1f5f9;
padding: 12px 20px;
font-weight: 500;
transition: all 0.2s ease;
display: flex;
align-items: center;
}
.modern-menu-container .list-group-item:hover {
background-color: #f8fafc;
transform: translateX(5px);
color: #000;
}
.bg-light.rounded-bottom {
background-color: #f8fafc !important;
}
.dark .modern-menu-header {
background: #111827;
border-bottom: 1px solid #374151;
color: #f1f5f9 !important;
}
.dark .menu-icon-bg {
background: #374151;
color: #e5e7eb;
}
.dark .modern-menu-container .list-group-item {
background: #1a2234;
border-color: #374151;
color: #cbd5e1;
}
.dark .modern-menu-container .list-group-item:hover {
background-color: #242f47;
color: #fff;
}
.dark .bg-light {
background-color: #111827 !important;
}
.swal2-html-container.modern-menu-container {
overflow: hidden !important;
/* Kaydırma çubuğunu zorla gizle */
padding: 0 !important;
margin: 0 !important;
}
.modern-menu-container .list-group {
width: 100% !important;
margin: 0 !important;
border: none !important;
}
.modern-menu-container .list-group-item {
box-sizing: border-box !important;
width: 100% !important;
white-space: nowrap;
/* Yazıların alt satıra geçip yüksekliği bozmasını engeller */
}
.swal2-popup.modern-menu-popup {
overflow: hidden !important;
}
.sticker-grid-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 10px;
max-height: 350px;
overflow-y: auto;
padding: 10px;
}
.sticker-item {
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 5px;
border: none !important;
/* Kenarlıkları tamamen kaldırır */
background: transparent !important;
/* Arka planı tamamen şeffaf yapar */
transition: transform 0.2s;
}
.sticker-item:hover {
transform: scale(1.2);
/* Üzerine gelince ikonun hafif büyümesi yeterli olacaktır */
background: transparent !important;
}
.dark .sticker-item {
background: transparent !important;
border: none !important;
}
.sticker-grid-layout::-webkit-scrollbar {
width: 6px;
}
.sticker-grid-layout::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.pm-head-modern {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
background: var(--bg-card);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.pm-user-info {
display: flex;
align-items: center;
gap: 12px;
}
.pm-avatar-circle {
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
background: #edf2f7;
display: flex;
align-items: center;
justify-content: center;
}
.pm-avatar-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pm-nick-text {
font-weight: 700;
font-size: 1.1rem;
line-height: 1.2;
}
.pm-status-label {
font-size: 0.75rem;
color: #10b981;
display: flex;
align-items: center;
gap: 4px;
}
.status-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
}
.pm-actions-modern {
display: flex;
gap: 8px;
}
.btn-video{
background: #e8f5e9; /* call butonu gibi açık arka plan */
color: #2e7d32; /* yeşil ton */
}
.btn-video:hover{
background: #d7f1db;
color: #1b5e20;
}
.pm-btn {
width: 38px;
height: 38px;
border-radius: 10px;
border: none;
background: #f1f5f9;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.pm-btn:hover {
background: #e2e8f0;
color: #000;
transform: translateY(-2px);
}
.btn-call {
background: #dcfce7;
color: #166534;
}
.btn-call:hover {
background: #bbf7d0;
}
.btn-hang {
background: #fee2e2;
color: #991b1b;
}
.dark .pm-btn {
background: #2d3748;
color: #cbd5e1;
}
.dark .btn-call {
background: #064e3b;
color: #34d399;
}
.dark .pm-head-modern {
border-color: rgba(255, 255, 255, 0.05);
}
.pm-head-modern {
display: flex;
align-items: center;
padding: 12px 0px;
background: var(--bg-card);
/* Tema rengine göre ayarlanır */
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
width: 100%;
}
.pm-user-info {
display: flex;
align-items: center;
gap: 12px;
}
.pm-avatar-circle {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
background: #edf2f7;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.pm-avatar-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pm-nick-text {
font-weight: 800;
font-size: 1.15rem;
color: var(--text-main);
}
.pm-status-label {
font-size: 0.75rem;
color: #10b981;
display: flex;
align-items: center;
gap: 5px;
}
.status-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulse 2s infinite;
}
.ms-auto {
margin-left: auto !important;
}
.pm-actions-modern {
display: flex;
gap: 10px;
}
.pm-btn {
width: 40px;
height: 40px;
border-radius: 12px;
border: none;
background: rgba(0, 0, 0, 0.04);
color: #475569;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.pm-btn:hover {
background: rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.btn-call {
background: #e8f5e9;
color: #2e7d32;
}
.btn-call:hover {
background: #c8e6c9;
}
.btn-hang {
background: #ffebee;
color: #c62828;
}
.dark .pm-btn {
background: rgba(255, 255, 255, 0.1);
color: #cbd5e1;
}
.dark .btn-call {
background: #1b5e20;
color: #a5d6a7;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.status-dot.offline {
background-color: #ef4444 !important;
/* Kırmızı */
box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}
.pm-status-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
transition: all 0.3s ease;
}
.pm-status-label {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px;
line-height: 1;
/* Satır yüksekliğini sabitleyin */
margin-top: 2px;
}
.status-dot.offline {
background-color: #ef4444 !important;
/* Kırmızı */
box-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.pm-status-label.is-offline {
color: #94a3b8 !important;
}
.pm-btn.is-disabled,
.pm-btn:disabled {
opacity: .45;
cursor: not-allowed;
}
.theme-dot.theme-whatsapp {
background: #25D366;
border: 1px solid rgba(0, 0, 0, .15);
}
body.theme-whatsapp {
--primary: #25D366;
--bs-primary: #25D366;
background: #efeae2;
color: #111b21;
}
body.theme-whatsapp .topbar {
background: #4FCE5D !important;
border-bottom: 1px solid rgba(255, 255, 255, .10);
}
body.theme-whatsapp .chat-card {
background: #ffffff !important;
border: 1px solid rgba(17, 27, 33, .10);
}
body.theme-whatsapp #messages {
background: #efeae2 !important;
}
body.theme-whatsapp #userlist-sidebar,
body.theme-whatsapp #channel-sidebar {
background: #ffffff !important;
border-color: rgba(17, 27, 33, .10) !important;
}
body.theme-whatsapp .inputbar {
background: #f7f7f7 !important;
border-top: 1px solid rgba(17, 27, 33, .10);
}
body.theme-whatsapp .pm-head-modern {
/*background:#075E54 !important;*/
color: #198754 !important;
}
body.theme-whatsapp .pm-head-modern .pm-actions-modern .pm-btn {
background: rgba(255, 255, 255, .12) !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
color: #198754 !important;
}
body.theme-whatsapp #messages {
background-image: url("https://harabe.org/hchatv4/assets/css/arka.png") !important;
background-repeat: repeat !important;
background-size: 420px 420px !important;
}
a.yt-link {
text-decoration: underline;
cursor: pointer;
}
.avatar-sidebar {
position: fixed;
top: 0;
right: -340px;
width: min(275px, 90vw);
/* Güvenli alanları (Safe Area) hesaba katarak yüksekliği belirle */
height: 100dvh;
background: var(--panel, #fff);
border-left: 1px solid var(--border, #e5e7eb);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
padding: 15px;
display: flex;
flex-direction: column;
/* İçeriği dikeyde sırala */
transition: right 0.25s ease;
z-index: 1060;
}
.avatar-grid-container {
flex: 1;
/* Diğer öğelerden kalan tüm boşluğu kapla */
overflow-y: auto;
/* Dikey kaydırmayı aç */
padding-right: 5px;
margin-bottom: 15px;
-webkit-overflow-scrolling: touch;
/* iOS için akıcı scroll */
}
.avatar-footer {
flex: 0 0 auto;
padding-bottom: var(--safe-bottom, 15px);
/* iPhone alt çubuğu için boşluk */
}
.btn-save-avatar {
width: 100%;
padding: 12px;
border-radius: 12px;
background: var(--primary);
color: #fff;
font-weight: 700;
border: none;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.chat-img-preview {
max-width: 150px;
/* Çok büyük olmasın */
max-height: 150px;
border-radius: 12px;
border: 2px solid #3b82f6;
cursor: zoom-in;
display: block;
margin-top: 5px;
object-fit: cover;
}
.pm-image-bubble {
display: inline-block;
}
.video-call-container {
position: relative;
width: 100%;
background: #000;
border-radius: 15px;
overflow: hidden;
aspect-ratio: 4/3;
}
#remote-video {
width: 100%;
height: 100%;
object-fit: cover;
}
#local-video {
position: absolute;
top: 10px;
right: 10px;
width: 120px;
height: 90px;
border-radius: 8px;
border: 2px solid #fff;
object-fit: cover;
z-index: 10;
background: #222;
}
.video-controls {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
text-align: center;
z-index: 20;
}
.yt-resim-kart {
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: inline-block;
background-color: #000;
}
.yt-resim-kart:hover {
transform: scale(1.03);
/* Üzerine gelince hafif büyür */
box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
/* Kırmızı parlama */
}
.yt-resim-kart img {
opacity: 0.9;
transition: opacity 0.2s;
}
.yt-resim-kart:hover img {
opacity: 1;
}
.yt-resim-kart i {
transition: transform 0.2s ease;
}
.yt-resim-kart:hover i {
transform: scale(1.2);
/* Üzerine gelince ikon büyür */
}
#yt-dock.hidden {
display: none;
}
#yt-dock {
position: fixed;
right: 14px;
bottom: 86px;
/* input bar üstüne gelsin */
z-index: 99999;
width: 340px;
max-width: calc(100vw - 20px);
}
#yt-dock .yt-dock-inner {
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
border: 1px solid rgba(255, 255, 255, .12);
background: #0b1220;
color: #fff;
}
body:not(.dark) #yt-dock .yt-dock-inner {
background: #fff;
color: #0f172a;
border-color: rgba(0, 0, 0, .12);
}
#yt-dock .yt-dock-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
font-size: 12px;
opacity: .95;
}
#yt-dock .yt-dock-close {
border: 0;
background: transparent;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: inherit;
}
#yt-dock .yt-dock-frame {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
}
#yt-dock iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.st-head {
display: flex;
gap: 8px;
margin-bottom: 10px
}
.st-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
max-height: 420px;
overflow: auto;
padding: 4px
}
.st-item {
border: 0;
background: transparent;
padding: 0;
border-radius: 12px;
overflow: hidden
}
.st-item img {
width: 100%;
height: auto;
display: block
}
.st-foot {
margin-top: 10px
}
.swal2-popup.sticker-swal {
padding: 18px 18px 16px !important;
border-radius: 14px !important;
max-width: 640px;
}
.sticker-modal {
text-align: left;
}
.sticker-search-row {
display: flex;
align-items: stretch;
gap: 10px;
}
.sticker-search-input {
flex: 1;
height: 44px;
padding: 0 14px;
border: 1px solid rgba(148, 163, 184, .45);
border-radius: 12px;
outline: none;
font-size: 14px;
}
.sticker-search-input:focus {
border-color: rgba(59, 130, 246, .75);
box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}
.sticker-search-btn {
height: 44px;
min-width: 92px;
/* <-- Ara iki satıra düşmesin */
padding: 0 14px;
border: 0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
white-space: nowrap;
/* <-- kritik */
cursor: pointer;
background: #2563eb;
color: #fff;
}
.sticker-search-hint {
margin: 10px 0 12px;
font-size: 12px;
opacity: .75;
}
.sticker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: 10px;
max-height: 320px;
overflow: auto;
padding: 8px 2px 2px;
}
.sticker-more-btn {
margin-top: 12px;
width: 100%;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, .45);
background: transparent;
font-weight: 600;
cursor: pointer;
}
.sticker-bubble {
display: inline-flex;
align-items: flex-end;
max-width: min(320px, 70vw);
/* PC + mobil sınır */
margin-top: 6px;
}
.sticker-bubble img,
.sticker-bubble video {
display: block;
width: auto;
max-width: 100%;
max-height: 1000px;
/* asıl “boy” sınırı */
height: auto;
border-radius: 14px;
object-fit: contain;
}
.swal2-actions {
gap: 12px;
}
.nick-with-avatar {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nick-mini-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
display: inline-block;
vertical-align: middle;
}
.nick-mini-fallback {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-grid;
place-items: center;
font-size: 11px;
font-weight: 700;
background: rgba(148, 163, 184, .35);
}
.irc-line img.nick-mini-avatar {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
.nick-with-avatar {
display: inline-flex !important;
align-items: center;
gap: 6px;
}
.nick-mini-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.nick-avatar {
display: inline-flex;
align-items: center;
/* 🔑 OLAY BU */
gap: 6px;
vertical-align: middle;
}
.nick-avatar img,
.nick-avatar .avatar-img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
vertical-align: middle;
}
.chan-msg {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 6px 0;
}
.chan-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
flex-shrink: 0;
}
.chan-body {
display: flex;
flex-direction: column;
}
.chan-head {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.chan-nick {
font-weight: 600;
}
.chan-time {
font-size: 11px;
opacity: .6;
}
.chan-text {
font-size: 14px;
line-height: 1.35;
}
.inline-msg-row {
display: flex;
align-items: center;
/* Hepsini dikeyde tam merkeze hizalar */
gap: 8px;
/* Aralarındaki boşluk */
padding: 2px 10px;
font-size: 14px;
line-height: 1.5;
}
.inline-avatar {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.inline-avatar img,
.ini-small {
width: 24px;
height: 24px;
border-radius: 4px;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
font-size: 11px;
font-weight: bold;
}
.inline-time {
font-size: 11px;
color: #888;
white-space: nowrap;
}
.inline-nick {
font-weight: bold;
white-space: nowrap;
}
.inline-text {
word-break: break-word;
color: inherit;
}
.inline-msg-row.me {
background-color: rgba(0, 0, 0, 0.03);
}
.h-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
/* Dikeyde tam orta hizalama */
gap: 8px;
padding: 3px 10px;
width: 100%;
box-sizing: border-box;
}
.h-avatar {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.h-avatar img,
.h-ini {
width: 28px;
height: 28px;
border-radius: 4px;
display: block;
object-fit: cover;
}
.h-ini {
background: #4a5568;
color: white;
text-align: center;
line-height: 28px;
font-size: 12px;
font-weight: bold;
}
.h-time {
font-size: 11px;
color: #888;
white-space: nowrap;
display: inline-block;
}
.h-nick {
font-weight: bold;
white-space: nowrap;
display: inline-block;
}
.h-text {
word-break: break-word;
display: inline-block;
line-height: 1.4;
}
.msg-time {
display: none !important;
}
#messages .irc-line {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 1px 0px !important;
line-height: 1.35 !important;
}
#messages .irc-line .nick-with-avatar,
#messages .irc-line .nick-avatar {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
#messages .irc-line img.nick-mini-avatar,
#messages .irc-line .nick-avatar img,
#messages .irc-line .avatar-img {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
/* inline img baseline sapmasını bitirir */
flex: 0 0 auto !important;
}
#messages .irc-line .nick-mini-fallback {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
display: inline-grid !important;
place-items: center !important;
font-size: 11px !important;
font-weight: 700 !important;
}
#messages .irc-line .nick,
#messages .irc-line .nick-colored {
font-weight: 999 !important;
white-space: nowrap !important;
font-size: 15px;
}
#messages .irc-line .sep,
#messages .irc-line .colon {
margin: 0 4px !important;
opacity: .75 !important;
white-space: nowrap !important;
}
#messages .irc-line .text,
#messages .irc-line .msg,
#messages .irc-line .inline-text,
#messages .irc-line .h-text {
display: inline !important;
min-width: 0 !important;
word-break: break-word !important;
}
#messages .irc-line .msg-time {
display: none !important;
}
.irc-line {
display: flex;
align-items: flex-start;
gap: .35rem;
}
.irc-line .irc-prefix {
display: inline-flex;
align-items: center;
white-space: nowrap;
flex: 0 0 auto;
}
.irc-line img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 22px;
}
.irc-line .irc-sep {
flex: 0 0 auto;
}
.irc-line .irc-text {
flex: 1 1 auto;
min-width: 0;
white-space: normal;
word-break: break-word;
}
.irc-line {
display: flex;
align-items: flex-start;
gap: .35rem;
}
.irc-prefix {
white-space: nowrap;
flex: 0 0 auto;
}
.irc-text {
flex: 1 1 auto;
min-width: 0;
word-break: break-word;
}
.irc-line {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 6px !important;
}
.irc-prefix {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
}
.irc-line img,
.irc-prefix img {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: inline-block !important;
margin-right: 4px !important;
}
.irc-text {
display: inline !important;
white-space: normal !important;
word-break: break-word !important;
flex: 1 1 auto !important;
}
.irc-line::before,
.irc-line::after {
content: none !important;
}
.irc-line {
display: inline-flex !important;
}
.irc-row {
display: flex;
align-items: center;
gap: 8px;
}
.irc-row .irc-line {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
}
.irc-row.me .irc-line {
font-weight: 600;
}
#messages:not(.pm-bubbles) > div,
#messages:not(.pm-bubbles) .msg-row,
#messages:not(.pm-bubbles) .msg-self {
display: block !important;
width: 100% !important;
clear: both !important;
margin-bottom: 2px !important;
}
#messages:not(.pm-bubbles) .nick,
#messages:not(.pm-bubbles) .sep,
#messages:not(.pm-bubbles) .text,
#messages:not(.pm-bubbles) .time {
display: inline !important;
/* Blok olmasını imkansız hale getirir */
float: none !important;
vertical-align: baseline !important;
}
#messages:not(.pm-bubbles) .text div,
#messages:not(.pm-bubbles) .text p,
#messages:not(.pm-bubbles) .msg-self .text {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
}
.msg-row-wrapper {
display: block;
/* Her mesaj yeni satırda başlasın */
width: 100%;
margin-bottom: 2px;
}
.msg-row-wrapper .nick,
.msg-row-wrapper .sep,
.msg-row-wrapper .text {
display: inline !important;
}
#messages:not(.pm-bubbles) .msg-row-container {
display: block !important;
width: 100% !important;
margin-bottom: 2px !important;
}
#messages:not(.pm-bubbles) .msg-row-container .nick,
#messages:not(.pm-bubbles) .msg-row-container .sep,
#messages:not(.pm-bubbles) .msg-row-container .text,
#messages:not(.pm-bubbles) .msg-row-container .time {
display: inline !important;
float: none !important;
vertical-align: baseline !important;
}
#messages:not(.pm-bubbles) .msg-self {
display: inline !important;
}
#messages:not(.pm-bubbles) .text div,
#messages:not(.pm-bubbles) .text p {
display: inline !important;
margin: 0 !important;
}
.irc-line,
.irc-action,
.irc-notice {
display: inline;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.irc-line img,
.irc-action img,
.irc-notice img {
display: inline-block;
vertical-align: middle;
}
#messages .irc-row-text {
display: inline-flex !important;
align-items: baseline !important;
gap: 6px !important;
flex-wrap: wrap !important;
width: 100% !important;
}
#messages .irc-nick-text {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
#messages .irc-sep {
white-space: nowrap !important;
}
#messages .irc-msg-text {
display: inline !important;
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
}
#messages .nick-with-avatar,
#messages .svc {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
vertical-align: middle !important;
}
#messages .nick-mini-avatar,
#messages .svc-ico {
display: inline-block !important;
vertical-align: middle !important;
}
#messages .irc-line {
display: inline !important;
}
.icon-btn .icon-img {
width: 23px;
height: 23px;
display: inline-block;
vertical-align: middle;
object-fit: contain;
}
#messages{
position: relative;
z-index: 0;
}
#typing-indicator {
display: none; /* varsay lan gizli */
padding: 2px 15px;
font-size: 0.85rem;
font-style: italic;
color: #3b82f6;
height: 24px;
line-height: 24px;
background: rgba(59, 130, 246, 0.05);
border-radius: 999px; /* daha pill g r n m */
margin: 6px 12px 0; /* messages ile aras nda bo luk */
width: fit-content; /* balon gibi */
max-width: calc(100% - 24px);
/* ? balonlar n st ne binmesin */
position: relative;
z-index: 1;
}
#typing-indicator.active {
display: inline-block; /* block yerine inline-block */
}
.user-away {
position: relative;
}
.user-away::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: #ff4d4d;
/* Kırmızı nokta */
border-radius: 50%;
margin-left: 6px;
box-shadow: 0 0 5px rgba(255, 77, 77, 0.8);
vertical-align: middle;
}
#away-toggle-btn.is-away {
background-color: #ef4444 !important;
color: white !important;
}
.user-away-status {
position: relative;
display: flex;
align-items: center;
}
.user-away-status::after {
content: '';
width: 8px;
height: 8px;
background-color: #ff4d4d;
border-radius: 50%;
margin-left: 6px;
display: inline-block;
box-shadow: 0 0 4px rgba(255, 0, 0, 0.6);
}
.away-btn-modern {
/* SABİT MAVİ YERİNE DEĞİŞKENLERİ BAĞLADIK */
background: var(--soft) !important;
color: var(--primary) !important;
border: 1px solid var(--border) !important;
padding: 6px 16px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
outline: none;
font-size: 13px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
/* Daha hafif bir gölge */
}
.away-btn-modern:hover {
transform: translateY(-2px);
filter: brightness(0.95);
box-shadow: var(--shadow);
/* Senin sistemindeki gölgeyi kullanır */
}
.away-btn-modern i {
color: inherit !important;
}
.away-btn-modern.is-away-active {
background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4) !important;
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% {
box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 75, 43, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
}
}
.away-btn-content {
display: flex;
align-items: center;
gap: 6px;
}
.is-away-status::after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
background-color: #ff0000;
border-radius: 50%;
margin-left: 5px;
border: 1px solid white;
box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
}
.ul-avatar-wrap {
position: relative;
/* Noktanın avatarın üstünde durması için şart */
}
.away-indicator-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 10px;
height: 10px;
background-color: #ff4d4d;
/* Kırmızı */
border: 2px solid #fff;
/* Etrafına beyaz çerçeve (daha net görünür) */
border-radius: 50%;
z-index: 10;
}
.ul-avatar-wrap {
position: relative;
display: inline-block;
}
.away-indicator-dot {
position: absolute;
bottom: 0px;
right: 0px;
width: 13px;
height: 13px;
background-color: #ff0000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 10;
}
/* Avatar d na ta abilsin */
.ul-avatar-wrap{
overflow: visible !important;
}
/* Away noktas art k d ar da ROZET olsun */
.away-indicator-dot{
position: absolute !important;
/* ? d ar ta */
top: -6px !important;
right: -10px !important;
bottom: auto !important;
left: auto !important;
/* ? nokta yerine rozet */
width: auto !important;
height: 18px !important;
min-width: 18px !important;
padding: 0 6px !important;
border-radius: 999px !important;
background: #ff0000 !important;
border: 2px solid #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
color: #fff !important;
box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
z-index: 999 !important;
}
/* ine ekil koy (JS bo b raksa bile) */
.away-indicator-dot::before{
content: "??"; /* istersen "zZ" veya "AFK" yapar m */
}
/* Sekme Bildirim Parlama Efekti */
.tab-highlight-red {
position: relative;
background-color: rgba(255, 0, 0, 0.1) !important;
color: #ff4d4d !important;
/* Yazıyı kırmızımsı yapar */
animation: pulse-red-tab 1.5s infinite;
border-bottom: 2px solid #ff0000 !important;
}
@keyframes pulse-red-tab {
0% {
box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.3);
}
50% {
box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.7);
background-color: rgba(255, 0, 0, 0.25);
}
100% {
box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.3);
}
}
#tabs button.tab-highlight-red {
border-color: #ff4d4d !important;
color: #fff !important;
background-color: #ff4d4d !important;
/* Arka planı kırmızı yapar */
animation: alertPulse 1.5s infinite ease-in-out !important;
box-shadow: 0 0 12px rgba(255, 71, 87, 0.4);
}
@keyframes alertPulse {
0% {
background-color: #ff4d4d;
box-shadow: 0 0 5px rgba(255, 71, 87, 0.5);
}
50% {
background-color: #ff1a1a;
/* Daha koyu/canlı kırmızı */
box-shadow: 0 0 20px rgba(255, 71, 87, 0.8);
transform: scale(1.02);
/* Hafif büyüme efekti */
}
100% {
background-color: #ff4d4d;
box-shadow: 0 0 5px rgba(255, 71, 87, 0.5);
}
}
#tabs button.tab-highlight-red .close-tab-button {
color: rgba(255, 255, 255, 0.8) !important;
}
#tabs button.tab-highlight-red,
#tabs button.new-message.tab-highlight-red {
background: #ff0000 !important;
background-image: none !important;
/* Mevcut gradyanları temizle */
color: #ffffff !important;
border: 2px solid #b30000 !important;
box-shadow: 0 0 15px rgba(255, 0, 0, 0.7) !important;
animation: alertPulse 1.2s infinite ease-in-out !important;
}
@keyframes alertPulse {
0% {
background-color: #ff0000;
box-shadow: 0 0 5px #ff0000;
}
50% {
background-color: #8b0000;
box-shadow: 0 0 20px #ff0000;
}
100% {
background-color: #ff0000;
box-shadow: 0 0 5px #ff0000;
}
}
.bubble .time {
display: none !important;
}
.chat-toolbar {
display: flex;
align-items: center;
gap: 5px;
}
.chat-toolbar {
display: flex !important;
align-items: center !important;
gap: 10px;
position: relative;
}
.toolbar-options {
display: none;
/* Başlangıçta gizli */
align-items: center;
gap: 5px;
background: #ffffff;
/* Arka plan rengi */
padding: 5px 15px;
border: 1px solid #ddd;
border-radius: 50px;
/* Yuvarlak görünüm */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.toolbar-options.show {
display: inline-flex !important;
flex-direction: row !important;
/* Alt alta gelmesini engeller */
}
.plus-active #plus-icon {
transform: rotate(45deg);
color: #e74c3c;
}
.inputbar {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
}
.plus-menu-wrapper {
position: relative;
display: inline-block;
}
.plus-dropdown-content {
display: none;
position: absolute;
bottom: 45px;
/* Inputun üzerinde açılması için */
left: 0;
background: var(--card-bg, #fff);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
padding: 8px;
z-index: 1000;
flex-direction: column;
/* Alt alta dizilim */
gap: 8px;
min-width: 45px;
}
.plus-dropdown-content.show {
display: flex !important;
}
#main-plus-btn i {
font-size: 24px;
transition: transform 0.3s;
color: var(--primary);
}
#main-plus-btn.active i {
transform: rotate(45deg);
color: #ff4757;
}
.dropdown-divider {
height: 1px;
background: #eee;
margin: 4px 0;
}
#send-button.btn-primary {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
transition: all 0.2s ease;
}
#send-button.btn-primary:hover {
filter: brightness(0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#away-toggle-btn.away-btn-modern {
/* Sabit renkleri tamamen iptal edip temanın değişkenlerine bağlıyoruz */
background-color: var(--soft) !important;
color: var(--primary) !important;
border: 1px solid var(--border) !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 15px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: none;
}
#away-toggle-btn.away-btn-modern:hover {
filter: brightness(0.92);
box-shadow: var(--shadow);
}
#away-toggle-btn.away-btn-modern.is-away-active {
background-color: #ef4444 !important;
color: #ffffff !important;
border-color: #dc2626 !important;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
}
#away-toggle-btn i {
color: inherit !important;
}
.msg-row-container {
position: relative;
padding-right: 0px !important;
}
.reaction-btn-trigger {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
color: var(--primary);
font-size: 18px;
background: var(--soft);
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
}
.msg-row-container:hover .reaction-btn-trigger {
opacity: 1;
}
.reaction-popup {
position: absolute;
right: 35px;
top: 50%;
transform: translateY(-50%);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 5px 10px;
display: none;
gap: 8px;
box-shadow: var(--shadow);
z-index: 1000;
animation: fadeIn 0.2s ease;
}
.reaction-popup.active {
display: flex;
}
.reaction-popup span {
cursor: pointer;
transition: transform 0.2s;
font-size: 20px;
}
.reaction-popup span:hover {
transform: scale(1.4);
}
.reaction-container {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
padding-left: 45px;
/* Avatar mesafesine göre ayarlı */
}
.reaction-item {
background: var(--soft);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2px 8px;
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
color: var(--primary);
font-weight: bold;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-50%) scale(0.9);
}
to {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
#mobile-tab-btn {
height: 38px;
/* Input yüksekliğine göre ayarla */
background-color: #6c757d;
color: white;
border-radius: 5px;
font-weight: bold;
}
@keyframes floatUpFade {
0% {
opacity: 0;
transform: translateY(10px);
}
15% {
opacity: 1;
transform: translateY(0);
}
85% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.floating-alert {
position: fixed;
/* Mobilde de görünmesi için fixed yapalım */
bottom: 80px;
right: 20px;
background: rgba(255, 193, 7, 0.95);
color: #000;
padding: 10px 18px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
z-index: 99999;
pointer-events: none;
animation: floatUpFade 4s forwards;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
#tabs button::after,
#tabs button.new-message::after,
#tabs button.mention::after {
display: none !important;
content: none !important;
}
#tabs button:not(.tab-pm),
#tabs button:not(.tab-pm) * {
color: #000 !important;
font-weight: 600;
}
#tabs button.tab-new-msg,
#tabs button.tab-new-msg * {
color: #ff0000 !important;
font-weight: 800;
}
#tabs button.mention,
#tabs button.mention * {
color: #008000 !important;
font-weight: 900;
}
#tabs button.tab-pm,
#tabs button.tab-pm * {
color: #000 !important;
font-weight: 600;
}
#tabs button.tab-pm.new-message,
#tabs button.tab-pm.new-message * {
color: #6a00ff !important;
font-weight: 800;
}
#tabs button.active.tab-pm,
#tabs button.active.tab-pm * {
color: #000 !important;
}
#tabs button.active:not(.tab-pm),
#tabs button.active:not(.tab-pm) * {
color: #000 !important;
}
#mobile-top-switcher .mts-btn {
color: #000 !important;
font-weight: 700;
}
#mobile-top-switcher #mt-btn-channels.tab-new-msg {
color: #ff0000 !important;
}
#mobile-top-switcher #mt-btn-privs.new-message {
color: #6a00ff !important;
}
#mobile-top-switcher .mts-btn.mention {
color: #008000 !important;
font-weight: 900 !important;
}
#mobile-top-switcher #mt-btn-channels.mention.tab-new-msg {
color: #008000 !important;
}
#mobile-top-switcher #mt-btn-privs.mention.new-message {
color: #008000 !important;
}
#mobile-tab-btn {
display: none;
height: 38px;
padding: 0 10px;
border: 0;
border-radius: 10px;
font-weight: 800;
}
#mobile-tab-btn {
width: 34px !important;
height: 34px !important;
padding: 0 !important;
border-radius: 50px !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(0, 0, 0, .06) !important;
border: 1px solid rgba(0, 0, 0, .12) !important;
color: #111 !important;
}
#mobile-tab-btn:active {
transform: translateY(1px) scale(.98);
}
#header-avatar-preview,
.pm-bubble-avatar-wrap img,
.ul-avatar-img,
.avatar-chip img {
cursor: zoom-in;
}
.mt-badge {
margin-left: 8px;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 900;
background: #ff0000;
color: #fff;
}
#mobile-tab-btn {
display: none !important;
}
.nick {
cursor: pointer;
}
.nick:active {
opacity: .7;
}
#open-request-modal,
#open-dj-panel {
border: 0 !important;
/* Kalın kenarı kaldır */
outline: none !important;
/* Focus çizgisi kaldır */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
/* Normal gölge */
border-radius: 50% !important;
width: 34px;
height: 34px;
}
#open-request-modal:focus,
#open-request-modal:active,
#open-dj-panel:focus,
#open-dj-panel:active {
outline: none !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
/* Aynı gölge kalsın */
}
#open-request-modal.btn:focus,
#open-dj-panel.btn:focus {
box-shadow: none !important;
/* istersen bunu kapatıp üsttekini kullan */
}
#mobile-list-panel .mlp-item.tab-new-msg .mlp-name {
color: #ff0000 !important;
font-weight: 800;
}
#mobile-list-panel .mlp-item.new-message .mlp-name {
color: #6a00ff !important;
font-weight: 800;
}
#mobile-list-panel .mlp-item.mention .mlp-name {
color: #008000 !important;
font-weight: 900;
}
.msg-row-container {
position: relative;
}
.msg-reactions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-left: 48px;
margin-top: 4px;
}
.react-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(0, 0, 0, .08);
font-size: 13px;
}
.react-menu {
position: fixed;
z-index: 99999;
display: flex;
gap: 6px;
padding: 8px;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.react-menu button {
border: 0;
background: transparent;
font-size: 18px;
cursor: pointer;
padding: 4px 6px;
border-radius: 10px;
}
/* ===== Userlist Yetki Renklendirme ===== */
#userlist .ul-item .ul-name {
font-weight: 700;
}
#userlist .ul-item .ul-role {
opacity: .75;
font-size: 12px;
}
/* Founder (~) */
#userlist .ul-item.founder .ul-name,
#userlist .ul-avatar-wrap.founder {
color: #8b5cf6;
}
#userlist .ul-item.founder .ul-role {
color: rgba(139, 92, 246, .85);
}
#userlist .ul-avatar-wrap.founder {
border: 2px solid #8b5cf6;
}
/* Admin (&) */
#userlist .ul-item.admin .ul-name,
#userlist .ul-avatar-wrap.admin {
color: #f59e0b;
}
#userlist .ul-item.admin .ul-role {
color: rgba(245, 158, 11, .85);
}
#userlist .ul-avatar-wrap.admin {
border: 2px solid #f59e0b;
}
/* Op (@) */
#userlist .ul-item.op .ul-name,
#userlist .ul-avatar-wrap.op {
color: #3b82f6;
}
#userlist .ul-item.op .ul-role {
color: rgba(59, 130, 246, .85);
}
#userlist .ul-avatar-wrap.op {
border: 2px solid #3b82f6;
}
/* Halfop (%) */
#userlist .ul-item.halfop .ul-name,
#userlist .ul-avatar-wrap.halfop {
color: #22c55e;
}
#userlist .ul-item.halfop .ul-role {
color: rgba(34, 197, 94, .85);
}
#userlist .ul-avatar-wrap.halfop {
border: 2px solid #22c55e;
}
/* Voice (+) */
#userlist .ul-item.voice .ul-name,
#userlist .ul-avatar-wrap.voice {
color: #ec4899;
}
#userlist .ul-item.voice .ul-role {
color: rgba(236, 72, 153, .85);
}
#userlist .ul-avatar-wrap.voice {
border: 2px solid #ec4899;
}
/* Normal user */
#userlist .ul-item.user .ul-name {
color: #020617;
}
#userlist .ul-item.user .ul-role {
color: #020617;
}
#userlist .ul-avatar-wrap.user {
border: 2px solid rgba(203, 213, 225, .25);
}
/* Away biraz soluk olsun */
#userlist .ul-item.is-user-away {
opacity: .65;
}
/* Hover ( ok iyi durur) */
#userlist .ul-item:hover {
background: rgba(255, 255, 255, .04);
}
/* === USERLIST: HALKA / CEMBER / RING KAPAT === */
#userlist .ul-avatar-wrap,
#userlist .ul-avatar-wrap.founder,
#userlist .ul-avatar-wrap.admin,
#userlist .ul-avatar-wrap.op,
#userlist .ul-avatar-wrap.halfop,
#userlist .ul-avatar-wrap.voice,
#userlist .ul-avatar-wrap.user {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Bazi temalarda img veya ikon da halka gibi g lge aliyor, onu da kapat */
#userlist .ul-avatar-img,
#userlist .ul-role-icon,
#userlist .ul-initials {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.voice-msg {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
border-radius: 12px;
background: rgba(0, 0, 0, .06);
}
body.dark .voice-msg {
background: rgba(255, 255, 255, .08);
}
.voice-msg audio {
width: 240px;
max-width: 100%;
height: 34px;
}
.voice-meta {
font-size: 12px;
opacity: .75;
}
#voice-btn.recording {
background: #e11d48;
color: #fff;
animation: voicePulse 1s infinite;
}
@keyframes voicePulse {
0% {
box-shadow: 0 0 0 0 rgba(225, 29, 72, .55);
}
70% {
box-shadow: 0 0 0 12px rgba(225, 29, 72, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
}
}
/* ===== Nick change system bubble ===== */
.sys-nickchange {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 5px;
font-size: 12px;
line-height: 1.2;
background: rgba(114, 102, 227, 0.10);
border: 1px solid rgba(114, 102, 227, 0.22);
color: #2b2f36;
}
body.dark .sys-nickchange {
background: rgba(114, 102, 227, 0.14);
border-color: rgba(114, 102, 227, 0.28);
color: #e2e8f0;
}
.sys-nickchange .uil {
font-size: 16px;
opacity: 0.9;
}
.sys-nickchange .nick {
font-weight: 700;
}
.sys-nickchange .arrow {
opacity: 0.75;
font-weight: 700;
}
.sys-nickchange .muted {
opacity: 0.65;
font-size: 11.5px;
}
.voice-msg .voice-sender {
font-weight: 600;
font-size: 12px;
margin-bottom: 4px;
opacity: 0.8;
}
#messages .nick-with-avatar {
display: inline-flex;
align-items: center;
gap: 8px;
vertical-align: middle;
white-space: nowrap;
}
#messages .nick-mini-fallback {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 900;
line-height: 1;
}
/* ===== Sistem olay balonlar (JOIN/PART/QUIT/KICK) ===== */
#messages .sys-evt {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0px 12px;
margin: 6px 0;
border-radius: 5px;
max-width: 100%;
font-size: 12px;
line-height: 1.25;
border: 1px solid rgba(148, 163, 184, .25);
background: rgba(148, 163, 184, .12);
backdrop-filter: blur(6px);
}
#messages .sys-evt .ico {
width: 26px;
height: 26px;
border-radius: 10px;
display: inline-grid;
place-items: center;
font-size: 12px;
font-weight: 900;
background: rgba(148, 163, 184, .18);
}
#messages .sys-evt .txt b {
font-weight: 800;
}
#messages .sys-evt .muted {
opacity: .75;
font-size: 12px;
margin-left: 6px;
}
#messages .sys-join {
background: rgba(34, 197, 94, .12);
border-color: rgba(34, 197, 94, .25);
}
#messages .sys-join .ico {
background: rgba(34, 197, 94, .18);
}
#messages .sys-part {
background: rgba(239, 68, 68, .10);
border-color: rgba(239, 68, 68, .22);
}
#messages .sys-part .ico {
background: rgba(239, 68, 68, .16);
}
#messages .sys-quit {
background: rgba(245, 158, 11, .10);
border-color: rgba(245, 158, 11, .22);
}
#messages .sys-quit .ico {
background: rgba(245, 158, 11, .16);
}
/* dark mod uyumu (sende body.dark varsa) */
body.dark #messages .sys-evt {
border-color: rgba(148, 163, 184, .18);
background: rgba(2, 6, 23, .55);
}
.pm-bubble {
display: inline-block;
max-width: 85%;
padding: 10px 12px;
border-radius: 16px;
background: rgba(59, 130, 246, .12);
border: 1px solid rgba(59, 130, 246, .25);
margin: 6px 0;
}
.pm-bubble.system-bubble {
background: rgba(148, 163, 184, .15);
border-color: rgba(148, 163, 184, .25);
}
.pm-bubble-time {
font-size: 11px;
opacity: .7;
margin-top: 4px;
text-align: right;
}
/* avatar d na ta abilsin */
.ul-avatar-wrap{
overflow: visible !important;
}
/* Away rozeti: SOL ALT + d ar ta s n */
.away-indicator-dot{
position: absolute !important;
/* ? SOL ALT */
left: -5px !important;
bottom: 0px !important;
top: auto !important;
right: auto !important;
/* ? pill rozet */
width: auto !important;
height: 18px !important;
min-width: 18px !important;
padding: 0 6px !important;
border-radius: 999px !important;
background: #ff0000 !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
z-index: 999 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* ? i erideki "??" metnini tamamen sustur */
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
/* ? sadece istedi imiz ikon g r ns n */
.away-indicator-dot::before{
content: "??" !important; /* istersen zZ / AFK */
font-size: 12px !important;
line-height: 1 !important;
color: #fff !important;
}
.ul-avatar-wrap{
overflow: visible !important;
}
.away-indicator-dot{
position: absolute !important;
left: -5px !important;
bottom: 0px !important;
top: auto !important;
right: auto !important;
width: 18px !important;
height: 18px !important;
padding: 0 !important;
border-radius: 999px !important;
background: #ff0000 !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
z-index: 999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* ? i metni kesin sustur (?? ne gelirse gelsin g r nmez) */
overflow: hidden !important;
text-indent: -9999px !important;
white-space: nowrap !important;
}
/* ? rozetin g r nen i eri i: "-" */
.away-indicator-dot::before{
content: "-" !important;
text-indent: 0 !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 900 !important;
color: #fff !important;
/* ortalama i in */
display: block !important;
transform: translateY(-1px);
}
/* =========================
MOBİL RADYO / SES KONTROL FIX
========================= */
@media (max-width: 768px) {
/* Üst bar içindeki butonlar */
#radio-toggle {
padding: 6px 8px;
}
/* Radyo yazısını gizle, ikon kalsın */
#radio-toggle .label {
display: none;
}
/* Radyo ikonunu biraz küçült */
#radio-toggle i {
font-size: 14px;
}
/* Ses slider küçült */
input[type="range"].radio-volume,
.radio-volume {
width: 80px !important;
margin-left: 6px;
}
/* Ses ikonu küçült */
.radio-volume-icon,
.btn-volume i {
font-size: 14px;
}
/* Toolbar sıkışmayı önlesin */
.topbar,
.header-actions {
gap: 6px;
}
}
/* PM header video button - call ile aynı form */
.pm-actions-modern .pm-btn.btn-video{
background: rgba(34,197,94,.12);
border: 1px solid rgba(34,197,94,.35);
color: #22c55e;
}
.pm-actions-modern .pm-btn.btn-video:hover{
background: rgba(34,197,94,.18);
border-color: rgba(34,197,94,.55);
}
/* Video call modal (Swal içine gömülecek) */
.vcall-wrap{
display:flex;
gap:10px;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
.vcall-box{
width: min(320px, 45vw);
aspect-ratio: 16/10;
background: #0b1220;
border-radius: 14px;
overflow:hidden;
position:relative;
box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.vcall-box video{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
.vcall-label{
position:absolute;
left:10px;
bottom:10px;
padding:4px 8px;
border-radius:10px;
font-size:12px;
background: rgba(0,0,0,.45);
color:#fff;
}
/* Alıntı menüsü */
/* WhatsApp tarzı alıntı preview */
#reply-preview{
display:none;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px;
margin:0 6px 8px 6px;
border-radius:14px;
background: rgba(59,130,246,.10);
border: 1px solid rgba(59,130,246,.25);
}
#reply-preview .rp-left{
min-width:0;
flex:1;
border-left:4px solid rgba(59,130,246,.85);
padding-left:10px;
}
#reply-nick{
display:block;
font-size:12px;
opacity:.9;
}
#reply-text{
font-size:13px;
opacity:.85;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width: 100%;
}
#reply-cancel{
border:0;
background:transparent;
font-size:18px;
line-height:1;
cursor:pointer;
opacity:.8;
}
#reply-cancel:active{ transform: translateY(1px); }
/* Sağ tık menüsü */
#quote-menu{
background: rgba(15,23,42,.96);
color:#fff;
border:1px solid rgba(148,163,184,.25);
border-radius:12px;
padding:6px;
box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
#quote-menu button{
background: transparent;
border:0;
color:inherit;
padding:8px 10px;
border-radius:10px;
cursor:pointer;
width:100%;
text-align:left;
}
#quote-menu button:hover{
background: rgba(255,255,255,.08);
}
.msg-reply{
border-left:3px solid #3b82f6;
padding:4px 8px;
margin:4px 0 6px 0;
font-size:12px;
opacity:.9;
background: rgba(59,130,246,.08);
border-radius:6px;
}
.msg-reply .reply-nick{
display:block;
font-weight:600;
color:#3b82f6;
}
.msg-reply .reply-text{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:240px;
}
.msg-main{
display:block;
}
.msg-reply{
display:block;
border-left:3px solid #3b82f6;
padding:6px 8px;
margin:6px 0;
font-size:12px;
background: rgba(59,130,246,.08);
border-radius:6px;
}
.msg-reply .reply-nick{
display:block;
font-weight:600;
color:#3b82f6;
}
.msg-reply .reply-text{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ===============================
STORY (DURUM) RING - FINAL FIX
Role box-shadow ile çakışmasın diye pseudo-element kullanır
=============================== */
#userlist .ul-avatar-wrap{
position: relative; /* pseudo-element için şart */
}
#userlist .ul-avatar-wrap.has-story::after{
content: "";
position: absolute;
inset: -3px; /* dışa taşsın: halka dışarıda dursun */
border-radius: 999px;
box-shadow: 0 0 0 2px #ff1744;
animation: storyRingPulse 1.15s ease-in-out infinite;
pointer-events: none;
}
#userlist .ul-avatar-wrap.has-story.story-video::before{
content:"";
position:absolute;
right:-1px;
bottom:-1px;
width:16px;
height:16px;
border-radius:999px;
background: rgba(0,0,0,.55);
box-shadow: 0 0 0 2px rgba(255,255,255,.85);
pointer-events:none;
}
#userlist .ul-avatar-wrap.has-story.story-video{
overflow: visible; /* video etiketi kırpılmasın */
}
@keyframes storyRingPulse{
0% { box-shadow: 0 0 0 2px rgba(255, 23, 68, 1); }
60% { box-shadow: 0 0 0 4px rgba(255, 23, 68, .35); }
100% { box-shadow: 0 0 0 2px rgba(255, 23, 68, 1); }
}
#avatarSidebar .avatar-grid img.selected{
outline: 3px solid var(--primary);
border-radius: 12px;
}
/* === AVATAR CIRCLE FIX (story + bot avatar taşma) === */
#userlist .ul-avatar-wrap{
overflow: hidden !important; /* daire kırpma geri gelsin */
border-radius: 50% !important;
}
/* img daireyi tam doldursun, köşeler sızmasın */
#userlist .ul-avatar-img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: inherit !important; /* ekstra güvenlik */
display: block;
}
/* Video story rozetini daire İÇİNDE tut (taşmasın) */
#userlist .ul-avatar-wrap.has-story.story-video::before{
right: 2px !important;
bottom: 2px !important;
width: 14px !important;
height: 14px !important;
inset: auto !important;
}
#quote-menu{
background: rgba(15,23,42,.95);
border:1px solid rgba(255,255,255,.10);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
padding: 6px;
}
#quote-menu .qr{
border:0;
background: rgba(255,255,255,.10);
color:#fff;
border-radius: 10px;
padding: 6px 8px;
cursor:pointer;
font-size: 15px;
line-height: 1;
}
#quote-menu .qr:hover{ background: rgba(255,255,255,.18); }
#quote-btn{
margin-top:6px;
border:0;
background: rgba(59,130,246,.9);
color:#fff;
border-radius: 10px;
padding: 8px 10px;
cursor:pointer;
}
#quote-btn:hover{ filter: brightness(1.05); }
/* USER ACTION MENU - PROFIL KART */
#user-action-menu .uam-header{ padding:10px 12px; }
#user-action-menu .uam-profile{
display:flex; align-items:center; gap:10px;
}
#user-action-menu .uam-avatar{
width:44px; height:44px; border-radius:999px;
overflow:hidden; /* 🔥 taşma yok */
flex:0 0 44px;
position:relative;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
}
#user-action-menu .uam-avatar img{
width:100%; height:100%;
display:block;
object-fit:cover; /* 🔥 daire içi kırp */
}
#user-action-menu .uam-avatar.has-story{
border:2px solid rgba(168,85,247,.95);
box-shadow: 0 0 0 2px rgba(168,85,247,.15);
}
#user-action-menu .uam-presence{
position:absolute;
right:-2px; bottom:-2px;
width:12px; height:12px;
border-radius:50%;
border:2px solid rgba(15,23,42,.9);
background:#22c55e; /* online */
}
#user-action-menu .uam-presence.away{ background:#f59e0b; }
#user-action-menu .uam-meta{ min-width:0; line-height:1.1; }
#user-action-menu .uam-nick{
font-weight:800; font-size:14px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
max-width: 220px;
}
#user-action-menu .uam-note,
#user-action-menu .uam-sub{
margin-top:4px;
font-size:12px;
opacity:.85;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
max-width: 220px;
}
#user-action-menu .uam-sub{ font-size:11px; opacity:.75; }
/* ===============================
USER ACTION MENU - PROFIL KART (FIX)
base.css içindeki header (uppercase + muted) stilini override eder
=============================== */
.user-action-menu .uam-header{
padding: 10px 12px !important;
color: var(--text, #0f172a) !important; /* 🔥 soluk olmasın */
text-transform: none !important; /* 🔥 uppercase kapat */
letter-spacing: normal !important;
font-size: 13px !important;
border-bottom: 1px solid rgba(148,163,184,.18) !important;
}
.user-action-menu .uam-profile{
display:flex;
align-items:center;
gap:10px;
}
.user-action-menu .uam-avatar{
width:44px;
height:44px;
border-radius:999px;
overflow:hidden; /* 🔥 taşma yok */
flex:0 0 44px;
position:relative;
background: rgba(255,255,255,.08);
border: 1px solid rgba(148,163,184,.25);
}
.user-action-menu .uam-avatar img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.user-action-menu .uam-presence{
position:absolute;
right:-2px;
bottom:-2px;
width:12px;
height:12px;
border-radius:50%;
border:2px solid var(--panel, #fff);
background:#22c55e;
}
.user-action-menu .uam-presence.away{ background:#f59e0b; }
.user-action-menu .uam-meta{ min-width:0; line-height:1.15; }
.user-action-menu .uam-nick{
font-weight: 800;
font-size: 14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width: 220px;
}
.user-action-menu .uam-note{
margin-top:4px;
font-size:12px;
color: var(--muted, #475569);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width: 220px;
}
.user-action-menu .uam-sub{
margin-top:3px;
font-size:11px;
color: var(--muted, #64748b);
opacity:.9;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width: 220px;
}
/* ===============================
STORY HALKA - ZORLA KIRMIZI + GARANTİ
(pseudo ring kırpılmasın diye iptal, box-shadow ile sabitle)
=============================== */
#userlist .ul-avatar-wrap.has-story::after{
content: none !important; /* pseudo ring'i kapat */
}
#userlist .ul-avatar-wrap.has-story{
animation: storyPulseRed 1.05s ease-in-out infinite !important;
box-shadow:
0 0 0 2px #ff1744, /* ✅ net kırmızı halka */
0 0 0 1px rgba(15, 23, 42, .08) !important;
}
@keyframes storyPulseRed{
0%,100%{
box-shadow:
0 0 0 2px rgba(255, 23, 68, .40),
0 0 0 1px rgba(15, 23, 42, .08);
}
50%{
box-shadow:
0 0 0 2px rgba(255, 23, 68, 1),
0 0 14px rgba(255, 23, 68, .35),
0 0 0 1px rgba(15, 23, 42, .08);
}
}
/* Kanal/PM mesajlarındaki avatar için story halkası */
.pm-bubbles .pm-bubble-avatar-wrap{
position: relative; /* story-video ikonunun ::before’u için */
}
.pm-bubbles .pm-bubble-avatar-wrap.has-story{
animation: storyPulse 1.05s ease-in-out infinite;
box-shadow:
0 0 0 2px rgba(255,45,85,.9),
0 0 0 1px rgba(15, 23, 42, .08);
}
/* Video story ise küçük play ikonu */
.pm-bubbles .pm-bubble-avatar-wrap.story-video::before{
content:"▶";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
color:#fff;
text-shadow:0 0 6px rgba(0,0,0,.65);
pointer-events:none;
}
/* 1. Sunucu Baloncuğu (Tam eşleşme için) */
.svc-server {
background-color: rgba(255, 152, 0, 0.1) !important; /* Hafif turuncu arka plan */
color: #ff9800 !important; /* Turuncu yazı */
border: 1px solid rgba(255, 152, 0, 0.25) !important;
display: inline-flex !important;
align-items: center !important;
padding: 2px 8px !important;
border-radius: 8px !important;
font-weight: 700 !important;
margin-right: 5px !important;
}
/* 2. İkonun duruşu (Global'deki gibi olması için) */
.svc-server .svc-ico {
margin-right: 5px;
font-size: 14px;
line-height: 1;
}
/* 3. Saatleri ve gereksiz boşlukları (div.ini) kesin gizleme */
#messages .time,
#messages span.time,
.bubble .time {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
#story-btn{ position: relative; }
.story-dot{
position:absolute;
top:6px;
right:6px;
width:9px;
height:9px;
border-radius:50%;
background:#ff2d2d;
box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
/* Mikrofon ikonunu kırmızı/turuncu yapalım */
#voice-btn i {
color: #0d6efd !important;
}
/* Story ikonunu mor/pembe yapalım */
#story-btn i {
color: #e1306c !important;
}
/* ul-name satırında nick + rozet */
.ul-name{
display:flex;
align-items:center;
gap:6px;
min-width:0;
}
.ul-name-text{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.u-badge{
font-size:11px;
padding:2px 6px;
border-radius:999px;
line-height:1;
user-select:none;
white-space:nowrap;
}
.u-badge.lvl1{ background:#94a3b8; color:#020617 }
.u-badge.lvl2{ background:#22c55e; color:#022 }
.u-badge.lvl3{ background:#f97316; color:#fff }
.u-badge.lvl4{ background:#3b82f6; color:#fff }
.u-badge.lvl5{ background:linear-gradient(135deg,#ffd700,#ff7a00); color:#111 }
/* ul-name satırı: nick solda, rozet sağda sabit */
.ul-name{
display:flex;
align-items:center;
min-width:0;
width:100%;
}
/* nick solda kalsın, taşarsa kısalsın */
.ul-name-text{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* rozet daima sağa yaslansın */
.ul-name .u-badge{
margin-left:auto; /* ✅ hepsini sağa hizalar */
flex:0 0 auto;
}
#userlist li.ul-item{
display:flex;
align-items:center;
gap:8px;
}
/* ortadaki yazı alanı esnesin */
#userlist li.ul-item .ul-text{
flex: 1 1 auto;
min-width: 0;
}
/* en sağdaki alan */
#userlist li.ul-item .ul-end{
margin-left:auto; /* ✅ tam sona iter */
flex: 0 0 auto;
display:flex;
align-items:center;
}
.u-badge{
background:none !important;
border:none !important;
padding:0;
font-size:18px;
}
.u-badge.special{
font-size:12px;
margin-right:5px;
padding:2px 6px;
border-radius:999px;
background:#1e293b;
color:#fff;
}
.pm-video video{
max-width: 260px;
border-radius: 10px;
background:#000;
}
.chat-video-wrap { margin-top: 6px; }
.chat-video {
max-width: 320px;
width: 100%;
border-radius: 12px;
display: block;
}
/* =============================
H-CHAT LOG THEME STYLE
============================= */
body.mode-log #messages {
background-image: none !important;
padding-right: 16px !important;
}
/* Log satırı */
.log-entry {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 13px;
border-radius: 10px;
margin-bottom: 2px;
color: #334155;
background: rgba(255,255,255,0.45);
backdrop-filter: blur(6px);
transition: all .15s ease;
}
.log-entry:hover {
background: rgba(255,255,255,0.65);
}
/* Saat */
.log-time {
font-size: 11px;
color: #94a3b8;
min-width: 52px;
}
/* Badge genel */
.log-badge {
font-size: 10px;
padding: 3px 8px;
border-radius: 999px;
font-weight: 600;
letter-spacing: .3px;
}
/* JOIN */
.log-join {
background: rgba(34,197,94,0.15);
color: #16a34a;
}
/* PART / QUIT */
.log-part,
.log-quit {
background: rgba(239,68,68,0.15);
color: #dc2626;
}
/* MODE */
.log-mode {
background: rgba(245,158,11,0.15);
color: #d97706;
}
/* TOPIC */
.log-topic {
background: rgba(124,58,237,0.15);
color: #7c3aed;
}
/* RAW */
.log-raw {
background: rgba(100,116,139,0.12);
color: #64748b;
}
/* İçerik */
.log-content {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Nick */
.log-nick {
font-weight: 600;
color: #2563eb;
}
/* Host */
.log-host {
font-size: 11px;
color: #94a3b8;
}
.log-chan{ font-weight:600; color:#7c3aed; }
.log-mode-text{ color:#0f172a; font-weight:700; margin-left:6px; }
.log-topic-text{ color:#0f172a; font-weight:600; margin-left:6px; }
.log-kick{ background:rgba(14,165,233,.15); color:#0284c7; border-color:rgba(14,165,233,.30); }
.log-nick{ background:rgba(59,130,246,.15); color:#2563eb; border-color:rgba(59,130,246,.30); }
.log-invite{ background:rgba(16,185,129,.15); color:#059669; border-color:rgba(16,185,129,.30); }
.log-log{ background:rgba(100,116,139,.12); color:#475569; border-color:rgba(100,116,139,.22); }
/* ===== OPERLOG Güçlendirme ===== */
/* Varsayılan OPER badge */
.log-log{
background: rgba(99,102,241,.18);
color: #4f46e5;
border: 1px solid rgba(99,102,241,.35);
}
/* Log satırı biraz daha belirgin */
.log-entry{
border: 1px solid rgba(148,163,184,.18);
box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
/* İçerik biraz daha koyu */
.log-content{
color:#0f172a;
font-weight:500;
}
/* =============================
LOG MOBILE FIX
============================= */
@media (max-width: 576px){
body.mode-log #messages{
padding-right: 8px !important;
padding-left: 8px !important;
}
.log-entry{
flex-wrap: wrap;
align-items: flex-start;
gap: 6px 8px;
padding: 8px 10px;
border-radius: 12px;
margin-bottom: 6px;
font-size: 12.5px;
}
/* Saat: sağ üstte küçük, yer kaplamasın */
.log-time{
order: 3;
min-width: auto;
margin-left: auto;
font-size: 10.5px;
opacity: .85;
}
/* Badge: daha kompakt */
.log-badge{
padding: 2px 7px;
font-size: 10px;
}
/* İçerik: mobilde 2-3 satır göster (ellipsis yerine) */
.log-content{
order: 2;
flex: 1 1 100%;
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.25;
word-break: break-word;
}
/* Host: alt satıra düşsün, daha soluk */
.log-host{
display: inline-block;
margin-top: 2px;
opacity: .85;
}
/* Nick/chan/topic metinleri: taşmayı azalt */
.log-mode-text,
.log-topic-text{
margin-left: 4px;
font-weight: 700;
}
}
/* === WhatsApp-style Video Call (remote full, local PiP) === */
.vcall-wa{
padding: 12px;
}
/* Remote büyük alan */
.vcall-wa .vcall-box-remote{
width:100% !important;
height: min(70dvh, 620px);
border-radius: 18px;
overflow:hidden;
position:relative;
border: 1px solid rgba(148,163,184,.25);
background:#0b1220;
}
/* Remote video tam doldursun */
.vcall-wa #vcall-remote{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
/* Local küçük pencere (PiP) */
.vcall-pip{
position:absolute;
right: 12px;
bottom: 12px;
width: min(34vw, 170px);
height: min(22dvh, 210px);
border-radius: 14px;
overflow:hidden;
border: 1px solid rgba(255,255,255,.25);
background:#000;
box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
/* Local video PiP içinde */
.vcall-pip #vcall-local{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
/* Etiketler */
.vcall-label{
position:absolute;
left: 10px;
bottom: 10px;
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
background: rgba(0,0,0,.45);
color:#fff;
}
.vcall-label.pip{
left: 8px;
bottom: 8px;
font-size: 11px;
}
/* Küçük ekran iyileştirme */
@media (max-width: 420px){
.vcall-wa .vcall-box-remote{
height: min(74dvh, 620px);
}
.vcall-pip{
width: min(40vw, 160px);
height: min(20dvh, 190px);
right: 10px;
bottom: 10px;
}
}
.oxm-msg span[style*="background-color"]{
display:inline !important;
width:auto !important;
padding:0 3px !important;
border-radius:4px !important;
white-space:nowrap !important;
}
.ctxmenu{
position: fixed;
z-index: 999999;
min-width: 220px;
background: rgba(15,23,42,.98);
border: 1px solid rgba(148,163,184,.18);
border-radius: 14px;
padding: 8px;
box-shadow: 0 18px 45px rgba(0,0,0,.35);
backdrop-filter: blur(8px);
}
.ctx-title{
font-size: 12px;
color: #cbd5e1;
padding: 6px 8px;
opacity: .9;
}
.ctx-sep{
height: 1px;
background: rgba(148,163,184,.14);
margin: 6px 0;
}
.ctx-item{
width: 100%;
text-align: left;
border: 0;
background: transparent;
color: #e2e8f0;
padding: 10px 10px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
}
.ctx-item:hover{
background: rgba(148,163,184,.12);
}
.ctx-item:disabled{
opacity: .45;
cursor: not-allowed;
}
.story-like{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background: rgba(255,0,80,.08);
}
.story-like b{ font-weight:700; }
.story-like-count{ opacity:.75; }