template.css

/* #ui */
* {
/*insertroot*/
  

  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(--nfg);
  border: 1px solid var(--nborder);
  background: var(--nbg);
  box-shadow: var(--shadow);
}

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

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


/* #omni */
* {
/*insertroot*/


  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-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 */