agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 21:23:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #36570 from overleaf/mj-themed-labs-modal

Browse Source 
[web] Add dark mode support for labs modal

GitOrigin-RevId: 18f9aff407ee5324c835f915419819b00d49bfb0
This commit is contained in:
Mathias Jakobsen
2026-09-17 11:58:57 +00:00
committed by Copybot
parent 1ecdd122d0
commit 8139638d9d
1 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/modules/labs.scss
+37 -23
View File
@@ -106,7 +106,7 @@
h5,
h6 {
margin: var(--spacing-04) 0 var(--spacing-01);
color: var(--content-primary);
color: var(--content-primary-themed);
&:first-child {
margin-top: 0;
@@ -148,21 +148,21 @@
font-size: var(--font-size-01);
line-height: var(--line-height-01);
font-weight: 700;
color: var(--content-secondary);
color: var(--content-secondary-themed);
}
h6 {
font-size: var(--font-size-01);
line-height: var(--line-height-01);
font-weight: 600;
color: var(--content-secondary);
color: var(--content-secondary-themed);
}
code {
padding: 0 var(--spacing-02);
border-radius: var(--border-radius-base);
background-color: var(--bg-light-secondary);
color: var(--content-primary);
background-color: var(--bg-secondary-themed);
color: var(--content-primary-themed);
font-size: var(--font-size-02);
word-break: break-word;
}
@@ -171,7 +171,7 @@
margin: 0 0 var(--spacing-04);
padding: var(--spacing-04);
border-radius: var(--border-radius-base);
background-color: var(--bg-light-secondary);
background-color: var(--bg-secondary-themed);
overflow-x: auto;
code {
@@ -182,10 +182,24 @@
}
// Feature Preview Modal
:root {
--labs-sidebar-item-active-color: var(--green-70);
--labs-sidebar-item-active-bg-color: var(--bg-accent-03);
}
@include theme('default') {
.modal-themed {
--labs-sidebar-item-active-color: var(--green-10);
--labs-sidebar-item-active-bg-color: var(--green-70);
}
}
.labs-feature-preview-modal {
@include themed-links;
.modal-header {
padding-bottom: var(--spacing-04);
border-bottom: 1px solid var(--border-divider);
border-bottom: 1px solid var(--border-divider-themed);
}
.modal-body {
@@ -198,7 +212,7 @@
align-items: center;
justify-content: center;
padding: var(--spacing-09);
color: var(--content-secondary);
color: var(--content-secondary-themed);
}
// Experiment Browser (two-panel layout)
@@ -224,7 +238,7 @@
.labs-experiment-sidebar {
width: 320px;
border-right: 1px solid var(--border-divider);
border-right: 1px solid var(--border-divider-themed);
display: flex;
flex-direction: column;
overflow-y: auto;
@@ -236,22 +250,22 @@
gap: var(--spacing-04);
padding: var(--spacing-04) var(--spacing-05);
text-align: left;
color: var(--content-primary);
color: var(--content-primary-themed);
font-size: var(--font-size-02);
min-height: 44px;
text-decoration: none;
&:hover {
background: var(--bg-light-secondary);
color: var(--content-primary);
background: var(--bg-secondary-themed);
color: var(--content-primary-themed);
}
&.active {
background: var(--bg-accent-03);
color: var(--content-primary);
background: var(--labs-sidebar-item-active-bg-color);
color: var(--content-primary-themed);
.labs-experiment-sidebar-title {
color: var(--green-70);
color: var(--labs-sidebar-item-active-color);
font-weight: 600;
}
}
@@ -259,7 +273,7 @@
.labs-experiment-sidebar-icon {
font-size: 20px;
color: var(--content-primary);
color: var(--content-primary-themed);
}
.labs-experiment-sidebar-title {
@@ -282,25 +296,25 @@
gap: var(--spacing-04);
padding: var(--spacing-04) var(--spacing-05);
text-align: left;
color: var(--content-primary);
color: var(--content-primary-themed);
font-size: var(--font-size-02);
min-height: 44px;
width: 100%;
text-decoration: none;
&:visited {
color: var(--content-primary);
color: var(--content-primary-themed);
}
&:hover {
background: var(--bg-light-secondary);
color: var(--content-primary);
background: var(--bg-secondary-themed);
color: var(--content-primary-themed);
}
}
.labs-settings-link-external-icon {
font-size: 20px;
color: var(--content-secondary);
color: var(--content-secondary-themed);
}
.labs-badge {
@@ -313,7 +327,7 @@
.labs-experiment-sidebar-arrow {
display: none;
font-size: 18px;
color: var(--content-secondary);
color: var(--content-secondary-themed);
}
// !important needed to override Bootstrap's d-inline-grid utility on OLIconButton
@@ -356,7 +370,7 @@
.labs-experiment-detail-description {
margin-bottom: var(--spacing-06);
color: var(--content-secondary);
color: var(--content-secondary-themed);
font-size: var(--font-size-02);
line-height: var(--line-height-03);
}