Merge pull request 'Dark theme' (#788) from 3382-dark_theme into dev

Reviewed-on: #788
Reviewed-by: Carlos Jimenez Ruiz <carlosjr@verdnatura.es>
This commit is contained in:
Carlos Jimenez Ruiz 2021-11-18 09:32:20 +00:00
commit f7fc331552
10 changed files with 52 additions and 38 deletions

View File

@ -222,7 +222,7 @@
} }
} }
&.focused { &.focused {
background-color: $color-bg-panel; background-color: $color-font-dark;
& > .container { & > .container {
& > .infix > .control > * { & > .infix > .control > * {

View File

@ -27,7 +27,7 @@ smart-table table {
& > th, & > th,
& > td { & > td {
text-align: left; text-align: left;
padding: 9px 5px; padding: 5px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -76,23 +76,26 @@ smart-table table {
.chip { .chip {
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
color: $color-font-bg;
&.notice { &.notice {
background-color: $color-notice-medium background-color: $color-notice-medium;
color: $color-font-bg;
} }
&.success { &.success {
background-color: $color-success-medium; background-color: $color-success-medium;
color: $color-font-bg;
} }
&.warning { &.warning {
background-color: $color-main-medium; background-color: $color-main-medium;
color: $color-font-bg;
} }
&.alert { &.alert {
background-color: $color-alert-medium; background-color: $color-alert-medium;
color: $color-font-bg;
} }
&.message { &.message {
background-color: $color-bg-dark;
color: $color-font-dark; color: $color-font-dark;
background-color: $color-bg-dark
} }
} }
} }

View File

@ -195,7 +195,7 @@ vn-table.scrollable > .vn-table,
thead vn-th, thead vn-th,
thead th { thead th {
border-bottom: 2px solid $color-spacer; border-bottom: 2px solid $color-spacer;
background-color: #FFF; background-color: $color-bg-panel;
position: sticky; position: sticky;
z-index: 9; z-index: 9;
top: 0 top: 0

View File

@ -1,6 +1,6 @@
@import "./util"; @import "./util";
$font-size: 12pt; $font-size: 11pt;
$menu-width: 256px; $menu-width: 256px;
$topbar-height: 56px; $topbar-height: 56px;
$mobile-width: 800px; $mobile-width: 800px;
@ -24,7 +24,7 @@ $spacing-xl: 70px;
// Light theme // Light theme
$color-primary: #f7931e; /* $color-primary: #f7931e;
$color-secondary: $color-primary; $color-secondary: $color-primary;
$color-font: #222; $color-font: #222;
@ -72,28 +72,36 @@ $color-success-light: lighten($color-success, 35%);
$color-notice-medium: lighten($color-notice, 20%); $color-notice-medium: lighten($color-notice, 20%);
$color-notice-light: lighten($color-notice, 35%); $color-notice-light: lighten($color-notice, 35%);
$color-alert-medium: lighten($color-alert, 20%); $color-alert-medium: lighten($color-alert, 20%);
$color-alert-light: lighten($color-alert, 35%); $color-alert-light: lighten($color-alert, 35%); */
/**/ /**/
// Dark theme // Dark theme
/* $color-primary: #f7931e;
$color-header: #3d3d3d; $color-secondary: $color-primary;
$color-bg: #222;
$color-bg-dark: #222;
$color-font: #eee; $color-font: #eee;
$color-font-light: #aaa; $color-font-light: #aaa;
$color-font-secondary: #777; $color-font-secondary: #777;
$color-font-dark: white; $color-font-dark: white;
$color-font-link: $color-primary;
$color-font-bg: rgba(0, 0, 0, .8); $color-font-bg: rgba(0, 0, 0, .8);
$color-font-link: #005a9a; $color-font-bg-marginal: rgba(0, 0, 0, .4);
$color-font-bg-dark: rgba(255, 255, 255, .7);
$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
$color-header: #3d3d3d;
$color-menu-header: #3d3d3d;
$color-bg: #222;
$color-bg-dark: #222;
$color-active: #666; $color-active: #666;
$color-active-font: white; $color-active-font: white;
$color-bg-panel: #3c3b3b; $color-bg-panel: #3c3b3b;
$color-main: #f7931e; $color-main: $color-primary;
$color-marginal: #ccc; $color-marginal: #111;
$color-success: #a3d131; $color-success: #a3d131;
$color-notice: #32b1ce; $color-notice: #32b1ce;
$color-alert: #f42121; $color-alert: #f42121;
$color-button: $color-secondary;
$color-spacer: rgba(255, 255, 255, .3); $color-spacer: rgba(255, 255, 255, .3);
$color-spacer-light: rgba(255, 255, 255, .12); $color-spacer-light: rgba(255, 255, 255, .12);
@ -105,15 +113,18 @@ $color-hover-cd: rgba(255, 255, 255, .1);
$color-hover-dc: .7; $color-hover-dc: .7;
$color-disabled: .6; $color-disabled: .6;
$color-font-link: lighten($color-main, 10%); $color-primary-medium: lighten($color-primary, 20%);
$color-main-medium: darken($color-main, 20%); $color-primary-light: lighten($color-primary, 35%);
$color-main-light: darken($color-main, 35%); $color-font-link-medium: lighten($color-font-link, 20%);
$color-success-medium: darken($color-success, 20%); $color-font-link-light: lighten($color-font-link, 35%);
$color-success-light: darken($color-success, 35%); $color-main-medium: lighten($color-main, 20%);
$color-notice-medium: darken($color-notice, 20%); $color-main-light: lighten($color-main, 35%);
$color-notice-light: darken($color-notice, 35%); $color-success-medium: lighten($color-success, 20%);
$color-alert-medium: darken($color-alert, 20%); $color-success-light: lighten($color-success, 35%);
$color-alert-light: darken($color-alert, 35%); $color-notice-medium: lighten($color-notice, 20%);
$color-notice-light: lighten($color-notice, 35%);
$color-alert-medium: lighten($color-alert, 20%);
$color-alert-light: lighten($color-alert, 35%);
/**/ /**/
// Border // Border

View File

@ -68,7 +68,6 @@ ui-view > .vn-summary {
padding: 7px; padding: 7px;
padding-bottom: 4px; /* Bottom line-height fix */ padding-bottom: 4px; /* Bottom line-height fix */
font-weight: lighter; font-weight: lighter;
background-color: $color-main-light;
border-bottom: 1px solid $color-main; border-bottom: 1px solid $color-main;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -78,7 +77,7 @@ ui-view > .vn-summary {
display: block; display: block;
} }
a { a {
color: $color-font; color: $color-font-link;
} }
} }
h4 span:after { h4 span:after {
@ -87,7 +86,7 @@ ui-view > .vn-summary {
position: absolute; position: absolute;
right: 5px; right: 5px;
text-transform: none; text-transform: none;
color: $color-spacer color: $color-font-link;
} }
& > * { & > * {
margin: $spacing-sm; margin: $spacing-sm;

View File

@ -15,16 +15,16 @@ vn-entry-buy-index vn-card {
tbody tr:nth-child(1), tbody tr:nth-child(1),
tbody tr:nth-child(2) { tbody tr:nth-child(2) {
border-left: 1px solid $color-marginal; border-left: 1px solid $color-spacer;
border-right: 1px solid $color-marginal; border-right: 1px solid $color-spacer;
} }
tbody tr:nth-child(2) { tbody tr:nth-child(2) {
border-bottom: 1px solid $color-marginal; border-bottom: 1px solid $color-spacer;
} }
tbody{ tbody{
border-bottom: 1px solid $color-marginal; border-bottom: 1px solid $color-spacer;
} }
tbody:last-child { tbody:last-child {

View File

@ -2,7 +2,8 @@
vn-id="model" vn-id="model"
url="Entries/filter" url="Entries/filter"
limit="20" limit="20"
auto-load="true"> auto-load="true"
order="landed DESC, id DESC">
</vn-crud-model> </vn-crud-model>
<vn-portal slot="topbar"> <vn-portal slot="topbar">
<vn-searchbar <vn-searchbar

View File

@ -9,13 +9,13 @@ vn-entry-summary .summary {
} }
tbody tr:nth-child(1) { tbody tr:nth-child(1) {
border-top: 1px solid $color-marginal; border-top: 1px solid $color-spacer;
} }
tbody tr:nth-child(1), tbody tr:nth-child(1),
tbody tr:nth-child(2) { tbody tr:nth-child(2) {
border-left: 1px solid $color-marginal; border-left: 1px solid $color-spacer;
border-right: 1px solid $color-marginal border-right: 1px solid $color-spacer
} }
tbody tr:nth-child(3) { tbody tr:nth-child(3) {

View File

@ -11,7 +11,7 @@ vn-monitor-sales-orders {
color: gray; color: gray;
& > vn-td { & > vn-td {
border-bottom: 2px solid $color-marginal; border-bottom: 2px solid $color-spacer;
font-size: 13px; font-size: 13px;
} }
} }

View File

@ -6,5 +6,5 @@
margin-bottom: 10px; margin-bottom: 10px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
border: 1px solid $color-marginal; border: 1px solid $color-spacer;
} }