HomeAssistant
/
PlexMeetsHomeAssistant
mirror of https://github.com/JurajNyiri/PlexMeetsHomeAssistant.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update: Play button now only visible on hover

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 19cb6fc99c
commit 61e375952d
1 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File

117
www/content-card-example.js
Unescape View File

@ -113,58 +113,75 @@ class ContentCardExample extends HTMLElement {
let style = document.createElement("style"); let style = document.createElement("style");
style.textContent = ` style.textContent = `
.interactiveArea { .interactiveArea {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.5s; transition: 0.5s;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.interactiveArea:hover { .interactiveArea:hover {
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
} }
button[name="playButton"] { button[name="playButton"] {
width: 40px; width: 40px;
height: 40px; height: 40px;
background: rgba(0,0,0,0.4); border: 2px solid white;
border: 2px solid white; border-radius: 100%;
border-radius: 100%; margin: auto;
margin: auto; cursor: pointer;
cursor: pointer; transition: 0.2s;
transition: 0.2s; }
} button[name="playButton"]:hover {
button[name="playButton"]:hover { background: orange !important;
background: orange; border: 2px solid orange !important;
border: 2px solid orange; }
} button[name="playButton"]:focus {
button[name="playButton"]:focus { outline: 0;
outline: 0; background: orange !important;
background: orange; border: 2px solid orange !important;
border: 2px solid orange; box-shadow: 0 0 0 3px orange !important;
box-shadow: 0 0 0 3px orange; }
}
button[name="playButton"]::after {
button[name="playButton"]::after { content: '';
content: ''; display: inline-block;
display: inline-block; position: relative;
position: relative; top: 1px;
top: 1px; left: 2px;
left: 2px; border-style: solid;
border-style: solid; border-width: 6px 0 6px 12px;
border-width: 6px 0 6px 12px; border-color: transparent transparent transparent white;
border-color: transparent transparent transparent white; transition: 0.2s;
transition: 0.2s; }
}
button[name="playButton"]:hover:after { .interactiveArea button[name="playButton"] {
border-color: transparent transparent transparent black; background: rgba(0,0,0,0.0);
} border: 2px solid rgba(255,255,255,0.0);
}
button[name="playButton"]:focus:after { .interactiveArea:hover button[name="playButton"] {
border-color: transparent transparent transparent black; background: rgba(0,0,0,0.4);
}`; border: 2px solid rgba(255,255,255,1);
}
.interactiveArea button[name="playButton"]:after {
border-color: transparent transparent transparent rgba(255,255,255,0);
}
.interactiveArea:hover button[name="playButton"]:after {
border-color: transparent transparent transparent rgba(255,255,255,1);
}
button[name="playButton"]:hover:after {
border-color: transparent transparent transparent black !important;
}
button[name="playButton"]:focus:after {
border-color: transparent transparent transparent black !important;
}`;
this.appendChild(style); this.appendChild(style);
}; };

Write Preview
Loading…
Cancel
Save