63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import { EditorView } from "@codemirror/view";
|
|
|
|
const CARET_WIDTH = 2;
|
|
const DOT_RADIUS = 4;
|
|
|
|
export const remoteCursorsTheme = EditorView.baseTheme({
|
|
".selection-caret": {
|
|
position: "relative"
|
|
},
|
|
|
|
".selection-caret > *": {
|
|
position: "absolute",
|
|
backgroundColor: "inherit"
|
|
},
|
|
|
|
".selection-caret > .stick": {
|
|
left: 0,
|
|
top: 0,
|
|
transform: "translateX(-50%)",
|
|
width: `${CARET_WIDTH}px`,
|
|
height: "100%",
|
|
display: "block",
|
|
borderRadius: `${CARET_WIDTH / 2}px`,
|
|
animation: "blink-stick 1s steps(1) infinite"
|
|
},
|
|
|
|
"@keyframes blink-stick": {
|
|
"0%, 100%": { opacity: 1 },
|
|
"50%": { opacity: 0 }
|
|
},
|
|
|
|
".selection-caret > .dot": {
|
|
borderRadius: "50%",
|
|
width: `${DOT_RADIUS * 2}px`,
|
|
height: `${DOT_RADIUS * 2}px`,
|
|
top: `-${DOT_RADIUS}px`,
|
|
left: `-${DOT_RADIUS}px`,
|
|
transition: "transform .3s ease-in-out",
|
|
transformOrigin: "bottom center",
|
|
boxSizing: "border-box"
|
|
},
|
|
|
|
".selection-caret:hover > .dot": {
|
|
transform: "scale(0)"
|
|
},
|
|
|
|
".selection-caret > .info": {
|
|
top: "-1.3em",
|
|
left: `-${CARET_WIDTH / 2}px`,
|
|
fontSize: "0.9em",
|
|
userSelect: "none",
|
|
color: "white",
|
|
padding: "0 2px",
|
|
transition: "opacity .3s ease-in-out",
|
|
opacity: 0,
|
|
whiteSpace: "nowrap",
|
|
borderRadius: "3px 3px 3px 0"
|
|
},
|
|
|
|
".selection-caret:hover > .info": {
|
|
opacity: 1
|
|
}
|
|
});
|