ar-design/dist/assets/css/components/form/upload/styles.css

AR Design is a (react | nextjs) ui library.

@import url("./list-and-gird.css");
@import url("./dropzone.css");

.ar-upload {
  position: relative;

  > input {
    display: none;
  }

  > .ar-upload-button {
    &.selected-files {
      list-style: none;

      > li {
        display: flex;
        flex-direction: row;
        gap: 0 0.5rem;

        > span {
          &:first-child {
            font-size: 0.15rem;
          }
        }
      }
    }

    > .button {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      height: 8.5rem;
      border: dashed 1px var(--gray-300);
      border-radius: var(--border-radius-sm);
      cursor: pointer;
      user-select: none;
      transition:
        border 250ms,
        box-shadow 250ms ease-in-out;

      &:has(.preview > img) {
        padding: 0;
        border: solid 1px rgba(var(--black-rgb), 0.75);
        overflow: hidden;
      }

      &:not(.dropzone) {
        &:hover {
          .preview {
            > .informations {
              visibility: hidden;
              opacity: 0;
            }
          }
        }

        &:has(.preview > img) {
          &:hover {
            border: solid 1px transparent !important;
          }
        }
      }

      &.dropzone {
        height: 12.5rem !important;
      }

      &.has-file {
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        align-items: flex-start !important;
      }

      &.dragging {
        box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), 0.75);
      }

      > .preview {
        > .buttons {
          position: absolute;
          inset: 0;
          display: flex;
          justify-content: center;
          align-items: center;

          &::before {
            position: absolute;
            inset: 0;
            content: "";
            background-color: transparent;
            z-index: 1;
            transition: background-color 250ms ease-in-out;
          }

          &:hover {
            &::before {
              background-color: rgba(var(--black-rgb), 0.75);
            }

            div {
              visibility: visible;
              opacity: 1;
            }
          }

          > div {
            display: flex;
            flex-direction: row;
            visibility: hidden;
            opacity: 0;
            z-index: 2;
            transition:
              visibility 250ms,
              opacity 250ms ease-in-out;
          }
        }

        > img {
          width: 100%;
          height: 100%;
          object-fit: fill;
          object-position: top;
        }

        > .informations {
          visibility: visible;
          opacity: 1;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          gap: 0.5rem;
          position: absolute;
          inset: auto 0 0 0;
          background-color: rgba(var(--black-rgb), 0.75);
          padding: 0.5rem;
          transition:
            visibility 250ms,
            opacity 250ms ease-in-out;

          > .file-name {
            width: 100%;
            color: var(--white);
            font-size: 0.75rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          > div {
            display: flex;
            gap: 0.25rem;

            > .file-size {
              background-color: var(--primary);
              padding: 0.25rem 0 0.25rem 0.25rem;
              border-radius: var(--border-radius-sm);
              color: var(--white);
              font-size: 0.75rem;
              font-weight: 700;

              > .size-type {
                background-color: rgba(var(--black-rgb), 0.5);
                margin-left: 0.25rem;
                border-top-right-radius: var(--border-radius-sm);
                border-bottom-right-radius: var(--border-radius-sm);
                padding: 0.25rem;
                color: var(--primary);
                font-weight: 700;
              }
            }

            > .file-type {
              background-color: var(--warning);
              padding: 0.25rem;
              border-radius: var(--border-radius-sm);
              color: var(--black);
              font-size: 0.75rem;
              font-weight: 700;
            }
          }
        }
      }

      > .upload {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        > .properies {
          display: flex;
          flex-direction: row;
          gap: 0.5rem;
          font-size: 0.85rem;

          > .max-size {
            color: var(--gray-500);
          }

          > .allow-types {
            color: var(--gray-500);
          }
        }
      }
    }
  }
}