LearnNewsExamplesServices
Frontmatter
id8032
titleAdd Glow and Transition to Cyberpunk Grid Header Buttons
stateClosed
labels
enhancementdesignai
assigneestobiu
createdAtDec 5, 2025, 3:07 AM
updatedAtDec 5, 2025, 3:19 AM
githubUrlhttps://github.com/neomjs/neo/issues/8032
authortobiu
commentsCount1
parentIssue7918
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtDec 5, 2025, 3:19 AM

Add Glow and Transition to Cyberpunk Grid Header Buttons

Closed v11.16.0 enhancementdesignai
tobiu
tobiu commented on Dec 5, 2025, 3:07 AM

Add box-shadow glow and transition effects to grid header buttons in neo-theme-cyberpunk to match the application's toolbar aesthetics.

Requirements:

  1. Modify resources/scss/src/grid/header/Button.scss:

    • Add box-shadow: var(--grid-header-button-box-shadow-hover) to the :hover state.
    • Add transition: var(--grid-header-button-transition) to the base state.
  2. Update Themes:

    • theme-cyberpunk:
      • --grid-header-button-box-shadow-hover: 0 0 10px var(--cyber-cyan)
      • --grid-header-button-transition: all 0.3s ease-out (Per user feedback)
    • theme-dark / theme-light / theme-neo-light:
      • --grid-header-button-box-shadow-hover: none
      • --grid-header-button-transition: none (or maintain existing if any, usually none for these components)

Goal: Create a consistent "neon" interactive feel across the AgentOS UI.

tobiu added the enhancement label on Dec 5, 2025, 3:07 AM
tobiu added the design label on Dec 5, 2025, 3:07 AM
tobiu added the ai label on Dec 5, 2025, 3:07 AM
tobiu added parent issue #7918 on Dec 5, 2025, 3:07 AM
tobiu assigned to @tobiu on Dec 5, 2025, 3:08 AM
tobiu referenced in commit 8c6c6d9 - "Add Glow and Transition to Cyberpunk Grid Header Buttons #8032" on Dec 5, 2025, 3:13 AM
tobiu
tobiu Dec 5, 2025, 3:13 AM

Input from Gemini 2.5 pro:

✦ I have added the glow and transition effects to the grid header buttons for the Cyberpunk theme.

Implementation:

  1. Source (src/grid/header/Button.scss): Added variables --grid-header-button-transition (base) and --grid-header-button-box-shadow-hover (hover).
  2. Cyberpunk Theme: Configured to all 0.3s ease-out and 0 0 10px var(--cyber-cyan).
  3. Standard Themes: Configured to none to maintain existing behavior.

This completes the header interactivity enhancements.

tobiu closed this issue on Dec 5, 2025, 3:19 AM