mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
parent
34d50f0c90
commit
eba3c535bf
@ -96,25 +96,23 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
|||||||
@value-changing=${this._dragEvent}
|
@value-changing=${this._dragEvent}
|
||||||
@value-changed=${this._setBrightness}
|
@value-changed=${this._setBrightness}
|
||||||
></round-slider>
|
></round-slider>
|
||||||
|
<ha-icon
|
||||||
|
class="light-icon"
|
||||||
|
data-state="${stateObj.state}"
|
||||||
|
.icon="${stateIcon(stateObj)}"
|
||||||
|
style="${styleMap({
|
||||||
|
filter: this._computeBrightness(stateObj),
|
||||||
|
color: this._computeColor(stateObj),
|
||||||
|
})}"
|
||||||
|
@click="${this._handleTap}"
|
||||||
|
></ha-icon>
|
||||||
</div>
|
</div>
|
||||||
<div id="tooltip">
|
<div id="tooltip">
|
||||||
<div class="icon-state">
|
<div class="brightness" @ha-click="${this._handleTap}">
|
||||||
<ha-icon
|
${brightness} %
|
||||||
class="light-icon"
|
</div>
|
||||||
data-state="${stateObj.state}"
|
<div class="name">
|
||||||
.icon="${stateIcon(stateObj)}"
|
${this._config.name || computeStateName(stateObj)}
|
||||||
style="${styleMap({
|
|
||||||
filter: this._computeBrightness(stateObj),
|
|
||||||
color: this._computeColor(stateObj),
|
|
||||||
})}"
|
|
||||||
@click="${this._handleTap}"
|
|
||||||
></ha-icon>
|
|
||||||
<div class="brightness" @ha-click="${this._handleTap}">
|
|
||||||
${brightness} %
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
${this._config.name || computeStateName(stateObj)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ha-card>
|
</ha-card>
|
||||||
@ -165,19 +163,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
|||||||
right: 0;
|
right: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-state {
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform: translate(0, 25%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#light {
|
#light {
|
||||||
margin: 0 auto;
|
margin: auto;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 32px;
|
padding-bottom: 32px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -187,19 +176,21 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
|||||||
width: 160px;
|
width: 160px;
|
||||||
}
|
}
|
||||||
#light round-slider {
|
#light round-slider {
|
||||||
z-index: 20 !important;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
--round-slider-path-color: var(--disabled-text-color);
|
--round-slider-path-color: var(--disabled-text-color);
|
||||||
--round-slider-bar-color: var(--primary-color);
|
--round-slider-bar-color: var(--primary-color);
|
||||||
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-icon {
|
.light-icon {
|
||||||
margin: auto;
|
position: absolute;
|
||||||
|
margin: 0 auto;
|
||||||
width: 76px;
|
width: 76px;
|
||||||
height: 76px;
|
height: 76px;
|
||||||
color: var(--paper-item-icon-color, #44739e);
|
color: var(--paper-item-icon-color, #44739e);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-icon[data-state="on"] {
|
.light-icon[data-state="on"] {
|
||||||
@ -211,7 +202,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
padding-top: 32px;
|
position: absolute;
|
||||||
|
top: 160px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
font-size: var(--name-font-size);
|
font-size: var(--name-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -219,8 +213,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
|||||||
font-size: var(--brightness-font-size);
|
font-size: var(--brightness-font-size);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
top: 135px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 45%;
|
|
||||||
transform: translate(-50%);
|
transform: translate(-50%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s ease-in-out;
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user