From db6c728cd6023f73b8352021b4f2c0be1eeccb1b Mon Sep 17 00:00:00 2001 From: Jan-Philipp Benecke Date: Sat, 29 Mar 2025 09:54:09 +0100 Subject: [PATCH] Fix inner border radius for disabled bar in automation/script rows (#24840) --- .../action/ha-automation-action-row.ts | 14 ++++++++-- .../condition/ha-automation-condition-row.ts | 28 ++++++++++++++++--- .../trigger/ha-automation-trigger-row.ts | 28 ++++++++++++++++--- .../config/script/ha-script-field-row.ts | 14 ++++++++-- .../conditions/ha-card-condition-editor.ts | 8 ++++-- 5 files changed, 78 insertions(+), 14 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 009d071463..79ae3bf4e2 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -652,8 +652,18 @@ export default class HaAutomationActionRow extends LitElement { .disabled-bar { background: var(--divider-color, #e0e0e0); text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 12px); - border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); + border-top-left-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); } .warning ul { margin: 4px 0; diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index ea8c6240d7..a905b88233 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -535,8 +535,18 @@ export default class HaAutomationConditionRow extends LitElement { .disabled-bar { background: var(--divider-color, #e0e0e0); text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 12px); - border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); + border-top-left-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); } .testing { position: absolute; @@ -552,8 +562,18 @@ export default class HaAutomationConditionRow extends LitElement { overflow: hidden; transition: max-height 0.3s; text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 12px); - border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); + border-top-left-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); } .testing.active { max-height: 100px; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index c2cdf73b4a..62bcdf8468 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -681,8 +681,18 @@ export default class HaAutomationTriggerRow extends LitElement { .disabled-bar { background: var(--divider-color, #e0e0e0); text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 12px); - border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); + border-top-left-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); } .triggered { cursor: pointer; @@ -699,8 +709,18 @@ export default class HaAutomationTriggerRow extends LitElement { overflow: hidden; transition: max-height 0.3s; text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 12px); - border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); + border-top-left-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); } .triggered.active { max-height: 100px; diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index ec6098602a..f9d0cc1a36 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -327,8 +327,18 @@ export default class HaScriptFieldRow extends LitElement { .disabled-bar { background: var(--divider-color, #e0e0e0); text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 12px); - border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); + border-top-left-radius: calc( + var(--ha-card-border-radius, 12px) - var( + --ha-card-border-width, + 1px + ) + ); } ha-list-item[disabled] { diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts index cfa2a63a08..3f88085c26 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts +++ b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts @@ -321,8 +321,12 @@ export class HaCardConditionEditor extends LitElement { overflow: hidden; transition: max-height 0.3s; text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 12px); - border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: calc( + var(--ha-card-border-radius, 12px) - var(--ha-card-border-width, 1px) + ); + border-top-left-radius: calc( + var(--ha-card-border-radius, 12px) - var(--ha-card-border-width, 1px) + ); } .testing.active { max-height: 100px;