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

Update: HACS compatibility

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 28aa21697a
commit dc783404d8
2 changed files with 160 additions and 154 deletions
Show Stats Download Patch File Download Diff File

6
hacs.json
Unescape View File

@ -0,0 +1,6 @@
{
"name": "Plex Meets Home Assistant",
"render_readme": true,
"content_in_root": true,
"filename": "plex-meets-homeassistant.js"
}

296
www/content-card-example.js → plex-meets-homeassistant.js
Unescape View File

@ -427,164 +427,164 @@ class ContentCardExample extends HTMLElement {
let style = document.createElement("style"); let style = document.createElement("style");
style.textContent = ` style.textContent = `
.detail h1 { .detail h1 {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding: 5px 0px; padding: 5px 0px;
} }
.detailDesc { .detailDesc {
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid orange;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: orange transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
} }
100% { .lds-ring {
transform: rotate(360deg); display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid orange;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: orange transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.detail {
position: absolute;
left: 247px;
width: calc(100% - 267px);
z-index: 4;
transition: 0.5s;
color: rgba(255,255,255,0);
}
.contentbg {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
z-index: 0;
transition: 0.5s;
left: 0;
top: 0;
}
.yearElem {
color:hsla(0,0%,100%,.45);
position: relative;
}
.titleElem {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.movieElem {
margin-bottom:5px;
background-repeat: no-repeat;
background-size: contain;
border-radius: 5px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.container {
z-index: 1;
float:left;
margin-bottom: 20px;
margin-right: 10px;
transition: 0.5s;
}
.interactiveArea {
position: relative;
width: 100%;
height: 100%;
transition: 0.5s;
display: flex;
align-items: center;
justify-content: center;
}
.interactiveArea:hover {
background: rgba(0,0,0,0.3);
}
button[name="playButton"] {
width: 40px;
height: 40px;
border: 2px solid white;
border-radius: 100%;
margin: auto;
cursor: pointer;
transition: 0.2s;
}
button[name="playButton"]:hover {
background: orange !important;
border: 2px solid orange !important;
}
button[name="playButton"]:focus {
outline: 0;
background: orange !important;
border: 2px solid orange !important;
box-shadow: 0 0 0 3px orange !important;
} }
}
.detail {
position: absolute;
left: 247px;
width: calc(100% - 267px);
z-index: 4;
transition: 0.5s;
color: rgba(255,255,255,0);
}
.contentbg {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
z-index: 0;
transition: 0.5s;
left: 0;
top: 0;
}
.yearElem {
color:hsla(0,0%,100%,.45);
position: relative;
}
.titleElem {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.movieElem {
margin-bottom:5px;
background-repeat: no-repeat;
background-size: contain;
border-radius: 5px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.container {
z-index: 1;
float:left;
margin-bottom: 20px;
margin-right: 10px;
transition: 0.5s;
}
.interactiveArea {
position: relative;
width: 100%;
height: 100%;
transition: 0.5s;
display: flex;
align-items: center;
justify-content: center;
}
.interactiveArea:hover {
background: rgba(0,0,0,0.3);
}
button[name="playButton"] {
width: 40px;
height: 40px;
border: 2px solid white;
border-radius: 100%;
margin: auto;
cursor: pointer;
transition: 0.2s;
}
button[name="playButton"]:hover {
background: orange !important;
border: 2px solid orange !important;
}
button[name="playButton"]:focus {
outline: 0;
background: orange !important;
border: 2px solid orange !important;
box-shadow: 0 0 0 3px orange !important;
}
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;
} }
.interactiveArea button[name="playButton"] { .interactiveArea button[name="playButton"] {
background: rgba(0,0,0,0.0); background: rgba(0,0,0,0.0);
border: 2px solid rgba(255,255,255,0.0); border: 2px solid rgba(255,255,255,0.0);
} }
.interactiveArea:hover button[name="playButton"] { .interactiveArea:hover button[name="playButton"] {
background: rgba(0,0,0,0.4); background: rgba(0,0,0,0.4);
border: 2px solid rgba(255,255,255,1); border: 2px solid rgba(255,255,255,1);
} }
.interactiveArea button[name="playButton"]:after { .interactiveArea button[name="playButton"]:after {
border-color: transparent transparent transparent rgba(255,255,255,0); border-color: transparent transparent transparent rgba(255,255,255,0);
} }
.interactiveArea:hover button[name="playButton"]:after { .interactiveArea:hover button[name="playButton"]:after {
border-color: transparent transparent transparent rgba(255,255,255,1); border-color: transparent transparent transparent rgba(255,255,255,1);
} }
button[name="playButton"]:hover:after { button[name="playButton"]:hover:after {
border-color: transparent transparent transparent black !important; border-color: transparent transparent transparent black !important;
} }
button[name="playButton"]:focus:after { button[name="playButton"]:focus:after {
border-color: transparent transparent transparent black !important; border-color: transparent transparent transparent black !important;
}`; }`;
this.appendChild(style); this.appendChild(style);
}; };
Write Preview
Loading…
Cancel
Save