⚡ CSS Framework

ohub.css

Framework CSS dark do OfficeHub SaaS. Plug-and-play — inclua uma linha e tenha todos os componentes, utilitários e animações prontos para uso, com identidade visual consistente em todos os módulos da ferramenta.

CDN / link direto

<link rel="stylesheet" href="ohub.css">

Google Font (recomendada)

Outfit — wght 300;400;500;600;700;800

🎨

28 seções

Componentes

📦

Zero JS

CSS puro

⚡

CSS Vars

Totalmente customizável

🎨 Tokens — CSS Variables

Todas as variáveis são definidas em :root e podem ser sobrescritas por página ou componente.

Superfícies

--oh-bg#0d0f1a

--oh-surface#141728

--oh-surface2#1c2035

--oh-surface3#232840

--oh-accent#6c63ff

--oh-accent2#ff6b9d

--oh-accent3#00d4aa

--oh-accent4#ffb347

--oh-danger#ff6b6b

✍️ Tipografia

Classes de tamanho, peso e estilo de texto.

oh-text-3xl + extrabold

oh-text-2xl + bold

oh-text-xl + semibold

oh-text-lg + medium

oh-text-md (padrão)

oh-text-sm + text-secondary

oh-text-xs + text-muted

oh-gradient-text

oh-mono — código monospace

<div class="oh-text-2xl oh-font-bold">Título</div>
<p class="oh-text-sm oh-text-secondary">Subtítulo</p>
<span class="oh-gradient-text">Gradiente</span>

📐 Layout & Flex

Utilitários de grid, flexbox e alinhamento.

oh-flex

oh-items-center

oh-justify-between

col 1

col 2

col 3

col 4

<!-- Grid 4 colunas -->
<div class="oh-grid oh-grid-4 oh-gap-4">...</div>

<!-- Flex centralizado -->
<div class="oh-flex oh-items-center oh-gap-3">...</div>

<!-- Grid sidebar (340px + 1fr) -->
<div class="oh-grid oh-grid-sidebar oh-gap-6">...</div>

🗂️ Painéis & Cards

Containers com variações de header, footer e bordas coloridas.

📊 Painel com Header

Conteúdo do painel aqui.

Card com borda accent

Card border pink

Card border green

⚡ Card hover interativo

<div class="oh-panel">
  <div class="oh-panel-header">
    <span class="oh-panel-title">Título</span>
  </div>
  <div class="oh-panel-body">...</div>
</div>

<!-- Card com borda colorida -->
<div class="oh-card oh-card-accent-left oh-green">...</div>

🔘 Botões

Variantes por cor, tamanho, ícone e grupo.

<button class="oh-btn oh-btn-primary">Primário</button>
<button class="oh-btn oh-btn-danger oh-btn-sm">Pequeno</button>
<button class="oh-btn oh-btn-icon oh-btn-secondary">⚙️</button>

<!-- Grupo de botões -->
<div class="oh-btn-group">
  <button class="oh-btn oh-active">A</button>
  <button class="oh-btn">B</button>
</div>

📝 Formulários

Inputs, selects, textareas, toggles e checkboxes estilizados.

Nome completo

E-mail

📧

Estado

Input com erro

⚠️ Este campo é obrigatório

Observações

Toggle Switch

Opção marcada

Opção normal

Tarefa concluída

<div class="oh-form-group">
  <label class="oh-label oh-required">Nome</label>
  <input class="oh-input" type="text" placeholder="...">
  <div class="oh-form-error">Mensagem de erro</div>
</div>

📋 Tabela

Colaborador	Cargo	Departamento	Status
👩‍💻 Maria Silva	Dev Full Stack	💻 Tecnologia	🟢 Ativo
👨‍🎨 Carlos Lima	Designer	📢 Marketing	🟡 Férias

🗂️ Tabs

💬 Modal

<div class="oh-modal-overlay" id="meuModal">
  <div class="oh-modal">
    <div class="oh-modal-header">
      <span class="oh-modal-title">Título</span>
      <button class="oh-modal-close" onclick="fechar()">✕</button>
    </div>
    <div class="oh-modal-body">...</div>
  </div>
</div>

/* Abrir: adicionar classe oh-open */
/* Tamanhos: oh-modal-sm | oh-modal-lg | oh-modal-xl */

🔔 Toast & Alertas

✅Colaborador salvo com sucesso!

❌Não foi possível conectar ao banco de dados.

⚠️Você tem 3 colaboradores sem departamento.

ℹ️Arraste os bonequinhos para alocar nos departamentos.

🏷️ Badge & Pills

Default Accent Pink Green Orange Blue Danger

Small Default Large

💻 Tecnologia ✕ 📢 Marketing 💰 Financeiro

Online Ocupado Offline

📊 Stat Cards

👥

48

Colaboradores

↑ 12%

🏛️

7

Departamentos

✅

45

Alocados

⏳

3

Sem setor

↓ 2

👤 Avatar & Pickers

👩‍💻

👨‍🎨

🧑‍🏫

👩‍⚕️

👤

🎨

Avatar Picker:

👩

👨

👩‍💼

👨‍💻

🧑‍🏫

Color Picker:

Icon Picker:

💼

💻

📢

🔬

🎨

💰

🧩 Drag & Drop

Arraste os bonequinhos entre departamentos e a área "Sem departamento". Toda a lógica de estado é feita via JS — o CSS fornece as classes visuais de feedback.

🧩 Sem departamento 3 pessoas

/* HTML básico — zones e cards */
<div class="oh-pool">
  <div class="oh-drop-zone oh-empty" id="unassigned"
       data-empty="Arraste aqui"></div>
</div>

<div class="oh-dept-card">
  <div class="oh-dept-header">
    <div class="oh-dept-color-bar" style="background:#6c63ff"></div>
    <span>💻</span>
    <span class="oh-dept-name">Tecnologia</span>
  </div>
  <div class="oh-dept-drop-zone oh-empty" id="zone-ti"></div>
</div>

/* Card draggável */
<div class="oh-person-wrap">
  <div class="oh-person-card" draggable="true">
    <div class="oh-person-avatar" style="background:#6c63ff22">👩‍💻</div>
    <span class="oh-person-name">Maria</span>
    <span class="oh-person-role">Dev</span>
  </div>
</div>

/* Classes de estado (aplicadas via JS) */
/* oh-dragging    → card sendo arrastado      */
/* oh-drag-active → zona recebendo drag       */
/* oh-drag-over   → dept-card com drag em cima */
/* oh-empty       → zona sem filhos (placeholder) */

🔧 Outros Componentes

Progress

Alocação85%

Metas62%

Empty State

🏛️

Nenhum departamento ainda

Crie um departamento para começar a organizar sua equipe.

Skeleton Loading

Tooltips

Breadcrumb

✨ Animações

Classes de animação reutilizáveis via @keyframes internos.

🟢 oh-anim-pulse ⬇️

Classe	Efeito	Keyframe
.oh-anim-pop	Escala com rotação	oh-pop
.oh-anim-fadeIn	Fade + slide up	oh-fadeIn
.oh-anim-pulse	Opacidade pulsante	oh-pulse
.oh-anim-bounce	Quique vertical	oh-bounce
.oh-anim-fadeOut	Desaparece para a direita	oh-fadeOut
.oh-skeleton	Shimmer de loading	oh-shimmer
.oh-spinner	Loader circular	oh-spin