#container {
    min-width: 360px;
}

.explorer {
    display: flex;
    height: 600px;
}

#separator {
    width: 8px;
    cursor: ew-resize;
}

.directories, .files {
    position: relative;
    background-color: white;
    font-family: 'Droid Sans Mono', courier;
    border-radius: 2.5px;
    box-shadow: 1px 1px 1px #d8d8d8;
    flex: 1;
    max-width: calc(50% - 4px);
    min-width: 200px;
}

details>details {
    margin-left: 15px;
}

.dir-label, .file-label {
    padding: 0px 3px;
    border-radius: 1px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.dir-label:not([contenteditable=true]), .file-label:not([contenteditable=true]) {
    text-overflow: ellipsis;
}

.selected>summary .dir-label, .selected>.file-label {
    color: white;
    background-color: #777;
}

summary {
    border-width: 1px;
    border-color: transparent;
    border-style: dashed;
    cursor: pointer;
}

.drag-over>summary {
    border-color: black;
}

.dir-label[contenteditable=true], .file-label[contenteditable=true] {
    background-color: #ddd;
    cursor: auto;
}

.selected>summary .dir-label[contenteditable=true], .selected>.file-label[contenteditable=true] {
    color: inherit;
    background-color: transparent;
}

.dir-summary {
    outline: 0px;
}

.dir-summary-empty {
    display: inline-block;
    margin-left: 16px;
    width: calc(100% - 16px);
}

details>.dir-summary::marker {
    content: url('data:image/png;base64,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b2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDpjNzE0ZDM2OC01ZWE0LTQyNGYtYjc2My1hYjVkMTcyNDUyMGQiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YjJhYzU1NTYtN2MwMy00ZDFkLWE4OTktMTI5NjUxZTU4ZGNiIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NjNlODhmNDQtNGQ1ZC00YzAzLWJhOTMtNmM4Y2RiMTVkYTJlIgogICBHSU1QOkFQST0iMi4wIgogICBHSU1QOlBsYXRmb3JtPSJXaW5kb3dzIgogICBHSU1QOlRpbWVTdGFtcD0iMTYxMTUwMTMzMDU1MTg0OSIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjIyIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiPgogICA8aXB0Y0V4dDpMb2NhdGlvbkNyZWF0ZWQ+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpMb2NhdGlvbkNyZWF0ZWQ+CiAgIDxpcHRjRXh0OkxvY2F0aW9uU2hvd24+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpMb2NhdGlvblNob3duPgogICA8aXB0Y0V4dDpBcnR3b3JrT3JPYmplY3Q+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpBcnR3b3JrT3JPYmplY3Q+CiAgIDxpcHRjRXh0OlJlZ2lzdHJ5SWQ+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpSZWdpc3RyeUlkPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5Y2ZlMDU5OC01ZDJhLTQxNGItYWQxMi1iMDdlZDhiYTcwYTciCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDEtMjRUMTY6MTU6MzAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogICA8cGx1czpJbWFnZVN1cHBsaWVyPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6SW1hZ2VTdXBwbGllcj4KICAgPHBsdXM6SW1hZ2VDcmVhdG9yPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6SW1hZ2VDcmVhdG9yPgogICA8cGx1czpDb3B5cmlnaHRPd25lcj4KICAgIDxyZGY6U2VxLz4KICAgPC9wbHVzOkNvcHlyaWdodE93bmVyPgogICA8cGx1czpMaWNlbnNvcj4KICAgIDxyZGY6U2VxLz4KICAgPC9wbHVzOkxpY2Vuc29yPgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+es5yqwAAAAZiS0dEAIoAigCK49rnJAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+UBGA8PHlRbEMAAAAA2SURBVDjLY2AYBbiAJBSTDeZAMUHARKlTB94ARmhgNaOJ20Lpw2jitQwMDM+p6oLRWKBCUgYAVtMF5NOmXoAAAAAASUVORK5CYII=')
}

details[open]>.dir-summary::marker {
    content: url('data:image/png;base64,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b2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDphZWJkMDAxNC1mZmJjLTQyZDEtYmY1Ny01ZjZmOTkyOTZmZmQiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZWY1YWZkMTUtMzgwMi00YTJmLWI0NDYtNWZlYzdhZWJiYjhlIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2Nzc3YTQtY2EzZS00YzJiLTgyNzMtMGNhNDFmNDllNWE2IgogICBHSU1QOkFQST0iMi4wIgogICBHSU1QOlBsYXRmb3JtPSJXaW5kb3dzIgogICBHSU1QOlRpbWVTdGFtcD0iMTYxMTUwMTMyMjkyNjcxOSIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjIyIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiPgogICA8aXB0Y0V4dDpMb2NhdGlvbkNyZWF0ZWQ+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpMb2NhdGlvbkNyZWF0ZWQ+CiAgIDxpcHRjRXh0OkxvY2F0aW9uU2hvd24+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpMb2NhdGlvblNob3duPgogICA8aXB0Y0V4dDpBcnR3b3JrT3JPYmplY3Q+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpBcnR3b3JrT3JPYmplY3Q+CiAgIDxpcHRjRXh0OlJlZ2lzdHJ5SWQ+CiAgICA8cmRmOkJhZy8+CiAgIDwvaXB0Y0V4dDpSZWdpc3RyeUlkPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxZDE5MDVhZC0yNjY2LTRlZTktOGNlZi0zNDI3ZjI0NTdlYjQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDEtMjRUMTY6MTU6MjIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogICA8cGx1czpJbWFnZVN1cHBsaWVyPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6SW1hZ2VTdXBwbGllcj4KICAgPHBsdXM6SW1hZ2VDcmVhdG9yPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6SW1hZ2VDcmVhdG9yPgogICA8cGx1czpDb3B5cmlnaHRPd25lcj4KICAgIDxyZGY6U2VxLz4KICAgPC9wbHVzOkNvcHlyaWdodE93bmVyPgogICA8cGx1czpMaWNlbnNvcj4KICAgIDxyZGY6U2VxLz4KICAgPC9wbHVzOkxpY2Vuc29yPgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+UnXjaQAAAAZiS0dEAIoAigCK49rnJAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+UBGA8PFlqAmPIAAAAnSURBVDjLY2AYBaOACoCRgYFBkoGBoZlI9bUMDAzPkQWYRsNwEAAATDgCBL17qyAAAAAASUVORK5CYII=')
}

.listing:empty::after {
    font-family: sans-serif;
    color: #bbb;
    content: "拖放未压缩的文件";
    display: block;
    width: calc(100% - 5px);
    text-align: center;
    position: absolute;
    top: 50%;
}

.directories.empty::after {
    font-family: sans-serif;
    color: #bbb;
    content: "拖放压缩文件或文件夹到文件夹";
    display: block;
    width: calc(100% - 5px);
    text-align: center;
    position: absolute;
    top: 50%;
}

.bottom-buttons {
    position: relative;
    height: 90px;
}

.progress-export-zip {
    height: 8px;
    width: 100%;
    position: absolute;
    opacity: .7;
    top: 0px;
    left: 0px;
    border-width: 0;
}

.tree, .listing {
    padding: 5px;
    height: calc(100% - 10px);
    overflow: auto;
    margin: 0;
}

.listing>li {
    display: flex;
    list-style-type: none;
}

.directories .dir-summary-content {
    display: inline-flex;
    max-width: calc(100% - 16px);
}

.description {
    margin-bottom: 15px;
}

.button {
    cursor: pointer;
    align-self: center;
    opacity: 0;
    margin-left: 7px;
    width: 0px;
    height: 16px;
    background-size: contain;
    transition: opacity .2s ease-in;
}

.selected>summary .button, .selected>.button {
    min-width: 16px;
    opacity: .25;
}

.selected>summary:hover .button, .selected:hover>.button {
    opacity: .5;
}

.selected>summary .button:hover, .selected>.button:hover {
    opacity: 1;
}

.save-button {
    background-image: url(resources/save.svg);
}

.newdir-button {
    background-image: url(resources/new-directory.svg);
}

@media (max-width: 680px) {
    .explorer {
        flex-direction: column;
        min-height: calc(100vh - 230px);
    }
    .files, .directories {
        max-width: 100%;
        max-height: 50%;
        max-width: inherit !important;
    }
    #separator {
        pointer-events: none;
        width: 100%;
        height: 8px;
    }
}

@media (prefers-color-scheme: dark) {
    .drag-over>summary {
        border-color: whitesmoke;
    }
    .directories, .files {
        background-color: #202020;
    }
    .selected>summary .button, .selected>.button {
        filter: invert();
    }
}