API tools faq
paste
Advertisement
pqpxoxa

HA | Redesign - Living Room

pqpxoxa
Mar 16th, 2023
399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.51 KB | None | 0 0
raw download clone embed print report
  1. type: vertical-stack
  2. cards:
  3. - type: custom:button-card
  4. name: false
  5. styles:
  6. card:
  7. - background-color: transparent
  8. - height: 100px
  9. grid:
  10. - grid-template-areas: '"icon title"'
  11. - grid-template-columns: 20% 80%
  12. - grid-template-rows: 1fr
  13. - gap: 0px 0px
  14. custom_fields:
  15. icon:
  16. card:
  17. type: custom:button-card
  18. name: false
  19. show_state: false
  20. icon: mdi:sofa
  21. styles:
  22. card:
  23. - background-color: transparent
  24. - padding-right: 12px
  25. icon:
  26. - color: white
  27. - width: 40px
  28. - height: 40px
  29. - background-color: '#35425c'
  30. - border-radius: 55px
  31. - padding: 15px
  32. title:
  33. card:
  34. type: custom:button-card
  35. name: Living Room
  36. show_state: false
  37. icon: false
  38. styles:
  39. card:
  40. - background-color: transparent
  41. - border-style: none
  42. name:
  43. - justify-self: left
  44. - font-size: 30px
  45. - font-weight: 500
  46. - font-color: '#b4c3cd'
  47. - type: horizontal-stack
  48. cards:
  49. - type: custom:button-card
  50. color: transparent
  51. show_name: true
  52. color_type: label-card
  53. name: Presence
  54. label: Sam
  55. show_label: true
  56. entity_picture: /local/newfacesam.png
  57. show_entity_picture: true
  58. tap_action:
  59. action: navigate
  60. navigation_path: /dashboard-mobile/overview
  61. styles:
  62. name:
  63. - padding-top: 5px
  64. - font-size: 12px
  65. - font-weight: 400
  66. label:
  67. - font-size: 10px
  68. - font-weight: bold
  69. - padding-top: 2px
  70. card:
  71. - background-color: transparent
  72. - border-style: none
  73. icon:
  74. - width: 50px
  75. - height: 50px
  76. - padding: 8px
  77. - align-self: start
  78. - text-align: start
  79. - background-color: '#35425c'
  80. - border-radius: 45px
  81. - box-shadow: >-
  82. 0 40px 15px -15px rgba(0, 0, 0, 0.2), inset 0 -25px 25px -25px
  83. rgba(0, 0, 0, 0.2)
  84. - type: custom:button-card
  85. color: transparent
  86. show_name: true
  87. color_type: label-card
  88. name: Lights
  89. label: 'ON'
  90. show_label: true
  91. tap_action:
  92. action: navigate
  93. navigation_path: /dashboard-mobile/lightssss
  94. icon: phu:bulb-group-sultan-lightstrip
  95. styles:
  96. name:
  97. - padding-top: 5px
  98. - font-size: 12px
  99. - font-weight: 400
  100. label:
  101. - font-size: 10px
  102. - font-weight: bold
  103. - padding-top: 2px
  104. card:
  105. - background-color: transparent
  106. - border-style: none
  107. icon:
  108. - width: 30px
  109. - height: 30px
  110. - padding: 18px
  111. - align-self: start
  112. - text-align: start
  113. - background-color: '#35425c'
  114. - border-radius: 45px
  115. - box-shadow: >-
  116. 0 40px 15px -15px rgba(0, 0, 0, 0.2), inset 0 -25px 25px -25px
  117. rgba(0, 0, 0, 0.2)
  118. - type: custom:button-card
  119. color: transparent
  120. show_name: true
  121. color_type: label-card
  122. name: Security
  123. label: CLEAR
  124. show_label: true
  125. icon: mdi:shield-home
  126. styles:
  127. name:
  128. - padding-top: 5px
  129. - font-size: 12px
  130. - font-weight: 400
  131. label:
  132. - font-size: 10px
  133. - font-weight: bold
  134. - padding-top: 2px
  135. card:
  136. - background-color: transparent
  137. - border-style: none
  138. icon:
  139. - width: 30px
  140. - height: 30px
  141. - padding: 18px
  142. - align-self: start
  143. - text-align: start
  144. - background-color: '#35425c'
  145. - border-radius: 45px
  146. - type: custom:button-card
  147. color: transparent
  148. show_name: true
  149. color_type: label-card
  150. name: Media
  151. label: 'ON'
  152. show_label: true
  153. icon: mdi:monitor-speaker
  154. styles:
  155. name:
  156. - padding-top: 5px
  157. - font-size: 12px
  158. - font-weight: 400
  159. label:
  160. - font-size: 10px
  161. - font-weight: bold
  162. - padding-top: 2px
  163. card:
  164. - background-color: transparent
  165. - border-style: none
  166. icon:
  167. - width: 30px
  168. - height: 30px
  169. - padding: 18px
  170. - align-self: start
  171. - text-align: start
  172. - background-color: '#35425c'
  173. - border-radius: 45px
  174. - type: custom:button-card
  175. color: transparent
  176. show_name: true
  177. color_type: label-card
  178. name: Climate
  179. label: 19°C
  180. show_label: true
  181. icon: mdi:home-thermometer
  182. styles:
  183. name:
  184. - padding-top: 5px
  185. - font-size: 12px
  186. - font-weight: 400
  187. label:
  188. - font-size: 10px
  189. - font-weight: bold
  190. - padding-top: 2px
  191. card:
  192. - background-color: transparent
  193. - border-style: none
  194. icon:
  195. - width: 30px
  196. - height: 30px
  197. - padding: 18px
  198. - align-self: start
  199. - text-align: start
  200. - background-color: '#35425c'
  201. - border-radius: 45px
  202. - type: custom:button-card
  203. color_type: blank-card
  204. styles:
  205. card:
  206. - height: 3px
  207. - type: vertical-stack
  208. cards:
  209. - type: custom:button-card
  210. name: Quick Menu
  211. styles:
  212. card:
  213. - background-color: transparent
  214. - border-style: none
  215. - padding: 2%
  216. name:
  217. - justify-self: left
  218. - font-size: 22px
  219. - font-weight: bold
  220. - font-color: '#b4c3cd'
  221. - type: horizontal-stack
  222. cards:
  223. - type: custom:button-card
  224. color: transparent
  225. show_name: true
  226. name: Front
  227. icon: phu:spot-bulb-top
  228. show_icon: true
  229. styles:
  230. name:
  231. - font-size: 14px
  232. - padding-left: 12px
  233. - font-weight: 500
  234. - padding-bottom: 11px
  235. - padding-left: 16px
  236. - align-self: middle
  237. - justify-self: start
  238. card:
  239. - height: 100px
  240. - background-color: transparent
  241. - border-style: none
  242. - background-color: '#35425c'
  243. - border-radius: 20px
  244. - opacity: 0.4
  245. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  246. icon:
  247. - align-self: start
  248. - text-align: start
  249. - color: white
  250. - width: 35px
  251. - padding-left: 16px
  252. img_cell:
  253. - justify-content: start
  254. - align-self: middle
  255. - margin: none
  256. custom_fields:
  257. notification:
  258. - position: absolute
  259. - left: 75%
  260. - top: 10%
  261. - opacity: 0.6
  262. custom_fields:
  263. notification: |
  264. [[[
  265. return `<ha-icon
  266. icon="mdi:lightbulb"
  267. style="width: 18px; height: 18px;">
  268. </ha-icon>`
  269. ]]]
  270. - type: custom:button-card
  271. color: transparent
  272. show_name: true
  273. name: Floor Lamp
  274. icon: mdi:floor-lamp-dual-outline
  275. show_icon: true
  276. styles:
  277. name:
  278. - font-size: 14px
  279. - padding-left: 12px
  280. - font-weight: 500
  281. - padding-bottom: 11px
  282. - padding-left: 16px
  283. - align-self: middle
  284. - justify-self: start
  285. card:
  286. - height: 100px
  287. - background-color: transparent
  288. - border-style: none
  289. - background-color: '#35425c'
  290. - border-radius: 20px
  291. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  292. icon:
  293. - align-self: start
  294. - text-align: start
  295. - color: white
  296. - width: 35px
  297. - padding-left: 16px
  298. img_cell:
  299. - justify-content: start
  300. - align-self: middle
  301. - margin: none
  302. custom_fields:
  303. notification:
  304. - position: absolute
  305. - left: 75%
  306. - top: 10%
  307. - opacity: 0.6
  308. custom_fields:
  309. notification: |
  310. [[[
  311. return `<ha-icon
  312. icon="mdi:lightbulb"
  313. style="width: 18px; height: 18px;">
  314. </ha-icon>`
  315. ]]]
  316. - type: custom:button-card
  317. color: transparent
  318. show_name: true
  319. name: Hyperion
  320. icon: phu:lightstrip-tv
  321. show_icon: true
  322. styles:
  323. name:
  324. - font-size: 14px
  325. - padding-left: 12px
  326. - font-weight: 500
  327. - padding-bottom: 11px
  328. - padding-left: 16px
  329. - align-self: middle
  330. - justify-self: start
  331. card:
  332. - height: 100px
  333. - background-color: transparent
  334. - border-style: none
  335. - background-color: '#35425c'
  336. - border-radius: 20px
  337. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  338. icon:
  339. - align-self: start
  340. - text-align: start
  341. - color: white
  342. - width: 35px
  343. - padding-left: 16px
  344. img_cell:
  345. - justify-content: start
  346. - align-self: middle
  347. - margin: none
  348. custom_fields:
  349. notification:
  350. - position: absolute
  351. - left: 75%
  352. - top: 10%
  353. - opacity: 0.6
  354. custom_fields:
  355. notification: |
  356. [[[
  357. return `<ha-icon
  358. icon="mdi:lightbulb"
  359. style="width: 18px; height: 18px;">
  360. </ha-icon>`
  361. ]]]
  362. - type: horizontal-stack
  363. cards:
  364. - type: custom:button-card
  365. color: transparent
  366. show_name: true
  367. name: Remote
  368. icon: mdi:remote-tv
  369. show_icon: true
  370. styles:
  371. name:
  372. - font-size: 14px
  373. - padding-left: 12px
  374. - font-weight: 500
  375. - padding-bottom: 12px
  376. - padding-left: 16px
  377. - align-self: middle
  378. - justify-self: start
  379. card:
  380. - height: 100px
  381. - background-color: transparent
  382. - border-style: none
  383. - background-color: '#35425c'
  384. - border-radius: 20px
  385. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  386. icon:
  387. - align-self: start
  388. - text-align: start
  389. - color: white
  390. - width: 40px
  391. - padding-left: 16px
  392. img_cell:
  393. - justify-content: start
  394. - align-self: middle
  395. - margin: none
  396. custom_fields:
  397. notification:
  398. - position: absolute
  399. - left: 75%
  400. - top: 10%
  401. - opacity: 0.6
  402. custom_fields:
  403. notification: |
  404. [[[
  405. return `<ha-icon
  406. icon="mdi:monitor-speaker"
  407. style="width: 16px; height: 16px;">
  408. </ha-icon>`
  409. ]]]
  410. - type: custom:button-card
  411. color: transparent
  412. show_name: true
  413. name: Broadcast
  414. icon: mdi:speaker-message
  415. show_icon: true
  416. styles:
  417. name:
  418. - font-size: 14px
  419. - padding-left: 12px
  420. - font-weight: 500
  421. - padding-bottom: 12px
  422. - padding-left: 16px
  423. - align-self: middle
  424. - justify-self: start
  425. card:
  426. - height: 100px
  427. - background-color: transparent
  428. - border-style: none
  429. - background-color: '#35425c'
  430. - border-radius: 20px
  431. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  432. icon:
  433. - align-self: start
  434. - text-align: start
  435. - color: white
  436. - width: 35px
  437. - padding-left: 16px
  438. img_cell:
  439. - justify-content: start
  440. - align-self: middle
  441. - margin: none
  442. custom_fields:
  443. notification:
  444. - position: absolute
  445. - left: 75%
  446. - top: 10%
  447. - opacity: 0.6
  448. custom_fields:
  449. notification: |
  450. [[[
  451. return `<ha-icon
  452. icon="mdi:monitor-speaker"
  453. style="width: 18px; height: 18px;">
  454. </ha-icon>`
  455. ]]]
  456. - type: custom:button-card
  457. color: transparent
  458. show_name: true
  459. name: Heating
  460. icon: mdi:radiator
  461. show_icon: true
  462. styles:
  463. name:
  464. - font-size: 14px
  465. - padding-left: 12px
  466. - font-weight: 500
  467. - padding-bottom: 12px
  468. - padding-left: 16px
  469. - align-self: middle
  470. - justify-self: start
  471. card:
  472. - height: 100px
  473. - background-color: transparent
  474. - border-style: none
  475. - background-color: '#35425c'
  476. - border-radius: 20px
  477. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  478. icon:
  479. - align-self: start
  480. - text-align: start
  481. - color: white
  482. - width: 35px
  483. - padding-left: 16px
  484. img_cell:
  485. - justify-content: start
  486. - align-self: middle
  487. - margin: none
  488. custom_fields:
  489. notification:
  490. - position: absolute
  491. - left: 75%
  492. - top: 10%
  493. - opacity: 0.6
  494. custom_fields:
  495. notification: |
  496. [[[
  497. return `<ha-icon
  498. icon="mdi:radiator"
  499. style="width: 18px; height: 18px;">
  500. </ha-icon>`
  501. ]]]
  502. - type: custom:expander-card
  503. title: Hello
  504. clear: true
  505. expanded: false
  506. cards:
  507. - type: horizontal-stack
  508. cards:
  509. - type: custom:button-card
  510. name: TV
  511. entity: light.livings
  512. icon: mdi:television
  513. show_icon: true
  514. state:
  515. - styles:
  516. card:
  517. - height: 120px
  518. - background-color: '#35425c'
  519. - border-radius: 20px
  520. - font-size: 10px
  521. - padding-bottom: 0px
  522. - padding-top: 0px
  523. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  524. name:
  525. - padding-top: 0px
  526. - padding-left: 12px
  527. - font-weight: 400
  528. - font-size: 12px
  529. - align-self: middle
  530. - justify-self: start
  531. icon:
  532. - padding-left: 12px
  533. - width: 35px
  534. - color: white
  535. img_cell:
  536. - justify-content: start
  537. - align-self: middle
  538. - margin: none
  539. grid:
  540. - grid-template-areas: '"i" "n" "slider"'
  541. - grid-template-columns: 1fr
  542. - grid-template-rows: min-content fr min-content
  543. custom_fields:
  544. slider:
  545. card:
  546. full_row: true
  547. type: custom:slider-entity-row
  548. entity: light.livings
  549. value: 'on'
  550. - styles:
  551. card:
  552. - height: 120px
  553. - border-radius: 15px
  554. - font-size: 10px
  555. - padding-bottom: 0px
  556. - padding-top: 5px
  557. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  558. name:
  559. - padding-top: 0px
  560. - padding-left: 12px
  561. - font-weight: 400
  562. - font-size: 12px
  563. - align-self: middle
  564. - justify-self: start
  565. icon:
  566. - opacity: 0.3
  567. - padding-left: 12px
  568. - width: 35px
  569. img_cell:
  570. - justify-content: start
  571. - align-self: middle
  572. - margin: none
  573. grid:
  574. - grid-template-areas: '"i" "n" "slider" "l"'
  575. - grid-template-columns: 1fr
  576. - grid-template-rows: min-content fr min-content min-content
  577. custom_fields:
  578. slider:
  579. card:
  580. full_row: true
  581. type: custom:slider-entity-row
  582. entity: light.livings
  583. value: 'off'
  584. - type: custom:button-card
  585. name: Table
  586. entity: light.living_room_table
  587. icon: mdi:table-furniture
  588. show_icon: true
  589. state:
  590. - styles:
  591. card:
  592. - height: 120px
  593. - background-color: '#35425c'
  594. - border-radius: 20px
  595. - font-size: 10px
  596. - padding-bottom: 0px
  597. - padding-top: 0px
  598. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  599. name:
  600. - padding-top: 0px
  601. - padding-left: 12px
  602. - font-weight: 400
  603. - font-size: 12px
  604. - align-self: middle
  605. - justify-self: start
  606. icon:
  607. - padding-left: 12px
  608. - width: 35px
  609. - color: white
  610. img_cell:
  611. - justify-content: start
  612. - align-self: middle
  613. - margin: none
  614. grid:
  615. - grid-template-areas: '"i" "n" "slider"'
  616. - grid-template-columns: 1fr
  617. - grid-template-rows: min-content fr min-content
  618. custom_fields:
  619. slider:
  620. card:
  621. full_row: true
  622. type: custom:slider-entity-row
  623. entity: light.living_room_table
  624. value: 'on'
  625. - styles:
  626. card:
  627. - height: 120px
  628. - border-radius: 15px
  629. - font-size: 10px
  630. - padding-bottom: 0px
  631. - padding-top: 5px
  632. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  633. name:
  634. - padding-top: 0px
  635. - padding-left: 12px
  636. - font-weight: 400
  637. - font-size: 12px
  638. - align-self: middle
  639. - justify-self: start
  640. icon:
  641. - opacity: 0.3
  642. - padding-left: 12px
  643. - width: 35px
  644. img_cell:
  645. - justify-content: start
  646. - align-self: middle
  647. - margin: none
  648. grid:
  649. - grid-template-areas: '"i" "n" "slider" "l"'
  650. - grid-template-columns: 1fr
  651. - grid-template-rows: min-content fr min-content min-content
  652. custom_fields:
  653. slider:
  654. card:
  655. full_row: true
  656. type: custom:slider-entity-row
  657. entity: light.living_room_table
  658. value: 'off'
  659. - type: custom:button-card
  660. name: Fire
  661. entity: light.living_room_fire
  662. icon: mdi:fireplace
  663. show_icon: true
  664. state:
  665. - styles:
  666. card:
  667. - height: 120px
  668. - background-color: '#35425c'
  669. - border-radius: 20px
  670. - font-size: 10px
  671. - padding-bottom: 0px
  672. - padding-top: 0px
  673. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  674. name:
  675. - padding-top: 0px
  676. - padding-left: 12px
  677. - font-weight: 400
  678. - font-size: 12px
  679. - align-self: middle
  680. - justify-self: start
  681. icon:
  682. - padding-left: 12px
  683. - width: 35px
  684. - color: white
  685. img_cell:
  686. - justify-content: start
  687. - align-self: middle
  688. - margin: none
  689. grid:
  690. - grid-template-areas: '"i" "n" "slider"'
  691. - grid-template-columns: 1fr
  692. - grid-template-rows: min-content fr min-content
  693. custom_fields:
  694. slider:
  695. card:
  696. full_row: true
  697. type: custom:slider-entity-row
  698. entity: light.living_room_fire
  699. value: 'on'
  700. - styles:
  701. card:
  702. - height: 120px
  703. - border-radius: 15px
  704. - font-size: 10px
  705. - padding-bottom: 0px
  706. - padding-top: 5px
  707. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  708. name:
  709. - padding-top: 0px
  710. - padding-left: 12px
  711. - font-weight: 400
  712. - font-size: 12px
  713. - align-self: middle
  714. - justify-self: start
  715. icon:
  716. - opacity: 0.3
  717. - padding-left: 12px
  718. - width: 35px
  719. img_cell:
  720. - justify-content: start
  721. - align-self: middle
  722. - margin: none
  723. grid:
  724. - grid-template-areas: '"i" "n" "slider" "l"'
  725. - grid-template-columns: 1fr
  726. - grid-template-rows: min-content fr min-content min-content
  727. custom_fields:
  728. slider:
  729. card:
  730. full_row: true
  731. type: custom:slider-entity-row
  732. entity: light.living_room_fire
  733. value: 'off'
  734. - type: custom:button-card
  735. color_type: blank-card
  736. styles:
  737. card:
  738. - height: 8px
  739. - type: horizontal-stack
  740. cards:
  741. - type: custom:button-card
  742. name: Floor Lamp Wall
  743. entity: light.living_room_floor_wall_lamp
  744. icon: phu:regolit-arc-lamp
  745. show_icon: true
  746. state:
  747. - styles:
  748. card:
  749. - height: 120px
  750. - background-color: '#35425c'
  751. - border-radius: 20px
  752. - font-size: 10px
  753. - padding-bottom: 0px
  754. - padding-top: 0px
  755. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  756. name:
  757. - padding-top: 0px
  758. - padding-left: 12px
  759. - font-weight: 400
  760. - font-size: 12px
  761. - align-self: middle
  762. - justify-self: start
  763. icon:
  764. - padding-left: 12px
  765. - width: 35px
  766. - color: white
  767. img_cell:
  768. - justify-content: start
  769. - align-self: middle
  770. - margin: none
  771. grid:
  772. - grid-template-areas: '"i" "n" "slider"'
  773. - grid-template-columns: 1fr
  774. - grid-template-rows: min-content fr min-content
  775. custom_fields:
  776. slider:
  777. card:
  778. full_row: true
  779. type: custom:slider-entity-row
  780. entity: light.living_room_floor_wall_lamp
  781. hide_state: true
  782. value: 'on'
  783. - styles:
  784. card:
  785. - height: 120px
  786. - border-radius: 15px
  787. - font-size: 10px
  788. - padding-bottom: 0px
  789. - padding-top: 5px
  790. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  791. name:
  792. - padding-top: 0px
  793. - padding-left: 12px
  794. - font-weight: 400
  795. - font-size: 12px
  796. - align-self: middle
  797. - justify-self: start
  798. icon:
  799. - opacity: 0.3
  800. - padding-left: 12px
  801. - width: 35px
  802. img_cell:
  803. - justify-content: start
  804. - align-self: middle
  805. - margin: none
  806. grid:
  807. - grid-template-areas: '"i" "n" "slider" "l"'
  808. - grid-template-columns: 1fr
  809. - grid-template-rows: min-content fr min-content min-content
  810. custom_fields:
  811. slider:
  812. card:
  813. full_row: true
  814. type: custom:slider-entity-row
  815. entity: light.living_room_floor_wall_lamp
  816. hide_state: true
  817. value: 'off'
  818. - type: custom:button-card
  819. name: Floor Lamp
  820. entity: switch.living_room_floor_lamp
  821. icon: phu:floor-shade
  822. show_icon: true
  823. state:
  824. - styles:
  825. card:
  826. - height: 120px
  827. - border-radius: 15px
  828. - font-size: 10px
  829. - padding-bottom: 0px
  830. - padding-top: 5px
  831. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  832. name:
  833. - padding-top: 0px
  834. - padding-bottom: 30px
  835. - padding-left: 12px
  836. - font-weight: 400
  837. - font-size: 12px
  838. - align-self: middle
  839. - justify-self: start
  840. icon:
  841. - padding-left: 12px
  842. - width: 35px
  843. - color: white
  844. img_cell:
  845. - justify-content: start
  846. - align-self: middle
  847. - margin: none
  848. grid:
  849. - grid-template-areas: '"i" "n" "slider" "l"'
  850. - grid-template-columns: 1fr
  851. - grid-template-rows: min-content fr min-content min-content
  852. value: 'on'
  853. - styles:
  854. card:
  855. - height: 120px
  856. - border-radius: 15px
  857. - font-size: 10px
  858. - padding-bottom: 0px
  859. - padding-top: 5px
  860. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  861. name:
  862. - padding-top: 0px
  863. - padding-bottom: 30px
  864. - padding-left: 12px
  865. - font-weight: 400
  866. - font-size: 12px
  867. - align-self: middle
  868. - justify-self: start
  869. icon:
  870. - opacity: 0.3
  871. - padding-left: 12px
  872. - width: 35px
  873. img_cell:
  874. - justify-content: start
  875. - align-self: middle
  876. - margin: none
  877. grid:
  878. - grid-template-areas: '"i" "n" "slider" "l"'
  879. - grid-template-columns: 1fr
  880. - grid-template-rows: min-content fr min-content min-content
  881. value: 'off'
  882. title-card-button-overlay: false
  883. gap: ''
  884. padding: 0px
  885. child-padding: ' 0px'
  886. title-card:
  887. type: custom:button-card
  888. name: false
  889. styles:
  890. card:
  891. - background-color: transparent
  892. grid:
  893. - grid-template-areas: '"icon title"'
  894. - grid-template-columns: 30% 70%
  895. - grid-template-rows: 1fr
  896. - gap: 0px 0px
  897. custom_fields:
  898. icon:
  899. card:
  900. type: custom:button-card
  901. name: false
  902. show_state: false
  903. icon: mdi:lightbulb-group-outline
  904. styles:
  905. card:
  906. - background-color: transparent
  907. - padding-right: 12px
  908. icon:
  909. - color: white
  910. - width: 40px
  911. - height: 40px
  912. - background-color: '#35425c'
  913. - border-radius: 45px
  914. - padding: 10px
  915. title:
  916. card:
  917. type: custom:button-card
  918. name: Lights
  919. show_state: false
  920. icon: false
  921. styles:
  922. card:
  923. - background-color: transparent
  924. - border-style: none
  925. name:
  926. - justify-self: left
  927. - font-size: 26px
  928. - font-weight: 500
  929. - font-color: '#b4c3cd'
  930. - padding-right: 10px
  931. - type: custom:expander-card
  932. title: Hello
  933. clear: true
  934. expanded: false
  935. cards:
  936. - type: horizontal-stack
  937. cards:
  938. - type: custom:button-card
  939. name: TV
  940. entity: light.livings
  941. icon: mdi:television
  942. show_icon: true
  943. state:
  944. - styles:
  945. card:
  946. - height: 120px
  947. - background-color: '#35425c'
  948. - border-radius: 20px
  949. - font-size: 10px
  950. - padding-bottom: 0px
  951. - padding-top: 0px
  952. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  953. name:
  954. - padding-top: 0px
  955. - padding-left: 12px
  956. - font-weight: 400
  957. - font-size: 12px
  958. - align-self: middle
  959. - justify-self: start
  960. icon:
  961. - padding-left: 12px
  962. - width: 35px
  963. - color: white
  964. img_cell:
  965. - justify-content: start
  966. - align-self: middle
  967. - margin: none
  968. grid:
  969. - grid-template-areas: '"i" "n" "slider"'
  970. - grid-template-columns: 1fr
  971. - grid-template-rows: min-content fr min-content
  972. custom_fields:
  973. slider:
  974. card:
  975. full_row: true
  976. type: custom:slider-entity-row
  977. entity: light.livings
  978. value: 'on'
  979. - styles:
  980. card:
  981. - height: 120px
  982. - border-radius: 15px
  983. - font-size: 10px
  984. - padding-bottom: 0px
  985. - padding-top: 5px
  986. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  987. name:
  988. - padding-top: 0px
  989. - padding-left: 12px
  990. - font-weight: 400
  991. - font-size: 12px
  992. - align-self: middle
  993. - justify-self: start
  994. icon:
  995. - opacity: 0.3
  996. - padding-left: 12px
  997. - width: 35px
  998. img_cell:
  999. - justify-content: start
  1000. - align-self: middle
  1001. - margin: none
  1002. grid:
  1003. - grid-template-areas: '"i" "n" "slider" "l"'
  1004. - grid-template-columns: 1fr
  1005. - grid-template-rows: min-content fr min-content min-content
  1006. custom_fields:
  1007. slider:
  1008. card:
  1009. full_row: true
  1010. type: custom:slider-entity-row
  1011. entity: light.livings
  1012. value: 'off'
  1013. - type: custom:button-card
  1014. name: Table
  1015. entity: light.living_room_table
  1016. icon: mdi:table-furniture
  1017. show_icon: true
  1018. state:
  1019. - styles:
  1020. card:
  1021. - height: 120px
  1022. - background-color: '#35425c'
  1023. - border-radius: 20px
  1024. - font-size: 10px
  1025. - padding-bottom: 0px
  1026. - padding-top: 0px
  1027. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1028. name:
  1029. - padding-top: 0px
  1030. - padding-left: 12px
  1031. - font-weight: 400
  1032. - font-size: 12px
  1033. - align-self: middle
  1034. - justify-self: start
  1035. icon:
  1036. - padding-left: 12px
  1037. - width: 35px
  1038. - color: white
  1039. img_cell:
  1040. - justify-content: start
  1041. - align-self: middle
  1042. - margin: none
  1043. grid:
  1044. - grid-template-areas: '"i" "n" "slider"'
  1045. - grid-template-columns: 1fr
  1046. - grid-template-rows: min-content fr min-content
  1047. custom_fields:
  1048. slider:
  1049. card:
  1050. full_row: true
  1051. type: custom:slider-entity-row
  1052. entity: light.living_room_table
  1053. value: 'on'
  1054. - styles:
  1055. card:
  1056. - height: 120px
  1057. - border-radius: 15px
  1058. - font-size: 10px
  1059. - padding-bottom: 0px
  1060. - padding-top: 5px
  1061. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1062. name:
  1063. - padding-top: 0px
  1064. - padding-left: 12px
  1065. - font-weight: 400
  1066. - font-size: 12px
  1067. - align-self: middle
  1068. - justify-self: start
  1069. icon:
  1070. - opacity: 0.3
  1071. - padding-left: 12px
  1072. - width: 35px
  1073. img_cell:
  1074. - justify-content: start
  1075. - align-self: middle
  1076. - margin: none
  1077. grid:
  1078. - grid-template-areas: '"i" "n" "slider" "l"'
  1079. - grid-template-columns: 1fr
  1080. - grid-template-rows: min-content fr min-content min-content
  1081. custom_fields:
  1082. slider:
  1083. card:
  1084. full_row: true
  1085. type: custom:slider-entity-row
  1086. entity: light.living_room_table
  1087. value: 'off'
  1088. - type: custom:button-card
  1089. name: Fire
  1090. entity: light.living_room_fire
  1091. icon: mdi:fireplace
  1092. show_icon: true
  1093. state:
  1094. - styles:
  1095. card:
  1096. - height: 120px
  1097. - background-color: '#35425c'
  1098. - border-radius: 20px
  1099. - font-size: 10px
  1100. - padding-bottom: 0px
  1101. - padding-top: 0px
  1102. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1103. name:
  1104. - padding-top: 0px
  1105. - padding-left: 12px
  1106. - font-weight: 400
  1107. - font-size: 12px
  1108. - align-self: middle
  1109. - justify-self: start
  1110. icon:
  1111. - padding-left: 12px
  1112. - width: 35px
  1113. - color: white
  1114. img_cell:
  1115. - justify-content: start
  1116. - align-self: middle
  1117. - margin: none
  1118. grid:
  1119. - grid-template-areas: '"i" "n" "slider"'
  1120. - grid-template-columns: 1fr
  1121. - grid-template-rows: min-content fr min-content
  1122. custom_fields:
  1123. slider:
  1124. card:
  1125. full_row: true
  1126. type: custom:slider-entity-row
  1127. entity: light.living_room_fire
  1128. value: 'on'
  1129. - styles:
  1130. card:
  1131. - height: 120px
  1132. - border-radius: 15px
  1133. - font-size: 10px
  1134. - padding-bottom: 0px
  1135. - padding-top: 5px
  1136. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1137. name:
  1138. - padding-top: 0px
  1139. - padding-left: 12px
  1140. - font-weight: 400
  1141. - font-size: 12px
  1142. - align-self: middle
  1143. - justify-self: start
  1144. icon:
  1145. - opacity: 0.3
  1146. - padding-left: 12px
  1147. - width: 35px
  1148. img_cell:
  1149. - justify-content: start
  1150. - align-self: middle
  1151. - margin: none
  1152. grid:
  1153. - grid-template-areas: '"i" "n" "slider" "l"'
  1154. - grid-template-columns: 1fr
  1155. - grid-template-rows: min-content fr min-content min-content
  1156. custom_fields:
  1157. slider:
  1158. card:
  1159. full_row: true
  1160. type: custom:slider-entity-row
  1161. entity: light.living_room_fire
  1162. value: 'off'
  1163. - type: custom:button-card
  1164. color_type: blank-card
  1165. styles:
  1166. card:
  1167. - height: 8px
  1168. - type: horizontal-stack
  1169. cards:
  1170. - type: custom:button-card
  1171. name: Floor Lamp Wall
  1172. entity: light.living_room_floor_wall_lamp
  1173. icon: phu:regolit-arc-lamp
  1174. show_icon: true
  1175. state:
  1176. - styles:
  1177. card:
  1178. - height: 120px
  1179. - background-color: '#35425c'
  1180. - border-radius: 20px
  1181. - font-size: 10px
  1182. - padding-bottom: 0px
  1183. - padding-top: 0px
  1184. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1185. name:
  1186. - padding-top: 0px
  1187. - padding-left: 12px
  1188. - font-weight: 400
  1189. - font-size: 12px
  1190. - align-self: middle
  1191. - justify-self: start
  1192. icon:
  1193. - padding-left: 12px
  1194. - width: 35px
  1195. - color: white
  1196. img_cell:
  1197. - justify-content: start
  1198. - align-self: middle
  1199. - margin: none
  1200. grid:
  1201. - grid-template-areas: '"i" "n" "slider"'
  1202. - grid-template-columns: 1fr
  1203. - grid-template-rows: min-content fr min-content
  1204. custom_fields:
  1205. slider:
  1206. card:
  1207. full_row: true
  1208. type: custom:slider-entity-row
  1209. entity: light.living_room_floor_wall_lamp
  1210. hide_state: true
  1211. value: 'on'
  1212. - styles:
  1213. card:
  1214. - height: 120px
  1215. - border-radius: 15px
  1216. - font-size: 10px
  1217. - padding-bottom: 0px
  1218. - padding-top: 5px
  1219. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1220. name:
  1221. - padding-top: 0px
  1222. - padding-left: 12px
  1223. - font-weight: 400
  1224. - font-size: 12px
  1225. - align-self: middle
  1226. - justify-self: start
  1227. icon:
  1228. - opacity: 0.3
  1229. - padding-left: 12px
  1230. - width: 35px
  1231. img_cell:
  1232. - justify-content: start
  1233. - align-self: middle
  1234. - margin: none
  1235. grid:
  1236. - grid-template-areas: '"i" "n" "slider" "l"'
  1237. - grid-template-columns: 1fr
  1238. - grid-template-rows: min-content fr min-content min-content
  1239. custom_fields:
  1240. slider:
  1241. card:
  1242. full_row: true
  1243. type: custom:slider-entity-row
  1244. entity: light.living_room_floor_wall_lamp
  1245. hide_state: true
  1246. value: 'off'
  1247. - type: custom:button-card
  1248. name: Floor Lamp
  1249. entity: switch.living_room_floor_lamp
  1250. icon: phu:floor-shade
  1251. show_icon: true
  1252. state:
  1253. - styles:
  1254. card:
  1255. - height: 120px
  1256. - border-radius: 15px
  1257. - font-size: 10px
  1258. - padding-bottom: 0px
  1259. - padding-top: 5px
  1260. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1261. name:
  1262. - padding-top: 0px
  1263. - padding-bottom: 30px
  1264. - padding-left: 12px
  1265. - font-weight: 400
  1266. - font-size: 12px
  1267. - align-self: middle
  1268. - justify-self: start
  1269. icon:
  1270. - padding-left: 12px
  1271. - width: 35px
  1272. - color: white
  1273. img_cell:
  1274. - justify-content: start
  1275. - align-self: middle
  1276. - margin: none
  1277. grid:
  1278. - grid-template-areas: '"i" "n" "slider" "l"'
  1279. - grid-template-columns: 1fr
  1280. - grid-template-rows: min-content fr min-content min-content
  1281. value: 'on'
  1282. - styles:
  1283. card:
  1284. - height: 120px
  1285. - border-radius: 15px
  1286. - font-size: 10px
  1287. - padding-bottom: 0px
  1288. - padding-top: 5px
  1289. - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
  1290. name:
  1291. - padding-top: 0px
  1292. - padding-bottom: 30px
  1293. - padding-left: 12px
  1294. - font-weight: 400
  1295. - font-size: 12px
  1296. - align-self: middle
  1297. - justify-self: start
  1298. icon:
  1299. - opacity: 0.3
  1300. - padding-left: 12px
  1301. - width: 35px
  1302. img_cell:
  1303. - justify-content: start
  1304. - align-self: middle
  1305. - margin: none
  1306. grid:
  1307. - grid-template-areas: '"i" "n" "slider" "l"'
  1308. - grid-template-columns: 1fr
  1309. - grid-template-rows: min-content fr min-content min-content
  1310. value: 'off'
  1311. title-card-button-overlay: false
  1312. gap: 1px
  1313. padding: 1px
  1314. child-padding: 1px
  1315. title-card:
  1316. type: custom:button-card
  1317. name: false
  1318. styles:
  1319. card:
  1320. - background-color: transparent
  1321. grid:
  1322. - grid-template-areas: '"icon title"'
  1323. - grid-template-columns: 30% 70%
  1324. - grid-template-rows: 1fr
  1325. - gap: 0px 0px
  1326. custom_fields:
  1327. icon:
  1328. card:
  1329. type: custom:button-card
  1330. name: false
  1331. show_state: false
  1332. icon: mdi:lightbulb-group-outline
  1333. styles:
  1334. card:
  1335. - background-color: transparent
  1336. - padding-right: 12px
  1337. icon:
  1338. - color: white
  1339. - width: 40px
  1340. - height: 40px
  1341. - background-color: '#35425c'
  1342. - border-radius: 45px
  1343. - padding: 10px
  1344. title:
  1345. card:
  1346. type: custom:button-card
  1347. name: Lights
  1348. show_state: false
  1349. icon: false
  1350. styles:
  1351. card:
  1352. - background-color: transparent
  1353. - border-style: none
  1354. name:
  1355. - justify-self: left
  1356. - font-size: 26px
  1357. - font-weight: 500
  1358. - font-color: '#b4c3cd'
  1359. - padding-right: 10px
  1360.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!