/* ========================================================================== FreePS 现代化界面皮肤 (custom.css) 说明： - 本文件基于 bundle 内置的 CSS 变量体系（body.theme-dark / theme-light / theme-green） 进行整体重定义，不修改任何 DOM 结构与布局尺寸。 - 由 enhancements.js 在样式注入完成后将本样式表移到 末尾，保证覆盖优先级。 ========================================================================== */ /* ---------- 深色主题（默认） ---------- */ body.theme-dark { /* 基础 */ --background: #14171d; --text-color: #e7eaf2; --text-color-muted: #97a0b5; --text-color-red: #ff7b72; --text-color-green: #56d364; --text-color-blue: #6ea8ff; --link-color: #6ea8ff; /* 面板 */ --section-background-color: #1a1e26; --area-background-color: #1a1e26; --block-background-color: #1d222c; --header-background-color: #232936; /* 按钮 */ --button-background-color: #252b37; --button-background-color-hover: #303848; --button-background-color-active: #2b3342; --button-text-color-active: #4f8cff; --button-shadow-color: rgba(0, 0, 0, 0.35); --button-toggle-background-color: #333c4d; --button-toggle-background-color-hover: #3d4759; --button-border-radius: 10px; /* 输入 */ --input-background-color: #20252f; --input-background-color-hover: #262d39; --input-text-color: #e7eaf2; --input-border-color: #343c4b; --input-border-color-active: #4f8cff; --input-border-radius: 10px; --input-group-border-color: #2c3340; /* 菜单 */ --menu-background-color: #171b22; --menu-icons-filter: invert(1) brightness(1.15); --menu-icons-filter-active: none; --menu-text-color: #dfe4ee; --menu-dropdown-hover-background-color: rgba(79, 140, 255, 0.22); --menu-dropdown-border-color: #4f8cff; /* 状态 */ --background-color-active: rgba(79, 140, 255, 0.25); --background-color-hover: #2a3140; --text-color-active: #6ea8ff; --border-color: #2c3340; /* 滚动条 */ --scrollbar-track-color: #171b22; --scrollbar-thumb-color: #333c4d; --mobile-menu-toggle-filter: invert(1); } /* ---------- 浅色主题 ---------- */ body.theme-light { --background: #f2f4f8; --text-color: #1c2130; --text-color-muted: #5c6577; --text-color-red: #d33; --text-color-green: #1a7f37; --text-color-blue: #2563eb; --link-color: #2563eb; --section-background-color: #eef1f6; --area-background-color: #e9edf4; --block-background-color: #ffffff; --header-background-color: #eceff5; --button-background-color: #ffffff; --button-background-color-hover: #f0f3f9; --button-background-color-active: #eef4ff; --button-text-color-active: #2563eb; --button-shadow-color: rgba(15, 23, 42, 0.08); --button-toggle-background-color: #dfe4ee; --button-toggle-background-color-hover: #d5dcea; --button-border-radius: 10px; --input-background-color: #ffffff; --input-background-color-hover: #f6f8fc; --input-text-color: #1c2130; --input-border-color: #d8deea; --input-border-color-active: #2563eb; --input-border-radius: 10px; --input-group-border-color: #dfe4ee; --menu-background-color: #f7f8fb; --menu-icons-filter: none; --menu-icons-filter-active: invert(1); --menu-text-color: #2a3040; --menu-dropdown-hover-background-color: rgba(37, 99, 235, 0.12); --menu-dropdown-border-color: #2563eb; --background-color-active: rgba(37, 99, 235, 0.14); --background-color-hover: #e4e9f2; --text-color-active: #2563eb; --border-color: #dfe4ee; --scrollbar-track-color: #f2f4f8; --scrollbar-thumb-color: #c3cbd9; --mobile-menu-toggle-filter: none; } /* ---------- 全局 ---------- */ body, body input, body select, body textarea, body button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } body { font-size: 13px; -webkit-font-smoothing: antialiased; } /* 统一过渡：按钮 / 输入 / 工具项 */ body .button, body button, body .item, body input[type="text"], body input[type="number"], body select { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } /* ---------- 顶部菜单栏 ---------- */ body nav.main_menu { background: var(--menu-background-color); border-bottom: 1px solid var(--border-color); } body #main_menu ul.menu_bar > li > a { border-radius: 8px; font-weight: 500; } body #main_menu ul.menu_bar > li > a:hover, body #main_menu ul.menu_bar > li > a:focus { background: var(--menu-dropdown-hover-background-color); color: var(--text-color-active); } /* ---------- 顶部子栏（logo / 工具属性 / 撤销） ---------- */ body .submenu { background: var(--menu-background-color); border-bottom: 1px solid var(--border-color); } body .submenu .logo { font-weight: 800; font-size: 1.35rem; letter-spacing: 0.5px; background: linear-gradient(120deg, #4f8cff 0%, #9d6bff 60%, #ff6bd5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } /* 自定义增强按钮组（enhancements.js 注入） */ body #wb_enhance_bar { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 10px; } body #wb_enhance_bar button { background: var(--button-background-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 9px; padding: 5px 10px; font-size: 12px; cursor: pointer; line-height: 1.4; white-space: nowrap; } body #wb_enhance_bar button:hover { background: var(--background-color-hover); color: var(--text-color-active); border-color: var(--input-border-color-active); transform: translateY(-1px); } /* ---------- 左侧工具栏 ---------- */ body #tools_container { padding: 6px 4px; gap: 2px; } body #tools_container .item { border-radius: 9px; margin: 2px 3px; opacity: 0.92; } body #tools_container .item:hover { background: var(--background-color-hover); opacity: 1; transform: translateY(-1px); } body #tools_container .item.active { background: var(--background-color-active); box-shadow: inset 0 0 0 1.5px var(--button-text-color-active); opacity: 1; } /* ---------- 右侧面板 ---------- */ body .sidebar_right .block { border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 1px 3px var(--button-shadow-color); overflow: hidden; margin: 8px 6px; } body .sidebar_right .block > h2 { background: var(--header-background-color); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 9px 12px; } body .sidebar_right .block > .content { padding: 8px 10px; } /* 面板圆角内滚动 */ body .sidebar_right { scrollbar-width: thin; } /* ---------- 图层列表 ---------- */ body #layers_base .item { border-radius: 8px; border: 1px solid transparent; } body #layers_base .item:hover { background: var(--background-color-hover); } body #layers_base .item.selected, body #layers_base .item.active { border-color: var(--button-text-color-active); } /* ---------- 按钮统一美化 ---------- */ body .button { border-radius: var(--button-border-radius); font-weight: 500; box-shadow: 0 1px 2px var(--button-shadow-color); } body .button:hover { box-shadow: 0 2px 6px var(--button-shadow-color); } body .button:active { transform: translateY(1px); } /* ---------- 输入控件 ---------- */ body input[type="text"], body input[type="number"], body select, body textarea { border-radius: var(--input-border-radius); } body input[type="text"]:focus, body input[type="number"]:focus, body select:focus, body textarea:focus { outline: none; border-color: var(--input-border-color-active); box-shadow: 0 0 0 2px var(--background-color-active); } /* 滑块 */ body .ui_range .handle { background: var(--button-text-color-active); border-color: var(--button-text-color-active); box-shadow: 0 1px 4px var(--button-shadow-color); } body .ui_range .bar { background: linear-gradient(90deg, var(--button-text-color-active), var(--text-color-active)); border-radius: 1000px; opacity: 0.55; } /* 色板 */ body .ui_swatches .swatch { border-radius: 4px; } /* ---------- 对话框（Alertify） ---------- */ body .ajs-dialog { border-radius: 14px !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important; overflow: hidden; } body .ajs-header { border-bottom: 1px solid var(--border-color); font-weight: 700; letter-spacing: 0.3px; } body .ajs-dimmer { backdrop-filter: blur(2px); } body .ajs-button { border-radius: 9px !important; font-weight: 500; } body .ajs-primary .ajs-button.btn-primary, body .ajs-primary .ajs-button.ajs-ok { background: var(--text-color-active); border-color: var(--text-color-active); color: #fff; } /* ---------- 通知 ---------- */ body .ajs-notifier.ajs-message { border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); } /* ---------- 滚动条 ---------- */ body ::-webkit-scrollbar { width: 10px; height: 10px; } body ::-webkit-scrollbar-track { background: var(--scrollbar-track-color); } body ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 8px; border: 2px solid var(--scrollbar-track-color); } body ::-webkit-scrollbar-thumb:hover { background: var(--text-color-muted); } /* ---------- 画布区 ---------- */ body .main_wrapper { border-radius: 6px; } /* ---------- 增强浮层（enhancements.js 注入） ---------- */ /* 拖放文件提示 */ #wb_drop_overlay { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(20, 24, 32, 0.72); backdrop-filter: blur(3px); pointer-events: none; } #wb_drop_overlay.wb-visible { display: flex; } #wb_drop_overlay .wb_drop_box { border: 2px dashed #6ea8ff; border-radius: 18px; padding: 48px 72px; color: #e7eaf2; font-size: 20px; font-weight: 600; background: rgba(79, 140, 255, 0.12); text-align: center; } /* 欢迎提示 */ #wb_welcome { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 99998; max-width: min(560px, calc(100vw - 32px)); background: var(--block-background-color, #1d222c); color: var(--text-color, #e7eaf2); border: 1px solid var(--border-color, #2c3340); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); padding: 14px 18px; font-size: 13px; line-height: 1.7; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } #wb_welcome.wb-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } #wb_welcome b { color: var(--text-color-active, #6ea8ff); } #wb_welcome .wb_close { position: absolute; top: 8px; right: 10px; border: none; background: none; color: var(--text-color-muted, #97a0b5); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; } #wb_welcome .wb_close:hover { background: var(--background-color-hover, #2a3140); color: var(--text-color, #e7eaf2); }