SteamFramelyHomebrew--framely/ui/src/file-picker.css

/* Framely's existing dark interface, with a quieter file-browser hierarchy. */
.frame-files-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:28px;background:#000000b8}
.frame-files{--files-muted:#a3adb9;--files-line:#ffffff12;--files-accent:#a8d5f4;width:min(1160px,100%);height:min(690px,calc(100dvh - 56px));display:flex;flex-direction:column;background:var(--overlay-bg);color:#edf2f7;border:1px solid #ffffff24;border-radius:18px;box-shadow:0 32px 100px #0008;overflow:hidden;font:18px/1.4 system-ui,-apple-system,sans-serif}
.frame-files button{font:inherit;min-height:48px;margin:0;border-radius:10px;white-space:nowrap;transition:background 120ms,color 120ms;border-color:transparent}
.frame-files button:focus-visible,.frame-files input:focus-visible{outline:2px solid var(--files-accent);outline-offset:2px}
.frame-files button:disabled{opacity:.38}
.frame-files header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;background:#1c1c1c80;border-bottom:1px solid var(--files-line);flex:none}
.frame-files-heading{display:flex;align-items:center;gap:14px}.frame-files-heading-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#ffffff0d;color:var(--files-accent)}
.frame-files header h2{font-size:23px;letter-spacing:-.35px;font-weight:600;line-height:1.2;margin:0 0 5px}.frame-files header small{font-size:15px;color:var(--files-muted)}
.frame-files .frame-files-icon-button{width:52px;padding:0;background:transparent;color:#b7c3ce;flex:none}.frame-files .frame-files-icon-button:hover:not(:disabled){background:#ffffff0c;color:#f1f6fb}.frame-files .frame-files-icon-button.active{background:var(--control-selected);color:var(--files-accent)}
.frame-files-body{display:grid;grid-template-columns:242px minmax(0,1fr);flex:1;min-height:0}
.frame-files aside{padding:20px 12px;background:#14141470;border-right:1px solid var(--files-line);overflow:auto}
.frame-files-sidebar-label{font-size:14px;font-weight:500;color:var(--files-muted);padding:0 16px;margin:0 0 14px}
.frame-files aside button{width:100%;padding:14px 16px;display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:13px;min-height:58px;margin-bottom:5px;background:transparent;color:#b7c1cb;font-size:18px}
.frame-files aside button span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.frame-files aside button.active{background:#ffffff18;color:#c1e4fc}.frame-files aside button:hover:not(:disabled){background:#ffffff09}.frame-files aside button.active:hover:not(:disabled){background:var(--control-selected)}
.frame-files section{min-width:0;min-height:0;padding:16px 22px 10px;display:flex;flex-direction:column;gap:10px}
.frame-files-location{display:flex;align-items:center;gap:8px}.frame-files-navigation{display:flex;flex:none;gap:2px}.frame-files-path{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0 8px 0 12px;background:#10101090;border:1px solid #ffffff0f;border-radius:10px;color:var(--files-muted)}
.frame-files .frame-files-path input:not([type=checkbox]):not([type=file]){margin:0;min-height:48px;padding:9px 0;flex:1;min-width:0;width:auto;border:0;border-radius:0;background:transparent;color:#ccd6df;font-size:16px;outline-offset:0}
.frame-files .frame-files-go{padding:0 9px;min-height:44px;min-width:48px;background:#ffffff0d;color:#c1ccd7;font-size:15px;border-radius:7px}.frame-files .frame-files-go:hover:not(:disabled){background:var(--control-hover)}
.frame-files-toolbar{display:flex;gap:10px;align-items:center}.frame-files-search{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:0 15px;background:#10101090;border:1px solid #ffffff12;border-radius:10px;color:#9aabba}
.frame-files .frame-files-search input:not([type=checkbox]):not([type=file]){margin:0;padding:10px 0;min-height:48px;min-width:0;border:0;background:transparent;font-size:18px}.frame-files .frame-files-search input::placeholder{color:#9aa9b7}.frame-files-search:focus-within{border-color:#a8d5f477}
.frame-files-options-anchor{position:relative}.frame-files-options{position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:330px;padding:12px 18px;background:#1c1c1cf2;border:1px solid #ffffff24;border-radius:12px;box-shadow:0 12px 35px #0006}.frame-files-options label{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:17px;margin:0;padding:12px 0}.frame-files-options .ui-switch{min-height:44px}
.frame-files-directory{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 2px;min-height:38px}.frame-files-directory h3{margin:0;font-size:21px;font-weight:550;letter-spacing:-.3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frame-files-directory small{flex:none;font-size:15px;color:var(--files-muted);margin-left:14px}
.frame-files-columns{display:grid;grid-template-columns:minmax(0,1fr) 100px 118px 24px;gap:16px;padding:0 16px 9px;color:var(--files-muted);font-size:14px}.frame-files-columns span:first-child{padding-left:60px}
.frame-files-list{flex:1;min-height:0;overflow:auto;padding:2px 2px 4px;scrollbar-gutter:stable}
.frame-files .frame-file-row{width:100%;min-height:68px;display:grid;grid-template-columns:44px minmax(0,1fr) 100px 118px 24px;align-items:center;text-align:left;gap:16px;padding:8px 14px;background:transparent;border:1px solid transparent;margin-bottom:3px;border-radius:10px;color:#e2e9ef;white-space:normal}
.frame-files .frame-file-row:hover:not(:disabled){background:#ffffff07}.frame-files .frame-file-row.selected{background:#ffffff18;border-color:#9bcff42e}.frame-files .frame-file-row.selected:hover:not(:disabled){background:#ffffff24}
.frame-file-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#ffffff0a;color:#afbecb}.frame-file-symbol.folder{color:#aecbe0;background:#ffffff0d}.frame-file-symbol.apk{color:#b8dcf7;background:#ffffff0d}
.frame-file-name{display:flex;flex-direction:column;gap:4px;min-width:0}.frame-file-name b{font-size:18px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frame-file-name small{font-size:13px;letter-spacing:.2px;color:var(--files-muted)}.frame-file-size,.frame-file-modified{font-size:15px;color:#aab7c3;font-variant-numeric:tabular-nums}.frame-file-check{display:grid;place-items:center;width:24px;height:24px;color:#8ba1b3}.selected .frame-file-check{border-radius:50%;background:var(--control-selected);color:#f3f3f3}
.frame-files-loading,.frame-files-empty{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--files-muted)}.frame-files-loading p,.frame-files-empty .empty{padding:0;margin:0;font-size:18px}
.frame-files footer{border-top:1px solid var(--files-line);background:#1c1c1c80;padding:12px 22px;display:flex;align-items:center;gap:12px;flex:none}
.frame-files-selection{flex:1;display:flex;align-items:center;gap:12px;min-width:0;color:#aab7c3;font-size:16px}.frame-files-selection>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frame-files-selection small{display:block;font-size:13px;color:var(--files-muted);margin-top:3px}.frame-files-selection-icon{width:38px;height:38px;display:grid;place-items:center;background:#ffffff0a;border-radius:10px;flex:none}.frame-files-selection.has-selection{color:#e3edf5}.has-selection .frame-files-selection-icon{background:#ffffff18;color:var(--files-accent)}
.frame-files .frame-files-cancel{padding:10px 23px;background:#ffffff0d;color:#d6e1e9}.frame-files .frame-files-cancel:hover:not(:disabled){background:var(--control-hover)}.frame-files .frame-files-confirm{min-width:112px;padding:10px 25px;background:var(--control-selected);color:#f3f3f3;font-weight:600}.frame-files .frame-files-confirm:hover:not(:disabled){background:#ffffff30}
.frame-files-pages{display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--files-muted)}.frame-files-pages button{font-size:16px;background:#ffffff0a;padding:8px 16px}.frame-files .error{margin:0;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 12px;background:#3b262d;border-radius:8px;font-size:16px}
@media(prefers-reduced-motion:no-preference){.frame-files{animation:frame-files-enter 160ms ease-out}@keyframes frame-files-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){.frame-files button{transition:none}}
@media(max-width:1024px){.frame-files-body{grid-template-columns:190px minmax(0,1fr)}.frame-files section{padding:16px}.frame-files-columns{grid-template-columns:minmax(0,1fr) 86px 24px}.frame-files-columns span:nth-child(3){display:none}.frame-files .frame-file-row{grid-template-columns:44px minmax(0,1fr) 86px 24px}.frame-file-modified{display:none}.frame-files aside button{padding:14px 12px;font-size:17px}}
@media(max-width:768px){.frame-files-backdrop{padding:12px}.frame-files{height:calc(100dvh - 24px);border-radius:12px}.frame-files-body{grid-template-columns:150px minmax(0,1fr)}.frame-files-navigation{display:none}.frame-files aside{padding:18px 8px}.frame-files aside button{gap:8px;font-size:16px}.frame-files aside button>svg:last-child:not(:first-child){display:none}.frame-files header{padding:16px}.frame-files footer{padding:14px 16px}.frame-files-selection-icon{display:none}.frame-files-options{width:290px}.frame-files .frame-file-row{grid-template-columns:36px minmax(0,1fr) 24px;gap:10px}.frame-file-symbol{width:36px;height:44px}.frame-file-size{display:none}.frame-files-columns{grid-template-columns:minmax(0,1fr) 24px}.frame-files-columns span:nth-child(2){display:none}.frame-files-columns span:first-child{padding-left:46px}}
.frame-folder-tree{width:100%;min-width:0}.frame-folder-row{display:flex;align-items:center;min-height:48px;border-radius:8px;margin-bottom:3px;padding-right:8px;color:#b8c6d1}.frame-folder-row.active{background:var(--control-selected);color:#c9e9ff}.frame-files .frame-folder-row>button{margin:0;padding:0;background:transparent;color:inherit;min-height:48px;border:0;border-radius:6px}.frame-files .frame-folder-toggle{width:30px;flex:none;justify-content:center}.frame-files .frame-folder-name{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left;font-size:17px}.frame-folder-name span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frame-files .frame-folder-row>button:hover:not(:disabled){background:#ffffff08}.frame-folder-toggle svg{transition:transform 120ms}.frame-folder-status{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;color:var(--files-muted)}.frame-files aside .frame-folder-retry,.frame-files aside .frame-folder-more{width:auto;max-width:100%;font-size:14px;min-height:44px;margin:2px 0 6px 28px;padding:6px 10px;white-space:normal}.frame-files aside .frame-folder-name.active{background:transparent}@media(prefers-reduced-motion:reduce){.frame-folder-toggle svg{transition:none}}