Skip to content

Commit

Permalink
refactor: vim cursor
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisgrieser
chrisgrieser committed Dec 22, 2024
1 parent c2cf946 commit 5bb4e53
Showing 1 changed file with 96 additions and 136 deletions.
232 changes: 96 additions & 136 deletions source/5-editor/vim-mode.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,6 @@
/** Vim: Active Visual Line (Cursorline)
──────────────────────────────────────────────────── */

.vim-active-visual-line .cm-fat-cursor.cm-cursor-primary {
--cursorline-bg: hsl(var(--color-accent-hsl), 12.5%);
border-image: conic-gradient(var(--cursorline-bg) 0 0) fill 0 / 0 / 0 100vw;
mix-blend-mode: hard-light;
}

/* HACK Disable built-in blink, use custom blink, so that only the cursor, but not
* the line highlight is affected.
* CAVEAT the CodeMirror's blink is smarter, since it only is in effect when the
Expand Down Expand Up @@ -84,170 +78,136 @@
}
}

.vim-active-visual-line .cm-focused .cm-fat-cursor {
/* stylelint-disable-next-line declaration-no-important */
animation: vim-blink var(--vim-cursor-blink-rate) linear infinite !important;
}
.vim-active-visual-line {
& .cm-fat-cursor.cm-cursor-primary {
--cursorline-bg: hsl(var(--color-accent-hsl), 12.5%);
border-image: conic-gradient(var(--cursorline-bg) 0 0) fill 0 / 0 / 0 100vw;
mix-blend-mode: hard-light;

.vim-active-visual-line .cm-vimCursorLayer {
/* stylelint-disable-next-line declaration-no-important */
animation: none !important;
.cm-focused & {
/* stylelint-disable-next-line declaration-no-important */
animation: vim-blink var(--vim-cursor-blink-rate) linear infinite !important;
}
}

& .cm-vimCursorLayer {
/* stylelint-disable-next-line declaration-no-important */
animation: none !important;
}
}

/* ───────────────────────────────────────────────── */
/** Vim: Relative Line Numbers
──────────────────────────────────────────────────── */

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers .cm-gutterElement:not(.cm-active) {
font-size: 0;
}
.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers {
& .cm-gutterElement:not(.cm-active) {
font-size: 0;
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers .cm-active,
.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers *::before {
font-size: 0.85rem;
}
& .cm-active,
& *::before {
font-size: 0.85rem;
}

/* numbers before */
.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers *:has(+ .cm-active)::before {
content: "1";
}
/* numbers before */
& *:has(+ .cm-active)::before {
content: "1";
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers *:has(+ * + .cm-active)::before {
content: "2";
}
& *:has(+ * + .cm-active)::before {
content: "2";
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers *:has(+ * + * + .cm-active)::before {
content: "3";
}
& *:has(+ * + * + .cm-active)::before {
content: "3";
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers *:has(+ * + * + * + .cm-active)::before {
content: "4";
}
& *:has(+ * + * + * + .cm-active)::before {
content: "4";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
*:has(+ * + * + * + * + .cm-active)::before {
content: "5";
}
& *:has(+ * + * + * + * + .cm-active)::before {
content: "5";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
*:has(+ * + * + * + * + * + .cm-active)::before {
content: "6";
}
& *:has(+ * + * + * + * + * + .cm-active)::before {
content: "6";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
*:has(+ * + * + * + * + * + * + .cm-active)::before {
content: "7";
}
& *:has(+ * + * + * + * + * + * + .cm-active)::before {
content: "7";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
*:has(+ * + * + * + * + * + * + * + .cm-active)::before {
content: "8";
}
& *:has(+ * + * + * + * + * + * + * + .cm-active)::before {
content: "8";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
*:has(+ * + * + * + * + * + * + * + * + .cm-active)::before {
content: "9";
}
& *:has(+ * + * + * + * + * + * + * + * + .cm-active)::before {
content: "9";
}

/* numbers after */
.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers .cm-active + *::before {
content: "1";
}
/* numbers after */
& .cm-active {
& + *::before {
content: "1";
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers .cm-active + * + *::before {
content: "2";
}
& + * + *::before {
content: "2";
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers .cm-active + * + * + *::before {
content: "3";
}
& + * + * + *::before {
content: "3";
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers .cm-active + * + * + * + *::before {
content: "4";
}
& + * + * + * + *::before {
content: "4";
}

.use-relative-line-numbers:not(.is-mobile) .cm-lineNumbers .cm-active + * + * + * + * + *::before {
content: "5";
}
& + * + * + * + * + *::before {
content: "5";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
.cm-active
+ *
+ *
+ *
+ *
+ *
+ *::before {
content: "6";
}
& + * + * + * + * + * + *::before {
content: "6";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
.cm-active
+ *
+ *
+ *
+ *
+ *
+ *
+ *::before {
content: "7";
}
& + * + * + * + * + * + * + *::before {
content: "7";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
.cm-active
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *::before {
content: "8";
}
& + * + * + * + * + * + * + * + *::before {
content: "8";
}

.use-relative-line-numbers:not(.is-mobile)
.cm-lineNumbers
.cm-active
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *::before {
content: "9";
& + * + * + * + * + * + * + * + * + *::before {
content: "9";
}
}
}

/* ───────────────────────────────────────────────── */
/** Vim: Disable Mouse Hovers & Tooltips
──────────────────────────────────────────────────── */

.no-mouse-hovers .is-live-preview .cm-embed-block:not(.cm-table-widget):hover {
box-shadow: none;
}
.no-mouse-hovers {
& .is-live-preview .cm-embed-block:not(.cm-table-widget):hover {
box-shadow: none;
}

.no-mouse-hovers .tooltip:not(.mod-error),
.no-mouse-hovers .is-live-preview .cm-embed-block:not(.cm-table-widget):hover .edit-block-button {
display: none;
}
& .tooltip:not(.mod-error),
& .is-live-preview .cm-embed-block:not(.cm-table-widget):hover .edit-block-button {
display: none;
}

/* keeping tooltips in settings, since they are relevant there, e.g. for sliders */
.no-mouse-hovers .modal-container + .tooltip,
.no-mouse-hovers
.app-container:has(.mod-active .workspace-leaf-content[data-type="style-settings"])
~ .tooltip {
display: unset;
/* keeping tooltips in settings, since they are relevant there, e.g. for sliders */
& .modal-container + .tooltip,
&
.app-container:has(.mod-active .workspace-leaf-content[data-type=".no-mouse-hovers "])
~ .tooltip {
display: unset;
}
}

/* ───────────────────────────────────────────────── */
Expand Down

0 comments on commit 5bb4e53

Please sign in to comment.