From c183176fd3cf0b504efbae87d238f3b8b81f3fd2 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Wed, 9 Apr 2025 14:45:50 +0100
Subject: [PATCH] Merge pull request #24705 from
 overleaf/mj-ide-rail-hover-state

[web] Editor redesign: Add hover state colors to rail

GitOrigin-RevId: 9b4a19a913963fcd4b76cf24467b8c1ad6fb1fab
---
 .../stylesheets/bootstrap-5/pages/editor/rail.scss     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
index a4c38033f6..ffd0d78baa 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
@@ -4,6 +4,8 @@
   --ide-rail-link-background: var(--bg-dark-primary);
   --ide-rail-link-active-color: var(--green-10);
   --ide-rail-link-active-background: var(--green-70);
+  --ide-rail-link-hover-color: var(--content-primary-dark);
+  --ide-rail-link-hover-background: var(--bg-dark-secondary);
   --ide-rail-border-colour: var(--border-divider-dark);
   --ide-rail-header-subdued-button-color: var(--content-primary-dark);
   --ide-rail-header-subdued-button-hover-background: var(--bg-dark-tertiary);
@@ -15,6 +17,8 @@
   --ide-rail-link-background: #fff;
   --ide-rail-link-active-color: var(--green-70);
   --ide-rail-link-active-background: var(--bg-accent-03);
+  --ide-rail-link-hover-color: var(--content-primary);
+  --ide-rail-link-hover-background: var(--bg-light-secondary);
   --ide-rail-border-colour: var(--border-divider);
   --ide-rail-header-subdued-button-color: var(--content-primary);
   --ide-rail-header-subdued-button-hover-background: var(--bg-light-tertiary);
@@ -63,12 +67,16 @@
   position: relative;
   overflow-y: hidden;
 
-  &:hover,
   &:visited,
   &:focus {
     color: var(--ide-rail-color);
   }
 
+  &:hover {
+    color: var(--ide-rail-link-hover-color);
+    background-color: var(--ide-rail-link-hover-background);
+  }
+
   .ide-rail-tab-link-icon {
     line-height: 32px;
     font-size: 20px;