agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #30567 from overleaf/ds-mj-dark-mode-project-list

Browse Source 
[web] Adding dark mode project list on Dashboard

GitOrigin-RevId: ed678b1ffa8abb776eed46fb3b4b88deedd3b62c
This commit is contained in:
Davinder Singh
2026-01-15 12:56:17 +00:00
committed by Copybot
parent f78940ea0d
commit 9e9b5b22cf
3 changed files with 59 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
services/web/frontend/stylesheets/components/table.scss
View File

@@ -1,8 +1,48 @@
@mixin light-table {
--bs-table-color: var(--content-primary);
--bs-table-bg: var(--bg-light-primary);
--bs-table-striped-color: var(--content-secondary);
--bs-table-striped-bg: var(--bg-light-secondary);
--bs-table-active-color: var(--content-secondary);
--bs-table-active-bg: var(--link-web-hover);
--bs-table-hover-color: var(--content-secondary);
--bs-table-hover-bg: var(--bg-light-secondary);
--bs-border-divider: var(--border-divider);
--table-bg-tertiary: var(--bg-light-tertiary);
}
@mixin dark-table {
--bs-table-color: var(--content-primary-dark);
--bs-table-bg: var(--bg-dark-primary);
--bs-table-striped-color: var(--content-secondary-dark);
--bs-table-striped-bg: var(--bg-dark-secondary);
--bs-table-active-color: var(--content-secondary-dark);
--bs-table-active-bg: var(--link-web-hover);
--bs-table-hover-color: var(--content-secondary-dark);
--bs-table-hover-bg: var(--bg-dark-secondary);
--bs-border-divider: var(--border-divider-dark);
--table-bg-tertiary: var(--bg-dark-tertiary);
}
:root {
@include light-table;
@include theme('default') {
.project-ds-nav-page {
.table,
.table-container {
@include dark-table;
}
}
}
}
.table-container {
flex: 1;
margin-bottom: var(--spacing-06);
background-color: var(--white);
background-color: var(--bs-table-bg);
padding: var(--spacing-04);
border-color: var(--bs-border-divider);
.table {
margin-bottom: initial;
@@ -10,6 +50,8 @@
}
.table {
border-color: var(--bs-border-divider);
th,
td {
a {
@@ -49,7 +91,7 @@
.table-container-bordered {
padding: var(--spacing-04);
border-color: $table-border-color;
border-color: var(--bs-border-divider);
border-radius: var(--border-radius-base);
border-width: var(--bs-border-width);
border-style: solid;
@@ -65,7 +107,7 @@
> tbody > tr:nth-of-type(#{$table-striped-order}) {
&:hover > * {
--#{$prefix}table-hover-bg: var(--bg-light-tertiary);
--#{$prefix}table-hover-bg: var(--table-bg-tertiary);
}
}
}

18
services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
View File

@@ -2,11 +2,13 @@
--ds-nav-active-bg: var(--bg-accent-03);
--ds-nav-active-color: var(--green-60);
--theme-toggle-selected-background: var(--green-20);
--ds-nav-content-bg-secondary: var(--bg-light-secondary);
@include theme('default') {
--ds-nav-active-bg: var(--green-70);
--ds-nav-active-color: var(--green-10);
--theme-toggle-selected-background: var(--green-70);
--ds-nav-content-bg-secondary: var(--bg-dark-secondary);
}
}
@@ -19,7 +21,7 @@ body {
.project-ds-nav-page {
@include full-height-stacked-page;
color: var(--content-secondary);
color: var(--content-secondary-themed);
// NOTE-AC: This code can be eliminated when we remove sidebar-navigation-ui-update
--navbar-btn-padding-h: var(--spacing-06);
@@ -61,7 +63,7 @@ body {
.nav-item-help::before {
content: '';
display: block;
border-top: 1px solid var(--border-divider);
border-top: 1px solid var(--border-divider-themed);
margin: var(--spacing-07) var(--spacing-06);
}
@@ -111,7 +113,7 @@ body {
border-bottom: solid 1px transparent;
&.show-shadow {
border-bottom-color: var(--border-divider);
border-bottom-color: var(--border-divider-themed);
}
> .dropdown-menu {
@@ -144,7 +146,7 @@ body {
border-top: solid 1px transparent;
&.show-shadow {
border-top-color: var(--border-divider);
border-top-color: var(--border-divider-themed);
}
}
@@ -262,7 +264,7 @@ body {
.project-dash-table {
.btn-link {
color: var(--content-secondary);
color: var(--content-secondary-themed);
height: var(--spacing-08);
width: var(--spacing-08);
border-radius: 100%;
@@ -276,7 +278,7 @@ body {
}
.dash-cell-name a {
color: var(--content-secondary) !important;
color: var(--content-primary-themed) !important;
}
}
@@ -295,11 +297,11 @@ body {
flex-grow: 1;
overflow-y: auto;
position: relative;
background-color: var(--bg-light-secondary);
background-color: var(--ds-nav-content-bg-secondary);
@include media-breakpoint-up(md) {
border-top-left-radius: var(--border-radius-large);
border-top: 1px solid var(--border-divider);
border-top: 1px solid var(--border-divider-themed);
}
}

8
services/web/frontend/stylesheets/pages/project-list.scss
View File

@@ -144,7 +144,7 @@
.project-list-title {
@include heading-sm;
color: $content-secondary;
color: var(--content-secondary-themed);
font-weight: bold;
min-width: 0;
}
@@ -354,7 +354,7 @@ ul.project-list-filters {
.table-header-sort-btn {
border: 0;
text-align: left;
color: var(--content-secondary);
color: var(--content-secondary-themed);
background-color: transparent;
padding: 0;
font-weight: bold;
@@ -365,7 +365,7 @@ ul.project-list-filters {
&:hover,
&:focus {
color: var(--content-secondary);
color: var(--content-secondary-themed);
text-decoration: none;
}
@@ -576,7 +576,7 @@ ul.project-list-filters {
.current-plan {
a.current-plan-label {
text-decoration: none;
color: $content-secondary;
color: var(--content-secondary-themed);
}
.current-plan-label-icon {