@charset "UTF-8";

/* Base */
:root {
  font-family: sans-serif;
  font-size: 18px;
}

body {
  margin: 0;
}

#main-container {
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
}


/* Main fields */
#field-header {
  width: 100%;
  margin: 0;
  background-color: #000;

  font-size: 1.5rem;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

#field-buttons {
  width: 100%;
  margin: 40px 0 0 0;
  text-align: center;
}

#field-fileslist {
  box-sizing: border-box;
  width: calc(100% - 20px); /* 20px: make margin 10px in right/left */
  max-width: 700px;
  min-height: 300px;
  max-height: 100%;
  margin: 20px auto;
  border: 3px solid hsl(0, 0%, 30%);
  border-radius: 10px;
  overflow: hidden;
  overflow-y: scroll;

  font-size: 1rem;
}
#field-fileslist:empty {
  /* For viewing in center */
  display: flex;
  justify-content: center;
  align-items: center;
}
#field-fileslist:empty::before {
  display: block;
  color: hsl(0, 0%, 40%);
  font-style: italic;
  content: "or drag&drop here to input";
}


/* Drag&Drop input view */
#dragview {
  /* For display in center */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-color: hsla(240, 100%, 70%, 0.8);
}
#dragview-icon {
  display: block;
  width: 4em;
  max-width: 100%;
  margin-bottom: 1em;

  transform: rotate(90deg);
}
#dragview-text {
  color: #fff;
}


/* Buttons */
:root {
  --button-text-size: 1rem;
  --button-text-padding: 0.5em;
  --button-icon-size: 1.4em;
}

#button-add-files, #button-add-dir, #button-clear, #button-process {
  position: relative;
  display: inline-block;
  margin: 5px;
  padding: var(--button-text-padding);
  padding-left: calc(var(--button-icon-size) + var(--button-text-padding) * 2);

  background-position: var(--button-text-padding);
  background-repeat: no-repeat;
  background-size: var(--button-icon-size);
  background-color: hsl(0, 0%, 30%);
  border: none;
  outline: none;
  border-radius: 5px;

  font-size: var(--button-text-size);
  line-height: 1em;
  color: #fff;
  user-select: none;

  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s linear;
}
#button-add-files { background-image: url(../static/icons/add-file.svg); }
#button-add-dir   { background-image: url(../static/icons/add-dir.svg); }
#button-clear     { background-image: url(../static/icons/trash.svg); }
#button-process   { background-image: url(../static/icons/arrow-right.svg);
                    background-color: hsl(240, 100%, 70%); }
#button-add-files:focus, #button-add-dir:focus, #button-clear:focus, #button-process:focus,
#button-add-files:hover, #button-add-dir:hover, #button-clear:hover, #button-process:hover {
  opacity: 0.6;
}
#button-add-files:disabled, #button-add-dir:disabled, #button-clear:disabled, #button-process:disabled {
  cursor: wait;
  opacity: 0.4;
}
#button-process:disabled {
  cursor: not-allowed;  /* When process unavailable*/
}


/* Buttons - on process */
#button-process[onprocess] {
  color: rgba(0, 0, 0, 0);
  background-image: none;
  padding: var(--button-text-padding) calc((var(--button-text-padding) * 3 + var(--button-icon-size)) / 2); /* Set padding right/left same */

  cursor: wait; /* When processing */

  /* For viewing in center */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#button-process[onprocess]::after {
  display: block;
  position: absolute;

  box-sizing: border-box;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  border: 2px solid #fff;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
  animation: loading-rotate 1s linear infinite;

  content: "";
}
@keyframes loading-rotate {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}