fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

perf(UI): visual improvements of tables

Browse Source
This commit is contained in:
Fabio Di Stasio
2021-08-16 19:44:55 +02:00
parent c9fa941578
commit bc82289d54
11 changed files with 88 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/scss/_fake-tables.scss
View File

@@ -29,6 +29,7 @@
.th {
padding: $unit-3 $unit-2;
display: table-cell;
border-radius: 3px;
}
.th {

2
src/renderer/scss/_table-keys.scss
View File

@@ -17,7 +17,7 @@
&.key-mul,
&.key-INDEX,
&.key-KEY {
color: palegreen;
color: limegreen;
}
&.key-FULLTEXT {

2
src/renderer/scss/main.scss
View File

@@ -209,7 +209,7 @@ option:checked {
cursor: pointer;
&.small-select {
height: 1rem;
height: 21px;
font-size: 0.7rem;
padding: 1px 0.4rem 0;
}

32
src/renderer/scss/themes/dark-theme.scss
View File

@@ -20,6 +20,11 @@
}
}
option,
optgroup {
background-color: $bg-color-gray;
}
// Override Spectre.css
.menu {
background: $bg-color-light-dark;
@@ -179,16 +184,29 @@
.workspace-query-results {
.table {
.th {
background: $bg-color-dark;
border-color: $bg-color-light-dark;
border-color: darken($bg-color-light-gray, 80%);
background-color: $body-bg-dark;
}
.td {
border-color: $bg-color-light-dark;
.tr {
background-color: darken($bg-color-light-gray, 80%);
&:focus {
box-shadow: inset 0 0 0 1px $body-font-color-dark;
background: rgba($color: #000, $alpha: 0.3);
.td:first-child {
border-left: 2px solid $body-bg-dark;
}
.td {
border-color: $body-bg-dark;
&:focus {
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
background-color: rgba($color: #000, $alpha: 0.3);
}
.editable-field {
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
background-color: rgba($color: #000, $alpha: 0.3);
}
}
}
}

24
src/renderer/scss/themes/light-theme.scss
View File

@@ -216,11 +216,29 @@
.table {
.th {
background: $body-bg;
border-color: rgba($bg-color-light-dark, 0.5);
border-color: lighten($bg-color-light-gray, 2%);
}
.td {
border-color: rgba($bg-color-light-dark, 0.5);
.tr {
background-color: lighten($bg-color-light-gray, 2%);
.td:first-child {
border-left: 2px solid $body-bg;
}
.td {
border-color: $body-bg;
&:focus {
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
background-color: $body-font-color-dark;
}
.editable-field {
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
background-color: $body-font-color-dark;
}
}
}
}
}