/* Drag-and-drop upload area (was droparea.css) */
/* Container for the running uploads */
.currentUploads {
  width: 100%;
  margin: auto;
  margin-top: 1em;
}

/* A block for the whole upload */
.uploadTemplate {
  padding: 16px;
  margin-bottom: 1em;
}

/* Progress bar */
.progress {
  border-radius: 8px;
  border: 2px solid;
  width: 100%;
}
.progressValue {
  border-radius: 6px;
  height: 12px;
  background: white;
  transition: width .2s ease-in-out;
  min-width: 12px; /* After that it starts reducing to a squashed circle */
}

/* Toggle these areas depending on browser support for drag and * */
.draganddrop {
  .sad { display: none; }
  .droparea { display: block; }
}

/* Vanilla upload */
.sad {
  form#upload input {
    display: block;
  }
}

/* Drop well */
.droparea {
  display: none; /* Hide without dragdrop support */
  box-sizing: border-box;
  margin: auto;
  margin-top: 2em;

  border: 3px dashed;
  border-radius: 16px;
  padding: 16px;

  h1 {
    text-align: center;
  }
}

.highlight {
  background: rgb(50,50,50);
}

/* Site styles (was styles.css) */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: rgb(185, 185, 185);
  font-size: 16px;
  background: rgb(20, 20, 20);
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
  color: rgb(116, 116, 116);
}

/* Not nested into the rule above on purpose: nesting resolves the parent as
:is(h1, h2, h3, h4, h5), which would raise the specificity of these from
(0,0,2) to (0,1,1) and let them start winning against class selectors. */
h1 b, h2 b, h3 b, h4 b, h5 b {
  font-weight: inherit;
  color: rgb(150, 150, 150);
}

p {
  line-height: 1.4em;
}

img.block {
  width: 100%;
  height: 100%;
  display: block;
}

div#main {
  background: #2A2A2A;
  /* Flame BG gray */
  padding: 0 10px;
  padding-bottom: 20px;
  border: 1px solid #343B41;
  min-width: 556px;
  margin: 0 10%;
}

footer {
  min-width: 556px;
  margin: 0 10%;
  text-align: center;
  color: #343B41;
  margin: 0 12%;
}

nav {
  display: block;
  overflow: auto;
  padding: 0;
  margin: 0 -10px;
  display: flex;
  flex-direction: row;

  a {
    box-sizing: border-box;
    width: 50%;
    padding: 9px 0;
    text-align: center;
    margin: 0;
    text-decoration: none;
    font-size: 24px;
    font-weight: normal;
    color: gray;

    &:visited {
      text-decoration: none;
    }
    &:hover, &:active {
      background: #343B41;
    }
  }
  hr {
    margin: 0;
    clear: both;
    border-color: #343B41;
  }
}

hr {
  border: none;
  border-top: 1px solid gray;
  margin-left: 0;
  margin-right: 0;
}

/* Global links */
a {
  color: inherit;
  &:link, &:active, &:visited {
    color: inherit;
  }
  &:hover {
    color: inherit;
    color: rgb(220, 220, 220);
  }
}

.shaders {
  /* auto-fill fits as many icon-wide tracks as the container allows, and the
  1fr maximum hands the width left over after that division to every track
  equally. That is what kills the ragged gutter on the right: the slack goes
  between the icons instead of piling up after the last column. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 6px 2px;
  justify-items: center;

  .shader {
    box-sizing: border-box;
    width: 100%;
    /* The icons are 126px wide at their native resolution, so allow about a
    quarter of upscaling and no more - beyond that the tracks keep growing but
    the tile stays put and the surplus turns into breathing room. */
    max-width: 158px;
    padding: 3px;
    /* Reserve the strip the download and GitHub links are pinned into, now
    that the tile is no longer a fixed 130px tall. */
    padding-bottom: 22px;
    border: 1px solid #343B41;
    position: relative;

    a {
      color: white;
      text-decoration: none;
    }
    .icon {
      display: block;
      position: relative;
    }
    img {
      display: block;
      width: 100%;
      height: auto;
    }
    &:hover {
      background: #343B41;
    }
    h3 {
      /* Name of the shader, kept to a single line so every tile in a row is
      the same height. Names too long for the tile are cut with an ellipsis
      rather than allowed to run out over the neighbour, and the full name
      stays available through the title attribute. */
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .gh-link {
      display: block;
      position: absolute;
      width: 16px;
      height: 16px;
      bottom: 3px;
      left: 24px;
      padding: 0;
      text-indent: -1000em;
      overflow: hidden;
      background-size: 14px 14px;
    }
    .dl {
      display: block;
      position: absolute;
      bottom: 4px;
      left: 5px;
      padding: 0;
      text-indent: -10em;
      overflow: hidden;
      background: url('/download.svg?s=bd31aee4') no-repeat;
      background-size: 14px;
      width: 14px;
      height: 14px;
    }
  }

  /* Badges hang in the bottom right corner of the icon. They are sized as a
  fraction of the icon width (42 and 68 pixels against the native 126) so they
  track it as the grid stretches the tile. A shader that is both updated and
  version-tagged only has one ::after to give, and the version badge wins by
  virtue of coming later - same as it always did. */
  .updated .icon:after,
  .atleast2015 .icon:after,
  .atleast2016 .icon:after,
  .atleast2017 .icon:after {
    display: block;
    content: ' ';
    position: absolute;
    right: 0;
    bottom: 0;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .updated .icon:after {
    width: 33.3%;
    background-image: url('/updated-badge.png?s=6a4d903f');
  }

  /* Minimum-version badges. They only differ by the image */
  .atleast2015 .icon:after,
  .atleast2016 .icon:after,
  .atleast2017 .icon:after {
    width: 54%;
  }
  .atleast2015 .icon:after {
    background-image: url('/2015-badge.png?s=da1e97c8');
  }
  .atleast2016 .icon:after {
    background-image: url('/2016-badge.png?s=0caceb58');
  }
  .atleast2017 .icon:after {
    background-image: url('/2017-badge.png?s=e053dafa');
  }
}

/* Download icon */
.download {
  background: url('/download.svg?s=bd31aee4') no-repeat left center;
  background-size: 24px;
  padding-left: 32px;
  display: inline-block;
}

/* Github links */
.gh-link {
  background: url('/gh-mark-light-16px.png?s=abc9c8f0') no-repeat center left;
  padding-left: 22px;

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    background: url('/gh-mark-light-32px.png?s=6b4582ce') no-repeat center left;
    background-size: 16px 16px;
  }
}

.downloadTotal {
  text-decoration: none;
  display: inline-block;
  padding: 14px;
  border: 1px solid rgb(52, 59, 65);
  border-radius: 2px;
  background-color: rgb(52, 59, 65);
  background-image: url('/download.svg?s=bd31aee4');
  background-position: 12px center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding-left: 46px;
  margin-right: .8em;
  &:hover {
    color: rgb(220, 220, 220);
    background-color: rgb(72, 79, 85);
  }
}

/* Deliberately left at this specificity (0,1,1) and in this position: the
13px rule inside .shaders is (0,2,1) and has to keep winning there, while
shader titles outside the grid get 14px. */
.shader h3 {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.flash {
  display: none;
  position: relative;
  background: rgb(200, 255, 200);
  border: 1px solid;
  padding: 12px;
  margin: 6px 0;
  color: green;
  border-radius: 3px;
}

iframe.videoembed {
  max-width: 100%;
}

.matteout {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Modal dialogs */
.dialog {
  border-sizing: border-box;
  padding: 6px 12px;
  width: 60%;
  position: absolute;
  top: 10px;
  left: 20%;
  border-radius: 6px;
  background: #2A2A2A;
  /* Flame BG gray */
  border: 1px solid #343B41;
  box-shadow: 5px 5px 8px black;

  h3 {
    margin-top: 6px;
    margin-bottom: 3px;
  }
  textarea {
    margin: 0;
    font-size: inherit;
    width: 100%;
  }
  button {
    font-size: inherit;
  }
  h2 {
    background: #343B41;
    color: rgb(220, 220, 220);
    margin: -6px -12px 0 -12px;
    padding: 6px 12px;
  }
}

.versioninfo {
  position: relative;
  margin-top: 12px;
  margin-bottom: 12px;

  h4 { /* version title */
    margin: 6px 0 6px 0em;
  }
  p {
    margin: 0 6px;
  }
  .download {
    position: absolute;
    top: 0;
    right: 0;
  }
  .notes {
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 3px;
    background: rgb(60,60,60);
  }
}