M_Viper/Git-Manager-Gui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Update from Git Manager GUI

Browse Source
This commit is contained in:
M_Viper
2026-03-25 23:07:07 +01:00
parent 89272fb899
commit 2a9812575c
4 changed files with 2624 additions and 1862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
renderer/Settings.jsx
View File

@@ -1,10 +1,13 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
export default function Settings({ onClose }) {
const [githubToken, setGithubToken] = useState('');
const [giteaToken, setGiteaToken] = useState('');
const [giteaURL, setGiteaURL] = useState('');
const [avatarB64, setAvatarB64] = useState(null);
const [savedOk, setSavedOk] = useState(false);
const [avatarUploading, setAvatarUploading] = useState(false);
const fileInputRef = useRef(null);
function normalizeAndValidateGiteaUrl(rawUrl) {
const value = (rawUrl || '').trim();
@@ -36,17 +39,46 @@ export default function Settings({ onClose }) {
setGithubToken(data.githubToken || '');
setGiteaToken(data.giteaToken || '');
setGiteaURL(data.giteaURL || '');
setAvatarB64(data.avatarB64 || null);
}
});
}, []);
function save() {
function handleAvatarFileChange(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => setAvatarB64(ev.target.result);
reader.readAsDataURL(file);
}
async function save() {
const checkedUrl = normalizeAndValidateGiteaUrl(giteaURL);
if (!checkedUrl.ok) {
alert(checkedUrl.error);
return;
}
window.electronAPI.saveCredentials({ githubToken, giteaToken, giteaURL: checkedUrl.value });
window.electronAPI.saveCredentials({
githubToken,
giteaToken,
giteaURL: checkedUrl.value,
avatarB64: avatarB64 || null
});
// Avatar automatisch zu Gitea pushen, wenn Token + URL vorhanden
if (avatarB64 && giteaToken && checkedUrl.value) {
setAvatarUploading(true);
const result = await window.electronAPI.updateGiteaAvatar({
token: giteaToken,
url: checkedUrl.value,
imageBase64: avatarB64
});
setAvatarUploading(false);
if (!result.ok) {
console.warn('Avatar-Upload fehlgeschlagen:', result.error);
}
}
setSavedOk(true);
setTimeout(() => setSavedOk(false), 2500);
}
@@ -55,12 +87,28 @@ export default function Settings({ onClose }) {
<div className="modalContent card settings-modal-content">
<div className="settings-header">
<div>
<div className="settings-eyebrow">Konfiguration</div>
<h2>⚙️ Einstellungen</h2>
<p className="settings-subtitle">
Zugangsdaten für GitHub und Gitea hinterlegen.
</p>
<div className="settings-header-inner">
<div className="settings-avatar-wrap" onClick={() => fileInputRef.current?.click()} title="Profilbild ändern">
{avatarB64
? <img src={avatarB64} alt="Avatar" className="settings-avatar-img" />
: <div className="settings-avatar-placeholder">👤</div>
}
<div className="settings-avatar-overlay">✏️</div>
<input
ref={fileInputRef}
type="file"
accept="image/*"
style={{ display: 'none' }}
onChange={handleAvatarFileChange}
/>
</div>
<div>
<div className="settings-eyebrow">Konfiguration</div>
<h2>⚙️ Einstellungen</h2>
<p className="settings-subtitle">
Zugangsdaten für GitHub und Gitea hinterlegen.
</p>
</div>
</div>
</div>
@@ -121,9 +169,10 @@ export default function Settings({ onClose }) {
<button
className="accent-btn"
onClick={save}
disabled={avatarUploading}
style={savedOk ? { background: 'var(--success)', borderColor: 'var(--success)' } : {}}
>
{savedOk ? '✅ Gespeichert' : 'Speichern'}
{avatarUploading ? '⏳ Bild wird hochgeladen…' : savedOk ? '✅ Gespeichert' : 'Speichern'}
</button>
{onClose && (
<button className="secondary" onClick={onClose}>Abbrechen</button>

220
renderer/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<title>Git Manager Explorer Pro</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https: http:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';">
<link rel="icon" type="image/png" href="./icon.png">
<link rel="stylesheet" href="style.css">
</head>
@@ -43,6 +44,7 @@
<div class="toolbar-top-actions">
<div class="tool-group tool-group--quick-actions">
<button id="btnOpenRepoActions" title="Neues Repository erstellen">🚀 New Repo</button>
<button id="btnOpenMigration" title="Repository von GitHub/GitLab zu Gitea migrieren">📥 Migrieren</button>
<button id="btnPush" title="Projekt pushen">⬆️ Push</button>
</div>
@@ -66,7 +68,7 @@
<div class="tool-group tool-group--workspace">
<span class="tool-group-title">Quelle</span>
<button id="btnSelectFolder" class="accent-btn" title="Lokalen Ordner öffnen">📂 Open Local</button>
<button id="btnLoadGiteaRepos" class="accent-btn" title="Gitea Repositories laden">🌐 Load Gitea</button>
<button id="btnLoadGiteaRepos" class="accent-btn" title="Projekte der gewählten Plattform laden">🌐 Load Projekte</button>
</div>
<div class="tool-group tool-group--repo">
@@ -104,10 +106,19 @@
</div>
<div class="settings-header">
<div>
<div class="settings-eyebrow">Konfiguration</div>
<h2>⚙️ Einstellungen</h2>
<p class="settings-subtitle">Alle wichtigen Optionen auf einer Seite: Zugangsdaten, Verbindungscheck, Darstellung und Updates.</p>
<div class="settings-header-inner">
<div class="settings-avatar-wrap" id="settingsAvatarWrap" title="Profilbild ändern">
<img id="settingsAvatarImg" class="settings-avatar-img" src="" alt="Avatar" style="display:none;">
<div id="settingsAvatarPlaceholder" class="settings-avatar-placeholder">👤</div>
<div class="settings-avatar-overlay">✏️</div>
<input id="settingsAvatarInput" type="file" accept="image/*" style="display:none;">
</div>
<button id="btnUploadAvatar" class="settings-avatar-upload-btn" title="Gespeichertes Bild jetzt auf Gitea hochladen">📤 Auf Gitea aktualisieren</button>
<div>
<div class="settings-eyebrow">Konfiguration</div>
<h2>⚙️ Einstellungen</h2>
<p class="settings-subtitle">Alle wichtigen Optionen auf einer Seite: Zugangsdaten, Verbindungscheck, Darstellung und Updates.</p>
</div>
</div>
</div>
@@ -121,25 +132,35 @@
</div>
</div>
<div class="settings-fields-grid">
<div class="input-group">
<label for="githubToken">GitHub Token</label>
<input id="githubToken" type="password" placeholder="ghp_...">
</div>
<div class="settings-credentials-grid">
<article class="settings-auth-card settings-auth-card--github">
<div class="settings-auth-card-header">
<h4>GitHub</h4>
<button id="btnTestGithubConnection" class="secondary" type="button">🔌 Verbindung testen</button>
</div>
<div class="input-group settings-auth-input">
<label for="githubToken">GitHub Token</label>
<input id="githubToken" type="password" placeholder="ghp_...">
</div>
<div class="settings-auth-spacer" aria-hidden="true">GitHub benötigt keine Server-URL</div>
<div id="githubTokenHint" class="settings-inline-hint">Hinweis: Der Token wird direkt über api.github.com geprüft.</div>
</article>
<div class="input-group">
<label for="giteaToken">Gitea Token</label>
<input id="giteaToken" type="password" placeholder="Token hier einfügen">
</div>
</div>
<div class="input-group input-group--wide">
<label for="giteaURL">Gitea URL</label>
<input id="giteaURL" type="text" placeholder="https://gitea.example.com">
<div class="settings-connection-tools">
<article class="settings-auth-card settings-auth-card--gitea">
<div class="settings-auth-card-header">
<h4>Gitea</h4>
<button id="btnTestGiteaConnection" class="secondary" type="button">🔌 Verbindung testen</button>
</div>
<div class="input-group settings-auth-input">
<label for="giteaToken">Gitea Token</label>
<input id="giteaToken" type="password" placeholder="Token hier einfügen">
</div>
<div class="input-group settings-auth-input">
<label for="giteaURL">Gitea URL</label>
<input id="giteaURL" type="text" placeholder="https://gitea.example.com">
</div>
<div id="giteaUrlHint" class="settings-inline-hint">Hinweis: IPv6 mit Klammern eingeben, z.B. http://[2001:db8::1]:3000</div>
<button id="btnTestGiteaConnection" class="secondary">🔌 Verbindung testen</button>
</div>
</article>
</div>
</section>
@@ -195,43 +216,8 @@
<span class="toggle-track"></span>
</span>
</label>
</div>
</section>
<section class="settings-panel settings-panel--backups">
<div class="settings-panel-header">
<div>
<h3>💽 Lokale Backups</h3>
<p>Automatische lokale Backups in einen Zielordner.</p>
</div>
</div>
<div class="settings-toggle-list">
<label class="settings-toggle-row" for="settingAutoBackup">
<span class="settings-toggle-info">
<span class="settings-toggle-title">🔄 Auto-Backup nach Push</span>
<span class="settings-toggle-desc">Erstellt automatisch vor jedem Upload ein lokales Backup im gewählten Zielordner.</span>
</span>
<span class="toggle-switch">
<input type="checkbox" id="settingAutoBackup">
<span class="toggle-track"></span>
</span>
</label>
</div>
<button id="btnOpenBackupManagement" style="
width: 100%;
padding: 12px;
background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(100,200,255,0.05));
border: 1px solid rgba(0,212,255,0.3);
border-radius: 6px;
color: var(--accent-primary);
cursor: pointer;
font-weight: 500;
margin-top: 12px;
">
💾 Backup-Verwaltung öffnen →
</button>
</section>
</div>
@@ -350,6 +336,60 @@
</div>
</div>
<!-- Migration Modal -->
<div id="migrationModal" class="modal hidden">
<div class="modalContent card migration-modal-content">
<h2>📥 Repository migrieren</h2>
<p class="settings-subtitle">Ein Repository von GitHub, GitLab oder einer anderen Git-Quelle auf deine Gitea-Instanz kopieren.</p>
<div class="migration-fields">
<div class="input-group">
<label for="migrateCloneUrl">Quell-URL (Clone-URL)</label>
<input id="migrateCloneUrl" type="text" placeholder="https://github.com/benutzer/repo.git">
<div class="settings-inline-hint">Beispiel: https://github.com/M_Viper/NexTrade.git</div>
</div>
<div class="input-group">
<label for="migrateRepoName">Neuer Repository-Name auf Gitea</label>
<input id="migrateRepoName" type="text" placeholder="NexTrade">
</div>
<div class="input-group">
<label for="migrateDescription">Beschreibung (optional)</label>
<input id="migrateDescription" type="text" placeholder="">
</div>
<div class="migration-row-split">
<div class="input-group">
<label for="migrateAuthUsername">Auth-Benutzername (bei privaten Repos)</label>
<input id="migrateAuthUsername" type="text" placeholder="GitHub-Benutzername">
</div>
<div class="input-group">
<label for="migrateAuthToken">Auth-Token (bei privaten Repos)</label>
<input id="migrateAuthToken" type="password" placeholder="ghp_…">
</div>
</div>
<label class="settings-toggle-row" style="margin-top:4px;" for="migratePrivate">
<span class="settings-toggle-info">
<span class="settings-toggle-title">🔒 Privates Repository</span>
</span>
<span class="toggle-switch">
<input type="checkbox" id="migratePrivate">
<span class="toggle-track"></span>
</span>
</label>
</div>
<div id="migrationStatus" class="migration-status hidden"></div>
<div class="modal-buttons">
<button id="btnStartMigration" class="accent-btn">📥 Migration starten</button>
<button id="btnCloseMigration" class="secondary">Abbrechen</button>
</div>
</div>
</div>
<div id="batchActionModal" class="modal hidden">
<div class="modalContent card">
<h2>🧩 Batch-Aktionen</h2>
@@ -502,72 +542,6 @@
</div>
</div>
<!-- Backup Management Modal -->
<div id="backupManagementModal" class="hidden">
<div class="backup-management-card">
<div class="backup-modal-header">
<h2 style="margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px;">
<span>📦</span> Backup-Verwaltung
</h2>
<button id="btnCloseBackupModal" class="backup-modal-close" title="Schließen">✕</button>
</div>
<div class="backup-modal-body">
<div class="backup-credentials-section" style="display: flex;">
<div class="backup-input-group">
<label for="backupSourceSelect">Backup-Quelle (aus vorhandenen Projekten)</label>
<select id="backupSourceSelect">
<option value="">-- Wähle aus vorhandenen Projekten --</option>
</select>
<small style="color: var(--text-muted); font-size: 11px;">
Option "Alles komplett sichern" erstellt Backups aller verfügbaren Git-Projekte im gewählten Zielordner.
</small>
</div>
</div>
<!-- Local Credentials -->
<div id="localCredentials" class="backup-credentials-section">
<div class="backup-input-group">
<label for="localBackupFolder">Backup-Zielordner</label>
<div style="display: grid; grid-template-columns: 1fr auto; gap: 8px;">
<input id="localBackupFolder" type="text" placeholder="C:/Backups/GitManager" readonly>
<button id="btnPickLocalBackupFolder" class="backup-btn backup-btn-secondary" type="button" style="min-width: 120px;">📁 Ordner wählen</button>
</div>
</div>
</div>
<!-- Section Divider -->
<div style="height: 1px; background: rgba(88, 213, 255, 0.2); margin: 8px 0;"></div>
<!-- Backup List Section -->
<div style="margin-top: 16px;">
<h3 style="margin: 0 0 12px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-primary);">📋 Gespeicherte Backups</h3>
<div id="backupListContainer" style="
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
max-height: 250px;
overflow-y: auto;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
">
<div style="padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px;">
⏳ Lade Liste... oder keine Backups vorhanden
</div>
</div>
<!-- Backup Action Buttons -->
<div class="backup-modal-buttons">
<button id="btnCreateBackupNow" class="backup-btn backup-btn-primary" style="flex: 1;">➕ Backup erstellen</button>
<button id="btnRefreshBackupsList" class="backup-btn backup-btn-secondary" style="flex: 1;">🔄 Aktualisieren</button>
</div>
</div>
</div>
</div>
</div>
</div> <script src="renderer.js"></script>
</body>
</html>

3460
renderer/renderer.js
View File

File diff suppressed because it is too large Load Diff

737
renderer/style.css
View File

@@ -789,9 +789,11 @@ body {
display: flex;
flex-direction: column;
gap: 6px;
max-height: calc(100vh - 270px);
flex: 1;
min-height: 0;
overflow: auto;
padding-right: 2px;
padding-bottom: 8px;
}
.fav-history-list::-webkit-scrollbar {
@@ -857,10 +859,6 @@ body {
width: 180px;
margin: 12px 0 12px 12px;
}
.fav-history-list {
max-height: 180px;
}
}
/* Global Drop Zone Indicator */
@@ -1047,6 +1045,14 @@ body.compact-mode .item-card:hover {
justify-content: center;
}
.repo-avatar-img {
width: 52px;
height: 52px;
border-radius: 10px;
object-fit: cover;
display: block;
}
.item-card:hover .item-icon {
transform: translateY(-2px) scale(1.08) rotate(-4deg);
}
@@ -1065,6 +1071,16 @@ body.compact-mode .item-card:hover {
color: var(--accent-primary);
}
.item-submeta {
margin-top: 4px;
font-size: 11px;
color: var(--text-muted);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ===========================
MODALS
=========================== */
@@ -1310,8 +1326,9 @@ input[type="checkbox"] {
border-color: rgba(255, 255, 255, 0.3);
}
#btnTestGiteaConnection {
margin-top: 10px;
#btnTestGiteaConnection,
#btnTestGithubConnection {
margin-top: 0;
min-height: 40px;
border-radius: var(--radius-md);
padding: 0 14px;
@@ -1325,18 +1342,21 @@ input[type="checkbox"] {
transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}
#btnTestGiteaConnection:hover {
#btnTestGiteaConnection:hover,
#btnTestGithubConnection:hover {
transform: translateY(-1px);
border-color: var(--accent-primary);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 212, 255, 0.14) 100%);
box-shadow: var(--shadow-md);
}
#btnTestGiteaConnection:active {
#btnTestGiteaConnection:active,
#btnTestGithubConnection:active {
transform: translateY(0);
}
#btnTestGiteaConnection:focus-visible {
#btnTestGiteaConnection:focus-visible,
#btnTestGithubConnection:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
}
@@ -1432,6 +1452,81 @@ input[type="checkbox"] {
margin-bottom: 14px;
}
.settings-header-inner {
display: flex;
align-items: center;
gap: 16px;
}
/* Avatar-Upload-Button */
.settings-avatar-upload-btn {
display: block;
margin-top: 6px;
padding: 4px 10px;
font-size: 11px;
border-radius: var(--radius);
border: 1px solid rgba(88, 213, 255, 0.3);
background: rgba(88, 213, 255, 0.08);
color: var(--accent-primary);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.settings-avatar-upload-btn:hover:not(:disabled) {
background: rgba(88, 213, 255, 0.18);
border-color: rgba(88, 213, 255, 0.6);
}
.settings-avatar-upload-btn:disabled {
opacity: 0.6;
cursor: wait;
}
/* Avatar-Picker */
.settings-avatar-wrap {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
border: 2px solid rgba(88, 213, 255, 0.35);
background: rgba(88, 213, 255, 0.08);
transition: border-color 0.2s;
}
.settings-avatar-wrap:hover {
border-color: rgba(88, 213, 255, 0.7);
}
.settings-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.settings-avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
line-height: 1;
}
.settings-avatar-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
opacity: 0;
transition: opacity 0.2s;
}
.settings-avatar-wrap:hover .settings-avatar-overlay {
opacity: 1;
}
.settings-eyebrow {
display: inline-flex;
align-items: center;
@@ -1530,6 +1625,66 @@ input[type="checkbox"] {
margin-bottom: 10px;
}
.settings-credentials-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.settings-auth-card {
display: grid;
gap: 8px;
padding: 12px;
min-height: 252px;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.settings-auth-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.settings-auth-card-header button {
min-width: 170px;
}
.settings-auth-card-header h4 {
margin: 0;
color: #c8d8f2;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.settings-auth-input {
margin-bottom: 0;
}
.settings-auth-card .settings-inline-hint {
min-height: 34px;
margin-top: auto;
}
.settings-auth-spacer {
min-height: 78px;
border: 1px dashed rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 12px;
text-align: center;
padding: 8px;
background: rgba(255, 255, 255, 0.01);
}
.settings-connection-tools {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
@@ -1776,6 +1931,56 @@ input[type="checkbox"] {
transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}
.repo-owner-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.repo-owner-tab {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border-radius: 999px;
min-height: 32px;
padding: 0 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.repo-owner-tab span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
font-size: 11px;
color: var(--text-muted);
}
.repo-owner-tab:hover {
border-color: rgba(88, 213, 255, 0.45);
color: #d9f7ff;
}
.repo-owner-tab.active {
border-color: rgba(88, 213, 255, 0.65);
background: linear-gradient(135deg, rgba(88, 213, 255, 0.2), rgba(92, 135, 255, 0.18));
color: #ecf8ff;
}
.repo-owner-tab.active span {
background: rgba(88, 213, 255, 0.22);
color: #dff6ff;
}
.repo-search-clear:hover {
border-color: rgba(88, 213, 255, 0.45);
background: linear-gradient(180deg, rgba(88, 213, 255, 0.18) 0%, rgba(88, 213, 255, 0.10) 100%);
@@ -1959,6 +2164,97 @@ input[type="checkbox"] {
background: rgba(255, 255, 255, 0.12);
}
.tags-editor-selected {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-height: 38px;
padding: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
}
.tags-editor-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-top: 8px;
align-items: center;
}
.tags-editor-input {
width: 100%;
min-height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(10, 18, 30, 0.95);
color: var(--text-primary);
}
.tags-editor-add-btn {
min-height: 38px;
white-space: nowrap;
padding: 0 14px;
border-radius: 10px;
border: 1px solid rgba(88, 213, 255, 0.36);
background: linear-gradient(135deg, rgba(88, 213, 255, 0.24), rgba(92, 135, 255, 0.22));
color: #c8f5ff;
font-weight: 700;
cursor: pointer;
}
.tags-editor-add-btn:hover {
border-color: rgba(88, 213, 255, 0.62);
background: linear-gradient(135deg, rgba(88, 213, 255, 0.34), rgba(92, 135, 255, 0.31));
}
.tags-editor-suggestions {
margin-top: 8px;
max-height: 170px;
overflow: auto;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: rgba(10, 18, 30, 0.95);
}
.tags-editor-suggestion-item {
display: block;
width: 100%;
text-align: left;
padding: 9px 12px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: transparent;
color: var(--text-primary);
cursor: pointer;
font-size: 13px;
}
.tags-editor-suggestion-item:hover {
background: rgba(255, 255, 255, 0.07);
}
.tags-editor-suggestions::-webkit-scrollbar {
width: 10px;
}
.tags-editor-suggestions::-webkit-scrollbar-track {
background: rgba(6, 12, 22, 0.85);
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.tags-editor-suggestions::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(88, 213, 255, 0.45), rgba(92, 135, 255, 0.45));
border-radius: 999px;
border: 2px solid rgba(6, 12, 22, 0.9);
}
.tags-editor-suggestions::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(88, 213, 255, 0.68), rgba(92, 135, 255, 0.68));
}
.activity-heatmap-months {
margin-left: calc(var(--hm-weekday-col) + var(--hm-grid-gap));
width: max-content;
@@ -3165,6 +3461,14 @@ progress::-moz-progress-bar {
.settings-column {
gap: 12px;
}
.settings-credentials-grid {
grid-template-columns: minmax(0, 1fr);
}
.settings-auth-card {
min-height: 0;
}
}
@media (max-width: 760px) {
@@ -3179,6 +3483,7 @@ progress::-moz-progress-bar {
}
.settings-fields-grid,
.settings-credentials-grid,
.settings-connection-tools,
.settings-version-card,
.modal-buttons {
@@ -3186,7 +3491,8 @@ progress::-moz-progress-bar {
}
.settings-update-btn,
#btnTestGiteaConnection {
#btnTestGiteaConnection,
#btnTestGithubConnection {
width: 100%;
}
@@ -3292,413 +3598,4 @@ body.compact-mode .file-type-badge {
.fav-chip[draggable="true"] {
cursor: grab;
}
/* ═══════════════════════════════════════════════════════════
✅ BACKUP MANAGEMENT MODAL - STYLES
═══════════════════════════════════════════════════════════ */
#backupManagementModal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99999;
backdrop-filter: blur(4px);
}
#backupManagementModal.hidden {
display: none;
}
.backup-management-card {
background: var(--bg-secondary);
border: 1px solid rgba(88, 213, 255, 0.2);
border-radius: var(--radius-lg);
width: 90%;
max-width: 700px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: slideUp 0.3s ease-out;
overflow: hidden;
}
.backup-modal-header {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.backup-modal-header h2 {
font-size: 18px;
font-weight: 700;
margin: 0;
color: var(--text-primary);
}
.backup-modal-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 20px;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all var(--transition-fast);
}
.backup-modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--accent-primary);
}
.backup-modal-body {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.backup-modal-body::-webkit-scrollbar {
width: 10px;
}
.backup-modal-body::-webkit-scrollbar-track {
background: rgba(9, 20, 39, 0.75);
border-left: 1px solid rgba(88, 213, 255, 0.12);
}
.backup-modal-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(88, 213, 255, 0.55), rgba(92, 135, 255, 0.55));
border-radius: 10px;
border: 2px solid rgba(9, 20, 39, 0.9);
}
.backup-modal-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(88, 213, 255, 0.8), rgba(92, 135, 255, 0.8));
}
/* Provider Selection */
.backup-provider-select {
display: flex;
flex-direction: column;
gap: 8px;
}
.backup-provider-select label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent-primary);
}
#backupProviderSelect {
padding: 10px 12px;
background: var(--bg-tertiary);
border: 1px solid rgba(88, 213, 255, 0.25);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: all var(--transition-fast);
}
#backupProviderSelect:hover {
border-color: rgba(88, 213, 255, 0.4);
background: rgba(19, 33, 58, 0.8);
}
#backupProviderSelect:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(88, 213, 255, 0.15);
background: rgba(19, 33, 58, 0.9);
}
#backupProviderSelect option {
background: var(--bg-secondary);
color: var(--text-primary);
padding: 8px;
}
/* Credentials Sections */
.backup-credentials-section {
display: none;
padding: 12px;
background: linear-gradient(135deg, rgba(88, 213, 255, 0.08) 0%, rgba(122, 81, 255, 0.05) 100%);
border: 1px solid rgba(88, 213, 255, 0.2);
border-radius: var(--radius-md);
gap: 12px;
flex-direction: column;
animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.backup-credentials-section.active {
display: flex;
}
.backup-credentials-section input,
.backup-credentials-section textarea,
.backup-credentials-section select {
padding: 9px 10px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: var(--text-primary);
font-size: 12px;
font-family: inherit;
transition: all var(--transition-fast);
}
.backup-credentials-section input::placeholder {
color: rgba(174, 189, 216, 0.35);
}
.backup-credentials-section input:focus,
.backup-credentials-section textarea:focus,
.backup-credentials-section select:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(88, 213, 255, 0.12);
background: rgba(0, 0, 0, 0.4);
}
.backup-credentials-section select option {
background: var(--bg-secondary);
color: var(--text-primary);
}
.backup-input-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.backup-input-group label {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Buttons */
.backup-modal-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
padding: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.backup-btn {
padding: 10px 16px;
border-radius: var(--radius-md);
border: none;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: inherit;
}
.backup-btn-primary {
background: var(--accent-gradient);
color: #000;
box-shadow: 0 4px 12px rgba(88, 213, 255, 0.25);
}
.backup-btn-primary:hover {
box-shadow: 0 8px 20px rgba(88, 213, 255, 0.35);
transform: translateY(-2px);
}
.backup-btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(88, 213, 255, 0.25);
}
.backup-btn-secondary {
background: transparent;
border: 1.5px solid rgba(88, 213, 255, 0.35);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.backup-btn-secondary:hover {
background: rgba(88, 213, 255, 0.12);
border-color: var(--accent-primary);
color: var(--accent-primary);
box-shadow: 0 4px 12px rgba(88, 213, 255, 0.15);
transform: translateY(-1px);
}
.backup-btn-secondary:active {
transform: translateY(0);
}
.backup-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Backup List */
#backupListContainer {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 100%);
border: 1px solid rgba(88, 213, 255, 0.15);
border-radius: var(--radius-md);
max-height: 250px;
overflow-y: auto;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.backup-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background var(--transition-fast);
width: 100%;
}
.backup-list-info {
flex: 1 1 auto;
min-width: 0;
}
.backup-list-name {
font-weight: 600;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.backup-list-meta {
color: var(--text-muted);
font-size: 12px;
}
.backup-list-actions {
flex: 0 0 auto;
display: flex;
gap: 8px;
align-items: center;
}
.backup-list-action {
appearance: none;
border-radius: 8px;
padding: 7px 12px;
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(88, 213, 255, 0.28);
background: linear-gradient(180deg, rgba(20, 34, 58, 0.92), rgba(12, 24, 44, 0.92));
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.backup-list-action:hover {
border-color: rgba(88, 213, 255, 0.6);
background: linear-gradient(180deg, rgba(30, 52, 86, 0.94), rgba(15, 30, 56, 0.94));
}
.backup-list-action--delete {
color: #ff9f9f;
border-color: rgba(239, 68, 68, 0.35);
}
.backup-list-action--delete:hover {
color: #ffd6d6;
border-color: rgba(239, 68, 68, 0.65);
background: linear-gradient(180deg, rgba(72, 24, 24, 0.88), rgba(48, 14, 14, 0.9));
}
@media (max-width: 760px) {
.backup-list-item {
flex-direction: column;
align-items: stretch;
}
.backup-list-actions {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
.backup-list-action {
flex: 1 1 auto;
text-align: center;
min-width: 130px;
}
}
.backup-list-item:hover {
background: rgba(88, 213, 255, 0.1);
}
.backup-list-item:last-child {
border-bottom: none;
}
/* Scrollbar Styling */
#backupListContainer::-webkit-scrollbar {
width: 8px;
}
#backupListContainer::-webkit-scrollbar-track {
background: transparent;
}
#backupListContainer::-webkit-scrollbar-thumb {
background: rgba(88, 213, 255, 0.2);
border-radius: 4px;
}
#backupListContainer::-webkit-scrollbar-thumb:hover {
background: rgba(88, 213, 255, 0.4);
}