A responsividade das páginas desta Wiki é garantida pelo uso do CSS3 (empilhanhamento, flutuação e display flex) junto aos recursos de @media (principlamente pelas definições de screen).
Ao utilizar a linguagem nativa da plataforma, markdown e o HTML5 conjuntamente, centifique-se que haja a distância de uma linha entre as duas e, lembre-se de recuar as tags à esquerda das páginas.
Documentação especifica sobre a Ferramenta WikiJS openSource:
Informações sobre os recursos da ferramenta, site Oficial da Plataforma: https://js.wiki/
Código fonte, GitHub: https://github.com/requarks/wiki
Documentação (em inglês) de uso e instalação da ferramenta v2.0 e V2.5.297(Stable): https://docs.requarks.io/
Página Inicial da Wiki.SETIC foi criada no formato MARKDOWN
Interessante que podemos mesclar o Markdown embutido na própria Wiki com o Html!
¶ Página Inicial - Estilo
¶ Logotipo - Brasão do Estado
Brasão
¶ Inserindo Brasão do Estado
Brasão
Na seção Administração da wiki
Ícone do lado direito no topo da Plataforma
Na seção Administração localizar no menu o índice Geral, e em seguida em Logo inserir a URL do Brasão do Estado. As especificações do arquivo estarão na descrição do formulário da URL como proporção, tamanho.
Após preenchido a URL do arquivo clique em APLICAR
Seção Logo URL da logo(Brasão)
¶ Qualquer imagem à direita no topo
Na página inicial, não será necessário esse procedimento, somente nas páginas auxiliares.
Caso o Título da página juntamente com a descrição forem muito extensos, fica facultativo o uso deste recurso devido a responsividade, ficando o texto sobrepondo a imagem ou vice-versa.
Alinhamento à direita
Codigo em MARKDOWN, pode ser colocado em qualquer lugar no back-end desde que esteja individualmente injetado.
{.align-abstopright}
¶ Seções da Wiki
A plataforma Wiki.SETIC se divide em seções que agrupam, alinham e concentram todos os Serviços, Procedimentos, Manuais, Estudos Técnicos, etc.
Todos agrupados em:
- Gerencial;
- Base de Conhecimento;
- Compliance;
Índice de Apoio:
- Título e Descrição Página Inicial
- Cards Página Inicial
- CSS do Container Página Inicial
- CSS adicional Página Inicial
- Injetando CSS Página Inicial
- Injetando HTML Página Inicial
- Resultado Final
Todas as seções são compostas por CARDS em HTML e CSS:
Codigo CSS, do para customização do CARD:
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 6px 10px rgba(46,61,73,.15);
overflow: hidden;
width: 260px;
margin: 15px;
align-items: stretch;
transition: all .2s ease
}
.card:hover {
transform: scale(1.01);
box-shadow: 0 6px 10px rgba(0,0,0,.25);
transition: color .3s ease
}
.card-header .img {
width: 100%;
min-height: 200px;
object-fit: cover
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
min-height: 150px;
text-align: center
}
.card-body .tag {
font-weight: 700;
color: #2b73b7;
text-transform: uppercase;
cursor: pointer;
font-size: 16px
}
.card-body p {
justify-content: center;
align-items: center;
font-size: 14px;
text-align: center;
color: #8c8c8c
}
¶ Gerencial, Base de Conhecimento e Compliance - Título e Descrição
O termo «#» que inicia o código não se trata de comentário, mas de marcação Markdown apontando que aquele trecho de HTML é um título principal (gerando um índice)
Todos os Títulos, código em MARKDOWN:
# Gerencial
# Base de Conhecimento
# Compliance
Logo abaixo do Título temos o recurso usado em todas as Descrições no HTML abaixo, herdando todo css embutidos na própria plataforma sem especificar CSS. Preenchendo cada conteúdo de acordo com a seção.
Código em HTML usado em todas as Descrições:
<br>
<div class="admin-header">
<div class="admin-header-title">
<div class="headline primary--text animated fadeInLeft">Acompanhamento de métricas,
transparência, relatórios, gerenciamentos, dados e documentação de
suporte à tomada de decisão.</div>
<div class="subtitle-1 grey--text animated fadeInLeft"></div>
</div>
<div class="spacer">
</div>
</div>
¶ Gerencial, Base de Conhecimento e Compliance - Cards
A Confecção dos CARDS será feita de acordo com a necessidade e alinhamento diretamente com a gerência. Segue abaixo o código HTML no Back-End da Página inicial. Abrindo a âncora antes do card e fechando a mesma após o card conforme o código abaixo destacado.
Só será possivel a «customização» deste card injetando o codigo localizado em Seções da Wiki.
Observar:
- A URL do link;
- Especificação de resolução da imagem para cada seção:
- Gerencial e Base de conhecimento:
Tamanho base da resolução 1024x512; - Compliance:
Tamanho base da resolução 1024x780; - Disponibilidade de cada repositório da imagem;
- Gerencial e Base de conhecimento:
Codigo em HTML da Página do CARD:
<a href="/home/gerencial/catalogo">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/catalogo_de_servicos_new_02_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Catálogo de Serviços</span>
<p>Serviços de infraestrutura prestados pela Superintendência, requisitos de
atendimento e prazos.</p>
</div>
</div>
</a>
¶ Formatação em CSS do Container
Observe que toda a estrutura dos cards que é regida pela classe container, determinando o espaço de página a ser utilizado pelas estruturas móveis.
.container {
display: flex;
flex-wrap: wrap;
justify-content: left
}
¶ Css adicional da página inicial
Adicional de código em CSS da Página Inicial abaixo:
Após injetado o css:
- Retira todos os icones de links externos da página.
.v-main .contents a.is-external-link:after {
font-family: Material Design Icons,sans-serif;
font-size: 24px/1;
padding-left: 3px;
display: inline-block;
content: "";
color: #9e9e9e;
text-decoration: none
}
- Retira todos os recursos de cor e underline do link(âncora).
a {
text-decoration: none
}
¶ Injetando CSS na página principal
Para injetar o css na página principal, siga o procedimento abaixo:
- Clicar em Ações da Página procedimento 1.
- Clicar em Editar procedimento 2.
Editando Página Principal
- Clique em PÁGINA.
Abrindo a janela do recurso de injection
- Clique em ESTILO.
Inserindo css
- Ao clicar na aba ESTILO se abrirá a janela de injection do CSS, nesse momento podemos inserir o código CSS completo, conforme a figura abaixo do código (CRTL+V).
.container {
display: flex;
flex-wrap: wrap;
justify-content: left
}
.v-main .contents a.is-external-link:after {
font-family: Material Design Icons,sans-serif;
font-size: 24px/1;
padding-left: 3px;
display: inline-block;
content: "";
color: #9e9e9e;
text-decoration: none
}
a {
text-decoration: none
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 6px 10px rgba(46,61,73,.15);
overflow: hidden;
width: 260px;
margin: 15px;
align-items: stretch;
transition: all .2s ease
}
.card:hover {
transform: scale(1.01);
box-shadow: 0 6px 10px rgba(0,0,0,.25);
transition: color .3s ease
}
.card-header .img {
width: 100%;
min-height: 200px;
object-fit: cover
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
min-height: 150px;
text-align: center
}
.card-body .tag {
font-weight: 700;
color: #2b73b7;
text-transform: uppercase;
cursor: pointer;
font-size: 16px
}
.card-body p {
justify-content: center;
align-items: center;
font-size: 14px;
text-align: center;
color: #8c8c8c
}
- Neste ponto não terminamos a confecção da Página Principal da Plataforma Wiki.SETIC.
- Apenas injetamos o CSS conforme os procedimentos acima.
- Conforme figura abaixo.
- Clique em OK para confirmar esse procedimento e voltar para o Back-End da Página Principal.
Injection
¶ Injetando HTML na Página Principal
Código HTML completo do Back-End da Página Principal (CRTL+V):
# Gerencial
<br>
<div class="admin-header"><div class="admin-header-title">
<div class="headline primary--text animated fadeInUp">Acompanhamento de métricas, transparência, relatórios, gerenciamentos, dados e documentação de suporte à tomada de decisão.</div>
<div class="subtitle-1 grey--text animated fadeInLeft"></div></div><div class="spacer">
</div>
</div>
<br>
<div class="container">
<a href="/home/gerencial/catalogo_servicos">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/catalogo_de_servicos_new_02_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Catálogo de Serviços</span>
<p>Serviços de infraestrutura prestados pela Superintendência, requisitos de atendimento e prazos.</p>
</div>
</div>
</a>
<a href="/home/gerencial/estatisticas">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/milestone_new_01_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Estatísticas de Serviços</span>
<p>Acompanhe em tempo real nossas estatísticas através de plataformas de Inteligência de Negócios (BI).</p>
</div>
</div>
</a>
<a href="/home/gerencial/milestones">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/milestone_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Milestones</span>
<p>Milestones são eventos temporais importantes que tem influência e impacto nos resultados da instituição. </p>
</div>
</div>
</a>
<a href="/home/gerencial/quadro_competencias">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/quadro_de_competencias_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Quadro de Competências</span>
<p>Conheça os papéis e reponsabilidades das nossas equipes e os responsáveis por cada projeto.</p>
</div>
</div>
</a>
<a href="/home/gerencial/banco_compras">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/banco_de_compras_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Banco de Compras</span>
<p>Histórico de compras institucionais para referência e otimização do processo em casos futuros</p>
</div>
</div>
</a>
<a href="/home/gerencial/relatorios">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/relatorio_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Relatórios</span>
<p>Relatórios de resultados e métricas da coordenadoria de infraestrutura.</p>
</div>
</div>
</a>
<a href="/home/gerencial/analises_tecnicas">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/analise_tecnica_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Análises Técnicas</span>
<p>Seção destinada à documentação e à publicação de análises técnicas das Coordenadorias</p>
</div>
</div>
</a>
<a href="/home/gerencial/gerenciamentos">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/gerenciamentos_new_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Gerenciamentos</span>
<p>Documentação e acompanhamento dos gerenciamentos aplicados a instituição (requisição, mudanças, incidentes e problemas).</p>
</div>
</div>
</a>
<a href="/home/gerencial/contratos">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/card_contratos_2.jpeg" />
</div>
<div class="card-body">
<span class="tag">Contratos e congêneres</span>
<p>Registro de seus contratos, acordos, termos ou convênios e outros instrumentos congêneres </p>
</div>
</div>
</a>
</div>
# Base de conhecimento
<br>
<div class="admin-header">
<div class="admin-header-title">
<div class="headline primary--text animated fadeInUp">Procedimentos operacionais, erros conhecidos, contatos de setores de TI, manuais de orientação aos usuários, tutoriais de como os serviços de infra foram elaborados entre outros.</div>
<div class="subtitle-1 grey--text animated fadeInLeft"></div>
</div>
<div class="spacer">
</div>
</div>
<div class="container">
<a href="https://ava.escoladegoverno.ro.gov.br/">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/aprendizagem_new_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Ambiente de Aprendizagem</span>
<p>Você poderá fazer a auto-inscrição nos cursos disponibilizados aqui.</p>
</div>
</div>
</a>
<br/>
<a href="/home/base_conhecimento/manuais">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/manual_new_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Manuais</span>
<p>Instruções e orientações para a utilização de serviços, facilitando as rotinas do usuário nas principais dúvidas.</p>
</div>
</div>
</a>
<br/>
<a href="home/base_conhecimento/sistemas">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/portifolio_de_sistemas_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Portfólio de Sistemas</span>
<p>Listagem dos sistemas desenvolvidos pela SETIC, bem como suas informações técnicas.</p>
</div>
</div>
</a>
<br/>
<a href="/home/base_conhecimento/projetos">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/portifolio_de_projetos_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Portfólio de Projetos</span>
<p>Listagem dos projetos desenvolvidos pela SETIC, bem como suas informações técnicas.</p>
</div>
</div>
</a>
<br/>
<a href="/home/base_conhecimento/procedimentos">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/procedimento_operacional_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Procedimentos Operacionais</span>
<p>Documentação de rotinas de trabalhos e como executar as atividades de cada setor.</p>
</div>
</div>
</a>
<br/>
<a href="/home/base_conhecimento/estudos_tecnicos">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/cases_infraestrutura_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Estudos Técnicos</span>
<p>Seção destinada à documentação e divulgação de estudos técnicos das coordenadorias.</p>
</div>
</div>
</a>
<br/>
<a href="home/base_conhecimento/erros/">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/erros-conhecidos_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Erros Conhecidos</span>
<p>Incidentes e problemas ocorridos na infraestrutura e plataformas.</p>
</div>
</div>
</a>
<br/>
<a href="/home/base_conhecimento/infraestrutura_rede">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/infraestrutura_de_rede_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Infraestrutura de Rede</span>
<p>Documentação e relatórios de infraestrutura física e lógica de segurança e operação da SETIC.</p>
</div>
</div>
</a>
<br/>
<a href="/home/base_conhecimento/ativos_sistemas">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/infraestrutura_de_rede_new_1024x512.jpg"/>
</div>
<div class="card-body">
<span class="tag">Sistemas e ativos</span>
<p>Documentação de hosts e aplicações hospedadas no datacenter da SETIC.</p>
</div>
</div>
</a>
</div>
<br>
# Compliance
<br>
<div class="admin-header">
<div class="admin-header-title">
<div class="headline primary--text animated fadeInUp">Documentação e políticas voltadas à estratégia e funcionamento da instituição.</div>
</div>
<div class="spacer"></div>
</div>
<div class="container">
<a href="/home/compliance/planodiretor">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/pdti_2021_new_1024x780.jpg"/>
</div>
<div class="card-body">
<span class="tag">PDTI 2021-2022</span>
<p>Plano diretor de Tecnologia da informação. Diretrizes e projetos voltados à TIC para o estado de Rondônia.</p>
</div>
</div>
</a>
<br/>
<br/>
<a href="/home/compliance/seguranca_informacao">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/politica_seg_da_informacao_new_1024x780.jpg" />
</div>
<div class="card-body">
<span class="tag">POLÍTICA DE SEGURANÇA DA INFORMAÇÃO</span>
<p>Guia de normas e boas práticas para prevenção de incidentes de segurança.</p>
</div>
</div>
</a>
<br/>
<a href="/home/compliance/mit_manual_infovia">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/manual_infra_tec_infovia_new_1024x780.jpg"/>
</div>
<div class="card-body">
<span class="tag">MANUAL DE INFRAESTRUTURA TÉCNICA INFOVIA</span>
<p>Providências de infraestrutura necessárias à implantação dos serviços INFOVIA.</p>
</div>
</div>
</a>
<br/>
<a href="home/compliance/portaria_n18_02_2022">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/portaria_18_new_1024x780.jpg"/>
</div>
<div class="card-body">
<span class="tag">PORTARIA</span>
<p>Uso de duas atribuições legais, conferidas pelo Decreto de 01/01/2019.</p>
</div>
</div>
</a>
<br/>
<a href="/home/compliance/plano_gestao_incidentes_seguranca_informacao">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/plano_gestao_incidentes_seguranca_informacao_new_1024x780.jpg"/>
</div>
<div class="card-body">
<span class="tag">PLANO DE GESTÃO DE INCIDENTES DE SI</span>
<p>Documento regulador para prevenção e tratamento de incidentes de segurança de dados.</p>
</div>
</div>
</a>
<a href="/home/compliance/rh">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/cartilha_rh_new_1024x780.jpg"/>
</div>
<div class="card-body">
<span class="tag">RECURSOS HUMANOS</span>
<p>Informar aos servidores a estrutura administrativa, o organograma, as normas e o dia a dia, relativo ao órgão de lotação do servidor. </p>
</div>
</div>
</a>
<a href="/home/compliance/pctic_2022_23">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/plano_de_continuida_de_tec._da_inf._e_com.___pctic___v1___revisado-1_page-0001.jpg"/>
</div>
<div class="card-body">
<span class="tag">PCTIC - 2022/23</span>
<p>Proporcionar a redução de interrupção das atividades do
negócio e proteção dos processos críticos contra defeitos, falhas ou desastres.</p>
</div>
</div>
</a>
<a href="/home/compliance/lgpd">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/lgpd.png"/>
</div>
<div class="card-body">
<span class="tag">LGPD</span>
<p>Documentos relacionados à Lei Geral de Proteção de Dados Pessoais (LGPD)</p>
</div>
</div>
</a>
<br/>
</div>
¶ Resultado Final
Resultado final
¶ Padrões da Plataforma Wiki.SETIC
Nesta seção, podemos encontrar toda a padronização da Plataforma Wiki.SETIC, com exceção da página inicial.
¶ Cards auxiliares
Todos os componentes documentados nesta seção foram utilizados reaproveitando o css da página inicial. Verificar aqui Injetando CSS Página Inicial
Utilizado nas seções:
Manuais
Portfólio de Projetos
Procedimentos Operacionais
Gerencial / Gerenciamentos
Base de Conhecimento / Estudos Técnicos
- CSS completo para confecção do CARD auxiliar:
.container-1 {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",
Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,
"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}
.ui .card {
margin: 8px;
margin-top: 20px
}
.card:hover {
transform: scale(1.03);
box-shadow: 0 12px 10px rgba(0,0,0,.25);
transition: color .3s ease
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12px;
color: gray
}
.card-body p {
font-size: 1.1rem;
font-weight: 500;
color: #2b73b7;
justify-content: center;
align-items: center;
text-align: center
}
.ui.card,
.ui.cards > .card {
max-width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 290px;
min-height: 0;
background: #fff;
padding: 20;
border: none;
border-radius: .28571429rem;
-webkit-box-shadow: 0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;
box-shadow: 0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;
-webkit-transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
transition: box-shadow .1s ease,transform .1s ease;
transition: box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;
z-index: ''
}
.ui.card {
margin: 1em 0
}
.ui.cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: -.875em -.5em;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: left
}
- HTML Completo do CARDS auxiliares
<div class="container-1">
<div class="ui five doubling cards">
<a class="card" href="/home/base_conhecimento/manuais/glpi">
<div class="card-header">
<div style='position:relative; top:0px; left:0px;'>
<img src="/banco_de_imagens/imagens_cards/fundo_cards_new_1024x512.jpg" />
<div style='position:absolute; top:20px; left: 77px;' >
<img src="/banco_de_imagens/icons/glpi-logo.png" width="130" height="100">
</div>
</div>
</div>
<div class="card-body">
<p>Manuais</p>
<br>
</div>
</a>
<a class="card" href="/home/base_conhecimento/manuais/sei">
<div class="card-header">
<div style='position:relative; top:0px; left:0px;'>
<img src="/banco_de_imagens/imagens_cards/fundo_cards_new_1024x512.jpg" />
<div style='position:absolute; top:30px; left: 92px;' >
<img src="/banco_de_imagens/icons/sei-teste.png" width="100" height="65">
</div>
</div>
</div>
<div class="card-body">
<p>Manuais Sistema SEI</p>
<br>
</div>
</a>
<a class="card" href="/home/base_conhecimento/manuais/suporte">
<div class="card-header">
<div style='position:relative; top:0px; left:0px;'>
<img src="/banco_de_imagens/imagens_cards/fundo_cards_new_1024x512.jpg" />
<div style='position:absolute; top:30px; left: 105px;' >
<img src="/banco_de_imagens/icons/suporte-100x100-teste.png" width="80" height="80">
</div>
</div>
</div>
<div class="card-body">
<p>Suporte Atendimento</p>
<br>
</div>
</a>
<a class="card" href="/home/base_conhecimento/manuais/sistemas">
<div class="card-header">
<div style='position:relative; top:0px; left:0px;'>
<img src="/banco_de_imagens/imagens_cards/fundo_cards_new_1024x512.jpg" />
<div style='position:absolute; top:30px; left: 100px;' >
<img src="/banco_de_imagens/icons/icons8-livros-100x100-teste.png" width="80" height="80">
</div>
</div>
</div>
<div class="card-body">
<p>Manuais de Sistema</p>
<br>
</div>
</a>
<a class="card" href="/home/base_conhecimento/manuais/aquisicoes">
<div class="card-header">
<div style='position:relative; top:0px; left:0px;'>
<img src="/banco_de_imagens/imagens_cards/fundo_cards_new_1024x512.jpg" />
<div style='position:absolute; top:30px; left: 106px;' >
<img src="/banco_de_imagens/icons/icons8-pilha-de-documentos-100x100-teste.png" width="80" height="80">
</div>
</div>
</div>
<div class="card-body">
<p>Manuais Processo de Aquisições</p>
<br>
</div>
</a>
<a class="card" href="/home/base_conhecimento/manuais/voip">
<div class="card-header">
<div style='position:relative; top:0px; left:0px;'>
<img src="/banco_de_imagens/imagens_cards/fundo_cards_new_1024x512.jpg" />
<div style='position:absolute; top:30px; left: 106px;' >
<img src="/banco_de_imagens/icons/icons8-telefone-100x100.png" width="80" height="80">
</div>
</div>
</div>
<div class="card-body">
<p>Manuais VOIP</p>
<br>
</div>
</a>
</div>
</div>
- Resultado Final:
- Tipo de Alinhamento dos cards:
display: flex;conforme na classe.card-bodydo CSS.
CARD Padrão SPACES
No caso da seção SPACES foi o mesmo CARD utilizado em Gerencial
Spaces:
Coinfra
Cosegi
Cagd
Code
Coge
Gabinete
Na confecção dos cards nos SPACES, favor verificar a URL de cada CARD como cada Coordenação possui seus CARDs independentes, mas possuem a mesma padronização.
- Seção SPACE:
SPACES
- CSS completo em cada Seção SPACES
.container {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.v-main .contents a.is-external-link:after {
font-family: Material Design Icons,sans-serif;
font-size: 24px/1;
padding-left: 3px;
display: inline-block;
content: "";
color: #9e9e9e;
text-decoration: none
}
a {
text-decoration: none
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 6px 10px rgba(46,61,73,.15);
overflow: hidden;
width: 260px;
margin: 8px;
align-items: stretch;
transition: all .2s ease
}
.card:hover {
transform: scale(1.01);
box-shadow: 0 6px 10px rgba(0,0,0,.25);
transition: color .3s ease
}
.card-header .img {
width: 100%;
min-height: 200px;
object-fit: cover
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
min-height: 150px;
text-align: center
}
.card-body .tag {
font-weight: 700;
color: #2b73b7;
text-transform: uppercase;
cursor: pointer;
font-size: 16px
}
.card-body p {
justify-content: center;
align-items: center;
font-size: 14px;
text-align: center;
color: #8c8c8c
}
- HTML completo da cada Seção SPACES
<div class="container">
<a href="home/spaces/cosegi/estudos_tecnicos">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/catalogo_de_servicos_new_02_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Estudos técnicos</span>
<p>Aqui você coloca apenas artigos e estudos técnicos.</p>
</div>
</div>
</a>
<a href="home/spaces/cosegi/tutoriais">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/catalogo_de_servicos_new_02_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Tutoriais</span>
<p>Aqui você coloca apenas tutoriais.</p>
</div>
</div>
</a>
<a href="home/spaces/cosegi/boas_praticas">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/catalogo_de_servicos_new_02_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Boas práticas</span>
<p>Aqui você coloca apenas as nossas boas práticas.</p>
</div>
</div>
</a>
<a href="home/Base-Conhecimento/estudostecnicos/coordenadoriadedados">
<div class="card">
<div class="card-header">
<img src="/banco_de_imagens/imagens_cards/catalogo_de_servicos_new_02_1024x512.jpg" />
</div>
<div class="card-body">
<span class="tag">Publicações</span>
<p>Aqui você vai encontrar os nossos estudos publicados.</p>
</div>
</div>
</a>
- Resultado Final:
- Neste caso o tipo de alinhamento dos cards está na classe:
.containerconforme o CSS.
CARDs Padrão dos SPACES
¶ Tabela dinâmica
Esse recurso é padronizado e aplicado em todas as páginas auxiliares da Plataforma Wiki.SETIC, com a principal função de organizar, orientar e listar o conteúdo pertinente.
- Layout da Tabela Dinâmica:
Tabela Dinâmica
- CSS completo da Tabela dinâmica
.ui.table {
width: 100%;
background: #fff;
margin: 1em 0;
border: 1px solid rgba(34,36,38,.15);
box-shadow: none;
border-radius: .28571429rem;
text-align: left;
color: rgba(0,0,0,.87);
border-collapse: separate;
border-spacing: 0
}
.ui.table:first-child {
margin-top: 0
}
.ui.table:last-child {
margin-bottom: 0
}
.ui.table thead th {
cursor: auto;
background: #f9fafb;
text-align: inherit;
color: rgba(0,0,0,.87);
padding: .92857143em .78571429em;
vertical-align: inherit;
font-style: none;
font-weight: 700;
text-transform: none;
border-bottom: 1px solid rgba(34,36,38,.1);
border-left: none
}
.ui.table thead tr > th:first-child {
border-left: none
}
.ui.table thead tr:first-child > th:first-child {
border-radius: .28571429rem 0 0 0
}
.ui.table thead tr:first-child > th:last-child {
border-radius: 0 .28571429rem 0 0
}
.ui.table thead tr:first-child > th:only-child {
border-radius: .28571429rem .28571429rem 0 0
}
@media only screen and (max-width:767px) {
.ui.table:not(.unstackable) {
width: 100%
}
.ui.table:not(.unstackable) tbody,
.ui.table:not(.unstackable) tr,
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
width: auto!important;
display: block!important
}
.ui.table:not(.unstackable) {
padding: 0
}
.ui.table:not(.unstackable) thead {
display: block
}
.ui.table:not(.unstackable) tfoot {
display: block
}
.ui.table:not(.unstackable) tr {
padding-top: 1em;
padding-bottom: 1em;
box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important
}
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
background: 0 0;
border: none!important;
padding: .25em .75em!important;
box-shadow: none!important
}
.ui.table:not(.unstackable) td:first-child,
.ui.table:not(.unstackable) th:first-child {
font-weight: 700
}
.ui.definition.table:not(.unstackable) thead th:first-child {
box-shadow: none!important
}
}
.ui.definition.table thead:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: 400;
color: rgba(0,0,0,.4);
box-shadow: -1px -1px 0 1px #fff
}
.ui.definition.table tfoot:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: rgba(0,0,0,.4);
color: normal;
box-shadow: 1px 1px 0 1px #fff
}
.ui.celled.definition.table thead:not(.full-width) th:first-child {
box-shadow: 0 -1px 0 1px #fff
}
.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
box-shadow: 0 1px 0 1px #fff
}
.ui.definition.table tr td.definition,
.ui.definition.table tr td:first-child:not(.ignored) {
background: rgba(0,0,0,.03);
font-weight: 700;
color: rgba(0,0,0,.95);
text-transform: '';
box-shadow: '';
text-align: '';
font-size: 1em;
padding-left: '';
padding-right: ''
}
.ui.definition.table thead:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table td:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
- CSS Adicional da tabela
- limpeza de link, posicionamento de encaixe da tabela na página e alinhamento de texto na tabela
a {
text-decoration: none
}
.descri-manual {
text-align: center;
color: #000;
font-weight: 700
}
.versao {
text-align: center
}
.descr-grid-normal {
text-align: justify
}
.container-table {
text-align: center;
display: block
}
.v-main .contents table {
margin: 0;
border-spacing: 0
}
- HTML completo da Tabela Dinâmica
<table class="ui left definition table">
<thead>
<tr>
<th><p class="descri-manual">{DESCRIÇÃO DO TITULO DO INDICE}</p></th>
<th><p class="descri-manual"></p></th>
<th><p class="descri-manual">{DESCRIÇÃO}</p></th>
<th><p class="descri-manual">{ano ou versão ou em branco}</p></th>
</tr>
</thead>
<tbody>
<tr>
<td><p class="descri-manual">{INDICE 1}</p></td>
<td>
<a href="#" target="_blank">
<p class="versao">
<button type="button" class="ml-3 v-btn v-btn--depressed theme--dark v-size--default blue darken-2" style="flex: 1 1 100%;">
<span class="v-btn__content">
<div class="body-2 text-none">Acessar</div>
</span>
</button>
</p>
</a>
</td>
<td><p class="descr-grid-normal">{DESCRIÇÃO DO INDICE 1}</p></td>
<td><p class="versao">v2.0</p></td>
</tr>
<tr>
<td><p class="descri-manual">{INDICE 2}</p></td>
<td>
<a href="#" target="_blank">
<p class="versao">
<button type="button" class="ml-3 v-btn v-btn--depressed theme--dark v-size--default blue darken-2" style="flex: 1 1 100%;">
<span class="v-btn__content">
<div class="body-2 text-none">Acessar</div>
</span>
</button>
</p>
</a>
</td>
<td><p class="descr-grid-normal">{DESCRIÇÃO DO INDICE 2}</p></td>
<td><p class="versao">2021</p></td>
</tr>
<tr>
<td><p class="descri-manual">{INDICE 3}</p></td>
<td>
<a href="#" target="_blank">
<p class="versao">
<button type="button" class="ml-3 v-btn v-btn--depressed theme--dark v-size--default blue darken-2" style="flex: 1 1 100%;">
<span class="v-btn__content">
<div class="body-2 text-none">Acessar</div>
</span>
</button>
</p>
</a>
</td>
<td><p class="descr-grid-normal">{DESCRIÇÃO DO INDICE 3}</p></td>
<td><p class="versao"></p></td>
</tr>
</table>
<br>
- Resultado Final:
- Neste caso o tipo de alinhamento dos cards está na classe:
.containerconforme o CSS.
Tabela dinâmica(class="ui left definition table")
¶ Tabela estática
Esse recurso é padronizado e aplicado em todas as páginas auxiliares de estudos técnicos da Plataforma Wiki.SETIC, com a principal função auxiliar na transparência da documentação.
Correspondem a Data de elaboração, reponsáveis pelo estudo e equipe de estudo bem como objetivos e observações, como a imagem abaixo
- Css da Tabela Estática
.ui.table {
width: 100%;
background: #fff;
margin: 1em 0;
border: 1px solid rgba(34,36,38,.15);
box-shadow: none;
border-radius: .28571429rem;
text-align: left;
color: rgba(0,0,0,.87);
border-collapse: separate;
border-spacing: 0
}
.ui.table:first-child {
margin-top: 0
}
.ui.table:last-child {
margin-bottom: 0
}
.ui.table thead th {
cursor: auto;
background: #f9fafb;
text-align: inherit;
color: rgba(0,0,0,.87);
padding: .92857143em .78571429em;
vertical-align: inherit;
font-style: none;
font-weight: 700;
text-transform: none;
border-bottom: 1px solid rgba(34,36,38,.1);
border-left: none
}
.ui.table thead tr > th:first-child {
border-left: none
}
.ui.table thead tr:first-child > th:first-child {
border-radius: .28571429rem 0 0 0
}
.ui.table thead tr:first-child > th:last-child {
border-radius: 0 .28571429rem 0 0
}
.ui.table thead tr:first-child > th:only-child {
border-radius: .28571429rem .28571429rem 0 0
}
@media only screen and (max-width:767px) {
.ui.table:not(.unstackable) {
width: 100%
}
.ui.table:not(.unstackable) tbody,
.ui.table:not(.unstackable) tr,
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
width: auto!important;
display: block!important
}
.ui.table:not(.unstackable) {
padding: 0
}
.ui.table:not(.unstackable) thead {
display: block
}
.ui.table:not(.unstackable) tfoot {
display: block
}
.ui.table:not(.unstackable) tr {
padding-top: 1em;
padding-bottom: 1em;
box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important
}
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
background: 0 0;
border: none!important;
padding: .25em .75em!important;
box-shadow: none!important
}
.ui.table:not(.unstackable) td:first-child,
.ui.table:not(.unstackable) th:first-child {
font-weight: 700
}
.ui.definition.table:not(.unstackable) thead th:first-child {
box-shadow: none!important
}
}
.ui.definition.table thead:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: 400;
color: rgba(0,0,0,.4);
box-shadow: -1px -1px 0 1px #fff
}
.ui.definition.table tfoot:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: rgba(0,0,0,.4);
color: normal;
box-shadow: 1px 1px 0 1px #fff
}
.ui.celled.definition.table thead:not(.full-width) th:first-child {
box-shadow: 0 -1px 0 1px #fff
}
.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
box-shadow: 0 1px 0 1px #fff
}
.ui.definition.table tr td.definition,
.ui.definition.table tr td:first-child:not(.ignored) {
background: rgba(0,0,0,.03);
font-weight: 700;
color: rgba(0,0,0,.95);
text-transform: '';
box-shadow: '';
text-align: '';
font-size: 1em;
padding-left: '';
padding-right: ''
}
.ui.definition.table thead:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table td:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
- CSS adicional de alinhamento e enquadramento
.container-table {
text-align: center;
display: block
}
.v-main .contents table {
margin: 0;
border-spacing: 0
}
- HTML da Tabela Estática
<table class="ui definition table">
<thead>
</thead>
<tbody>
<tr>
<td><strong>{Data de elaboração}</strong></td>
<td>00/00/0000</td>
</tr>
<tr>
<td><strong>{Responsável pelo estudo}</strong></td>
<td>Pessoa (Assessor)</td>
</tr>
<tr>
<td><strong>{Equipe do estudo}</strong></td>
<td>
Pessoa 1 (Assessor)
<br>Pessoa 2 (Assessor)
<br>Pessoa 3 (Assessor)
<br>Pessoa 4 (Tecnico)
<br>Pessoa 5 (Analista)
<br>Pessoa 6 (Product Owner)
<br>Pessoa 7 (Coordenador)
<br>Pessoa 8 (Estagiario)
</td>
</tr>
<tr>
<td><strong>{Alvo}</strong></td>
<td>Sistema / Coordenação / Secretaria </td>
</tr>
<tr>
<td><strong>{Origem}</strong></td>
<td>Foco para o qual foi criado esse documento. Ex: Implementação de novos perfis no Alpha</td>
</tr>
<tr>
<td><strong>{Objetivo}</strong></td>
<td>
Durante o estudo foi identificado que, complementando o estudo anterior, algumas regras deverão ser implementadas no sistema XYZ para que os perfis sejam controlados de forma correta e acesse as APIs necessárias.
<br>
Estudo para compreender as necessidades do sistema XYZ, para que sejam criados novos perfis no Sistema XYZ.</td>
</tr>
<tr>
<td><strong>{Documentação correlata}</strong></td>
<td>-/-</td>
</tr>
<tr>
<td><strong>{Observações}</strong></td>
<td>O presente estudo demonstrou, em complemento ao estudo anterior, as necessidades do sistema XYZ para que sejam controlados os perfis. Porém as user stories não foram mais aprofundadas, pois ainda será realizada a ideação do novo projeto.</td>
</tr>
<tbody>
</table>
- Resultado Final:
Tabela Estática
¶ Tabelas auxiliares
¶ Página Procedimentos
A página de procedimentos foi elaborada, quase que exclusivamente em Semantic Ui, de modo que sua estruturação visual é organizada de maneira diferente. Observe:
A quantidade de cards mínimos em uma tela fora da responsividade é definida pela classe escolhida, «doubling» (dois), podendo ser alterada de acordo com o tamanho do conteúdo em tela, de modo a não ultrapassar o container.
<div class="container-1">
<div class="ui five doubling cards">
<a class="card" href="/pt-br/home/Base-Conhecimento/Procedimentos/comuns">
<div class="card-header">
<div class="image">
<img src="/banco_de_imagens/imagens_cards/glpi_new_1024x512.jpg" />
</div>
</div>
<div class="card-body">
<p>Procedimentos Comuns</p><br>
</div>
</a>
</div>
</div>
¶ Formatação em CSS3
.container-1 {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji",
"Segoe UI Symbol","Noto Color Emoji"
}
.ui .card {
margin: 8px;
margin-top: 20px
}
a {
text-decoration: none
}
.card:hover {
transform: scale(1.03);
box-shadow: 0 12px 10px rgba(0,0,0,.25);
transition: color .3s ease
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12px;
color: gray
}
.card-body p {
font-size: 1.1rem;
font-weight: 500;
color: #2b73b7;
justify-content: center;
align-items: center;
text-align: center
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #000
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1
}
.tooltip:hover .tooltiptext {
visibility: visible
}
¶ Formatação em Semantic
O alinhamento justify-content: space-evenly deve ser alterado quando o número de cards dor ímpar para justify-content: flex-start.
.ui.card,
.ui.cards > .card {
max-width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 290px;
min-height: 0;
background: #fff;
padding: 20;
border: none;
border-radius: .28571429rem;
-webkit-box-shadow: 0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;
box-shadow: 0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;
-webkit-transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
transition: box-shadow .1s ease,transform .1s ease;
transition: box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;
z-index: ''
}
.ui.card {
margin: 1em 0
}
.ui.cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: -.875em -.5em;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-evenly
}
¶ Resultado
¶ Tabelas: Guias
Uma quantidade considerável de páginas da Wiki.js é baseada em tabelas de conteúdo seguindo as classes de Semantic UI como orientação.
¶ Tabela
<table class="ui left definition table">
<thead>
<tr>
<th>
<p class="descri-manual">Procedimentos</p>
</th>
<th>
<p class="descri-manual"></p>
</th>
<th>
<p class="descri-manual">Descrição</p>
</th>
<th>
<p class="descri-manual">Sistema</p>
</th>
<th>
<p class="descri-manual">Versão</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Como atender um chamado?</td>
<td><a href="/pt-br/home/Base-Conhecimento/Procedimentos/comoatenderchamado" target="_blank">
<p class="versao">
<button type="button" class="ml-3 v-btn v-btn--depressed
theme--dark v-size--default blue darken-2" style="flex: 1 1 100%;">
<span class="v-btn__content">
<div class="body-2 text-none">Acessar</div>
</span>
</button>
</p>
</a>
</td>
<td>
<p class="descr-grid-normal">Como conduzir um atendimento no GLPI
com todos os detalhes e ferramentas da plataforma.</p>
</td>
<td>
<p class="versao">GLPI</p>
</td>
<td>
<p class="versao">10</p>
</td>
</tr>
</table>
¶ Fomatação em CSS3
a {
text-decoration: none
}
.descri-manual {
text-align: center;
color: #000;
font-weight: 700
}
.descr-manual {
text-align: center;
color: #000
}
.versao {
text-align: center
}
.descr-grid-normal {
text-align: justify
}
.container-table {
text-align: center;
display: block
}
.v-main .contents table {
margin: 0;
border-spacing: 0
}
¶ Formatação em Semantic
.ui.table {
width: 100%;
background: #fff;
margin: 1em 0;
border: 1px solid rgba(34,36,38,.15);
box-shadow: none;
border-radius: .28571429rem;
text-align: left;
color: rgba(0,0,0,.87);
border-collapse: separate;
border-spacing: 0
}
.ui.table:first-child {
margin-top: 0
}
.ui.table:last-child {
margin-bottom: 0
}
.ui.table thead th {
cursor: auto;
background: #f9fafb;
text-align: inherit;
color: rgba(0,0,0,.87);
padding: .92857143em .78571429em;
vertical-align: inherit;
font-style: none;
font-weight: 700;
text-transform: none;
border-bottom: 1px solid rgba(34,36,38,.1);
border-left: none
}
.ui.table thead tr > th:first-child {
border-left: none
}
.ui.table thead tr:first-child > th:first-child {
border-radius: .28571429rem 0 0 0
}
.ui.table thead tr:first-child > th:last-child {
border-radius: 0 .28571429rem 0 0
}
.ui.table thead tr:first-child > th:only-child {
border-radius: .28571429rem .28571429rem 0 0
}
@media only screen and (max-width:767px) {
.ui.table:not(.unstackable) {
width: 100%
}
.ui.table:not(.unstackable) tbody,
.ui.table:not(.unstackable) tr,
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
width: auto!important;
display: block!important
}
.ui.table:not(.unstackable) {
padding: 0
}
.ui.table:not(.unstackable) thead {
display: block
}
.ui.table:not(.unstackable) tfoot {
display: block
}
.ui.table:not(.unstackable) tr {
padding-top: 1em;
padding-bottom: 1em;
box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important
}
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
background: 0 0;
border: none!important;
padding: .25em .75em!important;
box-shadow: none!important
}
.ui.table:not(.unstackable) td:first-child,
.ui.table:not(.unstackable) th:first-child {
font-weight: 700
}
.ui.definition.table:not(.unstackable) thead th:first-child {
box-shadow: none!important
}
}
.ui.definition.table thead:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: 400;
color: rgba(0,0,0,.4);
box-shadow: -1px -1px 0 1px #fff
}
.ui.definition.table tfoot:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: rgba(0,0,0,.4);
color: normal;
box-shadow: 1px 1px 0 1px #fff
}
.ui.celled.definition.table thead:not(.full-width) th:first-child {
box-shadow: 0 -1px 0 1px #fff
}
.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
box-shadow: 0 1px 0 1px #fff
}
.ui.definition.table tr td.definition,
.ui.definition.table tr td:first-child:not(.ignored) {
background: rgba(0,0,0,.03);
font-weight: 700;
color: rgba(0,0,0,.95);
text-transform: '';
box-shadow: '';
text-align: '';
font-size: 1em;
padding-left: '';
padding-right: ''
}
.ui.definition.table thead:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table td:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
¶ Resultado
¶ Tabelas: Documentação
A formatação em CSS3 e Semantic UI são as mesmas para as duas categorias de tabelas de documentação.
Favor verificar a formatação padrão da data neste caso usaremos 00/00/0000(slash para direita) e a possivel formatação da class da table de acordo com o padrão utilizado nesta documentação.
Favor verificar atualização desta padronização com o Gerente de Gestão.
<table class="ui left definition table">
<thead>
<tr>
<th>
<p class="descri-manual">Análise</p>
</th>
<th>
<p class="descri-manual"></p>
</th>
<th>
<p class="descri-manual">Descrição</p>
</th>
<th>
<p class="descri-manual">Data de Publicação</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> Plano Estratégico 2022-2023</td>
<td><a href="#" target="_blank">
<p class="versao">
<button type="button" class="ml-3 v-btn v-btn--depressed theme--dark v-size--default blue darken-2" style="flex: 1 1 100%;">
<span class="v-btn__content">
<div class="body-2 text-none">Acessar</div>
</span>
</button>
</p>
</a>
</td>
<td>
<p class="descr-grid-normal">descrição do Estudo, Análise, etc..</p>
</td>
<td>
<p class="versao">01/01/2022</p>
</td>
</tr>
<tr>
¶ Formatação em CSS3
a {
text-decoration: none
}
.titulo {
text-align: center;
color: #000;
font-weight: 700
}
.texto {
text-align: center;
}
.container-table {
text-align: center;
display: block
}
.descr-grid-normal {
text-align: justify
}
.v-main .contents table {
margin: 0;
border-spacing: 0
}
¶ Formatação em Semantic UI
/*!
* # Semantic UI 2.4.1 - Table
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
.ui.table {
width: 100%;
background: #fff;
margin: 1em 0;
border: 1px solid rgba(34,36,38,.15);
-webkit-box-shadow: none;
box-shadow: none;
border-radius: .28571429rem;
text-align: left;
color: rgba(0,0,0,.87);
border-collapse: separate;
border-spacing: 0
}
.ui.table:first-child {
margin-top: 0
}
.ui.table:last-child {
margin-bottom: 0
}
.ui.table td,
.ui.table th {
-webkit-transition: background .1s ease,color .1s ease;
transition: background .1s ease,color .1s ease
}
.ui.table thead {
-webkit-box-shadow: none;
box-shadow: none
}
.ui.table thead th {
cursor: auto;
background: #f9fafb;
text-align: inherit;
color: rgba(0,0,0,.87);
padding: .92857143em .78571429em;
vertical-align: inherit;
font-style: none;
font-weight: 700;
text-transform: none;
border-bottom: 1px solid rgba(34,36,38,.1);
border-left: none
}
.ui.table thead tr > th:first-child {
border-left: none
}
.ui.table thead tr:first-child > th:first-child {
border-radius: .28571429rem 0 0 0
}
.ui.table thead tr:first-child > th:last-child {
border-radius: 0 .28571429rem 0 0
}
.ui.table thead tr:first-child > th:only-child {
border-radius: .28571429rem .28571429rem 0 0
}
.ui.table tfoot {
-webkit-box-shadow: none;
box-shadow: none
}
.ui.table tfoot th {
cursor: auto;
border-top: 1px solid rgba(34,36,38,.15);
background: #f9fafb;
text-align: inherit;
color: rgba(0,0,0,.87);
padding: .78571429em .78571429em;
vertical-align: middle;
font-style: normal;
font-weight: 400;
text-transform: none
}
.ui.table tfoot tr > th:first-child {
border-left: none
}
.ui.table tfoot tr:first-child > th:first-child {
border-radius: 0 0 0 .28571429rem
}
.ui.table tfoot tr:first-child > th:last-child {
border-radius: 0 0 .28571429rem 0
}
.ui.table tfoot tr:first-child > th:only-child {
border-radius: 0 0 .28571429rem .28571429rem
}
.ui.table tr td {
border-top: 1px solid rgba(34,36,38,.1)
}
.ui.table tr:first-child td {
border-top: none
}
.ui.table tbody + tbody tr:first-child td {
border-top: 1px solid rgba(34,36,38,.1)
}
.ui.table td {
padding: .78571429em .78571429em;
text-align: inherit
}
.ui.table > .icon {
vertical-align: baseline
}
.ui.table > .icon:only-child {
margin: 0
}
.ui.table.segment {
padding: 0
}
.ui.table.segment:after {
display: none
}
.ui.table.segment.stacked:after {
display: block
}
@media only screen and (max-width:767px) {
.ui.table:not(.unstackable) {
width: 100%
}
.ui.table:not(.unstackable) tbody,
.ui.table:not(.unstackable) tr,
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
width: auto!important;
display: block!important
}
.ui.table:not(.unstackable) {
padding: 0
}
.ui.table:not(.unstackable) thead {
display: block
}
.ui.table:not(.unstackable) tfoot {
display: block
}
.ui.table:not(.unstackable) tr {
padding-top: 1em;
padding-bottom: 1em;
-webkit-box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important;
box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important
}
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
background: 0 0;
border: none!important;
padding: .25em .75em!important;
-webkit-box-shadow: none!important;
box-shadow: none!important
}
.ui.table:not(.unstackable) td:first-child,
.ui.table:not(.unstackable) th:first-child {
font-weight: 700
}
.ui.definition.table:not(.unstackable) thead th:first-child {
-webkit-box-shadow: none!important;
box-shadow: none!important
}
}
.ui.table td .image,
.ui.table td .image img,
.ui.table th .image,
.ui.table th .image img {
max-width: none
}
.ui.structured.table {
border-collapse: collapse
}
.ui.structured.table thead th {
border-left: none;
border-right: none
}
.ui.structured.sortable.table thead th {
border-left: 1px solid rgba(34,36,38,.15);
border-right: 1px solid rgba(34,36,38,.15)
}
.ui.structured.basic.table th {
border-left: none;
border-right: none
}
.ui.structured.celled.table tr td,
.ui.structured.celled.table tr th {
border-left: 1px solid rgba(34,36,38,.1);
border-right: 1px solid rgba(34,36,38,.1)
}
.ui.definition.table thead:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: 400;
color: rgba(0,0,0,.4);
-webkit-box-shadow: -1px -1px 0 1px #fff;
box-shadow: -1px -1px 0 1px #fff
}
.ui.definition.table tfoot:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: rgba(0,0,0,.4);
color: normal;
-webkit-box-shadow: 1px 1px 0 1px #fff;
box-shadow: 1px 1px 0 1px #fff
}
.ui.celled.definition.table thead:not(.full-width) th:first-child {
-webkit-box-shadow: 0 -1px 0 1px #fff;
box-shadow: 0 -1px 0 1px #fff
}
.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
-webkit-box-shadow: 0 1px 0 1px #fff;
box-shadow: 0 1px 0 1px #fff
}
.ui.definition.table tr td.definition,
.ui.definition.table tr td:first-child:not(.ignored) {
background: rgba(0,0,0,.03);
font-weight: 700;
color: rgba(0,0,0,.95);
text-transform: '';
-webkit-box-shadow: '';
box-shadow: '';
text-align: '';
font-size: 1em;
padding-left: '';
padding-right: ''
}
.ui.definition.table thead:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table td:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.table td.positive,
.ui.table tr.positive {
-webkit-box-shadow: 0 0 0 #a3c293 inset;
box-shadow: 0 0 0 #a3c293 inset
}
.ui.table td.positive,
.ui.table tr.positive {
background: #fcfff5!important;
color: #2c662d!important
}
.ui.table td.negative,
.ui.table tr.negative {
-webkit-box-shadow: 0 0 0 #e0b4b4 inset;
box-shadow: 0 0 0 #e0b4b4 inset
}
.ui.table td.negative,
.ui.table tr.negative {
background: #fff6f6!important;
color: #9f3a38!important
}
.ui.table td.error,
.ui.table tr.error {
-webkit-box-shadow: 0 0 0 #e0b4b4 inset;
box-shadow: 0 0 0 #e0b4b4 inset
}
.ui.table td.error,
.ui.table tr.error {
background: #fff6f6!important;
color: #9f3a38!important
}
.ui.table td.warning,
.ui.table tr.warning {
-webkit-box-shadow: 0 0 0 #c9ba9b inset;
box-shadow: 0 0 0 #c9ba9b inset
}
.ui.table td.warning,
.ui.table tr.warning {
background: #fffaf3!important;
color: #573a08!important
}
.ui.table td.active,
.ui.table tr.active {
-webkit-box-shadow: 0 0 0 rgba(0,0,0,.87) inset;
box-shadow: 0 0 0 rgba(0,0,0,.87) inset
}
.ui.table td.active,
.ui.table tr.active {
background: #e0e0e0!important;
color: rgba(0,0,0,.87)!important
}
.ui.table tr td.disabled,
.ui.table tr.disabled td,
.ui.table tr.disabled:hover,
.ui.table tr:hover td.disabled {
pointer-events: none;
color: rgba(40,40,40,.3)
}
@media only screen and (max-width:991px) {
.ui[class*="tablet stackable"].table,
.ui[class*="tablet stackable"].table tbody,
.ui[class*="tablet stackable"].table tr,
.ui[class*="tablet stackable"].table tr > td,
.ui[class*="tablet stackable"].table tr > th {
width: 100%!important;
display: block!important
}
.ui[class*="tablet stackable"].table {
padding: 0
}
.ui[class*="tablet stackable"].table thead {
display: block
}
.ui[class*="tablet stackable"].table tfoot {
display: block
}
.ui[class*="tablet stackable"].table tr {
padding-top: 1em;
padding-bottom: 1em;
-webkit-box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important;
box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important
}
.ui[class*="tablet stackable"].table tr > td,
.ui[class*="tablet stackable"].table tr > th {
background: 0 0;
border: none!important;
padding: .25em .75em;
-webkit-box-shadow: none!important;
box-shadow: none!important
}
.ui.definition[class*="tablet stackable"].table thead th:first-child {
-webkit-box-shadow: none!important;
box-shadow: none!important
}
}
.ui.table [class*="left aligned"],
.ui.table[class*="left aligned"] {
text-align: left
}
.ui.table [class*="center aligned"],
.ui.table[class*="center aligned"] {
text-align: center
}
.ui.table [class*="right aligned"],
.ui.table[class*="right aligned"] {
text-align: right
}
.ui.table [class*="top aligned"],
.ui.table[class*="top aligned"] {
vertical-align: top
}
.ui.table [class*="middle aligned"],
.ui.table[class*="middle aligned"] {
vertical-align: middle
}
.ui.table [class*="bottom aligned"],
.ui.table[class*="bottom aligned"] {
vertical-align: bottom
}
.ui.table td.collapsing,
.ui.table th.collapsing {
width: 1px;
white-space: nowrap
}
.ui.fixed.table {
table-layout: fixed
}
.ui.fixed.table td,
.ui.fixed.table th {
overflow: hidden;
text-overflow: ellipsis
}
.ui.selectable.table tbody tr:hover,
.ui.table tbody tr td.selectable:hover {
background: rgba(0,0,0,.05)!important;
color: rgba(0,0,0,.95)!important
}
.ui.inverted.table tbody tr td.selectable:hover,
.ui.selectable.inverted.table tbody tr:hover {
background: rgba(255,255,255,.08)!important;
color: #fff!important
}
.ui.table tbody tr td.selectable {
padding: 0
}
.ui.table tbody tr td.selectable > a:not(.ui) {
display: block;
color: inherit;
padding: .78571429em .78571429em
}
.ui.selectable.table tr.error:hover,
.ui.selectable.table tr:hover td.error,
.ui.table tr td.selectable.error:hover {
background: #ffe7e7!important;
color: #943634!important
}
.ui.selectable.table tr.warning:hover,
.ui.selectable.table tr:hover td.warning,
.ui.table tr td.selectable.warning:hover {
background: #fff4e4!important;
color: #493107!important
}
.ui.selectable.table tr.active:hover,
.ui.selectable.table tr:hover td.active,
.ui.table tr td.selectable.active:hover {
background: #e0e0e0!important;
color: rgba(0,0,0,.87)!important
}
.ui.selectable.table tr.positive:hover,
.ui.selectable.table tr:hover td.positive,
.ui.table tr td.selectable.positive:hover {
background: #f7ffe6!important;
color: #275b28!important
}
.ui.selectable.table tr.negative:hover,
.ui.selectable.table tr:hover td.negative,
.ui.table tr td.selectable.negative:hover {
background: #ffe7e7!important;
color: #943634!important
}
.ui.attached.table {
top: 0;
bottom: 0;
border-radius: 0;
margin: 0 -1px;
width: calc(100% - (-1px * 2));
max-width: calc(100% - (-1px * 2));
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #d4d4d5
}
.ui.attached + .ui.attached.table:not(.top) {
border-top: none
}
.ui[class*="top attached"].table {
bottom: 0;
margin-bottom: 0;
top: 0;
margin-top: 1em;
border-radius: .28571429rem .28571429rem 0 0
}
.ui.table[class*="top attached"]:first-child {
margin-top: 0
}
.ui[class*="bottom attached"].table {
bottom: 0;
margin-top: 0;
top: 0;
margin-bottom: 1em;
-webkit-box-shadow: none,none;
box-shadow: none,none;
border-radius: 0 0 .28571429rem .28571429rem
}
.ui[class*="bottom attached"].table:last-child {
margin-bottom: 0
}
.ui.striped.table > tr:nth-child(2n),
.ui.striped.table tbody tr:nth-child(2n) {
background-color: rgba(0,0,50,.02)
}
.ui.inverted.striped.table > tr:nth-child(2n),
.ui.inverted.striped.table tbody tr:nth-child(2n) {
background-color: rgba(255,255,255,.05)
}
.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
background: #efefef!important;
color: rgba(0,0,0,.95)!important
}
.ui.table [class*="single line"],
.ui.table[class*="single line"] {
white-space: nowrap
}
.ui.table [class*="single line"],
.ui.table[class*="single line"] {
white-space: nowrap
}
.ui.red.table {
border-top: .2em solid #db2828
}
.ui.inverted.red.table {
background-color: #db2828!important;
color: #fff!important
}
.ui.orange.table {
border-top: .2em solid #f2711c
}
.ui.inverted.orange.table {
background-color: #f2711c!important;
color: #fff!important
}
.ui.yellow.table {
border-top: .2em solid #fbbd08
}
.ui.inverted.yellow.table {
background-color: #fbbd08!important;
color: #fff!important
}
.ui.olive.table {
border-top: .2em solid #b5cc18
}
.ui.inverted.olive.table {
background-color: #b5cc18!important;
color: #fff!important
}
.ui.green.table {
border-top: .2em solid #21ba45
}
.ui.inverted.green.table {
background-color: #21ba45!important;
color: #fff!important
}
.ui.teal.table {
border-top: .2em solid #00b5ad
}
.ui.inverted.teal.table {
background-color: #00b5ad!important;
color: #fff!important
}
.ui.blue.table {
border-top: .2em solid #2185d0
}
.ui.inverted.blue.table {
background-color: #2185d0!important;
color: #fff!important
}
.ui.violet.table {
border-top: .2em solid #6435c9
}
.ui.inverted.violet.table {
background-color: #6435c9!important;
color: #fff!important
}
.ui.purple.table {
border-top: .2em solid #a333c8
}
.ui.inverted.purple.table {
background-color: #a333c8!important;
color: #fff!important
}
.ui.pink.table {
border-top: .2em solid #e03997
}
.ui.inverted.pink.table {
background-color: #e03997!important;
color: #fff!important
}
.ui.brown.table {
border-top: .2em solid #a5673f
}
.ui.inverted.brown.table {
background-color: #a5673f!important;
color: #fff!important
}
.ui.grey.table {
border-top: .2em solid #767676
}
.ui.inverted.grey.table {
background-color: #767676!important;
color: #fff!important
}
.ui.black.table {
border-top: .2em solid #1b1c1d
}
.ui.inverted.black.table {
background-color: #1b1c1d!important;
color: #fff!important
}
.ui.one.column.table td {
width: 100%
}
.ui.two.column.table td {
width: 50%
}
.ui.three.column.table td {
width: 33.33333333%
}
.ui.four.column.table td {
width: 25%
}
.ui.five.column.table td {
width: 20%
}
.ui.six.column.table td {
width: 16.66666667%
}
.ui.seven.column.table td {
width: 14.28571429%
}
.ui.eight.column.table td {
width: 12.5%
}
.ui.nine.column.table td {
width: 11.11111111%
}
.ui.ten.column.table td {
width: 10%
}
.ui.eleven.column.table td {
width: 9.09090909%
}
.ui.twelve.column.table td {
width: 8.33333333%
}
.ui.thirteen.column.table td {
width: 7.69230769%
}
.ui.fourteen.column.table td {
width: 7.14285714%
}
.ui.fifteen.column.table td {
width: 6.66666667%
}
.ui.sixteen.column.table td {
width: 6.25%
}
.ui.table td.one.wide,
.ui.table th.one.wide {
width: 6.25%
}
.ui.table td.two.wide,
.ui.table th.two.wide {
width: 12.5%
}
.ui.table td.three.wide,
.ui.table th.three.wide {
width: 18.75%
}
.ui.table td.four.wide,
.ui.table th.four.wide {
width: 25%
}
.ui.table td.five.wide,
.ui.table th.five.wide {
width: 31.25%
}
.ui.table td.six.wide,
.ui.table th.six.wide {
width: 37.5%
}
.ui.table td.seven.wide,
.ui.table th.seven.wide {
width: 43.75%
}
.ui.table td.eight.wide,
.ui.table th.eight.wide {
width: 50%
}
.ui.table td.nine.wide,
.ui.table th.nine.wide {
width: 56.25%
}
.ui.table td.ten.wide,
.ui.table th.ten.wide {
width: 62.5%
}
.ui.table td.eleven.wide,
.ui.table th.eleven.wide {
width: 68.75%
}
.ui.table td.twelve.wide,
.ui.table th.twelve.wide {
width: 75%
}
.ui.table td.thirteen.wide,
.ui.table th.thirteen.wide {
width: 81.25%
}
.ui.table td.fourteen.wide,
.ui.table th.fourteen.wide {
width: 87.5%
}
.ui.table td.fifteen.wide,
.ui.table th.fifteen.wide {
width: 93.75%
}
.ui.table td.sixteen.wide,
.ui.table th.sixteen.wide {
width: 100%
}
.ui.sortable.table thead th {
cursor: pointer;
white-space: nowrap;
border-left: 1px solid rgba(34,36,38,.15);
color: rgba(0,0,0,.87)
}
.ui.sortable.table thead th:first-child {
border-left: none
}
.ui.sortable.table thead th.sorted,
.ui.sortable.table thead th.sorted:hover {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.ui.sortable.table thead th:after {
display: none;
font-style: normal;
font-weight: 400;
text-decoration: inherit;
content: '';
height: 1em;
width: auto;
opacity: .8;
margin: 0 0 0 .5em;
font-family: Icons
}
.ui.sortable.table thead th.ascending:after {
content: '\f0d8'
}
.ui.sortable.table thead th.descending:after {
content: '\f0d7'
}
.ui.sortable.table th.disabled:hover {
cursor: auto;
color: rgba(40,40,40,.3)
}
.ui.sortable.table thead th:hover {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.8)
}
.ui.sortable.table thead th.sorted {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.95)
}
.ui.sortable.table thead th.sorted:after {
display: inline-block
}
.ui.sortable.table thead th.sorted:hover {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.95)
}
.ui.inverted.sortable.table thead th.sorted {
background: rgba(255,255,255,.15) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));
background: rgba(255,255,255,.15) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));
background: rgba(255,255,255,.15) linear-gradient(transparent,rgba(0,0,0,.05));
color: #fff
}
.ui.inverted.sortable.table thead th:hover {
background: rgba(255,255,255,.08) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));
background: rgba(255,255,255,.08) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));
background: rgba(255,255,255,.08) linear-gradient(transparent,rgba(0,0,0,.05));
color: #fff
}
.ui.inverted.sortable.table thead th {
border-left-color: transparent;
border-right-color: transparent
}
.ui.inverted.table {
background: #333;
color: rgba(255,255,255,.9);
border: none
}
.ui.inverted.table th {
background-color: rgba(0,0,0,.15);
border-color: rgba(255,255,255,.1)!important;
color: rgba(255,255,255,.9)!important
}
.ui.inverted.table tr td {
border-color: rgba(255,255,255,.1)!important
}
.ui.inverted.table tr td.disabled,
.ui.inverted.table tr.disabled td,
.ui.inverted.table tr.disabled:hover td,
.ui.inverted.table tr:hover td.disabled {
pointer-events: none;
color: rgba(225,225,225,.3)
}
.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
.ui.inverted.definition.table thead:not(.full-width) th:first-child {
background: #fff
}
.ui.inverted.definition.table tr td:first-child {
background: rgba(255,255,255,.02);
color: #fff
}
.ui.collapsing.table {
width: auto
}
.ui.basic.table {
background: 0 0;
border: 1px solid rgba(34,36,38,.15);
-webkit-box-shadow: none;
box-shadow: none
}
.ui.basic.table tfoot,
.ui.basic.table thead {
-webkit-box-shadow: none;
box-shadow: none
}
.ui.basic.table th {
background: 0 0;
border-left: none
}
.ui.basic.table tbody tr {
border-bottom: 1px solid rgba(0,0,0,.1)
}
.ui.basic.table td {
background: 0 0
}
.ui.basic.striped.table tbody tr:nth-child(2n) {
background-color: rgba(0,0,0,.05)!important
}
.ui[class*="very basic"].table {
border: none
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) td,
.ui[class*="very basic"].table:not(.sortable):not(.striped) th {
padding: ''
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child,
.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child {
padding-left: 0
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child,
.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child {
padding-right: 0
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
padding-top: 0
}
.ui.celled.table tr td,
.ui.celled.table tr th {
border-left: 1px solid rgba(34,36,38,.1)
}
.ui.celled.table tr td:first-child,
.ui.celled.table tr th:first-child {
border-left: none
}
.ui.padded.table th {
padding-left: 1em;
padding-right: 1em
}
.ui.padded.table td,
.ui.padded.table th {
padding: 1em 1em
}
.ui[class*="very padded"].table th {
padding-left: 1.5em;
padding-right: 1.5em
}
.ui[class*="very padded"].table td {
padding: 1.5em 1.5em
}
.ui.compact.table th {
padding-left: .7em;
padding-right: .7em
}
.ui.compact.table td {
padding: .5em .7em
}
.ui[class*="very compact"].table th {
padding-left: .6em;
padding-right: .6em
}
.ui[class*="very compact"].table td {
padding: .4em .6em
}
.ui.small.table {
font-size: .9em
}
.ui.table {
font-size: 1em
}
.ui.large.table {
font-size: 1.1em
}
¶ Identificação de Erros
<br>
<table class="ui celled structured table">
<thead>
<tr>
<th>
<p class="titulo">Problema</p>
</th>
<th>
<p class="titulo">Tipo</p>
</th>
<th>
<p class="titulo">Origem</p>
</th>
<th>
<p class="titulo">Equipe responsável</p>
</th>
<th>
<p class="titulo">Dano do processo</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><p class="texto">0000</p></td>
<td><p class="texto">Reativo/preventivo</p></td>
<td><p class="texto">Reparo/melhoria/atualização</p></td>
<td><p class="texto">Nome aqui</p></td>
<td><p class="texto">Descrição do dano</p></td>
</tr>
<thead>
<tr>
<th>
<p class="titulo">Alvos</p>
</th>
<th><p class="texto"></p></th>
<th><p class="texto"></p></th>
<th><p class="texto"></p></th>
<th>
<p class="titulo">Observações</p></th>
</thead>
<tbody>
<tr>
<td><p class="texto">Alvos do problema</p></td>
<td><p class="texto"></p></td>
<td><p class="texto"></p></td>
<td><p class="texto"></p></td>
<td><p class="texto">Observações sobre a solução</p></td>
</tr>
</tbody>
</table>
¶ Resultado
¶ Registro Relacionado
<br>
<table class="ui celled structured table">
<thead>
<tr>
<th>
<p class="titulo">ID</p>
</th>
<th>
<p class="titulo">Categoria</p>
</th>
<th>
<p class="titulo">Descrição</p>
</th>
<th>
<p class="titulo">Data</p>
</th>
<th>
<p class="titulo">Origem</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><p class="texto">ID no GLPI</p></td>
<td><p class="texto">Categoria da solicitação/incidente</p></td>
<td><p class="texto">Descrição do ocorrido</p></td>
<td><p class="texto">Data do evento</p></td>
<td><p class="texto">Atendimento, rotina de verificação, monitoramento e etc</p></td>
</tr>
</tbody>
</table>
¶ Resultado
¶ Estudos técnicos
¶ ABNT
Para inserir a formatação ABN 6023 recomenda-se a utilização de <div>'s, simplificando a formatação em CSS3, sem a necessidade de aplicar o parâmetro prgunitariamente entre os parágrafos.
EX:
<div class="prg">
O Plano de Continuidade de TIC deverá abranger os cenários de situações inesperadas ou incidentes, quer sejam operacionais, desastres ou crises, além de formas de gerenciar os impactos imediatos de um incidente de interrupção, dando a devida atenção para:
</div>
CSS3:
.prg {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
text-indent: 20px;
font-size: 1.1rem;
font-weight: 450;
line-height: 1.5;
color: #212529;
text-align: justify
}
Um método de segregar a formatação é criar outras tags com os mesmos princípios.
EX:
.prg1 {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
text-indent: 20px;
font-size: 1.1rem;
font-weight: 450;
line-height: 1.5;
color: #212529;
text-align: justify
}
Neste exemplo o «text-indent» foi retirado para que a primeira linha deixe de recer o espaçamento da ABNT, mantendo o tamanho da fonte e outras formas. O uso desta formatação é indicado para o caso de inserção, especialmente, de blocos (informação, sucesso, avis, erro ou simples) ou mesmo códigos, evitando a confusão estrutural.
Os estudos técnicos possuem formatação tabular específica:
¶ Tabelas de catalogação
<table class="ui definition table">
<thead>
</thead>
<tbody>
<tr>
<td><strong>Data de elaboração</strong></td>
<td>05/08/2022</td>
</tr>
<tr>
<td><strong>Responsável pelo estudo</strong></td>
<td>Ana Flávia Maia Barbosa<br> Caio César de Oliveira Freitas </td>
</tr>
<tr>
<td><strong>Equipe do estudo</strong></td>
<td>Time EVA</td>
</tr>
<tr>
<td><strong>Alvo</strong></td>
<td>Projeto</td>
</tr>
<tr>
<td><strong>Origem</strong></td>
<td>Objetivo Estratégico: Elaborar uma estrutura de rotina para construção de dashboard</td>
</tr>
<tr>
<td><strong>Objetivo</strong></td>
<td>No intuito de atingir efetividade e objetividade em projetos relacionados ao desenvolvimento de painéis de dados interativos (dashboard), surgiu a necessidade de elaborar uma estrutura para a rotina de construção de um dashboard. Dessa forma, será possível evitar dúvidas, retrabalho e interpretações diferentes durante a construção de um dashboard, permitindo uma entrega mais eficaz e objetiva às partes interessadas.</td>
</tr>
<tr>
<td><strong>Documentação correlata</strong></td>
<td>https://dataschool.com/how-to-design-a-dashboard/what-is-a-dashboard/<br>https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/Introduction-to-design-thinking.pdf<br>https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process#:~:text=Empathize%3A%20research%20your%20users'%20needs,Test%3A%20try%20your%20solutions%20out.</td>
</tr>
<tr>
<td><strong>Observações</strong></td>
<td>-/-</td>
</tr>
<tbody>
</table>
<br>
¶ Tabelas de complexidade
Para estudos de desenvolvimento
<table class="ui definition table">
<thead align="center">
<th>História</th>
<th>Complexidade</th>
</thead>
<tbody>
<tr>
<td><strong>Padronizar consultas secundárias na tela de detalhes do processo</strong></td>
<td>8</td>
</tr>
</tbody>
</table>
¶ Tabela de dados
Para o funcionamento das tags em HTML5 com o markdown é necessário que haja ao menos dois espaços de distância entre um elemento e outro de cada linguagem de marcação.
Caso a linha de código ultrapasse o container (tamanho da página) é necessáiro inserir uma formatação diferente para atribuir a rolagem à tabela, limitando-a novamente ao container.
Para o correto funcionamento é imprescindível que a
<div class="code">seja colocada antes das tags<table>e não do elento que deseja limitar.A atribuição da rolagem é feita através de CSS3 conforme indicado abaixo.
HTML:
<div class="code">
<table class="ui definition table">
<thead align="lefth">
<th></th>
<th><mark style="background-color:#cceeff">Rota GET •</mark> /Documentos/{id}</th>
</thead>
<tbody>
<tr>
<td>Descrição</td>
<td>Rota que busca o documento pelo Guid.</td>
</tr>
<tr>
<td>Parâmetros</td>
<td><strong>id:</strong> Guid → Guid do documento.</td>
</tr>
<tr>
<td>Request Body</td>
<td>-/-</td>
<tr>
<td>Response</td>
<td>Código qe ultrapasse o container</td>
</tr>
</tbody>
</table>
CSS:
.code {
max-width: 100%;
overflow: scroll
}
As tags
</td>ao final da marcação de código (```js […] ````) devem ficar alinhadas à margem esquerda, do contrário serão absorvidas e inseridas como código de demonstração.
<table class="ui definition table">
<thead align="center">
<th>Rota</th>
<th><mark style="background-color:#ccffee">POST </mark> /api/Assinaturas</th>
</thead>
<tbody>
<tr>
<td>Descrição</td>
<td>esta rota serve para o usuário assinar um documento de maneira simples, apenas com o usuário logado e senha.</td>
</tr>
<tr>
<td>Request Body</td>
<td>
<li><strong>"cpf":</strong> "string" cpf do usuário logado.
<li><strong>"senha":</strong> "string" senha do usuário logado.
<li><strong>"sistemaClientId":</strong> Guid - o Id do sistema que está assinando.
<li><strong>"documentosIds":</strong> ["string"] - aceita uma lista de documentos para assinar.
</td>
<tr>
<td>Response</td>
<td>
```js
{
"id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
"cpf": "string",
"sistemaClientId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
"documentoId": "string",
"cargo": "string",
"matricula": "string",
"nome": "string",
"data": "2022-08-26T05:30:59.797Z",
"dataDeRevogacao": "2022-08-26T05:30:59.797Z",
"corpo": "string",
"revogada": true,
"ehUsuarioExterno": true
}```
</td>
</tr>
</tbody>
</table>
¶ Formatação em CSS3
.v-main .contents a.is-external-link:after {
font-family: Material Design Icons,sans-serif;
font-size: 24px/1;
padding-left: 3px;
display: inline-block;
content: "";
color: #9e9e9e;
text-decoration: none
}
a {
text-decoration: none
}
.titulo {
text-align: center;
color: #000;
font-weight: 700
}
.texto {
text-align: center
}
.container-table {
text-align: center;
display: block
}
.v-main .contents table {
margin: 0;
border-spacing: 0
}
¶ Formatação em Semantic UI
/*!
* # Semantic UI 2.4.1 - Table
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
.ui.table {
width: 100%;
background: #fff;
margin: 1em 0;
border: 1px solid rgba(34,36,38,.15);
-webkit-box-shadow: none;
box-shadow: none;
border-radius: .28571429rem;
text-align: left;
color: rgba(0,0,0,.87);
border-collapse: separate;
border-spacing: 0
}
.ui.table:first-child {
margin-top: 0
}
.ui.table:last-child {
margin-bottom: 0
}
.ui.table td,
.ui.table th {
-webkit-transition: background .1s ease,color .1s ease;
transition: background .1s ease,color .1s ease
}
.ui.table thead {
-webkit-box-shadow: none;
box-shadow: none
}
.ui.table thead th {
cursor: auto;
background: #f9fafb;
text-align: inherit;
color: rgba(0,0,0,.87);
padding: .92857143em .78571429em;
vertical-align: inherit;
font-style: none;
font-weight: 700;
text-transform: none;
border-bottom: 1px solid rgba(34,36,38,.1);
border-left: none
}
.ui.table thead tr > th:first-child {
border-left: none
}
.ui.table thead tr:first-child > th:first-child {
border-radius: .28571429rem 0 0 0
}
.ui.table thead tr:first-child > th:last-child {
border-radius: 0 .28571429rem 0 0
}
.ui.table thead tr:first-child > th:only-child {
border-radius: .28571429rem .28571429rem 0 0
}
.ui.table tfoot {
-webkit-box-shadow: none;
box-shadow: none
}
.ui.table tfoot th {
cursor: auto;
border-top: 1px solid rgba(34,36,38,.15);
background: #f9fafb;
text-align: inherit;
color: rgba(0,0,0,.87);
padding: .78571429em .78571429em;
vertical-align: middle;
font-style: normal;
font-weight: 400;
text-transform: none
}
.ui.table tfoot tr > th:first-child {
border-left: none
}
.ui.table tfoot tr:first-child > th:first-child {
border-radius: 0 0 0 .28571429rem
}
.ui.table tfoot tr:first-child > th:last-child {
border-radius: 0 0 .28571429rem 0
}
.ui.table tfoot tr:first-child > th:only-child {
border-radius: 0 0 .28571429rem .28571429rem
}
.ui.table tr td {
border-top: 1px solid rgba(34,36,38,.1)
}
.ui.table tr:first-child td {
border-top: none
}
.ui.table tbody + tbody tr:first-child td {
border-top: 1px solid rgba(34,36,38,.1)
}
.ui.table td {
padding: .78571429em .78571429em;
text-align: inherit
}
.ui.table > .icon {
vertical-align: baseline
}
.ui.table > .icon:only-child {
margin: 0
}
.ui.table.segment {
padding: 0
}
.ui.table.segment:after {
display: none
}
.ui.table.segment.stacked:after {
display: block
}
@media only screen and (max-width:767px) {
.ui.table:not(.unstackable) {
width: 100%
}
.ui.table:not(.unstackable) tbody,
.ui.table:not(.unstackable) tr,
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
width: auto!important;
display: block!important
}
.ui.table:not(.unstackable) {
padding: 0
}
.ui.table:not(.unstackable) thead {
display: block
}
.ui.table:not(.unstackable) tfoot {
display: block
}
.ui.table:not(.unstackable) tr {
padding-top: 1em;
padding-bottom: 1em;
-webkit-box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important;
box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important
}
.ui.table:not(.unstackable) tr > td,
.ui.table:not(.unstackable) tr > th {
background: 0 0;
border: none!important;
padding: .25em .75em!important;
-webkit-box-shadow: none!important;
box-shadow: none!important
}
.ui.table:not(.unstackable) td:first-child,
.ui.table:not(.unstackable) th:first-child {
font-weight: 700
}
.ui.definition.table:not(.unstackable) thead th:first-child {
-webkit-box-shadow: none!important;
box-shadow: none!important
}
}
.ui.table td .image,
.ui.table td .image img,
.ui.table th .image,
.ui.table th .image img {
max-width: none
}
.ui.structured.table {
border-collapse: collapse
}
.ui.structured.table thead th {
border-left: none;
border-right: none
}
.ui.structured.sortable.table thead th {
border-left: 1px solid rgba(34,36,38,.15);
border-right: 1px solid rgba(34,36,38,.15)
}
.ui.structured.basic.table th {
border-left: none;
border-right: none
}
.ui.structured.celled.table tr td,
.ui.structured.celled.table tr th {
border-left: 1px solid rgba(34,36,38,.1);
border-right: 1px solid rgba(34,36,38,.1)
}
.ui.definition.table thead:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: 400;
color: rgba(0,0,0,.4);
-webkit-box-shadow: -1px -1px 0 1px #fff;
box-shadow: -1px -1px 0 1px #fff
}
.ui.definition.table tfoot:not(.full-width) th:first-child {
pointer-events: none;
background: 0 0;
font-weight: rgba(0,0,0,.4);
color: normal;
-webkit-box-shadow: 1px 1px 0 1px #fff;
box-shadow: 1px 1px 0 1px #fff
}
.ui.celled.definition.table thead:not(.full-width) th:first-child {
-webkit-box-shadow: 0 -1px 0 1px #fff;
box-shadow: 0 -1px 0 1px #fff
}
.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
-webkit-box-shadow: 0 1px 0 1px #fff;
box-shadow: 0 1px 0 1px #fff
}
.ui.definition.table tr td.definition,
.ui.definition.table tr td:first-child:not(.ignored) {
background: rgba(0,0,0,.03);
font-weight: 700;
color: rgba(0,0,0,.95);
text-transform: '';
-webkit-box-shadow: '';
box-shadow: '';
text-align: '';
font-size: 1em;
padding-left: '';
padding-right: ''
}
.ui.definition.table thead:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.definition.table td:nth-child(2) {
border-left: 1px solid rgba(34,36,38,.15)
}
.ui.table td.positive,
.ui.table tr.positive {
-webkit-box-shadow: 0 0 0 #a3c293 inset;
box-shadow: 0 0 0 #a3c293 inset
}
.ui.table td.positive,
.ui.table tr.positive {
background: #fcfff5!important;
color: #2c662d!important
}
.ui.table td.negative,
.ui.table tr.negative {
-webkit-box-shadow: 0 0 0 #e0b4b4 inset;
box-shadow: 0 0 0 #e0b4b4 inset
}
.ui.table td.negative,
.ui.table tr.negative {
background: #fff6f6!important;
color: #9f3a38!important
}
.ui.table td.error,
.ui.table tr.error {
-webkit-box-shadow: 0 0 0 #e0b4b4 inset;
box-shadow: 0 0 0 #e0b4b4 inset
}
.ui.table td.error,
.ui.table tr.error {
background: #fff6f6!important;
color: #9f3a38!important
}
.ui.table td.warning,
.ui.table tr.warning {
-webkit-box-shadow: 0 0 0 #c9ba9b inset;
box-shadow: 0 0 0 #c9ba9b inset
}
.ui.table td.warning,
.ui.table tr.warning {
background: #fffaf3!important;
color: #573a08!important
}
.ui.table td.active,
.ui.table tr.active {
-webkit-box-shadow: 0 0 0 rgba(0,0,0,.87) inset;
box-shadow: 0 0 0 rgba(0,0,0,.87) inset
}
.ui.table td.active,
.ui.table tr.active {
background: #e0e0e0!important;
color: rgba(0,0,0,.87)!important
}
.ui.table tr td.disabled,
.ui.table tr.disabled td,
.ui.table tr.disabled:hover,
.ui.table tr:hover td.disabled {
pointer-events: none;
color: rgba(40,40,40,.3)
}
@media only screen and (max-width:991px) {
.ui[class*="tablet stackable"].table,
.ui[class*="tablet stackable"].table tbody,
.ui[class*="tablet stackable"].table tr,
.ui[class*="tablet stackable"].table tr > td,
.ui[class*="tablet stackable"].table tr > th {
width: 100%!important;
display: block!important
}
.ui[class*="tablet stackable"].table {
padding: 0
}
.ui[class*="tablet stackable"].table thead {
display: block
}
.ui[class*="tablet stackable"].table tfoot {
display: block
}
.ui[class*="tablet stackable"].table tr {
padding-top: 1em;
padding-bottom: 1em;
-webkit-box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important;
box-shadow: 0 -1px 0 0 rgba(0,0,0,.1) inset!important
}
.ui[class*="tablet stackable"].table tr > td,
.ui[class*="tablet stackable"].table tr > th {
background: 0 0;
border: none!important;
padding: .25em .75em;
-webkit-box-shadow: none!important;
box-shadow: none!important
}
.ui.definition[class*="tablet stackable"].table thead th:first-child {
-webkit-box-shadow: none!important;
box-shadow: none!important
}
}
.ui.table [class*="left aligned"],
.ui.table[class*="left aligned"] {
text-align: left
}
.ui.table [class*="center aligned"],
.ui.table[class*="center aligned"] {
text-align: center
}
.ui.table [class*="right aligned"],
.ui.table[class*="right aligned"] {
text-align: right
}
.ui.table [class*="top aligned"],
.ui.table[class*="top aligned"] {
vertical-align: top
}
.ui.table [class*="middle aligned"],
.ui.table[class*="middle aligned"] {
vertical-align: middle
}
.ui.table [class*="bottom aligned"],
.ui.table[class*="bottom aligned"] {
vertical-align: bottom
}
.ui.table td.collapsing,
.ui.table th.collapsing {
width: 1px;
white-space: nowrap
}
.ui.fixed.table {
table-layout: fixed
}
.ui.fixed.table td,
.ui.fixed.table th {
overflow: hidden;
text-overflow: ellipsis
}
.ui.selectable.table tbody tr:hover,
.ui.table tbody tr td.selectable:hover {
background: rgba(0,0,0,.05)!important;
color: rgba(0,0,0,.95)!important
}
.ui.inverted.table tbody tr td.selectable:hover,
.ui.selectable.inverted.table tbody tr:hover {
background: rgba(255,255,255,.08)!important;
color: #fff!important
}
.ui.table tbody tr td.selectable {
padding: 0
}
.ui.table tbody tr td.selectable > a:not(.ui) {
display: block;
color: inherit;
padding: .78571429em .78571429em
}
.ui.selectable.table tr.error:hover,
.ui.selectable.table tr:hover td.error,
.ui.table tr td.selectable.error:hover {
background: #ffe7e7!important;
color: #943634!important
}
.ui.selectable.table tr.warning:hover,
.ui.selectable.table tr:hover td.warning,
.ui.table tr td.selectable.warning:hover {
background: #fff4e4!important;
color: #493107!important
}
.ui.selectable.table tr.active:hover,
.ui.selectable.table tr:hover td.active,
.ui.table tr td.selectable.active:hover {
background: #e0e0e0!important;
color: rgba(0,0,0,.87)!important
}
.ui.selectable.table tr.positive:hover,
.ui.selectable.table tr:hover td.positive,
.ui.table tr td.selectable.positive:hover {
background: #f7ffe6!important;
color: #275b28!important
}
.ui.selectable.table tr.negative:hover,
.ui.selectable.table tr:hover td.negative,
.ui.table tr td.selectable.negative:hover {
background: #ffe7e7!important;
color: #943634!important
}
.ui.attached.table {
top: 0;
bottom: 0;
border-radius: 0;
margin: 0 -1px;
width: calc(100% - (-1px * 2));
max-width: calc(100% - (-1px * 2));
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #d4d4d5
}
.ui.attached + .ui.attached.table:not(.top) {
border-top: none
}
.ui[class*="top attached"].table {
bottom: 0;
margin-bottom: 0;
top: 0;
margin-top: 1em;
border-radius: .28571429rem .28571429rem 0 0
}
.ui.table[class*="top attached"]:first-child {
margin-top: 0
}
.ui[class*="bottom attached"].table {
bottom: 0;
margin-top: 0;
top: 0;
margin-bottom: 1em;
-webkit-box-shadow: none,none;
box-shadow: none,none;
border-radius: 0 0 .28571429rem .28571429rem
}
.ui[class*="bottom attached"].table:last-child {
margin-bottom: 0
}
.ui.striped.table > tr:nth-child(2n),
.ui.striped.table tbody tr:nth-child(2n) {
background-color: rgba(0,0,50,.02)
}
.ui.inverted.striped.table > tr:nth-child(2n),
.ui.inverted.striped.table tbody tr:nth-child(2n) {
background-color: rgba(255,255,255,.05)
}
.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
background: #efefef!important;
color: rgba(0,0,0,.95)!important
}
.ui.table [class*="single line"],
.ui.table[class*="single line"] {
white-space: nowrap
}
.ui.table [class*="single line"],
.ui.table[class*="single line"] {
white-space: nowrap
}
.ui.red.table {
border-top: .2em solid #db2828
}
.ui.inverted.red.table {
background-color: #db2828!important;
color: #fff!important
}
.ui.orange.table {
border-top: .2em solid #f2711c
}
.ui.inverted.orange.table {
background-color: #f2711c!important;
color: #fff!important
}
.ui.yellow.table {
border-top: .2em solid #fbbd08
}
.ui.inverted.yellow.table {
background-color: #fbbd08!important;
color: #fff!important
}
.ui.olive.table {
border-top: .2em solid #b5cc18
}
.ui.inverted.olive.table {
background-color: #b5cc18!important;
color: #fff!important
}
.ui.green.table {
border-top: .2em solid #21ba45
}
.ui.inverted.green.table {
background-color: #21ba45!important;
color: #fff!important
}
.ui.teal.table {
border-top: .2em solid #00b5ad
}
.ui.inverted.teal.table {
background-color: #00b5ad!important;
color: #fff!important
}
.ui.blue.table {
border-top: .2em solid #2185d0
}
.ui.inverted.blue.table {
background-color: #2185d0!important;
color: #fff!important
}
.ui.violet.table {
border-top: .2em solid #6435c9
}
.ui.inverted.violet.table {
background-color: #6435c9!important;
color: #fff!important
}
.ui.purple.table {
border-top: .2em solid #a333c8
}
.ui.inverted.purple.table {
background-color: #a333c8!important;
color: #fff!important
}
.ui.pink.table {
border-top: .2em solid #e03997
}
.ui.inverted.pink.table {
background-color: #e03997!important;
color: #fff!important
}
.ui.brown.table {
border-top: .2em solid #a5673f
}
.ui.inverted.brown.table {
background-color: #a5673f!important;
color: #fff!important
}
.ui.grey.table {
border-top: .2em solid #767676
}
.ui.inverted.grey.table {
background-color: #767676!important;
color: #fff!important
}
.ui.black.table {
border-top: .2em solid #1b1c1d
}
.ui.inverted.black.table {
background-color: #1b1c1d!important;
color: #fff!important
}
.ui.one.column.table td {
width: 100%
}
.ui.two.column.table td {
width: 50%
}
.ui.three.column.table td {
width: 33.33333333%
}
.ui.four.column.table td {
width: 25%
}
.ui.five.column.table td {
width: 20%
}
.ui.six.column.table td {
width: 16.66666667%
}
.ui.seven.column.table td {
width: 14.28571429%
}
.ui.eight.column.table td {
width: 12.5%
}
.ui.nine.column.table td {
width: 11.11111111%
}
.ui.ten.column.table td {
width: 10%
}
.ui.eleven.column.table td {
width: 9.09090909%
}
.ui.twelve.column.table td {
width: 8.33333333%
}
.ui.thirteen.column.table td {
width: 7.69230769%
}
.ui.fourteen.column.table td {
width: 7.14285714%
}
.ui.fifteen.column.table td {
width: 6.66666667%
}
.ui.sixteen.column.table td {
width: 6.25%
}
.ui.table td.one.wide,
.ui.table th.one.wide {
width: 6.25%
}
.ui.table td.two.wide,
.ui.table th.two.wide {
width: 12.5%
}
.ui.table td.three.wide,
.ui.table th.three.wide {
width: 18.75%
}
.ui.table td.four.wide,
.ui.table th.four.wide {
width: 25%
}
.ui.table td.five.wide,
.ui.table th.five.wide {
width: 31.25%
}
.ui.table td.six.wide,
.ui.table th.six.wide {
width: 37.5%
}
.ui.table td.seven.wide,
.ui.table th.seven.wide {
width: 43.75%
}
.ui.table td.eight.wide,
.ui.table th.eight.wide {
width: 50%
}
.ui.table td.nine.wide,
.ui.table th.nine.wide {
width: 56.25%
}
.ui.table td.ten.wide,
.ui.table th.ten.wide {
width: 62.5%
}
.ui.table td.eleven.wide,
.ui.table th.eleven.wide {
width: 68.75%
}
.ui.table td.twelve.wide,
.ui.table th.twelve.wide {
width: 75%
}
.ui.table td.thirteen.wide,
.ui.table th.thirteen.wide {
width: 81.25%
}
.ui.table td.fourteen.wide,
.ui.table th.fourteen.wide {
width: 87.5%
}
.ui.table td.fifteen.wide,
.ui.table th.fifteen.wide {
width: 93.75%
}
.ui.table td.sixteen.wide,
.ui.table th.sixteen.wide {
width: 100%
}
.ui.sortable.table thead th {
cursor: pointer;
white-space: nowrap;
border-left: 1px solid rgba(34,36,38,.15);
color: rgba(0,0,0,.87)
}
.ui.sortable.table thead th:first-child {
border-left: none
}
.ui.sortable.table thead th.sorted,
.ui.sortable.table thead th.sorted:hover {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.ui.sortable.table thead th:after {
display: none;
font-style: normal;
font-weight: 400;
text-decoration: inherit;
content: '';
height: 1em;
width: auto;
opacity: .8;
margin: 0 0 0 .5em;
font-family: Icons
}
.ui.sortable.table thead th.ascending:after {
content: '\f0d8'
}
.ui.sortable.table thead th.descending:after {
content: '\f0d7'
}
.ui.sortable.table th.disabled:hover {
cursor: auto;
color: rgba(40,40,40,.3)
}
.ui.sortable.table thead th:hover {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.8)
}
.ui.sortable.table thead th.sorted {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.95)
}
.ui.sortable.table thead th.sorted:after {
display: inline-block
}
.ui.sortable.table thead th.sorted:hover {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.95)
}
.ui.inverted.sortable.table thead th.sorted {
background: rgba(255,255,255,.15) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));
background: rgba(255,255,255,.15) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));
background: rgba(255,255,255,.15) linear-gradient(transparent,rgba(0,0,0,.05));
color: #fff
}
.ui.inverted.sortable.table thead th:hover {
background: rgba(255,255,255,.08) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));
background: rgba(255,255,255,.08) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));
background: rgba(255,255,255,.08) linear-gradient(transparent,rgba(0,0,0,.05));
color: #fff
}
.ui.inverted.sortable.table thead th {
border-left-color: transparent;
border-right-color: transparent
}
.ui.inverted.table {
background: #333;
color: rgba(255,255,255,.9);
border: none
}
.ui.inverted.table th {
background-color: rgba(0,0,0,.15);
border-color: rgba(255,255,255,.1)!important;
color: rgba(255,255,255,.9)!important
}
.ui.inverted.table tr td {
border-color: rgba(255,255,255,.1)!important
}
.ui.inverted.table tr td.disabled,
.ui.inverted.table tr.disabled td,
.ui.inverted.table tr.disabled:hover td,
.ui.inverted.table tr:hover td.disabled {
pointer-events: none;
color: rgba(225,225,225,.3)
}
.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
.ui.inverted.definition.table thead:not(.full-width) th:first-child {
background: #fff
}
.ui.inverted.definition.table tr td:first-child {
background: rgba(255,255,255,.02);
color: #fff
}
.ui.collapsing.table {
width: auto
}
.ui.basic.table {
background: 0 0;
border: 1px solid rgba(34,36,38,.15);
-webkit-box-shadow: none;
box-shadow: none
}
.ui.basic.table tfoot,
.ui.basic.table thead {
-webkit-box-shadow: none;
box-shadow: none
}
.ui.basic.table th {
background: 0 0;
border-left: none
}
.ui.basic.table tbody tr {
border-bottom: 1px solid rgba(0,0,0,.1)
}
.ui.basic.table td {
background: 0 0
}
.ui.basic.striped.table tbody tr:nth-child(2n) {
background-color: rgba(0,0,0,.05)!important
}
.ui[class*="very basic"].table {
border: none
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) td,
.ui[class*="very basic"].table:not(.sortable):not(.striped) th {
padding: ''
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child,
.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child {
padding-left: 0
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child,
.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child {
padding-right: 0
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
padding-top: 0
}
.ui.celled.table tr td,
.ui.celled.table tr th {
border-left: 1px solid rgba(34,36,38,.1)
}
.ui.celled.table tr td:first-child,
.ui.celled.table tr th:first-child {
border-left: none
}
.ui.padded.table th {
padding-left: 1em;
padding-right: 1em
}
.ui.padded.table td,
.ui.padded.table th {
padding: 1em 1em
}
.ui[class*="very padded"].table th {
padding-left: 1.5em;
padding-right: 1.5em
}
.ui[class*="very padded"].table td {
padding: 1.5em 1.5em
}
.ui.compact.table th {
padding-left: .7em;
padding-right: .7em
}
.ui.compact.table td {
padding: .5em .7em
}
.ui[class*="very compact"].table th {
padding-left: .6em;
padding-right: .6em
}
.ui[class*="very compact"].table td {
padding: .4em .6em
}
.ui.small.table {
font-size: .9em
}
.ui.table {
font-size: 1em
}
.ui.large.table {
font-size: 1.1em
}
¶ Botões
¶ Classe
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<div class="container">
<a href="/pt-br/estatisticas/coinfra" target="_blank" class="tooltip" data-title="Coordenadoria de Infraestrutura"><button class="btn-hover">COINFRA</button></a>
<a href="#" class="tooltip" data-title="Coordenadoria de Segurança"><button class="btn-hover">COSEGI</button></a>
<a href="/pt-br/estatisticas/code" target="_blank" class="tooltip" data-title="Coordenadoria de Desenvolvimento"><button class="btn-hover">CODE</button></a>
<a href="#" class="tooltip" data-title="Coordenadoria de Desenvolvimento"><button class="btn-hover">COGE</button></a>
<a href="#" class="tooltip" data-title="Coordenadoria de Gestão de Dados"><button class="btn-hover">CAGD</button></a>
</div>
¶ Formatação CSS3
@media (max-width:600px) {
.btn-hover {
display: block;
width: 100%;
}
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.btn-hover {
width: 240px;
height: 40px;
border-radius: 10px;
border: #fff;
background-color: #0084ff;
box-shadow: 0 6px 10px rgba(46,61,73,.15);
color: #fff;
margin: 10px
}
.btn-hover:hover {
box-shadow: 0 6px 10px rgba(0,0,0,.25);
transform: scale(1.01);
box-shadow: 0 6px 10px rgba(0,0,0,.25);
transition: color .3s ease
}
a.tooltip {
text-decoration: none;
color: #ccc;
font-family: Roboto;
font-size: 16px;
transition: all .4s ease;
-webkit-transition: all .4s ease;
position: relative
}
a.tooltip:before {
content: attr(data-title);
background-color: #8c8c8c;
color: #fff;
font-size: 13px;
padding: 10px;
box-sizing: border-box;
font-family: Roboto;
position: absolute;
left: 10px;
bottom: -35px;
width: 240px;
opacity: 0;
transition: all .4s ease;
border-radius: 10px;
text-align: center
}
a.tooltip:after {
content: "";
position: absolute;
opacity: 0;
width: 0;
height: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent transparent;
transition: all .4s ease
}
a.tooltip:hover:after,
a.tooltip:hover:before {
opacity: 1
}
¶ Resultado
¶ Imagens
O padrão ‘huge’ é utilizado quando as imagens tem baixa resolução. Casa a imagem tenha tamanho significativo, superior a 700x700, remover o parâmetro.
<br>
<div class="descr-img"><strong>Figura</strong> - descrição aqui</div>
<div class="image content">
<a href="/banco_de_imagens/manuais/imagem_01_-_abertura_de_chamado_1917x1040.png" target="_blank">
<img class="ui centered huge image" src="/banco_de_imagens/manuais/imagem_01_-_abertura_de_chamado_1917x1040.png"></a>
</div>
<div class="fonte-inf">Fonte: Elaboração Própria(202x)</div>
<br>
¶ Formatação em CSS3
/*
- A div com as classes {image} e {content} são herdadas do padrão Semantic UI.
- A classes herdadas na img(correspondente a imagem), herdam padrão Semantic UI, usando {ui} {centered} {huge} {image}.
- {huge} parâmetro não obrigatório.
- {descr-img} formatação da identificação da figura, topo.
- {fonte-inf} formatação da identificação da fonte da elaboração, abaixo da imagem.
*/
.descr-img {
text-align: center;
font-weight: 380;
font-size: 1rem
}
.fonte-inf {
text-align: center;
font-size: .9rem
}
¶ Formatação em Semantic
/*!
* # Semantic UI 2.4.1 - Image
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
.ui.image {
position: relative;
display: inline-block;
vertical-align: middle;
max-width: 100%;
background-color: transparent
}
img.ui.image {
display: block
}
.ui.image img,
.ui.image svg {
display: block;
max-width: 100%;
height: auto
}
.ui.hidden.image,
.ui.hidden.images {
display: none
}
.ui.hidden.transition.image,
.ui.hidden.transition.images {
display: block;
visibility: hidden
}
.ui.images > .hidden.transition {
display: inline-block;
visibility: hidden
}
.ui.disabled.image,
.ui.disabled.images {
cursor: default;
opacity: .45
}
.ui.inline.image,
.ui.inline.image img,
.ui.inline.image svg {
display: inline-block
}
.ui.top.aligned.image,
.ui.top.aligned.image img,
.ui.top.aligned.image svg,
.ui.top.aligned.images .image {
display: inline-block;
vertical-align: top
}
.ui.middle.aligned.image,
.ui.middle.aligned.image img,
.ui.middle.aligned.image svg,
.ui.middle.aligned.images .image {
display: inline-block;
vertical-align: middle
}
.ui.bottom.aligned.image,
.ui.bottom.aligned.image img,
.ui.bottom.aligned.image svg,
.ui.bottom.aligned.images .image {
display: inline-block;
vertical-align: bottom
}
.ui.rounded.image,
.ui.rounded.image > *,
.ui.rounded.images .image,
.ui.rounded.images .image > * {
border-radius: .3125em
}
.ui.bordered.image img,
.ui.bordered.image svg,
.ui.bordered.images .image,
.ui.bordered.images img,
.ui.bordered.images svg,
img.ui.bordered.image {
border: 1px solid rgba(0,0,0,.1)
}
.ui.circular.image,
.ui.circular.images {
overflow: hidden
}
.ui.circular.image,
.ui.circular.image > *,
.ui.circular.images .image,
.ui.circular.images .image > * {
border-radius: 500rem
}
.ui.fluid.image,
.ui.fluid.image img,
.ui.fluid.image svg,
.ui.fluid.images,
.ui.fluid.images img,
.ui.fluid.images svg {
display: block;
width: 100%;
height: auto
}
.ui.avatar.image,
.ui.avatar.image img,
.ui.avatar.image svg,
.ui.avatar.images .image,
.ui.avatar.images img,
.ui.avatar.images svg {
margin-right: .25em;
display: inline-block;
width: 2em;
height: 2em;
border-radius: 500rem
}
.ui.spaced.image {
display: inline-block!important;
margin-left: .5em;
margin-right: .5em
}
.ui[class*="left spaced"].image {
margin-left: .5em;
margin-right: 0
}
.ui[class*="right spaced"].image {
margin-left: 0;
margin-right: .5em
}
.ui.floated.image,
.ui.floated.images {
float: left;
margin-right: 1em;
margin-bottom: 1em
}
.ui.right.floated.image,
.ui.right.floated.images {
float: right;
margin-right: 0;
margin-bottom: 1em;
margin-left: 1em
}
.ui.floated.image:last-child,
.ui.floated.images:last-child {
margin-bottom: 0
}
.ui.centered.image,
.ui.centered.images {
margin-left: auto;
margin-right: auto
}
.ui.mini.image,
.ui.mini.images .image,
.ui.mini.images img,
.ui.mini.images svg {
width: 35px;
height: auto;
font-size: .78571429rem
}
.ui.tiny.image,
.ui.tiny.images .image,
.ui.tiny.images img,
.ui.tiny.images svg {
width: 80px;
height: auto;
font-size: .85714286rem
}
.ui.small.image,
.ui.small.images .image,
.ui.small.images img,
.ui.small.images svg {
width: 150px;
height: auto;
font-size: .92857143rem
}
.ui.medium.image,
.ui.medium.images .image,
.ui.medium.images img,
.ui.medium.images svg {
width: 300px;
height: auto;
font-size: 1rem
}
.ui.large.image,
.ui.large.images .image,
.ui.large.images img,
.ui.large.images svg {
width: 450px;
height: auto;
font-size: 1.14285714rem
}
.ui.big.image,
.ui.big.images .image,
.ui.big.images img,
.ui.big.images svg {
width: 600px;
height: auto;
font-size: 1.28571429rem
}
.ui.huge.image,
.ui.huge.images .image,
.ui.huge.images img,
.ui.huge.images svg {
width: 800px;
height: auto;
font-size: 1.42857143rem
}
.ui.massive.image,
.ui.massive.images .image,
.ui.massive.images img,
.ui.massive.images svg {
width: 960px;
height: auto;
font-size: 1.71428571rem
}
.ui.images {
font-size: 0;
margin: 0 -.25rem 0
}
.ui.images .image,
.ui.images > img,
.ui.images > svg {
display: inline-block;
margin: 0 .25rem .5rem
}
¶ Resultado
¶ Links externos
Para a inclusão de links externos sem a marcação (ícone), recomenda-se a aplicação do CSS3.
.v-main .contents a.is-external-link:after {
font-family: Material Design Icons,sans-serif;
font-size: 24px/1;
padding-left: 3px;
display: inline-block;
content: "";
color: #9e9e9e;
text-decoration: none
}
¶ Resultado
De:
Para:
¶ Ícones: Botões
A Wiki.js possui um banco de ícones nativos. A relação destes pode ser acessada aqui.
Para utlizar um ícone basta inserir sua classe no local desejado da seguinte maneira:
<button><i class="mdi mdi-file-pdf-box"></i>Clique aqui</button>
Resultado:
No caso da Wiki.SETIC o padrão dos botões requer a aplicação do Semantic UI:
<!-- Todas as classes são herdadas do padrão da WIKI, sem necessidade de adicionais no estilo da página -->
<button type="button" class="ml-3 v-btn v-btn--depressed theme--dark v-size--default blue darken-2" style="flex: 1 1 100%;">
<span class="v-btn__content">
<div class="body-2 text-none"><i class="mdi mdi-file-pdf-box"></i>Clique aqui</div>
</span>
</button>
¶ Resultado
