rancher
/
dashboard
mirror of https://github.com/rancher/dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve color contrast on table groups in dark mode

This commit is contained in:
Neil MacDougall 2021-07-12 11:30:48 +01:00
parent 048d8c17db
commit 0de77534d6
3 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/styles/themes/_dark.scss
View File

@ -114,9 +114,9 @@
--progress-bg : #{$medium}; --progress-bg : #{$medium};
--progress-divider : #{$lightest}; --progress-divider : #{$lightest};
--sortable-table-bg : #{lighten($darkest, 10%)};
--sortable-table-row-bg : #{$darker};;
--sortable-table-header-bg : #{$darkest}; --sortable-table-header-bg : #{$darkest};
--sortable-table-accent-bg : #{$darker};
--sortable-table-accent-alt : #{$dark};
--sortable-table-top-divider : var(--border); --sortable-table-top-divider : var(--border);
--sortable-table-hover-bg : #{$darkest}; --sortable-table-hover-bg : #{$darkest};
--sortable-table-selected-bg : var(--primary-light-bg); --sortable-table-selected-bg : var(--primary-light-bg);

7
assets/styles/themes/_light.scss
View File

@ -384,10 +384,9 @@ BODY, .theme-light {
--progress-bg : #{$medium}; --progress-bg : #{$medium};
--progress-divider : #{$medium}; --progress-divider : #{$medium};
--sortable-table-bg : transparent; --sortable-table-bg : #{darken($lightest, 5%)};
--sortable-table-header-bg : transparent; --sortable-table-row-bg : #{$lightest};
--sortable-table-accent-bg : #{$lighter}; --sortable-table-header-bg : #{$lighter};
--sortable-table-accent-alt : #{$lightest};
--sortable-table-top-divider : var(--border); --sortable-table-top-divider : var(--border);
--sortable-table-body-divider : #{$medium}; --sortable-table-body-divider : #{$medium};

16
components/SortableTable/index.vue
View File

@ -766,7 +766,7 @@ $spacing: 10px;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
outline: 1px solid var(--border); outline: 1px solid var(--border);
overflow: hidden; overflow: hidden;
background: var(--sortable-table-accent-bg); background: var(--sortable-table-bg);
border-radius: 4px; border-radius: 4px;
td { td {
@ -781,7 +781,7 @@ $spacing: 10px;
tbody { tbody {
tr { tr {
border-bottom: 1px solid var(--sortable-table-top-divider); border-bottom: 1px solid var(--sortable-table-top-divider);
background-color: var(--body-bg); background-color: var(--sortable-table-row-bg);
&.main-row.has-sub-row { &.main-row.has-sub-row {
border-bottom: 0; border-bottom: 0;
@ -808,12 +808,12 @@ $spacing: 10px;
td { td {
&:first-of-type { &:first-of-type {
border-left: 1px solid var(--sortable-table-accent-bg); // border-left: 1px solid var(--sortable-table-accent-bg);
} }
&:last-of-type { &:last-of-type {
/* Not sure why 2 but one doesn't show up.. */ /* Not sure why 2 but one doesn't show up.. */
border-right: 2px solid var(--sortable-table-accent-bg); // border-right: 2px solid var(--sortable-table-accent-bg);
} }
} }
@ -851,7 +851,7 @@ $spacing: 10px;
background-color: initial; background-color: initial;
&:first-child { &:first-child {
border-bottom: 0; border-bottom: 2px solid var(--sortable-table-row-bg);
} }
&:not(:first-child) { &:not(:first-child) {
@ -872,9 +872,9 @@ $spacing: 10px;
line-height: $group-row-height; line-height: $group-row-height;
padding: 0 10px; padding: 0 10px;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
background-color: var(--body-bg); background-color: var(--sortable-table-row-bg);
position: relative; position: relative;
top: 0; top: 1px;
display: inline-block; display: inline-block;
z-index: z-index('tableGroup'); z-index: z-index('tableGroup');
min-width: $group-row-height * 1.8; min-width: $group-row-height * 1.8;
@ -888,7 +888,7 @@ $spacing: 10px;
height: $group-row-height; height: $group-row-height;
width: 70px; width: 70px;
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
background-color: var(--body-bg); background-color: var(--sortable-table-row-bg);
content: ""; content: "";
position: absolute; position: absolute;
right: -15px; right: -15px;