API tools faq
paste
Pivotonian

Media Card

Pivotonian
Jun 12th, 2025
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.28 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. tap_action:
  3. action: navigate
  4. navigation_path: "#nursery_homepod"
  5. show_icon: false
  6. show_name: false
  7. show_state: false
  8. styles:
  9. grid:
  10. - grid-template-areas: "\"content\""
  11. - grid-template-columns: 1fr
  12. - grid-template-rows: max-content
  13. card:
  14. - background-color: rgba(0,0,0,0.3)
  15. - webkit-backdrop-filter: blur(10px); !important;}
  16. - box-shadow: none
  17. - border-radius: 20px
  18. - border-width: 0px
  19. - padding: 10px
  20. - margin: 0px
  21. custom_fields:
  22. content:
  23. card:
  24. type: vertical-stack
  25. cards:
  26. - type: custom:button-card
  27. entity: media_player.nursery
  28. show_entity_picture: true
  29. show_name: false
  30. show_icon: false
  31. custom_fields:
  32. entity:
  33. card:
  34. type: custom:button-card
  35. tap_action:
  36. action: navigate
  37. navigation_path: "#nursery_homepod"
  38. name: Nursery
  39. show_label: true
  40. show_icon: false
  41. styles:
  42. card:
  43. - box-shadow: none
  44. - background: none
  45. - padding: 0px
  46. - border-radius: 0px
  47. - border-width: 0px
  48. name:
  49. - justify-self: start
  50. - padding-left: 15px
  51. - font-size: 13px
  52. - font-weight: 600
  53. - color: rgba(255,255,255,0.3)
  54. title:
  55. card:
  56. type: custom:button-card
  57. tap_action:
  58. action: navigate
  59. navigation_path: "#nursery_homepod"
  60. name: |
  61. [[[
  62. if (states['media_player.nursery'].attributes.media_title != undefined)
  63. return states['media_player.nursery'].attributes.media_title;
  64. ]]]
  65. show_icon: false
  66. styles:
  67. card:
  68. - box-shadow: none
  69. - background: none
  70. - padding: 0px
  71. - border-radius: 0px
  72. - border-width: 0px
  73. name:
  74. - justify-self: start
  75. - padding-left: 15px
  76. - padding-top: 5px
  77. - font-size: 20px
  78. - font-weight: 600
  79. - color: rgba(255,255,255,0.9)
  80. artist:
  81. card:
  82. type: custom:button-card
  83. tap_action:
  84. action: navigate
  85. navigation_path: "#nursery_homepod"
  86. name: |
  87. [[[
  88. if (states['media_player.nursery'].attributes.media_artist != undefined)
  89. return states['media_player.nursery'].attributes.media_artist;
  90. ]]]
  91. show_label: true
  92. show_icon: false
  93. styles:
  94. card:
  95. - box-shadow: none
  96. - background: none
  97. - padding: 0px
  98. - border-radius: 0px
  99. - border-width: 0px
  100. name:
  101. - justify-self: start
  102. - padding-left: 15px
  103. - font-size: 20px
  104. - font-weight: 400
  105. - color: rgba(255,255,255,0.3)
  106. styles:
  107. grid:
  108. - grid-template-areas: "\"i entity\" \"i title\" \"i artist\" \"i album\" "
  109. - grid-template-columns: max-content 1fr
  110. - grid-template-rows: max-content max-content max-content;
  111. - align-items: end
  112. card:
  113. - background: none
  114. - box-shadow: none
  115. - border-radius: 0px
  116. - border-width: 0px
  117. - padding: 0px 0px 0 5px
  118. - margin: 5px 0 -10px 0
  119. entity_picture:
  120. - align-self: start
  121. - justify-self: start
  122. - width: 70px
  123. - border-radius: 10px
  124. - type: custom:my-slider-v2
  125. entity: media_player.nursery
  126. mode: seekbar
  127. min: 0
  128. max: 100
  129. styles:
  130. card:
  131. - height: 20px
  132. - box-shadow: none
  133. - margin: 20px 0 0 0
  134. - background: none
  135. container:
  136. - border-radius: 0px
  137. - background: none
  138. - padding: 0 0 0 5px
  139. track:
  140. - background: rgba(255,255,255,0.3)
  141. - border-radius: 99px
  142. - padding: 0 0px 0 0px
  143. - width: 97%
  144. - height: 7px
  145. - margin: 0px 0 0 0
  146. progress:
  147. - background: rgba(255,255,255,0.9)
  148. - border-radius: 25px 0px 0px 25px
  149. - height: 7px
  150. - margin: 0 0 0 0
  151. thumb:
  152. - background: rgba(255,255,255,0.9)
  153. - width: 5px
  154. - height: 7px
  155. - border-radius: 0px
  156. - type: custom:button-card
  157. entity: media_player.nursery
  158. show_entity_picture: false
  159. show_name: false
  160. show_icon: false
  161. custom_fields:
  162. buttons:
  163. card:
  164. type: custom:button-card
  165. custom_fields:
  166. previous:
  167. card:
  168. type: custom:button-card
  169. tap_action:
  170. action: call-service
  171. service: media_player.media_previous_track
  172. target:
  173. entity_id: media_player.nursery
  174. icon: mdi:rewind
  175. show_name: false
  176. styles:
  177. card:
  178. - border-radius: 5px
  179. - border-width: 0px
  180. - box-shadow: none
  181. - background: rgba(255,255,255,0.0)
  182. - align-self: end
  183. - align-content: end
  184. - padding: 0px
  185. - margin: 0px
  186. icon:
  187. - width: 35px
  188. - color: rgba(255,255,255,0.5)
  189. play:
  190. card:
  191. type: custom:button-card
  192. tap_action:
  193. action: call-service
  194. service: media_player.media_play_pause
  195. target:
  196. entity_id: media_player.nursery
  197. hold_action:
  198. action: call-service
  199. service: media_player.turn_off
  200. target:
  201. entity_id:
  202. - media_player.nursery
  203. entity: media_player.nursery
  204. icon: mdi:play
  205. state:
  206. - value: playing
  207. icon: mdi:pause
  208. show_name: false
  209. styles:
  210. card:
  211. - border-radius: 5px
  212. - border-width: 0px
  213. - box-shadow: none
  214. - background: rgba(255,255,255,0.0)
  215. - align-self: end
  216. - align-content: end
  217. - padding: 0px
  218. - margin-bottom: 0px
  219. icon:
  220. - width: 45px
  221. - color: rgba(255,255,255,0.5)
  222. next:
  223. card:
  224. type: custom:button-card
  225. tap_action:
  226. action: call-service
  227. service: media_player.media_next_track
  228. target:
  229. entity_id: media_player.nursery
  230. icon: mdi:fast-forward
  231. show_name: false
  232. styles:
  233. card:
  234. - border-radius: 5px
  235. - border-width: 0px
  236. - box-shadow: none
  237. - background: rgba(255,255,255,0.0)
  238. - align-self: end
  239. - align-content: end
  240. icon:
  241. - width: 35px
  242. - color: rgba(255,255,255,0.5)
  243. star:
  244. card:
  245. type: custom:button-card
  246. tap_action:
  247. action: url
  248. url_path: shortcuts://run-shortcut?name=HomeKit
  249. icon: mdi:apple-keyboard-command
  250. show_name: false
  251. styles:
  252. card:
  253. - border-radius: 5px
  254. - border-width: 0px
  255. - box-shadow: none
  256. - background: rgba(255,255,255,0.0)
  257. - align-self: end
  258. - align-content: end
  259. icon:
  260. - width: 25px
  261. - color: rgba(255,255,255,0.5)
  262. menu:
  263. card:
  264. type: custom:button-card
  265. entity: media_player.nursery
  266. tap_action:
  267. action: more-info
  268. icon: mdi:menu
  269. show_name: false
  270. styles:
  271. card:
  272. - border-radius: 5px
  273. - border-width: 0px
  274. - box-shadow: none
  275. - background: rgba(255,255,255,0.0)
  276. - align-self: end
  277. - align-content: end
  278. icon:
  279. - width: 25px
  280. - color: rgba(255,255,255,0.5)
  281. styles:
  282. grid:
  283. - grid-template-columns: 2fr 3fr 3fr 3fr 2fr
  284. - grid-template-rows: min-content
  285. - grid-template-areas: "\"star previous play next menu\""
  286. card:
  287. - padding: 0 0 0 0px
  288. - margin: 3px 0px -6px 0px
  289. - align-self: end
  290. - background: none
  291. - box-shadow: none
  292. - border-width: 0px
  293. - border-radius: 0px
  294. styles:
  295. grid:
  296. - grid-template-areas: "\"buttons\""
  297. - grid-template-columns: 1fr
  298. - grid-template-rows: max-content max-content max-content max-content;
  299. - align-items: end
  300. card:
  301. - background: transparent
  302. - box-shadow: none
  303. - border-radius: 0px
  304. - border-width: 0px
  305. - padding: 0px 0px 15px 0px
  306. - margin: "-10px 0px -15px 0px"
  307. - type: custom:button-card
  308. entity: media_player.nursery
  309. show_entity_picture: false
  310. show_name: false
  311. show_icon: false
  312. custom_fields:
  313. volume_control:
  314. card:
  315. type: horizontal-stack
  316. cards:
  317. - type: custom:button-card
  318. tap_action:
  319. action: call-service
  320. service: media_player.volume_down
  321. target:
  322. entity_id:
  323. - media_player.nursery
  324. icon: mdi:volume-medium
  325. show_name: false
  326. styles:
  327. card:
  328. - border-radius: 5px
  329. - width: 30px
  330. - border-width: 0px
  331. - box-shadow: none
  332. - background: rgba(255,255,255,0.0)
  333. - align-self: end
  334. - align-content: end
  335. icon:
  336. - width: 20px
  337. - color: rgba(255,255,255,0.5)
  338. - type: custom:my-slider-v2
  339. entity: media_player.nursery
  340. attribute: volume_level
  341. min: 0
  342. max: 100
  343. step: 2
  344. styles:
  345. card:
  346. - box-shadow: none
  347. - margin: 9px 0 0 0
  348. - background: none
  349. container:
  350. - border-radius: 0px
  351. - background: none
  352. - padding: 0 0 0 0px
  353. track:
  354. - background: rgba(255,255,255,0.3)
  355. - border-radius: 99px
  356. - width: 100%
  357. - height: 7px
  358. - margin: 0px 0 0 0
  359. progress:
  360. - background: rgba(255,255,255,0.9)
  361. - border-radius: 25px 0px 0px 25px
  362. - height: 7px
  363. thumb:
  364. - background: rgba(255,255,255,0.9)
  365. - width: 5px
  366. - height: 7px
  367. - border-radius: 0px
  368. - type: custom:button-card
  369. tap_action:
  370. action: call-service
  371. service: media_player.volume_up
  372. target:
  373. entity_id:
  374. - media_player.nursery
  375. icon: mdi:volume-high
  376. show_name: false
  377. styles:
  378. card:
  379. - border-radius: 5px
  380. - width: 30px
  381. - border-width: 0px
  382. - box-shadow: none
  383. - background: rgba(255,255,255,0.0)
  384. - align-self: end
  385. - align-content: end
  386. icon:
  387. - width: 20px
  388. - color: rgba(255,255,255,0.5)
  389. styles:
  390. grid:
  391. - grid-template-areas: "\"volume_control\""
  392. - grid-template-columns: 1fr
  393. - grid-template-rows: max-content;
  394. - align-items: end
  395. card:
  396. - background: none
  397. - box-shadow: none
  398. - border-radius: 0px
  399. - border-width: 0px
  400. - padding: 0px 0px 0px 0px
  401. - margin-bottom: "-5px"
  402. card_mod:
  403. style: |
  404. ha-card {
  405. background-color: rgba(0, 0, 0, 0.3); !important;
  406. -webkit-backdrop-filter: blur(10px); !important;}
  407. }
  408.  
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!