50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import styled from "styled-components";
|
|
|
|
export const Icon2525 = styled.button<{ $selected?: boolean }>`
|
|
margin: 0;
|
|
padding: 5px;
|
|
width: 25px;
|
|
height: 25px;
|
|
border: none;
|
|
border-radius: 0;
|
|
|
|
cursor: pointer;
|
|
background: transparent;
|
|
color: white;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
${(props) => props.$selected && "background: rgba(255, 255, 255, 0.25);"}
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
`;
|
|
|
|
export const Button = styled.button<{ $active?: boolean }>`
|
|
margin: 2px;
|
|
padding: 2px;
|
|
border: 1px solid white;
|
|
border-radius: 0;
|
|
|
|
cursor: pointer;
|
|
background: ${({ $active }) => $active ? "white" : "var(--primary-color)"};
|
|
color: ${({ $active }) => $active ? "var(--primary-color)" : "white"};;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: ${({ $active }) => $active ? "rgba(0, 0, 0, 0.25)" : "rgba(255, 255, 255, 0.50)"};
|
|
background: ${({ $active }) => $active ? "rgba(255, 255, 255, 0.85)" : "rgba(255, 255, 255, 0.10)"};
|
|
}
|
|
|
|
&:disabled {
|
|
color: rgba(255, 255, 255, 0.25);
|
|
background: rgba(255, 255, 255, 0.10);
|
|
cursor: not-allowed;
|
|
}
|
|
`; |