API tools faq
paste
Advertisement
the_wolfman56

Mushroom Room Card Example

the_wolfman56
May 7th, 2025 (edited)
64
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.45 KB | Source Code | 0 0
raw download clone embed print report
  1. type: custom:vertical-stack-in-card
  2. cards:
  3. - type: custom:mushroom-template-card
  4. icon: mdi:pool
  5. icon_color: ""
  6. primary: Pool
  7. secondary: "{{ states('sensor.water_sensor_1') }}°F"
  8. layout: horizontal
  9. tap_action:
  10. action: navigate
  11. navigation_path: /lovelace-user2/pool-1
  12. badge_color: |
  13. {% if is_state('light.pool_lights_all', 'on') %}
  14. green
  15. {% endif %}
  16. badge_icon: |-
  17. {% if is_state('light.pool_lights_all', 'on') %}
  18. hue:aura-group
  19. {% endif %}
  20. {% if is_state('light.pool_lights_all', 'off') %}
  21. {% endif %}
  22. entity: switch.pool
  23. hold_action:
  24. action: call-service
  25. service: light.toggle
  26. target:
  27. entity_id: light.pool_lights_all
  28. data: {}
  29. card_mod:
  30. style:
  31. mushroom-state-info$: |
  32. .primary {
  33. font-size: 15px !important;
  34. position: relative;
  35. top: -55px;
  36. left: -155px;
  37. overflow: visible !important;
  38. white-space: normal !important;
  39. }
  40. .secondary {
  41. position: relative;
  42. overflow: visible !important;
  43. top: -55px;
  44. left: -155px;
  45. }
  46. mushroom-shape-icon$: |
  47. .shape {
  48. position: relative;
  49. left: -40px;
  50. top: 35px;
  51. {% set state = states('switch.pool') %}
  52. {% if state == ('on') %}
  53. --shape-color: rgba(149,59,227, .2) !important;
  54. {% else %}
  55. --shape-color: rgba(149,59,227, 0) !important;
  56. {% endif %}
  57. }
  58. .: ":host {\n --mush-icon-size: 140px;\nha-state-icon {\n {% set state = states('switch.pool') %}\n {% if state == ('on') %}\n color: rgba(149,59,227, 1) ;\n {% else %}\n color: var(--grey-color) ;\n {% endif %} \n}\t\t\t \n}\n"
  59. style: |
  60. mushroom-badge-icon {
  61. left: 80px;
  62. top: 4px;
  63. }
  64. - type: custom:mushroom-template-card
  65. primary: ""
  66. secondary: ""
  67. icon: mdi:slide
  68. entity: switch.waterslide
  69. tap_action:
  70. action: toggle
  71. hold_action:
  72. action: more-info
  73. card_mod:
  74. style:
  75. mushroom-shape-icon$: |
  76. .shape {
  77. {% set state = states('switch.waterslide') %}
  78. {% if state == ('on') %}
  79. --shape-color: rgba(149,59,227, .2) !important;
  80. {% else %}
  81. --shape-color: rgba(90,90,90, .3) !important;
  82. {% endif %}
  83. }
  84. .: |
  85. ha-state-icon {
  86. {% set state = states('switch.waterslide') %}
  87. {% if state == ('on') %}
  88. color: rgba(149,59,227, 1) ;
  89. {% else %}
  90. color: var(--grey-color) ;
  91. {% endif %}
  92. }
  93. ha-card {
  94. width: 66px;
  95. margin-left: 68%;
  96. top: -160px;
  97. background: none;
  98. }
  99. :host {
  100. --mush-icon-size: 38px;
  101. }
  102. - type: custom:mushroom-template-card
  103. primary: ""
  104. secondary: ""
  105. icon: mdi:waterfall
  106. entity: switch.waterfall
  107. tap_action:
  108. action: toggle
  109. hold_action:
  110. action: more-info
  111. card_mod:
  112. style:
  113. mushroom-shape-icon$: |
  114. .shape {
  115. {% set state = states('switch.waterfall') %}
  116. {% if state == ('on') %}
  117. --shape-color: rgba(149,59,227, .2) !important;
  118. {% else %}
  119. --shape-color: rgba(90,90,90, .3) !important;
  120. {% endif %}
  121. }
  122. .: |
  123. ha-state-icon {
  124. {% set state = states('switch.waterfall') %}
  125. {% if state == ('on') %}
  126. color: rgba(149,59,227, 1) ;
  127. {% else %}
  128. color: var(--grey-color) ;
  129. {% endif %}
  130. }
  131. ha-card {
  132. width: 66px;
  133. margin-left: 68%;
  134. top: -175px;
  135. background: none;
  136. }
  137. :host {
  138. --mush-icon-size: 38px;
  139. }
  140. - type: custom:mushroom-light-card
  141. icon: hue:aura-group
  142. use_light_color: false
  143. collapsible_controls: true
  144. grid_options:
  145. columns: 4
  146. rows: 2
  147. entity: light.pool_lights_all
  148. layout: vertical
  149. name: ""
  150. primary_info: none
  151. secondary_info: none
  152. card_mod:
  153. style:
  154. mushroom-state-info$: |
  155. .primary {
  156. white-space: normal !important;
  157. }
  158. mushroom-shape-icon$: |
  159. .shape {
  160. {% set state = states('light.pool_lights_all') %}
  161. {% if state == ('on') %}
  162. --shape-color: rgba(149,59,227, .2) !important;
  163. {% else %}
  164. --shape-color: rgba(149,59,227, 0) !important;
  165. {% endif %}
  166. }
  167. .: |
  168. ha-state-icon {
  169. {% set state = states('light.pool_lights_all') %}
  170. {% if state == ('on') %}
  171. color: rgba(149,59,227, 1) ;
  172. {% else %}
  173. color: var(--grey-color) ;
  174. {% endif %}
  175. }
  176. ha-card {
  177. width: 66px;
  178. margin-left: 68%;
  179. top: -190px;
  180. background: none;
  181. }
  182. :host {
  183. --mush-icon-size: 38px;
  184. }
  185. card_mod:
  186. style: |
  187. ha-card {
  188. height: 155px !important;
  189.  
  190. }
  191. grid_options:
  192. columns: 6
  193. rows: auto
Tags: Home assistant
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!