- ||void 0===i?void 0:i.attributes.entity_picture})
-
`:""}
+ ${this.entityUsesEntityPictureAsBackground&&(null===(e=this.entity)||void 0===e?void 0:e.attributes.entity_picture)?B`
+
+
`:""}
-
e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e)
@touchmove=${this._handleIconTouchMove}
>
- ${this.entityUsesEntityPictureAsIcon?"":B`
-
-
- `}
+ ${this.entityUsesEntityPictureAsIcon?"":B` `}
-
- ${this.config.name||this.entity.attributes.friendly_name}
-
- ${this.showStateString?B`
- ${r||""}
- `:""}
+ ${this.config.name||this.entity.attributes.friendly_name}
+ ${this.showStateString?B` ${r||""} `:""}
-
- 
-
` : ''
- }
+ ${this.entityUsesEntityPictureAsBackground && this.entity?.attributes.entity_picture
+ ? html`
+
+
`
+ : ''}
-
`;
@@ -201,14 +193,14 @@ export default class Card extends LitElement {
tap_action: this.config.icon_tap_action,
};
- handleAction(this, this.hass, config, "tap");
+ handleAction(this, this.hass, config, 'tap');
}
private toggleClickClass(): void {
this.isClicked = true;
setTimeout(() => {
- this.isClicked = false
+ this.isClicked = false;
}, 500);
}
diff --git a/src/Card/styles.scss b/src/Card/styles.scss
index cf6f846..84a70aa 100644
--- a/src/Card/styles.scss
+++ b/src/Card/styles.scss
@@ -26,19 +26,25 @@ ha-card {
--atc-card-spacing: 1vw;
--atc-card-spacing-small: 12px;
--atc-card-border-radius: var(--atc-theme-card-border-radius, var(--atc-default-card-border-radius));
-
+
// Card background variables
--atc-card-background: var(--atc-theme-card-background, var(--atc-default-card-background));
--atc-card-background-active: var(--atc-theme-card-background-active, var(--atc-default-card-background));
+ --atc-card-background-unavailable: var(--atc-theme-card-background-unavailable, transparent);
--atc-card-background-mask: linear-gradient(0deg, transparent 0%, black 100%);
// Card Icon variables
--atc-icon-color: var(--atc-theme-icon-color, var(--atc-default-icon-color));
--atc-icon-color-active: var(--atc-theme-icon-color-active, var(--atc-default-icon-color-active));
+ --atc-icon-color-unavailable: var(--primary-text-color-unavailable);
--atc-icon-background: var(--atc-theme-icon-background, var(--atc-default-icon-background));
--atc-icon-background-active: var(--atc-theme-icon-background-active, var(--atc-default-icon-background-active));
+ --atc-icon-background-unavailable: var(
+ --atc-theme-icon-background-unavailable,
+ var(var(--atc-default-card-background))
+ );
// Font sizes
--atc-name-font-size: var(--atc-theme-name-font-size, 16px);
@@ -49,12 +55,12 @@ ha-card {
// Card text variables
--atc-text-color: var(--primary-text-color);
--atc-text-color-active: var(--primary-text-color-active);
-
+ --atc-text-color-unavailable: var(--primary-text-color-unavailable);
+
/***
* Variables END
***/
-
width: 100%;
height: 100%;
@@ -103,8 +109,8 @@ ha-card {
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
grid-template-areas:
- "icon-area additional-state-icon-area"
- "name-area name-area";
+ 'icon-area additional-state-icon-area'
+ 'name-area name-area';
width: 100%;
height: 100%;
@@ -146,7 +152,7 @@ ha-card {
align-items: center;
justify-content: center;
}
-
+
.name-area {
grid-area: name-area;
color: var(--atc-text-color);
@@ -171,11 +177,31 @@ ha-card {
}
}
+ /***
+ * Available State
+ ***/
+ &.isUnavailable {
+ background: var(--atc-card-background-unavailable);
+ .container {
+ .name-area {
+ color: var(--atc-text-color-unavailable);
+ }
+ .icon-area {
+ .icon-wrapper {
+ background: var(--atc-icon-background-unavailable);
+ .icon {
+ color: var(--atc-icon-color-unavailable);
+ }
+ }
+ }
+ }
+ }
+
/***
* Clicked State
***/
- &.clicked {
+ &.isClicked {
animation: var(--atc-theme-click-animation);
}
@@ -183,7 +209,7 @@ ha-card {
* Active State
***/
- &.active{
+ &.isActive {
background: var(--atc-card-background-active);
background-size: cover; // if it's an image
background-position: center; // if it's an image
@@ -199,14 +225,13 @@ ha-card {
}
}
- .name-area{
+ .name-area {
color: var(--atc-text-color-active);
}
}
}
}
-
/***
* Helper Classes
***/
@@ -217,7 +242,6 @@ ha-card {
overflow: hidden;
}
-
@keyframes card_bounce {
0% {
transform: scale(1);
@@ -234,4 +258,4 @@ ha-card {
100% {
transform: scale(1);
}
-}
\ No newline at end of file
+}
diff --git a/src/Editor/rawSchema.ts b/src/Editor/rawSchema.ts
index 4d93c3e..34c6723 100644
--- a/src/Editor/rawSchema.ts
+++ b/src/Editor/rawSchema.ts
@@ -1,6 +1,6 @@
-import { mdiGestureTap, mdiPalette, mdiStateMachine } from "@mdi/js";
-import { HomeAssistant } from "custom-card-helpers";
-import { AdvancedTileCardConfig } from "../types";
+import { mdiGestureTap, mdiPalette, mdiStateMachine } from '@mdi/js';
+import { HomeAssistant } from 'custom-card-helpers';
+import { AdvancedTileCardConfig } from '../types';
type SchemaObjectType = {
condition: () => boolean;
@@ -19,143 +19,145 @@ export type SchemaType = {
};
const rawSchema = (icon: string, domain: string, config: AdvancedTileCardConfig, hass: HomeAssistant): SchemaType => ({
- entity: () => ({
- condition: () => true,
- name: 'entity',
- label: hass.localize('ui.components.entity.entity-picker.entity'),
- selector: {
- entity: {},
+ entity: () => ({
+ condition: () => true,
+ name: 'entity',
+ label: hass.localize('ui.components.entity.entity-picker.entity'),
+ selector: {
+ entity: {},
+ },
+ }),
+ name: () => ({
+ condition: () => true,
+ name: 'name',
+ label: hass.localize('ui.dialogs.helper_settings.generic.name'),
+ type: 'string',
+ }),
+ icon: () => ({
+ condition: () => true,
+ name: 'icon',
+ label: hass.localize('ui.dialogs.helper_settings.generic.icon'),
+ selector: {
+ icon: {
+ placeholder: icon,
},
- }),
- name: () => ({
- condition: () => true,
- name: 'name',
- label: hass.localize('ui.dialogs.helper_settings.generic.name'),
- type: 'string',
- }),
- icon: () => ({
- condition: () => true,
- name: 'icon',
- label: hass.localize('ui.dialogs.helper_settings.generic.icon'),
- selector: {
- icon: {
- placeholder: icon
- },
+ },
+ }),
+ is_square: () => ({
+ condition: () => true,
+ name: 'is_square',
+ label: hass.localize('ui.panel.lovelace.editor.card.grid.square'),
+ selector: {
+ boolean: {},
+ },
+ }),
+ icon_tap_action: () => ({
+ condition: () => true,
+ name: 'icon_tap_action',
+ label: hass.localize('ui.panel.lovelace.editor.card.tile.icon_tap_action'),
+ selector: {
+ 'ui-action': {},
+ },
+ }),
+ tap_action: () => ({
+ condition: () => true,
+ name: 'tap_action',
+ label: hass.localize('ui.panel.lovelace.editor.card.generic.tap_action'),
+ selector: {
+ 'ui-action': {},
+ },
+ }),
+ show_state_string: () => ({
+ condition: () => true,
+ name: 'show_state_string',
+ label: hass.localize('ui.panel.lovelace.editor.card.generic.show_state'),
+ selector: {
+ boolean: {},
+ },
+ }),
+ conditional_state: () => ({
+ condition: () => !!config.show_state_string,
+ name: 'conditional_state',
+ label: `${hass.localize('ui.panel.lovelace.editor.card.conditional.name')}?`,
+ selector: {
+ boolean: {},
+ },
+ }),
+ if_state: () => ({
+ condition: () => !!config.conditional_state,
+ name: 'if_state',
+ label: hass.localize('ui.panel.lovelace.editor.card.conditional.state_equal'),
+ selector: {
+ text: {},
+ },
+ }),
+ use_attribute_as_state: () => ({
+ condition: () => !!config.show_state_string,
+ name: 'use_attribute_as_state',
+ label: 'Use attribute as state',
+ selector: {
+ boolean: {},
+ },
+ }),
+ attribute_to_show: () => ({
+ condition: () => !!config.use_attribute_as_state,
+ name: 'attribute_to_show',
+ label: hass.localize('ui.panel.lovelace.editor.card.generic.attribute'),
+ selector: {
+ attribute: {
+ entity_id: config.entity,
},
- }),
- is_square: () => ({
- condition: () => true,
- name: 'is_square',
- label: hass.localize('ui.panel.lovelace.editor.card.grid.square'),
- selector: {
- boolean: {}
- }
- }),
- icon_tap_action: () => ({
- condition: () => true,
- name: 'icon_tap_action',
- label: hass.localize('ui.panel.lovelace.editor.card.tile.icon_tap_action'),
- selector: {
- "ui-action": {}
- }
- }),
- tap_action: () => ({
- condition: () => true,
- name: 'tap_action',
- label: hass.localize('ui.panel.lovelace.editor.card.generic.tap_action'),
- selector: {
- "ui-action": {}
- }
- }),
- show_state_string: () => ({
- condition: () => true,
- name: 'show_state_string',
- label: hass.localize('ui.panel.lovelace.editor.card.generic.show_state'),
- selector: {
- boolean: {}
- }
- }),
- conditional_state: () => ({
- condition: () => !!config.show_state_string,
- name: 'conditional_state',
- label: `${hass.localize('ui.panel.lovelace.editor.card.conditional.name')}?`,
- selector: {
- boolean: {}
- },
- }),
- if_state: () => ({
- condition: () => !!config.conditional_state,
- name: 'if_state',
- label: hass.localize('ui.panel.lovelace.editor.card.conditional.state_equal'),
- selector: {
- text: {}
- }
- }),
- use_attribute_as_state: () => ({
- condition: () => !!config.show_state_string,
- name: 'use_attribute_as_state',
- label: 'Use attribute as state',
- selector: {
- boolean: {}
- },
- }),
- attribute_to_show: () => ({
- condition: () => !!config.use_attribute_as_state,
- name: 'attribute_to_show',
- label: hass.localize('ui.panel.lovelace.editor.card.generic.attribute'),
- selector: {
- attribute: {
- entity_id: config.entity
- }
- }
- }),
- use_entity_picture_as_icon: () => ({
- condition: () => domain === 'person',
- name: 'use_entity_picture_as_icon',
- label: `${hass.localize('ui.dialogs.helper_settings.generic.icon')}: ${hass.localize('ui.panel.lovelace.editor.card.tile.show_entity_picture')}`,
- selector: {
- boolean: {}
- }
- }),
- use_entity_picture_as_background: () => ({
- condition: () => domain === 'person' || domain === 'camera' || domain === 'media_player',
- name: 'use_entity_picture_as_background',
- label: `Background: ${hass.localize('ui.panel.lovelace.editor.card.tile.show_entity_picture')}`,
- selector: {
- boolean: {}
- }
- }),
+ },
+ }),
+ use_entity_picture_as_icon: () => ({
+ condition: () => domain === 'person',
+ name: 'use_entity_picture_as_icon',
+ label: `${hass.localize('ui.dialogs.helper_settings.generic.icon')}: ${hass.localize(
+ 'ui.panel.lovelace.editor.card.tile.show_entity_picture',
+ )}`,
+ selector: {
+ boolean: {},
+ },
+ }),
+ use_entity_picture_as_background: () => ({
+ condition: () => domain === 'person' || domain === 'camera' || domain === 'media_player',
+ name: 'use_entity_picture_as_background',
+ label: `Background: ${hass.localize('ui.panel.lovelace.editor.card.tile.show_entity_picture')}`,
+ selector: {
+ boolean: {},
+ },
+ }),
- grid: (childs) => ({
- condition: () => true,
- name: "",
- type: "grid",
- schema: childs,
- }),
- expandable_appearance: (childs) => ({
- condition: () => !!childs?.length,
- name: "",
- type: "expandable",
- iconPath: mdiPalette,
- title: hass.localize('ui.panel.lovelace.editor.card.tile.appearance'),
- schema: childs,
- }),
- expandable_actions: (childs) => ({
- condition: () => !!childs?.length,
- name: "",
- type: "expandable",
- title: hass.localize('ui.panel.lovelace.editor.card.tile.actions'),
- iconPath: mdiGestureTap,
- schema: childs,
- }),
- expandable_state: (childs) => ({
- condition: () => true,
- name: "",
- type: "expandable",
- title: hass.localize('ui.panel.lovelace.editor.card.generic.state'),
- iconPath: mdiStateMachine,
- schema: childs,
- }),
+ grid: (childs) => ({
+ condition: () => true,
+ name: '',
+ type: 'grid',
+ schema: childs,
+ }),
+ expandable_appearance: (childs) => ({
+ condition: () => !!childs?.length,
+ name: '',
+ type: 'expandable',
+ iconPath: mdiPalette,
+ title: hass.localize('ui.panel.lovelace.editor.card.tile.appearance'),
+ schema: childs,
+ }),
+ expandable_actions: (childs) => ({
+ condition: () => !!childs?.length,
+ name: '',
+ type: 'expandable',
+ title: hass.localize('ui.panel.lovelace.editor.card.tile.actions'),
+ iconPath: mdiGestureTap,
+ schema: childs,
+ }),
+ expandable_state: (childs) => ({
+ condition: () => true,
+ name: '',
+ type: 'expandable',
+ title: hass.localize('ui.panel.lovelace.editor.card.generic.state'),
+ iconPath: mdiStateMachine,
+ schema: childs,
+ }),
});
const schema = (icon: string, domain: string, config: AdvancedTileCardConfig, hass: HomeAssistant) => {
@@ -165,10 +167,10 @@ const schema = (icon: string, domain: string, config: AdvancedTileCardConfig, ha
validatedSchema[key] = (childs) => {
const currentSchemaObject = schemaObject[key](childs);
// Only add the schema object if the condition is true
- return currentSchemaObject.condition() ? currentSchemaObject : {}
- }
+ return currentSchemaObject.condition() ? currentSchemaObject : {};
+ };
});
return validatedSchema as SchemaType;
};
-export default schema;
\ No newline at end of file
+export default schema;
diff --git a/theme.yaml b/theme.yaml
index 09d7e19..4872238 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -13,29 +13,36 @@ Gugg iis:
# Card variables
atc-theme-card-background: rgba(115, 115, 115, 0.2)
atc-theme-card-background-active: rgba(255, 255, 255, 0.9)
+ atc-theme-card-background-unavailable: rgba(115, 115, 115, 0.1)
atc-theme-card-border-radius: 16px
atc-theme-click-animation: "card_bounce 900ms cubic-bezier(0.22, 1, 0.36, 1)"
+ atc-theme-name-font-size: 16px
+ atc-theme-name-font-weight: 500
+ atc-theme-state-font-size: 14px
+ atc-theme-state-font-weight: 400
# Icon variables
atc-theme-icon-color: var(--primary-text-color)
atc-theme-icon-color-active: var(--primary-color)
atc-theme-icon-background: "#626a6f"
atc-theme-icon-background-active: var(--light-primary-color)
- atc-theme-icon-border: "1px solid #9da0a2"
- atc-theme-icon-border-active: "2px solid var(--primary-color)"
+ atc-theme-icon-background-unavailable: var(--atc-theme-card-background-unavailable)
+ atc-theme-card-gap: 16px
+ # hassio vars
lovelace-background: url('/local/lovelace/background.png')
primary-text-color: "#e1e1e1"
primary-text-color-active: rgba(0, 0, 0, 0.6)
+ primary-text-color-unavailable: "#717171"
ha-card-border-width: 0
#default dark mode
primary-color: "#03a9f4"
card-background-color: var(--atc-theme-card-background)
- grid-card-gap: 16px
- masonry-view-card-margin: 4px 5% 8px
+ grid-card-gap: var(--atc-theme-card-gap)
+ masonry-view-card-margin: 4px 16px 8px
ha-card-header-color: rgba(255, 255, 255, 0.8)
# secondary-background-color: "#202020"
@@ -71,6 +78,11 @@ Gugg iis:
# background: url('/local/background.png');
# background-size: cover;
# }
+ card-mod-more-info-yaml: |
+ $: |
+ ha-dialog {
+ --card-background-color: red;
+ }
card-mod-view-yaml: |
.: |
hui-view {
@@ -83,33 +95,49 @@ Gugg iis:
#main {
order: 2
}
-
- hui-grid-card:
- $: |
- #root#root {
- grid-gap: calc(2 * var(--grid-card-gap, 8px))
- }
- /* default */
- h1 {
- font-size: 2.4vw !important;
- line-height: 0 !important;
- font-family: Roboto !important;
- font-weight: 500 !important;
- color: rgba(255, 255, 255, 0.8) !important;
- padding: 1vw 0 2vw 0 !important;
+ #sidebar#sidebar {
+ max-width: 300px;
+ width: 300px;
+ }
+ /* phone */
+ @media screen and (max-width: 800px) {
+ #sidebar#sidebar {
+ display: none;
}
- /* portrait */
- @media screen and (max-width: 1200px) {
- h1 {
- font-size: 3.3vw !important;
- line-height: 1.1vw !important;
- }
+ hui-grid-card {
+ --grid-card-column-count: 1 !important;
}
- /* phone */
- @media screen and (max-width: 800px) {
- h1 {
- font-size: 5.5vw !important;
- line-height: 6vw !important;
- margin: 2vw 0 0 0 !important;
+ }
+ hui-grid-card:
+ $:
+ .: |
+ #root {
+ --grid-card-gap: calc(2 * var(--atc-theme-card-gap, 16px));
}
- }
+ hui-grid-card:
+ $: |
+ #root {
+ --grid-card-gap: var(--atc-theme-card-gap, 16px);
+ }
+ /* default */
+ h1.card-header {
+ padding-left: 0;
+ padding-right: 0;
+ font-size: 25px;
+ font-weight: 400;
+ }
+ /* portrait */
+ @media screen and (max-width: 1200px) {
+ h1 {
+ /* font-size: 1.3vw !important; */
+ /* !include line-height: 1.1vw !important; */
+ }
+ }
+ /* phone */
+ @media screen and (max-width: 800px) {
+ h1 {
+ /* font-size: 5.5vw !important;
+ line-height: 6vw !important;
+ margin: 2vw 0 0 0 !important; */
+ }
+ }
- ${!this.entityUsesEntityPictureAsIcon ? html`
-
-
- ` : ''}
+ ${!this.entityUsesEntityPictureAsIcon
+ ? html` `
+ : ''}
-
- ${this.config.name || this.entity.attributes.friendly_name}
-
- ${this.showStateString ? html`
- ${domainStateString || ''}
- ` : ''
- }
+ ${this.config.name || this.entity.attributes.friendly_name}
+ ${this.showStateString ? html` ${domainStateString || ''} ` : ''}
-