Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Fix CSS errors related to dark mode

Browse Source 
Summary: Fixes a few cosmetic CSS bugs since dark mode landed.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D3649
This commit is contained in:
George Gevoian
2022-10-03 17:05:55 -07:00
parent 303d071de1
commit 74c556ea85
8 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/aclui/ACLColumnList.ts
View File

@@ -3,7 +3,7 @@
* add a new column, and allows removing already-added columns.
*/
import {aclSelect, cssSelect} from 'app/client/aclui/ACLSelect';
import {colors, testId} from 'app/client/ui2018/cssVars';
import {testId, theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {Computed, dom, Observable, styled} from 'grainjs';
@@ -85,7 +85,7 @@ const cssColListWidget = styled('div', `
border: 1px solid transparent;
&:not(&-editing):hover {
border: 1px solid ${colors.darkGrey};
border: 1px solid ${theme.accessRulesColumnListBorder};
}
`);
@@ -96,9 +96,10 @@ const cssColItem = styled('div', `
border-radius: 3px;
padding-left: 6px;
padding-right: 2px;
color: ${theme.accessRulesColumnItemFg};
.${cssColListWidget.className}-editing & {
background-color: ${colors.mediumGreyOpaque};
background-color: ${theme.accessRulesColumnItemBg};
}
`);
@@ -126,10 +127,10 @@ const cssColItemIcon = styled('div', `
border-radius: 16px;
display: none;
cursor: default;
--icon-color: ${colors.slate};
--icon-color: ${theme.accessRulesColumnItemIconFg};
&:hover {
background-color: ${colors.slate};
--icon-color: ${colors.light};
background-color: ${theme.accessRulesColumnItemIconHoverBg};
--icon-color: ${theme.accessRulesColumnItemIconHoverFg};
}
.${cssColListWidget.className}-editing & {
display: flex;

2
app/client/components/GridView.css
View File

@@ -1,5 +1,5 @@
.gridview_data_pane {
background-color: var(--grist-theme-table-body-bg, unset);
background-color: var(--grist-theme-table-body-bg, white);
position: relative;
width: 100%;
overflow: hidden;

1
app/client/components/ViewLayout.css
View File

@@ -21,6 +21,7 @@
.viewsection_content {
overflow: visible;
margin: 12px;
background-color: var(--grist-theme-widget-bg, white);
}
/* TODO should be switched to use new icon */

15
app/client/ui2018/cssVars.ts
View File

@@ -282,7 +282,7 @@ export const theme = {
tableHeaderBorder: new CustomProp('theme-table-header-border', undefined, 'lightgray'),
tableHeaderBorderDark: new CustomProp('theme-table-header-border-dark', undefined,
colors.darkGrey),
tableBodyBg: new CustomProp('theme-table-body-bg', undefined, 'unset'),
tableBodyBg: new CustomProp('theme-table-body-bg', undefined, 'white'),
tableBodyBorder: new CustomProp('theme-table-body-border', undefined, colors.darkGrey),
tableAddNewBg: new CustomProp('theme-table-add-new-bg', undefined, 'inherit'),
tableScrollShadow: new CustomProp('theme-table-scroll-shadow', undefined, '#444444'),
@@ -320,6 +320,7 @@ export const theme = {
colors.selectionDarkerOpaque),
/* Widgets */
widgetBg: new CustomProp('theme-widget-bg', undefined, 'white'),
widgetBorder: new CustomProp('theme-widget-border', undefined, colors.darkGrey),
widgetActiveBorder: new CustomProp('theme-widget-active-border', undefined, colors.lightGreen),
widgetInactiveStripesLight: new CustomProp('theme-widget-inactive-stripes-light', undefined,
@@ -622,6 +623,18 @@ export const theme = {
colors.dark),
accessRulesTableBorder: new CustomProp('theme-access-rules-table-border', undefined,
colors.slate),
accessRulesColumnListBorder: new CustomProp('theme-access-rules-column-list-border', undefined,
colors.darkGrey),
accessRulesColumnItemFg: new CustomProp('theme-access-rules-column-item-fg', undefined,
colors.dark),
accessRulesColumnItemBg: new CustomProp('theme-access-rules-column-item-bg', undefined,
colors.mediumGreyOpaque),
accessRulesColumnItemIconFg: new CustomProp('theme-access-rules-column-item-icon-fg', undefined,
colors.slate),
accessRulesColumnItemIconHoverFg: new CustomProp('theme-access-rules-column-item-icon-hover-fg',
undefined, colors.light),
accessRulesColumnItemIconHoverBg: new CustomProp('theme-access-rules-column-item-icon-hover-bg',
undefined, colors.slate),
/* Cells */
cellFg: new CustomProp('theme-cell-fg', undefined, 'unset'),