Overlord/Vile-Browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Overlord
2025-11-25 15:45:35 +01:00
committed by Dean J. Karstedt
parent 4c9c41b86a
commit 76402e6f2f
14 changed files with 1357 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
app/src/assets/dev/index.html Normal file
View File

@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Browser</title>
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="breadcrumbs">Folder Path</div>
<div class="path-container" id="pathContainer">
<!-- Breadcrumbs will be generated here -->
</div>
<div class="controls">
<div class="meta">
<div id="summary">
<span class="meta-item"><b id="dirCount">0</b> directories</span>
<span class="meta-item"><b id="fileCount">0</b> files</span>
<span class="meta-item"><b id="totalSize">0 B</b> total</span>
</div>
<div class="layout-toggle">
<button class="layout-btn active" id="layoutList" onclick="setLayout('list')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="7" rx="1"></rect>
<rect x="3" y="14" width="18" height="7" rx="1"></rect>
</svg>
List
</button>
<button class="layout-btn" id="layoutGrid" onclick="setLayout('grid')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
Grid
</button>
</div>
</div>
<button class="btn theme-toggle" onclick="toggleTheme()">🌙</button>
</div>
</div>
<div class="content">
<div class="listing" id="listing">
<div class="file-list" id="fileList">
<!-- Files will be generated here -->
</div>
</div>
</div>
<script>
// Mock data - replace with actual file data
const mockFiles = [
{ name: 'documents', type: 'directory', size: null, modified: '2024-11-20' },
{ name: 'downloads', type: 'directory', size: null, modified: '2024-11-19' },
{ name: 'projects', type: 'directory', size: null, modified: '2024-11-15' },
{ name: 'report.pdf', type: 'file', size: 2457600, modified: '2024-11-18' },
{ name: 'presentation.pptx', type: 'file', size: 6082560, modified: '2024-11-17' },
{ name: 'data.json', type: 'file', size: 350208, modified: '2024-11-16' },
{ name: 'notes.txt', type: 'file', size: 12288, modified: '2024-11-14' },
{ name: 'archive.zip', type: 'file', size: 131072000, modified: '2024-11-10' },
];
let currentPath = '/home/user/documents';
let currentLayout = 'list';
// Theme management
function initTheme() {
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
updateThemeButton();
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
const newTheme = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateThemeButton();
}
function updateThemeButton() {
const theme = document.documentElement.getAttribute('data-theme');
const btn = document.querySelector('.theme-toggle');
btn.textContent = theme === 'dark' ? '☀️' : '🌙';
}
function getIcon(type, name) {
if (type === 'directory') return '📁';
const ext = name.split('.').pop().toLowerCase();
const icons = {
pdf: '📄', pptx: '📊', xlsx: '📊', csv: '📊',
txt: '📝', md: '📝', json: '🔧', xml: '🔧',
jpg: '🖼️', png: '🖼️', gif: '🖼️', svg: '🖼️',
zip: '🗜️', rar: '🗜️', "7z": '🗜️',
mp3: '🎵', mp4: '🎬', avi: '🎬',
py: '🐍', js: '📜', html: '🌐', css: '🎨'
};
return icons[ext] || '📄';
}
function formatSize(bytes) {
if (!bytes) return '-';
const units = ['B', 'KB', 'MB', 'GB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return (size < 10 ? size.toFixed(2) : size.toFixed(0)) + ' ' + units[unitIndex];
}
function formatDate(dateStr) {
const date = new Date(dateStr);
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
}
function renderBreadcrumbs() {
const parts = currentPath.split('/').filter(p => p);
const pathContainer = document.getElementById('pathContainer');
let html = '<a href="#" onclick="navigateTo(\'/\'); return false;" class="breadcrumb-link">/</a>';
let accumulatedPath = '';
for (let i = 0; i < parts.length; i++) {
accumulatedPath += '/' + parts[i];
const isLast = i === parts.length - 1;
if (isLast) {
html += '<span class="breadcrumb-text">' + parts[i] + '</span>';
} else {
html += '<a href="#" onclick="navigateTo(\'' + accumulatedPath + '\'); return false;" class="breadcrumb-link">' + parts[i] + '</a>';
}
if (i < parts.length - 1) {
html += '<span class="breadcrumb-sep">/</span>';
} else {
html += '<span class="breadcrumb-sep">/</span>';
}
}
pathContainer.innerHTML = html;
}
function renderFileList() {
const fileList = document.getElementById('fileList');
if (mockFiles.length === 0) {
fileList.innerHTML = `
<div class="empty-state">
<div class="empty-state-icon">📭</div>
<p>This folder is empty</p>
</div>
`;
updateSummary(0, 0, 0);
return;
}
// Sort: directories first, then alphabetically
const sorted = [...mockFiles].sort((a, b) => {
if (a.type === b.type) return a.name.localeCompare(b.name);
return a.type === 'directory' ? -1 : 1;
});
let dirCount = 0;
let fileCount = 0;
let totalSize = 0;
if (currentLayout === 'grid') {
const gridItems = sorted.map(file => {
if (file.type === 'directory') dirCount++;
else {
fileCount++;
totalSize += file.size || 0;
}
return `
<div class="grid-item" onclick="handleFileClick('${file.name}', '${file.type}')">
<div class="grid-icon">${getIcon(file.type, file.name)}</div>
<div class="grid-name">${file.name}</div>
${file.size ? `<div class="grid-size">${formatSize(file.size)}</div>` : ''}
</div>
`;
}).join('');
fileList.innerHTML = `<div class="grid">${gridItems}</div>`;
} else {
const tableRows = sorted.map(file => {
if (file.type === 'directory') dirCount++;
else {
fileCount++;
totalSize += file.size || 0;
}
return `
<tr class="file-row ${file.type}" onclick="handleFileClick('${file.name}', '${file.type}')">
<td class="icon">${getIcon(file.type, file.name)}</td>
<td class="name">${file.name}</td>
<td class="size">${file.size ? formatSize(file.size) : '-'}</td>
<td class="date">${formatDate(file.modified)}</td>
</tr>
`;
}).join('');
fileList.innerHTML = `
<table class="file-table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Size</th>
<th>Modified</th>
</tr>
</thead>
<tbody>
${tableRows}
</tbody>
</table>
`;
}
updateSummary(dirCount, fileCount, totalSize);
}
function updateSummary(dirs, files, bytes) {
document.getElementById('dirCount').textContent = dirs;
document.getElementById('fileCount').textContent = files;
document.getElementById('totalSize').textContent = formatSize(bytes);
}
function handleFileClick(name, type) {
if (type === 'directory') {
navigateTo(currentPath + (currentPath.endsWith('/') ? '' : '/') + name);
} else {
console.log('Opening file:', name);
}
}
function navigateTo(path) {
currentPath = path;
renderBreadcrumbs();
renderFileList();
}
function navigateUp() {
const parts = currentPath.split('/').filter(p => p);
if (parts.length > 0) {
parts.pop();
currentPath = '/' + parts.join('/');
if (currentPath === '/') currentPath = '/';
navigateTo(currentPath);
}
}
function refreshList() {
renderFileList();
}
function setLayout(layout) {
currentLayout = layout;
document.getElementById('layoutList').classList.toggle('active', layout === 'list');
document.getElementById('layoutGrid').classList.toggle('active', layout === 'grid');
document.getElementById('listing').classList.toggle('list-view', layout === 'list');
document.getElementById('listing').classList.toggle('grid-view', layout === 'grid');
renderFileList();
}
// Initialize
initTheme();
renderBreadcrumbs();
renderFileList();
</script>
</body>
</html>

260
app/src/assets/dev/ref.html Normal file
View File

@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Browser</title>
<link rel="icon" type="image/x-icon" href="">
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="breadcrumbs">Folder Path</div>
<div class="path-container" id="pathContainer">
<!-- Breadcrumbs will be generated here -->
</div>
<div class="controls">
<div class="meta">
<div id="summary">
<span class="meta-item"><b id="dirCount">0</b> directories</span>
<span class="meta-item"><b id="fileCount">0</b> files</span>
<span class="meta-item"><b id="totalSize">0 B</b> total</span>
</div>
<button class="btn theme-toggle" onclick="toggleTheme()">🌙</button> <!-- needs svgs -->
</div>
</div>
</div>
<div class="content">
<div class="listing" id="listing">
<div class="file-list" id="fileList">
<!-- Files will be generated here -->
</div>
</div>
</div>
</div>
<!-- <script>
// Mock data - replace with actual file data
const mockFiles = [
{ name: 'documents', type: 'directory', size: null, modified: '2024-11-20' },
{ name: 'downloads', type: 'directory', size: null, modified: '2024-11-19' },
{ name: 'projects', type: 'directory', size: null, modified: '2024-11-15' },
{ name: 'report.pdf', type: 'file', size: 2457600, modified: '2024-11-18' },
{ name: 'presentation.pptx', type: 'file', size: 6082560, modified: '2024-11-17' },
{ name: 'data.json', type: 'file', size: 350208, modified: '2024-11-16' },
{ name: 'notes.txt', type: 'file', size: 12288, modified: '2024-11-14' },
{ name: 'archive.zip', type: 'file', size: 131072000, modified: '2024-11-10' },
];
let currentPath = '/home/user/documents';
let currentLayout = 'list';
function initTheme()
{
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
updateThemeButton();
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
const newTheme = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateThemeButton();
}
function updateThemeButton() {
const theme = document.documentElement.getAttribute('data-theme');
const btn = document.querySelector('.theme-toggle');
btn.textContent = theme === 'dark' ? '☀️' : '🌙';
}
function getIcon(type, name) {
if (type === 'directory') return '📁';
const ext = name.split('.').pop().toLowerCase();
const icons = {
pdf: '📄', pptx: '📊', xlsx: '📊', csv: '📊',
txt: '📝', md: '📝', json: '🔧', xml: '🔧',
jpg: '🖼️', png: '🖼️', gif: '🖼️', svg: '🖼️',
zip: '🗜️', rar: '🗜️', "7z": '🗜️',
mp3: '🎵', mp4: '🎬', avi: '🎬',
py: '🐍', js: '📜', html: '🌐', css: '🎨'
};
return icons[ext] || '📄';
}
function formatSize(bytes) {
if (!bytes) return '-';
const units = ['B', 'KB', 'MB', 'GB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return (size < 10 ? size.toFixed(2) : size.toFixed(0)) + ' ' + units[unitIndex];
}
function formatDate(dateStr) {
const date = new Date(dateStr);
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
}
function renderBreadcrumbs() {
const parts = currentPath.split('/').filter(p => p);
const pathContainer = document.getElementById('pathContainer');
let html = '<a href="#" onclick="navigateTo(\'/\'); return false;" class="breadcrumb-link">/</a>';
let accumulatedPath = '';
for (let i = 0; i < parts.length; i++) {
accumulatedPath += '/' + parts[i];
const isLast = i === parts.length - 1;
if (isLast) {
html += '<span class="breadcrumb-text">' + parts[i] + '</span>';
} else {
html += '<a href="#" onclick="navigateTo(\'' + accumulatedPath + '\'); return false;" class="breadcrumb-link">' + parts[i] + '</a>';
}
if (i < parts.length - 1) {
html += '<span class="breadcrumb-sep">/</span>';
} else {
html += '<span class="breadcrumb-sep">/</span>';
}
}
pathContainer.innerHTML = html;
}
function renderFileList() {
const fileList = document.getElementById('fileList');
if (mockFiles.length === 0) {
fileList.innerHTML = `
<div class="empty-state">
<div class="empty-state-icon">📭</div>
<p>This folder is empty</p>
</div>
`;
updateSummary(0, 0, 0);
return;
}
// Sort: directories first, then alphabetically
const sorted = [...mockFiles].sort((a, b) => {
if (a.type === b.type) return a.name.localeCompare(b.name);
return a.type === 'directory' ? -1 : 1;
});
let dirCount = 0;
let fileCount = 0;
let totalSize = 0;
if (currentLayout === 'grid') {
const gridItems = sorted.map(file => {
if (file.type === 'directory') dirCount++;
else {
fileCount++;
totalSize += file.size || 0;
}
return `
<div class="grid-item" onclick="handleFileClick('${file.name}', '${file.type}')">
<div class="grid-icon">${getIcon(file.type, file.name)}</div>
<div class="grid-name">${file.name}</div>
${file.size ? `<div class="grid-size">${formatSize(file.size)}</div>` : ''}
</div>
`;
}).join('');
fileList.innerHTML = `<div class="grid">${gridItems}</div>`;
} else {
const tableRows = sorted.map(file => {
if (file.type === 'directory') dirCount++;
else {
fileCount++;
totalSize += file.size || 0;
}
return `
<tr class="file-row ${file.type}" onclick="handleFileClick('${file.name}', '${file.type}')">
<td class="icon">${getIcon(file.type, file.name)}</td>
<td class="name">${file.name}</td>
<td class="size">${file.size ? formatSize(file.size) : '-'}</td>
<td class="date">${formatDate(file.modified)}</td>
</tr>
`;
}).join('');
fileList.innerHTML = `
<table class="file-table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Size</th>
<th>Modified</th>
</tr>
</thead>
<tbody>
${tableRows}
</tbody>
</table>
`;
}
updateSummary(dirCount, fileCount, totalSize);
}
function updateSummary(dirs, files, bytes) {
document.getElementById('dirCount').textContent = dirs;
document.getElementById('fileCount').textContent = files;
document.getElementById('totalSize').textContent = formatSize(bytes);
}
function handleFileClick(name, type) {
if (type === 'directory') {
navigateTo(currentPath + (currentPath.endsWith('/') ? '' : '/') + name);
} else {
console.log('Opening file:', name);
}
}
function navigateTo(path) {
currentPath = path;
renderBreadcrumbs();
renderFileList();
}
function navigateUp() {
const parts = currentPath.split('/').filter(p => p);
if (parts.length > 0) {
parts.pop();
currentPath = '/' + parts.join('/');
if (currentPath === '/') currentPath = '/';
navigateTo(currentPath);
}
}
function refreshList() {
renderFileList();
}
function setLayout(layout) {
currentLayout = layout;
document.getElementById('layoutList').classList.toggle('active', layout === 'list');
document.getElementById('layoutGrid').classList.toggle('active', layout === 'grid');
document.getElementById('listing').classList.toggle('list-view', layout === 'list');
document.getElementById('listing').classList.toggle('grid-view', layout === 'grid');
renderFileList();
}
// Initialize
initTheme();
renderBreadcrumbs();
renderFileList();
</script> -->
</body>
</html>

101
app/src/assets/style/error.css Normal file
View File

@@ -0,0 +1,101 @@
* { margin:0; padding:0; box-sizing:border-box; }
:root[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f5f7fb;
--bg-tertiary: #eff2f5;
--text-primary: #1a202c;
--text-secondary: #6c757d;
--border-color: #d4d7de;
--accent: #0051ba;
--accent-hover: #003e8f;
}
:root[data-theme="dark"] {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--border-color: #30363d;
--accent: #58a6ff;
--accent-hover: #79c0ff;
}
:root {
--bg-primary:#0d1117;
--bg-secondary:#161b22;
--bg-tertiary:#21262d;
--text-primary:#e6edf3;
--text-secondary:#8b949e;
--border-color:#30363d;
--accent:#58a6ff;
--accent-hover:#79c0ff;
@media (prefers-color-scheme: light) {
--bg-primary: #ffffff;
--bg-secondary: #f5f7fb;
--bg-tertiary: #eff2f5;
--text-primary: #1a202c;
--text-secondary: #6c757d;
--border-color: #d4d7de;
--accent: #0051ba;
--accent-hover: #003e8f;
}
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
text-align: center;
transition: background-color 0.3s, color 0.3s;
}
h1 {
font-size: 6rem;
margin-bottom: 1rem;
color: var(--accent);
}
p {
font-size: 1.25rem;
margin-bottom: 2rem;
color: var(--text-secondary);
}
a.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 0.375rem;
text-decoration: none;
transition: all 0.2s ease;
}
a.btn:hover {
background-color: var(--accent);
border-color: var(--accent);
color: #fff;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--bg-primary: #ffffff;
--bg-secondary: #f5f7fb;
--bg-tertiary: #eff2f5;
--text-primary: #1a202c;
--text-secondary: #6c757d;
--border-color: #d4d7de;
--accent: #0051ba;
--accent-hover: #003e8f;
}
}

476
app/src/assets/style/style.css Normal file
View File

@@ -0,0 +1,476 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Light Mode (Cloudflare Dashboard Style) */
:root[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f5f7fb;
--bg-tertiary: #eff2f5;
--text-primary: #1a202c;
--text-secondary: #6c757d;
--border-color: #d4d7de;
--accent: #0051ba;
--accent-hover: #003e8f;
--file-hover: #f0f2f5;
}
/* Dark Mode (GitHub Style) */
:root[data-theme="dark"] {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--border-color: #30363d;
--accent: #58a6ff;
--accent-hover: #79c0ff;
--file-hover: #1c2128;
}
/* Default to dark mode */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--border-color: #30363d;
--accent: #58a6ff;
--accent-hover: #79c0ff;
--file-hover: #1c2128;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 1.5rem;
position: sticky;
top: 0;
z-index: 10;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.breadcrumbs {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
color: var(--text-secondary);
margin-bottom: 0.5rem;
padding-left: 3px;
}
.path-container {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
word-break: break-all;
margin-bottom: 1rem;
font-size: 1rem;
}
.breadcrumb-link {
color: var(--accent);
text-decoration: none;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: all 0.2s ease;
cursor: pointer;
}
.breadcrumb-link:hover {
background-color: var(--bg-tertiary);
color: var(--accent-hover);
}
.breadcrumb-text {
color: var(--text-secondary);
padding: 0.25rem 0.5rem;
}
.breadcrumb-sep {
color: var(--text-secondary);
margin: 0 0.25rem;
}
.controls {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.btn {
padding: 0.5rem 1rem;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-primary);
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.875rem;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn:hover {
background-color: var(--accent);
border-color: var(--accent);
color: #ffffff;
}
.btn:active {
transform: scale(0.98);
}
.content {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--bg-secondary);
}
.meta {
display: flex;
gap: 2rem;
font-size: 0.875rem;
flex-wrap: wrap;
}
#summary {
display: flex;
gap: 2rem;
align-items: center;
}
.meta-item {
white-space: nowrap;
}
.meta-item b {
color: var(--text-primary);
font-weight: 600;
}
.layout-toggle {
display: flex;
gap: 0.5rem;
border: 1px solid var(--border-color);
border-radius: 0.375rem;
padding: 0.25rem;
background-color: var(--bg-tertiary);
}
.layout-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
border-radius: 0.25rem;
transition: all 0.2s ease;
font-size: 0.875rem;
}
.layout-btn:hover {
color: var(--text-primary);
background-color: var(--bg-secondary);
}
.layout-btn.active {
background-color: var(--accent);
color: white;
}
.listing {
flex: 1;
padding: 1.5rem;
overflow-x: auto;
}
/* Table Layout */
.file-table {
width: 100%;
border-collapse: collapse;
}
.file-table thead {
position: sticky;
top: 0;
background-color: var(--bg-secondary);
z-index: 5;
}
.file-table th {
text-align: left;
padding: 0.75rem;
border-bottom: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.file-table tbody tr {
border-bottom: 1px solid var(--border-color);
transition: all 0.2s ease;
cursor: pointer;
}
.file-table tbody tr:hover {
background-color: var(--file-hover);
}
.file-table td {
padding: 0.75rem;
color: var(--text-primary);
}
.file-table td.icon {
width: 2.5rem;
font-size: 1.25rem;
text-align: center;
}
.file-table td.name {
font-weight: 500;
}
.file-table tr.directory td.name {
color: var(--accent);
font-weight: 600;
}
.file-table td.size,
.file-table td.date {
color: var(--text-secondary);
font-size: 0.875rem;
white-space: nowrap;
}
/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
}
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.grid-item:hover {
background-color: var(--file-hover);
border-color: var(--accent);
transform: translateY(-2px);
}
.grid-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.grid-name {
font-weight: 500;
color: var(--text-primary);
word-break: break-word;
overflow-wrap: break-word;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.grid-item:has(.grid-name) .grid-name {
color: var(--accent);
font-weight: 600;
}
.grid-size {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: auto;
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
/* Responsive Design */
@media (max-width: 768px) {
.header {
padding: 1rem;
}
.listing {
padding: 1rem;
}
.content {
padding: 1rem;
flex-direction: column;
align-items: flex-start;
}
.file-table td.date {
display: none;
}
.file-table th:last-child {
display: none;
}
.grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 0.75rem;
}
.grid-item {
padding: 0.75rem;
}
.path-container {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.meta {
gap: 1rem;
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.container {
min-height: auto;
}
.header {
padding: 0.75rem;
}
.listing {
padding: 0.75rem;
}
.content {
padding: 0.75rem;
gap: 0.5rem;
}
.path-container {
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.breadcrumb-link,
.breadcrumb-text,
.breadcrumb-sep {
padding: 0.125rem 0.25rem;
}
.controls {
width: 100%;
gap: 0.5rem;
}
.btn {
flex: 1;
padding: 0.5rem;
font-size: 0.75rem;
}
.meta {
gap: 1rem;
font-size: 0.75rem;
flex-direction: column;
}
.file-table th,
.file-table td {
padding: 0.5rem 0.25rem;
}
.file-table td.size {
display: none;
}
.grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 0.5rem;
}
.grid-item {
padding: 0.5rem;
}
.grid-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.grid-name {
font-size: 0.7rem;
}
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}

BIN
app/src/assets/style/style.css.zst Normal file
View File

Binary file not shown.