├── example.JPG ├── hacs.json ├── changelog.md ├── info.md ├── README.md └── shutter-cover-panel-card.js /example.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madmicio/shutter-cover-panel-card/HEAD/example.JPG -------------------------------------------------------------------------------- /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shutter cover panel card", 3 | "content_in_root": true, 4 | "filename": "shutter-cover-panel-card.js", 5 | "render_readme" : true 6 | } 7 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | ### ADDED 2 | 3 | - coverdistance: (now you can set between cover) 4 | 5 | ### ADDED 6 | 7 | - borderradius: (now you can set cover border-radius value) 8 | - buttonborderradius: (now you can set button border-radius value) 9 | -------------------------------------------------------------------------------- /info.md: -------------------------------------------------------------------------------- 1 | # NOTE: need in "your-theme.yaml" 2 | ```yaml 3 | #button 4 | active-background-button-color: '#0080ff' 5 | deactive-background-button-color: "#f2f0fa" 6 | button-border-standard: rgba(0, 128, 255, .5) 7 | state-icon-active-color: "#0080ff" 8 | ``` 9 | # Shutter Cover Panel Card 10 | ![all](example.JPG) 11 | 12 | 13 | # locelace config example 14 | 15 | **panel: true** REQUIRED 16 | ```yaml 17 | - title: '' 18 | panel: true 19 | path: shutter 20 | icon: 'mdi:window-shutter' 21 | badges: [] 22 | cards: 23 | - type: 'custom:shutter-cover-panel-card' 24 | title: Tapparelle 25 | innershadow: noenable 26 | iconemboss: noenable 27 | entities: 28 | - entity: cover.salone 29 | name: Salone 30 | - entity: cover.veneziana 31 | - entity: cover.porta_cucina 32 | name: Porta Cucina 33 | - entity: cover.cucina 34 | name: Cucina 35 | - entity: cover.sofia 36 | name: Sofia 37 | - entity: cover.camera_matrimoniale 38 | name: Matrimoniale 39 | - entity: cover.emma 40 | name: Emma 41 | sidebuttons: 42 | - entity: script.apri_tutto 43 | name: Apri Tutto 44 | label: tapparelle 45 | icon: 'mdi:window-shutter-open' 46 | cardtype: script 47 | - entity: script.chiudi_tutto 48 | name: Chiudi Tutto 49 | label: tapparelle 50 | icon: 'mdi:window-shutter' 51 | cardtype: script 52 | - entity: automation.chiusura_tapparella_alba 53 | name: chiusura invernale 54 | label: automazione 55 | icon: 'mdi:weather-sunset-up' 56 | cardtype: button 57 | - entity: automation.chiusura_tapparelle_invernale 58 | name: chiusura invernale 59 | label: automazione 60 | icon: 'mdi:weather-sunset-down' 61 | cardtype: button 62 | ``` 63 | **NOTE: if you do not need the buttons in the right column of the card you must still enter the following code** 64 | ```yaml 65 | sidebuttons: 66 | - entity: null 67 | ``` 68 | ## hacs install 69 | 70 | 1. install `shutter-cover-panel-card.js` plugin 71 | 72 | 2. Add a reference to `shutter-cover-panel-card.js` inside your `ui-lovelace.yaml` or at the top of the *raw config editor UI*: 73 | 74 | ```yaml 75 | resources: 76 | - type: module 77 | url: /hacsfiles/shutter-cover-panel-card/shutter-cover-panel-card.js 78 | ``` 79 | 80 | ## Install 81 | 82 | ### Manual install 83 | 84 | 1. Download and copy `shutter-cover-panel-card.js` from (https://github.com/madmicio/shutter-cover-panel-card) into your `config/www` directory. 85 | 86 | 2. Add a reference to `shutter-cover-panel-card.js` inside your `ui-lovelace.yaml` or at the top of the *raw config editor UI*: 87 | 88 | ```yaml 89 | resources: 90 | - url: /local/shutter-cover-panel-card.js?v=1 91 | type: module 92 | ``` 93 | 94 | ### Main Options 95 | | Name | Type | Default | Supported options | Description | 96 | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 97 | | `type` | string | **Required** | `custom:shutter-cover-panel-card` | Type of the card | 98 | | `entities` | string | **Required** | entity | list of entitity | 99 | | `innershadow` | | enable | enable/disable | enable - disable innershadow in the card | 100 | | `iconemboss` | | enable | enable/disable | enable - disable icon emboss effect | 101 | | `covercolor` | | "#0080ff" | your color | define the cover color | 102 | | `coverbackground` | | "#f2f0fa" | your color | define the background cover color and up-stop-downbuttos background color | 103 | | `background` | | tranpsarent | your color | define the background card color | 104 | | `coverWidth` | | 100px | | define the cover width | 105 | | `coverheight` | | 300px | | define the cover height | 106 | | `title` | | string | | card title | 107 | | `countText` | | aperte | | text after numer of open covers | 108 | | `borderradius` | | 15px | | cover border-radius value | 109 | | `buttonborderradius` | | 15px | | buttons border-radius value | 110 | | `coverdistance` | | 150px | | set distance between cover | 111 | | `sidebackground` | | "#f6f5fa" | | set sidebar background | 112 | 113 | ### entity Options 114 | | Name | Type | Default | Supported options | Description | 115 | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 116 | | `entities` | string | **required** | entity | entity_id | 117 | | `name` | string | optional | string | Define the name of the cover or automatically it takes the friendly name | 118 | 119 | ### side buttons Options 120 | | Name | Type | Default | Supported options | Description | 121 | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 122 | | `entity` | string | **require** | entity | entity_id | 123 | | `name` | string | optional | string | Define the name of the button | 124 | | `icon` | string | optional | `mdi:icon` | Icon to display. Will be overriden by the icon defined in a state | 125 | | `type` | string | **Required** | script / button | define the card style and function. in script mode it doesn't change appearance, just click effect , in button mode the icon becomes a button to activate / deactivate the entity || 126 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Shutter Cover Panel Card 2 | 3 | [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs) 4 | [![buymeacoffee_badge](https://img.shields.io/badge/Donate-buymeacoffe-ff813f?style=flat)](https://www.buymeacoffee.com/madmicio) 5 | 6 | ![all](example.JPG) 7 | 8 | 9 | # locelace config example 10 | 11 | **panel: true** REQUIRED 12 | ```yaml 13 | - title: '' 14 | panel: true 15 | path: shutter 16 | icon: 'mdi:window-shutter' 17 | badges: [] 18 | cards: 19 | - type: 'custom:shutter-cover-panel-card' 20 | title: Tapparelle 21 | innershadow: noenable 22 | iconemboss: noenable 23 | entities: 24 | - entity: cover.salone 25 | name: Salone 26 | - entity: cover.veneziana 27 | - entity: cover.porta_cucina 28 | name: Porta Cucina 29 | - entity: cover.cucina 30 | name: Cucina 31 | - entity: cover.sofia 32 | name: Sofia 33 | - entity: cover.camera_matrimoniale 34 | name: Matrimoniale 35 | - entity: cover.emma 36 | name: Emma 37 | sidebuttons: 38 | - entity: script.apri_tutto 39 | name: Apri Tutto 40 | label: tapparelle 41 | icon: 'mdi:window-shutter-open' 42 | cardtype: script 43 | - entity: script.chiudi_tutto 44 | name: Chiudi Tutto 45 | label: tapparelle 46 | icon: 'mdi:window-shutter' 47 | cardtype: script 48 | - entity: automation.chiusura_tapparella_alba 49 | name: chiusura invernale 50 | label: automazione 51 | icon: 'mdi:weather-sunset-up' 52 | cardtype: button 53 | - entity: automation.chiusura_tapparelle_invernale 54 | name: chiusura invernale 55 | label: automazione 56 | icon: 'mdi:weather-sunset-down' 57 | cardtype: button 58 | ``` 59 | **NOTE: if you do not need the buttons in the right column of the card you must still enter the following code** 60 | ```yaml 61 | sidebuttons: 62 | - entity: null 63 | ``` 64 | 65 | # NOTE: need in "your-theme.yaml" 66 | ```yaml 67 | #button 68 | active-background-button-color: '#0080ff' 69 | deactive-background-button-color: "#f2f0fa" 70 | button-border-standard: rgba(0, 128, 255, .5) 71 | state-icon-active-color: "#0080ff" 72 | ``` 73 | 74 | ## hacs install 75 | 76 | 1. install `shutter-cover-panel-card.js` plugin 77 | 78 | 2. Add a reference to `shutter-cover-panel-card.js` inside your `ui-lovelace.yaml` or at the top of the *raw config editor UI*: 79 | 80 | ```yaml 81 | resources: 82 | - type: module 83 | url: /hacsfiles/shutter-cover-panel-card/shutter-cover-panel-card.js 84 | ``` 85 | 86 | ## Install 87 | 88 | ### Manual install 89 | 90 | 1. Download and copy `shutter-cover-panel-card.js` from (https://github.com/madmicio/shutter-cover-panel-card) into your `config/www` directory. 91 | 92 | 2. Add a reference to `shutter-cover-panel-card.js` inside your `ui-lovelace.yaml` or at the top of the *raw config editor UI*: 93 | 94 | ```yaml 95 | resources: 96 | - url: /local/shutter-cover-panel-card.js?v=1 97 | type: module 98 | ``` 99 | 100 | ### Main Options 101 | | Name | Type | Default | Supported options | Description | 102 | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 103 | | `type` | string | **Required** | `custom:shutter-cover-panel-card` | Type of the card | 104 | | `entities` | string | **Required** | entity | list of entitity | 105 | | `innershadow` | | enable | enable/disable | enable - disable innershadow in the card | 106 | | `iconemboss` | | enable | enable/disable | enable - disable icon emboss effect | 107 | | `covercolor` | | "#0080ff" | your color | define the cover color | 108 | | `coverbackground` | | "#f2f0fa" | your color | define the background cover color and up-stop-downbuttos background color | 109 | | `background` | | tranpsarent | your color | define the background card color | 110 | | `coverWidth` | | 100px | | define the cover width | 111 | | `coverheight` | | 300px | | define the cover height | 112 | | `title` | | string | | card title | 113 | | `countText` | | aperte | | text after numer of open covers | 114 | | `borderradius` | | 15px | | cover border-radius value | 115 | | `buttonborderradius` | | 15px | | buttons border-radius value | 116 | | `coverdistance` | | 150px | | set distance between cover | 117 | | `sidebackground` | | "#f6f5fa" | | set sidebar background | 118 | 119 | ### entity Options 120 | | Name | Type | Default | Supported options | Description | 121 | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 122 | | `entities` | string | **required** | entity | entity_id | 123 | | `name` | string | optional | string | Define the name of the cover or automatically it takes the friendly name | 124 | 125 | ### side buttons Options 126 | | Name | Type | Default | Supported options | Description | 127 | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 128 | | `entity` | string | **require** | entity | entity_id | 129 | | `name` | string | optional | string | Define the name of the button | 130 | | `icon` | string | optional | `mdi:icon` | Icon to display. Will be overriden by the icon defined in a state | 131 | | `type` | string | **Required** | script / button | define the card style and function. in script mode it doesn't change appearance, just click effect , in button mode the icon becomes a button to activate / deactivate the entity || 132 | 133 | Buy Me A Coffee 134 | 135 | -------------------------------------------------------------------------------- /shutter-cover-panel-card.js: -------------------------------------------------------------------------------- 1 | import { 2 | LitElement, 3 | html, 4 | css 5 | } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module"; 6 | class ShutterCoverPanelcard extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | hass: {}, 11 | config: {}, 12 | active: {} 13 | }; 14 | } 15 | 16 | constructor() { 17 | super(); 18 | } 19 | 20 | render() { 21 | var coverWidth = this.config.coverWidth ? this.config.coverWidth : "100px"; 22 | var coverHeight = this.config.coverHeight ? this.config.coverHeight : "300px"; 23 | var innershadow = this.config.innershadow == "enable" ? true : false; 24 | var iconemboss = this.config.iconemboss == "enable" ? true : false; 25 | var countText = this.config.countText ? this.config.countText : "aperte"; 26 | var entityCounter = 0; 27 | var background = this.config.background ? this.config.background : "transparent"; 28 | var sidebackground = this.config.sidebackground ? this.config.sidebackground : "#f6f5fa"; 29 | var covercolor = this.config.covercolor ? this.config.covercolor : "#0080ff"; 30 | var coverbackground = this.config.coverbackground ? this.config.coverbackground : "#f2f0fa"; 31 | var borderradius = this.config.borderradius ? this.config.borderradius : "15px"; 32 | var buttonborderradius = this.config.buttonborderradius ? this.config.buttonborderradius : "15px"; 33 | var coverdistance = this.config.coverdistance ? this.config.coverdistance : "150px"; 34 | 35 | 36 | return html` 37 |
38 | 39 | 40 |
41 |
42 | ${this.config.entities.map(ent => { 43 | entityCounter++; 44 | const stateObj = this.hass.states[ent.entity]; 45 | return stateObj ? html` 46 |
47 |
48 |

${ent.name || stateObj.attributes.friendly_name}

49 |

${stateObj.state === "closed" ? 0 : Math.round(stateObj.attributes.current_position)}

50 |
51 | this._setCoverPosition(stateObj, (e.target.value -100) * -1)}> 52 |
53 |
54 |
55 |
56 |
57 | this._up(stateObj)} /> 58 | 59 |
60 |
61 | this._stop(stateObj)} /> 62 | 63 |
64 |
65 | this._down(stateObj)} /> 66 | 67 |
68 |
69 | `: html``; 70 | })} 71 |
72 |
73 |
74 |
75 |
76 |
77 |

${this.config.title}

78 |

${this._stateCount()} ${countText}

79 |
80 |
81 |
82 | ${this.config.sidebuttons.map(ent => { 83 | const sideBnt = this.hass.states[ent.entity]; 84 | return sideBnt ? html` 85 |
86 |
87 | ${ent.cardtype == "button" ? html` 88 |
this._switch(sideBnt)}> 90 | 92 |
93 |
${ent.name || sideBnt.attributes.friendly_name}
94 |
${ent.label}
95 |
96 | ` : html` 97 | `} 98 | ${ent.cardtype == "script" ? html` 99 |
this._switch(sideBnt)}> 100 | 101 |
102 |
${ent.name || sideBnt.attributes.friendly_name}
103 |
${ent.label}
104 |
105 | ` : html` 106 | `} 107 | 108 | `: html``; 109 | })} 110 |
111 | `; 112 | } 113 | 114 | updated() {} 115 | 116 | _setCoverPosition(state, value) { 117 | this.hass.callService("cover", "set_cover_position", { 118 | entity_id: state.entity_id, 119 | position: value 120 | }); 121 | } 122 | 123 | _stateCount() { 124 | let count = 0; 125 | this.config.entities.map(ent => { 126 | const stateObj = this.hass.states[ent.entity]; 127 | if(stateObj.state === "open") { 128 | count++; 129 | } 130 | }) 131 | return count; 132 | } 133 | 134 | 135 | _switch(state) { 136 | this.hass.callService("homeassistant", "toggle", { 137 | entity_id: state.entity_id 138 | }); 139 | } 140 | 141 | _up(state) { 142 | this.hass.callService("cover", "open_cover", { 143 | entity_id: state.entity_id 144 | }); 145 | } 146 | 147 | _stop(state) { 148 | this.hass.callService("cover", "stop_cover", { 149 | entity_id: state.entity_id 150 | }); 151 | } 152 | 153 | _down(state) { 154 | this.hass.callService("cover", "close_cover", { 155 | entity_id: state.entity_id 156 | }); 157 | } 158 | 159 | setConfig(config) { 160 | if (!config.entities) { 161 | throw new Error("You need to define entities"); 162 | } 163 | if (!config.title) { 164 | throw new Error("You need to define a title"); 165 | } 166 | 167 | this.config = config; 168 | } 169 | 170 | getCardSize() { 171 | return this.config.entities.length + 1; 172 | } 173 | 174 | static get styles() { 175 | return css` 176 | 177 | 178 | 179 | .frame_1 { 180 | 181 | display:inline-block; 182 | justify-self: stretch; 183 | border-radius:20px; 184 | height: 70px; 185 | width: 290px 186 | 187 | } 188 | 189 | .grid-container { 190 | display: grid; 191 | grid-template-columns: 55px auto; 192 | grid-template-rows: 50% 50%; 193 | grid-template-areas: 194 | 'menu main' 195 | 'menu footer'; 196 | grid-gap: 1px; 197 | background-color: transparent; 198 | padding: 1px; 199 | 200 | } 201 | 202 | .grid-container > div { 203 | text-align: left; 204 | font-size: 14px; 205 | } 206 | 207 | .card_shadow { 208 | 209 | height:100%; 210 | width: 98%; 211 | 212 | border-radius:20px; 213 | display:flex; 214 | flex-direction: row; 215 | // justify-self: stretch; 216 | box-shadow: inset -6px -6px 6px 0 rgba(255,255,255,.5), inset 6px 6px 6px 0 rgba(0,0,0,.1); 217 | } 218 | 219 | .card_no_shadow { 220 | height:100%; 221 | border-radius:20px; 222 | display:flex; 223 | flex-direction: row; 224 | justify-self: stretch; 225 | 226 | } 227 | 228 | .inner-main { 229 | width:100%; 230 | display:flex; 231 | flex-direction:column; 232 | justify-self: stretch; 233 | 234 | margin-left:15px; 235 | margin-top:10px; 236 | margin-right:15px; 237 | margin-bottom:10px; 238 | } 239 | 240 | .inner-main_no_shadow { 241 | width:100%; 242 | display:flex; 243 | flex-direction:column; 244 | justify-self: stretch; 245 | 246 | } 247 | 248 | .iconside { 249 | position: relative; 250 | 251 | border-radius: var(--buttonborderradius); 252 | display: block; 253 | padding-top:17px; 254 | grid-area: menu; 255 | margin: 0 auto; 256 | width:58px; 257 | height:42px; 258 | text-align: center; 259 | -webkit-transition-duration: 0.4s; /* Safari */ 260 | transition-duration: 0.4s; 261 | text-decoration: none; 262 | overflow: hidden; 263 | 264 | } 265 | .iconside:hover { 266 | background-color: var(--active-background-button-color); 267 | } 268 | 269 | .iconside:after { 270 | content: ""; 271 | background: #90EE90; 272 | display: block; 273 | position: absolute; 274 | padding-top: 300%; 275 | padding-left: 350%; 276 | margin-left: -20px!important; 277 | margin-top: -120%; 278 | opacity: 0; 279 | transition: all 0.8s 280 | } 281 | 282 | .iconside:active:after { 283 | padding: 0; 284 | margin: 0; 285 | opacity: 1; 286 | transition: 0s 287 | } 288 | 289 | .click { 290 | cursor: pointer; 291 | } 292 | 293 | .icon_shadow { 294 | box-shadow: -3px -3px 3px 0 rgba(255,255,255,.2),6px 6px 6px 0 rgba(0,0,0,.1); 295 | border: solid 1px rgba(255,255,255, .2) 296 | 297 | } 298 | 299 | .text { 300 | grid-area: main; 301 | color: var(--primary-text-color); 302 | display: block; 303 | padding-top:10px; 304 | font-size: 12px; 305 | font-weight: bold; 306 | font-family: Helvetica; 307 | letter-spacing: '-0.01em'; 308 | 309 | } 310 | 311 | .label { 312 | grid-area: footer; 313 | color: var(--primary-text-color); 314 | display: block; 315 | font-size: 8px; 316 | font-family: Helvetica; 317 | letter-spacing: '-0.01em'; 318 | } 319 | 320 | .left_row { 321 | margin-left:15px; 322 | margin-right:15px; 323 | } 324 | 325 | ha-icon { 326 | 327 | width:26px; 328 | height:26px; 329 | display: block; 330 | 331 | margin-left: auto; 332 | margin-right: auto; 333 | 334 | } 335 | 336 | 337 | :host { 338 | 339 | } 340 | .page { 341 | width:100%; 342 | height:100%; 343 | display:flex; 344 | flex-direction: row; 345 | } 346 | .page > .side { 347 | padding: 15px; 348 | width: 300px; 349 | display:flex; 350 | flex-direction:column; 351 | background: transparent; 352 | align-items:flex-end; 353 | // background: linear-gradient(235deg, rgba(28,122,226,1) 0%, rgba(66,230,222,1) 90%); 354 | // justify-content:space-between 355 | } 356 | .side .header { 357 | 358 | } 359 | 360 | .side .center { 361 | display:flex; 362 | flex-direction:column; 363 | 364 | } 365 | .side .center .icon { 366 | display:block; 367 | overflow:hidden; 368 | } 369 | .side .center .icon ha-icon { 370 | width: 80px; 371 | height: 80px; 372 | color: var(--state-icon-active-color); 373 | } 374 | .side .center h1 { 375 | color: var(--primary-text-color); 376 | width: 290px; 377 | margin:20px 0 0 0; 378 | font-weight:400; 379 | font-size: 35px; 380 | line-height: 40px; 381 | } 382 | .side .center h3 { 383 | color: var(--primary-text-color); 384 | margin:5px 0 0 0; 385 | font-size: 20px; 386 | font-weight: 400; 387 | margin-bottom: 20px; 388 | 389 | } 390 | 391 | .side .bottom { 392 | } 393 | 394 | .bottom_space { 395 | margin-top:20px; 396 | } 397 | 398 | 399 | .page > .main { 400 | width:86%; 401 | // margin-top: 150px; 402 | // overflow: hidden; 403 | // overflow-x:scroll; 404 | } 405 | .page > .main > .inner-main { 406 | display:flex; 407 | flex-direction:row; 408 | align-items:center; 409 | height:100%; 410 | margin:auto; 411 | } 412 | .page > .main > .inner-main > .cover { 413 | width: var(--coverdistance); 414 | display:inline-block; 415 | } 416 | 417 | .cover .icon { 418 | margin: 0 auto; 419 | text-align:center; 420 | display:block; 421 | height: 40px; 422 | width: 40px; 423 | color: rgba(255,255,255,0.3); 424 | font-size: 30px; 425 | padding-top:5px; 426 | } 427 | .cover .icon ha-icon { 428 | width:30px; 429 | height:30px; 430 | } 431 | .cover .icon.on ha-icon { 432 | fill: #f7d959; 433 | } 434 | h2 { 435 | color: var(--primary-text-color); 436 | display: block; 437 | font-weight: 300; 438 | margin-bottom: 10px; 439 | text-align: center; 440 | font-size:20px; 441 | margin-top:0; 442 | } 443 | h4 { 444 | color: var(--primary-text-color); 445 | display: block; 446 | font-weight: 300; 447 | margin-bottom: 30px; 448 | text-align: center; 449 | font-size:16px; 450 | margin-top:0; 451 | } 452 | h4.cover:after { 453 | content: "%"; 454 | padding-left: 1px; 455 | } 456 | 457 | .range-holder { 458 | height: var(--slider-height); 459 | position:relative; 460 | display: block; 461 | } 462 | .range-holder input[type="range"] { 463 | outline: 0; 464 | border: solid 2px var(--coverbackground); 465 | border-radius: var(--borderradius); 466 | width: var(--slider-height); 467 | margin: 0; 468 | transition: box-shadow 0.2s ease-in-out; 469 | -webkit-transform:rotate(90deg); 470 | -moz-transform:rotate(90deg); 471 | -o-transform:rotate(90deg); 472 | -ms-transform:rotate(90deg); 473 | transform:rotate(90deg); 474 | overflow: hidden; 475 | height: var(--slider-width); 476 | -webkit-appearance: none; 477 | background-color: var(--coverbackground); 478 | position: absolute; 479 | top: calc(50% - (var(--slider-width) / 2)); 480 | right: calc(50% - (var(--slider-height) / 2)); 481 | } 482 | .range-holder input[type="range"]::-webkit-slider-runnable-track { 483 | height: var(--slider-width); 484 | -webkit-appearance: none; 485 | color: #636363; 486 | margin-top: -1px; 487 | transition: box-shadow 0.2s ease-in-out; 488 | } 489 | .range-holder input[type="range"]::-webkit-slider-thumb { 490 | width: 25px; 491 | border-right:10px solid var(--covercolor); 492 | border-left:10px solid var(--covercolor); 493 | border-top:20px solid var(--covercolor); 494 | border-bottom:20px solid var(--covercolor); 495 | -webkit-appearance: none; 496 | height: 80px; 497 | cursor: ns-resize; 498 | background: var(--covercolor); 499 | box-shadow: -350px 0 0 350px var(--covercolor), inset 0 0 0 80px #e3edf7; 500 | // border-radius: 25px; 501 | transition: box-shadow 0.2s ease-in-out; 502 | position: relative; 503 | top: calc((var(--slider-width) - 80px) / 2); 504 | } 505 | .range-holder input[type="range"].on::-webkit-slider-thumb { 506 | border-color: #1c7ae2; 507 | box-shadow: -350px 0 0 350px #1c7ae2, inset 0 0 0 80px #FFF; 508 | } 509 | 510 | 511 | .push { 512 | margin-top:10px; 513 | display:flex; 514 | align-items:center; 515 | justify-content:center; 516 | } 517 | 518 | .push > input.push-btn { 519 | display: none; 520 | } 521 | .push > input.push-btn + label { 522 | border: 0px solid rgba(57,128,228,0.4); 523 | background: var(--coverbackground); 524 | 525 | width:70px; 526 | height:50px; 527 | text-align:center; 528 | line-height:50px; 529 | cursor: pointer; 530 | border-radius: var(--buttonborderradius); 531 | color: #b2abcf; 532 | display:block; 533 | font-size:22px; 534 | } 535 | 536 | .push > input.push-btn + label:active, 537 | .push:hover > input.push-btn + label { 538 | background: var(--state-icon-active-color); 539 | color: #fff; 540 | border-color: #1c7ae2; 541 | } 542 | 543 | 544 | 545 | `; 546 | } 547 | 548 | } 549 | 550 | customElements.define('shutter-cover-panel-card', ShutterCoverPanelcard); 551 | --------------------------------------------------------------------------------