From e6371ec197014a84c8e1eb8c8815840bf33c2674 Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Thu, 13 Mar 2025 09:47:10 +0000 Subject: [PATCH] Merge pull request #24260 from overleaf/mj-ide-rail-selected-states [web] Editor redesign: Update selected state for rail tabs GitOrigin-RevId: 4ce868c62a53355f8271db32884db0b2ed985d60 --- .../bootstrap-5/pages/editor/rail.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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 8410ae853a..6118473ef5 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss @@ -2,8 +2,8 @@ --ide-rail-background: var(--bg-dark-primary); --ide-rail-color: var(--content-primary-dark); --ide-rail-link-background: var(--bg-dark-primary); - --ide-rail-link-active-background: var(--bg-dark-secondary); - --ide-rail-link-active-indicator-background: var(--white); + --ide-rail-link-active-color: var(--green-10); + --ide-rail-link-active-background: var(--green-70); --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); @@ -11,10 +11,10 @@ @include theme('light') { --ide-rail-background: #fff; - --ide-rail-color: var(--neutral-90); + --ide-rail-color: var(--content-primary); --ide-rail-link-background: #fff; - --ide-rail-link-active-background: var(--neutral-10); - --ide-rail-link-active-indicator-background: var(--neutral-90); + --ide-rail-link-active-color: var(--green-70); + --ide-rail-link-active-background: var(--bg-accent-03); --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); @@ -64,7 +64,8 @@ overflow-y: hidden; &:hover, - &:visited { + &:visited, + &:focus { color: var(--ide-rail-color); } @@ -74,7 +75,7 @@ } &.open-rail { - color: var(--ide-rail-color); + color: var(--ide-rail-link-active-color); background-color: var(--ide-rail-link-active-background); &::after { @@ -88,9 +89,8 @@ box-sizing: border-box; width: 24px; height: $indicator-height * 2; - border: $indicator-height solid - var(--ide-rail-link-active-indicator-background); - background-color: var(--ide-rail-link-active-indicator-background); + border: $indicator-height solid var(--ide-rail-link-active-color); + background-color: var(--ide-rail-link-active-color); } }