From de731d66f52d413c2be9121131509bc6f61874ea Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Sat, 20 Jun 2020 16:19:37 +0300 Subject: [PATCH] Add text buttons --- public/themes/arya-blue/theme.css | 41 +++++--- public/themes/arya-green/theme.css | 41 +++++--- public/themes/arya-orange/theme.css | 41 +++++--- public/themes/arya-purple/theme.css | 41 +++++--- public/themes/bootstrap4-dark/theme.css | 65 ++++++++----- public/themes/bootstrap4-light/theme.css | 45 ++++++--- public/themes/luna-amber/theme.css | 115 +++++++++++++---------- public/themes/luna-blue/theme.css | 115 +++++++++++++---------- public/themes/luna-green/theme.css | 115 +++++++++++++---------- public/themes/luna-pink/theme.css | 115 +++++++++++++---------- public/themes/material-dark/theme.css | 4 +- public/themes/material-light/theme.css | 4 +- public/themes/nova-accent/theme.css | 45 ++++++--- public/themes/nova-alt/theme.css | 45 ++++++--- public/themes/nova-vue/theme.css | 45 ++++++--- public/themes/nova/theme.css | 45 ++++++--- public/themes/rhea/theme.css | 83 +++++++++------- public/themes/saga-blue/theme.css | 41 +++++--- public/themes/saga-green/theme.css | 41 +++++--- public/themes/saga-orange/theme.css | 41 +++++--- public/themes/vela-blue/theme.css | 41 +++++--- public/themes/vela-green/theme.css | 41 +++++--- public/themes/vela-orange/theme.css | 41 +++++--- public/themes/vela-purple/theme.css | 41 +++++--- src/views/button/ButtonDemo.vue | 9 ++ src/views/button/ButtonDoc.vue | 60 ++++++++---- 26 files changed, 904 insertions(+), 457 deletions(-) diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index b516c7edf..dada7620f 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #64B5F6; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #64B5F6; - border-color: #64B5F6; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #121212; color: #64B5F6; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #BBDEFB; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #121212; color: #64B5F6; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #64B5F6; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 4898d8675..cfa19752c 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #81C784; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #81C784; - border-color: #81C784; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #121212; color: #81C784; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #C8E6C9; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #121212; color: #81C784; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #81C784; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 5f23d3273..3ff888248 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #FFD54F; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #FFD54F; - border-color: #FFD54F; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #121212; color: #FFD54F; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #FFECB3; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #121212; color: #FFD54F; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #FFD54F; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index 7ea8ed07a..4d1010344 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #BA68C8; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #BA68C8; - border-color: #BA68C8; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #121212; color: #BA68C8; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #E1BEE7; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #121212; color: #BA68C8; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #BA68C8; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/public/themes/bootstrap4-dark/theme.css b/public/themes/bootstrap4-dark/theme.css index 16fc45d0b..dd90881a3 100644 --- a/public/themes/bootstrap4-dark/theme.css +++ b/public/themes/bootstrap4-dark/theme.css @@ -57,7 +57,7 @@ right: 0.75rem; } .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { - right: 3.375rem; + right: 3.107rem; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; @@ -609,7 +609,7 @@ width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { - width: 2.625rem; + width: 2.357rem; } .p-inputswitch { @@ -1162,7 +1162,7 @@ border-radius: 1rem; } .p-button.p-button-icon-only { - width: 2.625rem; + width: 2.357rem; padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, @@ -1191,7 +1191,7 @@ width: 100%; } .p-fluid .p-button-icon-only { - width: 2.625rem; + width: 2.357rem; } .p-fluid .p-buttonset { display: flex; @@ -1200,6 +1200,25 @@ flex: 1; } +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { + color: #8dd0ff; + background: transparent; + border: 1px solid transparent; +} +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { + background: #20262e; + color: #8dd0ff; + border-color: transparent; +} +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5); +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { + background: #20262e; + color: #8dd0ff; + border-color: transparent; +} + .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; @@ -1207,8 +1226,8 @@ } .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #ffffff; - border-color: #ffffff; + color: #6c757d; + border-color: #6c757d; } .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: #5a6268; @@ -1231,8 +1250,8 @@ } .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; - color: #7fd8e6; - border-color: #7fd8e6; + color: #4cc8db; + border-color: #4cc8db; } .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { background: #4cc8db; @@ -1255,8 +1274,8 @@ } .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; - color: #9fdaa8; - border-color: #9fdaa8; + color: #78cc86; + border-color: #78cc86; } .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { background: #78cc86; @@ -1279,8 +1298,8 @@ } .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; - color: #ffe082; - border-color: #ffe082; + color: #ffd54f; + border-color: #ffd54f; } .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { background: #ffd54f; @@ -1303,8 +1322,8 @@ } .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; - color: #b7a2e0; - border-color: #b7a2e0; + color: #9a7cd4; + border-color: #9a7cd4; } .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { background: #9a7cd4; @@ -1327,8 +1346,8 @@ } .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; - color: #f19ea6; - border-color: #f19ea6; + color: #e97984; + border-color: #e97984; } .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { background: #e97984; @@ -1850,8 +1869,8 @@ background-color: transparent; border: 1px solid #3f4b5b; color: #8dd0ff; - min-width: 2.625rem; - height: 2.625rem; + min-width: 2.357rem; + height: 2.357rem; margin: 0 0 0 -1px; transition: box-shadow 0.15s; border-radius: 0; @@ -1874,7 +1893,7 @@ } .p-paginator .p-dropdown { margin-left: 0.5rem; - height: 2.625rem; + height: 2.357rem; } .p-paginator .p-dropdown .p-dropdown-label { padding-right: 0; @@ -1883,8 +1902,8 @@ background-color: transparent; border: 1px solid #3f4b5b; color: #8dd0ff; - min-width: 2.625rem; - height: 2.625rem; + min-width: 2.357rem; + height: 2.357rem; margin: 0 0 0 -1px; padding: 0 0.5rem; } @@ -1892,8 +1911,8 @@ background-color: transparent; border: 1px solid #3f4b5b; color: #8dd0ff; - min-width: 2.625rem; - height: 2.625rem; + min-width: 2.357rem; + height: 2.357rem; margin: 0 0 0 -1px; transition: box-shadow 0.15s; border-radius: 0; diff --git a/public/themes/bootstrap4-light/theme.css b/public/themes/bootstrap4-light/theme.css index d7b1c1755..1254cc537 100644 --- a/public/themes/bootstrap4-light/theme.css +++ b/public/themes/bootstrap4-light/theme.css @@ -57,7 +57,7 @@ right: 0.75rem; } .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { - right: 3.375rem; + right: 3.107rem; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; @@ -609,7 +609,7 @@ width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { - width: 2.625rem; + width: 2.357rem; } .p-inputswitch { @@ -1162,7 +1162,7 @@ border-radius: 1rem; } .p-button.p-button-icon-only { - width: 2.625rem; + width: 2.357rem; padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, @@ -1191,7 +1191,7 @@ width: 100%; } .p-fluid .p-button-icon-only { - width: 2.625rem; + width: 2.357rem; } .p-fluid .p-buttonset { display: flex; @@ -1200,6 +1200,25 @@ flex: 1; } +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { + color: #0062cc; + background: transparent; + border: 1px solid transparent; +} +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { + background: #e9ecef; + color: #0062cc; + border-color: transparent; +} +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { + background: rgba(0, 0, 0, 0.125); + color: #0062cc; + border-color: transparent; +} + .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; @@ -1207,8 +1226,8 @@ } .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #ffffff; - border-color: #ffffff; + color: #6c757d; + border-color: #6c757d; } .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: #5a6268; @@ -1850,8 +1869,8 @@ background-color: #ffffff; border: 1px solid #dee2e6; color: #007bff; - min-width: 2.625rem; - height: 2.625rem; + min-width: 2.357rem; + height: 2.357rem; margin: 0 0 0 -1px; transition: box-shadow 0.15s; border-radius: 0; @@ -1874,7 +1893,7 @@ } .p-paginator .p-dropdown { margin-left: 0.5rem; - height: 2.625rem; + height: 2.357rem; } .p-paginator .p-dropdown .p-dropdown-label { padding-right: 0; @@ -1883,8 +1902,8 @@ background-color: #ffffff; border: 1px solid #dee2e6; color: #007bff; - min-width: 2.625rem; - height: 2.625rem; + min-width: 2.357rem; + height: 2.357rem; margin: 0 0 0 -1px; padding: 0 0.5rem; } @@ -1892,8 +1911,8 @@ background-color: #ffffff; border: 1px solid #dee2e6; color: #007bff; - min-width: 2.625rem; - height: 2.625rem; + min-width: 2.357rem; + height: 2.357rem; margin: 0 0 0 -1px; transition: box-shadow 0.15s; border-radius: 0; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 2ec86a9c0..c99e6ea2a 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -50,7 +50,7 @@ .p-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-autocomplete .p-autocomplete-loader { @@ -68,7 +68,7 @@ .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token { @@ -175,7 +175,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -208,7 +208,7 @@ .p-datepicker table td > span:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker table td.p-datepicker-today > span { background: #FFCA28; @@ -289,7 +289,7 @@ .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -297,7 +297,7 @@ .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { @@ -328,7 +328,7 @@ .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-checkbox .p-checkbox-box.p-highlight { @@ -364,7 +364,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-chips .p-chips-multiple-container .p-chips-token { @@ -422,7 +422,7 @@ .p-dropdown:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-dropdown .p-dropdown-label { @@ -636,7 +636,7 @@ .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #4b4b4b; @@ -672,7 +672,7 @@ .p-inputtext:enabled:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-inputtext.p-error, .p-inputtext.p-invalid { @@ -798,7 +798,7 @@ .p-multiselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-multiselect .p-multiselect-label { @@ -926,7 +926,7 @@ .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { @@ -970,7 +970,7 @@ .p-rating .p-rating-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-rating .p-rating-icon:first-child { margin-left: 0; @@ -1054,7 +1054,7 @@ .p-slider .p-slider-handle:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #FFE082; @@ -1133,7 +1133,7 @@ .p-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-button .p-button-icon-left { margin-right: 0.5rem; @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #FFE082; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #FFE082; - border-color: #FFE082; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #4c4c4c; color: #FFE082; - border-color: #4c4c4c; + border-color: transparent; +} +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.1rem white; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { + background: #4c4c4c; + color: #FFE082; + border-color: transparent; +} + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #121212; + background: #B0BEC5; + border: 1px solid #B0BEC5; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #B0BEC5; + border-color: #B0BEC5; +} +.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: #90A4AE; + color: #121212; + border-color: #90A4AE; } .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 white; + box-shadow: 0 0 0 0.1rem #CFD8DC; } .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: #a0a0a0; - color: #FFE082; - border-color: #585858; + background: #78909C; + color: #121212; + border-color: #78909C; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1688,7 +1707,7 @@ .fc .fc-toolbar .fc-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button { background: #252525; @@ -1714,7 +1733,7 @@ .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; z-index: 1; } .fc .fc-toolbar .fc-button-group .fc-button { @@ -1829,7 +1848,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { color: #dedede; @@ -2019,7 +2038,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #FFE082; @@ -2244,7 +2263,7 @@ .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { background: #191919; @@ -2334,7 +2353,7 @@ .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { background: #191919; @@ -2370,7 +2389,7 @@ .p-panel .p-panel-header .p-panel-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panel.p-panel-toggleable .p-panel-header { padding: 0.857rem 1rem; @@ -2421,7 +2440,7 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #191919; @@ -2487,7 +2506,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; @@ -2620,7 +2639,7 @@ .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fileupload .p-fileupload-content { background: #323232; @@ -2661,7 +2680,7 @@ .p-breadcrumb ul li .p-menuitem-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -3075,7 +3094,7 @@ .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-menubar .p-menubar-root-list { position: absolute; @@ -3196,7 +3215,7 @@ .p-panelmenu .p-panelmenu-header > a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { background: #191919; @@ -3298,7 +3317,7 @@ .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-steps .p-steps-item.p-highlight .p-steps-number { background: #FFE082; @@ -3346,7 +3365,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #191919; @@ -3551,7 +3570,7 @@ .p-message .p-message-close:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-message .p-message-text { font-size: 1rem; @@ -3733,7 +3752,7 @@ .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-galleria-mask.p-component-overlay { @@ -3752,7 +3771,7 @@ .p-inplace .p-inplace-display:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-progressbar { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #FFE082; + background-color: #B0BEC5; + color: #121212; } .p-badge.p-badge-success { background-color: #AED581; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index f06ba65f1..bd0a3442e 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -50,7 +50,7 @@ .p-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-autocomplete .p-autocomplete-loader { @@ -68,7 +68,7 @@ .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token { @@ -175,7 +175,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -208,7 +208,7 @@ .p-datepicker table td > span:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker table td.p-datepicker-today > span { background: #29B6F6; @@ -289,7 +289,7 @@ .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -297,7 +297,7 @@ .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { @@ -328,7 +328,7 @@ .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-checkbox .p-checkbox-box.p-highlight { @@ -364,7 +364,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-chips .p-chips-multiple-container .p-chips-token { @@ -422,7 +422,7 @@ .p-dropdown:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-dropdown .p-dropdown-label { @@ -636,7 +636,7 @@ .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #4b4b4b; @@ -672,7 +672,7 @@ .p-inputtext:enabled:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-inputtext.p-error, .p-inputtext.p-invalid { @@ -798,7 +798,7 @@ .p-multiselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-multiselect .p-multiselect-label { @@ -926,7 +926,7 @@ .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { @@ -970,7 +970,7 @@ .p-rating .p-rating-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-rating .p-rating-icon:first-child { margin-left: 0; @@ -1054,7 +1054,7 @@ .p-slider .p-slider-handle:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #81D4FA; @@ -1133,7 +1133,7 @@ .p-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-button .p-button-icon-left { margin-right: 0.5rem; @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #81D4FA; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #81D4FA; - border-color: #81D4FA; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #4c4c4c; color: #81D4FA; - border-color: #4c4c4c; + border-color: transparent; +} +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.1rem white; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { + background: #4c4c4c; + color: #81D4FA; + border-color: transparent; +} + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #121212; + background: #B0BEC5; + border: 1px solid #B0BEC5; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #B0BEC5; + border-color: #B0BEC5; +} +.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: #90A4AE; + color: #121212; + border-color: #90A4AE; } .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 white; + box-shadow: 0 0 0 0.1rem #CFD8DC; } .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: #a0a0a0; - color: #81D4FA; - border-color: #585858; + background: #78909C; + color: #121212; + border-color: #78909C; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1688,7 +1707,7 @@ .fc .fc-toolbar .fc-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button { background: #252525; @@ -1714,7 +1733,7 @@ .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; z-index: 1; } .fc .fc-toolbar .fc-button-group .fc-button { @@ -1829,7 +1848,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { color: #dedede; @@ -2019,7 +2038,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #81D4FA; @@ -2244,7 +2263,7 @@ .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { background: #191919; @@ -2334,7 +2353,7 @@ .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { background: #191919; @@ -2370,7 +2389,7 @@ .p-panel .p-panel-header .p-panel-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panel.p-panel-toggleable .p-panel-header { padding: 0.857rem 1rem; @@ -2421,7 +2440,7 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #191919; @@ -2487,7 +2506,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; @@ -2620,7 +2639,7 @@ .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fileupload .p-fileupload-content { background: #323232; @@ -2661,7 +2680,7 @@ .p-breadcrumb ul li .p-menuitem-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -3075,7 +3094,7 @@ .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-menubar .p-menubar-root-list { position: absolute; @@ -3196,7 +3215,7 @@ .p-panelmenu .p-panelmenu-header > a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { background: #191919; @@ -3298,7 +3317,7 @@ .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-steps .p-steps-item.p-highlight .p-steps-number { background: #81D4FA; @@ -3346,7 +3365,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #191919; @@ -3551,7 +3570,7 @@ .p-message .p-message-close:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-message .p-message-text { font-size: 1rem; @@ -3733,7 +3752,7 @@ .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-galleria-mask.p-component-overlay { @@ -3752,7 +3771,7 @@ .p-inplace .p-inplace-display:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-progressbar { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #81D4FA; + background-color: #B0BEC5; + color: #121212; } .p-badge.p-badge-success { background-color: #AED581; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index a556a5d3a..65f7405df 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -50,7 +50,7 @@ .p-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-autocomplete .p-autocomplete-loader { @@ -68,7 +68,7 @@ .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token { @@ -175,7 +175,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -208,7 +208,7 @@ .p-datepicker table td > span:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker table td.p-datepicker-today > span { background: #9CCC65; @@ -289,7 +289,7 @@ .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -297,7 +297,7 @@ .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { @@ -328,7 +328,7 @@ .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-checkbox .p-checkbox-box.p-highlight { @@ -364,7 +364,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-chips .p-chips-multiple-container .p-chips-token { @@ -422,7 +422,7 @@ .p-dropdown:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-dropdown .p-dropdown-label { @@ -636,7 +636,7 @@ .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #4b4b4b; @@ -672,7 +672,7 @@ .p-inputtext:enabled:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-inputtext.p-error, .p-inputtext.p-invalid { @@ -798,7 +798,7 @@ .p-multiselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-multiselect .p-multiselect-label { @@ -926,7 +926,7 @@ .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { @@ -970,7 +970,7 @@ .p-rating .p-rating-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-rating .p-rating-icon:first-child { margin-left: 0; @@ -1054,7 +1054,7 @@ .p-slider .p-slider-handle:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #C5E1A5; @@ -1133,7 +1133,7 @@ .p-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-button .p-button-icon-left { margin-right: 0.5rem; @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #C5E1A5; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #C5E1A5; - border-color: #C5E1A5; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #4c4c4c; color: #C5E1A5; - border-color: #4c4c4c; + border-color: transparent; +} +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.1rem white; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { + background: #4c4c4c; + color: #C5E1A5; + border-color: transparent; +} + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #121212; + background: #B0BEC5; + border: 1px solid #B0BEC5; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #B0BEC5; + border-color: #B0BEC5; +} +.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: #90A4AE; + color: #121212; + border-color: #90A4AE; } .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 white; + box-shadow: 0 0 0 0.1rem #CFD8DC; } .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: #a0a0a0; - color: #C5E1A5; - border-color: #585858; + background: #78909C; + color: #121212; + border-color: #78909C; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1688,7 +1707,7 @@ .fc .fc-toolbar .fc-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button { background: #252525; @@ -1714,7 +1733,7 @@ .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; z-index: 1; } .fc .fc-toolbar .fc-button-group .fc-button { @@ -1829,7 +1848,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { color: #dedede; @@ -2019,7 +2038,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #C5E1A5; @@ -2244,7 +2263,7 @@ .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { background: #191919; @@ -2334,7 +2353,7 @@ .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { background: #191919; @@ -2370,7 +2389,7 @@ .p-panel .p-panel-header .p-panel-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panel.p-panel-toggleable .p-panel-header { padding: 0.857rem 1rem; @@ -2421,7 +2440,7 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #191919; @@ -2487,7 +2506,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; @@ -2620,7 +2639,7 @@ .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fileupload .p-fileupload-content { background: #323232; @@ -2661,7 +2680,7 @@ .p-breadcrumb ul li .p-menuitem-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -3075,7 +3094,7 @@ .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-menubar .p-menubar-root-list { position: absolute; @@ -3196,7 +3215,7 @@ .p-panelmenu .p-panelmenu-header > a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { background: #191919; @@ -3298,7 +3317,7 @@ .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-steps .p-steps-item.p-highlight .p-steps-number { background: #C5E1A5; @@ -3346,7 +3365,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #191919; @@ -3551,7 +3570,7 @@ .p-message .p-message-close:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-message .p-message-text { font-size: 1rem; @@ -3733,7 +3752,7 @@ .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-galleria-mask.p-component-overlay { @@ -3752,7 +3771,7 @@ .p-inplace .p-inplace-display:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-progressbar { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #C5E1A5; + background-color: #B0BEC5; + color: #121212; } .p-badge.p-badge-success { background-color: #AED581; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 070c44324..48ef0c81a 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -50,7 +50,7 @@ .p-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-autocomplete .p-autocomplete-loader { @@ -68,7 +68,7 @@ .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token { @@ -175,7 +175,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -208,7 +208,7 @@ .p-datepicker table td > span:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker table td.p-datepicker-today > span { background: #EC407A; @@ -289,7 +289,7 @@ .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -297,7 +297,7 @@ .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { @@ -328,7 +328,7 @@ .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-checkbox .p-checkbox-box.p-highlight { @@ -364,7 +364,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-chips .p-chips-multiple-container .p-chips-token { @@ -422,7 +422,7 @@ .p-dropdown:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-dropdown .p-dropdown-label { @@ -636,7 +636,7 @@ .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #4b4b4b; @@ -672,7 +672,7 @@ .p-inputtext:enabled:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-inputtext.p-error, .p-inputtext.p-invalid { @@ -798,7 +798,7 @@ .p-multiselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-multiselect .p-multiselect-label { @@ -926,7 +926,7 @@ .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { @@ -970,7 +970,7 @@ .p-rating .p-rating-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-rating .p-rating-icon:first-child { margin-left: 0; @@ -1054,7 +1054,7 @@ .p-slider .p-slider-handle:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #F48FB1; @@ -1133,7 +1133,7 @@ .p-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-button .p-button-icon-left { margin-right: 0.5rem; @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #F48FB1; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #F48FB1; - border-color: #F48FB1; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #4c4c4c; color: #F48FB1; - border-color: #4c4c4c; + border-color: transparent; +} +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.1rem white; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { + background: #4c4c4c; + color: #F48FB1; + border-color: transparent; +} + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #121212; + background: #B0BEC5; + border: 1px solid #B0BEC5; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #B0BEC5; + border-color: #B0BEC5; +} +.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: #90A4AE; + color: #121212; + border-color: #90A4AE; } .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 white; + box-shadow: 0 0 0 0.1rem #CFD8DC; } .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: #a0a0a0; - color: #F48FB1; - border-color: #585858; + background: #78909C; + color: #121212; + border-color: #78909C; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1688,7 +1707,7 @@ .fc .fc-toolbar .fc-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button { background: #252525; @@ -1714,7 +1733,7 @@ .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; z-index: 1; } .fc .fc-toolbar .fc-button-group .fc-button { @@ -1829,7 +1848,7 @@ .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover { color: #dedede; @@ -2019,7 +2038,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F48FB1; @@ -2244,7 +2263,7 @@ .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { background: #191919; @@ -2334,7 +2353,7 @@ .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { background: #191919; @@ -2370,7 +2389,7 @@ .p-panel .p-panel-header .p-panel-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panel.p-panel-toggleable .p-panel-header { padding: 0.857rem 1rem; @@ -2421,7 +2440,7 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: #191919; @@ -2487,7 +2506,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; @@ -2620,7 +2639,7 @@ .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-fileupload .p-fileupload-content { background: #323232; @@ -2661,7 +2680,7 @@ .p-breadcrumb ul li .p-menuitem-link:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -3075,7 +3094,7 @@ .p-menubar .p-menubar-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-menubar .p-menubar-root-list { position: absolute; @@ -3196,7 +3215,7 @@ .p-panelmenu .p-panelmenu-header > a:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { background: #191919; @@ -3298,7 +3317,7 @@ .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-steps .p-steps-item.p-highlight .p-steps-number { background: #F48FB1; @@ -3346,7 +3365,7 @@ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { background: #191919; @@ -3551,7 +3570,7 @@ .p-message .p-message-close:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-message .p-message-text { font-size: 1rem; @@ -3733,7 +3752,7 @@ .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-galleria-mask.p-component-overlay { @@ -3752,7 +3771,7 @@ .p-inplace .p-inplace-display:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem white; + box-shadow: 0 0 0 0.1rem white; } .p-progressbar { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #F48FB1; + background-color: #B0BEC5; + color: #121212; } .p-badge.p-badge-success { background-color: #AED581; diff --git a/public/themes/material-dark/theme.css b/public/themes/material-dark/theme.css index f8331edd9..672d97bde 100644 --- a/public/themes/material-dark/theme.css +++ b/public/themes/material-dark/theme.css @@ -1207,8 +1207,8 @@ } .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #1976D2; - border-color: #1976D2; + color: transparent; + border-color: 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; diff --git a/public/themes/material-light/theme.css b/public/themes/material-light/theme.css index a189adef2..d55aaf7ad 100644 --- a/public/themes/material-light/theme.css +++ b/public/themes/material-light/theme.css @@ -1231,8 +1231,8 @@ } .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #1976D2; - border-color: #1976D2; + color: transparent; + border-color: 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; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 0081b3841..a2d54d9ca 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #333333; + background: transparent; + border: 1px solid transparent; +} +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #f4f4f4; - border: 1px solid #f4f4f4; -} -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; color: #333333; - border-color: #333333; + border-color: 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.2rem #8dcdff; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #c8c8c8; color: #333333; border-color: #c8c8c8; } + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #607D8B; + border: 1px solid #607D8B; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #607D8B; + border-color: #607D8B; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} .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 #8dcdff; + box-shadow: 0 0 0 0.2rem #B0BEC5; } .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: #a0a0a0; - color: #333333; - border-color: #a0a0a0; + background: #455A64; + color: #ffffff; + border-color: #455A64; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #f4f4f4; - color: #333333; + background-color: #607D8B; + color: #ffffff; } .p-badge.p-badge-success { background-color: #34A835; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 14f63a248..14cfd0ec9 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #333333; + background: transparent; + border: 1px solid transparent; +} +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #f4f4f4; - border: 1px solid #f4f4f4; -} -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; color: #333333; - border-color: #333333; + border-color: 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.2rem #8dcdff; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #c8c8c8; color: #333333; border-color: #c8c8c8; } + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #607D8B; + border: 1px solid #607D8B; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #607D8B; + border-color: #607D8B; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} .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 #8dcdff; + box-shadow: 0 0 0 0.2rem #B0BEC5; } .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: #a0a0a0; - color: #333333; - border-color: #a0a0a0; + background: #455A64; + color: #ffffff; + border-color: #455A64; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #f4f4f4; - color: #333333; + background-color: #607D8B; + color: #ffffff; } .p-badge.p-badge-success { background-color: #34A835; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 757383fe1..2d73b915a 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #333333; + background: transparent; + border: 1px solid transparent; +} +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #f4f4f4; - border: 1px solid #f4f4f4; -} -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; color: #333333; - border-color: #333333; + border-color: 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.2rem #c2e9d8; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #c8c8c8; color: #333333; border-color: #c8c8c8; } + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #607D8B; + border: 1px solid #607D8B; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #607D8B; + border-color: #607D8B; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} .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 #c2e9d8; + box-shadow: 0 0 0 0.2rem #B0BEC5; } .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: #a0a0a0; - color: #333333; - border-color: #a0a0a0; + background: #455A64; + color: #ffffff; + border-color: #455A64; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #f4f4f4; - color: #333333; + background-color: #607D8B; + color: #ffffff; } .p-badge.p-badge-success { background-color: #34A835; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 426968ea6..e325e16c2 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -1200,28 +1200,47 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #333333; + background: transparent; + border: 1px solid transparent; +} +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #f4f4f4; - border: 1px solid #f4f4f4; -} -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; color: #333333; - border-color: #333333; + border-color: 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.2rem #8dcdff; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #c8c8c8; color: #333333; border-color: #c8c8c8; } + +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #607D8B; + border: 1px solid #607D8B; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #607D8B; + border-color: #607D8B; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} .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 #8dcdff; + box-shadow: 0 0 0 0.2rem #B0BEC5; } .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: #a0a0a0; - color: #333333; - border-color: #a0a0a0; + background: #455A64; + color: #ffffff; + border-color: #455A64; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #f4f4f4; - color: #333333; + background-color: #607D8B; + color: #ffffff; } .p-badge.p-badge-success { background-color: #34A835; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 435c2f42c..1a4375935 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1200,28 +1200,47 @@ flex: 1; } +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { + color: #666666; + background: transparent; + border: 1px solid transparent; +} +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { + background: #f4f4f4; + color: #666666; + border-color: transparent; +} +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { + box-shadow: 0 0 0 0.2rem #7B95A3; +} +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { + background: #ececec; + color: #666666; + border-color: transparent; +} + .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { - color: #333333; - background: #f3f3f3; - border: 1px solid #f3f3f3; + color: #ffffff; + background: #a3897b; + border: 1px solid #8e6f5f; } .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #333333; - border-color: #333333; + color: #8e6f5f; + border-color: #8e6f5f; } .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: #d1d1d1; - color: #212121; - border-color: #d1d1d1; + background: #8e6f5f; + color: #ffffff; + border-color: #7a5743; } .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 #99adb8; + box-shadow: 0 0 0 0.2rem #bfaaa0; } .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: #7B95A3; + background: #7a5743; color: #ffffff; - border-color: #7B95A3; + border-color: #6e4e3c; } .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { @@ -1231,8 +1250,8 @@ } .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; - color: #A3DEF8; - border-color: #A3DEF8; + color: #79C8EB; + border-color: #79C8EB; } .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { background: #81CBEC; @@ -1255,8 +1274,8 @@ } .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; - color: #A3E2C6; - border-color: #A3E2C6; + color: #80CAAA; + border-color: #80CAAA; } .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { background: #80CAAA; @@ -1274,26 +1293,26 @@ .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #333333; - background: #FEEDBC; - border: 1px solid #F7DB8A; + background: #ffe38e; + border: 1px solid #ffd95e; } .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; - color: #FEEDBC; - border-color: #FEEDBC; + color: #ffd95e; + border-color: #ffd95e; } .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #FFDE87; + background: #ffd95e; color: #333333; - border-color: #F3CE61; + border-color: #ffce3c; } .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 0.2rem #fef4d5; + box-shadow: 0 0 0 0.2rem #ffe9a8; } .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #FDC328; + background: #ffce3c; color: #333333; - border-color: #DEA818; + border-color: #ffc62a; } .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { @@ -1303,8 +1322,8 @@ } .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; - color: #e9bef1; - border-color: #e9bef1; + color: #de9eea; + border-color: #de9eea; } .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { background: #de9eea; @@ -1327,8 +1346,8 @@ } .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; - color: #F4B6B6; - border-color: #F4B6B6; + color: #E38787; + border-color: #E38787; } .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { background: #EF9999; @@ -3797,8 +3816,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #f3f3f3; - color: #333333; + background-color: #a3897b; + color: #ffffff; } .p-badge.p-badge-success { background-color: #A3E2C6; @@ -3809,7 +3828,7 @@ color: #3D4447; } .p-badge.p-badge-warning { - background-color: #FEEDBC; + background-color: #ffe38e; color: #333333; } .p-badge.p-badge-danger { @@ -3846,7 +3865,7 @@ color: #3D4447; } .p-tag.p-tag-warning { - background-color: #FEEDBC; + background-color: #ffe38e; color: #333333; } .p-tag.p-tag-danger { diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 6ab738fa8..3fd9dd871 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #1976D2; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #1976D2; - border-color: #1976D2; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #e9ecef; color: #1976D2; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #BBDEFB; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #dee2e6; color: #1976D2; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #607D8B; + border: 1px solid #607D8B; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #607D8B; + border-color: #607D8B; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} +.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 #B0BEC5; +} +.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: #455A64; + color: #ffffff; + border-color: #455A64; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288D1; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #1976D2; + background-color: #607D8B; + color: #ffffff; } .p-badge.p-badge-success { background-color: #689F38; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 20dcbdbd0..745bce38c 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #388E3C; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #388E3C; - border-color: #388E3C; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #e9ecef; color: #388E3C; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #C8E6C9; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #dee2e6; color: #388E3C; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #607D8B; + border: 1px solid #607D8B; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #607D8B; + border-color: #607D8B; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} +.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 #B0BEC5; +} +.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: #455A64; + color: #ffffff; + border-color: #455A64; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288D1; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #388E3C; + background-color: #607D8B; + color: #ffffff; } .p-badge.p-badge-success { background-color: #689F38; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index e305561e0..9bf95984b 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #FFA000; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #FFA000; - border-color: #FFA000; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #e9ecef; color: #FFA000; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #FFECB3; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #dee2e6; color: #FFA000; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #607D8B; + border: 1px solid #607D8B; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #607D8B; + border-color: #607D8B; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} +.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 #B0BEC5; +} +.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: #455A64; + color: #ffffff; + border-color: #455A64; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288D1; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #FFA000; + background-color: #607D8B; + color: #ffffff; } .p-badge.p-badge-success { background-color: #689F38; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index ce089c77a..86d90e282 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #64B5F6; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #64B5F6; - border-color: #64B5F6; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #17212f; color: #64B5F6; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #BBDEFB; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #17212f; color: #64B5F6; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #64B5F6; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 0be4323db..57a768436 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #81C784; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #81C784; - border-color: #81C784; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #17212f; color: #81C784; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #C8E6C9; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #17212f; color: #81C784; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #81C784; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 104286a2a..7ba3c82ec 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #FFD54F; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #FFD54F; - border-color: #FFD54F; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #17212f; color: #FFD54F; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #FFECB3; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #17212f; color: #FFD54F; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #FFD54F; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index b462f5c50..134360d78 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -1200,30 +1200,49 @@ flex: 1; } -.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { +.p-button.p-button-text, .p-buttonset.p-button-text > .p-button, .p-splitbutton.p-button-text > .p-button { color: #BA68C8; background: transparent; border: 1px solid transparent; } -.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { - background-color: transparent; - color: #BA68C8; - border-color: #BA68C8; -} -.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 { +.p-button.p-button-text:enabled:hover, .p-buttonset.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:enabled:hover { background: #17212f; color: #BA68C8; 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 { +.p-button.p-button-text:enabled:focus, .p-buttonset.p-button-text > .p-button:enabled:focus, .p-splitbutton.p-button-text > .p-button:enabled:focus { box-shadow: 0 0 0 1px #E1BEE7; } -.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 { +.p-button.p-button-text:enabled:active, .p-buttonset.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:enabled:active { background: #17212f; color: #BA68C8; border-color: transparent; } +.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #ffffff; + background: #78909C; + border: 1px solid #78909C; +} +.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + background-color: transparent; + color: #78909C; + border-color: #78909C; +} +.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: #607D8B; + color: #ffffff; + border-color: #607D8B; +} +.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 1px #CFD8DC; +} +.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: #546E7A; + color: #ffffff; + border-color: #546E7A; +} + .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; @@ -3831,8 +3850,8 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: transparent; - color: #BA68C8; + background-color: #78909C; + color: #ffffff; } .p-badge.p-badge-success { background-color: #C5E1A5; diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue index 20775c2c3..840dc1e62 100755 --- a/src/views/button/ButtonDemo.vue +++ b/src/views/button/ButtonDemo.vue @@ -18,6 +18,12 @@