Notiz zeigt sich sofort gesetzt, Widgets nach Wunsch des Nutzers
Aus dem Zettel wird die Notiz: Der Text steht immer formatiert da, roh ist nur
die Zeile mit der Schreibmarke. Dazu eine kleine Werkzeugleiste (Aufgabe,
Aufzaehlung, Nummer, Ueberschrift, fett, Linie), Enter fuehrt Listen fort,
Backspace am Zeilenanfang nimmt erst den Vorsatz. Fuer groessere Umbauten
bleibt der Quelltext-Knopf.
Kein contenteditable: Der Quelltext bleibt die Wahrheit und wird nie aus dem
HTML zurueckgerechnet, das der Browser beim Tippen erzeugt.
Reihenfolge und An/Aus der Widgets liegen jetzt je Nutzer auf dem Server, in
einer Einstellung ("benutzer,notiz,-system,wetter,bild"). Der Schalter fuer das
Wetter auf dem Schreibtisch faellt damit weg — es ist ein Widget wie jedes
andere.
Die Einstellungen sind in Abschnitte sortiert (Darstellung, HoneyBar, Widgets,
Wetter, Programme, Konto), Beschriftung links, Schalter rechts.
This commit is contained in:
marc committed
1 parent
c0abfbb491
commit
3807ddca24
12 files changed
+806
-220
No files matched your search
+133
-38
@@ -490,6 +490,62 @@ body {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ── Einstellungen: Abschnitte statt einer langen Spalte ───────────────────
|
||||
Beschriftung links, Schalter rechts. Bei zwölf Einstellungen untereinander
|
||||
sucht man sonst; mit Überschriften weiß man, wo man ist. */
|
||||
.sek { margin-bottom: 18px; }
|
||||
.sek + .sek { border-top: 1px solid var(--p-faint); padding-top: 14px; }
|
||||
.sek-titel {
|
||||
margin: 0 0 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--p);
|
||||
}
|
||||
.sek-hinweis { margin: 8px 0 0; color: var(--p-dim); font-size: 11px; line-height: 1.4; }
|
||||
.reihe {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.reihe .r-label { font-size: 12.5px; color: var(--p-mid); }
|
||||
.reihe .seg { justify-content: flex-end; }
|
||||
@media (max-width: 460px) {
|
||||
.reihe { flex-direction: column; align-items: stretch; gap: 4px; }
|
||||
.reihe .seg { justify-content: flex-start; }
|
||||
}
|
||||
|
||||
/* Die Widget-Liste: an/aus, Name, Pfeile — dieselben Pfeile wie bei den Apps. */
|
||||
.wl { list-style: none; margin: 0; padding: 0; }
|
||||
.wl-zeile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--p-faint);
|
||||
padding: 5px 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.wl-zeile.wl-aus .wl-name { color: var(--p-dim); }
|
||||
.wl-an {
|
||||
background: var(--p);
|
||||
border: 1px solid var(--p);
|
||||
color: var(--bg);
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
text-shadow: none;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
flex: none;
|
||||
width: 44px;
|
||||
}
|
||||
.wl-an[aria-pressed="false"] { background: none; border-color: var(--p-dim); color: var(--p-dim); text-shadow: inherit; }
|
||||
.wl-name { flex: 1; min-width: 0; font-size: 13px; color: var(--p-mid); }
|
||||
.wl-name em { font-style: normal; color: var(--p-dim); font-size: 11px; margin-left: 6px; }
|
||||
.wl .ae-move { margin-left: 0; }
|
||||
|
||||
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.seg button {
|
||||
background: none;
|
||||
@@ -785,15 +841,9 @@ body {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* Abmelden steht unten in den Einstellungen, abgesetzt vom Rest: Es ist die
|
||||
/* Abmelden steht unten in den Einstellungen, im letzten Abschnitt: 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 { width: 100%; color: var(--p-mid); margin-top: 10px; }
|
||||
.btn-out:hover { color: var(--bg); background: var(--p); }
|
||||
.startmenu .sm-head {
|
||||
padding: 4px 8px;
|
||||
@@ -1115,16 +1165,17 @@ body {
|
||||
.w-zustand { color: var(--p-dim); margin: 0; font-size: 12.5px; }
|
||||
.w-fehler { color: var(--p-mid); }
|
||||
|
||||
/* ── Zettel ────────────────────────────────────────────────────────────────
|
||||
* Gelesen wird gesetzt, geschrieben wird roh. Beide Ansichten sind gleich
|
||||
* hoch, damit der Kasten beim Umschalten nicht springt. */
|
||||
.zettel-text,
|
||||
.zettel-feld {
|
||||
/* ── Notiz ─────────────────────────────────────────────────────────────────
|
||||
* Gesetzt ist der Normalfall — roh ist nur die Zeile, in der man steht (und im
|
||||
* Quelltext-Modus das ganze Feld). Beide sind gleich hoch, damit der Kasten
|
||||
* beim Umschalten nicht springt. */
|
||||
.notiz-text,
|
||||
.notiz-feld {
|
||||
min-height: 112px;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.zettel-feld {
|
||||
.notiz-feld {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: var(--bg);
|
||||
@@ -1136,44 +1187,44 @@ body {
|
||||
padding: 8px;
|
||||
resize: vertical;
|
||||
}
|
||||
.zettel-feld:focus { outline: none; border-color: var(--p); }
|
||||
.notiz-feld:focus { outline: none; border-color: var(--p); }
|
||||
|
||||
.zettel-text { font-size: 13px; line-height: 1.45; color: var(--p-mid); }
|
||||
.zettel-text h3,
|
||||
.zettel-text h4,
|
||||
.zettel-text h5 {
|
||||
.notiz-text { font-size: 13px; line-height: 1.45; color: var(--p-mid); }
|
||||
.notiz-text h3,
|
||||
.notiz-text h4,
|
||||
.notiz-text h5 {
|
||||
margin: 10px 0 4px;
|
||||
color: var(--p);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.zettel-text h3 { font-size: 13px; }
|
||||
.zettel-text h4 { font-size: 12px; }
|
||||
.zettel-text h5 { font-size: 11px; color: var(--p-mid); }
|
||||
.zettel-text > :first-child { margin-top: 0; }
|
||||
.zettel-text p { margin: 0 0 6px; }
|
||||
.zettel-text ul,
|
||||
.zettel-text ol { margin: 0 0 6px; padding-left: 18px; }
|
||||
.zettel-text li { margin: 1px 0; }
|
||||
.zettel-text code {
|
||||
.notiz-text h3 { font-size: 13px; }
|
||||
.notiz-text h4 { font-size: 12px; }
|
||||
.notiz-text h5 { font-size: 11px; color: var(--p-mid); }
|
||||
.notiz-text > :first-child { margin-top: 0; }
|
||||
.notiz-text p { margin: 0 0 6px; }
|
||||
.notiz-text ul,
|
||||
.notiz-text ol { margin: 0 0 6px; padding-left: 18px; }
|
||||
.notiz-text li { margin: 1px 0; }
|
||||
.notiz-text code {
|
||||
background: var(--p-faint);
|
||||
padding: 0 3px;
|
||||
color: var(--p);
|
||||
}
|
||||
.zettel-text b { color: var(--p); font-weight: 400; }
|
||||
.zettel-text hr { border: 0; border-top: 1px solid var(--p-faint); margin: 8px 0; }
|
||||
.notiz-text b { color: var(--p); font-weight: 400; }
|
||||
.notiz-text hr { border: 0; border-top: 1px solid var(--p-faint); margin: 8px 0; }
|
||||
|
||||
/* Häkchen: anklickbar, ohne in den Text zu springen. Die Aufzählungspunkte
|
||||
fallen weg — das Kästchen ist der Punkt. */
|
||||
.zettel-text .zettel-hak { list-style: none; margin-left: -18px; }
|
||||
.zettel-text .zettel-hak label {
|
||||
.notiz-text .notiz-hak { list-style: none; margin-left: -18px; }
|
||||
.notiz-text .notiz-hak label {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.zettel-text .zettel-hak input {
|
||||
.notiz-text .notiz-hak input {
|
||||
appearance: none;
|
||||
flex: none;
|
||||
width: 11px;
|
||||
@@ -1184,18 +1235,62 @@ body {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.zettel-text .zettel-hak input:checked { background: var(--p); border-color: var(--p); }
|
||||
.zettel-text .zettel-hak.ab span { color: var(--p-dim); text-decoration: line-through; }
|
||||
.notiz-text .notiz-hak input:checked { background: var(--p); border-color: var(--p); }
|
||||
.notiz-text .notiz-hak.ab span { color: var(--p-dim); text-decoration: line-through; }
|
||||
.notiz-text i { color: var(--p-mid); font-style: italic; }
|
||||
|
||||
.zettel-fuss {
|
||||
/* Die Zeile, in der die Schreibmarke steht: als Feld, aber ohne wie eines
|
||||
auszusehen. Sie soll an der Stelle sitzen, an der eben noch der gesetzte
|
||||
Text stand — gleiche Schrift, gleiche Höhe, nur ein Streifen links zeigt,
|
||||
dass hier gerade der Quelltext steht. */
|
||||
.notiz-zeile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--p-faint);
|
||||
border: 0;
|
||||
border-left: 2px solid var(--p);
|
||||
color: var(--p);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
padding: 1px 4px 1px 6px;
|
||||
margin: 1px 0;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.notiz-zeile:focus { outline: none; }
|
||||
.notiz-rohli { list-style: none; margin-left: -18px; }
|
||||
.notiz-leer { cursor: text; }
|
||||
|
||||
/* Werkzeugleiste: klein, einreihig, immer da. Sie wirkt auf die Zeile, in der
|
||||
man steht — deshalb steht sie oben und nicht neben dem Knopf zum Umschalten. */
|
||||
.notiz-werkzeuge { display: flex; gap: 4px; margin-bottom: 6px; }
|
||||
.notiz-wz {
|
||||
background: none;
|
||||
border: 1px solid var(--p-faint);
|
||||
color: var(--p-mid);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
width: 24px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.notiz-wz:hover:not(:disabled) { border-color: var(--p); color: var(--p); }
|
||||
.notiz-wz:disabled { opacity: 0.35; cursor: default; }
|
||||
.nw-fett { font-weight: 700; }
|
||||
|
||||
.w-fuss {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.zettel-stand { color: var(--p-dim); font-size: 11px; }
|
||||
.zettel-fuss .btn { font-size: 12px; padding: 3px 9px; }
|
||||
.w-stand { color: var(--p-dim); font-size: 11px; }
|
||||
.w-fuss .btn { font-size: 12px; padding: 3px 9px; }
|
||||
|
||||
/* ── Bild ──────────────────────────────────────────────────────────────────
|
||||
* Fester Rahmen, das Bild füllt ihn. Verzerren wäre die Alternative — und
|
||||
|
||||
Reference in new issue
Block a user