MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (29 intermediate revisions by the same user not shown) | |||
| Line 12: | Line 12: | ||
} | } | ||
/* ============================================= | |||
SCRUM MANAGER BOK — ESTILOS PERSONALIZADOS | |||
============================================= */ | |||
.bok-hero { | |||
text-align: center; | |||
padding: 28px 20px; | |||
margin-bottom: 24px; | |||
} | |||
.bok-hero p { | |||
color: #54617f; | |||
font-size: 14px; | |||
line-height: 1.7; | |||
margin: 0 auto 14px; | |||
max-width: 560px; | |||
} | |||
.bok-hero-titulo { | |||
font-size: 22px !important; | |||
font-weight: 700 !important; | |||
color: #111 !important; | |||
margin-bottom: 14px !important; | |||
border: none !important; | |||
padding-bottom: 0 !important; | |||
} | |||
.bok-hero-etiqueta { | |||
font-size: 11px; | |||
letter-spacing: .08em; | |||
text-transform: uppercase; | |||
color: #3375d4; | |||
font-weight: 600; | |||
margin-bottom: 10px; | |||
} | |||
.bok-search-bar { | .bok-search-bar { | ||
border: 1px solid #3375d4; | |||
border: 1px solid # | |||
border-radius: 8px; | border-radius: 8px; | ||
padding: 10px 16px; | padding: 10px 16px; | ||
text-align: | max-width: 420px; | ||
margin: 0 auto 20px; | |||
text-align: center; | |||
background: #fff; | |||
box-shadow: 0 1px 4px rgba(51,117,212,0.10); | |||
} | } | ||
.bok-search-bar a { | .bok-search-bar a { | ||
color: # | color: #3375d4 !important; | ||
text-decoration: none !important; | |||
font-size: 14px; | |||
background-image: none !important; | |||
} | |||
.bok-hero-divider { | |||
border: none; | |||
border-top: 1px solid #e0e0e0; | |||
margin: 0 auto 12px; | |||
max-width: 480px; | |||
} | |||
.bok-stats { | |||
display: flex; | |||
justify-content: center; | |||
gap: 12px; | |||
flex-wrap: wrap; | |||
font-size: 12px; | |||
color: #77819a; | |||
margin-top: 0; | |||
} | |||
.bok-stats strong { | |||
color: #54617f; | |||
font-weight: 600; | |||
} | |||
.bok-stats a { | |||
color: #3375d4 !important; | |||
background-image: none !important; | |||
} | |||
.bok-section-label { | |||
font-size: 10px; | |||
letter-spacing: .07em; | |||
text-transform: uppercase; | |||
color: #8c9ab5; | |||
font-weight: 600; | |||
margin-bottom: 12px; | |||
display: block; | |||
} | |||
.bok-cat-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 10px; | |||
margin: 4px 0 24px; | |||
} | |||
.bok-cat-card { | |||
background: #fff; | |||
border: 1px solid #d0d8e8; | |||
border-radius: 8px; | |||
padding: 14px 12px; | |||
} | |||
.bok-cat-card:hover { | |||
border-color: #3375d4; | |||
} | |||
.bok-cat-card a { | |||
color: #3375d4 !important; | |||
font-weight: 500; | |||
text-decoration: none !important; | |||
font-size: 13px; | |||
display: block; | |||
margin-bottom: 3px; | |||
background-image: none !important; | |||
} | |||
.bok-cat-count { | |||
font-size: 11px; | |||
color: #8c9ab5; | |||
display: block; | |||
} | |||
.bok-manuals-grid { | |||
display: grid; | |||
grid-template-columns: repeat(2, 1fr); | |||
gap: 10px; | |||
margin: 4px 0 24px; | |||
} | |||
.bok-manual-card { | |||
display: flex; | |||
gap: 10px; | |||
border: 1px solid #d0d8e8; | |||
border-radius: 8px; | |||
padding: 12px; | |||
align-items: flex-start; | |||
} | |||
.bok-manual-card .info .titulo { | |||
font-size: 13px; | |||
font-weight: 500; | |||
color: #111; | |||
display: block; | |||
margin-bottom: 2px; | |||
} | |||
.bok-manual-card .info .sub { | |||
font-size: 11px; | |||
color: #77819a; | |||
display: block; | |||
margin-bottom: 6px; | |||
} | |||
.bok-manual-card .info a { | |||
font-size: 12px; | |||
color: #3375d4 !important; | |||
text-decoration: none !important; | |||
background-image: none !important; | |||
} | |||
.bok-updates { | |||
border: 1px solid #d0d8e8; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
margin: 4px 0 24px; | |||
} | |||
.bok-update-item { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 9px 14px; | |||
border-bottom: 1px solid #eef2f8; | |||
font-size: 13px; | |||
} | |||
.bok-update-item:last-child { | |||
border-bottom: none; | |||
} | |||
.bok-update-item a { | |||
color: #3375d4 !important; | |||
text-decoration: none !important; | |||
background-image: none !important; | |||
} | |||
.bok-update-meta { | |||
font-size: 11px; | |||
color: #8c9ab5; | |||
flex-shrink: 0; | |||
margin-left: 10px; | |||
} | |||
.bok-update-cat { | |||
font-size: 11px; | |||
color: #8c9ab5; | |||
display: block; | |||
margin-top: 1px; | |||
} | |||
/* --- Ecosistema / Banner CTA --- */ | |||
.bok-ecosistema { | |||
background: #e5effa; | |||
border: 1px solid #3375d4; | |||
border-radius: 10px; | |||
padding: 16px 20px; | |||
margin-bottom: 20px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
gap: 16px; | |||
flex-wrap: wrap; | |||
} | |||
.bok-ecosistema .titulo { | |||
font-size: 15px; | |||
font-weight: 500; | |||
color: #111; | |||
display: block; | |||
margin-bottom: 3px; | |||
} | |||
.bok-ecosistema .sub { | |||
font-size: 13px; | |||
color: #54617f; | |||
} | |||
.bok-ecosistema .botones { | |||
display: flex; | |||
gap: 8px; | |||
flex-shrink: 0; | |||
align-items: center; | |||
} | |||
.bok-btn-outline a, | |||
.bok-btn-outline a:visited, | |||
.bok-btn-outline a:hover { | |||
display: inline-block; | |||
background: transparent; | |||
color: #3375d4 !important; | |||
border: 1px solid #3375d4; | |||
padding: 7px 14px; | |||
border-radius: 6px; | |||
font-size: 13px; | |||
font-weight: 500; | |||
text-decoration: none !important; | text-decoration: none !important; | ||
background-image: none !important; | |||
white-space: nowrap; | |||
} | |||
.bok-btn-filled a, | |||
.bok-btn-filled a:visited { | |||
display: inline-block; | |||
background: #3375d4; | |||
color: white !important; | |||
border: 1px solid #3375d4; | |||
padding: 7px 14px; | |||
border-radius: 6px; | |||
font-size: 13px; | |||
font-weight: 500; | |||
text-decoration: none !important; | |||
background-image: none !important; | |||
white-space: nowrap; | |||
} | |||
.bok-btn-filled a:hover { | |||
background: #295ba4 !important; | |||
border-color: #295ba4 !important; | |||
color: white !important; | |||
} | |||
/* --- Clases para artículos individuales --- */ | |||
.bok-def { | |||
border-left: 3px solid #3375d4; | |||
background: #e5effa; | |||
padding: 12px 16px; | |||
border-radius: 0 8px 8px 0; | |||
margin: 14px 0 18px; | |||
font-size: 14px; | font-size: 14px; | ||
line-height: 1.7; | |||
color: #54617f; | |||
} | |||
.bok-aviso { | |||
border: 1px solid #f0c36d; | |||
background: #fffbf0; | |||
border-radius: 8px; | |||
padding: 11px 14px; | |||
margin: 12px 0; | |||
font-size: 13px; | |||
line-height: 1.65; | |||
} | |||
.bok-recurso { | |||
display: flex; | |||
gap: 10px; | |||
align-items: flex-start; | |||
border: 1px solid #d0d8e8; | |||
border-radius: 8px; | |||
padding: 10px 12px; | |||
margin: 6px 0; | |||
font-size: 13px; | |||
} | |||
.bok-recurso a { | |||
color: #3375d4 !important; | |||
text-decoration: none !important; | |||
background-image: none !important; | |||
} | |||
.bok-recurso .detalle { | |||
font-size: 11px; | |||
color: #8c9ab5; | |||
display: block; | |||
margin-top: 1px; | |||
} | |||
.bok-cta-articulo { | |||
background: #e5effa; | |||
border: 1px solid #b9d5f1; | |||
border-radius: 8px; | |||
padding: 14px 16px; | |||
margin: 20px 0; | |||
font-size: 13px; | |||
} | |||
.bok-cta-articulo .titulo { | |||
font-weight: 500; | |||
color: #111; | |||
display: block; | |||
margin-bottom: 4px; | |||
} | |||
.bok-cta-articulo a { | |||
color: #3375d4 !important; | |||
background-image: none !important; | |||
} | |||
/* --- Responsive --- */ | |||
@media (max-width: 700px) { | |||
.bok-cat-grid { grid-template-columns: repeat(2, 1fr); } | |||
.bok-manuals-grid { grid-template-columns: 1fr; } | |||
.bok-ecosistema { flex-direction: column; } | |||
} | |||
/* --- Pie de página portada --- */ | |||
.bok-footer-divider { | |||
border: none; | |||
border-top: 1px solid #c0cce0; | |||
margin: 16px 0 12px; | |||
height: 0; | |||
} | |||
.bok-footer-inner { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
gap: 8px; | |||
padding-bottom: 8px; | |||
flex-wrap: nowrap; | |||
} | |||
.bok-footer-redes { | |||
display: flex; | |||
gap: 6px; | |||
align-items: center; | |||
} | |||
.bok-footer-redes a, | |||
.bok-footer-redes a:visited { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
text-decoration: none !important; | |||
background-image: none !important; | |||
padding: 3px 5px; | |||
border: none; | |||
} | |||
.bok-footer-redes a:first-child, | |||
.bok-footer-redes a:first-child:visited { | |||
background: #0077b5; | |||
color: white !important; | |||
border-radius: 3px; | |||
font-size: 11px; | |||
font-weight: 800; | |||
width: 14px; | |||
height: 14px; | |||
padding: 2px 3px; | |||
} | |||
.bok-footer-redes a:last-child, | |||
.bok-footer-redes a:last-child:visited { | |||
background: #FF0000; | |||
color: white !important; | |||
border-radius: 4px; | |||
font-size: 10px; | |||
padding: 2px 5px; | |||
height: 14px; | |||
} | |||
.bok-footer-redes a:first-child:hover { | |||
background: #005f8e !important; | |||
} | |||
.bok-footer-redes a:last-child:hover { | |||
background: #cc0000 !important; | |||
color: white !important; | |||
} | |||
.bok-footer-meta { | |||
font-size: 11px; | |||
color: #8c9ab5; | |||
} | |||
.bok-footer-meta a, | |||
.bok-footer-meta a:visited { | |||
color: #77819a !important; | |||
text-decoration: none !important; | |||
background-image: none !important; | |||
} | |||
.bok-footer-meta a:hover { | |||
color: #3375d4 !important; | |||
} | |||
/* --- Véase también: etiquetas burbuja --- */ | |||
.bok-tags { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 6px; | |||
margin: 8px 0 16px; | |||
} | |||
.bok-tags a { | |||
display: inline-block; | |||
background: #eef2f8; | |||
color: #3375d4 !important; | |||
border: 1px solid #d0d8e8; | |||
border-radius: 20px; | |||
padding: 4px 12px; | |||
font-size: 12px; | |||
text-decoration: none !important; | |||
background-image: none !important; | |||
white-space: nowrap; | |||
} | |||
.bok-tags a:hover { | |||
background: #e5effa; | |||
border-color: #3375d4; | |||
} | |||
/* --- Encabezados de artículos --- */ | |||
.mw-parser-output h2 { | |||
font-family: 'Optima', 'Candara', 'Calibri', 'Segoe UI', sans-serif !important; | |||
font-size: 13px !important; | |||
font-weight: 600 !important; | |||
color: #54617f !important; | |||
text-transform: uppercase !important; | |||
letter-spacing: 0.12em !important; | |||
border-bottom: 1px solid #eef2f8 !important; | |||
padding-bottom: 6px !important; | |||
margin-top: 28px !important; | |||
margin-bottom: 10px !important; | |||
} | |||
.mw-parser-output h3 { | |||
font-family: 'Optima', 'Candara', 'Calibri', 'Segoe UI', sans-serif !important; | |||
font-size: 11px !important; | |||
font-weight: 600 !important; | |||
color: #77819a !important; | |||
text-transform: uppercase !important; | |||
letter-spacing: 0.10em !important; | |||
border-bottom: none !important; | |||
margin-top: 18px !important; | |||
margin-bottom: 8px !important; | |||
} | |||
.mw-parser-output h4 { | |||
font-family: 'Optima', 'Candara', 'Calibri', 'Segoe UI', sans-serif !important; | |||
font-size: 10px !important; | |||
font-weight: 600 !important; | |||
color: #8c9ab5 !important; | |||
text-transform: uppercase !important; | |||
letter-spacing: 0.10em !important; | |||
border-bottom: none !important; | |||
margin-top: 14px !important; | |||
margin-bottom: 6px !important; | |||
} | |||
/* --- Título de página (h1) --- */ | |||
#firstHeading { | |||
font-family: 'Optima', 'Candara', 'Calibri', 'Segoe UI', sans-serif !important; | |||
font-weight: 400 !important; | |||
letter-spacing: 0.06em !important; | |||
} | |||
/* --- Título del CTA --- */ | |||
.bok-ecosistema .titulo { | |||
font-family: 'Optima', 'Candara', 'Calibri', 'Segoe UI', sans-serif !important; | |||
letter-spacing: 0.06em !important; | |||
} | |||
/* --- Meta de artículo (tiempo de lectura + fecha) --- */ | |||
.bok-meta { | |||
font-size: 12px; | |||
color: #8c9ab5; | |||
margin: 0 0 20px; | |||
padding-bottom: 12px; | |||
border-bottom: 1px solid #eef2f8; | |||
letter-spacing: 0.02em; | |||
} | } | ||