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:
commit
f7fc331552
|
@ -222,7 +222,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.focused {
|
&.focused {
|
||||||
background-color: $color-bg-panel;
|
background-color: $color-font-dark;
|
||||||
|
|
||||||
& > .container {
|
& > .container {
|
||||||
& > .infix > .control > * {
|
& > .infix > .control > * {
|
||||||
|
|
|
@ -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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue