feat: ✨ initialize project structure with frontend dependencies and backend protocols
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
#logo {
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
padding: 10% 0 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-origin: content-box;
|
||||
}
|
||||
|
||||
.result {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
|
||||
.input-box .btn {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-box .btn:hover {
|
||||
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.input-box .input {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
background-color: rgba(240, 240, 240, 1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.input-box .input:hover {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.input-box .input:focus {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
@@ -0,0 +1,273 @@
|
||||
import { ListDir, GetConnections, SaveConnection, DeleteConnection, Delete, Rename, PromptUploadFiles, PromptUploadDirectory, PromptDownload } from '../wailsjs/go/main/App.js';
|
||||
|
||||
let currentConn = 'local';
|
||||
let currentPath = '';
|
||||
let connectionsCache = [];
|
||||
|
||||
function uuidv4() {
|
||||
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
);
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await loadConnections();
|
||||
await loadDirectory(currentConn, currentPath);
|
||||
|
||||
document.getElementById('conn-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const conn = {
|
||||
id: document.getElementById('conn-id').value,
|
||||
name: document.getElementById('conn-name').value,
|
||||
protocol: document.getElementById('conn-protocol').value,
|
||||
host: document.getElementById('conn-host').value,
|
||||
port: parseInt(document.getElementById('conn-port').value) || 0,
|
||||
bucket: document.getElementById('conn-bucket').value,
|
||||
region: document.getElementById('conn-region').value,
|
||||
path_style: document.getElementById('conn-pathstyle').checked,
|
||||
username: document.getElementById('conn-username').value
|
||||
};
|
||||
const secret = document.getElementById('conn-secret').value;
|
||||
|
||||
try {
|
||||
await SaveConnection(conn, secret);
|
||||
closeConnModal();
|
||||
loadConnections();
|
||||
} catch(err) {
|
||||
alert("Failed to save connection: " + err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadConnections() {
|
||||
const list = document.getElementById('conn-list');
|
||||
list.innerHTML = `<div class="conn-item ${currentConn === 'local' ? 'active' : ''}" onclick="switchConn('local')">
|
||||
<span class="badge">OS</span> <span style="flex:1">Local Filesystem</span>
|
||||
</div>`;
|
||||
|
||||
try {
|
||||
const conns = await GetConnections();
|
||||
connectionsCache = conns || [];
|
||||
if (connectionsCache) {
|
||||
connectionsCache.forEach(c => {
|
||||
const el = document.createElement('div');
|
||||
el.className = `conn-item ${currentConn === c.id ? 'active' : ''}`;
|
||||
el.innerHTML = `<span class="badge">${c.protocol}</span> <span style="flex:1">${c.name}</span> <svg class="edit-btn" viewBox="0 0 24 24" width="16" height="16" fill="var(--accent)" style="cursor: pointer;" onclick="event.stopPropagation(); editConnection('${c.id}')"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.06-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.73,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.06,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.43-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.49-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>`;
|
||||
el.onclick = () => switchConn(c.id);
|
||||
list.appendChild(el);
|
||||
});
|
||||
}
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
window.switchConn = async (id) => {
|
||||
currentConn = id;
|
||||
currentPath = ''; // Root path
|
||||
loadConnections(); // To update 'active' class
|
||||
await loadDirectory(currentConn, currentPath);
|
||||
};
|
||||
|
||||
window.editConnection = (id) => {
|
||||
const c = connectionsCache.find(conn => conn.id === id);
|
||||
if (!c) return;
|
||||
document.getElementById('modal-title').innerText = "Edit Connection";
|
||||
document.getElementById('conn-id').value = c.id;
|
||||
document.getElementById('conn-name').value = c.name;
|
||||
document.getElementById('conn-protocol').value = c.protocol;
|
||||
document.getElementById('conn-host').value = c.host || '';
|
||||
document.getElementById('conn-port').value = c.port || '';
|
||||
document.getElementById('conn-bucket').value = c.bucket || '';
|
||||
document.getElementById('conn-region').value = c.region || '';
|
||||
document.getElementById('conn-pathstyle').checked = c.path_style || false;
|
||||
document.getElementById('conn-username').value = c.username || '';
|
||||
document.getElementById('conn-secret').value = '';
|
||||
document.getElementById('conn-delete-btn').style.display = 'block';
|
||||
|
||||
updateProtocolFields();
|
||||
document.getElementById('conn-modal').style.display = 'flex';
|
||||
};
|
||||
|
||||
window.openConnModal = () => {
|
||||
document.getElementById('modal-title').innerText = "Add Connection";
|
||||
document.getElementById('conn-form').reset();
|
||||
document.getElementById('conn-id').value = uuidv4();
|
||||
document.getElementById('conn-delete-btn').style.display = 'none';
|
||||
updateProtocolFields();
|
||||
document.getElementById('conn-modal').style.display = 'flex';
|
||||
};
|
||||
|
||||
window.closeConnModal = () => {
|
||||
document.getElementById('conn-modal').style.display = 'none';
|
||||
};
|
||||
|
||||
window.updateProtocolFields = () => {
|
||||
const protocol = document.getElementById('conn-protocol').value;
|
||||
|
||||
const showBucket = protocol === 's3' || protocol === 'smb';
|
||||
document.getElementById('bucket-fields').style.display = showBucket ? 'block' : 'none';
|
||||
|
||||
// Only show S3 specific fields when S3 is selected
|
||||
const showS3Specific = protocol === 's3';
|
||||
document.getElementById('region-group').style.display = showS3Specific ? 'flex' : 'none';
|
||||
document.getElementById('pathstyle-group').style.display = showS3Specific ? 'flex' : 'none';
|
||||
};
|
||||
|
||||
window.deleteConnection = async () => {
|
||||
if(!confirm("Are you sure you want to delete this connection?")) return;
|
||||
const id = document.getElementById('conn-id').value;
|
||||
try {
|
||||
await DeleteConnection(id);
|
||||
closeConnModal();
|
||||
if(currentConn === id) {
|
||||
switchConn('local');
|
||||
} else {
|
||||
loadConnections();
|
||||
}
|
||||
} catch(err) {
|
||||
alert("Failed to delete connection: " + err);
|
||||
}
|
||||
};
|
||||
|
||||
async function loadDirectory(connId, path) {
|
||||
const tbody = document.getElementById('file-list');
|
||||
tbody.innerHTML = '<tr><td colspan="4">Loading...</td></tr>';
|
||||
document.getElementById('breadcrumb').innerText = path || '/';
|
||||
|
||||
try {
|
||||
const files = await ListDir(connId, path);
|
||||
tbody.innerHTML = '';
|
||||
if (!files || files.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4">Empty directory</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
files.forEach(f => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td>${f.is_dir ? '📁 ' : '📄 '}${f.name}</td>
|
||||
<td>${f.is_dir ? '-' : formatBytes(f.size)}</td>
|
||||
<td>${f.modified}</td>
|
||||
<td>${f.permissions}</td>
|
||||
`;
|
||||
if (f.is_dir) {
|
||||
tr.ondblclick = () => {
|
||||
currentPath = f.path;
|
||||
loadDirectory(currentConn, currentPath);
|
||||
};
|
||||
}
|
||||
tr.dataset.path = f.path;
|
||||
tr.dataset.name = f.name;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} catch(e) {
|
||||
tbody.innerHTML = `<tr><td colspan="4" style="color: var(--error)">Error: ${e}</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
window.refreshCurrentDir = () => {
|
||||
loadDirectory(currentConn, currentPath);
|
||||
};
|
||||
|
||||
window.showTransfers = () => {
|
||||
document.getElementById('transfer-tray').style.display = 'block';
|
||||
};
|
||||
window.hideTransfers = () => {
|
||||
document.getElementById('transfer-tray').style.display = 'none';
|
||||
};
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
window.addEventListener('load', init);
|
||||
|
||||
// Context Menu Logic
|
||||
let contextMenuTarget = null;
|
||||
|
||||
document.addEventListener('contextmenu', (e) => {
|
||||
const menu = document.getElementById('context-menu');
|
||||
menu.style.display = 'none';
|
||||
|
||||
const row = e.target.closest('tr');
|
||||
if (row && row.dataset.path) {
|
||||
e.preventDefault();
|
||||
contextMenuTarget = {
|
||||
path: row.dataset.path,
|
||||
name: row.dataset.name
|
||||
};
|
||||
menu.style.display = 'block';
|
||||
menu.style.left = `${e.pageX}px`;
|
||||
menu.style.top = `${e.pageY}px`;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
document.getElementById('context-menu').style.display = 'none';
|
||||
const uploadMenu = document.getElementById('upload-menu');
|
||||
if (uploadMenu) uploadMenu.style.display = 'none';
|
||||
});
|
||||
|
||||
window.toggleUploadMenu = (e) => {
|
||||
if (e) e.stopPropagation();
|
||||
const menu = document.getElementById('upload-menu');
|
||||
if (menu.style.display === 'none') {
|
||||
menu.style.display = 'block';
|
||||
} else {
|
||||
menu.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
window.handleContextMenu = async (action) => {
|
||||
if (!contextMenuTarget) return;
|
||||
|
||||
const { path, name } = contextMenuTarget;
|
||||
|
||||
try {
|
||||
if (action === 'delete') {
|
||||
if (confirm(`Are you sure you want to delete ${name}?`)) {
|
||||
await Delete(currentConn, path);
|
||||
refreshCurrentDir();
|
||||
}
|
||||
} else if (action === 'rename') {
|
||||
const newName = prompt(`Enter new name for ${name}:`, name);
|
||||
if (newName && newName !== name) {
|
||||
// Construct new path by replacing the last part
|
||||
const pathParts = path.split('/');
|
||||
pathParts[pathParts.length - 1] = newName;
|
||||
const newPath = pathParts.join('/');
|
||||
|
||||
await Rename(currentConn, path, newPath);
|
||||
refreshCurrentDir();
|
||||
}
|
||||
} else if (action === 'download') {
|
||||
await PromptDownload(currentConn, path);
|
||||
showTransfers();
|
||||
}
|
||||
} catch (e) {
|
||||
alert(`Failed to ${action}: ${e}`);
|
||||
}
|
||||
};
|
||||
|
||||
window.promptUploadFiles = async () => {
|
||||
try {
|
||||
await PromptUploadFiles(currentConn, currentPath);
|
||||
showTransfers();
|
||||
} catch (e) {
|
||||
alert("Upload failed: " + e);
|
||||
}
|
||||
};
|
||||
|
||||
window.promptUploadDirectory = async () => {
|
||||
try {
|
||||
await PromptUploadDirectory(currentConn, currentPath);
|
||||
showTransfers();
|
||||
} catch (e) {
|
||||
alert("Upload failed: " + e);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,303 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0a0a0a;
|
||||
--surface: #141414;
|
||||
--surface-hover: #1f1f1f;
|
||||
--border: #2a2a2a;
|
||||
--text-primary: #f0f0f0;
|
||||
--text-secondary: #888888;
|
||||
--accent: #21D198;
|
||||
--accent-hover: #1cb582;
|
||||
--success: #21D198;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
--font: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 250px;
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.conn-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.conn-item {
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.conn-item:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.conn-item.active {
|
||||
border-left: 3px solid var(--accent);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-right: 0.5rem;
|
||||
background: rgba(33, 209, 152, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(33, 209, 152, 0.3);
|
||||
}
|
||||
|
||||
#main-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
height: 60px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
#breadcrumb {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.crumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
.crumb:hover {
|
||||
color: var(--text-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#browser-pane {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
border: 1px solid var(--accent);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 0 10px rgba(33, 209, 152, 0.3);
|
||||
}
|
||||
|
||||
#transfer-tray {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transfer-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
margin: 0 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.transfer-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
width: 200px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
width: 500px;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.25rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="number"], select {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-primary);
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
select option {
|
||||
background-color: var(--surface);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
color: var(--error);
|
||||
border: 1px solid var(--error);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Context Menu */
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user