diff --git a/assets/css/app.css b/assets/css/app.css index 19658451f..40ba60f0d 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -311,6 +311,23 @@ a:hover { --bs-btn-line-height: 2; } +.btn-pill { + --bs-btn-bg: var(--bs-body-bg); + --bs-btn-color: var(--evcc-default-text); + --bs-btn-border-color: var(--evcc-gray-50); + --bs-btn-hover-bg: var(--bs-body-bg); + --bs-btn-hover-color: var(--evcc-default-text); + --bs-btn-hover-border-color: var(--evcc-default-text); + --bs-btn-active-bg: var(--bs-body-bg); + --bs-btn-active-color: var(--evcc-default-text); + --bs-btn-active-border-color: var(--evcc-default-text); + white-space: nowrap; + text-transform: uppercase; + font-weight: bold; + font-size: 0.75rem; + border-radius: 50rem; +} + .btn-outline-secondary { --bs-btn-color: var(--evcc-default-text); --bs-btn-border-color: var(--evcc-default-text); diff --git a/assets/js/components/Config/DeviceCard.vue b/assets/js/components/Config/DeviceCard.vue index 72a6b3a4c..996ffd4a6 100644 --- a/assets/js/components/Config/DeviceCard.vue +++ b/assets/js/components/Config/DeviceCard.vue @@ -26,7 +26,21 @@ @edit="$emit('edit')" /> -
+ +

.root { - display: block; + display: flex; + flex-direction: column; list-style-type: none; border-radius: 1rem; padding: 1rem 1.5rem; @@ -129,6 +145,23 @@ export default { color: var(--evcc-gray) !important; font-weight: normal !important; } +.disabled-region { + flex: 1; + margin: 0 -1.5rem -1rem; + padding: 1.25rem 1.5rem; + min-height: 5rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0 0 1rem 1rem; + background-image: repeating-linear-gradient( + -45deg, + transparent 0, + transparent 10px, + var(--evcc-gray-25) 10px, + var(--evcc-gray-25) 20px + ); +} .icon:empty { display: none; } diff --git a/assets/js/components/Config/DeviceModal/Actions.vue b/assets/js/components/Config/DeviceModal/Actions.vue index a5fe69235..b2b56aeae 100644 --- a/assets/js/components/Config/DeviceModal/Actions.vue +++ b/assets/js/components/Config/DeviceModal/Actions.vue @@ -12,25 +12,36 @@ -
- - +
+
+ + + +