Skip to content

Instantly share code, notes, and snippets.

@zach-is-my-name
Created November 30, 2017 23:00
Show Gist options
  • Save zach-is-my-name/fedaeca927134a3bd99914d404d76d3f to your computer and use it in GitHub Desktop.
Save zach-is-my-name/fedaeca927134a3bd99914d404d76d3f to your computer and use it in GitHub Desktop.
Atom New Release: Vim-Mode-Plus.less, style.less
style.less
atom-text-editor .cursor {
opacity: 1 !important;
// color: white;
// background-color: hsl(180, 24%, 12%);
}
_____________________________
vim-mode-plus.less
@import "syntax-variables";
@import "ui-variables";
// Cursor style
// =========================
// .cursor-base () {
// border: none;
// background: none;
// opacity: 0.5;
// }
.underline-cursor(@bottom-width: 0) {
// .cursor-base();
border-bottom-width: @bottom-width;
border-bottom-style:solid;
border-bottom-color: @syntax-cursor-color;
}
atom-text-editor.vim-mode-plus.visual-mode,
atom-text-editor.vim-mode-plus.operator-pending-mode
{
&.is-focused,
&.vim-mode-plus-input-focused,
&.vim-mode-plus-search-input-focused {
.cursor {
// .cursor-base();
background-color: #ff0080;// block-cursor
}
}
}
atom-text-editor.vim-mode-plus-input-focused.hide-cursor {
.cursor { opacity: 0;
background-color: #bc3d7d !important;
}
}
atom-text-editor.vim-mode-plus.normal-mode {
.cursor {
background-color: #bc3d7d !important;
}
}
atom-text-editor.vim-mode-plus.operator-pending-mode {
&.is-focused,
&.vim-mode-plus-search-input-focused {
// .cursor { .underline-cursor(); }
.cursors.blink-off .cursor { opacity: 1; }
}
}
atom-text-editor.vim-mode-plus.insert-mode.replace {
&.is-focused {
.cursor {
background-color: #bc3d7d
// .underline-cursor(0.3em);
// opacity: 0.8;
}
}
}
// vim-mode-plus-input-focused for surround, f, F, t, T, r etc.
atom-text-editor.vim-mode-plus.normal-mode,
atom-text-editor.vim-mode-plus.visual-mode,
atom-text-editor.vim-mode-plus.operator-pending-mode, {
&.vim-mode-plus-input-focused {
.cursor { .underline-cursor(); }
}
}
atom-text-editor.vim-mode-plus-input-char-waiting {
&.is-focused { .cursor { .underline-cursor(); } }
}
// Flash ranges e.g. flashing yanked range.
// =========================
.flash-animation (@animation-name, @color) {
@keyframes @animation-name {
from { background-color: @color; }
to { background-color: transparent; }
}
}
.flash (@animation-name; @duration) {
animation-name: @animation-name;
animation-duration: @duration;
animation-iteration-count: 1;
}
@flash-base-color: contrast(@syntax-background-color, darken(@syntax-selection-color, 3%), lighten(@syntax-selection-color, 3%));
@flash-search-color: fadeout(darken(@syntax-selection-flash-color, 10%), 20%);
@flash-added-color: fadeout(darken(@syntax-color-added, 10%), 50%);
@flash-removed-color: fadeout(@syntax-color-removed, 50%);
// flashOnOperate
.flash-animation(flash-operator, @flash-base-color);
.flash-animation(flash-operator-occurrence, @flash-added-color);
.flash-animation(flash-operator-remove-occurrence, @flash-removed-color);
// flashOnUndoRedo
.flash-animation(flash-undo-redo, @flash-base-color);
.flash-animation(flash-undo-redo-multiple-changes, @flash-added-color);
.flash-animation(flash-undo-redo-multiple-deletes, @flash-removed-color);
// flashOnSearch
.flash-animation(flash-search, @flash-search-color);
.flash-animation(flash-screen, @flash-base-color);
atom-text-editor .vim-mode-plus-flash {
// flashOnOperate
&.operator .region { .flash(flash-operator, 0.5s); }
&.operator-long .region { .flash(flash-operator, 0.8s); }
&.operator-occurrence .region { .flash(flash-operator-occurrence, 0.8s); }
&.operator-remove-occurrence .region { .flash(flash-operator-remove-occurrence, 0.8s); }
// flashOnUndoRedo
&.undo-redo .region { .flash(flash-undo-redo, 0.5s); }
&.undo-redo-multiple-changes .region { .flash(flash-undo-redo-multiple-changes, 0.5s); }
&.undo-redo-multiple-deletes .region { .flash(flash-undo-redo-multiple-deletes, 0.5s); }
// flashOnSearch
&.search .region { .flash(flash-search, 1.0s); z-index: 1; }
&.screen .region { .flash(flash-screen, 0.3s); }
// demo-mode pkg integration to stop flash while demo-mode's hover is active
&.operator-demo .region { background: @flash-base-color; }
&.operator-long-demo .region { background: @flash-base-color; }
&.operator-occurrence-demo .region { background: @flash-added-color; }
&.operator-remove-occurrence-demo .region { background: @flash-removed-color; }
&.undo-redo-demo .region { background: @flash-base-color; }
&.undo-redo-multiple-changes-demo .region { background: @flash-added-color; }
&.undo-redo-multiple-deletes-demo .region { background: @flash-removed-color; }
}
// Hover Counter
// =========================
.vim-mode-plus-hover {
display: block;
color: @text-color-highlight;
background-color: #bc3d7d;
// border-radius: @component-border-radius;
box-shadow: 0 0 1px @syntax-text-color;
margin-top: -3.0em;
margin-left: -0.3em;
padding-left: 0.2em;
padding-right: 0.2em;
text-align: center;
&.first { background-color: @background-color-info; }
&.last { background-color: @background-color-error; }
}
atom-text-editor[mini].vim-mode-plus-input {
background-color: inherit;
font-weight: normal;
color: @text-color;
line-height: 1.28;
cursor: default;
white-space: nowrap;
padding-left: 10px;
height: 0px !important;
width: 0px !important;
overflow: hidden !important;
border: none !important;
padding: 0 !important;
display: block !important;
position: fixed !important;
top: -10px !important;
left: -10px !important;
}
// Search
// =========================
// input
.vim-mode-plus-search-container {
display: flex;
> div {
padding: @component-padding/2 @component-padding;
border: none;
}
.editor-container { width: 100%; }
}
atom-text-editor[mini].vim-mode-plus-search {
border: none;
color: @text-color;
cursor: default;
&.is-focused { box-shadow: none; }
&::before {
font-size: 1.2em;
padding-right: 0.5em;
content: "/";
}
&.backwards::before { content: "?"; }
}
@search-match-base: @syntax-result-marker-color;
@search-match: hsla(hue(@search-match-base), saturation(@search-match-base), lightness(@search-match-base), 0.4);
@search-match-first: fadeout(@syntax-color-renamed, 60%);
@search-match-last: fadeout(@syntax-color-removed, 60%);
@search-match-border-current: hsla(hue(@search-match-base), saturation(@search-match-base), lightness(@search-match-base), 1.0);
@search-match-border-first: syntax-color-renamed;
@search-match-border-last: syntax-color-removed;
atom-text-editor:not(.silent) {
.vim-mode-plus-search-match {
.region { background-color: @search-match; }
&.first .region { background-color: @search-match-first; }
&.last .region { background-color: @search-match-last; }
}
}
@keyframes flash-find-char {
from { border-color: @syntax-color-function; }
to { border-color: transparent; }
}
// highlight
.round-box {
box-sizing: border-box;
// border-radius: @component-border-radius;
}
atom-text-editor {
.vim-mode-plus-search-match {
.region {
.round-box();
border: 2px solid transparent;
transition: border-color 0.2s;
}
&.current .region {
border-color: @search-match-border-current;
transition-duration: 0.1s;
}
&.first.current .region {
border-color: search-match-border-first;
}
&.last.current .region {
border-color: @search-match-border-last;
}
}
.vim-mode-plus-highlight-search .region {
.round-box();
border: 1px solid fadeout(@syntax-text-color, 70%);
background-color: @syntax-selection-color;
}
.vim-mode-plus-persistent-selection .region {
background-color: @syntax-selection-color;
}
.vim-mode-plus-target-range .region {
background-color: @syntax-selection-color;
}
.vim-mode-plus-occurrence-base .region {
box-sizing: border-box;
border-bottom-width: 2px;
border-bottom-style: dotted;
z-index: 1;
border-color: @syntax-color-modified;
}
.vim-mode-plus-find-char {
.region {
box-sizing: border-box;
border-width: 0px;
border-bottom-width: 2px;
border-style: solid;
}
&.pre-confirm .region {
border-color: @syntax-color-modified;
&.current { border-bottom-width: 5px; }
}
&.post-confirm .region {
.flash(flash-find-char, 2.0s);
&.long { animation-duration: 4.0s; }
}
}
}
// Maximize Pane
// =========================
atom-workspace.vim-mode-plus--pane-maximized {
atom-dock.left { display: none; }
atom-dock.right { display: none; }
atom-pane-container {
position: relative;
atom-pane-axis:not(.vim-mode-plus--active-pane-axis) { display: none; }
atom-pane {
.item-views { background: @syntax-background-color !important; }
display: none;
&.vim-mode-plus--active-pane {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 100;
}
}
}
&.vim-mode-plus--hide-tab-bar { .tab-bar { display: none; } }
&.vim-mode-plus--hide-status-bar { .status-bar { display: none; } }
&.vim-mode-plus--pane-centered { atom-text-editor:not(.mini) { margin-left: 20%; } }
}
// SelectList Highlight matched text
// =========================
.vim-mode-plus-select-list .list-group {
.character-match {
color: @text-color-highlight;
font-weight: bold;
}
}
.demo-mode-container {
.kind {
color: @text-color-selected;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment