staging #43
@@ -1,51 +1,169 @@
|
||||
@model IEnumerable<Watcher.Models.Server>
|
||||
|
||||
<div class="container py-4">
|
||||
<div class="row g-4">
|
||||
@foreach (var s in Model)
|
||||
{
|
||||
<div class="col-12">
|
||||
<div class="card h-100 border-secondary shadow-sm">
|
||||
<div class="card-body d-flex flex-column gap-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="card-title text-text mb-0">
|
||||
<i class="bi bi-pc-display me-2 text-text"></i>(#@s.Id) @s.Name
|
||||
</h5>
|
||||
|
||||
<div class="col-md-4 text-text small">
|
||||
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @s.IPAddress</div>
|
||||
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div>
|
||||
</div>
|
||||
|
||||
<span class="badge @(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
|
||||
<i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
|
||||
@(s.IsOnline ? "Online" : "Offline")
|
||||
<div class="row g-3">
|
||||
@foreach (var server in Model)
|
||||
{
|
||||
<div class="col-12 col-lg-6 col-xl-4">
|
||||
<div class="card server-card shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-hdd-network me-2 text-primary"></i>
|
||||
<strong>@server.Name</strong>
|
||||
</div>
|
||||
<span class="badge @(server.IsOnline ? "bg-success" : "bg-danger")">
|
||||
<i class="bi @(server.IsOnline ? "bi-check-circle" : "bi-x-circle")"></i>
|
||||
@(server.IsOnline ? "Online" : "Offline")
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Server Info -->
|
||||
<div class="server-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label"><i class="bi bi-globe me-1"></i>IP:</span>
|
||||
<span class="info-value">@server.IPAddress</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label"><i class="bi bi-pc-display me-1"></i>Typ:</span>
|
||||
<span class="info-value">@server.Type</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label"><i class="bi bi-cpu me-1"></i>CPU:</span>
|
||||
<span class="info-value">@(server.CpuCores > 0 ? $"{server.CpuCores} Cores" : "N/A")</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label"><i class="bi bi-memory me-1"></i>RAM:</span>
|
||||
<span class="info-value">
|
||||
@if (server.RamSize > 0)
|
||||
{
|
||||
var ramGB = server.RamSize / (1024.0 * 1024.0 * 1024.0);
|
||||
@($"{ramGB:F1} GB")
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>N/A</text>
|
||||
}
|
||||
</span>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
|
||||
<a asp-action="EditServer" asp-route-id="@s.Id" class="btn btn-outline-primary">
|
||||
<i class="bi bi-pencil-square me-1"></i> Bearbeiten
|
||||
</a>
|
||||
|
||||
<a asp-asp-controller="Server" asp-action="Details" asp-route-id="@s.Id"
|
||||
class="btn btn-outline-primary">
|
||||
<i class="bi bi-bar-chart-fill me-1"></i> Metrics
|
||||
</a>
|
||||
|
||||
<form asp-action="Delete" asp-controller="Server" asp-route-id="@s.Id" method="post"
|
||||
onsubmit="return confirm('Diesen Server wirklich löschen?');" class="m-0">
|
||||
<button type="submit" class="btn btn-outline-danger">
|
||||
<i class="bi bi-trash me-1"></i> Löschen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Metrics (wenn online) -->
|
||||
@if (server.IsOnline)
|
||||
{
|
||||
<div class="mt-3 current-metrics">
|
||||
<h6 class="mb-2"><i class="bi bi-activity me-1"></i>Aktuelle Last</h6>
|
||||
<div class="metric-bars">
|
||||
<div class="metric-bar-item">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<small>CPU</small>
|
||||
<small class="metric-value" data-server-id="@server.Id" data-metric="cpu">--</small>
|
||||
</div>
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-info server-cpu-bar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-bar-item mt-2">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<small>RAM</small>
|
||||
<small class="metric-value" data-server-id="@server.Id" data-metric="ram">--</small>
|
||||
</div>
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success server-ram-bar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
@if (!string.IsNullOrEmpty(server.GpuType))
|
||||
{
|
||||
<div class="metric-bar-item mt-2">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<small>GPU</small>
|
||||
<small class="metric-value" data-server-id="@server.Id" data-metric="gpu">--</small>
|
||||
</div>
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-danger server-gpu-bar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons mt-3 d-flex gap-2">
|
||||
<a asp-action="Details" asp-route-id="@server.Id" class="btn btn-sm btn-outline-primary flex-fill">
|
||||
<i class="bi bi-bar-chart-fill"></i> Details
|
||||
</a>
|
||||
<button class="btn btn-sm btn-outline-warning flex-fill" onclick="rebootServer(@server.Id)">
|
||||
<i class="bi bi-arrow-clockwise"></i> Reboot
|
||||
</button>
|
||||
<a asp-action="EditServer" asp-route-id="@server.Id" class="btn btn-sm btn-outline-secondary flex-fill">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Delete Button (separate row) -->
|
||||
<div class="mt-2">
|
||||
<form asp-action="Delete" asp-route-id="@server.Id" method="post" class="m-0"
|
||||
onsubmit="return confirm('Server @server.Name wirklich löschen?');">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger w-100">
|
||||
<i class="bi bi-trash"></i> Server löschen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function rebootServer(serverId) {
|
||||
if (confirm('Server wirklich neu starten?')) {
|
||||
console.log('Rebooting server:', serverId);
|
||||
// TODO: API Call zum Neustarten des Servers
|
||||
alert('Reboot-Funktion wird implementiert');
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
// Lade aktuelle Metriken für alle Server
|
||||
async function loadCurrentMetrics() {
|
||||
const metricElements = document.querySelectorAll('.metric-value');
|
||||
|
||||
for (const element of metricElements) {
|
||||
const serverId = element.getAttribute('data-server-id');
|
||||
const metricType = element.getAttribute('data-metric');
|
||||
|
||||
try {
|
||||
let endpoint = '';
|
||||
if (metricType === 'cpu') endpoint = `/monitoring/cpu-usage?serverId=${serverId}&hours=0.1`;
|
||||
else if (metricType === 'ram') endpoint = `/monitoring/ram-usage?serverId=${serverId}&hours=0.1`;
|
||||
else if (metricType === 'gpu') endpoint = `/monitoring/gpu-usage?serverId=${serverId}&hours=0.1`;
|
||||
|
||||
const response = await fetch(endpoint);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data && data.length > 0) {
|
||||
const latestValue = data[data.length - 1].data;
|
||||
element.textContent = `${latestValue.toFixed(1)}%`;
|
||||
|
||||
// Update progress bar
|
||||
const card = element.closest('.card');
|
||||
let barClass = '';
|
||||
if (metricType === 'cpu') barClass = '.server-cpu-bar';
|
||||
else if (metricType === 'ram') barClass = '.server-ram-bar';
|
||||
else if (metricType === 'gpu') barClass = '.server-gpu-bar';
|
||||
|
||||
const bar = card.querySelector(barClass);
|
||||
if (bar) {
|
||||
bar.style.width = `${latestValue}%`;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`Fehler beim Laden der ${metricType}-Metriken für Server ${serverId}:`, err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initial laden und alle 30 Sekunden aktualisieren
|
||||
loadCurrentMetrics();
|
||||
setInterval(loadCurrentMetrics, 30000);
|
||||
</script>
|
||||
@@ -12,107 +12,96 @@
|
||||
<link rel="stylesheet" href="~/css/settings.css" />
|
||||
</head>
|
||||
|
||||
<div class="Settingscontainer">
|
||||
<div class="container mt-4">
|
||||
<h1 class="mb-4">
|
||||
<i class="bi bi-gear-fill me-2"></i>Einstellungen
|
||||
</h1>
|
||||
|
||||
<!-- Systemeinformationen Card -->
|
||||
<div class="card settings-card shadow-sm mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-info-circle me-2"></i>Systemeinformationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- System Info Table -->
|
||||
<div class="info-table">
|
||||
<div class="info-row">
|
||||
<div class="info-label">
|
||||
<i class="bi bi-tag me-2"></i>Version
|
||||
</div>
|
||||
<div class="info-value">@ServerVersion</div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">
|
||||
<i class="bi bi-shield-lock me-2"></i>Authentifizierung
|
||||
</div>
|
||||
<div class="info-value">@(ViewBag.IdentityProvider ?? "nicht gefunden")</div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">
|
||||
<i class="bi bi-database me-2"></i>Datenbank-Engine
|
||||
</div>
|
||||
<div class="info-value">@(DbEngine ?? "nicht gefunden")</div>
|
||||
</div>
|
||||
|
||||
@if (ViewBag.DatabaseSize != null)
|
||||
{
|
||||
<div class="info-row">
|
||||
<div class="info-label">
|
||||
<i class="bi bi-hdd me-2"></i>Datenbankgröße
|
||||
</div>
|
||||
<div class="info-value">@ViewBag.DatabaseSize</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Datenbank-Backups Section -->
|
||||
@if (DbEngine == "SQLite" || DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
|
||||
{
|
||||
<hr class="my-4" />
|
||||
<h6 class="mb-3">
|
||||
<i class="bi bi-archive me-2"></i>Datenbank-Backups
|
||||
</h6>
|
||||
<div class="backup-buttons">
|
||||
<form asp-action="CreateSqlDump" method="post" asp-controller="Database">
|
||||
<button type="submit" class="btn btn-outline-primary">
|
||||
<i class="bi bi-plus-circle me-2"></i>Backup erstellen
|
||||
</button>
|
||||
</form>
|
||||
<form asp-action="ManageSqlDumps" method="post" asp-controller="Database">
|
||||
<button type="submit" class="btn btn-outline-primary">
|
||||
<i class="bi bi-folder2-open me-2"></i>Backups verwalten
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
else if (DbEngine == "Microsoft.EntityFrameworkCore.MySQL")
|
||||
{
|
||||
<hr class="my-4" />
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>MySQL Dump aktuell nicht möglich
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Status Messages -->
|
||||
@if (TempData["DumpMessage"] != null)
|
||||
{
|
||||
<div class="alert alert-success mt-3">
|
||||
<i class="bi bi-check-circle me-2"></i>@TempData["DumpMessage"]
|
||||
</div>
|
||||
}
|
||||
@if (TempData["DumpError"] != null)
|
||||
{
|
||||
<div class="alert alert-danger mt-3">
|
||||
<i class="bi bi-exclamation-circle me-2"></i>@TempData["DumpError"]
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
|
||||
<h4><i class="bi bi-pencil-square me-2"></i>Systemeinformationen</h4>
|
||||
|
||||
<br>
|
||||
|
||||
<h5>Watcher Version: @ServerVersion</h5>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h5>Authentifizierungsmethode: <strong>@(ViewBag.IdentityProvider ?? "nicht gefunden")</strong></h5>
|
||||
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h5>Datenbank-Engine: <strong>@(DbEngine ?? "nicht gefunden")</strong></h5>
|
||||
|
||||
@if (ViewBag.DatabaseSize != null)
|
||||
{
|
||||
<h5>Datenbankgröße: <strong>@ViewBag.DatabaseSize</strong></h5>
|
||||
}
|
||||
|
||||
<!-- Falls Sqlite verwendet wird können Backups erstellt werden -->
|
||||
@if (DbEngine == "SQLite" || DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
|
||||
{
|
||||
<div class="d-flex gap-2">
|
||||
<form asp-action="CreateSqlDump" method="post" asp-controller="Database">
|
||||
<button type="submit" class="btn btn-db">
|
||||
<i class="bi bi-save me-1"></i> Backup erstellen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form asp-action="ManageSqlDumps" method="post" asp-controller="Database">
|
||||
<button type="submit" class="btn btn-db">
|
||||
<i class="bi bi-save me-1"></i> Backups verwalten
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
}
|
||||
else if (DbEngine == "Microsoft.EntityFrameworkCore.MySQL")
|
||||
{
|
||||
<p> MySQL Dump aktuell nicht möglich </p>
|
||||
}
|
||||
|
||||
<!-- Status für Erstellung eines Backups -->
|
||||
@if (TempData["DumpMessage"] != null)
|
||||
{
|
||||
<div class="alert alert-success">
|
||||
<i class="bi bi-check-circle me-1"></i>@TempData["DumpMessage"]
|
||||
</div>
|
||||
}
|
||||
@if (TempData["DumpError"] != null)
|
||||
{
|
||||
<div class="alert alert-danger">
|
||||
<i class="bi bi-exclamation-circle me-1"></i>@TempData["DumpError"]
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
|
||||
<h4><i class="bi bi-pencil-square me-2"></i>Benachrichtungen</h4>
|
||||
|
||||
<p>Registrierte E-Mail Adresse: <strong>@(ViewBag.mail ?? "nicht gefunden")</strong></p>
|
||||
|
||||
<!-- action="/Notification/UpdateSettings" existiert noch nicht-->
|
||||
<form method="post" action="#">
|
||||
<div class="card p-4 shadow-sm" style="max-width: 500px;">
|
||||
<h5 class="card-title mb-3">
|
||||
<i class="bi bi-bell me-2"></i>Benachrichtigungseinstellungen
|
||||
</h5>
|
||||
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="notifyOffline" name="NotifyOffline" checked>
|
||||
<label class="form-check-label" for="notifyOffline">Benachrichtigung bei Server-Offline</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="notifyUpdates" name="NotifyUpdates">
|
||||
<label class="form-check-label" for="notifyUpdates">Benachrichtigung bei neuen Updates</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="notifyUser" name="NotifyUser">
|
||||
<label class="form-check-label" for="notifyUser">Benachrichtigung bei neuen Benutzern</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="notifyMaintenance" name="NotifyMaintenance">
|
||||
<label class="form-check-label" for="notifyMaintenance">Wartungsinformationen erhalten</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-db mt-3">
|
||||
<i class="bi bi-save me-1"></i>Speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,16 +14,25 @@
|
||||
.info-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-muted);
|
||||
color: var(--color-muted) !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text, #f9feff);
|
||||
font-weight: 400;
|
||||
padding-left: 1.25rem;
|
||||
color: var(--color-text, #f9feff) !important;
|
||||
}
|
||||
|
||||
/* All text within info-value should be visible */
|
||||
.info-value,
|
||||
.info-value *,
|
||||
.info-value span,
|
||||
.info-value .text-muted,
|
||||
.info-value .text-success {
|
||||
color: var(--color-text, #f9feff) !important;
|
||||
}
|
||||
|
||||
.info-value .text-muted {
|
||||
@@ -44,6 +53,11 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Description and other text-muted paragraphs */
|
||||
.card-body p.text-muted {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
/* Graph Container */
|
||||
.graphcontainer {
|
||||
height: 25rem;
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
/* Server Card Styling */
|
||||
.server-card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.server-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.server-card .card-header {
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.server-card .card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Ensure all text in server-card uses light color */
|
||||
.server-card,
|
||||
.server-card * {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Allow Bootstrap badge colors to work */
|
||||
.server-card .badge {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Allow button colors to work */
|
||||
.server-card .btn {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Server Info Rows */
|
||||
.server-info {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--color-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Current Metrics Section */
|
||||
.current-metrics h6 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.metric-bar-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-bar-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons .btn {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.action-buttons .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Badge Styling */
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35em 0.65em;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,158 @@
|
||||
.Settingscontainer {
|
||||
/* Settings Card Styling - gleicher Stil wie Server Cards */
|
||||
.settings-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.settings-card .card-header {
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.settings-card .card-header h5 {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.settings-card .card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Info Table Layout - ähnlich wie Server Info Rows */
|
||||
.info-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-row:hover {
|
||||
background-color: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--color-muted);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label i {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Subsection Headers */
|
||||
.settings-card h6 {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Backup Buttons */
|
||||
.backup-buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
/* Wichtig: erlaubt Umbruch */
|
||||
gap: 1rem;
|
||||
/* optionaler Abstand */
|
||||
}
|
||||
|
||||
.Settingscontainer>* {
|
||||
flex: 1 1 calc(50% - 0.5rem);
|
||||
/* 2 Elemente pro Zeile, inkl. Gap */
|
||||
box-sizing: border-box;
|
||||
.backup-buttons form {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.btn-db {
|
||||
background-color: var(--color-primary);
|
||||
border: none;
|
||||
.backup-buttons .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-db:hover {
|
||||
background-color: var(--color-accent);
|
||||
border: none;
|
||||
/* Button Styling */
|
||||
.settings-card .btn {
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-card .btn-outline-primary {
|
||||
border-color: var(--color-accent) !important;
|
||||
color: var(--color-accent) !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.settings-card .btn-outline-primary:hover {
|
||||
background-color: var(--color-accent) !important;
|
||||
border-color: var(--color-accent) !important;
|
||||
color: white !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.settings-card .btn-outline-primary:active,
|
||||
.settings-card .btn-outline-primary:focus,
|
||||
.settings-card .btn-outline-primary:focus-visible {
|
||||
background-color: var(--color-accent) !important;
|
||||
border-color: var(--color-accent) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* HR Styling */
|
||||
.settings-card hr {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Alert Styling */
|
||||
.alert {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.backup-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.backup-buttons form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user