/* ========================================================================= backup-cloud.net — app.css Design-Tokens abgeleitet aus dem Logo (Teal-Cloud auf Hellblau/Weiß). Signatur-Element: der animierte Wolkenhimmel (hell) / Sternenhimmel (dunkel) im Hintergrund - ruhig, respektiert prefers-reduced-motion. ========================================================================= */ :root { /* Farben */ --bc-teal: #1FB6CC; --bc-teal-deep: #0E7A8C; --bc-teal-pale: #DFF4F8; --bc-navy: #0B2740; --bc-navy-soft: #2C4A63; --bc-sky-top: #DCF1F8; --bc-sky-bottom: #F7FCFE; --bc-cloud: #FFFFFF; --bc-night-top: #061726; --bc-night-bottom:#0B2A3D; --bc-star: #EAF6FB; --bc-danger: #D64545; --bc-warning: #E0A526; --bc-success: #2FA86B; /* Oberflächen (hell) */ --surface: rgba(255, 255, 255, 0.82); --surface-solid: #FFFFFF; --surface-border: rgba(11, 39, 64, 0.10); --text: var(--bc-navy); --text-muted: var(--bc-navy-soft); --sidebar-bg: rgba(11, 39, 64, 0.92); --sidebar-text: #EAF6FB; /* Typografie */ --font-display: "Segoe UI Semibold", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: "Consolas", "SFMono-Regular", Menlo, monospace; /* Layout */ --sidebar-width: 220px; --sidebar-width-collapsed: 68px; --filetree-width: 330px; --header-height: 60px; --radius: 10px; --app-font-scale: 1; /* wird per JS zwischen 0.75 / 1 / 1.25 umgeschaltet */ } html[data-theme="dark"] { --surface: rgba(11, 39, 64, 0.72); --surface-solid: #0F2E45; --surface-border: rgba(234, 246, 251, 0.12); --text: #EAF6FB; --text-muted: #9FC1D4; --sidebar-bg: rgba(6, 23, 38, 0.94); --sidebar-text: #DCF1F8; /* Bootstrap zieht seine eigenen Textfarben aus DIESEN Variablen, nicht aus unseren --text/--text-muted - ohne diesen Block bleibt z.B. Text in .modal-content, .table, Überschriften etc. beim hellen Bootstrap- Standard (fast schwarz), egal was data-theme sagt. */ --bs-body-color: var(--text); --bs-body-bg: transparent; --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-heading-color: var(--text); --bs-border-color: var(--surface-border); --bs-link-color: var(--bc-teal); --bs-link-hover-color: var(--bc-teal-deep); --bs-modal-color: var(--text); --bs-modal-bg: var(--surface-solid); --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--surface-border); --bs-card-color: var(--text); --bs-card-bg: var(--surface-solid); --bs-form-control-color: var(--text); --bs-form-control-bg: var(--surface-solid); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--surface-solid); color: var(--text); border-color: var(--surface-border); } html[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--surface-solid); color: var(--text); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Direkt statt nur über --bs-modal-bg: manche Bootstrap-Builds fallen für modal-bg auf --bs-body-bg zurück, das wir bewusst transparent lassen (damit der Himmel-Hintergrund durch scheint) - dadurch wurden die Modals im Darkmode ungewollt mit-transparent. */ html[data-theme="dark"] .modal-content { background-color: var(--surface-solid); color: var(--text); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--surface-border); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); font-size: calc(15px * var(--app-font-scale)); color: var(--text); min-height: 100vh; position: relative; overflow-x: hidden; transition: color 0.25s ease; } h1, h2, h3, h4, .bc-display { font-family: var(--font-display); letter-spacing: 0.01em; } /* ------------------------------------------------------------------- Signatur-Hintergrund: Wolkenhimmel (hell) / Sternenhimmel (dunkel) ------------------------------------------------------------------- */ .bc-sky { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bc-sky-top) 0%, var(--bc-sky-bottom) 65%); overflow: hidden; transition: background 0.4s ease; } html[data-theme="dark"] .bc-sky { background: linear-gradient(180deg, var(--bc-night-top) 0%, var(--bc-night-bottom) 100%); } .bc-sky .bc-cloud-shape { position: absolute; background: var(--bc-cloud); border-radius: 50%; opacity: 0.55; filter: blur(1px); animation: bc-drift linear infinite; } html[data-theme="dark"] .bc-sky .bc-cloud-shape { opacity: 0; } .bc-sky .bc-star { position: absolute; width: 2px; height: 2px; background: var(--bc-star); border-radius: 50%; opacity: 0; animation: bc-twinkle 4s ease-in-out infinite; } html[data-theme="dark"] .bc-sky .bc-star { opacity: var(--bc-star-opacity, 0.8); } @keyframes bc-drift { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } } @keyframes bc-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: var(--bc-star-opacity, 0.9); } } @media (prefers-reduced-motion: reduce) { .bc-sky .bc-cloud-shape, .bc-sky .bc-star { animation: none; opacity: 0.35; } } /* ------------------------------------------------------------------- App-Grid: Pageheader oben, darunter Sidebar / Filetree / Hauptbereich ------------------------------------------------------------------- */ .bc-app { display: grid; grid-template-columns: var(--sidebar-width) var(--filetree-width) 1fr; grid-template-rows: 1fr; grid-template-areas: "sidebar filetree main"; min-height: 100vh; transition: grid-template-columns 0.2s ease; } .bc-app.bc-sidebar-collapsed { grid-template-columns: var(--sidebar-width-collapsed) var(--filetree-width) 1fr; } /* Module ohne Filetree (Tasks, Jobs, Admin, ...) blenden die Spalte aus */ .bc-app.bc-no-filetree { grid-template-columns: var(--sidebar-width) 1fr; grid-template-areas: "sidebar main"; } .bc-app.bc-no-filetree.bc-sidebar-collapsed { grid-template-columns: var(--sidebar-width-collapsed) 1fr; } /* ------------------------------------------------------------------- Main-Topbar (ehemals eigener Header-Balken über allen Spalten - jetzt nur noch oben in der Hauptspalte, transparent auf dem Himmel-Hintergrund) ------------------------------------------------------------------- */ .bc-main-topbar { display: flex; align-items: center; justify-content: space-between; margin: -24px -28px 20px; padding: 14px 28px; min-height: var(--header-height); } .bc-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); text-decoration: none; } .bc-brand img { height: 32px; width: auto; display: block; } .bc-header-tools { display: flex; align-items: center; gap: 4px; } .bc-header-tools button, .bc-header-tools a { background: transparent; border: none; color: var(--text-muted); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; text-decoration: none; font-size: 0.95rem; } .bc-header-tools button:hover, .bc-header-tools a:hover { background: var(--surface); backdrop-filter: blur(6px); color: var(--bc-teal-deep); } html[data-theme="dark"] .bc-header-tools button:hover, html[data-theme="dark"] .bc-header-tools a:hover { background: rgba(31, 182, 204, 0.18); color: var(--bc-teal); } @media (max-width: 900px) { .bc-main-topbar { margin: -16px -16px 16px; padding: 12px 16px; } } /* ------------------------------------------------------------------- Sidebar (Menü, einklappbar) ------------------------------------------------------------------- */ .bc-sidebar { grid-area: sidebar; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 14px 8px; overflow-y: auto; transition: background 0.4s ease; } .bc-nav-group { margin-bottom: 6px; } .bc-nav-divider { height: 1px; background: rgba(234, 246, 251, 0.12); margin: 10px 6px; } .bc-nav-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px; color: var(--sidebar-text); text-decoration: none; font-size: 0.92rem; white-space: nowrap; overflow: visible; } .bc-nav-link .bc-icon { flex: 0 0 20px; text-align: center; opacity: 0.9; } .bc-nav-link::before { content: ''; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 4px; border-radius: 0 3px 3px 0; background: var(--bc-teal); opacity: 0; transition: opacity 0.15s ease; } .bc-nav-link:hover { background: rgba(31, 182, 204, 0.14); color: #fff; } .bc-nav-link:hover::before { opacity: 0.45; } .bc-nav-link.active { background: rgba(31, 182, 204, 0.22); color: #fff; font-weight: 600; } .bc-nav-link.active::before { opacity: 1; } .bc-sidebar-collapsed .bc-nav-link span.bc-label { display: none; } .bc-sidebar-footer { margin-top: auto; padding: 10px 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .bc-sidebar-footer a { display: inline-flex; align-items: center; gap: 6px; } .bc-sidebar-footer img { height: 20px; width: auto; opacity: 0.85; } .bc-sidebar-footer .bc-footer-text { font-size: 0.68rem; color: var(--sidebar-text); opacity: 0.65; text-decoration: none; } /* ------------------------------------------------------------------- Filetree-Spalte ------------------------------------------------------------------- */ .bc-filetree { grid-area: filetree; background: var(--surface); backdrop-filter: blur(8px); border-right: 1px solid var(--surface-border); overflow-y: auto; padding: 12px 8px; } .bc-filetree-node { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; font-size: 0.86rem; cursor: pointer; color: var(--text); } .bc-filetree-node:hover { background: var(--bc-teal-pale); } html[data-theme="dark"] .bc-filetree-node:hover { background: rgba(31, 182, 204, 0.18); } .bc-icon-dir { color: var(--bc-teal-deep); } .bc-icon-git { color: #E0A526; } .bc-icon-restic { color: #6C63D6; } .bc-icon-file { color: var(--text-muted); } .bc-icon-image { color: #D6558C; } .bc-icon-pdf { color: #D64545; } .bc-icon-doc { color: #2B6CB0; } .bc-icon-sheet { color: #2FA86B; } .bc-icon-slide { color: #DD6B20; } .bc-icon-archive { color: #A0743C; } .bc-icon-code { color: var(--bc-teal-deep); } .bc-icon-text { color: var(--text-muted); } .bc-icon-media { color: #6C63D6; } /* Repository-Liste (erweiterte Karten statt einfacher Filetree-Zeilen) */ .bc-repo-item { display: block; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; color: var(--text); text-decoration: none; margin-bottom: 6px; } .bc-repo-item:hover { background: var(--bc-teal-pale); } html[data-theme="dark"] .bc-repo-item:hover { background: rgba(31, 182, 204, 0.12); } .bc-repo-item-active { background: var(--bc-teal-pale); border-color: var(--bc-teal); } html[data-theme="dark"] .bc-repo-item-active { background: rgba(31, 182, 204, 0.18); } .bc-badge-git { background: rgba(224, 165, 38, 0.15); color: #B7791F; } .bc-badge-restic { background: rgba(108, 99, 214, 0.15); color: #6C63D6; } /* jsTree ans Design anpassen: transparenter Hintergrund, unsere Farben/Fonts */ #bc-filetree-root.jstree-default { background: transparent; font-family: var(--font-body); font-size: 0.86rem; } #bc-filetree-root .jstree-anchor { color: var(--text); height: auto; line-height: 1.9; } #bc-filetree-root .jstree-anchor:hover { background: var(--bc-teal-pale); } html[data-theme="dark"] #bc-filetree-root .jstree-anchor:hover { background: rgba(31, 182, 204, 0.18); } #bc-filetree-root .jstree-clicked { background: var(--bc-teal-pale); color: var(--text); box-shadow: none; } html[data-theme="dark"] #bc-filetree-root .jstree-clicked { background: rgba(31, 182, 204, 0.22); } #bc-filetree-root .jstree-anchor > i { margin-right: 4px; } /* ------------------------------------------------------------------- Hauptbereich ------------------------------------------------------------------- */ .bc-main { grid-area: main; padding: 24px 28px 40px; overflow-y: auto; } .bc-panel { background: var(--surface-solid); border: 1px solid var(--surface-border); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 1px 3px rgba(11, 39, 64, 0.06); } .bc-page-title { font-size: 1.4rem; margin: 0 0 18px; color: var(--text); } /* ------------------------------------------------------------------- Icon-Buttons (Play/Bearbeiten/Kopieren/Löschen/... in Tabellenzeilen) - kleine gerundete Box wie die Fensterboxen (.bc-panel), nur im Kleinen und mit dezent abgesetztem Hintergrund statt der vollen Panel-Fläche. ------------------------------------------------------------------- */ .bc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-muted); text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-size: 0.85rem; line-height: 1; } .bc-icon-btn:hover { background: var(--bc-teal-pale); color: var(--bc-teal-deep); border-color: var(--bc-teal); } .bc-icon-btn.bc-icon-btn-danger { color: #C6484F; } .bc-icon-btn.bc-icon-btn-danger:hover { background: rgba(198, 72, 79, 0.12); color: #C6484F; border-color: rgba(198, 72, 79, 0.4); } .bc-icon-btn.bc-icon-btn-success { color: #2FA86B; } .bc-icon-btn.bc-icon-btn-success:hover { background: rgba(47, 168, 107, 0.12); color: #2FA86B; border-color: rgba(47, 168, 107, 0.4); } html[data-theme="dark"] .bc-icon-btn { background: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .bc-icon-btn:hover { background: rgba(31, 182, 204, 0.18); } html[data-theme="dark"] .bc-icon-btn.bc-icon-btn-danger:hover { background: rgba(198, 72, 79, 0.22); } html[data-theme="dark"] .bc-icon-btn.bc-icon-btn-success:hover { background: rgba(47, 168, 107, 0.22); } /* Icon-Buttons in einer Zeile bekommen etwas Abstand zueinander statt der vorherigen margin-right an jedem einzelnen Icon */ .bc-icon-btn-group { display: inline-flex; align-items: center; gap: 6px; } /* ------------------------------------------------------------------- Tabellen (sortierbar, alternierend, Paging Header/Footer) ------------------------------------------------------------------- */ .bc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .bc-table thead th { text-align: left; padding: 10px 12px; cursor: pointer; user-select: none; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--surface-border); white-space: nowrap; } .bc-table thead th .bc-sort-icon { opacity: 0.4; margin-left: 4px; font-size: 0.75em; } .bc-table thead th.bc-sorted .bc-sort-icon { opacity: 1; color: var(--bc-teal-deep); } .bc-table tbody tr:nth-child(odd) { background: rgba(31, 182, 204, 0.04); } html[data-theme="dark"] .bc-table tbody tr:nth-child(odd) { background: rgba(31, 182, 204, 0.07); } .bc-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--surface-border); } .bc-table tfoot td { padding: 10px 12px; } .bc-fs-up-row td { color: var(--text-muted); font-style: italic; } .bc-fs-up-row:hover { background: var(--bc-teal-pale); } html[data-theme="dark"] .bc-fs-up-row:hover { background: rgba(31, 182, 204, 0.1); } .bc-pagination { display: flex; gap: 4px; align-items: center; } .bc-pagination button { border: 1px solid var(--surface-border); background: var(--surface-solid); color: var(--text); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 0.85rem; } .bc-pagination button.active { background: var(--bc-teal); color: #fff; border-color: var(--bc-teal); } /* ------------------------------------------------------------------- Badges / Status ------------------------------------------------------------------- */ .bc-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .bc-badge-success { background: rgba(47, 168, 107, 0.15); color: var(--bc-success); } .bc-badge-error { background: rgba(214, 69, 69, 0.15); color: var(--bc-danger); } .bc-badge-running { background: rgba(31, 182, 204, 0.15); color: var(--bc-teal-deep); } .bc-badge-muted { background: rgba(44, 74, 99, 0.12); color: var(--text-muted); } /* ------------------------------------------------------------------- Terminal (Execute-Live-Ausgabe) ------------------------------------------------------------------- */ .bc-terminal { background: #06131F; color: #B7F0DE; font-family: var(--font-mono); font-size: 0.82rem; border-radius: var(--radius); padding: 14px 16px; height: 420px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; } .bc-terminal .bc-line-error { color: #FF9B9B; } /* ------------------------------------------------------------------- Datei-Editor (CodeMirror) im Viewer-Modal ------------------------------------------------------------------- */ #bc-fs-editor .CodeMirror { height: 65vh; font-family: var(--font-mono); font-size: 0.85rem; } #bc-fs-md-preview { height: 65vh; overflow-y: auto; color: var(--text); line-height: 1.6; } #bc-fs-md-preview h1, #bc-fs-md-preview h2, #bc-fs-md-preview h3 { border-bottom: 1px solid var(--surface-border); padding-bottom: 6px; margin-top: 1.2em; } #bc-fs-md-preview code { background: var(--bc-teal-pale); padding: 2px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85em; } html[data-theme="dark"] #bc-fs-md-preview code { background: rgba(31, 182, 204, 0.15); } #bc-fs-md-preview pre { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; } #bc-fs-md-preview pre code { background: none; padding: 0; } #bc-fs-md-preview blockquote { border-left: 3px solid var(--bc-teal); margin-left: 0; padding: 2px 16px; color: var(--text-muted); } #bc-fs-md-preview table { border-collapse: collapse; width: 100%; } #bc-fs-md-preview table th, #bc-fs-md-preview table td { border: 1px solid var(--surface-border); padding: 6px 10px; } #bc-fs-md-preview img { max-width: 100%; } /* ------------------------------------------------------------------- Auth-Seiten (Login, Register, Passwort) - eigenes, sidebar-loses Layout ------------------------------------------------------------------- */ .bc-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .bc-auth-card { width: 100%; max-width: 400px; background: var(--surface); backdrop-filter: blur(10px); border: 1px solid var(--surface-border); border-radius: 14px; padding: 34px 32px; box-shadow: 0 12px 40px rgba(11, 39, 64, 0.14); } .bc-auth-card .bc-brand { justify-content: center; margin-bottom: 22px; font-size: 1.2rem; } .bc-auth-card h1 { font-size: 1.15rem; text-align: center; margin: 0 0 22px; color: var(--text-muted); font-weight: 500; } /* ------------------------------------------------------------------- Formulare (Bootstrap-Klassen bleiben führend, hier nur Feintuning) ------------------------------------------------------------------- */ .form-control, .form-select { border-radius: 8px; border-color: var(--surface-border); } .btn-bc-primary { background: var(--bc-teal); border-color: var(--bc-teal); color: #fff; font-weight: 600; } .btn-bc-primary:hover { background: var(--bc-teal-deep); border-color: var(--bc-teal-deep); color: #FFD54A; } @media (max-width: 900px) { .bc-app, .bc-app.bc-no-filetree { grid-template-columns: 1fr; grid-template-areas: "sidebar" "filetree" "main"; } } /* ------------------------------------------------------------------- Info-Popup (Betreiber, Seitenbeschreibung, Lizenzen) ------------------------------------------------------------------- */ .bc-info-section { border: 1px solid var(--surface-border); border-radius: 10px; margin-bottom: 16px; overflow: hidden; } .bc-info-section:last-child { margin-bottom: 0; } .bc-info-section-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bc-teal-pale); color: var(--bc-teal-deep); font-weight: 600; font-size: 0.92rem; } html[data-theme="dark"] .bc-info-section-header { background: rgba(31, 182, 204, 0.14); color: var(--bc-teal); } .bc-info-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--bc-teal); color: #06222E; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; flex: 0 0 26px; } .bc-info-section-body { padding: 16px; background: var(--surface-solid); font-size: 0.88rem; } .bc-info-section-body address { font-size: 0.88rem; line-height: 1.6; } /* ------------------------------------------------------------------- Cookie-Banner ------------------------------------------------------------------- */ .bc-cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 640px; margin: 0 auto; background: var(--surface-solid); border: 1px solid var(--surface-border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(11, 39, 64, 0.18); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.85rem; color: var(--text); } @media (max-width: 600px) { .bc-cookie-banner { flex-direction: column; align-items: flex-start; } }