@matrixage/picpic/src/components/Detail/index.less

A awesome image bed by github pages and github actions.

.detail_wrap {
      background-color: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);

      .detail {
            width: var(--size_detail);
            background: linear-gradient(-30deg, purple, orange);
            border-radius: 6px;
            overflow: hidden;

            &.contain {
                  .img_item {
                        background-size: contain !important;
                  }
            }

            &.cover {
                  .img_item {
                        background-size: cover !important;
                  }
            }

            .img_item {
                  height: var(--size_detail);

                  .btn_close {
                        top: 18px;
                        right: 18px;
                        padding: 1px;
                        border-radius: 36px;
                        cursor: pointer;
                        transition: all ease 0.3s;
                        border: 1px solid #eee;
                        background-color: white;

                        svg {
                              width: 18px;
                              height: 18px;
                              opacity: 0.72;
                        }
                  }

                  .btn_download {
                        bottom: 18px;
                        right: 224px;
                        width: 26px;
                        height: 26px;
                        border-radius: 100px;
                        font-size: 12px;
                        cursor: pointer;
                        background-color: rgba(255, 255, 255, 0.8);
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                        border: 1px solid #eee;
                        color: black;

                        &:hover {
                              box-shadow: 0 0 30px #ccc;
                        }

                        &:active {
                              background-color: black;
                              color: white;
                        }
                  }

                  .btn_autoplay {
                        bottom: 18px;
                        right: 140px;
                        width: 72px;
                        padding: 5px 0;
                        font-size: 12px;
                        cursor: pointer;
                        background-color: rgba(255, 255, 255, 0.8);
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                        border: 1px solid #eee;
                        border-radius: 100px;

                        &:hover {
                              box-shadow: 0 0 30px #ccc;
                        }

                        &:active,
                        &.playing {
                              background-color: black;
                              color: white;
                        }
                  }

                  .detail_options {
                        bottom: 18px;
                        border-radius: 100px;
                        background-color: rgba(255, 255, 255, 0.8);
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                        border: 1px solid #eee;
                        overflow: hidden;
                        transition: all ease 0.3s;

                        &:hover {
                              box-shadow: 0 0 30px #ccc;
                        }

                        &.style {
                              left: 18px;
                        }

                        &.current {
                              right: 18px;

                              button {
                                    &:active {
                                          background-color: black;
                                          color: white;
                                    }

                                    &:first-child {
                                          border-right: 1px solid #eee;
                                    }
                              }
                        }

                        button {
                              width: 54px;
                              padding: 5px 0;
                              font-size: 12px;
                              cursor: pointer;

                              &.active {
                                    background-color: black;
                                    color: white;
                                    border-radius: 100px;
                              }
                        }
                  }
            }
      }
}