ionicons-v5-n

/* === icons.css === */ /* Unified, theme-aware icon system (single source of truth) */ .icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; color: var(--icon-color, currentColor); background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; } .icon.sm { width: 14px; height: 14px; } .icon.md { width: 18px; height: 18px; } .icon.lg { width: 22px; height: 22px; } .icon.xl { width: 40px; height: 40px; } :root[data-theme="light"] { --icon-color: #000; } :root[data-theme="dark"] { --icon-color: #fff; } /* Shared masks for utility overlays (e.g., selection checkmark) */ :root { --check-src: url("data:image/svg+xml;utf8,"); } /* Map all data-icon values to their SVG masks (black shapes; alpha used) */ /* File actions */ [data-icon="open-file"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="open-folder"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="folder"] { --icon-src: url('data:image/svg+xml,'); } [data-icon="folder-empty"] { --icon-src: url('data:image/svg+xml,'); } [data-icon="folder-open"] { --icon-src: url('data:image/svg+xml;utf8,'); } [data-icon="folder-empty-open"] { --icon-src: url('data:image/svg+xml;utf8,'); } [data-icon="folder-up"] { --icon-src: url('data:image/svg+xml,'); } [data-icon="search"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="search-here"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="search-everywhere"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="search-stop"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="search-dismiss"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="select-all"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="rename"], [data-icon="edit"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="delete"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="download-all"], [data-icon="download"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="copy"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="paste-here"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="cut"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="move"] { --icon-src: url("data:image/svg+xml;utf8,"); } /* Toolbar and menus */ [data-icon="new"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="upload"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="mkdir"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="mkfile"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="toggle-view-list"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="toggle-view-grid"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="toggle-view"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="sort"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="sort-name"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="sort-date"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="sort-size"] { --icon-src: url("data:image/svg+xml;utf8,"); } /* Sidebar + toolbar button icons */ [data-icon="home"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="refresh"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="more"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="tree"] { --icon-src: url('data:image/svg+xml,'); } [data-icon="settings"] { --icon-src: url('data:image/svg+xml,'); } [data-icon="logs"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="logout"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="user"] { --icon-src: url('data:image/svg+xml,'); } [data-icon="disconnect"] { --icon-src: url("data:image/svg+xml;utf8,"); } /* Dialog icons */ [data-icon="info"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="warning"] { --icon-src: url("data:image/svg+xml;utf8,"); } /* Utility */ [data-icon="check"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="qr-code"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="link"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="chevron-left"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="chevron-right"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="chevron-up"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="chevron-down"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="grip"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="expand"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="collapse"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="close"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="code"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="panel-right"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="panel-right-off"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="eye"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="eye-off"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="split-view"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="server"] { --icon-src: url('data:image/svg+xml,'); } [data-icon="server-wdavfs"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="server-local"] { --icon-src: url("data:image/svg+xml;utf8,"); } [data-icon="server-add"] { --icon-src: url('data:image/svg+xml,'); } /* === core.css === */ :root { /* Light theme: muted neutral palette like native file managers */ --bg-color: #f5f5f5; --fg-color: #2c2c2c; --g1-color: #ffffff; --g2-color: #e0e0e0; --g3-color: #9e9e9e; /* Accents: bright for selection, muted for links */ --accent: #2196f3; --accent-2: #1976d2; --link-color: #1976d2; --visited-color: #7b1fa2; --active-color: var(--accent); /* Surfaces */ --glass-1: linear-gradient(180deg, color-mix(in srgb, #ffffff 96%, transparent), color-mix(in srgb, #ffffff 88%, transparent)); --glass-2: linear-gradient(180deg, color-mix(in srgb, #ffffff 94%, transparent), color-mix(in srgb, #ffffff 86%, transparent)); --panel-border: color-mix(in srgb, var(--g3-color) 30%, transparent); --radius: 8px; } :root[data-theme="dark"] { --bg-color: #0d1117; --fg-color: #c9d1d9; --g1-color: #161b22; --g2-color: #21262d; --g3-color: #30363d; --accent: #3b82f6; --accent-2: #60a5fa; --link-color: var(--accent); --visited-color: #bc8cff; --active-color: var(--accent-2); /* Dark surfaces and borders for glass components (dialogs, inputs) */ --glass-1: linear-gradient(180deg, color-mix(in srgb, #161b22 92%, transparent), color-mix(in srgb, #161b22 88%, transparent)); --glass-2: linear-gradient(180deg, color-mix(in srgb, #21262d 90%, transparent), color-mix(in srgb, #21262d 86%, transparent)); --panel-border: color-mix(in srgb, var(--g3-color) 50%, transparent); } @media screen and (max-width: 768px) { input[type="text"], input[type="search"], textarea { font-size: 16px !important; } } html { height: 100%; background: var(--bg-color); } body { margin: 0; text-align: center; font-size: 1.05em; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg-color); color: var(--fg-color); min-height: 100vh; min-height: 100dvh; } /* Custom scrollbars */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--g2-color); border-radius: 6px; } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; border: 2px solid var(--g2-color); } ::-webkit-scrollbar-thumb:hover { background: var(--accent2); } ::-webkit-scrollbar-corner { background: var(--g2-color); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--accent) var(--g2-color); } /* When overlays (loading, dialogs, context menus, drag overlay, sidebar) are active, lock body scroll */ body.loading, body.dialog, body.menu, body.dragging, body.sidebar-open { overflow: hidden; } @supports (-webkit-touch-callout: none) { html { height: -webkit-fill-available; } body { min-height: -webkit-fill-available; } } /* Dark theme: simple solid background like native file managers */ :root[data-theme="dark"] body { background: var(--bg-color); } a:link { color: var(--link-color); } a:visited { color: var(--visited-color); } a:hover { color: var(--active-color); } /* Floating Paste button */ .wd-fab-paste { position: fixed; right: 16px; bottom: 16px; z-index: 1100; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--panel-border); background: color-mix(in srgb, var(--g1-color) 95%, #ffffff); color: var(--fg-color); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent2) 16%, transparent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s ease, box-shadow .18s ease, background .16s ease, border-color .16s ease; } .wd-fab-paste:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--accent2) 30%, transparent); } .wd-fab-paste:active { transform: translateY(1px); } :root[data-theme="dark"] .wd-fab-paste { background: color-mix(in srgb, var(--g1-color) 92%, transparent); } /* buttons/inputs */ .btn { -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type=button], input[type=submit], .btn { font-size: 1rem; padding: .55em 1em; margin: .2em .3em; border: 1px solid color-mix(in srgb, var(--fg-color) 30%, transparent); background: var(--glass-1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--radius); cursor: pointer; text-decoration: none; color: var(--fg-color) !important; font-family: inherit; transition: background-color .16s ease, color .16s ease, box-shadow .18s ease, transform .12s ease, border-color .16s ease; } input[type=text], textarea { font-size: 1rem; padding: .6em .8em; border: 2px solid var(--panel-border); background: var(--glass-2); border-radius: calc(var(--radius) - 2px); width: calc(100% - 1.6em); color: var(--fg-color); height: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } input:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); } input[type=button]:hover, input[type=submit]:hover, .btn:hover { color: var(--fg-color); background: color-mix(in srgb, var(--fg-color) 5%, transparent); border-color: color-mix(in srgb, var(--fg-color) 18%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent2) 12%, transparent); } input[type=button]:active, input[type=submit]:active, .btn:active { transform: translateY(1px); } .close { text-align: right; margin: 0; } .close input { font-size: .8em; } input[type=submit] { float: right; } /* dialog styles moved to dialogs.css */ /* loader */ .bg { align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; width: 0; height: 0; border: none; opacity: 0; display: flex; } /* Loader (wow-effect) */ .loading .bg::before, .loading .bg::after { content: ""; grid-area: 1 / 1; justify-self: start; align-self: start; width: 35px; aspect-ratio: 1; box-shadow: 0 0 0 3px var(--accent) inset; filter: drop-shadow(40px 40px 0 var(--accent)); animation: l8 2s infinite alternate; } .loading .bg::after { justify-self: end; filter: drop-shadow(-40px 40px 0 var(--accent)); animation-delay: -1s; } .loading .bg { display: grid; place-items: center; position: fixed; inset: 0; grid-template-columns: 75px; grid-template-rows: 75px; width: 100%; height: 100%; } @keyframes l8 { 0%,10% { border-radius: 0; } 30%,40% { border-radius: 50% 0; } 60%,70% { border-radius: 50%; } 90%,100% { border-radius: 0 50%; } } /* Smooth loader animations */ .loading .bg { animation: fadeIn 0.4s ease-out; } /* Subtle cloud background (theme-aware) */ .loading .bg { background-image: radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--accent) 14%, transparent) 0 55%, transparent 60%), radial-gradient(closest-side at 55% 35%, color-mix(in srgb, var(--accent2) 12%, transparent) 0 52%, transparent 58%), radial-gradient(closest-side at 70% 45%, color-mix(in srgb, var(--accent) 10%, transparent) 0 50%, transparent 56%); background-repeat: no-repeat; background-size: 220px 140px, 260px 160px, 240px 150px; background-position: 50% 48%, 52% 44%, 48% 52%; } .loading-hiding .bg { animation: fadeOut 0.3s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } } .spinner { align-items: center; justify-content: center; display: flex; } .spinner span::after { width: 30px; height: 30px; } .loading .bg, .dragging:not(.wd-file-drag) .bg, .dialog .bg { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 1; width: 100%; height: 100%; z-index: 1100; background: color-mix(in srgb, var(--bg-color) 70%, transparent); align-content: center; } body.wd-file-drag .bg { display: none !important; pointer-events: none !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } progress { height: 2em; width: 90%; } @keyframes spin { to { transform: rotate(360deg); } } /* Upload panel */ .wd-upload-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); background: var(--glass-1); border: 2px solid var(--panel-border); border-radius: 18px; box-shadow: 0 30px 60px rgba(15,23,42,.35); z-index: 1100; max-height: 75vh; height: min(480px, 75vh); display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(12px); transition: transform .5s, height .5s; } .wd-upload-panel.collapsed { height: 2.75rem; box-shadow: 0 10px 30px rgba(15,23,42,.25); cursor: pointer; transform: translate(-50%, calc(50vh - 3.5rem)) scale(.95); } .wd-upload-panel.collapsed .wd-upload-body { height: 0%; } .wd-upload-panel.collapsed::after { content: attr(data-collapsed-label); position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: .85rem; color: color-mix(in srgb, var(--fg-color) 96%, transparent); height: -webkit-fill-available; -webkit-align-content: center; align-content: center; } .wd-upload-summary { display: none; } .wd-upload-panel.collapsed .wd-upload-title { opacity: 0; } .wd-upload-panel.collapsed .wd-upload-window-controls { opacity: .7; } .wd-upload-header { display: flex; align-items: center; justify-content: center; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--bg-color) 90%, transparent); position: relative; border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); } .wd-upload-panel.collapsed .wd-upload-header { -webkit-align-items: anchor-center; align-items: anchor-center; } .wd-upload-title { font-size: 1rem; font-weight: 600; } .wd-upload-window-controls { position: absolute; left: 1rem; display: inline-flex; gap: .4rem; } .wd-upload-window-controls button { width: 13px; height: 13px; border-radius: 50%; border: none; padding: 0; cursor: pointer; } .wd-upload-close { background: #ff5f57; } .wd-upload-collapse { background: #febc2e; } .wd-upload-close:focus-visible, .wd-upload-collapse:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; } .wd-upload-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; transition: .5s; } .wd-upload-list { overflow-y: auto; padding-right: .25rem; flex: 1 1 auto; min-height: 0; } .wd-upload-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) auto; align-items: center; gap: .4rem; font-size: .85rem; padding: .35rem 0; border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 12%, transparent); } .wd-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wd-upload-footer { display: flex; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); margin-top: auto; } .wd-upload-footer .btn { min-width: 100px; } .wd-upload-picker { display: flex; gap: 0.75rem; padding: 0.25rem 1.25rem; background: color-mix(in srgb, var(--fg-color) 2%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); } .wd-upload-picker .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.65rem 1rem; font-size: 0.9rem; font-weight: 500; border: 1px solid color-mix(in srgb, var(--fg-color) 15%, transparent); background: color-mix(in srgb, var(--fg-color) 5%, transparent); color: var(--fg-color); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .wd-upload-picker .btn:hover { background: color-mix(in srgb, var(--accent-1) 12%, transparent); border-color: var(--accent-1); color: var(--accent-1); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .wd-upload-picker .btn:active { transform: translateY(0); } .wd-upload-picker .btn[data-icon]::before { content: ''; display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; flex-shrink: 0; } .wd-upload-list { overflow-y: auto; max-height: 40vh; padding: 0.5rem 1.25rem; flex: 1 1 auto; min-height: 100px; } .wd-upload-name-wrapper { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; } .wd-upload-sub { font-size: 0.75rem; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wd-upload-row progress { width: 100%; } .wd-upload-row[data-status="canceled"] progress { accent-color: grey; } .wd-upload-row[data-status="failed"] progress { accent-color: #f87171; } .wd-upload-row[data-status="done"] progress { accent-color: darkseagreen; } .wd-upload-status { font-size: .8rem; justify-self: end; display: inline-flex; align-items: center; min-width: 28px; height: 20px; } .wd-upload-status::before { content: ''; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .75rem; } .wd-upload-status[data-status="wait"]::before, .wd-upload-status[data-status="uploading"]::before { border: 2px solid color-mix(in srgb, var(--accent-2) 50%, transparent); border-top-color: transparent; animation: spin .8s linear infinite; } .wd-upload-status[data-status="uploading"]::before { border-color: color-mix(in srgb, var(--accent-1) 65%, transparent); border-top-color: transparent; } .wd-upload-status[data-status="done"]::before { content: '✅'; color: #22c55e; font-size: .9rem; } .wd-upload-status[data-status="failed"]::before { content: '⚠️'; color: #f87171; font-size: .9rem; } .wd-upload-status[data-status="canceled"]::before { content: '❌'; color: color-mix(in srgb, var(--fg-color) 70%, transparent); font-size: 1rem; } /* Toast */ .wd-toast { position: fixed; left: 50%; bottom: 4.5rem; min-width: 20%; padding: 0px 10px; transform: translateX(-50%); background: var(--glass-1); color: var(--fg-color); border-radius: 999px; font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 1200; display: inline-flex; flex-direction: column; align-items: center; border: 1px solid var(--panel-border); overflow: hidden; --progress-color: var(--accent2); --icon-src: url('data:image/svg+xml,'); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .wd-toast:before { content: ''; position: absolute; top: 40%; left: 20px; height: 20px; width: 20px; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; } .wd-toast.wd-toast-error { border-color: color-mix(in srgb, var(--progress-color) 20%, transparent); --progress-color: red; --icon-src: url('data:image/svg+xml,'); } .wd-toast.visible { opacity: 1; } .wd-toast-text { white-space: nowrap; padding: 12px 18px 8px 18px; margin-left: 18px; align-self: flex-start; } .wd-toast-progress { position: relative; width: 100%; height: 6px; opacity: .6; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, #ffffff 14%, transparent); } .wd-toast-progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: inherit; background: color-mix(in srgb, var(--progress-color) 80%, transparent); } /* responsive bits specific to core */ @media screen and (max-width: 800px) { body { margin: 0; font-size: 1em; } } @media screen and (max-width: 400px) { input, textarea { font-size: 1em; } } /* === dialogs.css === */ /* Modular dialog styling for custom WD.dialogs views */ /* Move picker bottom sheet */ dialog.move-sheet, dialog.transfer-sheet { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; min-width: 0; max-width: none; min-height: 280px; max-height: 92vh; padding: 0; margin: 0; border: none; border-radius: 16px 16px 0 0; overflow: hidden; background: transparent; transform: translateY(100%); opacity: 1; z-index: 1200; display: flex; flex-direction: column; transition: transform .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1), border-radius .24s ease; will-change: transform; -webkit-backdrop-filter: none; backdrop-filter: none; } dialog.move-sheet:not(.move-sheet-fullscreen), dialog.transfer-sheet:not(.move-sheet-fullscreen) { height: var(--move-sheet-height, min(72vh, 560px)); } dialog.transfer-sheet:not(.move-sheet-fullscreen) { height: min(78vh, 580px); } dialog.move-sheet.move-sheet-fs-animating { transition: transform .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1), border-radius .24s ease; will-change: transform, height, border-radius; } dialog.move-sheet[open], dialog.transfer-sheet[open] { opacity: 1; width: 100%; justify-self: center; } @media (min-width: 720px) { dialog.move-sheet[open], dialog.transfer-sheet[open] { width: 70%; } } @media (min-width: 1020px) { dialog.move-sheet[open], dialog.transfer-sheet[open] { width: 50%; } } dialog.move-sheet[open].move-sheet-visible:not(.move-sheet-closing), dialog.transfer-sheet[open].move-sheet-visible:not(.move-sheet-closing) { transform: translateY(0); } dialog.move-sheet.move-sheet-closing, dialog.transfer-sheet.move-sheet-closing { transform: translateY(100%); pointer-events: none; } dialog.move-sheet.move-sheet-fullscreen { height: 100dvh; max-height: 100dvh; border-radius: 0; width: 100%; } dialog.move-sheet.move-sheet-fullscreen .move-sheet-resize-handle { display: none; } /* Info sheet — shared mini bottom sheet */ dialog.info-sheet:not(.move-sheet-fullscreen) { height: var(--move-sheet-height, min(520px, 72vh)); } .info-sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); } .info-sheet-busy.icon { display: none; color: var(--accent); background-color: transparent; flex: none; } .move-sheet-header.info-sheet-busy .info-sheet-busy { display: inline-flex; } .move-sheet-header-actions .info-sheet-busy.nav-loading::before { content: ''; -webkit-mask: none; mask: none; width: 15px; height: 15px; border-radius: 50%; background: transparent; border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; animation: wd-tree-toggle-spin 0.65s linear infinite; } @keyframes wd-tree-toggle-spin { to { transform: rotate(360deg); } } .move-sheet-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--glass-1); } .move-sheet-header { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px 10px; border-bottom: 1px solid var(--panel-border); background: color-mix(in srgb, var(--g1-color) 92%, transparent); } .move-sheet-header-left { display: flex; align-items: center; } .move-sheet-header-center { min-width: 0; text-align: start; } .move-sheet-title { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .move-sheet-item-name { display: block; font-size: .78rem; opacity: .65; margin-top: 2px; } .move-sheet-header-actions { display: flex; align-items: center; gap: 4px; } .move-sheet-path { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); background: color-mix(in srgb, var(--g2-color) 28%, transparent); min-height: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .move-path-seg { appearance: none; border: none; background: transparent; color: var(--link-color); font: inherit; font-size: .84rem; padding: 4px 6px; border-radius: 6px; cursor: pointer; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .move-path-seg:hover { background: color-mix(in srgb, var(--accent2) 10%, transparent); } .move-path-seg.active { color: var(--fg-color); font-weight: 600; cursor: default; max-width: none; } .move-path-sep { opacity: .45; font-size: .82rem; user-select: none; } .move-sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .move-sheet-list { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)); overflow: auto; -webkit-overflow-scrolling: touch; } .move-sheet-tree-pane { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px 6px calc(8px + env(safe-area-inset-bottom, 0px)); } .move-sheet-tree-list { padding: 0; } .move-sheet-list li + li { margin-top: 2px; } .move-sheet-row { width: 100%; display: flex; align-items: center; gap: 12px; appearance: none; border: 1px solid transparent; background: color-mix(in srgb, var(--glass-2) 80%, transparent); color: var(--fg-color); font: inherit; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; min-width: 0; } .move-sheet-row:hover { background: color-mix(in srgb, var(--accent2) 10%, var(--glass-2)); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } .move-sheet-row:active { transform: scale(0.992); } .move-sheet-back { background: color-mix(in srgb, var(--accent) 8%, var(--glass-2)); font-weight: 600; } .move-sheet-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .move-sheet-row-chevron { flex: none; opacity: .45; } .move-sheet-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 12px; opacity: .7; font-size: .92rem; } .move-sheet-error { color: color-mix(in srgb, #e55 85%, var(--fg-color)); } /* Folder navigation pending (like listing nav-pending) */ .move-sheet-list.move-sheet-pending { pointer-events: none; user-select: none; } .move-sheet-list.move-sheet-pending .move-sheet-row:not(.move-target) { opacity: 0.42; transition: opacity 0.15s ease; } .move-sheet-list.move-sheet-pending .move-sheet-row.move-target { opacity: 1; } .move-sheet-row .icon.nav-loading { color: var(--accent); } .move-sheet-row .icon.nav-loading::before { -webkit-mask: none; mask: none; width: 15px; height: 15px; border-radius: 50%; background: transparent; border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; animation: wd-tree-toggle-spin 0.65s linear infinite; } /* Legacy folder picker (prompt fallback) */ .fp-wrap { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 260px; } .fp-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .88rem; min-height: 21.5px; } .fp-breadcrumb a { color: var(--link-color); text-decoration: none; padding: 4px 8px; border-radius: 999px; } .fp-breadcrumb a:hover { background: color-mix(in srgb, var(--accent2) 10%, transparent); } .fp-list { list-style: none; margin: 0; padding: 6px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--glass-2); overflow: auto; height: 50vh; } .fp-list li { padding: 3px; } .fp-list li + li { border-top: 1px dashed color-mix(in srgb, var(--fg-color) 8%, transparent); } .fp-list button { width: 100%; text-align: left; appearance: none; border: 1px solid transparent; background: transparent; color: var(--fg-color); cursor: pointer; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font: inherit; transition: background-color .15s ease, border-color .15s ease; } .fp-list button:hover { background: color-mix(in srgb, var(--accent2) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } /* ── WD modal dialogs (alert / confirm / prompt) ── */ dialog { color: var(--fg-color); box-shadow: 0 24px 64px color-mix(in srgb, #000 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--panel-border) 55%, transparent); } dialog:has(> form.wd-dialog), dialog.wd-modal { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; width: min(480px, calc(100vw - 32px)); min-width: 0; max-width: min(520px, calc(100vw - 32px)); max-height: min(88vh, 760px); padding: 0; margin: 0; border: none; border-radius: 16px; overflow: hidden; background: var(--glass-1); transform: translate(-50%, calc(-50% + 10px)) scale(0.97); opacity: 0; transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .22s ease, box-shadow .22s ease; z-index: 2000; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } dialog:has(> form.wd-dialog)[open], dialog.wd-modal[open] { transform: translate(-50%, -50%) scale(1); opacity: 1; } form.wd-dialog { display: flex; flex-direction: column; max-height: min(88vh, 760px); margin: 0; height: auto; box-sizing: border-box; overflow: hidden; align-self: center; } .dlg-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); background: color-mix(in srgb, var(--g1-color) 94%, transparent); } .dlg-header-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .dlg-header .dlg-icon { flex: none; color: var(--accent); opacity: .92; } .dlg-header h3 { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wd-dialog .dlg-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 18px; text-align: left; } .wd-dialog .dlg-body p { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; opacity: .92; word-break: break-word; white-space: pre-line; } .wd-dialog .dlg-body p:last-child { margin-bottom: 0; } .wd-dialog .dlg-body code.dlg-path { display: block; margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--fg-color) 6%, transparent); border: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.86em; line-height: 1.45; word-break: break-all; } .wd-dialog .dlg-body input[type="text"], .wd-dialog .dlg-body input[type="url"], .wd-dialog .dlg-body input[type="password"], .wd-dialog .dlg-body textarea { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--glass-2); color: var(--fg-color); font: inherit; font-size: .95rem; transition: border-color .15s ease, box-shadow .15s ease; } .wd-dialog .dlg-body input[type="text"]:focus, .wd-dialog .dlg-body input[type="url"]:focus, .wd-dialog .dlg-body input[type="password"]:focus, .wd-dialog .dlg-body textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .wd-dialog .dlg-body textarea { min-height: 120px; resize: vertical; line-height: 1.45; } .wd-dialog .dlg-actions { flex: none; display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); background: color-mix(in srgb, var(--g2-color) 22%, transparent); } .dlg-btn { appearance: none; border: 1px solid transparent; border-radius: 10px; min-height: 40px; padding: 0 16px; font: inherit; font-size: .94rem; font-weight: 500; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease; } .dlg-btn:active { transform: scale(0.98); } .dlg-btn-secondary { background: color-mix(in srgb, var(--g2-color) 70%, transparent); border-color: color-mix(in srgb, var(--fg-color) 12%, transparent); color: var(--fg-color); } .dlg-btn-secondary:hover { background: color-mix(in srgb, var(--accent2) 10%, var(--g2-color)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .dlg-btn-primary { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--fg-color); font-weight: 600; } :root[data-theme="dark"] .dlg-btn-primary { background: color-mix(in srgb, var(--accent) 22%, transparent); } .dlg-btn-primary:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent); } /* ── Generic legacy dialogs (download progress, etc.) ── */ dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(.wd-alpha-color-dialog):not(.preview-editor-sheet):not(:has(> form.wd-dialog)) { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; width: min(520px, calc(100vw - 32px)); min-width: 0; max-width: calc(100vw - 32px); max-height: min(88vh, 760px); padding: 0; margin: 0; border: none; border-radius: 16px; overflow: hidden; background: var(--glass-1); box-shadow: 0 24px 64px color-mix(in srgb, #000 26%, transparent); transform: translate(-50%, calc(-50% + 8px)) scale(0.98); opacity: 0; transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; z-index: 2000; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(.wd-alpha-color-dialog):not(.preview-editor-sheet):not(:has(> form.wd-dialog))[open] { transform: translate(-50%, -50%) scale(1); opacity: 1; } dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(:has(> form.wd-dialog)) > .close { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; text-align: right; } dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(:has(> form.wd-dialog)) > .close input { appearance: none; border: 1px solid color-mix(in srgb, var(--fg-color) 12%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--g2-color) 80%, transparent); color: var(--fg-color); font-size: .82rem; padding: 6px 10px; cursor: pointer; min-height: 32px; } dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(:has(> form.wd-dialog)) form { overflow: auto; height: auto; max-height: min(88vh, 760px); padding: 16px; box-sizing: border-box; } dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(:has(> form.wd-dialog)) form div { clear: both; text-align: center; height: auto; } @media (max-width: 640px) { dialog:has(> form.wd-dialog), dialog.wd-modal, dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(.wd-alpha-color-dialog):not(:has(> form.wd-dialog)) { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; transform: translateY(100%); } dialog:has(> form.wd-dialog)[open], dialog.wd-modal[open], dialog:not(.preview):not(.move-sheet):not(.transfer-sheet):not(.edit):not(.wd-alpha-color-dialog):not(:has(> form.wd-dialog))[open], .wd-alpha-color-dialog[open] { transform: translateY(0); } .wd-alpha-color-dialog { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; transform: translateY(100%); } .wd-dialog .dlg-actions { flex-direction: column-reverse; padding-bottom: 36px; } .dlg-btn { width: 100%; min-height: 44px; } } /* Alpha Color Picker Dialog */ .wd-alpha-color-dialog { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); border: none; border-radius: 16px; background: var(--glass-1); backdrop-filter: blur(16px); box-shadow: 0 24px 64px color-mix(in srgb, #000 26%, transparent); max-width: 440px; width: min(440px, calc(100vw - 32px)); padding: 0; opacity: 0; transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; } .wd-alpha-color-dialog[open] { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Use the same glass effect for modal backdrops */ dialog:not(.wd-alpha-color-dialog)::backdrop { background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @media (prefers-color-scheme: dark) { :root[data-theme="dark"] dialog:not(.wd-alpha-color-dialog)::backdrop { background: rgba(0, 0, 0, 0.52); } } .wd-alpha-color-dialog::backdrop { background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(6px); } .wd-alpha-color-content { padding: 24px; } .wd-alpha-color-content h3 { margin: 0 0 20px; font-size: 1.25rem; font-weight: 600; color: var(--fg-color); } .wd-alpha-color-controls { display: flex; gap: 24px; margin-bottom: 24px; align-items: flex-start; } .wd-color-preview { flex-shrink: 0; display: flex; align-items: flex-start; } .wd-preview-box { width: 90px; height: 90px; border-radius: 10px; border: 2px solid var(--panel-border); background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-size: 12px 12px; background-position: 0 0, 6px 6px; } .wd-color-inputs { flex: 1; display: flex; flex-direction: column; gap: 16px; } .wd-color-input-group label, .wd-color-hex label { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--fg-color); overflow: hidden; padding: 10px 14px; background: var(--glass-2); border-radius: 999px; border: 2px solid var(--panel-border); justify-content: space-between; } .wd-color-input-group span, .wd-alpha-input-group span, .wd-color-hex span { min-width: 80px; font-weight: 500; } .wd-color-input-group input[type="color"] { width: 50px; height: 32px; border: 2px solid var(--panel-border); border-radius: 6px; cursor: pointer; background: transparent; flex-shrink: 0; } .wd-alpha-input-group { display: flex; flex-direction: column; gap: 8px; } .wd-alpha-controls { display: flex; align-items: center; gap: 12px; } .wd-alpha-input-group input[type="range"] { flex: 1; height: 4px; background: var(--g2-color); border-radius: 2px; outline: none; cursor: pointer; } .wd-alpha-input-group input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .alpha-value { min-width: 60px; max-width: 60px; font-size: 0.9rem; font-weight: 600; color: var(--fg-color); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wd-color-hex input[type="text"] { flex: 1; padding: 8px 12px; border: 2px solid var(--panel-border); border-radius: 6px; background: var(--glass-2); color: var(--fg-color); font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 0.85rem; transition: border-color 140ms ease; } .wd-color-hex input[type="text"]:focus { outline: none; border-color: var(--accent); background: var(--glass-1); } .wd-color-hex input[type="text"]::placeholder { color: var(--fg-color); opacity: 0.4; font-size: 0.8rem; } .wd-alpha-color-actions { display: flex; gap: 12px; justify-content: flex-end; } .wd-alpha-cancel, .wd-alpha-apply { padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--fg-color) 12%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--g2-color) 70%, transparent); color: var(--fg-color); font-size: 0.94rem; font-weight: 500; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; min-height: 40px; } .wd-alpha-cancel:hover { background: color-mix(in srgb, var(--accent2) 10%, transparent); border-color: var(--accent); } .wd-alpha-apply { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--fg-color); font-weight: 600; } .wd-alpha-apply:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); border-color: var(--accent); } .wd-alpha-apply:active { transform: scale(0.98); } /* Responsive */ @media (max-width: 480px) { .wd-alpha-color-controls { flex-direction: column; gap: 16px; } .wd-color-preview { align-self: center; } .wd-alpha-color-content { padding: 20px; } /* Stack label content vertically on very small screens for better fit */ .wd-color-input-group label, .wd-alpha-input-group label, .wd-color-hex label { flex-direction: column; align-items: stretch; border-radius: 14px; } .wd-alpha-controls { align-self: stretch; } .alpha-value { align-self: flex-end; } } /* Dialog backdrop */ dialog::backdrop { transition: opacity .22s ease; } input[name=rename], input[name=paste_name] { width: 100%; max-width: 100%; box-sizing: border-box; } /* ── Dev connect panel (wd-dialog inside .table-wrap) ── */ .table-wrap.connect-mode .wd-toolbar { display: none; } .table-wrap.connect-mode .list-container[hidden] { display: none !important; } .table-wrap.connect-mode .wd-selection-rect { display: none !important; } .connect-slot { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box; } .connect-slot[hidden] { display: none !important; } .connect-slot dialog.wd-connect-dialog { position: static; transform: none; opacity: 1; width: min(480px, 100%); min-width: 0; max-width: min(480px, 100%); max-height: min(88vh, 720px); padding: 0; margin: 0; border: none; border-radius: 16px; overflow: visible; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: auto; } .connect-slot dialog.wd-connect-dialog[open] { transform: none; opacity: 1; } .connect-slot dialog.wd-connect-dialog::backdrop { display: none; } .connect-dialog-card { width: min(480px, 100%); max-height: min(88vh, 720px); margin: 0; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--panel-border) 80%, transparent); background: var(--glass-1); box-shadow: 0 24px 64px color-mix(in srgb, #000 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--panel-border) 45%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .connect-dialog-card .connect-field { display: block; margin-bottom: 14px; } .connect-dialog-card .connect-field > span { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 500; color: var(--fg-color); } .connect-dialog-card .connect-field input { width: 100%; box-sizing: border-box; } .connect-password-wrap { position: relative; display: block; } .connect-password-wrap input { padding-right: 44px; } .connect-password-toggle { position: absolute; right: 4px; top: 8px; width: 34px; height: 34px; padding: 0; border-radius: 8px; opacity: .55; transition: opacity .15s ease, background .15s ease, color .15s ease; } .connect-password-toggle:hover { opacity: 1; background: color-mix(in srgb, var(--fg-color) 8%, transparent); } .connect-password-toggle[aria-pressed="true"] { opacity: 1; color: var(--accent); } .connect-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 7.5rem; } .connect-submit.connect-busy { opacity: .85; pointer-events: none; } .connect-submit-spinner { display: none; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; animation: connect-submit-spin 0.65s linear infinite; } .connect-submit-spinner:not([hidden]) { display: inline-block; } .connect-submit-spinner[hidden] { display: none !important; } @keyframes connect-submit-spin { to { transform: rotate(360deg); } } .connect-desc { margin: 0 0 14px; color: var(--g3-color); font-size: .92rem; line-height: 1.45; } .connect-dev-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: .82rem; line-height: 1.4; color: var(--fg-color); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .connect-field { margin-bottom: 14px; } .connect-field label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 500; color: var(--fg-color); } .connect-field input { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--g2-color); color: var(--fg-color); font: inherit; } .connect-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .connect-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, red 10%, transparent); border: 1px solid color-mix(in srgb, red 28%, transparent); } .connect-error-title { display: block; margin-bottom: 4px; font-size: .92rem; } .connect-error-detail, .connect-error-hint { margin: 4px 0 0; font-size: .82rem; line-height: 1.4; color: color-mix(in srgb, var(--fg-color) 82%, transparent); } .connect-error-hint { color: var(--g3-color); } .connect-actions { margin-top: 18px; } .connect-actions .dlg-btn { width: 100%; min-height: 44px; } /* === topbar.css === */ /* Top bar with hamburger menu */ .wd-topbar, .wd-settings-header { background: var(--topbar-bg, var(--g1-color)); } .wd-topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; border-bottom: 1px solid var(--g2-color); display: flex; align-items: center; padding: 0 10px; gap: 16px; z-index: 1090; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0px 0px 4px 1px color-mix(in srgb, black 28%, transparent); } .wd-topbar .hamburger { width: 50px; height: 50px; border: none; background: transparent; color: var(--fg-color); font-size: 0; cursor: pointer; border-radius: 12px; transition: background 140ms ease, box-shadow 140ms ease; display: flex; align-items: center; justify-content: center; position: relative; } .wd-topbar .hamburger:hover { background: color-mix(in srgb, var(--accent2) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); } .wd-topbar .hamburger-inner, .wd-topbar .hamburger-inner::before, .wd-topbar .hamburger-inner::after { display: block; width: 22px; height: 3px; background: currentColor; border-radius: 2px; position: absolute; transition: transform 220ms ease, opacity 220ms ease; } .wd-topbar .hamburger-inner { position: relative; } .wd-topbar .hamburger-inner::before, .wd-topbar .hamburger-inner::after { content: ''; position: absolute; left: 0; } .wd-topbar .hamburger-inner::before { top: -7px; } .wd-topbar .hamburger-inner::after { top: 7px; } .wd-topbar .hamburger.is-open .hamburger-inner { transform: rotate(45deg); } .wd-topbar .hamburger.is-open .hamburger-inner::before { opacity: 0; } .wd-topbar .hamburger.is-open .hamburger-inner::after { transform: rotate(-90deg) translate(7px, 0); } .wd-topbar .hamburger:focus { outline: none; } .topbar-title { flex: 1; min-width: 0; } .topbar-title h1 { margin: 0; font-size: 1.25rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; padding-bottom: 2px; } .topbar-title .subtitle { font-size: 0.8rem; font-weight: 400; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .topbar-actions .lang_switch, .topbar-actions .theme_mode, .topbar-actions .topbar-user-btn { width: 40px; height: 40px; border: none; background: transparent; color: var(--fg-color); cursor: pointer; border-radius: 8px; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; padding: 0; flex: none; } .topbar-user-btn[hidden] { display: none !important; } .topbar-actions .lang_switch:hover, .topbar-actions .theme_mode:hover, .topbar-actions .topbar-user-btn:hover, .topbar-actions .topbar-user-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent2) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); } /* Adjust body to account for topbar */ body { padding-top: 56px; } /* Selection mode: highlight topbar */ body.wd-selection-mode .wd-topbar { background: color-mix(in srgb, var(--accent) 10%, var(--g1-color)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } /* === header.css === */ :root { --wd-header-subtitle-size: clamp(.85rem, 1.3vw + .4rem, 1rem); } .wd-header { position: sticky; top: 56px; z-index: 100; background: var(--g1-color); border-bottom: 1px solid var(--g2-color); padding: 8px 16px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; } /* Selection mode: gently emphasize header */ body.wd-selection-mode .wd-header { background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .wd-header .subtitle { display: block; margin: 0; font-size: var(--wd-header-subtitle-size); color: var(--g3-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Theme toggle button */ .wd-header .theme_mode { appearance: none; border: 1px solid var(--g2-color); background-color: transparent; color: var(--fg-color); border-radius: var(--radius); padding: .4em .6em; min-height: 36px; cursor: pointer; transition: background-color 160ms ease, transform 120ms ease, border-color 160ms ease; } .wd-header .theme_mode:hover { background-color: color-mix(in srgb, var(--fg-color) 6%, transparent); } .wd-header .theme_mode:active { transform: scale(0.96); } .wd-header .theme_mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wd-header .lang_switch { appearance: none; border: 1px solid var(--g2-color); background-color: transparent; color: var(--fg-color); border-radius: var(--radius); padding: .2em .5em; min-height: 32px; cursor: pointer; font-size: 1.1rem; margin-right: .4rem; transition: background-color 160ms ease, transform 120ms ease, border-color 160ms ease; } .wd-header .lang_switch:hover { background-color: color-mix(in srgb, var(--accent2) 6%, transparent); border-color: var(--accent); } .wd-header .lang_switch:active { transform: scale(0.96); } .wd-header .lang_switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* === sidebar.css === */ /* Sidebar layout and transitions */ :root { --sd-width-icons: 72px; --sd-width-expanded: 280px; --sd-width-min: 200px; --sd-width-max: 400px; --sd-backdrop: color-mix(in srgb, var(--accent2) 35%, transparent); } .wd-shell { display: flex; min-height: calc(100vh - 56px); width: 100%; } .wd-content { flex: 1; min-width: 0; padding: 8px 16px 24px; box-sizing: border-box; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 96%, transparent) 0%, color-mix(in srgb, var(--bg-color) 100%, transparent) 100%); } .wd-sidebar { position: fixed; top: 56px; left: 0; height: calc(100vh - 86px); width: var(--sd-width-icons); background: var(--sidebar-bg, var(--g1-color)); color: var(--fg-color); border-right: 1px solid var(--g2-color); transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1); padding: 16px 0; overflow-x: hidden; overflow-y: hidden; flex-shrink: 0; display: flex; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); flex-direction: column; } @media screen and (min-width: 801px) { .wd-content { margin-left: var(--sd-width-icons); transition: margin-left 240ms cubic-bezier(0.4, 0, 0.2, 1); } body.sidebar-expanded .wd-content { margin-left: calc(var(--sd-width-expanded) + 22px); } .wd-content { position: relative; z-index: 1; } } /* Resize handle for desktop sidebar - only visible when expanded */ .sd-resize-handle { display: none; position: absolute; right: 0; top: 0; width: 8px; height: 100%; opacity: 0.6; background: transparent; cursor: ew-resize; z-index: 1001; transition: background 140ms ease; } .sd-resize-handle:hover, .sd-resize-handle:active { background: var(--accent); } @media screen and (min-width: 801px) { body.sidebar-expanded .sd-resize-handle { display: block; } } .sidebar-open .wd-sidebar, body.sidebar-pinned .wd-sidebar { transform: translateX(0); } .sd-backdrop { position: fixed; inset: 0; opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 999; } /* Mobile: show backdrop when sidebar opens */ @media screen and (max-width: 800px) { .sidebar-open .sd-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background: rgba(0, 0, 0, 0.35); opacity: 1; pointer-events: auto; } } /* Desktop: no backdrop needed */ @media screen and (min-width: 801px) { .sd-backdrop { display: none; } /* Disable CSS transition during resize for better performance */ body.resizing .wd-sidebar { transition: none; } body.resizing .wd-content { transition: none; } } .sd-nav { display: block; padding: 0; overflow-y: auto; overflow-x: hidden; flex: 1; } .sd-nav-section { padding: 8px 8px 4px; } .sd-nav-hidden { display: none !important; } .sd-nav-sep { height: 1px; margin: 6px 0px; background: color-mix(in srgb, var(--fg-color) 20%, transparent); } .sd-nav-external { padding-bottom: 6px; } .sd-servers-list { list-style: none; margin: 0; padding: 0; margin-bottom: 6px !important; } .sd-servers-empty { padding: 10px 12px; font-size: .82rem; color: var(--g3-color); line-height: 1.4; text-align: start; text-wrap-mode: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-server-row { display: flex; align-items: center; gap: 2px; margin-bottom: 3px !important; border-radius: 10px; transition: background .12s ease; min-height: 52px; border: 1px solid transparent; } .sd-server-row:hover { background: color-mix(in srgb, var(--fg-color) 4%, transparent); } .sd-server-drag { flex: none; display: flex; align-items: center; justify-content: center; width: 0px; height: 36px; margin-left: 2px; border: none; border-radius: 6px; background: transparent; color: var(--g3-color); cursor: grab; touch-action: none; opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease; } .sd-server-row:hover .sd-server-drag, .sd-servers-dragging .sd-server-drag { opacity: .55; } .sd-server-row:hover .sd-server-drag { width: 22px; opacity: 1 !important; color: var(--fg-color); background: color-mix(in srgb, var(--fg-color) 8%, transparent); } .sd-server-drag:active { cursor: grabbing; } .sd-nav .sd-server-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; transition: background .15s ease, border-color .15s ease; } .sd-server-row:has(.sd-server-item.active) { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .sd-server-item.active .sd-server-label { font-weight: 600; } .sd-server-actions { display: flex; align-items: center; gap: 2px; flex: none; padding-right: 4px; } button.sd-server-menu.preview-header-btn { flex: none; width: 40px; height: 40px; margin-right: 4px; padding: 0 !important; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; opacity: .65; transition: opacity .15s ease, background .15s ease; } .sd-server-row:hover .sd-server-menu, .sd-server-row:focus-within .sd-server-menu { opacity: 1; } .sd-server-menu:hover { background: color-mix(in srgb, var(--accent2) 10%, transparent); } .sd-nav .sd-nav-tree.active { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); font-weight: 600; } /* Server switch pending (like listing nav-pending) */ .sd-nav.sd-nav-pending { pointer-events: none; user-select: none; } .sd-nav.sd-nav-pending .nav-target { pointer-events: auto; } .sd-nav.sd-nav-pending .sd-server-row, .sd-nav.sd-nav-pending .sd-nav-builtin button { opacity: 0.42; transition: opacity 0.15s ease; } .sd-nav.sd-nav-pending .sd-server-row.nav-target, .sd-nav.sd-nav-pending .sd-nav-tree.nav-target { opacity: 1; } .sd-server-icon.nav-loading { color: var(--accent); container-type: size; } .sd-server-icon.nav-loading::before, .sd-nav button.nav-loading[data-icon]::before { -webkit-mask: none; mask: none; width: 16px; height: 16px; border-radius: 50%; background: transparent; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); animation: sd-nav-spin 0.65s linear infinite; } @keyframes sd-nav-spin { to { transform: rotate(360deg); } } .sd-server-actions .sd-server-action { width: 40px; height: 40px; padding: 0 !important; justify-content: center !important; opacity: .7; } .sd-server-action:hover { opacity: 1; } .sd-server-row.sd-server-floating { position: fixed; z-index: 500; pointer-events: none; margin: 0; background: var(--panel-bg, var(--g1-color)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--panel-border)); box-shadow: 0 8px 28px color-mix(in srgb, #000 22%, transparent); } .sd-server-placeholder { height: 44px; margin: 0 4px 3px 28px; border-radius: 10px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); list-style: none; } .sd-servers-dragging .sd-server-row:not(.sd-server-floating) { transition: transform .12s ease; } .sd-server-icon { flex: none; opacity: .85; } .sd-server-item.active .sd-server-icon { opacity: 1; } .sd-server-row.sd-server-wdavfs .sd-server-icon { color: var(--accent-color, #3b82f6); } .sd-server-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sd-server-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 500; } .sd-server-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--g3-color); } @media screen and (min-width: 800px) { .wd-sidebar:not(.sidebar-expanded) .sd-server-drag, .wd-sidebar:not(.sidebar-expanded) .sd-server-actions, .wd-sidebar:not(.sidebar-expanded) .sd-server-host, .wd-sidebar:not(.sidebar-expanded) .sd-server-text, .wd-sidebar:not(.sidebar-expanded) .sd-servers-empty, .wd-sidebar:not(.sidebar-expanded) .sd-server-menu, .wd-sidebar:not(.sidebar-expanded) .sd-nav-add-btn span { display: none !important; } } .sd-nav-add-btn { width: calc(100% - 8px); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--panel-border)); background: color-mix(in srgb, var(--accent) 6%, transparent); color: inherit; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 500; } .sd-nav-add-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .sd-nav-add-btn[data-icon]::before { width: 16px; height: 16px; } .wd-sidebar:not(.sidebar-expanded) .sd-nav-add-btn { font-size: 0; padding: 0; width: 44px; height: 44px; justify-content: center; } .wd-sidebar:not(.sidebar-expanded) .sd-server-row { flex-direction: row; align-items: center; width: 48px; } .wd-sidebar:not(.sidebar-expanded) .sd-server-item { width: 44px; height: 44px; padding: 0; justify-content: center; } @media (hover: none) { .sd-server-drag, .sd-server-actions { opacity: 1; } } .sd-nav ul { list-style: none; margin: 0; padding: 0; } .sd-nav li { margin: 0; } .sd-nav ul:empty { display: none; } /* Mobile navigation improvements */ @media screen and (max-width: 800px) { .wd-sidebar:not(.sidebar-expanded) .sd-server-item { justify-content: start; } .sd-nav button { font-size: 1rem; padding: 14px 16px; min-height: 48px; gap: 12px; } .sd-nav button[data-icon]::before { width: 20px; height: 20px; } .sd-nav li { margin-bottom: 2px; } } .sd-nav button { font-size: 0.95rem; width: 100%; height: 50px; text-align: left; background-color: transparent; border: 1px solid transparent; border-radius: 8px; padding: 16px 20px; color: inherit; cursor: pointer; transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 140ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease; white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 14px; justify-content: flex-start; } .sd-nav button[data-icon]::before { content: ''; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; flex-shrink: 0; } .sd-server-row:hover, .sd-nav button:hover { background-color: color-mix(in srgb, var(--accent2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); } :root[data-theme="dark"] .sd-nav button:hover, :root[data-theme="dark"] .sd-server-row:hover { background-color: color-mix(in srgb, var(--accent2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); } .sd-nav button:active { transform: scale(0.98); } .sd-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Icon-only mode: hide text, center icons */ .wd-sidebar:not(.sidebar-expanded) .sd-nav h3 { opacity: 0; height: 0; margin: 0; overflow: hidden; } .wd-sidebar:not(.sidebar-expanded) .sd-nav button { display: flex; align-items: center; justify-content: center; gap: 0; width: 50px; height: 50px; } .wd-sidebar:not(.sidebar-expanded) .sd-nav button .sd-server-icon { width: 18px; height: 18px; } /* Only hide text on desktop, not mobile */ @media screen and (min-width: 801px) { .wd-sidebar:not(.sidebar-expanded) .sd-nav button { text-indent: -9999px; } } /* Mobile: show text and adjust button layout */ @media screen and (max-width: 800px) { .wd-sidebar:not(.sidebar-expanded) .sd-nav button { width: auto; gap: 12px; padding: 12px 16px; margin-left: 0; font-size: 1rem; min-height: 48px; min-width: 48px; border-radius: 8px; } .wd-sidebar:not(.sidebar-expanded) .sd-nav button[data-icon]::before { width: 20px; height: 20px; } .wd-sidebar:not(.sidebar-expanded) .sd-nav li { margin-bottom: 4px; width: -webkit-fill-available; } } .wd-sidebar:not(.sidebar-expanded) .sd-nav button[data-icon]::before { position: static; transform: none; } .sd-tree-header { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 18%, var(--g2-color)) } .sd-tree-header h3 { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; } .sd-tree-back { margin-right: 0px; margin-left: 4px; } .sd-tree-back, .sd-tree-refresh { width: 32px; height: 32px; border: none; background: transparent; color: var(--fg-color); cursor: pointer; border-radius: 6px; margin-right: 4px; flex-shrink: 0; transition: background 140ms ease; } .sd-tree-back:before, .sd-tree-refresh::before { content: ''; display: block; width: 18px; height: 18px; margin: 0 auto; background-color: currentColor; -webkit-mask: var(--icon-src) center / contain no-repeat; mask: var(--icon-src) center / contain no-repeat; } .sd-tree-back:hover, .sd-tree-refresh:hover { background: color-mix(in srgb, var(--accent2) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 25%, transparent); } .sd-tree-refresh:disabled { opacity: 0.5; cursor: default; } /* Sidebar expanded state */ body.sidebar-expanded .wd-sidebar { width: var(--sd-width-expanded); } body.sidebar-expanded .wd-sidebar .sd-nav button { text-indent: 0; padding-left: 12px; } /* Tree container replaces menu when visible */ .sd-tree-container { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--g2-color); } .wd-sidebar:not(.sidebar-expanded) .sd-tree-container { display: none !important; } /* When tree is visible, hide menu */ .wd-sidebar.showing-tree .sd-nav { display: none; } .wd-sidebar.showing-tree .sd-tree-container { display: flex !important; flex-direction: column; margin-top: 0; padding-top: 0; border-top: none; overflow: hidden; flex: 1; height: 100%; } .wd-sidebar.showing-tree .sd-tree-header { flex-shrink: 0; } .wd-sidebar.showing-tree .wd-tree-list { flex: 1; overflow-y: auto; overflow-x: auto; min-width: 0; width: 100%; height: 100%; } /* Mobile: overlay mode */ @media screen and (max-width: 800px) { .sd-server-drag { width: 18px; } .wd-shell { display: block; } .wd-sidebar { position: fixed; z-index: 1000; top: 56px; left: 0; height: calc(100vh - 86px); width: 80%; max-width: 320px; padding: 16px 0; transform: translateX(-100%); transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); } body.sidebar-open .wd-sidebar { transform: translateX(0); } .wd-content { padding: 8px 0px 24px; margin-left: 0; } } /* Keep icons visible on focus */ /* Desktop icon-only: center icons */ @media screen and (min-width: 801px) { .wd-sidebar:not(.sidebar-pinned) .sd-nav button[data-icon]::before { left: 50%; } } /* Username display removed — see topbar user menu */ /* Icon mappings centralized in icons.css */ /* Optional pinned mode (any screen) */ body.sidebar-pinned .sd-backdrop { display: none; } /* === toolbar.css === */ /* Pinned header and toolbar; light/dark aware via existing CSS vars */ :root { --hd-h: 64px; --tb-h: 48px; } .wd-header { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--hd-h); background: color-mix(in srgb, var(--bg-color) 52%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--g2-color); padding: 8px 12px; transition: background 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease; } .wd-header .hamburger { background: transparent; border: 0; font-size: 20px; cursor: pointer; color: var(--fg-color); transition: transform 120ms ease, opacity 160ms ease; } .wd-header .hamburger:hover { opacity: .8; } .wd-header .hamburger:active { transform: scale(0.96); } .wd-header .hd-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin-left: 6px; margin-right: auto; } .wd-header .hd-left h1 { font-size: 1.05rem; margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wd-header .subtitle { display: block; margin-top: 2px; transition: opacity 180ms ease; font-weight: 100; } .wd-header .hd-right { display: inline-flex; gap: 8px; align-items: center; } .wd-header .theme_mode { transition: filter 160ms ease, transform 120ms ease; } .wd-header .theme_mode:hover { filter: brightness(1.05); } .wd-header .theme_mode:active { transform: translateY(1px); } .wd-toolbar { position: relative; overflow: hidden; display: flex; gap: 8px; align-items: center; min-height: var(--tb-h); background: var(--toolbar-bg, var(--g1-color)); border: 1px solid var(--g2-color); border-radius: 8px; margin: 8px 6px 6px; box-shadow: 0 1px 3px color-mix(in srgb, var(--accent2) 8%, transparent); justify-content: center; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .wd-toolbar:hover { box-shadow: 0 2px 6px color-mix(in srgb, var(--accent2) 12%, transparent); border-color: color-mix(in srgb, var(--fg-color) 20%, transparent); } /* Elevate the toolbar when its context menu is open */ .wd-toolbar.menu-active { position: relative; z-index: 950; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent2) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } /* New toolbar layout */ .wd-toolbar { padding: 6px 8px; } .wd-toolbar .tb-left, .wd-toolbar .tb-right { display: flex; align-items: center; gap: 8px; } .wd-toolbar .tb-left { justify-content: flex-start; flex: 1 1 auto; min-width: 0; } .wd-toolbar .tb-right { justify-content: flex-end; flex: 0 0 auto; } .wd-toolbar button { appearance: none; height: 36px; min-width: 32px; min-height: 32px; border: 1px solid color-mix(in srgb, var(--fg-color) 18%, var(--g2-color)); background: color-mix(in srgb, var(--g1-color) 96%, transparent); color: var(--fg-color); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 160ms ease, box-shadow 180ms ease, transform 120ms ease, border-color 160ms ease; } .wd-toolbar button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent2) 8%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 15%, transparent); } .wd-toolbar button:active { transform: scale(0.96); } .sel-more.sel-more-highlight { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); } .wd-toolbar .tb-path { flex: 1 1 auto; min-width: 0; appearance: none; border: 1px dashed var(--g2-color); background: color-mix(in srgb, var(--g1-color) 96%, transparent); color: var(--fg-color); border-radius: 8px; padding: 0 10px; height: 36px; line-height: 34px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; -moz-user-select: none; -ms-user-select: none; user-select: none; justify-content: start; } .wd-toolbar .tb-path:hover { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 20%, transparent); border-color: var(--accent); background: color-mix(in srgb, var(--accent2) 6%, transparent); } @media (max-width: 640px) { .wd-toolbar .tb-path { max-width: 52vw; } } .wd-toolbar .tb-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-evenly; width: -webkit-fill-available; } .wd-toolbar .tb-actions .download_all:hover { filter: brightness(1.05); } .wd-toolbar .tb-actions input[type="button"], .wd-toolbar .tb-actions .btn, .wd-toolbar .tb-actions select { transition: background-color 160ms ease, color 160ms ease, box-shadow 180ms ease, transform 120ms ease; } .wd-toolbar .tb-actions input[type="button"]:active, .wd-toolbar .tb-actions .btn:active { transform: translateY(1px); } /* Toolbar icons: unified mask-based system */ .wd-toolbar .tb-actions [data-icon], .wd-toolbar .tb-btn[data-icon], .wd-toolbar .tb-actions .btn[data-icon], .wd-toolbar .tb-actions select.sortorder[data-icon] { position: relative; } .wd-toolbar .tb-btn[data-icon]:not(.tb-path) { padding: 0; width: 36px; } .wd-toolbar-select .tb-btn[data-icon] { padding: 0; width: 36px; } .wd-toolbar-search .tb-btn[data-icon] { padding: 0; width: 36px; } .wd-toolbar .tb-actions [data-icon]::before, .wd-toolbar .tb-btn[data-icon]::before, .wd-toolbar-select .tb-btn[data-icon]::before, .wd-toolbar-search .tb-btn[data-icon]::before, .wd-toolbar .tb-actions .btn[data-icon]::before, .wd-toolbar .tb-actions select.sortorder[data-icon]::before { content: ''; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; pointer-events: none; } .wd-toolbar .tb-btn[data-icon]:not(.tb-path)::before { position: static; transform: none; } .wd-toolbar-select .tb-btn[data-icon]::before { position: static; transform: none; } .wd-toolbar-search .tb-btn[data-icon]::before { position: static; transform: none; } .wd-toolbar .tb-actions [data-icon]:not(.tb-btn)::before, .wd-toolbar .tb-actions .btn[data-icon]::before, .wd-toolbar .tb-actions select.sortorder[data-icon]::before { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } /* Sort select styling: icon + label on wide screens */ .wd-toolbar .tb-actions .sortorder { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Icon mappings moved to icons.css */ /* Subtle tints for specific actions using accent colors */ .wd-toolbar .tb-actions .uploadfile { background-color: color-mix(in srgb, var(--accent2) 12%, transparent); border-color: color-mix(in srgb, var(--accent2) 28%, var(--g2-color)); } .wd-toolbar .tb-actions .download_all { background-color: color-mix(in srgb, var(--accent2) 12%, transparent); border-color: color-mix(in srgb, var(--accent2) 28%, var(--g2-color)); } .wd-toolbar .tb-actions .uploadfile:hover, .wd-toolbar .tb-actions .download_all:hover { background-color: color-mix(in srgb, var(--accent2) 18%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent2) 24%, transparent); border-color: var(--accent); } .wd-toolbar .tb-actions .uploadfile:active, .wd-toolbar .tb-actions .download_all:active { transform: translateY(1px); } /* Dark theme: increase contrast of tinted buttons */ :root[data-theme="dark"] .wd-toolbar .tb-actions .uploadfile, :root[data-theme="dark"] .wd-toolbar .tb-actions .download_all { background-color: color-mix(in srgb, var(--accent2) 20%, transparent); border-color: color-mix(in srgb, var(--accent2) 40%, var(--g2-color)); } :root[data-theme="dark"] .wd-toolbar .tb-actions .uploadfile:hover, :root[data-theme="dark"] .wd-toolbar .tb-actions .download_all:hover { background-color: color-mix(in srgb, var(--accent2) 28%, transparent); } /* Hover/active elevation for toolbar buttons */ .wd-toolbar .tb-actions input[type="button"]:hover, .wd-toolbar .tb-actions .btn:hover, .wd-toolbar .tb-actions select:hover { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 15%, transparent); background-color: color-mix(in srgb, var(--accent2) 6%, transparent); border-color: var(--accent); } :root[data-theme="dark"] .wd-toolbar .tb-actions input[type="button"]:hover, :root[data-theme="dark"] .wd-toolbar .tb-actions .btn:hover, :root[data-theme="dark"] .wd-toolbar .tb-actions select:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 75%, transparent); background-color: color-mix(in srgb, var(--accent2) 12%, transparent); border-color: var(--accent); } /* Keep icons visible on focus */ .wd-toolbar .tb-actions input[type="button"]:focus-visible, .wd-toolbar .tb-actions .btn:focus-visible, .wd-toolbar .tb-actions select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; background-color: color-mix(in srgb, var(--fg-color) 5%, transparent); } /* Icon-only tooltips (shown when toolbar has .icon-only) */ .wd-toolbar.icon-only .tb-actions [data-tip] { position: relative; } .wd-toolbar.icon-only .tb-actions [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 6px; color: var(--fg-color); background: color-mix(in srgb, var(--bg-color) 96%, transparent); border: 2px solid var(--panel-border); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent2) 12%, transparent); opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; z-index: 1200; } .wd-toolbar.icon-only .tb-actions [data-tip]:hover::after, .wd-toolbar.icon-only .tb-actions [data-tip]:focus-visible::after, .wd-toolbar.show-tooltips .tb-actions [data-tip]::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Adjust sticky offsets when sidebar is pinned */ body.sidebar-pinned .wd-header { left: 0; } body.sidebar-pinned .wd-toolbar { left: 0; } /* Content spacing under pinned bars */ main .table-wrap > table { margin-top: 6px; width: 100%; } /* Table area container */ .table-wrap { padding: 0 4px 12px; min-height: 88vh; display: flex; flex-direction: column; } .table-wrap.connect-mode { min-height: calc(100vh - var(--topbar-height, 57px) - 12px); } /* Subtitle wraps and remains visible on mobile */ .wd-header .subtitle { white-space: normal; word-break: break-word; color: var(--fg-color); } @media (max-width: 640px) { :root { --hd-h: 56px; --tb-h: 44px; } .wd-toolbar { margin: 6px 8px; } .wd-toolbar .tb-actions { gap: 6px; } .wd-header .hd-left { width: -webkit-fill-available; margin-left: 0; } /* Icon-only mode on narrow screens */ .wd-toolbar .tb-actions [data-icon] { text-indent: -9999px; width: 36px; height: 36px; padding: 0; border-radius: 8px; } .wd-toolbar .tb-actions .sortorder[data-icon] { text-indent: -9999px; width: 36px; height: 36px; padding: 0; border-radius: 8px; } } /* === listing.css === */ /* Listing views: grid (cards) + div-based list */ .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Extra bottom padding so marquee selection can start even with few items */ padding: 8px 10px 32px; gap: 6px; } /* Selection toolbar lives inside main toolbar; fades in when active */ .wd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; transition: background-color 160ms ease, box-shadow 180ms ease, transform 160ms ease; min-height: 42px; box-shadow: 0px 0px 4px 1px color-mix(in srgb, black 28%, transparent); } .wd-toolbar-select { display: none; align-items: center; justify-content: space-between; gap: .75rem; opacity: 0; transform: translateY(2px); transition: opacity 160ms ease, transform 160ms ease; width: -webkit-fill-available; flex: 1 1 auto; min-width: 0; } .wd-toolbar-select .sel-actions, .wd-toolbar-select .sel-end { display: inline-flex; align-items: center; gap: 6px; } .wd-toolbar-select .sel-end { margin-left: auto; } .wd-toolbar-select .tb-btn[data-icon] { width: 36px; padding: 0; } .wd-toolbar-search .tb-btn[data-icon] { width: 36px; padding: 0; flex: 0 0 auto; } .wd-toolbar.selection-active .wd-toolbar-select .sel-more{ margin-left: auto; } .wd-toolbar.selection-active .wd-toolbar-select { display: inline-flex; opacity: 1; transform: translateY(0); } .wd-toolbar.selection-active .tb-left, .wd-toolbar.selection-active .tb-right, .wd-toolbar.selection-active .tb-actions { opacity: 0; pointer-events: none; } /* Search toolbar */ .wd-toolbar.search-active .tb-left, .wd-toolbar.search-active .tb-right { display: none !important; } .wd-toolbar.search-active:not(.selection-active) .wd-toolbar-select { display: none !important; } .wd-toolbar.search-active.selection-active .wd-toolbar-search { display: none !important; } .wd-toolbar.search-active.selection-active .wd-toolbar-select { display: flex !important; } .wd-toolbar-search { display: none; position: relative; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; opacity: 0; transform: translateY(2px); transition: opacity 160ms ease, transform 160ms ease; } .wd-toolbar.search-active .wd-toolbar-search { display: flex; opacity: 1; transform: translateY(0); } .wd-toolbar-search > .tb-btn[data-icon] { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; } .wd-toolbar-search .search-input-wrap { flex: 1 1 0; min-width: 0; height: 36px; display: grid; grid-template-columns: 1fr; grid-template-rows: 36px; align-items: center; } .wd-toolbar-search .search-input { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; height: 36px; padding: 0 34px 0 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--g2-color)); background: color-mix(in srgb, var(--g1-color) 92%, transparent); color: var(--fg-color); font-size: 0.95rem; outline: none; box-sizing: border-box; transition: border-color 160ms ease, box-shadow 180ms ease; } .wd-toolbar-search .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .wd-toolbar-search .search-input::placeholder { color: color-mix(in srgb, var(--fg-color) 45%, transparent); } .wd-toolbar-search .search-clear { grid-column: 1; grid-row: 1; justify-self: end; align-self: center; width: 28px; height: 28px; margin-right: 4px; padding: 0; transform: none; flex: none; z-index: 1; opacity: 0.72; border: none; } .wd-toolbar-search .search-clear[hidden] { display: none !important; } .wd-toolbar-search .search-clear:hover { opacity: 1; } .wd-toolbar-search .search-clear:active { transform: none; } .wd-toolbar-search .search-scope.is-global { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .wd-toolbar-search.is-searching .search-stop:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); animation: searchStopPulse 1.4s ease-in-out infinite; } .wd-toolbar-search .search-stop:disabled { opacity: 0.38; cursor: default; animation: none; box-shadow: none; pointer-events: none; } .wd-toolbar-search .search-progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none; } .wd-toolbar-search .search-input-wrap.is-searching .search-input { background-image: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--accent) 12%, transparent) 50%, transparent 100% ); background-size: 200% 100%; animation: searchInputShimmer 1.6s ease-in-out infinite; } .wd-toolbar-search .search-progress-bar span { display: block; width: 38%; height: 100%; background: var(--accent); border-radius: 2px; animation: searchProgressSlide 1.1s ease-in-out infinite; } @keyframes searchInputShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes searchStopPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } } @keyframes searchProgressSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } .list-container.search-active { animation: searchResultsFade 200ms ease; } .search-results.is-reveal .file-card, .search-results.is-reveal .file-row { animation: searchItemIn 220ms ease backwards; } .search-results.is-reveal .file-card:nth-child(1), .search-results.is-reveal .file-row:nth-child(1) { animation-delay: 0ms; } .search-results.is-reveal .file-card:nth-child(2), .search-results.is-reveal .file-row:nth-child(2) { animation-delay: 24ms; } .search-results.is-reveal .file-card:nth-child(3), .search-results.is-reveal .file-row:nth-child(3) { animation-delay: 48ms; } .search-results.is-reveal .file-card:nth-child(4), .search-results.is-reveal .file-row:nth-child(4) { animation-delay: 72ms; } .search-results.is-reveal .file-card:nth-child(5), .search-results.is-reveal .file-row:nth-child(5) { animation-delay: 96ms; } .search-results.is-reveal .file-card:nth-child(n+6), .search-results.is-reveal .file-row:nth-child(n+6) { animation-delay: 120ms; } @keyframes searchResultsFade { from { opacity: 0.55; } to { opacity: 1; } } @keyframes searchItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes searchSpinner { to { transform: rotate(360deg); } } .search-empty-loading::after { content: ''; display: block; width: 28px; height: 28px; margin: 16px auto 0; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: searchSpinner 0.75s linear infinite; } .search-hint { margin-top: 10px; font-size: 0.82rem; color: color-mix(in srgb, var(--fg-color) 48%, transparent); } .search-empty { grid-column: 1 / -1; padding: 48px 24px; text-align: center; color: color-mix(in srgb, var(--fg-color) 62%, transparent); font-size: 0.95rem; } .file-list.search-results .search-empty { width: 100%; } /* When dragging a selection rectangle, prevent accidental text selection */ body.wd-selection-drag { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Drag-rectangle (marquee) selection overlay */ .wd-selection-rect { position: fixed; pointer-events: none; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 18%, transparent); z-index: 920; } .file-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid transparent; border-radius: 10px; transition: box-shadow 180ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; overflow: hidden; background: color-mix(in srgb, var(--g1-color) calc(var(--card-opacity, 38) * 1%), transparent); border: 1px solid color-mix(in srgb, var(--fg-color) 14%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .file-card:hover { transform: scale(1.02); border-color: var(--accent); background: color-mix(in srgb, var(--accent2) 8%, transparent); } /* Selected state for grid cards */ .file-card.selected { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--g1-color) 94%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); } .file-card.selected .item-menu { display: none; } .wd-selection-mode .file-card > *{ pointer-events: none; } /* Accent glow effect for file cards */ .file-card::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 80%; height: 14px; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent2) 45%, transparent) 0%, transparent 72%); opacity: 0; filter: blur(10px); transition: opacity 160ms ease; } .file-card:hover::after { opacity: 0.6; } .file-card:active { transform: scale(0.98); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 6%, transparent); } .file-card .thumb { display: flex; align-items: center; justify-content: center; height: 72px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .file-card .thumb .icon { overflow: auto; display: inline-flex; width: 76px; height: 56px; align-items: center; justify-content: center; border-radius: 12px; font-weight: 800; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; transform: none; /* no rotation in grid */ border: 2px solid var(--panel-border); background: var(--g3-color); color: var(--bg-color); -webkit-mask: none; mask: none; } /* Text label inside file icons: rotate slightly for a playful look (non-dir types only) */ .file-card .thumb .icon b, .file-row .thumb .icon b { font-weight: normal; display: inline-block; transform: rotate(-30deg); filter: contrast(100%) brightness(150%); } .file-card .name { width: -webkit-fill-available; -webkit-align-self: center; align-self: anchor-center; font-weight: 300; line-height: 1.2; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Bottom-center indigo glow .file-card:hover .name { color: black; background: var(--accent-2); border-radius: 6px; transition: color 0.3s, background 0.3s; transition-timing-function: linear; } */ .file-card .meta { font-size: .7rem; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .file-card .card-link { color: inherit; text-decoration: none; display: contents; } .file-card .item-menu { opacity: 0; position: absolute; top: 8px; right: 8px; appearance: none; border: 1px solid var(--g2-color); background: color-mix(in srgb, var(--g1-color) 95%, #ffffff); color: var(--fg-color); border-radius: 8px; width: 28px; height: 28px; line-height: 26px; text-align: center; cursor: pointer; transition: background 160ms ease, box-shadow 180ms ease, transform 120ms ease; } .file-card:hover .item-menu { opacity: 1; } .file-card .item-menu:hover { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 15%, transparent); border-color: var(--accent); } .file-card .item-menu:active { transform: translateY(1px); } /* Elevate the active item when menu is open (overlays sit at z-index: 900) */ .file-card.menu-active, .file-row.menu-active { position: relative; z-index: 950; } /* Inline dropdown menu */ .inline-menu { z-index: 3000; min-width: 180px; border: 1px solid color-mix(in srgb, var(--fg-color) 42%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--bg-color) 98%, transparent); box-shadow: 8px 8px 14px 4px color-mix(in srgb, black 24%, transparent); overflow: hidden; transform-origin: top left; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity 180ms ease, transform 180ms ease; } .inline-menu.open { opacity: 1; transform: translateY(0) scale(1); } .inline-menu.closing { opacity: 0; transform: translateY(-4px) scale(.98); } .inline-menu ul { list-style: none; padding: 6px 0; margin: 0; } .inline-menu li { position: relative; padding: 4px 12px 4px 36px; cursor: pointer; transition: background 140ms ease; min-height: 36px; align-content: center; text-align: start; } .inline-menu li { border-left: 2px solid transparent; } .inline-menu li:hover { background-color: color-mix(in srgb, var(--accent2) 8%, transparent); border-left: 2px solid var(--accent); } .inline-menu li:focus-visible { background-color: color-mix(in srgb, var(--accent2) 11%, transparent); outline: none; border-left: 2px solid var(--accent); } /* Menu separator for grouped sections */ .inline-menu li.menu-separator { height: 1px; min-height: 1px; padding: 0; margin: 4px 0; background: var(--g2-color); cursor: default; pointer-events: none; } .inline-menu li.menu-separator:hover { background: var(--g2-color); } .inline-menu li.menu-separator + li { border-top: none; } /* Menu toolbar with icon buttons */ .inline-menu li.menu-toolbar { padding: 8px; border-top: none; min-height: auto; } .menu-toolbar-inner { display: flex; gap: 4px; justify-content: space-around; } .menu-toolbar-btn { width: 40px; height: 40px; border: none; background: transparent; color: var(--fg-color); border-radius: 8px; cursor: pointer; position: relative; transition: background 140ms ease, transform 100ms ease; } .menu-toolbar-btn:hover { background: color-mix(in srgb, var(--accent2) 15%, transparent); border-color: var(--accent2); transform: scale(1.05); } .menu-toolbar-btn:active { transform: scale(0.95); } .menu-toolbar-btn[data-icon]::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; } /* Inline menu: render icon via data-icon on li */ .inline-menu li[data-icon] { padding-left: 36px; } .inline-menu li[data-icon]::before { content: ''; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; } .inline-menu li[data-icon].has-sub { --chevron: url("data:image/svg+xml;utf8,"); padding-right: 28px; } .inline-menu li[data-icon].has-sub::after { content: ''; position: absolute; opacity: .6; right: 10px; top: 50%; width: 18px; height: 18px; background-color: currentColor; transform: translateY(-50%); -webkit-mask: var(--chevron) no-repeat center / contain; mask: var(--chevron) no-repeat center / contain; } /* Inline emoji/text icon (for flags, etc.) in toolbar menus */ .inline-menu .inline-icon { display: inline-block; text-align: center; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); } /* Selected item indicator (checkmark) for submenus */ .inline-menu.submenu li.selected::after { content: ''; position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background-color: currentColor; -webkit-mask: var(--check-src) no-repeat center / contain; mask: var(--check-src) no-repeat center / contain; } /* Disabled state */ .inline-menu li.disabled { opacity: .5; pointer-events: none; } .menu-toolbar-btn.disabled { opacity: .45; pointer-events: none; cursor: default; } /* Safety for very small screens */ .inline-menu { max-height: calc(100vh - 16px); overflow: auto; } /* Dark theme: stronger hover and separators for clarity */ :root[data-theme="dark"] .inline-menu li:hover { background-color: color-mix(in srgb, var(--accent2) 16%, transparent); } :root[data-theme="dark"] .inline-menu li:focus-visible { background-color: color-mix(in srgb, var(--accent2) 20%, transparent); } .inline-menu.user-menu { min-width: 220px; border-radius: 12px; box-shadow: 0 16px 40px color-mix(in srgb, #000 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--panel-border) 70%, transparent); } .inline-menu.user-menu li.user-menu-header { font-weight: 600; font-size: .92rem; padding: 12px 16px 8px; color: var(--fg-color); opacity: 1; pointer-events: none; border-left: none !important; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .inline-menu.user-menu li.user-menu-header:hover, .inline-menu.user-menu li.user-menu-header:focus-visible { background: transparent !important; border-left-color: transparent !important; } .inline-menu.user-menu li.menu-separator { margin: 4px 10px; } .inline-menu .menu-toolbar:hover, .inline-menu .menu-toolbar:focus-visible { background-color: transparent !important; } /* Div-based list view */ .file-list { display: grid; grid-auto-rows: minmax(52px, auto); gap: 8px; padding: 6px 6px 10px; } .file-row { position: relative; display: grid; grid-template-columns: 44px 1fr 44px; /* thumb, center (title/meta), actions */ align-items: center; gap: 8px; padding: 10px 8px; border: 1px solid color-mix(in srgb, var(--fg-color) 10%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--g1-color) calc(var(--card-opacity, 38) * 1%), transparent); transition: background-color 160ms ease, box-shadow 180ms ease, transform 160ms ease, border-color 160ms ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } .file-row:hover { background: color-mix(in srgb, var(--accent2) 8%, transparent); border-color: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 15%, transparent); } /* Selected state for list rows */ .file-row.selected { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--g1-color) 96%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); } /* Accent glow effect for file rows */ .file-row::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 85%; height: 10px; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent2) 40%, transparent) 0%, transparent 70%); opacity: 0; filter: blur(8px); transition: opacity 160ms ease; } .file-row:hover::after { opacity: 0.4; } .file-row:active { transform: scale(0.995); } .file-row .thumb { display: flex; justify-content: center; align-items: center; } .file-row .thumb { width: 44px; } .file-row .thumb .icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; font-weight: 700; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; line-height: 1; transform: none; /* do not rotate text icons in list */ border: 2px solid var(--panel-border); background: var(--g3-color); color: var(--bg-color); -webkit-mask: none; mask: none; } /* Directory icons: unified SVG masks */ .file-card .thumb .icon.dir, .file-row .thumb .icon.dir, .file-card .thumb .icon.dir-back, .file-row .thumb .icon.dir-back { position: relative; background: color-mix(in srgb, var(--accent) 44%, var(--g3-color)); } .file-card .thumb .icon.dir::before, .file-row .thumb .icon.dir::before, .file-card .thumb .icon.dir-back::before, .file-row .thumb .icon.dir-back::before { content: ''; position: absolute; left: 50%; top: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; } .file-card .thumb .icon.dir b, .file-row .thumb .icon.dir b { display: none; } /* Inline folder navigation pending state */ .list-container.nav-pending .file-list, .list-container.nav-pending .file-grid { pointer-events: none; user-select: none; transition: opacity 0.15s ease; } .list-container.nav-pending .file-row.nav-target, .list-container.nav-pending .file-card.nav-target { opacity: 1; } .wd-tree-item.nav-target > .wd-tree-item-btn { opacity: 1; } .list-container.nav-pending .file-row, .list-container.nav-pending .file-card { opacity: 0.42; } .file-row .thumb .icon.nav-loading, .file-card .thumb .icon.nav-loading { color: var(--accent); container-type: size; } .file-row .thumb .icon.nav-loading::before, .file-card .thumb .icon.nav-loading::before { -webkit-mask: none; mask: none; width: 50cqh; height: 50cqh; border-radius: 50%; background: transparent; border: 4px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; animation: wd-nav-spin 0.65s linear infinite; } @keyframes wd-nav-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Per-type background colors, applied to both list and grid icons */ .file-card .thumb .icon.JPEG, .file-card .thumb .icon.PNG, .file-card .thumb .icon.JPG, .file-card .thumb .icon.GIF, .file-card .thumb .icon.SVG, .file-card .thumb .icon.WEBP, .file-row .thumb .icon.JPEG, .file-row .thumb .icon.PNG, .file-row .thumb .icon.JPG, .file-row .thumb .icon.GIF, .file-row .thumb .icon.SVG, .file-row .thumb .icon.WEBP { background: color-mix(in srgb, var(--g3-color) 15%, #996666); } .file-card .thumb .icon.TXT, .file-card .thumb .icon.MD, .file-row .thumb .icon.TXT, .file-row .thumb .icon.MD { background: var(--fg-color); color: var(--bg-color); } .file-card .thumb .icon.MP4, .file-card .thumb .icon.MKV, .file-card .thumb .icon.MP3, .file-card .thumb .icon.M4A, .file-card .thumb .icon.WAV, .file-card .thumb .icon.FLAC, .file-card .thumb .icon.OGG, .file-card .thumb .icon.OGV, .file-card .thumb .icon.AAC, .file-card .thumb .icon.WEBM, .file-row .thumb .icon.MP4, .file-row .thumb .icon.MKV, .file-row .thumb .icon.MP3, .file-row .thumb .icon.M4A, .file-row .thumb .icon.WAV, .file-row .thumb .icon.FLAC, .file-row .thumb .icon.OGG, .file-row .thumb .icon.OGV, .file-row .thumb .icon.AAC, .file-row .thumb .icon.WEBM { background: color-mix(in srgb, var(--g3-color) 15%, #669); color: var(--bg-color); } .file-card .thumb .icon.document, .file-row .thumb .icon.document { background: #696; color: var(--bg-color); } .file-card .thumb .icon.PDF, .file-row .thumb .icon.PDF { background: #969; color: var(--bg-color); } .file-row .center { display: grid; grid-template-rows: auto auto; gap: 2px; overflow: hidden; padding-inline: 0.5rem; } .file-row .center .title { font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .file-row .center .meta { font-size: .9rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; max-width: 100%; } .meta-changed { color: var(--accent-color, #e8a317); font-weight: 500; } .file-row .center .title a { text-decoration: none; color: inherit; display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-row .actions { display: flex; justify-content: center; } .file-row .item-menu { appearance: none; border: 1px solid var(--g2-color); background: color-mix(in srgb, var(--g1-color) 38%, transparent); color: var(--fg-color); border-radius: 8px; width: 28px; height: 28px; line-height: 26px; text-align: center; cursor: pointer; transition: background-color 160ms ease, box-shadow 180ms ease, transform 120ms ease; } .file-row:hover .item-menu { border-color: color-mix(in srgb, var(--fg-color) 40%, transparent); background: color-mix(in srgb, var(--g1-color) 90%, white); } /* .file .thumb .icon b { color: inherit; filter: invert(1) contrast(9); } */ @media (max-width: 800px) { .file-row { grid-template-columns: 36px 1fr 44px; grid-template-areas: 'thumb name actions' 'thumb meta actions'; row-gap: 4px; } .file-row .thumb { width: 36px; } .file-row .thumb .icon { width: 44px; height: 44px; } } /* Grid icon sizing/position for mid screens */ @media (min-width: 500px) and (max-width: 800px) { .file-card .thumb { height: 68px; } .file-card .thumb .icon { width: 69px; height: 52px; font-size: 14px; } } /* no keyframes: using transitions for open/close */ /* Responsive */ @media (max-width: 640px) { .file-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .file-card { padding: 10px; } .file-card .thumb { height: 64px; } .file-card .thumb .icon { width: 64px; height: 48px; border-radius: 10px; } .inline-menu li { min-height: 44px; padding-top: 0px; padding-bottom: 0px; } /* Always show item-menu button on mobile */ .file-card .item-menu { opacity: 1; } .file-row .item-menu { opacity: 1; } } /* === drag-transfer.css === */ /* Drag-and-drop move/copy — premium UI */ /* Floating drop target ring (above listing chrome) */ .wd-drop-ring { position: fixed; z-index: 1280; pointer-events: none; border-radius: 12px; display: none; box-sizing: border-box; transition: top 0.08s ease, left 0.08s ease, width 0.08s ease, height 0.08s ease; } .wd-drop-ring-active { border: 2px solid var(--accent-color, #3b82f6); background: color-mix(in srgb, var(--accent-color, #3b82f6) 16%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color, #3b82f6) 22%, transparent), inset 0 0 24px color-mix(in srgb, var(--accent-color, #3b82f6) 12%, transparent); animation: wd-drop-ring-pulse 1s ease-in-out infinite; } .wd-drop-ring-invalid { border: 2px dashed #e53935; background: color-mix(in srgb, #e53935 10%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, #e53935 18%, transparent); } @keyframes wd-drop-ring-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color, #3b82f6) 18%, transparent), inset 0 0 20px color-mix(in srgb, var(--accent-color, #3b82f6) 10%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-color, #3b82f6) 30%, transparent), inset 0 0 28px color-mix(in srgb, var(--accent-color, #3b82f6) 16%, transparent); } } body.wd-file-drag { cursor: grabbing; user-select: none; } body.wd-file-drag .file-row, body.wd-file-drag .file-card, body.wd-file-drag .wd-tree-item-btn { cursor: grabbing; } body.wd-file-drag .wd-draggable { cursor: grab; } .wd-drag-source { opacity: 0.35; transform: scale(0.98); transition: opacity 0.15s ease, transform 0.15s ease; } /* Native drag image (fallback) */ .wd-drag-ghost { position: fixed; left: -9999px; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--g1-color) 94%, transparent); border: 1px solid color-mix(in srgb, var(--accent-color, #3b82f6) 70%, transparent); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); font-size: 0.88rem; max-width: 260px; pointer-events: none; } .wd-drag-ghost-multi { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 5px 5px 0 -1px color-mix(in srgb, var(--g1-color) 90%, transparent), 5px 5px 0 0 var(--accent-color, #3b82f6); } .wd-drag-ghost-stack { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent-color, #3b82f6); color: #fff; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); z-index: 2; } .wd-drag-ghost-icon { width: 22px; height: 22px; flex: none; } .wd-drag-ghost-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } /* Cursor-following float stack */ .wd-drag-float { position: fixed; left: 0; top: 0; z-index: 1300; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; transform: translate(-999px, -999px); transition: transform 0.04s linear; filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.28)); } .wd-drag-float-stack { position: relative; width: 52px; height: 58px; } .wd-drag-float-card { position: absolute; width: 44px; height: 52px; border-radius: 10px; background: color-mix(in srgb, var(--g1-color) 96%, transparent); border: 1px solid color-mix(in srgb, var(--accent-color, #3b82f6) 45%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); } .wd-drag-float-card-2 { top: 8px; left: 10px; transform: rotate(7deg); opacity: 0.55; } .wd-drag-float-card-1 { top: 4px; left: 5px; transform: rotate(3deg); opacity: 0.78; } .wd-drag-float-card-0 { top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient( 145deg, color-mix(in srgb, var(--g1-color) 98%, white), color-mix(in srgb, var(--accent-color, #3b82f6) 12%, var(--g1-color)) ); } .wd-drag-float-card-0 .icon { width: 22px; height: 22px; } .wd-drag-float-badge { position: absolute; top: -6px; right: -10px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent-color, #3b82f6); color: #fff; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .wd-drag-float-label { max-width: 200px; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--bg-color) 88%, transparent); border: 1px solid color-mix(in srgb, var(--fg-color) 12%, transparent); font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px); } /* Drop hint chip */ .wd-drop-hint { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(12px); z-index: 1290; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--g1-color) 94%, transparent); border: 1px solid color-mix(in srgb, var(--accent-color, #3b82f6) 55%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.32, .72, 0, 1); } .wd-drop-hint-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .wd-drop-hint-invalid { border-color: color-mix(in srgb, #e11 60%, transparent); background: color-mix(in srgb, #e11 8%, var(--g1-color)); } .wd-drop-hint-icon { width: 22px; height: 22px; flex: none; } .wd-drop-hint-text { font-size: 0.92rem; font-weight: 600; white-space: nowrap; max-width: min(72vw, 420px); overflow: hidden; text-overflow: ellipsis; } /* Candidate zones while dragging */ body.wd-file-drag .file-row.dir.wd-drop-zone-ready, body.wd-file-drag .file-card.dir.wd-drop-zone-ready, body.wd-file-drag .wd-tree-item-btn.wd-drop-zone-ready { outline: 2px dashed color-mix(in srgb, var(--accent-color, #3b82f6) 55%, transparent); outline-offset: 2px; border-radius: 10px; background: color-mix(in srgb, var(--accent-color, #3b82f6) 6%, transparent); } body.wd-file-drag .file-row.dir.wd-drop-zone-blocked, body.wd-file-drag .file-card.dir.wd-drop-zone-blocked, body.wd-file-drag .wd-tree-item-btn.wd-drop-zone-blocked { opacity: 0.55; } /* Active hover target */ .file-row.wd-drop-target, .file-card.wd-drop-target, .wd-tree-item-btn.wd-drop-target { outline: none; position: relative; z-index: 2; } .file-row.wd-drop-active, .file-card.wd-drop-active, .wd-tree-item-btn.wd-drop-active { background: color-mix(in srgb, var(--accent-color, #3b82f6) 14%, transparent) !important; box-shadow: inset 0 0 0 2px var(--accent-color, #3b82f6), 0 0 0 4px color-mix(in srgb, var(--accent-color, #3b82f6) 18%, transparent); border-radius: 10px; animation: wd-drop-pulse 1.1s ease-in-out infinite; } .file-row.wd-drop-invalid, .file-card.wd-drop-invalid, .wd-tree-item-btn.wd-drop-invalid { background: color-mix(in srgb, #e11 10%, transparent) !important; box-shadow: inset 0 0 0 2px #e11; border-radius: 10px; cursor: not-allowed; } @keyframes wd-drop-pulse { 0%, 100% { box-shadow: inset 0 0 0 2px var(--accent-color, #3b82f6), 0 0 0 4px color-mix(in srgb, var(--accent-color, #3b82f6) 14%, transparent); } 50% { box-shadow: inset 0 0 0 2px var(--accent-color, #3b82f6), 0 0 0 7px color-mix(in srgb, var(--accent-color, #3b82f6) 26%, transparent); } } body.wd-file-drag .wd-tree-item-btn.wd-drop-active .wd-tree-item-name::after, body.wd-file-drag .file-row.dir.wd-drop-active .name::after, body.wd-file-drag .file-row.dir.wd-drop-active .center .title a::after, body.wd-file-drag .file-card.dir.wd-drop-active .name::after { content: ' ↓'; opacity: 0.9; font-weight: 700; color: var(--accent-color, #3b82f6); } /* Transfer confirmation sheet */ dialog.transfer-sheet { z-index: 1250; } .transfer-sheet-shell { background: var(--glass-1, var(--g1-color)); border-radius: 16px 16px 0 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-height: 0; } .transfer-sheet-header .move-sheet-header-actions { min-width: 44px; } .transfer-sheet-header .move-sheet-title { font-size: 1.05rem; } .transfer-sheet-subtitle { opacity: 0.75; } .transfer-sheet-dest { display: flex; align-items: center; gap: 12px; margin: 0 16px 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent-color, #3b82f6) 10%, var(--g1-color)); border: 1px solid color-mix(in srgb, var(--accent-color, #3b82f6) 22%, transparent); } .transfer-sheet-dest-icon { flex: none; width: 28px; height: 28px; } .transfer-sheet-dest-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .transfer-sheet-dest-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; } .transfer-sheet-dest-name { font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transfer-sheet-dest-path { font-size: 0.78rem; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transfer-sheet-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 16px 12px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--fg-color) 6%, transparent); } .transfer-sheet-mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: none; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; } .transfer-sheet-mode-btn .icon { width: 18px; height: 18px; } .transfer-sheet-mode-btn.is-active { background: var(--g1-color); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color, #3b82f6) 18%, transparent); color: var(--accent-color, #3b82f6); } .transfer-sheet-mode-btn:disabled { opacity: 0.4; cursor: not-allowed; } .transfer-sheet-list-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--fg-color) 10%, transparent); overflow: hidden; } .transfer-sheet-list-head { padding: 8px 12px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 8%, transparent); } .transfer-sheet-list { list-style: none; margin: 0; padding: 0; overflow: auto; max-height: min(36vh, 280px); } .transfer-sheet-item { border-bottom: 1px solid color-mix(in srgb, var(--fg-color) 6%, transparent); transition: opacity 0.15s ease, background 0.15s ease; } .transfer-sheet-item:last-child { border-bottom: none; } .transfer-sheet-item.is-excluded { opacity: 0.42; } .transfer-sheet-item.is-excluded .transfer-sheet-item-name { text-decoration: line-through; } .transfer-sheet-item-label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; } .transfer-sheet-check { width: 18px; height: 18px; flex: none; accent-color: var(--accent-color, #3b82f6); } .transfer-sheet-item-icon { width: 22px; height: 22px; flex: none; } .transfer-sheet-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .transfer-sheet-item-issue { flex: none; max-width: 42%; font-size: 0.72rem; color: #e11; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transfer-sheet-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in srgb, var(--fg-color) 10%, transparent); } .transfer-sheet-footer .dlg-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } /* === menu.css === */ .upload { margin: 1em 0; } /* responsive: menu layout on narrow screens */ @media screen and (max-width: 800px) { .upload { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } } /* === editor.css === */ /* Markdown split view and preview dialog */ #mdp div, #mdp textarea { width: calc(100% - 1em); padding: .5em; font-size: 1em; height: calc(100% - 1em); text-align: left; margin: 0; } #md { overflow: hidden; overflow-x: auto; } #mdp { display: grid; grid-template-columns: 1fr 1fr; grid-gap: .2em; background: var(--g1-color); height: 77vh; } dialog.edit { height: auto; } /* Preview bottom sheet */ dialog.preview.preview-sheet { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; min-width: 0; max-width: none; min-height: 280px; max-height: 92vh; padding: 0; margin: 0; border-radius: 14px 14px 0 0; border: none; overflow: hidden; transform: translateY(100%); opacity: 1; z-index: 1200; transition: transform .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1), border-radius .24s ease; will-change: transform; } dialog.preview.preview-sheet:not(.preview-fullscreen) { height: var(--preview-sheet-height, min(52vh, 560px)); } dialog.preview.preview-sheet.preview-fs-animating { transition: transform .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1), border-radius .24s ease; will-change: transform, height, border-radius; } dialog.preview.preview-sheet[open].preview-sheet-visible { transform: translateY(0); } dialog.preview.preview-sheet.preview-sheet-closing { transform: translateY(100%); pointer-events: none; } dialog.preview.preview-fullscreen { left: 0; right: 0; bottom: 0; height: 100dvh; max-height: 100dvh; border-radius: 0; } dialog.preview.preview-resizing { transition: transform .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1), border-radius .24s ease; } dialog.preview > .close { display: none; } dialog.preview form { height: 100%; display: flex; flex-direction: column; padding: 0; overflow: hidden; } dialog.preview form > div { width: 100%; height: 100%; margin: 0; display: block; text-align: left; position: relative; } .preview-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--glass-1); position: relative; } .preview-resize-handle { flex-shrink: 0; height: 10px; cursor: ns-resize; position: relative; touch-action: none; } .preview-resize-handle::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--fg-color) 28%, transparent); } dialog.preview.preview-fullscreen .preview-resize-handle { display: none; } .preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--panel-border); background: color-mix(in srgb, var(--g1-color) 92%, transparent); flex-shrink: 0; } .preview-header-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .preview-filename { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .preview-header-btn, .preview-toolbar-btn { appearance: none; border: 1px solid transparent; background: transparent; color: var(--fg-color); border-radius: 8px; padding: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease, transform .12s ease; } .preview-header-btn:hover, .preview-toolbar-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); } .preview-header-btn:active, .preview-toolbar-btn:active { transform: scale(.96); } .preview-header-btn.active, .preview-toolbar-btn.active { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .preview-header-btn[hidden] { display: none !important; } .preview-header-btn:disabled { opacity: .35; cursor: default; pointer-events: none; } .preview-body { display: grid; grid-template-columns: minmax(0, var(--preview-pane-width, 58%)) 8px minmax(220px, 1fr); flex: 1; min-height: 0; overflow: hidden; } .preview-shell.preview-sidebar-hidden .preview-sidebar, .preview-shell.preview-sidebar-hidden .preview-col-resize { display: none; } .preview-shell.preview-sidebar-hidden .preview-body { grid-template-columns: 1fr; } .preview-pane-wrap { min-width: 0; min-height: 0; overflow: hidden; display: flex; } .preview-col-resize { cursor: col-resize; background: transparent; position: relative; touch-action: none; } .preview-col-resize::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background: color-mix(in srgb, var(--fg-color) 10%, transparent); transition: background-color .15s ease, width .15s ease; } .preview-col-resize:hover::before, .preview-col-resize:active::before { width: 4px; background: color-mix(in srgb, var(--accent) 55%, transparent); } .preview-pane { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: conic-gradient(color-mix(in srgb, var(--g2-color) 70%, #ccc) 25%, color-mix(in srgb, var(--g2-color) 55%, #ddd) 0 50%, color-mix(in srgb, var(--g2-color) 70%, #ccc) 0 75%, color-mix(in srgb, var(--g2-color) 55%, #ddd) 0) 0 0/16px 16px; border-right: none; transition: opacity .18s ease, transform .18s ease; } .preview-pane.is-switching, .preview-sidebar.is-switching { opacity: 0; transform: translateY(6px); } .preview-mobile-nav { display: none; } .preview-sidebar { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: color-mix(in srgb, var(--g1-color) 96%, transparent); transition: opacity .18s ease, transform .18s ease; } .preview-meta { margin: 0; padding: 14px 16px 8px; overflow: auto; flex: 1; min-height: 0; } .preview-meta-row { display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px; padding: 7px 0; border-bottom: 1px dashed color-mix(in srgb, var(--fg-color) 8%, transparent); } .preview-meta-row:last-child { border-bottom: none; } .preview-meta dt { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; font-weight: 600; justify-self: start; text-align: start; align-content: center; } .preview-meta dd { margin: 0; font-size: .92rem; word-break: break-word; line-height: 1.4; justify-self: start; text-align: start; margin-left: 2em; } .preview-meta-path dd a { color: var(--link-color); text-decoration: none; } .preview-meta-path dd a:hover { text-decoration: underline; } .preview-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--panel-border); background: color-mix(in srgb, var(--g2-color) 35%, transparent); } .preview-toolbar-btn { width: 42px; height: 42px; background: var(--glass-2); border-color: var(--panel-border); } /* Preview content */ .preview-file-placeholder { width: 100%; height: 100%; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; box-sizing: border-box; text-align: center; background: color-mix(in srgb, var(--g1-color) 92%, transparent); } .preview-file-placeholder .preview-file-icon { opacity: .55; } .preview-file-placeholder .preview-file-name { margin: 0; max-width: 100%; font-size: .95rem; font-weight: 500; word-break: break-word; color: var(--fg-color); opacity: .85; } .img_preview { width: 100%; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; } .img_preview img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 6px; box-shadow: 0 2px 12px color-mix(in srgb, #000 12%, transparent); } .img_preview svg { max-width: 100%; max-height: 100%; display: block; } .media_preview { width: 100%; padding: 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .media_preview audio, .media_preview video { max-width: 100%; max-height: 100%; } .code_preview { width: 100%; height: 100%; overflow: auto; background: #0b1020; color: #e6e6e6; padding: 12px 14px; box-sizing: border-box; text-align: left; } .code_preview pre { margin: 0; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre; } .code_preview .json-punc { color: #7f95b0; } .code_preview .json-null { color: #c586c0; } .code_preview .json-key { color: #9cdcfe; } .code_preview .json-str { color: #ce9178; } .code_preview .json-num { color: #b5cea8; } .code_preview .json-bool { color: #dcdcaa; } .preview-pane .preview-iframe, .preview-pane iframe.preview-iframe, .preview-pane .preview-html-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: #fff; } .preview-pane .preview-html-frame { position: relative; inset: auto; align-self: stretch; min-height: 100%; } .preview-pane.preview-pane-code { align-items: stretch; justify-content: stretch; overflow: hidden; padding: 0; } .preview-pane .preview-code-host, .editor-host { flex: 1; min-height: 0; width: 100%; overflow: hidden; display: flex; flex-direction: column; text-align: left; align-self: stretch; } .preview-code-host.httpfs-editor-root, .editor-host.httpfs-editor-root { height: 100%; } .preview-pane .preview-code-host .cm-editor, .editor-host .cm-editor { flex: 1 1 auto; display: flex !important; flex-direction: column; width: 100% !important; max-width: 100%; min-height: 0; height: 100%; } .preview-pane .preview-code-host .cm-scroller, .editor-host .cm-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 14px; line-height: 1.5; } .preview-pane .preview-code-host .cm-content, .preview-pane .preview-code-host .cm-line, .editor-host .cm-content, .editor-host .cm-line { text-align: left; } .preview-pane .preview-code-host .cm-gutters, .editor-host .cm-gutters { flex-shrink: 0; } .preview-pane .preview-code-host .cm-gutter.cm-lineNumbers, .editor-host .cm-gutter.cm-lineNumbers { min-width: 3ch; } .editor-preview-output.editor-preview-code { overflow: hidden; display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0; } .preview-pane .md_preview { position: relative; inset: auto; width: 100%; height: 100%; align-self: stretch; box-sizing: border-box; padding: 16px 20px; text-align: left; overflow: auto; background: var(--g1-color); color: var(--fg-color); } .preview-pane .preview-fallback-pre, .editor-preview-output .preview-fallback-pre { margin: 0; padding: 16px 20px; box-sizing: border-box; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; word-break: break-word; text-align: left; overflow: auto; height: 100%; } .preview-pane.preview-pane-content { align-items: stretch; justify-content: stretch; background: var(--g1-color); } .preview-pane.preview-pane-code { background: #0b1020; } .preview-pane.preview-pane-loading .preview-loading-skeleton { flex: 1; align-self: stretch; width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; } .preview-loading-skeleton { position: relative; overflow: hidden; } .preview-loading-label { font-size: .88rem; opacity: .55; letter-spacing: .02em; } .preview-pane.preview-pane-code .preview-loading-label { color: #aab4c8; } .preview-loading-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 60% ); transform: translateX(-100%); animation: preview-shimmer 1.2s ease-in-out infinite; pointer-events: none; } .preview-pane.preview-pane-code .preview-loading-skeleton::after { background: linear-gradient( 105deg, transparent 40%, color-mix(in srgb, #fff 6%, transparent) 50%, transparent 60% ); } @keyframes preview-shimmer { to { transform: translateX(100%); } } .preview-loading, .preview-error { font-size: .95rem; text-align: center; width: -webkit-fill-available; height: -webkit-fill-available; background: color-mix(in srgb, var(--g1-color) 92%, transparent); align-content: center; margin: 0; color: color-mix(in srgb, var(--fg-color) 75%, transparent); } /* Text editor sheet */ dialog.preview.preview-editor-sheet { z-index: 1100; position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; min-height: 0; margin: 0; padding: 0; border: none; border-radius: 0; transform: none; opacity: 1; overflow: hidden; text-align: left; display: flex; flex-direction: column; box-sizing: border-box; } dialog.preview.preview-editor-sheet form, dialog.preview.preview-editor-sheet form > div, dialog.preview.preview-editor-sheet .preview-shell-wrap, dialog.preview.preview-editor-sheet .preview-shell.editor-shell { display: flex; flex-direction: column; flex: 1; height: 100%; min-height: 0; text-align: left; align-items: stretch; justify-content: flex-start; } .preview-shell.editor-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; } .editor-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .editor-pane { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .editor-pane[hidden] { display: none !important; } .editor-preview-output { flex: 1; min-height: 0; width: 100%; overflow: auto; background: var(--g1-color); color: var(--fg-color); } .editor-preview-output.md_preview { padding: 16px 20px; box-sizing: border-box; } .editor-preview-output.editor-preview-html { overflow: hidden; display: flex; flex-direction: column; padding: 0; } .editor-html-frame { flex: 1; width: 100%; min-height: 0; border: none; background: #fff; } .editor-toggle-btn.active { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .editor-save-btn { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } /* Legacy full-screen preview fallback (WOPI, markdown) */ dialog.preview:not(.preview-sheet) { height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; padding: 0; border-radius: 0; background: var(--g1-color); overflow: hidden; } dialog.preview:not(.preview-sheet) > .close { display: block; } iframe, .md_preview { overflow: auto; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: none; } iframe, iframe body, .md_preview { background-color: #fff; color: #000; } dialog.preview:not(.preview-sheet) form { height: calc(100% - 2em); display: flex; align-items: center; justify-content: center; } dialog.preview:not(.preview-sheet) form > div { width: 100vw; height: 100%; position: relative; margin: 0; display: flex; align-items: center; justify-content: center; } dialog.preview:not(.preview-sheet) div video { max-width: 100%; max-height: 100%; } .md_preview { width: calc(100vw - 2em); height: -webkit-fill-available; padding: 1em; text-align: left; } dialog.preview:not(.preview-sheet) .close { letter-spacing: 0.6rem; text-transform: uppercase; height: 2em; text-align: center; font-size: 1em; display: block; width: 100%; margin: 0; padding: 0; border-radius: 0; background: var(--g2-color); color: var(--fg-color); box-shadow: 0px 0px 5px var(--g2-color); } dialog.preview:not(.preview-sheet) img { max-width: 95%; max-height: 95%; } @media (max-width: 820px) { dialog.preview.preview-sheet:not(.preview-fullscreen) { height: min(85vh, 820px); } .preview-body { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 42vh) minmax(0, 1fr); grid-template-areas: "pane" "sidebar"; } .preview-pane-wrap { grid-area: pane; } .preview-sidebar { grid-area: sidebar; } .preview-col-resize { display: none; } .preview-shell:not(.preview-sidebar-hidden) .preview-body { grid-template-columns: 1fr; } .preview-shell.preview-sidebar-hidden .preview-body { grid-template-rows: 1fr; grid-template-areas: "pane"; } .preview-pane { border-right: none; border-bottom: 1px solid var(--panel-border); min-height: 140px; } .preview-sidebar { min-height: 0; } .preview-meta { padding: 10px 12px 6px; } .preview-meta-row { grid-template-columns: 72px 1fr; padding: 5px 0; } .preview-toolbar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .preview-header { padding: 8px 10px; } .preview-toolbar-btn { width: 38px; height: 38px; } } @media screen and (max-width: 800px) { dialog.preview.preview-sheet { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; } } /* === wopi.css === */ /* WOPI-specific styles (uses generic preview styles from editor.css) */ #wopi_frame { width: 100%; height: 100%; border: none; } /* === tree.css === */ /* Tree view panel (like HTTP FS) */ .wd-tree-panel { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: var(--g1-color); border-right: 1px solid var(--g2-color); box-shadow: 2px 0 8px color-mix(in srgb, var(--accent2) 8%, transparent); transform: translateX(-100%); transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), left 240ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; overflow-x: auto; overflow-y: auto; padding: 12px 0; } body.tree-view-open .wd-tree-panel { transform: translateX(0); } /* Desktop: position tree panel next to icon sidebar */ @media screen and (min-width: 801px) { .wd-tree-panel { left: var(--sd-width-icons); } body.sidebar-pinned .wd-tree-panel { left: var(--sd-width); } } .wd-tree-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--g2-color); margin-bottom: 2px; gap: 4px; flex-shrink: 0; } .wd-tree-header h3 { margin: 0; font-size: 0.9rem; font-weight: 600; flex: 1; } .wd-tree-back { background: transparent; border: 0; font-size: 18px; cursor: pointer; color: var(--fg-color); padding: 4px 8px; border-radius: 4px; transition: background 160ms ease; display: none; } .wd-tree-back:hover { background: color-mix(in srgb, var(--accent2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 20%, transparent); } /* Show back button on mobile */ @media screen and (max-width: 800px) { .wd-tree-back { display: block; } } .wd-tree-close { background: transparent; border: 0; font-size: 20px; cursor: pointer; color: var(--fg-color); padding: 4px 8px; border-radius: 4px; transition: background 160ms ease; } .wd-tree-close:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } .wd-tree-list { list-style: none; margin: 0; padding: 0; font-size: 13px; font-family: system-ui, -apple-system, sans-serif; width: max-content; min-width: 100%; } .wd-tree-list span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .wd-tree-item { position: relative; margin: 0; padding: 0; cursor: pointer; width: fit-content; height: fit-content; } .wd-tree-item span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transform: scaleY(1.1); } .wd-tree-item-btn { width: 100%; text-align: left; background: transparent; border: 0; color: var(--fg-color); cursor: pointer; display: flex; align-items: center; gap: 0; font-size: 13px; transition: all 0.15s ease; position: relative; min-height: 28px; line-height: 1.2; font-family: system-ui, -apple-system, sans-serif; white-space: nowrap; border-left: 2px solid transparent; } .wd-tree-item-btn:hover { filter: opacity(1); background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 6%, transparent) 0%, transparent 100%); color: var(--accent); font-weight: bold; border-left: 2px solid var(--accent); } :root .wd-tree-item-btn:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 8%, transparent) 0%, transparent 100%); } [data-theme="dark"] .wd-tree-item-btn:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 10%, transparent) 0%, transparent 100%); box-shadow: inset 2px 0 0 var(--accent); } .wd-tree-item-btn.active { filter: opacity(1); font-weight: 600; background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 10%, transparent) 0%, transparent 100%); box-shadow: inset 2px 0 0 var(--accent); color: var(--accent); } :root .wd-tree-item-btn.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 12%, transparent) 0%, transparent 100%); } [data-theme="dark"] .wd-tree-item-btn.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 15%, transparent) 0%, transparent 100%); box-shadow: inset 3px 0 0 var(--accent); } .wd-tree-item-btn:active { transform: scale(0.98); } .wd-tree-item-icon { height: 18px; width: 18px; flex: none; flex-shrink: 0; z-index: 10; position: relative; margin-left: 4px; transform: scaleY(1) !important; } .wd-tree-item-icon::before { content: ''; display: block; width: 17px; height: 17px; background-color: var(--accent); -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; } .wd-tree-item-icon[data-icon="folder-empty"]::before, .wd-tree-item-icon[data-icon="folder-empty-open"]::before { background-color: color-mix(in srgb, var(--fg-color) 48%, var(--accent)); opacity: 0.92; } .wd-tree-item-icon[data-icon="folder-open"]::before { background-color: color-mix(in srgb, var(--accent) 92%, #fff); } .wd-tree-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; z-index: 2; position: relative; transform: scaleY(1) !important; } .wd-tree-item-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border: 1px solid color-mix(in srgb, var(--fg-color) 35%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--g1-color) 80%, var(--g2-color) 20%); font-size: 14px; font-family: "Courier New", monospace; color: var(--fg-color); opacity: 0.9; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; z-index: 10; position: relative; margin: 0 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-color) 12%, transparent); transform: scaleY(1) !important; } .wd-tree-item-toggle:hover { opacity: 1; background: color-mix(in srgb, var(--accent2) 15%, transparent); border-color: var(--accent); } .wd-tree-item-toggle.empty { opacity: 0.5; cursor: default; font-size: 0px; } .wd-tree-item-toggle.empty:hover { background: transparent; border-color: transparent; } .wd-tree-item-toggle.loading { pointer-events: none; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent2) 12%, transparent); } .wd-tree-item-toggle.loading::after { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fg-color) 25%, transparent); border-top-color: var(--accent); animation: wd-tree-toggle-spin 0.65s linear infinite; } @keyframes wd-tree-toggle-spin { to { transform: rotate(360deg); } } .wd-tree-item-icon.nav-loading::before { -webkit-mask: none; mask: none; width: 14px; height: 14px; border-radius: 50%; background: transparent; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); animation: wd-tree-toggle-spin 0.65s linear infinite; } .wd-tree-item.expanded > .wd-tree-item-btn .wd-tree-item-toggle { transform: none; } /* Tree branch connector */ .wd-tree-branch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 28px; flex: none; font-family: "Courier New", monospace; color: color-mix(in srgb, var(--fg-color) 75%, var(--g3-color) 25%); opacity: 0.65; user-select: none; font-size: 15px; pointer-events: none; /* линии не мешают клику по toggle/иконке */ } /* Vertical line continuation for non-last parents */ .wd-tree-branch.line::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background-color: var(--fg-color); opacity: 0.5; } /* Connector: ├ or └ with horizontal line */ .wd-tree-branch.connector { position: relative; } .wd-tree-branch.connector::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1px; background-color: var(--fg-color); opacity: 0.5; } .wd-tree-branch.connector.mid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background-color: var(--fg-color); opacity: 0.5; } .wd-tree-branch.connector.last::before { content: ''; position: absolute; left: 50%; top: 0; height: 50%; width: 1px; background-color: var(--fg-color); opacity: 0.5; } .wd-tree-item-children { list-style: none; margin: 0; padding: 0; padding-left: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease; } .wd-tree-item.expanded > .wd-tree-item-children { max-height: fit-content; opacity: 1; } /* Tree backdrop for mobile */ .wd-tree-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--accent2) 50%, transparent); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 1000; } @media screen and (max-width: 800px) { body.tree-view-open .wd-tree-backdrop { opacity: 1; pointer-events: auto; } } @media screen and (min-width: 801px) { .wd-tree-backdrop { display: none; } } /* === archive.css === */ /* Archive tree inside the standard preview pane */ .preview-pane.preview-pane-archive, .preview-pane .archive-pane-preview { display: flex; flex-direction: column; min-height: 0; height: 100%; } .preview-pane-archive { background: color-mix(in srgb, var(--g1-color) 92%, transparent); } .archive-pane-preview { width: -webkit-fill-available; text-align: start; } .archive-preview-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 12px 4px; font-size: 0.85rem; color: var(--g3-color, #888); flex-shrink: 0; } .archive-preview-status { flex: 1; min-width: 120px; } .archive-password-row { display: flex; gap: 8px; padding: 8px 12px; align-items: center; flex-shrink: 0; } .archive-password-row[hidden] { display: none !important; } .archive-password-input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--g2-color, #444); background: var(--g1-color, #1a1a1a); color: inherit; } .archive-password-btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--g2-color, #444); background: var(--accent-color, #3d7); color: #111; cursor: pointer; font-weight: 600; } .archive-pane-preview .archive-tree-scroll { flex: 1; min-height: 120px; overflow: auto; padding: 4px 8px 12px; font-size: 0.9rem; justify-items: start; } .archive-tree-loading, .archive-tree-empty, .archive-tree-error { padding: 16px; color: var(--g3-color, #999); } .archive-tree-error { color: #e57373; } .archive-tree-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; min-height: 30px; width: -webkit-fill-available; } .archive-tree-row[data-depth="1"] { padding-left: 18px; } .archive-tree-row[data-depth="2"] { padding-left: 34px; } .archive-tree-row[data-depth="3"] { padding-left: 50px; } .archive-tree-row[data-depth="4"] { padding-left: 66px; } .archive-tree-row[data-depth="5"] { padding-left: 82px; } .archive-tree-row[data-depth="6"] { padding-left: 98px; } .archive-tree-row[data-depth="7"] { padding-left: 114px; } .archive-tree-row[data-depth="8"] { padding-left: 130px; } .archive-tree-row[data-depth="9"] { padding-left: 146px; } .archive-tree-row[data-depth="10"] { padding-left: 162px; } .archive-tree-row[data-depth="11"] { padding-left: 178px; } .archive-tree-row[data-depth="12"] { padding-left: 194px; } .archive-tree-row[data-depth="13"] { padding-left: 210px; } .archive-tree-row[data-depth="14"] { padding-left: 226px; } .archive-tree-row[data-depth="15"] { padding-left: 242px; } .archive-tree-row:hover { background: color-mix(in srgb, var(--accent2, #4af) 8%, transparent); } .archive-tree-dir { cursor: pointer; user-select: none; } .archive-tree-dir .archive-tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .preview-archive-entry-note { margin-top: 8px; font-size: 0.9rem; color: var(--g3-color, #888); text-align: center; max-width: 28rem; } .archive-tree-toggle { width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: inherit; cursor: pointer; flex-shrink: 0; } .archive-tree-spacer { width: 22px; flex-shrink: 0; } .archive-tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archive-tree-size { flex-shrink: 0; font-size: 0.8rem; color: var(--g3-color, #888); margin-left: 8px; } .archive-tree-chevron { font-size: 1.4rem; opacity: 0.85; } .archive-tree-dir .archive-tree-name { font-weight: 600; } /* === settings.css === */ .wd-settings-fullscreen { position: fixed; inset: 0; background: var(--bg-color); z-index: 2000; display: flex; flex-direction: column; overflow: hidden; } /* Initially hide only the connect-page fullscreen container to prevent flash */ html[data-connect-page="true"] .connect-fullscreen { opacity: 0; transition: opacity 200ms ease; } html[data-connect-page="true"] .connect-fullscreen.ready { opacity: 1; } .wd-settings-header { display: flex; align-items: center; justify-content: flex-start; height: 56px; padding: 0 10px; gap: 16px; border-bottom: 1px solid var(--g2-color); z-index: 1; box-shadow: 0px 0px 4px 1px color-mix(in srgb, black 28%, transparent); } .wd-settings-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; } .wd-settings-close { width: 50px; height: 50px; position: relative; border: none; background: transparent; color: var(--fg-color); font-size: 32px; cursor: pointer; border-radius: 8px; transition: background 140ms ease; } .wd-settings-close:before { content: ''; position: absolute; left: 50%; top: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); background-color: currentColor; -webkit-mask: var(--icon-src) no-repeat center / contain; mask: var(--icon-src) no-repeat center / contain; } .wd-settings-close:hover { background: color-mix(in srgb, var(--accent2) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); } .wd-settings-content { flex: 1; overflow-y: auto; padding: 24px 72px; } .wd-settings-section { max-width: 800px; margin: 0 auto 32px; background: var(--g1-color); border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 8%, transparent); } @media screen and (max-width: 800px) { .wd-settings-content { padding: 0px; } .wd-settings-section { border-radius: 0px; } } .wd-settings-section h3 { margin: 0 0 20px 0; font-size: 1.25rem; font-weight: 600; color: var(--fg-color); } .wd-settings-row { margin-bottom: 20px; } .wd-connect-form label { display: block; font-size: 0.95rem; font-weight: 500; color: var(--fg-color); margin-bottom: 8px; } .wd-connect-form input[type="url"], .wd-connect-form input[type="text"], .wd-connect-form input[type="password"] { width: 100%; padding: 12px 16px; background: var(--g2-color); border: 1px solid var(--panel-border); border-radius: 8px; color: var(--fg-color); font-size: 0.95rem; transition: all 140ms ease; box-sizing: border-box; } .wd-connect-form input[type="url"]:focus, .wd-connect-form input[type="text"]:focus, .wd-connect-form input[type="password"]:focus { outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent2) 8%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .wd-connect-form input[type="url"]::placeholder, .wd-connect-form input[type="text"]::placeholder, .wd-connect-form input[type="password"]::placeholder { color: var(--g5-color); } .wd-connect-form .btn { padding: 12px 24px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 140ms ease; width: 100%; } .wd-connect-form .btn:hover { background: color-mix(in srgb, var(--accent-fg) 10%, var(--accent)); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); } .wd-connect-form .btn:active { transform: translateY(0); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 20%, transparent); } .wd-settings-toggle-label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 16px; min-height: 48px; background: var(--g2-color); border-radius: 8px; transition: background 140ms ease, border-color 140ms ease; border: 1px solid var(--panel-border); } .wd-settings-toggle-label:hover { background: color-mix(in srgb, var(--accent2) 8%, transparent); border-color: var(--accent); } .wd-settings-toggle-label span { display: inline-flex; align-items: center; font-size: 0.95rem; font-weight: 500; color: var(--fg-color); } .wd-settings-palette { margin-top: 24px; } .wd-settings-palette h4 { margin: 0 0 8px 0; font-size: 1.1rem; font-weight: 500; color: var(--fg-color); } .wd-preset-palettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; } .wd-preset-palette { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--g2-color); border-radius: 8px; cursor: pointer; transition: all 140ms ease; border: 1px solid var(--panel-border); } .wd-preset-palette:hover { background: color-mix(in srgb, var(--accent2) 15%, transparent); border-color: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent2) 20%, transparent); } .wd-preset-palette.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--g2-color)); } .wd-preset-preview { display: flex; gap: 2px; flex-shrink: 0; } .wd-preset-preview span { width: 16px; height: 16px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--fg-color) 20%, transparent); } .wd-preset-name { font-size: 0.9rem; font-weight: 500; color: var(--fg-color); } .wd-settings-desc { margin: 0 0 20px 0; color: var(--g3-color); font-size: 0.9rem; } .wd-color-inputs, .wd-opacity-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 32px; width: -webkit-fill-available; } .wd-color-inputs label { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--g2-color); border-radius: 12px; transition: all 160ms ease; border: 1px solid var(--g3-color); width: -webkit-fill-available; } .wd-alpha-input-group label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; color: var(--fg-color); padding: 0; background: transparent; border: none; justify-content: flex-start; } .wd-opacity-inputs label { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--g2-color); border-radius: 12px; transition: all 160ms ease; border: 1px solid var(--g3-color); position: relative; } .wd-color-inputs label:hover { background: color-mix(in srgb, var(--accent2) 15%, transparent); border-color: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent2) 20%, transparent); } .wd-opacity-inputs label:hover::before { opacity: 0.1; } .wd-opacity-inputs label:hover { border-color: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent2) 20%, transparent); } .wd-color-inputs span, .wd-opacity-inputs span { flex: 1; font-size: 0.95rem; font-weight: 500; color: var(--fg-color); } .wd-color-inputs input[type="color"] { width: 50px; height: 36px; border: 2px solid var(--g2-color); border-radius: 8px; cursor: pointer; transition: border-color 140ms ease; background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-size: 10px 10px; background-position: 0 0, 5px 5px; } .wd-color-inputs input[type="color"][data-supports-alpha="true"] { background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-size: 10px 10px; background-position: 0 0, 5px 5px; position: relative; } .wd-color-inputs input[type="color"][data-supports-alpha="true"]::after { content: 'α'; position: absolute; top: 2px; right: 2px; font-size: 10px; font-weight: bold; color: var(--accent); background: rgba(255,255,255,0.9); border-radius: 50%; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; } .wd-color-inputs input[type="color"]:hover { border-color: var(--accent); } .wd-settings-section h3 { margin: 0 0 20px; font-size: 1.25rem; font-weight: 600; color: var(--fg-color); } .wd-settings-section h4 { margin: 24px 0 12px; font-size: 1rem; font-weight: 600; color: var(--fg-color); } .wd-settings-row { margin-bottom: 20px; } .wd-settings-toggle-label { display: flex; align-items: center; gap: 12px; font-size: 1rem; cursor: pointer; } .wd-settings-toggle-label input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; } .wd-settings-palette { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--g2-color); } .wd-settings-desc { margin: 0 0 16px; font-size: 0.9rem; color: var(--g3-color); } .wd-settings-reset { margin-top: 20px; padding: 12px 24px; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 0.95rem; font-weight: 500; transition: all 140ms ease; } .wd-settings-reset:hover { background: var(--accent2); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent2) 25%, transparent); border-color: var(--accent); } .wd-settings-reset:active { transform: scale(0.98); } /* Opacity inputs styles */ .wd-opacity-inputs input[type="range"] { width: 100px; height: 4px; background: var(--g2-color); border-radius: 2px; outline: none; cursor: pointer; position: relative; } .wd-opacity-inputs input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; cursor: pointer; border: 2px solid var(--g1-color); box-shadow: 0 2px 4px color-mix(in srgb, var(--accent2) 20%, transparent); } .wd-opacity-inputs input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--accent); border-radius: 50%; border: 2px solid var(--g1-color); box-shadow: 0 2px 4px color-mix(in srgb, var(--accent2) 20%, transparent); cursor: pointer; } .wd-color-inputs input[type="color"], .wd-opacity-inputs input[type="range"], .wd-color-inputs span, .wd-opacity-inputs span, .opacity-value { position: relative; z-index: 1; } .opacity-value { min-width: 40px; text-align: right; font-size: 0.85rem; color: var(--g3-color); } /* Visual opacity preview for each slider */ .wd-opacity-inputs label { position: relative; overflow: hidden; } .wd-opacity-inputs label::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, color-mix(in srgb, var(--g3-color) 50%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--g3-color) 50%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--g3-color) 50%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--g3-color) 50%, transparent) 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px; opacity: var(--preview-opacity, 0.38); border-radius: 12px; pointer-events: none; z-index: -1; transition: opacity 140ms ease; } .wd-opacity-inputs label::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: var(--g1-color); opacity: var(--preview-opacity, 0.38); border-radius: 12px; pointer-events: none; z-index: -1; transition: opacity 140ms ease; } /* Prevent body scroll when settings are open */ body.settings-open { overflow: hidden; } /* === logs.css === */ /* Logs viewer fullscreen overlay */ .wd-logs-fullscreen { position: fixed; inset: 0; background: var(--bg-color); z-index: 2000; display: flex; flex-direction: column; overflow: hidden; } body.logs-open { overflow: hidden; } .wd-logs-panel { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; } .wd-logs-header { display: flex; align-items: center; justify-content: space-between; height: 57px; padding-left: 24px; padding-right: 16px; border-bottom: 1px solid var(--g2-color); background: var(--topbar-bg, var(--g1-color)); margin-bottom: 24px; box-shadow: 0px 0px 4px 1px color-mix(in srgb, black 28%, transparent); } .wd-logs-header-actions { display: flex; align-items: center; gap: 8px; } .wd-logs-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--fg-color); } .wd-logs-toggle { width: 36px; height: 36px; border: 1px solid var(--g2-color); background: var(--g1-color); color: var(--fg-color); font-size: 18px; cursor: pointer; border-radius: 8px; transition: background 140ms ease, transform 140ms ease; } .wd-logs-toggle:hover { background: color-mix(in srgb, var(--accent2) 12%, transparent); } .wd-logs-controls.collapsed { display: none; } .wd-logs-close { width: 40px; height: 40px; border: none; background: transparent; color: var(--fg-color); font-size: 32px; cursor: pointer; border-radius: 8px; transition: background 140ms ease; } .wd-logs-close:hover { background: color-mix(in srgb, var(--accent2) 15%, transparent); border-color: var(--accent); } .wd-logs-controls { display: flex; flex-direction: row; gap: 1rem; width: -webkit-fill-available; margin: 0 24px 24px; background: var(--g1-color); border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 8%, transparent); align-self: center; } .wd-logs-control-group { width: -webkit-fill-available; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .wd-logs-control-group label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; color: var(--fg-color); } .wd-logs-control-group label span { font-weight: 500; } .wd-logs-level-select, .wd-logs-limit-input { padding: 12px 16px; background: var(--g2-color); border: 1px solid var(--panel-border); border-radius: 8px; color: var(--fg-color); font-size: 0.95rem; transition: all 140ms ease; min-width: 150px; } .wd-logs-level-select:focus, .wd-logs-limit-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .wd-logs-limit-input { min-width: 100px; } .wd-logs-auto-refresh { flex-direction: row !important; align-items: center; gap: 0.5rem !important; } .wd-logs-auto-refresh-checkbox { width: auto; margin: 0; } .wd-logs-actions { display: flex; gap: 1rem; align-items: center; } .wd-logs-refresh-btn, .wd-logs-clear-btn { padding: 12px 24px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--accent); color: white; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 140ms ease; height: fit-content; text-wrap-mode: nowrap; } .wd-logs-refresh-btn:hover, .wd-logs-clear-btn:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); } .wd-logs-clear-btn { background: var(--g2-color); color: var(--fg-color); } .wd-logs-content { flex: 1; overflow-y: auto; border-radius: 8px; margin: 0 24px 24px; border: 1px solid transparent; } .wd-logs-output { margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } /* Log syntax highlighting */ .log-entry { width: -webkit-fill-available; background: var(--g1-color); border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 8%, transparent); border: 1px solid var(--g2-color); display: flex; flex-direction: column; gap: 12px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; font-size: 0.85rem; line-height: 1.6; } .log-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--g2-color); } .log-body { word-break: break-word; white-space: pre-wrap; color: var(--fg-color); font-size: 0.9rem; } .log-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; min-width: 60px; } .log-ts { color: var(--g3-color); font-weight: 500; font-size: 0.85rem; } .log-session { color: var(--accent); font-weight: 500; font-size: 0.85rem; } .log-user { color: black; font-weight: 600; font-size: 0.85rem; background: #ffffffc7; padding: 0 4px; border-radius: 4px; border: 1px solid var(--accent); } .log-ip { color: var(--g3-color); font-family: monospace; font-size: 0.8rem; } .log-message { color: var(--fg-color); } .log-request { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .log-method { font-weight: 700; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; } .method-get { background: #1971c2; color: white; } .method-post { background: #2b8a3e; color: white; } .method-put { background: #f08c00; color: white; } .method-delete { background: #e03131; color: white; } .method-propfind { background: #7950f2; color: white; } .method-mkcol { background: #0ca678; color: white; } .method-copy { background: #15aabf; color: white; } .method-move { background: #f59f00; color: white; } .method-options { background: #6c757d; color: white; } .method-head { background: #495057; color: white; } .log-path { color: var(--fg-color); font-weight: 600; font-family: monospace; text-align: start; word-break: break-all; } .log-status { font-weight: 700; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; } .status-success { background: #51cf66; color: #1b4332; } .status-error { background: #ff6b6b; color: white; } .status-info { background: #74c0fc; color: #1e3a8a; } .log-params, .log-headers, .log-message { font-size: 0.8rem; color: var(--g3-color); margin-top: 4px; padding: 8px; background: var(--g2-color); border-radius: 6px; word-break: break-all; text-align: start; } .log-headers { border: 1px solid var(--panel-border); } .log-headers summary { cursor: pointer; font-weight: 600; color: var(--fg-color); outline: none; } .log-headers[open] { background: var(--g1-color); } .log-headers pre { margin: 8px 0 0 0; white-space: pre-wrap; word-break: break-word; color: var(--fg-color); font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; } .log-label { font-weight: 600; color: var(--fg-color); } .log-empty { color: var(--g3-color); font-style: italic; opacity: 0.75; } .level-error .log-badge { background: #e03131; } .level-warning .log-badge { background: #f08c00; } .level-info .log-badge { background: #1971c2; } .level-debug .log-badge { background: #2b8a3e; } .level-log .log-badge { background: #6c757d; } .level-error { border-left: 4px solid #e03131; } .level-warning { border-left: 4px solid #f08c00; } .level-info { border-left: 4px solid #1971c2; } .level-debug { border-left: 4px solid #2b8a3e; } /* Responsive */ @media (max-width: 768px) { .wd-logs-control-group { flex-direction: column; align-items: stretch; gap: 1rem; } .wd-logs-control-group label { width: 100%; } .wd-logs-controls { flex-direction: column; } .wd-logs-actions { flex-direction: column; } .wd-logs-refresh-btn, .wd-logs-clear-btn { width: 100%; } .wd-logs-output { font-size: 0.75rem; } } /* Dark theme adjustments */ [data-theme="dark"] .log-error { color: #ff8787; } [data-theme="dark"] .log-warning { color: #ffc078; } [data-theme="dark"] .log-info { color: #74c0fc; } [data-theme="dark"] .log-debug { color: #b8d4a8; } [data-theme="dark"] .log-timestamp { color: #adb5bd; } [data-theme="dark"] .log-session { color: #da77f2; } /* === qr-dialog.css === */ /* QR Code Dialog Styles */ .qr-dialog-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg-color) 70%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; animation: fadeIn 200ms ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .qr-dialog { background: var(--glass-1); border: 2px solid var(--panel-border); border-radius: 12px; padding: 24px; max-width: 400px; width: 90%; animation: slideUp 240ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .qr-header { text-align: center; margin-bottom: 20px; } .qr-header h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; color: var(--fg-color); } .qr-filename { margin: 0; font-size: 0.9rem; color: var(--g3-color); word-break: break-all; } .qr-code-container { display: flex; justify-content: center; align-items: center; padding: 16px; background: white; border-radius: 8px; margin-bottom: 20px; } .qr-code-container canvas { display: block; max-width: 100%; height: auto; } .qr-url-container { display: flex; gap: 8px; align-items: center; } .qr-url-input { flex: 1; padding: 10px 12px; border: 1px solid var(--g2-color); border-radius: 6px; background: var(--g1-color); color: var(--fg-color); font-size: 0.9rem; font-family: monospace; outline: none; } .qr-url-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .qr-copy-btn { padding: 10px 16px; border: none; border-radius: 6px; background: var(--accent); color: white; font-weight: 600; cursor: pointer; transition: all 140ms ease; white-space: nowrap; } .qr-copy-btn:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); } .qr-copy-btn:active { transform: translateY(0); }