@whitesev/pops/src/components/folder/index.css

弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件

.pops-folder-list {
  --folder-arrow-fill-color: #d4d7de;
  --folder-arrow-active-fill-color: #06a7ff;
  --header-breadcrumb-text-color: #06a7ff;
  --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
  --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);
  --header-breadcrumb-all-files-last-text-color: #999999;
  --table-header-row-text-color: #818999;
  --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
  --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
  --table-body-row-text-color: #05082c;
  --table-body-row-file-name-text-color: #05082c;
  --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));
  --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));
  --table-body-row-file-name-hover-text-color: #06a7ff;
  --table-body-row-content-text-color: #818999;
}
.pops-folder-list .cursor-p {
  cursor: pointer;
}
.pops-folder-list a {
  background: 0 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--header-breadcrumb-text-color);
}
table.pops-folder-list-table__body,
table.pops-folder-list-table__header {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0 20px;
}
table.pops-folder-list-table__body,
table.pops-folder-list-table__header {
  height: 100%;
  background: 0 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
table.pops-folder-list-table__body {
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pops-folder-list table tr {
  line-height: normal;
  align-content: center;
}
.pops-folder-list-table__header-row {
  height: 50px;
  line-height: normal;
  align-content: center;
  color: var(--table-header-row-text-color);
  text-align: left;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pops-folder-list-table__body-row {
  height: 50px;
  line-height: normal;
  align-content: center;
  color: var(--table-body-row-text-color);
  font-size: 12px;
}
.pops-folder-list-table__body-row:hover {
  background-color: var(--table-body-row-hover-bg-color);
  border-color: var(--table-body-row-hover-bd-color);
  border: 0;
  outline: none;
}
.pops-folder-list table th {
  border: 0;
  border-bottom: 1px solid var(--table-body-th-text-color);
}
.pops-folder-list table td {
  border: 0;
  border-bottom: 1px solid var(--table-body-td-text-color);
  position: relative;
}
.pops-folder-list .list-name-text {
  display: inline-block;
  padding-left: 12px;
  line-height: normal;
  align-content: center;
  max-width: 176px;
}
.pops-folder-list-file-name > div {
  display: flex;
  align-items: center;
}

.pops-mobile-folder-list-file-name {
  display: flex;
  align-items: center;
}
.pops-mobile-folder-list-file-name > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6px 0px;
  flex-direction: column;
}
.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {
  width: 45px;
  height: 45px;
}
.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {
  padding-left: unset;
  max-width: 250px;
  overflow-x: hidden;
  font-weight: 400;
  line-height: unset;
  margin-bottom: 4px;
  white-space: normal;
  text-overflow: unset;
}

/* 修改滚动 */
.pops-folder-content {
  overflow: hidden !important;
}
.pops-folder-content .pops-folder-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pops-folder-content .pops-folder-list-table__body-div {
  height: 100%;
  flex: 1 auto;
  overflow: auto;
  padding-bottom: 0;
}
.pops-mobile-folder-content .pops-folder-list-table__body-div {
  height: 100%;
  flex: 1 auto;
  overflow: auto;
  padding-bottom: 0;
}
.pops-folder-content table.pops-folder-list-table__body {
  overflow: auto;
}
.pops-folder-content .pops-folder-list-table__header-div {
  flex: 0;
}
.pops-mobile-folder-content .pops-folder-list-table__header-div {
  display: none;
}

.pops-folder-list .pops-folder-list-file-name-title-text {
  color: var(--table-body-row-file-name-text-color);
}
.pops-folder-list .pops-folder-list-file-name-title-text:hover {
  text-decoration: none;
  color: var(--table-body-row-file-name-hover-text-color);
}
.pops-folder-list .text-ellip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pops-folder-list .content {
  color: var(--table-body-row-content-text-color);
  position: relative;
  width: 100%;
  text-align: left;
}
.pops-folder-list .inline-block-v-middle {
  display: inline-block;
  vertical-align: middle;
}
.pops-folder-list .flex-a-i-center {
  display: flex;
  align-items: center;
}
.pops-folder-list .u-file-icon {
  display: inline-block;
  vertical-align: middle;
}
.pops-folder-list .u-file-icon--list {
  width: 32px;
  height: 32px;
}
.pops-folder-list .pops-folder-list-file-icon {
  line-height: normal;
  align-content: center;
  position: relative;
  vertical-align: middle;
}
.pops-folder-list .pops-folder-file-list-breadcrumb-primary {
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 17px;
  flex-wrap: wrap;
}
.pops-folder-list .pops-folder-list-table__sort {
  display: inline-flex;
  margin-left: 4px;
  flex-direction: column;
}

.pops-folder-list .pops-folder-icon-arrow {
  width: 10px;
  height: 10px;
  fill: var(--folder-arrow-fill-color);
}
.pops-folder-list .pops-folder-icon-active {
  fill: var(--folder-arrow-active-fill-color);
}
.pops-folder-list .pops-folder-file-list-breadcrumb {
  padding: 4px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  min-height: 35px;
}
.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {
  font-size: 12px;
  color: var(--header-breadcrumb-all-files-text-color);
  line-height: normal;
  align-content: center;
  font-weight: 700;
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {
  color: var(--header-breadcrumb-all-files-last-text-color);
}
.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {
  font-size: 14px;
  color: var(--header-breadcrumb-all-files-first-text-color);
}
.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {
  width: 16px;
  height: 16px;
}
.pops-folder-list .iconArrow {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)
    55% 50%/6px 9px no-repeat;
}

@media (prefers-color-scheme: dark) {
  .pops[type-value="folder"] {
    --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
    --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
  }
  .pops-folder-list {
    --header-breadcrumb-text-color: #06a7ff;
    --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
    --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);
    --header-breadcrumb-all-files-last-text-color: #818999;
    --table-body-row-text-color: #f7f8fa;
    --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
    --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
    --table-body-td-text-color: #495366;
    --table-body-row-hover-bd-color: #1f2022;
    --table-body-row-hover-bg-color: #1f2022;
    --table-body-row-file-name-text-color: #f7f8fa;
  }
}