/* =========================================================================== Tempero Koncord — aplicado por cima dos apps prontos (chat e notas). Não é fork: entra como injetado na resposta HTML pelo servidor, então atualizar o app de origem não perde o tema. =========================================================================== */ :root, :host, body{ /* paleta do Koncord, no formato de tripla RGB que o MDUI espera */ --mdui-color-primary-dark: 255,90,31; --mdui-color-on-primary-dark: 14,14,17; --mdui-color-primary-container-dark: 74,28,10; --mdui-color-on-primary-container-dark: 255,214,196; --mdui-color-inverse-primary-dark: 255,90,31; --mdui-color-secondary-dark: 200,196,208; --mdui-color-secondary-container-dark: 40,40,49; --mdui-color-background-dark: 14,14,17; --mdui-color-on-background-dark: 242,239,234; --mdui-color-surface-dark: 14,14,17; --mdui-color-surface-dim-dark: 11,11,14; --mdui-color-surface-bright-dark: 32,32,39; --mdui-color-surface-container-lowest-dark:11,11,14; --mdui-color-surface-container-low-dark: 22,22,27; --mdui-color-surface-container-dark: 26,26,32; --mdui-color-surface-container-high-dark: 32,32,39; --mdui-color-surface-container-highest-dark:40,40,49; --mdui-color-on-surface-dark: 242,239,234; --mdui-color-on-surface-variant-dark: 140,136,148; --mdui-color-outline-dark: 38,38,47; --mdui-color-outline-variant-dark: 30,30,37; --mdui-color-error-dark: 255,107,138; /* tipografia: a mesma do resto do Koncord */ --font-fallback: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html, body, button, input, textarea, select{ font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-synthesis-weight: none; } /* cantos e respiro um pouco mais secos que o padrão Material */ :root{ --mdui-shape-corner-extra-small: 6px; --mdui-shape-corner-small: 8px; --mdui-shape-corner-medium: 10px; --mdui-shape-corner-large: 13px; } /* barra de rolagem discreta, igual à do escritório */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:#2A2A33;border-radius:8px;border:3px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:#3A3A46;background-clip:content-box} *::-webkit-scrollbar-track{background:transparent} /* =========================================================================== O tema de verdade do chat não vem do MDUI: são variáveis --colours-* gravadas INLINE no pelo próprio app. Regra com !important ganha do inline, então é aqui que o tempero pega. =========================================================================== */ body{ --colours-background: #0E0E11 !important; --colours-foreground: #F2EFEA !important; --colours-link: #FF7A45 !important; /* botões */ --colours-component-btn-background-primary: #FF5A1F !important; --colours-component-btn-foreground-primary: #0E0E11 !important; --colours-component-btn-background-secondary: #1D1D24 !important; --colours-component-btn-foreground-secondary: #F2EFEA !important; --colours-component-btn-foreground-plain: #F2EFEA !important; --colours-component-btn-foreground-plain-secondary: #8C8894 !important; /* itens de menu: canal, servidor, conversa */ --colours-component-menubtn-default-background: transparent !important; --colours-component-menubtn-default-foreground: #8C8894 !important; --colours-component-menubtn-hover-background: #1D1D24 !important; --colours-component-menubtn-hover-foreground: #F2EFEA !important; --colours-component-menubtn-selected-background: #26262F !important; --colours-component-menubtn-selected-foreground: #F2EFEA !important; --colours-component-menubtn-muted-background: transparent !important; --colours-component-menubtn-muted-foreground: #56535E !important; /* campos */ --colours-component-input-background-primary: #16161B !important; --colours-component-input-background-secondary: #1D1D24 !important; --colours-component-input-foreground: #F2EFEA !important; --colours-component-input-focus: #FF5A1F !important; --colours-component-input-hover-primary: #1D1D24 !important; --colours-component-input-hover-secondary: #26262F !important; /* caixa de mensagem e colunas laterais */ --colours-messaging-component-message-box-background: #16161B !important; --colours-messaging-component-message-box-foreground: #F2EFEA !important; --colours-sidebar-channels-background: #121216 !important; --colours-sidebar-server-background: #0E0E11 !important; --colours-sidebar-member-background: #121216 !important; --colours-component-breadcrumbs-foreground: #8C8894 !important; --colours-component-breadcrumbs-foreground-active: #F2EFEA !important; --colours-component-checkbox-foreground-check: #FF5A1F !important; }