/* ========================================================================== Tema de la consola de administración de PlayMeBit ========================================================================== Colores del logotipo: · Grafito #383838 · Morado #8D4C89 Tipografía monoespaciada en TODA la consola, como pediste al mencionar Consolas. Se usa JetBrains Mono, servida desde el propio tema, porque Consolas es de Microsoft y no se puede redistribuir. ⚠️ ESTO NO ES EL TEMA DE LOGIN. Desde Keycloak 24 la consola es una aplicación React con Patternfly 5, no las plantillas Freemarker del login. Las diferencias que importan: · Las variables son `--pf-v5-global--*`, no `--pf-global--*`. Usar las antiguas no da error: simplemente no hace nada. · Buena parte del maquetado se genera en tiempo de ejecución, así que conviene teñir con variables y no perseguir clases concretas, que cambian entre versiones menores. · Se declaran las dos familias de variables (v5 y sin versionar) para que el tema sobreviva a una actualización de Patternfly. ========================================================================== */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --pmb-grafito: #383838; --pmb-grafito-claro: #4a4a4a; --pmb-morado: #8d4c89; --pmb-morado-claro: #a45ea0; --pmb-morado-oscuro: #713d6e; --pmb-mono: 'JetBrains Mono', Consolas, 'Cascadia Mono', 'SFMono-Regular', 'Menlo', 'DejaVu Sans Mono', ui-monospace, monospace; /* --- Tipografía global ------------------------------------------------- Patternfly define varias familias según el contexto; se apuntan todas a la monoespaciada para que no quede ningún rincón con la de serie. */ --pf-v5-global--FontFamily--text: var(--pmb-mono); --pf-v5-global--FontFamily--heading: var(--pmb-mono); --pf-v5-global--FontFamily--monospace: var(--pmb-mono); --pf-v5-global--FontFamily--redhat-updated--text: var(--pmb-mono); --pf-v5-global--FontFamily--redhat-updated--heading: var(--pmb-mono); --pf-v5-global--FontFamily--redhat-updated--monospace: var(--pmb-mono); /* Sin versionar, por si una actualización cambia el prefijo. */ --pf-global--FontFamily--sans-serif: var(--pmb-mono); --pf-global--FontFamily--heading--sans-serif: var(--pmb-mono); --pf-global--FontFamily--monospace: var(--pmb-mono); /* --- Color de marca ---------------------------------------------------- */ --pf-v5-global--primary-color--100: var(--pmb-morado); --pf-v5-global--primary-color--200: var(--pmb-morado-oscuro); --pf-v5-global--active-color--100: var(--pmb-morado); --pf-v5-global--link--Color: var(--pmb-morado); --pf-v5-global--link--Color--hover: var(--pmb-morado-oscuro); --pf-global--primary-color--100: var(--pmb-morado); --pf-global--active-color--100: var(--pmb-morado); /* --- Barra superior y menú lateral ------------------------------------- */ --pf-v5-global--BackgroundColor--dark-100: var(--pmb-grafito); --pf-v5-global--BackgroundColor--dark-200: var(--pmb-grafito-claro); } /* Patternfly no siempre hereda la familia en los controles nativos. */ body, button, input, select, textarea, .pf-v5-c-button, .pf-v5-c-form-control { font-family: var(--pmb-mono); } /* --- Barra superior ------------------------------------------------------- */ .pf-v5-c-masthead, .pf-c-masthead { background-color: var(--pmb-grafito); border-bottom: 2px solid var(--pmb-morado); } /* Se usa la variante CLARA del logotipo (ver theme.properties), no un filtro de inversión: `brightness(0) invert(1)` deja el logotipo en blanco plano y se pierde el morado de «Me», que es lo que identifica a la marca. La variante clara conserva el bitono sobre fondo oscuro. */ .pf-v5-c-masthead__brand img, .pf-c-masthead__brand img { max-height: 34px; } /* --- Icono del panel de bienvenida --------------------------------------- El de la pantalla «Welcome to ». ⚠️ AQUÍ NO SIRVE LA PROPIEDAD `logo` DEL theme.properties, y no por gusto: la consola construye estas dos rutas de forma DISTINTA e incompatible. · La cabecera lo emite tal cual, y la página trae , así que un valor relativo como `img/logo.png` resuelve bien. · Este icono lo construye React concatenando resourceUrl + logo, y resourceUrl NO acaba en barra. El resultado es /resources/c1me9/admin/playmebitimg/logo.png ^^^ falta la barra y da 404. Poner el valor con barra inicial (`/img/logo.png`) arregla este y rompe la cabecera, porque una ruta absoluta desde la raíz ignora el . No hay un valor que sirva para los dos, así que este se resuelve por CSS: `content` sobre un sustituye la imagen que se pinta, sea cual sea su `src`. Se usa el logotipo ORIGINAL y no la variante clara: este icono va sobre el fondo BLANCO del contenido, no sobre la cabecera oscura. Con la variante clara sería invisible. */ img.keycloak__dashboard_icon, img.pf-v5-c-brand.keycloak__dashboard_icon { content: url('../img/logotipo-playmebit.png'); max-width: 280px; width: 100%; height: auto; } /* --- Menú lateral --------------------------------------------------------- */ .pf-v5-c-page__sidebar, .pf-c-page__sidebar { background-color: var(--pmb-grafito); } /* El elemento activo se marca con una barra morada a la izquierda ADEMÁS del fondo: el color por sí solo no basta para quien no lo distingue. */ .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link[aria-current='page'], .pf-c-nav__link.pf-m-current { border-left: 3px solid var(--pmb-morado); background-color: rgba(141, 76, 137, 0.18); color: #fff; } .pf-v5-c-nav__link:hover, .pf-c-nav__link:hover { background-color: rgba(141, 76, 137, 0.10); } /* --- Botones primarios ---------------------------------------------------- */ .pf-v5-c-button.pf-m-primary, .pf-c-button.pf-m-primary { background-color: var(--pmb-morado); border-color: var(--pmb-morado); font-weight: 700; letter-spacing: 0.02em; } .pf-v5-c-button.pf-m-primary:hover, .pf-c-button.pf-m-primary:hover { background-color: var(--pmb-morado-oscuro); border-color: var(--pmb-morado-oscuro); } /* --- Enlaces y pestañas --------------------------------------------------- */ .pf-v5-c-button.pf-m-link, .pf-c-button.pf-m-link { color: var(--pmb-morado); } .pf-v5-c-tabs__link:hover, .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link { color: var(--pmb-morado); } .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after { border-color: var(--pmb-morado); } /* --- Foco ---------------------------------------------------------------- Visible a propósito: es un requisito de accesibilidad. Quien navegue con teclado tiene que saber dónde está. */ .pf-v5-c-form-control:focus, .pf-v5-c-button:focus-visible, .pf-c-form-control:focus { outline: 2px solid var(--pmb-morado); outline-offset: 1px; border-color: var(--pmb-morado); } /* --- Tablas --------------------------------------------------------------- Con tipografía de paso fijo, los identificadores y los UUID que llenan esta consola quedan alineados en columna y se comparan de un vistazo. Es la ventaja práctica de la monoespaciada aquí, más allá del gusto. */ .pf-v5-c-table tbody td, .pf-c-table tbody td { font-family: var(--pmb-mono); font-size: 0.86rem; } .pf-v5-c-table thead th, .pf-c-table thead th { font-family: var(--pmb-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; color: var(--pmb-grafito); } /* --- Selector de realm ---------------------------------------------------- Es el control más importante de una instalación multi-realm como esta: se destaca para no cambiar de realm por error. */ .pf-v5-c-page__sidebar .pf-v5-c-select__toggle, .pf-v5-c-page__sidebar .pf-v5-c-menu-toggle { border: 1px solid var(--pmb-morado); border-radius: 4px; font-weight: 700; }