102 lines
3.8 KiB
PHP
102 lines
3.8 KiB
PHP
<?php
|
|
/**
|
|
* fea-ui — Ajustes estéticos globales del front (issue #95).
|
|
*
|
|
* 1. Foco/click: elimina el recuadro gris/negro por defecto al hacer click,
|
|
* mantiene foco visible y de marca SOLO con teclado (:focus-visible).
|
|
* 2. Menú: tipografía editorial Fraunces (coherente con los títulos),
|
|
* línea carmesí en hover/ítem activo, sin subrayado.
|
|
*
|
|
* CSS global (el menú y los enlaces están en todo el sitio), no solo en single.
|
|
*/
|
|
|
|
if (!defined('FEA_UI_CRIMSON')) {
|
|
define('FEA_UI_CRIMSON', '#8b1a2e'); // carmesí de marca
|
|
}
|
|
if (!defined('FEA_UI_INK')) {
|
|
define('FEA_UI_INK', '#2a2320'); // texto de marca
|
|
}
|
|
|
|
add_action('wp_head', function () {
|
|
if (is_admin()) return;
|
|
$crimson = FEA_UI_CRIMSON;
|
|
$ink = FEA_UI_INK;
|
|
?>
|
|
<style id="fea-ui">
|
|
/* ── 1. Foco / click ───────────────────────────────────────────── */
|
|
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
|
|
|
|
/* Sin outline al hacer click con ratón/dedo… */
|
|
a:focus:not(:focus-visible),
|
|
button:focus:not(:focus-visible) { outline: none; }
|
|
|
|
/* …pero foco visible y de marca al navegar con teclado (accesibilidad) */
|
|
a:focus-visible,
|
|
button:focus-visible {
|
|
outline: 2px solid <?php echo $crimson; ?>;
|
|
outline-offset: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* El core agranda el outline del menú (outline-offset:4px) → lo reducimos */
|
|
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── 2. Menú — Opción C · Sans limpia minimalista (issue #95) ──── */
|
|
.wp-block-navigation .wp-block-navigation-item__content {
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
font-weight: 500;
|
|
color: <?php echo $ink; ?>;
|
|
text-decoration: none;
|
|
position: relative;
|
|
}
|
|
|
|
/* Nunca subrayado (el core lo pone en hover) */
|
|
.wp-block-navigation a.wp-block-navigation-item__content:hover,
|
|
.wp-block-navigation a.wp-block-navigation-item__content:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Línea carmesí inferior, animada, en hover y en el ítem activo */
|
|
.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
|
|
> .wp-block-navigation-item__content::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; right: 0; bottom: -3px;
|
|
height: 2px;
|
|
background: <?php echo $crimson; ?>;
|
|
transform: scaleX(0);
|
|
transform-origin: left center;
|
|
transition: transform 0.18s ease;
|
|
}
|
|
.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
|
|
> .wp-block-navigation-item__content:hover::after,
|
|
.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
|
|
> .wp-block-navigation-item__content[aria-current]::after {
|
|
transform: scaleX(1);
|
|
}
|
|
.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item
|
|
> .wp-block-navigation-item__content[aria-current] {
|
|
color: <?php echo $crimson; ?>;
|
|
}
|
|
|
|
/* Submenús: sin línea inferior; hover marca el texto en carmesí */
|
|
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
|
|
display: none;
|
|
}
|
|
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
|
|
.wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] {
|
|
color: <?php echo $crimson; ?>;
|
|
}
|
|
|
|
/* ── 3. Fondo cálido en artículos (issue #78 feedback "demasiado blanca") ── */
|
|
body.single-post {
|
|
background-color: #f5f0eb !important;
|
|
--wp--preset--color--base: #f5f0eb;
|
|
}
|
|
|
|
</style>
|
|
<?php
|
|
}, 25);
|