Diferencia entre revisiones de «MediaWiki:Vector.css»

De Tenarius RO Wiki
Ir a la navegación Ir a la búsqueda
Página creada con «========================================================== TENARIUS RO - SIDEBAR ELEGANTE Compatible con Vector clásico / Legacy ==========================================================: body.skin-vector #mw-panel, #mw-panel { background: linear-gradient(180deg, #fff7df 0%, #fffaf0 50%, #ffe7a8 100%) !important; border-right: 1px solid #ead7ad !important; box-shadow: 8px 0 24px rgba(100,70,20,.12) !important; padding-top: 12px !important; } body.skin-vector…»
 
Sin resumen de edición
Línea 1: Línea 1:
/* ==========================================================
/* ==========================================================
TENARIUS RO - SIDEBAR ELEGANTE
TENARIUS RO - SIDEBAR CON BOTONES
Compatible con Vector clásico / Legacy
Pegar en: MediaWiki:Vector.css
========================================================== */
========================================================== */


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


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


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


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


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


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


/* Listas */
/* Listas */
body.skin-vector #mw-panel .portal .body ul,
div#mw-panel div.portal div.body ul {
#mw-panel .portal .body ul {
list-style: none !important;
list-style: none !important;
margin: 0 !important;
margin: 0 !important;
Línea 72: Línea 68:
}
}


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


/* Links */
/* Botones del menú */
body.skin-vector #mw-panel .portal .body li a,
div#mw-panel div.portal div.body ul li a {
#mw-panel .portal .body li a {
display: block !important;
display: block !important;
background: linear-gradient(180deg, #fffaf0 0%, #fff1c4 100%) !important;
color: #5b2500 !important;
color: #5b2500 !important;
background: #fffaf0 !important;
border: 1px solid #ead7ad !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
border-radius: 11px !important;
padding: 8px 10px !important;
padding: 8px 10px !important;
font-size: 13px !important;
font-size: 13px !important;
font-weight: 700 !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-decoration: none !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;
transition: all .18s ease !important;
}
}


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


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


/* Buscador */
/* Mejorar enlaces visitados */
body.skin-vector #p-search,
div#mw-panel div.portal div.body ul li a:visited {
#p-search {
color: #5b2500 !important;
}
 
/* Buscador lateral */
div#p-search {
background: #ffffff !important;
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
border-radius: 18px !important;
margin: 10px 10px 16px 10px !important;
margin: 0 0 16px 0 !important;
padding: 10px !important;
padding: 10px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
box-shadow: 0 8px 20px rgba(100,70,20,.14) !important;
}
}


body.skin-vector #searchInput,
/* 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 {
#searchInput {
background: #fffaf0 !important;
background: #fffaf0 !important;
Línea 132: Línea 143:
color: #5b2500 !important;
color: #5b2500 !important;
font-weight: 700 !important;
font-weight: 700 !important;
padding: 7px 8px !important;
}
}


body.skin-vector #searchButton,
/* Botones de búsqueda */
body.skin-vector #mw-searchButton,
#searchButton,
#searchButton,
#mw-searchButton {
#mw-searchButton {
Línea 143: Línea 154:
border-radius: 10px !important;
border-radius: 10px !important;
font-weight: 900 !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 bonito */
/* Scroll personalizado */
body.skin-vector #mw-panel,
div#mw-panel {
#mw-panel {
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #c43b22 #fff1c4;
scrollbar-color: #c43b22 #fff1c4;
}
}


body.skin-vector #mw-panel::-webkit-scrollbar,
div#mw-panel::-webkit-scrollbar {
#mw-panel::-webkit-scrollbar {
width: 8px;
width: 8px;
}
}


body.skin-vector #mw-panel::-webkit-scrollbar-track,
div#mw-panel::-webkit-scrollbar-track {
#mw-panel::-webkit-scrollbar-track {
background: #fff1c4;
background: #fff1c4;
}
}


body.skin-vector #mw-panel::-webkit-scrollbar-thumb,
div#mw-panel::-webkit-scrollbar-thumb {
#mw-panel::-webkit-scrollbar-thumb {
background: #c43b22;
background: #c43b22;
border-radius: 999px;
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;
}
```
}
}

Revisión del 18:51 14 jun 2026

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

/* 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;
}
```

}