SHOW:
|
|
- or go back to the newest paste.
| 1 | type: 'custom:button-card' | |
| 2 | entity: light.office_2 | |
| 3 | show_label: true | |
| 4 | show_state: true | |
| 5 | label: | | |
| 6 | [[[ | |
| 7 | var bri = Math.round((states['light.office_2'].attributes.brightness) / 255 * 100); | |
| 8 | return '' + (bri) + '%'; | |
| 9 | ]]] | |
| 10 | aspect_ratio: 9/10 | |
| 11 | hold_action: | |
| 12 | action: call-service | |
| 13 | service: browser_mod.popup | |
| 14 | service_data: | |
| 15 | title: '[[[ return entity.attributes.friendly_name ]]]' | |
| 16 | deviceID: this | |
| 17 | hide_header: true | |
| 18 | style: | |
| 19 | $: | | |
| 20 | .mdc-dialog .mdc-dialog__container {
| |
| 21 | width: 100%; | |
| 22 | } | |
| 23 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
| |
| 24 | width: 100%; | |
| 25 | } | |
| 26 | .: | | |
| 27 | :host {
| |
| 28 | --mdc-theme-surface: rgba(0,0,0,0); | |
| 29 | --secondary-background-color: rgba(0,0,0,0); | |
| 30 | --ha-card-background: rgba(0,0,0,0); | |
| 31 | --mdc-dialog-scrim-color: rgba(0,0,0,0.5); | |
| 32 | --mdc-dialog-min-height: 100%; | |
| 33 | --mdc-dialog-min-width: 100%; | |
| 34 | --mdc-dialog-max-width: 100%; | |
| 35 | ||
| 36 | } | |
| 37 | mwc-icon-button {
| |
| 38 | color: #FFF; | |
| 39 | } | |
| 40 | card: | |
| 41 | type: entities | |
| 42 | entities: | |
| 43 | - type: 'custom:light-popup-card' | |
| 44 | entity: '[[[ return entity.entity_id ]]]' | |
| 45 | icon: none | |
| 46 | fullscreen: false | |
| 47 | brightnessWidth: 130px | |
| 48 | brightnessHeight: 360px | |
| 49 | borderRadius: 1.7em | |
| 50 | sliderColor: '#c7c7c7' | |
| 51 | sliderTrackColor: 'rgba(25, 25, 25, 0.9)' | |
| 52 | - type: 'custom:button-card' | |
| 53 | color_type: card | |
| 54 | tap_action: | |
| 55 | action: call-service | |
| 56 | service: browser_mod.close_popup | |
| 57 | styles: | |
| 58 | card: | |
| 59 | - height: 230px | |
| 60 | - width: 400px | |
| 61 | - background: 'rgba(0,0,0,0)' | |
| 62 | color: auto | |
| 63 | color_type: icon | |
| 64 | icon: 'mdi:ceiling-light' | |
| 65 | styles: | |
| 66 | card: | |
| 67 | - font-size: 14px | |
| 68 | - font-weight: bold | |
| 69 | label: | |
| 70 | - font-size: 10px | |
| 71 | - justify-self: start | |
| 72 | - padding-left: 10px | |
| 73 | - null | |
| 74 | grid: | |
| 75 | - grid-template-areas: '"i" "n" "s l"' | |
| 76 | - grid-template-columns: 1fr | |
| 77 | - grid-template-rows: 1fr min-content min-content | |
| 78 | name: | |
| 79 | - justify-self: start | |
| 80 | - padding-left: 10px | |
| 81 | - padding-bottom: px | |
| 82 | state: | |
| 83 | - justify-self: start | |
| 84 | - padding-left: 10px | |
| 85 | - font-size: 10px | |
| 86 | state: | |
| 87 | - value: 'off' | |
| 88 | styles: | |
| 89 | card: | |
| 90 | - filter: opacity(30%) | |
| 91 | icon: | |
| 92 | - filter: greyscale(100%) | |
| 93 | label: | |
| 94 | - filter: opacity(0%) | |
| 95 | - value: 'on' | |
| 96 | styles: | |
| 97 | state: | |
| 98 | - color: yellow | |
| 99 | icon: | |
| 100 | - color: gold | |
| 101 | - filter: opacity(80%) | |
| 102 |
