API tools faq
paste
Pivotonian

Shortcuts

Pivotonian
Sep 23rd, 2025
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.83 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. name: Shortcuts
  3. entity: input_select.column_b2
  4. show_state: false
  5. styles:
  6. grid:
  7. - grid-template-areas: '"n" "stack"'
  8. grid-template-columns: 1fr
  9. grid-template-rows: auto
  10. align-content: start
  11. align-self: start
  12. justify-content: start
  13. justify-self: start
  14. row-gap: 35px
  15. card:
  16. - background-color: transparent
  17. border: solid 2px transparent
  18. height: 375px
  19. width: 302.5px
  20. padding: 20px 5px 10px 5px
  21. margin: 0px 0px 0px 0px
  22. name:
  23. - font-size: 18px
  24. font-weight: 600
  25. padding: 5px 0px 0px 15px
  26. margin: '-3px 0px 0px 0px'
  27. align-self: start
  28. justify-self: start
  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: '"row1" "row2" "row3" "row4"'
  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 15px 15px 15px
  48. margin: 0px 0px 20px 0px
  49. border-radius: 0px
  50. height: 340px
  51. overflow-y: auto
  52. custom_fields:
  53. row1:
  54. - align-content: start
  55. align-self: start
  56. justify-content: start
  57. justify-self: start
  58. width: 100%
  59. padding: 0px 0px 10px 0px
  60. row2:
  61. - align-content: start
  62. align-self: start
  63. justify-content: start
  64. justify-self: start
  65. width: 100%
  66. padding: 0px 0px 10px 0px
  67. row3:
  68. - align-content: start
  69. align-self: start
  70. justify-content: start
  71. justify-self: start
  72. width: 100%
  73. padding: 0px 0px 10px 0px
  74. row4:
  75. - align-content: start
  76. align-self: start
  77. justify-content: start
  78. justify-self: start
  79. width: 100%
  80. padding: 0px 0px 35px 0px
  81. custom_fields:
  82. row1:
  83. card:
  84. type: custom:button-card
  85. styles:
  86. grid:
  87. - grid-template-areas: '"garage back_house_lights"'
  88. grid-template-columns: 1fr 1fr
  89. grid-template-rows: 1fr
  90. column-gap: 10px
  91. card:
  92. - background-color: transparent
  93. padding: 0px
  94. margin: 0px
  95. border-radius: 0px
  96. custom_fields:
  97. garage:
  98. card:
  99. type: custom:button-card
  100. entity: cover.smart_garage_door_opener_msg100_main_channel
  101. name: Garage Door
  102. show_label: false
  103. show_state: false
  104. tap_action:
  105. action: toggle
  106. styles:
  107. card:
  108. - padding: 10px 12px 12px 12px
  109. - margin: 0px 0px 0px 0px
  110. - background: >-
  111. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  112. rgba(0,0,0, 0.2) 100%)
  113. filter: saturate(200%)
  114. - height: 88px
  115. - border-radius: 20px
  116. grid:
  117. - grid-template-areas: '"i" "n"'
  118. - grid-template-columns: 1fr min-content
  119. - grid-template-rows: 1fr min-content min-content
  120. img_cell:
  121. - justify-self: start
  122. - align-self: start
  123. - background: none
  124. - border-radius: 0
  125. - width: 30px
  126. - height: 35px
  127. - margin-left: '-5px'
  128. icon:
  129. - width: 40px
  130. height: 40px
  131. name:
  132. - justify-self: start
  133. - font-weight: 550
  134. - font-size: 16px
  135. - letter-spacing: '-0.01em'
  136. - color: white
  137. - padding: 0px 10px 0px 0px
  138. state:
  139. - value: open
  140. styles:
  141. card:
  142. - background: var(--label-badge-red)
  143. icon:
  144. - color: white
  145. - value: opening
  146. styles:
  147. card:
  148. - background: var(--label-badge-red)
  149. icon:
  150. - color: white
  151. - value: closing
  152. styles:
  153. card:
  154. - background: var(--label-badge-red)
  155. icon:
  156. - color: white
  157. back_house_lights:
  158. card:
  159. type: custom:button-card
  160. entity: light.back_house_lights
  161. name: Back House Lights
  162. tap_action:
  163. action: >
  164. [[[
  165.  
  166. return
  167. states['light.back_house_lights_minus_kitchen'].state
  168. === 'off' ? 'navigate' : 'toggle';
  169.  
  170. ]]]
  171. navigation_path: '#lights'
  172. double_tap_action:
  173. action: >
  174. [[[
  175.  
  176. return
  177. states['light.back_house_lights_minus_kitchen'].state
  178. === 'off' ? 'navigate' : 'toggle';
  179.  
  180. ]]]
  181. show_state: false
  182. styles:
  183. card:
  184. - padding: 10px 12px 12px 12px
  185. - margin: 0px 0px 0px 0px
  186. - background: >-
  187. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  188. rgba(0,0,0, 0.2) 100%)
  189. filter: saturate(200%)
  190. - height: 88px
  191. - border-radius: 20px
  192. grid:
  193. - grid-template-areas: '"i" "n"'
  194. - grid-template-columns: 1fr min-content
  195. - grid-template-rows: 1fr min-content min-content
  196. img_cell:
  197. - justify-self: start
  198. - align-self: start
  199. - background: none
  200. - border-radius: 0
  201. - width: 30px
  202. - height: 30px
  203. icon:
  204. - width: 40px
  205. height: 40px
  206. name:
  207. - justify-self: start
  208. - font-weight: 550
  209. - font-size: 16px
  210. - color: white
  211. - padding: 0px 10px 0px 0px
  212. - letter-spacing: '-0.01em'
  213. state:
  214. - value: 'on'
  215. styles:
  216. card:
  217. - background: >-
  218. linear-gradient(45deg, rgba(255,255,255, 0.8)
  219. 20%, rgba(255,255,255, 1) 100%)
  220. icon:
  221. - color: rgba(255,149,0,1)
  222. name:
  223. - color: rgba(0,0,0,1)
  224. row2:
  225. card:
  226. type: custom:button-card
  227. styles:
  228. grid:
  229. - grid-template-areas: '"tv split_system"'
  230. grid-template-columns: 1fr 1fr
  231. grid-template-rows: 1fr
  232. column-gap: 10px
  233. card:
  234. - background-color: transparent
  235. padding: 0px
  236. margin: 0px
  237. border-radius: 0px
  238. custom_fields:
  239. tv:
  240. card:
  241. type: custom:button-card
  242. entity: media_player.living_room_tv
  243. name: TV
  244. tap_action:
  245. action: toggle
  246. double_tap_action:
  247. action: navigate
  248. navigation_path: '#remote'
  249. hold_action:
  250. action: navigate
  251. navigation_path: '#remote'
  252. styles:
  253. card:
  254. - padding: 10px 12px 12px 12px
  255. - margin: 0px 0px 0px 0px
  256. - background: >-
  257. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  258. rgba(0,0,0, 0.2) 100%)
  259. filter: saturate(200%)
  260. - height: 88px
  261. - border-radius: 20px
  262. grid:
  263. - grid-template-areas: '"i" "n"'
  264. - grid-template-columns: 1fr min-content
  265. - grid-template-rows: 1fr min-content min-content
  266. img_cell:
  267. - justify-self: start
  268. - align-self: start
  269. - background: none
  270. - border-radius: 0
  271. - width: 40px
  272. - height: 30px
  273. - margin-left: '-5px'
  274. icon:
  275. - width: 40px
  276. height: 40px
  277. name:
  278. - justify-self: start
  279. - font-weight: 550
  280. - font-size: 16px
  281. - color: white
  282. - padding: 0px 10px 0px 0px
  283. - letter-spacing: '-0.01em'
  284. state:
  285. - value: 'on'
  286. styles:
  287. card:
  288. - background: >-
  289. linear-gradient(45deg, rgba(255,255,255, 0.8)
  290. 20%, rgba(255,255,255, 1) 100%)
  291. icon:
  292. - color: rgba(0,122,255,1)
  293. name:
  294. - color: rgba(0,0,0,1)
  295. split_system:
  296. card:
  297. type: custom:button-card
  298. entity: climate.living_room_split_system
  299. name: Split System
  300. icon: mdi:thermometer-low
  301. show_label: true
  302. tap_action:
  303. action: toggle
  304. styles:
  305. card:
  306. - padding: 10px 12px 12px 12px
  307. - margin: 0px 0px 0px 0px
  308. - background: >-
  309. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  310. rgba(0,0,0, 0.2) 100%)
  311. filter: saturate(200%)
  312. - height: 88px
  313. - border-radius: 20px
  314. grid:
  315. - grid-template-areas: '"i" "n"'
  316. - grid-template-columns: 1fr min-content
  317. - grid-template-rows: 1fr min-content min-content
  318. img_cell:
  319. - justify-self: start
  320. - align-self: start
  321. - background: none
  322. - border-radius: 0
  323. - width: 30px
  324. - height: 30px
  325. - margin-left: '-5px'
  326. icon:
  327. - width: 40px
  328. height: 40px
  329. name:
  330. - justify-self: start
  331. - font-weight: 550
  332. - font-size: 16px
  333. - color: white
  334. - padding: 0px 10px 0px 0px
  335. - letter-spacing: '-0.01em'
  336. state:
  337. - operator: '=='
  338. attribute: hvac_action
  339. value: cool
  340. icon: mdi:snowflake
  341. styles:
  342. card:
  343. - background: >-
  344. linear-gradient(45deg, rgba(255,255,255, 0.8)
  345. 20%, rgba(255,255,255, 1)
  346. 100%)
  347. icon:
  348. - color: rgba(90,200,250,1)
  349. label:
  350. - color: rgba(90,200,250,1)
  351. name:
  352. - color: rgba(0,0,0,1)
  353. - operator: '=='
  354. value: heat
  355. icon: mdi:fire
  356. styles:
  357. card:
  358. - background: >-
  359. linear-gradient(45deg, rgba(255,255,255, 0.8)
  360. 20%, rgba(255,255,255, 1) 100%)
  361. icon:
  362. - color: rgba(255,59,48,1)
  363. label:
  364. - color: rgba(255,59,48,1)
  365. name:
  366. - color: rgba(0,0,0,1)
  367. row3:
  368. card:
  369. type: custom:button-card
  370. styles:
  371. grid:
  372. - grid-template-areas: '"dining living"'
  373. grid-template-columns: 1fr 1fr
  374. grid-template-rows: 1fr
  375. column-gap: 10px
  376. card:
  377. - background-color: transparent
  378. padding: 0px
  379. margin: 0px
  380. border-radius: 0px
  381. custom_fields:
  382. living:
  383. card:
  384. type: custom:button-card
  385. entity: light.living_room_ceiling_lights
  386. name: Living Room
  387. icon: mdi:light-recessed
  388. tap_action:
  389. action: toggle
  390. double_tap_action:
  391. action: more-info
  392. hold_action:
  393. action: more-info
  394. show_state: false
  395. styles:
  396. card:
  397. - padding: 10px 12px 12px 12px
  398. - margin: 0px 0px 0px 0px
  399. - background: >-
  400. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  401. rgba(0,0,0, 0.2) 100%)
  402. filter: saturate(200%)
  403. - height: 88px
  404. - border-radius: 20px
  405. grid:
  406. - grid-template-areas: '"i" "n"'
  407. - grid-template-columns: 1fr min-content
  408. - grid-template-rows: 1fr min-content min-content
  409. img_cell:
  410. - justify-self: start
  411. - align-self: start
  412. - background: none
  413. - border-radius: 0
  414. - width: 30px
  415. - height: 30px
  416. icon:
  417. - width: 40px
  418. height: 40px
  419. name:
  420. - justify-self: start
  421. - font-weight: 550
  422. - font-size: 16px
  423. - color: white
  424. - padding: 0px 10px 0px 0px
  425. - letter-spacing: '-0.01em'
  426. state:
  427. - value: 'on'
  428. styles:
  429. card:
  430. - background: >-
  431. linear-gradient(45deg, rgba(255,255,255, 0.8)
  432. 20%, rgba(255,255,255, 1) 100%)
  433. icon:
  434. - color: rgba(255,149,0,1)
  435. name:
  436. - color: rgba(0,0,0,1)
  437. dining:
  438. card:
  439. type: custom:button-card
  440. entity: light.dining_room_ceiling_light
  441. name: Dining Room
  442. tap_action:
  443. action: toggle
  444. show_state: false
  445. styles:
  446. card:
  447. - padding: 10px 12px 12px 12px
  448. - margin: 0px 0px 0px 0px
  449. - background: >-
  450. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  451. rgba(0,0,0, 0.2) 100%)
  452. filter: saturate(200%)
  453. - height: 88px
  454. - border-radius: 20px
  455. grid:
  456. - grid-template-areas: '"i" "n"'
  457. - grid-template-columns: 1fr min-content
  458. - grid-template-rows: 1fr min-content min-content
  459. img_cell:
  460. - justify-self: start
  461. - align-self: start
  462. - background: none
  463. - border-radius: 0
  464. - width: 30px
  465. - height: 30px
  466. icon:
  467. - width: 40px
  468. height: 40px
  469. name:
  470. - justify-self: start
  471. - font-weight: 550
  472. - font-size: 16px
  473. - color: white
  474. - padding: 0px 10px 0px 0px
  475. - letter-spacing: '-0.01em'
  476. state:
  477. - value: 'on'
  478. styles:
  479. card:
  480. - background: >-
  481. linear-gradient(45deg, rgba(255,255,255, 0.8)
  482. 20%, rgba(255,255,255, 1) 100%)
  483. icon:
  484. - color: rgba(255,149,0,1)
  485. name:
  486. - color: rgba(0,0,0,1)
  487. row4:
  488. card:
  489. type: custom:button-card
  490. styles:
  491. grid:
  492. - grid-template-areas: '"heater patio"'
  493. grid-template-columns: 1fr 1fr
  494. grid-template-rows: 1fr
  495. column-gap: 10px
  496. card:
  497. - background-color: transparent
  498. padding: 0px
  499. margin: 0px
  500. border-radius: 0px
  501. custom_fields:
  502. heater:
  503. card:
  504. type: custom:button-card
  505. entity: climate.house_ducted_heating_2
  506. name: House Heater
  507. icon: mdi:fire
  508. show_label: true
  509. tap_action:
  510. action: more-info
  511. styles:
  512. card:
  513. - padding: 10px 12px 12px 12px
  514. - margin: 0px 0px 0px 0px
  515. - background: >-
  516. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  517. rgba(0,0,0, 0.2) 100%)
  518. filter: saturate(200%)
  519. - height: 88px
  520. - border-radius: 20px
  521. grid:
  522. - grid-template-areas: '"i" "n"'
  523. - grid-template-columns: 1fr min-content
  524. - grid-template-rows: 1fr min-content min-content
  525. img_cell:
  526. - justify-self: start
  527. - align-self: start
  528. - background: none
  529. - border-radius: 0
  530. - width: 30px
  531. - height: 30px
  532. - margin-left: '-5px'
  533. icon:
  534. - width: 40px
  535. height: 40px
  536. name:
  537. - justify-self: start
  538. - font-weight: 550
  539. - font-size: 16px
  540. - color: white
  541. - padding: 0px 10px 0px 0px
  542. - letter-spacing: '-0.01em'
  543. state:
  544. - operator: '=='
  545. value: heat
  546. icon: mdi:fire
  547. styles:
  548. card:
  549. - background: >-
  550. linear-gradient(45deg, rgba(255,255,255, 0.8)
  551. 20%, rgba(255,255,255, 1) 100%)
  552. icon:
  553. - color: rgba(255,59,48,1)
  554. label:
  555. - color: rgba(255,59,48,1)
  556. name:
  557. - color: rgba(0,0,0,1)
  558. patio:
  559. card:
  560. type: custom:button-card
  561. entity: light.patio_lights
  562. name: Patio
  563. tap_action:
  564. action: toggle
  565. show_state: false
  566. styles:
  567. card:
  568. - padding: 10px opx 12px 12px
  569. - margin: 0px 0px 0px 0px
  570. - background: >-
  571. linear-gradient(45deg, rgba(0,0,0, 0.1) 20%,
  572. rgba(0,0,0, 0.2) 100%)
  573. filter: saturate(200%)
  574. - height: 88px
  575. - border-radius: 20px
  576. grid:
  577. - grid-template-areas: '"i" "n"'
  578. - grid-template-columns: 1fr min-content
  579. - grid-template-rows: 1fr min-content min-content
  580. img_cell:
  581. - justify-self: start
  582. - align-self: start
  583. - background: none
  584. - border-radius: 0
  585. - width: 30px
  586. - height: 30px
  587. icon:
  588. - width: 40px
  589. height: 40px
  590. name:
  591. - justify-self: start
  592. - font-weight: 550
  593. - font-size: 16px
  594. - color: white
  595. - padding: 0px 10px 0px 0px
  596. - letter-spacing: '-0.01em'
  597. state:
  598. - value: 'on'
  599. styles:
  600. card:
  601. - background: >-
  602. linear-gradient(45deg, rgba(255,255,255, 0.8)
  603. 20%, rgba(255,255,255, 1) 100%)
  604. icon:
  605. - color: rgba(255,149,0,1)
  606. name:
  607. - color: rgba(0,0,0,1)
  608. card_mod:
  609. style: |
  610. :host {
  611. display: block;
  612. position: relative; margin: 0px 6px 0px 0px;
  613. }
  614.  
  615. :host::before {
  616.  
  617. content: "";
  618. position: absolute;
  619. inset: 0;
  620. border-radius: 30px;
  621. -webkit-backdrop-filter: blur(50px);
  622. z-index: -1;
  623. padding: .1rem;
  624. background: linear-gradient(60deg,
  625. rgba(255,255,255,0.0) 0%,
  626. rgba(255,255,255,0.2) 49%,
  627. rgba(255,255,255,0.2) 51%,
  628. rgba(255,255,255,0.0) 100%);
  629. -webkit-mask:
  630. linear-gradient(#fff 0 0) content-box,
  631. linear-gradient(#fff 0 0);
  632. -webkit-mask-composite: xor;
  633. mask-composite: exclude;
  634. z-index: 0; filter: saturate(140%);
  635. }
  636.  
  637. :host::after {
  638. content: "";
  639. background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
  640. position: absolute;
  641. inset: 0;
  642. border-radius: 30px;
  643. box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
  644. z-index: -1;
  645.  
  646. -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
  647. 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!