MediaWiki:Common.css

De Caninos Loucos
Revisão de 17h06min de 2 de setembro de 2026 por Maintenance script (discussão | contribs) (Ajustar logotipo e navegação responsiva)
Ir para navegação Ir para pesquisar

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

  • Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
  • Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
  • Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
  • Opera: Pressione Ctrl-F5.
/* Identidade visual Caninos Inc. para o Vector legado.
 * Baseada nos tokens públicos de canisinc.com.br. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
	--caninos-green-950: #072316;
	--caninos-green-900: #0d3321;
	--caninos-green-800: #16452d;
	--caninos-green-700: #1f6a40;
	--caninos-green-600: #2e8752;
	--caninos-lime: #d7ec63;
	--caninos-cream: #f7faf4;
	--caninos-white: #fff;
	--caninos-ink: #0f1d16;
	--caninos-text: #435247;
	--caninos-line: #dfe9dd;
	--caninos-shadow: 0 20px 50px rgba(7, 35, 22, 0.12);
}

html,
body {
	background: var(--caninos-cream);
}

body,
button,
input,
select,
textarea {
	color: var(--caninos-text);
	font-family: "Manrope", Arial, Helvetica, sans-serif;
}

body {
	background:
		radial-gradient(circle at 85% 8%, rgba(46, 135, 82, 0.11), transparent 25rem),
		linear-gradient(180deg, #f4faf0 0, var(--caninos-cream) 24rem);
}

a,
.mw-parser-output a.extiw,
.mw-parser-output a.external {
	color: var(--caninos-green-700);
}

a:hover,
a:focus {
	color: var(--caninos-green-900);
}

/* Faixa superior e navegação */
#mw-page-base {
	height: 8.6rem;
	background: linear-gradient(135deg, var(--caninos-green-950), var(--caninos-green-800));
	box-shadow: 0 12px 32px rgba(7, 35, 22, 0.18);
}

#mw-head-base {
	height: 8.6rem;
	margin-left: 12.5rem;
}

#mw-panel {
	top: 0;
	width: 12.5rem;
	padding-top: 0;
	background: var(--caninos-green-900);
	box-shadow: 12px 0 34px rgba(7, 35, 22, 0.1);
}

#p-logo,
#p-logo a {
	width: 12.5rem;
	height: 8.6rem;
}

#p-logo a {
	box-sizing: border-box;
	background-image: url('/images/canino-dnausp-white.png') !important;
	background-position: center;
	background-size: 10.5rem auto;
}

#mw-panel .portal {
	margin: 0 1rem;
	padding: 0.75rem 0 0.9rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#mw-panel .portal .p-lang-btn,
#mw-panel .portal h3 {
	padding: 0 0.25rem 0.45rem;
	color: var(--caninos-lime);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#mw-panel .portal .body {
	margin: 0;
}

#mw-panel .portal .body li {
	padding: 0.24rem 0;
	font-size: 0.82rem;
	line-height: 1.35;
}

#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited {
	color: rgba(255, 255, 255, 0.82);
}

#mw-panel .portal .body li a:hover {
	color: var(--caninos-white);
	text-decoration: none;
}

#mw-head {
	top: 0;
	height: 8.6rem;
	color: var(--caninos-white);
}

#p-personal {
	top: 0.7rem;
	right: 1.5rem;
}

#p-personal ul {
	padding: 0.45rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
}

#p-personal li a,
#p-personal li a:visited,
#p-personal li {
	color: rgba(255, 255, 255, 0.86);
}

#left-navigation,
#right-navigation {
	margin-top: 5.2rem;
}

#left-navigation {
	margin-left: 13.5rem;
}

.vector-menu-tabs,
.vector-menu-tabs a,
.vector-menu-tabs .selected,
.vector-menu-tabs span {
	background-image: none;
}

.vector-menu-tabs li {
	margin-right: 0.25rem;
	background: transparent;
}

.vector-menu-tabs li a {
	height: 2.6rem;
	padding: 0 0.8rem;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 700;
	line-height: 2.6rem;
}

.vector-menu-tabs li.selected,
.vector-menu-tabs li:hover {
	border-radius: 8px 8px 0 0;
	background: var(--caninos-cream);
}

.vector-menu-tabs li.selected a,
.vector-menu-tabs li:hover a {
	color: var(--caninos-green-900);
}

#p-search {
	margin-right: 1.5rem;
}

#simpleSearch {
	min-width: 17rem;
	height: 2.55rem;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 12px 28px rgba(7, 35, 22, 0.14);
}

#simpleSearch input {
	padding-left: 1rem;
}

/* Conteúdo */
.mw-body {
	box-sizing: border-box;
	margin: 2rem 2rem 2rem 14.5rem;
	padding: clamp(1.5rem, 3vw, 3rem);
	border: 1px solid var(--caninos-line);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--caninos-shadow);
}

.mw-body-content {
	max-width: 86rem;
	color: var(--caninos-text);
	font-size: 0.98rem;
	line-height: 1.72;
}

.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4 {
	color: var(--caninos-ink);
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	font-weight: 800;
}

.mw-body h1,
.mw-body-content h1 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	letter-spacing: -0.035em;
}

.mw-body-content h2 {
	margin-top: 2rem;
	padding-bottom: 0.55rem;
	border-bottom: 2px solid var(--caninos-line);
	font-size: 1.55rem;
}

.mw-body-content h2::after {
	display: block;
	width: 4rem;
	height: 3px;
	margin: 0.55rem 0 -0.65rem;
	border-radius: 999px;
	background: var(--caninos-green-600);
	content: "";
}

.mw-body-content h3 {
	font-size: 1.2rem;
}

.mw-body-content code,
.mw-body-content pre,
.mw-code {
	border-color: var(--caninos-line);
	border-radius: 10px;
	background: #f1f7ee;
}

.mw-body-content pre,
.mw-code {
	padding: 1rem 1.2rem;
}

.wikitable {
	overflow: hidden;
	border: 1px solid var(--caninos-line);
	border-radius: 12px;
	background: var(--caninos-white);
	box-shadow: 0 10px 26px rgba(7, 35, 22, 0.06);
}

.wikitable > tr > th,
.wikitable > * > tr > th {
	border-color: var(--caninos-green-800);
	color: var(--caninos-white);
	background: var(--caninos-green-800);
}

.wikitable > tr > td,
.wikitable > * > tr > td {
	border-color: var(--caninos-line);
	background: var(--caninos-white);
}

.toc,
.mw-warning,
.catlinks {
	border: 1px solid var(--caninos-line);
	border-radius: 14px;
	background: #f3f8ef;
}

.toc {
	padding: 0.8rem 1.1rem;
}

.mw-ui-button,
.oo-ui-buttonElement-button {
	border-radius: 8px !important;
	font-weight: 800 !important;
}

.mw-ui-button.mw-ui-progressive,
.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button {
	border-color: var(--caninos-green-700) !important;
	background: var(--caninos-green-700) !important;
}

input,
textarea,
select {
	border-color: var(--caninos-line) !important;
	border-radius: 8px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--caninos-green-600) !important;
	box-shadow: 0 0 0 3px rgba(46, 135, 82, 0.14);
}

#footer {
	box-sizing: border-box;
	margin: 1rem 2rem 2rem 14.5rem;
	padding: 1.5rem 2rem;
	border-radius: 18px;
	color: rgba(255, 255, 255, 0.76);
	background: var(--caninos-green-950);
}

#footer a {
	color: var(--caninos-lime);
}

@media screen and (max-width: 850px) {
	#mw-page-base {
		height: 7.5rem;
	}

	#mw-head-base,
	#mw-head,
	#mw-panel {
		margin-left: 0;
	}

	#mw-panel {
		position: relative;
		display: block;
		width: 100%;
		height: 6.5rem;
		background: var(--caninos-green-900);
	}

	#p-logo,
	#p-logo a {
		width: 12rem;
		height: 6.5rem;
	}

	#mw-panel .portal {
		display: none;
	}

	#p-personal {
		right: 0.75rem;
	}

	#left-navigation {
		margin-left: 0.6rem;
	}

	#right-navigation {
		margin-right: 0.6rem;
	}

	#p-search {
		display: none;
	}

	.mw-body,
	#footer {
		margin-right: 0.75rem;
		margin-left: 0.75rem;
	}

	.mw-body {
		margin-top: 1rem;
		padding: 1.25rem;
		border-radius: 16px;
	}
}

@media print {
	.mw-body {
		margin: 0;
		border: 0;
		box-shadow: none;
	}
}
Disponível em “https://wiki.canisinc.com.br/index.php?title=MediaWiki:Common.css&oldid=787”