From 0397b022145a43a933133c7f289694f10a9b3031 Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Tue, 10 Jun 2025 13:26:38 +0100 Subject: [PATCH] Merge pull request #26221 from overleaf/mj-history-dark-mode-entries [web] Editor redesign: Add dark mode to history entries GitOrigin-RevId: 16c9743bdee85dc3825ce6e9901a0107956205ca --- .../bootstrap-5/pages/editor/history.scss | 91 ++++++++++++++----- 1 file changed, 68 insertions(+), 23 deletions(-) diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss index 1a73840fb4..db59639cd1 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss @@ -3,18 +3,53 @@ --history-react-header-bg: var(--bg-dark-secondary); --history-react-header-color: var(--content-primary-dark); --history-react-separator-color: var(--border-divider-dark); + --history-change-list-bg: var(--bg-light-primary); + --history-change-entry-color: var(--content-primary); + --history-change-entry-metadata-color: var(--content-secondary); + --history-change-list-divider: var(--border-divider); + --history-change-entry-hover-bg: var(--bg-light-secondary); + --history-loading-bg: var(--bg-light-secondary); + --history-change-entry-dropdown-button-bg: rgb(var(--bg-dark-primary) 0.08); + --history-change-entry-border-color: var(--green-50); + --history-change-entry-within-selected-bg: var(--bg-light-secondary); + --history-change-entry-within-selected-hover-bg: rgb($neutral-90, 8%); + --history-change-list-gradient: linear-gradient(black 35%, transparent); + --history-change-entry-selected-bg: var(--bg-accent-03); + --history-change-entry-selected-hover-bg: rgb($green-70, 16%); } @include theme('light') { --history-react-header-bg: var(--bg-light-primary); --history-react-header-color: var(--content-primary); --history-react-separator-color: var(--border-divider); + + .ide-redesign-main { + --history-change-entry-within-selected-bg: var(--bg-light-secondary); + --history-change-entry-within-selected-hover-bg: rgb(var(--neutral-90) 8%); + --history-change-entry-selected-bg: var(--bg-accent-03); + --history-change-entry-selected-hover-bg: rgb(var(--green-70 0.16)); + } } .ide-redesign-main { --history-react-header-bg: var(--bg-primary-themed); --history-react-header-color: var(--content-primary-themed); --history-react-icon-color: var(--file-tree-item-color); + --history-loading-bg: var(--bg-secondary-themed); + --history-change-list-gradient: linear-gradient(black 35%, transparent); + --history-change-list-bg: var(--bg-primary-themed); + --history-change-list-divider: var(--border-divider-themed); + --history-change-entry-metadata-color: var(--content-secondary-themed); + --history-change-entry-color: var(--content-primary-themed); + --history-change-entry-hover-bg: var(--bg-secondary-themed); + --history-change-entry-border-color: var(--green-50); + --history-change-entry-dropdown-button-bg: rgb(var(--bg-dark-primary) 0.08); + + // Dark mode specific variables + --history-change-entry-within-selected-bg: var(--neutral-80); + --history-change-entry-within-selected-hover-bg: rgb(var(--white) 0.08); + --history-change-entry-selected-bg: var(--green-70); + --history-change-entry-selected-hover-bg: rgb(var(--green-60) 0.08); .history-file-tree { ul.history-file-tree-list { @@ -83,7 +118,7 @@ history-root { display: flex; justify-content: center; height: 100%; - background-color: var(--bg-light-primary); + background-color: var(--history-change-list-bg); .history-header { @include body-sm; @@ -163,7 +198,7 @@ history-root { } .history-version-day { - background-color: white; + background-color: var(--history-change-list-bg); position: sticky; z-index: 1; top: 0; @@ -183,51 +218,56 @@ history-root { cursor: pointer; &:hover { - background-color: var(--bg-light-secondary); + background-color: var(--history-change-entry-hover-bg); } } &.history-version-selected { - background-color: var(--bg-accent-03); - border-left: var(--spacing-02) solid var(--green-50); + background-color: var(--history-change-entry-selected-bg); + border-left: var(--spacing-02) solid + var(--history-change-entry-border-color); padding-left: calc( var(--history-change-list-padding) - var(--spacing-02) ); } &.history-version-selected.history-version-selectable:hover { - background-color: rgb($green-70, 16%); - border-left: var(--spacing-02) solid var(--green-50); + background-color: var(--history-change-entry-selected-hover-bg); + border-left: var(--spacing-02) solid + var(--history-change-entry-border-color); } &.history-version-within-selected { - background-color: var(--bg-light-secondary); - border-left: var(--spacing-02) solid var(--green-50); + background-color: var(--history-change-entry-within-selected-bg); + border-left: var(--spacing-02) solid + var(--history-change-entry-border-color); } &.history-version-within-selected:hover { - background-color: rgb($neutral-90, 8%); + background-color: var(--history-change-entry-within-selected-hover-bg); } } .history-version-main-details { - color: var(--content-primary); + color: var(--history-change-entry-color); } .version-element-within-selected { - background-color: var(--bg-light-secondary); - border-left: var(--spacing-02) solid var(--green-50); + background-color: var(--history-change-entry-within-selected-bg); + border-left: var(--spacing-02) solid + var(--history-change-entry-border-color); } .version-element-selected { - background-color: var(--bg-accent-03); - border-left: var(--spacing-02) solid var(--green-50); + background-color: var(--history-change-entry-selected-bg); + border-left: var(--spacing-02) solid + var(--history-change-entry-border-color); } .history-version-metadata-time { display: block; margin-bottom: var(--spacing-02); - color: var(--content-primary); + color: var(--history-change-entry-color); &:last-child { margin-bottom: initial; @@ -282,7 +322,7 @@ history-root { .history-version-metadata-users, .history-version-origin, .history-version-saved-by { - color: var(--content-secondary); + color: var(--history-change-entry-metadata-color); } .history-version-change-action { @@ -290,7 +330,7 @@ history-root { } .history-version-change-doc { - color: var(--content-primary); + color: var(--history-change-entry-color); overflow-wrap: anywhere; white-space: pre-wrap; } @@ -301,7 +341,7 @@ history-root { .history-version-divider { margin: 0; - border-color: var(--border-divider); + border-color: var(--history-change-list-divider); } .history-version-badge { @@ -332,7 +372,7 @@ history-root { position: sticky; bottom: 0; padding: var(--spacing-05) 0; - background-color: var(--bg-light-secondary); + background-color: var(--history-loading-bg); text-align: center; } @@ -344,7 +384,7 @@ history-root { .dropdown.open { .history-version-dropdown-menu-btn { - background-color: rgb(var(--bg-dark-primary) 0.08); + background-color: var(--history-change-entry-dropdown-button-bg); box-shadow: initial; } } @@ -354,6 +394,7 @@ history-root { @include reset-button; @include action-button; + color: var(--history-change-entry-color); padding: 0; width: 30px; height: 30px; @@ -400,7 +441,7 @@ history-root { .history-version-faded .history-version-details { max-height: 6em; - @include mask-image(linear-gradient(black 35%, transparent)); + @include mask-image(var(--history-change-list-gradient)); overflow: hidden; } @@ -470,7 +511,7 @@ history-root { } .history-dropdown-icon { - color: var(--content-primary); + color: var(--history-change-entry-color); } .history-dropdown-icon-inverted { @@ -605,3 +646,7 @@ history-root { .history-error { padding: var(--spacing-06); } + +.doc-container { + background: var(--bg-light-primary); +}