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
Etiqueta: Revertido
Sin resumen de edición
Etiqueta: Revertido
Línea 1: Línea 1:
/* ==========================================================
/* ==========================================================
  TENARIUS RO - SIDEBAR ELEGANTE
TENARIUS RO - SIDEBAR ELEGANTE
  Estilo cálido dorado/rojo inspirado en la portada principal
Compatible con Vector clásico / Legacy
  Compatible con Vector legacy y Vector 2022
========================================================== */
  ========================================================== */


/* Fondo general del panel lateral */
body.skin-vector #mw-panel,
#mw-panel,
#mw-panel {
.vector-main-menu,
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 50%, #ffe7a8 100%) !important;
.vector-main-menu-landmark {
border-right: 1px solid #ead7ad !important;
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 52%, #ffe7a8 100%) !important;
box-shadow: 8px 0 24px rgba(100,70,20,.12) !important;
border-right: 1px solid #ead7ad !important;
padding-top: 12px !important;
box-shadow: 8px 0 24px rgba(100,70,20,.08);
}
}


/* Contenedor de cada bloque del sidebar */
body.skin-vector #p-logo,
#mw-panel .portal,
#p-logo {
#mw-panel .vector-menu-portal,
background: #ffffff !important;
.vector-main-menu .vector-menu,
border: 1px solid #ead7ad !important;
.vector-main-menu .vector-main-menu-action,
border-radius: 18px !important;
.vector-main-menu .vector-pinnable-element {
margin: 8px 12px 18px 12px !important;
background: #ffffff;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
border: 1px solid #ead7ad;
overflow: hidden !important;
border-radius: 16px;
margin: 10px 10px 14px 10px;
padding: 8px 10px 10px 10px;
box-shadow: 0 6px 18px rgba(100,70,20,.10);
overflow: hidden;
}
}


/* Títulos de secciones */
/* Cada bloque del sidebar */
#mw-panel .portal h3,
body.skin-vector #mw-panel .portal,
#mw-panel .vector-menu-heading,
#mw-panel .portal {
.vector-main-menu .vector-menu-heading,
background: #ffffff !important;
.vector-main-menu .vector-pinnable-header-label {
border: 1px solid #ead7ad !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 62%, #f0a500 100%);
border-radius: 18px !important;
color: #ffffff !important;
margin: 10px 10px 16px 10px !important;
border-radius: 12px;
padding: 10px !important;
padding: 8px 10px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
margin: 0 0 8px 0 !important;
overflow: hidden !important;
font-size: 13px !important;
font-weight: 900 !important;
letter-spacing: .3px;
text-transform: none !important;
border: 1px solid rgba(255,255,255,.35);
box-shadow: 0 4px 10px rgba(89,59,5,.16);
}
}


/* Quitar decoraciones viejas de Vector */
/* Título de cada sección */
#mw-panel .portal h3::after,
body.skin-vector #mw-panel .portal h3,
#mw-panel .vector-menu-heading::after {
#mw-panel .portal h3 {
display: none !important;
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;
letter-spacing: .3px !important;
text-transform: none !important;
border: 1px solid rgba(255,255,255,.35) !important;
box-shadow: 0 4px 10px rgba(89,59,5,.18) !important;
}
}


/* Listas */
/* Quitar líneas viejas */
#mw-panel .portal .body,
body.skin-vector #mw-panel .portal h3:after,
#mw-panel .vector-menu-content,
#mw-panel .portal h3:after {
.vector-main-menu .vector-menu-content {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
}


#mw-panel .portal ul,
/* Cuerpo de cada sección */
#mw-panel .vector-menu-content-list,
body.skin-vector #mw-panel .portal .body,
.vector-main-menu .vector-menu-content-list {
#mw-panel .portal .body {
margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
}
}


/* Elementos del menú */
/* Listas */
#mw-panel .portal li,
body.skin-vector #mw-panel .portal .body ul,
#mw-panel .vector-menu-content-list li,
#mw-panel .portal .body ul {
.vector-main-menu .vector-menu-content-list li {
list-style: none !important;
margin: 3px 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
}
}


/* Links normales */
/* Items */
#mw-panel .portal a,
body.skin-vector #mw-panel .portal .body li,
#mw-panel .vector-menu-content-list a,
#mw-panel .portal .body li {
.vector-main-menu .vector-menu-content-list a {
margin: 4px 0 !important;
display: block;
padding: 0 !important;
color: #5b2500 !important;
background: #fffaf0;
border: 1px solid transparent;
border-radius: 10px;
padding: 7px 9px;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
line-height: 1.35;
transition: all .18s ease;
}
}


/* Hover elegante */
/* Links */
#mw-panel .portal a:hover,
body.skin-vector #mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list a:hover,
#mw-panel .portal .body li a {
.vector-main-menu .vector-menu-content-list a:hover {
display: block !important;
color: #8b1e12 !important;
color: #5b2500 !important;
background: #fff1c4;
background: #fffaf0 !important;
border-color: #e0b94f;
border: 1px solid transparent !important;
box-shadow: 0 4px 10px rgba(100,70,20,.12);
border-radius: 11px !important;
transform: translateX(3px);
padding: 8px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-decoration: none !important;
transition: all .18s ease !important;
}
}


/* Link activo o seleccionado */
/* Hover */
#mw-panel .portal li.selected a,
body.skin-vector #mw-panel .portal .body li a:hover,
#mw-panel .vector-menu-content-list li.selected a,
#mw-panel .portal .body li a:hover {
.vector-main-menu .vector-menu-content-list li.selected a {
color: #8b1e12 !important;
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%);
background: #fff1c4 !important;
color: #4b2500 !important;
border-color: #e0b94f !important;
border-color: #d99b00;
box-shadow: 0 4px 12px rgba(100,70,20,.14) !important;
font-weight: 900;
transform: translateX(4px) !important;
}
}


/* Bloque de búsqueda */
/* Link seleccionado */
#p-search,
body.skin-vector #mw-panel .portal .body li.selected a,
.vector-typeahead-search {
#mw-panel .portal .body li.selected a {
background: #ffffff !important;
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important;
border: 1px solid #ead7ad !important;
color: #4b2500 !important;
border-radius: 16px !important;
border-color: #d99b00 !important;
box-shadow: 0 6px 18px rgba(100,70,20,.10);
font-weight: 900 !important;
}
}


/* Input de búsqueda */
/* Buscador */
#searchInput,
body.skin-vector #p-search,
.vector-search-box-input {
#p-search {
background: #fffaf0 !important;
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border: 1px solid #ead7ad !important;
border-radius: 10px !important;
border-radius: 18px !important;
color: #5b2500 !important;
margin: 10px 10px 16px 10px !important;
font-weight: 700;
padding: 10px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
}
}


/* Botón de búsqueda */
body.skin-vector #searchInput,
#searchButton,
#searchInput {
#mw-searchButton,
background: #fffaf0 !important;
.vector-search-box-button {
border: 1px solid #ead7ad !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
border-radius: 10px !important;
color: #ffffff !important;
color: #5b2500 !important;
border: 1px solid #8b1e12 !important;
font-weight: 700 !important;
border-radius: 10px !important;
font-weight: 900;
}
}


/* Logo / zona superior */
body.skin-vector #searchButton,
#p-logo,
body.skin-vector #mw-searchButton,
.mw-logo {
#searchButton,
margin-bottom: 12px !important;
#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;
}
}


/* Ajuste para que no se vea apretado */
/* Scroll bonito */
body.skin-vector #mw-panel,
#mw-panel {
#mw-panel {
padding-top: 12px !important;
scrollbar-width: thin;
}
scrollbar-color: #c43b22 #fff1c4;
 
/* Scroll del menú cuando el contenido sea muy largo */
#mw-panel,
.vector-main-menu {
scrollbar-width: thin;
scrollbar-color: #c43b22 #fff1c4;
}
}


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


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


#mw-panel::-webkit-scrollbar-thumb,
body.skin-vector #mw-panel::-webkit-scrollbar-thumb,
.vector-main-menu::-webkit-scrollbar-thumb {
#mw-panel::-webkit-scrollbar-thumb {
background: #c43b22;
background: #c43b22;
border-radius: 999px;
border-radius: 999px;
}
 
/* Versión móvil / pantallas pequeñas */
@media screen and (max-width: 900px) {
#mw-panel .portal,
#mw-panel .vector-menu-portal,
.vector-main-menu .vector-menu {
margin: 8px 6px 12px 6px;
border-radius: 14px;
}
 
#mw-panel .portal a,
#mw-panel .vector-menu-content-list a,
.vector-main-menu .vector-menu-content-list a {
font-size: 13px;
padding: 8px 10px;
}
}
}

Revisión del 18:48 14 jun 2026

/* ==========================================================
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 #p-logo,
#p-logo {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
margin: 8px 12px 18px 12px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
overflow: hidden !important;
}

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

/* Título de cada sección */
body.skin-vector #mw-panel .portal h3,
#mw-panel .portal 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;
letter-spacing: .3px !important;
text-transform: none !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 */
body.skin-vector #mw-panel .portal h3:after,
#mw-panel .portal h3:after {
display: none !important;
}

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

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

/* Items */
body.skin-vector #mw-panel .portal .body li,
#mw-panel .portal .body li {
margin: 4px 0 !important;
padding: 0 !important;
}

/* Links */
body.skin-vector #mw-panel .portal .body li a,
#mw-panel .portal .body li a {
display: block !important;
color: #5b2500 !important;
background: #fffaf0 !important;
border: 1px solid transparent !important;
border-radius: 11px !important;
padding: 8px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-decoration: none !important;
transition: all .18s ease !important;
}

/* Hover */
body.skin-vector #mw-panel .portal .body li a:hover,
#mw-panel .portal .body li a:hover {
color: #8b1e12 !important;
background: #fff1c4 !important;
border-color: #e0b94f !important;
box-shadow: 0 4px 12px rgba(100,70,20,.14) !important;
transform: translateX(4px) !important;
}

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

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

body.skin-vector #searchInput,
#searchInput {
background: #fffaf0 !important;
border: 1px solid #ead7ad !important;
border-radius: 10px !important;
color: #5b2500 !important;
font-weight: 700 !important;
}

body.skin-vector #searchButton,
body.skin-vector #mw-searchButton,
#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;
}

/* Scroll bonito */
body.skin-vector #mw-panel,
#mw-panel {
scrollbar-width: thin;
scrollbar-color: #c43b22 #fff1c4;
}

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

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

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