jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix media control card styling (#4845)

Browse Source
This commit is contained in:
Bram Kragten 2020-02-11 15:43:46 +01:00 committed by GitHub
parent 9fce60065b
commit 1437b4c4b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -98,15 +98,13 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
class="progress" class="progress"
></paper-progress> ></paper-progress>
`} `}
<div class="controls flex"> <div class="controls">
<div class="left flex"> <paper-icon-button
<paper-icon-button icon="hass:power"
icon="hass:power" .action=${stateObj.state === "off" ? "turn_on" : "turn_off"}
.action=${stateObj.state === "off" ? "turn_on" : "turn_off"} @click=${this._handleClick}
@click=${this._handleClick} ></paper-icon-button>
></paper-icon-button> <div class="playback-controls">
</div>
<div class="center flex">
<paper-icon-button <paper-icon-button
icon="hass:skip-previous" icon="hass:skip-previous"
.action=${"media_previous_track"} .action=${"media_previous_track"}
@ -128,12 +126,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
@click=${this._handleClick} @click=${this._handleClick}
></paper-icon-button> ></paper-icon-button>
</div> </div>
<div class="right flex"> <paper-icon-button
<paper-icon-button icon="hass:dots-vertical"
icon="hass:dots-vertical" @click="${this._handleMoreInfo}"
@click="${this._handleMoreInfo}" ></paper-icon-button>
></paper-icon-button>
</div>
</div> </div>
</ha-card> </ha-card>
`; `;
@ -224,7 +220,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
} }
.no-image { .no-image {
padding-bottom: 20%; padding-bottom: 88px;
} }
.no-image > .image { .no-image > .image {
@ -236,37 +232,27 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
.no-image > .caption { .no-image > .caption {
background-color: initial; background-color: initial;
box-sizing: border-box;
height: 88px;
} }
.controls { .controls {
align-content: space-evenly;
padding: 8px; padding: 8px;
} display: flex;
justify-content: space-between;
.controls > div {
width: 33%;
align-items: center; align-items: center;
} }
.flex { .controls > div {
display: flex; display: flex;
align-items: center;
} }
.left { .controls paper-icon-button {
justify-content: flex-start;
}
.center {
justify-content: center;
}
.right {
justify-content: flex-end;
}
paper-icon-button {
width: 44px; width: 44px;
height: 44px; height: 44px;
}
paper-icon-button {
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
} }