API tools faq
paste
Pivotonian

Music Tile

Pivotonian
Sep 23rd, 2025
45
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.11 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. styles:
  3. grid:
  4. - grid-template-areas: >-
  5. "title" "header" "subhead1" "compilations" "divider1" "subhead2"
  6. "news" "divider2" "subhead3" "songs"
  7. grid-template-columns: 1fr
  8. grid-template-rows: auto
  9. align-content: start
  10. align-self: start
  11. justify-content: start
  12. justify-self: start
  13. card:
  14. - background-color: transparent
  15. border: solid 2px transparent
  16. height: 375px
  17. width: 302.5px
  18. padding: 15px 10px 0px 10px
  19. overflow-y: auto
  20. margin: 0px 0px 0px 0px
  21. show_state: false
  22. show_name: false
  23. show_icon: false
  24. custom_fields:
  25. title:
  26. card:
  27. type: custom:button-card
  28. name: Media
  29. styles:
  30. name:
  31. - font-size: 18px
  32. font-weight: 600
  33. padding: 15px 15px 0px 15px
  34. align-self: start
  35. justify-self: start
  36. card:
  37. - background-color: transparent
  38. height: 100%
  39. border-radius: 0px
  40. padding: 0px
  41. margin: '-10px 0px 10px 0px'
  42. header:
  43. card:
  44. type: custom:button-card
  45. template: divider
  46. styles:
  47. card:
  48. - margin: 0px 0px -10px 0px
  49. width: 280px
  50. divider1:
  51. card:
  52. type: custom:button-card
  53. template: divider
  54. styles:
  55. card:
  56. - margin: 10px 0px 0px 0px
  57. width: 280px
  58. divider2:
  59. card:
  60. type: custom:button-card
  61. template: divider
  62. styles:
  63. card:
  64. - margin: 10px 0px 0px 0px
  65. width: 280px
  66. subhead1:
  67. card:
  68. type: custom:button-card
  69. template: subheading
  70. variables:
  71. var_name: Quick Links
  72. styles:
  73. card:
  74. - padding: 15px 15px 10px 15px
  75. compilations:
  76. card:
  77. type: custom:button-card
  78. show_state: false
  79. show_name: false
  80. show_icon: false
  81. styles:
  82. grid:
  83. - grid-template-areas: '"row1"'
  84. align-content: start
  85. align-self: start
  86. justify-content: start
  87. justify-self: start
  88. card:
  89. - background-color: transparent
  90. padding: 0px 0px 0px 15px
  91. margin: 0px 0px 0px -2px
  92. width: 300px
  93. height: 100%
  94. overflow-x: auto
  95. border-radius: 0px
  96. custom_fields:
  97. row1:
  98. card:
  99. type: custom:button-card
  100. custom_fields:
  101. tracks:
  102. card:
  103. type: horizontal-stack
  104. cards:
  105. - type: custom:button-card
  106. template: compilations_small
  107. variables:
  108. var_image: /local/images/playlists/nova.jpg
  109. var_name: Nova100
  110. var_entity: input_boolean.nova
  111. - type: custom:button-card
  112. template: compilations_small
  113. variables:
  114. var_image: /local/images/playlists/sen.jpg
  115. var_name: SEN
  116. var_entity: input_boolean.sen
  117. - type: custom:button-card
  118. template: compilations_small
  119. variables:
  120. var_image: /local/images/playlists/fox.jpg
  121. var_name: FoxFM
  122. var_entity: input_boolean.fox
  123. - type: custom:button-card
  124. template: compilations_small
  125. variables:
  126. var_image: /local/images/playlists/blue.jpg
  127. var_name: Recently Added
  128. var_entity: input_boolean.recently_added
  129. - type: custom:button-card
  130. template: compilations_small
  131. variables:
  132. var_image: /local/images/playlists/red.jpg
  133. var_name: High Rotation
  134. var_entity: input_boolean.high_rotation
  135. - type: custom:button-card
  136. template: compilations_small
  137. variables:
  138. var_image: /local/images/playlists/green.jpg
  139. var_name: Favourites
  140. var_entity: input_boolean.favourites
  141. - type: custom:button-card
  142. template: compilations_small
  143. variables:
  144. var_image: >-
  145. https://is1-ssl.mzstatic.com/image/thumb/Features/v4/79/16/15/791615c2-e107-2acf-a919-2173baf5f9e3/9772ba3d-3a9b-4671-ae58-c0182d3d807a.png/1000x1000SC.DN01.jpg?l=en-AU
  146. var_name: ALT CTRL
  147. var_entity: input_boolean.alt_ctrl
  148. - type: custom:button-card
  149. template: compilations_small
  150. variables:
  151. var_image: >-
  152. https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/bc/dc/3c/bcdc3c81-74fb-b9a7-1a6e-f5eece3c00f0/U0MtTVMtV1ctQmFyZWZvb3RfQWNvdXN0aWMtQURBTV9JRD0xNDIxNjM4NTQxLnBuZw.png/1000x1000SC.DN01.jpg?l=en-AU
  153. var_name: Barefoot Acoustic
  154. var_entity: input_boolean.barefoot_acoustic
  155. - type: custom:button-card
  156. template: compilations_small
  157. variables:
  158. var_image: >-
  159. https://is1-ssl.mzstatic.com/image/thumb/Features125/v4/9f/84/eb/9f84eb27-41eb-87e2-72fa-4cce2381884d/U0MtTVMtV1ctQkVBVHN0cnVtZW50YWxzLnBuZw.png/1000x1000SC.DN01.jpg?l=en-AU
  160. var_name: BEATstrumentals
  161. var_entity: input_boolean.beatstrumentals
  162. - type: custom:button-card
  163. template: compilations_small
  164. variables:
  165. var_image: >-
  166. https://is1-ssl.mzstatic.com/image/thumb/Features221/v4/f2/50/a8/f250a877-6005-1a42-ac63-6fb372275cbe/5d409ece-7c95-4162-9ab3-a9f797a3f31d.png/1000x1000SC.CAESS02.jpg?l=en-AU
  167. var_name: Coffee Shop Essentials
  168. var_entity: input_boolean.coffee_shop_essentials
  169. - type: custom:button-card
  170. template: compilations_small
  171. variables:
  172. var_image: >-
  173. https://is1-ssl.mzstatic.com/image/thumb/Features/v4/98/0c/47/980c4733-29e4-1d84-592c-e240d8d5f79c/67c195e9-2ee6-4ba7-81e2-964826b85623.png/1000x1000SC.DN01.jpg?l=en-AU
  174. var_name: HEAPS INDIE
  175. var_entity: input_boolean.heaps_indie
  176. - type: custom:button-card
  177. template: compilations_small
  178. variables:
  179. var_image: >-
  180. https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/e0/60/08/e06008a2-30de-c61a-a495-4438c4ffa2b6/U0MtTVMtV1ctaW5kaWVfK19jaGlsbC1BREFNX0lEPTE0MjE2NDA2ODUucG5n.png/1000x1000SC.DN01.jpg?l=en-AU
  181. var_name: Indie + Chill
  182. var_entity: input_boolean.indie_chill
  183. - type: custom:button-card
  184. template: compilations_small
  185. variables:
  186. var_image: >-
  187. https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/90/48/90/90489014-9b8e-8f85-6c80-49bc69c5673c/U0MtTVMtV1ctSmF6el9DaGlsbC1BREFNX0lEPTExMjQ2NzgwMjMucG5n.png/1000x1000SC.DN01.jpg?l=en-AU
  188. var_name: Jazz Chill
  189. var_entity: input_boolean.jazz_chill
  190. - type: custom:button-card
  191. template: compilations_small
  192. variables:
  193. var_image: >-
  194. https://is1-ssl.mzstatic.com/image/thumb/Features221/v4/a8/79/88/a8798897-8b4a-3bd1-b4ef-a1be8a36175d/d74a81a0-36b2-4b90-bbd8-bd1b0d851f71.png/1000x1000SC.DN01.jpg?l=en-AU
  195. var_name: Lo-fi Sunday
  196. var_entity: input_boolean.lo_fi_sundays
  197. - type: custom:button-card
  198. template: compilations_small
  199. variables:
  200. var_image: >-
  201. https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/70/65/4d/70654d22-afb0-05ab-69bb-d9e7c0176a82/U0MtTVMtV1ctUGlhbm9fQmFyXy1BREFNX0lEPTExMTA1NTQzOTUucG5n.png/1000x1000SC.DN01.jpg?l=en-AU
  202. var_name: Piano Bar
  203. var_entity: input_boolean.piano_bar
  204. - type: custom:button-card
  205. template: compilations_small
  206. variables:
  207. var_image: >-
  208. https://is1-ssl.mzstatic.com/image/thumb/Features125/v4/d6/be/de/d6bede4b-0cb3-9f66-72e6-a1756d6dddc2/U0MtTVMtV1ctU21vb3RoX0phenpfRXNzZW50aWFscy1BREFNX0lEPTExODg0Nzc4NTEucG5n.png/1000x1000SC.CAESS02.jpg?l=en-AU
  209. var_name: Smooth Jazz Essentials
  210. var_entity: input_boolean.smooth_jazz_essentials
  211. styles:
  212. card:
  213. - background-color: transparent
  214. margin: 0px
  215. height: 100%
  216. border-radius: 0px
  217. padding: 0px 0px 5px 0px
  218. subhead2:
  219. card:
  220. type: custom:button-card
  221. template: subheading
  222. variables:
  223. var_name: News Briefing
  224. styles:
  225. card:
  226. - padding: 10px 15px 5px 15px
  227. width: 280px
  228. news:
  229. card:
  230. type: custom:button-card
  231. show_state: false
  232. show_name: false
  233. show_icon: false
  234. styles:
  235. grid:
  236. - grid-template-areas: '"row2"'
  237. align-content: start
  238. align-self: start
  239. justify-content: start
  240. justify-self: start
  241. card:
  242. - background-color: transparent
  243. padding: 0px 0px 5px 15px
  244. margin: 0px
  245. width: 302.5px
  246. border-radius: 0px
  247. custom_fields:
  248. row2:
  249. card:
  250. type: custom:css-swipe-card
  251. cardId: swipe_dashboard
  252. template: slider-horizontal
  253. auto_height: true
  254. pagination: false
  255. navigation: false
  256. card_gap: 0px
  257. cards:
  258. - type: vertical-stack
  259. cards:
  260. - type: custom:button-card
  261. entity: sensor.abc_news_briefing
  262. show_state: false
  263. show_name: true
  264. show_label: false
  265. show_entity_picture: true
  266. tap_action:
  267. action: call-service
  268. service: script.play_abc_news_briefing
  269. name: ABC News Briefing
  270. entity_picture: >-
  271. https://play-lh.googleusercontent.com/nTsIPBqFOIjY84v-20yt1JZcvUrFQ9OvDW0la-KmWCHRYq4cF4bISDUh8d5Otc-sEjiD=w480-h960-rw
  272. custom_fields:
  273. play:
  274. card:
  275. type: custom:button-card
  276. icon: mdi:play-circle
  277. tap_action:
  278. action: call-service
  279. service: script.play_abc_news_briefing
  280. styles:
  281. card:
  282. - grid-area: play
  283. justify-self: end
  284. align-self: center
  285. width: 80px
  286. background-color: transparent
  287. margin: 0px -15px 0px 0px
  288. icon:
  289. - color: rgba(255,255,255,0.3)
  290. styles:
  291. grid:
  292. - grid-template-areas: '"i n play"'
  293. - grid-template-columns: 0.3fr 1fr auto
  294. - grid-template-rows: auto auto
  295. - justify-content: start
  296. - align-content: center
  297. - justify-self: start
  298. - align-self: center
  299. card:
  300. - background-color: transparent
  301. - height: 43px
  302. - padding: 0px
  303. - margin: 0px
  304. - border-radius: 0px
  305. width: 265px
  306. name:
  307. - justify-self: start
  308. - align-self: center
  309. - font-size: 14px
  310. - font-weight: 600
  311. - padding: 0px 0 0 0
  312. entity_picture:
  313. - border-radius: 5px
  314. - width: 70%
  315. - margin-left: '-15px'
  316. - type: custom:button-card
  317. show_state: false
  318. show_name: true
  319. show_label: false
  320. show_entity_picture: true
  321. tap_action:
  322. action: call-service
  323. service: script.speak_news_on_homepod
  324. service_data:
  325. news_type: Generic
  326. name: The Age News Briefing
  327. entity_picture: >-
  328. https://play-lh.googleusercontent.com/Y1Di4hx8y9VUVd2evirRi4_P4Ey9dZrY3jGRInDLuuIP4xqW6AHchDrCLMM4G8RKX74=w480-h960-rw
  329. custom_fields:
  330. play:
  331. card:
  332. type: custom:button-card
  333. icon: mdi:play-circle
  334. tap_action:
  335. action: call-service
  336. service: script.speak_news_on_homepod
  337. service_data:
  338. news_type: Generic
  339. styles:
  340. card:
  341. - grid-area: play
  342. justify-self: end
  343. align-self: center
  344. width: 80px
  345. background-color: transparent
  346. margin: 0px -15px 0px 0px
  347. icon:
  348. - color: rgba(255,255,255,0.3)
  349. styles:
  350. grid:
  351. - grid-template-areas: '"i n play"'
  352. - grid-template-columns: 0.3fr 1fr auto
  353. - grid-template-rows: auto auto
  354. - justify-content: start
  355. - align-content: center
  356. - justify-self: start
  357. - align-self: center
  358. card:
  359. - background-color: transparent
  360. - height: 43px
  361. - padding: 0px
  362. - margin: 0px
  363. - border-radius: 0px
  364. width: 265px
  365. name:
  366. - justify-self: start
  367. - align-self: center
  368. - font-size: 14px
  369. - font-weight: 600
  370. - padding: 0px 0 0 0
  371. entity_picture:
  372. - border-radius: 5px
  373. - width: 70%
  374. - margin-left: '-15px'
  375. songs:
  376. card:
  377. type: custom:button-card
  378. show_state: false
  379. show_name: false
  380. show_icon: false
  381. styles:
  382. grid:
  383. - grid-template-areas: '"row2"'
  384. align-content: start
  385. align-self: start
  386. justify-content: start
  387. justify-self: start
  388. card:
  389. - background-color: transparent
  390. padding: 0px 0px 5px 15px
  391. margin: 0px
  392. width: 280px
  393. border-radius: 0px
  394. custom_fields:
  395. row2:
  396. card:
  397. type: custom:css-swipe-card
  398. cardId: swipe_dashboard
  399. template: slider-horizontal
  400. auto_height: true
  401. pagination: false
  402. navigation: false
  403. card_gap: 0px
  404. cards:
  405. - type: vertical-stack
  406. cards:
  407. - type: custom:button-card
  408. template: horizontal_song_v2
  409. variables:
  410. var_entity: sensor.top_track_1
  411. var_image: null
  412. var_script: script.play_lastfm_top_track
  413. var_index: 0
  414. - type: custom:button-card
  415. template: horizontal_song_v2
  416. variables:
  417. var_entity: sensor.top_track_2
  418. var_script: script.play_lastfm_top_track
  419. var_index: 1
  420. - type: custom:button-card
  421. template: horizontal_song_v2
  422. variables:
  423. var_entity: sensor.top_track_3
  424. var_script: script.play_lastfm_top_track
  425. var_index: 2
  426. - type: vertical-stack
  427. cards:
  428. - type: custom:button-card
  429. template: horizontal_song_v2
  430. variables:
  431. var_entity: sensor.top_track_4
  432. var_script: script.play_lastfm_top_track
  433. var_index: 3
  434. - type: custom:button-card
  435. template: horizontal_song_v2
  436. variables:
  437. var_entity: sensor.top_track_5
  438. var_script: script.play_lastfm_top_track
  439. var_index: 4
  440. - type: custom:button-card
  441. template: horizontal_song_v2
  442. variables:
  443. var_entity: sensor.top_track_6
  444. var_script: script.play_lastfm_top_track
  445. var_index: 5
  446. - type: vertical-stack
  447. cards:
  448. - type: custom:button-card
  449. template: horizontal_song_v2
  450. variables:
  451. var_entity: sensor.top_track_7
  452. var_script: script.play_lastfm_top_track
  453. var_index: 6
  454. subhead3:
  455. card:
  456. type: custom:button-card
  457. template: subheading
  458. variables:
  459. var_name: Top Tracks
  460. styles:
  461. card:
  462. - padding: 15px 15px 10px 15px
  463. card_mod:
  464. style: |
  465. :host {
  466. display: block;
  467. position: relative; margin: 0px 6px 0px 0px;
  468. }
  469.  
  470. :host::before {
  471.  
  472. content: "";
  473. position: absolute;
  474. inset: 0;
  475. border-radius: 30px;
  476. -webkit-backdrop-filter: blur(50px);
  477. z-index: -1;
  478. padding: .1rem;
  479. background: linear-gradient(60deg,
  480. rgba(255,255,255,0.0) 0%,
  481. rgba(255,255,255,0.2) 49%,
  482. rgba(255,255,255,0.2) 51%,
  483. rgba(255,255,255,0.0) 100%);
  484. -webkit-mask:
  485. linear-gradient(#fff 0 0) content-box,
  486. linear-gradient(#fff 0 0);
  487. -webkit-mask-composite: xor;
  488. mask-composite: exclude;
  489. z-index: 0; filter: saturate(140%);
  490. }
  491.  
  492. :host::after {
  493. content: "";
  494. background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
  495. position: absolute;
  496. inset: 0;
  497. border-radius: 30px;
  498. box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
  499. z-index: -1;
  500.  
  501. -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
  502. 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!