@matrixage/picpic/src/styles/mobile.less

A awesome image bed by github pages and github actions.

@media screen and (max-width:1200px) {
      .img_items {
            .img_item_wrap {
                  width: calc(80vw / 4);

                  .img_item {
                        height: calc(80vw / 4);
                  }

                  .options {
                        font-size: 10px;
                  }
            }
      }

      .detail_wrap {
            .detail {
                  width: calc(100vw / 1.5);

                  .img_item {
                        height: calc(100vw / 1.5);
                  }
            }
      }
}

@media screen and (max-width:1000px) {
      .img_items {
            &.list {
                  .img_item_wrap {
                        margin-bottom: 0;
                        border-radius: 0;

                        .detail_info {
                              border-radius: 0;
                        }
                  }
            }

            .img_item_wrap {
                  width: calc(80vw / 3);

                  .img_item {
                        height: calc(80vw / 3);
                  }
            }
      }

      .header_wrap {
            .header {
                  .search_wrap {
                        left: calc(50% - 12vw);

                        .search {
                              .input {
                                    width: 24vw;
                              }
                        }
                  }
            }
      }
}

@media screen and (max-width:800px) {
      button:active {
            transform: scale(1);
      }

      .header_wrap {
            border-bottom: none;

            .header {
                  width: 100vw;
                  padding: 0 24px;

                  .right_wrap {
                        .options {
                              .btn_search {
                                    display: none;
                              }
                        }
                  }
            }
      }

      .img_items {
            width: 100vw;
            padding-top: 0;

            &.list {
                  .img_item_wrap {
                        .img_item {
                              height: 20vh;
                        }

                        .detail_info {
                              width: 36vw;

                              .name {
                                    font-size: 15px;
                              }

                              .detail {
                                    .detail_item {
                                          font-size: 12px;
                                          margin-bottom: 4px;

                                          .title {
                                                width: 48px;
                                          }
                                    }
                              }
                        }
                  }
            }

            .img_item_wrap {
                  width: calc(100vw / 2);

                  .img_item {
                        height: calc(100vw / 2);
                  }
            }
      }

      .detail_wrap {
            align-items: flex-end;

            .detail {
                  width: 100vw;
                  border-radius: 0;
                  border-top-left-radius: 20px;
                  border-top-right-radius: 20px;

                  .img_item {
                        height: 100vw;
                  }
            }
      }

      .pagination_wrap {
            width: 100%;
            font-size: 12px;

            .pagination {
                  width: 100%;
                  border-top-left-radius: 20px;
                  border-top-right-radius: 20px;
                  background-color: white;

                  #select_page_size {
                        margin-right: 12px;
                  }

                  .tabbar_items {
                        display: none;
                  }

                  .btn_option {
                        &:nth-of-type(1) {
                              border-top-right-radius: 0;
                              border-bottom-right-radius: 0;
                              border-right: 1px solid #333;
                        }

                        &:nth-of-type(2) {
                              border-top-left-radius: 0;
                              border-bottom-left-radius: 0;
                        }
                  }

                  #input_page {
                        margin-left: 12px;
                  }
            }
      }

      .msg_wrap {
            width: 48vw;
            height: 36px;
            padding: 0;
            bottom: 100px;
            right: initial;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(9px);
            -webkit-backdrop-filter: blur(9px);
            color: white;
            font-size: 12px;
      }

      .folder_select_wrap {
            @width: 100vw;

            .folder_select {
                  width: @width;

                  .content_wrap {
                        .content {
                              .content_item {
                                    width: calc((@width - 24px) / 4);

                                    .icon_folder {
                                          height: calc((@width - 24px) / 4 - 30px);

                                          .children {
                                                display: none;
                                          }

                                          .size {
                                                display: none;
                                          }
                                    }

                                    .img_item {
                                          height: calc((@width - 24px) / 4 - 27px);
                                    }

                                    .name {
                                          font-size: 10px;
                                    }
                              }
                        }
                  }
            }
      }
}

@media screen and (max-width:376px) {
      .header_wrap {
            .header {
                  .left_wrap {
                        .name {
                              display: none;
                        }
                  }
            }
      }

      .img_items {
            &.list {
                  .img_item_wrap {
                        .img_item {
                              height: 24vh;
                        }

                        .detail_info {
                              width: 45vw;
                        }
                  }
            }
      }

      .detail_wrap {
            .detail {
                  .img_item {
                        .btn_download {
                              display: none;
                        }
                  }
            }
      }
}


@media screen and (max-width:321px) {
      .img_items {
            padding-bottom: 15vh;

            &.list {
                  .img_item_wrap {
                        .img_item {
                              height: 27vh;
                        }
                  }
            }
      }

      .pagination_wrap {
            .pagination {
                  #input_page {
                        display: none;
                  }
            }
      }

      .detail_wrap {
            .detail {
                  .img_item {
                        .btn_autoplay {
                              display: none;
                        }
                  }
            }
      }
}