MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (38 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
#ca-history { display:none!important; } | #ca-history { display:none!important; } | ||
#ca-talk { display:none!important; } | #ca-talk { display:none!important; } | ||
| Line 16: | Line 17: | ||
============================================= */ | ============================================= */ | ||
.bok-hero { | .bok-hero { | ||
text-align: center; | text-align: center; | ||
padding: 28px 20px; | padding: 28px 20px; | ||
margin-bottom: 24px; | margin-bottom: 24px; | ||
} | } | ||
.bok-hero p { color: # | .bok-hero p { | ||
.bok-hero-titulo { font-size: | color: #54617f; | ||
.bok-hero-etiqueta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: # | 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 { | |||
border: 1px solid #3375d4; | |||
border-radius: 8px; | |||
padding: 10px 16px; | |||
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 { | |||
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- | .bok-ecosistema { | ||
.bok- | background: #e5effa; | ||
.bok- | 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; | |||
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- | .bok-def { | ||
.bok- | border-left: 3px solid #3375d4; | ||
.bok- | background: #e5effa; | ||
.bok- | padding: 12px 16px; | ||
.bok- | border-radius: 0 8px 8px 0; | ||
margin: 14px 0 18px; | |||
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 --- */ | ||
.bok- | @media (max-width: 700px) { | ||
.bok- | .bok-cat-grid { grid-template-columns: repeat(2, 1fr); } | ||
.bok- | .bok-manuals-grid { grid-template-columns: 1fr; } | ||
.bok-ecosistema { flex-direction: column; } | |||
} | |||
/* --- | /* --- Pie de página portada --- */ | ||
.bok- | .bok-footer-divider { | ||
.bok- | border: none; | ||
.bok- | border-top: 1px solid #c0cce0; | ||
.bok- | margin: 16px 0 12px; | ||
.bok- | height: 0; | ||
.bok- | } | ||
.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- | .bok-tags { | ||
display: flex; | |||
flex-wrap: wrap; | |||
.bok- | gap: 6px; | ||
margin: 8px 0 16px; | |||
.bok- | } | ||
.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- | .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- | .bok-meta { | ||
font-size: 12px; | |||
color: #8c9ab5; | |||
margin: 0 0 20px; | |||
padding-bottom: 12px; | |||
border-bottom: 1px solid #eef2f8; | |||
letter-spacing: 0.02em; | |||
} | |||
/* --- | /* --- Pie de página portada --- */ | ||
.bok- | .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-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; } | |||
/* --- Responsive | /* --- Responsive --- */ | ||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
.bok-cat-grid { grid-template-columns: repeat(2, 1fr); } | .bok-cat-grid { grid-template-columns: repeat(2, 1fr); } | ||
| Line 91: | Line 519: | ||
.bok-ecosistema { flex-direction: column; } | .bok-ecosistema { flex-direction: column; } | ||
} | } | ||
/* ── Portada: ocultar título y pestañas ──────────────────────────── */ | |||
.page-Scrum_Manager_BoK #firstHeading { display:none!important; } | |||
.page-Scrum_Manager_BoK .mw-body-header { display:none!important; } | |||
.page-Scrum_Manager_BoK .vector-page-toolbar { display:none!important; } | |||
.page-Scrum_Manager_BoK .mw-portlet-views { display:none!important; } | |||
/* Ocultar aviso de redirección en todas las páginas */ | |||
.mw-redirectedfrom { display:none!important; } | |||