Diferencia entre revisiones de «MediaWiki:Vector.css»

De Tenarius RO Wiki
Ir a la navegación Ir a la búsqueda
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
/* ==========================================================
/* ==========================================================
TENARIUS RO - SIDEBAR ELEGANTE CON BOTONES
TENARIUS RO - SIDEBAR ELEGANTE DEFINITIVO
Pegar en: MediaWiki:Vector.css
Pegar en: MediaWiki:Vector.css
Diseñado para Vector clásico / Vector moderno
No pegar comillas invertidas ni etiquetas style.
========================================================== */
========================================================== */


/* Fondo general izquierdo */
/* =========================
#mw-panel,
OCULTAR TABS SUPERIORES
.mw-sidebar,
========================= */
.vector-main-menu,
 
.vector-main-menu-landmark {
#left-navigation,
#right-navigation,
#p-namespaces,
#p-views,
#p-cactions,
.vector-menu-tabs,
.vector-page-tabs,
.vector-page-tools,
.vector-page-toolbar,
#p-personal {
display: none !important;
}
 
#mw-head-base {
height: 0 !important;
margin-top: 0 !important;
margin-left: 275px !important;
}
 
/* =========================
SIDEBAR GENERAL
========================= */
 
#mw-panel {
width: 245px !important;
box-sizing: border-box !important;
padding: 18px 16px 28px 16px !important;
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 48%, #ffe7a8 100%) !important;
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 48%, #ffe7a8 100%) !important;
border-right: 1px solid #e0b94f !important;
border-right: 1px solid #e0b94f !important;
box-shadow: 8px 0 26px rgba(100,70,20,.16) !important;
box-shadow: 8px 0 26px rgba(100,70,20,.16) !important;
padding-top: 14px !important;
}
}


/* Logo como tarjeta */
/* Separar contenido principal del sidebar */
#p-logo,
#content,
.mw-logo {
.mw-body {
margin-left: 285px !important;
margin-top: 22px !important;
}
 
#footer {
margin-left: 285px !important;
}
 
/* =========================
LOGO CENTRADO PERFECTO
========================= */
 
#p-logo {
width: 190px !important;
height: 150px !important;
margin: 0 auto 20px auto !important;
padding: 10px !important;
box-sizing: border-box !important;
background: #ffffff !important;
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border: 1px solid #ead7ad !important;
Línea 24: Línea 67:
box-shadow: 0 10px 24px rgba(100,70,20,.16) !important;
box-shadow: 0 10px 24px rgba(100,70,20,.16) !important;
overflow: hidden !important;
overflow: hidden !important;
margin-bottom: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
 
/* Imagen del logo */
#p-logo a {
display: block !important;
width: 100% !important;
height: 100% !important;
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}


/* Bloques/secciones del menú */
/* =========================
BLOQUES DEL MENÚ
========================= */
 
#mw-panel .portal,
#mw-panel .portal,
#mw-panel .vector-menu,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal,
#mw-panel .vector-menu-portal,
#mw-panel .vector-pinnable-element,
#mw-panel .vector-pinnable-element {
.vector-main-menu .portal,
.vector-main-menu .vector-menu,
.vector-main-menu .vector-menu-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 17px 0 !important;
padding: 10px !important;
padding: 10px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.14) !important;
box-shadow: 0 8px 22px rgba(100,70,20,.14) !important;
overflow: hidden !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
}


/* Encabezados de sección */
/* Títulos de cada sección */
#mw-panel .portal h3,
#mw-panel .portal h3,
#mw-panel .portal .vector-menu-heading,
#mw-panel .portal .vector-menu-heading,
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading,
#mw-panel .vector-pinnable-header-label,
#mw-panel .vector-pinnable-header-label {
.vector-main-menu .portal h3,
.vector-main-menu .vector-menu-heading,
.vector-main-menu .vector-pinnable-header-label {
display: block !important;
display: block !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 62%, #f0a500 100%) !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 62%, #f0a500 100%) !important;
Línea 67: Línea 120:
}
}


/* Quitar líneas/estilos viejos del título */
/* Quitar línea antigua de Vector */
#mw-panel .portal h3:after,
#mw-panel .portal h3:after,
#mw-panel .vector-menu-heading:after,
#mw-panel .vector-menu-heading:after {
.vector-main-menu .vector-menu-heading:after {
display: none !important;
display: none !important;
}
}
Línea 76: Línea 128:
/* Cuerpo del menú */
/* Cuerpo del menú */
#mw-panel .portal .body,
#mw-panel .portal .body,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content {
.vector-main-menu .portal .body,
.vector-main-menu .vector-menu-content {
background: transparent !important;
background: transparent !important;
margin: 0 !important;
margin: 0 !important;
Línea 86: Línea 136:
/* Listas */
/* Listas */
#mw-panel .portal .body ul,
#mw-panel .portal .body ul,
#mw-panel .vector-menu-content-list,
#mw-panel .vector-menu-content-list {
.vector-main-menu .portal .body ul,
.vector-main-menu .vector-menu-content-list {
list-style: none !important;
list-style: none !important;
margin: 0 !important;
margin: 0 !important;
Línea 96: Línea 144:
/* Items */
/* Items */
#mw-panel .portal li,
#mw-panel .portal li,
#mw-panel .vector-menu-content-list li,
#mw-panel .vector-menu-content-list li {
.vector-main-menu .portal li,
.vector-main-menu .vector-menu-content-list li {
margin: 5px 0 !important;
margin: 5px 0 !important;
padding: 0 !important;
padding: 0 !important;
Línea 105: Línea 151:
}
}


/* Botones del menú */
/* =========================
BOTONES DEL MENÚ
========================= */
 
#mw-panel .portal li a,
#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a {
.vector-main-menu .portal li a,
.vector-main-menu .portal .body li a,
.vector-main-menu .vector-menu-content-list li a {
display: block !important;
display: block !important;
background: linear-gradient(180deg, #fffaf0 0%, #fff1c4 100%) !important;
background: linear-gradient(180deg, #fffaf0 0%, #fff1c4 100%) !important;
Línea 117: Línea 163:
border: 1px solid #ead7ad !important;
border: 1px solid #ead7ad !important;
border-radius: 12px !important;
border-radius: 12px !important;
padding: 8px 10px !important;
padding: 9px 11px !important;
font-size: 13px !important;
font-size: 13px !important;
font-weight: 700 !important;
font-weight: 700 !important;
Línea 125: Línea 171:
transition: all .18s ease !important;
transition: all .18s ease !important;
white-space: normal !important;
white-space: normal !important;
box-sizing: border-box !important;
}
}


/* Hover de botones */
/* Hover */
#mw-panel .portal li a:hover,
#mw-panel .portal li a:hover,
#mw-panel .portal .body li a:hover,
#mw-panel .portal .body li a:hover,
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-content-list li a:hover {
.vector-main-menu .portal li a:hover,
.vector-main-menu .portal .body li a:hover,
.vector-main-menu .vector-menu-content-list li a:hover {
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important;
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important;
color: #8b1e12 !important;
color: #8b1e12 !important;
Línea 141: Línea 185:
}
}


/* Activo / seleccionado */
/* Activo */
#mw-panel .portal li.selected a,
#mw-panel .portal li.selected a,
#mw-panel .vector-menu-content-list li.selected a,
#mw-panel .vector-menu-content-list li.selected a,
.vector-main-menu .portal li.selected a,
#mw-panel .portal li a:active,
.vector-main-menu .vector-menu-content-list li.selected a {
#mw-panel .vector-menu-content-list li a:active {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
color: #ffffff !important;
color: #ffffff !important;
Línea 154: Línea 198:
/* Visitados */
/* Visitados */
#mw-panel .portal li a:visited,
#mw-panel .portal li a:visited,
#mw-panel .vector-menu-content-list li a:visited,
#mw-panel .vector-menu-content-list li a:visited {
.vector-main-menu .portal li a:visited,
.vector-main-menu .vector-menu-content-list li a:visited {
color: #5b2500 !important;
color: #5b2500 !important;
}
}


/* Buscador */
/* =========================
BUSCADOR
========================= */
 
#p-search,
#p-search,
.vector-search-box {
.vector-search-box {
Línea 170: Línea 215:
}
}


/* Input del buscador */
#searchInput,
#searchInput,
.vector-search-box-input {
.vector-search-box-input {
Línea 181: Línea 225:
}
}


/* Botones del buscador */
#searchButton,
#searchButton,
#mw-searchButton,
#mw-searchButton,
Línea 193: Línea 236:
}
}


/* Scroll bonito */
/* =========================
#mw-panel,
SCROLL DEL SIDEBAR
.vector-main-menu {
========================= */
 
#mw-panel {
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #c43b22 #fff1c4;
scrollbar-color: #c43b22 #fff1c4;
}
}


#mw-panel::-webkit-scrollbar,
#mw-panel::-webkit-scrollbar {
.vector-main-menu::-webkit-scrollbar {
width: 8px;
width: 8px;
}
}


#mw-panel::-webkit-scrollbar-track,
#mw-panel::-webkit-scrollbar-track {
.vector-main-menu::-webkit-scrollbar-track {
background: #fff1c4;
background: #fff1c4;
}
}


#mw-panel::-webkit-scrollbar-thumb,
#mw-panel::-webkit-scrollbar-thumb {
.vector-main-menu::-webkit-scrollbar-thumb {
background: #c43b22;
background: #c43b22;
border-radius: 999px;
border-radius: 999px;
}
}


/* Ajustes móviles */
/* =========================
RESPONSIVE
========================= */
 
@media screen and (max-width: 900px) {
@media screen and (max-width: 900px) {
#mw-panel .portal,
#mw-panel {
#mw-panel .vector-menu,
width: auto !important;
#mw-panel .vector-menu-portal,
padding: 10px 8px !important;
.vector-main-menu .portal,
.vector-main-menu .vector-menu {
border-radius: 14px !important;
margin-bottom: 12px !important;
}
}


```
```
#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list li a,
.vector-main-menu .portal li a,
.vector-main-menu .portal .body li a,
.vector-main-menu .vector-menu-content-list li a {
font-size: 13px !important;
padding: 8px 10px !important;
}
```
}
/* ==========================================================
TENARIUS RO - CORRECCIÓN DE SIDEBAR ANCHO + TABS VECTOR
Pegar al final de MediaWiki:Vector.css
========================================================== */
/* Ancho oficial del sidebar */
#mw-panel {
width: 230px !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Logo ajustado al nuevo ancho */
#p-logo {
#p-logo {
width: 180px !important;
width: 170px !important;
margin-left: 20px !important;
height: 135px !important;
margin-right: 20px !important;
}
}


/* Contenido principal separado del sidebar */
#content,
#content,
.mw-body {
.mw-body,
margin-left: 270px !important;
#footer,
}
 
/* Base superior de Vector */
#mw-head-base {
#mw-head-base {
margin-left: 270px !important;
margin-left: 0 !important;
}
 
/* Tabs superiores izquierdos: Portada / Discusión */
#left-navigation {
left: 270px !important;
margin-left: 0 !important;
}
 
/* Tabs superiores derechos: Leer / Editar / Ver historial */
#right-navigation {
margin-right: 20px !important;
}
 
/* Herramientas personales: Acceder / Usuario */
#p-personal {
right: 18px !important;
}
 
/* Footer separado del sidebar */
#footer {
margin-left: 270px !important;
}
 
/* Evitar que el sidebar tape los tabs */
#mw-panel {
z-index: 1 !important;
}
 
#mw-head,
#left-navigation,
#right-navigation,
#p-personal {
z-index: 5 !important;
}
}


/* Mejor distribución interna de tarjetas del sidebar */
#mw-panel .portal,
#mw-panel .portal,
#mw-panel .vector-menu,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal,
#mw-panel .vector-menu-portal {
#mw-panel .vector-pinnable-element {
border-radius: 14px !important;
margin-left: 0 !important;
margin-bottom: 12px !important;
margin-right: 0 !important;
}
}


/* Botones un poco más amplios y legibles */
#mw-panel .portal li a,
#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list li a {
#mw-panel .vector-menu-content-list li a {
padding: 9px 11px !important;
font-size: 13px !important;
font-size: 13px !important;
padding: 8px 10px !important;
}
}
/* Responsive: en pantallas pequeñas no forzar tanto margen */
@media screen and (max-width: 900px) {
#mw-panel {
width: auto !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
```
```
#content,
.mw-body,
#mw-head-base,
#footer {
margin-left: 0 !important;
}


#left-navigation {
left: 0 !important;
}
```
}
/* ==========================================================
TENARIUS RO - OCULTAR TABS SUPERIORES
Oculta Portada, Discusión, Leer, Ver código fuente, Ver historial
========================================================== */
/* Ocultar Portada / Discusión */
#left-navigation,
#p-namespaces,
.vector-menu-tabs,
.vector-page-tabs {
display: none !important;
}
/* Ocultar Leer / Editar / Ver código fuente / Ver historial */
#right-navigation,
#p-views,
#p-cactions,
.vector-page-tools,
.vector-page-toolbar {
display: none !important;
}
/* Ocultar línea/espacio que dejan los tabs */
#mw-head-base {
height: 0 !important;
margin-top: 0 !important;
}
/* Subir un poco el contenido para que no quede hueco */
#content,
.mw-body {
margin-top: 20px !important;
}
/* Opcional: ocultar Acceder / usuario arriba a la derecha */
#p-personal {
display: none !important;
}
}

Revisión del 19:10 14 jun 2026

/* ==========================================================
TENARIUS RO - SIDEBAR ELEGANTE DEFINITIVO
Pegar en: MediaWiki:Vector.css
No pegar comillas invertidas ni etiquetas style.
========================================================== */

/* =========================
OCULTAR TABS SUPERIORES
========================= */

#left-navigation,
#right-navigation,
#p-namespaces,
#p-views,
#p-cactions,
.vector-menu-tabs,
.vector-page-tabs,
.vector-page-tools,
.vector-page-toolbar,
#p-personal {
display: none !important;
}

#mw-head-base {
height: 0 !important;
margin-top: 0 !important;
margin-left: 275px !important;
}

/* =========================
SIDEBAR GENERAL
========================= */

#mw-panel {
width: 245px !important;
box-sizing: border-box !important;
padding: 18px 16px 28px 16px !important;
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 48%, #ffe7a8 100%) !important;
border-right: 1px solid #e0b94f !important;
box-shadow: 8px 0 26px rgba(100,70,20,.16) !important;
}

/* Separar contenido principal del sidebar */
#content,
.mw-body {
margin-left: 285px !important;
margin-top: 22px !important;
}

#footer {
margin-left: 285px !important;
}

/* =========================
LOGO CENTRADO PERFECTO
========================= */

#p-logo {
width: 190px !important;
height: 150px !important;
margin: 0 auto 20px auto !important;
padding: 10px !important;
box-sizing: border-box !important;
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 22px !important;
box-shadow: 0 10px 24px rgba(100,70,20,.16) !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* Imagen del logo */
#p-logo a {
display: block !important;
width: 100% !important;
height: 100% !important;
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

/* =========================
BLOQUES DEL MENÚ
========================= */

#mw-panel .portal,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal,
#mw-panel .vector-pinnable-element {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
margin: 0 0 17px 0 !important;
padding: 10px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.14) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}

/* Títulos de cada sección */
#mw-panel .portal h3,
#mw-panel .portal .vector-menu-heading,
#mw-panel .vector-menu-heading,
#mw-panel .vector-pinnable-header-label {
display: block !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 62%, #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;
letter-spacing: .3px !important;
text-transform: none !important;
box-shadow: 0 4px 10px rgba(89,59,5,.20) !important;
}

/* Quitar línea antigua de Vector */
#mw-panel .portal h3:after,
#mw-panel .vector-menu-heading:after {
display: none !important;
}

/* Cuerpo del menú */
#mw-panel .portal .body,
#mw-panel .vector-menu-content {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}

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

/* Items */
#mw-panel .portal li,
#mw-panel .vector-menu-content-list li {
margin: 5px 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.25 !important;
}

/* =========================
BOTONES DEL MENÚ
========================= */

#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list 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: 9px 11px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
text-decoration: none !important;
box-shadow: 0 3px 8px rgba(100,70,20,.10) !important;
transition: all .18s ease !important;
white-space: normal !important;
box-sizing: border-box !important;
}

/* Hover */
#mw-panel .portal li a:hover,
#mw-panel .portal .body li a:hover,
#mw-panel .vector-menu-content-list li a:hover {
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important;
color: #8b1e12 !important;
border-color: #d99b00 !important;
box-shadow: 0 6px 14px rgba(100,70,20,.20) !important;
transform: translateX(4px) !important;
}

/* Activo */
#mw-panel .portal li.selected a,
#mw-panel .vector-menu-content-list li.selected a,
#mw-panel .portal li a:active,
#mw-panel .vector-menu-content-list li a:active {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
color: #ffffff !important;
border-color: #8b1e12 !important;
font-weight: 900 !important;
}

/* Visitados */
#mw-panel .portal li a:visited,
#mw-panel .vector-menu-content-list li a:visited {
color: #5b2500 !important;
}

/* =========================
BUSCADOR
========================= */

#p-search,
.vector-search-box {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.14) !important;
padding: 10px !important;
}

#searchInput,
.vector-search-box-input {
background: #fffaf0 !important;
border: 1px solid #ead7ad !important;
border-radius: 10px !important;
color: #5b2500 !important;
font-weight: 700 !important;
padding: 7px 8px !important;
}

#searchButton,
#mw-searchButton,
.vector-search-box-button {
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;
}

/* =========================
SCROLL DEL SIDEBAR
========================= */

#mw-panel {
scrollbar-width: thin;
scrollbar-color: #c43b22 #fff1c4;
}

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

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

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

/* =========================
RESPONSIVE
========================= */

@media screen and (max-width: 900px) {
#mw-panel {
width: auto !important;
padding: 10px 8px !important;
}

```
#p-logo {
	width: 170px !important;
	height: 135px !important;
}

#content,
.mw-body,
#footer,
#mw-head-base {
	margin-left: 0 !important;
}

#mw-panel .portal,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal {
	border-radius: 14px !important;
	margin-bottom: 12px !important;
}

#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list li a {
	font-size: 13px !important;
	padding: 8px 10px !important;
}
```

}