101 lines
2.9 KiB
SCSS
101 lines
2.9 KiB
SCSS
@use './button.scss';
|
|
|
|
:host {
|
|
--frigate-card-menu-button-size: 40px;
|
|
--mdc-icon-button-size: var(--frigate-card-menu-button-size);
|
|
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
|
|
|
|
// Menu itself does not handle click events. Without this, in overlay mode the
|
|
// menu component prevents clicking on gallery items 'behind' the overlay.
|
|
pointer-events: none;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
:host([data-mode="above"]),:host([data-mode="below"]) {
|
|
width: 100%;
|
|
background: var(--secondary-background-color);
|
|
}
|
|
|
|
:host([data-mode$="-left"]) {
|
|
left: 0px;
|
|
top: 0px;
|
|
|
|
// Awful hack: Flexbox column wrapping doesn't work properly in most major
|
|
// browsers -- the element boundary does not expand to cover the full wrapped
|
|
// content as it should. This results in the wrapped 'content' appearing
|
|
// outside the element background (the linear gradient in this case). The
|
|
// workaround is to use flex row direction for both rows & columns, and use
|
|
// vertical-lr/vertical-rl as the writing mode for columns -- resetting
|
|
// writing-mode for descendant elements.
|
|
//
|
|
// For more information see the Chromium bug as an example:
|
|
// - https://bugs.chromium.org/p/chromium/issues/detail?id=507397
|
|
writing-mode: vertical-lr;
|
|
}
|
|
|
|
:host([data-mode$="-right"]) {
|
|
right: 0px;
|
|
top: 0px;
|
|
|
|
// See "Awful hack" above.
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
:host([data-mode$="-top"]) {
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
:host([data-mode$="-bottom"]) {
|
|
left: 0px;
|
|
bottom: 0px;
|
|
|
|
// If the menu has more content that allows, "wrap upwards" to keep the
|
|
// Frigate button in the same place.
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
:host([data-mode^="overlay-"]),:host([data-mode^="hover-"]),:host([data-mode^="hidden-"]) {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
width: calc(var(--frigate-card-menu-button-size) + 6px);
|
|
height: calc(var(--frigate-card-menu-button-size) + 6px);
|
|
}
|
|
|
|
:host([data-mode="overlay-top"]),
|
|
:host([data-mode="overlay-bottom"]),
|
|
:host([data-mode="hover-top"]),
|
|
:host([data-mode="hover-bottom"]),
|
|
:host([data-mode="hidden-top"][expanded]),
|
|
:host([data-mode="hidden-bottom"][expanded]) {
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: visible;
|
|
background: linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0));
|
|
}
|
|
|
|
:host([data-mode="overlay-left"]),
|
|
:host([data-mode="overlay-right"]),
|
|
:host([data-mode="hover-left"]),
|
|
:host([data-mode="hover-right"]),
|
|
:host([data-mode="hidden-left"][expanded]),
|
|
:host([data-mode="hidden-right"][expanded]) {
|
|
height: 100%;
|
|
width: auto;
|
|
overflow: visible;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0));
|
|
}
|
|
|
|
:host([data-mode="overlay-left"]) > *,
|
|
:host([data-mode="hover-left"]) > *,
|
|
:host([data-mode="hidden-left"]) > *,
|
|
:host([data-mode="overlay-right"]) > *,
|
|
:host([data-mode="hover-right"]) > *,
|
|
:host([data-mode="hidden-right"]) > * {
|
|
// See "Awful hack" above.
|
|
writing-mode: horizontal-tb;
|
|
}
|