API tools faq
paste
Pivotonian

Music Now Playing

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