/* =====================================================================
Nyumba — Habillage couleur MantisBT (thème ACE / skin-3)
---------------------------------------------------------------------
Ne touche QUE les couleurs (boutons, liens, icônes, en-têtes, accents).
La structure / le layout d'ACE est conservé.
IMPORTANT : ce fichier est chargé AVANT ace.css / ace-skins.css.
À !important égal, la feuille chargée en dernier gagne — c'est pour ça
que les sélecteurs ci-dessous sont préfixés « html body » (et
« html body.skin-3 » pour la barre latérale / la navbar) : cela monte
la spécificité juste assez pour passer DEVANT le bleu d'ACE.
Palette :
#FF6325 orange principal (actions, accents forts)
#FF9C25 orange secondaire (survols, filets, focus)
#D9500F orange foncé lisible (texte des liens)
#2B2B2B anthracite (barre du haut)
===================================================================== */
:root {
--br-primary: #FF6325; /* orange principal */
--br-primary-d: #E5551F; /* survol / état actif */
--br-primary-dd: #C4440F; /* enfoncé */
--br-accent: #FF9C25; /* orange secondaire */
--br-link: #D9500F; /* liens (lisible sur blanc) */
--br-tint: #FFF3EC; /* lavis orange très clair */
--br-tint-2: #FFC9A8; /* bordure orange douce */
--br-ink: #2B2B2B; /* anthracite (navbar) */
--br-ink-2: #E8E8E8; /* texte clair sur anthracite */
--hd-bg: #F4F5F7; /* fond clair des en-têtes */
--hd-border: #E4E6EA; /* bordure des blocs */
}
/* =====================================================================
1. BARRE DU HAUT (navbar) — anthracite + accents orange
===================================================================== */
html body.skin-3 .navbar,
html body.skin-3 .navbar-default {
background: var(--br-ink) !important;
border-color: var(--br-ink) !important;
border-bottom: 3px solid var(--br-primary) !important;
}
html body.skin-3 .navbar .navbar-brand,
html body.skin-3 .navbar .navbar-brand .smaller-75 {
color: #ffffff !important;
}
/* libellés clairs et lisibles sur l'anthracite */
html body.skin-3 .navbar .ace-nav > li.grey > a,
html body.skin-3 .navbar .ace-nav > li > a .user-info {
color: var(--br-ink-2) !important;
}
/* survol / menu ouvert d'un item de la navbar -> orange */
html body.skin-3 .navbar .ace-nav > li > a:hover,
html body.skin-3 .navbar .ace-nav > li.open > a {
background-color: var(--br-primary) !important;
color: #ffffff !important;
}
html body.skin-3 .navbar .ace-nav > li.open > a .user-info {
color: #ffffff !important;
}
/* =====================================================================
2. BOUTONS PRINCIPAUX PLEINS (.btn-primary) — orange plein
(ex : « Rapporter une anomalie », « Inviter des utilisateurs »)
===================================================================== */
html body .btn-primary,
html body .btn-primary:focus,
html body .btn-primary.focus {
background-color: var(--br-primary) !important;
border-color: var(--br-primary-d) !important;
color: #ffffff !important;
}
html body .btn-primary:hover,
html body .btn-primary:active,
html body .btn-primary.active,
html body .open > .btn-primary.dropdown-toggle,
html body .open > .btn-primary.dropdown-toggle:hover,
html body .open > .btn-primary.dropdown-toggle:focus,
html body .open > .btn-primary.dropdown-toggle:active {
background-color: var(--br-primary-d) !important;
border-color: var(--br-primary-dd) !important;
color: #ffffff !important;
}
/* =====================================================================
3. BOUTONS BLANCS À LISERÉ (.btn-white.btn-primary) — contour orange
(la majorité des boutons d'action : Imprimer, Export, Réinitialiser,
Enregistrer, Appliquer le filtre, Valider…)
===================================================================== */
html body .btn-white.btn-primary,
html body .btn-white.btn-primary:focus {
background-color: #ffffff !important;
border-color: var(--br-tint-2) !important;
color: var(--br-link) !important;
}
html body .btn-white.btn-primary:hover,
html body .btn-white.btn-primary:active,
html body .btn-white.btn-primary.active,
html body .open > .btn-white.btn-primary.dropdown-toggle,
html body .open > .btn-white.btn-primary.active.dropdown-toggle {
background-color: var(--br-tint) !important;
border-color: var(--br-primary) !important;
color: var(--br-primary-d) !important;
}
html body .btn-white.btn-primary .ace-icon {
color: inherit !important;
}
/* boutons-liens */
html body .btn-link { color: var(--br-link) !important; }
html body .btn-link:hover,
html body .btn-link:focus { color: var(--br-primary) !important; }
/* =====================================================================
4. LIENS DE CONTENU — orange foncé lisible, orange vif au survol
(n° d'anomalie, résumés, noms, filtres, fil d'ariane, pied de page…)
La barre latérale et la navbar sont volontairement exclues.
===================================================================== */
html body .main-content a:not(.btn):not(.resolved),
html body .breadcrumb a,
html body .nav-recent a,
html body .footer a:not(.btn) {
color: var(--br-link) !important;
}
html body .main-content a:not(.btn):not(.resolved):hover,
html body .main-content a:not(.btn):not(.resolved):focus,
html body .breadcrumb a:hover,
html body .nav-recent a:hover,
html body .footer a:not(.btn):hover {
color: var(--br-primary) !important;
text-decoration: underline;
}
/* =====================================================================
5. ICÔNES « bleues » utilitaires (.blue) -> orange
(compteurs de notes / pièces jointes, flèche de tri active…)
===================================================================== */
html body .blue { color: var(--br-primary) !important; }
html body .breadcrumb .home-icon { color: var(--br-primary) !important; }
/* =====================================================================
6. EN-TÊTES DE BLOCS (widget-box / widget-color-blue2…)
Fond orange plein + texte/icônes blancs.
===================================================================== */
/* Fond orange plein + texte blanc */
html body .widget-box[class*="widget-color-"] > .widget-header {
background: var(--br-primary) !important;
color: #ffffff !important;
border-color: var(--br-primary-d) !important;
border-bottom-color: var(--br-primary-d) !important;
text-shadow: none !important;
}
/* la bordure du bloc s'aligne sur l'orange */
html body .widget-color-blue2,
html body .widget-color-blue,
html body .widget-color-blue3,
html body .widget-box.widget-color-blue2 {
border-color: var(--br-primary) !important;
}
html body .widget-header .widget-title,
html body .widget-header .widget-title > .ace-icon,
html body .widget-header .widget-title > .ace-icon > .ace-icon {
color: #ffffff !important;
font-weight: 600 !important;
}
html body .widget-box[class*="widget-color-"] > .widget-header a,
html body .widget-box[class*="widget-color-"] > .widget-header .widget-title a,
html body .widget-header .widget-title a,
html body .widget-header a {
color: #ffffff !important;
}
html body .widget-box[class*="widget-color-"] > .widget-header .widget-title a:hover,
html body .widget-header .widget-title a:hover,
html body .widget-header a:not(.btn):hover {
color: var(--br-tint) !important;
}
/* compteur (badge) dans le titre : pastille blanche, chiffre orange */
html body .widget-header .widget-title .badge,
html body .widget-title .badge {
background-color: #ffffff !important;
color: var(--br-primary-d) !important;
}
/* icônes d'outils de l'en-tête (menu, replier…) : blanches sur l'orange */
html body [class*="widget-color-"] > .widget-header > .widget-toolbar > a,
html body [class*="widget-color-"] > .widget-header > .widget-toolbar .widget-menu > a,
html body [class*="widget-color-"] > .widget-header > .widget-toolbar > [data-action],
html body [class*="widget-color-"] > .widget-header > .widget-toolbar .widget-menu > [data-action] {
color: #ffffff !important;
text-shadow: none !important;
}
html body [class*="widget-color-"] > .widget-header > .widget-toolbar > a:not(.btn):hover,
html body [class*="widget-color-"] > .widget-header > .widget-toolbar .widget-menu > a:not(.btn):hover,
html body [class*="widget-color-"] > .widget-header > .widget-toolbar > [data-action]:hover,
html body [class*="widget-color-"] > .widget-header > .widget-toolbar .widget-menu > [data-action]:hover {
color: var(--br-tint) !important;
}
/* petits boutons blancs DANS l'en-tête orange (épingle/croix de la barre de filtres) */
html body .widget-header .btn-white.btn-primary {
background-color: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.55) !important;
color: #ffffff !important;
}
html body .widget-header .btn-white.btn-primary:hover,
html body .widget-header .btn-white.btn-primary:focus {
background-color: #ffffff !important;
border-color: #ffffff !important;
color: var(--br-primary-d) !important;
}
/* =====================================================================
7. BARRE LATÉRALE (menu) — item actif / survol en orange
===================================================================== */
html body.skin-3 .nav-list > li.active > a,
html body.skin-3 .nav-list > li.active.highlight > a {
color: var(--br-primary-d) !important;
background-color: var(--br-tint) !important;
}
html body.skin-3 .nav-list > li:hover > a,
html body.skin-3 .nav-list > li.open > a,
html body.skin-3 .nav-list > li.open:hover > a {
color: var(--br-primary-d) !important;
}
/* le liseré vertical à gauche de l'item */
html body.skin-3 .nav-list > li.active:before {
background-color: var(--br-primary) !important;
}
html body.skin-3 .nav-list > li:hover:before,
html body.skin-3 .nav-list > li.open:before {
background-color: var(--br-accent) !important;
}
/* icônes du menu suivent la couleur */
html body.skin-3 .nav-list > li.active > a .menu-icon,
html body.skin-3 .nav-list > li:hover > a .menu-icon {
color: var(--br-primary-d) !important;
}
/* mode menu réduit (icônes seules) : pastille / flèche de l'item actif */
html body.skin-3 .sidebar.menu-min .nav-list > li.active > a > .menu-text,
html body.skin-3 .sidebar.responsive-min .nav-list > li.active > a > .menu-text {
background-color: var(--br-tint) !important;
border-color: var(--br-tint-2) !important;
color: var(--br-primary-d) !important;
}
html body.skin-3 .sidebar.menu-min .nav-list > li.active > .arrow:before,
html body.skin-3 .sidebar.responsive-min .nav-list > li.active > .arrow:before {
border-right-color: var(--br-primary) !important;
}
/* =====================================================================
8. CHAMPS DE FORMULAIRE — focus orange (au lieu du halo bleu)
===================================================================== */
html body .form-control:focus,
html body input[type="text"]:focus,
html body input[type="password"]:focus,
html body input[type="email"]:focus,
html body input[type="number"]:focus,
html body input[type="search"]:focus,
html body textarea:focus,
html body select:focus {
border-color: var(--br-accent) !important;
box-shadow: 0 0 0 2px rgba(255, 156, 37, 0.20) !important;
color: #444444 !important;
}
html body .input-icon > input:focus + .ace-icon {
color: var(--br-primary) !important;
}
/* recherche (loupe « Anomalie nº ») */
html body .nav-search .nav-search-input { border-color: var(--br-tint-2) !important; }
html body .nav-search .nav-search-input:focus,
html body .nav-search .nav-search-input:hover { border-color: var(--br-accent) !important; }
html body .nav-search .nav-search-icon { color: var(--br-primary) !important; }
/* =====================================================================
9. CASES À COCHER / BOUTONS RADIO (.ace) — coche orange
===================================================================== */
html body input[type=checkbox].ace:checked + .lbl::before,
html body input[type=radio].ace:checked + .lbl::before {
background-color: var(--br-primary) !important;
border-color: var(--br-primary) !important;
color: #ffffff !important;
}
html body input[type=checkbox].ace:hover + .lbl::before,
html body input[type=radio].ace:hover + .lbl::before,
html body input[type=checkbox].ace + .lbl:hover::before,
html body input[type=radio].ace + .lbl:hover::before {
border-color: var(--br-accent) !important;
}
/* =====================================================================
10. ONGLETS, PAGINATION, BARRES DE PROGRESSION, TYPEAHEAD, ÉTIQUETTES
(présents sur d'autres pages de l'app — recolorés par cohérence)
===================================================================== */
/* onglets */
html body .nav-tabs > li > a:hover { color: var(--br-primary-d) !important; }
html body .nav-tabs > li.active > a,
html body .nav-tabs > li.active > a:hover,
html body .nav-tabs > li.active > a:focus {
border-top: 2px solid var(--br-primary) !important;
color: var(--br-primary-d) !important;
}
/* pagination */
html body .pagination > li > a,
html body .pagination > li > span { color: var(--br-link) !important; }
html body .pagination > .active > a,
html body .pagination > .active > a:hover,
html body .pagination > .active > a:focus,
html body .pagination > .active > span {
background-color: var(--br-primary) !important;
border-color: var(--br-primary) !important;
color: #ffffff !important;
}
/* barre de progression « neutre » (on laisse success/danger/warning/info) */
html body .progress-bar:not(.progress-bar-success):not(.progress-bar-danger):not(.progress-bar-warning):not(.progress-bar-info) {
background-color: var(--br-primary) !important;
}
/* suggestions typeahead */
html body .tt-suggestion.tt-selectable:hover,
html body .tt-suggestion.tt-cursor {
background-color: var(--br-primary) !important;
color: #ffffff !important;
}
/* étiquette « primaire » -> orange (les statuts sémantiques restent intacts) */
html body .label-primary { background-color: var(--br-primary) !important; }
/* =====================================================================
NB : les couleurs des PRIORITÉS et STATUTS (rouge = élevé, etc.) ainsi
que les classes sémantiques .red / .green / .orange / .label-info ne
sont volontairement PAS modifiées — elles restent lisibles d'un coup
d'œil. Seuls les bleus « décoratifs » du thème ont été remplacés.
===================================================================== */
/* #####################################################################
FINITIONS MODERNES (« coquetteries »)
---------------------------------------------------------------------
Bloc 100 % optionnel : chaque sous-section est indépendante, tu peux
en retirer une sans casser le reste. Aucune incidence sur la structure
d'ACE, uniquement de la cosmétique (arrondis, ombres, espacements,
survols, transitions).
##################################################################### */
/* --- 11.a · Transitions globales douces ----------------------------- */
html body a,
html body .btn,
html body .form-control,
html body input,
html body select,
html body textarea,
html body .nav-list > li > a,
html body .table-hover > tbody > tr > td {
transition: color .15s ease, background-color .15s ease,
border-color .15s ease, box-shadow .15s ease,
transform .12s ease !important;
}
/* --- 11.b · Blocs en cartes (arrondi + ombre douce) ----------------- */
html body .widget-box {
border-radius: 7px !important;
box-shadow: 0 1px 2px rgba(20, 20, 40, .05),
0 4px 14px rgba(20, 20, 40, .06) !important;
border: 1px solid #C8CBD6 !important;
}
html body .widget-box[class*="widget-color-"] > .widget-header {
border-radius: 6px 6px 0 0 !important;
/* léger dégradé pour donner du relief à l'orange */
background: linear-gradient(180deg, #FF7038 0%, var(--br-primary) 55%, #F65B1B 100%) !important;
border-bottom: 0 !important;
}
/* le corps arrondit proprement le bas de la carte */
html body .widget-box > .widget-body {
border-radius: 0 0 7px 7px !important;
overflow: hidden !important;
}
/* un bloc replié garde ses 4 coins arrondis */
html body .widget-box.collapsed > .widget-header {
border-radius: 6px !important;
}
/* --- 11.c · Tableaux qui respirent / Affichage compact ---------------------------------- */
html body .table > thead > tr > th,
html body .table > tbody > tr > td {
padding-top: 6px !important; /* ← baisse cette valeur */
padding-bottom: 6px !important; /* ← baisse cette valeur */
line-height: 1.25 !important; /* défaut ≈ 1.45 */
border-color: #D8DCE4 !important;
vertical-align: middle !important;
}
/* en-têtes de colonnes : petites capitales espacées, sobres */
html body .table > thead > tr > th,
html body table .buglist-headers > th {
background-color: #EAECF2 !important;
border-bottom: 2px solid #C8CBD6 !important;
text-transform: uppercase;
letter-spacing: .04em;
font-size: 11px !important;
font-weight: 700 !important;
}
html body table .buglist-headers > th a {
text-transform: uppercase;
letter-spacing: .04em;
}
/* zébrage très discret */
html body .table-striped > tbody > tr:nth-of-type(odd) > td {
background-color: #F0F2F6 !important;
}
/* survol de ligne : lavis orange au lieu du gris */
html body .table-hover > tbody > tr:hover > td {
background-color: var(--br-tint) !important;
}
/* coins arrondis pour les tableaux autonomes (hors carte) */
html body .table-bordered {
border-radius: 6px !important;
overflow: hidden !important;
border-color: #C8CBD6 !important;
}
/* --- 11.d · Boutons : relief léger au survol ------------------------ */
html body .btn { border-radius: 5px; }
html body .btn-round,
html body .btn.btn-round { border-radius: 200px !important; }
html body .btn-primary:hover,
html body .btn-primary:focus:hover {
box-shadow: 0 3px 10px rgba(255, 99, 37, .35) !important;
transform: translateY(-1px);
}
html body .btn-white.btn-primary:hover {
box-shadow: 0 2px 8px rgba(255, 99, 37, .18) !important;
transform: translateY(-1px);
}
html body .btn:active { transform: translateY(0); }
/* --- 11.e · Champs de saisie & badges ------------------------------- */
html body .form-control,
html body input[type="text"],
html body input[type="password"],
html body input[type="email"],
html body input[type="number"],
html body input[type="search"],
html body textarea {
border-radius: 5px !important;
border-color: #C2C5CC !important;
}
html body select.input-xs,
html body input.input-xs { border-radius: 4px !important; }
html body .badge {
border-radius: 200px !important;
font-weight: 600 !important;
padding: 2px 8px !important;
}
/* --- 11.f · Menus déroulants flottants ------------------------------ */
html body .dropdown-menu {
border-radius: 8px !important;
border: 1px solid #C8CBD6 !important;
box-shadow: 0 8px 28px rgba(20, 20, 40, .14) !important;
padding: 5px !important;
overflow: hidden;
}
html body .dropdown-menu > li > a {
border-radius: 5px !important;
padding: 6px 12px !important;
}
html body .dropdown-menu > li > a:hover,
html body .dropdown-menu > li > a:focus {
background-color: var(--br-tint) !important;
color: var(--br-primary-d) !important;
}
/* --- 11.g · Barre latérale : item actif arrondi --------------------- */
html body.skin-3 .nav-list > li.active > a {
border-radius: 0 6px 6px 0 !important;
}
/* --- 11.h · Petites coquetteries ------------------------------------ */
/* barre de défilement fine et discrète, orangée au survol */
html body ::-webkit-scrollbar { width: 11px; height: 11px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb {
background: #A4A7B2;
border: 3px solid transparent;
border-radius: 20px;
background-clip: content-box;
}
html body ::-webkit-scrollbar-thumb:hover {
background: var(--br-accent);
background-clip: content-box;
}
/* sélection de texte teintée orange */
html body ::selection { background: var(--br-tint-2); color: #7A2E08; }
/* filet supérieur orange déjà présent sur la navbar : on adoucit l'ombre */
html body.skin-3 .navbar {
box-shadow: 0 2px 10px rgba(20, 20, 40, .12) !important;
}
/* --- Correctif : menu déroulant DANS un en-tête de bloc -------------
texte + icône lisibles (l'emporte sur les titres blancs) ---------- */
html body .widget-box[class*="widget-color-"] > .widget-header .dropdown-menu > li > a,
html body .widget-box[class*="widget-color-"] > .widget-header .dropdown-menu > li > a > .ace-icon,
html body .widget-box[class*="widget-color-"] > .widget-header .dropdown-menu > li > a .fa,
html body .widget-header .dropdown-menu > li > a {
color: #333333 !important;
}
html body .widget-box[class*="widget-color-"] > .widget-header .dropdown-menu > li > a:hover,
html body .widget-box[class*="widget-color-"] > .widget-header .dropdown-menu > li > a:focus,
html body .widget-box[class*="widget-color-"] > .widget-header .dropdown-menu > li > a:hover > .ace-icon,
html body .widget-box[class*="widget-color-"] > .widget-header .dropdown-menu > li > a:hover .fa {
color: var(--br-primary-d) !important;
}
/* =====================================================================
12. LISTE DES ANOMALIES — ajustements de colonnes
===================================================================== */
/* Masquer le crayon d'édition rapide (column-edit) pour tous les utilisateurs */
html body td.column-edit {
display: none !important;
}
html body th.column-edit {
display: none !important;
}
/* Numéro d'anomalie (column-id) : lien gris soutenu au lieu de l'orange primaire.
Spécificité intentionnellement élevée pour passer devant la règle section 4
(html body .main-content a:not(.btn):not(.resolved) — 3 classes, !important). */
html body .main-content td.column-id a:not(.btn):not(.resolved) {
color: #8f8b8b !important;
font-weight: 400 !important;
}
html body .main-content td.column-summary a:not(.btn):not(.resolved) {
color: #302e2e !important;
font-weight: 950 !important;
}
html body .main-content td.column-id a:not(.btn):not(.resolved):hover {
color: #222222 !important;
text-decoration: underline;
}
/* =====================================================================
13. NOTES PRIVÉES — fond ambré distinctif + liseré gauche orange
Dans MantisBT 2.x ACE, la classe « bugnote-private » est portée par
le | , PAS par le | .
On utilise :has() pour étendre le fond à la cellule auteur (td.category)
de la même ligne — supporté par tous les navigateurs modernes.
===================================================================== */
/* Toutes les cellules de la ligne contenant une note privée */
html body .table > tbody > tr:has(> td.bugnote-private) > td {
background-color: #FFF6DF !important;
}
/* Liseré gauche uniquement sur la cellule de contenu */
html body td.bugnote-private {
border-left: 3px solid var(--br-accent) !important;
}
/* Survol : toute la ligne */
html body .table-hover > tbody > tr:has(> td.bugnote-private):hover > td {
background-color: #FFEAB5 !important;
}
/* =====================================================================
14. PAGE DE CONNEXION — centrage du logo
===================================================================== */
html body .login-logo {
text-align: center !important;
margin: 0 auto 16px !important;
}
html body .login-logo img {
display: block !important;
margin: 0 auto !important;
}
/* =====================================================================
15. TICKETS CLOS / RÉSOLUS — lien .resolved dans le fil d'activité
===================================================================== */
/* Numéro de ticket clos : gris moyen + barré bien visible */
html body a.resolved {
color: #777777 !important;
text-decoration: line-through !important;
text-decoration-color: #777777 !important;
text-decoration-thickness: 2px !important;
font-weight: 400 !important;
}
html body a.resolved:hover {
color: #444444 !important;
text-decoration: line-through !important;
text-decoration-color: #444444 !important;
}
/* Ligne d'activité entière : légèrement atténuée si elle porte un ticket résolu */
html body .profile-activity:has(a.resolved) {
opacity: 0.82;
}
html body .profile-activity:has(a.resolved):hover {
opacity: 1;
transition: opacity .15s ease;
}
/* =====================================================================
16. CORRECTIF FINAL — boutons .btn-white dans les widget-toolbar
Texte orange lisible au survol quelle que soit la règle concurrente.
Placé en fin de fichier + spécificité élevée pour gagner la cascade.
===================================================================== */
html body .widget-toolbar a.btn.btn-white:hover,
html body .widget-toolbar a.btn.btn-white:focus,
html body .widget-toolbar .widget-menu a.btn.btn-white:hover,
html body .widget-toolbar .widget-menu a.btn.btn-white:focus {
color: var(--br-primary-d) !important;
background-color: #ffffff !important;
}
/* ============================================================
Section 17 : Lien "S'inscrire avec un nouveau compte"
À coller à la fin de custom.css, puis supprimer ce fichier.
============================================================ */
a.back-to-login-link {
font-size: 1.25rem; /* Marche pas --> bizarre */
color: #5b80b2;
text-decoration: none;
line-height: 2;
border-bottom: 1px dashed transparent;
transition: color 0.2s, border-color 0.2s;
}
a.back-to-login-link:hover {
color: #2e5785;
border-bottom-color: #2e5785;
}
/* ============================================================
Section 17 : LoginDocs — taille du texte des liens PDF
============================================================ */
#ld-block li a span {
font-size: 1.45rem; /* ajustez cette valeur */
}