Bjoern Flessing
be502d2834
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.
856 lines
27 KiB
CSS
856 lines
27 KiB
CSS
/* ─────────────────────────────────────────────────────────
|
|
pc-live | Dark Modern Desktop Theme
|
|
───────────────────────────────────────────────────────── */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--pc-vp: 88; /* viewport-% used for width & height */
|
|
--pc-fs: 13; /* base font size in px (controlled by settings) */
|
|
--accent: #00aaff;
|
|
--bg-desktop: #0d0f14;
|
|
--bg-window: #13161e;
|
|
--bg-sidebar: #0f1117;
|
|
--bg-input: #1a1d27;
|
|
--bg-hover: #1e2230;
|
|
--titlebar: #0a0c12;
|
|
--border: #222637;
|
|
--text: #d4d8e8;
|
|
--text-muted: #6b7394;
|
|
--text-dim: #3d4260;
|
|
--success: #22c55e;
|
|
--error: #ef4444;
|
|
--warning: #f59e0b;
|
|
--radius: 8px;
|
|
--radius-sm: 4px;
|
|
--shadow: 0 8px 32px rgba(0,0,0,0.6);
|
|
--font: 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%; height: 100%;
|
|
overflow: hidden;
|
|
font-family: var(--font);
|
|
background: transparent;
|
|
color: var(--text);
|
|
font-size: calc(var(--pc-fs) * 1px);
|
|
user-select: none;
|
|
}
|
|
|
|
/* ── SETTINGS PANEL ─────────────────────────────────────── */
|
|
#pc-settings-panel {
|
|
position: absolute;
|
|
top: 42px;
|
|
right: 8px;
|
|
z-index: 9998;
|
|
background: var(--titlebar);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 14px 16px;
|
|
min-width: 220px;
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
#pc-settings-panel.open { display: flex; }
|
|
.settings-group { display: flex; flex-direction: column; gap: 6px; }
|
|
.settings-group-label {
|
|
font-size: 0.65rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-dim);
|
|
}
|
|
.settings-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.settings-value {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
min-width: 46px;
|
|
}
|
|
.settings-btn {
|
|
width: 28px; height: 28px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
transition: background 0.12s;
|
|
}
|
|
.settings-btn:hover { background: var(--border); opacity: 1; }
|
|
.settings-slider {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: 4px;
|
|
border-radius: 99px;
|
|
background: var(--border);
|
|
outline: none;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
.settings-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
#pc-settings-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-dim);
|
|
font-size: 14px;
|
|
width: 22px; height: 22px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 0;
|
|
transition: color 0.12s, background 0.12s;
|
|
flex-shrink: 0;
|
|
}
|
|
#pc-settings-btn:hover { color: var(--text); background: var(--bg-hover); opacity: 1; }
|
|
#pc-settings-btn.active { color: var(--accent); background: rgba(0,170,255,0.1); }
|
|
|
|
/* ── APP ROOT ────────────────────────────────────────────── */
|
|
#app { display: none; width: 100%; height: 100%; position: relative; }
|
|
#app.visible { display: block; }
|
|
|
|
/* ── DIM OVERLAY (Spielwelt bleibt sichtbar) ─────────────── */
|
|
#dim-overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0, 0, 0, 0.52);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ── PC CONTAINER (schwebendes Panel) ────────────────────── */
|
|
#pc-container {
|
|
position: fixed;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
/* width/height driven by --pc-vp (set via JS, default 88%) */
|
|
width: calc(var(--pc-vp, 88) * 1vw);
|
|
height: calc(var(--pc-vp, 88) * 1vh);
|
|
background: var(--bg-desktop);
|
|
background-image:
|
|
radial-gradient(ellipse at 20% 30%, rgba(0,170,255,0.05) 0%, transparent 60%),
|
|
radial-gradient(ellipse at 80% 80%, rgba(0,170,255,0.03) 0%, transparent 50%);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
box-shadow: 0 24px 80px rgba(0,0,0,0.85);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* minimized: nur Titelleiste sichtbar */
|
|
#pc-container.minimized { height: auto; min-height: 0; }
|
|
#pc-container.minimized #desktop { display: none !important; }
|
|
#pc-container.minimized #pc-titlebar { border-radius: 10px; border-bottom-color: transparent; }
|
|
|
|
/* ── PC TITELLEISTE ──────────────────────────────────────── */
|
|
#pc-titlebar {
|
|
height: 38px;
|
|
background: var(--titlebar);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
cursor: move;
|
|
user-select: none;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
.pc-title-icon { font-size: 14px; pointer-events: none; }
|
|
#pc-label {
|
|
flex: 1;
|
|
font-size: 0.78rem; font-weight: 600;
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
}
|
|
.pc-title-controls { display: flex; gap: 5px; }
|
|
|
|
#pc-minimize-btn,
|
|
#close-pc-btn {
|
|
width: 22px; height: 22px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 0;
|
|
transition: opacity 0.12s;
|
|
flex-shrink: 0;
|
|
}
|
|
#pc-minimize-btn:hover, #close-pc-btn:hover { opacity: 0.75; }
|
|
#pc-minimize-btn { background: #f59e0b; color: #000; }
|
|
#close-pc-btn { background: #ef4444; color: #fff; }
|
|
|
|
/* ── BOOT SCREEN ────────────────────────────────────────── */
|
|
#boot-screen {
|
|
position: absolute; inset: 0;
|
|
background: #000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
#boot-screen.fade-out { opacity: 0; pointer-events: none; }
|
|
|
|
.boot-logo {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2em;
|
|
color: var(--accent);
|
|
text-transform: uppercase;
|
|
margin-bottom: 2rem;
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
.boot-bar {
|
|
width: 280px; height: 3px;
|
|
background: var(--border);
|
|
border-radius: 99px;
|
|
overflow: hidden;
|
|
}
|
|
.boot-bar-fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
border-radius: 99px;
|
|
width: 0%;
|
|
transition: width linear;
|
|
}
|
|
.boot-version {
|
|
margin-top: 1.5rem;
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
/* ── DESKTOP ────────────────────────────────────────────── */
|
|
#desktop {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
#desktop.visible { display: block; }
|
|
|
|
/* ── DESKTOP ICONS ─────────────────────────────────────── */
|
|
#icon-grid {
|
|
position: absolute;
|
|
top: 20px; left: 20px; right: 20px; bottom: 64px; /* Platz für Taskbar */
|
|
display: flex;
|
|
/* Icons stapeln sich in Spalten und brechen in neue Spalten um,
|
|
sobald die Desktop-Höhe nicht mehr reicht (responsiv bei kleinem Desktop). */
|
|
flex-flow: column wrap;
|
|
align-content: flex-start;
|
|
gap: 18px 12px;
|
|
pointer-events: none; /* nur die Icons selbst klickbar, nicht die Lücken */
|
|
}
|
|
#icon-grid > .desktop-icon { pointer-events: auto; }
|
|
.desktop-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 72px;
|
|
cursor: pointer;
|
|
padding: 8px 4px;
|
|
border-radius: var(--radius-sm);
|
|
transition: background 0.15s;
|
|
}
|
|
.desktop-icon:hover { background: rgba(255,255,255,0.06); }
|
|
.desktop-icon:active { background: rgba(255,255,255,0.1); }
|
|
.icon-glyph {
|
|
width: 44px; height: 44px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-window);
|
|
border: 1px solid var(--border);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 22px;
|
|
}
|
|
.icon-label {
|
|
font-size: 0.7rem;
|
|
color: var(--text);
|
|
text-align: center;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
|
line-height: 1.2;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* ── TASKBAR ────────────────────────────────────────────── */
|
|
#taskbar {
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
height: 40px;
|
|
background: rgba(10,12,18,0.92);
|
|
backdrop-filter: blur(12px);
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 8px;
|
|
z-index: 100;
|
|
}
|
|
#taskbar-apps {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
.taskbar-btn {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font-size: 0.72rem;
|
|
display: flex; align-items: center; gap: 5px;
|
|
transition: background 0.12s;
|
|
white-space: nowrap;
|
|
}
|
|
.taskbar-btn:hover { background: var(--border); }
|
|
.taskbar-btn.active { border-color: var(--accent); color: var(--accent); }
|
|
.taskbar-btn.minimized { opacity: 0.55; }
|
|
|
|
#taskbar-right {
|
|
display: flex; align-items: center; gap: 12px;
|
|
color: var(--text-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
#clock { font-variant-numeric: tabular-nums; }
|
|
|
|
/* ── WINDOW MANAGER ─────────────────────────────────────── */
|
|
#window-layer {
|
|
position: absolute;
|
|
inset: 0; bottom: 40px;
|
|
pointer-events: none;
|
|
}
|
|
.window {
|
|
position: absolute;
|
|
min-width: 400px;
|
|
min-height: 300px;
|
|
background: var(--bg-window);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
pointer-events: all;
|
|
overflow: hidden;
|
|
}
|
|
.window.minimized { display: none; }
|
|
.window.focused { border-color: rgba(0,170,255,0.35); box-shadow: var(--shadow), 0 0 0 1px rgba(0,170,255,0.15); }
|
|
|
|
.window-titlebar {
|
|
height: 34px;
|
|
background: var(--titlebar);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
gap: 8px;
|
|
cursor: move;
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.window-title-icon { font-size: 14px; }
|
|
.window-title-text { flex: 1; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
|
|
.window-controls { display: flex; gap: 5px; }
|
|
.wc-btn {
|
|
width: 22px; height: 22px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: opacity 0.12s;
|
|
}
|
|
.wc-btn:hover { opacity: 0.8; }
|
|
.wc-minimize { background: #f59e0b; color: #000; }
|
|
.wc-maximize { background: #22c55e; color: #000; font-size: 11px; }
|
|
.wc-close { background: #ef4444; color: #fff; }
|
|
|
|
/* ── Resize handles ─────────────────────────────────────── */
|
|
.wc-resize { position: absolute; z-index: 10; }
|
|
.wc-resize-n { top: 0; left: 6px; right: 6px; height: 5px; cursor: n-resize; }
|
|
.wc-resize-s { bottom: 0; left: 6px; right: 6px; height: 5px; cursor: s-resize; }
|
|
.wc-resize-e { right: 0; top: 6px; bottom: 6px; width: 5px; cursor: e-resize; }
|
|
.wc-resize-w { left: 0; top: 6px; bottom: 6px; width: 5px; cursor: w-resize; }
|
|
.wc-resize-nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nw-resize; }
|
|
.wc-resize-ne { top: 0; right: 0; width: 10px; height: 10px; cursor: ne-resize; }
|
|
.wc-resize-sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: sw-resize; }
|
|
.wc-resize-se { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }
|
|
|
|
/* maximized: no border-radius, fills window-layer */
|
|
.window.maximized { border-radius: 0; }
|
|
|
|
.window-body {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ── SCROLLBAR ──────────────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
|
|
|
|
/* ── COMMON LAYOUT ─────────────────────────────────────── */
|
|
.app-layout {
|
|
display: flex;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.app-sidebar {
|
|
width: 200px;
|
|
background: var(--bg-sidebar);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 8px 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.sidebar-item {
|
|
padding: 8px 14px;
|
|
cursor: pointer;
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
display: flex; align-items: center; gap: 8px;
|
|
border-radius: 0;
|
|
transition: background 0.1s, color 0.1s;
|
|
}
|
|
.sidebar-item:hover { background: var(--bg-hover); color: var(--text); }
|
|
.sidebar-item.active { background: rgba(0,170,255,0.12); color: var(--accent); }
|
|
.sidebar-section {
|
|
padding: 12px 14px 4px;
|
|
font-size: 0.62rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-dim);
|
|
}
|
|
.app-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ── FORM ELEMENTS ─────────────────────────────────────── */
|
|
input, textarea, select {
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 0.82rem;
|
|
padding: 7px 10px;
|
|
outline: none;
|
|
width: 100%;
|
|
transition: border-color 0.15s;
|
|
}
|
|
input:focus, textarea:focus, select:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
textarea { resize: vertical; min-height: 80px; }
|
|
label {
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 3px;
|
|
display: block;
|
|
}
|
|
.form-group { display: flex; flex-direction: column; gap: 3px; }
|
|
.form-row { display: flex; gap: 8px; }
|
|
.form-row .form-group { flex: 1; }
|
|
|
|
button {
|
|
cursor: pointer;
|
|
font-family: var(--font);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.78rem;
|
|
padding: 7px 14px;
|
|
transition: opacity 0.12s, background 0.12s;
|
|
}
|
|
button:hover { opacity: 0.85; }
|
|
.btn-primary { background: var(--accent); color: #000; font-weight: 600; }
|
|
.btn-ghost { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); }
|
|
.btn-danger { background: rgba(239,68,68,0.2); color: var(--error); border: 1px solid rgba(239,68,68,0.3); }
|
|
.btn-success { background: rgba(34,197,94,0.2); color: var(--success); border: 1px solid rgba(34,197,94,0.3); }
|
|
.btn-sm { padding: 4px 10px; font-size: 0.7rem; }
|
|
|
|
/* ── TAGS / BADGES ─────────────────────────────────────── */
|
|
.badge {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
min-width: 18px; height: 18px;
|
|
border-radius: 99px;
|
|
padding: 0 5px;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
background: var(--error);
|
|
color: #fff;
|
|
}
|
|
.badge-accent { background: var(--accent); color: #000; }
|
|
.badge-success { background: var(--success); color: #000; }
|
|
|
|
.tag {
|
|
display: inline-flex; align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 99px;
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
background: var(--bg-hover);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.tag-accent { background: rgba(0,170,255,0.12); color: var(--accent); border-color: rgba(0,170,255,0.25); }
|
|
|
|
/* ── DIVIDER ─────────────────────────────────────────────── */
|
|
.divider { height: 1px; background: var(--border); margin: 4px 0; }
|
|
|
|
/* ── EMPTY STATE ─────────────────────────────────────────── */
|
|
.empty-state {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
color: var(--text-dim);
|
|
font-size: 0.8rem;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
.empty-state .empty-icon { font-size: 2.5rem; opacity: 0.4; }
|
|
|
|
/* ── MAIL SPECIFIC ─────────────────────────────────────── */
|
|
.mail-list { display: flex; flex-direction: column; gap: 0; }
|
|
.mail-item {
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.mail-item:hover { background: var(--bg-hover); }
|
|
.mail-item.unread { border-left: 2px solid var(--accent); }
|
|
.mail-item.active { background: rgba(0,170,255,0.08); }
|
|
.mail-from { font-size: 0.72rem; color: var(--text-muted); }
|
|
.mail-subject {
|
|
font-size: 0.8rem;
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.mail-item.unread .mail-subject { color: #fff; font-weight: 700; }
|
|
.mail-date { font-size: 0.65rem; color: var(--text-dim); }
|
|
|
|
.mail-detail { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
|
|
.mail-detail-header { border-bottom: 1px solid var(--border); padding-bottom: 12px; }
|
|
.mail-detail-subject { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
|
|
.mail-detail-meta { font-size: 0.72rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; }
|
|
.mail-detail-body { font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
|
|
|
|
/* ── STORE SPECIFIC ─────────────────────────────────────── */
|
|
.store-statusbar {
|
|
padding: 7px 16px;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 0.7rem;
|
|
color: var(--text-dim);
|
|
background: var(--bg-sidebar);
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
}
|
|
.store-statusbar strong { color: var(--text-muted); }
|
|
.store-card--installed { border-color: rgba(0,170,255,0.2); }
|
|
.store-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.store-card {
|
|
background: var(--bg-sidebar);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.store-card:hover { border-color: var(--border); }
|
|
.store-card-icon { font-size: 1.8rem; }
|
|
.store-card-name { font-size: 0.85rem; font-weight: 600; color: #fff; }
|
|
.store-card-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; flex: 1; }
|
|
.store-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
|
|
.store-price { font-size: 0.72rem; color: var(--text-muted); }
|
|
.store-price.free { color: var(--success); }
|
|
|
|
/* ── BROWSER SPECIFIC ─────────────────────────────────────── */
|
|
.browser-chrome {
|
|
padding: 8px 10px;
|
|
background: var(--titlebar);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
.browser-chrome input {
|
|
flex: 1;
|
|
font-size: 0.78rem;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
}
|
|
.browser-nav-btn {
|
|
width: 26px; height: 26px;
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-muted);
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
flex-shrink: 0;
|
|
}
|
|
.browser-nav-btn:hover { color: var(--text); }
|
|
.browser-viewport {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px 32px;
|
|
}
|
|
.browser-viewport.browser-viewport-external {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
.browser-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
display: block;
|
|
background: #fff;
|
|
}
|
|
.browser-address-input {
|
|
flex: 1;
|
|
font-size: 0.78rem;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
}
|
|
.browser-go-btn {
|
|
font-weight: bold;
|
|
color: var(--accent) !important;
|
|
}
|
|
.browser-404 {
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
height: 100%;
|
|
gap: 12px;
|
|
color: var(--text-dim);
|
|
}
|
|
.browser-404 h2 { font-size: 2rem; color: var(--error); }
|
|
.browser-404 p { font-size: 0.82rem; }
|
|
|
|
/* IC Page styles */
|
|
.ic-page h1 { font-size: 1.5rem; margin-bottom: 6px; color: #fff; }
|
|
.ic-page h2 { font-size: 1.1rem; margin: 16px 0 6px; color: var(--text); }
|
|
.ic-page p { font-size: 0.82rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 8px; }
|
|
.ic-page .article {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 14px;
|
|
margin-bottom: 12px;
|
|
background: var(--bg-sidebar);
|
|
}
|
|
.ic-page .article-date { font-size: 0.65rem; color: var(--text-dim); margin-bottom: 4px; }
|
|
.ic-home-hero {
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
}
|
|
.ic-home-hero h1 { font-size: 2rem; color: var(--accent); margin-bottom: 8px; }
|
|
.ic-home-links { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
|
|
.ic-link-card {
|
|
background: var(--bg-sidebar);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 12px 18px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
color: var(--text);
|
|
transition: border-color 0.15s, background 0.15s;
|
|
text-decoration: none;
|
|
}
|
|
.ic-link-card:hover { border-color: var(--accent); background: var(--bg-hover); }
|
|
|
|
/* ── SEARCH ──────────────────────────────────────────────── */
|
|
.search-bar {
|
|
display: flex; gap: 8px; align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
.search-bar input { flex: 1; }
|
|
|
|
/* ── ANIMATIONS ─────────────────────────────────────────── */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.fade-in { animation: fadeIn 0.2s ease forwards; }
|
|
|
|
/* ── MAIL: folder sidebar items ─────────────────────────── */
|
|
.sidebar-folder-item { justify-content: space-between; }
|
|
.sidebar-folder-del {
|
|
background: none; border: none; color: var(--text-dim);
|
|
cursor: pointer; font-size: 10px; padding: 0 2px; line-height:1;
|
|
opacity: 0;
|
|
}
|
|
.sidebar-folder-item:hover .sidebar-folder-del { opacity: 1; }
|
|
|
|
.mail-move-select {
|
|
font-size: .65rem; padding: 1px 4px; cursor: pointer;
|
|
background: var(--bg-input); border: 1px solid var(--border);
|
|
color: var(--text-muted); border-radius: var(--radius-sm);
|
|
max-width: 120px;
|
|
}
|
|
|
|
/* ── CALENDAR ────────────────────────────────────────────── */
|
|
.cal-month-header {
|
|
padding: 10px 14px;
|
|
font-weight: 700; font-size: .82rem; color: var(--text);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.cal-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.cal-header-cell {
|
|
text-align: center; font-size: .65rem; font-weight: 600;
|
|
color: var(--text-muted); padding: 4px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-sidebar);
|
|
}
|
|
.cal-cell {
|
|
min-height: 54px; padding: 3px 4px;
|
|
border-right: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
cursor: pointer; transition: background .1s;
|
|
}
|
|
.cal-cell:hover { background: var(--bg-hover); }
|
|
.cal-cell-empty { background: var(--bg-sidebar); cursor: default; }
|
|
.cal-today { background: rgba(0,170,255,.08); }
|
|
.cal-today .cal-day-num { color: var(--accent); font-weight: 700; }
|
|
.cal-day-num { font-size: .68rem; color: var(--text-muted); }
|
|
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
|
|
.cal-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
|
.cal-event-item {
|
|
padding: 6px 8px; border-radius: var(--radius-sm);
|
|
background: var(--bg-input);
|
|
font-size: .75rem;
|
|
}
|
|
|
|
/* Schild am Termin: privat, Postfach oder öffentlich */
|
|
.cal-badge {
|
|
font-size: 0.6rem;
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-dim);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.cal-edit-form {
|
|
background: var(--bg-input); border: 1px solid var(--border);
|
|
border-radius: var(--radius); padding: 12px;
|
|
}
|
|
|
|
/* ── ADDRESSBOOK ─────────────────────────────────────────── */
|
|
.contact-avatar {
|
|
width: 34px; height: 34px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-weight: 700; font-size: .78rem; color: #fff; flex-shrink: 0;
|
|
}
|
|
.contact-avatar-lg {
|
|
width: 56px; height: 56px; font-size: 1.2rem; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-weight: 700; color: #fff; flex-shrink: 0;
|
|
}
|
|
.contact-field-group { display: flex; flex-direction: column; gap: 8px; }
|
|
.contact-field {
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
background: var(--bg-input); border-radius: var(--radius-sm);
|
|
padding: 8px 10px;
|
|
}
|
|
.contact-field-label { font-size: .68rem; color: var(--text-dim); }
|
|
.contact-field-value { font-size: .8rem; color: var(--text); word-break: break-all; }
|
|
|
|
/* ── Interaktionsmodus (PC transparent, Fokus im Spiel) ─────────── */
|
|
#pc-interact-hint {
|
|
display: none;
|
|
position: absolute;
|
|
top: 14px; left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
background: rgba(10,14,22,0.85);
|
|
color: #e8eef7;
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 8px;
|
|
padding: 8px 16px;
|
|
font-size: 0.85rem;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,0.5);
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
#pc-interact-hint b { color: #4aa3ff; }
|
|
|
|
#app.interact-mode #pc-container {
|
|
opacity: 0.18;
|
|
pointer-events: none; /* Klicks/Interaktion gehen an das Spiel */
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
#app.interact-mode #dim-overlay { opacity: 0 !important; } /* Spielwelt voll sichtbar */
|
|
#app.interact-mode #pc-interact-hint { display: block; }
|
|
|
|
/* 👁-Button im selben Stil wie das ⚙-Settings-Icon oben */
|
|
#pc-interact-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-dim);
|
|
font-size: 14px;
|
|
width: 22px; height: 22px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 0;
|
|
transition: color 0.12s, background 0.12s;
|
|
flex-shrink: 0;
|
|
}
|
|
#pc-interact-btn:hover { color: var(--text); background: var(--bg-hover); opacity: 1; }
|
|
#pc-interact-btn.active { color: var(--accent); background: rgba(0,170,255,0.1); }
|