BREAKING! Use card-mod styles in popup instead

README.md

@@ -257,20 +257,11 @@ will display the specified `entities` card as a popup on the current device and
 ![popup-example](https://user-images.githubusercontent.com/1299821/60288984-a7cb6b00-9915-11e9-9322-324323a9ec6e.png)
 
 The optional parameter `large: true` will make the popup wider.  
-The optional parameter `style:` will apply CSS style options to the popup.  
 The optional parameter `hide_header: true` will hide the header bar and close button.  
 The optional parameter `auto_close: true` will make the popup close automatically when the mouse is moved or a key is pressed on the keyboard. This also removes the header bar.  
 The optional parameter `time:` (only useable if `auto_close: true` is also set) will turn the popup into a "screensaver". See the `blackout` command below.  
 
-Ex:
-```yaml
-  style:
-    border-radius: 20px
-    --ha-card-border-radius: 20px
-    --ha-card-background: red
-```
-
-Note: Sometimes this doesn't work if the *device* is not currently displaying a lovelace path. I'm looking into that...
+If [card-mod](https://github.com/thomasloven/lovelace-card-mod) is installed, the popup can be styled by the optional `style` parameter, or by the `card-mod-more-info[-yaml]` theme variable.
 
 ### close_popup
 ```

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "browser_mod",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -655,7 +655,7 @@
       "dev": true
     },
     "card-tools": {
-      "version": "github:thomasloven/lovelace-card-tools#adba94f7a24d7d9e87856613530190b8a13b740c",
+      "version": "github:thomasloven/lovelace-card-tools#9ecbbe40c4550901d9ae7335491cf1ed442496d0",
       "from": "github:thomasloven/lovelace-card-tools"
     },
     "chalk": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser_mod",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
   "scripts": {
     "build": "webpack",

test/configuration.yaml

@@ -14,3 +14,13 @@ lovelace:
       mode: yaml
       title: yaml
       filename: lovelace.yaml
+
+frontend:
+  themes:
+    test:
+      card-mod-theme: test
+      card-mod-more-info-yaml: |
+        $: |
+          .mdc-dialog {
+            backdrop-filter: grayscale(0.7) blur(5px);
+          }

test/lovelace.yaml

@@ -46,10 +46,23 @@ views:
             deviceID: this
             title: Test
             style:
-              border-radius: 20px
+              .: |
+                app-toolbar {
+                  background: rgba(0,0,0,0.5) !important;
+                }
+              $: |
+                .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
+                  border-radius: 20px;
+                  background: rgba(0,0,0,0);
+                }
             card:
               type: markdown
               content: Hello!
+              style: |
+                ha-card {
+                  --ha-card-background: rgba(0,0,0,0.5);
+                  color: white;
+                }
 
       - type: button
         entity: sun.sun