AFI/ui/style.css

@import url('https://fonts.loli.net/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');
@import url("https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;700&display=swap");

:root {
    --background: #ffffff;
    --background-darker: #eeeeee;
    --background-verydarker: #dddddd;
    --foreground: #454545;
    --accent: #0f59a4;
    --accent-lighten: #2793ff;
    /*本来有color-mix的, 可惜支持太新*/
    --radius: 0;
    --font-size: 1rem;
    --line-height: 1.54em;
}

html {
    /* 预留滚动条空间，但不会让背景色断开，保持内容稳定 */
    scrollbar-gutter: stable;
}

@media (max-width: 640px) {
    #index-table th:nth-child(5) {
        display: none;
    }

    #index-table td:nth-child(6) {
        display: none;
    }

    .ellipsis {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    .desktoponly {
        display: none;
    }

    #index-table th:last-child,
    #index-table td:last-child {
        text-align: right;
        padding: 0.25em 0 !important;
    }

    #index-table th:nth-child(2),
    #index-table td:nth-child(3) {
        width: 52%;
    }

    #index-table th:nth-child(3),
    #index-table td:nth-child(4) {
        display: none;
    }
}

*,
*::before,
*::after {
    background-color: var(--background);
    color: var(--foreground);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Cascadia Code", "Noto Sans SC", system-ui, sans-serif;
    background: var(--background);
}

header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background);
    padding: 4px 32px 4px 20px;
    border-bottom: 1px solid var(--background-verydarker);
    z-index: 100;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.logo-img {
    display: inline-block;
    height: calc(8px + 1em);
    width: auto;
    padding: 0 1em 0 0;
    vertical-align: middle;
}

#nav {
    flex: 1;
    font-size: 14px;
    color: var(--foreground);
}

#operations {
    display: flex;
    gap: 8px;
}

.operation {
    padding: 4px 0px;
    border-color: transparent;
    color: var(--accent);
    cursor: pointer;
    font-size: 14px;
}

.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

#index-table {
    margin: 20px 20px 0 20px;
    width: auto;
    border-collapse: collapse;
    background: var(--background);
    overflow: auto;
    font-size: 12px;
}

#index-table th,
#index-table td {
    /*hack td高度计算的怪异标准(明确指定), 不然icon的div没高度显示不了icon*/
    height: 1px;
    text-align: left;
    /*Noto Fonts SC 和 Cascadia Code(以及各种utf-8 fallback字体) 的em不同, 所以用父元素统一基准, 不用子元素(可能没中文), 不然icon大小不齐*/
    /*然后导致rem不能有可变的多语言内容, 不然页面之间照样变*/
    /*css设计时就不能设置以指定字体为参照的em吗? 本来这个问题能用ie盒模型+"指定字体e"解决的 这下非要导致每行content间距可能不一样*/
    padding: 0.25rem 0.5rem;
    /*em单位简直毫不兼容且毫无预测性*/
    /*连ex这种东西都设计出来了 就不能设计一个e(任意字符)吗? */
    /*最终在icon用px+硬编码数字 懒得折腾了*/
    /*真空球形鸡设计*/
}

#index-table thead th {
    font-weight: 800;
    text-transform: uppercase;
    /*英文标题大写, 虽然我用中文*/
    letter-spacing: 0.5px;
}

#index-table tbody th,
#index-table tbody td {
    text-align: left;
    border-bottom: 1px solid var(--background-darker);
}

#index-table tr:hover {
    background: var(--background-darker);
}

#index-table th:nth-child(1) {
    min-width: 2.5em;
    padding: 0.25em 0;
}

#index-table td:nth-child(1) {
    width: 1.5em;
    padding: 0.25em 0;
}

#index-table td:nth-child(2) {
    width: 0.5em;
    padding: 0.25em 0em;
    /*就一个'>'号*/
}

#index-table th:nth-child(2),
#index-table td:nth-child(3) {
    max-width: 0;
    /*允许压缩*/
    min-width: 120px;
}

#index-table th:nth-child(3),
#index-table td:nth-child(4) {
    width: auto
        /*能占就占满*/
}

#index-table th:nth-child(4) {
    text-align: center;
}

#index-table td:nth-child(5) {
    text-align: right;
    width: 3em;
}

#index-table th:nth-child(5) {
    text-align: left;
}

#index-table td:nth-child(6) {
    width: 12em;
}

#index-table th:last-child,
#index-table td:last-child {
    text-align: right;
    padding-right: 2em;
    max-width: 0;
    /*允许压缩*/
    min-width: 4em;
}

.placeholder {
    flex: 1;
}

footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 12px 4px 12px;
    background: var(--background);
    border-top: 1px solid var(--background-verydarker);
    font-size: 12px;
    color: var(--foreground);
    z-index: 100;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.pulse {
    animation: fade 5s 1;
}

.item-selected::before {
    content: ">";
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--accent);
    font-weight: bold;
}

.highlight {
    background-color: var(--accent-lighten);
}


#drop-grid {
    align-items: center;
    display: none;
    justify-content: center;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 999;
    border: 5px dashed var(--accent);
    margin: 0px;
    border-radius: 5px;
    text-align: center;
    font-size: 4em;
    color: var(--accent);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 20px;
}

#drop-grid::after {
    content: "释放光标以传输文件";
    color: var(--foreground);
    background-color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

#notification {
    display: flex;
    flex-direction: row;
    padding: 0 0;
}

#notification * {
    padding: 0 0;
}

#statbar {
    display: flex;
    flex-direction: row;
    padding: 0 0;
}

#statbar * {
    padding: 0 0;
}

.nav:hover {
    color: var(--accent);
}

.item-icon {
    height: 16px;
    width: auto;
    /*垃圾css*/
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.type-icon-folder {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzc0NjkwMDA5MjU1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEwNTMwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik04ODAgMjk4LjRINTIxTDQwMy43IDE4Ni4yYy0xLjUtMS40LTMuNS0yLjItNS41LTIuMkgxNDRjLTE3LjcgMC0zMiAxNC4zLTMyIDMydjU5MmMwIDE3LjcgMTQuMyAzMiAzMiAzMmg3MzZjMTcuNyAwIDMyLTE0LjMgMzItMzJWMzMwLjRjMC0xNy43LTE0LjMtMzItMzItMzJ6TTg0MCA3NjhIMTg0VjI1NmgxODguNWwxMTkuNiAxMTQuNEg4NDBWNzY4eiIgcC1pZD0iMTA1MzEiPjwvcGF0aD48L3N2Zz4=") !important;
}

.type-icon-file {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzc0Njg5OTcyMTU2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUzNDAiIGRhdGEtc3BtLWFuY2hvci1pZD0iYTMxM3guc2VhcmNoX2luZGV4LjAuaTEuM2YwMTNhODFMUkJncXMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg1NC42IDI4OC42TDYzOS40IDczLjRjLTYtNi0xNC4xLTkuNC0yMi42LTkuNEgxOTJjLTE3LjcgMC0zMiAxNC4zLTMyIDMydjgzMmMwIDE3LjcgMTQuMyAzMiAzMiAzMmg2NDBjMTcuNyAwIDMyLTE0LjMgMzItMzJWMzExLjNjMC04LjUtMy40LTE2LjctOS40LTIyLjd6TTc5MC4yIDMyNkg2MDJWMTM3LjhMNzkwLjIgMzI2eiBtMS44IDU2MkgyMzJWMTM2aDMwMnYyMTZjMCAyMy4yIDE4LjggNDIgNDIgNDJoMjE2djQ5NHoiIHAtaWQ9IjUzNDEiIGRhdGEtc3BtLWFuY2hvci1pZD0iYTMxM3guc2VhcmNoX2luZGV4LjAuaTIuM2YwMTNhODFMUkJncXMiPjwvcGF0aD48L3N2Zz4=");
}

#help-panel {
    display: flex;
    text-align: center;
    width: 100%;
}

#help-panel h3 {
    padding: 0.2em 0 0 0;
    margin: 0;
}

#help-panel p {
    padding: 0.3em 0 0.5em 0;
    line-height: 1.5em;
}

#help-panel table {
    border-collapse: collapse;
    align-items: center;
    width: 40em;
    max-height: 10em;
    min-width: 30em;
    max-width: 50%;
    margin: auto;
    border: 4px solid var(--foreground);
}

#help-panel table td {
    border: 2px solid var(--background-darker);
}

#help-panel table * {
    padding: 0.3em 1em;
}