MediaWiki:Common.css

/** ESTILOS GERAIS - INÍCIO */

/* Cores */
:root {
  --azul-ufsc: rgb(0,56,147);
  --fundo-pagina-geral: floralwhite;
  --borda: var(--azul-ufsc);

  --fundo-par: #e8f7fc;
  --fundo-impar: #bae4ff;
  --cor-botao: var(--fundo-impar);
  --texto-sumario: var(--azul-ufsc);

  --cor-info: #bae4ff;
  --cor-alerta: #ffff99;
  --cor-erro: #ff7979;
  --cor-ok: #80ff80;
  
  --borda-sombra: 1px solid rgba(0,0,0,0.3) !important;
  --box-sombra: 2px 2px 2px rgba(0,0,0,0.2) !important; 
  --borda-sombra-hover: 1px solid var(--borda) !important;
  --box-sombra-hover: 5px 5px 10px rgba(0,0,0,0.2) !important;
}

@property --cor-1 {
  syntax: '<color>';
  initial-value: white;
  inherits: false;
}

@property --cor-2 {
  syntax: '<color>';
  initial-value: white;
  inherits: false;
}

/* Configurações gerais da página - logo, cores e margem - início */
.mw-wiki-logo {
  background-image: url(https://compras.wiki.ufsc.br/images/f/f8/Logo-wiki-dcom.png?20240528231921);
  background-size: contain;
}

.mw-body {
  margin-right: 200px;
  border: 1px solid var(--borda) !important;
}

body {
  background-color: var(--fundo-pagina-geral);
}

#mw-page-base {
  background-image: linear-gradient(to bottom, white, 50%, var(--fundo-pagina-geral) 100%);
}
/* Configurações gerais da página - fim */

/* Estilo do cabeçalho - início */
#right-navigation {
  margin-right: 200px;
}

#p-personal {
  right: 0;
  margin-right: 200px;
}

#p-namespaces {
  display: none;
}

#pt-mytalk {
  display: none;
}

.vector-search-box {
  margin-right: 0;
}

.vector-menu-tabs, 
.vector-menu-tabs a, 
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: linear-gradient(to bottom, white 0, var(--borda) 100%);
}

.vector-menu-tabs-legacy li {
  background-image: unset;
}
/* Estilo do cabeçalho -fim */

/* Estilo do rodapé - início */
.mw-footer {
  margin-right: 200px;
  padding-right: 0;
}

#footer-places-privacy {
  display: none;
}

#footer-icons {
  float: left;
}
/* Estilo do rodapé - fim */

/* Ajusta automaticamente tamanho das imagens para não avançar para fora da página */
.thumbimage {
  display: block;
  width: 100%;
  height: auto;
}

.thumbinner {
  max-width: 100%;
}

/* Estilo do título das páginas */
.firstHeading {
  color: var(--azul-ufsc);
  font-family: 'Poppins' !important;
  border-image: linear-gradient(to right, var(--borda), white) 1;
}

/* Sombreamento das caixas em geral - início */
.sombra {
	border: var(--borda-sombra);
	box-shadow: var(--box-sombra);
	transition: all ease-in-out .5s;
}

.sombra:hover {
	border: var(--borda-sombra-hover);
	box-shadow: var(--box-sombra-hover);
}
/* Sombreamento - fim */

/* Botão Topo - início */
.topo {
  border-radius: 50px;
  position: fixed;
  bottom: -7px;
  right: 202px;
  background: var(--fundo-impar);
  z-index: 9999;
  height: 15px;
  width: 15px;
  padding: 5px;
  line-height: 1;
  transition: all .5s ease-in-out;
}

.topo:hover {
  background: var(--azul-ufsc);
  transform: translateY(-10px);
}

.topo a {
  text-decoration: none;
  color: var(--azul-ufsc);
}

.topo:hover a {
  color: white
}
/* Botão Topo - fim */

/* Linha horizontal */
@media screen {
hr {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, white, var(--azul-ufsc), white) 1;
  margin: 10px auto;
  width: 90%;
  height: 0;
}
}

/* Oculta título e botão Topo e ajusta margem para impressão */
@media print{
  .toc {
    visibility: hidden !important;
  }

  .mw-body {
    margin-right: 0px !important;
  }

  .topo {
    visibility: hidden !important;
  }
}

/* ESTILOS GERAIS - FIM */

/* ÍNDICE DAS PÁGINAS - INÍCIO */

.toc {
  position: fixed;
  width: 180px;
  right: 0px;
  top: 55px;
  background-color: transparent;
  border: 0px;
  font-size: 85%;
  padding: 10px;
  line-height: 1.3;
  height: 80vh;  
}

.toc .toctitle {
  transform: translateY(-10px);
  line-height: 2;
  margin-bottom: 20px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, white, var(--borda), white) 1;
}

.toc h2 {
  color: var(--azul-ufsc);
}

.toctext,
.tocnumber {
  opacity: 75%;
}

.toctogglespan {
  transform: translateY(27px);
  position: absolute;
  right: 0;
  border: 0;
  padding: 0px 8px;
  background-color: var(--fundo-impar);
  cursor: pointer;
  font-size: 90%;
  border-radius: 2px;
}

.toctogglespan:hover {
  background: var(--azul-ufsc);
}

.toctogglespan:hover .toctogglelabel {
  color: white;
}

.toctogglespan::after,
.toctogglespan::before {
  content: '';
}

.toctogglelabel {
  text-decoration: none !important;
}

.mw-content-ltr .toc ul {
  height: inherit;
  overflow: hidden auto;
}

/* Oculta os níveis mais baixos do índice */
.toclevel-4,
.toclevel-5 {
  display: none;
}

/** ÍNDICE DAS PÁGINAS - FIM */

/** AVISOS - INÍCIO */

.caixa {
  display: flex; 
  align-items: center; 
  overflow: hidden; 
  padding-left: 0.5em; 
  margin-top: 0.5em; 
  margin-bottom: 0.5em; 
  border-radius: 10px;
}

.caixa div {
  margin-left: 0.5em;
}

.info {
  background: var(--cor-info);
}

.alerta {
  background: var(--cor-alerta);
}

.erro {
  background: var(--cor-erro);
}

.ok {
  background: var(--cor-ok);
}

.aviso {
  border-radius: 10px;	
  border: var(--borda-sombra);
  box-shadow: var(--box-sombra);
  margin: 1rem;
  padding: .5rem .5rem .5rem 3rem;
  position: relative;
}

.aviso::before {
  background-size: contain;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  left: .5rem;
  width: 2rem;
  height: 2rem;
  content: "";
}

.info1,
.alerta1,
.ok1,
.erro1 {
  background: linear-gradient(to bottom right, var(--cor-1), var(--cor-2));  
  transition: --cor-1 .5s, --cor-2 .5s, box-shadow .5s, border .5s;
  transition-timing-function: ease-in-out;
}

.info1 {
  --cor-1: var(--cor-info);
  --cor-2: var(--fundo-pagina-geral);
  border-left: 5px solid var(--azul-ufsc);
  }
  
.info1::before {
  background-image: url(https://compras.wiki.ufsc.br/images/b/b3/Info.png);
}

.info1:hover {
  --cor-2: var(--cor-info);
  --cor-1: var(--fundo-pagina-geral);
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;
  border-right: 1px solid blue;
}

.alerta1 {
  --cor-1: var(--cor-alerta);
  --cor-2: var(--fundo-pagina-geral);
  border-left: 5px solid darkgoldenrod;
}

.alerta1::before {
  background-image: url(https://compras.wiki.ufsc.br/images/e/e3/Aviso.png);
}

.alerta1:hover {
  --cor-2: var(--cor-alerta);
  --cor-1: var(--fundo-pagina-geral);
  border-top: 1px solid darkgoldenrod;
  border-bottom: 1px solid darkgoldenrod;
  border-right: 1px solid darkgoldenrod;
}

.erro1 {
  --cor-1: var(--cor-erro);
  --cor-2: var(--fundo-pagina-geral);
  border-left: 5px solid red;
}

.erro1::before {
  background-image: url(https://compras.wiki.ufsc.br/images/5/56/Erro.png);
}

.erro1:hover {
  --cor-2: var(--cor-erro);
  --cor-1: var(--fundo-pagina-geral);
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  border-right: 1px solid red;
}

.ok1 {
  --cor-1: var(--cor-ok);
  --cor-2: var(--fundo-pagina-geral);
  border-left: 5px solid green;
}

.ok1::before {
  background-image: url(https://compras.wiki.ufsc.br/images/1/1b/Ok.png);
}

.ok1:hover {
  --cor-2: var(--cor-ok);
  --cor-1: var(--fundo-pagina-geral);
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  border-right: 1px solid green;
}

/** AVISOS - FIM */

/** PÁGINA INICIAL - INÍCIO */

.sumario {
  width: 100%
}

.coluna-sumario {
  vertical-align: top;
  width: 80%;
}

.coluna-sumario .sumario-grupo:nth-child(2n + 1) {
  background: var(--fundo-impar);
}

.coluna-sumario .sumario-grupo:nth-child(2n + 2) {
  background: var(--fundo-par);
}

.sumario-grupo {
  width: 100%; 
  border-radius: 10px;
  margin-bottom: 20px;
}

.sumario-imagem {
  width: 150px; 
  text-align: center; 
  vertical-align: top; 
  padding-top: 10px;
  font-weight: bold;
  color: var(--texto-sumario);
}

.sumario-imagem img {
  width: 75px;
  height: auto;
}

.sumario-imagem + td {
  vertical-align: top;
}

.sumario-linha,
.sumario-mostrar {
  padding: 5px; 
  border-radius: 7px;
  font-weight: bold;
  color: var(--texto-sumario);
}

.sumario-mostrar::after {
  content: "🔽";
  float: right;
}

.sumario-linha:hover {
  background-color: var(--fundo-pagina-geral);	
}

.sumario-mostrar:hover {
  background-color: var(--fundo-pagina-geral);	
  border-radius: 7px 7px 0 0 ;
}

.sumario-mostrar:hover + .sumario-conteudo {
  background: linear-gradient(to top, white, var(--fundo-pagina-geral));	
}

.sumario-conteudo {
  background-image: linear-gradient(to top, white, transparent); 
  padding: 5px; 
  border-radius: 0 0 7px 7px;
  margin-bottom: 5px;
}

.coluna-botoes {
  vertical-align: top; 
  width: 20%;
  padding-left: 20px; 
  padding-right: 20px; 
  color: var(--texto-sumario);
}

.botao {
  --cor-1: var(--cor-botao);
  --cor-2: var(--fundo-pagina-geral);
  width: 120px; 
  border-radius: 10px; 
  margin: 0 auto 20px auto;
  min-height: 100px;
  text-align: center;
  display: grid;
  font-weight: bold;
  padding: 5px;
  background: linear-gradient(to bottom right, var(--cor-1), var(--cor-2));  
  transition: --cor-1 .5s, --cor-2 .5s, box-shadow .5s, border .5s;
  transition-timing-function: ease-in-out;
}

.botao:hover {
  --cor-1: var(--fundo-pagina-geral);
  --cor-2: var(--fundo-impar);
}

.botao img {
  width: 50px;
  height: auto;
}

.botao a {
  background-image: unset !important;
  padding: 0 !important;
  color: var(--texto-sumario) !important;
  text-decoration: none !important;
}

/** PÁGINA INICIAL - FIM */

/** ABAS - INÍCIO */

.tabs-tabbox > .tabs-container {
  padding: 10px;
  display: flex; 
  align-items: center; 
  overflow: hidden; 
  border: var(--borda-sombra);
  box-shadow: var(--box-sombra);
  transition: all ease-in-out .5s;
}

.tabs-tabbox > .tabs-container:hover {
  border: var(--borda-sombra-hover);
  box-shadow: var(--box-sombra-hover);
}

.tabs-tabbox > .tabs-input:checked + .tabs-label {
  font-weight: bold;
  color: var(--azul-ufsc);
}

.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
  font-weight: bold;
  color: var(--azul-ufsc);
}

.tabs-label {
  background-color: var(--azul-ufsc);
  border: var(--borda-sombra);
  color: white;
}

.tabs-label:hover {
  color: var(--azul-ufsc);
  background-color: white;
}

.tabs-content {
  width: 100%;
}

/** ABAS - FIM */

/* TEXTO OCULTÁVEL - INÍCIO */

.oculto-titulo {
  margin-top: 10px;
  padding: 0 10px;
  background-color: var(--azul-ufsc);
  color: white;
  border-radius: 6px 6px 0 0;
}

.oculto-titulo p {
  margin-right: 30px !important;
}

.oculto-titulo::after {
  content: "🔽";
  float: right;
  transform: translateY(-30px);
}

.oculto-conteudo {
  padding: 10px;
  background-color: var(--fundo-pagina-geral);
  border-radius: 0 0 6px 6px;
}

/* TEXTO OCULTÁVEL - FIM */