style.css

:root {
    --neutral-layer-1: #f5f5f5; /* 设置浅灰色背景 */
}

body {
    margin: 0;
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-1);
    font-size: 16px; /* 增加基础字体大小 */
}

/* --- 布局样式 --- */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.nav-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px; /* 增加导航栏宽度 */
    padding: 16px 0; /* 上下16px padding */
    background-color: var(--neutral-layer-2);
    border-right: 1px solid var(--neutral-stroke-layer-rest);
}
.nav-bar fluent-button {
    margin-bottom: 8px;
    width: 48px; /* 设置按钮宽度 */
    height: 48px; /* 设置按钮高度，使其成为正方形 */
}

/* 解决内联样式问题：为导航按钮内的图标定义一个类 */
.nav-icon {
    font-size: 24px; /* 或者你想要的任何大小，例如 20px, 28px 等 */
    /* 确保图标在div中居中，如果需要的话 */
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    flex: 1;
    display: flex; /* 让 main 的子元素可以撑满 */
    min-width: 0;
}

.view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.view.hidden {
    display: none;
}

/* 解决内联样式问题：为主页视图中的元素添加样式 */
#select-folder-btn {
    margin-top: 24px;
}

#current-folder-info {
    margin-top: 16px;
    font-size: 16px; /* 增加当前目录信息字体大小 */
}


#folder-view {
    flex-direction: row;
    align-items: stretch;
}

.sidebar {
    width: 30%; /* 目录占30%宽度 */
    min-width: 200px; /* 设置最小宽度以防过小 */
    max-width: 400px; /* 设置最大宽度以防过大 */
    background-color: var(--neutral-layer-2);
    border-right: 1px solid var(--neutral-stroke-layer-rest);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sidebar-header {
    padding: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-shrink: 0;
}
#dir-tree-container {
    padding: 4px;
    overflow-y: auto;
    flex-grow: 1;
    font-size: 16px; /* 增加目录树字体大小 */
}

.content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--neutral-layer-1);
}
#breadcrumb-container {
    padding: 0 12px;
    height: 56px; /* 增加面包屑容器高度 */
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-shrink: 0;
    background-color: var(--neutral-layer-2);
    font-size: 18px; /* 增加面包屑字体大小 */
}
.gallery-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
}

/* --- JS-driven Waterfall Layout Styles --- */
#image-gallery {
    display: flex;
    gap: 16px; /* 列之间的间距 */
    align-items: flex-start; /* 关键：让列从顶部开始对齐 */
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px; /* 添加左右内边距 */
}

.image-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 图片卡片之间的垂直间距 */
}

.image-card {
    padding: 8px;
    width: 100%; /* 填满列宽 */
    box-sizing: border-box;
}

/* --- Lazy Loading Placeholder Styles (Unchanged) --- */
.image-placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background-color: var(--neutral-layer-3);
    border-radius: var(--control-corner-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--neutral-foreground-rest);
}

.image-card img {
    width: 100%;
    height: auto;
    border-radius: var(--control-corner-radius);
    background-color: var(--neutral-layer-3);
    display: block;
}
.image-placeholder {
    display: none;
}

.image-card.is-loading img {
    display: none;
}
.image-card.is-loading .image-placeholder {
    display: flex;
}

.image-card .caption {
    font-size: 14px;
    line-height: var(--type-ramp-minus-1-line-height);
    text-align: center;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 自定义滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }