65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import StyledTaskbarEntry from "components/system/Taskbar/TaskbarEntry/StyledTaskbarEntry";
|
|
import { m as motion } from "framer-motion";
|
|
import styled from "styled-components";
|
|
import { PEEK_MAX_WIDTH, TASKBAR_HEIGHT } from "utils/constants";
|
|
|
|
type StyledPeekWindowProps = {
|
|
$offsetX: number;
|
|
};
|
|
|
|
const StyledPeekWindow = styled(motion.div)<StyledPeekWindowProps>`
|
|
background-color: ${({ theme }) => theme.colors.taskbar.background};
|
|
border: ${({ theme }) => `1px solid ${theme.colors.taskbar.peekBorder}`};
|
|
border-bottom: 0;
|
|
bottom: ${TASKBAR_HEIGHT}px;
|
|
display: flex;
|
|
overflow: hidden;
|
|
place-content: center;
|
|
place-items: flex-start;
|
|
position: fixed;
|
|
transform: ${({ $offsetX }) =>
|
|
$offsetX ? `translateX(${$offsetX}px)` : undefined};
|
|
|
|
${StyledTaskbarEntry}:hover & {
|
|
background-color: hsla(0, 0%, 25%, 85%);
|
|
|
|
&:active {
|
|
background-color: ${({ theme }) => theme.colors.taskbar.activeForeground};
|
|
}
|
|
}
|
|
|
|
img {
|
|
height: ${({ theme }) => theme.sizes.taskbar.entry.peekImage.height}px;
|
|
margin: ${({ theme }) => theme.sizes.taskbar.entry.peekImage.margin}px;
|
|
max-height: ${PEEK_MAX_WIDTH}px;
|
|
max-width: ${PEEK_MAX_WIDTH}px;
|
|
min-height: 80px;
|
|
min-width: 80px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
button {
|
|
background-color: rgb(40, 40, 40);
|
|
height: 32px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 32px;
|
|
|
|
svg {
|
|
fill: rgb(252, 246, 247);
|
|
width: 12px;
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgb(139, 10, 20);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgb(194, 22, 36);
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default StyledPeekWindow;
|