alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #23925 from overleaf/mj-ide-dark-mode

Browse Source 
[web] Editor Redesign: Add dark mode

GitOrigin-RevId: 063552ee3c1647e8ae090852868b01d372845b87
This commit is contained in:
Mathias Jakobsen
2025-03-05 09:05:30 +00:00
committed by Copybot
parent 5010c91c79
commit d63221d8b6
17 changed files with 281 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/ide-redesign/components/rail.tsx
+5 -1
View File
@@ -241,7 +241,11 @@ export const RailPanelHeader: FC<{ title: string }> = ({ title }) => {
return (
<header className="rail-panel-header">
<h4 className="rail-panel-title">{title}</h4>
<OLButton onClick={handlePaneCollapse} variant="ghost" size="sm">
<OLButton
onClick={handlePaneCollapse}
className="rail-panel-header-button-subdued"
size="sm"
>
<MaterialIcon type="close" />
</OLButton>
</header>
services/web/frontend/js/features/ide-redesign/components/toolbar/change-layout-button.tsx
-1
View File
@@ -17,7 +17,6 @@ const LayoutDropdownToggleButton = forwardRef<
return (
<OLButton
size="sm"
variant="ghost"
className="ide-redesign-toolbar-button-subdued"
ref={ref}
onClick={onClick}
services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx
+6 -6
View File
@@ -15,7 +15,7 @@ export const ToolbarMenuBar = () => {
<MenuBarDropdown
title={t('file')}
id="file"
className="ide-redesign-toolbar-dropdown-toggle-subdued"
className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
>
<MenuBarOption title="New File" />
<MenuBarOption title="New Project" />
@@ -23,7 +23,7 @@ export const ToolbarMenuBar = () => {
<MenuBarDropdown
title={t('edit')}
id="edit"
className="ide-redesign-toolbar-dropdown-toggle-subdued"
className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
>
<MenuBarOption title="Undo" />
<MenuBarOption title="Redo" />
@@ -35,14 +35,14 @@ export const ToolbarMenuBar = () => {
<MenuBarDropdown
title={t('view')}
id="view"
className="ide-redesign-toolbar-dropdown-toggle-subdued"
className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
>
<ChangeLayoutOptions />
</MenuBarDropdown>
<MenuBarDropdown
title={t('insert')}
id="insert"
className="ide-redesign-toolbar-dropdown-toggle-subdued"
className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
>
<MenuBarOption title="Insert figure" />
<MenuBarOption title="Insert table" />
@@ -52,14 +52,14 @@ export const ToolbarMenuBar = () => {
<MenuBarDropdown
title={t('format')}
id="format"
className="ide-redesign-toolbar-dropdown-toggle-subdued"
className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
>
<MenuBarOption title="Bold text" />
</MenuBarDropdown>
<MenuBarDropdown
title={t('help')}
id="help"
className="ide-redesign-toolbar-dropdown-toggle-subdued"
className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
>
<MenuBarOption title="Keyboard shortcuts" />
<MenuBarOption title="Documentation" />
services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx
+1 -2
View File
@@ -16,8 +16,7 @@ export const ToolbarProjectTitle = () => {
<Dropdown align="start">
<DropdownToggle
id="project-title-options"
className="ide-redesign-toolbar-dropdown-toggle-subdued fw-bold"
variant="secondary"
className="ide-redesign-toolbar-dropdown-toggle-subdued fw-bold ide-redesign-toolbar-button-subdued"
>
{name}
<MaterialIcon
services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
+1 -5
View File
@@ -29,11 +29,7 @@ const ToolbarMenus = () => {
<div className="ide-redesign-toolbar-menu">
<div className="ide-redesign-toolbar-home-button">
<a href="/project" className="ide-redesign-toolbar-home-link">
<img
className="toolbar-ol-logo"
src="/img/ol-brand/overleaf-o-dark.svg"
alt={t('overleaf_logo')}
/>
<span className="toolbar-ol-logo" aria-label={t('overleaf_logo')} />
<MaterialIcon type="home" className="toolbar-ol-home-button" />
</a>
</div>
services/web/frontend/stylesheets/bootstrap-5/components/integrations-panel.scss
+27 -7
View File
@@ -1,15 +1,35 @@
:root {
--integrations-panel-bg: var(--bg-dark-primary);
--integrations-panel-color: var(--content-primary-dark);
--integrations-panel-description-color: var(--content-secondary-dark);
--integrations-panel-card-border: var(--border-divider-dark);
--integrations-panel-card-button-hover-background: var(--bg-dark-secondary);
--integrations-panel-card-button-background: var(--bg-dark-primary);
}
@include theme('light') {
--integrations-panel-bg: var(--white);
--integrations-panel-color: var(--content-primary);
--integrations-panel-description-color: var(--content-secondary);
--integrations-panel-card-border: var(--border-divider);
--integrations-panel-card-button-hover-background: var(--bg-light-secondary);
--integrations-panel-card-button-background: var(--white);
}
.integrations-panel {
background-color: var(--white);
background-color: var(--integrations-panel-bg);
height: 100%;
}
.integrations-panel-card-button {
all: unset;
background-color: var(--white);
background-color: var(--integrations-panel-card-button-background);
width: 100%;
&:hover {
background-color: var(--bg-light-secondary) !important;
background-color: var(
--integrations-panel-card-button-hover-background
) !important;
}
}
@@ -18,7 +38,7 @@
margin: 0 var(--spacing-04);
padding: var(--spacing-04) 0;
gap: var(--spacing-04);
border-bottom: 1px solid var(--border-divider);
border-bottom: 1px solid var(--integrations-panel-card-border);
}
.integrations-panel-card-header {
@@ -43,17 +63,17 @@
}
.integrations-panel-card-premium-badge {
color: var(--content-primary);
color: var(--integrations-panel-color);
font-weight: 600;
}
.integrations-panel-card-title {
font-size: var(--font-size-02);
color: var(--content-primary);
color: var(--integrations-panel-color);
}
.integrations-panel-card-description {
font-size: var(--font-size-01);
color: var(--content-secondary);
color: var(--integrations-panel-description-color);
margin-bottom: 0;
}
services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss
+25 -13
View File
@@ -11,6 +11,18 @@
--chat-message-name-color: var(--white);
}
.ide-redesign-main {
--chat-bg: var(--bg-dark-primary);
--chat-color: var(--content-primary);
--chat-instructions-color: var(--content-primary-dark);
--chat-new-message-bg: var(--bg-dark-primary);
--chat-new-message-textarea-color: var(--content-primary-dark);
--chat-new-message-textarea-bg: var(--bg-dark-primary);
--chat-message-date-color: var(--content-secondary-dark);
--chat-message-name-color: var(--content-secondary-dark);
--chat-date-align: center;
}
@include theme('light') {
--chat-bg: var(--white);
--chat-color: var(--neutral-70);
@@ -22,20 +34,20 @@
--chat-new-message-border: var(--editor-border-color);
--chat-message-date-color: var(--neutral-70);
--chat-message-name-color: var(--neutral-70);
}
.ide-redesign-main {
--chat-bg: var(--white);
--chat-color: var(--neutral-70);
--chat-instructions-color: var(--neutral-70);
--chat-new-message-bg: var(--white);
--chat-new-message-textarea-color: var(--neutral-90);
--chat-new-message-textarea-bg: var(--white);
--chat-new-message-textarea-border: var(--editor-border-color);
--chat-new-message-border: var(--white);
--chat-message-date-color: var(--neutral-70);
--chat-message-name-color: var(--neutral-70);
--chat-date-align: center;
.ide-redesign-main {
--chat-bg: var(--white);
--chat-color: var(--neutral-70);
--chat-instructions-color: var(--neutral-70);
--chat-new-message-bg: var(--neutral-10);
--chat-new-message-textarea-color: var(--neutral-90);
--chat-new-message-textarea-bg: var(--white);
--chat-new-message-textarea-border: var(--editor-border-color);
--chat-new-message-border: var(--white);
--chat-message-date-color: var(--neutral-70);
--chat-message-name-color: var(--neutral-70);
--chat-date-align: center;
}
}
.chat {
services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-tree.scss
+32 -11
View File
@@ -20,20 +20,35 @@
--file-tree-item-dragging-bg: #{rgb($bg-light-tertiary, 0.9)};
--file-tree-item-dragging-color: var(--content-secondary);
--file-tree-item-dragging-preview-colour: var(--bg-light-primary);
.ide-redesign-main {
--file-tree-item-hover-bg: var(--bg-light-secondary);
--file-tree-item-selected-bg: var(--bg-dark-primary);
--file-tree-item-selected-color: var(--white);
--file-tree-item-color: var(--content-primary);
--file-tree-bg: var(--white);
--file-tree-icon-colour: var(--content-primary);
--file-tree-item-dragging-bg: #{rgb($bg-dark-primary, 0.9)};
--file-tree-item-dragging-color: var(--white);
--file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
--file-tree-item-dragging-preview-colour: #{rgb($content-primary, 0.6)};
--file-tree-expand-button-color: var(--content-primary);
}
}
// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
.ide-redesign-main {
--file-tree-item-hover-bg: var(--bg-light-secondary);
--file-tree-item-selected-bg: var(--bg-dark-primary);
--file-tree-item-selected-color: var(--white);
--file-tree-item-color: var(--content-primary);
--file-tree-bg: var(--white);
--file-tree-icon-colour: var(--content-primary);
--file-tree-item-dragging-bg: #{rgb($bg-dark-primary, 0.9)};
--file-tree-item-dragging-color: var(--white);
--file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
--file-tree-item-dragging-preview-colour: #{rgb($content-primary, 0.6)};
--file-tree-item-hover-bg: var(--bg-dark-secondary);
--file-tree-item-selected-bg: var(--green-70);
--file-tree-item-selected-color: var(--green-10);
--file-tree-item-color: var(--content-primary-dark);
--file-tree-bg: var(--bg-dark-primary);
--file-tree-icon-colour: var(--content-primary-dark);
--file-tree-item-dragging-bg: #{rgb($bg-light-primary, 0.9)};
--file-tree-item-dragging-color: var(--content-secondary);
--file-tree-item-dragging-preview-bg: var(--bg-light-primary);
--file-tree-item-dragging-preview-colour: var(--bg-light-primary);
--file-tree-expand-button-color: var(--content-primary-dark);
.file-tree-outline-panel-group {
background-color: var(--file-tree-bg);
@@ -56,7 +71,7 @@
.file-tree-expand-collapse-button {
border-radius: var(--border-radius-base);
color: var(--outline-content-color);
color: var(--file-tree-expand-button-color);
display: flex;
align-items: center;
background-color: transparent;
@@ -69,6 +84,7 @@
}
h4 {
color: var(--file-tree-expand-button-color);
font-size: var(--font-size-02);
margin: 0;
font-weight: normal;
@@ -80,6 +96,7 @@
}
.file-tree-toolbar-action-button {
color: var(--file-tree-expand-button-color);
padding: var(--spacing-02);
border-radius: var(--border-radius-full);
@@ -87,6 +104,10 @@
background-color: var(--file-tree-item-hover-bg);
}
&:active {
color: var(--file-tree-expand-button-color);
}
.material-symbols {
font-size: 16px;
}
services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss
+18 -3
View File
@@ -1,17 +1,32 @@
:root {
--ide-redesign-background: var(--bg-dark-primary);
--ide-redesign-color: var(--content-primary-dark);
--ide-redesign-resizing-background: var(--bg-dark-primary);
}
@include theme('light') {
--ide-redesign-background: var(--bg-light-primary);
--ide-redesign-color: var(--content-primary);
--ide-redesign-resizing-background: var(--white);
}
.ide-redesign-body {
display: flex;
flex-grow: 1;
background-color: var(--bg-light-secondary);
background-color: var(--ide-redesign-background);
color: var(--ide-redesign-color);
overflow-y: hidden;
z-index: 0;
}
.ide-redesign-main {
--editor-resizer-bg-color: var(--bg-light-tertiary);
height: 100%;
display: flex;
flex-direction: column;
.ide-panel-group-resizing {
background-color: var(--ide-redesign-resizing-background);
}
}
.ide-skeleton-block {
services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
+6
View File
@@ -13,6 +13,10 @@ $editor-toggler-bg-dark-color: color.adjust(
@include theme('light') {
--editor-toggler-bg-color: var(--content-disabled);
--editor-resizer-bg-color: var(--bg-light-tertiary);
.ide-redesign-main {
--editor-resizer-bg-color: var(--bg-light-tertiary);
}
}
#ide-root {
@@ -46,6 +50,8 @@ $editor-toggler-bg-dark-color: color.adjust(
}
.ide-redesign-main {
--editor-resizer-bg-color: var(--bg-dark-tertiary);
.ide-panel-group-resizing {
background-color: var(--white);
services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss
+9 -4
View File
@@ -2,12 +2,16 @@
--logs-pane-bg: var(--bg-dark-secondary);
}
@include theme('light') {
--logs-pane-bg: var(--bg-light-secondary);
.ide-redesign-main {
--logs-pane-bg: var(--bg-dark-primary);
}
.ide-redesign-main {
--logs-pane-bg: #fff;
@include theme('light') {
--logs-pane-bg: var(--bg-light-secondary);
.ide-redesign-main {
--logs-pane-bg: #fff;
}
}
.logs-pane {
@@ -151,6 +155,7 @@
}
background-color: var(--bg-light-primary);
color: var(--content-primary);
padding: var(--spacing-04);
}
services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss
+32 -15
View File
@@ -6,7 +6,8 @@
--outline-line-guide-color: var(--border-primary);
--outline-container-color-bg: var(--bg-dark-tertiary);
--outline-content-color: var(--content-primary-dark);
--outline-item-highlight-color: var(--neutral-60);
--outline-item-highlight-bg: var(--neutral-60);
--outline-item-highlight-color: var(--content-primary-dark);
--outline-item-carat-color: var(--content-disabled);
}
@@ -18,24 +19,39 @@
--outline-line-guide-color: var(--border-disabled);
--outline-container-color-bg: var(--bg-light-primary);
--outline-content-color: var(--content-secondary);
--outline-item-highlight-color: var(--bg-light-secondary);
--outline-item-highlight-bg: var(--bg-light-secondary);
--outline-item-highlight-color: var(--content-secondary);
--outline-item-carat-color: var(--content-disabled);
.ide-redesign-main {
--outline-bg-color: var(--bg-light-primary);
--outline-item-hover-bg: var(--bg-light-secondary);
--outline-header-hover-bg: var(--bg-light-secondary);
--outline-content-color: var(--content-primary);
--outline-item-highlight-bg: var(--bg-light-secondary);
--outline-item-highlight-color: var(--content-primary);
--outline-item-carat-color: var(--content-primary);
--outline-line-guide-color: color-mix(
in srgb,
var(--border-primary) 24%,
transparent
);
--outline-container-color-bg: var(--bg-light-primary);
}
}
// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
.ide-redesign-main {
--outline-bg-color: var(--bg-light-primary);
--outline-item-hover-bg: var(--bg-light-secondary);
--outline-header-hover-bg: var(--bg-light-secondary);
--outline-content-color: var(--content-primary);
--outline-item-highlight-color: var(--bg-light-secondary);
--outline-item-carat-color: var(--content-primary);
--outline-line-guide-color: color-mix(
in srgb,
var(--border-primary) 24%,
transparent
);
--outline-container-color-bg: var(--bg-light-primary);
--outline-bg-color: var(--bg-dark-primary);
--outline-border-color: var(--border-disabled-dark);
--outline-header-hover-bg: var(--bg-dark-primary);
--outline-item-hover-bg: var(--bg-dark-secondary);
--outline-line-guide-color: var(--border-primary);
--outline-container-color-bg: var(--bg-dark-primary);
--outline-content-color: var(--content-primary-dark);
--outline-item-highlight-bg: var(--green-70);
--outline-item-highlight-color: var(--green-10);
--outline-item-carat-color: var(--content-disabled);
.file-outline-panel {
min-height: 36px;
@@ -298,7 +314,8 @@
}
.outline-item-link-highlight {
background-color: var(--outline-item-highlight-color);
background-color: var(--outline-item-highlight-bg);
color: var(--outline-item-highlight-color);
}
.outline-caret-icon {
services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss
+21 -3
View File
@@ -1,3 +1,19 @@
:root {
--pdf-error-state-info-box-color: var(--content-primary-dark);
--pdf-error-state-info-box-background: var(--bg-dark-primary);
--pdf-error-state-info-box-border: var(--border-divider-dark);
--pdf-error-state-label-color: var(--content-primary-dark);
--pdf-error-state-description-color: var(--content-secondary-dark);
}
@include theme('light') {
--pdf-error-state-info-box-color: var(--content-primary);
--pdf-error-state-info-box-background: var(--bg-light-primary);
--pdf-error-state-info-box-border: var(--border-divider);
--pdf-error-state-label-color: var(--content-primary);
--pdf-error-state-description-color: var(--content-secondary);
}
.pdf-error-state {
position: absolute;
inset: var(--toolbar-small-height) 0 0 0;
@@ -41,20 +57,22 @@
.pdf-error-state-label {
font-size: var(--font-size-02);
color: var(--pdf-error-state-label-color);
font-weight: 600;
margin-bottom: 0;
}
.pdf-error-state-description {
color: var(--content-secondary);
color: var(--pdf-error-state-description-color);
font-size: var(--font-size-02);
margin-bottom: 0;
}
.pdf-error-state-info-box {
background-color: var(--bg-light-primary);
background-color: var(--pdf-error-state-info-box-background);
color: var(--pdf-error-state-info-box-color);
padding: var(--spacing-06);
border: 1px solid var(--border-divider);
border: 1px solid var(--pdf-error-state-info-box-border);
border-radius: var(--border-radius-base);
}
services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss
+6
View File
@@ -6,6 +6,10 @@
@include theme('light') {
--pdf-toolbar-btn-hover-color: var(--neutral-10);
.ide-redesign-main {
--pdf-bg: var(--neutral-10);
}
}
.pdf .toolbar.toolbar-pdf {
@@ -155,6 +159,8 @@
}
.ide-redesign-main {
--pdf-bg: var(--bg-dark-secondary);
.pdf-viewer {
.pdfjs-viewer {
.page {
services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
+32 -2
View File
@@ -1,9 +1,23 @@
:root {
--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-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);
}
@include theme('light') {
--ide-rail-background: #fff;
--ide-rail-color: var(--neutral-90);
--ide-rail-link-background: #fff;
--ide-rail-link-active-background: var(--neutral-10);
--ide-rail-link-active-indicator-background: var(--neutral-90);
--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);
}
.rail-panel-header {
@@ -12,11 +26,22 @@
align-items: center;
padding: var(--spacing-03) var(--spacing-04);
background-color: var(--ide-rail-background);
.rail-panel-header-button-subdued {
@include ol-button-variant(
var(--ide-rail-header-subdued-button-color),
transparent,
transparent,
var(--ide-rail-header-subdued-button-hover-background),
transparent,
true
);
}
}
.rail-panel-title {
font-size: var(--font-size-02);
color: var(--content-primary);
color: var(--ide-rail-color);
margin-bottom: 0;
}
@@ -38,6 +63,11 @@
position: relative;
overflow-y: hidden;
&:hover,
&:visited {
color: var(--ide-rail-color);
}
.ide-rail-tab-link-icon {
line-height: 32px;
font-size: 20px;
@@ -75,7 +105,7 @@
height: 100%;
padding: var(--spacing-02);
background: var(--ide-rail-background);
border-right: 1px solid var(--border-divider);
border-right: 1px solid var(--ide-rail-border-colour);
}
.ide-rail-content {
services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
+40 -9
View File
@@ -1,7 +1,23 @@
@use 'sass:math';
:root {
--toolbar-home-button-hover-background: var(--neutral-20);
--redesign-toolbar-home-button-hover-background: var(--bg-dark-secondary);
--redesign-toolbar-border-divider: var(--border-divider-dark);
--redesign-toolbar-background: var(--bg-dark-primary);
--redesign-toolbar-home-link-color: var(--content-primary-dark);
--redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-white.svg');
--redesign-subdued-button-color: var(--content-primary-dark);
--redesign-subdued-button-hover-background: var(--bg-dark-tertiary);
}
@include theme('light') {
--redesign-toolbar-home-button-hover-background: var(--neutral-20);
--redesign-toolbar-border-divider: var(--border-divider);
--redesign-toolbar-background: var(--bg-light-primary);
--redesign-toolbar-home-link-color: var(--content-primary);
--redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-dark.svg');
--redesign-subdued-button-color: var(--content-primary);
--redesign-subdued-button-hover-background: var(--bg-light-tertiary);
}
.ide-redesign-toolbar {
@@ -10,7 +26,8 @@
$ol-icon-height: 24px;
$home-icon-font-size: 24px;
border-bottom: 1px solid var(--border-divider);
border-bottom: 1px solid var(--redesign-toolbar-border-divider);
background-color: var(--redesign-toolbar-background);
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -28,6 +45,19 @@
margin: math.div($toolbar-height - $home-button-size, 2);
}
.ide-redesign-toolbar-button-subdued {
@include ol-button-variant(
var(--redesign-subdued-button-color),
transparent,
transparent,
var(--redesign-subdued-button-hover-background),
transparent,
true
);
text-decoration: none;
}
.ide-redesign-toolbar-home-link {
display: flex;
height: 100%;
@@ -36,6 +66,7 @@
flex-direction: column;
text-align: center;
border-radius: 100%;
color: var(--redesign-toolbar-home-link-color);
.toolbar-ol-home-button {
display: none;
@@ -44,12 +75,17 @@
.toolbar-ol-logo {
margin: 0 auto;
display: block;
width: $ol-icon-height;
height: $ol-icon-height;
width: auto;
background-image: var(--redesign-toolbar-logo-url);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
&:hover {
background-color: var(--toolbar-home-button-hover-background);
background-color: var(--redesign-toolbar-home-button-hover-background);
.toolbar-ol-home-button {
display: block;
@@ -103,11 +139,6 @@
justify-content: center;
}
.ide-redesign-toolbar-button-subdued {
color: var(--neutral-90);
text-decoration: none;
}
.ide-redesign-online-users {
display: flex;
}
services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
+20 -11
View File
@@ -24,6 +24,19 @@
--editor-toolbar-bg: var(--neutral-80);
}
.ide-redesign-main {
--toolbar-alt-bg-color: var(--bg-dark-secondary);
--toolbar-btn-color: var(--content-primary-dark);
--toolbar-btn-hover-bg-color: var(--neutral-80);
--toolbar-btn-hover-color: var(--white);
--editor-toolbar-bg: var(--bg-dark-primary);
--toolbar-filetree-bg-color: var(--neutral-80);
.toolbar {
border-bottom: none;
}
}
@include theme('light') {
--toolbar-border-color: var(--neutral-20);
--toolbar-header-bg-color: var(--white);
@@ -43,18 +56,14 @@
--editor-header-logo-background: url(../../../../../public/img/ol-brand/overleaf-o.svg)
center / contain no-repeat;
--editor-toolbar-bg: var(--white);
}
.ide-redesign-main {
--toolbar-alt-bg-color: var(--bg-light-secondary);
--toolbar-btn-color: var(--content-primary);
--toolbar-btn-hover-bg-color: var(--neutral-80);
--toolbar-btn-hover-color: var(--white);
--editor-toolbar-bg: var(--white);
--toolbar-filetree-bg-color: var(--white);
.toolbar {
border-bottom: none;
.ide-redesign-main {
--toolbar-alt-bg-color: var(--bg-light-secondary);
--toolbar-btn-color: var(--content-primary);
--toolbar-btn-hover-bg-color: var(--neutral-80);
--toolbar-btn-hover-color: var(--white);
--editor-toolbar-bg: var(--white);
--toolbar-filetree-bg-color: var(--white);
}
}