Personal preferences for a Dracula-themed Vimium

vimium.css

/*
* Vimium v1.67 Dracula Theme.
* Stephen Bunn <stephen@bunn.io>
*/

:root {
  /* Globals for color and font theming. */
  --vimium-surface-color: #15171b;
  --vimium-text-color: #f8f8f2;
  --vimium-accent-color: #9580ff;
  --vimium-selected-color: #414558;
  --vimium-font-family-sans: Helvetica, Arial, sans-serif;
  --vimium-font-family-monospace: "Fira Code", "Source Code Pro", Menlo, monospace;

  /* Global rules for spacing scales. */
  --vimium-border-radius: 4px;
  --vimium-space-halfx: 2px;
  --vimium-space-1x: 4px;
  --vimium-space-2x: 8px;
  --vimium-space-3x: 12px;
  --vimium-space-4x: 16px;
  --vimium-space-5x: 24px;
  --vimium-space-6x: 32px;

  /* Advanced hint specific rules. */
  --vimium-hint-font-family: var(--vimium-font-family-monospace);
  --vimium-hint-font-size: 0.75rem;
  --vimium-hint-font-weight: bold;
  --vimium-hint-background: var(--vimium-surface-color);
  --vimium-hint-text-color: var(--vimium-text-color);
  --vimium-hint-text-color--match: var(--vimium-accent-color);
  --vimium-hint-border-color: var(--vimium-accent-color);
  --vimium-hint-border-radius: var(--vimium-border-radius);

  /* Advanced vomnibar specific rules. */
  --vomnibar-input-font-family: var(--vimium-font-family-monospace);
  --vomnibar-input-font-size: 1.5rem;
  --vomnibar-input-font-weight: normal;
  --vomnibar-title-font-family: var(--vimium-font-family-sans);
  --vomnibar-title-font-size: 1rem;
  --vomnibar-title-font-weight: normal;
  --vomnibar-source-font-family: var(--vimium-font-family-monospace);
  --vomnibar-source-font-size: 0.75rem;
  --vomnibar-source-font-weight: bold;
  --vomnibar-source-text-color: var(--vimium-selected-color);
  --vomnibar-url-font-family: var(--vimium-font-family-monospace);
  --vomnibar-url-font-size: 0.75rem;
  --vomnibar-url-font-weight: normal;
  --vomnibar-url-text-color: var(--vimium-accent-color);
  --vomnibar-background: var(--vimium-surface-color);
  --vomnibar-background--selected: rgba(65, 69, 88, 0.25);
  --vomnibar-text-color: var(--vimium-text-color);
  --vomnibar-text-color--match: var(--vimium-accent-color);
  --vomnibar-border-color: var(--vimium-accent-color);
  --vomnibar-border-radius: var(--vimium-border-radius);
  --vomnibar-border-width: var(--vimium-space-1x);
  --vomnibar-width: 640px;

  /* Advanced hud specific rules. */
  --vimium-hud-font-family: var(--vimium-font-family-monospace);
  --vimium-hud-font-size: 0.75rem;
  --vimium-hud-font-weight: normal;
  --vimium-hud-background: var(--vimium-surface-color);
  --vimium-hud-text-color: var(--vimium-text-color);
  --vimium-hud-text-color--selected: var(--vimium-selected-color);
  --vimium-hud-border-color: var(--vimium-accent-color);
  --vimium-hud-border-radius: var(--vimium-border-radius);
}

/* ---- Hints ---- */
#vimiumHintMarkerContainer div.internalVimiumHintMarker,
#vimiumHintMarkerContainer div.vimiumHintMarker {
  border: 1px solid var(--vimium-hint-border-color);
  border-radius: var(--vimium-hint-border-radius);
  box-shadow: none;
  background: var(--vimium-hint-background);
  padding: var(--vimium-space-halfx) var(--vimium-space-1x);
}

#vimiumHintMarkerContainer div span {
  font-family: var(--vimium-hint-font-family);
  font-size: var(--vimium-hint-font-size);
  font-weight: var(--vimium-hint-font-weight);
  color: var(--vimium-hint-text-color);
  text-shadow: none;
}

#vimiumHintMarkerContainer div > .matchingCharacter {
  color: var(--vimium-hint-text-color--match);
}

#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
  color: var(--vimium-hint-text-color);
}

/* ---- Vomnibar ---- */
#vomnibar {
  background: var(--vomnibar-background);
  border: var(--vomnibar-border-width) solid var(--vomnibar-border-color);
  border-radius: var(--vomnibar-border-radius);
  max-width: var(--vomnibar-width);
  margin-left: calc((var(--vomnibar-width) / 2) * -1);
  left: 50%;
}

#vomnibar .vomnibarSearchArea {
  background: var(--vomnibar-background);
  border: 0;
  border-radius: 0;
  padding: 0;
}

#vomnibar input {
  background: var(--vomnibar-background);
  color: var(--vomnibar-text-color);
  font-family: var(--vomnibar-input-font-family);
  font-size: var(--vomnibar-input-font-size);
  padding: var(--vimium-space-6x) var(--vimium-space-4x);
  border-radius: 0;
  border: none;
  box-shadow: none;
}

#vomnibar input::selection {
  background: var(--vomnibar-background--selected);
}

#vomnibar ul {
  background: var(--vomnibar-background);
  padding: 0;
  margin: 0;
}

#vomnibar li {
  background: var(--vomnibar-background);
  padding: var(--vimium-space-2x) var(--vimium-space-4x) var(--vimium-space-2x) var(--vimium-space-5x);
  display: flex;
  border: none;
}

#vomnibar li .vomnibarTopHalf,
#vomnibar li .vomnibarBottomHalf {
  margin: 0;
  padding: 0;
}

#vomnibar li .vomnibarTopHalf {
  display: flex;
  flex: 0 0 67%;
  margin-right: var(--vimium-space-4x);
  align-items: center;
}

#vomnibar li .vomnibarBottomHalf {
  display: flex;
  flex: 0 0 33%;
  align-items: center;
}

#vomnibar li .vomnibarSource.vomnibarNoInsertText,
#vomnibar li .vomnibarSource.vomnibarInsertText {
  display: none;
}

#vomnibar li .vomnibarSource {
  font-family: var(--vomnibar-source-font-family);
  font-weight: var(--vomnibar-source-font-weight);
  font-size: var(--vomnibar-source-font-size);
  color: var(--vomnibar-source-text-color);
  margin-right: var(--vimium-space-3x);
  text-transform: uppercase;
  display: block;
  flex-shrink: 0;
  line-height: 2;
  min-width: 15%;
}

#vomnibar li .vomnibarTitle,
#vomnibar li .vomnibarUrl {
  line-height: 1.6;
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vomnibar li .vomnibarTitle {
  font-family: var(--vomnibar-title-font-family);
  font-weight: var(--vomnibar-title-font-weight);
  font-size: var(--vomnibar-title-font-size);
  color: var(--vomnibar-text-color);
}

#vomnibar li .vomnibarIcon {
  padding: 0;
  margin-right: var(--vimium-space-2x);
  min-width: 16px;
}

#vomnibar li .vomnibarUrl {
  font-family: var(--vomnibar-url-font-family);
  font-weight: var(--vomnibar-url-font-weight);
  font-size: var(--vomnibar-url-font-size);
  color: var(--vomnibar-url-text-color);
  padding-right: var(--vimium-space-1x);
}

#vomnibar li .vomnibarMatch {
  color: inherit;
}

#vomnibar li .vomnibarTitle .vomnibarMatch {
  color: var(--vomnibar-text-color--match);
}

#vomnibar li.vomnibarSelected {
  background: var(--vomnibar-background--selected);
}

/* ---- HUD ---- */
div.vimiumHUD {
  background: var(--vimium-hud-background);
  border: 1px solid var(--vimium-hud-border-color);
  border-radius: var(--vimium-hud-border-radius) var(--vimium-hud-border-radius) 0 0;
  box-shadow: none;
}

div.vimiumHUD span#hud-find-input,
div.vimiumHUD .vimiumHUDSearchAreaInner {
  font-family: var(--vimium-hud-font-family);
  font-size: var(--vimium-hud-font-size);
  font-weight: var(--vimium-hud-font-weight);
  color: var(--vimium-hud-text-color);
}

div.vimiumHUD .hud-find {
  background: transparent;
  border: none;
}

div.vimiumHUD .hud-find span#hud-match-count {
  color: var(--vimium-hud-text-color--selected);
}

div.vimiumHUD .vimiumHUDSearchArea {
  background: transparent;
}