File: src/style.scss

@use '../node_modules/basiclightbox/src/styles/main';
@use '../node_modules/prismjs/themes/prism.css';
@use '../node_modules/melba-toast/dist/Melba.css';

// Mini reset
html {
  font-size: 16px;
}

html,
body,
ul {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

// body too small for entire page
html,
body {
  min-height: 100vh;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

// Utility
.hidden {
  display: none !important;
}

.invisible {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.loading {
  background: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSIxNDNweCIgaGVpZ2h0PSIxNDNweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBzdHlsZT0iYmFja2dyb3VuZDogbm9uZTsiPjxnIHRyYW5zZm9ybT0icm90YXRlKDAgNTAgNTApIj48cmVjdCB4PSI0OCIgeT0iMjQiIHJ4PSI5LjYiIHJ5PSI0LjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzRjMWY1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzAgNTAgNTApIj48cmVjdCB4PSI0OCIgeT0iMjQiIHJ4PSI5LjYiIHJ5PSI0LjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzRjMWY1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNjAgNTAgNTApIj48cmVjdCB4PSI0OCIgeT0iMjQiIHJ4PSI5LjYiIHJ5PSI0LjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzRjMWY1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSI+PHJlY3QgeD0iNDgiIHk9IjI0IiByeD0iOS42IiByeT0iNC44IiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIgZmlsbD0iIzc0YzFmNSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDEyMCA1MCA1MCkiPjxyZWN0IHg9IjQ4IiB5PSIyNCIgcng9IjkuNiIgcnk9IjQuOCIgd2lkdGg9IjQiIGhlaWdodD0iMTIiIGZpbGw9IiM3NGMxZjUiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTAgNTApIj48cmVjdCB4PSI0OCIgeT0iMjQiIHJ4PSI5LjYiIHJ5PSI0LjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzRjMWY1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDUwIDUwKSI+PHJlY3QgeD0iNDgiIHk9IjI0IiByeD0iOS42IiByeT0iNC44IiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIgZmlsbD0iIzc0YzFmNSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDIxMCA1MCA1MCkiPjxyZWN0IHg9IjQ4IiB5PSIyNCIgcng9IjkuNiIgcnk9IjQuOCIgd2lkdGg9IjQiIGhlaWdodD0iMTIiIGZpbGw9IiM3NGMxZjUiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNDAgNTAgNTApIj48cmVjdCB4PSI0OCIgeT0iMjQiIHJ4PSI5LjYiIHJ5PSI0LjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzRjMWY1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCA1MCA1MCkiPjxyZWN0IHg9IjQ4IiB5PSIyNCIgcng9IjkuNiIgcnk9IjQuOCIgd2lkdGg9IjQiIGhlaWdodD0iMTIiIGZpbGw9IiM3NGMxZjUiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzAwIDUwIDUwKSI+PHJlY3QgeD0iNDgiIHk9IjI0IiByeD0iOS42IiByeT0iNC44IiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIgZmlsbD0iIzc0YzFmNSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMzAgNTAgNTApIj48cmVjdCB4PSI0OCIgeT0iMjQiIHJ4PSI5LjYiIHJ5PSI0LjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzRjMWY1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjwvcmVjdD48L2c+PC9zdmc+)
    center center no-repeat;

  > * {
    opacity: 0.5;
  }
}

.active {
  background-color: #ffc;
}

// Items
main {
  padding: 20px;

  ul {
    border: 1px solid #efefef;
    border-radius: 5px;
    margin: 0;
    padding: 0 5px;
  } // main ul
} // main

.upload {
  border: 1px solid #eee;
  border-radius: 5px;
  color: #999;
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 20px;
  padding: 10px 0;
  text-align: center;
  transition: 0.5s;

  .create-directory {
    color: #22a;
    font-size: inherit;
    text-decoration: underline;
  }

  .is-touch & .droppable,
  .no-drag-drop & .droppable {
    display: none;
  }

  [type='file'] {
    max-width: 100%;
  }
}

.basicLightbox {
  .basicLightbox__placeholder {
    max-height: 95vh;
    max-width: 95vw;
    overflow: auto;
    padding: 0 1em;
  }

  &.font,
  &.text {
    .basicLightbox__placeholder {
      background: #fff;
    }
  }

  body:not([data-disable-checkerboard]) &.image img {
    pointer-events: all;

    &:hover {
      // copied from https://codepen.io/pascalvgaal/pen/jPXPNP
      background: #eee
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".25" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
      background-size: 30px 30px;
    }
  }
}

@import 'components/Tree/Tree';

.tree .leaf .name {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGrSURBVDjLxZO7ihRBFIa/6u0ZW7GHBUV0UQQTZzd3QdhMQxOfwMRXEANBMNQX0MzAzFAwEzHwARbNFDdwEd31Mj3X7a6uOr9BtzNjYjKBJ6nicP7v3KqcJFaxhBVtZUAK8OHlld2st7Xl3DJPVONP+zEUV4HqL5UDYHr5xvuQAjgl/Qs7TzvOOVAjxjlC+ePSwe6DfbVegLVuT4r14eTr6zvA8xSAoBLzx6pvj4l+DZIezuVkG9fY2H7YRQIMZIBwycmzH1/s3F8AapfIPNF3kQk7+kw9PWBy+IZOdg5Ug3mkAATy/t0usovzGeCUWTjCz0B+Sj0ekfdvkZ3abBv+U4GaCtJ1iEm6ANQJ6fEzrG/engcKw/wXQvEKxSEKQxRGKE7Izt+DSiwBJMUSm71rguMYhQKrBygOIRStf4TiFFRBvbRGKiQLWP29yRSHKBTtfdBmHs0BUpgvtgF4yRFR+NUKi0XZcYjCeCG2smkzLAHkbRBmP0/Uk26O5YnUActBp1GsAI+S5nRJJJal5K1aAMrq0d6Tm9uI6zjyf75dAe6tx/SsWeD//o2/Ab6IH3/h25pOAAAAAElFTkSuQmCC);
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 1.2rem;
}

@import 'components/Item';
@import 'components/Modal';
@import 'components/TreeViewModal';