c202198d61
* fix: Margin on floating toolbar fix: Flash of toolbar on wide screens * fix: Nesting of comment marks * fix: Post button not visible when there is a draft comment, makes it look like the comment is saved fix: Styling of link editor results now matches other menus fix: Allow small link editor in comments sidebar * fix: Cannot use arrow keys to navigate suggested links Added animation to link suggestions Added mixin for text ellipsis * fix: Link input appears non-rounded when no creation option * Accidental removal
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import Desktop from "~/utils/Desktop";
|
|
import { isTouchDevice } from "~/utils/browser";
|
|
|
|
/**
|
|
* 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; }
|
|
`;
|
|
};
|
|
|
|
/**
|
|
* Mixin to hide scrollbars.
|
|
*
|
|
* @returns string of CSS
|
|
*/
|
|
export const hideScrollbars = () => `
|
|
-ms-overflow-style: none;
|
|
overflow: -moz-scrollbars-none;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
`;
|
|
|
|
/**
|
|
* Mixin to make text ellipse when it overflows.
|
|
*
|
|
* @returns string of CSS
|
|
*/
|
|
export const ellipsis = () => `
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
`;
|