Ativa a pesquisa
Ativa o menu
134
292
9
2,7 mil
Celta Sistemas Wiki
Alternar menu de preferências
Alternar menu pessoal
Não autenticado(a)
Your IP address will be publicly visible if you make any edits.

Ajuda:Guia de Estilo: mudanças entre as edições

De Celta Sistemas Wiki
Mais ações
← Edição anterior
Sem resumo de edição
Etiqueta: Revertido
Sem resumo de edição
 
(18 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
/* ================================================================= */
{{Cabecalho
/* 🎨 VISUAL GLOBAL DO TEMA (TIPOGRAFIA COMPACTA E RODAPÉ) */
|
/* ================================================================= */
| Guia de Estilo e Padrões
}}


/* 1. RODAPÉ COMPACTO (SLIM) */
Este guia documenta os componentes visuais do '''Celta Wiki Framework'''. Utilize estes padrões para manter a consistência, agilidade e beleza da documentação.
/* (Este bloco não mudou, já estava compacto) */
.citizen-footer {
    padding: 4px 20px !important;
    margin-top: 30px !important;
    border-top: 1px solid #eaecf0;
    min-height: 0 !important;
}
.citizen-footer__content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
}
#footer-info, #footer-info ul, #footer-info li {
    margin: 0 !important; padding: 0 !important; line-height: 1.1 !important;
}
.citizen-footer__logo {
    margin: 0 !important; padding: 0 !important; order: 1; line-height: 0 !important;
}
.citizen-footer .mw-logo-wordmark { display: none !important; }
.citizen-footer .mw-logo-icon {
    height: 45px !important; width: auto !important; display: block !important;
}
#footer-info {
    order: 2; text-align: center !important; flex-grow: 1;
    font-size: 0.85em !important; color: #666;
}
#footer-info li { display: inline-block !important; }
#footer-icons {
    order: 3; margin: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center !important;
}
#footer-icons img { height: 28px !important; width: auto !important; }
#footer-info-lastmod, .citizen-footer__lastmod { display: none !important; }
@media (max-width: 768px) {
    .citizen-footer__content { flex-direction: column !important; gap: 8px !important; padding: 10px 0 !important; }
}
.citizen-footer__siteinfo {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1;
}
/* Garante que o container do titulo/logo não tenha margem */
.citizen-footer__sitetitle {
    display: block !important;
    margin: 0 !important;
    line-height: 0 !important;
}


/* 2. TIPOGRAFIA GLOBAL COMPACTA */
__TOC__
body {
    font-family: 'Segoe UI', Roboto, sans-serif !important;
}


/* Títulos Globais - Margens Base Reduzidas */
== 1. Cabeçalho da Página ==
html body:not(.page-Página_principal) h1,
Use sempre na primeira linha da página.
html body:not(.page-Página_principal) h2,
html body:not(.page-Página_principal) h3,
html body:not(.page-Página_principal) h4 {
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    color: #1e293b !important;
    margin-top: 1.2em !important; /* REDUZIDO: Era 1.5em */
    margin-bottom: 0.6em !important; /* REDUZIDO: Era 0.8em */
    line-height: 1.2 !important;
}


/* ================================================================= */
=== Exemplo Padrão (Manuais e Tutoriais) ===
/* ESTILO DOS TÍTULOS H2 (LIMPO E COM SETA) */
/* ================================================================= */


/* 1. Configuração do Texto e Risco Azul */
<pre><nowiki>
html body:not(.page-Página_principal) .mw-heading2 {
{{Cabecalho
    font-size: 1.25em !important;
| [[Tutoriais]] › [[Sub-rotina]]
    font-weight: 700 !important;
| Título da Página de *Exemplo*
    color: #1e293b !important;
}}
    margin-top: 15px !important;
</nowiki></pre>
    margin-bottom: 15px !important;
   
    /* Risco Azul na Esquerda */
    border-left: 4px solid #3b82f6 !important;
    padding-left: 15px !important;
   
    /* Remove bordas antigas */
    border-bottom: none !important;
    position: relative;
    display: flex;
    align-items: center;
}


/* Garante que o h2 dentro do wrapper não tenha bordas extras */
'''Resultado:'''
html body:not(.page-Página_principal) h2 {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
}


/* Títulos H3 (Subseções) */
{{Cabecalho
html body:not(.page-Página_principal) h3,
| [[Módulo Pai]] › [[Sub-rotina]]
html body:not(.page-Página_principal) .mw-heading3 {
| Título da Página de *Exemplo*
    font-size: 1.15em !important; /* REDUZIDO: Era 1.2em */
}}
    font-weight: 600 !important;
    color: #334155 !important;
    border: none !important;
    padding-left: 0 !important;
    margin-top: 5px !important;
}


/* Texto de Parágrafo (Corpo) */
=== Invisível (Dashboards e Hubs) ===
.mw-body-content p {
    font-size: 1em !important; /* REDUZIDO: Era 1.05em (Voltou ao padrão) */
    line-height: 1.5 !important; /* REDUZIDO: Era 1.7 (Linhas mais próximas) */
    color: #475569 !important;
    margin-bottom: 1em !important; /* REDUZIDO: Era 1.2em */
    max-width: 900px;
}


<pre><nowiki>
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}
</nowiki></pre>


/* 3. LIMPEZA DA INTERFACE */
'''Resultado:'''
/* (Este bloco não mudou, apenas esconde itens nativos) */
body:not(.page-Página_principal) .mw-page-title-main,
body:not(.page-Página_principal) h1#firstHeading,
html body:not(.page-Página_principal) .citizen-section-indicator {
    display: none !important;
}
body:not(.page-Página_principal) header.mw-body-header,
body:not(.page-Página_principal) .citizen-page-header {
    margin-bottom: 0 !important;
    padding-bottom: 0px !important;
    min-height: 0 !important;
    border-bottom: none !important;
}
body:not(.page-Página_principal) .firstHeading-container,
body:not(.page-Página_principal) .citizen-header__text {
    margin: 0 !important; padding: 0 !important; height: 0 !important; display: none !important;
}
.citizen-header .mw-logo-icon,
.citizen-drawer__header .mw-logo-icon {
    height: 40px !important;
    width: auto !important;
    margin-top: 2px !important;
}


/* ================================================================= */
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}
/* 📐 AJUSTE DA BARRA LATERAL (ÍNDICE) */
/* ================================================================= */


/* Empurra a coluna da direita para baixo para alinhar com o Título */
----
.citizen-col-toc {
    padding-top: 60px !important; /* Aumente ou diminua esse número para alinhar perfeito */
}


/* Opcional: Se quiser que o "Última modificação" fique menos chamativo */
== 2. Caixas de Aviso (Notas) ==
.page-info {
Sintaxe:
    opacity: 0.6;
<pre><nowiki>
    font-size: 0.85em;
{{Nota | tipo | TÍTULO | Texto...}}
}
</nowiki></pre>
 
=== Tipo: Dica / Informação ===
 
<pre><nowiki>
{{Nota|info|DICA|Texto da dica ou informação complementar.}}
</nowiki></pre>
 
'''Resultado:'''
{{Nota|info|DICA|Texto da dica ou informação complementar.}}
 
=== Tipo: Sucesso / Novidade ===
 
<pre><nowiki>
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
</nowiki></pre>
 
'''Resultado:'''
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
 
=== Tipo: Atenção / Alerta ===
 
<pre><nowiki>
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
</nowiki></pre>
 
'''Resultado:'''
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
 
=== Tipo: Crítico / Erro ===
 
<pre><nowiki>
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}
</nowiki></pre>
 
'''Resultado:'''
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}
 
----
 
== 3. Tabela de Campos ==
Use para listar parâmetros. Utilize `1=` e `2=` para evitar quebras.
 
=== Exemplo de Tabela ===
 
<pre><nowiki>
{{TabelaCampos|
  {{Linha
  | 1= Nome do Campo
  | 2= Explicação do campo.
  }}
  {{Linha
  | 1= Outro Parâmetro
  | 2= Explicação com lista:
* Item A
* Item B
  }}
}}
</nowiki></pre>
 
'''Resultado:'''
 
{{TabelaCampos|
  {{Linha
  | 1= Nome do Campo
  | 2= Explicação do campo.
  }}
  {{Linha
  | 1= Outro Parâmetro
  | 2= Explicação com lista:
* Item A
* Item B
  }}
}}
 
----
 
== 4. Cards e Menus ==
 
=== 4.1. Cards Simples ===
 
<pre><nowiki>
<div class="celta-grid">
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>
</nowiki></pre>
 
'''Resultado:'''
 
<div class="celta-grid">
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>
 
=== 4.2. Menus de Navegação (Hubs) ===
Cores: `blue`, `dark`, `orange`, `green`, `red`.
 
<pre><nowiki>
<div class="celta-grid">
{{CardMenu
| cor = orange
| icone = bi-star
| titulo = Favoritos
| conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>
</nowiki></pre>
 
'''Resultado:'''
 
<div class="celta-grid">
{{CardMenu
| cor = orange
| icone = bi-star
| titulo = Favoritos
| conteudo =
* [[Página principal|Link Exemplo 1]]
* [[Página principal|Link Exemplo 2]]
}}
</div>
 
=== 4.3. Listas de Links (CardLista) ===
Usado para listas limpas sem borda colorida (Ex: Acesso Rápido).
* **Atenção:** Os asteriscos (*) devem ficar colados na margem esquerda.
 
<pre><nowiki>
<div class="celta-grid">
{{CardLista
| icone = bi-lightning-fill
| cor = #f59e0b
| titulo = Acesso Rápido
| conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>
</nowiki></pre>
 
'''Resultado:'''
 
<div class="celta-grid">
{{CardLista
| icone = bi-lightning-fill
| cor = #f59e0b
| titulo = Acesso Rápido
| conteudo =
* [[Página principal|Link 1]]
* [[Página principal|Link 2]]
}}
</div>
 
----
 
== 5. Ícones ==
 
O Wiki utiliza a biblioteca '''Bootstrap Icons''': [https://icons.getbootstrap.com/ Galeria Oficial].
 
* **Uso em Cards:** Passe o nome da classe no parâmetro `icone` (Ex: `icone = bi-gear`).
* **Uso no Texto:** Use a tag `<i>`:
*: ` <i class="bi bi-check-circle"></i> ` -> <i class="bi bi-check-circle"></i>
 
----
 
== 6. Imagens e Badges ==
 
=== 6.1. Prints de Tela ===
 
<pre><nowiki>
{{Print|Nome_do_Arquivo.png|Legenda da imagem}}
</nowiki></pre>
 
=== 6.2. Etiquetas de Versão ===
 
<pre><nowiki>
Funcionalidade Nova {{Badge|novo|v15.0}}
</nowiki></pre>
 
'''Resultado:'''
 
Funcionalidade Nova {{Badge|novo|v15.0}}
 
=== 6.3. Logo Oficial (SVG) ===
Exibe a logo vetorizada do sistema.
* **Uso:** `{{Logo|width=200px}}`
 
'''Resultado:'''
{{Logo|width=200px}}
 
----
 
== 7. Rodapé de Contato ==
Adicione apenas o código abaixo no final das páginas.
 
=== Suporte Técnico (Padrão) ===
 
<pre><nowiki>
{{ContatoSuporte}}
</nowiki></pre>
 
'''Resultado:'''
 
{{ContatoSuporte}}
 
=== Financeiro / Comercial ===
 
<pre><nowiki>
{{ContatoFinanceiro}}
</nowiki></pre>
 
'''Resultado:'''
 
{{ContatoFinanceiro}}
 
----
 
== 8. Template Base (Copiar e Colar) ==
Copie este bloco para iniciar uma nova página.
 
<pre><nowiki>
{{Cabecalho
| [[Módulo]] › [[Funcionalidade]]
| Título do Manual
}}
 
Resumo da funcionalidade.
 
{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}
 
== 1. Visão Geral ==
Explicação do conceito...
 
== 2. Configuração ==
Acesse o menu '''Cadastro > Operações'''.
 
{{TabelaCampos|
  {{Linha
  | 1= Nome do Campo
  | 2= Explicação do campo.
  }}
}}
 
== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.
 
{{ContatoSuporte}}
</nowiki></pre>

Edição atual tal como às 21h26min de 1 de dezembro de 2025

Início /

Guia de Estilo e Padrões

Atualizado em: 01/12/2025

Este guia documenta os componentes visuais do Celta Wiki Framework. Utilize estes padrões para manter a consistência, agilidade e beleza da documentação.

1. Cabeçalho da Página

Use sempre na primeira linha da página.

Exemplo Padrão (Manuais e Tutoriais)

{{Cabecalho
 | [[Tutoriais]] › [[Sub-rotina]]
 | Título da Página de *Exemplo*
}}

Resultado:

Início / Módulo Pai › Sub-rotina

Título da Página de *Exemplo*

Atualizado em: 01/12/2025

Invisível (Dashboards e Hubs)

{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}

Resultado:

Início / Invisível (Dashboards e Hubs)

2. Caixas de Aviso (Notas)

Sintaxe: 

{{Nota | tipo | TÍTULO | Texto...}}

Tipo: Dica / Informação

{{Nota|info|DICA|Texto da dica ou informação complementar.}}

Resultado:

DICA

Texto da dica ou informação complementar.

Tipo: Sucesso / Novidade

{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}

Resultado:

SUCESSO

Para novidades ou boas práticas.

Tipo: Atenção / Alerta

{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}

Resultado:

ATENÇÃO

Alertas que requerem cuidado.

Tipo: Crítico / Erro

{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}

Resultado:

CRÍTICO

Risco de perda de dados ou bloqueios.

3. Tabela de Campos

Use para listar parâmetros. Utilize `1=` e `2=` para evitar quebras.

Exemplo de Tabela

{{TabelaCampos|
  {{Linha
   | 1= Nome do Campo
   | 2= Explicação do campo.
  }}
  {{Linha
   | 1= Outro Parâmetro
   | 2= Explicação com lista:
* Item A
* Item B
  }}
}}

Resultado:

Campo / Parâmetro Função e Instruções
Nome do Campo Explicação do campo.
Outro Parâmetro Explicação com lista:
  • Item A
  • Item B

4. Cards e Menus

4.1. Cards Simples

<div class="celta-grid">
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>

Resultado:

Dicas

Texto do card...

Manual

Texto do card...

4.2. Menus de Navegação (Hubs)

Cores: `blue`, `dark`, `orange`, `green`, `red`. 

<div class="celta-grid">
{{CardMenu
 | cor = orange
 | icone = bi-star
 | titulo = Favoritos
 | conteudo = 
* [[Link 1]]
* [[Link 2]]
}}
</div>

Resultado:

Favoritos

Usado para listas limpas sem borda colorida (Ex: Acesso Rápido).

  • **Atenção:** Os asteriscos (*) devem ficar colados na margem esquerda.
<div class="celta-grid">
{{CardLista
 | icone = bi-lightning-fill
 | cor = #f59e0b
 | titulo = Acesso Rápido
 | conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>

Resultado:

Acesso Rápido

5. Ícones

O Wiki utiliza a biblioteca Bootstrap Icons: Galeria Oficial.

  • **Uso em Cards:** Passe o nome da classe no parâmetro `icone` (Ex: `icone = bi-gear`).
  • **Uso no Texto:** Use a tag ``:
    ` ` ->

6. Imagens e Badges

6.1. Prints de Tela

{{Print|Nome_do_Arquivo.png|Legenda da imagem}}

6.2. Etiquetas de Versão

Funcionalidade Nova {{Badge|novo|v15.0}}

Resultado:

Funcionalidade Nova v15.0

6.3. Logo Oficial (SVG)

Exibe a logo vetorizada do sistema.

  • **Uso:** `
    `

Resultado:

7. Rodapé de Contato

Adicione apenas o código abaixo no final das páginas.

Suporte Técnico (Padrão)

{{ContatoSuporte}}

Resultado:


Fale com nosso suporte via e-mail ou WhatsApp.

E-mail → Suporte
WhatsApp → Suporte
Celta Sistemas


Financeiro / Comercial

{{ContatoFinanceiro}}

Resultado:

Contato

Email
[email protected]

WhatsApp
(66) 3515-0001

Site
celtasistemas.com.br

8. Template Base (Copiar e Colar)

Copie este bloco para iniciar uma nova página. 

{{Cabecalho
 | [[Módulo]] › [[Funcionalidade]]
 | Título do Manual
}}

Resumo da funcionalidade.

{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}

== 1. Visão Geral ==
Explicação do conceito...

== 2. Configuração ==
Acesse o menu '''Cadastro > Operações'''.

{{TabelaCampos|
  {{Linha
   | 1= Nome do Campo
   | 2= Explicação do campo.
  }}
}}

== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.

{{ContatoSuporte}}
Disponível em “https://wiki.celtasistemas.com.br/index.php?title=Ajuda:Guia_de_Estilo&oldid=1818”
Última modificação
Esta página foi modificada pela última vez em 1 de dezembro de 2025, às 21h26min.