.wpdm-tree { --tree-bg: #ffffff;
--tree-bg-hover: #f8fafc;
--tree-bg-active: #eef2ff;
--tree-text: #1e293b;
--tree-text-muted: #64748b;
--tree-text-hover: #4f46e5;
--tree-border: #e2e8f0;
--tree-line: #cbd5e1; --tree-folder: #f59e0b;
--tree-folder-open: #eab308;
--tree-folder-hover: #d97706; --tree-file: #64748b;
--tree-file-hover: #4f46e5; --tree-indent: 24px;
--tree-item-height: 36px;
--tree-icon-size: 18px;
--tree-radius: 6px; --tree-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--tree-text);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: var(--tree-radius);
padding: 8px;
max-width: 100%;
overflow-x: auto;
} .wpdm-tree.dark-mode,
.dark-mode .wpdm-tree,
[data-theme="dark"] .wpdm-tree {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
@media (prefers-color-scheme: dark) {
.wpdm-tree:not(.light-mode) {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
} .wpdm-tree ul.jqueryFileTree {
margin: 0;
padding: 0;
list-style: none;
}
.wpdm-tree ul.jqueryFileTree ul {
margin: 0;
padding: 0;
padding-left: var(--tree-indent);
position: relative;
} .wpdm-tree ul.jqueryFileTree ul::before {
content: '';
position: absolute;
left: 9px;
top: 0;
bottom: 12px;
width: 1px;
background: var(--tree-line);
} .wpdm-tree ul.jqueryFileTree li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
} .wpdm-tree ul.jqueryFileTree ul > li::before {
content: '';
position: absolute;
left: -15px;
top: calc(var(--tree-item-height) / 2);
width: 15px;
height: 1px;
background: var(--tree-line);
} .wpdm-tree > ul.jqueryFileTree > li::before {
display: none;
} .wpdm-tree ul.jqueryFileTree li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 2px 0;
color: var(--tree-text);
text-decoration: none;
border-radius: var(--tree-radius);
transition: all var(--tree-transition);
min-height: var(--tree-item-height);
position: relative;
}
.wpdm-tree ul.jqueryFileTree li a:hover {
background: var(--tree-bg-hover);
color: var(--tree-text-hover);
}
.wpdm-tree ul.jqueryFileTree li a:active {
background: var(--tree-bg-active);
} .wpdm-tree ul.jqueryFileTree li.directory > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-folder);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a::before {
background-color: var(--tree-folder-open);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
} .wpdm-tree ul.jqueryFileTree li.directory > a:hover::before {
background-color: var(--tree-folder-hover);
transform: scale(1.1);
} .wpdm-tree ul.jqueryFileTree li.directory > a::after {
content: '';
flex-shrink: 0;
width: 12px;
height: 12px;
margin-left: auto;
background-color: var(--tree-text-muted);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.directory.expanded > a::after {
transform: rotate(90deg);
} .wpdm-tree ul.jqueryFileTree li.file > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-file);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.file > a:hover::before {
background-color: var(--tree-file-hover);
transform: scale(1.1);
}  .wpdm-tree ul.jqueryFileTree li.ext_pdf > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_doc > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_docx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_txt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rtf > a::before {
background-color: #3b82f6;
} .wpdm-tree ul.jqueryFileTree li.ext_xls > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xlsx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_csv > a::before {
background-color: #22c55e;
} .wpdm-tree ul.jqueryFileTree li.ext_ppt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_pptx > a::before {
background-color: #f97316;
} .wpdm-tree ul.jqueryFileTree li.ext_jpg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_jpeg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_png > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gif > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_svg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_bmp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_psd > a::before {
background-color: #ec4899;
} .wpdm-tree ul.jqueryFileTree li.ext_zip > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_7z > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gz > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tgz > a::before {
background-color: #8b5cf6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp3 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wav > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_ogg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_m4a > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_flac > a::before {
background-color: #14b8a6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp4 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_avi > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mov > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wmv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mkv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webm > a::before {
background-color: #ef4444;
} .wpdm-tree ul.jqueryFileTree li.ext_php > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_js > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_css > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_html > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_htm > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_json > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xml > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_py > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_java > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_c > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_cpp > a::before {
background-color: #06b6d4;
} .wpdm-tree ul.jqueryFileTree li.directory.wait > a::before {
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background: transparent;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
-webkit-mask-image: none;
mask-image: none;
animation: wpdm-tree-spin 0.7s linear infinite;
}
@keyframes wpdm-tree-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .wpdm-tree ul.jqueryFileTree.start {
padding: 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree ul.jqueryFileTree.start li.wait {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wpdm-tree ul.jqueryFileTree.start li.wait::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
animation: wpdm-tree-spin 0.8s linear infinite;
} .wpdm-tree-empty {
padding: 32px 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
} .wpdm-tree::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.wpdm-tree::-webkit-scrollbar-track {
background: var(--tree-bg);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb {
background: var(--tree-line);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb:hover {
background: var(--tree-text-muted);
} @media (max-width: 640px) {
.wpdm-tree {
--tree-indent: 20px;
--tree-item-height: 40px;
font-size: 13px;
}
.wpdm-tree ul.jqueryFileTree li a {
padding: 10px 12px;
}
} .wpdm-tree ul.jqueryFileTree ul {
overflow: hidden;
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a {
background: var(--tree-bg-hover);
} .wpdm-tree-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 8px;
border-bottom: 1px solid var(--tree-border);
}
.wpdm-tree-toolbar button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--tree-text-muted);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: 4px;
cursor: pointer;
transition: all var(--tree-transition);
}
.wpdm-tree-toolbar button:hover {
color: var(--tree-text);
background: var(--tree-bg-hover);
border-color: var(--tree-text-muted);
}
.wpdm-tree-toolbar button svg {
width: 14px;
height: 14px;
} .wpdm-tree-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
color: var(--tree-text-muted);
background: var(--tree-bg-hover);
border-radius: 10px;
margin-left: auto;
} @media print {
.wpdm-tree {
border: none;
padding: 0;
}
.wpdm-tree ul.jqueryFileTree li.directory.collapsed > ul {
display: block !important;
}
.wpdm-tree ul.jqueryFileTree li.directory > a::after {
display: none;
}
}.wpdm-tree { --tree-bg: #ffffff;
--tree-bg-hover: #f8fafc;
--tree-bg-active: #eef2ff;
--tree-text: #1e293b;
--tree-text-muted: #64748b;
--tree-text-hover: #4f46e5;
--tree-border: #e2e8f0;
--tree-line: #cbd5e1; --tree-folder: #f59e0b;
--tree-folder-open: #eab308;
--tree-folder-hover: #d97706; --tree-file: #64748b;
--tree-file-hover: #4f46e5; --tree-indent: 24px;
--tree-item-height: 36px;
--tree-icon-size: 18px;
--tree-radius: 6px; --tree-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--tree-text);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: var(--tree-radius);
padding: 8px;
max-width: 100%;
overflow-x: auto;
} .wpdm-tree.dark-mode,
.dark-mode .wpdm-tree,
[data-theme="dark"] .wpdm-tree {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
@media (prefers-color-scheme: dark) {
.wpdm-tree:not(.light-mode) {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
} .wpdm-tree ul.jqueryFileTree {
margin: 0;
padding: 0;
list-style: none;
}
.wpdm-tree ul.jqueryFileTree ul {
margin: 0;
padding: 0;
padding-left: var(--tree-indent);
position: relative;
} .wpdm-tree ul.jqueryFileTree ul::before {
content: '';
position: absolute;
left: 9px;
top: 0;
bottom: 12px;
width: 1px;
background: var(--tree-line);
} .wpdm-tree ul.jqueryFileTree li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
} .wpdm-tree ul.jqueryFileTree ul > li::before {
content: '';
position: absolute;
left: -15px;
top: calc(var(--tree-item-height) / 2);
width: 15px;
height: 1px;
background: var(--tree-line);
} .wpdm-tree > ul.jqueryFileTree > li::before {
display: none;
} .wpdm-tree ul.jqueryFileTree li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 2px 0;
color: var(--tree-text);
text-decoration: none;
border-radius: var(--tree-radius);
transition: all var(--tree-transition);
min-height: var(--tree-item-height);
position: relative;
}
.wpdm-tree ul.jqueryFileTree li a:hover {
background: var(--tree-bg-hover);
color: var(--tree-text-hover);
}
.wpdm-tree ul.jqueryFileTree li a:active {
background: var(--tree-bg-active);
} .wpdm-tree ul.jqueryFileTree li.directory > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-folder);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a::before {
background-color: var(--tree-folder-open);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
} .wpdm-tree ul.jqueryFileTree li.directory > a:hover::before {
background-color: var(--tree-folder-hover);
transform: scale(1.1);
} .wpdm-tree ul.jqueryFileTree li.directory > a::after {
content: '';
flex-shrink: 0;
width: 12px;
height: 12px;
margin-left: auto;
background-color: var(--tree-text-muted);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.directory.expanded > a::after {
transform: rotate(90deg);
} .wpdm-tree ul.jqueryFileTree li.file > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-file);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.file > a:hover::before {
background-color: var(--tree-file-hover);
transform: scale(1.1);
}  .wpdm-tree ul.jqueryFileTree li.ext_pdf > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_doc > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_docx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_txt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rtf > a::before {
background-color: #3b82f6;
} .wpdm-tree ul.jqueryFileTree li.ext_xls > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xlsx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_csv > a::before {
background-color: #22c55e;
} .wpdm-tree ul.jqueryFileTree li.ext_ppt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_pptx > a::before {
background-color: #f97316;
} .wpdm-tree ul.jqueryFileTree li.ext_jpg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_jpeg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_png > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gif > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_svg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_bmp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_psd > a::before {
background-color: #ec4899;
} .wpdm-tree ul.jqueryFileTree li.ext_zip > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_7z > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gz > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tgz > a::before {
background-color: #8b5cf6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp3 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wav > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_ogg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_m4a > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_flac > a::before {
background-color: #14b8a6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp4 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_avi > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mov > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wmv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mkv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webm > a::before {
background-color: #ef4444;
} .wpdm-tree ul.jqueryFileTree li.ext_php > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_js > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_css > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_html > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_htm > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_json > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xml > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_py > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_java > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_c > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_cpp > a::before {
background-color: #06b6d4;
} .wpdm-tree ul.jqueryFileTree li.directory.wait > a::before {
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background: transparent;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
-webkit-mask-image: none;
mask-image: none;
animation: wpdm-tree-spin 0.7s linear infinite;
}
@keyframes wpdm-tree-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .wpdm-tree ul.jqueryFileTree.start {
padding: 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree ul.jqueryFileTree.start li.wait {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wpdm-tree ul.jqueryFileTree.start li.wait::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
animation: wpdm-tree-spin 0.8s linear infinite;
} .wpdm-tree-empty {
padding: 32px 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
} .wpdm-tree::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.wpdm-tree::-webkit-scrollbar-track {
background: var(--tree-bg);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb {
background: var(--tree-line);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb:hover {
background: var(--tree-text-muted);
} @media (max-width: 640px) {
.wpdm-tree {
--tree-indent: 20px;
--tree-item-height: 40px;
font-size: 13px;
}
.wpdm-tree ul.jqueryFileTree li a {
padding: 10px 12px;
}
} .wpdm-tree ul.jqueryFileTree ul {
overflow: hidden;
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a {
background: var(--tree-bg-hover);
} .wpdm-tree-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 8px;
border-bottom: 1px solid var(--tree-border);
}
.wpdm-tree-toolbar button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--tree-text-muted);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: 4px;
cursor: pointer;
transition: all var(--tree-transition);
}
.wpdm-tree-toolbar button:hover {
color: var(--tree-text);
background: var(--tree-bg-hover);
border-color: var(--tree-text-muted);
}
.wpdm-tree-toolbar button svg {
width: 14px;
height: 14px;
} .wpdm-tree-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
color: var(--tree-text-muted);
background: var(--tree-bg-hover);
border-radius: 10px;
margin-left: auto;
} @media print {
.wpdm-tree {
border: none;
padding: 0;
}
.wpdm-tree ul.jqueryFileTree li.directory.collapsed > ul {
display: block !important;
}
.wpdm-tree ul.jqueryFileTree li.directory > a::after {
display: none;
}
}.wpdm-tree { --tree-bg: #ffffff;
--tree-bg-hover: #f8fafc;
--tree-bg-active: #eef2ff;
--tree-text: #1e293b;
--tree-text-muted: #64748b;
--tree-text-hover: #4f46e5;
--tree-border: #e2e8f0;
--tree-line: #cbd5e1; --tree-folder: #f59e0b;
--tree-folder-open: #eab308;
--tree-folder-hover: #d97706; --tree-file: #64748b;
--tree-file-hover: #4f46e5; --tree-indent: 24px;
--tree-item-height: 36px;
--tree-icon-size: 18px;
--tree-radius: 6px; --tree-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--tree-text);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: var(--tree-radius);
padding: 8px;
max-width: 100%;
overflow-x: auto;
} .wpdm-tree.dark-mode,
.dark-mode .wpdm-tree,
[data-theme="dark"] .wpdm-tree {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
@media (prefers-color-scheme: dark) {
.wpdm-tree:not(.light-mode) {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
} .wpdm-tree ul.jqueryFileTree {
margin: 0;
padding: 0;
list-style: none;
}
.wpdm-tree ul.jqueryFileTree ul {
margin: 0;
padding: 0;
padding-left: var(--tree-indent);
position: relative;
} .wpdm-tree ul.jqueryFileTree ul::before {
content: '';
position: absolute;
left: 9px;
top: 0;
bottom: 12px;
width: 1px;
background: var(--tree-line);
} .wpdm-tree ul.jqueryFileTree li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
} .wpdm-tree ul.jqueryFileTree ul > li::before {
content: '';
position: absolute;
left: -15px;
top: calc(var(--tree-item-height) / 2);
width: 15px;
height: 1px;
background: var(--tree-line);
} .wpdm-tree > ul.jqueryFileTree > li::before {
display: none;
} .wpdm-tree ul.jqueryFileTree li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 2px 0;
color: var(--tree-text);
text-decoration: none;
border-radius: var(--tree-radius);
transition: all var(--tree-transition);
min-height: var(--tree-item-height);
position: relative;
}
.wpdm-tree ul.jqueryFileTree li a:hover {
background: var(--tree-bg-hover);
color: var(--tree-text-hover);
}
.wpdm-tree ul.jqueryFileTree li a:active {
background: var(--tree-bg-active);
} .wpdm-tree ul.jqueryFileTree li.directory > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-folder);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a::before {
background-color: var(--tree-folder-open);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
} .wpdm-tree ul.jqueryFileTree li.directory > a:hover::before {
background-color: var(--tree-folder-hover);
transform: scale(1.1);
} .wpdm-tree ul.jqueryFileTree li.directory > a::after {
content: '';
flex-shrink: 0;
width: 12px;
height: 12px;
margin-left: auto;
background-color: var(--tree-text-muted);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.directory.expanded > a::after {
transform: rotate(90deg);
} .wpdm-tree ul.jqueryFileTree li.file > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-file);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.file > a:hover::before {
background-color: var(--tree-file-hover);
transform: scale(1.1);
}  .wpdm-tree ul.jqueryFileTree li.ext_pdf > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_doc > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_docx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_txt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rtf > a::before {
background-color: #3b82f6;
} .wpdm-tree ul.jqueryFileTree li.ext_xls > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xlsx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_csv > a::before {
background-color: #22c55e;
} .wpdm-tree ul.jqueryFileTree li.ext_ppt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_pptx > a::before {
background-color: #f97316;
} .wpdm-tree ul.jqueryFileTree li.ext_jpg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_jpeg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_png > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gif > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_svg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_bmp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_psd > a::before {
background-color: #ec4899;
} .wpdm-tree ul.jqueryFileTree li.ext_zip > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_7z > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gz > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tgz > a::before {
background-color: #8b5cf6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp3 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wav > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_ogg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_m4a > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_flac > a::before {
background-color: #14b8a6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp4 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_avi > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mov > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wmv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mkv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webm > a::before {
background-color: #ef4444;
} .wpdm-tree ul.jqueryFileTree li.ext_php > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_js > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_css > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_html > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_htm > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_json > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xml > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_py > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_java > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_c > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_cpp > a::before {
background-color: #06b6d4;
} .wpdm-tree ul.jqueryFileTree li.directory.wait > a::before {
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background: transparent;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
-webkit-mask-image: none;
mask-image: none;
animation: wpdm-tree-spin 0.7s linear infinite;
}
@keyframes wpdm-tree-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .wpdm-tree ul.jqueryFileTree.start {
padding: 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree ul.jqueryFileTree.start li.wait {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wpdm-tree ul.jqueryFileTree.start li.wait::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
animation: wpdm-tree-spin 0.8s linear infinite;
} .wpdm-tree-empty {
padding: 32px 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
} .wpdm-tree::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.wpdm-tree::-webkit-scrollbar-track {
background: var(--tree-bg);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb {
background: var(--tree-line);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb:hover {
background: var(--tree-text-muted);
} @media (max-width: 640px) {
.wpdm-tree {
--tree-indent: 20px;
--tree-item-height: 40px;
font-size: 13px;
}
.wpdm-tree ul.jqueryFileTree li a {
padding: 10px 12px;
}
} .wpdm-tree ul.jqueryFileTree ul {
overflow: hidden;
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a {
background: var(--tree-bg-hover);
} .wpdm-tree-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 8px;
border-bottom: 1px solid var(--tree-border);
}
.wpdm-tree-toolbar button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--tree-text-muted);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: 4px;
cursor: pointer;
transition: all var(--tree-transition);
}
.wpdm-tree-toolbar button:hover {
color: var(--tree-text);
background: var(--tree-bg-hover);
border-color: var(--tree-text-muted);
}
.wpdm-tree-toolbar button svg {
width: 14px;
height: 14px;
} .wpdm-tree-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
color: var(--tree-text-muted);
background: var(--tree-bg-hover);
border-radius: 10px;
margin-left: auto;
} @media print {
.wpdm-tree {
border: none;
padding: 0;
}
.wpdm-tree ul.jqueryFileTree li.directory.collapsed > ul {
display: block !important;
}
.wpdm-tree ul.jqueryFileTree li.directory > a::after {
display: none;
}
}.wpdm-tree { --tree-bg: #ffffff;
--tree-bg-hover: #f8fafc;
--tree-bg-active: #eef2ff;
--tree-text: #1e293b;
--tree-text-muted: #64748b;
--tree-text-hover: #4f46e5;
--tree-border: #e2e8f0;
--tree-line: #cbd5e1; --tree-folder: #f59e0b;
--tree-folder-open: #eab308;
--tree-folder-hover: #d97706; --tree-file: #64748b;
--tree-file-hover: #4f46e5; --tree-indent: 24px;
--tree-item-height: 36px;
--tree-icon-size: 18px;
--tree-radius: 6px; --tree-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--tree-text);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: var(--tree-radius);
padding: 8px;
max-width: 100%;
overflow-x: auto;
} .wpdm-tree.dark-mode,
.dark-mode .wpdm-tree,
[data-theme="dark"] .wpdm-tree {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
@media (prefers-color-scheme: dark) {
.wpdm-tree:not(.light-mode) {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
} .wpdm-tree ul.jqueryFileTree {
margin: 0;
padding: 0;
list-style: none;
}
.wpdm-tree ul.jqueryFileTree ul {
margin: 0;
padding: 0;
padding-left: var(--tree-indent);
position: relative;
} .wpdm-tree ul.jqueryFileTree ul::before {
content: '';
position: absolute;
left: 9px;
top: 0;
bottom: 12px;
width: 1px;
background: var(--tree-line);
} .wpdm-tree ul.jqueryFileTree li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
} .wpdm-tree ul.jqueryFileTree ul > li::before {
content: '';
position: absolute;
left: -15px;
top: calc(var(--tree-item-height) / 2);
width: 15px;
height: 1px;
background: var(--tree-line);
} .wpdm-tree > ul.jqueryFileTree > li::before {
display: none;
} .wpdm-tree ul.jqueryFileTree li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 2px 0;
color: var(--tree-text);
text-decoration: none;
border-radius: var(--tree-radius);
transition: all var(--tree-transition);
min-height: var(--tree-item-height);
position: relative;
}
.wpdm-tree ul.jqueryFileTree li a:hover {
background: var(--tree-bg-hover);
color: var(--tree-text-hover);
}
.wpdm-tree ul.jqueryFileTree li a:active {
background: var(--tree-bg-active);
} .wpdm-tree ul.jqueryFileTree li.directory > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-folder);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a::before {
background-color: var(--tree-folder-open);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
} .wpdm-tree ul.jqueryFileTree li.directory > a:hover::before {
background-color: var(--tree-folder-hover);
transform: scale(1.1);
} .wpdm-tree ul.jqueryFileTree li.directory > a::after {
content: '';
flex-shrink: 0;
width: 12px;
height: 12px;
margin-left: auto;
background-color: var(--tree-text-muted);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.directory.expanded > a::after {
transform: rotate(90deg);
} .wpdm-tree ul.jqueryFileTree li.file > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-file);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.file > a:hover::before {
background-color: var(--tree-file-hover);
transform: scale(1.1);
}  .wpdm-tree ul.jqueryFileTree li.ext_pdf > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_doc > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_docx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_txt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rtf > a::before {
background-color: #3b82f6;
} .wpdm-tree ul.jqueryFileTree li.ext_xls > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xlsx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_csv > a::before {
background-color: #22c55e;
} .wpdm-tree ul.jqueryFileTree li.ext_ppt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_pptx > a::before {
background-color: #f97316;
} .wpdm-tree ul.jqueryFileTree li.ext_jpg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_jpeg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_png > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gif > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_svg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_bmp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_psd > a::before {
background-color: #ec4899;
} .wpdm-tree ul.jqueryFileTree li.ext_zip > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_7z > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gz > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tgz > a::before {
background-color: #8b5cf6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp3 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wav > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_ogg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_m4a > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_flac > a::before {
background-color: #14b8a6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp4 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_avi > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mov > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wmv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mkv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webm > a::before {
background-color: #ef4444;
} .wpdm-tree ul.jqueryFileTree li.ext_php > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_js > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_css > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_html > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_htm > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_json > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xml > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_py > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_java > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_c > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_cpp > a::before {
background-color: #06b6d4;
} .wpdm-tree ul.jqueryFileTree li.directory.wait > a::before {
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background: transparent;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
-webkit-mask-image: none;
mask-image: none;
animation: wpdm-tree-spin 0.7s linear infinite;
}
@keyframes wpdm-tree-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .wpdm-tree ul.jqueryFileTree.start {
padding: 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree ul.jqueryFileTree.start li.wait {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wpdm-tree ul.jqueryFileTree.start li.wait::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
animation: wpdm-tree-spin 0.8s linear infinite;
} .wpdm-tree-empty {
padding: 32px 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
} .wpdm-tree::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.wpdm-tree::-webkit-scrollbar-track {
background: var(--tree-bg);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb {
background: var(--tree-line);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb:hover {
background: var(--tree-text-muted);
} @media (max-width: 640px) {
.wpdm-tree {
--tree-indent: 20px;
--tree-item-height: 40px;
font-size: 13px;
}
.wpdm-tree ul.jqueryFileTree li a {
padding: 10px 12px;
}
} .wpdm-tree ul.jqueryFileTree ul {
overflow: hidden;
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a {
background: var(--tree-bg-hover);
} .wpdm-tree-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 8px;
border-bottom: 1px solid var(--tree-border);
}
.wpdm-tree-toolbar button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--tree-text-muted);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: 4px;
cursor: pointer;
transition: all var(--tree-transition);
}
.wpdm-tree-toolbar button:hover {
color: var(--tree-text);
background: var(--tree-bg-hover);
border-color: var(--tree-text-muted);
}
.wpdm-tree-toolbar button svg {
width: 14px;
height: 14px;
} .wpdm-tree-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
color: var(--tree-text-muted);
background: var(--tree-bg-hover);
border-radius: 10px;
margin-left: auto;
} @media print {
.wpdm-tree {
border: none;
padding: 0;
}
.wpdm-tree ul.jqueryFileTree li.directory.collapsed > ul {
display: block !important;
}
.wpdm-tree ul.jqueryFileTree li.directory > a::after {
display: none;
}
}.wpdm-tree { --tree-bg: #ffffff;
--tree-bg-hover: #f8fafc;
--tree-bg-active: #eef2ff;
--tree-text: #1e293b;
--tree-text-muted: #64748b;
--tree-text-hover: #4f46e5;
--tree-border: #e2e8f0;
--tree-line: #cbd5e1; --tree-folder: #f59e0b;
--tree-folder-open: #eab308;
--tree-folder-hover: #d97706; --tree-file: #64748b;
--tree-file-hover: #4f46e5; --tree-indent: 24px;
--tree-item-height: 36px;
--tree-icon-size: 18px;
--tree-radius: 6px; --tree-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--tree-text);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: var(--tree-radius);
padding: 8px;
max-width: 100%;
overflow-x: auto;
} .wpdm-tree.dark-mode,
.dark-mode .wpdm-tree,
[data-theme="dark"] .wpdm-tree {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
@media (prefers-color-scheme: dark) {
.wpdm-tree:not(.light-mode) {
--tree-bg: #1e293b;
--tree-bg-hover: #334155;
--tree-bg-active: #3730a3;
--tree-text: #f1f5f9;
--tree-text-muted: #94a3b8;
--tree-text-hover: #a5b4fc;
--tree-border: #475569;
--tree-line: #475569;
--tree-folder: #fbbf24;
--tree-folder-open: #fcd34d;
--tree-folder-hover: #f59e0b;
--tree-file: #94a3b8;
--tree-file-hover: #a5b4fc;
}
} .wpdm-tree ul.jqueryFileTree {
margin: 0;
padding: 0;
list-style: none;
}
.wpdm-tree ul.jqueryFileTree ul {
margin: 0;
padding: 0;
padding-left: var(--tree-indent);
position: relative;
} .wpdm-tree ul.jqueryFileTree ul::before {
content: '';
position: absolute;
left: 9px;
top: 0;
bottom: 12px;
width: 1px;
background: var(--tree-line);
} .wpdm-tree ul.jqueryFileTree li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
} .wpdm-tree ul.jqueryFileTree ul > li::before {
content: '';
position: absolute;
left: -15px;
top: calc(var(--tree-item-height) / 2);
width: 15px;
height: 1px;
background: var(--tree-line);
} .wpdm-tree > ul.jqueryFileTree > li::before {
display: none;
} .wpdm-tree ul.jqueryFileTree li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 2px 0;
color: var(--tree-text);
text-decoration: none;
border-radius: var(--tree-radius);
transition: all var(--tree-transition);
min-height: var(--tree-item-height);
position: relative;
}
.wpdm-tree ul.jqueryFileTree li a:hover {
background: var(--tree-bg-hover);
color: var(--tree-text-hover);
}
.wpdm-tree ul.jqueryFileTree li a:active {
background: var(--tree-bg-active);
} .wpdm-tree ul.jqueryFileTree li.directory > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-folder);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a::before {
background-color: var(--tree-folder-open);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
} .wpdm-tree ul.jqueryFileTree li.directory > a:hover::before {
background-color: var(--tree-folder-hover);
transform: scale(1.1);
} .wpdm-tree ul.jqueryFileTree li.directory > a::after {
content: '';
flex-shrink: 0;
width: 12px;
height: 12px;
margin-left: auto;
background-color: var(--tree-text-muted);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.directory.expanded > a::after {
transform: rotate(90deg);
} .wpdm-tree ul.jqueryFileTree li.file > a::before {
content: '';
flex-shrink: 0;
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background-color: var(--tree-file);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all var(--tree-transition);
}
.wpdm-tree ul.jqueryFileTree li.file > a:hover::before {
background-color: var(--tree-file-hover);
transform: scale(1.1);
}  .wpdm-tree ul.jqueryFileTree li.ext_pdf > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_doc > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_docx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_txt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rtf > a::before {
background-color: #3b82f6;
} .wpdm-tree ul.jqueryFileTree li.ext_xls > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xlsx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_csv > a::before {
background-color: #22c55e;
} .wpdm-tree ul.jqueryFileTree li.ext_ppt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_pptx > a::before {
background-color: #f97316;
} .wpdm-tree ul.jqueryFileTree li.ext_jpg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_jpeg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_png > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gif > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_svg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_bmp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_psd > a::before {
background-color: #ec4899;
} .wpdm-tree ul.jqueryFileTree li.ext_zip > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_7z > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gz > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tgz > a::before {
background-color: #8b5cf6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp3 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wav > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_ogg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_m4a > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_flac > a::before {
background-color: #14b8a6;
} .wpdm-tree ul.jqueryFileTree li.ext_mp4 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_avi > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mov > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wmv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mkv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webm > a::before {
background-color: #ef4444;
} .wpdm-tree ul.jqueryFileTree li.ext_php > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_js > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_css > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_html > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_htm > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_json > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xml > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_py > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_java > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_c > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_cpp > a::before {
background-color: #06b6d4;
} .wpdm-tree ul.jqueryFileTree li.directory.wait > a::before {
width: var(--tree-icon-size);
height: var(--tree-icon-size);
background: transparent;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
-webkit-mask-image: none;
mask-image: none;
animation: wpdm-tree-spin 0.7s linear infinite;
}
@keyframes wpdm-tree-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .wpdm-tree ul.jqueryFileTree.start {
padding: 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree ul.jqueryFileTree.start li.wait {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wpdm-tree ul.jqueryFileTree.start li.wait::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid var(--tree-border);
border-top-color: var(--tree-folder);
border-radius: 50%;
animation: wpdm-tree-spin 0.8s linear infinite;
} .wpdm-tree-empty {
padding: 32px 16px;
text-align: center;
color: var(--tree-text-muted);
}
.wpdm-tree-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
} .wpdm-tree::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.wpdm-tree::-webkit-scrollbar-track {
background: var(--tree-bg);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb {
background: var(--tree-line);
border-radius: 4px;
}
.wpdm-tree::-webkit-scrollbar-thumb:hover {
background: var(--tree-text-muted);
} @media (max-width: 640px) {
.wpdm-tree {
--tree-indent: 20px;
--tree-item-height: 40px;
font-size: 13px;
}
.wpdm-tree ul.jqueryFileTree li a {
padding: 10px 12px;
}
} .wpdm-tree ul.jqueryFileTree ul {
overflow: hidden;
} .wpdm-tree ul.jqueryFileTree li.directory.expanded > a {
background: var(--tree-bg-hover);
} .wpdm-tree-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 8px;
border-bottom: 1px solid var(--tree-border);
}
.wpdm-tree-toolbar button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--tree-text-muted);
background: var(--tree-bg);
border: 1px solid var(--tree-border);
border-radius: 4px;
cursor: pointer;
transition: all var(--tree-transition);
}
.wpdm-tree-toolbar button:hover {
color: var(--tree-text);
background: var(--tree-bg-hover);
border-color: var(--tree-text-muted);
}
.wpdm-tree-toolbar button svg {
width: 14px;
height: 14px;
} .wpdm-tree-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
color: var(--tree-text-muted);
background: var(--tree-bg-hover);
border-radius: 10px;
margin-left: auto;
} @media print {
.wpdm-tree {
border: none;
padding: 0;
}
.wpdm-tree ul.jqueryFileTree li.directory.collapsed > ul {
display: block !important;
}
.wpdm-tree ul.jqueryFileTree li.directory > a::after {
display: none;
}
}