Diferencia entre revisiones de «MediaWiki:Common.css»
Ir a la navegación
Ir a la búsqueda
Sin resumen de edición |
Sin resumen de edición |
||
(No se muestran 22 ediciones intermedias del mismo usuario) | |||
Línea 1: | Línea 1: | ||
/* | /* === Tipografía y fondo general === */ | ||
body { | body { | ||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
Línea 6: | Línea 6: | ||
} | } | ||
/* Contenido principal */ | /* === Contenido principal === */ | ||
#content { | #content { | ||
background-color: #fff; | background-color: #fff; | ||
Línea 16: | Línea 16: | ||
} | } | ||
/* | /* === Título de página === */ | ||
.firstHeading { | .firstHeading { | ||
font-size: 2rem; | font-size: 2.2rem; | ||
font-weight: bold; | font-weight: bold; | ||
color: #2b4a6d; | color: #2b4a6d; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
} | } | ||
/* Tabla de contenido */ | /* === Tabla de contenido === */ | ||
#toc { | #toc { | ||
background-color: #eef4ff; | background-color: #eef4ff; | ||
Línea 33: | Línea 32: | ||
} | } | ||
/* Enlaces */ | /* === Enlaces === */ | ||
a { | a { | ||
color: #1e70bf; | color: #1e70bf; | ||
Línea 42: | Línea 41: | ||
} | } | ||
/* | /* === Encabezados jerárquicos mejorados y sin subrayado === */ | ||
h1, h2, h3, h4, h5, h6 { | |||
font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; | |||
font-weight: 700; | |||
text-align: center; | |||
color: #2b4a6d; | |||
margin-top: 40px; | |||
margin-bottom: 30px; /* más espacio debajo */ | |||
line-height: 1.3; | |||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08); | |||
border-bottom: none; /* elimina subrayado si existiera */ | |||
background: none !important; /* previene fondos heredados */ | |||
} | } | ||
/* Tamaños progresivos de mayor a menor */ | |||
font- | h1 { | ||
font-size: 2.8rem; | |||
} | } | ||
h2 { | |||
font-size: 2.5rem; | |||
} | } | ||
h3 { | |||
font-size: 2.3rem; | |||
} | } | ||
h4 { | |||
font-size: 1.6rem; | |||
} | } | ||
h5 { | |||
font-size: 1.3rem; | |||
} | } | ||
h6 { | |||
font-size: 1.1rem; | |||
color: #444; | |||
} | } | ||
/* | /* === Botones con íconos === */ | ||
.button-icon { | .button-icon { | ||
display: inline-flex; | display: inline-flex; | ||
Línea 107: | Línea 93: | ||
background: #1e324f; | background: #1e324f; | ||
} | } | ||
.button-icon::before { | .button-icon::before { | ||
content: '🔹'; | content: '🔹'; | ||
} | } | ||
/* Cajas | /* === Cajas informativas === */ | ||
.box-info { | .box-info { | ||
background: #eef4ff; | background: #eef4ff; | ||
Línea 121: | Línea 105: | ||
margin: 20px 0; | margin: 20px 0; | ||
} | } | ||
.box-warning { | .box-warning { | ||
background: #fff4e5; | background: #fff4e5; | ||
Línea 129: | Línea 112: | ||
margin: 20px 0; | margin: 20px 0; | ||
} | } | ||
.box-tip { | .box-tip { | ||
background: #eaffea; | background: #eaffea; | ||
Línea 138: | Línea 120: | ||
} | } | ||
/* Listas | /* === Listas === */ | ||
ul, ol { | ul, ol { | ||
padding-left: 40px; | padding-left: 40px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
} | } | ||
.mw-body a { | .mw-body a { | ||
color: #1e70bf; | color: #1e70bf; | ||
Línea 150: | Línea 130: | ||
} | } | ||
/* === Navbar horizontal === */ | |||
.oroza-navbar { | .oroza-navbar { | ||
background: #2b3e50; | background: #2b3e50; | ||
padding: | padding: 15px 25px; | ||
display: flex; | display: flex; | ||
gap: 30px; | gap: 30px; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | |||
font-weight: bold; | font-weight: bold; | ||
border-bottom: 3px solid #ffb400; | border-bottom: 3px solid #ffb400; | ||
border-radius: 12px; | |||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |||
margin: 20px auto; | |||
max-width: 1200px; | |||
position: relative; | |||
} | } | ||
.oroza-navbar a { | .oroza-navbar a { | ||
color: white !important; | color: white !important; | ||
Línea 169: | Línea 157: | ||
} | } | ||
.oroza-navbar-logo { | |||
position: absolute; | |||
left: 25px; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.oroza-navbar-logo img { | |||
width: 80px; | |||
height: auto; | |||
filter: drop-shadow(0 0 5px white); | |||
} | |||
/* === Sidebar lateral personalizada === */ | |||
.oroza-sidebar { | .oroza-sidebar { | ||
background: #ffffff; | background: #ffffff; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
padding: 20px; | padding: 15px 20px; | ||
border-radius: 10px; | border-radius: 10px; | ||
width: | width: 240px; | ||
font-size: 14px; | font-size: 14px; | ||
box-shadow: 0 0 8px rgba(0,0,0,0.05); | box-shadow: 0 0 8px rgba(0,0,0,0.05); | ||
Línea 180: | Línea 182: | ||
} | } | ||
/* Menu title más grande y con más espaciado entre títulos */ | |||
.oroza-sidebar .menu-title { | .oroza-sidebar .menu-title { | ||
font-weight: bold; | font-weight: bold; | ||
color: #2b4a6d; | color: #2b4a6d; | ||
margin- | font-size: 17px; /* Aumentado */ | ||
margin: 20px 0 12px; /* Espacio arriba y abajo */ | |||
border-left: 4px solid #ffb400; | |||
padding-left: 10px; | |||
} | |||
/* Lista de items */ | |||
.oroza-sidebar ul { | |||
list-style: none; | |||
padding-left: 0; | |||
margin: 0; | |||
} | |||
.oroza-sidebar li { | |||
margin: 6px 0; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
} | |||
.oroza-sidebar li::before { | |||
display: inline-block; | |||
margin-right: 3px; | |||
} | |||
/* === Tablas personalizadas (oroza-table) === */ | |||
.oroza-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
margin: 20px 0; | |||
font-size: 14px; | |||
background-color: #fff; | |||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); | |||
border-radius: 8px; | |||
overflow: hidden; | |||
} | |||
.oroza-table thead { | |||
background-color: #2b4a6d; | |||
color: #fff; | |||
text-align: left; | |||
font-weight: bold; | |||
} | |||
.oroza-table th, | |||
.oroza-table td { | |||
padding: 12px 15px; | |||
border-bottom: 1px solid #eee; | |||
} | |||
.oroza-table tbody tr:nth-child(even) { | |||
background-color: #f9f9f9; | |||
} | |||
.oroza-table tbody tr:hover { | |||
background-color: #eef4ff; | |||
} | |||
.oroza-table .highlight { | |||
color: #ffb400; | |||
font-weight: bold; | |||
} | |||
.oroza-table .center-icon { | |||
text-align: center; | |||
font-size: 18px; | |||
} | |||
.oroza-table .zeny { | |||
color: #28a745; | |||
font-weight: bold; | |||
} | |||
/* === Responsive === */ | |||
@media screen and (max-width: 768px) { | |||
.oroza-flex-wrapper { | |||
flex-direction: column; | |||
gap: 20px; | |||
} | |||
.oroza-flex-wrapper > div { | |||
width: 100% !important; | |||
} | |||
.oroza-sidebar { | |||
width: 100% !important; | |||
margin-bottom: 20px; | |||
display: block !important; | |||
} | |||
.oroza-navbar { | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.oroza-navbar a { | |||
display: block; | |||
padding: 10px 0; | |||
} | |||
.toggle-label { | |||
display: none !important; | |||
} | |||
} | |||
/* === Eliminar menú original de MediaWiki === */ | |||
#p-logo, | |||
#footer, | |||
#mw-panel { | |||
display: none !important; | |||
} | |||
/* === Quitar funcionalidad del menú colapsable móvil === */ | |||
.toggle-checkbox { | |||
display: none; | |||
} | |||
.toggle-label { | |||
display: none !important; | |||
} | |||
.oroza-table.auto-width { | |||
width: auto !important; | |||
max-width: 100%; | |||
table-layout: auto !important; | |||
margin: 20px auto; | |||
display: table; | |||
} | |||
.zoom-img { | |||
transition: transform 0.25s ease; | |||
cursor: zoom-in; | |||
} | |||
.zoom-img:hover { | |||
transform: scale(2); | |||
z-index: 10; | |||
} |
Revisión actual - 20:11 2 jun 2025
/* === Tipografía y fondo general === */ body { background-color: #f2f2f2; font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; color: #333; } /* === Contenido principal === */ #content { background-color: #fff; padding: 30px; margin: 20px auto; border-radius: 12px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 1200px; } /* === Título de página === */ .firstHeading { font-size: 2.2rem; font-weight: bold; color: #2b4a6d; margin-bottom: 20px; } /* === Tabla de contenido === */ #toc { background-color: #eef4ff; border: 1px solid #cddaf1; padding: 10px; border-radius: 8px; } /* === Enlaces === */ a { color: #1e70bf; text-decoration: none; } a:hover { text-decoration: underline; } /* === Encabezados jerárquicos mejorados y sin subrayado === */ h1, h2, h3, h4, h5, h6 { font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; font-weight: 700; text-align: center; color: #2b4a6d; margin-top: 40px; margin-bottom: 30px; /* más espacio debajo */ line-height: 1.3; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08); border-bottom: none; /* elimina subrayado si existiera */ background: none !important; /* previene fondos heredados */ } /* Tamaños progresivos de mayor a menor */ h1 { font-size: 2.8rem; } h2 { font-size: 2.5rem; } h3 { font-size: 2.3rem; } h4 { font-size: 1.6rem; } h5 { font-size: 1.3rem; } h6 { font-size: 1.1rem; color: #444; } /* === Botones con íconos === */ .button-icon { display: inline-flex; align-items: center; gap: 8px; background: #2b4a6d; color: white; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.2s ease; } .button-icon:hover { background: #1e324f; } .button-icon::before { content: '🔹'; } /* === Cajas informativas === */ .box-info { background: #eef4ff; border-left: 5px solid #1e70bf; padding: 15px; border-radius: 8px; margin: 20px 0; } .box-warning { background: #fff4e5; border-left: 5px solid #ffa500; padding: 15px; border-radius: 8px; margin: 20px 0; } .box-tip { background: #eaffea; border-left: 5px solid #28a745; padding: 15px; border-radius: 8px; margin: 20px 0; } /* === Listas === */ ul, ol { padding-left: 40px; margin-bottom: 20px; } .mw-body a { color: #1e70bf; font-weight: 500; } /* === Navbar horizontal === */ .oroza-navbar { background: #2b3e50; padding: 15px 25px; display: flex; gap: 30px; justify-content: center; align-items: center; font-weight: bold; border-bottom: 3px solid #ffb400; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin: 20px auto; max-width: 1200px; position: relative; } .oroza-navbar a { color: white !important; text-decoration: none; font-size: 16px; } .oroza-navbar a:hover { text-decoration: underline; color: #ffcc33 !important; } .oroza-navbar-logo { position: absolute; left: 25px; display: flex; align-items: center; } .oroza-navbar-logo img { width: 80px; height: auto; filter: drop-shadow(0 0 5px white); } /* === Sidebar lateral personalizada === */ .oroza-sidebar { background: #ffffff; border: 1px solid #ddd; padding: 15px 20px; border-radius: 10px; width: 240px; font-size: 14px; box-shadow: 0 0 8px rgba(0,0,0,0.05); margin-bottom: 20px; } /* Menu title más grande y con más espaciado entre títulos */ .oroza-sidebar .menu-title { font-weight: bold; color: #2b4a6d; font-size: 17px; /* Aumentado */ margin: 20px 0 12px; /* Espacio arriba y abajo */ border-left: 4px solid #ffb400; padding-left: 10px; } /* Lista de items */ .oroza-sidebar ul { list-style: none; padding-left: 0; margin: 0; } .oroza-sidebar li { margin: 6px 0; display: flex; align-items: center; gap: 8px; } .oroza-sidebar li::before { display: inline-block; margin-right: 3px; } /* === Tablas personalizadas (oroza-table) === */ .oroza-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); border-radius: 8px; overflow: hidden; } .oroza-table thead { background-color: #2b4a6d; color: #fff; text-align: left; font-weight: bold; } .oroza-table th, .oroza-table td { padding: 12px 15px; border-bottom: 1px solid #eee; } .oroza-table tbody tr:nth-child(even) { background-color: #f9f9f9; } .oroza-table tbody tr:hover { background-color: #eef4ff; } .oroza-table .highlight { color: #ffb400; font-weight: bold; } .oroza-table .center-icon { text-align: center; font-size: 18px; } .oroza-table .zeny { color: #28a745; font-weight: bold; } /* === Responsive === */ @media screen and (max-width: 768px) { .oroza-flex-wrapper { flex-direction: column; gap: 20px; } .oroza-flex-wrapper > div { width: 100% !important; } .oroza-sidebar { width: 100% !important; margin-bottom: 20px; display: block !important; } .oroza-navbar { flex-direction: column; align-items: center; } .oroza-navbar a { display: block; padding: 10px 0; } .toggle-label { display: none !important; } } /* === Eliminar menú original de MediaWiki === */ #p-logo, #footer, #mw-panel { display: none !important; } /* === Quitar funcionalidad del menú colapsable móvil === */ .toggle-checkbox { display: none; } .toggle-label { display: none !important; } .oroza-table.auto-width { width: auto !important; max-width: 100%; table-layout: auto !important; margin: 20px auto; display: table; } .zoom-img { transition: transform 0.25s ease; cursor: zoom-in; } .zoom-img:hover { transform: scale(2); z-index: 10; }