marc
0e1c986f90
Sortiert wird im Programm-Editor mit Pfeilen in der Kopfzeile jeder Zeile — das Array ist die Reihenfolge, also gilt sie ueberall zugleich: Streifen, Schublade, Kacheln, Schreibtischsymbole, Startmenue. Neue Apps haengen sich hinten an, statt eine Taste zu verlangen. Die Zifferntasten sind ganz weg (Marcs Entscheidung): ein Pflichtfeld je App, das beim Sortieren nur die Frage aufgeworfen haette, ob es mitwandert. Damit faellt das Feld 'key' aus dem Datenmodell, aus der Kachel, aus der Hilfe und aus der Statuszeile. Alte Eintraege verlieren es beim naechsten Speichern still. Kein A-Z-Knopf — erstmal zu viel, kommt zurueck wenn er fehlt.
1130 lines
30 KiB
CSS
1130 lines
30 KiB
CSS
/*
|
|
* HoneyOS — Amber-CRT-Desktop.
|
|
*
|
|
* Farben laufen ausschließlich über die Phosphor-Variablen unten. Wer eine
|
|
* neue Röhre will, ergänzt einen [data-phosphor]-Block und fasst sonst nichts an.
|
|
*/
|
|
|
|
/* ── Phosphor ──────────────────────────────────────────────────────────── */
|
|
:root,
|
|
[data-phosphor="amber"] {
|
|
--p: #ffb641; /* Vollton — Text, Rahmen im Fokus */
|
|
--p-mid: #c8842a; /* halb — Sekundärtext */
|
|
--p-dim: #6b4718; /* schwach — Rahmen, Trennlinien */
|
|
--p-faint: #2a1c0c; /* Andeutung — Füllungen */
|
|
--bg: #0a0705;
|
|
--bg-raised: #140d07;
|
|
--glow: 0 0 6px rgba(255, 182, 65, 0.45);
|
|
}
|
|
[data-phosphor="green"] {
|
|
--p: #5cff8f;
|
|
--p-mid: #2fa85c;
|
|
--p-dim: #17512c;
|
|
--p-faint: #08200f;
|
|
--bg: #040803;
|
|
--bg-raised: #071206;
|
|
--glow: 0 0 6px rgba(92, 255, 143, 0.4);
|
|
}
|
|
[data-phosphor="ice"] {
|
|
--p: #cfe8ff;
|
|
--p-mid: #7fa6c4;
|
|
--p-dim: #395366;
|
|
--p-faint: #12202a;
|
|
--bg: #04070a;
|
|
--bg-raised: #0a1118;
|
|
--glow: 0 0 6px rgba(207, 232, 255, 0.35);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Boot- und Desktop-Ebene tragen `display:flex` — das schlägt das
|
|
hidden-Attribut des Browsers, beide lägen sonst gleichzeitig da. */
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--p);
|
|
font-family: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Bildschirm + Effekte ──────────────────────────────────────────────── */
|
|
.crt {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
/* Sanftes Glimmen aus der Mitte, wie eine aufgewärmte Röhre */
|
|
background:
|
|
radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--p) 7%, transparent), transparent 70%),
|
|
var(--bg);
|
|
text-shadow: var(--glow);
|
|
}
|
|
|
|
.scanlines,
|
|
.vignette,
|
|
.flicker {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 90;
|
|
}
|
|
|
|
.scanlines {
|
|
background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.vignette {
|
|
background: radial-gradient(115% 105% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
|
|
}
|
|
|
|
.flicker {
|
|
background: var(--p);
|
|
opacity: 0;
|
|
mix-blend-mode: overlay;
|
|
animation: flicker 7s infinite steps(1);
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0%, 96%, 100% { opacity: 0; }
|
|
97% { opacity: 0.035; }
|
|
98% { opacity: 0; }
|
|
99% { opacity: 0.02; }
|
|
}
|
|
|
|
/* Wer die Effekte abschaltet, schaltet sie wirklich ab. */
|
|
[data-scanlines="off"] .scanlines,
|
|
[data-flicker="off"] .flicker {
|
|
display: none;
|
|
}
|
|
[data-glow="off"] .crt {
|
|
text-shadow: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.flicker { animation: none; }
|
|
}
|
|
|
|
/* ── Boot ──────────────────────────────────────────────────────────────── */
|
|
.boot {
|
|
flex: 1;
|
|
padding: clamp(16px, 5vw, 56px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.boot-log {
|
|
margin: 0;
|
|
font: inherit;
|
|
white-space: pre-wrap;
|
|
color: var(--p);
|
|
}
|
|
|
|
.boot-log .ok { color: var(--p); }
|
|
.boot-log .warn { color: var(--p-mid); }
|
|
.boot-log b { font-weight: 700; }
|
|
|
|
.boot-hint {
|
|
margin-top: auto;
|
|
color: var(--p-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.caret::after {
|
|
content: "\2588";
|
|
animation: blink 1s steps(1) infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* ── Desktop ───────────────────────────────────────────────────────────── */
|
|
.desktop {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
animation: warmup 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes warmup {
|
|
from { opacity: 0; transform: scaleY(0.9); filter: brightness(2.5); }
|
|
to { opacity: 1; transform: none; filter: none; }
|
|
}
|
|
|
|
/* Menüleiste — Zwilling von honeybar.js */
|
|
.menubar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
/* 8 px wie die HoneyBar, damit das Logo an derselben Stelle anfängt. */
|
|
padding: 0 8px;
|
|
/* 32 px — dieselbe Höhe wie honeybar.js in den Apps (BAR_H). Wer von einer
|
|
App auf den Schreibtisch wechselt, soll keinen Sprung sehen. */
|
|
border-bottom: 1px solid var(--p-dim);
|
|
background: var(--bg-raised);
|
|
/* 12 px wie in honeybar.js. Ohne das erbte die Leiste die 14 px des Körpers,
|
|
und weil nur das Logo direkt darin hängt (alles andere sitzt in .mb-right
|
|
oder trägt seine eigene Größe), stand ausgerechnet das HONEYOS größer da
|
|
als dasselbe Logo in den Apps. */
|
|
font-size: 12px;
|
|
padding-top: env(safe-area-inset-top);
|
|
height: calc(32px + env(safe-area-inset-top));
|
|
flex: 0 0 calc(32px + env(safe-area-inset-top));
|
|
}
|
|
|
|
.mb-logo {
|
|
background: none;
|
|
border: 0;
|
|
color: var(--p);
|
|
font: inherit;
|
|
letter-spacing: 0.14em;
|
|
cursor: pointer;
|
|
padding: 3px 9px 3px 2px;
|
|
white-space: nowrap;
|
|
}
|
|
.mb-logo b { font-weight: 400; color: var(--p-mid); }
|
|
.mb-logo .hex { font-size: 10px; vertical-align: 2px; }
|
|
|
|
.mb-apps {
|
|
display: flex;
|
|
gap: 4px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
/* Wie in der HoneyBar: Bei vielen Apps schiebt man seitwärts, statt dass die
|
|
Namen zusammengequetscht werden. Der Schatten rechts zeigt, dass es
|
|
weitergeht. */
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
-webkit-overflow-scrolling: touch;
|
|
mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
|
|
}
|
|
.mb-apps::-webkit-scrollbar { display: none; }
|
|
|
|
.mb-app {
|
|
flex: 0 0 auto;
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: var(--p-mid);
|
|
font: inherit;
|
|
letter-spacing: 0.08em;
|
|
padding: 2px 9px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.mb-app:hover { color: var(--p); border-color: var(--p-dim); }
|
|
/* Symbol und Name in einer Zeile, wie in der HoneyBar. Das Symbol trägt die
|
|
Textfarbe, also stimmt es auch im umgekehrten Zustand der aktiven App. */
|
|
.mb-app { display: inline-flex; align-items: center; gap: 6px; }
|
|
.mb-ico,
|
|
.sm-ico { display: block; width: 12px; height: 12px; flex: 0 0 auto; }
|
|
.mb-ico svg,
|
|
.sm-ico svg { width: 12px; height: 12px; display: block; }
|
|
.mb-app[aria-current="true"] {
|
|
color: var(--bg);
|
|
background: var(--p);
|
|
border-color: var(--p);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.mb-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--p-mid);
|
|
}
|
|
.mb-clock { font-variant-numeric: tabular-nums; color: var(--p); }
|
|
|
|
.mb-btn {
|
|
background: none;
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p);
|
|
font: inherit;
|
|
line-height: 1;
|
|
padding: 3px 7px;
|
|
cursor: pointer;
|
|
}
|
|
.mb-btn:hover { background: var(--p-faint); }
|
|
|
|
/* Bühne */
|
|
.stage {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: clamp(14px, 3vw, 32px);
|
|
display: grid;
|
|
gap: clamp(14px, 3vw, 28px);
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-content: start;
|
|
max-width: 1100px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (min-width: 860px) {
|
|
.stage {
|
|
grid-template-columns: 320px minmax(0, 1fr);
|
|
align-items: start;
|
|
}
|
|
/* Ohne feste Plätze verteilt das Raster die drei Bereiche der Reihe nach —
|
|
das Wetter landete dann neben „system" und schob die Kacheln in die
|
|
schmale linke Spalte. Links stehen die Anzeigen untereinander, rechts
|
|
gehören die Apps, über die volle Höhe. */
|
|
.win-user { grid-column: 1; grid-row: 1; }
|
|
.win-status { grid-column: 1; grid-row: 2; }
|
|
.win-weather { grid-column: 1; grid-row: 3; }
|
|
.tiles { grid-column: 2; grid-row: 1 / span 3; }
|
|
}
|
|
|
|
/* Fenster */
|
|
.win {
|
|
border: 1px solid var(--p-dim);
|
|
background: var(--bg-raised);
|
|
}
|
|
|
|
.win-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 3px 8px;
|
|
border-bottom: 1px solid var(--p-dim);
|
|
background: var(--p-faint);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--p-mid);
|
|
}
|
|
.win-dots { letter-spacing: 2px; opacity: 0.5; }
|
|
.win-close {
|
|
background: none;
|
|
border: 0;
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.win-body { padding: 14px; }
|
|
|
|
.statlist {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 3px 12px;
|
|
font-size: 12.5px;
|
|
}
|
|
.statlist dt { color: var(--p-dim); }
|
|
.statlist dd { margin: 0; color: var(--p-mid); text-align: right; font-variant-numeric: tabular-nums; }
|
|
.statlist dd.up { color: var(--p); }
|
|
.statlist dd.down { color: var(--p-mid); opacity: 0.6; }
|
|
|
|
/* App-Kacheln */
|
|
.tiles {
|
|
display: grid;
|
|
gap: clamp(12px, 2.5vw, 20px);
|
|
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
|
align-content: start;
|
|
}
|
|
|
|
.tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 16px;
|
|
min-height: 168px;
|
|
border: 1px solid var(--p-dim);
|
|
background: var(--bg-raised);
|
|
color: var(--p);
|
|
font: inherit;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: background 0.12s, border-color 0.12s, transform 0.12s;
|
|
}
|
|
.tile:hover,
|
|
.tile:focus-visible {
|
|
background: var(--p-faint);
|
|
border-color: var(--p);
|
|
transform: translateY(-2px);
|
|
outline: none;
|
|
}
|
|
.tile:active { transform: none; }
|
|
|
|
|
|
.tile-icon {
|
|
width: 46px;
|
|
height: 46px;
|
|
color: var(--p);
|
|
}
|
|
.tile-icon svg { display: block; width: 100%; height: 100%; }
|
|
|
|
.tile-name {
|
|
font-size: 16px;
|
|
letter-spacing: 0.16em;
|
|
}
|
|
.tile-sub {
|
|
font-size: 12px;
|
|
color: var(--p-mid);
|
|
margin-top: -6px;
|
|
}
|
|
|
|
.tile-state {
|
|
margin-top: auto;
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--p-dim);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.tile-state .led {
|
|
width: 7px;
|
|
height: 7px;
|
|
background: var(--p-dim);
|
|
border-radius: 50%;
|
|
}
|
|
.tile-state[data-state="up"] { color: var(--p); }
|
|
.tile-state[data-state="up"] .led { background: var(--p); box-shadow: var(--glow); }
|
|
.tile-state[data-state="down"] { color: var(--p-mid); }
|
|
.tile-state[data-state="down"] .led { background: transparent; border: 1px solid var(--p-mid); }
|
|
|
|
/* leerer Zustand */
|
|
.tile-add {
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--p-dim);
|
|
border-style: dashed;
|
|
min-height: 168px;
|
|
}
|
|
|
|
/* Statuszeile */
|
|
.statusbar {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 4px 10px;
|
|
padding-bottom: calc(4px + env(safe-area-inset-bottom));
|
|
border-top: 1px solid var(--p-dim);
|
|
background: var(--bg-raised);
|
|
color: var(--p-dim);
|
|
font-size: 11px;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
.sb-right { color: var(--p-mid); white-space: nowrap; }
|
|
|
|
@media (max-width: 620px) {
|
|
.statusbar { display: none; }
|
|
|
|
/* Am Handy wird aus der Kachelwand eine Liste. Sechs Kacheln zu je 168 px
|
|
sind ein Bildschirm Gescrolle, bevor man die dritte App sieht — das Raster
|
|
ist für den grossen Schirm gedacht, hier zählt der Überblick.
|
|
Symbol links, Name und Zustand rechts, eine Zeile pro App. */
|
|
.tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
|
|
.tile {
|
|
display: grid;
|
|
grid-template-columns: 40px minmax(0, 1fr) auto;
|
|
grid-template-areas: "symbol name zustand" "symbol unter zustand";
|
|
align-items: center;
|
|
column-gap: 12px;
|
|
row-gap: 0;
|
|
min-height: 0;
|
|
padding: 10px 12px;
|
|
}
|
|
.tile-icon { grid-area: symbol; width: 32px; height: 32px; }
|
|
.tile-name { grid-area: name; }
|
|
.tile-sub { grid-area: unter; }
|
|
.tile-state { grid-area: zustand; margin: 0; white-space: nowrap; }
|
|
}
|
|
|
|
/* ── Modal ─────────────────────────────────────────────────────────────── */
|
|
.modal {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 80;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 16px;
|
|
background: rgba(0, 0, 0, 0.65);
|
|
}
|
|
.modal[hidden] { display: none; }
|
|
|
|
.win-modal {
|
|
width: min(520px, 100%);
|
|
max-height: min(78vh, 640px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 0 0 1px var(--p-faint), 0 18px 60px rgba(0, 0, 0, 0.7);
|
|
}
|
|
.win-modal .win-body { overflow-y: auto; }
|
|
|
|
.field {
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
}
|
|
.field > .label {
|
|
display: block;
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--p-dim);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.seg button {
|
|
background: none;
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p-mid);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
padding: 4px 12px;
|
|
cursor: pointer;
|
|
}
|
|
.seg button:hover { border-color: var(--p); color: var(--p); }
|
|
.seg button[aria-pressed="true"] {
|
|
background: var(--p);
|
|
border-color: var(--p);
|
|
color: var(--bg);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.field input[type="text"],
|
|
.field input[type="url"] {
|
|
width: 100%;
|
|
background: var(--bg);
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
padding: 6px 8px;
|
|
}
|
|
.field input:focus {
|
|
outline: none;
|
|
border-color: var(--p);
|
|
}
|
|
|
|
.url-row {
|
|
display: grid;
|
|
grid-template-columns: 88px 1fr;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
.url-row span { font-size: 12px; color: var(--p-mid); letter-spacing: 0.1em; }
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--p-faint);
|
|
}
|
|
.btn {
|
|
background: none;
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
letter-spacing: 0.1em;
|
|
padding: 5px 14px;
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { background: var(--p-faint); border-color: var(--p); }
|
|
.btn-primary { background: var(--p); border-color: var(--p); color: var(--bg); text-shadow: none; }
|
|
.btn-primary:hover { background: var(--p); filter: brightness(1.1); }
|
|
|
|
.about p { margin: 0 0 10px; color: var(--p-mid); font-size: 13px; }
|
|
.about code {
|
|
color: var(--p);
|
|
background: var(--p-faint);
|
|
padding: 1px 4px;
|
|
}
|
|
.keys {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 4px 14px;
|
|
font-size: 12.5px;
|
|
margin-top: 12px;
|
|
}
|
|
.keys dt { color: var(--p); }
|
|
.keys dd { margin: 0; color: var(--p-mid); }
|
|
|
|
/* ── Desktop-Modus ─────────────────────────────────────────────────────────
|
|
* Dieselbe Röhre, andere Betriebsart: Symbole auf der Fläche, echte Fenster,
|
|
* Taskleiste unten. Die Menüleiste oben bleibt in beiden Modi dieselbe — sie
|
|
* ist die Klammer, die HoneyOS mit den Apps teilt.
|
|
*/
|
|
.deskspace {
|
|
flex: 1;
|
|
min-height: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.desk-icons {
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 12px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
gap: 2px;
|
|
}
|
|
|
|
.deskicon {
|
|
width: 94px;
|
|
padding: 8px 4px 6px;
|
|
text-align: center;
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: var(--p);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.deskicon:hover { border-color: var(--p-dim); }
|
|
.deskicon:focus-visible { outline: 1px dotted var(--p); outline-offset: -3px; }
|
|
|
|
.di-glyph {
|
|
/* inline-Elemente ignorieren Breite und Höhe — ohne block wächst das SVG
|
|
auf seine Eigengröße und sprengt das Symbol. */
|
|
display: block;
|
|
width: 34px;
|
|
height: 34px;
|
|
margin: 0 auto 6px;
|
|
color: var(--p);
|
|
}
|
|
.di-glyph svg { display: block; width: 100%; height: 100%; }
|
|
|
|
.di-label {
|
|
display: inline-block;
|
|
font-size: 11.5px;
|
|
padding: 1px 4px;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.deskicon[data-sel="1"] { background: var(--p-faint); border-color: var(--p-dim); }
|
|
.deskicon[data-sel="1"] .di-label { background: var(--p); color: var(--bg); text-shadow: none; }
|
|
|
|
/* Erreichbarkeitslampe am Symbol */
|
|
.deskicon[data-app] .di-label::after { content: ""; }
|
|
.deskicon[data-state="down"] .di-glyph { opacity: 0.45; }
|
|
|
|
/* Fenster im Desktop-Modus */
|
|
.windows {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dwin {
|
|
position: absolute;
|
|
pointer-events: auto;
|
|
border: 1px solid var(--p-dim);
|
|
background: var(--bg-raised);
|
|
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100% - 16px);
|
|
}
|
|
.dwin[data-focus="1"] { border-color: var(--p); }
|
|
.dwin[data-min="1"] { display: none; }
|
|
|
|
.dwin .win-bar {
|
|
cursor: grab;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
.dwin[data-drag="1"] .win-bar { cursor: grabbing; }
|
|
.dwin[data-focus="0"] .win-bar { color: var(--p-dim); }
|
|
|
|
.dwin .win-body {
|
|
overflow: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.win-btns { display: flex; gap: 2px; }
|
|
.win-btn {
|
|
background: none;
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
padding: 1px 5px;
|
|
cursor: pointer;
|
|
}
|
|
.win-btn:hover { background: var(--p-faint); border-color: var(--p); }
|
|
|
|
/* Programme-Fenster */
|
|
.applist { display: flex; flex-direction: column; gap: 2px; }
|
|
.applist button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
padding: 5px 6px;
|
|
cursor: pointer;
|
|
}
|
|
.applist button:hover { background: var(--p-faint); border-color: var(--p-dim); }
|
|
.applist .al-glyph { width: 18px; height: 18px; flex: none; }
|
|
.applist .al-glyph svg { display: block; width: 100%; height: 100%; }
|
|
.applist .al-sub { margin-left: auto; color: var(--p-dim); font-size: 11px; }
|
|
|
|
/* Taskleiste */
|
|
.taskbar {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 6px;
|
|
padding-bottom: calc(3px + env(safe-area-inset-bottom));
|
|
border-top: 1px solid var(--p-dim);
|
|
background: var(--bg-raised);
|
|
}
|
|
|
|
.task-start {
|
|
background: var(--p-faint);
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
padding: 3px 10px;
|
|
cursor: pointer;
|
|
flex: none;
|
|
}
|
|
.task-start:hover, .task-start[aria-expanded="true"] { background: var(--p); color: var(--bg); text-shadow: none; }
|
|
|
|
.task-list {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex: 1;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.task-list::-webkit-scrollbar { display: none; }
|
|
|
|
.task-btn {
|
|
background: none;
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p-mid);
|
|
font: inherit;
|
|
font-size: 11px;
|
|
padding: 3px 10px;
|
|
min-width: 96px;
|
|
max-width: 160px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
}
|
|
.task-btn:hover { color: var(--p); }
|
|
.task-btn[data-active="1"] { background: var(--p-faint); color: var(--p); border-color: var(--p); }
|
|
|
|
.task-date { color: var(--p-dim); font-size: 11px; white-space: nowrap; }
|
|
|
|
/* Startmenü */
|
|
.startmenu {
|
|
position: absolute;
|
|
left: 6px;
|
|
bottom: 4px;
|
|
min-width: 208px;
|
|
z-index: 70;
|
|
border: 1px solid var(--p);
|
|
background: var(--bg-raised);
|
|
padding: 4px;
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.startmenu[data-open="1"] { display: flex; }
|
|
/* Dasselbe Menü, nur andersherum aufgehängt: das Startmenü wächst aus der
|
|
Taskleiste nach oben, das Systemmenü aus der Menüleiste nach unten. */
|
|
.sysmenu {
|
|
top: calc(32px + env(safe-area-inset-top) + 2px);
|
|
bottom: auto;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.mb-logo[aria-expanded="true"] { background: var(--p-faint); }
|
|
/* Das App-Menü hängt am Pfeil rechts — sonst dasselbe Feld. */
|
|
.appmenu {
|
|
top: calc(32px + env(safe-area-inset-top) + 2px);
|
|
bottom: auto;
|
|
left: auto;
|
|
right: 6px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* Abmelden steht unten in den Einstellungen, abgesetzt vom Rest: Es ist die
|
|
einzige Schaltfläche dort, die nicht etwas einstellt, sondern etwas beendet. */
|
|
.field-out {
|
|
border-top: 1px solid var(--p-faint);
|
|
padding-top: 12px;
|
|
margin-top: 4px;
|
|
margin-bottom: 0;
|
|
}
|
|
.btn-out { width: 100%; color: var(--p-mid); }
|
|
.btn-out:hover { color: var(--bg); background: var(--p); }
|
|
.startmenu .sm-head {
|
|
padding: 4px 8px;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--p-dim);
|
|
}
|
|
.startmenu button {
|
|
background: none;
|
|
border: 0;
|
|
color: var(--p-mid);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
text-align: left;
|
|
padding: 6px 9px;
|
|
cursor: pointer;
|
|
/* Symbol links, Name daneben — in den Menüs stehen die Symbole immer. */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.startmenu button:hover { background: var(--p); color: var(--bg); text-shadow: none; }
|
|
.startmenu hr { border: 0; border-top: 1px solid var(--p-faint); margin: 3px 0; }
|
|
|
|
/* Die Schublade — der Zwilling der Schublade in honeybar.js. Symbol groß,
|
|
Name darunter, Untertitel als dritte Zeile: Wer sie aufmacht, sucht etwas,
|
|
und acht geteilte Pixelsymbole allein sagen dafür zu wenig. */
|
|
.appmenu { min-width: 318px; max-width: min(360px, calc(100vw - 12px)); }
|
|
/* minmax(0, 1fr): Ohne das darf eine lange Beschreibung ihre Spalte
|
|
auseinanderdrücken, und die Schublade wird breiter als der Schirm. */
|
|
.drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
|
|
.startmenu .drawer button.d-app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 9px 4px;
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
min-width: 0;
|
|
}
|
|
.startmenu .drawer .d-name,
|
|
.startmenu .drawer .d-sub { max-width: 100%; }
|
|
.startmenu .drawer .d-name { overflow: hidden; text-overflow: ellipsis; }
|
|
.startmenu .drawer button.d-app:hover {
|
|
background: none;
|
|
color: var(--p);
|
|
border-color: var(--p-dim);
|
|
text-shadow: var(--glow);
|
|
}
|
|
.d-ico { width: 24px; height: 24px; }
|
|
.d-ico svg { width: 24px; height: 24px; display: block; }
|
|
.d-name { letter-spacing: 0.08em; }
|
|
/* Umbrechen darf er, wachsen nicht — sonst stehen die Kacheln unterschiedlich
|
|
hoch und das Raster franst aus. */
|
|
.d-sub {
|
|
font-size: 10px;
|
|
line-height: 1.25;
|
|
color: var(--p-dim);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.task-btn { min-width: 0; }
|
|
.task-date { display: none; }
|
|
}
|
|
|
|
/* ── Anmeldung ─────────────────────────────────────────────────────────────
|
|
* Derselbe Bildschirm wie der Boot, nur endet er nicht von selbst. Wer nicht
|
|
* angemeldet ist, sieht vom Schreibtisch nichts — auch nicht die App-Liste.
|
|
*/
|
|
.login {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: clamp(16px, 5vw, 56px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.login-box {
|
|
margin-top: 26px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.login-btn {
|
|
background: none;
|
|
border: 1px solid var(--p);
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 15px;
|
|
letter-spacing: 0.14em;
|
|
padding: 10px 22px;
|
|
cursor: pointer;
|
|
animation: pulse 2.4s ease-in-out infinite;
|
|
}
|
|
.login-btn:hover, .login-btn:focus-visible {
|
|
background: var(--p);
|
|
color: var(--bg);
|
|
text-shadow: none;
|
|
outline: none;
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
50% { box-shadow: 0 0 14px color-mix(in srgb, var(--p) 45%, transparent); }
|
|
}
|
|
|
|
.login-note {
|
|
margin: 0;
|
|
color: var(--p-dim);
|
|
font-size: 12px;
|
|
max-width: 52ch;
|
|
line-height: 1.6;
|
|
}
|
|
.login-note b { color: var(--p-mid); font-weight: 400; }
|
|
|
|
/* Nutzer in der HoneyBar */
|
|
|
|
/* ── App-Verwaltung ────────────────────────────────────────────────────── */
|
|
.apped { display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
.approw {
|
|
border: 1px solid var(--p-dim);
|
|
background: var(--bg);
|
|
}
|
|
.approw > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 7px 9px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
font-size: 13px;
|
|
}
|
|
.approw > summary::-webkit-details-marker { display: none; }
|
|
.approw[open] > summary { border-bottom: 1px solid var(--p-dim); background: var(--p-faint); }
|
|
.approw .ae-glyph { width: 18px; height: 18px; flex: none; }
|
|
.approw .ae-glyph svg { display: block; width: 100%; height: 100%; }
|
|
.approw .ae-url { margin-left: auto; color: var(--p-dim); font-size: 11px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.approw .ae-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
/* Sortieren, ohne die Zeile aufzumachen: Die Pfeile sitzen in der Kopfzeile.
|
|
Die Adresse rückt dafür ein Stück nach links (kein margin-left:auto mehr an
|
|
ihr allein, sondern hier). */
|
|
.approw .ae-move { margin-left: 8px; display: flex; gap: 2px; flex: none; }
|
|
.ae-arrow {
|
|
background: none;
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p-mid);
|
|
font: inherit;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
padding: 4px 6px;
|
|
cursor: pointer;
|
|
}
|
|
.ae-arrow:hover:not(:disabled) { background: var(--p); color: var(--bg); border-color: var(--p); text-shadow: none; }
|
|
.ae-arrow:disabled { opacity: 0.3; cursor: default; }
|
|
|
|
.ae-field { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; }
|
|
.ae-field > span { font-size: 11px; color: var(--p-dim); letter-spacing: 0.1em; }
|
|
.ae-field input, .ae-field select {
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--p-dim);
|
|
color: var(--p);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
padding: 5px 7px;
|
|
min-width: 0;
|
|
}
|
|
.ae-field input:focus, .ae-field select:focus { outline: none; border-color: var(--p); }
|
|
/* Hinweise stehen unter ihrem Feld, bündig mit der Eingabe — nicht daneben. */
|
|
.ae-hint { margin: -4px 0 0 100px; color: var(--p-dim); font-size: 11px; }
|
|
|
|
@media (max-width: 520px) {
|
|
.ae-field { grid-template-columns: 1fr; gap: 3px; }
|
|
.ae-hint { margin-left: 0; }
|
|
}
|
|
|
|
.ae-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 2px; }
|
|
.btn-danger { border-color: var(--p-dim); color: var(--p-mid); }
|
|
.btn-danger:hover { border-color: #d0563a; color: #ff7a5c; background: none; }
|
|
|
|
.apped-empty {
|
|
border: 1px dashed var(--p-dim);
|
|
padding: 18px;
|
|
text-align: center;
|
|
color: var(--p-dim);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.saveline {
|
|
min-height: 16px;
|
|
font-size: 11.5px;
|
|
color: var(--p-mid);
|
|
}
|
|
.saveline[data-kind="err"] { color: #ff7a5c; }
|
|
|
|
/* ── Wetter ────────────────────────────────────────────────────────────────
|
|
Zweimal dasselbe Feld: als Fenster im Terminal-Modus, als kleines Schild
|
|
oben rechts auf dem Schreibtisch. Ein Aufbau, zwei Rahmen. */
|
|
.wx {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.wx-glyph {
|
|
display: block;
|
|
width: 44px;
|
|
height: 44px;
|
|
flex: 0 0 44px;
|
|
color: var(--p);
|
|
}
|
|
.wx-glyph svg { width: 100%; height: 100%; display: block; }
|
|
.wx-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
|
|
.wx-temp { font-size: 22px; color: var(--p); }
|
|
.wx-desc { color: var(--p-mid); }
|
|
.wx-city {
|
|
color: var(--p-dim);
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Terminal-Modus: ein Fenster wie die anderen. Schmal gehalten — über die
|
|
volle Breite gezogen sähe eine Temperatur nach Bekanntmachung aus. */
|
|
.win-weather { max-width: 320px; align-self: start; }
|
|
|
|
|
|
/* Schreibtisch-Modus: schwebendes Schild, rechts unter der Menüleiste. Nicht
|
|
verschiebbar wie ein Fenster — ein Widget, das man erst suchen muss, ist
|
|
keins. */
|
|
.deskwidget {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
z-index: 5;
|
|
padding: 10px 14px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--p-faint);
|
|
box-shadow: 0 0 0 1px var(--bg), 4px 4px 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
@media (max-width: 620px) {
|
|
/* Am Handy stünde es über der Symbolspalte. */
|
|
.deskwidget { position: static; margin: 10px; }
|
|
}
|
|
|
|
/* Ortssuche in den Einstellungen */
|
|
.wx-city-row { display: flex; gap: 6px; margin-top: 8px; }
|
|
.wx-city-row input { flex: 1; min-width: 0; }
|
|
.wx-results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
|
|
.wx-hit {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 5px 8px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--p-mid);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.wx-hit span { color: var(--p-dim); font-size: 12px; }
|
|
.wx-hit:hover { border-color: var(--p-faint); color: var(--p); }
|
|
|
|
/* Wetter in der Menüleiste — dasselbe Maß wie in honeybar.js, damit die
|
|
HoneyBar hier und die in den Apps nicht unterschiedlich aussehen. */
|
|
.mb-wx {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--p-mid);
|
|
}
|
|
.mb-wx[hidden] { display: none; }
|
|
.mb-wx svg { width: 14px; height: 14px; display: block; }
|
|
@media (max-width: 700px) { .mb-wx-temp { display: none; } }
|
|
|
|
/* ── Wer angemeldet ist ────────────────────────────────────────────────────
|
|
Zwei Rahmen, ein Aufbau — Fenster im Terminal-Modus, Schild auf dem
|
|
Schreibtisch, genau wie beim Wetter. */
|
|
.uw { display: flex; align-items: center; gap: 12px; }
|
|
.uw-bild {
|
|
width: 40px;
|
|
height: 40px;
|
|
flex: 0 0 40px;
|
|
display: block;
|
|
border: 1px solid var(--p-dim);
|
|
object-fit: cover;
|
|
image-rendering: pixelated;
|
|
}
|
|
.uw-leer { color: var(--p-dim); padding: 4px; }
|
|
.uw-leer svg { width: 100%; height: 100%; display: block; }
|
|
.uw-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
|
|
.uw-name { color: var(--p); font-size: 15px; }
|
|
.uw-gruss { color: var(--p-mid); }
|
|
.uw-host { color: var(--p-dim); font-size: 12px; }
|
|
.win-user { max-width: 320px; align-self: start; }
|
|
|
|
/* Einspaltig (Handy, schmales Fenster) sollen die Widgets so breit sein wie das
|
|
Systemfenster. Drei verschieden breite Kästen untereinander sehen aus wie ein
|
|
Fehler, nicht wie Absicht. Muss hinter den Regeln stehen, die es aufhebt —
|
|
eine Medienabfrage erhöht die Spezifität nicht. */
|
|
@media (max-width: 859px) {
|
|
.win-weather,
|
|
.win-user { max-width: none; }
|
|
}
|
|
|
|
/* Die Schilder auf dem Schreibtisch stapeln sich oben rechts. */
|
|
.deskwidgets {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
}
|
|
.deskwidgets .deskwidget { position: static; }
|
|
@media (max-width: 620px) {
|
|
.deskwidgets { position: static; align-items: stretch; margin: 10px; }
|
|
}
|