@matrixage/picpic/src/components/FolderSelect/index.css

A awesome image bed by github pages and github actions.

.folder_select_wrap {
  right: 0;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  background-color: rgba(0, 0, 0, 0.72);
}
.folder_select_wrap .folder_select {
  width: 480px;
  height: 100vh;
  background: rgba(248, 249, 253, 0.6);
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
}
.folder_select_wrap .folder_select .btn_close {
  top: 26px;
  right: 18px;
  padding: 1px;
  border-radius: 36px;
  cursor: pointer;
  transition: all ease 0.3s;
}
.folder_select_wrap .folder_select .btn_close svg {
  width: 20px;
  height: 20px;
}
.folder_select_wrap .folder_select .head {
  height: 73px;
  padding-left: 18px;
  padding-right: 48px;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.folder_select_wrap .folder_select .head .options {
  margin-right: 9px;
}
.folder_select_wrap .folder_select .head .options .btn_icon_wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid transparent;
}
.folder_select_wrap .folder_select .head .options .btn_icon_wrap:hover {
  background-color: white;
  border: 1px solid var(--color_border);
}
.folder_select_wrap .folder_select .head .options .btn_icon_wrap .icon {
  padding: 0 4px;
}
.folder_select_wrap .folder_select .head .title {
  font-size: 17px;
  margin-right: 15px;
}
.folder_select_wrap .folder_select .head .switch {
  width: 38px;
  height: 19px;
  padding: 2px 4px;
  border-radius: 30px;
}
.folder_select_wrap .folder_select .head .switch.on {
  padding-right: 6px;
  background-color: white;
}
.folder_select_wrap .folder_select .head .switch.on .dot {
  left: 2px;
  background-color: black;
}
.folder_select_wrap .folder_select .head .switch.on .status {
  color: black;
}
.folder_select_wrap .folder_select .head .switch.off {
  background-color: black;
}
.folder_select_wrap .folder_select .head .switch.off .dot {
  right: 2px;
  background-color: white;
}
.folder_select_wrap .folder_select .head .switch.off .status {
  color: white;
}
.folder_select_wrap .folder_select .head .switch .dot {
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.folder_select_wrap .folder_select .head .switch .status {
  width: 50%;
  height: 100%;
  font-size: 10px;
}
.folder_select_wrap .folder_select .content_wrap {
  height: calc(100vh - 103px);
  overflow-y: scroll;
}
.folder_select_wrap .folder_select .content_wrap .content {
  padding: 12px;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item {
  width: calc((480px - 24px) / 4);
  box-sizing: border-box;
  padding: 6px 12px;
  padding-bottom: 12px;
  border-radius: 6px;
  transition: all ease 0.3s;
  border: 1px solid transparent;
  cursor: pointer;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item:hover {
  border: 1px solid var(--color_border);
  background-color: white;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item.folder_item {
  padding-top: 4px;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item.image_item {
  padding: 12px;
  padding-bottom: 9px;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item .icon_folder {
  width: 100%;
  height: calc((480px - 24px) / 4 - 30px);
  display: flex;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background: linear-gradient(-30deg, purple, orange);
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width=%2260%22%20height=%2260%22%3E%3Cpath%20d='M496%20152a56%2056%200%2000-56-56H220.11a23.89%2023.89%200%2001-13.31-4L179%2073.41A55.77%2055.77%200%2000147.89%2064H72a56%2056%200%2000-56%2056v48a8%208%200%20008%208h464a8%208%200%20008-8zM16%20392a56%2056%200%200056%2056h368a56%2056%200%200056-56V216a8%208%200%2000-8-8H24a8%208%200%2000-8%208z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width=%2260%22%20height=%2260%22%3E%3Cpath%20d='M496%20152a56%2056%200%2000-56-56H220.11a23.89%2023.89%200%2001-13.31-4L179%2073.41A55.77%2055.77%200%2000147.89%2064H72a56%2056%200%2000-56%2056v48a8%208%200%20008%208h464a8%208%200%20008-8zM16%20392a56%2056%200%200056%2056h368a56%2056%200%200056-56V216a8%208%200%2000-8-8H24a8%208%200%2000-8%208z'/%3E%3C/svg%3E");
  color: rgba(255, 255, 255, 0.5);
  font-style: initial;
  font-size: 12px;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item .icon_folder .children {
  right: 8px;
  bottom: 27px;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item .icon_folder .size {
  right: 8px;
  bottom: 12px;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item .img_item {
  width: 100%;
  height: calc((480px - 24px) / 4 - 27px);
  margin-bottom: 6px;
  border-radius: 6px;
}
.folder_select_wrap .folder_select .content_wrap .content .content_item .name {
  width: 100%;
  font-size: 13px;
  text-align: center;
  word-break: break-all;
}
.folder_select_wrap .folder_select .nav_info_wrap {
  height: 30px;
  padding: 0 27px;
  font-size: 13px;
  color: #888;
  border-top: 1px solid rgba(241, 241, 241, 0.08);
}