54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { isTouchDevice } from "@shared/utils/browser";
|
|
import Desktop from "~/utils/Desktop";
|
|
|
|
/**
|
|
* Returns "hover" on a non-touch device and "active" on a touch device. To
|
|
* avoid "sticky" hover on mobile. Use `&:${hover} {...}` instead of
|
|
* using `&:hover {...}`.
|
|
*/
|
|
export const hover = isTouchDevice() ? "active" : "hover";
|
|
|
|
/**
|
|
* Mixin to make an element drag the window when rendered in the desktop app.
|
|
*
|
|
* @returns string of CSS
|
|
*/
|
|
export const draggableOnDesktop = () =>
|
|
Desktop.isElectron() ? "-webkit-app-region: drag;" : "";
|
|
|
|
/**
|
|
* Mixin to make an element not drag the window when rendered in the desktop app.
|
|
*
|
|
* @returns string of CSS
|
|
*/
|
|
export const undraggableOnDesktop = () =>
|
|
Desktop.isElectron() ? "-webkit-app-region: no-drag;" : "";
|
|
|
|
/**
|
|
* Mixin to make an element fade when the desktop app is backgrounded.
|
|
*
|
|
* @returns string of CSS
|
|
*/
|
|
export const fadeOnDesktopBackgrounded = () => {
|
|
if (!Desktop.isElectron()) {
|
|
return "";
|
|
}
|
|
|
|
return `
|
|
body.backgrounded & { opacity: 0.75; }
|
|
`;
|
|
};
|
|
|
|
/**
|
|
* Truncate multiline text.
|
|
*
|
|
* @returns string of CSS
|
|
*/
|
|
export const truncateMultiline = (lines: number) => `
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: ${lines};
|
|
overflow: hidden;
|
|
overflow-wrap: anywhere;
|
|
`;
|