├── README.md ├── cards ├── gauge.yaml ├── person.yaml ├── popup │ ├── popup_alerts.yaml │ └── popup_lights.yaml ├── room.yaml ├── shenron.yaml ├── subtitle_badge.yaml ├── text_button.yaml ├── tiles.yaml ├── title_badge │ ├── horizontal_badge.yaml │ ├── title_buttoncard.yaml │ └── title_mush_chip.yaml └── toggle_animates.yaml ├── counter_sensor_example.yaml ├── img ├── bottom_bar.jpg ├── counter_sensors.jpg ├── counters.png ├── dashboard_all.jpg ├── gate.gif ├── gatev2.jpg ├── graph.png ├── header2.jpg ├── panel.jpg ├── person.png ├── pill.png ├── room_cards.jpg ├── shutter_slider.png ├── theme.jpg └── title&graph.jpg └── themes ├── pixel-theme.yaml ├── sensor_color_brown.yaml ├── sensor_color_green.yaml ├── sensor_color_red.yaml └── sensor_color_yellow.yaml /README.md: -------------------------------------------------------------------------------- 1 | ###### *Want a dashboard with the [minimal UI](https://github.com/Arroma98/Minimal-HA/blob/main/README.md)?* 2 | 3 | Having received particular interest in the [forum](https://community.home-assistant.io/t/rounded-dashboard-guide/543043/190), here's how I made my dashboard. 4 | 5 | _If you have any difficulty open an **issue**._ 6 | 7 | ##### Pixel-like-dashboard 8 | 9 | ![Dashboard](img/dashboard_all.jpg) 10 | 11 | ### What's that? 12 | This is an “Android 13 Pixel-like” dashboard based on [Rounded Dashboard by Leon](https://community.home-assistant.io/t/rounded-dashboard-guide/543043). 13 | ###### NB.1 - I'm not a developer or anything, I'm a mere mortal who until recently was unknown to this whole world and is getting to know it from scratch. 14 | ###### NB.2 - What I did is put together cards found in the [forum](https://community.home-assistant.io/latest), modifying some more and some less, aiming to mix it all up to make pixel rom design in my home assistant dashboard. 15 | 16 | 17 | 18 | 19 | # theme.yaml 20 | It has to look like the pixel interface, so we need to use the exact **colors** and **fonts** first. 21 | 22 | ###### You can find the full theme in the _themes folder_ 23 | 24 | 25 | 26 | ##### Add these codes to your theme: 27 | 28 |
colors 29 | As you can see here, the header always stays black while the panel varies light/dark, and as can be seen, the background of the notifications is brighter than that of the panel, both in the dark and in the light mode. 30 | 31 | So, let's add these variables to the theme: 32 | ###### Assuming you already have the rounded theme 33 | ``` 34 | ## White mode: 35 | white0: "#f2f0f4" #darker 36 | white00: "#fbf8fd" #brighter 37 | 38 | ## Dark mode: 39 | black0: "#1b1b1f" #darker 40 | black00: "#303034" #brighter 41 | ``` 42 | So then we can add: 43 | ``` 44 | modes: 45 | dark: 46 | contrast0: var(--black0) 47 | contrast00: var(--black00) 48 | light: 49 | contrast0: var(--white0) 50 | contrast00: var(--white00) 51 | ``` 52 | 53 | #### **black amoled background** 54 | 55 | In addition to this, to have a correct display of the colors and keep the **black amoled background** even in white mode, we have to set the theme colors in this way: 56 | ``` 57 | # Main Interface Colors 58 | primary-color: var(--blue) 59 | accent-color: var(--blue) 60 | primary-background-color: var(--black1) 61 | secondary-background-color: var(--black0) 62 | divider-color: var(--black00) 63 | # Text 64 | primary-text-color: var(--white8) 65 | secondary-text-color: var(--white10) 66 | text-primary-color: var(--contrast20) 67 | disabled-text-color: var(--contrast6) 68 | text-accent-color: var(--contrast1) 69 | # Header: 70 | app-header-background-color: var(--black1) #STATUSBAR ANDROID 71 | app-header-text-color: var(--contrast12) 72 | app-header-selection-bar-color: transparent 73 | app-header-edit-background-color: var(--contrast0) 74 | app-header-edit-text-color: var(--contrast8) 75 | # Cards 76 | card-background-color: var(--black0) 77 | ha-card-background: var(--contrast00) 78 | ha-card-border-color: var(--contrast0) 79 | paper-listbox-background-color: var(--black00) 80 | # Tile card 81 | state-unavailable-color: var(--contrast6) 82 | state-light-off-color: var(--contrast10) 83 | state-light-on-color: var(--yellow) 84 | # Sidebar Menu 85 | sidebar-icon-color: var(--white8) 86 | sidebar-text-color: var(--white8) 87 | sidebar-background-color: var(--black0) 88 | sidebar-selected-icon-color: var(--blue) 89 | sidebar-selected-text-color: var(--white0) 90 | ``` 91 | 92 |
93 | 94 |
padding 95 | 96 | ``` 97 | ha-card-border-radius: 25px 98 | grid-card-gap: 12px 99 | horizontal-stack-card-margin: 0px 8px 100 | vertical-stack-card-margin: 8px 8px 101 | ha-card-border-width: "0px" # Removes default 1px line 102 | 103 | ``` 104 | 105 |
106 | 107 |
fonts 108 | 109 | ###### [How](https://community.home-assistant.io/t/trying-to-add-font/400236/2?u=arroma) to import a font. 110 | 111 | [Google Sans font](https://www.cdnfonts.com/google-sans.font) is used throughout the interface. 112 | 113 | [Poppins](https://fonts.google.com/share?selection.family=Poppins:wght@900) is used for titles and important values (optional). 114 | 115 | ``` 116 | card-mod-card-yaml: | 117 | .: | 118 | /* General changes */ 119 | ha-card { 120 | transition: none !important; 121 | font-family: 'Product Sans' !important; 122 | } 123 | ``` 124 | 125 |
126 | 127 |
bottom bar 128 | 129 | ``` 130 | error-color: "var(--google-red)" 131 | warning-color: "var(--google-yellow)" 132 | success-color: "var(--google-green)" 133 | info-color: "var(--google-blue)" 134 | header-height: "calc(var(--header-base-height) + env(safe-area-inset-bottom))" 135 | header-base-height: "60px" 136 | ha-dialog-border-radius: "25px" 137 | header-tab-indicator-color: "rgba(0, 0, 0, 0)" 138 | header-active-tab-color: "var(--contrast1)" 139 | header-active-tab-bg-color: "var(--contrast22)" 140 | header-all-tabs-color: "var(--contrast10)" 141 | 142 | card-mod-root-yaml: | 143 | ha-tabs$: | 144 | #tabsContent { 145 | width: 97%; 146 | } 147 | .: | 148 | .header { 149 | top: auto !important; 150 | bottom: 0; !important 151 | transform: translate3d(0px, 0px, 0px) !important; 152 | backdrop-filter: blur(50px); 153 | -webkit-backdrop-filter: blur(50px); 154 | -moz-backdrop-filter: blur(50px); 155 | -o-backdrop-filter: blur(50px); 156 | -ms-backdrop-filter: blur(50px); 157 | background-color: var(--contrast0) !important; 158 | } 159 | :host([scrolled]) .header { 160 | box-shadow: none !important; 161 | } 162 | .toolbar { 163 | height: var(--header-base-height) !important; 164 | padding-bottom: env(safe-area-inset-bottom) !important; 165 | } 166 | #view { 167 | margin-top: calc(-1 * var(--header-height)) !important; 168 | padding-bottom: var(--header-height); 169 | } 170 | ha-tabs { 171 | --paper-tabs-selection-bar-color: var(--header-tab-indicator-color); 172 | --mdc-icon-size: 26px; 173 | display: flex; 174 | justify-content: space-between; 175 | padding: 0 10px; 176 | height:50px !important; 177 | } 178 | paper-tab[aria-selected=true] { 179 | color: var(--contrast1); 180 | background-color: var(--contrast16); 181 | } 182 | paper-tab { 183 | color: var(--header-all-tabs-color); 184 | border-radius: 25px; 185 | height:50px; 186 | /*width: calc(100% / 4); 187 | padding: 0;*/ 188 | padding-left: 20px; 189 | padding-right: 20px; 190 | } 191 | ha-menu-button, ha-button-menu { 192 | color: var(--contrast16); 193 | } 194 | ``` 195 | 196 |
197 | 198 | ____ 199 | 200 | ### Let's start with the dashboard: 201 | 202 | ###### _These are examples of the main cards that I use in my dashboard, in the "cards" folder you will also find the codes of other cards._ 203 | 204 | 205 | 206 | 207 | # Pill 208 | A good way to keep track of the garbage calendar, home alarm and current energy consumption 209 | 210 | 211 | 212 |
Pill code 213 | 214 | ``` 215 | type: horizontal-stack 216 | cards: 217 | - type: custom:stack-in-card 218 | mode: horizontal 219 | keep: 220 | margin: true 221 | border_radius: true 222 | background: true 223 | outer_padding: false 224 | card_mod: 225 | style: | 226 | ha-card { 227 | background-color: var(--black0); 228 | border-radius: 25px; 229 | } 230 | cards: 231 | - type: custom:button-card 232 | name: '[[[return states["calendar.trash"].attributes.message]]]' 233 | show_label: false 234 | show_icon: false 235 | entity: calendar.trash 236 | tap_action: 237 | action: more-info 238 | haptic: light 239 | styles: 240 | card: 241 | - background: var(--black00) 242 | - font-weight: 500 243 | - line-height: 18px 244 | - border-radius: 24px 245 | - padding: 6px 10px 246 | - font-size: 12px 247 | - box-shadow: none 248 | name: 249 | - color: '#EAEDF6' 250 | - font-family: Poppins 251 | label: 252 | - color: '#777A83' 253 | state: 254 | - value: 'on' 255 | styles: 256 | card: 257 | - background: var(--white0) 258 | name: 259 | - color: var(--black00) 260 | - value: 'off' 261 | name: Nulla 262 | styles: 263 | name: 264 | - color: var(--white10) 265 | - font-family: Product Sans 266 | - type: custom:button-card 267 | name: Alarm 268 | show_label: false 269 | show_icon: false 270 | entity: alarm_control_panel.alarm 271 | tap_action: 272 | action: more-info 273 | haptic: light 274 | styles: 275 | card: 276 | - background: var(--black00) 277 | - font-weight: 500 278 | - line-height: 18px 279 | - border-radius: 24px 280 | - padding: 6px 10px 281 | - font-size: 12px 282 | - box-shadow: none 283 | name: 284 | - color: var(--black0) 285 | - font-family: Poppins 286 | state: 287 | - value: disarmed 288 | styles: 289 | card: 290 | - background: var(--black00) 291 | name: 292 | - color: var(--white8) 293 | - value: armed_home 294 | name: At home 295 | styles: 296 | card: 297 | - background: var(--red) 298 | name: 299 | - color: var(--black) 300 | - justify-self: center 301 | - value: armed_away 302 | name: Away 303 | styles: 304 | card: 305 | - background: var(--red) 306 | name: 307 | - color: var(--black) 308 | - value: armed_night 309 | name: Night 310 | styles: 311 | card: 312 | - background: var(--red) 313 | name: 314 | - color: var(--black) 315 | - value: armed_vacation 316 | name: Vacation 317 | styles: 318 | card: 319 | - background: var(--red) 320 | name: 321 | - color: var(--black) 322 | - value: armed_custom_bypass 323 | name: Bypass 324 | styles: 325 | card: 326 | - background: var(--red) 327 | name: 328 | - color: var(--black) 329 | - type: custom:bar-card 330 | card_mod: 331 | style: | 332 | ha-card { 333 | background: rgb(0,0,0,0); 334 | box-shadow: none; 335 | --primary-text-color: var(--white0); 336 | font-family: Product Sans ; 337 | } 338 | bar-card-name { 339 | margin-left: 0px; 340 | } 341 | bar-card-value { 342 | margin-right: 15px; 343 | font-family: Product Sans Medium ; 344 | } 345 | bar-card-card { 346 | margin-top: -15px; 347 | margin-left: 0px; 348 | margin-right: 0px; 349 | margin-bottom: 0px; 350 | } 351 | entities: 352 | - entity: sensor.energy_consumption 353 | name: ' ' 354 | icon: none 355 | min: 0 356 | max: 7 357 | direction: right 358 | height: 30px 359 | positions: 360 | icon: inside 361 | name: 'off' 362 | value: inside 363 | indicator: 'off' 364 | unit_of_measurement: kW 365 | decimal: 2 366 | severity: 367 | - from: 0 368 | to: 0.2 369 | color: '#69cf78' 370 | - from: 0.2 371 | to: 0.5 372 | color: '#6ccc68' 373 | - from: 0.5 374 | to: 0.8 375 | color: '#77d169' 376 | - from: 0.8 377 | to: 1 378 | color: '#77c967' 379 | - from: 1 380 | to: 1.2 381 | color: '#8ccc66' 382 | - from: 1.2 383 | to: 1.5 384 | color: '#a5cf69' 385 | - from: 1.5 386 | to: 1.8 387 | color: '#b9bf60' 388 | - from: 1.8 389 | to: 2 390 | color: '#c7bf63' 391 | - from: 2 392 | to: 2.2 393 | color: '#c2ba61' 394 | - from: 2.2 395 | to: 2.5 396 | color: '#c9af65' 397 | - from: 2.5 398 | to: 2.8 399 | color: '#cca968' 400 | - from: 2.8 401 | to: 3 402 | color: '#cc9b66' 403 | - from: 3 404 | to: 3.2 405 | color: '#d18f6b' 406 | - from: 3.2 407 | to: 3.5 408 | color: '#de856f' 409 | - from: 3.5 410 | to: 3.8 411 | color: '#e88276' 412 | - from: 3.8 413 | to: 4 414 | color: '#e87676' 415 | - from: 4 416 | to: 4.2 417 | color: '#e67373' 418 | - from: 4.2 419 | to: 4.5 420 | color: '#d66b6b' 421 | - from: 4.5 422 | to: 5 423 | color: '#c26161' 424 | - from: 5 425 | to: 7 426 | color: '#a35252' 427 | tap_action: 428 | action: navigate 429 | navigation_path: /lovelace/energy 430 | ``` 431 | 432 |
433 | 434 | _____ 435 | 436 | # Counter sensors 437 | Very useful because it shows at a glance the entities that are on, clicking on it opens a popup showing all the entities of that category. 438 | 439 | I made a bigger box for important alerts. 440 | 441 | 442 | 443 | *Put everything under ```type:horizontal-stack```* 444 | 445 |
Alert box code 446 | 447 | Card taken from [here](https://community.home-assistant.io/t/rounded-dashboard-guide/543043/156?u) 448 | 449 | ``` 450 | type: custom:button-card 451 | color_type: label-card 452 | layout: label 453 | show_name: false 454 | show_state: false 455 | show_units: false 456 | show_label: true 457 | show_icon: true 458 | entity: sensor.alerts_on 459 | icon: mdi:bell-badge 460 | label: '[[[ return states[''sensor.alerts_on''].state ]]]' 461 | hold_action: 462 | action: none 463 | styles: 464 | icon: 465 | - width: 20px 466 | - color: var(--black1) 467 | img_cell: 468 | - justify-content: flex-end 469 | - padding: 8px 5px 470 | grid: 471 | - grid-template-areas: '"i l"' 472 | - grid-template-columns: min-width min-width 473 | - height: 20px 474 | card: 475 | - background-color: var(--red) 476 | - border-radius: 25px 477 | - height: 70px 478 | - box-shadow: none 479 | - margin-top: '-10px' 480 | - margin-bottom: '-15px' 481 | label: 482 | - margin-left: 5% 483 | - justify-self: flex-start 484 | - color: var(--black1) 485 | - font-family: Poppins 486 | - font-size: 24px 487 | state: 488 | - value: '0' 489 | icon: mdi:check-all 490 | label: 0 avvisi 491 | styles: 492 | label: 493 | - font-size: 12px 494 | - color: var(--green) 495 | - font-family: Product Sans Light 496 | card: 497 | - background: var(--green-tint) 498 | icon: 499 | - color: var(--green) 500 | - width: 18px 501 | tap_action: 502 | haptic: light 503 | action: fire-dom-event 504 | browser_mod: 505 | service: browser_mod.popup 506 | data: 507 | title: ' ' 508 | content: 509 | ``` 510 | 511 |
512 | 513 |
Other boxes 514 | 515 | ``` 516 | type: custom:button-card 517 | name: '[[[ return states[''sensor.lights_on''].state ]]]' 518 | icon: mdi:lightbulb-on 519 | entity: sensor.lights_on 520 | styles: 521 | grid: 522 | - grid-template-areas: '"i" "n" "slider"' 523 | - grid-template-columns: 1fr 524 | - grid-template-rows: 1fr min-content min-content 525 | card: 526 | - background: var(--yellow) 527 | - '--mdc-ripple-press-opacity': 0 528 | - border-radius: 25px 529 | - color: var(--contrast15) 530 | - height: 70px 531 | - width: 50px 532 | - box-shadow: none 533 | - margin-top: '-10px' 534 | - margin-bottom: '-15px' 535 | img_cell: 536 | - justify-self: center 537 | - width: 20px 538 | - margin: 10px 0px 0px 0px 539 | icon: 540 | - width: 20px 541 | - height: 20px 542 | - color: var(--black1) 543 | name: 544 | - justify-self: center 545 | - font-size: 12px 546 | - margin: 0px 0px 10px 0px 547 | - color: var(--black1) 548 | - font-family: Product Sans 549 | state: 550 | - value: '0' 551 | icon: mdi:lightbulb-off 552 | name: ' ' 553 | styles: 554 | card: 555 | - background: var(--black00) 556 | tap_action: 557 | haptic: light 558 | action: fire-dom-event 559 | browser_mod: 560 | service: browser_mod.popup 561 | data: 562 | title: ' ' 563 | content: 564 | ``` 565 | 566 |
567 | 568 | _____ 569 | 570 | # Panel 571 | Now we have to recreate the famous notification panel that Google has created since Android 12. 572 | 573 | It can very well be done by playing with ```type: custom:stack-in-card```, the correct radius and the colors that we set at the beginning. 574 | 575 | 576 | 577 | 578 | Let's start with the room card, I got the code from [here](https://community.home-assistant.io/t/rounded-dashboard-guide/543043/82?u) and made some slight changes to meet my needs. 579 | 580 | Let's put them in a 2-column grid and place it under ```type: custom:stack-in-card``` 581 |
Room card 582 | 583 | 584 | 585 | ``` 586 | - type: custom:stack-in-card 587 | mode: vertical 588 | keep: 589 | margin: true 590 | border_radius: true 591 | background: true 592 | outer_padding: false 593 | card_mod: 594 | style: | 595 | ha-card { 596 | background-color: var(--contrast0); 597 | } 598 | cards: 599 | - square: false 600 | type: grid 601 | columns: 2 602 | cards: 603 | - type: custom:button-card 604 | entity: climate.mitsubishi 605 | icon: mdi:sofa 606 | name: Soggiorno 607 | tap_action: 608 | action: navigate 609 | navigation_path: /lovelace/soggiorno 610 | haptic: light 611 | state: 612 | - value: 'on' 613 | styles: 614 | card: 615 | - background: rgba(var(--blue-rgb), 1) 616 | icon: 617 | - color: var(--black) 618 | name: 619 | - color: var(--black) 620 | icon: mdi:fan 621 | - value: dry 622 | styles: 623 | card: 624 | - background: rgba(var(--blue-rgb), 1) 625 | icon: 626 | - color: var(--black) 627 | name: 628 | - color: var(--black) 629 | icon: mdi:fan 630 | - value: cool 631 | styles: 632 | card: 633 | - background: rgba(var(--blue-rgb), 1) 634 | icon: 635 | - color: var(--black) 636 | name: 637 | - color: var(--black) 638 | icon: mdi:snowflake 639 | - value: heat 640 | styles: 641 | card: 642 | - background: rgba(var(--orange-rgb), 1) 643 | icon: 644 | - color: var(--black) 645 | name: 646 | - color: var(--black) 647 | icon: mdi:fire 648 | styles: 649 | grid: 650 | - grid-template-areas: '"i temp" "n hum"' 651 | - grid-template-columns: 1fr 1fr 652 | - grid-template-rows: 1fr min-content min-content 653 | card: 654 | - background: var(--contrast00) 655 | - padding: 10px 656 | - '--mdc-ripple-press-opacity': 0 657 | - box-shadow: none 658 | - height: 96px 659 | img_cell: 660 | - justify-self: start 661 | - width: 24px 662 | - margin: 10px 663 | icon: 664 | - width: 24px 665 | - height: 24px 666 | - color: var(--contrast18) 667 | name: 668 | - justify-self: start 669 | - font-size: 14px 670 | - margin: 10px 671 | - color: var(--contrast18) 672 | - font-family: Product Sans 673 | custom_fields: 674 | temp: 675 | - align-self: start 676 | - justify-self: end 677 | - font-size: 12px 678 | - font-weight: 500 679 | - margin: 2px 0px 10px 0px 680 | - color: grey 681 | - font-family: Product Sans 682 | - background-color: var(--contrast0) 683 | - border-radius: 100px 684 | - padding: 6px 685 | hum: 686 | - align-self: start 687 | - justify-self: end 688 | - font-size: 12px 689 | - font-weight: 500 690 | - margin: 2px 0px 10px 0px 691 | - color: grey 692 | - font-family: Product Sans 693 | - background-color: var(--contrast0) 694 | - border-radius: 100px 695 | - padding: 6px 696 | custom_fields: 697 | temp: | 698 | [[[ 699 | return ` 702 | ${parseFloat(states['sensor.temp'].state).toFixed(0)}°C` 703 | ]]] 704 | hum: | 705 | [[[ 706 | return ` 709 | ${parseFloat(states['sensor.hum'].state).toFixed(0)}%` 710 | ]]] 711 | card_mod: 712 | style: | 713 | ha-card:active { 714 | box-shadow: none; 715 | transform: scale(0.96); 716 | transition: 200ms !important; 717 | border-radius: 20px; 718 | transform-origin: center; 719 | } 720 | ``` 721 | 722 |
723 | 724 | Now let's place it under another ```type: custom: stack-in-card``` together with a gap-card. 725 | 726 | The ```type: custom:gap-card``` will be placed both at the beginning and at the end of stack-in-card. 727 |
Code 728 | 729 | ``` 730 | type: custom:stack-in-card 731 | mode: vertical 732 | keep: 733 | margin: true 734 | border_radius: true 735 | background: true 736 | outer_padding: false 737 | card_mod: 738 | style: | 739 | ha-card { 740 | background-color: var(--contrast0); 741 | border-radius: 30px; 742 | font-family: Product Sans ; 743 | } 744 | cards: 745 | - type: custom:gap-card 746 | height: 3 747 | 748 | ``` 749 |
750 | 751 | _____ 752 | 753 | # Title and graph 754 | 755 | In the titles I use ```font-family: Poppins``` because I like it, but you can use ```font-family: Product Sans Black``` to make it more pixel-like. 756 | 757 | 758 | 759 |
Title 760 | 761 | ``` 762 | type: vertical-stack 763 | cards: 764 | - type: custom:button-card 765 | name: ENERGIA 766 | styles: 767 | card: 768 | - background: none 769 | - box-shadow: none 770 | - padding: 70px 0px 70px 0px 771 | - '--mdc-ripple-press-opacity': 0 772 | name: 773 | - font-size: 32px 774 | - color: var(--white0) 775 | - font-family: Poppins 776 | - type: custom:mushroom-chips-card 777 | chips: 778 | - type: entity 779 | entity: sensor.power_highest_peak_time_today 780 | double_tap_action: 781 | action: none 782 | icon: mdi:solar-power-variant 783 | content_info: state 784 | tap_action: 785 | action: more-info 786 | hold_action: 787 | action: none 788 | card_mod: 789 | style: | 790 | ha-card { 791 | --chip-background: var(--contrast0); 792 | --primary-text-color: var(--contrast18); 793 | font-family: Product Sans; 794 | } 795 | alignment: start 796 | ``` 797 | _ 798 |
799 | 800 |
Graph 801 | Here I'm using two stack-in-cards, note that I'm using two different background colors: var(--contrast0) and var(--contrast00), this is to give more tone to the graphs (see img). 802 | 803 | 804 | 805 | 806 | ``` 807 | type: custom:stack-in-card 808 | mode: vertical 809 | keep: 810 | margin: true 811 | border_radius: true 812 | background: true 813 | outer_padding: false 814 | card_mod: 815 | style: | 816 | ha-card { 817 | background-color: var(--contrast0); 818 | border-radius: 30px; 819 | --primary-text-color: var(--contrast18); 820 | font-family: Product Sans ; 821 | } 822 | cards: 823 | - type: custom:gap-card 824 | height: 5 825 | - type: custom:stack-in-card 826 | mode: vertical 827 | keep: 828 | margin: true 829 | border_radius: true 830 | background: true 831 | outer_padding: false 832 | card_mod: 833 | style: | 834 | ha-card { 835 | background-color: var(--contrast00); 836 | border-radius: 30px; 837 | } 838 | cards: 839 | - type: custom:gap-card 840 | height: 5 841 | - type: custom:swipe-card 842 | card_mod: 843 | style: | 844 | ha-card { 845 | border-radius: 25px !important; 846 | } 847 | card_width: calc(100% - 48px) 848 | parameters: 849 | centeredSlides: false 850 | slidesPerView: 1.8 851 | spaceBetween: 16 852 | initialSlide: 0 853 | cards: 854 | - type: sensor 855 | entity: sensor.consumo_energia 856 | hours_to_show: 24 857 | detail: 1 858 | graph: line 859 | name: Consumo 860 | icon: none 861 | theme: sensor_color_brown 862 | card_mod: 863 | class: graph 864 | style: | 865 | ha-card { 866 | box-shadow: none; 867 | } 868 | .graph { 869 | background: var(--brown-tint); 870 | } 871 | .graph .name { 872 | background: var(--brown); 873 | color: var(--black); 874 | } 875 | - type: sensor 876 | entity: sensor.2_fotovoltaico_channel_1_power 877 | hours_to_show: 24 878 | detail: 1 879 | graph: line 880 | name: Produzione 881 | icon: none 882 | theme: sensor_color_green 883 | card_mod: 884 | class: graph 885 | style: | 886 | ha-card { 887 | box-shadow: none; 888 | } 889 | .graph { 890 | background: var(--green-tint); 891 | } 892 | .graph .name { 893 | background: var(--green); 894 | color: var(--black); 895 | } 896 | ``` 897 | 898 |
899 | 900 | 901 |
Graph color theme 902 | 903 | ``` 904 | sensor_color_yellow: 905 | accent-color: "#ffda78" 906 | ``` 907 | 908 | This theme must be placed in the theme folder ```/config/themes/sensor_color_yellow.yaml``` 909 | ###### _You will find more in the theme folder._ 910 | 911 |
912 | 913 | _____ 914 | 915 | # Person 916 | 917 | Here I use mushroom chips cards with card_mod. 918 | 919 | 920 | 921 | ###### Away - no text, pixel white background 922 | ###### At home - "At home", green background, Poppins font 923 | ###### Driving - "Car", blue background, Poppins font 924 | 925 |
Code 926 | 927 | ``` 928 | type: custom:mushroom-chips-card 929 | chips: 930 | - type: template 931 | double_tap_action: 932 | action: none 933 | picture: /local/person.jpg 934 | content: |- 935 | {% if is_state('device_tracker.person', 'home') %} 936 | Home 937 | {% elif is_state('sensor.person_phone_activity','in_vehicle')%} 938 | Car 939 | {% else %} 940 | {% endif %} 941 | hold_action: 942 | action: none 943 | tap_action: 944 | action: none 945 | card_mod: 946 | style: | 947 | ha-card { 948 | {% if is_state('device_tracker.person', 'home') %} 949 | font-family: Poppins !important; 950 | --chip-background: var(--green) !important; 951 | {% elif is_state('sensor.person_phone_activity','in_vehicle')%} 952 | --chip-background: var(--blue) !important; 953 | {% else %} 954 | {% endif %} 955 | } 956 | ``` 957 | 958 |
959 | 960 | _____ 961 | 962 | # Something else - animations! 963 | 964 | A very simple animation when the car gate opens, it can be used with any entity, such as a light that turns on/off or any state change of any desired entity 965 | 966 | 967 | 968 | 969 |
On/off animation code 970 | 971 | ``` 972 | 973 | - type: custom:button-card 974 | card_mod: 975 | style: | 976 | ha-card { 977 | transition: 300ms !important; 978 | } 979 | name: CANCELLO 980 | icon: mdi:gate 981 | entity: switch.cancello 982 | tap_action: 983 | action: toggle 984 | haptic: heavy 985 | hold_action: 986 | action: more-info 987 | haptic: light 988 | styles: 989 | grid: 990 | - grid-template-areas: '"i" "n" "slider"' 991 | - grid-template-columns: 1fr 992 | - grid-template-rows: 1fr min-content min-content 993 | card: 994 | - height: 180px 995 | - background: var(--contrast00) 996 | - padding: 16px 997 | - '--mdc-ripple-press-opacity': 0 998 | - padding: 100px 0px 16px 20px 999 | - font-family: Poppins 1000 | img_cell: 1001 | - justify-self: start 1002 | - width: 24px 1003 | icon: 1004 | - width: 24px 1005 | - height: 24px 1006 | - color: var(--contrast8) 1007 | name: 1008 | - justify-self: start 1009 | - font-size: 14px 1010 | - margin: 4px 0 12px 0 1011 | - color: var(--contrast8) 1012 | - font-family: Product Sans 1013 | state: 1014 | - value: 'on' 1015 | name: Aprendo.. 1016 | styles: 1017 | card: 1018 | - background: var(--yellow) 1019 | - border-radius: 10px 1020 | icon: 1021 | - color: var(--black) 1022 | name: 1023 | - color: var(--black) 1024 | - font-family: Poppins 1025 | - value: 'off' 1026 | styles: 1027 | icon: 1028 | - color: var(--black) 1029 | card: 1030 | - background: var(--blue) 1031 | name: 1032 | - color: var(--black) 1033 | - font-family: Poppins 1034 | ``` 1035 | 1036 |
1037 | 1038 | ____ 1039 | 1040 | # Gate card v.2 1041 | 1042 | Use the slider to switch! 1043 | 1044 | 1045 | 1046 |
Code 1047 | 1048 | ``` 1049 | type: horizontal-stack 1050 | cards: 1051 | - type: custom:button-card 1052 | show_name: false 1053 | icon: mdi:hospital 1054 | double_tap_action: 1055 | action: none 1056 | hold_action: 1057 | action: navigate 1058 | navigation_path: /help 1059 | haptic: heavy 1060 | tap_action: 1061 | action: none 1062 | styles: 1063 | grid: 1064 | - grid-template-areas: '"i" "n" "slider"' 1065 | - grid-template-columns: 1fr 1066 | - grid-template-rows: 1fr min-content min-content 1067 | card: 1068 | - background: var(--red) 1069 | - height: 100% 1070 | - width: 70px 1071 | - '--mdc-ripple-press-opacity': 0 1072 | img_cell: 1073 | - justify-self: center 1074 | - width: 54px 1075 | icon: 1076 | - width: 44px 1077 | - height: 44px 1078 | - color: var(--black) 1079 | card_mod: 1080 | style: | 1081 | ha-card:active { 1082 | transform: scale(0.97); 1083 | transition: 100ms !important; 1084 | border-radius: 20px; 1085 | transform-origin: center; 1086 | } 1087 | - type: custom:button-card 1088 | card_mod: 1089 | style: | 1090 | ha-card { 1091 | transition: 300ms !important; 1092 | } 1093 | name: GATE 1094 | icon: mdi:gate 1095 | show_label: true 1096 | label: Slide to open 1097 | entity: switch.gate 1098 | tap_action: 1099 | action: none 1100 | hold_action: 1101 | action: more-info 1102 | haptic: light 1103 | custom_fields: 1104 | slider: 1105 | card: 1106 | type: custom:my-slider-v2 1107 | entity: '[[[ return entity.entity_id ]]]' 1108 | styles: 1109 | container: 1110 | - background: none 1111 | - border-radius: 100px 1112 | - overflow: visible 1113 | card: 1114 | - height: 46px 1115 | - padding: 0px 0px 0px 5px 1116 | - background: | 1117 | [[[ 1118 | if (entity.state == "on") return "var(--orange)"; 1119 | if (entity.state == "off") return "var(--contrast0)"; 1120 | else return "var(--contrast0)"; 1121 | ]]] 1122 | track: 1123 | - overflow: visible 1124 | - background: none 1125 | progress: 1126 | - background: none 1127 | thumb: 1128 | - background: | 1129 | [[[ 1130 | if (entity.state == "on") return "var(--yellow)"; 1131 | if (entity.state == "off") return "var(--blue)"; 1132 | else return "var(--contrast8)"; 1133 | ]]] 1134 | - top: 4px 1135 | - right: 0px 1136 | - height: 38px 1137 | - width: 38px 1138 | - border-radius: 100px 1139 | styles: 1140 | grid: 1141 | - grid-template-areas: '"i" "n" "l" "slider"' 1142 | - grid-template-columns: 1fr 1143 | - grid-template-rows: 1fr min-content min-content 1144 | card: 1145 | - background: var(--blue) 1146 | - padding: 16px 1147 | - '--mdc-ripple-press-opacity': 0 1148 | - height: 200px 1149 | img_cell: 1150 | - justify-self: start 1151 | - margin: 50px 0px 0px 0px 1152 | - width: 24px 1153 | icon: 1154 | - width: 24px 1155 | - height: 24px 1156 | - color: var(--black) 1157 | name: 1158 | - justify-self: start 1159 | - font-size: 14px 1160 | - margin: 12px 0 20px 0 1161 | - color: var(--black) 1162 | - font-family: Poppins 1163 | label: 1164 | - color: var(--black0) 1165 | - font-size: 14px 1166 | - margin: '-10px 0px 5px 0px' 1167 | - font-family: Product Sans Light 1168 | state: 1169 | - value: 'on' 1170 | icon: mdi:gate-open 1171 | name: Opening.. 1172 | styles: 1173 | card: 1174 | - background: var(--yellow) 1175 | - box-shadow: none 1176 | icon: 1177 | - color: var(--black) 1178 | name: 1179 | - color: var(--black) 1180 | label: 1181 | - color: transparent 1182 | ``` 1183 | 1184 |
1185 | 1186 | 1187 |
Credits 1188 | 1189 | [Rounded Dashboard by Leon](https://community.home-assistant.io/t/rounded-dashboard-guide/543043) 1190 | 1191 | [Card mod](https://github.com/thomasloven/lovelace-card-mod) 1192 | 1193 | [Bar card](https://github.com/custom-cards/bar-card) 1194 | 1195 | [Stack in card](https://github.com/custom-cards/stack-in-card) 1196 | 1197 | [Mushroom](https://github.com/piitaya/lovelace-mushroom) 1198 | 1199 | [Browser mod](https://github.com/thomasloven/hass-browser_mod) 1200 | 1201 | [Fontawesome](https://github.com/thomasloven/hass-fontawesome) 1202 | 1203 | All the people in the forum that publish their ideas and work. 1204 | 1205 |
1206 | -------------------------------------------------------------------------------- /cards/gauge.yaml: -------------------------------------------------------------------------------- 1 | ### This is a simple gauge but with forced white text to always be visible on the black background 2 | type: gauge 3 | theme: minimalist-mobile-tapbar 4 | min: 0 5 | needle: true 6 | segments: 7 | - from: 5800 8 | color: '#76e887' 9 | - from: 5500 10 | color: '#7ae876' 11 | - from: 5000 12 | color: '#86e876' 13 | - from: 4500 14 | color: '#89e876' 15 | - from: 4000 16 | color: '#a0e876' 17 | - from: 3600 18 | color: '#b9e876' 19 | - from: 3100 20 | color: '#e0e876' 21 | - from: 2900 22 | color: '#e8df76' 23 | - from: 2600 24 | color: '#e8df76' 25 | - from: 2300 26 | color: '#e8ca76' 27 | - from: 1900 28 | color: '#e8c076' 29 | - from: 1600 30 | color: '#e8b176' 31 | - from: 1400 32 | color: '#e89e76' 33 | - from: 1200 34 | color: '#e88d76' 35 | - from: 1000 36 | color: '#e88276' 37 | - from: 800 38 | color: '#e87676' 39 | - from: 600 40 | color: '#e67373' 41 | - from: 400 42 | color: '#d66b6b' 43 | - from: 200 44 | color: '#c26161' 45 | - from: 0 46 | color: '#a35252' 47 | max: 6500 48 | entity: sensor.energy 49 | name: Energy 50 | card_mod: 51 | style: | 52 | ha-card { 53 | box-shadow: none; 54 | background: rgba(0,0,0,0); 55 | font-family: Product Sans Light !important; 56 | --primary-text-color: var(--white0); 57 | } 58 | -------------------------------------------------------------------------------- /cards/person.yaml: -------------------------------------------------------------------------------- 1 | type: custom:mushroom-chips-card 2 | chips: 3 | - type: template 4 | double_tap_action: 5 | action: none 6 | picture: /local/person.jpg 7 | content: |- 8 | {% if is_state('device_tracker.person', 'home') %} 9 | Home 10 | {% elif is_state('sensor.person_phone_activity','in_vehicle')%} 11 | Car 12 | {% else %} 13 | {% endif %} 14 | hold_action: 15 | action: none 16 | tap_action: 17 | action: none 18 | card_mod: 19 | style: | 20 | ha-card { 21 | {% if is_state('device_tracker.person', 'home') %} 22 | font-family: Poppins !important; 23 | --chip-background: var(--green) !important; 24 | {% elif is_state('sensor.person_phone_activity','in_vehicle')%} 25 | --chip-background: var(--blue) !important; 26 | {% else %} 27 | {% endif %} 28 | } -------------------------------------------------------------------------------- /cards/popup/popup_alerts.yaml: -------------------------------------------------------------------------------- 1 | ### Add this to your card 2 | ### I use it on the alert card in the header 3 | tap_action: 4 | haptic: light 5 | action: fire-dom-event 6 | browser_mod: 7 | service: browser_mod.popup 8 | data: 9 | title: ' ' 10 | content: 11 | type: custom:stack-in-card 12 | mode: vertical 13 | keep: 14 | margin: true 15 | border_radius: true 16 | background: true 17 | outer_padding: false 18 | card_mod: 19 | style: | 20 | ha-card { 21 | background-color: var(--contrast0); 22 | border-radius: 25px; 23 | font-family: Product Sans ; 24 | } 25 | cards: 26 | - type: custom:gap-card 27 | height: 2 28 | - type: conditional 29 | conditions: 30 | - entity: sensor.alerts 31 | state_not: '0' 32 | card: 33 | type: custom:button-card 34 | name: ALERTS 🔔 35 | styles: 36 | card: 37 | - background: none 38 | - box-shadow: none 39 | - padding: 30px 0% 60px 0px 40 | - '--mdc-ripple-press-opacity': 0 41 | name: 42 | - font-size: 30px 43 | - color: var(--contrast20) 44 | - font-family: Poppins 45 | - type: conditional 46 | conditions: 47 | - entity: sensor.alerts 48 | state: '0' 49 | card: 50 | type: custom:button-card 51 | name: | 52 | NO ALERTS! 53 | 🙂 54 | styles: 55 | card: 56 | - background: none 57 | - box-shadow: none 58 | - padding: 30px 0% 60px 0px 59 | - '--mdc-ripple-press-opacity': 0 60 | - font-family: Poppins 61 | name: 62 | - font-size: 30px 63 | - color: var(--contrast20) 64 | - type: conditional 65 | conditions: 66 | - entity: light.light 67 | state: 'on' 68 | - entity: device_tracker.person1 69 | state_not: home 70 | - entity: device_tracker.person2 71 | state_not: home 72 | card: 73 | type: custom:button-card 74 | name: LIGHT 75 | label: ON 76 | show_label: true 77 | entity: light.light 78 | show_icon: false 79 | styles: 80 | card: 81 | - color: var(--contrast20) 82 | - border-radius: 24px 83 | - background-color: rgba(var(--yellow-rgb),0.1) 84 | - margin-top: 0px 85 | - padding: 8px 0px 86 | - border: 2px solid var(--yellow) 87 | - box-shadow: none 88 | label: 89 | - font-family: Poppins 90 | - font-size: 20px 91 | name: 92 | - font-family: Product Sans 93 | - font-size: 16px 94 | tap_action: 95 | haptic: light 96 | action: more-info 97 | - type: conditional 98 | conditions: 99 | - entity: input_boolean.climate_auto 100 | state: 'off' 101 | card: 102 | type: custom:button-card 103 | name: CLIMATE 104 | label: MANUAL 105 | show_label: true 106 | entity: input_boolean.climate_auto 107 | show_icon: false 108 | styles: 109 | card: 110 | - color: var(--contrast20) 111 | - border-radius: 24px 112 | - background: none 113 | - margin-top: 0px 114 | - padding: 8px 0px 115 | - border: 2px solid var(--contrast20) 116 | - box-shadow: none 117 | label: 118 | - font-family: Poppins 119 | - font-size: 20px 120 | name: 121 | - font-family: Product Sans 122 | - font-size: 16px 123 | tap_action: 124 | haptic: light 125 | action: more-info 126 | 127 | ### etc etc 128 | 129 | - type: custom:gap-card 130 | height: 2 131 | -------------------------------------------------------------------------------- /cards/popup/popup_lights.yaml: -------------------------------------------------------------------------------- 1 | ### Add this to your card 2 | ### I use it in the counter sensors on the header 3 | tap_action: 4 | haptic: light 5 | action: fire-dom-event 6 | browser_mod: 7 | service: browser_mod.popup 8 | data: 9 | title: ' ' 10 | content: 11 | type: custom:stack-in-card 12 | mode: vertical 13 | keep: 14 | margin: true 15 | border_radius: true 16 | background: true 17 | outer_padding: false 18 | card_mod: 19 | style: | 20 | ha-card { 21 | background-color: var(--contrast0); 22 | border-radius: 25px; 23 | font-family: Product Sans ; 24 | } 25 | cards: 26 | - type: custom:gap-card 27 | height: 2 28 | - type: vertical-stack 29 | cards: 30 | - type: custom:button-card 31 | name: LIGHTS 💡 32 | styles: 33 | card: 34 | - background: none 35 | - box-shadow: none 36 | - padding: 30px 0px 60px 0px 37 | - '--mdc-ripple-press-opacity': 0 38 | name: 39 | - font-size: 30px 40 | - color: var(--contrast20) 41 | - font-family: Poppins 42 | - square: false 43 | type: grid 44 | cards: 45 | - type: custom:button-card 46 | name: Light 47 | icon: mdi:lightbulb-off-outline 48 | entity: light.light 49 | tap_action: 50 | action: more-info 51 | haptic: light 52 | hold_action: 53 | action: more-info 54 | haptic: light 55 | styles: 56 | grid: 57 | - grid-template-areas: '"i" "n" "slider"' 58 | - grid-template-columns: 1fr 59 | - grid-template-rows: 1fr min-content min-content 60 | card: 61 | - background: var(--contrast00) 62 | - padding: 16px 63 | - '--mdc-ripple-press-opacity': 0 64 | img_cell: 65 | - justify-self: start 66 | - width: 24px 67 | icon: 68 | - width: 24px 69 | - height: 24px 70 | - color: var(--contrast8) 71 | name: 72 | - justify-self: start 73 | - font-size: 14px 74 | - margin: 4px 0 12px 0 75 | - color: var(--contrast8) 76 | state: 77 | - value: 'on' 78 | icon: mdi:lightbulb-on 79 | styles: 80 | card: 81 | - background: var(--yellow) 82 | - box-shadow: none 83 | icon: 84 | - color: var(--black) 85 | name: 86 | - color: var(--black) 87 | - value: 'off' 88 | icon: mdi:lightbulb-off 89 | styles: 90 | icon: 91 | - color: var(--contrast20) 92 | name: 93 | - color: var(--contrast20) 94 | - type: custom:button-card 95 | name: Lights 96 | icon: mdi:lightbulb-group-off-outline 97 | entity: light.lights 98 | tap_action: 99 | action: more-info 100 | haptic: light 101 | hold_action: 102 | action: more-info 103 | haptic: light 104 | styles: 105 | grid: 106 | - grid-template-areas: '"i" "n" "slider"' 107 | - grid-template-columns: 1fr 108 | - grid-template-rows: 1fr min-content min-content 109 | card: 110 | - background: var(--contrast00) 111 | - padding: 16px 112 | - '--mdc-ripple-press-opacity': 0 113 | img_cell: 114 | - justify-self: start 115 | - width: 24px 116 | icon: 117 | - width: 24px 118 | - height: 24px 119 | - color: var(--contrast8) 120 | name: 121 | - justify-self: start 122 | - font-size: 14px 123 | - margin: 4px 0 12px 0 124 | - color: var(--contrast8) 125 | state: 126 | - value: 'on' 127 | icon: mdi:lightbulb-group 128 | styles: 129 | card: 130 | - background: var(--yellow) 131 | - box-shadow: none 132 | icon: 133 | - color: var(--black) 134 | name: 135 | - color: var(--black) 136 | - value: 'off' 137 | icon: mdi:lightbulb-group-off 138 | styles: 139 | icon: 140 | - color: var(--contrast20) 141 | name: 142 | - color: var(--contrast20) 143 | columns: 2 144 | - square: false 145 | type: grid 146 | cards: 147 | - type: custom:button-card 148 | name: Light 149 | icon: mdi:lightbulb-off-outline 150 | entity: switch.light 151 | tap_action: 152 | action: more-info 153 | haptic: light 154 | hold_action: 155 | action: more-info 156 | haptic: light 157 | styles: 158 | grid: 159 | - grid-template-areas: '"i" "n" "slider"' 160 | - grid-template-columns: 1fr 161 | - grid-template-rows: 1fr min-content min-content 162 | card: 163 | - background: var(--contrast00) 164 | - padding: 16px 165 | - '--mdc-ripple-press-opacity': 0 166 | img_cell: 167 | - justify-self: start 168 | - width: 24px 169 | icon: 170 | - width: 24px 171 | - height: 24px 172 | - color: var(--contrast8) 173 | name: 174 | - justify-self: start 175 | - font-size: 14px 176 | - margin: 4px 0 12px 0 177 | - color: var(--contrast8) 178 | state: 179 | - value: 'on' 180 | icon: mdi:coach-lamp 181 | styles: 182 | card: 183 | - background: var(--yellow) 184 | - box-shadow: none 185 | icon: 186 | - color: var(--black) 187 | name: 188 | - color: var(--black) 189 | - value: 'off' 190 | icon: mdi:lightbulb-off 191 | styles: 192 | icon: 193 | - color: var(--contrast20) 194 | name: 195 | - color: var(--contrast20) 196 | - type: custom:button-card 197 | name: Light 198 | icon: mdi:coach-lamp 199 | entity: light.light 200 | tap_action: 201 | action: more-info 202 | haptic: light 203 | hold_action: 204 | action: more-info 205 | haptic: light 206 | styles: 207 | grid: 208 | - grid-template-areas: '"i" "n" "slider"' 209 | - grid-template-columns: 1fr 210 | - grid-template-rows: 1fr min-content min-content 211 | card: 212 | - background: var(--contrast00) 213 | - padding: 16px 214 | - '--mdc-ripple-press-opacity': 0 215 | img_cell: 216 | - justify-self: start 217 | - width: 24px 218 | icon: 219 | - width: 24px 220 | - height: 24px 221 | - color: var(--contrast8) 222 | name: 223 | - justify-self: start 224 | - font-size: 14px 225 | - margin: 4px 0 12px 0 226 | - color: var(--contrast8) 227 | state: 228 | - value: 'on' 229 | icon: mdi:coach-lamp 230 | styles: 231 | card: 232 | - background: var(--yellow) 233 | - box-shadow: none 234 | icon: 235 | - color: var(--black) 236 | name: 237 | - color: var(--black) 238 | - value: 'off' 239 | icon: mdi:lightbulb-off 240 | styles: 241 | icon: 242 | - color: var(--contrast20) 243 | name: 244 | - color: var(--contrast20) 245 | - type: custom:button-card 246 | name: Light 247 | icon: mdi:lightbulb-spot-off 248 | entity: light.light 249 | tap_action: 250 | action: more-info 251 | haptic: light 252 | hold_action: 253 | action: more-info 254 | haptic: light 255 | styles: 256 | grid: 257 | - grid-template-areas: '"i" "n" "slider"' 258 | - grid-template-columns: 1fr 259 | - grid-template-rows: 1fr min-content min-content 260 | card: 261 | - background: var(--contrast00) 262 | - padding: 16px 263 | - '--mdc-ripple-press-opacity': 0 264 | img_cell: 265 | - justify-self: start 266 | - width: 24px 267 | icon: 268 | - width: 24px 269 | - height: 24px 270 | - color: var(--contrast8) 271 | name: 272 | - justify-self: start 273 | - font-size: 14px 274 | - margin: 4px 0 12px 0 275 | - color: var(--contrast8) 276 | state: 277 | - value: 'on' 278 | icon: mdi:lightbulb-spot 279 | styles: 280 | card: 281 | - background: var(--yellow) 282 | - box-shadow: none 283 | icon: 284 | - color: var(--black) 285 | name: 286 | - color: var(--black) 287 | - value: 'off' 288 | icon: mdi:lightbulb-spot-off 289 | styles: 290 | icon: 291 | - color: var(--contrast20) 292 | name: 293 | - color: var(--contrast20) 294 | - type: custom:button-card 295 | name: Light 296 | icon: mdi:lightbulb-question 297 | entity: light.light 298 | tap_action: 299 | action: more-info 300 | haptic: light 301 | hold_action: 302 | action: more-info 303 | haptic: light 304 | styles: 305 | grid: 306 | - grid-template-areas: '"i" "n" "slider"' 307 | - grid-template-columns: 1fr 308 | - grid-template-rows: 1fr min-content min-content 309 | card: 310 | - background: var(--contrast00) 311 | - padding: 16px 312 | - '--mdc-ripple-press-opacity': 0 313 | img_cell: 314 | - justify-self: start 315 | - width: 24px 316 | icon: 317 | - width: 24px 318 | - height: 24px 319 | - color: var(--contrast8) 320 | name: 321 | - justify-self: start 322 | - font-size: 14px 323 | - margin: 4px 0 12px 0 324 | - color: var(--contrast8) 325 | state: 326 | - value: 'on' 327 | icon: mdi:lightbulb-on 328 | styles: 329 | card: 330 | - background: var(--yellow) 331 | - box-shadow: none 332 | icon: 333 | - color: var(--black) 334 | name: 335 | - color: var(--black) 336 | - value: 'off' 337 | icon: mdi:lightbulb-off 338 | styles: 339 | icon: 340 | - color: var(--contrast20) 341 | name: 342 | - color: var(--contrast20) 343 | - type: custom:button-card 344 | name: Light 345 | icon: mdi:lightbulb-question 346 | entity: light.light 347 | tap_action: 348 | action: more-info 349 | haptic: light 350 | hold_action: 351 | action: more-info 352 | haptic: light 353 | styles: 354 | grid: 355 | - grid-template-areas: '"i" "n" "slider"' 356 | - grid-template-columns: 1fr 357 | - grid-template-rows: 1fr min-content min-content 358 | card: 359 | - background: var(--contrast00) 360 | - padding: 16px 361 | - '--mdc-ripple-press-opacity': 0 362 | img_cell: 363 | - justify-self: start 364 | - width: 24px 365 | icon: 366 | - width: 24px 367 | - height: 24px 368 | - color: var(--contrast8) 369 | name: 370 | - justify-self: start 371 | - font-size: 14px 372 | - margin: 4px 0 12px 0 373 | - color: var(--contrast8) 374 | state: 375 | - value: 'on' 376 | icon: mdi:lightbulb-on 377 | styles: 378 | card: 379 | - background: var(--yellow) 380 | - box-shadow: none 381 | icon: 382 | - color: var(--black) 383 | name: 384 | - color: var(--black) 385 | - value: 'off' 386 | icon: mdi:lightbulb-off 387 | styles: 388 | icon: 389 | - color: var(--contrast20) 390 | name: 391 | - color: var(--contrast20) 392 | - type: custom:button-card 393 | name: Light 394 | icon: mdi:floor-lamp-outline 395 | entity: switch.light 396 | tap_action: 397 | action: more-info 398 | haptic: light 399 | hold_action: 400 | action: more-info 401 | haptic: light 402 | styles: 403 | grid: 404 | - grid-template-areas: '"i" "n" "slider"' 405 | - grid-template-columns: 1fr 406 | - grid-template-rows: 1fr min-content min-content 407 | card: 408 | - background: var(--contrast00) 409 | - padding: 16px 410 | - '--mdc-ripple-press-opacity': 0 411 | - height: 100% 412 | img_cell: 413 | - justify-self: start 414 | - width: 24px 415 | icon: 416 | - width: 24px 417 | - height: 24px 418 | - color: var(--contrast8) 419 | name: 420 | - justify-self: start 421 | - font-size: 14px 422 | - margin: 4px 0 12px 0 423 | - color: var(--contrast8) 424 | state: 425 | - value: 'on' 426 | icon: mdi:floor-lamp 427 | styles: 428 | card: 429 | - background: var(--yellow) 430 | - box-shadow: none 431 | icon: 432 | - color: var(--black) 433 | name: 434 | - color: var(--black) 435 | - value: 'off' 436 | icon: mdi:floor-lamp-outline 437 | styles: 438 | icon: 439 | - color: var(--contrast20) 440 | name: 441 | - color: var(--contrast20) 442 | columns: 3 443 | - type: custom:gap-card 444 | height: 2 445 | - type: custom:gap-card 446 | height: 2 -------------------------------------------------------------------------------- /cards/room.yaml: -------------------------------------------------------------------------------- 1 | type: grid 2 | square: false 3 | columns: 2 4 | cards: 5 | - type: custom:button-card 6 | entity: climate.climate 7 | icon: mdi:sofa 8 | name: Living room 9 | tap_action: 10 | action: navigate 11 | navigation_path: /lovelace/living_room 12 | haptic: light 13 | state: 14 | - value: 'on' 15 | styles: 16 | card: 17 | - background: rgba(var(--blue-rgb), 1) 18 | icon: 19 | - color: var(--black) 20 | name: 21 | - color: var(--black) 22 | icon: mdi:fan 23 | - value: dry 24 | styles: 25 | card: 26 | - background: rgba(var(--blue-rgb), 1) 27 | icon: 28 | - color: var(--black) 29 | name: 30 | - color: var(--black) 31 | icon: mdi:fan 32 | - value: cool 33 | styles: 34 | card: 35 | - background: rgba(var(--blue-rgb), 1) 36 | icon: 37 | - color: var(--black) 38 | name: 39 | - color: var(--black) 40 | icon: mdi:snowflake 41 | - value: heat 42 | styles: 43 | card: 44 | - background: rgba(var(--orange-rgb), 1) 45 | icon: 46 | - color: var(--black) 47 | name: 48 | - color: var(--black) 49 | icon: mdi:fire 50 | styles: 51 | grid: 52 | - grid-template-areas: '"i temp" "n hum"' 53 | - grid-template-columns: 1fr 1fr 54 | - grid-template-rows: 1fr min-content min-content 55 | card: 56 | - background: var(--contrast00) 57 | - padding: 10px 58 | - '--mdc-ripple-press-opacity': 0 59 | - box-shadow: none 60 | - height: 96px 61 | img_cell: 62 | - justify-self: start 63 | - width: 24px 64 | - margin: 10px 65 | icon: 66 | - width: 24px 67 | - height: 24px 68 | - color: var(--contrast18) 69 | name: 70 | - justify-self: start 71 | - font-size: 14px 72 | - margin: 10px 73 | - color: var(--contrast18) 74 | - font-family: Product Sans 75 | custom_fields: 76 | temp: 77 | - align-self: start 78 | - justify-self: end 79 | - font-size: 12px 80 | - font-weight: 500 81 | - margin: 2px 0px 10px 0px 82 | - color: grey 83 | - font-family: Product Sans 84 | - background-color: var(--contrast0) 85 | - border-radius: 100px 86 | - padding: 6px 87 | hum: 88 | - align-self: start 89 | - justify-self: end 90 | - font-size: 12px 91 | - font-weight: 500 92 | - margin: 2px 0px 10px 0px 93 | - color: grey 94 | - font-family: Product Sans 95 | - background-color: var(--contrast0) 96 | - border-radius: 100px 97 | - padding: 6px 98 | custom_fields: 99 | temp: | 100 | [[[ 101 | return ` 104 | ${parseFloat(states['sensor.temp'].state).toFixed(0)}°C` 105 | ]]] 106 | hum: | 107 | [[[ 108 | return ` 111 | ${parseFloat(states['sensor.hum'].state).toFixed(0)}%` 112 | ]]] 113 | card_mod: 114 | style: | 115 | ha-card:active { 116 | box-shadow: none; 117 | transform: scale(0.96); 118 | transition: 200ms !important; 119 | border-radius: 20px; 120 | transform-origin: center; 121 | } -------------------------------------------------------------------------------- /cards/shenron.yaml: -------------------------------------------------------------------------------- 1 | - type: custom:stack-in-card 2 | mode: vertical 3 | keep: 4 | margin: true 5 | border_radius: true 6 | background: true 7 | outer_padding: false 8 | card_mod: 9 | style: | 10 | ha-card { 11 | background-color: var(--contrast00); 12 | border-radius: 30px; 13 | font-family: Product Sans ; 14 | } 15 | cards: 16 | - type: custom:gap-card 17 | height: 5 18 | - type: horizontal-stack 19 | cards: 20 | - type: custom:button-card 21 | name: TITLE 22 | styles: 23 | card: 24 | - background: none 25 | - box-shadow: none 26 | - padding: 0px 0px 0px 0px 27 | - '--mdc-ripple-press-opacity': 0 28 | name: 29 | - font-size: 28px 30 | - color: var(--contrast15) 31 | - font-family: Product Sans Medium 32 | - type: custom:mushroom-chips-card 33 | chips: 34 | - type: template 35 | icon: mdi:food 36 | icon_color: '' 37 | content: '{{ states["calendar.calendar"].attributes.message}}' 38 | tap_action: 39 | action: more-info 40 | hold_action: 41 | action: none 42 | double_tap_action: 43 | action: none 44 | entity: calendar.calendar 45 | alignment: center 46 | card_mod: 47 | style: | 48 | ha-card { 49 | font-family: Poppins; 50 | --chip-background: var(--contrast18); 51 | --primary-text-color: var(--contrast1); 52 | } 53 | - type: custom:stack-in-card 54 | mode: vertical 55 | keep: 56 | margin: true 57 | border_radius: true 58 | background: true 59 | outer_padding: false 60 | card_mod: 61 | style: | 62 | ha-card { 63 | background-color: var(--contrast0); 64 | border-radius: 30px; 65 | } 66 | cards: 67 | - type: custom:gap-card 68 | height: 2 69 | - type: custom:swipe-card 70 | card_mod: 71 | style: | 72 | ha-card { 73 | border-radius: 25px !important; 74 | } 75 | card_width: calc(100% - 48px) 76 | parameters: 77 | centeredSlides: false 78 | slidesPerView: 1.6 79 | spaceBetween: 16 80 | initialSlide: 0 81 | cards: 82 | - type: sensor 83 | entity: sensor.temp 84 | hours_to_show: 24 85 | detail: 2 86 | graph: line 87 | name: Temp 88 | icon: none 89 | theme: sensor_color_red 90 | card_mod: 91 | class: graph 92 | style: | 93 | ha-card { 94 | box-shadow: none; 95 | } 96 | .graph { 97 | background: var(--red-tint); 98 | } 99 | .graph .name { 100 | background: var(--red); 101 | color: var(--black); 102 | } 103 | - type: sensor 104 | entity: sensor.hum 105 | hours_to_show: 24 106 | detail: 2 107 | graph: line 108 | name: Hum 109 | icon: none 110 | card_mod: 111 | class: graph 112 | style: | 113 | ha-card { 114 | box-shadow: none; 115 | } 116 | .graph .name { 117 | background: var(--blue); 118 | color: var(--black); 119 | } 120 | - type: sensor 121 | entity: sensor.dimmer_power 122 | hours_to_show: 24 123 | detail: 2 124 | graph: line 125 | name: Watt 126 | icon: none 127 | theme: sensor_color_yellow 128 | card_mod: 129 | class: graph 130 | style: | 131 | ha-card { 132 | box-shadow: none; 133 | } 134 | .graph { 135 | background: var(--yellow-tint); 136 | } 137 | .graph .name { 138 | background: var(--yellow); 139 | color: var(--black); 140 | } 141 | - square: false 142 | type: grid 143 | cards: 144 | - type: custom:button-card 145 | card_mod: 146 | style: | 147 | ha-card { 148 | transition: 300ms !important; 149 | } 150 | icon: mdi:lightbulb-multiple 151 | name: Lights 152 | entity: switch.lights 153 | tap_action: 154 | action: more-info 155 | haptic: light 156 | styles: 157 | grid: 158 | - grid-template-areas: '"i" "n" "slider"' 159 | - grid-template-columns: 1fr 160 | - grid-template-rows: 1fr min-content min-content 161 | card: 162 | - background: var(--contrast00) 163 | - padding: 16px 164 | - '--mdc-ripple-press-opacity': 0 165 | img_cell: 166 | - justify-self: start 167 | - width: 24px 168 | icon: 169 | - width: 24px 170 | - height: 24px 171 | - color: var(--contrast8) 172 | name: 173 | - justify-self: start 174 | - font-size: 16px 175 | - margin: 4px 0 12px 0 176 | - color: var(--contrast8) 177 | state: 178 | - value: 'on' 179 | icon: mdi:lightbulb-multiple 180 | name: Turned on 181 | styles: 182 | card: 183 | - background: var(--yellow) 184 | - box-shadow: none 185 | icon: 186 | - color: var(--black) 187 | name: 188 | - color: var(--black) 189 | - font-family: Poppins 190 | label: 191 | - color: var(--black) 192 | - value: 'off' 193 | name: Turned off 194 | icon: mdi:lightbulb-multiple-off-outline 195 | styles: 196 | icon: 197 | - color: var(--contrast20) 198 | name: 199 | - color: var(--contrast20) 200 | label: 201 | - color: var(--contrast20) 202 | - type: custom:button-card 203 | card_mod: 204 | style: | 205 | ha-card { 206 | transition: 300ms !important; 207 | } 208 | icon: mdi:fan-alert 209 | name: Fan 210 | entity: switch.fan 211 | tap_action: 212 | action: toggle 213 | haptic: heavy 214 | hold_action: 215 | action: more-info 216 | haptic: light 217 | styles: 218 | grid: 219 | - grid-template-areas: '"i" "n" "slider"' 220 | - grid-template-columns: 1fr 221 | - grid-template-rows: 1fr min-content min-content 222 | card: 223 | - background: var(--contrast00) 224 | - padding: 16px 225 | - '--mdc-ripple-press-opacity': 0 226 | - height: 100% 227 | img_cell: 228 | - justify-self: start 229 | - width: 24px 230 | icon: 231 | - width: 24px 232 | - height: 24px 233 | - color: var(--contrast8) 234 | name: 235 | - justify-self: start 236 | - font-size: 16px 237 | - margin: 4px 0 12px 0 238 | - color: var(--contrast8) 239 | state: 240 | - value: 'on' 241 | name: Airing.. 242 | icon: mdi:fan 243 | styles: 244 | card: 245 | - background: var(--blue) 246 | - box-shadow: none 247 | icon: 248 | - color: var(--black) 249 | name: 250 | - color: var(--black) 251 | - font-family: Poppins 252 | label: 253 | - color: var(--black) 254 | - value: 'off' 255 | icon: mdi:fan-off 256 | styles: 257 | icon: 258 | - color: var(--contrast20) 259 | name: 260 | - color: var(--contrast20) 261 | label: 262 | - color: var(--contrast20) 263 | - square: false 264 | type: grid 265 | cards: 266 | - type: custom:button-card 267 | card_mod: 268 | style: | 269 | ha-card { 270 | transition: 300ms !important; 271 | } 272 | entity: input_datetime.lights_on 273 | icon: mdi:weather-sunny 274 | name: >- 275 | [[[ return 276 | states["input_datetime.lights_on"].state ]]] 277 | tap_action: 278 | haptic: light 279 | action: more-info 280 | styles: 281 | icon: 282 | - width: 24px 283 | - color: var(--black) 284 | img_cell: 285 | - justify-content: flex-start 286 | - margin-top: 0px 287 | name: 288 | - justify-self: start 289 | - font-size: 16px 290 | - margin-top: 0px 291 | - color: var(--black) 292 | card: 293 | - height: 84px 294 | - border-radius: 24px 295 | - padding: 8px 0px 16px 20px 296 | - background-color: var(--green) 297 | - box-shadow: none 298 | grid: 299 | - grid-template-areas: '"i" "n"' 300 | - type: custom:button-card 301 | card_mod: 302 | style: | 303 | ha-card { 304 | transition: 300ms !important; 305 | } 306 | entity: input_datetime.lights_off 307 | icon: mdi:weather-night 308 | name: >- 309 | [[[ return 310 | states["input_datetime.lights_off"].state 311 | ]]] 312 | tap_action: 313 | haptic: light 314 | action: more-info 315 | styles: 316 | icon: 317 | - width: 24px 318 | - color: var(--black) 319 | img_cell: 320 | - justify-content: flex-start 321 | - margin-top: 0px 322 | name: 323 | - justify-self: start 324 | - font-size: 16px 325 | - margin-top: 0px 326 | - color: var(--black) 327 | card: 328 | - height: 84px 329 | - border-radius: 24px 330 | - padding: 8px 0px 16px 20px 331 | - background-color: var(--purple) 332 | - box-shadow: none 333 | grid: 334 | - grid-template-areas: '"i" "n"' 335 | columns: 1 336 | - type: custom:button-card 337 | card_mod: 338 | style: | 339 | ha-card { 340 | transition: 300ms !important; 341 | } 342 | icon: mdi:lightbulb-on-60 343 | entity: light.dimmer 344 | name: Basking spot 345 | tap_action: 346 | action: more-info 347 | haptic: light 348 | styles: 349 | icon: 350 | - width: 24px 351 | - color: var(--contrast8) 352 | img_cell: 353 | - justify-content: flex-start 354 | - margin-top: 0px 355 | name: 356 | - justify-self: start 357 | - font-size: 16px 358 | - margin-top: 0px 359 | - color: var(--contrast8) 360 | card: 361 | - height: 184px 362 | - border-radius: 24px 363 | - padding: 98px 0px 16px 20px 364 | - background-color: var(--contrast00) 365 | grid: 366 | - grid-template-areas: '"i" "n"' 367 | state: 368 | - value: 'on' 369 | name: >- 370 | [[[return 371 | Math.round(states["light.dimmer"].attributes.brightness 372 | * 100 / 255) + " %"]]] 373 | icon: mdi:lightbulb-on 374 | styles: 375 | card: 376 | - background-color: var(--orange) 377 | - box-shadow: none 378 | name: 379 | - font-size: 34px 380 | - color: var(--black) 381 | - font-family: Poppins 382 | icon: 383 | - color: var(--black) 384 | - value: 'off' 385 | name: Basking spot 386 | icon: mdi:lightbulb-off-outline 387 | styles: 388 | name: 389 | - color: var(--contrast20) 390 | icon: 391 | - color: var(--contrast20) 392 | label: 393 | - color: var(--contrast20) 394 | - value: unavailable 395 | name: Basking spot 396 | icon: mdi:lightbulb-off-outline 397 | -------------------------------------------------------------------------------- /cards/subtitle_badge.yaml: -------------------------------------------------------------------------------- 1 | type: horizontal-stack 2 | cards: 3 | - type: custom:button-card 4 | name: Subtitle 5 | styles: 6 | card: 7 | - background: none 8 | - box-shadow: none 9 | - padding: 0px 0px 0px 0px 10 | - '--mdc-ripple-press-opacity': 0 11 | name: 12 | - font-size: 28px 13 | - color: var(--contrast15) 14 | - font-family: Product Sans Medium 15 | - type: custom:mushroom-chips-card 16 | chips: 17 | - type: template 18 | icon: mdi:food 19 | icon_color: '' 20 | content: '{{ states["calendar.calendar"].attributes.message}}' 21 | tap_action: 22 | action: more-info 23 | hold_action: 24 | action: none 25 | double_tap_action: 26 | action: none 27 | entity: calendar.calendar 28 | alignment: center 29 | card_mod: 30 | style: | 31 | ha-card { 32 | font-family: Poppins; 33 | --chip-background: var(--contrast18); 34 | --primary-text-color: var(--contrast1); 35 | } -------------------------------------------------------------------------------- /cards/text_button.yaml: -------------------------------------------------------------------------------- 1 | - type: custom:button-card 2 | name: Text 3 | label: '?' 4 | show_label: true 5 | entity: input_boolean.x 6 | show_icon: false 7 | styles: 8 | card: 9 | - color: var(--contrast18) 10 | - border-radius: 24px 11 | - background: none 12 | - margin-top: 0px 13 | - padding: 8px 0px 14 | - border: 2px solid var(--contrast20) 15 | - box-shadow: none 16 | label: 17 | - font-family: Poppins 18 | - font-size: 20px 19 | name: 20 | - font-family: Product Sans 21 | - font-size: 16px 22 | tap_action: 23 | haptic: light 24 | action: more-info 25 | state: 26 | - value: 'on' 27 | label: Something for the on state 28 | styles: 29 | label: 30 | - color: var(--red) 31 | - value: 'off' 32 | label: Something for the off state 33 | styles: 34 | label: 35 | - color: var(--blue) -------------------------------------------------------------------------------- /cards/tiles.yaml: -------------------------------------------------------------------------------- 1 | - type: grid 2 | square: false 3 | cards: 4 | - type: custom:button-card 5 | card_mod: 6 | style: | 7 | ha-card { 8 | transition: 300ms !important; 9 | } 10 | entity: input_datetime.lights_on 11 | icon: mdi:weather-sunny 12 | name: >- 13 | [[[ return 14 | states["input_datetime.lights_on"].state ]]] 15 | tap_action: 16 | haptic: light 17 | action: more-info 18 | styles: 19 | icon: 20 | - width: 24px 21 | - color: var(--black) 22 | img_cell: 23 | - justify-content: flex-start 24 | - margin-top: 0px 25 | name: 26 | - justify-self: start 27 | - font-size: 16px 28 | - margin-top: 0px 29 | - color: var(--black) 30 | card: 31 | - height: 84px 32 | - border-radius: 24px 33 | - padding: 8px 0px 16px 20px 34 | - background-color: var(--green) 35 | - box-shadow: none 36 | grid: 37 | - grid-template-areas: '"i" "n"' 38 | - type: custom:button-card 39 | card_mod: 40 | style: | 41 | ha-card { 42 | transition: 300ms !important; 43 | } 44 | entity: input_datetime.lights_off 45 | icon: mdi:weather-night 46 | name: >- 47 | [[[ return 48 | states["input_datetime.lights_off"].state 49 | ]]] 50 | tap_action: 51 | haptic: light 52 | action: more-info 53 | styles: 54 | icon: 55 | - width: 24px 56 | - color: var(--black) 57 | img_cell: 58 | - justify-content: flex-start 59 | - margin-top: 0px 60 | name: 61 | - justify-self: start 62 | - font-size: 16px 63 | - margin-top: 0px 64 | - color: var(--black) 65 | card: 66 | - height: 84px 67 | - border-radius: 24px 68 | - padding: 8px 0px 16px 20px 69 | - background-color: var(--purple) 70 | - box-shadow: none 71 | grid: 72 | - grid-template-areas: '"i" "n"' 73 | columns: 1 74 | - type: custom:button-card 75 | card_mod: 76 | style: | 77 | ha-card { 78 | transition: 300ms !important; 79 | } 80 | icon: mdi:lightbulb-on-60 81 | entity: light.dimmer 82 | name: Basking spot 83 | tap_action: 84 | action: more-info 85 | haptic: light 86 | styles: 87 | icon: 88 | - width: 24px 89 | - color: var(--contrast8) 90 | img_cell: 91 | - justify-content: flex-start 92 | - margin-top: 0px 93 | name: 94 | - justify-self: start 95 | - font-size: 16px 96 | - margin-top: 0px 97 | - color: var(--contrast8) 98 | card: 99 | - height: 184px 100 | - border-radius: 24px 101 | - padding: 98px 0px 16px 20px 102 | - background-color: var(--contrast00) 103 | grid: 104 | - grid-template-areas: '"i" "n"' 105 | state: 106 | - value: 'on' 107 | name: >- 108 | [[[return 109 | Math.round(states["light.dimmer"].attributes.brightness 110 | * 100 / 255) + " %"]]] 111 | icon: mdi:lightbulb-on 112 | styles: 113 | card: 114 | - background-color: var(--orange) 115 | - box-shadow: none 116 | name: 117 | - font-size: 34px 118 | - color: var(--black) 119 | - font-family: Poppins 120 | icon: 121 | - color: var(--black) 122 | - value: 'off' 123 | name: Basking spot 124 | icon: mdi:lightbulb-off-outline 125 | styles: 126 | name: 127 | - color: var(--contrast20) 128 | icon: 129 | - color: var(--contrast20) 130 | label: 131 | - color: var(--contrast20) 132 | - value: unavailable 133 | name: Basking spot 134 | icon: mdi:lightbulb-off-outline 135 | -------------------------------------------------------------------------------- /cards/title_badge/horizontal_badge.yaml: -------------------------------------------------------------------------------- 1 | - type: horizontal-stack 2 | cards: 3 | - type: custom:button-card 4 | name: TITLE 5 | styles: 6 | card: 7 | - background: none 8 | - box-shadow: none 9 | - padding: 0px 0px 0px 0px 10 | - '--mdc-ripple-press-opacity': 0 11 | name: 12 | - font-size: 28px 13 | - color: var(--contrast15) 14 | - font-family: Product Sans Medium 15 | - type: custom:mushroom-chips-card 16 | chips: 17 | - type: template 18 | icon: mdi:food 19 | icon_color: '' 20 | content: '{{ states["calendar.calendar"].attributes.message}}' 21 | tap_action: 22 | action: more-info 23 | hold_action: 24 | action: none 25 | double_tap_action: 26 | action: none 27 | entity: calendar.calendar 28 | alignment: center 29 | card_mod: 30 | style: | 31 | ha-card { 32 | font-family: Poppins; 33 | --chip-background: var(--contrast18); 34 | --primary-text-color: var(--contrast1); 35 | } 36 | -------------------------------------------------------------------------------- /cards/title_badge/title_buttoncard.yaml: -------------------------------------------------------------------------------- 1 | ### Here I use a button card for the badge 2 | type: vertical-stack 3 | cards: 4 | - type: custom:button-card 5 | name: TITLE 6 | styles: 7 | card: 8 | - background: none 9 | - box-shadow: none 10 | - padding: 70px 0px 70px 0px 11 | - '--mdc-ripple-press-opacity': 0 12 | name: 13 | - font-size: 32px 14 | - color: var(--white0) 15 | - font-family: Poppins 16 | - square: false 17 | type: grid 18 | cards: 19 | - type: custom:button-card 20 | name: Name 21 | label: '[[[return states["sensor.sensor"].state + " unit"]]]' 22 | show_label: true 23 | show_icon: false 24 | entity: sensor.sensor 25 | styles: 26 | grid: 27 | - grid-template-areas: '"n gutter l"' 28 | - grid-template-columns: min-content 5px min-content 29 | - grid-template-rows: min-content 30 | card: 31 | - padding: 6px 10px 32 | - font-size: 12px 33 | - line-height: 18px 34 | - font-weight: 500 35 | - background: var(--contrast0) 36 | name: 37 | - color: var(--contrast10) 38 | - font-family: Product Sans 39 | label: 40 | - color: var(--contrast18) 41 | - font-family: Poppins 42 | columns: 2 43 | -------------------------------------------------------------------------------- /cards/title_badge/title_mush_chip.yaml: -------------------------------------------------------------------------------- 1 | ### Here I use mushroom chips card for the badge 2 | type: vertical-stack 3 | cards: 4 | - type: custom:button-card 5 | name: TITLE 6 | styles: 7 | card: 8 | - background: none 9 | - box-shadow: none 10 | - padding: 70px 0px 70px 0px 11 | - '--mdc-ripple-press-opacity': 0 12 | name: 13 | - font-size: 32px 14 | - color: var(--white0) 15 | - font-family: Poppins 16 | - type: custom:mushroom-chips-card 17 | chips: 18 | - type: entity 19 | entity: sensor.sensor 20 | double_tap_action: 21 | action: none 22 | icon: mdi:solar-power-variant 23 | content_info: state 24 | tap_action: 25 | action: more-info 26 | hold_action: 27 | action: none 28 | - type: entity 29 | entity: sensor.sensor 30 | double_tap_action: 31 | action: none 32 | icon: mdi:solar-power-variant 33 | content_info: state 34 | tap_action: 35 | action: more-info 36 | hold_action: 37 | action: none 38 | card_mod: 39 | style: | 40 | ha-card { 41 | --chip-background: var(--contrast0); 42 | --primary-text-color: var(--contrast18); 43 | font-family: Product Sans; 44 | } 45 | alignment: start 46 | -------------------------------------------------------------------------------- /cards/toggle_animates.yaml: -------------------------------------------------------------------------------- 1 | ### can be used with any card (switch, sensor, etc.) with status changes 2 | type: custom:button-card 3 | card_mod: 4 | style: | 5 | ha-card { 6 | transition: 300ms !important; 7 | } 8 | name: Switch 9 | icon: mdi:gate 10 | entity: switch.entity 11 | tap_action: 12 | action: toggle 13 | haptic: heavy 14 | hold_action: 15 | action: more-info 16 | haptic: light 17 | styles: 18 | grid: 19 | - grid-template-areas: '"i" "n" "slider"' 20 | - grid-template-columns: 1fr 21 | - grid-template-rows: 1fr min-content min-content 22 | card: 23 | - height: 180px 24 | - background: var(--contrast00) 25 | - padding: 16px 26 | - '--mdc-ripple-press-opacity': 0 27 | - padding: 100px 0px 16px 20px 28 | - font-family: Poppins 29 | img_cell: 30 | - justify-self: start 31 | - width: 24px 32 | icon: 33 | - width: 24px 34 | - height: 24px 35 | - color: var(--contrast8) 36 | name: 37 | - justify-self: start 38 | - font-size: 14px 39 | - margin: 4px 0 12px 0 40 | - color: var(--contrast8) 41 | - font-family: Product Sans 42 | state: 43 | - value: 'on' 44 | name: ON 45 | styles: 46 | card: 47 | - background: var(--yellow) 48 | - border-radius: 10px 49 | icon: 50 | - color: var(--black) 51 | name: 52 | - color: var(--black) 53 | - font-family: Poppins 54 | - value: 'off' 55 | styles: 56 | icon: 57 | - color: var(--black) 58 | card: 59 | - background: var(--blue) 60 | name: 61 | - color: var(--black) 62 | - font-family: Poppins -------------------------------------------------------------------------------- /counter_sensor_example.yaml: -------------------------------------------------------------------------------- 1 | # configuration.yaml 2 | 3 | sensor: 4 | # LIGHTS / ALERTS / SWITCH / etc.. 5 | - platform: template 6 | sensors: 7 | lights_on: 8 | friendly_name: Lights on 9 | unit_of_measurement: '' 10 | value_template: > 11 | {% set lights = [ 12 | states.light.living_room, 13 | states.switch.bed_light, 14 | states.light.outdoor, 15 | states.light.sofa_lamp, 16 | ] %} 17 | {{ lights | selectattr('state','eq','on') | list | count }} 18 | 19 | # CLIMATE 20 | - platform: template 21 | sensors: 22 | climate_on: 23 | friendly_name: Climate on 24 | unit_of_measurement: '' 25 | value_template: > 26 | {% set climate = [ 27 | states.climate.thermostat_1, 28 | states.climate.thermostat_2, 29 | states.climate.mitsubishi_1, 30 | states.climate.mitsubishi_2, 31 | ] %} 32 | {{ climate | selectattr('state','eq','heat') | list | count + climate | selectattr('state','eq','cool') | list | count + climate | selectattr('state','eq','dry') | list | count + climate | selectattr('state','eq','fan_only') | list | count }} 33 | -------------------------------------------------------------------------------- /img/bottom_bar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/bottom_bar.jpg -------------------------------------------------------------------------------- /img/counter_sensors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/counter_sensors.jpg -------------------------------------------------------------------------------- /img/counters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/counters.png -------------------------------------------------------------------------------- /img/dashboard_all.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/dashboard_all.jpg -------------------------------------------------------------------------------- /img/gate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/gate.gif -------------------------------------------------------------------------------- /img/gatev2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/gatev2.jpg -------------------------------------------------------------------------------- /img/graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/graph.png -------------------------------------------------------------------------------- /img/header2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/header2.jpg -------------------------------------------------------------------------------- /img/panel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/panel.jpg -------------------------------------------------------------------------------- /img/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/person.png -------------------------------------------------------------------------------- /img/pill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/pill.png -------------------------------------------------------------------------------- /img/room_cards.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/room_cards.jpg -------------------------------------------------------------------------------- /img/shutter_slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/shutter_slider.png -------------------------------------------------------------------------------- /img/theme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/theme.jpg -------------------------------------------------------------------------------- /img/title&graph.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arroma98/Pixel-like-dashboard/e33d6fe8468e8c5fc5b34f4161bbf80c6125d6ac/img/title&graph.jpg -------------------------------------------------------------------------------- /themes/pixel-theme.yaml: -------------------------------------------------------------------------------- 1 | --- 2 | Pixel-like: 3 | # ha-card-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.16) 4 | # font-family: Poppins 5 | # font-family: Quicksand 6 | ha-card-border-radius: 25px 7 | grid-card-gap: 12px 8 | horizontal-stack-card-margin: 0px 8px 9 | vertical-stack-card-margin: 8px 8px 10 | ha-card-border-width: "0px" # Removes default 1px line 11 | #masonry-view-card-margin: 40px 20px 12 | ### NAVBAR ### 13 | error-color: "var(--google-red)" 14 | warning-color: "var(--google-yellow)" 15 | success-color: "var(--google-green)" 16 | info-color: "var(--google-blue)" 17 | header-height: "calc(var(--header-base-height) + env(safe-area-inset-bottom))" 18 | header-base-height: "60px" 19 | ha-dialog-border-radius: "25px" 20 | header-tab-indicator-color: "rgba(0, 0, 0, 0)" 21 | header-active-tab-color: "var(--contrast1)" 22 | header-active-tab-bg-color: "var(--contrast22)" 23 | header-all-tabs-color: "var(--contrast10)" 24 | 25 | # Main Interface Colors 26 | primary-color: var(--blue) 27 | accent-color: var(--blue) 28 | primary-background-color: var(--black1) 29 | secondary-background-color: var(--black0) 30 | divider-color: var(--black00) 31 | # Text 32 | primary-text-color: var(--white8) 33 | secondary-text-color: var(--white10) 34 | text-primary-color: var(--contrast20) 35 | disabled-text-color: var(--contrast6) 36 | text-accent-color: var(--contrast1) 37 | # Header: 38 | app-header-background-color: var(--black1) #STATUSBAR ANDROID 39 | app-header-text-color: var(--contrast12) 40 | app-header-selection-bar-color: transparent 41 | app-header-edit-background-color: var(--contrast0) 42 | app-header-edit-text-color: var(--contrast8) 43 | # Cards 44 | card-background-color: var(--black0) 45 | ha-card-background: var(--contrast00) 46 | ha-card-border-color: var(--contrast0) 47 | paper-listbox-background-color: var(--black00) 48 | # Tile card 49 | state-unavailable-color: var(--contrast6) 50 | state-light-off-color: var(--contrast10) 51 | state-light-on-color: var(--yellow) 52 | # Sidebar Menu 53 | sidebar-icon-color: var(--white8) 54 | sidebar-text-color: var(--white8) 55 | sidebar-background-color: var(--black0) 56 | sidebar-selected-icon-color: var(--blue) 57 | sidebar-selected-text-color: var(--white0) 58 | # Buttons 59 | paper-item-icon-color: var(--white) 60 | mdc-button-outline-color: var(--white) 61 | # States and Badges 62 | state-icon-color: var(--contrast9) 63 | # Sliders 64 | paper-slider-knob-color: var(--contrast20) 65 | paper-slider-knob-start-color: var(--contrast15) 66 | paper-slider-pin-color: var(--contrast5) 67 | paper-slider-pin-start-color: var(--contrast4) 68 | paper-slider-active-color: var(--contrast15) 69 | paper-slider-secondary-color: var(--contrast7) 70 | paper-slider-container-color: var(--contrast5) 71 | # Switches 72 | switch-checked-button-color: var(--green) 73 | switch-checked-track-color: var(--green) 74 | switch-unchecked-button-color: var(--contrast9) 75 | switch-unchecked-track-color: var(--contrast6) 76 | # Toggles 77 | paper-toggle-button-checked-button-color: var(--switch-checked-button-color) 78 | paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) 79 | paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) 80 | paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) 81 | # Table 82 | table-row-background-color: var(--contrast2) 83 | table-row-alternative-background-color: var(--contrast3) 84 | data-table-background-color: var(--contrast1) 85 | mdc-text-field-fill-color: var(--contrast3) 86 | # Input 87 | input-fill-color: var(--contrast3) 88 | input-dropdown-icon-color: var(--contrast9) 89 | material-background-color: var(--contrast2) 90 | input-ink-color: var(--contrast20) 91 | input-label-ink-color: var(--contrast9) 92 | input-idle-line-color: var(--contrast7) 93 | input-hover-line-color: var(--contrast20) 94 | mdc-select-fill-color: var(--input-fill-color) 95 | mdc-select-ink-color: var(--input-ink-color) 96 | mdc-select-label-ink-color: var(--input-label-ink-color) 97 | mdc-select-idle-line-color: var(--input-idle-line-color) 98 | mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color) 99 | mdc-select-hover-line-color: var(--input-hover-line-color) 100 | mdc-text-field-disabled-fill-color: var(--contrast3) 101 | # Modal screen 102 | mdc-theme-surface: var(--contrast2) 103 | # Checkboxes 104 | mdc-checkbox-unchecked-color: var(--contrast15) 105 | # Colors 106 | orange-color: var(--orange) 107 | green-color: var(--green) 108 | blue-color: var(--blue) 109 | red-color: var(--red) 110 | purple-color: var(--purple) 111 | yellow-color: var(--yellow) 112 | grey-color: var(--contrast10) 113 | pink-color: var(--pink) 114 | brown-color: var(--brown) 115 | 116 | ####################################################### 117 | ############### Custom global variables ############### 118 | ####################################################### 119 | 120 | # Black / White 121 | black: "#000000" 122 | white: "#FFFFFF" 123 | # Colors 124 | purple: rgb(var(--purple-rgb)) 125 | yellow: rgb(var(--yellow-rgb)) 126 | orange: rgb(var(--orange-rgb)) 127 | red: rgb(var(--red-rgb)) 128 | green: rgb(var(--green-rgb)) 129 | blue: rgb(var(--blue-rgb)) 130 | pink: rgb(var(--pink-rgb)) 131 | brown: rgb(var(--brown-rgb)) 132 | watergreen: rgb(var(--watergreen-rgb)) 133 | # Color tints 134 | purple-tint: rgba(var(--purple-rgb),var(--color-tint)) 135 | yellow-tint: rgba(var(--yellow-rgb),var(--color-tint)) 136 | orange-tint: rgba(var(--orange-rgb),var(--color-tint)) 137 | red-tint: rgba(var(--red-rgb),var(--color-tint)) 138 | green-tint: rgba(var(--green-rgb),var(--color-tint)) 139 | blue-tint: rgba(var(--blue-rgb),var(--color-tint)) 140 | pink-tint: rgba(var(--pink-rgb),var(--color-tint)) 141 | brown-tint: rgba(var(--brown-rgb),var(--color-tint)) 142 | watergreen-tint: rgba(var(--watergreen-rgb),var(--color-tint)) 143 | # Gradients 144 | brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%) 145 | brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%) 146 | temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%) 147 | temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%) 148 | # Color RGB variables 149 | purple-rgb: 239, 177, 255 150 | yellow-rgb: 255, 218, 120 151 | orange-rgb: 255, 181, 129 152 | red-rgb: 255, 145, 138 153 | green-rgb: 206, 245, 149 154 | watergreen-rgb: 149, 245, 165 155 | blue-rgb: 144, 191, 255 156 | pink-rgb: 214, 131, 170 157 | brown-rgb: 125, 110, 104 158 | # Gradient RGB variables 159 | brightness-low-rgb: 232, 176, 29 160 | brightness-high-rgb: 255, 211, 94 161 | temperature-low-rgb: 177, 197, 255 162 | temperature-high-rgb: 255, 175, 131 163 | # Contrast variables 164 | black00: "#303034" 165 | black0: "#1b1b1f" 166 | black1: "#000000" 167 | black2: "#111318" 168 | black3: "#171A21" 169 | black4: "#1C1F27" 170 | black5: "#262A35" 171 | black6: "#353946" 172 | black7: "#434856" 173 | black8: "#535865" 174 | black9: "#636774" 175 | black10: "#777A83" 176 | white10: "#898C94" 177 | white9: "#969AA6" 178 | white8: "#A4A9B6" 179 | white7: "#B3B8C6" 180 | white6: "#C3C8D5" 181 | white5: "#D4D8E2" 182 | white4: "#E1E5EF" 183 | white3: "#EAEDF6" 184 | white2: "#F4F6FB" 185 | white1: "#FFFFFF" 186 | white0: "#f2f0f4" 187 | white00: "#fbf8fd" 188 | 189 | ######################################################## 190 | ############### Variables based on modes ############### 191 | ######################################################## 192 | 193 | modes: 194 | dark: 195 | # Black white contrats 196 | contrast0: var(--black0) 197 | contrast00: var(--black00) 198 | contrast1: var(--black1) 199 | contrast2: var(--black2) 200 | contrast3: var(--black3) 201 | contrast4: var(--black4) 202 | contrast5: var(--black5) 203 | contrast6: var(--black6) 204 | contrast7: var(--black7) 205 | contrast8: var(--black8) 206 | contrast9: var(--black9) 207 | contrast10: var(--black10) 208 | contrast11: var(--white10) 209 | contrast12: var(--white9) 210 | contrast13: var(--white8) 211 | contrast14: var(--white7) 212 | contrast15: var(--white6) 213 | contrast16: var(--white5) 214 | contrast17: var(--white4) 215 | contrast18: var(--white3) 216 | contrast19: var(--white2) 217 | contrast20: var(--white1) 218 | # Color tint transparancy 219 | color-tint: "0.15" 220 | # Contrast RGB variables 221 | contrast1-RGB: 0,0,0 222 | 223 | 224 | light: 225 | # Black white contrats 226 | contrast0: var(--white0) 227 | contrast00: var(--white00) 228 | contrast1: var(--white1) 229 | contrast2: var(--white2) 230 | contrast3: var(--white3) 231 | contrast4: var(--white4) 232 | contrast5: var(--white5) 233 | contrast6: var(--white6) 234 | contrast7: var(--white7) 235 | contrast8: var(--white8) 236 | contrast9: var(--white9) 237 | contrast10: var(--white10) 238 | contrast11: var(--black10) 239 | contrast12: var(--black9) 240 | contrast13: var(--black8) 241 | contrast14: var(--black7) 242 | contrast15: var(--black6) 243 | contrast16: var(--black5) 244 | contrast17: var(--black4) 245 | contrast18: var(--black3) 246 | contrast19: var(--black2) 247 | contrast20: var(--black1) 248 | # Color tint transparancy 249 | color-tint: "0.20" 250 | # Contrast RGB variables 251 | contrast1-RGB: 255,255,255 252 | 253 | 254 | ### TEMPLATE PER GRAFICO ### 255 | card-mod-theme: Pixel-like 256 | 257 | card-mod-view-yaml: | 258 | hui-masonry-view: 259 | $: | 260 | /* Swipecard full width on mobile */ 261 | @media screen and (max-width: 599px) { 262 | #columns .column swipe-card { 263 | margin-left: -4px; 264 | margin-right: -4px; 265 | } 266 | } 267 | 268 | # div#view{ 269 | # transform: initial; 270 | # padding: 0 !important; 271 | # position: fixed !important; 272 | # margin: 0 !important; 273 | # width: 100%; 274 | # } 275 | 276 | # Move navbar 277 | card-mod-root-yaml: | 278 | ha-tabs$: | 279 | #tabsContent { 280 | width: 97%; 281 | } 282 | .: | 283 | .header { 284 | top: auto !important; 285 | bottom: 0; !important 286 | transform: translate3d(0px, 0px, 0px) !important; 287 | backdrop-filter: blur(50px); 288 | -webkit-backdrop-filter: blur(50px); 289 | -moz-backdrop-filter: blur(50px); 290 | -o-backdrop-filter: blur(50px); 291 | -ms-backdrop-filter: blur(50px); 292 | background-color: var(--contrast0) !important; 293 | } 294 | :host([scrolled]) .header { 295 | box-shadow: none !important; 296 | } 297 | .toolbar { 298 | height: var(--header-base-height) !important; 299 | padding-bottom: env(safe-area-inset-bottom) !important; 300 | } 301 | #view { 302 | margin-top: calc(-1 * var(--header-height)) !important; 303 | padding-bottom: var(--header-height); 304 | } 305 | ha-tabs { 306 | --paper-tabs-selection-bar-color: var(--header-tab-indicator-color); 307 | --mdc-icon-size: 26px; 308 | display: flex; 309 | justify-content: space-between; 310 | padding: 0 10px; 311 | height:50px !important; 312 | } 313 | paper-tab[aria-selected=true] { 314 | color: var(--contrast1); 315 | background-color: var(--contrast16); 316 | } 317 | paper-tab { 318 | color: var(--header-all-tabs-color); 319 | border-radius: 25px; 320 | height:50px; 321 | /*width: calc(100% / 4); 322 | padding: 0;*/ 323 | padding-left: 20px; 324 | padding-right: 20px; 325 | } 326 | ha-menu-button, ha-button-menu { 327 | color: var(--contrast16); 328 | } 329 | 330 | card-mod-row: | 331 | /* Entities card row style */ 332 | :host { 333 | display: block; 334 | background: var(--contrast2); 335 | border-radius: 24px; 336 | padding: 6px 12px 6px 6px; 337 | } 338 | 339 | card-mod-card-yaml: | 340 | .: | 341 | /* General changes */ 342 | ha-card { 343 | transition: none !important; 344 | font-family: 'Product Sans' !important; 345 | } 346 | /* Vacuum card load transition disabled */ 347 | .type-custom-xiaomi-vacuum-map-card { 348 | transition: none !important; 349 | } 350 | /* Graph card style */ 351 | .graph { 352 | background: var(--blue-tint); 353 | display: flex; 354 | overflow: hidden; /* Temporary fix for graph overflow bug */ 355 | } 356 | .graph .name { 357 | font-size: 12px; 358 | line-height: 18px; 359 | padding: 6px 10px; 360 | border-radius: 100px; 361 | z-index: 1; 362 | font-family: Poppins !important; 363 | background: var(--contrast20); 364 | color: var(--contrast1); 365 | } 366 | .graph .icon { 367 | display: none; 368 | } 369 | .graph .info { 370 | margin-top: 0; 371 | padding: 24px 24px 0 24px; 372 | order: 1; 373 | color: var(--contrast18); 374 | } 375 | .graph hui-graph-header-footer { 376 | order: 3; 377 | } 378 | .graph .header { 379 | padding: 0 24px; 380 | order: 2; 381 | margin: 4px 0 -16px 0; 382 | z-index: 1; 383 | } 384 | /* Entities card style */ 385 | .type-entities { 386 | background: none; 387 | } 388 | .type-entities .card-header { 389 | padding: 0 0 12px 0; 390 | } 391 | .type-entities .card-content { 392 | padding: 0; 393 | } 394 | -------------------------------------------------------------------------------- /themes/sensor_color_brown.yaml: -------------------------------------------------------------------------------- 1 | sensor_color_brown: 2 | accent-color: "#7d6e68" -------------------------------------------------------------------------------- /themes/sensor_color_green.yaml: -------------------------------------------------------------------------------- 1 | sensor_color_green: 2 | accent-color: "#cef595" -------------------------------------------------------------------------------- /themes/sensor_color_red.yaml: -------------------------------------------------------------------------------- 1 | sensor_color_red: 2 | accent-color: "#c26f69" -------------------------------------------------------------------------------- /themes/sensor_color_yellow.yaml: -------------------------------------------------------------------------------- 1 | sensor_color_yellow: 2 | accent-color: "#ffda78" 3 | --------------------------------------------------------------------------------