flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a hover-card menu style.

Browse Source
This commit is contained in:
Dermot Duffy
2022-10-10 20:43:35 -07:00
parent 5fac1c2e1f
commit c35fdc56d5
7 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/card.scss
+7 -4
View File
@@ -58,18 +58,22 @@ div.main.curve-bottom {
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
/* The 'hover' menu mode is styling applied outside of the menu itself */
frigate-card-menu[data-style='hover'] {
/* The 'hover' menu mode is styled applied outside of the menu itself */
frigate-card-menu[data-style*='hover'] {
z-index: 1;
transition: opacity 0.5s ease;
}
.main + frigate-card-menu[data-style='hover'] {
.main + frigate-card-menu[data-style*='hover'] {
opacity: 0;
}
frigate-card-menu[data-style='hover']:hover {
opacity: 1;
}
.main:hover + frigate-card-menu[data-style='hover-card'],
frigate-card-menu[data-style='hover-card']:hover {
opacity: 1;
}
ha-card {
display: flex;
@@ -98,7 +102,6 @@ ha-card.triggered {
animation: warning-pulse 5s infinite;
}
frigate-card-live.hidden {
// Live view will be rendered but hidden for live preloading.
display: none;
src/scss/menu.scss
+7 -7
View File
@@ -114,8 +114,8 @@ div.opposing {
}
:host(:not([data-style='outside'])[data-style='overlay'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style='overlay'][data-position='right']) div > *,
:host(:not([data-style='outside'])[data-style='hover'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style='hover'][data-position='right']) div > *,
:host(:not([data-style='outside'])[data-style*='hover'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style*='hover'][data-position='right']) div > *,
:host(:not([data-style='outside'])[data-style='hidden'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style='hidden'][data-position='right']) div > * {
// See "Awful hack" above. Note that this "cancelation" of writing mode only
@@ -154,7 +154,7 @@ div.opposing {
********************************************/
:host([data-style='overlay']),
:host([data-style='hover']),
:host([data-style*=hover]),
:host([data-style='hidden']) {
position: absolute;
overflow: hidden;
@@ -164,8 +164,8 @@ div.opposing {
:host([data-style='overlay'][data-position='top']),
:host([data-style='overlay'][data-position='bottom']),
:host([data-style='hover'][data-position='top']),
:host([data-style='hover'][data-position='bottom']),
:host([data-style*='hover'][data-position='top']),
:host([data-style*='hover'][data-position='bottom']),
:host([data-style='hidden'][data-position='top'][expanded]),
:host([data-style='hidden'][data-position='bottom'][expanded]) {
width: 100%;
@@ -176,8 +176,8 @@ div.opposing {
:host([data-style='overlay'][data-position='left']),
:host([data-style='overlay'][data-position='right']),
:host([data-style='hover'][data-position='left']),
:host([data-style='hover'][data-position='right']),
:host([data-style*='hover'][data-position='left']),
:host([data-style*='hover'][data-position='right']),
:host([data-style='hidden'][data-position='left'][expanded]),
:host([data-style='hidden'][data-position='right'][expanded]) {
height: 100%;