Zero-copy FTP/HTTP Daemon compatible with all POSIX systems
| 1 | /* ══ DUAL-PANE FILE MANAGER (FileZilla-style) ═════════════════════════════ |
| 2 | * Split view with source and destination panels for drag & drop operations. |
| 3 | * ═════════════════════════════════════════════════════════════════════════ */ |
| 4 | |
| 5 | .fm-container { |
| 6 | display: grid; |
| 7 | grid-template-columns: 1fr auto 1fr; |
| 8 | gap: 0; |
| 9 | height: calc(100vh - 180px); |
| 10 | min-height: 400px; |
| 11 | } |
| 12 | |
| 13 | /* ── Panels ── */ |
| 14 | |
| 15 | .fm-panel { |
| 16 | display: flex; |
| 17 | flex-direction: column; |
| 18 | background: var(--sf); |
| 19 | border: 1px solid var(--bd); |
| 20 | border-radius: var(--radius-md); |
| 21 | overflow: hidden; |
| 22 | } |
| 23 | |
| 24 | .fm-panel-header { |
| 25 | display: flex; |
| 26 | align-items: center; |
| 27 | gap: 8px; |
| 28 | padding: 8px 12px; |
| 29 | background: var(--sf2); |
| 30 | border-bottom: 1px solid var(--bd); |
| 31 | font-size: 11px; |
| 32 | font-weight: 600; |
| 33 | color: var(--ac); |
| 34 | } |
| 35 | |
| 36 | .fm-panel-header .fm-label { |
| 37 | text-transform: uppercase; |
| 38 | letter-spacing: .06em; |
| 39 | font-size: 10px; |
| 40 | } |
| 41 | |
| 42 | .fm-panel-path { |
| 43 | display: flex; |
| 44 | align-items: center; |
| 45 | gap: 4px; |
| 46 | padding: 6px 12px; |
| 47 | border-bottom: 1px solid var(--bd); |
| 48 | background: var(--bg); |
| 49 | overflow-x: auto; |
| 50 | scrollbar-width: none; |
| 51 | } |
| 52 | |
| 53 | .fm-panel-path::-webkit-scrollbar { display: none; } |
| 54 | |
| 55 | .fm-panel-path .crumb { |
| 56 | font-size: 10px; |
| 57 | padding: 2px 6px; |
| 58 | } |
| 59 | |
| 60 | .fm-panel-body { |
| 61 | flex: 1; |
| 62 | overflow-y: auto; |
| 63 | padding: 4px 0; |
| 64 | } |
| 65 | |
| 66 | .fm-row { |
| 67 | display: flex; |
| 68 | align-items: center; |
| 69 | gap: 8px; |
| 70 | padding: 6px 12px; |
| 71 | cursor: pointer; |
| 72 | font-size: 12px; |
| 73 | color: var(--tx2); |
| 74 | transition: background .1s, color .1s; |
| 75 | user-select: none; |
| 76 | } |
| 77 | |
| 78 | .fm-row:hover { |
| 79 | background: var(--sf2); |
| 80 | color: var(--tx); |
| 81 | } |
| 82 | |
| 83 | .fm-row.selected { |
| 84 | background: var(--gw); |
| 85 | color: var(--ac); |
| 86 | } |
| 87 | |
| 88 | .fm-row.dragging { |
| 89 | opacity: .5; |
| 90 | } |
| 91 | |
| 92 | .fm-row-ico { |
| 93 | width: 20px; |
| 94 | height: 20px; |
| 95 | display: flex; |
| 96 | align-items: center; |
| 97 | justify-content: center; |
| 98 | flex-shrink: 0; |
| 99 | } |
| 100 | |
| 101 | .fm-row-name { |
| 102 | flex: 1; |
| 103 | overflow: hidden; |
| 104 | text-overflow: ellipsis; |
| 105 | white-space: nowrap; |
| 106 | font-weight: 500; |
| 107 | } |
| 108 | |
| 109 | .fm-row-size { |
| 110 | font-size: 10px; |
| 111 | color: var(--tx3); |
| 112 | white-space: nowrap; |
| 113 | min-width: 60px; |
| 114 | text-align: right; |
| 115 | } |
| 116 | |
| 117 | .fm-row-date { |
| 118 | font-size: 10px; |
| 119 | color: var(--tx3); |
| 120 | white-space: nowrap; |
| 121 | min-width: 80px; |
| 122 | } |
| 123 | |
| 124 | /* ── Center toolbar ── */ |
| 125 | |
| 126 | .fm-center { |
| 127 | display: flex; |
| 128 | flex-direction: column; |
| 129 | align-items: center; |
| 130 | justify-content: center; |
| 131 | gap: 6px; |
| 132 | padding: 8px; |
| 133 | min-width: 48px; |
| 134 | } |
| 135 | |
| 136 | .fm-action-btn { |
| 137 | display: flex; |
| 138 | align-items: center; |
| 139 | justify-content: center; |
| 140 | width: 36px; |
| 141 | height: 36px; |
| 142 | border-radius: 8px; |
| 143 | border: 1px solid var(--bd2); |
| 144 | background: var(--sf2); |
| 145 | color: var(--tx2); |
| 146 | cursor: pointer; |
| 147 | transition: all var(--transition-fast); |
| 148 | } |
| 149 | |
| 150 | .fm-action-btn:hover { |
| 151 | border-color: var(--ac); |
| 152 | color: var(--ac); |
| 153 | background: var(--gw); |
| 154 | } |
| 155 | |
| 156 | .fm-action-btn:disabled { |
| 157 | opacity: .3; |
| 158 | cursor: not-allowed; |
| 159 | } |
| 160 | |
| 161 | /* ── Panel footer (status bar) ── */ |
| 162 | |
| 163 | .fm-panel-footer { |
| 164 | display: flex; |
| 165 | align-items: center; |
| 166 | gap: 8px; |
| 167 | padding: 6px 12px; |
| 168 | border-top: 1px solid var(--bd); |
| 169 | background: var(--sf2); |
| 170 | font-size: 10px; |
| 171 | color: var(--tx3); |
| 172 | } |
| 173 | |
| 174 | .fm-panel-footer b { |
| 175 | color: var(--tx2); |
| 176 | } |
| 177 | |
| 178 | /* ── Queue (bottom) ── */ |
| 179 | |
| 180 | .fm-queue { |
| 181 | grid-column: 1 / -1; |
| 182 | background: var(--sf); |
| 183 | border: 1px solid var(--bd); |
| 184 | border-radius: var(--radius-md); |
| 185 | margin-top: 8px; |
| 186 | max-height: 150px; |
| 187 | overflow-y: auto; |
| 188 | } |
| 189 | |
| 190 | .fm-queue-header { |
| 191 | display: flex; |
| 192 | align-items: center; |
| 193 | gap: 8px; |
| 194 | padding: 6px 12px; |
| 195 | border-bottom: 1px solid var(--bd); |
| 196 | font-size: 10px; |
| 197 | font-weight: 600; |
| 198 | color: var(--tx2); |
| 199 | text-transform: uppercase; |
| 200 | letter-spacing: .06em; |
| 201 | } |
| 202 | |
| 203 | .fm-queue-row { |
| 204 | display: flex; |
| 205 | align-items: center; |
| 206 | gap: 8px; |
| 207 | padding: 5px 12px; |
| 208 | font-size: 11px; |
| 209 | border-bottom: 1px solid var(--bd); |
| 210 | } |
| 211 | |
| 212 | .fm-queue-row:last-child { |
| 213 | border-bottom: none; |
| 214 | } |
| 215 | |
| 216 | .fm-queue-name { |
| 217 | flex: 1; |
| 218 | overflow: hidden; |
| 219 | text-overflow: ellipsis; |
| 220 | white-space: nowrap; |
| 221 | color: var(--tx); |
| 222 | font-weight: 500; |
| 223 | } |
| 224 | |
| 225 | .fm-queue-progress { |
| 226 | width: 80px; |
| 227 | height: 4px; |
| 228 | border-radius: var(--radius-pill); |
| 229 | background: var(--bd); |
| 230 | overflow: hidden; |
| 231 | } |
| 232 | |
| 233 | .fm-queue-bar { |
| 234 | height: 100%; |
| 235 | border-radius: var(--radius-pill); |
| 236 | background: linear-gradient(90deg, var(--ac), var(--ac2)); |
| 237 | transition: width .15s ease; |
| 238 | } |
| 239 | |
| 240 | .fm-queue-status { |
| 241 | font-size: 10px; |
| 242 | color: var(--tx2); |
| 243 | min-width: 50px; |
| 244 | text-align: right; |
| 245 | } |
| 246 | |
| 247 | /* ── Drop zone highlight ── */ |
| 248 | |
| 249 | .fm-panel.fm-drop-target { |
| 250 | border-color: var(--ac); |
| 251 | box-shadow: inset 0 0 20px rgba(var(--acR), .1); |
| 252 | } |
| 253 |