MediaWiki:Common.css: mudanças entre as edições
Aparência
Sem resumo de edição |
Sem resumo de edição |
||
| (170 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
/* Código CSS colocado aqui será aplicado a todos os temas */ | /* Código CSS colocado aqui será aplicado a todos os temas */ | ||
.vector-header-container { | |||
background-color: # | background-color: #eaeaea; | ||
} | } | ||
#pm-widget-header{position:absolute; border:none; & .d-flex{line-height:1!important;} & h2{border:none !important}} | |||
@media screen and (min-width:1680px) { | |||
.mw-header .vector-header-start { | |||
width: 480px; | |||
grid-area: headerStart; | |||
} | |||
} | |||
@media screen and (min-width:1680px) { | |||
.client-js .vector-search-box.vector-search-box-auto-expand-width { | |||
} | |||
} | |||
#vector-main-menu-dropdown .vector-icon{ | |||
background-image: url(/basedeconhecimento/basedeconhecimento/basedeconhecimento/basedeconhecimento/resources/assets/file-type-icons/fileicon-html.png)!important} | |||
.vector-header, | |||
.mw-header { | |||
background-color: #eaeaea; | |||
} | |||
.vector-header-container .mw-header, | |||
.vector-header-container .vector-sticky-header { | |||
background-color: #eaeaea; | |||
padding-left: 0px; | |||
height:67px | |||
} | |||
.vector-icon { | |||
background-color: #0881c8!important; | |||
color: #fff | |||
} | |||
.mw-logo-icon { | |||
fill: #ffffff; | |||
stroke: #ffffff; | |||
color: #fff; | |||
width: 250.52px; | |||
height: 100%; | |||
display:none; | |||
} | |||
.mw-logo-wordmark { | |||
color: #0881c8 | |||
} | |||
#top-banner { | |||
background-color: #0881c8; | |||
color: #fff; | |||
height: 32px; | |||
font-size: 0.9em; | |||
} | |||
#top-banner { | |||
border-bottom: solid 1px white; | |||
#top-banner a { | |||
color: #fff; | |||
text-decoration: none; | |||
} | |||
#top-banner a:hover { | |||
text-decoration: underline; | |||
} | |||
.contact-info { | |||
margin: 0 115px; | |||
font-family: "Open Sans", sans-serif; | |||
font-size: 12px; | |||
} | |||
.cdx-button:enabled, | |||
.cdx-button.cdx-button--fake-button--enabled { | |||
background-color: #fff; | |||
color: #0000FF; | |||
} | |||
footer { | |||
font-weight: none | |||
} | |||
.vector-dropdown-label-text { | |||
color: black | |||
} | |||
@media screen and (max-width:1120px) { | |||
.vector-header { | |||
& .vector-button-flush-left { | |||
margin-left: 3770% | |||
} | |||
& .vector-main-menu-landmark { | |||
position: absolute | |||
} | |||
} | |||
#vector-main-menu-dropdown { | |||
background-color:grey !important; | |||
& .vector-dropdown, | |||
.vector-dropdown-content { | |||
position: absolute; | |||
top: 100%; | |||
left: -173px; | |||
} | |||
} | |||
.oo-ui-popupWidget-anchored-top { | |||
margin-left: 1550px; | |||
margin-top: 9px; | |||
} | |||
} | |||
@media screen(max-width:1120px) { | |||
.ifeBgy { | |||
right: 41px; | |||
} | |||
} | |||
#mw-panel { | |||
& .vector-pinnable-header-unpin-button { | |||
display: none | |||
} | |||
} | |||
@media screen and (min-width: 1121px) { | |||
/*.vector-button-flush-left { | |||
margin-left:3970%; | |||
}*/ | |||
.mw-header .vector-header-start { | |||
width: 480px; | |||
grid-area: headerStart; | |||
} | |||
.vector-icon { | |||
background-color: #FFF | |||
} | |||
vector-dropdown:hover { | |||
backgound-color: #044a73 | |||
} | |||
header{ | |||
} | |||
.cdx-label__label__text{color:black} | |||
.mw-ui-icon-wikimedia-unStar{background-color:black} | |||
.vector-menu-content{& #pt-userpage-2 a:not(.mw-selflink){color:white}} | |||
p.teste2 { | |||
position: relative; | |||
cursor: help; | |||
border-bottom: 1px dashed #888; | |||
} | |||
/* Caixa da nota */ | |||
p.teste2::after { | |||
content: "1. INCLUIR DOCUMENTO\A\A📌 Descrição\A A função Incluir Documento é utilizada para inserir novos documentos — internos ou externos — dentro de um processo administrativo.\A\A📌 Quando usar\A Utilize esta função quando for necessário:\A • Iniciar um processo (exceto de Negócios Públicos)\A • Complementar informações\A • Inserir documentos finais para encerramento\A\A📌 Como usar\A 1. Acesse o SEI.\A 2. Vá em Controle de Processos e selecione o processo desejado.\A 3. Clique no ícone Incluir Documento.\A 4. Escolha o tipo de documento na lista ou digite o nome no campo de busca.\A 5. Caso o documento não apareça, verifique o ícone ao lado:\A Verde = lista reduzida\A Vermelho = lista completa\A 6. Preencha os campos obrigatórios.\A 7. Clique em Salvar.\A 8. O documento abrirá em nova janela para edição."; | |||
white-space: pre-wrap; | |||
position: absolute; | |||
left: 0; | |||
top: 100%; | |||
margin-top: 8px; | |||
width: min(520px, 90vw); | |||
padding: 12px 14px; | |||
border: 1px solid #c8ccd1; | |||
border-radius: 8px; | |||
background: #fff; | |||
box-shadow: 0 8px 22px rgba(0,0,0,0.18); | |||
z-index: 9999; | |||
opacity: 0; | |||
visibility: hidden; | |||
transform: translateY(6px); | |||
transition: opacity .15s ease, transform .15s ease, visibility .15s ease; | |||
font-size: 13px; | |||
line-height: 1.35; | |||
color: #202122; | |||
} | |||
#pt-userpage-2 span{color:#550000!important;} | |||
/* Seta da nota */ | |||
p.teste2::before { | |||
content: ""; | |||
position: absolute; | |||
left: 18px; | |||
top: 100%; | |||
margin-top: 2px; | |||
width: 0; | |||
height: 0; | |||
border-left: 8px solid transparent; | |||
border-right: 8px solid transparent; | |||
border-bottom: 8px solid #fff; | |||
opacity: 0; | |||
visibility: hidden; | |||
transform: translateY(6px); | |||
transition: opacity .15s ease, transform .15s ease, visibility .15s ease; | |||
z-index: 10000; | |||
} | |||
/* Exibe ao hover */ | |||
p.teste2:hover::after, | |||
p.teste2:hover::before { | |||
opacity: 1; | |||
visibility: visible; | |||
transform: translateY(0); | |||
} | |||
/* Container das Abas */ | |||
.folder-tabs-nav { | |||
display: flex; | |||
align-items: flex-end; /* Alinha as abas na base */ | |||
gap: 4px; /* Espaço entre as pastas */ | |||
padding-top: 100px; | |||
} | |||
/* O Estilo da "Pontinha" da Pasta */ | |||
.folder-tab { | |||
display: inline-flex; | |||
align-items: center; | |||
padding: 8px 24px 6px 24px; /* Espaçamento interno */ | |||
/* Cores e Fundo */ | |||
background-color: rgba(255, 255, 255, 0.2); /* Branco transparente (vidro) */ | |||
color: rgba(255, 255, 255, 0.9); /* Texto quase branco */ | |||
text-decoration: none; | |||
font-weight: 600; | |||
font-size: 0.9rem; | |||
letter-spacing: 0.5px; | |||
/* O Formato de Pasta (Arredonda só em cima) */ | |||
border-radius: 12px 12px 0 0; | |||
border: 1px solid rgba(255, 255, 255, 0.1); | |||
border-bottom: none; | |||
/* Animação suave */ | |||
transition: all 0.2s ease-in-out; | |||
position: relative; | |||
top: 0; | |||
} | |||
/* Efeito ao passar o mouse */ | |||
.folder-tab:hover { | |||
background-color: rgba(255, 255, 255, 0.4); | |||
color: #fff; | |||
transform: translateY(-3px); /* A pasta "sobe" um pouquinho */ | |||
} | |||
/* Aba Ativa (Simula a pasta aberta conectando com o fundo branco abaixo) */ | |||
.folder-tab.active { | |||
background-color: #ffffff; /* Fundo branco sólido */ | |||
color: #0000FF; /* Cor do texto igual ao fundo da topbar (azul) */ | |||
font-weight: 800; | |||
padding-top: 12px; /* Fica ligeiramente maior */ | |||
/* Remove borda inferior para conectar com o conteúdo se houver */ | |||
border-bottom: 1px solid #fff; | |||
z-index: 10; | |||
} | |||
/* Ícones dentro das abas */ | |||
.folder-tab i { | |||
font-size: 1.1em; | |||
opacity: 0.8; | |||
} | |||
.folder-tab:hover i, | |||
.folder-tab.active i { | |||
opacity: 1; | |||
} | |||
/* Ajuste para celular (Scroll lateral se não couber) */ | |||
@media (max-width: 768px) { | |||
.folder-tabs-nav { | |||
overflow-x: auto; | |||
white-space: nowrap; | |||
padding-bottom: 0; | |||
} | |||
.folder-tab { | |||
padding: 8px 16px; | |||
font-size: 0.8rem; | |||
} | |||
} | |||
#custom-file-navbar { | |||
display: flex; /* Ativa o modo flexível */ | |||
justify-content: space-between; /* Empurra o logo p/ esq e abas p/ dir */ | |||
align-items: center; /* Centraliza verticalmente */ | |||
width: 100%; /* Garante que ocupe a largura toda */ | |||
background-color: #f8f9fa; /* Cor de fundo (ajuste conforme seu tema) */ | |||
padding: 0 15px; /* Um pouco de respiro nas laterais */ | |||
box-sizing: border-box; /* Garante que o padding não estoure a largura */ | |||
} | |||
/* Ajuste opcional para o logo não colar demais na borda */ | |||
.navbar-logo-container { | |||
display: flex; | |||
align-items: center; | |||
} | |||
/* Garante que as abas fiquem alinhadas */ | |||
.folder-tabs-nav { | |||
display: flex; | |||
gap: 5px; /* Espaço entre as abas */ | |||
} | |||
.mw-page-title-main{color:#fff !important;} | |||
.wiki { | |||
background-color: #f8f9fa; | |||
color: #550000; | |||
font-weight: 700; | |||
box-shadow: 0 1px 2px rgba(0,0,0,0.05); | |||
transform: translateY(1px); | |||
position: relative; | |||
z-index: 10; | |||
border-top: 1px solid rgba(112, 0, 0, 0.2); | |||
border-left: 1px solid rgba(112, 0, 0, 0.2); | |||
border-right: 1px solid rgba(112, 0, 0, 0.2); | |||
margin-bottom: 0; | |||
border-bottom: 1px solid #f8f9fa; | |||
} | |||
Edição atual tal como às 12h55min de 5 de fevereiro de 2026
/* Código CSS colocado aqui será aplicado a todos os temas */
.vector-header-container {
background-color: #eaeaea;
}
#pm-widget-header{position:absolute; border:none; & .d-flex{line-height:1!important;} & h2{border:none !important}}
@media screen and (min-width:1680px) {
.mw-header .vector-header-start {
width: 480px;
grid-area: headerStart;
}
}
@media screen and (min-width:1680px) {
.client-js .vector-search-box.vector-search-box-auto-expand-width {
}
}
#vector-main-menu-dropdown .vector-icon{
background-image: url(/basedeconhecimento/basedeconhecimento/basedeconhecimento/basedeconhecimento/resources/assets/file-type-icons/fileicon-html.png)!important}
.vector-header,
.mw-header {
background-color: #eaeaea;
}
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
background-color: #eaeaea;
padding-left: 0px;
height:67px
}
.vector-icon {
background-color: #0881c8!important;
color: #fff
}
.mw-logo-icon {
fill: #ffffff;
stroke: #ffffff;
color: #fff;
width: 250.52px;
height: 100%;
display:none;
}
.mw-logo-wordmark {
color: #0881c8
}
#top-banner {
background-color: #0881c8;
color: #fff;
height: 32px;
font-size: 0.9em;
}
#top-banner {
border-bottom: solid 1px white;
#top-banner a {
color: #fff;
text-decoration: none;
}
#top-banner a:hover {
text-decoration: underline;
}
.contact-info {
margin: 0 115px;
font-family: "Open Sans", sans-serif;
font-size: 12px;
}
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled {
background-color: #fff;
color: #0000FF;
}
footer {
font-weight: none
}
.vector-dropdown-label-text {
color: black
}
@media screen and (max-width:1120px) {
.vector-header {
& .vector-button-flush-left {
margin-left: 3770%
}
& .vector-main-menu-landmark {
position: absolute
}
}
#vector-main-menu-dropdown {
background-color:grey !important;
& .vector-dropdown,
.vector-dropdown-content {
position: absolute;
top: 100%;
left: -173px;
}
}
.oo-ui-popupWidget-anchored-top {
margin-left: 1550px;
margin-top: 9px;
}
}
@media screen(max-width:1120px) {
.ifeBgy {
right: 41px;
}
}
#mw-panel {
& .vector-pinnable-header-unpin-button {
display: none
}
}
@media screen and (min-width: 1121px) {
/*.vector-button-flush-left {
margin-left:3970%;
}*/
.mw-header .vector-header-start {
width: 480px;
grid-area: headerStart;
}
.vector-icon {
background-color: #FFF
}
vector-dropdown:hover {
backgound-color: #044a73
}
header{
}
.cdx-label__label__text{color:black}
.mw-ui-icon-wikimedia-unStar{background-color:black}
.vector-menu-content{& #pt-userpage-2 a:not(.mw-selflink){color:white}}
p.teste2 {
position: relative;
cursor: help;
border-bottom: 1px dashed #888;
}
/* Caixa da nota */
p.teste2::after {
content: "1. INCLUIR DOCUMENTO\A\A📌 Descrição\A A função Incluir Documento é utilizada para inserir novos documentos — internos ou externos — dentro de um processo administrativo.\A\A📌 Quando usar\A Utilize esta função quando for necessário:\A • Iniciar um processo (exceto de Negócios Públicos)\A • Complementar informações\A • Inserir documentos finais para encerramento\A\A📌 Como usar\A 1. Acesse o SEI.\A 2. Vá em Controle de Processos e selecione o processo desejado.\A 3. Clique no ícone Incluir Documento.\A 4. Escolha o tipo de documento na lista ou digite o nome no campo de busca.\A 5. Caso o documento não apareça, verifique o ícone ao lado:\A Verde = lista reduzida\A Vermelho = lista completa\A 6. Preencha os campos obrigatórios.\A 7. Clique em Salvar.\A 8. O documento abrirá em nova janela para edição.";
white-space: pre-wrap;
position: absolute;
left: 0;
top: 100%;
margin-top: 8px;
width: min(520px, 90vw);
padding: 12px 14px;
border: 1px solid #c8ccd1;
border-radius: 8px;
background: #fff;
box-shadow: 0 8px 22px rgba(0,0,0,0.18);
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
font-size: 13px;
line-height: 1.35;
color: #202122;
}
#pt-userpage-2 span{color:#550000!important;}
/* Seta da nota */
p.teste2::before {
content: "";
position: absolute;
left: 18px;
top: 100%;
margin-top: 2px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index: 10000;
}
/* Exibe ao hover */
p.teste2:hover::after,
p.teste2:hover::before {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Container das Abas */
.folder-tabs-nav {
display: flex;
align-items: flex-end; /* Alinha as abas na base */
gap: 4px; /* Espaço entre as pastas */
padding-top: 100px;
}
/* O Estilo da "Pontinha" da Pasta */
.folder-tab {
display: inline-flex;
align-items: center;
padding: 8px 24px 6px 24px; /* Espaçamento interno */
/* Cores e Fundo */
background-color: rgba(255, 255, 255, 0.2); /* Branco transparente (vidro) */
color: rgba(255, 255, 255, 0.9); /* Texto quase branco */
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.5px;
/* O Formato de Pasta (Arredonda só em cima) */
border-radius: 12px 12px 0 0;
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
/* Animação suave */
transition: all 0.2s ease-in-out;
position: relative;
top: 0;
}
/* Efeito ao passar o mouse */
.folder-tab:hover {
background-color: rgba(255, 255, 255, 0.4);
color: #fff;
transform: translateY(-3px); /* A pasta "sobe" um pouquinho */
}
/* Aba Ativa (Simula a pasta aberta conectando com o fundo branco abaixo) */
.folder-tab.active {
background-color: #ffffff; /* Fundo branco sólido */
color: #0000FF; /* Cor do texto igual ao fundo da topbar (azul) */
font-weight: 800;
padding-top: 12px; /* Fica ligeiramente maior */
/* Remove borda inferior para conectar com o conteúdo se houver */
border-bottom: 1px solid #fff;
z-index: 10;
}
/* Ícones dentro das abas */
.folder-tab i {
font-size: 1.1em;
opacity: 0.8;
}
.folder-tab:hover i,
.folder-tab.active i {
opacity: 1;
}
/* Ajuste para celular (Scroll lateral se não couber) */
@media (max-width: 768px) {
.folder-tabs-nav {
overflow-x: auto;
white-space: nowrap;
padding-bottom: 0;
}
.folder-tab {
padding: 8px 16px;
font-size: 0.8rem;
}
}
#custom-file-navbar {
display: flex; /* Ativa o modo flexível */
justify-content: space-between; /* Empurra o logo p/ esq e abas p/ dir */
align-items: center; /* Centraliza verticalmente */
width: 100%; /* Garante que ocupe a largura toda */
background-color: #f8f9fa; /* Cor de fundo (ajuste conforme seu tema) */
padding: 0 15px; /* Um pouco de respiro nas laterais */
box-sizing: border-box; /* Garante que o padding não estoure a largura */
}
/* Ajuste opcional para o logo não colar demais na borda */
.navbar-logo-container {
display: flex;
align-items: center;
}
/* Garante que as abas fiquem alinhadas */
.folder-tabs-nav {
display: flex;
gap: 5px; /* Espaço entre as abas */
}
.mw-page-title-main{color:#fff !important;}
.wiki {
background-color: #f8f9fa;
color: #550000;
font-weight: 700;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transform: translateY(1px);
position: relative;
z-index: 10;
border-top: 1px solid rgba(112, 0, 0, 0.2);
border-left: 1px solid rgba(112, 0, 0, 0.2);
border-right: 1px solid rgba(112, 0, 0, 0.2);
margin-bottom: 0;
border-bottom: 1px solid #f8f9fa;
}