/* #### GALLERY ################################################################################ */

main {
  margin-top: calc((var(--navbar-height) * 1.5) + var(--block-16));
}

main section .gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--padding-mid) var(--padding-mid) 0 var(--padding-mid);
  width: 100%;
  max-width: calc(100% - (var(--padding-mid) * 2));
}

div.subbar {
  position: fixed;
  top: var(--navbar-height);
  width: 100vw;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: var(--subbar-background);
  padding: calc(var(--border-radius-default) * 2);
  box-shadow: 0 0 var(--block-16) rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  gap: var(--block-64);
  align-items: center;
  justify-content: center;
  height: var(--block-32);
  z-index: 3;
  font-family: var(--font-2);
  font-weight: 300;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  overflow: hidden;
}

.subbar div#sorts,
.subbar div#filters {
  display: flex;
  flex-direction: row;
  gap: var(--block-16);
  text-transform: capitalize;
}

.subbar h1 {
  display: inline;
  font-size: 1rem;
  font-family: var(--font-2);
  font-weight: 400;
}

#sliders {
  display: none;
}

.subbar svg {
  height: var(--block-24);
}

input:where([type='radio']) {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  vertical-align: top;
  margin: 0 var(--block-4) 0 0;
  border: 1px solid var(--shade-7);
  border-radius: 0.5rem;
  background: var(--shade-2);
}

input:where([type='radio']):hover,
.subbar label:hover {
  cursor: pointer;
}

input[type='radio'] {
  border-radius: 50%;
}

input:where([type='radio']):where(:active:not(:disabled), :focus) {
  border-color: var(--shade-6);
  outline: none;
}

input:where([type='radio']):disabled {
  background: var(--shade-5);
}

input[type='radio']:checked {
  background-color: var(--shade-1);

  border-width: 0.25rem;
}

div.gallery-thumb {
  display: block;
  translate: inherit;
  scale: 1;
  filter: brightness(0.9) saturate(0.66);
  transition:
    scale 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    translate 0.2s ease-in-out,
    filter 0.2s ease-in-out;
  margin: 0 var(--padding-small) var(--padding-mid) var(--padding-small);
  box-shadow: var(--low-shadow);
  border-radius: var(--border-radius-default);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.25);
  aspect-ratio: 1 / 1;
  width: var(--item-width);
  max-width: 100%;
  overflow: hidden;
}

.gallery-thumb::before {
  position: absolute;
  animation: downloading 2s infinite;
  inset: 0;
  content: '';
}
@keyframes downloading {
  0%,
  20%,
  40%,
  100% {
    background-color: rgba(255, 255, 255, 0);
  }
  10%,
  30% {
    background-color: rgba(255, 255, 255, 0.25);
  }
}
.gallery-thumb.downloaded::before {
  content: none;
}

.gallery-thumb.downloaded:not([data-title=''])::after {
  display: block;
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  transition-delay: 0s;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
  background-size: cover;
  padding: var(--padding-mid);
  width: 100%;
  max-width: 100%;
  height: 50%;
  overflow: hidden;
  content: attr(data-title);
  color: white;
  font-weight: 500;
  font-size: var(--block-20);
  font-family: var(--font-1);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-thumb.downloaded:hover::after {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  transition-delay: 0.5s;
}

div.gallery-thumb img {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

div.gallery-thumb > img {
  opacity: 0;
  transition: opacity 0.2s linear;
}

.gallery-thumb.downloaded > img {
  opacity: 1;
}

div.gallery-thumb.downloaded:hover {
  translate: 0 calc(0rem - var(--block-4));
  scale: 1.03;
  z-index: 2;
  filter: brightness(1) saturate(1);
  box-shadow: var(--high-shadow);
}

div.gallery-thumb.downloaded:not(:hover) {
  animation: zIndexAbove 0.2s;
}

@keyframes zIndexAbove {
  0%,
  100% {
    z-index: 1;
  }
}

div.modal {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: flex;
  position: relative;
  position: fixed;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: -100;
  inset: 0;
  background-color: rgba(32, 32, 32, 0.95);
  width: 100%;
  height: 100%;
  user-select: none;
}

div.modal.open {
  opacity: 1;
  z-index: 100;
}

div.modal-container {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 95%;
  height: 95%;
  overflow: hidden;
}

div.modal-container > img {
  opacity: 0;
  transition: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}
div.modal-container.downloaded > img {
  opacity: 1;
  transition: opacity 0.3s linear;
}

div.modal div.modal-information {
  display: flex;
  position: absolute;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
div.modal div.modal-information.on {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

div.modal-information div.name {
  display: flex;
  /* background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); */
  padding: var(--block-64);
  width: 100%;
  height: 33%;
  color: white;
  font-weight: 400;
  font-size: var(--block-64);
  text-shadow: var(--modal-text-shadow);
}
div.modal-information div.name:empty {
  opacity: 0;
}

div.modal-information div.details {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); */
  padding: var(--block-64);
  width: 100%;
  min-height: 33%;
  color: white;
  font-weight: 200;
  font-size: var(--block-16);
}
div.modal-information div.details:empty {
  opacity: 0;
}

div.modal-information div.details div.date:not(:empty) {
  text-shadow: var(--modal-text-shadow);
  font-weight: 200;
  font-family: var(--font-1);
  font-size: var(--block-16);
}

div.modal-information div.details div.description:not(:empty) {
  text-shadow: var(--modal-text-shadow);
  margin-top: var(--block-12);
  max-width: 50%;
  font-weight: 200;
  font-size: var(--block-24);
  font-family: var(--font-1);
}

div.modal-information div.details div.tags:not(:empty) {
  margin-top: var(--block-16);
}
div.modal-information div.details div.tags:not(:empty) ul {
  display: inline-flex;
  margin-top: var(--block-16);
  list-style-type: none;
}
div.modal-information div.details div.tags:not(:empty) li {
  display: flex;
  margin-right: var(--block-8);
  border-radius: var(--block-8);
  background-color: #ffffff;
  padding: var(--block-4) var(--block-8);
  color: #404040;
  font-weight: 500;
  font-size: var(--block-12);
  font-family: var(--font-2);
  text-transform: lowercase;
  box-shadow: var(--modal-text-shadow);
}

div.modal-information div.details div.tags:not(:empty)::before {
  text-shadow: var(--modal-text-shadow);
  margin-right: var(--block-8);
  content: 'Tags:';
  font-weight: 100;
  font-family: var(--font-1);
}

.modal-information div.left {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  padding-left: var(--block-32);
  height: 100%;
  min-height: 100%;
  color: white;
}

.modal-information div.right {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  padding-right: var(--block-32);
  height: 100%;
  min-height: 100%;
  color: white;
}

.modal-information div.cross {
  position: absolute;
  top: var(--block-32);
  right: var(--block-64);
  justify-content: center;
  align-items: center;
  color: white;
}

.modal-information div.left .end,
.modal-information div.right .end {
  display: none;
}

.modal-information .left svg,
.modal-information .right svg,
.modal-information .cross svg {
  stroke: #404040;
  stroke-width: var(--block-2);
  flex-grow: 1;
  opacity: 0.25;
  transition: all 0.2s ease-in-out;
  height: var(--block-128);
  color: #808080;
}
.modal-information .cross svg {
  opacity: 0.5;
  height: var(--block-64);
}
.modal-information .left svg,
.modal-information .right svg,
.modal-information .cross svg {
  max-height: 10svh;
}
.modal-information.on div.left svg:hover,
.modal-information.on div.right svg:hover,
.modal-information.on div.cross svg:hover {
  stroke: #808080;
  scale: 1.25;
  opacity: 1;
  cursor: pointer;
  color: white;
}

.modal-information.on div.left svg:active,
.modal-information.on div.right svg:active,
.modal-information.on div.cross svg:active {
  stroke: #808080;
  scale: 0.75;
  opacity: 1;
  cursor: pointer;
  color: white;
}

div.gallery-loading {
  padding: var(--block-32) 0 var(--block-32) 0;
}

.spinner {
  -webkit-animation: spinner 1s ease-in-out infinite;
  animation: spinner 1s ease-in-out infinite;
  border: var(--block-4) solid var(--shade-3);
  border-top-color: var(--shade-7);
  border-radius: 50%;
  width: var(--block-48);
  height: var(--block-48);
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/* #### GALLERY EDITOR ######################################################################### */

main section .gallery-editor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--padding-mid) var(--padding-mid) 0 var(--padding-mid);
  width: 100%;
  max-width: calc(100% - (var(--padding-mid) * 2));
}

.gallery-editor div.image {
  position: relative;
  border: var(--block-1) solid var(--shade-2);
  border-radius: var(--border-radius-small);
  background-color: var(--shade-1);
  width: 150px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  margin: var(--block-4);
}
.gallery-editor div.image:hover,
.gallery-editor div.image:active {
  border-color: var(--shade-8);
  outline: solid var(--block-1) var(--shade-8);
}

.gallery-editor div.image[data-imagedescription='false']::after,
.gallery-editor div.image[data-parsedusercomment-description='false']::after {
  display: inline-block;
  content: '';
  background-image: url('/images/warning_sign.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  min-width: 25%;
  min-height: 25%;
  margin: var(--block-4);
  animation: warning-pulse 1s infinite;
}
@keyframes warning-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.25;
  }
}

.modal .form-window {
  width: 600px;
  background-color: #f0f0f0;
  border: solid var(--block-1) #808080;
  border-radius: var(--border-radius-default);
  font-family: var(--font-2);
  font-weight: 200;
  overflow: hidden;
  color: #606060;
}

.modal .form-window .form-title {
  text-align: center;
  border-bottom: var(--block-2) dotted #e0e0e0;
  padding-bottom: var(--block-8);
}

.modal .form-window .form-title h1 {
  background-color: #ffffff;
  font-size: var(--block-24);
  padding: var(--block-8);
  font-family: var(--font-2);
  color: #808080;
  text-transform: none;
}

.modal .form-window .form-title p {
  font-size: var(--block-12);
}

.modal .form-window .form-title img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border: 0;
  margin: var(--block-8);
}

.modal .form-window form {
  padding: var(--padding-small);
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--block-8);
}

.modal .form-window div.form-group {
  display: flex;
  gap: var(--block-8);
  justify-content: flex-start;
  align-items: center;
}

.modal .form-window div.form-group.top-margin {
  margin-top: var(--block-16);
}

.modal .form-window div.form-group label {
  flex: 0 0 var(--block-128);
  text-align: right;
}

.modal .form-window div.form-group label.use-manual-sort-time {
  width: auto;
  font-size: var(--block-12);
  padding-right: var(--block-8);
  text-align: center;
}
.modal .form-window div.form-group input:not([type='checkbox']) {
  flex-grow: 1;
}

.modal .form-window div.form-group input[type='text'],
.modal .form-window div.form-group input[type='datetime-local'] {
  position: relative;
  border: 0;
  border-radius: var(--border-radius-default);
  background-color: #e0e0e0;
  padding: var(--block-8);
  color: #404040;
  font-family: var(--font-2);
}

.modal .form-window div.form-group input[type='text']::placeholder {
  color: #a0a0a0;
  font-weight: 200;
}

.modal .form-window div.form-group input:disabled {
  opacity: 0.33;
}

.modal .form-window div.form-group input:placeholder-shown {
  outline: var(--block-2) solid #ff8080;
}

.modal #exif-form #status {
  opacity: 0;
}

.modal #exif-form .success {
  color: #008000;
  animation: modal-status 4s ease-in-out;
}
.modal #exif-form .error {
  color: #c00000;
  opacity: 1;
  /* animation: modal-status 4s ease-in-out; */
}

@keyframes modal-status {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  75% {
    opacity: 1;
  }
}

.modal #exif-form #submit-button,
.modal #exif-form #close-button,
.modal #exif-form #uuid-button {
  cursor: pointer;
  box-shadow: 0 var(--block-2) var(--block-4) rgba(0, 0, 0, 0.25);
  border: 0;
  border: var(--block-1) solid #808080;
  border-radius: var(--border-radius-default);
  background: #e0e0e0;
  padding: var(--block-4);
  color: #202020;
  font-weight: 200;
  font-size: var(--block-16);
  font-family: var(--font-2);
}

.modal #exif-form #submit-button:active,
.modal #exif-form #close-button:active,
.modal #exif-form #uuid-button:active {
  transform: scale(0.98);
  box-shadow: 0 var(--block-1) var(--block-2) rgba(0, 0, 0, 0.1);
}

.modal #exif-form #submit-button:disabled,
.modal #exif-form #close-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal #exif-form input:disabled {
  cursor: not-allowed;
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

@media screen and (max-width: 608px) {
  div.subbar {
    position: fixed;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    top: -100svh;
    height: 100svh;
    overflow: scroll;
    font-size: var(--block-32);
    max-height: calc(100svh - var(--navbar-height));
    transition: top 0.5s ease-in-out;
    pointer-events: none;
  }

  div.subbar h1 {
    font-size: var(--block-24);
  }

  div.subbar.subbar-visible {
    top: var(--navbar-height);
    pointer-events: all;
  }
  div.subbar.subbar-exit {
    display: none;
    transition: none;
  }

  .subbar div#sorts,
  .subbar div#filters {
    flex-direction: column;
    padding: var(--block-16);
  }

  .subbar > div > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  #sliders {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    height: var(--navbar-height);
    padding: var(--block-8);
    color: var(--shade-6);
    z-index: 6;
  }

  div.gallery-thumb {
    filter: brightness(1) saturate(1);
    margin: 0 0 var(--block-32) 0;
    box-shadow: var(--low-shadow);
    aspect-ratio: 1 / 1;
    width: 100%;
    height: initial;
  }
  div.gallery-thumb.downloaded:hover {
    translate: initial;
    scale: initial;
    box-shadow: var(--low-shadow);
  }

  .gallery-thumb.downloaded:not([data-title=''])::after {
    all: initial;
  }

  div.gallery-thumb:last-of-type {
    margin-bottom: 0;
  }

  div.modal-information div.name {
    padding: var(--block-16);
    padding-right: var(--block-64);
    font-size: calc(var(--font-size) * 1.5);
  }

  div.modal-information div.details {
    padding: var(--block-16);
  }

  div.modal-information div.details div.description:not(:empty) {
    max-width: 85%;
  }

  .modal-information div.left {
    padding-left: var(--block-8);
  }

  .modal-information div.right {
    padding-right: var(--block-8);
  }

  .modal-information div.cross {
    top: var(--block-8);
    right: var(--block-8);
  }

  .modal-information .left svg,
  .modal-information .right svg,
  .modal-information .cross svg {
    height: var(--block-48);
  }
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

@media (hover: none) {
  .modal-information.on div.left svg,
  .modal-information.on div.right svg,
  .modal-information.on div.cross svg {
    stroke: #808080;
    stroke-width: var(--block-16);
    scale: 1.25;
    opacity: 1;
    cursor: pointer;
    color: white;
  }
}