Themes?

[max-sixty]

Would you be open to a PR that added class='cVim' to elements, to facilitate CSS selectors that operate on all cVim elements? This could also allow the current CSS to be simplified.

I tried to change some of the CSS settings - it involved a lot of duplication and was generally brittle. I'm a newbie with CSS though; possible it's me rather than the settings...

quasi-ref: https://github.com/1995eaton/chromium-vim/issues/359

[max-sixty]

I ended up doing a hacky stylesheet that I find much nicer:

Input bar:

Link items:

CSS:

#cVim-command-bar, #cVim-command-bar-mode, #cVim-command-bar-input, #cVim-command-bar-search-results,
#cVim-hud, .cVim-link-hint {
  font-family: BlinkMacSystemFont, Helvetica, Helvetica Neue, Neue, sans-serif, monospace, Arial;
  background-color: rgba(253, 246, 227, 0.9) ;
  color: #586e75 ;
}

.cVim-full, .cVim-left, .cVim-completion-item .cVim-right {}

#cVim-command-bar {
  position: fixed;
  z-index: 2147483646;
  font-size: 11pt ;
  display: none;
  /*box-sizing: content-box;*/
  left: 0;
  width: 100%;
  height: 2em;
}

#cVim-command-bar-mode {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  padding-left: 2px;
  height: 100%;
  width: 1.2em;
  padding-top: 2px;
  /*color: #888;*/
}

#cVim-command-bar-input {
  /* need to be here because of user agent stylesheet*/
  font-size: 11pt ;

  /**/
  color: #586366 ;
  height: 100%;
  right: 0;
  top: 0;
  width: calc(100% - 1.2em);
  position: absolute;
}

#cVim-command-bar-search-results {
  font-size: 10pt;
  position: fixed;
  width: 100%;
  overflow: hidden;
  z-index: 2147483647;
  left: 0;
  /*box-shadow: 0 3px 3px rgba(0,0,0,0.4);*/
  /*background-color: #fdf6e3;*/
}

/*.cVim-completion-item,*/
.cVim-full,  .cVim-left, .cVim-right {

  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
}
/*padding: 1px;*/
/*box-sizing: border-box;*/

/*
.cVim-completion-item:nth-child(even) {
  background-color: #1f1f1f;
}*/

.cVim-completion-item {
  width: 100%; left: 0;
  /*color: #bcbcbc;*/
}

.cVim-completion-item[active] {
  width: 100%; left: 0;
  /*color: #1b1d1e;*/
  background-color: #eee8d5;
}

.cVim-completion-item[active] span {
  /*color: #1b1d1e;*/
}

.cVim-completion-item .cVim-left {
  /*color: #fff;*/
  width: 37%;
}

.cVim-completion-item .cVim-right {
  font-style: italic;
  /*color: #888;*/
  width: 57%;
}

#cVim-link-container {
  position: absolute;
  pointer-events: none;
  width: 100%; left: 0;
  height: 100%; top: 0;
  z-index: 2147483647;
}

.cVim-link-hint {
  position: absolute;
/*completely opaque*/
  background-color: rgba(253, 246, 227, 1) ;
  color: #268bd2 ;
  padding: 0.2em ;
  /* seems to be needed */
  font-size: 10pt !important;
  font-weight: 600 ;
  text-transform: uppercase ;
  border: 1px solid #586e75;
  display: inline-block ;
  align-items: center ;
  text-align: center ;
  width: 1.6em ;
}

.cVim-link-hint_match {
  color: #dc322f;
  text-transform: uppercase ;
}

#cVim-hud {
  position: fixed !important;
  transition: right 0.2s ease-out;
  z-index: 24724289;
  background-color: rgba(253, 246, 227, 0.9) ;
}

#cVim-hud span {
  padding: 0.5em ;
  font-size: 14pt;
}

#cVim-frames-outline {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9999999999;
  box-sizing: border-box;
  border: 3px solid yellow;
}