[ENHANCEMENT] Modernize `activity.css` — use GLPI 11 CSS variables and remove obsolete patterns

[giovanny07]

Plugin version: 3.2.6
GLPI version: 11.x
Priority: High
File: activity.css, public/activity.css

Summary

activity.css was written for GLPI 9/10 and contains several patterns that are incompatible with, or visually inconsistent in, GLPI 11's Bootstrap 5 / Tabler UI design system. This issue tracks the full CSS modernization.

Problems and fixes

1 — Hardcoded brand colors break GLPI themes and dark mode

/* ❌ Current */
.primary {
    background: #3A5693;
    color: white;
}
.options {
    color: #004F91;
}
a#showLateralMenuLink {
    /* inherits hardcoded colors from .primary */
}

/* ✅ Fix — use GLPI 11 CSS custom properties */
.primary {
    background: var(--glpi-mainmenu-bg, #3A5693);
    color: var(--glpi-mainmenu-fg, #ffffff);
}
.options {
    color: var(--glpi-mainmenu-bg, #004F91);
    cursor: pointer;
}

2 — Obsolete vendor-prefixed border-radius

/* ❌ Current — vendor prefixes not needed since 2012 */
.activity_menu {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
/* Same pattern in: .activity_message, .activity_tab_cadre, a.activity_href */

/* ✅ Fix — standard property only */
.activity_menu,
.activity_message,
.activity_tab_cadre,
a.activity_href {
    border-radius: 5px;
}

3 — a.activity_href uses Bootstrap 2 gradient button style

/* ❌ Current — Bootstrap 2/3 button aesthetics */
a.activity_href {
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
}

/* ✅ Fix — use Bootstrap 5 btn classes in PHP output instead,
   or simplify to a flat style consistent with GLPI 11 */
a.activity_href {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--tblr-border-color, #dee2e6);
    border-radius: var(--tblr-border-radius, 4px);
    background: var(--tblr-btn-bg, #f8f9fa);
    color: var(--tblr-body-color, #333);
    cursor: pointer;
    text-decoration: none;
}
a.activity_href:hover {
    background: var(--tblr-btn-hover-bg, #e9ecef);
}

4 — .slidepanel z-index conflicts with GLPI 11 modals

/* ❌ Current */
.slidepanel {
    z-index: 9999;
    position: absolute;
    /* ... */
}

/* GLPI 11 modal z-index values:
   .modal-backdrop: 1040
   .modal:          1050
   .toast:          1080
   Sidebar:         1030  */

/* ✅ Fix — use a z-index that sits above the sidebar but below modals */
.slidepanel {
    z-index: 1035;  /* above sidebar (1030), below modal backdrop (1040) */
    position: fixed; /* fixed instead of absolute for correct viewport anchoring */
    /* ... */
}

5 — Fixed pixel width on message container

/* ❌ Current */
.activity_message_container {
    width: 950px;
}

/* ✅ Fix */
.activity_message_container {
    max-width: 950px;
    width: 100%;
}

6 — .plugin_activity_button padding inconsistency

/* ❌ Current — !important overrides Bootstrap 5 */
.plugin_activity_button {
    margin: 5px;
    padding: 10px !important;
}

/* ✅ Fix — use Bootstrap 5 utility classes in the PHP/Twig output:
   class="btn btn-secondary m-1"
   Remove .plugin_activity_button entirely or reduce to: */
.plugin_activity_button {
    margin: 0.25rem;
}

Full replacement suggestion for activity.css

After the changes above, also scope all selectors under a plugin root class to avoid any future global conflicts:

/* All plugin styles scoped to avoid global collisions */
.plugin-activity .activity_menu { ... }
.plugin-activity .slidepanel { ... }
/* etc. */

And add the root class to the plugin's main container in PHP:

echo "<div class='plugin-activity'>";
// ... all plugin output
echo "</div>";

Checklist

• Replace hardcoded hex colors with CSS variables
• Remove all vendor-prefixed border-radius instances
• Replace Bootstrap 2 gradient on a.activity_href with Bootstrap 5 style
• Fix .slidepanel z-index to 1035 and change position: absolute → fixed
• Fix .activity_message_container to max-width
• Remove body { position: relative } (tracked separately in B7/B8)
• Remove !important from .plugin_activity_button
• Consider scoping all selectors under .plugin-activity