/* ============================================================================
   h5ai 暗色主题 (dark theme)
   ----------------------------------------------------------------------------
   目标文件位置 (0.29 / 0.30 官方版):
       _h5ai/public/ext/dark.css          <-- 本文件放这里
       如果 ext 目录不存在就新建一个

   启用方式 (推荐的官方方式, 不动核心文件):
       _h5ai/private/conf/options.json
       "resources": { "scripts": [], "styles": [ ..., "dark.css" ] }
       相对路径会被解析到 _h5ai/public/ext/

   备用方式 (任何老版本都能用):
       把本文件内容直接追加到 _h5ai/public/css/styles.css 末尾
       (Template 里 styles.css 先加载, 自定义样式后加载 => 同优先级时后者胜出)

   DOM 结构参考 (h5ai 0.30):
       body#root
         #topbar > #toolbar, #flowbar > #crumbbar, #backlink
         #mainrow > #sidebar, #tree, #content > #view > ul#items > li.item
                      li.item > a > .icon.square img / .icon.landscape img
                                   .label / .date / .size
         #pv-overlay (预览浮层) / #cm-overlay (右键菜单) / #notification

   注意: options.json 里的 "view.theme" 只换“图标集”(images/themes/*.svg),
        不换配色, 所以暗色只能这样用 CSS 覆盖。
   ========================================================================== */


/* ---------------------------------------------------------------------------
   0. 配色变量 —— 想微调颜色只改这一段
   ------------------------------------------------------------------------ */
:root {
    color-scheme: dark;                     /* 让原生滚动条/下拉框变暗 */

    --h5-bg:            #1b1b1d;            /* 主背景 */
    --h5-panel:         #232327;            /* 顶栏/侧栏/悬停行 */
    --h5-paper:         #1e1e21;            /* 列表行底色 */
    --h5-popup:         #2b2b30;            /* 右键菜单/文本预览 */
    --h5-text:          rgba(255,255,255,0.87);
    --h5-text-dim:      rgba(255,255,255,0.42);
    --h5-border:        rgba(255,255,255,0.08);
    --h5-border-strong: rgba(255,255,255,0.16);
    --h5-hover:         rgba(255,255,255,0.06);
    --h5-accent:        #64b5f6;            /* 悬停/链接蓝 */
}

html {
    background: var(--h5-bg);
}


/* ---------------------------------------------------------------------------
   1. 根容器与文字
   ------------------------------------------------------------------------ */
#root {
    background: var(--h5-bg);
    color: var(--h5-text);
}

#root, input, select {
    color: var(--h5-text);
}


/* ---------------------------------------------------------------------------
   2. 顶栏 / 工具栏 / 面包屑
   ------------------------------------------------------------------------ */
#topbar {
    background: var(--h5-panel);
    border-bottom: 1px solid var(--h5-border);
}

#toolbar .tool:hover,
#backlink:hover {
    background: var(--h5-hover);
}

#backlink, #backlink:active, #backlink:visited {
    color: var(--h5-text-dim);
}

#backlink:hover {
    color: var(--h5-accent);
}

#crumbbar a, #crumbbar a:active, #crumbbar a:visited {
    color: var(--h5-text);
}

#crumbbar a:hover {
    color: var(--h5-accent);
}


/* ---------------------------------------------------------------------------
   3. 左栏: 目录树 #tree 与侧边面板 #sidebar
   ------------------------------------------------------------------------ */
#tree a, #tree a:active, #tree a.visited {
    color: var(--h5-text);
}

#tree a:hover {
    color: var(--h5-accent);
}

#tree .summary {
    color: var(--h5-text-dim);
}

#sidebar {
    background: var(--h5-panel);
    border-right: 1px solid var(--h5-border);
    color: var(--h5-text);
}

#sidebar .button {
    color: var(--h5-text);
}

#sidebar .button:hover {
    background: var(--h5-hover);
}

#sidebar .button.active {
    background: var(--h5-hover);
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.6);
}

#sidebar input:hover,
#sidebar select:hover {
    background: var(--h5-hover);
}

#sidebar select option {
    background: var(--h5-popup);
    color: var(--h5-text);
}

/* 尺寸滑杆 (要分开写, 混在一起会让不识别的浏览器整条规则失效) */
#sidebar input[type='range']::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.18); }
#sidebar input[type='range']::-moz-range-track            { background: rgba(255, 255, 255, 0.18); }
#sidebar input[type='range']::-webkit-slider-thumb        { background: rgba(255, 255, 255, 0.55); }
#sidebar input[type='range']::-moz-range-thumb            { background: rgba(255, 255, 255, 0.55); }


/* ---------------------------------------------------------------------------
   4. 主视图: 列表 / 网格 / 图标
   ------------------------------------------------------------------------ */
#content {
    background: var(--h5-bg);
}

/* 列表行原本是纯白 (--col-back-paper), 暗色下必须覆盖 */
#view .item {
    background: var(--h5-paper);
}

#view .item:hover {
    color: var(--h5-accent);
    background: var(--h5-panel);
}

#view.view-details .item {
    border-bottom-color: var(--h5-border);
}

#view.view-details .header {
    border-bottom-color: var(--h5-border-strong);
}

#view.view-details .header .label,
#view.view-details .header .date,
#view.view-details .header .size {
    opacity: 0.55;
}

/* 图标模式里的方块底 */
#view.view-icons .landscape {
    background: var(--h5-panel);
}

/* 缩略图在暗底上加一点描边, 白色图片才不会糊成一片 */
#view .icon.square .thumb {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* "空目录" 提示文字原本用近黑边框色, 暗底上几乎不可见 */
#view-hint,
#view .no-match {
    color: var(--h5-border-strong);
}


/* ---------------------------------------------------------------------------
   5. 预览浮层 (点文件后的大图/视频/文本预览)
   ------------------------------------------------------------------------ */
#pv-overlay {
    background: rgba(0, 0, 0, 0.72);
}

/* 文本预览面板原本是白底 */
#pv-content-txt {
    background: var(--h5-popup);
    color: var(--h5-text);
}

div#pv-content-txt code {
    color: #7ec699;
}

#pv-content-txt a, #pv-content-txt a:active, #pv-content-txt a:visited {
    color: #68a9ff;
}

#pv-bottombar {
    background: #17171a;
}


/* ---------------------------------------------------------------------------
   6. 右键菜单 / 通知 / 拖拽选择框
   ------------------------------------------------------------------------ */
#cm-overlay .cm-panel {
    background: var(--h5-popup);
    color: var(--h5-text);
}

#cm-overlay .cm-entry:hover {
    color: var(--h5-accent);
    background: var(--h5-hover);
}

#cm-overlay .cm-sep {
    border-top-color: var(--h5-border-strong);
}

#notification {
    background: rgba(0, 0, 0, 0.65);
}

#selection-rect {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--h5-border-strong);
}


/* ---------------------------------------------------------------------------
   7. 图标反色
   h5ai 自带图标是 #555 深灰, 暗底上发闷, invert 一下变成浅灰。
   ------------------------------------------------------------------------ */

/* 只按 URL 命中 h5ai 自己的图标目录 (public/images/ui | themes | fallback),
   这样反色只作用在灰色 SVG 图标上:
     - 预览大图 <img id="pv-content-img">  src 是文件本身的地址  => 不反色
     - 列表缩略图                          src 在 cache/thumbs/  => 不反色
     - 你自己放进的图片 / header 图片                          => 不反色
   注意: 如果你把 _h5ai 目录改了名, 请把 /_h5ai/public/images/ 换成实际路径;
        如果你用彩色图标主题 (view.theme = "comity"), 删掉 themes 那一行。 */
img[src*="/_h5ai/public/images/"],
img[src*="/images/ui/"],
img[src*="/images/themes/"],
img[src*="/images/fallback/"] {
    filter: invert(1) brightness(0.92);
}

/* 保险: 预览大图与缩略图在任何情况下都不反色 */
#pv-content-img,
#view .icon img.thumb {
    filter: none !important;
}


/* ---------------------------------------------------------------------------
   8. 滚动条 (Chrome / Edge / Safari)
   ------------------------------------------------------------------------ */
body#root {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    scrollbar-width: thin;
}

#content::-webkit-scrollbar,
#sidebar::-webkit-scrollbar,
#tree::-webkit-scrollbar,
#pv-content-txt::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

#content::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track,
#tree::-webkit-scrollbar-track,
#pv-content-txt::-webkit-scrollbar-track {
    background: transparent;
}

#content::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb,
#tree::-webkit-scrollbar-thumb,
#pv-content-txt::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 6px;
}

#content::-webkit-scrollbar-thumb:hover,
#sidebar::-webkit-scrollbar-thumb:hover,
#tree::-webkit-scrollbar-thumb:hover,
#pv-content-txt::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}