github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-20 01:53:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #24260 from overleaf/mj-ide-rail-selected-states

Browse source 
[web] Editor redesign: Update selected state for rail tabs

GitOrigin-RevId: 4ce868c62a53355f8271db32884db0b2ed985d60
This commit is contained in:
Mathias Jakobsen 2025-03-13 09:47:10 +00:00 • committed by Copybot
parent 971c63a636
commit e6371ec197
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
View file

@ -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);
}
}