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

Initial version of status bar.

Browse Source
This commit is contained in:
Dermot Duffy
2024-08-16 20:08:21 -07:00
parent db9303c60d
commit e503f0e429
77 changed files with 3072 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/card.scss
+49 -17
View File
@@ -80,23 +80,6 @@ div.main.curve-bottom {
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
/* 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'] {
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;
flex-direction: column;
@@ -181,3 +164,52 @@ web-dialog::part(dialog) {
border-radius: 0px;
background: transparent;
}
/*************************************
* "Outside" style for menu/status bar
*************************************/
.outerlay[data-position='top'] {
border-top-left-radius: var(--ha-card-border-radius, 4px);
border-top-right-radius: var(--ha-card-border-radius, 4px);
}
.outerlay[data-position='bottom'] {
border-bottom-left-radius: var(--ha-card-border-radius, 4px);
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
/****************
* Overlay styles
****************/
frigate-card-overlay {
z-index: 1;
}
/*******************
* Menu hover styles
*******************/
frigate-card-menu[data-style*='hover'] {
z-index: 4;
transition: opacity 0.5s ease;
opacity: 0;
}
frigate-card-menu[data-style*='hover']:hover,
.main:hover > frigate-card-overlay > frigate-card-menu[data-style='hover-card'] {
opacity: 1;
}
/*************************
* Status bar hover styles
*************************/
frigate-card-status-bar[data-style*='hover'] {
z-index: 3;
transition: opacity 0.5s ease;
opacity: 0;
}
frigate-card-status-bar[data-style*='hover']:hover,
.main:hover > frigate-card-overlay > frigate-card-status-bar[data-style='hover-card'] {
opacity: 1;
}