/*
* ═══════════════════════════════════════════════════════════════
* GPTMAX — CHAT ROOM THEME OVERRIDE
* gptmax-chat-theme.css
* ═══════════════════════════════════════════════════════════════
*
* Propósito:
* Sobrescrever o estilo padrão do chatnet.css e color_css.css
* nas páginas de sala de bate-papo, alinhando o visual ao da
* landing page GPTMax. Suprime os temas light/dark do template
* e impõe sempre o tema dark da landing.
*
* Como usar:
* Registrar como nova rota no framework (similar a url('color_css'))
* e incluir no do chat_room.html APÓS as outras folhas:
*
*
* ← este
*
* O que este arquivo cobre:
* 1. Variáveis e reset global
* 2. Room bar (coluna de ícones à esquerda)
* 3. Sidebar / channel bar (lista de canais)
* 4. Topbar (barra de título do canal)
* 5. Channel list bottom (avatar + menu do usuário)
* 6. Área principal de mensagens (main-panel / chat-scroll)
* 7. Balões de mensagem (sent / replies)
* 8. Right panel (lista de membros / mídia)
* 9. Editor de mensagens
* 10. Painel de GIFs / Stickers / Emoji
* 11. Dropdowns e menus de contexto
* 12. Card de gerenciamento de sala (chat_room_update.html)
* 13. Modais internos do sistema
* 14. Indicadores de status online/unread
* 15. Supressão do toggle light/dark
* 16. Scrollbars
* 17. Responsivo mobile
* ═══════════════════════════════════════════════════════════════
*/
/* ── Fontes (mesmas da landing page) ───────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap');
/* ══════════════════════════════════════════════════════════════
1. VARIÁVEIS E RESET GLOBAL
══════════════════════════════════════════════════════════════ */
:root {
/* Paleta principal — espelha a landing page */
--gm-blurple: #5865F2;
--gm-blurple-dark: #4752C4;
--gm-blurple-dim: rgba(88, 101, 242, 0.15);
--gm-green: #57F287;
--gm-yellow: #FEE75C;
--gm-fuchsia: #EB459E;
--gm-red: #ED4245;
/* Backgrounds — hierarquia de profundidade Discord-dark */
--gm-bg-primary: #313338;
/* área de chat */
--gm-bg-secondary: #2B2D31;
/* sidebar de canais */
--gm-bg-tertiary: #1E1F22;
/* room bar (ícones) */
--gm-bg-accent: #404249;
/* inputs, hover suave */
--gm-bg-card: #232428;
/* cards, dropdowns */
/* Texto */
--gm-text-normal: #DBDEE1;
--gm-text-muted: #80848E;
--gm-text-link: #00AFF4;
--gm-header-primary: #F2F3F5;
--gm-header-secondary: #B5BAC1;
/* Bordas */
--gm-border: rgba(255, 255, 255, 0.06);
--gm-border-strong: rgba(255, 255, 255, 0.12);
/* Balões de mensagem */
--gm-sent-bg: #475569;
--gm-recv-bg: #4d5560;
--gm-msg-color: #eee;
}
/*
* Força o tema dark globalmente, independente da classe .light/.dark
* injetada pelo Twig no . Isso suprime a necessidade de dois
* temas separados no template.
*/
html,
html.light,
html.dark {
color-scheme: dark;
}
body,
.incallx {
background-color: var(--gm-bg-primary) !important;
color: var(--gm-text-normal) !important;
font-family: 'Nunito', sans-serif !important;
}
/* ══════════════════════════════════════════════════════════════
2. ROOM BAR — coluna de ícones à esquerda
Alvo: .room-bar (chatnet.css: background #e3e5e8)
══════════════════════════════════════════════════════════════ */
.room-bar {
background-color: var(--gm-bg-tertiary) !important;
}
/* Separador horizontal entre logo e lista de salas */
.mini-brand-seperator {
background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Ícones Tabler dentro da room-bar */
.room-bar .ti {
color: var(--gm-text-muted);
transition: color 0.15s;
}
.room-bar .cn-tab:hover .ti {
color: var(--gm-header-primary);
}
/* Indicador lateral pill (active state) */
.pill {
background: var(--gm-header-primary) !important;
}
/* Salas na room-bar — ícone quadrado arredondado */
.chatroom-item {
background-color: var(--gm-bg-secondary) !important;
transition: border-radius 0.2s, background 0.2s;
}
.room-list-item:hover .chatroom-item,
.room-list-item .chatroom-item.active {
border-radius: 35% !important;
background-color: var(--gm-blurple) !important;
}
/* Botões de ação (explorar, gerenciar, etc.) */
.action-item {
background: var(--gm-bg-secondary) !important;
color: var(--gm-text-muted);
transition: background 0.2s, border-radius 0.2s, color 0.2s;
}
.action-item:hover {
background: var(--gm-blurple) !important;
border-radius: 35% !important;
color: #fff !important;
}
.action-item.active,
.action-item[class*="active"] {
/* background: var(--gm-blurple) !important; */
}
/* ══════════════════════════════════════════════════════════════
15. SUPRESSÃO DO TOGGLE LIGHT/DARK (posicionado aqui para
substituir o valor de color_css.css o mais cedo possível)
Alvo: link-dark com ícones ti-moon-stars e ti-sun
══════════════════════════════════════════════════════════════ */
/*
* Esconde os botões de troca de tema. Como o toggle está dentro
* de div.me-2.d-flex no channel-list-bottom, usamos o ícone
* específico como âncora sem precisar tocar no HTML.
*/
.channel-list-bottom .ti-moon-stars,
.channel-list-bottom .ti-sun,
.channel-list-bottom a:has(.ti-moon-stars),
.channel-list-bottom a:has(.ti-sun) {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════
3. SIDEBAR / CHANNEL BAR
Alvo: .sidebar-wrapper, .channel-bar, .channel-list
(chatnet.css: background #f2f3f5; color_css: #2b2d31)
══════════════════════════════════════════════════════════════ */
.sidebar-wrapper {
background-color: var(--gm-bg-secondary) !important;
}
.channel-bar {
background-color: var(--gm-bg-secondary);
}
.channel-list {
background-color: var(--gm-bg-secondary) !important;
padding-bottom: 8px;
}
/* Categoria (texto uppercase acima dos canais) */
.channel-cat {
color: var(--gm-text-muted) !important;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 4px;
}
.channel-cat:hover {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-header-secondary) !important;
}
/* Item de canal */
.channel-item {
color: var(--gm-text-muted);
border-radius: 6px;
transition: background 0.1s, color 0.1s;
}
.channel-item:hover {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-header-primary) !important;
}
.channel-item.active {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-header-primary) !important;
}
/* Nome da sala no topbar da sidebar */
.room-name .dropdown-toggle,
.room-title {
color: var(--gm-header-primary) !important;
font-family: 'Fredoka One', cursive !important;
letter-spacing: 0.02em;
}
/* Seção de descoberta de salas */
.disc-cat-row {
color: var(--gm-text-muted) !important;
border-radius: 6px;
}
.disc-cat-row:hover {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-header-primary) !important;
}
/* Rádio — painel */
.radio-station {
color: var(--gm-text-normal) !important;
border-radius: 6px;
padding: 6px 8px;
transition: background 0.15s;
}
.radio-station:hover {
color: var(--gm-header-primary) !important;
background: var(--gm-bg-accent);
}
/* Sidebar private (mensagens diretas) */
.topbar-private {
background-color: var(--gm-bg-secondary) !important;
border-bottom: 1px solid var(--gm-border) !important;
}
/* pvt-cnl (ícone de cadeado em canais privados) */
.pvt-cnl {
background: var(--gm-bg-secondary) !important;
}
.active .pvt-cnl,
.channel-item:hover .pvt-cnl {
background: var(--gm-bg-accent) !important;
}
.top-channel-icon .pvt-cnl {
background: var(--gm-bg-primary) !important;
}
/* ══════════════════════════════════════════════════════════════
4. TOPBAR — barra superior do painel de chat
Alvo: .navbar.topbar, .page-content-wrapper .topbar
(chatnet.css: border-bottom rgba; color_css: var(--dark-bg))
══════════════════════════════════════════════════════════════ */
.navbar.topbar,
.navbar-scrolled {
background-color: var(--gm-bg-primary) !important;
border-bottom: 1px solid var(--gm-border) !important;
color: var(--gm-text-normal) !important;
}
.navbar-scrolled .nav-link,
.navbar-scrolled .nav-link:hover,
.navbar-scrolled .nav-link.active {
color: var(--gm-text-normal) !important;
}
/* Nome do canal no topbar */
.top-channel-name {
color: var(--gm-header-primary);
font-weight: 700;
}
/* Botão toggle sidebar */
.btn-ghost-dark {
color: var(--gm-text-muted) !important;
}
.btn-ghost-dark:hover,
.btn-ghost-dark:active {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-header-primary) !important;
}
/* Topbar da sidebar de canais */
.topbar-channels {
background-color: transparent !important;
border-bottom: 1px solid var(--gm-border) !important;
}
/* ══════════════════════════════════════════════════════════════
5. CHANNEL LIST BOTTOM — avatar e menu do usuário logado
Alvo: .channel-list-bottom (color_css.css: background #232428)
══════════════════════════════════════════════════════════════ */
.channel-list-bottom {
background: var(--gm-bg-card) !important;
border-top: 1px solid var(--gm-border);
}
.channel-list-bottom .dropdown-toggle {
color: var(--gm-text-normal) !important;
border-radius: 6px;
transition: background 0.15s;
}
.channel-list-bottom .dropdown-toggle:hover {
background-color: var(--gm-bg-accent) !important;
}
.username-bottom {
color: var(--gm-text-normal) !important;
font-weight: 700;
}
/* ══════════════════════════════════════════════════════════════
6. ÁREA PRINCIPAL DE MENSAGENS
Alvo: .main-panel, .page-content-wrapper, body color
══════════════════════════════════════════════════════════════ */
.main-panel,
.page-content-wrapper {
background-color: var(--gm-bg-primary);
}
/* Área de scroll de mensagens */
.chat-scroll,
.height-scroll-chat {
background-color: var(--gm-bg-primary);
}
/* Linha de data ("Hoje", "Ontem") */
.new-date p {
color: var(--gm-text-muted);
font-size: 12px;
font-weight: 700;
}
/* Timestamp das mensagens */
.message-time {
color: var(--gm-text-muted) !important;
}
/* Link dentro de mensagens */
.message-html a,
.chat-txt a {
color: var(--gm-text-link);
}
/* Indicador de digitação */
.is-typing {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-text-muted) !important;
border-radius: 8px;
}
.is-typing:before {
border-left-color: var(--gm-bg-accent) !important;
border-top-color: var(--gm-bg-accent) !important;
}
/* Mensagens do sistema (non-login, non-join, etc.) */
.non-login-message,
.non-join-message,
.non-chat-select,
.user-restricted,
.permission-denied-editor,
.forward-selection {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-text-normal) !important;
border-radius: 10px;
}
/* ══════════════════════════════════════════════════════════════
7. BALÕES DE MENSAGEM
Alvo: .sent .chat-txt etc., .replies .chat-txt etc.
(color_css.css: --sent-background / --received-background)
══════════════════════════════════════════════════════════════ */
/*
* color_css.css já usa variáveis CSS para os balões.
* Redefinimos as variáveis aqui para que todos os seletores
* que usam var(--sent-background) herdem automaticamente.
*/
:root {
--sent-background: #475569;
--sent-color: #eee;
--received-background: #4d5560;
--received-color: #eee;
}
/* Nome do remetente acima da mensagem */
.cht.replies .message-data small {
color: var(--gm-blurple) !important;
}
/* Balão de resposta (quoted reply) */
.replied-content,
.replies .replied-to {
/* background: #404C5E !important;
color: var(--gm-text-normal) !important;
border-radius: 6px; */
}
.reply-msg-row .replied-to,
.reply-msg-row .replied-content {
background-color: var(--gm-bg-card) !important;
color: var(--gm-text-normal) !important;
}
.reply-msg-row {
background-color: var(--gm-bg-accent) !important;
}
/* Reações de emoji */
.current-reacts {
background: var(--gm-bg-card) !important;
border: 1px solid var(--gm-border);
border-radius: 8px;
}
/* Ações de mensagem (hover — editar, deletar) */
.chat-actions i {
color: var(--gm-text-muted) !important;
}
.chat-actions i:hover {
color: var(--gm-header-primary) !important;
}
/* Link meta (preview de URL) */
.link-meta {
border-radius: 6px;
}
/* Seção de arquivo */
.sent a.file-header,
.replies a.file-header {
color: var(--gm-msg-color) !important;
}
/* Código highlight — forçar tema escuro independente da classe */
.media-tab .file-section {
background-color: var(--received-background) !important;
}
.media-tab .file-header {
color: var(--received-color) !important;
}
/* ══════════════════════════════════════════════════════════════
8. RIGHT PANEL — lista de membros / mídia
Alvo: .rightbar-wrapper, #rpanel-tab, .nav-pills
(color_css: --dark-bg; chatnet: background #f8fafc)
══════════════════════════════════════════════════════════════ */
.rightbar-wrapper {
background-color: var(--gm-bg-secondary) !important;
border-left: 1px solid var(--gm-border) !important;
}
/* Abas do right panel (Membros / Fotos / Vídeos / Arquivos / Links) */
#rpanel-tab {
background-color: var(--gm-bg-secondary) !important;
border-bottom: 1px solid var(--gm-border);
}
.right-panel .nav-pills .nav-link {
color: var(--gm-text-muted);
border-radius: 6px;
transition: background 0.15s, color 0.15s;
}
.right-panel .nav-pills .nav-link:hover {
color: var(--gm-header-primary);
background: var(--gm-bg-accent);
}
.right-panel .nav-pills .nav-link.active,
.right-panel .nav-pills .show>.nav-link {
color: var(--gm-header-primary) !important;
background-color: var(--gm-bg-accent) !important;
}
/* Linha de usuário na lista de membros */
.user-row:hover {
color: var(--gm-text-normal) !important;
background-color: var(--gm-bg-accent) !important;
}
/* Avatar de usuário — borda escura */
.user-image,
.channel-user-image img {
border-color: var(--gm-bg-card) !important;
}
/* Painel de perfil (sidebar direita) */
.profile-header {
border: 0 !important;
}
.profile-header .profile-header-info {
color: var(--gm-text-normal) !important;
background-color: var(--gm-bg-secondary) !important;
}
.profile-header-user-avatar {
border-color: var(--gm-bg-secondary) !important;
}
/* Nav pills genérico (dentro de painéis) */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: var(--gm-text-normal) !important;
background-color: var(--gm-bg-accent) !important;
}
.sidebar-profile .nav-link {
color: var(--gm-text-normal) !important;
}
.sidebar-profile .nav-link:hover {
color: var(--gm-text-normal) !important;
background-color: var(--gm-bg-accent) !important;
}
/* ══════════════════════════════════════════════════════════════
9. EDITOR DE MENSAGENS
Alvo: .editor-container, .editor-wrap, .attachments-container
(chatnet.css: background #EBEDEF; color_css: var(--input-bg))
══════════════════════════════════════════════════════════════ */
.editor-wrap {
background-color: var(--gm-bg-primary);
border-top: 1px solid var(--gm-border);
}
.editor-container {
background-color: var(--gm-bg-accent) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 10px !important;
margin: 12px 16px !important;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* Foco no editor */
.editor-container:focus-within {
border-color: rgba(88, 101, 242, 0.5) !important;
box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.12) !important;
}
/* Área editável do Summernote */
.editor-container .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
color: var(--gm-text-normal) !important;
background-color: transparent !important;
caret-color: var(--gm-header-primary);
}
.note-editor.note-frame {
background: transparent !important;
}
/* Ícones do editor (emoji, GIF, sticker, anexo) */
.editor-icon {
color: var(--gm-text-muted) !important;
}
.editor-icon:hover {
color: var(--gm-blurple) !important;
}
/* Container de anexos (GIF/sticker/emoji) */
.attachments-container {
background-color: var(--gm-bg-secondary) !important;
border: 1px solid var(--gm-border) !important;
border-radius: 10px;
margin: 0 16px 0 !important;
}
/* Input de busca de GIFs */
.gif-search-input,
.gif-search-input:focus {
background-color: var(--gm-bg-accent) !important;
color: var(--gm-text-normal) !important;
border-color: transparent !important;
}
/* ══════════════════════════════════════════════════════════════
10. PAINEL DE GIFs / STICKERS / EMOJI — abas internas
Alvo: .attachments-container .nav-pills
══════════════════════════════════════════════════════════════ */
.attachments-container .nav-pills .nav-link {
color: var(--gm-text-muted);
border-radius: 6px;
font-weight: 700;
font-size: 13px;
}
.attachments-container .nav-pills .nav-link:hover {
color: var(--gm-header-primary);
background: var(--gm-bg-accent);
}
.attachments-container .nav-pills .nav-link.active {
color: #fff !important;
background: var(--gm-blurple) !important;
}
/* Emoji picker */
#cnemoji-leftlist,
.cnemoji-categname,
#cnemoji-info {
background-color: var(--gm-bg-secondary) !important;
}
#cnemoji-leftlist>svg {
fill: var(--gm-text-muted) !important;
}
/* ══════════════════════════════════════════════════════════════
11. DROPDOWNS E MENUS DE CONTEXTO
Alvo: .dropdown-menu (color_css: background #232428)
══════════════════════════════════════════════════════════════ */
.dropdown-menu {
background: var(--gm-bg-card) !important;
border: 1px solid var(--gm-border) !important;
border-radius: 10px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
color: var(--gm-text-normal) !important;
padding: 6px !important;
}
.dropdown-item {
color: var(--gm-text-normal) !important;
border-radius: 6px;
font-size: 14px;
padding: 7px 12px;
transition: background 0.12s;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
color: var(--gm-header-primary) !important;
background-color: var(--gm-bg-accent) !important;
}
.dropdown-header {
color: var(--gm-text-muted) !important;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 12px 2px;
}
.dropdown-divider {
border-color: var(--gm-border) !important;
margin: 4px 0 !important;
}
/* Channel list bottom dropdown específico */
.channel-list-bottom .dropdown-item {
color: var(--gm-text-normal) !important;
}
/* Popover (reações, perfil rápido) */
.popover {
background-color: var(--gm-bg-card) !important;
border: 1px solid var(--gm-border) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.popover-body {
color: var(--gm-text-normal) !important;
}
.bs-popover-top>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
border-top-color: var(--gm-bg-card) !important;
}
.bs-popover-bottom>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
border-bottom-color: var(--gm-bg-card) !important;
}
/* ══════════════════════════════════════════════════════════════
12. CARD DE GERENCIAMENTO DE SALA (chat_room_update.html)
Alvo: .card, .card-header, .card-footer, .card-body,
.nav-tabs.card-header-tabs, .table
══════════════════════════════════════════════════════════════ */
.card {
background-color: var(--gm-bg-secondary) !important;
border: 1px solid var(--gm-border) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
transition: 0.3s;
}
.card-header {
background-color: var(--gm-bg-card) !important;
border-bottom: 1px solid var(--gm-border) !important;
color: var(--gm-header-secondary) !important;
border-radius: 12px 12px 0 0 !important;
}
.card-footer {
background-color: var(--gm-bg-card) !important;
border-top: 1px solid var(--gm-border) !important;
border-radius: 0 0 12px 12px !important;
}
.card-body {
color: var(--gm-text-normal);
}
/* Abas do card (General / Advance / Members) */
.card-header-tabs .nav-link {
color: var(--gm-text-muted);
border-radius: 6px 6px 0 0;
font-weight: 700;
font-size: 13px;
transition: color 0.15s, background 0.15s;
}
.card-header-tabs .nav-link:hover {
color: var(--gm-header-primary);
background: var(--gm-bg-accent);
}
.card-header-tabs .nav-link.active,
.card-header-tabs .nav-link:hover {
color: var(--gm-blurple) !important;
border-color: var(--gm-border) var(--gm-border) var(--gm-bg-card) !important;
background-color: var(--gm-bg-card) !important;
}
/* Títulos dentro do card */
.card-room-info h2,
.card h2 {
color: var(--gm-header-primary) !important;
font-family: 'Fredoka One', cursive;
font-size: 20px;
font-weight: 400;
}
/* Tabela de membros */
.table {
color: var(--gm-text-normal) !important;
}
.table th {
color: var(--gm-text-muted) !important;
border-color: var(--gm-border) !important;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.table td {
border-color: var(--gm-border) !important;
vertical-align: middle;
}
.table-bordered {
border-color: var(--gm-border) !important;
}
/* Form label dentro do card */
.form-label,
.card .form-label {
color: var(--gm-header-secondary) !important;
font-weight: 700;
font-size: 13px;
}
/* Inputs dentro do card */
.card .form-control,
.card .form-select {
background-color: var(--gm-bg-accent) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 8px !important;
color: var(--gm-text-normal) !important;
transition: border-color 0.2s, box-shadow 0.2s;
}
.card .form-control:focus,
.card .form-select:focus {
border-color: rgba(88, 101, 242, 0.5) !important;
box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.12) !important;
color: var(--gm-header-primary) !important;
}
/* Switch / Toggle */
.form-check-input {
background-color: var(--gm-bg-accent) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
.form-check-input:checked {
background-color: var(--gm-blurple) !important;
border-color: var(--gm-blurple) !important;
}
/* Botão submit do card */
.card-footer .btn-dark,
.update-chatroom {
background: var(--gm-blurple) !important;
color: #fff !important;
border: none !important;
border-radius: 28px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
padding: 9px 24px !important;
box-shadow: 0 4px 16px rgba(88, 101, 242, 0.4);
transition: all 0.2s;
}
.card-footer .btn-dark:hover,
.update-chatroom:hover {
background: var(--gm-blurple-dark) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(88, 101, 242, 0.55) !important;
}
/* form-selectgroup (checkboxes visuais de permissão) */
.form-selectgroup-label {
background: var(--gm-bg-accent) !important;
border: 1px solid var(--gm-border) !important;
color: var(--gm-text-normal) !important;
border-radius: 6px;
transition: all 0.15s;
}
.form-selectgroup-label:hover {
background: var(--gm-bg-accent) !important;
border-color: rgba(88, 101, 242, 0.4) !important;
}
.form-selectgroup-input:checked+.form-selectgroup-label {
background: var(--gm-blurple) !important;
border-color: var(--gm-blurple) !important;
color: #fff !important;
}
.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-title {
color: #fff !important;
}
/* room-manage-row (linhas de gerenciamento) */
.room-manage-row {
color: var(--gm-text-normal) !important;
border-radius: 6px;
}
.room-manage-row:hover {
background-color: var(--gm-bg-accent) !important;
}
/* ══════════════════════════════════════════════════════════════
13. MODAIS INTERNOS DO SISTEMA
Alvo: .modal-content, .modal-header
(color_css: background var(--dark-bg))
══════════════════════════════════════════════════════════════ */
.modal-content {
background-color: var(--gm-bg-secondary) !important;
border: 1px solid var(--gm-border) !important;
border-radius: 16px !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.modal-header {
background-color: var(--gm-bg-card) !important;
border-bottom: 1px solid var(--gm-border) !important;
border-radius: 16px 16px 0 0 !important;
color: var(--gm-header-primary) !important;
}
.modal-body {
color: var(--gm-text-normal);
}
.modal-footer {
border-top: 1px solid var(--gm-border) !important;
background-color: var(--gm-bg-card) !important;
border-radius: 0 0 16px 16px !important;
}
.btn-close {
filter: invert(1) !important;
}
/* Offcanvas (painel deslizante lateral) */
.offcanvas {
background: var(--gm-bg-card) !important;
}
.offcanvas.offcanvas-end {
border-color: var(--gm-border) !important;
}
.offcanvas-header .btn-close {
filter: invert(1) !important;
}
/* ══════════════════════════════════════════════════════════════
14. INDICADORES DE STATUS E UNREAD
══════════════════════════════════════════════════════════════ */
/* Bolinha de unread na room-bar */
.unread-indicator {
background-color: var(--gm-header-primary) !important;
}
/* Indicador de status online/offline/busy/away */
.online-status .ti {
background: var(--gm-bg-tertiary) !important;
border-radius: 50%;
}
.user-row:hover .online-status .ti {
background: var(--gm-bg-accent) !important;
}
/* Toast de notificação */
.toast {
background: var(--gm-bg-accent) !important;
color: var(--gm-text-normal) !important;
border: 1px solid var(--gm-border);
border-radius: 10px;
}
/* Notificações */
.noti-item {
background: var(--gm-bg-accent) !important;
border-radius: 8px;
}
.noti-item.noti-read {
background: var(--gm-bg-primary) !important;
}
.noti-item:hover {
background: var(--gm-bg-card) !important;
}
.noti-time {
color: var(--gm-green) !important;
}
.noti-content {
color: var(--gm-text-normal) !important;
}
/* Search results */
.chat-search-results {
color: var(--gm-text-normal) !important;
}
.chat-search-result {
background: var(--gm-bg-secondary) !important;
border-radius: 8px;
}
.chat-search-result:hover {
background-color: var(--gm-bg-accent) !important;
}
/* ══════════════════════════════════════════════════════════════
16. SCROLLBARS
══════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 3px;
}
*::-webkit-scrollbar-track {
background: transparent !important;
}
*:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22) !important;
}
/* ══════════════════════════════════════════════════════════════
EXTRAS — elementos pontuais do color_css.css que precisam
de override mas não se encaixam nas seções acima
══════════════════════════════════════════════════════════════ */
/* Links globais */
a {
color: var(--gm-text-link);
}
a:hover {
color: /* var(--gm-blurple) */ #fff;
}
.link-dark,
.link-dark:hover,
.link-dark:focus {
color: var(--gm-text-normal) !important;
}
/* Input de busca (sidebar) */
.form-control {
background-color: var(--gm-bg-accent) !important;
border-color: transparent !important;
color: var(--gm-text-normal) !important;
border-radius: 8px;
}
.form-control::placeholder {
color: var(--gm-text-muted) !important;
}
.form-control:focus {
color: var(--gm-header-primary) !important;
background-color: var(--gm-bg-accent) !important;
border-color: rgba(88, 101, 242, 0.5) !important;
box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.12) !important;
}
/* Input group flat (busca de GIFs, busca de usuários) */
.input-group-flat .input-group-text {
background: var(--gm-bg-accent) !important;
border-color: transparent !important;
color: var(--gm-text-muted);
}
.input-group-flat:focus-within .form-control,
.input-group-flat:focus-within .input-group-text {
border-color: rgba(88, 101, 242, 0.5) !important;
}
/* Texto muted */
.text-muted {
color: var(--gm-text-muted) !important;
}
/* form-hint */
.form-hint {
color: var(--gm-text-muted) !important;
}
/* Botão "Load more" */
.btn-secondary {
background: var(--gm-bg-accent) !important;
color: var(--gm-text-normal) !important;
border: 1px solid var(--gm-border) !important;
border-radius: 8px !important;
transition: all 0.2s;
}
.btn-secondary:hover {
background: var(--gm-blurple) !important;
border-color: var(--gm-blurple) !important;
color: #fff !important;
}
/* btn-danger (kick, hangup, fechar emoji panel) */
.btn-danger {
background: var(--gm-red) !important;
border-color: var(--gm-red) !important;
border-radius: 8px;
}
/* ══════════════════════════════════════════════════════════════
17. RESPONSIVO MOBILE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Dropdown e menus mais compactos */
.dropdown-menu {
border-radius: 10px !important;
}
/* Editor com menos margem */
.editor-container {
margin: 8px !important;
border-radius: 8px !important;
}
/* Room bar mais estreita */
.room-bar {
width: 4rem !important;
}
}
/* ══════════════════════════════════════════════════════════════
18. ADICIONAL MANUAL PRA ESTILIZAR MENSAGENS NO CHAT
══════════════════════════════════════════════════════════════ */
.cht.sent .message-data {
color: var(--sent-color);
background: revert;
box-shadow: 2px 2px 4px -3px rgb(0 0 0 / 0%) !important;
}
.cht.replies .message-data {
color: var(--received-color);
background: revert;
box-shadow: 2px 2px 4px -3px rgb(0 0 0 / 0%);
}
.cht.replies .message-data, .replies a.file-header {
color: var(--received-color);
background: revert;
}
.sent .chat-img-sgl, .sent .chat-img-duo, .sent .chat-img-grp, .sent .chat-gif, .sent .chat-txt, .sent .chat-code, .chat-fwd, .sent .link-meta, .sent .file-section, .sent .video-section, .sent .chat-replied-bubble, .sent .chat-audio {
background: revert;
}
div[data-msg-type="5"].cht.sent .chat-txt, div[data-msg-type="5"].cht.sent .link-preview {
box-shadow: revert;
}
.sent .message-data:before {
border-color: revert;
content: revert;
.replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .chat-code, .replies .message-data small, .replies .chat-fwd, .replies .link-meta, .replies .file-section, .replies .video-section, .replies .chat-replied-bubble, .replies .chat-audio {
background: revert;
}}
.replies .message-data:after {
border-color: revert;
content: revert;
}
div[data-msg-type="5"].cht.replies .chat-txt, div[data-msg-type="5"].cht.replies .link-preview {
box-shadow: revert;
}
.replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .chat-code, .replies .message-data small, .replies .chat-fwd, .replies .link-meta, .replies .file-section, .replies .video-section, .replies .chat-replied-bubble, .replies .chat-audio {
background: revert;
}
.replied-content, .replies .replied-to {
background: revert;
color: var(--default-text-color);
}