MediaWiki:Vector.css

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

• Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
• Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
• Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5

/* ==========================================================
TENARIUS RO - SIDEBAR CON BOTONES
Pegar en: MediaWiki:Vector.css
========================================================== */

#mw-panel {
	background: red !important;
}

/* Fondo general del sidebar */
div#mw-panel {
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 50%, #ffe7a8 100%) !important;
border-right: 1px solid #e0b94f !important;
box-shadow: 8px 0 24px rgba(100,70,20,.16) !important;
padding: 14px 10px 18px 10px !important;
}

/* Logo */
div#p-logo {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
margin: 8px auto 18px auto !important;
box-shadow: 0 8px 20px rgba(100,70,20,.14) !important;
overflow: hidden !important;
}

/* Cada sección del sidebar */
div#mw-panel div.portal {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
margin: 0 0 16px 0 !important;
padding: 10px !important;
box-shadow: 0 8px 20px rgba(100,70,20,.14) !important;
overflow: hidden !important;
}

/* Títulos de cada sección */
div#mw-panel div.portal h3 {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 65%, #f0a500 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.45) !important;
border-radius: 13px !important;
padding: 9px 11px !important;
margin: 0 0 10px 0 !important;
font-size: 13px !important;
font-weight: 900 !important;
line-height: 1.25 !important;
text-transform: none !important;
letter-spacing: .3px !important;
box-shadow: 0 4px 10px rgba(89,59,5,.20) !important;
}

/* Quitar línea vieja debajo de títulos */
div#mw-panel div.portal h3:after {
display: none !important;
}

/* Cuerpo de cada sección */
div#mw-panel div.portal div.body {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}

/* Listas */
div#mw-panel div.portal div.body ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}

/* Espaciado de cada item */
div#mw-panel div.portal div.body ul li {
margin: 5px 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.25 !important;
}

/* Botones del menú */
div#mw-panel div.portal div.body ul li a {
display: block !important;
background: linear-gradient(180deg, #fffaf0 0%, #fff1c4 100%) !important;
color: #5b2500 !important;
border: 1px solid #ead7ad !important;
border-radius: 12px !important;
padding: 8px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
line-height: 1.25 !important;
box-shadow: 0 3px 8px rgba(100,70,20,.10) !important;
transition: all .18s ease !important;
}

/* Hover de los botones */
div#mw-panel div.portal div.body ul li a:hover {
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important;
color: #8b1e12 !important;
border-color: #d99b00 !important;
box-shadow: 0 5px 12px rgba(100,70,20,.18) !important;
transform: translateX(4px) !important;
}

/* Link activo */
div#mw-panel div.portal div.body ul li.selected a,
div#mw-panel div.portal div.body ul li a:active {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
color: #ffffff !important;
border-color: #8b1e12 !important;
font-weight: 900 !important;
}

/* Mejorar enlaces visitados */
div#mw-panel div.portal div.body ul li a:visited {
color: #5b2500 !important;
}

/* Buscador lateral */
div#p-search {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
margin: 0 0 16px 0 !important;
padding: 10px !important;
box-shadow: 0 8px 20px rgba(100,70,20,.14) !important;
}

/* Título del buscador */
div#p-search h3 {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 65%, #f0a500 100%) !important;
color: #ffffff !important;
border-radius: 13px !important;
padding: 9px 11px !important;
margin: 0 0 10px 0 !important;
font-size: 13px !important;
font-weight: 900 !important;
}

/* Input de búsqueda */
#searchInput {
background: #fffaf0 !important;
border: 1px solid #ead7ad !important;
border-radius: 10px !important;
color: #5b2500 !important;
font-weight: 700 !important;
padding: 7px 8px !important;
}

/* Botones de búsqueda */
#searchButton,
#mw-searchButton {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
color: #ffffff !important;
border: 1px solid #8b1e12 !important;
border-radius: 10px !important;
font-weight: 900 !important;
padding: 6px 10px !important;
}

/* Reducir separación exagerada */
div#mw-panel div.portal div.body ul li a {
white-space: normal !important;
word-break: normal !important;
}

/* Scroll personalizado */
div#mw-panel {
scrollbar-width: thin;
scrollbar-color: #c43b22 #fff1c4;
}

div#mw-panel::-webkit-scrollbar {
width: 8px;
}

div#mw-panel::-webkit-scrollbar-track {
background: #fff1c4;
}

div#mw-panel::-webkit-scrollbar-thumb {
background: #c43b22;
border-radius: 999px;
}

/* Ajuste para pantallas pequeñas */
@media screen and (max-width: 900px) {
div#mw-panel {
padding: 10px 8px !important;
}

```
div#mw-panel div.portal {
	border-radius: 14px !important;
	margin-bottom: 12px !important;
}

div#mw-panel div.portal div.body ul li a {
	font-size: 13px !important;
	padding: 8px 10px !important;
}
```

}