From ee68d630ae09a0fa59359b27d65fb59916762015 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Tue, 12 May 2020 14:45:38 +0300 Subject: [PATCH] Drop-in of dark showcase mode --- public/themes/luna-amber/theme.css | 10 + public/themes/luna-green/theme.css | 10 + public/themes/luna-pink/theme.css | 10 + public/themes/nova-colored/theme.css | 10 + public/themes/nova-dark/theme.css | 10 + public/themes/nova-light/theme.css | 10 + public/themes/nova-vue/theme.css | 10 + public/themes/rhea/theme.css | 10 + public/themes/saga-blue/theme.css | 10 + public/themes/saga-cyan/theme.css | 10 + public/themes/saga-deeppurple/theme.css | 10 + public/themes/saga-green/theme.css | 10 + public/themes/saga-indigo/theme.css | 10 + public/themes/saga-orange/theme.css | 10 + public/themes/saga-purple/theme.css | 10 + public/themes/saga-teal/theme.css | 10 + public/themes/vela-blue/theme.css | 134 +++++---- public/themes/vela-cyan/theme.css | 134 +++++---- public/themes/vela-deeppurple/theme.css | 134 +++++---- public/themes/vela-green/theme.css | 134 +++++---- public/themes/vela-indigo/theme.css | 134 +++++---- public/themes/vela-orange/theme.css | 134 +++++---- public/themes/vela-purple/theme.css | 134 +++++---- public/themes/vela-teal/theme.css | 134 +++++---- src/App.vue | 7 - src/AppTopBar.vue | 28 +- src/assets/styles/app/_content.scss | 300 +++++++------------ src/assets/styles/app/_core.scss | 73 ++--- src/assets/styles/app/_menu.scss | 59 +--- src/assets/styles/app/_topbar.scss | 79 ++--- src/views/galleria/GalleriaIndicatorDemo.vue | 6 - src/views/inputtext/InputTextDemo.vue | 2 +- 32 files changed, 936 insertions(+), 850 deletions(-) diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 7c327eb0d..c66866c08 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #3f3f3f; + --layer-1: #323232; + --layer-2: #4c4c4c; + --text-color: #dedede; + --text-color-secondary: #888888; + --primary-color: #FFB300; + --primary-color-text: #212121; +} + * { box-sizing: border-box; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 833db0113..b15269b06 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #3f3f3f; + --layer-1: #323232; + --layer-2: #4c4c4c; + --text-color: #dedede; + --text-color-secondary: #888888; + --primary-color: #1ea04c; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 553056c10..185b93bb2 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #3f3f3f; + --layer-1: #323232; + --layer-2: #4c4c4c; + --text-color: #dedede; + --text-color-secondary: #888888; + --primary-color: #cc285c; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css index c6eb82e61..23fdf4cab 100644 --- a/public/themes/nova-colored/theme.css +++ b/public/themes/nova-colored/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f4f4f4; + --layer-2: #eaeaea; + --text-color: #333333; + --text-color-secondary: #848484; + --primary-color: #007ad9; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css index 7f0153bd5..fc4a76524 100644 --- a/public/themes/nova-dark/theme.css +++ b/public/themes/nova-dark/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f4f4f4; + --layer-2: #eaeaea; + --text-color: #333333; + --text-color-secondary: #848484; + --primary-color: #007ad9; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css index f1d77783b..2851e8815 100644 --- a/public/themes/nova-light/theme.css +++ b/public/themes/nova-light/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f4f4f4; + --layer-2: #eaeaea; + --text-color: #333333; + --text-color-secondary: #848484; + --primary-color: #007ad9; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index c50b64ae5..a3497b90f 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f4f4f4; + --layer-2: #eaeaea; + --text-color: #333333; + --text-color-secondary: #848484; + --primary-color: #41b883; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 91797b98b..e78fe822d 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f4f4f4; + --layer-2: #eaeaea; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #7B95A3; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 782eb3b74..037e5fe43 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #2196F3; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css index a86f043dc..c27c23031 100644 --- a/public/themes/saga-cyan/theme.css +++ b/public/themes/saga-cyan/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #00ACC1; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css index 0f9183193..4036c4f53 100644 --- a/public/themes/saga-deeppurple/theme.css +++ b/public/themes/saga-deeppurple/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #673AB7; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index a020fc008..cc442c0b9 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #4CAF50; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css index f4d829c89..9c51fbe83 100644 --- a/public/themes/saga-indigo/theme.css +++ b/public/themes/saga-indigo/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #3F51B5; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index b6615f53c..4bd4686f7 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #FFC107; + --primary-color-text: #212529; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 59b345248..1fa2e5f1f 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #9C27B0; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css index b28aa5aa1..f9d6c09ef 100644 --- a/public/themes/saga-teal/theme.css +++ b/public/themes/saga-teal/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #ffffff; + --layer-1: #f8f9fa; + --layer-2: #dee2e6; + --text-color: #495057; + --text-color-secondary: #6c757d; + --primary-color: #009688; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 92b2de0d6..32431cfb8 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #64B5F6; + --primary-color-text: #212529; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #BBDEFB; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #BBDEFB; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css index 4afee722a..307606e9b 100644 --- a/public/themes/vela-cyan/theme.css +++ b/public/themes/vela-cyan/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #4DD0E1; + --primary-color-text: #212529; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #B2EBF2; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #B2EBF2; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css index 460c42cd1..03dd77244 100644 --- a/public/themes/vela-deeppurple/theme.css +++ b/public/themes/vela-deeppurple/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #9575CD; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #D1C4E9; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #D1C4E9; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 3293fd466..79ff2faed 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #81C784; + --primary-color-text: #212529; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #C8E6C9; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #C8E6C9; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css index c74998128..2edff22b2 100644 --- a/public/themes/vela-indigo/theme.css +++ b/public/themes/vela-indigo/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #7986CB; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #C5CAE9; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #C5CAE9; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 83a728fc5..33a617a6b 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #FFD54F; + --primary-color-text: #212529; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #FFECB3; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #FFECB3; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 3889e408b..ec0d6892d 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #BA68C8; + --primary-color-text: #ffffff; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #E1BEE7; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #E1BEE7; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css index 857f59a14..d1a31afd4 100644 --- a/public/themes/vela-teal/theme.css +++ b/public/themes/vela-teal/theme.css @@ -1,4 +1,14 @@ @charset "UTF-8"; +:root { + --layer-0: #10161d; + --layer-1: #1C2833; + --layer-2: #2C3E50; + --text-color: #ebedef; + --text-color-secondary: #aeb6bf; + --primary-color: #4DB6AC; + --primary-color-text: #212529; +} + * { box-sizing: border-box; } @@ -24,7 +34,7 @@ } .p-text-secondary { - color: #AEB6BF; + color: #aeb6bf; } .pi { @@ -43,19 +53,19 @@ } ::-webkit-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } ::-moz-placeholder { - color: #AEB6BF; + color: #aeb6bf; } :-ms-input-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-autocomplete .p-autocomplete-loader { @@ -159,7 +169,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -235,7 +245,7 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -417,7 +427,7 @@ padding-right: 2rem; } .p-dropdown .p-dropdown-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; @@ -425,13 +435,13 @@ } .p-dropdown .p-dropdown-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #AEB6BF; + color: #aeb6bf; right: 2.857rem; } @@ -456,7 +466,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -552,7 +562,7 @@ .p-inputgroup-addon { background: #212F3C; - color: #AEB6BF; + color: #aeb6bf; border-top: 1px solid #2C3E50; border-left: 1px solid #2C3E50; border-bottom: 1px solid #2C3E50; @@ -605,7 +615,7 @@ border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { - background: #AEB6BF; + background: #aeb6bf; width: 1.25rem; height: 1.25rem; left: 0.25rem; @@ -672,13 +682,13 @@ .p-float-label label { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition-duration: 0.2s; } .p-input-icon-left > i { left: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-left > .p-inputtext { @@ -687,7 +697,7 @@ .p-input-icon-right > i { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-input-icon-right > .p-inputtext { @@ -714,7 +724,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -764,11 +774,11 @@ padding: 0.5rem 0.5rem; } .p-multiselect .p-multiselect-label.p-placeholder { - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect .p-multiselect-trigger { background: #34495E; - color: #AEB6BF; + color: #aeb6bf; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -795,7 +805,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -803,7 +813,7 @@ .p-multiselect-panel .p-multiselect-header .p-multiselect-close { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -928,7 +938,7 @@ } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1008,7 +1018,7 @@ } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { - color: #AEB6BF; + color: #aeb6bf; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #485b6e; @@ -1244,7 +1254,7 @@ background: #ffffff; border: 1px solid #dee2e6; margin: 0.2rem; - color: #AEB6BF; + color: #aeb6bf; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; width: 2.357rem; @@ -1333,7 +1343,7 @@ outline-color: #B2DFDB; } .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1372,7 +1382,7 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { @@ -1678,7 +1688,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler { bottom: -0.7em; margin-left: -0.46em; - color: #AEB6BF; + color: #aeb6bf; border-radius: 3px; transition: color 0.2s, box-shadow 0.2s; } @@ -1693,7 +1703,7 @@ .p-paginator { background: #1C2833; - color: #AEB6BF; + color: #aeb6bf; border: 1px solid #2C3E50; padding: 0.5rem 1rem; border-radius: 3px; @@ -1702,7 +1712,7 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1729,7 +1739,7 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { - color: #AEB6BF; + color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; border: 0 none; @@ -1837,7 +1847,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; transition: color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { @@ -1845,7 +1855,7 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; @@ -1876,7 +1886,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1936,7 +1946,7 @@ outline-color: #B2DFDB; } .p-treetable .p-sortable-column .p-sortable-column-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-treetable .p-sortable-column .p-sortable-column-badge { @@ -1975,7 +1985,7 @@ padding: 1rem 1rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; transition: color 0.2s, box-shadow 0.2s; } @@ -2123,7 +2133,7 @@ .p-card .p-card-subtitle { font-weight: 700; margin-bottom: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-card .p-card-content { padding: 1rem 0; @@ -2184,7 +2194,7 @@ .p-panel .p-panel-titlebar .p-panel-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; @@ -2230,7 +2240,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -2246,7 +2256,7 @@ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabview .p-tabview-nav li.p-highlight a { @@ -2294,7 +2304,7 @@ .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2rem; height: 2rem; - color: #AEB6BF; + color: #aeb6bf; background: transparent; border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; @@ -2386,7 +2396,7 @@ } .p-sidebar .p-sidebar-close { background: transparent; - color: #AEB6BF; + color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; @@ -2480,11 +2490,11 @@ color: #ebedef; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-breadcrumb ul li.p-breadcrumb-chevron { margin: 0 0.5rem 0 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu { @@ -2505,11 +2515,11 @@ color: #ebedef; } .p-contextmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-contextmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2568,11 +2578,11 @@ color: #ebedef; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2602,11 +2612,11 @@ color: #ebedef; } .p-megamenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-megamenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2680,11 +2690,11 @@ color: #ebedef; } .p-menu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2738,11 +2748,11 @@ color: #ebedef; } .p-menubar .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-menubar .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2771,11 +2781,11 @@ color: #ebedef; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; margin-left: 0.5rem; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { @@ -2881,11 +2891,11 @@ color: #ebedef; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); @@ -2947,7 +2957,7 @@ } .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; - color: #AEB6BF; + color: #aeb6bf; } .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; @@ -2985,7 +2995,7 @@ border: solid #2C3E50; border-width: 0 0 2px 0; background: transparent; - color: #AEB6BF; + color: #aeb6bf; padding: 1rem; font-weight: 600; border-top-right-radius: 3px; @@ -3004,7 +3014,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: transparent; border-color: #34495E; - color: #AEB6BF; + color: #aeb6bf; border-width: 0 0 2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { @@ -3032,11 +3042,11 @@ color: #ebedef; } .p-tieredmenu .p-menuitem-link .p-menuitem-icon { - color: #AEB6BF; + color: #aeb6bf; margin-right: 0.5rem; } .p-tieredmenu .p-menuitem-link .p-submenu-icon { - color: #AEB6BF; + color: #aeb6bf; } .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/src/App.vue b/src/App.vue index cb7ccc1be..3e0e3f8c8 100755 --- a/src/App.vue +++ b/src/App.vue @@ -69,13 +69,6 @@ export default { themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, event.theme)); this.theme = event.theme; - this.removeClass(document.body, 'dark-theme'); - this.removeClass(document.body, 'dark-theme-alt'); - - if (event.dark) { - this.addClass(document.body, event.dark); - } - this.activeMenuIndex = null; }, addClass(element, className) { diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue index ffe164f56..d66ebb792 100755 --- a/src/AppTopBar.vue +++ b/src/AppTopBar.vue @@ -25,22 +25,22 @@
  • Saga OrangeSaga Orange
  • Saga PurpleSaga Purple
  • Saga TealSaga Teal
    • -
  • Vela BlueVela Blue
    • -
  • Vela BlueVela Cyan
    • -
  • Vela BlueVela DeepPurple
    • -
  • Vela GreenVela Green
    • -
  • Vela IndigoVela Indigo
    • -
  • Vela OrangeVela Orange
    • -
  • Vela PurpleVela Purple
    • -
  • Vela TealVela Teal
    • +
  • Vela BlueVela Blue
    • +
  • Vela BlueVela Cyan
    • +
  • Vela BlueVela DeepPurple
    • +
  • Vela GreenVela Green
    • +
  • Vela IndigoVela Indigo
    • +
  • Vela OrangeVela Orange
    • +
  • Vela PurpleVela Purple
    • +
  • Vela TealVela Teal
  • Nova LightNova Light
  • Nova DarkNova Dark
  • Nova ColoredNova Colored
  • Nova VueNova Vue
    • -
  • Luna AmberLuna Amber
    • -
  • Luna BlueLuna Blue
    • -
  • Luna GreenLuna Green
    • -
  • Luna PinkLuna Pink
    • +
  • Luna AmberLuna Amber
    • +
  • Luna BlueLuna Blue
    • +
  • Luna GreenLuna Green
    • +
  • Luna PinkLuna Pink
  • RheaRhea
    • @@ -97,8 +97,8 @@ export default { } }, methods: { - changeTheme(event, theme, dark) { - this.$emit('change-theme', {theme: theme, dark: dark}); + changeTheme(event, theme) { + this.$emit('change-theme', {theme: theme}); this.activeMenuIndex = null; event.preventDefault(); }, diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss index 31029bf79..f290e8f06 100644 --- a/src/assets/styles/app/_content.scss +++ b/src/assets/styles/app/_content.scss @@ -3,92 +3,11 @@ padding-top: 70px; .content-section { - display: block; - padding: 30px; - - h2 { - margin-top: 0; - } - - &.introduction { - color: #ffffff; - background-color: #607D8B; - - .feature-intro { - - h1 { - font-size: 28px; - margin: 0 0 20px 0; - color: #ffffff; - font-weight: 700; - } - - p { - margin: 0; - line-height: 2em; - font-size: 16px; - color: #ffffff; - } - - a { - border-radius: 3px; - background-color: #ffffff; - padding: 2px 4px; - color: #495057; - } - } - } - - &.implementation { - background-color: #ffffff; - - > hr { - margin-top: 24px; - opacity: .3; - } - - > h3 { - font-weight: 500; - margin-top: 30px; - font-size: 18px; - - &:first-child { - margin-top: 0px; - } - } - - .p-col-12 > h3 { - font-weight: 400; - margin-top: 30px; - font-size: 18px; - } - - h3.first { - margin-top: 0px; - } - - &.implementation-charts { - background-color: #FFFFFF; - } - } - - .component-sizes { - display: inline-flex; - flex-direction: column; - - .p-component { - margin-bottom: 1em; - flex: 0 0 auto; - - &:last-child{ - margin-bottom: 0; - } - } - } + padding: 2rem; &.content-submenu { - background-color: #546E7A; - padding: 15px 30px; + background-color: var(--layer-1); + color: var(--text-color); ul { margin: 0; @@ -99,19 +18,19 @@ list-style: none; width: 20%; display: inline-block; - padding: .25em; + padding: .25rem; a { - color: #ffffff; + color: var(--text-color); display: block; - width: 90%; + width: 100%; border: 1px solid transparent; - padding: 6px 12px; + padding: .5rem 1rem; border-radius: 3px; - transition: background-color .1s; + transition: background-color .2s; &:hover { - background-color: rgba(255,255,255,0.1); + background-color: var(--layer-2); } &:focus { @@ -128,100 +47,121 @@ } } - &.documentation { - border-top: 1px solid #dadada; - background-color: #f5f7f8; + &.introduction { + color: var(--primary-color-text); + background-color: var(--primary-color); + + .feature-intro { + h1 { + font-size: 2rem; + margin: 0 0 1.5rem 0; + font-weight: 700; + } + + p { + margin: 0; + line-height: 2; + font-size: 1.143rem; + } + + a { + border-radius: 3px; + background-color: var(--layer-0); + padding: 2px 4px; + color: var(--text-color); + } + } + } + + &.implementation { + background-color: var(--layer-0); + color: var(--text-color); h3 { - color: #495057; - margin-top: 25px; - margin-bottom: 0px; - font-size: 22px; - font-weight: normal; - } - - h4 { - text-align: center; - font-weight: 700; - font-size: 16px; - } - - p { - color: #495057; - font-size: 14px; - line-height: 24px; - margin: 10px 0; - } - - .doc-tablewrapper { - margin: 16px 0; - overflow: auto; - } - - a { - color: #1976D2; font-weight: 500; - transition: color .2s; - } + margin: 2rem 0 1rem 0; + font-size: 1.286rem; - .btn-viewsource { - background-color: #444; - padding: .5em 1em; - border-radius: 2px; - color: #fff; - font-weight: 700; - margin: .5em 0; - display: inline-block; - transition: background-color .2s; - - &:hover { - background-color: #595959; - color: #fff; + &:first-child, + &.first { + margin-top: 0; } } + .component-sizes { + display: inline-flex; + flex-direction: column; + + .p-component { + margin-bottom: 1rem; + flex: 0 0 auto; + + &:last-child { + margin-bottom: 0; + } + } + } + } + + &.documentation { + background-color: var(--layer-1); + color: var(--text-color); + + h3 { + margin-top: 1.5rem; + margin-bottom: 0; + font-size: 1.5rem; + font-weight: 600; + color: var(--text-color); + } + + p { + font-size: 1rem; + line-height: 1.5; + margin: .75rem 0; + color: var(--text-color); + } + + .doc-tablewrapper { + margin: 1rem 0; + overflow: auto; + } + i:not([class~="pi"]) { - background-color: #ffffff; + background-color: var(--layer-0); + color: var(--primary-color); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-style: normal; font-size: 14px; padding: 2px 4px; letter-spacing: .5px; - color: #257908; border-radius: 4px; font-weight: 500; } - /* Demo Tabs Source */ .p-tabview { - background: none; + background: transparent; border: 0 none; .p-tabview-nav { - border-radius: 3px 3px 0 0; - padding: 4px 4px 0px 4px; - border-bottom: 1px solid #dadada; + border-radius: 0; + padding: 0; + border-bottom: 1px solid var(--layer-2); background-color: transparent; li { - margin-right: 4px; - box-shadow: none !important; + margin-right: 0; border: 0 none; top: 1px; - border-top-right-radius: 3px; - border-top-left-radius: 3px; a { - font-weight: 400; - color: #495057; + color: var(-text-color-secondary); text-shadow: none; height: inherit; background-color: transparent; border: 0 none; border-bottom: 1px solid transparent; margin-bottom: -1px; - border-top-right-radius: 3px; - border-top-left-radius: 3px; transition: background-color .2s; &:focus { @@ -231,23 +171,15 @@ } } - &.tab-doc { - margin-right: 0; - } - &.p-highlight a, &.p-highlight:hover a { - border: 0 none; - background: #f5f7f8; - color: #1976D2; - border-bottom: 1px solid #1976D2; + background: transparent; + color: var(--primary-color); + border-bottom: 1px solid var(--primary-color); } &:not(.p-highlight):not(.p-disabled):hover a { - color: #1976D2; - background-color: transparent; - border: 0 none; - border-bottom: 1px solid #1976D2; + border-bottom: 1px solid var(--primary-color); } } } @@ -255,16 +187,27 @@ .p-tabview-panels { background: transparent; border: 0 none; - color: #495057; + + a { + background-color: var(--primary-color); + color: var(--primary-color-text); + border-radius: 3px; + padding: 2px 4px; + } + + .btn-viewsource { + display: inline-block; + padding: .5rem 1rem; + } } } } &.support { .support-image { - background-color: #495057; - padding: 30px; - color: #ffffff; + background-color: var(--text-color-secondary); + padding: 2rem; + color: var(--layer-0); text-align: left; .p-md-6:last-child { @@ -272,7 +215,7 @@ } h3, p { - color: #ffffff; + color: var(--layer-0); } } @@ -284,31 +227,18 @@ .doc-table { border-collapse: collapse; width: 100%; + background-color: var(--layer-0); th { - background-color: #d6dade; - padding: 10px 14px; + border-bottom: 1px solid var(--layer-2); + padding: 1rem; text-align: left; - border: solid 1px #d6dade; } tbody{ td { - padding: 10px 14px; - border: 1px solid #eaecee; - } - - tr{ - &:nth-child(even) { - background-color: #eaecee; - } - &:nth-child(odd) { - background-color: #ffffff; - - td { - border: 1px solid #ffffff; - } - } + padding: 1rem; + border-bottom: 1px solid var(--layer-2); } } } diff --git a/src/assets/styles/app/_core.scss b/src/assets/styles/app/_core.scss index 3846280e9..c6741e7b0 100644 --- a/src/assets/styles/app/_core.scss +++ b/src/assets/styles/app/_core.scss @@ -21,10 +21,10 @@ body { height: 100%; overflow-x: hidden; overflow-y: auto; - background-color: #ffffff; + background-color: var(--layer-0); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal; - color: #495057; + color: var(--text-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -105,60 +105,43 @@ a { } pre[class*="language-"] code { - border-left: 10px solid #d6dade !important; - box-shadow: -1px 0px 0px 0px #d6dade, 0px 0px 0px 1px #f8f8f8 !important; - background: #ffffff !important; + border-left: 10px solid var(--layer-2) !important; + box-shadow: none !important; + background: var(--layer-0) !important; margin: 1em 0; + color: var(--text-color); + font-size: 14px; - code { - font-size: 14px; + .token { + &.tag, + &.keyword { + color: #2196F3 !important; + } - .token { - &.tag { - color: #d57935; - } + &.attr-name, + &.attr-string { + color: #4CAF50 !important; + } - &.attr-value { - color: #308eea; - } + &.attr-value { + color: #00ACC1 !important; + } - &.language-javascript { - color: #1990b8; - } + &.language-javascript { + color: pink !important; + } - &.operator { - background: transparent; - } + &.punctuation { + color: var(--text-color); + } + + &.operator { + background: transparent; } } } - .p-toast.p-toast-topright, .p-toast.p-toast-topleft { top: 100px; -} - -.dark-theme { - .implementation { - background-color: #3f3f3f !important; - color: #dedede !important; - - > h3, - > h4 { - color: #dedede !important - } - } -} - -.dark-theme-alt { - .implementation { - background-color: #10161d !important; - color: #ebedef !important; - } - - > h3, - > h4 { - color: #ebedef !important - } } \ No newline at end of file diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss index c787a9194..b9f94e0e7 100644 --- a/src/assets/styles/app/_menu.scss +++ b/src/assets/styles/app/_menu.scss @@ -3,21 +3,19 @@ left: 0; top: 70px; height: calc(100% - 70px); - background-color: #ffffff; + background-color: var(--layer-0); overflow: auto; width: 250px; - box-shadow: 0 0 2px rgba(0,0,0,0.25); + border-right: 1px solid var(--layer-2); .layout-menu { - > span { width: 100%; - height: 50px; + height: 3.5rem; display: block; - padding: 0px 0px 0px 20px; - margin-bottom: 12px; - background-color: #f8f9fa; - color: #767676; + padding-left: 1.5rem; + background-color: var(--layer-1); + color: var(--text-color-secondary); font-weight: 700; user-select: none; transition: background-color .2s; @@ -25,44 +23,26 @@ align-items: center; span { - font-size: 14px; - margin: 0px 0px 0px 8px; + margin-left: .5rem; display: block; line-height: 1; } - - img { - width: 20px; - height: auto; - float: left; - - &.layout-menu-icon-active { - display: none; - } - - &.layout-menu-icon-inactive { - display: inline; - } - } } > div { - background-color: #ffffff; - padding: 0 15px 15px 15px; + padding: 1rem; display: flex; flex-direction: column; a { - display: inline-block; - padding: 6px; - cursor: pointer; - border-radius: 4px; - font-size: 14px; - color: #495057; + color: var(--text-color); + display: block; + padding: .5rem; + border-radius: 3px; transition: background-color .2s; &:hover { - background-color: #e9ecef; + background-color: var(--layer-2); } &:focus { @@ -73,21 +53,8 @@ } &.router-link-active { - color: #526F89; font-weight: 700; } - - .menuitem-badge { - background: linear-gradient(to bottom, #96c93d, #00b09b); - padding: 2px 4px; - vertical-align: middle; - border-radius: 3px; - color: #ffffff; - font-weight: bold; - font-size: 11px; - position: relative; - top: -1px; - } } } } diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss index 93f829893..561ff457c 100644 --- a/src/assets/styles/app/_topbar.scss +++ b/src/assets/styles/app/_topbar.scss @@ -1,6 +1,5 @@ .layout-topbar { - background-color: #ffffff; - display: block; + background-color: var(--layer-0); padding: 0; height: 70px; position: fixed; @@ -12,8 +11,7 @@ .menu-button { display: none; - color: #495057; - font-size: 24px; + color: var(--text-color); position: absolute; left: 0; top: 0; @@ -21,20 +19,21 @@ height: 70px; line-height: 70px; text-align: center; - cursor: pointer; transition: background-color .2s; + cursor: pointer; &:hover { background-color: #e9ecef; } i { + font-size: 24px; line-height: inherit; } } .logo { - margin-left: 45px; + margin-left: 35px; margin-top: 8px; display: inline-block; @@ -63,18 +62,18 @@ > a { text-decoration: none; - color: #495057; + color: var(--text-color); min-width: 120px; font-size: 16px; display: inline-block; text-align: center; user-select: none; line-height: inherit; - cursor: pointer; transition: background-color .2s; + cursor: pointer; &:hover { - background-color: #e9ecef; + background-color: var(--layer-2); } &:focus { @@ -94,11 +93,11 @@ right: 0; width: 275px; max-height: 400px; - background-color: #ffffff; + background-color: var(--layer-0); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); overflow: auto; list-style-type: none; - padding: 6px 12px; + padding: 1rem; margin: 0; border-radius: 3px; @@ -106,68 +105,48 @@ line-height: 1; &.topbar-submenu-header { - padding: 6px 12px; + padding: .5rem; font-weight: bold; text-align: left; - margin-top: 18px; + margin-top: 1rem; &:first-child { - margin-top: 6px; + margin-top: 0; } } } a { text-decoration: none; - color: #495057; - padding: 8px 12px; + color: var(--text-color); + padding: .5rem; display: block; user-select: none; transition: background-color .2s; + border-radius: 3px; cursor: pointer; &:hover { - background-color: #e9ecef; + background-color: var(--layer-2); cursor: pointer; } + span { + margin-left: .5rem; + vertical-align: middle; + } + + i { + vertical-align: middle; + color: var(--text-color-secondary); + vertical-align: middle; + } + img { width: 32px; vertical-align: middle; - margin-right: 4px; + margin-right: .5rem; } - - span { - margin-left: 8px; - } - - i { - vertical-align: middle; - font-size: 18px; - margin-right: 4px; - margin-left: 4px; - color: #6c757d; - } - } - - li:last-child { - a { - border-bottom: 0 none; - } - } - } - - &.topbar-resources-submenu { - > ul { - a { - padding: 12px 6px; - - span { - margin-left: 6px; - } - } - - } } } diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue index dba4199ea..3196ebd88 100755 --- a/src/views/galleria/GalleriaIndicatorDemo.vue +++ b/src/views/galleria/GalleriaIndicatorDemo.vue @@ -23,8 +23,6 @@ -
    -

    Change Preview On Indicator Hover

    @@ -38,8 +36,6 @@ -
    -

    Show Indicator On Preview

    @@ -53,8 +49,6 @@ -
    -

    Position

    diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue index 98fbe07ef..d583f8290 100755 --- a/src/views/inputtext/InputTextDemo.vue +++ b/src/views/inputtext/InputTextDemo.vue @@ -8,7 +8,7 @@
    -

    Basic

    +

    Basic

    {{value1}}