/* * Copyright (c) 2021-2026 Blade Expert SARL. All rights reserved. * * This file is part of the BladeExpert software and is proprietary and * confidential. Unauthorized copying, distribution or modification of this * file, via any medium, is strictly prohibited without the prior written * consent of Blade Expert SARL. */ /* Roboto, servi en local depuis static/fonts/ comme dans BladeExpert — pas de CDN. Les huit fontes sont reprises telles quelles du dépôt voisin. */ @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } /* Palette partagée avec BladeExpert : le Manager doit se lire comme le même produit. */ :root { --bxp-blue: hsl(220, 43%, 19%); --bxp-green-light: hsl(132, 88%, 83%); --bxp-green: hsl(159, 52%, 41%); --bxp-beige: hsl(38, 75%, 88%); --bxp-peach: hsl(351, 100%, 81%); --bxp-turquoise: hsl(181, 75%, 61%); /* Bulma ne lit jamais --bulma-primary directement : ses composants recomposent chaque teinte à partir des composantes HSL (--bulma-button-h reprend --bulma-primary-h, etc.). C'est donc là, et seulement là, qu'il faut écrire pour que boutons, tags et liens passent au vert BladeExpert. bxp-green = hsl(159, 52%, 41%). */ --bulma-primary-h: 159deg; --bulma-primary-s: 52%; --bulma-primary-l: 41%; --bulma-link-h: 159deg; --bulma-link-s: 52%; --bulma-link-l: 41%; /* BladeExpert applique Roboto par `body { font-family }` et laisse --bulma-family-primary à la pile système. On passe par la variable : même fonte à l'écran, mais elle atteint aussi les composants Bulma qui la lisent directement plutôt que d'hériter du body. */ --bulma-family-primary: 'Roboto', sans-serif; } /* ============================================================ THÈME SOMBRE Porté tel quel depuis BladeExpert (static/css/style.css). Le Manager est mono-thème : `data-theme="dark"` est épinglé sur , il n'y a ni bascule ni cookie. Le bloc reste néanmoins écrit sur [data-theme="dark"] — l'un des deux sélecteurs utilisés en face — pour qu'un ajustement se reporte d'un dépôt à l'autre sans traduction. Bulma compose toutes ses couleurs (inputs, boutons, navbar, cards, table, message...) avec hsl(scheme-h, scheme-s, *-l). En surchargeant ces variables ici, le changement cascade automatiquement à tous les composants. Les variantes colorées (.is-warning, .is-danger, .is-primary...) continuent de fonctionner : elles redéfinissent h/s/l vers leur teinte avec une spécificité supérieure à ce bloc. Bulma 1.0.4 déclare son propre `.theme-dark,[data-theme=dark]` : même spécificité, c'est donc l'ordre de chargement qui tranche — style.css vient après bulma.min.1.0.4.css dans layout/html.html. ============================================================ */ [data-theme="dark"] { /* Teinte / saturation de la palette */ --bulma-scheme-h: 220; --bulma-scheme-s: 43%; /* Niveaux de lightness (du plus sombre au plus clair) */ --bulma-scheme-main-l: 14%; /* fond principal : cards, inputs au repos, boutons */ --bulma-scheme-main-bis-l: 16%; --bulma-scheme-main-ter-l: 19%; --bulma-background-l: 22%; /* surfaces secondaires (alt rows, etc.) */ --bulma-border-l: 28%; --bulma-border-weak-l: 22%; /* Textes */ --bulma-text-l: 70%; --bulma-text-strong-l: 90%; --bulma-text-weak-l: 55%; /* Schéma invert : Bulma garde cette variable basse (4%) même en dark mode car elle sert aux voiles/ombres qui doivent rester sombres dans les deux thèmes. Ici on la pousse à 90% en dark pour que les inset-shadows des inputs (et autres ombres internes basées sur scheme-invert-l) apparaissent comme des highlights clairs visibles sur fond sombre, plutôt que des ombres dark-on-dark invisibles. */ --bulma-scheme-invert-l: 90%; /* Body : Bulma utilise scheme-main par défaut, mais on veut un cran plus sombre (12%) pour faire ressortir les composants posés dessus */ --bulma-body-background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 12%); /* Ombres externes (boxes, dropdowns...) teintées en --bxp-green-light (hsl 132 88% 83%) en dark mode. Bulma compose --bulma-shadow à partir de ces 3 composantes H/S/L avec des alphas faibles (0.1 et 0.02), donc l'effet est un léger halo verdâtre autour des surfaces surélevées plutôt qu'une ombre noire / un glow blanc. C'est ce halo qui détache les .box du fond : l'écart body (12%) / scheme-main (14%) est volontairement ténu. */ --bulma-shadow-h: 132deg; --bulma-shadow-s: 88%; --bulma-shadow-l: 83%; } /* Notifications assourdies. Bulma ne bascule pas `--bulma-light-l` en sombre (il reste à 96%) et chaque règle `.notification.is-X.is-light` réécrit en dur `background-l: 90%` : un simple retour de création partait donc en aplat crème pleine largeur, plus voyant que la liste qu'il commente. On garde la teinte — c'est elle qui porte l'information — mais on la pose en fond sombre désaturé, avec le texte dans la même teinte en clair et un filet plein en bordure de départ. Le niveau sonore redevient celui d'un tag. Spécificité : (0,3,0) contre (0,2,0) pour la règle de Bulma. Le sélecteur attrape aussi `.notification.is-light` seul — il n'y en a pas aujourd'hui, mais la déclinaison neutre est correcte. */ [data-theme="dark"] .notification.is-light { --bulma-notification-s: 45%; --bulma-notification-background-l: 20%; --bulma-notification-color-l: 82%; border-inline-start: 3px solid hsl(var(--bulma-notification-h), 60%, 52%); } *::-webkit-scrollbar { width: 4px; height: 4px; } /* --bxp-green-light et non --bxp-green : c'est la variante que BladeExpert utilise en sombre, le vert plein se noie sur ce fond. */ *::-webkit-scrollbar-thumb { background: var(--bxp-green-light); border-radius: 2px; } *::-webkit-scrollbar-track { background: var(--bulma-scheme-main-ter); border-radius: 2px; margin: 0; } *::-webkit-scrollbar-button { display: none; } *::-webkit-scrollbar-corner { background: none; } /* ============================================================ NAVBAR ============================================================ */ .bxp-navbar { /*background: var(--bxp-blue); Retiré car mieux sans*/ /*border-bottom: 3px solid var(--bxp-green); Retiré car mieux sans*/ } .bxp-navbar .navbar-item, .bxp-navbar .bxp-brand, .bxp-navbar .bxp-user { color: white; } .bxp-navbar .navbar-item img { max-height: 3rem; margin-right: .6rem; } .bxp-brand { font-size: 1.1rem; letter-spacing: .02em; } .bxp-user { font-size: .85rem; opacity: .75; } /* Rubriques. Bulma pose un fond clair sur .navbar-item.is-active, calculé pour une navbar de la couleur du schéma : sur l'aplat --bxp-blue il ferait une pastille blanche. On garde le repère mais on le porte par un filet vert sous l'onglet, dans la continuité de la bordure de la navbar. */ .bxp-navbar .navbar-start .navbar-item { border-bottom: 1px solid transparent; margin-bottom: -3px; } .bxp-navbar .navbar-start .navbar-item:hover { background: rgba(255, 255, 255, .06); color: white; } .bxp-navbar .navbar-start .navbar-item.is-active { background: transparent; border-bottom-color: var(--bxp-green-light); font-weight: 600; } /* ============================================================ LISTE DES INSTANCES ============================================================ */ .bxp-page-head { margin-bottom: 1.5rem; } /* Bulma pose flex-shrink: 0 sur .level-left : le bloc titre + sous-titre refuse donc de se comprimer, et un sous-titre un peu long élargit le document au lieu de passer à la ligne — toute la page défile alors horizontalement, sous-titre coupé à droite. Mesuré à 112 px de débordement sur l'écran Compteurs. min-width: 0 est indispensable en plus du flex-shrink : sans lui, la taille minimale automatique d'un élément flex reste celle de son contenu. */ .bxp-page-head .level-left { flex-shrink: 1; min-width: 0; } .bxp-instances th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bulma-text-weak); } .bxp-instances td { vertical-align: middle; } /* Le statut est la colonne qu'on balaie du regard : une couleur par état, jamais deux états qui se ressemblent. UNAUTHORIZED se distingue de DOWN — l'instance répond, c'est la clé qui est en cause, l'action corrective n'est pas la même. */ .bxp-status { font-weight: 600; min-width: 6.5rem; } .bxp-status-up { background: var(--bxp-green); color: white; } .bxp-status-down { background: var(--bxp-peach); color: var(--bxp-blue); } .bxp-status-unauthorized { background: var(--bxp-beige); color: var(--bxp-blue); } /* Le seul statut sans couleur : « pas encore sondé » n'est pas un incident. --bulma-text plutôt que --bulma-text-weak : sur scheme-main-ter, 55% de lightness ne tient pas le contraste à cette taille. */ .bxp-status-unknown { background: var(--bulma-scheme-main-ter); color: var(--bulma-text); } /* ============================================================ TABLEAUX DE COMPARAISON (configuration, compteurs) Une ligne par variable ou par compteur, une colonne par instance. Le parc grandit en largeur : c'est la seule table du Manager qui déborde, d'où le conteneur défilant et la première colonne fixe — sans elle, on perd le nom de la ligne dès qu'on va lire la troisième instance. ============================================================ */ .bxp-matrix-scroll { overflow-x: auto; } /* Pas is-fullwidth au sens de Bulma : la table prend la largeur de son contenu dès qu'il dépasse, et c'est le conteneur qui défile. */ .bxp-matrix { width: auto; min-width: 100%; } .bxp-matrix thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bulma-text-weak); white-space: nowrap; } .bxp-matrix td { vertical-align: top; /* Les valeurs longues (URL JDBC, listes de domaines) reviennent à la ligne dans une colonne bornée, plutôt que d'étirer la table sur trois écrans. */ max-width: 24rem; word-break: break-word; } /* Première colonne fixe. Fond opaque obligatoire : les cellules défilent dessous. */ .bxp-matrix th.bxp-matrix-name { position: sticky; left: 0; z-index: 1; background: var(--bulma-scheme-main); white-space: nowrap; vertical-align: top; } .bxp-matrix-code { font-weight: 600; color: var(--bulma-text-strong); } .bxp-matrix-instance, .bxp-matrix-property { font-size: .7rem; color: var(--bulma-text-weak); text-transform: none; letter-spacing: 0; } /* L'origine est un tag Bulma nu, sans habillage local : la teinte vient de la variante posée par ConfigSource, la géométrie de Bulma. Une règle le rapetissait — mesuré ensuite à l'écran : elle épargnait 1 px par ligne sur 73, soit 66 px sur un tableau de 4,6 m, pour une police tombée à 10,4 px. La crainte d'origine (« le tag fait 2em, il doublerait la hauteur des lignes ») était fausse : la hauteur de ligne est fixée par la première colonne, où le nom de variable et la propriété Spring sont empilés. */ .bxp-matrix-property { font-family: var(--bulma-family-code), monospace; } .bxp-matrix-var { font-weight: 600; font-size: .85rem; } /* Une case grisée n'est pas une case vide : soit l'instance ne connaît pas la ligne, soit elle la connaît sans valeur. Les deux se lisent au texte. */ .bxp-matrix-muted { color: var(--bulma-text-weak); } /* Compteurs : des nombres, donc alignés à droite et jamais coupés. */ .bxp-matrix-figures td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Écart depuis le dernier relevé archivé. Deux couleurs, parce que les deux sens ne racontent pas la même histoire : un compteur qui monte est l'usage normal, un compteur qui descend est une base restaurée ou remise à zéro — une anomalie qu'on ne doit pas lire comme une progression. */ .bxp-delta { margin-left: .4rem; font-size: .7rem; font-weight: 600; } .bxp-delta-up { color: var(--bxp-green-light); } .bxp-delta-down { color: var(--bxp-peach); } /* Écart d'une métrique de volumétrie. Une seule teinte pour les deux sens, et volontairement en retrait : une intervention supprimée ou des photos effacées font descendre la valeur sans que rien n'aille mal. Peindre cette baisse comme celle d'un compteur d'usage aurait appris à ne plus regarder la couleur du tout. Le signe, lui, reste : c'est le sens qu'on vient lire, pas une alerte. */ .bxp-delta-flat { color: var(--bulma-text-weak); } /* Intertitre de famille. Plus spécifique que la règle de colonne fixe ci-dessus, sinon la première cellule garderait le fond des lignes ordinaires. */ .bxp-matrix .bxp-matrix-group > th, .bxp-matrix .bxp-matrix-group > td { background: var(--bulma-scheme-main-ter); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bulma-text-weak); } .bxp-matrix tr.bxp-matrix-group > th.bxp-matrix-name { background: var(--bulma-scheme-main-ter); } /* Survol posé ici plutôt que par is-hoverable : la classe de Bulma ne peint que les cellules ordinaires, la colonne fixe garderait son fond opaque et trancherait au milieu de la ligne survolée. */ .bxp-matrix tbody tr:not(.bxp-matrix-group):hover > th, .bxp-matrix tbody tr:not(.bxp-matrix-group):hover > td { background: var(--bulma-background); } /* Le repère qui porte tout l'écran de configuration : cette variable ne dit pas la même chose partout. Sur la colonne fixe, donc visible quel que soit le défilement horizontal. */ .bxp-matrix tbody tr.bxp-matrix-differs > th.bxp-matrix-name { border-inline-start: 3px solid var(--bxp-turquoise); } .bxp-matrix-filter { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; } .bxp-matrix-count { font-size: .75rem; color: var(--bulma-text-weak); } /* Filtre sans une ligne de JavaScript : la case cochée replie les lignes identiques d'un bout à l'autre du tableau. Repose sur :has(), qui permet à un contrôle de peindre ses voisins sans les avoir pour frères — la case vit dans la page, le tableau dans le fragment que HTMX remplace, et l'état de la case survit donc au rafraîchissement. Dégradation propre : un navigateur sans :has() laisse simplement la case sans effet, le tableau reste complet. */ .bxp-matrix-page:has(.bxp-diff-toggle:checked) .bxp-matrix-uniform { display: none; } /* ============================================================ INDICATEUR HTMX Le balayage du parc est séquentiel : sans retour visuel, un clic sur « Rafraîchir tout » a l'air de n'avoir rien déclenché. ============================================================ */ .bxp-indicator { display: none; } .htmx-request .bxp-indicator, .htmx-request.bxp-indicator { display: inline; } /* ============================================================ CONNEXION ============================================================ */ /* Pas d'aplat de fond : la page reprend --bulma-body-background-color et c'est le halo vert de la .box qui détache le formulaire, comme sur l'écran de création. Un aplat --bxp-blue (19%) mettrait au contraire la box (14%) en creux — l'inverse de la lecture attendue. */ .bxp-login { min-height: 100dvh; } .bxp-login-box { max-width: 24rem; margin: 4rem auto 0; } /* ============================================================ FORMULAIRE DE CRÉATION ============================================================ */ .bxp-form-page { max-width: 34rem; } .bxp-form { margin-top: 1.5rem; } .bxp-form .help code { font-size: .85em; } /* ============================================================ HISTORIQUE DES COMPTEURS Un compteur choisi à gauche, sa courbe par instance à droite, les instances sous le graphe. Le graphe est un SVG rendu par le serveur : les couleurs de courbes sont donc ici et non en Java, qui n'en connaît que l'indice. ============================================================ */ /* Palette des séries. Une variable par indice, lue indifféremment par le tracé et par la pastille de légende — la couleur d'une instance ne se décrit ainsi qu'une fois. Huit teintes : au-delà, elles se ressemblent trop pour départager deux courbes qui se croisent, et l'indice repart à zéro (cf. PALETTE_SIZE). */ .bxp-serie-0 { --bxp-serie: hsl(159, 60%, 55%); } .bxp-serie-1 { --bxp-serie: hsl(181, 75%, 61%); } .bxp-serie-2 { --bxp-serie: hsl(351, 100%, 78%); } .bxp-serie-3 { --bxp-serie: hsl(38, 80%, 66%); } .bxp-serie-4 { --bxp-serie: hsl(265, 70%, 74%); } .bxp-serie-5 { --bxp-serie: hsl(207, 80%, 68%); } .bxp-serie-6 { --bxp-serie: hsl(88, 55%, 62%); } .bxp-serie-7 { --bxp-serie: hsl(320, 65%, 72%); } /* Colonne des compteurs. Défilante et bornée en hauteur : la liste suit la base de l'instance la mieux fournie, elle n'a pas de longueur prévisible. */ .bxp-counter-head { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bulma-text-weak); } /* La liste descend jusqu'au bas de la fenêtre plutôt que de s'arrêter à une fraction arbitraire : avec une cinquantaine de compteurs, chaque ligne gagnée est un défilement épargné, et le bas de page cesse d'être vide. Les 17rem retranchés couvrent la navbar, la marge haute de la section, l'en-tête de page et l'intitulé de la colonne — mesurés à 248 px, arrondis au-dessus pour qu'un sous-titre passant sur deux lignes ne fasse pas déborder la page. Le plancher garde la liste utilisable sur une fenêtre courte, quitte à ce qu'on défile. */ .bxp-counter-list { max-height: max(16rem, calc(100dvh - 17rem)); overflow-y: auto; border: 1px solid var(--bulma-border-weak); border-radius: var(--bulma-radius); } /* position: relative n'est pas décoratif, il corrige un défilement parasite. Le bouton radio est masqué par .is-sr-only, qui le pose en position: absolute sans top ni left. Sans ancêtre positionné, son bloc conteneur est celui de la page entière : il ne suit donc pas le défilement de la liste. Cliquer un libellé en bas d'une liste déjà défilée donnait le focus à un contrôle dont la boîte était restée loin plus bas dans le document, et le navigateur y faisait défiler la page. D'où « seulement certains compteurs » : ceux qu'on n'atteint qu'en défilant. Le label devient le bloc conteneur, le radio le suit. */ .bxp-counter-item { display: block; position: relative; padding: .35rem .6rem; border-inline-start: 3px solid transparent; font-size: .8rem; cursor: pointer; } .bxp-counter-item:hover { background: var(--bulma-background); } /* Le compteur affiché, désigné par son bouton radio : c'est :has() qui remonte du contrôle au libellé, comme le filtre de l'écran de configuration. Le radio reste dans le flux (.is-sr-only et non display:none) pour rester atteignable au clavier — masqué à l'œil, pas au tabulateur. */ .bxp-counter-item:has(input:checked) { background: var(--bulma-background); border-inline-start-color: var(--bxp-green); font-weight: 600; } .bxp-counter-item:has(input:focus-visible) { outline: 2px solid var(--bxp-turquoise); outline-offset: -2px; } .bxp-counter-count { font-variant-numeric: tabular-nums; } /* Intertitre de nature dans la colonne de gauche. Il sépare la volumétrie des compteurs d'usage : les deux natures se lisent avec des grilles différentes, une courbe descendante n'y raconte pas la même histoire. Collant en haut de la liste défilante, comme un en-tête de section — sans lui, on ne sait plus, une fois descendu dans les compteurs, ce qu'on est en train de regarder. Il est posé sur un

hors de la