Merge pull request #551 from dermotduffy/hover-menu-disappearing

Change the hover menu to only show up when the mouse is over the menu
This commit is contained in:
Dermot Duffy
2022-05-08 17:09:11 -07:00
committed by GitHub
2 changed files with 2 additions and 3 deletions
+1 -1
View File
@@ -815,7 +815,7 @@ This card supports several menu styles.
| ------------- | --------------------------------------------- | - |
|`hidden`| Hide the menu by default, expandable upon clicking the Frigate button. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
|`overlay`| Overlay the menu over the card contents. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`hover`| Overlay the menu over the card contents when the mouse is over the card / touch on the card, otherwise it is not shown. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`hover`| Overlay the menu over the card contents when the mouse is over the menu, otherwise it is not shown. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`outside`| Render the menu outside the card (i.e. above it if `position` is `top`, or below it if `position` is `bottom`). The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-above.png" alt="Menu above" width="400px"> |
|`none`| No menu is shown. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-none.png" alt="No Menu" width="400px"> |
+1 -2
View File
@@ -62,8 +62,7 @@ frigate-card-menu[data-style='hover'] {
.outer + frigate-card-menu[data-style='hover'] {
opacity: 0;
}
.outer:hover + frigate-card-menu[data-style='hover'],
frigate-card-menu[data-mode='hover']:hover {
frigate-card-menu[data-style='hover']:hover {
opacity: 1;
}