one-dark-pro.css

/* #ui */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 14px;
  --font-weight: normal;
  --font: "Source Code Pro",Consolas, sans;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #fdf0ee;
  --fg: #000000;
  --accent-fg: #ececec;
  --border: #ececec;
  --title: #000000;
  --title-accent: #E5C07B;
  --link: #BE5046;
  --link-accent: #C678DD;
  
  /* ---------- NIGHT THEME ---------- */
  --nbg: #282C34;
  --nfg: #ABB2BF;
  --naccent-fg: #404859; /* not actual color in one dark pro, just bg with slightly more blue */
  --nborder: #E5C07B;
  --nlhbg: #D19A66; /* night link hint background */
  --nlhfg: #000000; /* night link hint foreground */
  --ntitle: #ABB2BF;
  --ntitle-accent: #D19A66;
  --nlink: #BE5046;
  --nlink-accent: #C678DD;
  

  font-family: var(--font);
  font-size: var(--font-size-link);
}

/* HUD */
.HUD {
  border-radius: 3px;
  text-transform: lowercase;
  color: var(--title);
  max-width: 420px;
  min-width: unset;
  line-height: 20px;
  align-items: center;
  padding: 10px;
}

.HUD.D {
  color: var(--ntitle);
}

.HUD:after {
  background: var(--bg);
  border: var(--border);
}

.HUD.D:after {
  background: var(--nbg);
  border: var(--nborder);
}

.HUD.UI {
  min-width: 380px;
  align-items: unset;
}

/* HINTS */
.LH {
  color: var(--fg);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.D .LH {
  color: var(--nlhfg);
  border: 1px solid var(--nborder);
  background: var(--nlhbg);
  box-shadow: var(--shadow);
}

.MC {
  color: var(--title);
}

.D .MC {
  color: var(--ntitle);
}


/* #omni */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 14px;
  --font-weight: normal;
  --font: "Source Code Pro",Consolas, sans;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #fdf0ee;
  --fg: #000000;
  --accent-fg: #ececec;
  --border: #ececec;
  --title: #000000;
  --title-accent: #E5C07B;
  --link: #BE5046;
  --link-accent: #C678DD;
  
  /* ---------- NIGHT THEME ---------- */
  --nbg: #282C34;
  --nfg: #ABB2BF;
  --naccent-fg: #404859; /* not actual color in one dark pro, just bg with slightly more blue */
  --nborder: #E5C07B;
  --nlhbg: #D19A66; /* night link hint background */
  --nlhfg: #000000; /* night link hint foreground */
  --ntitle: #ABB2BF;
  --ntitle-accent: #D19A66;
  --nlink: #BE5046;
  --nlink-accent: #C678DD;


  font-family: var(--font);
  /*font-size: var(--font-size);*/
}

body {
  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
  box-shadow: var(--shadow);
}

body.has-dark{

}

/* Animate Slide in */
@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#toolbar {
  top: 10px;
  right: 14px;
  opacity: 0;
}

#toolbar:hover {
  opacity: 1;
}

#bar, #input, #list {
  background: var(--bg);
  font-weight: var(--font-weight);
}
.has-dark #bar, .has-dark #input, .has-dark #list {
  background: var(--nbg);
}

#bar{
  padding: 10px;
/*padding: var(--padding);*/
  border-bottom: none;
}

#bar::before{
/*for hint or content icon before typing*/
  content: "➤";
  position: absolute;
  left: 20px;
  z-index: 300;
  padding: 6px 0;
  font-weight: bold;
  font-size: var(--font-size);
  color: var(--fg);
}

.has-dark #bar::before{
  color: var(--nfg);
}

#input {
  padding: var(--padding) 38px;
  color: var(--title);
  border: none;
  box-shadow: none;
}

.has-dark #input {
  color: var(--ntitle);
}

.item .icon {
  width: 24px;
  height: 24px;
  padding-right: unset;
  margin-right: 10px;
  margin-top: 5px;
  background-position: bottom right;
}

.item .icon path {
  opacity: 0.25;
  position: absolute;
  z-index: -1;
  transform-origin: 0px 0px;
  transform: scale(0.75);
}

.item.s,
.item:hover {
  background-color: var(--accent-fg);
  border: 3px rgba(0, 0, 0, 0.02) solid;
  cursor: pointer;
}

.has-dark .item.s,
.has-dark .item:hover {
  background-color: var(--naccent-fg);
}

.item .top {
  color: var(--title);
  position: relative;
  height: 30px;
}

.has-dark .item .top {
  color: var(--ntitle);
}

.item .top .title {
  font-size: var(--font-size);
  line-height: 10px;
  margin-top: 2px;
}

.item .top .title match {
  color: var(--title-accent);
}

.has-dark .item .top .title match {
  color: var(--ntitle-accent);
}

.item .top .title:empty::after {
  content: "<blank>";
}

.item .bottom {
  margin-top: -14px;
  padding-left: 14px;
}

.item .bottom a {
  color: var(--link);
  font-size: var(--font-size-link);
}

.has-dark .item .bottom a {
  color: var(--nlink);
}

.item .bottom a match {
  color: var(--nlink-accent);
  text-decoration: none;
}

.has-dark .item .bottom a match {
  color: var(--nlink-accent);
}

/* #find */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 14px;
  --font-weight: normal;
  --font: "Source Code Pro",Consolas, sans;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #fdf0ee;
  --fg: #000000;
  --accent-fg: #ececec;
  --border: #ececec;
  --title: #000000;
  --title-accent: #E5C07B;
  --link: #BE5046;
  --link-accent: #C678DD;
  
  /* ---------- NIGHT THEME ---------- */
  --nbg: #282C34;
  --nfg: #ABB2BF;
  --naccent-fg: #404859; /* not actual color in one dark pro, just bg with slightly more blue */
  --nborder: #E5C07B;
  --nlhbg: #D19A66; /* night link hint background */
  --nlhfg: #000000; /* night link hint foreground */
  --ntitle: #ABB2BF;
  --ntitle-accent: #D19A66;
  --nlink: #BE5046;
  --nlink-accent: #C678DD;


  font-family: var(--font);
  /*font-size: var(--font-size);*/
}


.r {
  color: var(--title-accent);
  background: var(--bg);
  border: none;
  box-shadow: none;
}

.r.D {
  color: var(--ntitle-accent);
  background: var(--nbg);
}

#i {
  color: var(--link-accent);
}

.D #i {
  color: var(--nlink-accent);
}


/* #find:host */


/* #find:selection */