gallery.mjs/index.css

@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Geologica:wght@100..900&family=Oswald:wght@200..700");

@layers system demonstration;

@layer system {
  section#wrap {
    --wrap-padding: 1rem;
    --gap: 1rem;
    --columns: 4;
    --image-diameter: unset;
    --image-width: var(
      --image-diameter,
      calc(
        100% / var(--columns, 4) - var(--gap, 1rem) * (var(--columns, 4) - 1) /
          var(--columns, 4)
      )
    );
    --image-height: var(--image-diameter, 120px);
    position: relative;
    min-width: 300px;
    width: 100%;
    height: min-content;
    padding: var(--wrap-padding, 1rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 2px solid var(--background-color-inverted);

    > label[for="images"]:has(> input#images),
    > button#reset {
      width: max-content;
      padding: 0.4rem 0.8rem;
      display: flex;
      cursor: pointer;
      border-radius: 0.75rem;
      border: 2px solid var(--section-background-color-inverted) !important;
      background-color: var(--section-background-color) !important;

      &:hover {
        filter: brightness(1.2);
      }

      &:active {
        /* filter: invert(1); no need to invert borders */

        color: var(--text-color-inverted);
        background-color: var(--section-background-color-inverted);
      }

      > input#images {
        display: none;
      }
    }

    > button#reset {
      position: absolute;
      top: var(--wrap-padding, 1rem);
      right: var(--wrap-padding, 1rem);
      font-family: "Geologica", sans-serif;
      font-size: medium;
      color: var(--text-color);
    }

    > span#order {
      margin-top: auto;
    }

    > label#loader {
      display: none;
      cursor: pointer;

      &:hover {
        background-color: hsl(
          from var(--section-background-color-inverted) h s 20%
        );
      }

      &:active {
        background-color: hsl(
          from var(--section-background-color-inverted) h s 10%
        );
      }
    }

    &:not(:has(> div#gallery *)) {
      > div#gallery {
        display: none;
      }

      > label#loader {
        width: 100%;
        height: 140px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.75rem;
        border: 2px dashed var(--section-background-color-inverted);
      }
    }

    > div#gallery {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      gap: var(--gap, 1rem);
      border-radius: 0.75rem;
      overflow: hidden;

      > div.image {
        position: relative;
        width: var(--image-width, 120px);
        height: var(--image-height, 120px);
        cursor: grab;
        overflow: hidden;
        border-radius: 0.75rem;

        &:hover {
          &:not(:has(> button:hover)) {
            filter: brightness(1.2) contrast(1.1);
          }

          > button.delete {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        &:active:not(:has(> button:active)) {
          cursor: grabbing !important;
          filter: brightness(0.8) contrast(1.2);
        }

        &.target {
          filter: sepia(1) contrast(1.4) brightness(0.7);
        }

        > button.delete {
          position: absolute;
          top: 5%;
          right: 5%;
          display: none;
          padding: 9px 12px;
          cursor: pointer;
          border-radius: 0.75rem;
          background-color: var(--section-background-color) !important;

          &:hover {
            filter: brightness(1.2) contrast(1.1);
          }

          &:active {
            filter: brightness(0.8) contrast(1.2);
          }

          > i.icon {
            color: var(--red, red);
          }
        }

        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

@layer demonstration {
  @layer icons {
    @layer trash {
      i.icon.trash {
        box-sizing: border-box;
        position: relative;
        display: block;
        width: 10px;
        height: 12px;
        border: 2px solid transparent;
        box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
        margin-top: 4px;
      }

      i.icon.trash.small {
        height: 9px;
      }

      i.icon.trash::after,
      i.icon.trash::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
      }

      i.icon.trash::after {
        background: currentColor;
        border-radius: 3px;
        width: 16px;
        height: 2px;
        top: -4px;
        left: -5px;
      }

      i.icon.trash::before {
        width: 10px;
        height: 4px;
        border: 2px solid;
        border-bottom: transparent;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        top: -7px;
        left: -2px;
      }
    }
  }

  :root {
    @layer colorscheme {
      --text-color: #fff;
      --text-color-inverted: #000;
      --section-background-color-inverted: #fff;
      --section-background-color: #000;
      --background-color: #000;
      --background-color-inverted: #fff;

      --red: red;
    }

    @layer localization {
      /* --localization-empty: "Empty"; */
    }

    font-family: "Geologica", sans-serif;
    color: var(--text-color);
  }

  .unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  body {
    margin: unset;
    width: 100vw;
    height: 100vh;
    padding-top: 20vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    background-color: var(--background-color);
  }

  button {
    background: unset;
    border: unset;
  }

  section#wrap {
    width: 60vw;
  }
}