From dc783404d8ddabd44f63b0889bbeef2976ec4e5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Mon, 3 May 2021 14:06:18 +0200 Subject: [PATCH] Update: HACS compatibility --- hacs.json | 6 + ...-example.js => plex-meets-homeassistant.js | 308 +++++++++--------- 2 files changed, 160 insertions(+), 154 deletions(-) create mode 100644 hacs.json rename www/content-card-example.js => plex-meets-homeassistant.js (76%) diff --git a/hacs.json b/hacs.json new file mode 100644 index 0000000..1137db5 --- /dev/null +++ b/hacs.json @@ -0,0 +1,6 @@ +{ + "name": "Plex Meets Home Assistant", + "render_readme": true, + "content_in_root": true, + "filename": "plex-meets-homeassistant.js" +} diff --git a/www/content-card-example.js b/plex-meets-homeassistant.js similarity index 76% rename from www/content-card-example.js rename to plex-meets-homeassistant.js index 2dc3eb2..8506d6a 100644 --- a/www/content-card-example.js +++ b/plex-meets-homeassistant.js @@ -427,164 +427,164 @@ class ContentCardExample extends HTMLElement { let style = document.createElement("style"); style.textContent = ` - .detail h1 { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - position: relative; - padding: 5px 0px; - } - .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); + .detail h1 { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + position: relative; + padding: 5px 0px; } - 100% { - transform: rotate(360deg); + .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% { + 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; + } + + button[name="playButton"]::after { + content: ''; + display: inline-block; + position: relative; + top: 1px; + left: 2px; + border-style: solid; + border-width: 6px 0 6px 12px; + border-color: transparent transparent transparent white; + transition: 0.2s; } - } - .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 { - content: ''; - display: inline-block; - position: relative; - top: 1px; - left: 2px; - border-style: solid; - border-width: 6px 0 6px 12px; - border-color: transparent transparent transparent white; - transition: 0.2s; - } - - .interactiveArea button[name="playButton"] { - background: rgba(0,0,0,0.0); - border: 2px solid rgba(255,255,255,0.0); - } - - .interactiveArea:hover button[name="playButton"] { - 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; - } + .interactiveArea button[name="playButton"] { + background: rgba(0,0,0,0.0); + border: 2px solid rgba(255,255,255,0.0); + } - button[name="playButton"]:focus:after { - border-color: transparent transparent transparent black !important; - }`; + .interactiveArea:hover button[name="playButton"] { + 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); };