From 03532ffa1d8f4e76ec0c4fa257bf115aa55c6951 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Tue, 16 Jun 2020 23:14:57 +0300 Subject: [PATCH] Add spacing, updated themes --- package.json | 4 +- public/themes/luna-amber/theme.css | 204 +++++++------ public/themes/luna-green/theme.css | 204 +++++++------ public/themes/luna-pink/theme.css | 204 +++++++------ public/themes/nova-accent/theme.css | 202 +++++++------ public/themes/nova-alt/theme.css | 202 +++++++------ public/themes/nova-vue/theme.css | 202 +++++++------ public/themes/nova/theme.css | 202 +++++++------ public/themes/rhea/theme.css | 208 +++++++------ public/themes/saga-blue/theme.css | 322 +++++++++++---------- public/themes/saga-cyan/theme.css | 322 +++++++++++---------- public/themes/saga-deeppurple/theme.css | 322 +++++++++++---------- public/themes/saga-green/theme.css | 322 +++++++++++---------- public/themes/saga-indigo/theme.css | 322 +++++++++++---------- public/themes/saga-orange/theme.css | 322 +++++++++++---------- public/themes/saga-purple/theme.css | 322 +++++++++++---------- public/themes/saga-teal/theme.css | 322 +++++++++++---------- public/themes/vela-blue/theme.css | 209 +++++++------ public/themes/vela-cyan/theme.css | 209 +++++++------ public/themes/vela-deeppurple/theme.css | 209 +++++++------ public/themes/vela-green/theme.css | 209 +++++++------ public/themes/vela-indigo/theme.css | 209 +++++++------ public/themes/vela-orange/theme.css | 209 +++++++------ public/themes/vela-purple/theme.css | 209 +++++++------ public/themes/vela-teal/theme.css | 209 +++++++------ src/AppMenu.vue | 5 +- src/components/button/Button.css | 2 +- src/components/checkbox/Checkbox.css | 2 +- src/components/radiobutton/RadioButton.css | 2 +- src/router.js | 5 + src/views/elevation/ElevationDoc.vue | 2 +- src/views/spacing/SpacingDemo.vue | 73 +++++ src/views/spacing/SpacingDoc.vue | 64 ++++ 33 files changed, 3397 insertions(+), 2638 deletions(-) create mode 100644 src/views/spacing/SpacingDemo.vue create mode 100644 src/views/spacing/SpacingDoc.vue diff --git a/package.json b/package.json index b93e3a3c8..2ef79a986 100644 --- a/package.json +++ b/package.json @@ -36,8 +36,8 @@ "gulp-rename": "^1.2.2", "gulp-uglify": "^1.5.3", "gulp-uglifycss": "^1.0.6", - "primeflex": "1.1.1", - "primeicons": "4.0.0-rc.2", + "primeflex": "1.2.0", + "primeicons": "4.0.0", "prismjs": "^1.15.0", "quill": "1.3.3", "@fullcalendar/core": "4.0.2", diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index c76fb4687..2593f7aa0 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #ffe8b3; } -::-webkit-input-placeholder { - color: #9b9b9b; -} - -:-moz-placeholder { - color: #9b9b9b; -} - -::-moz-placeholder { - color: #9b9b9b; -} - -:-ms-input-placeholder { - color: #9b9b9b; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #212121; @@ -247,7 +233,7 @@ color: #888888; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #dedede; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #585858; border: 1px solid #585858; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #585858; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #585858; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #9b9b9b; +} + +:-moz-placeholder { + color: #9b9b9b; +} + +::-moz-placeholder { + color: #9b9b9b; +} + +:-ms-input-placeholder { + color: #9b9b9b; +} + .p-listbox { background: #323232; color: #dedede; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #585858; border: 1px solid #585858; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #dedede; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #FFB300; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #dedede; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #4c4c4c; border: 2px solid #FFB300; border-radius: 100%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #FFB300; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #888888; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #4c4c4c; + border-color: transparent; color: #888888; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #585858; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #dedede; background: #252525; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #323232; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #ffe8b3; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #888888; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #dedede; @@ -1539,7 +1545,7 @@ background: #FFB300; border: 1px solid #FFB300; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #4c4c4c; @@ -1634,7 +1640,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #4c4c4c; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #888888; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #dedede; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #4c4c4c; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #dedede; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #FFB300; + border-color: #FFB300; color: #212121; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #4c4c4c; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #4c4c4c; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #888888; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #dedede; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #dedede; background: #252525; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #323232; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #ffe8b3; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #888888; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #dedede; @@ -2075,7 +2086,7 @@ background: #191919; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2120,7 +2131,7 @@ .p-card { background: #323232; color: #dedede; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #888888; background: transparent; + border: 0 none; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #FFB300; + border: 0 none; color: #212121; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #FF8F00; + border-color: transparent; color: #212121; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #FFB300; + border: 0 none; color: #212121; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #FF8F00; + border-color: transparent; color: #212121; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #FFB300; @@ -2851,11 +2870,16 @@ width: 2rem; height: 2rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1rem; } + .p-menubar .p-menubar-button:hover { + color: #dedede; + background: transparent; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #191919; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #191919; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #585858; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #4c4c4c; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 07d3d73fb..321ce3667 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #88e9aa; } -::-webkit-input-placeholder { - color: #9b9b9b; -} - -:-moz-placeholder { - color: #9b9b9b; -} - -::-moz-placeholder { - color: #9b9b9b; -} - -:-ms-input-placeholder { - color: #9b9b9b; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #888888; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #dedede; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #585858; border: 1px solid #585858; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #585858; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #585858; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #9b9b9b; +} + +:-moz-placeholder { + color: #9b9b9b; +} + +::-moz-placeholder { + color: #9b9b9b; +} + +:-ms-input-placeholder { + color: #9b9b9b; +} + .p-listbox { background: #323232; color: #dedede; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #585858; border: 1px solid #585858; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #dedede; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #1ea04c; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #dedede; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #4c4c4c; border: 2px solid #1ea04c; border-radius: 100%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #1ea04c; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #888888; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #4c4c4c; + border-color: transparent; color: #888888; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #585858; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #dedede; background: #252525; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #323232; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #88e9aa; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #888888; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #dedede; @@ -1539,7 +1545,7 @@ background: #1ea04c; border: 1px solid #1ea04c; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #4c4c4c; @@ -1634,7 +1640,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #4c4c4c; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #888888; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #dedede; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #4c4c4c; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #dedede; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #1ea04c; + border-color: #1ea04c; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #4c4c4c; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #4c4c4c; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #888888; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #dedede; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #dedede; background: #252525; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #323232; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #88e9aa; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #888888; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #dedede; @@ -2075,7 +2086,7 @@ background: #191919; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2120,7 +2131,7 @@ .p-card { background: #323232; color: #dedede; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #888888; background: transparent; + border: 0 none; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #1ea04c; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #18803c; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #1ea04c; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #18803c; + border-color: transparent; color: #ffffff; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #1ea04c; @@ -2851,11 +2870,16 @@ width: 2rem; height: 2rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1rem; } + .p-menubar .p-menubar-button:hover { + color: #dedede; + background: transparent; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #191919; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #191919; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #585858; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #4c4c4c; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index ebc034c24..7dabd6242 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #f1b6c8; } -::-webkit-input-placeholder { - color: #9b9b9b; -} - -:-moz-placeholder { - color: #9b9b9b; -} - -::-moz-placeholder { - color: #9b9b9b; -} - -:-ms-input-placeholder { - color: #9b9b9b; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #888888; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #dedede; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #585858; border: 1px solid #585858; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #585858; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #585858; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #9b9b9b; +} + +:-moz-placeholder { + color: #9b9b9b; +} + +::-moz-placeholder { + color: #9b9b9b; +} + +:-ms-input-placeholder { + color: #9b9b9b; +} + .p-listbox { background: #323232; color: #dedede; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #585858; border: 1px solid #585858; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #dedede; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #cc285c; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #dedede; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #4c4c4c; border: 2px solid #cc285c; border-radius: 100%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #cc285c; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #888888; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #4c4c4c; + border-color: transparent; color: #888888; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #585858; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #dedede; background: #252525; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #323232; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #f1b6c8; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #888888; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #dedede; @@ -1539,7 +1545,7 @@ background: #cc285c; border: 1px solid #cc285c; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #252525; border: 1px solid #252525; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #4c4c4c; @@ -1634,7 +1640,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #4c4c4c; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #888888; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #dedede; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #4c4c4c; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #dedede; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #cc285c; + border-color: #cc285c; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #4c4c4c; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #dedede; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #4c4c4c; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #888888; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #dedede; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #dedede; background: #252525; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #323232; color: #dedede; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #f1b6c8; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #888888; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #dedede; @@ -2075,7 +2086,7 @@ background: #191919; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2120,7 +2131,7 @@ .p-card { background: #323232; color: #dedede; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #888888; background: transparent; + border: 0 none; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #888888; + border: 0 none; background: transparent; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #dedede; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #cc285c; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #a32049; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #cc285c; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #a32049; + border-color: transparent; color: #ffffff; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #dedede; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #cc285c; @@ -2851,11 +2870,16 @@ width: 2rem; height: 2rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1rem; } + .p-menubar .p-menubar-button:hover { + color: #dedede; + background: transparent; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #191919; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #191919; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #dedede; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #585858; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #4c4c4c; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index ecebfdc81..482295d52 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } -::-webkit-input-placeholder { - color: #666666; -} - -:-moz-placeholder { - color: #666666; -} - -::-moz-placeholder { - color: #666666; -} - -:-ms-input-placeholder { - color: #666666; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #a6a6a6; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #007ad9; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #a6a6a6; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #007ad9; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #cccccc; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #a6a6a6; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #666666; +} + +:-moz-placeholder { + color: #666666; +} + +::-moz-placeholder { + color: #666666; +} + +:-ms-input-placeholder { + color: #666666; +} + .p-listbox { background: #ffffff; color: #333333; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #848484; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #333333; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #333333; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #212121; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #333333; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #666666; border-radius: 100%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #007ad9; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #848484; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #eaeaea; + border-color: transparent; color: #848484; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #f4f4f4; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #8dcdff; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #333333; @@ -1539,7 +1545,7 @@ background: #007ad9; border: 1px solid #007ad9; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #c8c8c8; @@ -1634,7 +1640,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #848484; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #d95f00; + border-color: #d95f00; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #333333; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #8dcdff; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #848484; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #333333; @@ -2075,7 +2086,7 @@ background: #007ad9; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #ffffff; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #ffffff; background: transparent; + border: 0 none; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #5ab7ff; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #ffffff; + border: 0 none; background: transparent; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #5ab7ff; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #007ad9; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #005b9f; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #007ad9; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #005b9f; + border-color: transparent; color: #ffffff; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #eaeaea; @@ -2851,11 +2870,16 @@ width: 2rem; height: 2rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1rem; } + .p-menubar .p-menubar-button:hover { + color: #5ab7ff; + background: transparent; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #007ad9; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #f4f4f4; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index bcf0a6dbc..de2fbfdc8 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } -::-webkit-input-placeholder { - color: #666666; -} - -:-moz-placeholder { - color: #666666; -} - -::-moz-placeholder { - color: #666666; -} - -:-ms-input-placeholder { - color: #666666; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #a6a6a6; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #007ad9; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #a6a6a6; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #007ad9; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #cccccc; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #a6a6a6; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #666666; +} + +:-moz-placeholder { + color: #666666; +} + +::-moz-placeholder { + color: #666666; +} + +:-ms-input-placeholder { + color: #666666; +} + .p-listbox { background: #ffffff; color: #333333; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #848484; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #333333; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #333333; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #212121; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #333333; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #666666; border-radius: 100%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #007ad9; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #848484; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #eaeaea; + border-color: transparent; color: #848484; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #f4f4f4; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #8dcdff; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #333333; @@ -1539,7 +1545,7 @@ background: #007ad9; border: 1px solid #007ad9; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #c8c8c8; @@ -1634,7 +1640,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #848484; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #007ad9; + border-color: #007ad9; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #333333; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #8dcdff; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #848484; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #333333; @@ -2075,7 +2086,7 @@ background: #333333; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #ffffff; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #ffffff; background: transparent; + border: 0 none; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #b4b4b4; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #ffffff; + border: 0 none; background: transparent; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #b4b4b4; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #007ad9; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #005b9f; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #007ad9; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #005b9f; + border-color: transparent; color: #ffffff; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #eaeaea; @@ -2851,11 +2870,16 @@ width: 2rem; height: 2rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1rem; } + .p-menubar .p-menubar-button:hover { + color: #b4b4b4; + background: transparent; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #333333; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #f4f4f4; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 45bdaff48..06fc77b86 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } -::-webkit-input-placeholder { - color: #666666; -} - -:-moz-placeholder { - color: #666666; -} - -::-moz-placeholder { - color: #666666; -} - -:-ms-input-placeholder { - color: #666666; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #a6a6a6; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #41b883; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #a6a6a6; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #41b883; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #cccccc; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #a6a6a6; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #666666; +} + +:-moz-placeholder { + color: #666666; +} + +::-moz-placeholder { + color: #666666; +} + +:-ms-input-placeholder { + color: #666666; +} + .p-listbox { background: #ffffff; color: #333333; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #848484; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #333333; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #333333; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #212121; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #333333; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #666666; border-radius: 100%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #41b883; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #848484; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #eaeaea; + border-color: transparent; color: #848484; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #f4f4f4; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #c2e9d8; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #333333; @@ -1539,7 +1545,7 @@ background: #41b883; border: 1px solid #41b883; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #c8c8c8; @@ -1634,7 +1640,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #848484; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #41b883; + border-color: #41b883; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #333333; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #c2e9d8; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #848484; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #333333; @@ -2075,7 +2086,7 @@ background: #f4f4f4; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #848484; background: transparent; + border: 0 none; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #333333; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #848484; + border: 0 none; background: transparent; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #333333; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #41b883; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #246749; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #41b883; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #246749; + border-color: transparent; color: #ffffff; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #eaeaea; @@ -2851,11 +2870,16 @@ width: 2rem; height: 2rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1rem; } + .p-menubar .p-menubar-button:hover { + color: #333333; + background: transparent; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #f4f4f4; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #f4f4f4; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 78b5b0fce..08508b28b 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } -::-webkit-input-placeholder { - color: #666666; -} - -:-moz-placeholder { - color: #666666; -} - -::-moz-placeholder { - color: #666666; -} - -:-ms-input-placeholder { - color: #666666; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #a6a6a6; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #007ad9; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #a6a6a6; background: transparent; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #007ad9; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #cccccc; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #a6a6a6; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #666666; +} + +:-moz-placeholder { + color: #666666; +} + +::-moz-placeholder { + color: #666666; +} + +:-ms-input-placeholder { + color: #666666; +} + .p-listbox { background: #ffffff; color: #333333; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #848484; + border: 0 none; background: transparent; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #333333; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #333333; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #212121; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #333333; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #666666; border-radius: 100%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #007ad9; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #848484; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #eaeaea; + border-color: transparent; color: #848484; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #f4f4f4; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #8dcdff; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #333333; @@ -1539,7 +1545,7 @@ background: #007ad9; border: 1px solid #007ad9; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #dadada; border: 1px solid #dadada; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #c8c8c8; @@ -1634,7 +1640,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #848484; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #848484; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #007ad9; + border-color: #007ad9; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e0e0e0; + border-color: transparent; color: #333333; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #333333; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #848484; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #333333; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #333333; background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #8dcdff; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #848484; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #333333; @@ -2075,7 +2086,7 @@ background: #f4f4f4; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #848484; background: transparent; + border: 0 none; border-radius: 3px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #333333; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #848484; + border: 0 none; background: transparent; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #333333; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #007ad9; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #005b9f; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #007ad9; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #005b9f; + border-color: transparent; color: #ffffff; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #333333; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #eaeaea; @@ -2851,11 +2870,16 @@ width: 2rem; height: 2rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1rem; } + .p-menubar .p-menubar-button:hover { + color: #333333; + background: transparent; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #f4f4f4; font-weight: 700; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #333333; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 3px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #f4f4f4; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 5650a36c4..a4a44a535 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } -::-webkit-input-placeholder { - color: #a6a6a6; -} - -:-moz-placeholder { - color: #a6a6a6; -} - -::-moz-placeholder { - color: #a6a6a6; -} - -:-ms-input-placeholder { - color: #a6a6a6; -} - .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #666666; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: auto; height: auto; color: #a6a6a6; + border: 0 none; background: transparent; border-radius: 2px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #666666; + border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #385048; @@ -247,7 +233,7 @@ color: #a6a6a6; background: transparent; border-radius: 2px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #666666; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -328,7 +314,7 @@ height: 1.5rem; color: #666666; border-radius: 2px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -414,7 +400,7 @@ .p-dropdown { background: #f4f4f4; border: 1px solid #dadada; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; } .p-dropdown:not(.p-disabled):hover { @@ -481,7 +467,7 @@ border: 0 none; color: #666666; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #f4f4f4; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -659,7 +645,7 @@ padding: 0.429rem 0.429rem; border: 1px solid #dadada; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 2px; } @@ -709,6 +695,22 @@ padding-right: 1.858rem; } +::-webkit-input-placeholder { + color: #a6a6a6; +} + +:-moz-placeholder { + color: #a6a6a6; +} + +::-moz-placeholder { + color: #a6a6a6; +} + +:-ms-input-placeholder { + color: #a6a6a6; +} + .p-listbox { background: #ffffff; color: #666666; @@ -739,7 +741,7 @@ padding: 0.429rem 0.857rem; border: 0 none; color: #666666; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #f4f4f4; border: 1px solid #dadada; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; } .p-multiselect:not(.p-disabled):hover { @@ -819,13 +821,15 @@ width: auto; height: auto; color: #a6a6a6; + border: 0 none; background: transparent; border-radius: 2px; - transition: color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #7B95A3; + border-color: transparent; background: transparent; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #666666; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -883,7 +887,7 @@ height: 20px; color: #666666; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #a6a6a6; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #666666; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #eaeaea; border: 1px solid #eaeaea; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #7f7f7f; border-radius: 50%; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #eaeaea; border: 1px solid #eaeaea; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #7B95A3; padding: 0.429rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; } .p-button:enabled:hover { @@ -1267,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #a6a6a6; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #f4f4f4; + border-color: transparent; color: #a6a6a6; } .p-carousel .p-carousel-indicators { @@ -1290,7 +1296,7 @@ background-color: #7B95A3; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 700; color: #666666; background: #ffffff; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #666666; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #e4e9ec; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #a6a6a6; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #666666; @@ -1539,7 +1545,7 @@ background: #7B95A3; border: 1px solid #7B95A3; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #eaeaea; border: 1px solid #eaeaea; color: #333333; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #c8c8c8; @@ -1634,7 +1640,7 @@ border: 0 none; color: #666666; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f4f4f4; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #a6a6a6; border-radius: 2px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #666666; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f4; + border-color: transparent; color: #666666; } .p-paginator .p-dropdown { @@ -1748,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #666666; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #AFD3C8; + border-color: #AFD3C8; color: #385048; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #f4f4f4; + border-color: transparent; color: #666666; } @@ -1795,7 +1806,7 @@ border: 0 none; color: #666666; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f4f4f4; @@ -1851,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.429rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #a6a6a6; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #666666; @@ -1943,7 +1954,7 @@ font-weight: 700; color: #666666; background: #ffffff; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #666666; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #e4e9ec; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #a6a6a6; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #666666; @@ -2075,7 +2086,7 @@ background: #7B95A3; font-weight: 700; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2159,13 +2170,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.857rem 1rem; color: #ffffff; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2197,11 +2208,13 @@ height: auto; color: #ffffff; background: transparent; + border: 0 none; border-radius: 2px; - transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ffffff; + border-color: transparent; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2246,7 +2259,7 @@ font-weight: 700; border-top-right-radius: 2px; border-top-left-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2306,13 +2319,15 @@ width: auto; height: auto; color: #ffffff; + border: 0 none; background: transparent; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ffffff; + border-color: transparent; background: transparent; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2358,6 +2373,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #7B95A3; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; @@ -2365,10 +2381,11 @@ top: -0.769rem; right: -0.769rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #617c8a; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2397,14 +2414,16 @@ } .p-sidebar .p-sidebar-close { background: #7B95A3; + border: 0 none; color: #ffffff; width: 1.538rem; height: 1.538rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #617c8a; + border-color: transparent; color: #ffffff; } @@ -2482,7 +2501,7 @@ padding: 0.571rem 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2513,7 +2532,7 @@ padding: 0.857rem; color: #666666; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2563,7 +2582,7 @@ margin: 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2577,7 +2596,7 @@ padding: 0.857rem; color: #666666; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2612,7 +2631,7 @@ padding: 0.857rem; color: #666666; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2691,7 +2710,7 @@ padding: 0.857rem; color: #666666; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2750,7 +2769,7 @@ padding: 0.857rem; color: #666666; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2784,7 +2803,7 @@ padding: 0.857rem; color: #666666; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2827,7 +2846,7 @@ margin: 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #eaeaea; @@ -2848,13 +2867,18 @@ color: #ffffff; background: transparent; border: 0 none; - width: 2.5rem; - height: 2.5rem; + width: 2rem; + height: 2rem; border-radius: 2px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { - font-size: 1.5rem; + font-size: 1rem; + } + .p-menubar .p-menubar-button:hover { + color: #ffffff; + background: transparent; + border-color: transparent; } .p-menubar .p-menubar-button:focus { outline: 0 none; @@ -2875,7 +2899,7 @@ margin: 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2885,7 +2909,7 @@ padding: 0.857rem; color: #666666; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2969,7 +2993,7 @@ background: #7B95A3; font-weight: 700; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3018,7 +3042,7 @@ padding: 0.857rem; color: #666666; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3060,7 +3084,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; background: #ffffff; } @@ -3120,7 +3144,7 @@ font-weight: 700; border-top-right-radius: 2px; border-top-left-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3156,7 +3180,7 @@ padding: 0.857rem; color: #666666; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3210,7 +3234,7 @@ margin: 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3328,7 +3352,7 @@ border-radius: 2px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: transparent; @@ -3374,7 +3398,7 @@ border-radius: 2px; width: auto; height: auto; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: transparent; @@ -3426,7 +3450,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3441,7 +3465,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3463,7 +3487,7 @@ background-color: #7B95A3; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3503,7 +3527,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3519,7 +3543,7 @@ .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 2px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f4f4f4; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 5bc95e12d..edc48cf9e 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #2196F3; --primary-color-text: #ffffff; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #BBDEFB; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #BBDEFB; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #2196F3; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #2196F3; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #2196F3; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #2196F3; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #1976D2; - background: #ffffff; - border: 1px solid #2196F3; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #1976D2; - border-color: #1E88E5; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #BBDEFB; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #1976D2; - border-color: #1976D2; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #BBDEFB; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #2196F3; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #2196F3; @@ -1539,7 +1545,7 @@ background: #2196F3; border: 1px solid #2196F3; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #BBDEFB; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #2196F3; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #2196F3; + border-color: #2196F3; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #2196F3; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #BBDEFB; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #2196F3; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #2196F3; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #1976D2; + background: #1E88E5; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #1976D2; } .p-badge.p-badge-success { diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css index 7701f9a33..db161f061 100644 --- a/public/themes/saga-cyan/theme.css +++ b/public/themes/saga-cyan/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #00ACC1; --primary-color-text: #ffffff; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #B2EBF2; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #B2EBF2; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #00ACC1; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #00ACC1; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #00ACC1; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #00ACC1; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #00838F; - background: #ffffff; - border: 1px solid #00ACC1; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #00838F; - border-color: #0097A7; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #B2EBF2; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #00838F; - border-color: #00838F; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2EBF2; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #00ACC1; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #00ACC1; @@ -1539,7 +1545,7 @@ background: #00ACC1; border: 1px solid #00ACC1; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #B2EBF2; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #00ACC1; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #00ACC1; + border-color: #00ACC1; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #00ACC1; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2EBF2; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #00ACC1; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #00ACC1; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #00838F; + background: #0097A7; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #00838F; } .p-badge.p-badge-success { diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css index 097e2e5d8..a3fb5388b 100644 --- a/public/themes/saga-deeppurple/theme.css +++ b/public/themes/saga-deeppurple/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #673AB7; --primary-color-text: #ffffff; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #D1C4E9; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #D1C4E9; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #673AB7; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #673AB7; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #673AB7; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #673AB7; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #512DA8; - background: #ffffff; - border: 1px solid #673AB7; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #512DA8; - border-color: #5E35B1; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #D1C4E9; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #512DA8; - border-color: #512DA8; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #D1C4E9; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #673AB7; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #673AB7; @@ -1539,7 +1545,7 @@ background: #673AB7; border: 1px solid #673AB7; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #D1C4E9; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #673AB7; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #673AB7; + border-color: #673AB7; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #673AB7; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #D1C4E9; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #673AB7; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #673AB7; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #512DA8; + background: #5E35B1; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #512DA8; } .p-badge.p-badge-success { diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 6926598d3..2eae6f261 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #4CAF50; --primary-color-text: #ffffff; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #C8E6C9; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #C8E6C9; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #4CAF50; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #4CAF50; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #4CAF50; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #4CAF50; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #388E3C; - background: #ffffff; - border: 1px solid #4CAF50; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #388E3C; - border-color: #43A047; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #C8E6C9; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #388E3C; - border-color: #388E3C; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C8E6C9; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #4CAF50; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #4CAF50; @@ -1539,7 +1545,7 @@ background: #4CAF50; border: 1px solid #4CAF50; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #C8E6C9; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #4CAF50; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #4CAF50; + border-color: #4CAF50; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #4CAF50; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C8E6C9; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #4CAF50; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #4CAF50; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #388E3C; + background: #43A047; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #388E3C; } .p-badge.p-badge-success { diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css index 3f4b026c4..199163e84 100644 --- a/public/themes/saga-indigo/theme.css +++ b/public/themes/saga-indigo/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #3F51B5; --primary-color-text: #ffffff; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #C5CAE9; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #C5CAE9; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #3F51B5; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #3F51B5; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #3F51B5; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #3F51B5; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #303F9F; - background: #ffffff; - border: 1px solid #3F51B5; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #303F9F; - border-color: #3949AB; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #C5CAE9; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #303F9F; - border-color: #303F9F; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C5CAE9; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #3F51B5; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #3F51B5; @@ -1539,7 +1545,7 @@ background: #3F51B5; border: 1px solid #3F51B5; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #C5CAE9; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #3F51B5; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #3F51B5; + border-color: #3F51B5; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #3F51B5; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C5CAE9; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #3F51B5; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #3F51B5; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #303F9F; + background: #3949AB; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #303F9F; } .p-badge.p-badge-success { diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 80ea04a98..12856f269 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #FFC107; --primary-color-text: #212529; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #FFECB3; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #FFECB3; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #FFC107; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #FFC107; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #FFC107; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #FFC107; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #FFA000; - background: #ffffff; - border: 1px solid #FFC107; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #FFA000; - border-color: #FFB300; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #FFECB3; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #FFA000; - border-color: #FFA000; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #FFECB3; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #FFC107; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #FFC107; @@ -1539,7 +1545,7 @@ background: #FFC107; border: 1px solid #FFC107; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #FFECB3; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #FFC107; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #FFC107; + border-color: #FFC107; color: #212529; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #FFC107; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #FFECB3; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #FFC107; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #FFC107; + border: 0 none; color: #212529; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #FFA000; + background: #FFB300; + border-color: transparent; color: #212529; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #FFA000; } .p-badge.p-badge-success { diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index e7d8802d9..329f8fb2a 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #9C27B0; --primary-color-text: #ffffff; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #E1BEE7; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #E1BEE7; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #9C27B0; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #9C27B0; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #9C27B0; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #9C27B0; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #7B1FA2; - background: #ffffff; - border: 1px solid #9C27B0; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #7B1FA2; - border-color: #8E24AA; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #E1BEE7; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #7B1FA2; - border-color: #7B1FA2; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #E1BEE7; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #9C27B0; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #9C27B0; @@ -1539,7 +1545,7 @@ background: #9C27B0; border: 1px solid #9C27B0; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #E1BEE7; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #9C27B0; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #9C27B0; + border-color: #9C27B0; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #9C27B0; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #E1BEE7; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #9C27B0; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #9C27B0; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #7B1FA2; + background: #8E24AA; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #7B1FA2; } .p-badge.p-badge-success { diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css index c4e9a744f..16cf88a67 100644 --- a/public/themes/saga-teal/theme.css +++ b/public/themes/saga-teal/theme.css @@ -4,7 +4,7 @@ --layer-1: #f8f9fa; --layer-2: #e9ecef; --text-color: #495057; - --text-color-secondary: #6c757d; + --text-color-secondary: $shade600; --primary-color: #009688; --primary-color-text: #ffffff; } @@ -25,7 +25,7 @@ } .p-disabled, .p-component:disabled { - opacity: 0.5; + opacity: 0.6; } .p-error, .p-invalid { @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.2rem #B2DFDB; } -::-webkit-input-placeholder { - color: #6c757d; -} - -:-moz-placeholder { - color: #6c757d; -} - -::-moz-placeholder { - color: #6c757d; -} - -:-ms-input-placeholder { - color: #6c757d; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -111,7 +95,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.5rem 0; @@ -122,7 +106,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -152,7 +136,7 @@ } .p-datepicker:not(.p-datepicker-inline) { border: 0 none; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-datepicker .p-datepicker-header { padding: 0.5rem; @@ -168,21 +152,23 @@ .p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -244,13 +230,13 @@ .p-datepicker .p-timepicker button { width: 2.5rem; height: 2.5rem; - color: #9ba2aa; + color: #6c757d; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { - color: #9ba2aa; + color: #495057; background: #e9ecef; } .p-datepicker .p-timepicker button:last-child { @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -293,7 +279,7 @@ } .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover { - color: #9ba2aa; + color: #495057; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -328,7 +314,7 @@ height: 1.5rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -408,13 +394,13 @@ } .p-colorpicker-overlay-panel { - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -439,13 +425,13 @@ } .p-dropdown .p-dropdown-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .p-dropdown .p-dropdown-clear-icon { - color: #9ba2aa; + color: #6c757d; right: 2.357rem; } @@ -454,7 +440,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 1rem; @@ -470,7 +456,7 @@ } .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; @@ -481,7 +467,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -615,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #ced4da; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -636,7 +622,7 @@ box-shadow: 0 0 0 0.2rem #B2DFDB; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #c3cad2; + background: #adb5bd; } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #009688; @@ -659,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #ced4da; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -709,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #6c757d; +} + +:-moz-placeholder { + color: #6c757d; +} + +::-moz-placeholder { + color: #6c757d; +} + +:-ms-input-placeholder { + color: #6c757d; +} + .p-listbox { background: #ffffff; color: #495057; @@ -729,7 +731,7 @@ } .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-listbox .p-listbox-list { padding: 0.5rem 0; @@ -739,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -763,7 +765,7 @@ .p-multiselect { background: #ffffff; border: 1px solid #ced4da; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -783,7 +785,7 @@ } .p-multiselect .p-multiselect-trigger { background: #ffffff; - color: #9ba2aa; + color: #6c757d; width: 2.357rem; border-top-right-radius: 3px; border-bottom-right-radius: 3px; @@ -794,7 +796,7 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 1rem; @@ -810,7 +812,7 @@ } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; @@ -819,13 +821,15 @@ width: 2rem; height: 2rem; color: #6c757d; - background: #e9ecef; + border: 0 none; + background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #495057; + border-color: transparent; background: #dee2e6; } .p-multiselect-panel .p-multiselect-items { @@ -837,7 +841,7 @@ border: 0 none; color: #495057; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -866,7 +870,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; @@ -883,7 +887,7 @@ height: 1.5rem; color: #495057; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #009688; @@ -915,7 +919,7 @@ .p-rating .p-rating-icon { color: #495057; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -940,7 +944,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -1003,7 +1007,7 @@ background: #ffffff; border: 2px solid #009688; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1022,7 +1026,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1066,7 +1070,7 @@ border: 1px solid #009688; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1103,7 +1107,7 @@ line-height: 1rem; } .p-button.p-button-raised { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-rounded { border-radius: 1rem; @@ -1149,13 +1153,13 @@ .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #00796B; - background: #ffffff; - border: 1px solid #009688; + background: transparent; + border: 1px solid transparent; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; color: #00796B; - border-color: #00897B; + border-color: transparent; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #B2DFDB; @@ -1163,7 +1167,7 @@ .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #dee2e6; color: #00796B; - border-color: #00796B; + border-color: transparent; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1267,17 +1271,19 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; + border: 0 none; color: #6c757d; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -1290,7 +1296,7 @@ background-color: #e9ecef; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1337,7 +1343,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1381,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2DFDB; } .p-datatable .p-datatable-tbody > tr > td { @@ -1392,10 +1398,10 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { - color: #009688; + color: #495057; } .p-datatable .p-datatable-tbody > tr.p-highlight { background: #009688; @@ -1539,7 +1545,7 @@ background: #009688; border: 1px solid #009688; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1574,7 +1580,7 @@ background: #ffffff; border: 1px solid #ced4da; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #e9ecef; @@ -1634,7 +1640,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1699,7 +1705,7 @@ margin-left: -0.46em; color: #6c757d; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1707,7 +1713,7 @@ box-shadow: 0 0 0 0.2rem #B2DFDB; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { - color: #009688; + color: #495057; } .p-paginator { @@ -1721,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1734,7 +1741,8 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-paginator .p-dropdown { border: 0 none; @@ -1748,21 +1756,24 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #6c757d; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #009688; + border-color: #009688; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #e9ecef; - color: #6c757d; + border-color: transparent; + color: #495057; } .p-picklist .p-picklist-buttons { @@ -1795,7 +1806,7 @@ border: 0 none; color: #495057; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; @@ -1851,16 +1862,16 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #6c757d; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { - color: #009688; + color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; @@ -1898,7 +1909,7 @@ } .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.5rem; - color: #9ba2aa; + color: #6c757d; } .p-tree .p-treenode-children { padding: 0 0 0 1rem; @@ -1943,7 +1954,7 @@ font-weight: 600; color: #495057; background: #f8f9fa; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1987,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #495057; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2DFDB; } .p-treetable .p-treetable-tbody > tr > td { @@ -1999,10 +2010,10 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #6c757d; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { - color: #009688; + color: #495057; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; @@ -2075,7 +2086,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2137,7 +2148,7 @@ .p-card { background: #ffffff; color: #495057; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-card .p-card-body { @@ -2176,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2212,13 +2223,15 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2263,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2273,7 +2286,7 @@ } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -2304,7 +2317,7 @@ .p-dialog { border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border: 0 none; } .p-dialog .p-dialog-header { @@ -2322,14 +2335,16 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: #9ba2aa; + color: #6c757d; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { - color: #9ba2aa; + color: #495057; + border-color: transparent; background: #e9ecef; } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2368,13 +2383,14 @@ color: #495057; border: 0 none; border-radius: 3px; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-overlaypanel .p-overlaypanel-content { padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { background: #009688; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2382,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { - background: #00796B; + background: #00897B; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2410,19 +2427,21 @@ color: #495057; padding: 1rem; border: 0 none; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .p-sidebar .p-sidebar-close { background: transparent; - color: #9ba2aa; + border: 0 none; + color: #6c757d; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: #e9ecef; - color: #9ba2aa; + border-color: transparent; + color: #495057; } .p-sidebar-mask.p-component-overlay { @@ -2433,7 +2452,7 @@ background: #495057; color: #ffffff; padding: 0.5rem 0.5rem; - box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); border-radius: 3px; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -2499,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2523,14 +2542,14 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-contextmenu .p-menuitem-link { padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2564,7 +2583,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2580,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2594,7 +2613,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2629,7 +2648,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2663,7 +2682,7 @@ background: #ffffff; color: #495057; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu .p-megamenu-submenu-header { margin: 0; @@ -2708,7 +2727,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2740,7 +2759,7 @@ } .p-menu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menu .p-submenu-header { margin: 0; @@ -2767,7 +2786,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2801,7 +2820,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2836,7 +2855,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 12.5rem; } .p-menubar .p-submenu-list .p-menu-separator { @@ -2844,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -2864,15 +2883,20 @@ display: flex; color: #6c757d; background: transparent; - border: 1px solid #dee2e6; + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #495057; + background: #e9ecef; + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2884,7 +2908,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { @@ -2892,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2902,7 +2926,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2986,7 +3010,7 @@ background: #f8f9fa; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3035,7 +3059,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3094,13 +3118,13 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; - border: 1px solid #c8c8c8; + border: 1px solid #e9ecef; background: #ffffff; min-width: 2rem; height: 2rem; @@ -3154,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3167,7 +3191,7 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #ffffff; - border-color: #9ba2aa; + border-color: #6c757d; color: #6c757d; border-width: 0 0 2px 0; } @@ -3190,7 +3214,7 @@ padding: 0.75rem 1rem; color: #495057; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3222,13 +3246,13 @@ } .p-tieredmenu.p-menu-overlay { border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { background: #e9ecef; @@ -3244,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3362,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3386,7 +3410,7 @@ } .p-toast .p-toast-item-container { margin: 0 0 1rem 0; - box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-toast .p-toast-item-container .p-toast-item { padding: 1rem; @@ -3408,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3460,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3475,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3497,7 +3521,7 @@ background-color: #e9ecef; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3537,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3553,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -3607,7 +3631,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ffffff; + background-color: transparent; color: #00796B; } .p-badge.p-badge-success { diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index f0cc17b98..f2b6f3566 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #BBDEFB; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #BBDEFB; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #64B5F6; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #64B5F6; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #64B5F6; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #BBDEFB; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #64B5F6; @@ -1534,7 +1545,7 @@ background: #64B5F6; border: 1px solid #64B5F6; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #64B5F6; + border-color: #64B5F6; color: #212529; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #64B5F6; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #BBDEFB; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #64B5F6; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #64B5F6; + border: 0 none; color: #212529; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #2196F3; + border-color: transparent; color: #212529; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display: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 f033877dc..563539ce1 100644 --- a/public/themes/vela-cyan/theme.css +++ b/public/themes/vela-cyan/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #B2EBF2; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #B2EBF2; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #4DD0E1; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #4DD0E1; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #4DD0E1; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2EBF2; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #4DD0E1; @@ -1534,7 +1545,7 @@ background: #4DD0E1; border: 1px solid #4DD0E1; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #4DD0E1; + border-color: #4DD0E1; color: #212529; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #4DD0E1; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2EBF2; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #4DD0E1; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #4DD0E1; + border: 0 none; color: #212529; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #00BCD4; + border-color: transparent; color: #212529; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display: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 c040498ce..c06697325 100644 --- a/public/themes/vela-deeppurple/theme.css +++ b/public/themes/vela-deeppurple/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #D1C4E9; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #D1C4E9; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #9575CD; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #9575CD; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #9575CD; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #D1C4E9; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #9575CD; @@ -1534,7 +1545,7 @@ background: #9575CD; border: 1px solid #9575CD; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #9575CD; + border-color: #9575CD; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #9575CD; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #D1C4E9; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #9575CD; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #9575CD; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #673AB7; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display: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 e0e83764c..7e58529c7 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #C8E6C9; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #C8E6C9; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #81C784; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #81C784; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #81C784; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C8E6C9; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #81C784; @@ -1534,7 +1545,7 @@ background: #81C784; border: 1px solid #81C784; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #81C784; + border-color: #81C784; color: #212529; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #81C784; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C8E6C9; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #81C784; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #81C784; + border: 0 none; color: #212529; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #4CAF50; + border-color: transparent; color: #212529; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display: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 0593a1b71..47b13e528 100644 --- a/public/themes/vela-indigo/theme.css +++ b/public/themes/vela-indigo/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #C5CAE9; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #C5CAE9; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #7986CB; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #7986CB; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #7986CB; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C5CAE9; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #7986CB; @@ -1534,7 +1545,7 @@ background: #7986CB; border: 1px solid #7986CB; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #7986CB; + border-color: #7986CB; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #7986CB; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #C5CAE9; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #7986CB; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #7986CB; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #3F51B5; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display: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 ba4d9c3ea..132335ae0 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #FFECB3; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #FFECB3; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #FFD54F; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #FFD54F; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #FFD54F; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #FFECB3; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #FFD54F; @@ -1534,7 +1545,7 @@ background: #FFD54F; border: 1px solid #FFD54F; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #FFD54F; + border-color: #FFD54F; color: #212529; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #FFD54F; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #FFECB3; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #FFD54F; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #FFD54F; + border: 0 none; color: #212529; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #FFC107; + border-color: transparent; color: #212529; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display: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 6d2422ce6..402595fec 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #E1BEE7; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #E1BEE7; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #BA68C8; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #BA68C8; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #BA68C8; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #E1BEE7; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #BA68C8; @@ -1534,7 +1545,7 @@ background: #BA68C8; border: 1px solid #BA68C8; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #BA68C8; + border-color: #BA68C8; color: #ffffff; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #BA68C8; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #E1BEE7; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #BA68C8; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #BA68C8; + border: 0 none; color: #ffffff; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #9C27B0; + border-color: transparent; color: #ffffff; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display: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 ca9affda7..3af3d564d 100644 --- a/public/themes/vela-teal/theme.css +++ b/public/themes/vela-teal/theme.css @@ -51,22 +51,6 @@ box-shadow: 0 0 0 0.1rem #B2DFDB; } -::-webkit-input-placeholder { - color: #aeb6bf; -} - -:-moz-placeholder { - color: #aeb6bf; -} - -::-moz-placeholder { - color: #aeb6bf; -} - -:-ms-input-placeholder { - color: #aeb6bf; -} - .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -122,7 +106,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { @@ -169,20 +153,22 @@ width: 2.5rem; height: 2.5rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1; } .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; @@ -211,7 +197,7 @@ width: 2.5rem; height: 2.5rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -247,7 +233,7 @@ color: #aeb6bf; background: transparent; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datepicker .p-timepicker button:hover { color: #ebedef; @@ -270,7 +256,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { @@ -312,6 +298,11 @@ box-shadow: 0 0 0 0.1rem #B2DFDB; } +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} .p-checkbox { width: 1.5rem; height: 1.5rem; @@ -323,7 +314,7 @@ height: 1.5rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -409,7 +400,7 @@ .p-dropdown { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-dropdown:not(.p-disabled):hover { @@ -476,7 +467,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { @@ -610,7 +601,7 @@ } .p-inputswitch .p-inputswitch-slider { background: #34495E; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; } .p-inputswitch .p-inputswitch-slider:before { @@ -654,7 +645,7 @@ padding: 0.5rem 0.5rem; border: 1px solid #2C3E50; border-width: 1px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; } @@ -704,6 +695,22 @@ padding-right: 2rem; } +::-webkit-input-placeholder { + color: #aeb6bf; +} + +:-moz-placeholder { + color: #aeb6bf; +} + +::-moz-placeholder { + color: #aeb6bf; +} + +:-ms-input-placeholder { + color: #aeb6bf; +} + .p-listbox { background: #1C2833; color: #ebedef; @@ -734,7 +741,7 @@ padding: 0.5rem 1rem; border: 0 none; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { @@ -758,7 +765,7 @@ .p-multiselect { background: #34495E; border: 1px solid #2C3E50; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-multiselect:not(.p-disabled):hover { @@ -814,13 +821,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-left: 0.5rem; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.2); } .p-multiselect-panel .p-multiselect-items { @@ -832,7 +841,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { @@ -878,7 +887,7 @@ height: 1.5rem; color: #ebedef; border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { border-color: #4DB6AC; @@ -910,7 +919,7 @@ .p-rating .p-rating-icon { color: #ebedef; margin-left: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; font-size: 1.143rem; } .p-rating .p-rating-icon.p-rating-cancel { @@ -935,7 +944,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { @@ -998,7 +1007,7 @@ background: #34495E; border: 2px solid #4DB6AC; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-slider .p-slider-handle:focus { outline: 0 none; @@ -1017,7 +1026,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, .p-togglebutton.p-button .p-button-icon-right { @@ -1061,7 +1070,7 @@ border: 1px solid #4DB6AC; padding: 0.5rem 1rem; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-button:enabled:hover { @@ -1262,16 +1271,18 @@ .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: transparent; + border: 0 none; color: #aeb6bf; border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover, .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #aeb6bf; } .p-carousel .p-carousel-indicators { @@ -1285,7 +1296,7 @@ background-color: #34495E; width: 2rem; height: 0.5rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { @@ -1332,7 +1343,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tfoot > tr > td { text-align: left; @@ -1376,7 +1387,7 @@ .p-datatable .p-datatable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2DFDB; } .p-datatable .p-datatable-tbody > tr > td { @@ -1387,7 +1398,7 @@ } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler { color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover { color: #4DB6AC; @@ -1534,7 +1545,7 @@ background: #4DB6AC; border: 1px solid #4DB6AC; font-size: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; align-items: center; @@ -1569,7 +1580,7 @@ background: #34495E; border: 1px solid #34495E; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:not(.p-disabled):not(.fc-active):hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:not(.p-disabled):not(.fc-active):hover { background: #485b6e; @@ -1629,7 +1640,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1694,7 +1705,7 @@ margin-left: -0.46em; color: #aeb6bf; border-radius: 3px; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; @@ -1716,12 +1727,13 @@ .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, @@ -1729,6 +1741,7 @@ .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } .p-paginator .p-dropdown { @@ -1743,20 +1756,23 @@ border: 0 none; } .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; color: #aeb6bf; min-width: 2.357rem; height: 2.357rem; - border: 0 none; margin: 0.143rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #4DB6AC; + border-color: #4DB6AC; color: #212529; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -1790,7 +1806,7 @@ border: 0 none; color: #ebedef; background: transparent; - transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.1); @@ -1846,13 +1862,13 @@ } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; padding: 0.5rem; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; color: #aeb6bf; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover { color: #4DB6AC; @@ -1938,7 +1954,7 @@ font-weight: 600; color: #ebedef; background: #1C2833; - transition: background-color 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tfoot > tr > td { text-align: left; @@ -1982,7 +1998,7 @@ .p-treetable .p-treetable-tbody > tr { background: #1C2833; color: #ebedef; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; outline-color: #B2DFDB; } .p-treetable .p-treetable-tbody > tr > td { @@ -1994,7 +2010,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { color: #aeb6bf; margin-right: 0.5rem; - transition: color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover { color: #4DB6AC; @@ -2070,7 +2086,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -2171,13 +2187,13 @@ } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -2209,11 +2225,13 @@ height: 2rem; color: #aeb6bf; background: transparent; + border: 0 none; border-radius: 50%; - transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panel .p-panel-header .p-panel-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-panel .p-panel-header .p-panel-header-icon:focus { @@ -2258,7 +2276,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { @@ -2318,13 +2336,15 @@ width: 2rem; height: 2rem; color: #aeb6bf; + border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:hover { color: #ebedef; + border-color: transparent; background: rgba(255, 255, 255, 0.1); } .p-dialog .p-dialog-header .p-dialog-header-icon:focus { @@ -2370,6 +2390,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #4DB6AC; + border: 0 none; color: #212529; width: 2rem; height: 2rem; @@ -2377,10 +2398,11 @@ top: -1rem; right: -1rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-overlaypanel .p-overlaypanel-close:hover { background: #009688; + border-color: transparent; color: #212529; } .p-overlaypanel:after { @@ -2409,14 +2431,16 @@ } .p-sidebar .p-sidebar-close { background: transparent; + border: 0 none; color: #aeb6bf; width: 2rem; height: 2rem; border-radius: 50%; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-close:hover { background: rgba(255, 255, 255, 0.1); + border-color: transparent; color: #ebedef; } @@ -2494,7 +2518,7 @@ padding: 1rem; } .p-breadcrumb ul li .p-menuitem-link { - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; } .p-breadcrumb ul li .p-menuitem-link:focus { @@ -2525,7 +2549,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-contextmenu .p-menuitem-link .p-menuitem-text { @@ -2575,7 +2599,7 @@ margin: 0.25rem 0; } .p-contextmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-megamenu { @@ -2589,7 +2613,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2624,7 +2648,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-megamenu .p-menuitem-link .p-menuitem-text { @@ -2703,7 +2727,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menu .p-menuitem-link .p-menuitem-text { @@ -2762,7 +2786,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menuitem-link .p-menuitem-text { @@ -2796,7 +2820,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2839,7 +2863,7 @@ margin: 0.25rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { background: rgba(255, 255, 255, 0.1); @@ -2859,15 +2883,20 @@ display: flex; color: #aeb6bf; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 0 none; width: 2.5rem; height: 2.5rem; border-radius: 3px; - transition: box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-menubar .p-menubar-button i { font-size: 1.5rem; } + .p-menubar .p-menubar-button:hover { + color: #aeb6bf; + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; @@ -2887,7 +2916,7 @@ margin: 0.25rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-menubar .p-menubar-root-list > .p-menuitem { width: 100%; @@ -2897,7 +2926,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { @@ -2981,7 +3010,7 @@ background: #1C2833; font-weight: 600; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { margin-right: 0.5rem; @@ -3030,7 +3059,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { @@ -3089,7 +3118,7 @@ .p-steps .p-steps-item .p-menuitem-link { background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: transparent; } @@ -3149,7 +3178,7 @@ font-weight: 600; border-top-right-radius: 3px; border-top-left-radius: 3px; - transition: border-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -2px 0; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { @@ -3185,7 +3214,7 @@ padding: 0.75rem 1rem; color: #ebedef; border-radius: 0; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; user-select: none; } .p-tieredmenu .p-menuitem-link .p-menuitem-text { @@ -3239,7 +3268,7 @@ margin: 0.25rem 0; } .p-tieredmenu .p-submenu-icon { - font-size: 0.75rem; + font-size: 0.875rem; } .p-inline-message { @@ -3357,7 +3386,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -3403,7 +3432,7 @@ border-radius: 50%; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-toast .p-toast-item-container .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.2); @@ -3455,7 +3484,7 @@ color: #ebedef; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-close .p-galleria-close-icon { @@ -3470,7 +3499,7 @@ color: #aeb6bf; width: 4rem; height: 4rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { @@ -3492,7 +3521,7 @@ background-color: #34495E; width: 1rem; height: 1rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { @@ -3532,7 +3561,7 @@ color: #aeb6bf; width: 2rem; height: 2rem; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, @@ -3548,7 +3577,7 @@ .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; - transition: background-color 0.2s, box-shadow 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.1); diff --git a/src/AppMenu.vue b/src/AppMenu.vue index 9b9d3141c..c2e9786b1 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -18,9 +18,10 @@ Utilities
- Elevation - Grid System Icons + Grid System + Elevation + Spacing
diff --git a/src/components/button/Button.css b/src/components/button/Button.css index b38fc58ba..2fb0fcb50 100755 --- a/src/components/button/Button.css +++ b/src/components/button/Button.css @@ -4,7 +4,7 @@ cursor: pointer; user-select: none; align-items: center; - vertical-align: bottom; + vertical-align: top; text-align: center; } diff --git a/src/components/checkbox/Checkbox.css b/src/components/checkbox/Checkbox.css index aa7995d3d..900995758 100755 --- a/src/components/checkbox/Checkbox.css +++ b/src/components/checkbox/Checkbox.css @@ -2,7 +2,7 @@ display: inline-flex; cursor: pointer; user-select: none; - vertical-align: bottom; + vertical-align: top; } .p-checkbox-box { diff --git a/src/components/radiobutton/RadioButton.css b/src/components/radiobutton/RadioButton.css index 99b88684a..c975d177d 100755 --- a/src/components/radiobutton/RadioButton.css +++ b/src/components/radiobutton/RadioButton.css @@ -2,7 +2,7 @@ display: inline-flex; cursor: pointer; user-select: none; - vertical-align: bottom; + vertical-align: top; } .p-radiobutton-box { diff --git a/src/router.js b/src/router.js index 5bb9cbc65..331e400b1 100755 --- a/src/router.js +++ b/src/router.js @@ -465,6 +465,11 @@ export default new Router({ path: '/slider', name: 'slider', component: () => import('./views/slider/SliderDemo.vue') + }, + { + path: '/spacing', + name: 'spacing', + component: () => import('./views/spacing/SpacingDemo.vue') }, { path: '/splitbutton', diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue index 540ff7f0d..f10b5e0f6 100644 --- a/src/views/elevation/ElevationDoc.vue +++ b/src/views/elevation/ElevationDoc.vue @@ -20,7 +20,7 @@ - + View on GitHub diff --git a/src/views/spacing/SpacingDemo.vue b/src/views/spacing/SpacingDemo.vue new file mode 100644 index 000000000..62917880e --- /dev/null +++ b/src/views/spacing/SpacingDemo.vue @@ -0,0 +1,73 @@ + + + \ No newline at end of file diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue new file mode 100644 index 000000000..fdb3c98ef --- /dev/null +++ b/src/views/spacing/SpacingDoc.vue @@ -0,0 +1,64 @@ + \ No newline at end of file