Diferencia entre revisiones de «MediaWiki:Vector.css»
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 | TENARIUS RO - SIDEBAR CON BOTONES | ||
Pegar en: MediaWiki:Vector.css | |||
========================================================== */ | ========================================================== */ | ||
/* 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 # | border-right: 1px solid #e0b94f !important; | ||
box-shadow: 8px 0 24px rgba(100,70,20,. | box-shadow: 8px 0 24px rgba(100,70,20,.16) !important; | ||
padding | padding: 14px 10px 18px 10px !important; | ||
} | } | ||
/* 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 | margin: 8px auto 18px auto !important; | ||
box-shadow: 0 8px | box-shadow: 0 8px 20px rgba(100,70,20,.14) !important; | ||
overflow: hidden !important; | overflow: hidden !important; | ||
} | } | ||
/* Cada | /* Cada sección del sidebar */ | ||
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: | margin: 0 0 16px 0 !important; | ||
padding: 10px !important; | padding: 10px !important; | ||
box-shadow: 0 8px | box-shadow: 0 8px 20px rgba(100,70,20,.14) !important; | ||
overflow: hidden !important; | overflow: hidden !important; | ||
} | } | ||
/* | /* Títulos de cada sección */ | ||
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; | ||
box-shadow: 0 4px 10px rgba(89,59,5,.20) !important; | |||
box-shadow: 0 4px 10px rgba(89,59,5,. | |||
} | } | ||
/* Quitar | /* Quitar línea vieja debajo de títulos */ | ||
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 */ | ||
div#mw-panel div.portal div.body { | |||
background: transparent !important; | |||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
/* Listas */ | /* Listas */ | ||
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: | ||
} | } | ||
/* | /* Espaciado de cada item */ | ||
div#mw-panel div.portal div.body ul li { | |||
#mw-panel .portal .body li { | margin: 5px 0 !important; | ||
margin: | |||
padding: 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 { | |||
#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; | ||
border: 1px solid #ead7ad !important; | |||
border: 1px solid | border-radius: 12px !important; | ||
border-radius: | |||
padding: 8px 10px !important; | padding: 8px 10px !important; | ||
font-size: 13px !important; | font-size: 13px !important; | ||
font-weight: 700 !important; | font-weight: 700 !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 */ | ||
div#mw-panel div.portal div.body ul li a:hover { | |||
# | background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important; | ||
color: #8b1e12 !important; | color: #8b1e12 !important; | ||
border-color: #d99b00 !important; | |||
border-color: # | box-shadow: 0 5px 12px rgba(100,70,20,.18) !important; | ||
box-shadow: 0 | |||
transform: translateX(4px) !important; | transform: translateX(4px) !important; | ||
} | } | ||
/* Link | /* Link activo */ | ||
div#mw-panel div.portal div.body ul li.selected a, | |||
#mw-panel .portal .body li | div#mw-panel div.portal div.body ul li a:active { | ||
background: linear-gradient(135deg, # | background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important; | ||
color: # | color: #ffffff !important; | ||
border-color: # | border-color: #8b1e12 !important; | ||
font-weight: 900 !important; | font-weight: 900 !important; | ||
} | } | ||
/* | /* Mejorar enlaces visitados */ | ||
body | 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: | margin: 0 0 16px 0 !important; | ||
padding: 10px !important; | padding: 10px !important; | ||
box-shadow: 0 8px | 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 { | #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; | |||
} | } | ||
/* Botones de búsqueda */ | |||
#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 | /* Scroll personalizado */ | ||
div#mw-panel { | |||
#mw-panel { | |||
scrollbar-width: thin; | scrollbar-width: thin; | ||
scrollbar-color: #c43b22 #fff1c4; | scrollbar-color: #c43b22 #fff1c4; | ||
} | } | ||
div#mw-panel::-webkit-scrollbar { | |||
#mw-panel::-webkit-scrollbar { | |||
width: 8px; | width: 8px; | ||
} | } | ||
div#mw-panel::-webkit-scrollbar-track { | |||
#mw-panel::-webkit-scrollbar-track { | |||
background: #fff1c4; | background: #fff1c4; | ||
} | } | ||
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;
}
```
}