Diferencia entre revisiones de «MediaWiki:Common.css»

De Tenarius RO Wiki
Ir a la navegación Ir a la búsqueda
Sin resumen de edición
Etiquetas: Reversión manual Revertido
Sin resumen de edición
Etiqueta: Revertido
Línea 1: Línea 1:
/* ==========================================================
/* ==========================================================
TENARIUS RO - SIDEBAR ELEGANTE
TENARIUS RO - SIDEBAR DEFINITIVO
Compatible con Vector clásico / Legacy
Funciona para visitante, usuario, editor y administrador
Pegar en: MediaWiki:Common.css
========================================================== */
========================================================== */


body.skin-vector #mw-panel,
/* Ocultar navegación superior que estorba */
#mw-panel {
#left-navigation,
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 50%, #ffe7a8 100%) !important;
#right-navigation,
border-right: 1px solid #ead7ad !important;
#p-namespaces,
box-shadow: 8px 0 24px rgba(100,70,20,.12) !important;
#p-views,
padding-top: 12px !important;
#p-cactions,
#p-personal,
.vector-page-tabs,
.vector-page-tools,
.vector-page-toolbar,
.vector-user-links,
.vector-user-menu,
.vector-page-tools-landmark {
display: none !important;
}
 
/* Quitar espacio superior de tabs */
#mw-head-base {
height: 0 !important;
margin-top: 0 !important;
}
 
/* Fondo general de la columna izquierda */
#mw-panel,
#mw-navigation,
.mw-sidebar,
.vector-main-menu,
.vector-main-menu-landmark {
width: 245px !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;
padding: 14px 14px 24px 14px !important;
box-sizing: border-box !important;
}
 
/* Separar contenido principal del sidebar */
#content,
.mw-body {
margin-left: 285px !important;
margin-top: 20px !important;
}
 
#footer {
margin-left: 285px !important;
}
}


body.skin-vector #p-logo,
/* Logo como tarjeta */
#p-logo {
#p-logo,
.mw-logo {
background: #ffffff !important;
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
border-radius: 22px !important;
margin: 8px 12px 18px 12px !important;
box-shadow: 0 10px 24px rgba(100,70,20,.16) !important;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
overflow: hidden !important;
overflow: hidden !important;
margin: 8px auto 18px auto !important;
padding: 8px !important;
width: 190px !important;
box-sizing: border-box !important;
}
}


/* Cada bloque del sidebar */
/* Bloques del menú: versión amplia para cualquier skin */
body.skin-vector #mw-panel .portal,
#mw-panel .portal,
#mw-panel .portal {
#mw-panel .mw-portlet,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal,
#mw-panel nav,
.vector-main-menu .portal,
.vector-main-menu .mw-portlet,
.vector-main-menu .vector-menu,
.vector-main-menu nav {
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 22px rgba(100,70,20,.14) !important;
overflow: hidden !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
}


/* Título de cada sección */
/* Títulos de secciones */
body.skin-vector #mw-panel .portal h3,
#mw-panel .portal h3,
#mw-panel .portal h3 {
#mw-panel .mw-portlet h3,
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 65%, #f0a500 100%) !important;
#mw-panel .vector-menu-heading,
#mw-panel .vector-pinnable-header-label,
#mw-panel nav h3,
.vector-main-menu .portal h3,
.vector-main-menu .mw-portlet h3,
.vector-main-menu .vector-menu-heading,
.vector-main-menu nav h3 {
display: block !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 62%, #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 105:
font-size: 13px !important;
font-size: 13px !important;
font-weight: 900 !important;
font-weight: 900 !important;
line-height: 1.25 !important;
letter-spacing: .3px !important;
letter-spacing: .3px !important;
text-transform: none !important;
text-transform: none !important;
border: 1px solid rgba(255,255,255,.35) !important;
box-shadow: 0 4px 10px rgba(89,59,5,.20) !important;
box-shadow: 0 4px 10px rgba(89,59,5,.18) !important;
}
}


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


/* Cuerpo de cada sección */
/* Cuerpo de secciones */
body.skin-vector #mw-panel .portal .body,
#mw-panel .body,
#mw-panel .portal .body {
#mw-panel .vector-menu-content,
#mw-panel .mw-portlet-body,
.vector-main-menu .body,
.vector-main-menu .vector-menu-content,
.vector-main-menu .mw-portlet-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,
#mw-panel ul,
#mw-panel .portal .body ul {
#mw-panel .vector-menu-content-list,
.vector-main-menu ul,
.vector-main-menu .vector-menu-content-list {
list-style: none !important;
list-style: none !important;
margin: 0 !important;
margin: 0 !important;
Línea 73: Línea 142:


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


/* Links */
/* Botones del sidebar: selector fuerte para admin/editor/visitante */
body.skin-vector #mw-panel .portal .body li a,
#mw-panel li a,
#mw-panel .portal .body li a {
#mw-panel .body li a,
#mw-panel .mw-portlet-body li a,
#mw-panel .vector-menu-content-list li a,
.vector-main-menu li a,
.vector-main-menu .body li a,
.vector-main-menu .mw-portlet-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;
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: 9px 11px !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;
line-height: 1.25 !important;
text-decoration: none !important;
text-decoration: none !important;
box-shadow: 0 3px 8px rgba(100,70,20,.10) !important;
transition: all .18s ease !important;
transition: all .18s ease !important;
white-space: normal !important;
box-sizing: border-box !important;
}
}


/* Hover */
/* Hover */
body.skin-vector #mw-panel .portal .body li a:hover,
#mw-panel li a:hover,
#mw-panel .portal .body li a:hover {
#mw-panel .body li a:hover,
#mw-panel .mw-portlet-body li a:hover,
#mw-panel .vector-menu-content-list li a:hover,
.vector-main-menu li a:hover,
.vector-main-menu .body li a:hover,
.vector-main-menu .mw-portlet-body li a:hover,
.vector-main-menu .vector-menu-content-list 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 6px 14px rgba(100,70,20,.20) !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,
#mw-panel li.selected a,
#mw-panel .portal .body li.selected a {
#mw-panel li a:active,
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important;
.vector-main-menu li.selected a,
color: #4b2500 !important;
.vector-main-menu li a:active {
border-color: #d99b00 !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
color: #ffffff !important;
border-color: #8b1e12 !important;
font-weight: 900 !important;
font-weight: 900 !important;
}
/* Visitados */
#mw-panel li a:visited,
.vector-main-menu li a:visited {
color: #5b2500 !important;
}
}


/* Buscador */
/* Buscador */
body.skin-vector #p-search,
#p-search,
#p-search {
.vector-search-box {
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;
box-shadow: 0 8px 22px rgba(100,70,20,.14) !important;
padding: 10px !important;
padding: 10px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
}
}


body.skin-vector #searchInput,
/* Input buscador */
#searchInput {
#searchInput,
.vector-search-box-input {
background: #fffaf0 !important;
background: #fffaf0 !important;
border: 1px solid #ead7ad !important;
border: 1px solid #ead7ad !important;
Línea 132: Línea 226:
color: #5b2500 !important;
color: #5b2500 !important;
font-weight: 700 !important;
font-weight: 700 !important;
padding: 7px 8px !important;
}
}


body.skin-vector #searchButton,
/* Botones buscador */
body.skin-vector #mw-searchButton,
#searchButton,
#searchButton,
#mw-searchButton {
#mw-searchButton,
.vector-search-box-button {
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 143: Línea 238:
border-radius: 10px !important;
border-radius: 10px !important;
font-weight: 900 !important;
font-weight: 900 !important;
padding: 6px 10px !important;
}
/* Ocultar caja derecha de herramientas para admin/editor */
#p-tb,
#p-cactions,
#p-lang,
#p-print,
.vector-page-tools-landmark,
.vector-column-end,
.mw-body .vector-page-tools {
display: none !important;
}
/* Contenido más amplio cuando se oculta la columna derecha */
.vector-column-start,
.mw-body {
max-width: none !important;
}
}


/* Scroll bonito */
/* Responsive */
body.skin-vector #mw-panel,
@media screen and (max-width: 900px) {
#mw-panel {
#mw-panel,
scrollbar-width: thin;
#mw-navigation,
scrollbar-color: #c43b22 #fff1c4;
.mw-sidebar,
.vector-main-menu,
.vector-main-menu-landmark {
width: auto !important;
padding: 10px 8px !important;
}
}


body.skin-vector #mw-panel::-webkit-scrollbar,
```
#mw-panel::-webkit-scrollbar {
#content,
width: 8px;
.mw-body,
#footer {
margin-left: 0 !important;
}
}


body.skin-vector #mw-panel::-webkit-scrollbar-track,
#p-logo,
#mw-panel::-webkit-scrollbar-track {
.mw-logo {
background: #fff1c4;
width: auto !important;
}
}
```


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

Revisión del 19:07 14 jun 2026

/* ==========================================================
TENARIUS RO - SIDEBAR DEFINITIVO
Funciona para visitante, usuario, editor y administrador
Pegar en: MediaWiki:Common.css
========================================================== */

/* Ocultar navegación superior que estorba */
#left-navigation,
#right-navigation,
#p-namespaces,
#p-views,
#p-cactions,
#p-personal,
.vector-page-tabs,
.vector-page-tools,
.vector-page-toolbar,
.vector-user-links,
.vector-user-menu,
.vector-page-tools-landmark {
display: none !important;
}

/* Quitar espacio superior de tabs */
#mw-head-base {
height: 0 !important;
margin-top: 0 !important;
}

/* Fondo general de la columna izquierda */
#mw-panel,
#mw-navigation,
.mw-sidebar,
.vector-main-menu,
.vector-main-menu-landmark {
width: 245px !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;
padding: 14px 14px 24px 14px !important;
box-sizing: border-box !important;
}

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

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

/* Logo como tarjeta */
#p-logo,
.mw-logo {
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;
margin: 8px auto 18px auto !important;
padding: 8px !important;
width: 190px !important;
box-sizing: border-box !important;
}

/* Bloques del menú: versión amplia para cualquier skin */
#mw-panel .portal,
#mw-panel .mw-portlet,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal,
#mw-panel nav,
.vector-main-menu .portal,
.vector-main-menu .mw-portlet,
.vector-main-menu .vector-menu,
.vector-main-menu nav {
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 22px rgba(100,70,20,.14) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}

/* Títulos de secciones */
#mw-panel .portal h3,
#mw-panel .mw-portlet h3,
#mw-panel .vector-menu-heading,
#mw-panel .vector-pinnable-header-label,
#mw-panel nav h3,
.vector-main-menu .portal h3,
.vector-main-menu .mw-portlet h3,
.vector-main-menu .vector-menu-heading,
.vector-main-menu nav h3 {
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íneas viejas de títulos */
#mw-panel h3:after,
#mw-panel .vector-menu-heading:after,
.vector-main-menu h3:after,
.vector-main-menu .vector-menu-heading:after {
display: none !important;
}

/* Cuerpo de secciones */
#mw-panel .body,
#mw-panel .vector-menu-content,
#mw-panel .mw-portlet-body,
.vector-main-menu .body,
.vector-main-menu .vector-menu-content,
.vector-main-menu .mw-portlet-body {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}

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

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

/* Botones del sidebar: selector fuerte para admin/editor/visitante */
#mw-panel li a,
#mw-panel .body li a,
#mw-panel .mw-portlet-body li a,
#mw-panel .vector-menu-content-list li a,
.vector-main-menu li a,
.vector-main-menu .body li a,
.vector-main-menu .mw-portlet-body li a,
.vector-main-menu .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 li a:hover,
#mw-panel .body li a:hover,
#mw-panel .mw-portlet-body li a:hover,
#mw-panel .vector-menu-content-list li a:hover,
.vector-main-menu li a:hover,
.vector-main-menu .body li a:hover,
.vector-main-menu .mw-portlet-body li a:hover,
.vector-main-menu .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;
}

/* Link activo */
#mw-panel li.selected a,
#mw-panel li a:active,
.vector-main-menu li.selected a,
.vector-main-menu 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 li a:visited,
.vector-main-menu 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;
}

/* Input buscador */
#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;
}

/* Botones buscador */
#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;
}

/* Ocultar caja derecha de herramientas para admin/editor */
#p-tb,
#p-cactions,
#p-lang,
#p-print,
.vector-page-tools-landmark,
.vector-column-end,
.mw-body .vector-page-tools {
display: none !important;
}

/* Contenido más amplio cuando se oculta la columna derecha */
.vector-column-start,
.mw-body {
max-width: none !important;
}

/* Responsive */
@media screen and (max-width: 900px) {
#mw-panel,
#mw-navigation,
.mw-sidebar,
.vector-main-menu,
.vector-main-menu-landmark {
width: auto !important;
padding: 10px 8px !important;
}

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

#p-logo,
.mw-logo {
	width: auto !important;
}
```

}