API tools faq
paste
Pivotonian

Thermostat

Pivotonian
Sep 23rd, 2025
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.06 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. entity: climate.house_thermostat
  3. styles:
  4. grid:
  5. - grid-template-areas: '"stack"'
  6. grid-template-columns: 1fr
  7. grid-template-rows: auto
  8. align-content: start
  9. align-self: start
  10. justify-content: start
  11. justify-self: start
  12. card:
  13. - background-color: transparent
  14. height: 375px
  15. width: 302.5px
  16. padding: 0px 15px 15px 15px
  17. margin: 0px 0px 0px 0px
  18. background: transparent
  19. border-radius: 30px
  20. border: solid 2px transparent
  21. - box-shadow: 10 10 10 2px transparent
  22. name:
  23. - font-size: 18px
  24. font-weight: 600
  25. padding: 10px 15px 35px 15px
  26. align-self: start
  27. justify-self: start
  28. show_state: false
  29. show_name: true
  30. show_icon: false
  31. custom_fields:
  32. stack:
  33. card:
  34. type: custom:button-card
  35. show_state: false
  36. show_name: true
  37. show_icon: false
  38. styles:
  39. grid:
  40. - grid-template-areas: '"gauge" "horizontal"'
  41. align-content: start
  42. align-self: start
  43. justify-content: start
  44. justify-self: start
  45. card:
  46. - background-color: transparent
  47. padding: 0px
  48. margin: 0px
  49. height: 375px
  50. overflow-y: auto
  51. border-radius: 0px
  52. custom_fields:
  53. gauge:
  54. - align-content: start
  55. align-self: start
  56. justify-content: start
  57. justify-self: start
  58. width: 270px
  59. margin: '-35px 0px 0px 0px'
  60. horizontal:
  61. - margin: '-100px 0px 0px 0px'
  62. custom_fields:
  63. gauge:
  64. card:
  65. type: thermostat
  66. name: Thermostat
  67. entity: climate.house_thermostat
  68. card_mod:
  69. style: |
  70. ha-card {
  71. font-weight: 550;
  72. background-color: transparent;
  73. font-family: SF Pro Rounded;}
  74. .value {
  75. font-weight: 500}
  76. horizontal:
  77. card:
  78. type: custom:layout-card
  79. layout_type: custom:grid-layout
  80. layout:
  81. grid-template-columns: 1fr 1fr 1fr 1fr
  82. grid-template-areas: ' "off home arthur-asleep night'
  83. cards:
  84. - view_layout:
  85. grid-area: home
  86. type: custom:button-card
  87. entity: input_select.house_thermostat_presets
  88. tap_action:
  89. action: perform-action
  90. perform_action: input_select.select_option
  91. target:
  92. entity_id: input_select.house_thermostat_presets
  93. data:
  94. option: Home
  95. show_name: false
  96. show_icon: true
  97. show_state: false
  98. icon: mdi:home
  99. state:
  100. - value: Home
  101. styles:
  102. card:
  103. - box-shadow: >
  104. inset 1px 1px 3px rgba(255,255,255,0.3), 2px 2px
  105. 6px rgba(0,0,0,0.2)
  106. - background: >-
  107. linear-gradient(45deg, rgba(255,255,255,0.05)
  108. 20%, rgba(255,255,255,0.2) 100%)
  109. - border: solid .05em rgba(255,255,255,0.3)
  110. - color: rgba(255,255,255,1)
  111. styles:
  112. card:
  113. - background: >-
  114. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  115. rgba(0,0,0, 0.2) 100%)
  116. padding: 10px
  117. margin: 0px
  118. height: 50px
  119. border-radius: 15px
  120. icon:
  121. - color: white
  122. width: 25px
  123. - view_layout:
  124. grid-area: arthur-asleep
  125. type: custom:button-card
  126. entity: input_select.house_thermostat_presets
  127. tap_action:
  128. action: perform-action
  129. perform_action: input_select.select_option
  130. target:
  131. entity_id: input_select.house_thermostat_presets
  132. data:
  133. option: Arthur Asleep
  134. show_name: false
  135. show_icon: true
  136. show_state: false
  137. icon: mdi:sleep
  138. state:
  139. - value: Arthur Asleep
  140. styles:
  141. card:
  142. - box-shadow: >
  143. inset 1px 1px 3px rgba(255,255,255,0.3), 2px 2px
  144. 6px rgba(0,0,0,0.2)
  145. - background: >-
  146. linear-gradient(45deg, rgba(255,255,255,0.05)
  147. 20%, rgba(255,255,255,0.2) 100%)
  148. - border: solid .05em rgba(255,255,255,0.3)
  149. - color: rgba(255,255,255,1)
  150. styles:
  151. card:
  152. - background: >-
  153. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  154. rgba(0,0,0, 0.2) 100%)
  155. padding: 10px
  156. margin: 0px
  157. height: 50px
  158. border-radius: 15px
  159. icon:
  160. - color: white
  161. width: 25px
  162. - view_layout:
  163. grid-area: night
  164. type: custom:button-card
  165. entity: input_select.house_thermostat_presets
  166. tap_action:
  167. action: perform-action
  168. perform_action: input_select.select_option
  169. target:
  170. entity_id: input_select.house_thermostat_presets
  171. data:
  172. option: Sleep
  173. show_name: false
  174. show_icon: true
  175. show_state: false
  176. icon: mdi:moon-waxing-crescent
  177. state:
  178. - value: Sleep
  179. styles:
  180. card:
  181. - box-shadow: >
  182. inset 1px 1px 3px rgba(255,255,255,0.3), 2px 2px
  183. 6px rgba(0,0,0,0.2)
  184. - background: >-
  185. linear-gradient(45deg, rgba(255,255,255,0.05)
  186. 20%, rgba(255,255,255,0.2) 100%)
  187. - border: solid .05em rgba(255,255,255,0.3)
  188. - color: rgba(255,255,255,1)
  189. styles:
  190. card:
  191. - background: >-
  192. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  193. rgba(0,0,0, 0.2) 100%)
  194. padding: 10px
  195. margin: 0px
  196. height: 50px
  197. border-radius: 15px
  198. icon:
  199. - color: white
  200. width: 25px
  201. - view_layout:
  202. grid-area: 'off'
  203. type: custom:button-card
  204. entity: input_select.house_thermostat_presets
  205. tap_action:
  206. action: perform-action
  207. perform_action: input_select.select_option
  208. target:
  209. entity_id: input_select.house_thermostat_presets
  210. data:
  211. option: 'Off'
  212. show_name: false
  213. show_icon: true
  214. show_state: false
  215. icon: mdi:power
  216. state:
  217. - value: 'Off'
  218. styles:
  219. card:
  220. - box-shadow: >
  221. inset 1px 1px 3px rgba(255,255,255,0.3), 2px 2px
  222. 6px rgba(0,0,0,0.2)
  223. - background: >-
  224. linear-gradient(45deg, rgba(255,255,255,0.05)
  225. 20%, rgba(255,255,255,0.2) 100%)
  226. - border: solid .05em rgba(255,255,255,0.3)
  227. - color: rgba(255,255,255,1)
  228. styles:
  229. card:
  230. - background: >-
  231. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  232. rgba(0,0,0, 0.2) 100%)
  233. padding: 10px
  234. margin: 0px
  235. height: 50px
  236. border-radius: 15px
  237. icon:
  238. - color: white
  239. width: 25px
  240. view_layout:
  241. grid-area: bottom
  242. card_mod:
  243. style: |
  244. :host {
  245. display: block;
  246. position: relative; margin: 0px 6px 0px 0px;
  247. }
  248.  
  249. :host::before {
  250.  
  251. content: "";
  252. position: absolute;
  253. inset: 0;
  254. border-radius: 30px;
  255. -webkit-backdrop-filter: blur(50px);
  256. z-index: -1;
  257. padding: .1rem;
  258. background: linear-gradient(60deg,
  259. rgba(255,255,255,0.0) 0%,
  260. rgba(255,255,255,0.2) 49%,
  261. rgba(255,255,255,0.2) 51%,
  262. rgba(255,255,255,0.0) 100%);
  263. -webkit-mask:
  264. linear-gradient(#fff 0 0) content-box,
  265. linear-gradient(#fff 0 0);
  266. -webkit-mask-composite: xor;
  267. mask-composite: exclude;
  268. z-index: 0; filter: saturate(140%);
  269. }
  270.  
  271. :host::after {
  272. content: "";
  273. background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
  274. position: absolute;
  275. inset: 0;
  276. border-radius: 30px;
  277. box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
  278. z-index: -1;
  279.  
  280. -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
  281. filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.2)); }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!