maxmilton/new-tab

// stylelint-disable no-descending-specificity

/**
 * App styles
 */

body {
  overflow-y: scroll; // prevent jump on load
  margin: 108px 0;
  color: var(--c3);
  font-size: 18px;
  font-variant: none;
  // Although it's best practice to use a unitless value for line-height, this
  // is a hack for alignment with the minimum possible style properties. Value
  // should be the same as as bookmark bar height.
  line-height: 42px;
  background: var(--b);
  text-rendering: optimizespeed;
}

a,
// folder
.f {
  display: block;
  color: var(--t);
  white-space: nowrap;
}

a,
// subfolder
.sf .f {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  cursor: pointer; // for menu settings link (without href)

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

// all <img> are favicons
img {
  width: 16px;
  height: 16px; // prevents realignment jump on load
  margin: 0 10px 0 0;
}

svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-width: 2px;
}

// search results container
#c {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 18px;
}

// "Load more" button
button,
// search input
#s {
  box-sizing: border-box;
  width: 100%;
  margin-top: 9px;
  padding: 11px 20px;
  border: 2px solid var(--c1);
  border-radius: 24px;
  color: var(--t);
  font-size: 21px;
  background: inherit;
  outline: none;

  &:hover,
  &:focus {
    border-color: var(--c3);
  }
}

#s {
  margin: 0 0 35px;
  padding-left: 58px;
}

// menu icon
#im,
// search icon
#i {
  color: var(--c3);
}

#i {
  position: absolute;
  top: 14px;
  left: 38px;
}

// overflow bookmark folder icon
#io {
  padding: 9px;
}

#b {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 42px; // should be same as body line-height
  background: var(--c2);
  box-shadow: var(--s);

  & > a,
  // folder
  & > .f {
    flex-shrink: 0;
    max-width: 16ch;
    padding: 0 13px;
  }
}

#b a,
.f {
  &:hover,
  &:focus {
    background-color: var(--c1);
  }
}

// empty folder
#e {
  padding: 0 13px;
  color: var(--c3);
}

// subfolder
.sf {
  position: fixed;
  z-index: 1;
  overflow-y: auto;
  background: var(--c2);
  box-shadow: var(--s);

  a,
  // folder
  .f {
    min-width: 5ch;
    max-width: 38ch;
    padding: 0 13px;
  }

  .f {
    position: relative;
    padding-right: 24px;
  }
}

// subfolder arrow icon
.i {
  position: absolute;
  top: 9px;
  right: 0;
}

.end {
  margin-left: auto;
}

hr {
  border: 0;
  border-bottom: 1px solid var(--c1);
}

// menu
#m {
  position: fixed;
  top: 90px;
  margin: -28px -84px -64px 0;
  padding: 10px 84px 84px 42px;
}

// menu dropdown
#d {
  position: absolute;
  top: 10px;
  padding: 9px 23px; // 9px = half of font-size
  background: var(--c2);
  box-shadow: var(--s);
  opacity: 0;
  transform: scale(0.8);
  transform-origin: 0 10px;
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out;

  #m:hover > &,
  #m:focus > & {
    opacity: 1;
    transform: scale(1);
    transition-duration: 192ms;
  }
}