CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-20 19:33:10 +12:00
Code Issues Projects Releases Wiki Activity

Update table border colour to work better with coloured cells

Browse source
This commit is contained in:
Andrew Kingston 2024-07-16 16:47:11 +01:00
parent 479e3247df
commit 4575dd300f
No known key found for this signature in database
6 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/bbui/src/bbui.css
View file

@ -119,6 +119,7 @@ a {
--spectrum-global-color-blue-100: #002651; --spectrum-global-color-blue-100: #002651;
--spectrum-global-color-indigo-100: #1a1d61; --spectrum-global-color-indigo-100: #1a1d61;
--spectrum-global-color-magenta-100: #530329; --spectrum-global-color-magenta-100: #530329;
--translucent-grey: rgba(255, 255, 255, 0.1);
} }
.spectrum--dark { .spectrum--dark {
--drop-shadow: rgba(0, 0, 0, 0.3); --drop-shadow: rgba(0, 0, 0, 0.3);
@ -130,6 +131,7 @@ a {
--spectrum-global-color-blue-100: #003877; --spectrum-global-color-blue-100: #003877;
--spectrum-global-color-indigo-100: #282c8c; --spectrum-global-color-indigo-100: #282c8c;
--spectrum-global-color-magenta-100: #76003a; --spectrum-global-color-magenta-100: #76003a;
--translucent-grey: rgba(255, 255, 255, 0.065);
} }
.spectrum--light, .spectrum--light,
.spectrum--lightest { .spectrum--lightest {
@ -142,4 +144,5 @@ a {
--spectrum-global-color-blue-100: #e0f2ff; --spectrum-global-color-blue-100: #e0f2ff;
--spectrum-global-color-indigo-100: #edeeff; --spectrum-global-color-indigo-100: #edeeff;
--spectrum-global-color-magenta-100: #ffeaf1; --spectrum-global-color-magenta-100: #ffeaf1;
--translucent-grey: rgba(0, 0, 0, 0.085);
} }

2
packages/client/src/components/app/GridBlock.svelte
View file

@ -194,7 +194,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--translucent-grey);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
height: 410px; height: 410px;

2
packages/frontend-core/src/components/grid/cells/GridCell.svelte
View file

@ -50,7 +50,7 @@
on:mouseup on:mouseup
on:click on:click
on:contextmenu on:contextmenu
on:touchstart on:touchstart|passive
on:touchend on:touchend
on:touchcancel on:touchcancel
on:mouseenter on:mouseenter

4
packages/frontend-core/src/components/grid/layout/Grid.svelte
View file

@ -232,7 +232,7 @@
--cell-background-alt: var(--cell-background); --cell-background-alt: var(--cell-background);
--cell-padding: 8px; --cell-padding: 8px;
--cell-spacing: 4px; --cell-spacing: 4px;
--cell-border: 1px solid var(--spectrum-global-color-gray-200); --cell-border: 1px solid var(--grid-border-color, var(--translucent-grey));
--cell-font-size: 14px; --cell-font-size: 14px;
--cell-font-color: var(--spectrum-global-color-gray-800); --cell-font-color: var(--spectrum-global-color-gray-800);
flex: 1 1 auto; flex: 1 1 auto;
@ -290,7 +290,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 2px solid var(--spectrum-global-color-gray-200); border-bottom: var(--cell-border);
padding: var(--cell-padding); padding: var(--cell-padding);
gap: var(--cell-spacing); gap: var(--cell-spacing);
background: var(--grid-background-alt); background: var(--grid-background-alt);

1
packages/frontend-core/src/themes/midnight.css
View file

@ -17,4 +17,5 @@
--modal-background: var(--spectrum-global-color-gray-50); --modal-background: var(--spectrum-global-color-gray-50);
--drop-shadow: rgba(0, 0, 0, 0.25) !important; --drop-shadow: rgba(0, 0, 0, 0.25) !important;
--spectrum-global-color-blue-100: hsl(var(--hue), 48%, 24%) !important; --spectrum-global-color-blue-100: hsl(var(--hue), 48%, 24%) !important;
--translucent-grey: rgba(255, 255, 255, 0.075) !important;
} }

1
packages/frontend-core/src/themes/nord.css
View file

@ -50,4 +50,5 @@
--modal-background: var(--spectrum-global-color-gray-50); --modal-background: var(--spectrum-global-color-gray-50);
--drop-shadow: rgba(0, 0, 0, 0.15) !important; --drop-shadow: rgba(0, 0, 0, 0.15) !important;
--spectrum-global-color-blue-100: hsl(213, 36%, 30%) !important; --spectrum-global-color-blue-100: hsl(213, 36%, 30%) !important;
--translucent-grey: hsla(213, 36%, 80%, 0.11) !important;
} }