Diferencia entre revisiones de «MediaWiki:Vector.css»
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 | TENARIUS RO - SIDEBAR ELEGANTE DEFINITIVO | ||
Pegar en: MediaWiki:Vector.css | Pegar en: MediaWiki:Vector.css | ||
No pegar comillas invertidas ni etiquetas style. | |||
========================================================== */ | ========================================================== */ | ||
/* | /* ========================= | ||
# | OCULTAR TABS SUPERIORES | ||
. | ========================= */ | ||
.vector- | |||
.vector- | #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; | ||
} | } | ||
/* | /* Separar contenido principal del sidebar */ | ||
# | #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; | ||
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 .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 { | ||
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 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; | |||
} | } | ||
/* | /* 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 | #mw-panel .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 | /* Quitar línea antigua de Vector */ | ||
#mw-panel .portal h3:after, | #mw-panel .portal h3:after, | ||
#mw-panel | #mw-panel .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 | #mw-panel .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 | #mw-panel .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 | #mw-panel .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Ú | |||
========================= */ | |||
#mw-panel .portal li a, | #mw-panel .portal li a, | ||
#mw-panel .portal .body li a, | #mw-panel .portal .body li a, | ||
#mw-panel | #mw-panel .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: | 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 | /* 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 | #mw-panel .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 | /* 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, | ||
#mw-panel .portal li a:active, | |||
#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 | #mw-panel .vector-menu-content-list li a:visited { | ||
color: #5b2500 !important; | color: #5b2500 !important; | ||
} | } | ||
/* | /* ========================= | ||
BUSCADOR | |||
========================= */ | |||
#p-search, | #p-search, | ||
.vector-search-box { | .vector-search-box { | ||
| Línea 170: | Línea 215: | ||
} | } | ||
#searchInput, | #searchInput, | ||
.vector-search-box-input { | .vector-search-box-input { | ||
| Línea 181: | Línea 225: | ||
} | } | ||
#searchButton, | #searchButton, | ||
#mw-searchButton, | #mw-searchButton, | ||
| Línea 193: | Línea 236: | ||
} | } | ||
/* | /* ========================= | ||
#mw-panel | SCROLL DEL SIDEBAR | ||
========================= */ | |||
#mw-panel { | |||
scrollbar-width: thin; | scrollbar-width: thin; | ||
scrollbar-color: #c43b22 #fff1c4; | scrollbar-color: #c43b22 #fff1c4; | ||
} | } | ||
#mw-panel | #mw-panel::-webkit-scrollbar { | ||
width: 8px; | width: 8px; | ||
} | } | ||
#mw-panel | #mw-panel::-webkit-scrollbar-track { | ||
background: #fff1c4; | background: #fff1c4; | ||
} | } | ||
#mw-panel | #mw-panel::-webkit-scrollbar-thumb { | ||
background: #c43b22; | background: #c43b22; | ||
border-radius: 999px; | border-radius: 999px; | ||
} | } | ||
/* | /* ========================= | ||
RESPONSIVE | |||
========================= */ | |||
@media screen and (max-width: 900px) { | @media screen and (max-width: 900px) { | ||
#mw-panel | #mw-panel { | ||
width: auto !important; | |||
padding: 10px 8px !important; | |||
} | } | ||
``` | ``` | ||
#p-logo { | #p-logo { | ||
width: | width: 170px !important; | ||
height: 135px !important; | |||
} | } | ||
#content, | #content, | ||
.mw-body | .mw-body, | ||
#footer, | |||
#mw-head-base { | #mw-head-base { | ||
margin-left: 0 !important; | |||
margin-left: 0 | |||
} | } | ||
#mw-panel .portal, | #mw-panel .portal, | ||
#mw-panel .vector-menu, | #mw-panel .vector-menu, | ||
#mw-panel .vector-menu-portal | #mw-panel .vector-menu-portal { | ||
border-radius: 14px !important; | |||
margin-bottom: 12px !important; | |||
margin- | |||
} | } | ||
#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 { | ||
font-size: 13px !important; | |||
padding: 8px 10px !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;
}
```
}