diff --git a/README.md b/README.md index 3aead7a..63f60f4 100644 --- a/README.md +++ b/README.md @@ -106,15 +106,22 @@ aus dem Browser einmalig hineingeschrieben. | `C` `G` `T` | Durchgehend · Tag-Ausrückung · Perspektive | | `D` `A` | Slide laden · alle als ZIP | -Im Bearbeiten-Modus lassen sich Elemente ziehen, mit den Pfeiltasten -pixelweise schieben (`⇧` = 10 px) und über `A−`/`A+` in der Größe ändern. -Dazu kommen im Bedienfeld: +Im Bearbeiten-Modus lassen sich Elemente ziehen und mit den Pfeiltasten +pixelweise schieben (`⇧` = 10 px). -| Feld | Wirkung | +**Ein angeklicktes Element öffnet sein eigenes Feld rechts.** Damit ist die +Oberfläche geteilt: links die Slide und alles Allgemeine, rechts das eine +Element. + +| Im Element-Feld | Wirkung | |---|---| +| `Text` | Beschriftung des Elements, `*Wort*` setzt den Akzent | +| `Schrift` / `Breite`, `A−` `A+` | Größe | | `X` `Y` | Stelle auf der Slide, gezählt ab der Mitte, bezogen auf die obere linke Ecke | | `Ebene` | wie `z-index` — höher liegt weiter vorn. Leer heißt Standard | -| `Element löschen` | nimmt es aus der Slide. Es taucht darunter als „… zurück" wieder auf | +| `Links` `Mitte` `Rechts`, `Oben` `Mitte` `Unten` | an der Slide ausrichten, 92 px Rand | +| `Position` / `Größe angleichen` | denselben Wert auf allen Slides | +| `Löschen` | nimmt es aus der Slide. Es taucht darunter als „… zurück" wieder auf | **Der Streifen ist eine durchgehende Fläche.** Jede Slide trägt das gesamte Blatt, ein Element lässt sich also über den ganzen Post schieben und nicht nur diff --git a/post1.html b/post1.html index 4c98eaa..3a1b610 100644 --- a/post1.html +++ b/post1.html @@ -49,6 +49,35 @@ } #slide-ops button { flex: none; padding: 8px 10px; } + /* Das Feld des gewaehlten Elements. Es steht rechts, damit links die Slide + und das Allgemeine bleiben und beides nicht durcheinandergeht. Es faehrt + nur bei einer Auswahl ein; die Buehne rechnet ihre Einpassung danach neu, + sonst haenge der Streifen schief. */ + .panel-rechts { + display: none; + border-right: none; border-left: 1px solid #24262F; + padding: 22px 22px 40px 22px; + } + body[data-elem="an"] .panel-rechts { display: block; } + .el-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } + .el-kopf h1 { flex: 1; margin: 0; } + .el-zu { + flex: none; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; + background: #22242C; color: #8A8F9B; border: 1px solid #2E313B; + font-family: inherit; font-size: 13px; line-height: 1; + } + .el-zu:hover { background: #2A2D36; color: #C7CCD6; } + #el-inhalt textarea { + width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px; + background: #22242C; color: #D6DAE3; border: 1px solid #2E313B; + border-radius: 7px; padding: 7px 8px; + font-family: inherit; font-size: 12px; line-height: 1.45; + } + #el-inhalt textarea:focus { outline: none; border-color: var(--accent-yellow); } + #el-inhalt .abschnitt { font-size: 11px; color: #8A8F9B; letter-spacing: .09em; + text-transform: uppercase; margin: 14px 0 6px; } + #el-inhalt .opts button { flex: 1; } + /* Zielmarke beim Ablegen einer Datei. */ .holder.ablegen::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; @@ -137,29 +166,26 @@ border-radius: 4px; padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11px; color: #C7CCD6; } - .edit-info { - font-size: 12px; line-height: 1.55; color: #C7CCD6; - background: #1D1F26; border: 1px solid #2E313B; border-radius: 8px; - padding: 9px 11px; margin-bottom: 9px; min-height: 56px; - } - .edit-info .dim { color: #6E7480; } + #el-inhalt { font-size: 12px; line-height: 1.55; color: #C7CCD6; } + #el-inhalt .dim { color: #6E7480; } /* Ziehen ist gut fuer grob, tippen fuer genau. Ohne Eingabefelder laesst sich ein Wert nicht ueber mehrere Slides hinweg exakt gleich setzen. */ - .edit-info .fields { + #el-inhalt .fields { display: grid; grid-template-columns: 42px 1fr 20px 1fr; - gap: 6px 7px; align-items: center; margin-top: 8px; + gap: 6px 7px; align-items: center; } - .edit-info label { color: #6E7480; font-size: 11px; } - .edit-info input { + #el-inhalt label { color: #6E7480; font-size: 11px; } + #el-inhalt input { width: 100%; box-sizing: border-box; background: #14161C; border: 1px solid #343845; border-radius: 6px; color: #E7EAF0; font: inherit; font-variant-numeric: tabular-nums; padding: 4px 6px; text-align: right; -moz-appearance: textfield; } - .edit-info input::-webkit-outer-spin-button, - .edit-info input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } - .edit-info input:focus { outline: none; border-color: var(--accent-yellow); } - .edit-info .hint { color: #6E7480; margin-top: 6px; } + #el-inhalt input::-webkit-outer-spin-button, + #el-inhalt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } + #el-inhalt input:focus { outline: none; border-color: var(--accent-yellow); } + #el-inhalt .hint { color: #6E7480; margin-top: 6px; } + #el-inhalt .row { margin-top: 0; } .std { margin-bottom: 22px; } .std summary { cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .09em; @@ -843,24 +869,12 @@
Bearbeiten -
+
-
Nichts ausgewählt
-
- - -
-
- - -
-
- -
+
Ein angeklicktes Element öffnet + sein eigenes Feld rechts.
@@ -982,6 +996,14 @@ + +