/* ===================================================================== ClickUp WP — Design System ===================================================================== */ /* As variáveis de cor precisam existir também em elementos anexados diretamente ao (modais, dropdowns, toasts) — por isso são declaradas tanto em #cuwp-root quanto em body. Sem isso, esses elementos ficam com fundo/texto transparentes por não conseguirem resolver var(--cuwp-*). */ #cuwp-root, body { --cuwp-primary: #1b5f9d; --cuwp-primary-hover: #2270b8; --cuwp-secondary: #2270b8; --cuwp-tertiary: #f9db72; --cuwp-primary-light: #e6f0f8; --cuwp-danger: #E74C3C; --cuwp-warning: #F5A623; --cuwp-success: #2ECC71; --cuwp-info: #4A90E2; --cuwp-bg: #FFFFFF; --cuwp-surface: #FFFFFF; --cuwp-surface-2: #FFFFFF; --cuwp-border: #D1D5DB; --cuwp-text: #1F2129; --cuwp-text-muted: #6B7280; --cuwp-text-faint: #9CA3AF; --cuwp-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --cuwp-shadow-lg: 0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.05); --cuwp-radius: 12px; --cuwp-radius-sm: 8px; --cuwp-sidebar-w: 240px; } #cuwp-root { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 500; /* Montserrat em 400 fica fina demais para uso em interface; 500 lê melhor */ color: var(--cuwp-text); position: relative; display: block; } /* O WordPress define uma cor própria para h1-h6 dentro do painel admin (ex: .wrap h2), que vence a cor herdada e ignora nosso tema escuro. Força a cor certa em qualquer título dentro do app, com !important para garantir que vença o CSS do próprio WP admin. */ #cuwp-root h1, #cuwp-root h2, #cuwp-root h3, #cuwp-root h4, #cuwp-root h5, #cuwp-root h6, .cuwp-modal h1, .cuwp-modal h2, .cuwp-modal h3, .cuwp-modal h4 { color: var(--cuwp-text) !important; } /* Content ocupa a largura útil do painel do WP, sem "vazar" para fora do contêiner padrão — evita conteúdo colado na borda da tela. */ #wpbody-content .wrap:has(> #cuwp-root) { margin: 0; } #cuwp-root[data-theme="dark"], body[data-theme="dark"] { --cuwp-bg: #16171D; --cuwp-surface: #1E1F27; --cuwp-surface-2: #24252F; --cuwp-border: #33343E; --cuwp-text: #F1F2F4; --cuwp-text-muted: #A3A5AF; --cuwp-text-faint: #6E707A; --cuwp-primary-light: rgba(27,95,157,.28); --cuwp-shadow: 0 1px 3px rgba(0,0,0,.4); --cuwp-shadow-lg: 0 10px 25px rgba(0,0,0,.5); } #cuwp-root * { box-sizing: border-box; } #cuwp-root button { cursor: pointer; } #cuwp-root a { text-decoration: none; color: var(--cuwp-primary); } #cuwp-root ::-webkit-scrollbar { width: 8px; height: 8px; } #cuwp-root ::-webkit-scrollbar-thumb { background: var(--cuwp-border); border-radius: 10px; } /* Blindagem contra o CSS do tema do site (usado quando o app aparece no front-end via o shortcode [clickup_wp]) — muitos temas aplicam resets globais a button/input/svg que quebram o visual da busca, dos ícones do topo e outros controles. Os seletores abaixo também cobrem os elementos anexados fora de #cuwp-root (modais, dropdowns, toasts). */ #cuwp-root svg, .cuwp-modal-overlay svg, .cuwp-dropdown svg, .cuwp-toast-wrap svg { max-width: none !important; height: auto; box-sizing: content-box !important; } #cuwp-root button, #cuwp-root input, #cuwp-root select, #cuwp-root textarea, .cuwp-modal-overlay button, .cuwp-modal-overlay input, .cuwp-modal-overlay select, .cuwp-modal-overlay textarea, .cuwp-dropdown button, .cuwp-dropdown input, .cuwp-dropdown select, .cuwp-dropdown textarea { font-family: inherit !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; letter-spacing: normal; text-transform: none; } /* O reset acima (appearance:none) também apagava a aparência de checkboxes e rádios, deixando-os invisíveis (mas ainda clicáveis) — restaura a aparência nativa só para esses dois, para poderem ficar visíveis e coloridos com a cor da marca via accent-color. */ #cuwp-root input[type="checkbox"], #cuwp-root input[type="radio"], .cuwp-modal-overlay input[type="checkbox"], .cuwp-modal-overlay input[type="radio"], .cuwp-dropdown input[type="checkbox"], .cuwp-dropdown input[type="radio"] { -webkit-appearance: auto !important; appearance: auto !important; accent-color: var(--cuwp-primary); } .cuwp-icon-btn svg, .cuwp-search-box svg { width: 17px !important; height: 17px !important; flex-shrink: 0; } .cuwp-btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0; } .cuwp-nav-item svg { width: 19px !important; height: 19px !important; flex-shrink: 0; } /* Layout ------------------------------------------------------------- */ .cuwp-shell { display: flex; min-height: 80vh; background: var(--cuwp-bg); } /* No frontend (shortcode), preenche a altura da tela toda (100vh), garantindo que o fundo do app cubra a área visível inteira, sem sobrar vazio nem cortar. */ #cuwp-root.cuwp-frontend .cuwp-shell { min-height: 100vh; } .cuwp-sidebar { width: var(--cuwp-sidebar-w); flex-shrink: 0; background: var(--cuwp-surface); border-right: 1px solid var(--cuwp-border); padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 32px; height: calc(100vh - 32px); overflow-y: auto; align-self: flex-start; } .cuwp-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 8px 8px 20px; min-height: 55px; } .cuwp-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; margin: 0 0 14px; border-top: 1px solid var(--cuwp-border); border-bottom: 1px solid var(--cuwp-border); } .cuwp-sidebar-user .cuwp-avatar { width: 34px; height: 34px; flex-shrink: 0; } .cuwp-sidebar-user-name { font-size: 13px; font-weight: 700; color: var(--cuwp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cuwp-nav-toggle, .cuwp-nav-toggle-spacer { display: none; } .cuwp-nav-toggle svg { width: 20px; height: 20px; } .cuwp-sidebar-brand img { border-radius: 6px; display: block; } .cuwp-brand-logo { max-height: 55px; max-width: 200px; width: auto; height: auto; object-fit: contain; } .cuwp-sidebar-brand span { font-weight: 800; font-size: 16px; letter-spacing: -.01em; color: var(--cuwp-text); } .cuwp-nav-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--cuwp-text-muted); font-size: 14px; font-weight: 600; border: none; border-left: 3px solid transparent; background: transparent; width: 100%; text-align: left; transition: background .12s ease, color .12s ease, border-color .12s ease; } .cuwp-nav-item:hover { background: var(--cuwp-surface-2) !important; color: var(--cuwp-text) !important; } .cuwp-nav-item.active { background: var(--cuwp-primary-light); color: var(--cuwp-primary); border-left-color: var(--cuwp-tertiary); font-weight: 700; } #cuwp-root[data-theme="dark"] .cuwp-nav-item.active, body[data-theme="dark"] .cuwp-nav-item.active { background: rgba(27,95,157,.28); color: #7fbaeb; border-left-color: var(--cuwp-tertiary); } .cuwp-nav-sep { height: 1px; background: var(--cuwp-border); margin: 12px 4px; } .cuwp-nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cuwp-text-faint); font-weight: 700; padding: 12px 12px 6px; } .cuwp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cuwp-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--cuwp-border); background: var(--cuwp-surface); position: sticky; top: 32px; z-index: 20; } /* No frontend a barra preta do WP admin fica escondida (ver CUWP_Shortcode::maybe_hide_admin_bar), então não há mais 32px para descontar no topo. */ #cuwp-root.cuwp-frontend .cuwp-topbar { top: 0; } #cuwp-root.cuwp-frontend .cuwp-sidebar { top: 0; height: 100vh; } .cuwp-topbar h1 { font-size: 17px; font-weight: 700; margin: 0; flex-shrink: 0; color: var(--cuwp-text); } .cuwp-topbar-spacer { flex: 1; } .cuwp-search-box { display: flex; align-items: center; gap: 8px; background: var(--cuwp-surface-2); border: 1px solid var(--cuwp-border); border-radius: 8px; padding: 7px 12px; width: 280px; color: var(--cuwp-text-muted); font-size: 13px; box-shadow: none !important; flex-shrink: 0; } .cuwp-search-box input { border: none !important; background: transparent !important; outline: none; color: var(--cuwp-text); width: 100%; font-size: 13px; padding: 0 !important; margin: 0 !important; min-width: 0; -webkit-appearance: none; appearance: none; } .cuwp-search-box input::-webkit-search-decoration, .cuwp-search-box input::-webkit-search-cancel-button, .cuwp-search-box input::-webkit-search-results-button, .cuwp-search-box input::-webkit-search-results-decoration { -webkit-appearance: none; } .cuwp-icon-btn { width: 34px !important; height: 34px !important; min-width: 34px; border-radius: 8px; border: 1px solid var(--cuwp-border); background: var(--cuwp-surface); display: flex; align-items: center; justify-content: center; color: var(--cuwp-text-muted); position: relative !important; flex-shrink: 0; padding: 0 !important; box-shadow: none !important; margin: 0 !important; overflow: visible !important; } .cuwp-icon-btn:hover { background: var(--cuwp-surface-2) !important; color: var(--cuwp-text) !important; } .cuwp-icon-controle { width: 21px !important; height: 21px !important; flex-shrink: 0; } .cuwp-badge-dot { position: absolute !important; top: -3px !important; right: -3px !important; left: auto !important; bottom: auto !important; background: var(--cuwp-danger); color: #fff !important; font-size: 10px; font-weight: 700; border-radius: 10px; min-width: 16px; height: 16px; line-height: 1; display: flex !important; align-items: center; justify-content: center; padding: 0 3px; z-index: 5; pointer-events: none; } .cuwp-content { padding: 22px; overflow: auto; } /* Botões --------------------------------------------------------------- */ .cuwp-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; background: var(--cuwp-surface-2) !important; color: var(--cuwp-text) !important; border: 1px solid var(--cuwp-border) !important; } .cuwp-btn:hover { background: var(--cuwp-border) !important; color: var(--cuwp-text) !important; } .cuwp-btn-primary { background: var(--cuwp-primary) !important; color: #fff !important; border-color: var(--cuwp-primary) !important; } .cuwp-btn-primary:hover { background: var(--cuwp-primary-hover) !important; color: #fff !important; } .cuwp-btn-danger { background: transparent !important; color: var(--cuwp-danger) !important; border-color: transparent !important; } .cuwp-btn-danger:hover { background: rgba(231,76,60,.1) !important; color: var(--cuwp-danger) !important; } .cuwp-btn-sm { padding: 5px 10px; font-size: 12px; } .cuwp-btn:disabled { opacity: .6; cursor: not-allowed; } /* Cards / Grids ---------------------------------------------------------*/ .cuwp-grid { display: grid; gap: 16px; } .cuwp-grid-4 { grid-template-columns: repeat(4, 1fr); } .cuwp-grid-3 { grid-template-columns: repeat(3, 1fr); } .cuwp-grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1100px) { .cuwp-grid-4 { grid-template-columns: repeat(2, 1fr); } .cuwp-grid-3 { grid-template-columns: repeat(2,1fr);} } @media (max-width: 700px) { .cuwp-grid-4, .cuwp-grid-3, .cuwp-grid-2 { grid-template-columns: 1fr; } } /* Responsivo — o app pode aparecer no front-end (shortcode) dentro de uma coluna de conteúdo bem mais estreita do que o painel do WordPress, então o quadro (Kanban) e o menu lateral precisam se ajustar à resolução disponível. */ @media (max-width: 960px) { .cuwp-sidebar { width: 200px; } } @media (max-width: 760px) { .cuwp-shell { flex-direction: column; min-height: auto; } .cuwp-sidebar { width: 100%; flex-direction: column; align-items: stretch; border-right: none; border-bottom: 1px solid var(--cuwp-border); gap: 0; position: static; height: auto; overflow-y: visible; padding: 0; } /* No frontend, a regra que faz a barra lateral ocupar 100vh (pensada pra telas grandes, onde ela fica fixa lateralmente) precisa ser desligada aqui — senão ela força a altura da tela inteira mesmo no celular, empurrando todo o resto do conteúdo pra baixo. */ #cuwp-root.cuwp-frontend .cuwp-sidebar { height: auto; } /* Cabeçalho mobile: botão sanduíche à esquerda, logo centralizada, e um espaçador à direita do mesmo tamanho do botão — mantém a logo realmente no centro, não só "meio deslocada". */ .cuwp-sidebar-brand { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 12px !important; margin: 0 !important; min-height: auto !important; } .cuwp-sidebar-brand-logo { flex: 1; display: flex; justify-content: center; min-width: 0; } .cuwp-brand-logo { max-height: 44px !important; } .cuwp-nav-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; flex-shrink: 0 !important; border-radius: 8px !important; margin: 0 !important; border: 1px solid var(--cuwp-border) !important; background: var(--cuwp-surface) !important; color: var(--cuwp-text) !important; cursor: pointer !important; padding: 0 !important; line-height: 1 !important; box-shadow: none !important; } .cuwp-nav-toggle svg { width: 20px !important; height: 20px !important; display: block !important; stroke: var(--cuwp-text) !important; fill: none !important; } /* Reforço extra com cores explícitas (não só variável) para o modo escuro, caso o tema do site tenha seu próprio CSS de modo escuro conflitando — já vimos esse tipo de conflito acontecer com outros elementos antes. */ #cuwp-root[data-theme="dark"] .cuwp-nav-toggle, body[data-theme="dark"] .cuwp-nav-toggle { background: #1E1F27 !important; border-color: #33343E !important; color: #F1F2F4 !important; } #cuwp-root[data-theme="dark"] .cuwp-nav-toggle svg, body[data-theme="dark"] .cuwp-nav-toggle svg { stroke: #F1F2F4 !important; } .cuwp-nav-toggle-spacer { display: block; width: 36px; flex-shrink: 0; } /* Menu fica escondido por padrão; some no botão sanduíche pra abrir, ocupando a largura toda como um painel logo abaixo do cabeçalho. */ #cuwp-nav, #cuwp-nav-context, .cuwp-sidebar-user { display: none; flex-direction: column; padding: 6px 10px 10px; } .cuwp-sidebar.cuwp-nav-open #cuwp-nav, .cuwp-sidebar.cuwp-nav-open #cuwp-nav-context { display: flex; } .cuwp-sidebar.cuwp-nav-open .cuwp-sidebar-user { display: flex; flex-direction: row; margin: 0; border-top: 1px solid var(--cuwp-border); border-bottom: none; } .cuwp-sidebar.cuwp-nav-open { border-bottom: 1px solid var(--cuwp-border); } .cuwp-nav-item { width: 100%; } .cuwp-content { padding: 14px; } .cuwp-kanban-col { flex-basis: 240px; min-width: 240px; } } @media (max-width: 520px) { .cuwp-topbar { flex-wrap: wrap; padding: 10px 14px; } .cuwp-search-box { width: 100%; order: 3; } .cuwp-kanban-col { flex-basis: 210px; min-width: 210px; } } /* Tabelas: contêiner com rolagem horizontal própria (Projetos, Tarefas, Equipes, Relatórios) — o texto das células não quebra linha, então se não couber na largura da tela, aparece uma barra de rolagem só na tabela, sem afetar o resto da página. Funciona em qualquer tamanho de tela, não só mobile. */ .cuwp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cuwp-table th, .cuwp-table td { white-space: nowrap; } @media (max-width: 760px) { /* Modal de tarefa (conteúdo + lateral) empilha em vez de espremer duas colunas estreitas demais pra usar num celular. */ .cuwp-task-detail-grid { grid-template-columns: 1fr; gap: 20px; } .cuwp-modal-lg .cuwp-modal-body { padding: 16px; } /* Calendário: reduz altura mínima das células e fonte, já que 7 colunas numa tela de celular ficam bem apertadas de qualquer forma. */ .cuwp-calendar-daycell { min-height: 70px; padding: 4px; font-size: 11.5px; } .cuwp-calendar-task { font-size: 10px; padding: 2px 4px; } } .cuwp-card { background: var(--cuwp-surface); border: 1px solid var(--cuwp-border); border-radius: var(--cuwp-radius); padding: 16px; box-shadow: var(--cuwp-shadow); } .cuwp-card-title { font-size: 12.5px; color: var(--cuwp-text-muted); font-weight: 600; margin-bottom: 6px; } .cuwp-card-value { font-size: 26px; font-weight: 700; color: var(--cuwp-text); } .cuwp-card-sub { font-size: 12px; color: var(--cuwp-text-faint); margin-top: 4px; } .cuwp-section-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--cuwp-text); } /* Badges ----------------------------------------------------------------*/ .cuwp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px; } .cuwp-priority-urgent { background: rgba(231,76,60,.12); color: var(--cuwp-danger); } .cuwp-priority-high { background: rgba(245,166,35,.14); color: var(--cuwp-warning); } .cuwp-priority-normal { background: rgba(74,144,226,.12); color: var(--cuwp-info); } .cuwp-priority-low { background: rgba(155,155,155,.14); color: var(--cuwp-text-muted); } .cuwp-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1px solid transparent; } .cuwp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cuwp-avatar { width: 26px; height: 26px; border-radius: 50% !important; object-fit: cover !important; border: 2px solid var(--cuwp-surface); overflow: hidden; flex-shrink: 0; display: inline-block; } .cuwp-avatar-stack { display: flex; } .cuwp-avatar-stack img { margin-left: -8px; } .cuwp-avatar-stack img:first-child { margin-left: 0; } /* Tabs -------------------------------------------------------------------*/ .cuwp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cuwp-border); margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cuwp-tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--cuwp-text-muted); border-bottom: 2px solid transparent; background: none; border-left:none;border-right:none;border-top:none; white-space: nowrap; flex-shrink: 0; } .cuwp-tab.active { color: var(--cuwp-primary); border-bottom-color: var(--cuwp-primary); } /* No escuro, o azul primário perde contraste contra o fundo escuro — usa o dourado (cor terciária da marca), já usado como destaque em outros pontos do app no modo escuro (ex: item ativo do menu lateral). */ #cuwp-root[data-theme="dark"] .cuwp-tab.active, body[data-theme="dark"] .cuwp-tab.active { color: var(--cuwp-tertiary); border-bottom-color: var(--cuwp-tertiary); } /* Tabela (Lista) ----------------------------------------------------------*/ .cuwp-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--cuwp-surface); border-radius: var(--cuwp-radius); overflow: hidden; border: 1px solid var(--cuwp-border) !important; box-shadow: var(--cuwp-shadow); } .cuwp-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--cuwp-text-faint); padding: 10px 14px; background: var(--cuwp-surface-2); border-bottom: 1px solid var(--cuwp-border) !important; border-right: 1px solid var(--cuwp-border) !important; } .cuwp-table td { padding: 10px 14px; font-size: 13.5px; border-bottom: 1px solid var(--cuwp-border) !important; border-right: 1px solid var(--cuwp-border) !important; } .cuwp-table th:last-child, .cuwp-table td:last-child { border-right: none !important; } .cuwp-table tr:last-child td { border-bottom: none !important; } .cuwp-table tr:hover { background: var(--cuwp-surface-2) !important; cursor: pointer; } .cuwp-task-title-cell { display: flex; align-items: center; gap: 8px; font-weight: 500; } /* Kanban --------------------------------------------------------------- */ .cuwp-kanban { display: flex; gap: 12px; width: 100%; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; } .cuwp-kanban-col { background: var(--cuwp-surface-2); border-radius: var(--cuwp-radius); flex: 1 0 200px; min-width: 200px; display: flex; flex-direction: column; max-height: 76vh; border: 1px solid var(--cuwp-border); } .cuwp-kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; font-weight: 700; font-size: 13px; min-width: 0; } .cuwp-kanban-col-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cuwp-kanban-col-count { font-size: 11.5px; color: var(--cuwp-text-faint); background: var(--cuwp-surface); border-radius: 10px; padding: 1px 7px; } .cuwp-kanban-col-body { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; } .cuwp-kanban-col.drag-over { outline: 2px dashed var(--cuwp-primary); outline-offset: -4px; } .cuwp-kcard { background: var(--cuwp-surface); border: 1px solid var(--cuwp-border); border-radius: 8px; padding: 10px; box-shadow: var(--cuwp-shadow); cursor: grab; } .cuwp-kcard:active { cursor: grabbing; } .cuwp-kcard.dragging { opacity: .4; } .cuwp-kcard-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; } .cuwp-kcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .cuwp-kcard-labels { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; } .cuwp-kcard-labels .cuwp-badge { font-size: 10.5px; padding: 2px 7px; } .cuwp-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 10px; color: #fff; } .cuwp-tag-removable { display: inline-flex; align-items: center; gap: 4px; } .cuwp-tag-removable .cuwp-icon-fechar { width: 13px !important; height: 13px !important; } /* Seta pequena do seletor de Solicitante (abre o menu) — mesmo ícone "seta" dos relatórios, só que reduzido pra caber ao lado de um texto curto. */ .cuwp-icon-seta-sm { display: inline-flex; } .cuwp-icon-seta-sm .cuwp-icon-seta { width: 13px !important; height: 13px !important; } .cuwp-add-card-btn { border: 1px dashed var(--cuwp-border); background: transparent; color: var(--cuwp-text-faint); border-radius: 8px; padding: 8px; font-size: 12.5px; margin: 0 10px 10px; } /* Modal ------------------------------------------------------------------*/ .cuwp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 999999; color: var(--cuwp-text); font-weight: 500; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .cuwp-modal { background: var(--cuwp-surface); border-radius: var(--cuwp-radius); width: 560px; max-width: 92vw; max-height: 88vh; overflow: hidden; box-shadow: var(--cuwp-shadow-lg); color: var(--cuwp-text); display: flex; flex-direction: column; } .cuwp-modal.cuwp-modal-lg { width: 1180px; max-height: 92vh; } /* Barra de rolagem fina, arredondada e "embutida" — fica só dentro da área de conteúdo (cuwp-modal-body), que é quem realmente rola agora; cabeçalho e rodapé ficam fixos, fora da rolagem, então a barra nunca passa por cima deles. Mesmo tratamento nos outros contêineres com rolagem própria do app. */ .cuwp-modal-body, #cuwp-td-comments, .cuwp-table-scroll, .cuwp-dropdown, .cuwp-sidebar { scrollbar-width: thin; scrollbar-color: var(--cuwp-border) transparent; } .cuwp-modal-body::-webkit-scrollbar, #cuwp-td-comments::-webkit-scrollbar, .cuwp-table-scroll::-webkit-scrollbar, .cuwp-dropdown::-webkit-scrollbar, .cuwp-sidebar::-webkit-scrollbar { width: 8px; height: 8px; } .cuwp-modal-body::-webkit-scrollbar-track, #cuwp-td-comments::-webkit-scrollbar-track, .cuwp-table-scroll::-webkit-scrollbar-track, .cuwp-dropdown::-webkit-scrollbar-track, .cuwp-sidebar::-webkit-scrollbar-track { background: transparent; margin: 10px 0; } .cuwp-modal-body::-webkit-scrollbar-thumb, #cuwp-td-comments::-webkit-scrollbar-thumb, .cuwp-table-scroll::-webkit-scrollbar-thumb, .cuwp-dropdown::-webkit-scrollbar-thumb, .cuwp-sidebar::-webkit-scrollbar-thumb { background: var(--cuwp-border); border-radius: 8px; } .cuwp-modal-body::-webkit-scrollbar-thumb:hover, #cuwp-td-comments::-webkit-scrollbar-thumb:hover, .cuwp-table-scroll::-webkit-scrollbar-thumb:hover, .cuwp-dropdown::-webkit-scrollbar-thumb:hover, .cuwp-sidebar::-webkit-scrollbar-thumb:hover { background: var(--cuwp-text-faint); } .cuwp-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cuwp-border); background: var(--cuwp-surface); flex-shrink: 0; } .cuwp-modal-header h2 { font-size: 16px; margin: 0; color: var(--cuwp-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cuwp-modal-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; } .cuwp-modal-lg .cuwp-modal-body { padding: 24px 28px; } .cuwp-modal-footer { padding: 14px 20px; border-top: 1px solid var(--cuwp-border); display: flex; justify-content: flex-end; gap: 8px; background: var(--cuwp-surface); flex-shrink: 0; } .cuwp-modal-close { border: none; background: none; font-size: 26px; color: var(--cuwp-text-faint); line-height: 1; width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; } .cuwp-modal-close:hover { background: var(--cuwp-surface-2); color: var(--cuwp-text); } .cuwp-icon-fechar { width: 20px !important; height: 20px !important; flex-shrink: 0; } /* Título editável do modal de tarefa: trunca com reticências se for longo, sem nunca empurrar/sobrepor o botão de fechar. */ .cuwp-task-modal-title { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .cuwp-task-modal-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--cuwp-text); cursor: text; } .cuwp-task-modal-edit-btn { border: none; background: none; color: var(--cuwp-text-faint); font-size: 20px; line-height: 1; width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; } .cuwp-task-modal-edit-btn:hover { background: var(--cuwp-surface-2); color: var(--cuwp-primary); } .cuwp-icon-editar { width: 20px !important; height: 20px !important; flex-shrink: 0; } /* Formulários ------------------------------------------------------------*/ .cuwp-field { margin-bottom: 14px; } .cuwp-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--cuwp-text-muted); margin-bottom: 5px; } .cuwp-input, .cuwp-textarea, .cuwp-select { width: 100%; border: 1px solid var(--cuwp-border); border-radius: 7px; padding: 8px 10px; font-size: 13.5px; background: var(--cuwp-surface-2); color: var(--cuwp-text); font-family: inherit; } .cuwp-input:focus, .cuwp-textarea:focus, .cuwp-select:focus { outline: 2px solid var(--cuwp-primary); outline-offset: 0; } .cuwp-textarea { min-height: 70px; resize: vertical; } /* Task detail ----------------------------------------------------------*/ .cuwp-task-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; } .cuwp-task-detail-main { min-width: 0; } .cuwp-task-detail-sidebar { min-width: 0; } .cuwp-checklist-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; } .cuwp-checklist-item span { flex: 1; min-width: 0; word-break: break-word; } .cuwp-checklist-item input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; accent-color: var(--cuwp-primary); margin: 0; } .cuwp-checklist-item.done span { text-decoration: line-through; color: var(--cuwp-text-faint); } .cuwp-checklist-del { border: none; background: none; color: var(--cuwp-text-faint); font-size: 17px; line-height: 1; padding: 0; cursor: pointer; flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; } .cuwp-checklist-del:hover { background: var(--cuwp-surface-2); color: var(--cuwp-danger); } .cuwp-progress-bar { height: 6px; background: var(--cuwp-border); border-radius: 4px; overflow: hidden; } .cuwp-progress-bar > div { height: 100%; background: var(--cuwp-success); } .cuwp-comment { display: flex; gap: 10px; margin-bottom: 8px; } /* Moldura de cartão (fica só na "caixa" externa) + área interna com rolagem própria — separados pra a barra de rolagem não ficar colada/por cima da borda do cartão, com um respiro (padding-right) reservado pra ela. */ #cuwp-td-comments-box { background: var(--cuwp-surface); border: 1px solid var(--cuwp-border); border-radius: var(--cuwp-radius); padding: 12px 4px 12px 12px; } #cuwp-td-comments { max-height: 340px; overflow-y: auto; padding-right: 10px; } #cuwp-td-comments .cuwp-comment:last-child { margin-bottom: 0; } .cuwp-comment-body { background: var(--cuwp-surface-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; flex: 1; } /* Texto formatado (negrito, listas etc.) dentro da bolha de comentário/chat — o editor sempre envolve o texto em

, sem isso sobraria um espaço grande em cima/embaixo de mensagens curtas de uma linha só. */ .cuwp-comment-body p { margin: 0 0 6px; } .cuwp-comment-body p:last-child { margin-bottom: 0; } .cuwp-comment-body ol, .cuwp-comment-body ul { margin: 4px 0; padding-left: 20px; } .cuwp-comment-meta { font-size: 11.5px; color: var(--cuwp-text-faint); margin-bottom: 2px; } .cuwp-sidebar-field { margin-bottom: 16px; } .cuwp-sidebar-field-label { font-size: 11.5px; text-transform: uppercase; color: var(--cuwp-text-faint); font-weight: 700; margin-bottom: 6px; letter-spacing: .03em; } .cuwp-sidebar-pill-btn { width: 100%; justify-content: flex-start; text-align: left; } /* Empty state -------------------------------------------------------------*/ .cuwp-empty { text-align: center; padding: 60px 20px; color: var(--cuwp-text-faint); } .cuwp-empty svg { width: 48px; height: 48px; margin-bottom: 10px; opacity: .5; } /* Calendário --------------------------------------------------------------*/ .cuwp-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--cuwp-border); border-radius: var(--cuwp-radius); overflow: hidden; } .cuwp-calendar-daycell { min-height: 110px; border-right: 1px solid var(--cuwp-border); border-bottom: 1px solid var(--cuwp-border); padding: 6px; background: var(--cuwp-surface); vertical-align: top; } .cuwp-calendar-daycell.today { background: var(--cuwp-primary-light); } .cuwp-calendar-daynum { font-size: 12px; font-weight: 700; color: var(--cuwp-text-muted); margin-bottom: 4px; } .cuwp-calendar-task { font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 5px; margin-bottom: 3px; background: var(--cuwp-primary-light); color: var(--cuwp-primary); cursor: grab; } .cuwp-calendar-head { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--cuwp-text-faint); padding: 8px; background: var(--cuwp-surface-2); } /* Toast ------------------------------------------------------------------*/ .cuwp-toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 9999999; display: flex; flex-direction: column; gap: 8px; font-weight: 500; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .cuwp-toast { background: var(--cuwp-text); color: var(--cuwp-surface); padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: var(--cuwp-shadow-lg); } .cuwp-toast.error { background: var(--cuwp-danger); } .cuwp-toast.success { background: var(--cuwp-success); } /* Dropdown -----------------------------------------------------------------*/ .cuwp-dropdown { position: absolute; background: var(--cuwp-surface); border: 1px solid var(--cuwp-border); border-radius: 8px; box-shadow: var(--cuwp-shadow-lg); z-index: 1000000; min-width: 220px; max-width: 320px; max-height: 320px; overflow-y: auto; overflow-x: hidden; padding: 6px; color: var(--cuwp-text); font-weight: 500; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .cuwp-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; font-size: 13px; color: var(--cuwp-text); white-space: nowrap; min-width: 0; } .cuwp-dropdown-item span:not(.cuwp-dot) { overflow: hidden; text-overflow: ellipsis; } .cuwp-dropdown-item:hover { background: var(--cuwp-surface-2); } .cuwp-notif-item { padding: 7px 12px; border-bottom: 1px solid var(--cuwp-border); font-size: 12px; color: var(--cuwp-text); line-height: 1.35; } .cuwp-notif-item.unread { background: var(--cuwp-primary-light) !important; } .cuwp-notif-title { font-weight: 600; margin-bottom: 0; } .cuwp-notif-time { color: var(--cuwp-text-faint); font-size: 10.5px; } .cuwp-project-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; } .cuwp-flex { display: flex; align-items: center; } .cuwp-gap-6 { gap: 6px; } .cuwp-gap-8 { gap: 8px; } .cuwp-mt-8 { margin-top: 8px; } .cuwp-mt-16 { margin-top: 16px; } .cuwp-muted { color: var(--cuwp-text-muted); font-size: 12.5px; } .cuwp-text-faint { color: var(--cuwp-text-faint); } .cuwp-loading { text-align: center; padding: 40px; color: var(--cuwp-text-faint); font-size: 13px; } /* Editor de texto rico (Quill) — herda as cores do tema claro/escuro ------ */ .ql-toolbar.ql-snow { background: var(--cuwp-surface-2); border-color: var(--cuwp-border) !important; border-radius: 7px 7px 0 0; } .ql-container.ql-snow { border-color: var(--cuwp-border) !important; border-radius: 0 0 7px 7px; background: var(--cuwp-surface-2); height: var(--cuwp-editor-height, 180px); font-size: 13.5px; } .ql-editor { color: var(--cuwp-text); height: 100%; overflow-y: auto; } .ql-editor.ql-blank::before { color: var(--cuwp-text-faint); font-style: normal; } .ql-snow .ql-stroke { stroke: var(--cuwp-text-muted) !important; } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--cuwp-text-muted) !important; } .ql-snow .ql-picker-label { color: var(--cuwp-text-muted) !important; } .ql-snow .ql-picker-options { background: var(--cuwp-surface); border-color: var(--cuwp-border) !important; } .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active { color: var(--cuwp-primary) !important; } .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: var(--cuwp-primary) !important; } .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill { fill: var(--cuwp-primary) !important; } /* Switch (ativar/desativar) — usado na lista de Projetos ---------------- */ .cuwp-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; } .cuwp-switch input { opacity: 0; width: 0; height: 0; } .cuwp-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--cuwp-border); transition: .2s; border-radius: 20px; } .cuwp-switch-slider:before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px; background: #fff; transition: .2s; border-radius: 50%; } .cuwp-switch input:checked + .cuwp-switch-slider { background: var(--cuwp-primary); } .cuwp-switch input:checked + .cuwp-switch-slider:before { transform: translateX(18px); } /* Chat da equipe — caixa de mensagens com altura confortável e rolagem sempre visível (não depende do navegador mostrar a barra só no hover). */ .cuwp-chat-messages { height: 320px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--cuwp-text-faint) transparent; } .cuwp-chat-messages::-webkit-scrollbar { width: 8px; } .cuwp-chat-messages::-webkit-scrollbar-track { background: transparent; } .cuwp-chat-messages::-webkit-scrollbar-thumb { background: var(--cuwp-text-faint); border-radius: 8px; } /* ===================================================================== Tela de login personalizada (shortcode [clickup_wp], quando deslogado) A imagem de fundo (se configurada) cobre a tela inteira, se ajustando a qualquer resolução (cover + centralizada), com o cartão de login flutuando por cima, também centralizado na vertical e na horizontal. ===================================================================== */ .cuwp-login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; box-sizing: border-box; width: 100%; background-image: linear-gradient(135deg, var(--cuwp-primary) 0%, var(--cuwp-secondary) 60%, #123a5e 100%); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 500; position: relative; } /* Camada escura sutil por cima da imagem, só para o cartão branco continuar legível em qualquer foto de fundo. */ .cuwp-login-page::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,30,50,.25), rgba(10,30,50,.45)); } .cuwp-login-card { position: relative; width: 100%; max-width: 420px; background: rgba(255,255,255,.97); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 40px; box-sizing: border-box; color: var(--cuwp-text); } .cuwp-login-card-header { text-align: center; margin-bottom: 26px; } .cuwp-login-logo { max-height: 55px; max-width: 220px; margin: 0 auto 14px; display: block; object-fit: contain; } .cuwp-login-mark { width: 56px; height: 56px; border-radius: 14px; background: var(--cuwp-tertiary); color: #123a5e; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; margin: 0 auto 12px; } .cuwp-login-brand { font-size: 20px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.01em; color: #16181d; } .cuwp-login-tagline { font-size: 13.5px; color: #55585f; line-height: 1.5; } .cuwp-login-tagline p { margin: 0 0 6px; } .cuwp-login-tagline p:last-child { margin-bottom: 0; } .cuwp-login-card-body h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: #16181d; text-align: center; } .cuwp-login-card-body > p.cuwp-muted { margin: 0 0 22px; font-size: 13.5px; text-align: center; } .cuwp-login-error { background: rgba(231,76,60,.1); color: var(--cuwp-danger); border: 1px solid rgba(231,76,60,.3); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0 0 18px; text-align: center; } #cuwp-loginform p { margin: 0 0 16px; } #cuwp-loginform label { display: block; font-size: 12.5px; font-weight: 600; color: #6b6f78; margin-bottom: 5px; } #cuwp-loginform input[type="text"], #cuwp-loginform input[type="password"], #cuwp-loginform input[type="email"] { width: 100%; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 12px; font-size: 14px; background: #FAFAFB; color: #16181d; font-family: inherit; box-sizing: border-box; } #cuwp-loginform input[type="text"]:focus, #cuwp-loginform input[type="password"]:focus { outline: 2px solid var(--cuwp-primary); outline-offset: 0; } #cuwp-loginform .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: #16181d; } #cuwp-loginform .login-remember input { width: auto; } #cuwp-loginform .login-submit { margin-top: 22px; } #cuwp-loginform input[type="submit"] { width: 100%; background: var(--cuwp-primary); color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s ease; } #cuwp-loginform input[type="submit"]:hover { background: var(--cuwp-primary-hover); } .cuwp-login-alt-link { margin: 10px 0 0; font-size: 13px; text-align: center; } .cuwp-login-alt-link a { color: var(--cuwp-primary); text-decoration: none; font-weight: 600; } .cuwp-login-alt-link a:hover { text-decoration: underline; } @media (max-width: 640px) { .cuwp-login-page { padding: 16px; background-attachment: scroll; } .cuwp-login-card { padding: 28px 22px; } } /* ===================================================================== Editor de texto rico (Quill) — tamanhos em pt e seletor de emoticons ===================================================================== */ /* Mostra o valor em pt no menu de tamanho (só quando o item tem data-value — a opção "Normal", sem data-value, continua usando o texto padrão do Quill). */ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-value); } .ql-snow .ql-picker.ql-size { width: 70px; } .ql-emoji { font-size: 16px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .cuwp-emoji-picker { background: var(--cuwp-surface); border: 1px solid var(--cuwp-border); border-radius: 8px; box-shadow: var(--cuwp-shadow-lg); padding: 6px; display: grid; grid-template-columns: repeat(8, 30px); gap: 2px; z-index: 1000001; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cuwp-border) transparent; } .cuwp-emoji-picker::-webkit-scrollbar { width: 8px; } .cuwp-emoji-picker::-webkit-scrollbar-track { background: transparent; margin: 6px 0; } .cuwp-emoji-picker::-webkit-scrollbar-thumb { background: var(--cuwp-border); border-radius: 8px; } .cuwp-emoji-picker button { border: none; background: none; font-size: 18px; cursor: pointer; border-radius: 5px; padding: 3px; line-height: 1; display: flex; align-items: center; justify-content: center; } .cuwp-emoji-picker button:hover { background: var(--cuwp-surface-2); } /* Autocompletar de menção (@usuário) em chat e comentários -------------- */ .cuwp-mention-item .cuwp-avatar { width: 22px; height: 22px; } .cuwp-mention-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cuwp-mention-login { color: var(--cuwp-text-faint); font-size: 11.5px; margin-left: auto; white-space: nowrap; } .cuwp-mention-item.active { background: var(--cuwp-primary-light); } /* Filtro de período do gráfico "Tarefas concluídas" no Dashboard --------- */ .cuwp-chart-period-btn { padding: 4px 11px !important; font-size: 11px !important; white-space: nowrap !important; flex-shrink: 0; } .cuwp-chart-period-btn.active { background: var(--cuwp-primary) !important; color: #fff !important; border-color: var(--cuwp-primary) !important; } /* Cabeçalho de grupo (nome da equipe) dentro de um menu suspenso, usado no seletor de complexidade quando o projeto tem mais de uma equipe. */ .cuwp-dropdown-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--cuwp-text-faint); padding: 6px 9px 2px; letter-spacing: .03em; } /* Círculo de cor do projeto — preenche o círculo por completo (sem borda comendo o espaço), com uma marca de check visível na cor selecionada. */ .cuwp-color-swatch { width: 30px; height: 30px; border-radius: 50%; border: none; box-shadow: 0 0 0 2px transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: box-shadow .12s ease; flex-shrink: 0; } .cuwp-color-swatch:hover { box-shadow: 0 0 0 2px var(--cuwp-border); } .cuwp-color-swatch.selected { box-shadow: 0 0 0 2px var(--cuwp-surface), 0 0 0 4px var(--cuwp-primary); } .cuwp-color-check { display: none; color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); line-height: 1; } .cuwp-color-swatch.selected .cuwp-color-check { display: block; } /* Ícone de expandir/recolher no relatório de Equipe — gira 180° em vez de trocar de caractere, já que agora é um ícone SVG único. */ .cuwp-expand-arrow { display: inline-flex; cursor: pointer; color: var(--cuwp-text-faint); transition: transform .15s ease; } .cuwp-expand-arrow.expanded { transform: rotate(180deg); } .cuwp-icon-seta { width: 18px !important; height: 18px !important; flex-shrink: 0; }