flessinglabs/pc-live
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
pc-live/nui/css/rp-ds.css

464 lines
16 KiB
CSS
Raw Normal View History

IC-Computer: Schreibtisch, Fenster und Apps Ein Computer im Spiel. Man tritt an ein Terminal, drueckt E, und bekommt eine Oberflaeche mit Mail, Browser, Adressbuch, Kalender und weiteren Anwendungen. Andere Resources haengen sich als App ein. Auf ESX umgestellt: - Fuenf harte Abhaengigkeiten zeigten auf Resources, die es hier nicht gibt. Eine fehlende Abhaengigkeit verhindert den Start vollstaendig - die Resource waere nie hochgekommen. - Die Bruecke zum Framework neu geschrieben; Charakterdaten, Aktenverwaltung und Immobilien ausgebaut, weil die zugehoerigen Systeme fehlen. - pc_live_devices fehlte im Schema, wird vom Code aber gelesen. Ohne die Tabelle ist kein fester PC ansprechbar. Ein PC braucht ausserdem zwei Eintraege mit derselben Kennung: Standort in der Datenbank, Kamerafahrt in der config.lua. Mail ueberarbeitet: - Postfaecher haengen an einer Anmeldung statt an der Person. Mehrere Leute koennen dasselbe Firmenpostfach gleichzeitig offen haben. - Ordner gehoeren zum Postfach, nicht zur Person. Eine Mail an ein geteiltes Postfach wird je Empfaenger einmal gespeichert; damit das Einsortieren trotzdem fuer alle gilt, tragen alle Kopien einer Zustellung dieselbe Kennung. Gelesen und geloescht bleibt persoenlich - das ist keine Eigenschaft der Nachricht, sondern der Person. - Signaturen gehoeren ebenfalls zum Postfach. - Kalender koennen privat, geteilt oder oeffentlich sein. Ein oeffentlicher Termin haengt bewusst auch an einem Postfach, sonst koennte ihn spaeter niemand mehr aendern oder absagen. Neue Apps: Webhosting, Bleeter und dessen Verwaltung. Behoben: - prompt(), confirm() und alert() froren das NUI ein. FiveMs CEF hat keinen Handler fuer die eingebauten Browserdialoge - der Aufruf oeffnet nichts und kehrt nie zurueck. Ersetzt durch eigene Dialoge. - Die Fenster tragen data-wid, keine id. Wer sie mit getElementById sucht, schreibt ins Leere und das Fenster bleibt leer. Enthaelt README.md mit Einrichtung und PLUGINS.md: eine Anleitung, wie man eine eigene App baut und einhaengt, mit vollstaendigem Beispiel von der Tabelle bis zum Schreibtischsymbol.
2026-08-09 12:02:11 +00:00
/* ═══════════════════════════════════════════════════════════════════════════
RP Design System – Unified Component Library
Additive: existierende Stile werden nicht überschrieben.
Alle Klassen tragen das Präfix .ds- um Konflikte zu vermeiden.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Design Tokens (Canonical Variables) ────────────────────────────────── */
:root {
/* Brand */
--ds-accent: #1a3d6e;
--ds-accent-light: #2461b0;
--ds-accent-hover: #0f2847;
--ds-accent-pale: #e8f0fc;
/* Status */
--ds-danger: #b22222;
--ds-danger-hover: #8b0000;
--ds-danger-pale: #fdecea;
--ds-success: #2e7d32;
--ds-success-pale: #e8f5e9;
--ds-warning: #c47800;
--ds-warning-pale: #fff8e1;
--ds-info: #0277bd;
--ds-info-pale: #e1f0fa;
/* Surfaces */
--ds-bg-app: #eaecef;
--ds-bg-sidebar: #1e2a3a;
--ds-bg-header: #162032;
--ds-bg-card: #ffffff;
--ds-bg-card-alt: #f4f5f7;
--ds-bg-input: #ffffff;
--ds-bg-modal: #ffffff;
--ds-bg-overlay: rgba(0,0,0,0.55);
--ds-bg-tbl-hd: #2c3e55;
--ds-bg-tbl-alt: #f8f9fb;
/* Text */
--ds-text: #1a1f2e;
--ds-text-sub: #4a5568;
--ds-text-muted: #7a8494;
--ds-text-light: #f0f2f5;
/* Borders */
--ds-border: #c8cdd6;
--ds-border-dark: #9aa3b0;
/* Radii */
--ds-r-sm: 3px;
--ds-r: 4px;
--ds-r-md: 6px;
--ds-r-lg: 10px;
/* Shadows */
--ds-shadow-sm: 0 1px 3px rgba(0,0,0,.12);
--ds-shadow: 0 2px 8px rgba(0,0,0,.15);
--ds-shadow-lg: 0 4px 20px rgba(0,0,0,.2);
/* Typography */
--ds-font: 'Segoe UI', Arial, sans-serif;
--ds-font-mono: 'Consolas', 'Courier New', monospace;
--ds-text-xs: 11px;
--ds-text-sm: 12px;
--ds-text-base: 13px;
--ds-text-lg: 15px;
}
/* ── Utility: Text ──────────────────────────────────────────────────────── */
.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-sub { color: var(--ds-text-sub); }
.ds-text-accent { color: var(--ds-accent-light); }
.ds-text-danger { color: var(--ds-danger); }
.ds-text-success { color: var(--ds-success); }
.ds-text-sm { font-size: var(--ds-text-sm); }
.ds-text-xs { font-size: var(--ds-text-xs); }
.ds-mono { font-family: var(--ds-font-mono); }
.ds-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Buttons ────────────────────────────────────────────────────────────── */
.ds-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border: none;
border-radius: var(--ds-r);
font-family: var(--ds-font);
font-size: var(--ds-text-sm);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background .15s, opacity .15s;
text-decoration: none;
line-height: 1.5;
}
.ds-btn:disabled { opacity: .5; cursor: not-allowed; }
.ds-btn-primary {
background: var(--ds-accent);
color: #fff;
}
.ds-btn-primary:hover:not(:disabled) { background: var(--ds-accent-hover); }
.ds-btn-secondary {
background: var(--ds-bg-card-alt);
color: var(--ds-text);
border: 1px solid var(--ds-border);
}
.ds-btn-secondary:hover:not(:disabled) { background: var(--ds-border); }
.ds-btn-danger {
background: var(--ds-danger);
color: #fff;
}
.ds-btn-danger:hover:not(:disabled) { background: var(--ds-danger-hover); }
.ds-btn-success {
background: var(--ds-success);
color: #fff;
}
.ds-btn-success:hover:not(:disabled) { background: #1b5e20; }
.ds-btn-ghost {
background: transparent;
color: var(--ds-accent-light);
border: 1px solid var(--ds-accent-light);
}
.ds-btn-ghost:hover:not(:disabled) { background: var(--ds-accent-pale); }
.ds-btn-sm { padding: 3px 8px; font-size: var(--ds-text-xs); }
.ds-btn-lg { padding: 8px 18px; font-size: var(--ds-text-base); }
.ds-btn-icon { padding: 5px 7px; }
/* ── Inputs ─────────────────────────────────────────────────────────────── */
.ds-input {
display: block;
width: 100%;
padding: 5px 9px;
background: var(--ds-bg-input);
border: 1px solid var(--ds-border);
border-radius: var(--ds-r);
font-family: var(--ds-font);
font-size: var(--ds-text-sm);
color: var(--ds-text);
transition: border-color .15s, box-shadow .15s;
outline: none;
}
.ds-input:focus {
border-color: var(--ds-accent-light);
box-shadow: 0 0 0 2px rgba(36,97,176,.2);
}
.ds-input::placeholder { color: var(--ds-text-muted); }
.ds-input-sm { padding: 3px 7px; font-size: var(--ds-text-xs); }
.ds-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%237a8494'%3E%3Cpath d='M6 8 0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 9px center;
padding-right: 26px;
}
.ds-textarea {
resize: vertical;
min-height: 80px;
}
/* ── Form Group ─────────────────────────────────────────────────────────── */
.ds-form-group {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.ds-label {
font-size: var(--ds-text-xs);
font-weight: 600;
color: var(--ds-text-sub);
text-transform: uppercase;
letter-spacing: .5px;
}
/* ── Search Bar ─────────────────────────────────────────────────────────── */
.ds-search-wrap {
position: relative;
}
.ds-search-wrap i {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
color: var(--ds-text-muted);
font-size: 12px;
pointer-events: none;
}
.ds-search-wrap .ds-input {
padding-left: 28px;
}
/* ── Table ──────────────────────────────────────────────────────────────── */
.ds-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ds-text-sm);
color: var(--ds-text);
}
.ds-table th {
background: var(--ds-bg-tbl-hd);
color: #fff;
font-size: var(--ds-text-xs);
font-weight: 600;
text-align: left;
padding: 7px 10px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: .4px;
}
.ds-table td {
padding: 6px 10px;
border-bottom: 1px solid var(--ds-border);
vertical-align: middle;
}
.ds-table tbody tr:nth-child(even) { background: var(--ds-bg-tbl-alt); }
.ds-table tbody tr:hover { background: var(--ds-accent-pale); }
.ds-table-sm th, .ds-table-sm td { padding: 4px 8px; }
/* ── Badge / Chip ───────────────────────────────────────────────────────── */
.ds-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border-radius: 20px;
font-size: var(--ds-text-xs);
font-weight: 600;
white-space: nowrap;
}
.ds-badge-primary { background: var(--ds-accent-pale); color: var(--ds-accent); }
.ds-badge-danger { background: var(--ds-danger-pale); color: var(--ds-danger); }
.ds-badge-success { background: var(--ds-success-pale); color: var(--ds-success); }
.ds-badge-warning { background: var(--ds-warning-pale); color: var(--ds-warning); }
.ds-badge-info { background: var(--ds-info-pale); color: var(--ds-info); }
.ds-badge-neutral { background: var(--ds-bg-card-alt); color: var(--ds-text-sub); border: 1px solid var(--ds-border); }
/* ── Alert / Notice ─────────────────────────────────────────────────────── */
.ds-alert {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 12px;
border-radius: var(--ds-r-md);
font-size: var(--ds-text-sm);
border-left: 3px solid currentColor;
margin: 4px 0;
}
.ds-alert i { margin-top: 1px; flex-shrink: 0; }
.ds-alert-danger { background: var(--ds-danger-pale); color: var(--ds-danger); }
.ds-alert-success { background: var(--ds-success-pale); color: var(--ds-success); }
.ds-alert-warning { background: var(--ds-warning-pale); color: var(--ds-warning); }
.ds-alert-info { background: var(--ds-info-pale); color: var(--ds-info); }
/* ── Modal ──────────────────────────────────────────────────────────────── */
.ds-modal-overlay {
position: fixed;
inset: 0;
background: var(--ds-bg-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(2px);
}
.ds-modal-overlay.hidden { display: none; }
.ds-modal {
background: var(--ds-bg-modal);
border-radius: var(--ds-r-lg);
box-shadow: var(--ds-shadow-lg);
min-width: 320px;
max-width: 600px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ds-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--ds-bg-sidebar);
color: var(--ds-text-light);
flex-shrink: 0;
}
.ds-modal-title { font-size: var(--ds-text-base); font-weight: 600; }
.ds-modal-close {
background: none;
border: none;
color: var(--ds-text-muted);
cursor: pointer;
font-size: 16px;
padding: 2px 6px;
border-radius: var(--ds-r);
}
.ds-modal-close:hover { color: #fff; }
.ds-modal-body { padding: 16px; overflow-y: auto; flex: 1; }
.ds-modal-footer { padding: 10px 16px; border-top: 1px solid var(--ds-border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
/* ── Confirm Dialog ─────────────────────────────────────────────────────── */
.ds-confirm {
max-width: 380px;
text-align: center;
}
.ds-confirm .ds-modal-body { padding: 24px 20px 12px; }
.ds-confirm p { color: var(--ds-text-sub); margin-top: 8px; font-size: var(--ds-text-sm); }
/* ── Loading ────────────────────────────────────────────────────────────── */
.ds-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
gap: 10px;
color: var(--ds-text-muted);
font-size: var(--ds-text-sm);
}
.ds-spinner {
width: 24px; height: 24px;
border: 3px solid var(--ds-border);
border-top-color: var(--ds-accent-light);
border-radius: 50%;
animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
/* ── Empty State ────────────────────────────────────────────────────────── */
.ds-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 8px;
color: var(--ds-text-muted);
text-align: center;
}
.ds-empty i { font-size: 32px; opacity: .4; }
.ds-empty-title { font-size: var(--ds-text-base); font-weight: 600; }
.ds-empty-sub { font-size: var(--ds-text-sm); }
/* ── Audit Hinweis ──────────────────────────────────────────────────────── */
.ds-audit-notice {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(194,120,0,.08);
border: 1px solid rgba(194,120,0,.25);
border-radius: var(--ds-r);
font-size: var(--ds-text-xs);
color: var(--ds-warning);
}
.ds-audit-notice i { flex-shrink: 0; }
/* ── Filter / Toolbar ───────────────────────────────────────────────────── */
.ds-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px;
background: var(--ds-bg-card-alt);
border-bottom: 1px solid var(--ds-border);
}
.ds-toolbar-spacer { flex: 1; }
/* ── Pagination ─────────────────────────────────────────────────────────── */
.ds-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px;
font-size: var(--ds-text-sm);
color: var(--ds-text-sub);
}
.ds-page-btn {
padding: 3px 8px;
border: 1px solid var(--ds-border);
border-radius: var(--ds-r);
background: var(--ds-bg-card);
color: var(--ds-text);
cursor: pointer;
font-size: var(--ds-text-xs);
transition: background .1s;
}
.ds-page-btn:hover:not(:disabled) { background: var(--ds-accent-pale); border-color: var(--ds-accent-light); }
.ds-page-btn:disabled { opacity: .4; cursor: default; }
.ds-page-btn.active { background: var(--ds-accent); color: #fff; border-color: var(--ds-accent); }
/* ── Section Divider ────────────────────────────────────────────────────── */
.ds-divider {
border: none;
border-top: 1px solid var(--ds-border);
margin: 10px 0;
}
.ds-section-title {
font-size: var(--ds-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--ds-text-muted);
padding: 8px 0 4px;
}
/* ── Status Dot ─────────────────────────────────────────────────────────── */
.ds-status-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.ds-status-dot.online { background: var(--ds-success); }
.ds-status-dot.offline { background: var(--ds-text-muted); }
.ds-status-dot.busy { background: var(--ds-warning); }
/* ── Card ───────────────────────────────────────────────────────────────── */
.ds-card {
background: var(--ds-bg-card);
border: 1px solid var(--ds-border);
border-radius: var(--ds-r-md);
box-shadow: var(--ds-shadow-sm);
overflow: hidden;
}
.ds-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--ds-border);
background: var(--ds-bg-card-alt);
}
.ds-card-title { font-size: var(--ds-text-base); font-weight: 600; }
.ds-card-body { padding: 14px; }
/* ── Flex Utilities ─────────────────────────────────────────────────────── */
.ds-flex { display: flex; }
.ds-flex-col { display: flex; flex-direction: column; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-gap-1 { gap: 4px; }
.ds-gap-2 { gap: 8px; }
.ds-gap-3 { gap: 12px; }
.ds-gap-4 { gap: 16px; }
.ds-flex-1 { flex: 1; }
.ds-mt-1 { margin-top: 4px; }
.ds-mt-2 { margin-top: 8px; }
.ds-mb-1 { margin-bottom: 4px; }
.ds-mb-2 { margin-bottom: 8px; }
.ds-p-2 { padding: 8px; }
.ds-hidden { display: none; }
.ds-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
Reference in a new issue Copy permalink