/* ============================================================ * AFM Secure File Transfer — WebClient Stylesheet * ============================================================ * * Serves BOTH internal AFM staff (Wormhole-style send/receive * UI) and external recipients (simple file-list view). The * single class on (afm-internal-mode or afm-external-mode) * controls which rules apply. * * Layout of this file: * * GLOBAL Tokens, brand colors, body background * SHARED CHROME AFM header, page heading, footer * (both modes use these) * INTERNAL-MODE HIDES Suppress SFTPGo's default file list, * toolbar, search etc. so the Wormhole * dropzone takes over the page * INTERNAL-MODE LAYOUT Dropzone, upload/clear buttons, * OR divider, receive-link button * MODAL SYSTEM Send/receive/success modals * (only triggered in internal mode but * styling is harmless in external mode) * EXTERNAL-MODE LAYOUT File table styling, breadcrumb, * DataTables column-width fix * * Cross-mode rules (e.g. .sidebar { display: none }) are kept * global because both audiences benefit from them. Mode-specific * rules are prefixed with html.afm-internal-mode or * html.afm-external-mode. * ============================================================ */ /* ============================================================ * GLOBAL * ============================================================ */ :root, [data-bs-theme="dark"] { --bs-primary: #eba708 !important; --bs-primary-rgb: 235, 167, 8 !important; --bs-link-color: #eba708 !important; --bs-link-hover-color: #ffc02e !important; --primary: #eba708 !important; --kt-primary: #eba708 !important; --kt-primary-active: #ffc02e !important; --kt-primary-light: rgba(235, 167, 8, 0.1) !important; --kt-text-primary: #eba708 !important; } .btn-primary, button[type="submit"], button[class*="btn-primary"]:not([class*="danger"]):not([class*="warning"]), .btn-primary:not(:disabled):not(.disabled) { background-color: #eba708 !important; border-color: #eba708 !important; color: #000 !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, button[type="submit"]:hover, button[type="submit"]:focus, button[type="submit"]:active, .btn-primary:not(:disabled):not(.disabled):hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):focus, .btn-primary:not(:disabled):not(.disabled).active { background-color: #ffc02e !important; border-color: #ffc02e !important; color: #000 !important; box-shadow: none !important; } a, a:hover { color: #eba708 !important; } body { background-color: #0a0a0a !important; } /* Both modes: hide SFTPGo's sidebar (Files / Shares / 2FA list) * and built-in top header. External users don't need them and * internal users have the Wormhole UI in their place. */ .sidebar, aside, nav.side-nav, [class*="sidebar"], [class*="side-nav"], .app-sidebar { display: none !important; } .app-header, #kt_app_header { display: none !important; } /* Hide SFTPGo's default footer everywhere. Each mode injects * its own AFM compliance footer. */ /* Hide SFTPGo's own footers only. NOTE: do not use a [class*="footer"] * substring selector here -- DataTables 2 puts "dt-empty-footer" on the * file table's wrapper div, and whitespace between :not() selectors * parses as descendant combinators, which hid every table row. */ footer, .app-footer { display: none !important; } .app-wrapper, .app-main, .app-content, .app-container, [class*="app-container"] { margin-left: 0 !important; padding-left: 0 !important; } .app-content, [class*="app-content"] { padding-top: 2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; } .card.card-flush { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; background-color: #141414 !important; border: 1px solid #1f1f1f !important; border-radius: 12px !important; } .app-content > .container-fluid { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; background-color: transparent !important; border: none !important; } /* ============================================================ * SHARED CHROME — AFM header, page heading, compliance footer * Both internal and external modes get these. * ============================================================ */ .afm-brand-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1rem 2rem !important; background-color: #0b0b0c !important; border-bottom: 1px solid #1c1c1f !important; } .afm-brand-header .afm-brand-left { display: flex !important; align-items: center !important; } .afm-brand-header .afm-signout-btn { background-color: transparent !important; color: #888 !important; border: 1px solid #2a2a2a !important; border-radius: 8px !important; padding: 0.5rem 1.25rem !important; font-size: 0.875rem !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.2s !important; cursor: pointer !important; } .afm-brand-header .afm-signout-btn:hover { border-color: #444 !important; color: #fff !important; background-color: transparent !important; } .afm-brand-header img { height: 30px !important; width: auto !important; margin-right: 0.9rem !important; display: block !important; } /* Subtle divider between logo and wordmark so they read as a lockup */ .afm-brand-header .afm-brand-left::after { content: none !important; } .afm-brand-header .afm-brand-title { color: #f5f5f5 !important; font-size: 1.05rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; white-space: nowrap !important; } .afm-page-label { text-align: center !important; padding: 2.75rem 2rem 0.5rem 2rem !important; max-width: 640px !important; margin: 0 auto !important; } .afm-page-label h2 { color: #fafafa !important; font-size: 1.9rem !important; font-weight: 650 !important; letter-spacing: -0.01em !important; margin: 0 0 0.6rem 0 !important; } .afm-page-label .afm-page-intro { color: #8a8a8f !important; font-size: 1rem !important; line-height: 1.55 !important; margin: 0 !important; } .afm-compliance-footer { position: static !important; width: auto !important; text-align: center !important; padding: 1.5rem 2rem 2rem 2rem !important; color: #666 !important; font-size: 0.85rem !important; line-height: 1.7 !important; background-color: #0a0a0a !important; border-top: 1px solid #1f1f1f !important; margin: 3rem auto 0 auto !important; max-width: 1000px !important; z-index: 1 !important; pointer-events: auto !important; } .afm-compliance-footer strong { color: #999 !important; font-weight: 600 !important; } .afm-compliance-footer .afm-compliance-warn { color: #555 !important; margin-top: 0.5rem !important; font-size: 0.8rem !important; line-height: 1.6 !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ * INTERNAL-MODE HIDES * * For internal users, suppress SFTPGo's default file manager * UI (search, toolbar, file list, navigation bar) so the * Wormhole dropzone takes over the page. External users keep * all of these — they need to see and interact with files. * ============================================================ */ html.afm-internal-mode [data-kt-filemanager-table-nav-bar="base"] { display: none !important; } html.afm-internal-mode .card-title:has(input[name="search"]), html.afm-internal-mode input[name="search"][data-kt-filemanager-table-filter="search"], html.afm-internal-mode .card-title > .d-flex.align-items-center.position-relative { display: none !important; } html.afm-internal-mode [data-kt-filemanager-table-toolbar="base"] { display: none !important; } html.afm-internal-mode #kt_file_manager_list, html.afm-internal-mode #file_manager_list, html.afm-internal-mode [data-kt-filemanager-table="files"], html.afm-internal-mode [data-kt-filemanager-table-toolbar="selected"], html.afm-internal-mode .table-responsive { display: none !important; } /* ============================================================ * INTERNAL-MODE LAYOUT * * Dropzone, upload/clear buttons, OR divider, receive-link * button. SFTPGo's upload form is forced visible (the SFTPGo * defaults toggle it on click, but we want it always available). * ============================================================ */ html.afm-internal-mode .d-none:has(#upload_files_empty), html.afm-internal-mode form:has(#upload_files_empty), html.afm-internal-mode .fv-row:has(#upload_files_empty) { display: block !important; } html.afm-internal-mode #upload_files_empty { display: flex !important; } /* Dropzone styling — applies wherever the upload area appears */ .dropzone, #upload_files_empty { min-height: 340px !important; font-size: 1.35rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border: 2px dashed #eba708 !important; border-radius: 12px !important; margin: 2rem auto !important; cursor: pointer !important; transition: all 0.2s !important; background-color: rgba(235, 167, 8, 0.02) !important; color: #ddd !important; } .dropzone:hover, #upload_files_empty:hover { border-color: #ffc02e !important; background-color: rgba(235, 167, 8, 0.05) !important; } .dropzone .ki-file-up, #upload_files_empty .ki-file-up { color: #eba708 !important; } #upload_files_empty_button { background-color: #eba708 !important; border-color: #eba708 !important; color: #000 !important; font-size: 1.05rem !important; font-weight: 600 !important; padding: 0.75rem 2.5rem !important; } #upload_files_empty_button:hover { background-color: #ffc02e !important; border-color: #ffc02e !important; } #afm-reset-queue { background-color: transparent !important; color: #999 !important; border: 1px solid #2a2a2a !important; border-radius: 8px !important; padding: 0.75rem 1.5rem !important; font-size: 1rem !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s !important; } #afm-reset-queue:hover { border-color: #444 !important; color: #fff !important; } /* ============================================================ * SEND / RECEIVE TWO-PANEL LAYOUT (internal mode) * * The page hosts two independent jobs: sending files out and * requesting files in. They sit as sibling panels rather than a * dropzone with a button hanging off an "OR" divider -- the old * layout made sense when "receive" only minted a link, but now * received files live in the user's own account and need a home. * On wide screens they sit side by side; they stack on narrow. * ============================================================ */ html.afm-internal-mode .afm-transfer-grid { max-width: 1180px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 1.5rem !important; } .afm-send-col { min-width: 0 !important; background: #0e0e0e !important; border: 1px solid #232323 !important; border-radius: 14px !important; padding: 1.4rem 1.5rem 1.5rem !important; display: flex !important; flex-direction: column !important; } @media (min-width: 1024px) { html.afm-internal-mode .afm-transfer-grid { flex-direction: row !important; align-items: stretch !important; } html.afm-internal-mode .afm-send-col, html.afm-internal-mode .afm-receive-panel { flex: 1 1 0 !important; } } /* The Receive panel: a self-contained card holding the request * action and the list of files partners have sent back. */ .afm-receive-panel { max-width: 1180px !important; margin: 1.5rem auto 0 auto !important; background: #0e0e0e !important; border: 1px solid #232323 !important; border-radius: 14px !important; padding: 1.4rem 1.5rem 1.5rem !important; } @media (min-width: 1024px) { html.afm-internal-mode .afm-receive-panel { margin-top: 0 !important; min-height: 100% !important; } } .afm-panel-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1rem !important; margin-bottom: 1.2rem !important; } .afm-panel-title { color: #fff !important; font-size: 1.05rem !important; font-weight: 700 !important; margin: 0 0 0.15rem 0 !important; } .afm-panel-sub { color: #7a7a7a !important; font-size: 0.82rem !important; line-height: 1.4 !important; margin: 0 !important; max-width: 32ch !important; } .afm-receive-btn { flex: 0 0 auto !important; background-color: #eba708 !important; color: #000 !important; border: none !important; border-radius: 8px !important; padding: 0.6rem 1.1rem !important; font-size: 0.9rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; cursor: pointer !important; transition: background-color 0.15s, transform 0.05s !important; white-space: nowrap !important; } .afm-receive-btn:hover { background-color: #ffc21e !important; } .afm-receive-btn:active { transform: translateY(1px) !important; } /* Received-files list inside the panel */ .afm-received-list { display: flex !important; flex-direction: column !important; gap: 0.9rem !important; } .afm-received-loading, .afm-received-empty, .afm-received-waiting { color: #666 !important; font-size: 0.85rem !important; padding: 0.4rem 0 !important; } .afm-received-empty { border: 1px dashed #2a2a2a !important; border-radius: 10px !important; padding: 1.4rem 1rem !important; text-align: center !important; line-height: 1.5 !important; } .afm-received-waiting { font-style: italic !important; color: #555 !important; } .afm-received-group { border: 1px solid #202020 !important; border-radius: 10px !important; background: #141414 !important; overflow: hidden !important; } .afm-received-group-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0.7rem 0.9rem !important; border-bottom: 1px solid #202020 !important; } .afm-received-group-name { color: #eba708 !important; font-size: 0.85rem !important; font-weight: 600 !important; word-break: break-all !important; } .afm-received-count { color: #666 !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important; margin-left: 0.75rem !important; } .afm-received-file { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; padding: 0.6rem 0.9rem !important; text-decoration: none !important; border-top: 1px solid #1a1a1a !important; transition: background-color 0.12s !important; } .afm-received-group-head + .afm-received-file { border-top: none !important; } .afm-received-file:hover { background-color: #1b1b1b !important; } .afm-received-file-name { color: #ddd !important; font-size: 0.88rem !important; word-break: break-all !important; } .afm-received-file:hover .afm-received-file-name { color: #fff !important; } .afm-received-file-meta { display: flex !important; align-items: center !important; gap: 0.9rem !important; white-space: nowrap !important; } .afm-received-file-meta > :first-child { color: #666 !important; font-size: 0.75rem !important; } .afm-received-file-dl { color: #eba708 !important; font-size: 0.8rem !important; font-weight: 600 !important; } /* ============================================================ * MODAL SYSTEM * * Send / receive / success modals. The shell pattern is shared * across all three; the content varies. Animations are scoped * to .afm-modal. Only the internal-mode JS triggers these, but * the styles are global since the markup is generated dynamically. * ============================================================ */ .afm-modal-backdrop { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 2rem !important; animation: afm-backdrop-in 200ms ease-out forwards !important; } .afm-modal-backdrop.afm-closing { animation: afm-backdrop-out 160ms ease-in forwards !important; } .afm-modal { background: #141414 !important; border: 1px solid #2a2a2a !important; border-radius: 14px !important; width: 100% !important; max-width: 640px !important; max-height: calc(100vh - 4rem) !important; overflow-y: auto !important; transform: translateY(12px) scale(0.98) !important; animation: afm-modal-in 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms forwards !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; } .afm-modal-backdrop.afm-closing .afm-modal { animation: afm-modal-out 140ms ease-in forwards !important; } @keyframes afm-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes afm-backdrop-out { from { opacity: 1; } to { opacity: 0; } } @keyframes afm-modal-in { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes afm-modal-out { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(8px) scale(0.98); opacity: 0; } } .afm-modal-header { padding: 2rem 2em 0 2rem !important; } .afm-modal-title { color: #fff !important; font-size: 1.55rem !important; font-weight: 600 !important; letter-spacing: -0.005em !important; margin: 0 0 0.5rem 0 !important; } .afm-modal-subtitle { color: #888 !important; font-size: 0.92rem !important; line-height: 1.55 !important; margin: 0 !important; } .afm-modal-body { padding: 1.75rem 2rem !important; } .afm-field { margin-bottom: 1.25rem !important; } .afm-field:last-child { margin-bottom: 0 !important; } .afm-field-label { display: block !important; color: #eba708 !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin-bottom: 0.55rem !important; } .afm-field-hint { color: #666 !important; font-size: 0.78rem !important; line-height: 1.45 !important; margin: 0.4rem 0 0 0 !important; } .afm-input, .afm-select, .afm-textarea { width: 100% !important; background: #0a0a0a !important; border: 1px solid #2a2a2a !important; color: #fff !important; padding: 0.7rem 0.85rem !important; border-radius: 8px !important; font-size: 0.95rem !important; font-family: inherit !important; transition: border-color 200ms ease, box-shadow 200ms ease !important; } .afm-input:focus, .afm-select:focus, .afm-textarea:focus { outline: none !important; border-color: #eba708 !important; box-shadow: 0 0 0 3px rgba(235, 167, 8, 0.12) !important; } .afm-textarea { resize: vertical !important; min-height: 80px !important; } .afm-select { appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.9rem center !important; padding-right: 2.25rem !important; } .afm-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; } .afm-chip-container { background: #0a0a0a !important; border: 1px solid #2a2a2a !important; border-radius: 8px !important; padding: 0.45rem 0.55rem !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.4rem !important; min-height: 46px !important; cursor: text !important; transition: border-color 200ms ease, box-shadow 200ms ease !important; } .afm-chip-container.afm-focused { border-color: #eba708 !important; box-shadow: 0 0 0 3px rgba(235, 167, 8, 0.12) !important; } .afm-chip { background: rgba(235, 167, 8, 0.1) !important; border: 1px solid rgba(235, 167, 8, 0.35) !important; color: #eba708 !important; padding: 0.25rem 0.3rem 0.25rem 0.6rem !important; border-radius: 6px !important; font-size: 0.85rem !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; animation: afm-chip-in 140ms ease-out !important; } @keyframes afm-chip-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .afm-chip-remove { background: none !important; border: none !important; color: #eba708 !important; cursor: pointer !important; padding: 0 0.25rem !important; font-size: 1.1rem !important; line-height: 1 !important; opacity: 0.6 !important; transition: opacity 150ms ease !important; } .afm-chip-remove:hover { opacity: 1 !important; } .afm-chip-input { flex: 1 !important; min-width: 160px !important; background: transparent !important; border: none !important; color: #fff !important; font-size: 0.95rem !important; padding: 0.3rem 0.25rem !important; outline: none !important; } .afm-chip-input::placeholder { color: #555 !important; } .afm-chip-input.afm-input-error { color: #e74c3c !important; } .afm-modal-footer { padding: 0.5rem 2rem 2rem 2rem !important; display: flex !important; flex-direction: column !important; gap: 0.65rem !important; } .afm-btn-primary, .afm-btn-secondary { width: 100% !important; padding: 0.85rem 1rem !important; border-radius: 9px !important; font-weight: 600 !important; font-size: 0.95rem !important; letter-spacing: 0.01em !important; cursor: pointer !important; transition: background-color 180ms ease, border-color 180ms ease, transform 80ms ease !important; border: 1px solid transparent !important; font-family: inherit !important; } .afm-btn-primary { background: #eba708 !important; color: #000 !important; } .afm-btn-primary:hover:not(:disabled) { background: #ffc02e !important; } .afm-btn-primary:active:not(:disabled) { transform: translateY(1px) !important; } .afm-btn-primary:disabled { background: #2a2a2a !important; color: #666 !important; cursor: not-allowed !important; } .afm-btn-secondary { background: transparent !important; color: #888 !important; border-color: #2a2a2a !important; } .afm-btn-secondary:hover { color: #fff !important; border-color: #444 !important; } .afm-message { padding: 0.7rem 0.85rem !important; border-radius: 7px !important; font-size: 0.85rem !important; line-height: 1.45 !important; margin-bottom: 1.1rem !important; display: none !important; } .afm-message.afm-visible { display: block !important; animation: afm-message-in 200ms ease-out !important; } .afm-message-error { background: rgba(231, 76, 60, 0.08) !important; border: 1px solid rgba(231, 76, 60, 0.3) !important; color: #e74c3c !important; } @keyframes afm-message-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .afm-spinner { display: inline-block !important; width: 14px !important; height: 14px !important; border: 2px solid rgba(0, 0, 0, 0.25) !important; border-top-color: rgba(0, 0, 0, 0.85) !important; border-radius: 50% !important; animation: afm-spin 700ms linear infinite !important; vertical-align: -2px !important; margin-right: 0.5rem !important; } @keyframes afm-spin { to { transform: rotate(360deg); } } /* Success modal — shown after a share is created */ .afm-success-body { padding: 2rem 1.75rem 1.5rem 1.75rem !important; text-align: center !important; } .afm-success-icon { width: 56px !important; height: 56px !important; margin: 0 auto 1.25rem auto !important; display: block !important; color: #2ecc71 !important; } .afm-success-title { color: #fff !important; font-size: 1.3rem !important; font-weight: 600 !important; margin: 0 0 0.45rem 0 !important; } .afm-success-subtitle { color: #888 !important; font-size: 0.92rem !important; line-height: 1.55 !important; margin: 0 0 1.75rem 0 !important; } .afm-recipient-list { background: #0a0a0a !important; border: 1px solid #1f1f1f !important; border-radius: 8px !important; padding: 0.75rem 1rem !important; margin-bottom: 1.5rem !important; text-align: left !important; max-height: 140px !important; overflow-y: auto !important; } .afm-recipient-row { display: flex !important; align-items: center !important; gap: 0.55rem !important; color: #bbb !important; font-size: 0.85rem !important; padding: 0.2rem 0 !important; } .afm-recipient-row .afm-recipient-check { color: #2ecc71 !important; flex-shrink: 0 !important; } .afm-url-block { background: #0a0a0a !important; border: 1px solid #1f1f1f !important; border-radius: 8px !important; padding: 0.85rem 1rem !important; display: flex !important; align-items: center !important; gap: 0.85rem !important; margin-bottom: 1.5rem !important; text-align: left !important; } .afm-url-block-content { flex: 1 !important; overflow: hidden !important; } .afm-url-block-label { color: #eba708 !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; margin-bottom: 0.3rem !important; } .afm-url-block-value { color: #fff !important; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; font-size: 0.82rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .afm-copy-btn { background: #2a2a2a !important; border: none !important; color: #fff !important; padding: 0.5rem 0.85rem !important; border-radius: 6px !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; cursor: pointer !important; transition: background 180ms ease !important; flex-shrink: 0 !important; } .afm-copy-btn:hover { background: #3a3a3a !important; } .afm-copy-btn.afm-copied { background: #2ecc71 !important; color: #000 !important; } /* ============================================================ * EXTERNAL-MODE LAYOUT * * Recipients see SFTPGo's file manager (table, breadcrumb, * search) restyled to match the AFM dark theme. No dropzone, * no send/receive buttons. * ============================================================ */ /* Defensive hides for external mode. Target the page-level empty-state * dropzone (#upload_files_empty) but NOT the modal's dropzone * (#upload_files, without _empty), which external recipients need * for inbound uploads. */ html.afm-external-mode #upload_files_empty, html.afm-external-mode form:has(#upload_files_empty), html.afm-external-mode .fv-row:has(#upload_files_empty), html.afm-external-mode .d-none:has(#upload_files_empty), html.afm-external-mode .afm-or-divider, html.afm-external-mode .afm-receive-bar, html.afm-external-mode #afm-reset-queue, html.afm-external-mode #upload_files_empty_button { display: none !important; } html.afm-external-mode .table { color: #ddd !important; background: transparent !important; } html.afm-external-mode .table thead { color: #888 !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } html.afm-external-mode .table thead th { border-bottom: 1px solid #2a2a2a !important; color: #888 !important; padding: 0.85rem 1rem !important; background: transparent !important; } html.afm-external-mode .table tbody tr { border-bottom: 1px solid #1f1f1f !important; transition: background-color 150ms ease !important; } html.afm-external-mode .table tbody tr:hover { background-color: rgba(235, 167, 8, 0.04) !important; } html.afm-external-mode .table tbody td { border: none !important; color: #ddd !important; padding: 0.85rem 1rem !important; vertical-align: middle !important; } html.afm-external-mode .table .ki-folder, html.afm-external-mode .table .ki-file, html.afm-external-mode .table [class^="ki-"] { color: #eba708 !important; } html.afm-external-mode .table .btn, html.afm-external-mode .table a.btn { background: transparent !important; border: 1px solid #2a2a2a !important; color: #888 !important; padding: 0.4rem 0.85rem !important; border-radius: 6px !important; font-size: 0.85rem !important; font-weight: 500 !important; } html.afm-external-mode .table .btn:hover, html.afm-external-mode .table a.btn:hover { border-color: #eba708 !important; color: #eba708 !important; background: rgba(235, 167, 8, 0.05) !important; } html.afm-external-mode .breadcrumb, html.afm-external-mode [class*="breadcrumb"] { color: #888 !important; font-size: 0.9rem !important; background: transparent !important; padding: 0 0 1rem 0 !important; } html.afm-external-mode .breadcrumb a, html.afm-external-mode [class*="breadcrumb"] a { color: #eba708 !important; text-decoration: none !important; } html.afm-external-mode .breadcrumb-item.active { color: #fff !important; } html.afm-external-mode .pagination, html.afm-external-mode [class*="pagination"] { margin-top: 1.5rem !important; } html.afm-external-mode .page-link { background: transparent !important; border-color: #2a2a2a !important; color: #888 !important; } html.afm-external-mode .page-link:hover { border-color: #eba708 !important; color: #eba708 !important; background: rgba(235, 167, 8, 0.05) !important; } html.afm-external-mode .page-item.active .page-link { background: #eba708 !important; border-color: #eba708 !important; color: #000 !important; } /* "No files" empty state */ html.afm-external-mode .table tbody tr:only-child td { text-align: center !important; color: #555 !important; padding: 2.5rem !important; } /* Search input styling */ html.afm-external-mode input[name="search"] { background: #0a0a0a !important; border: 1px solid #2a2a2a !important; color: #fff !important; border-radius: 8px !important; padding: 0.5rem 0.85rem !important; } html.afm-external-mode input[name="search"]:focus { border-color: #eba708 !important; box-shadow: 0 0 0 3px rgba(235, 167, 8, 0.12) !important; outline: none !important; } html.afm-external-mode .afm-download-btn { display: inline-block !important; background: #eba708 !important; color: #000 !important; padding: 0.4rem 1rem !important; border-radius: 6px !important; font-size: 0.85rem !important; font-weight: 600 !important; text-decoration: none !important; transition: background 180ms ease !important; margin-left: 0.5rem !important; white-space: nowrap !important; } html.afm-external-mode .afm-download-btn:hover { background: #ffc02e !important; color: #000 !important; text-decoration: none !important; } /* Disable filename clicks for FILES (which would trigger the permissions * error). Folder navigation links must still work so users can enter * folders. The :has(.ki-folder) check excludes folder rows. */ html.afm-external-mode #file_manager_list tbody tr:not(:has(.ki-folder)) td a[href*="/web/client/files"] { pointer-events: none !important; color: #ddd !important; text-decoration: none !important; cursor: default !important; } /* DataTables sets inline widths during initialization which can be * wrong if the role class isn't on yet. Force columns back * to auto so content drives the width. */ html.afm-external-mode #file_manager_list, html.afm-external-mode #file_manager_list col, html.afm-external-mode #file_manager_list th, html.afm-external-mode #file_manager_list td { width: auto !important; } html.afm-external-mode input[name="search"] { background: #0a0a0a !important; border: 1px solid #2a2a2a !important; color: #fff !important; border-radius: 8px !important; padding: 0.5rem 0.85rem 0.5rem 2.5rem !important; } /* Hide bulk-selection chrome — external users handle one file at a time */ html.afm-external-mode #file_manager_list th:first-child, html.afm-external-mode #file_manager_list td:first-child { display: none !important; } html.afm-external-mode .form-check-input[type="checkbox"] { display: none !important; } html.afm-external-mode [data-kt-filemanager-table-select="selected_count"], html.afm-external-mode [data-kt-filemanager-table-select="select_all"], html.afm-external-mode .dt-info { display: none !important; } html.afm-external-mode select[name="file_manager_list_length"], html.afm-external-mode .dt-length { display: none !important; } /* Hide permission-error banners that fire when external users * touch unsupported actions */ html.afm-external-mode .alert-warning, html.afm-external-mode [class*="alert-warning"] { display: none !important; } /* The first column (checkbox) stays compact */ html.afm-external-mode #file_manager_list th:first-child, html.afm-external-mode #file_manager_list td:first-child { width: 40px !important; } /* Modal dropzone (used by external recipients for inbound uploads * and by SFTPGo's native upload flow in general). Style to match * AFM aesthetic. */ .modal #upload_files.dropzone, .modal-body .dropzone { background-color: rgba(235, 167, 8, 0.02) !important; border: 2px dashed #eba708 !important; border-radius: 12px !important; color: #ddd !important; min-height: 200px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s !important; } .modal #upload_files.dropzone:hover, .modal-body .dropzone:hover { border-color: #ffc02e !important; background-color: rgba(235, 167, 8, 0.05) !important; } .modal .dz-message h3 { color: #ddd !important; } .modal .dz-message .ki-file-up { color: #eba708 !important; } /* Modal itself — match the AFM modal styling */ .modal-content { background: #141414 !important; border: 1px solid #2a2a2a !important; border-radius: 14px !important; color: #ddd !important; } .modal-header { border-bottom: 1px solid #1f1f1f !important; } .modal-title { color: #fff !important; } /* Modal close button (X) */ .modal-header .btn-icon { color: #888 !important; } .modal-header .btn-icon:hover { color: #fff !important; } .modal-footer { border-top: 1px solid #1f1f1f !important; padding: 1rem 1.5rem !important; background: transparent !important; } .modal-footer .btn-light, .modal-footer .btn-primary { padding: 0.65rem 1.25rem !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.9rem !important; } .modal-footer .btn-light { background: transparent !important; color: #888 !important; border: 1px solid #2a2a2a !important; } .modal-footer .btn-light:hover { color: #fff !important; border-color: #444 !important; background: transparent !important; } .modal-footer .btn-primary { background: #eba708 !important; border-color: #eba708 !important; color: #000 !important; } .modal-footer .btn-primary:hover { background: #ffc02e !important; border-color: #ffc02e !important; color: #000 !important; } /* The two panels ARE the visual containers now; strip the outer SFTPGo * card so it doesn't double-frame them. */ html.afm-internal-mode .card:has(.afm-transfer-grid), html.afm-internal-mode [class*="card"]:has(.afm-transfer-grid) { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Tighten the dropzone so the Send column isn't dominated by empty space, * and let it sit right under the Send heading. */ html.afm-internal-mode .afm-send-col #upload_files_empty { min-height: 260px !important; margin-top: 0.25rem !important; } /* The upload/clear buttons and the records pager belong to Send; keep them * inside the column's flow with a little breathing room. */ html.afm-internal-mode .afm-send-col .card-footer, html.afm-internal-mode .afm-send-col [class*="card-footer"] { padding-left: 0 !important; padding-right: 0 !important; } /* Pull the send content up under its heading: SFTPGo puts large top margins * (mt-10) on the upload area. Reset them within our column. */ html.afm-internal-mode .afm-send-col > .mt-10, html.afm-internal-mode .afm-send-col [class*="mt-10"] { margin-top: 0.5rem !important; } html.afm-internal-mode .afm-send-col .afm-panel-head { margin-bottom: 0.75rem !important; } /* ============================================================ * EXTERNAL MODE — PARTNER-FACING FOLDER LABELS * * Turns the raw -from/to- folder names into clear, * direction-first labels with a tag and date. Presentation-only; * see relabelExternalFolders() in afm-custom.js. * ============================================================ */ html.afm-external-mode .afm-folder-title { display: block !important; color: #fff !important; font-weight: 600 !important; font-size: 0.95rem !important; line-height: 1.3 !important; } html.afm-external-mode .afm-folder-meta { display: flex !important; align-items: center !important; gap: 0.6rem !important; margin-top: 0.2rem !important; } html.afm-external-mode .afm-folder-tag { font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; padding: 0.12rem 0.5rem !important; border-radius: 999px !important; white-space: nowrap !important; } html.afm-external-mode .afm-tag-download { background: rgba(235, 167, 8, 0.14) !important; color: #eba708 !important; } html.afm-external-mode .afm-tag-upload { background: rgba(90, 150, 255, 0.14) !important; color: #6ea8ff !important; } html.afm-external-mode .afm-folder-date { color: #777 !important; font-size: 0.78rem !important; } /* Tint the folder icon by direction so the two kinds read at a glance: * amber = something to download, blue = a place to upload. */ html.afm-external-mode .afm-row-upload .ki-folder, html.afm-external-mode .afm-row-upload [class*="folder"] { color: #6ea8ff !important; }