stoat-for-desktop/components/ui/themes/Masks.tsx

61 lines
2.1 KiB
XML

/**
* SVG masks required in components in this library
*/
export function Masks() {
return (
<svg width={0} height={0} style={{ position: "fixed" }}>
<defs>
<mask id="holepunch-top-left">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="5" cy="5" r="7" fill={"black"} />
</mask>
<mask id="holepunch-top-right">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="5" r="7" fill={"black"} />
</mask>
<mask id="holepunch-bottom-right">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="27" r="7" fill={"black"} />
</mask>
<mask id="holepunch-right">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="5" r="7" fill={"black"} />
<circle cx="27" cy="27" r="7" fill={"black"} />
</mask>
<mask id="holepunch-overlap">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="32" cy="16" r="18" fill="black" />
</mask>
<mask id="holepunch-overlap-subtle">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="33" cy="16" r="18" fill="black" />
</mask>
<mask id="accessible-status-offline">
<circle cx="27" cy="27" r="5" fill="white" />
<circle cx="27" cy="27" r="3" fill="black" />
</mask>
<mask id="accessible-status-idle">
<circle cx="27" cy="27" r="5" fill="white" />
<circle cx="25" cy="25" r="4" fill="black" />
</mask>
<mask id="accessible-status-busy">
<circle cx="27" cy="27" r="5" fill="white" />
<line
x1="24"
y1="27"
x2="30"
y2="27"
stroke="black"
stroke-width={2}
/>
</mask>
<mask id="accessible-status-focus">
<circle cx="27" cy="27" r="5" fill="white" />
<circle cx="27" cy="27" r="4" fill="black" />
<circle cx="27" cy="27" r="2" fill="white" />
</mask>
</defs>
</svg>
);
}