Veröffentlichte Quellen

CH-J Tools

Durchsuchen Sie Verzeichnisse und Dateien einer bestimmten Anwendungsausgabe.

Quellen als ZIP herunterladen

CH-J / Server Manager 872 Dateien

core-20261030T220507Z-61e4558d889f Hinzugefügt: 31.10.2026, 00:29 · Erstellt: 30.10.2026, 23:05

styles.css Hinzugefügt: Datum nicht erfasst 12,4 KB · 114 Zeilen

Code Datei herunterladen

1/* chj.disks — follows the CH-J plugin look (System Monitor / Users). The application theme is dark; the light

2 palette is defined with the same tokens and is used when the document carries data-theme="light". */

3:root {

4 color-scheme: dark;

5 --bg: #07111f; --panel: rgba(16,32,51,.82); --panel-solid: #0d1b2d; --input: #0b1929; --line: rgba(151,176,205,.18);

6 --text: #ecf5ff; --muted: #8ea5bf; --blue: #42a5ff; --green: #43d6a0; --warn: #f2c463; --danger: #ff8f8f;

7 --fs-ext4: #4f8fe0; --fs-ext: #6b9fd9; --fs-xfs: #d9c35a; --fs-btrfs: #ee8a4a; --fs-fat: #3fc96a; --fs-ntfs: #3fd6b0;

  --fs-swap: #c96a5c; --fs-lvm: #c49a6c; --fs-luks: #8a7fc4; --fs-zfs: #5fb3c9; --fs-raid: #b05fc9; --fs-free: #5b6676; --fs-unknown: #2a2f37; --fs-none: #7c8796;

9}

10:root[data-theme="light"] {

11 color-scheme: light;

12 --bg: #f3f6fa; --panel: #ffffff; --panel-solid: #ffffff; --input: #f7f9fc; --line: rgba(30,50,80,.16);

13 --text: #102033; --muted: #4f6278; --blue: #1f6fd1; --green: #138a5e; --warn: #9a6a00; --danger: #b42318;

14 --fs-free: #c5ccd6; --fs-unknown: #3b4250; --fs-none: #9aa5b3;

15}

16* { box-sizing: border-box; }

17[hidden] { display: none !important; }

body { margin: 0; min-width: 720px; min-height: 500px; color: var(--text); background: radial-gradient(circle at 75% 0, rgba(45,130,220,.16), transparent 35%), var(--bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; }

.app-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--line); background: rgba(5,14,25,.6); }

20h1 { margin: 5px 0 2px; font-size: 24px; } .app-header p { margin: 0; color: var(--muted); font-size: 11px; }

21.eyebrow { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .17em; }

22main { padding: 20px 28px 30px; display: grid; gap: 14px; }

h2 { margin: 0; font-size: 15px; } h3 { margin: 0; font-size: 14px; } h4 { margin: 8px 0 4px; font-size: 12px; color: var(--muted); }

24.toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }

25.toolbar label { display: grid; gap: 6px; min-width: 260px; color: var(--muted); font-size: 11px; }

26.spacer { flex: 1; }

select, input, .button { border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--input); padding: 8px 11px; font: inherit; }

28.button { cursor: pointer; } .button.small { padding: 5px 9px; font-size: 12px; }

29.button.primary { background: linear-gradient(135deg, #267dd1, #3867e8); border-color: #458cea; color: #fff; }

30.button.danger { background: linear-gradient(135deg, #c0392b, #d9534f); border-color: #e06666; color: #fff; }

31.button.ghost { background: transparent; } .button:disabled, .mini:disabled { opacity: .42; cursor: not-allowed; }

.button:focus-visible, select:focus-visible, input:focus-visible, .segment:focus-visible, [role=option]:focus-visible, .context-menu button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.mini { border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--input); padding: 3px 7px; font: inherit; font-size: 11px; cursor: pointer; margin-right: 4px; }

34.mini.danger { border-color: rgba(255,114,114,.4); color: var(--danger); }

35.status { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; }

.status.error { color: var(--danger); } .status.warn { color: var(--warn); } .status.busy::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 2px solid var(--blue); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }

37@keyframes spin { to { transform: rotate(360deg); } }

.panel { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px 18px; min-width: 0; }

39.notice strong { font-size: 14px; } .notice p { color: var(--muted); }

.pill { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-style: normal; background: rgba(142,165,191,.14); color: var(--muted); margin-right: 4px; }

.pill.ok { color: #72e5b9; background: rgba(67,214,160,.12); } .pill.warn { color: var(--warn); background: rgba(242,196,99,.13); } .pill.danger { color: var(--danger); background: rgba(255,110,110,.12); }

42.hint { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .hint.warn { color: var(--warn); }

43.error { margin: 6px 0 0; color: var(--danger); font-size: 12px; }

44.suggestions { display: grid; gap: 8px; }

.suggestion { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }

46.suggestion.ok { border-left: 4px solid var(--green); } .suggestion.blocked { border-left: 4px solid var(--warn); }

47.suggestion strong { font-size: 13px; }

48.workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }

49.disk-list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }

.disk-list li { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }

51.disk-list li.active { border-color: var(--blue); background: rgba(66,165,255,.1); }

.disk-list li span, .disk-list li small { color: var(--muted); font-size: 11px; } .disk-list .badges { margin-top: 3px; }

53.disk-main { display: grid; gap: 14px; min-width: 0; }

54.disk-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

55.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; margin: 12px 0 0; }

56.facts div { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }

57.facts dt { color: var(--muted); font-size: 10px; } .facts dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }

58.facts.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

59.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

60/* Disk map: widths are proportional to the real sizes; tiny areas keep a minimum width to stay clickable. */

.disk-map { position: relative; display: flex; height: 72px; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.25); user-select: none; }

62.disk-map.mini { height: 30px; margin: 3px 0 8px; }

.segment { position: relative; flex-basis: 0; min-width: 8px; overflow: hidden; border-radius: 6px; border: 2px solid var(--seg); background: color-mix(in srgb, var(--seg) 16%, var(--panel-solid)); cursor: pointer; }

64.segment .used { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--seg) 48%, transparent); }

.segment .seg-text { position: absolute; inset: 4px 6px; display: grid; align-content: center; gap: 1px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

66.segment .seg-text small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }

67.segment.selected { box-shadow: 0 0 0 2px var(--text) inset, 0 0 0 1px var(--seg); }

68.segment.created { border-style: dashed; }

.segment.fs-free { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.04) 6px 12px); }

.grip { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: ew-resize; background: linear-gradient(90deg, transparent, var(--text)); opacity: .55; }

.drag-ghost { position: absolute; top: 3px; bottom: 3px; border: 2px dashed var(--text); border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: rgba(66,165,255,.12); pointer-events: none; }

.fs-ext4 { --seg: var(--fs-ext4); } .fs-ext { --seg: var(--fs-ext); } .fs-xfs { --seg: var(--fs-xfs); } .fs-btrfs { --seg: var(--fs-btrfs); } .fs-fat { --seg: var(--fs-fat); }

.fs-ntfs { --seg: var(--fs-ntfs); } .fs-swap { --seg: var(--fs-swap); } .fs-lvm { --seg: var(--fs-lvm); } .fs-luks { --seg: var(--fs-luks); } .fs-zfs { --seg: var(--fs-zfs); }

.fs-raid { --seg: var(--fs-raid); } .fs-free { --seg: var(--fs-free); } .fs-unknown { --seg: var(--fs-unknown); } .fs-none { --seg: var(--fs-none); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--muted); }

.legend b, .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: var(--seg); }

77.table-wrap { overflow: auto; }

78table { width: 100%; border-collapse: collapse; font-size: 12px; }

79th, td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }

80th { color: var(--muted); font-weight: 600; font-size: 11px; white-space: nowrap; }

tbody tr { cursor: default; } tbody tr:hover { background: rgba(66,165,255,.06); } tbody tr.selected { background: rgba(66,165,255,.14); }

82tr.layer td { color: var(--muted); } tr.vg td { background: rgba(255,255,255,.03); }

83.tree { color: var(--muted); } .actions-cell { white-space: nowrap; }

84.queue ol, .job-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; }

85.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.job-state { margin: 8px 0; font-weight: 600; } .job-state.succeeded { color: var(--green); } .job-state.failed, .job-state.unknown { color: var(--danger); } .job-state.pending-reboot { color: var(--warn); }

87.progress { height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }

88.progress i { display: block; height: 100%; width: 0; background: var(--blue); }

89.progress.indeterminate i { width: 30%; animation: slide 1.4s ease-in-out infinite; }

.progress.succeeded i { width: 100%; background: var(--green); } .progress.failed i, .progress.unknown i { width: 100%; background: var(--danger); } .progress.pending-reboot i { width: 100%; background: var(--warn); }

91@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

.job-steps li.done { color: var(--green); } .job-steps li.failed { color: var(--danger); } .job-steps li.stopped { color: var(--warn); } .job-steps li.running { color: var(--blue); }

.log { max-height: 280px; overflow: auto; padding: 10px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: 11px; white-space: pre-wrap; }

.security { border-left: 3px solid var(--green); } .security strong { font-size: 12px; } .security p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.context-menu { position: fixed; z-index: 50; min-width: 240px; max-width: 360px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); box-shadow: 0 18px 40px rgba(0,0,0,.4); display: grid; }

.context-menu button { display: grid; gap: 2px; text-align: left; border: 0; border-radius: 6px; padding: 7px 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }

97.context-menu button:hover:not([disabled]) { background: rgba(66,165,255,.14); }

.context-menu button[disabled] { color: var(--muted); cursor: not-allowed; } .context-menu small { font-size: 10px; color: var(--muted); }

dialog { width: min(820px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-solid); color: var(--text); padding: 20px 22px; }

100dialog::backdrop { background: rgba(2,8,16,.7); }

101dialog form, .dialog-body, .form-body { display: grid; gap: 10px; }

102dialog label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }

103dialog label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }

104dialog input[type=checkbox], dialog input[type=radio] { width: auto; }

105dialog input[type=range] { width: 100%; padding: 0; }

106.unit-input { display: flex; gap: 6px; } .unit-input input { flex: 1; }

107.actions { display: flex; justify-content: flex-end; gap: 8px; }

108.step-list { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 12px; }

109

.step-list li.destructive { color: var(--warn); } .step-list li.verify, .step-list li.backup, .step-list li.check { color: var(--muted); }

110.warnings { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--warn); font-size: 12px; }

111@media (max-width: 980px) { .workspace { grid-template-columns: 1fr; } }

112

113/* Right-to-left languages (ar, fa, ur): terminals, editors, code, paths and logs stay left-to-right. */

114

[dir="rtl"] .xterm, [dir="rtl"] .monaco-editor, [dir="rtl"] pre, [dir="rtl"] code, [dir="rtl"] textarea, [dir="rtl"] input:not([type="checkbox"]):not([type="radio"]) { direction: ltr; unicode-bidi: isolate; }

115

SHA-256

80704da83ada883939781a850f1447b917c0495f2123cbb8a941b6b9df784881

CH-J Proprietary Software License 1.14 · Die Quellen werden unter der CH-J Proprietary Software License 1.14 bereitgestellt. Ihre Verfügbarkeit ändert die Lizenzbedingungen nicht und gewährt keine zusätzlichen Rechte.

SHA-256 des Archivs

77380d4805485ffa4027fbe7858b5836f197a4aa9d52358a43e2d12d018744df